Shadcn UI Theme Variables Implementation from Design System

[AH-Avalanche]

Overview

This PR implements the design system's color palette and theme variables into the Shadcn UI configuration, ensuring consistent styling across the documentation site.

Key Changes

1. Theme Variables Implementation

• src/css/custom.css:
  • Added design system color variables for both light and dark themes
  • Implemented proper HSL color values for all Shadcn UI components
  • Added smooth transitions between theme states
  • Configured proper color contrast ratios

2. Color Palette Integration

/* Light Theme */
:root {
  --background: 210 20% 98.04%;
  --foreground: 220.91 39.29% 10.98%;
  --primary: 261.56 53.33% 47.06%;
  --primary-foreground: 0 0% 100%;
  /* ... other color variables ... */
}

/* Dark Theme */
[data-theme='dark'] {
  --background: 0 0% 1.96%;
  --foreground: 0 0% 90.2%;
  --primary: 258.05 71.93% 66.47%;
  --primary-foreground: 0 0% 90.2%;
  /* ... other color variables ... */
}

3. Check only these Component Updates

• src/components/ui/button.jsx:

  • Updated to use new theme variables
  • Ensured proper color application across variants
  • Added smooth transitions for state changes

• src/components/ui/theme-switcher.jsx:

  • Updated to handle new theme variables
  • Improved theme transition handling
  • Added proper icon color transitions

Testing Instructions

1. Theme Variables:

   • Verify all color variables match design system
   • Check color contrast ratios
   • Test transitions between themes

2. Component Styling:

   • Verify components use correct theme variables
   • Check hover and active states
   • Test in both light and dark modes

3. Accessibility:

   • Verify proper color contrast
   • Test focus states
   • Check text readability

test page:
/tailwind-test

Review Checklist

• Verify all color variables match design system
• Test color transitions between themes
• Check component styling in both themes
• Verify accessibility standards
• Test responsive behavior
• Ensure consistent color application

[netlify]

✅ Deploy Preview for snowplow-docs ready!

Name	Link
🔨 Latest commit	dca94ca
🔍 Latest deploy log	https://app.netlify.com/sites/snowplow-docs/deploys/6821eb30dbda1b0008aea600
😎 Deploy Preview	https://deploy-preview-1217--snowplow-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.