@wonderflow/themes/dist/themes.css

Wanda design system themes

@layer themes {
  :root,
  [data-theme='light'] {
    color: var(--global-foreground);
    /**
 * Do not edit directly
 * Generated on Fri, 19 Dec 2025 13:45:28 GMT
 */


  --global-foreground: hsl(221 10% 30%);
  --global-background: hsl(0 0% 100%);
  --global-interactive-text: hsl(214 66% 44%);
  --global-interactive-text-hover: hsl(219 93% 27%);
  --global-vibrancy-foreground: hsl(0 0% 0%);
  --global-vibrancy-background: hsl(220 16% 85% / 40%);
  --global-vibrancy-background-soft: hsl(210 20% 98% / 40%);
  --global-vibrancy-background-hard: hsl(221 10% 56% / 40%);
  --global-disabled-background: hsl(225 11% 7% / 6%);
  --global-disabled-foreground: hsl(0 0% 0% / 20%);
  --cta-default: hsl(0 100% 44%);
  --cta-dark: hsl(0 100% 38%);
  --cta-foreground: hsl(0 0% 100%);
  --dimmed-0: hsl(210 20% 98%);
  --dimmed-1: hsl(220 19% 91%);
  --dimmed-2: hsl(220 16% 85%);
  --dimmed-3: hsl(219 14% 75%);
  --dimmed-4: hsl(220 12% 66%);
  --dimmed-5: hsl(221 9% 49%);
  --dimmed-6: hsl(221 10% 39%);
  --dimmed-7: hsl(221 10% 30%);
  --dimmed-8: hsl(219 13% 22%);
  --dimmed-9: hsl(218 11% 14%);
  --highlight-gray-background: hsl(220 19% 91%);
  --highlight-gray-foreground: hsl(221 10% 39%);
  --highlight-yellow-background: hsl(60 100% 89%);
  --highlight-yellow-foreground: hsl(25 100% 34%);
  --highlight-green-background: hsl(149 100% 91%);
  --highlight-green-foreground: hsl(156 100% 23%);
  --highlight-blue-background: hsl(187 100% 89%);
  --highlight-blue-foreground: hsl(214 66% 44%);
  --highlight-red-background: hsl(343 100% 96%);
  --highlight-red-foreground: hsl(351 92% 37%);
  --highlight-cyan-background: hsl(186 100% 96%);
  --highlight-cyan-foreground: hsl(187 64% 33%);
  --highlight-purple-background: hsl(300 100% 98%);
  --highlight-purple-foreground: hsl(298 32% 46%);
  --highlight-magenta-background: hsl(327 73% 97%);
  --highlight-magenta-foreground: hsl(324 60% 44%);
  --highlight-violet-background: hsl(257 47% 97%);
  --highlight-violet-foreground: hsl(263 50% 49%);
  --highlight-indigo-background: hsl(240 60% 98%);
  --highlight-indigo-foreground: hsl(241 60% 56%);
  --highlight-mint-background: hsl(165 62% 95%);
  --highlight-mint-foreground: hsl(165 59% 30%);
  --highlight-dipsy-background: hsl(81 55% 94%);
  --highlight-dipsy-foreground: hsl(83 80% 24%);
  --highlight-salmon-background: hsl(16 73% 97%);
  --highlight-salmon-foreground: hsl(15 66% 45%);


  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      color: var(--global-foreground);
      /**
 * Do not edit directly
 * Generated on Fri, 19 Dec 2025 13:45:31 GMT
 */


  --global-foreground: hsl(220 16% 85%);
  --global-background: hsl(0 0% 0%);
  --global-interactive-text: hsl(206 72% 67%);
  --global-interactive-text-hover: hsl(200 100% 83%);
  --global-vibrancy-foreground: hsl(0 0% 100%);
  --global-vibrancy-background: hsl(218 11% 14% / 80%);
  --global-vibrancy-background-soft: hsl(225 11% 7% / 80%);
  --global-vibrancy-background-hard: hsl(219 13% 22% / 80%);
  --global-disabled-background: hsl(221 9% 49% / 35%);
  --global-disabled-foreground: hsl(0 0% 100% / 20%);
  --cta-default: hsl(0 100% 44%);
  --cta-dark: hsl(0 100% 38%);
  --cta-foreground: hsl(0 0% 100%);
  --dimmed-0: hsl(225 11% 7%);
  --dimmed-1: hsl(218 11% 14%);
  --dimmed-2: hsl(219 13% 22%);
  --dimmed-3: hsl(221 10% 30%);
  --dimmed-4: hsl(221 10% 39%);
  --dimmed-5: hsl(221 9% 49%);
  --dimmed-6: hsl(220 12% 66%);
  --dimmed-7: hsl(220 19% 91%);
  --dimmed-8: hsl(210 20% 98%);
  --dimmed-9: hsl(0 0% 100%);
  --highlight-gray-background: hsl(218 11% 14%);
  --highlight-gray-foreground: hsl(220 12% 66%);
  --highlight-yellow-background: hsl(22 100% 19%);
  --highlight-yellow-foreground: hsl(38 100% 77%);
  --highlight-green-background: hsl(166 100% 13%);
  --highlight-green-foreground: hsl(145 76% 75%);
  --highlight-blue-background: hsl(222 100% 17%);
  --highlight-blue-foreground: hsl(200 100% 83%);
  --highlight-red-background: hsl(350 100% 15%);
  --highlight-red-foreground: hsl(351 100% 81%);
  --highlight-cyan-background: hsl(186 67% 18%);
  --highlight-cyan-foreground: hsl(187 57% 58%);
  --highlight-purple-background: hsl(298 41% 25%);
  --highlight-purple-foreground: hsl(298 47% 75%);
  --highlight-magenta-background: hsl(324 71% 16%);
  --highlight-magenta-foreground: hsl(324 70% 74%);
  --highlight-violet-background: hsl(263 50% 18%);
  --highlight-violet-foreground: hsl(263 50% 75%);
  --highlight-indigo-background: hsl(241 61% 16%);
  --highlight-indigo-foreground: hsl(240 52% 74%);
  --highlight-mint-background: hsl(166 64% 13%);
  --highlight-mint-foreground: hsl(166 60% 55%);
  --highlight-dipsy-background: hsl(82 68% 17%);
  --highlight-dipsy-foreground: hsl(83 54% 49%);
  --highlight-salmon-background: hsl(14 69% 19%);
  --highlight-salmon-foreground: hsl(15 70% 68%);


    }
  }
  [data-theme='dark'],
  :root[data-theme='dark'] {
    color: var(--global-foreground);
    /**
 * Do not edit directly
 * Generated on Fri, 19 Dec 2025 13:45:31 GMT
 */


  --global-foreground: hsl(220 16% 85%);
  --global-background: hsl(0 0% 0%);
  --global-interactive-text: hsl(206 72% 67%);
  --global-interactive-text-hover: hsl(200 100% 83%);
  --global-vibrancy-foreground: hsl(0 0% 100%);
  --global-vibrancy-background: hsl(218 11% 14% / 80%);
  --global-vibrancy-background-soft: hsl(225 11% 7% / 80%);
  --global-vibrancy-background-hard: hsl(219 13% 22% / 80%);
  --global-disabled-background: hsl(221 9% 49% / 35%);
  --global-disabled-foreground: hsl(0 0% 100% / 20%);
  --cta-default: hsl(0 100% 44%);
  --cta-dark: hsl(0 100% 38%);
  --cta-foreground: hsl(0 0% 100%);
  --dimmed-0: hsl(225 11% 7%);
  --dimmed-1: hsl(218 11% 14%);
  --dimmed-2: hsl(219 13% 22%);
  --dimmed-3: hsl(221 10% 30%);
  --dimmed-4: hsl(221 10% 39%);
  --dimmed-5: hsl(221 9% 49%);
  --dimmed-6: hsl(220 12% 66%);
  --dimmed-7: hsl(220 19% 91%);
  --dimmed-8: hsl(210 20% 98%);
  --dimmed-9: hsl(0 0% 100%);
  --highlight-gray-background: hsl(218 11% 14%);
  --highlight-gray-foreground: hsl(220 12% 66%);
  --highlight-yellow-background: hsl(22 100% 19%);
  --highlight-yellow-foreground: hsl(38 100% 77%);
  --highlight-green-background: hsl(166 100% 13%);
  --highlight-green-foreground: hsl(145 76% 75%);
  --highlight-blue-background: hsl(222 100% 17%);
  --highlight-blue-foreground: hsl(200 100% 83%);
  --highlight-red-background: hsl(350 100% 15%);
  --highlight-red-foreground: hsl(351 100% 81%);
  --highlight-cyan-background: hsl(186 67% 18%);
  --highlight-cyan-foreground: hsl(187 57% 58%);
  --highlight-purple-background: hsl(298 41% 25%);
  --highlight-purple-foreground: hsl(298 47% 75%);
  --highlight-magenta-background: hsl(324 71% 16%);
  --highlight-magenta-foreground: hsl(324 70% 74%);
  --highlight-violet-background: hsl(263 50% 18%);
  --highlight-violet-foreground: hsl(263 50% 75%);
  --highlight-indigo-background: hsl(241 61% 16%);
  --highlight-indigo-foreground: hsl(240 52% 74%);
  --highlight-mint-background: hsl(166 64% 13%);
  --highlight-mint-foreground: hsl(166 60% 55%);
  --highlight-dipsy-background: hsl(82 68% 17%);
  --highlight-dipsy-foreground: hsl(83 54% 49%);
  --highlight-salmon-background: hsl(14 69% 19%);
  --highlight-salmon-foreground: hsl(15 70% 68%);


  }
}