Styling & Theme variables

Using utility classes as an API for your design tokens.

/* 
 * Define theme variables
 * Read more: https://tailwindcss.com/docs/colors#referencing-other-variables
 */
:root {
  /* Colors */
  --yt-color-background: #f3f3f6;
  --yt-color-foreground: #2f3133;
  --yt-color-card: hsl(0 0% 100%);
  --yt-color-card-foreground: hsl(0 0% 3.9%);
  --yt-color-popover: hsl(0 2% 21%);
  --yt-color-popover-foreground: hsl(0 0% 100%);
  --yt-color-primary: rgb(192 38 211);
  --yt-color-primary-foreground: hsl(0 0% 100%);
  --yt-color-secondary: hsl(240 4.8% 95.9%);
  --yt-color-secondary-foreground: hsl(240 5.9% 10%);
  --yt-color-muted: hsl(240 4.8% 95.9%);
  --yt-color-muted-foreground: hsl(0 0% 28.24%);
  --yt-color-accent: black;
  --yt-color-accent-foreground: white;
  --yt-color-destructive: hsl(0 72.22% 50.59%);
  --yt-color-destructive-foreground: hsl(0 0% 98%);

  --yt-color-border: hsl(0 0% 89.8%);
  --yt-color-input: hsl(0 0% 89.8%);
  --yt-color-ring: hsl(0 0% 3.9%);

  /* Base radius */
  --yt-radius: 0.5rem;
}

.dark {
  /* Colors */
  --yt-color-background: #0c0e11;
  --yt-color-foreground: #c6c6c9;
  --yt-color-card: hsl(220 6% 10%);
  --yt-color-card-foreground: hsl(0 0% 98%);
  --yt-color-popover: hsl(0 0% 3.9%);
  --yt-color-popover-foreground: hsl(0 0% 98%);
  --yt-color-primary: rgb(110 231 183);
  --yt-color-primary-foreground: hsl(0 0% 100%);
  --yt-color-secondary: hsl(25 100% 90%);
  --yt-color-secondary-foreground: hsl(25 100% 40%);
  --yt-color-muted: hsl(240 3.7% 15.9%);
  --yt-color-muted-foreground: hsl(240 5% 70%);
  --yt-color-accent: white;
  --yt-color-accent-foreground: black;
  --yt-color-destructive: hsl(0 62.8% 30.6%);
  --yt-color-destructive-foreground: hsl(0 0% 98%);
  --yt-color-border: hsl(0 0% 14.9%);
  --yt-color-input: hsl(0 0% 25%);
  --yt-color-ring: hsl(0 0% 83.1%);
}