@uxf/ui 11.34.1 → 11.36.0

package/css/colors-dark.css

@@ -0,0 +1,118 @@
+/* Color tokens */
+:root {
+    /* Dark */
+    /* color */
+    --base-border-border: hsl(0 0 100% / 0.12);
+    --base-border-input: hsl(0 0 100% / 0.2);
+    --base-border-inverted-border: hsl(218 28% 17% / 0.12);
+    --base-border-inverted-input: hsl(218 28% 17% / 0.2);
+    --base-icon-disabled: hsl(0 0 100% / 0.5);
+    --base-icon-high-emphasis: var(--base-white);
+    --base-icon-low-emphasis: hsl(0 0 100% / 0.75);
+    --base-icon-medium-emphasis: hsl(0 0 100% / 0.75);
+    --base-icon-inverted-low-emphasis: var(--grayneutral-900);
+    --base-icon-inverted-disabled: var(--grayneutral-900);
+    --base-icon-inverted-high-emphasis: var(--grayneutral-900);
+    --base-shadow-shadow-md: hsl(0 0 100% / 0);
+    --base-shadow-shadow-sm: hsl(0 0 100% / 0);
+    --base-surface-background: var(--grayneutral-800);
+    --base-surface-disabled: hsl(0 0 100% / 0.2);
+    --base-surface-input: var(--grayneutral-900);
+    --base-surface-input-disabled: var(--grayneutral-600);
+    --base-surface-input-hover: var(--grayneutral-800);
+    --base-surface-main: var(--grayneutral-900);
+    --base-surface-main-hover: var(--grayneutral-800);
+    --base-surface-popup: var(--grayneutral-800);
+    --base-surface-tooltip: var(--grayneutral-50);
+    --base-surface-inverted-default: hsl(218 28% 17%);
+    --base-surface-inverted-default-hover: hsl(218 28% 17% / 0.9);
+    --base-surface-inverted-disabled: var(--grayneutral-500);
+    --base-surface-inverted-main: hsl(218 28% 17% / 0.08);
+    --base-surface-inverted-main-hover: hsl(218 28% 17% / 0.16);
+    --base-text-disabled: hsl(0 0 100% / 0.6);
+    --base-text-high-emphasis: hsl(0 0 100%);
+    --base-text-link: var(--base-white);
+    --base-text-link-pressed: var(--base-white);
+    --base-text-low-emphasis: hsl(0 0 100% / 0.8);
+    --base-text-inverted-disabled: hsl(218 28% 17% / 0.7);
+    --base-text-inverted-high-emphasis: var(--grayneutral-900);
+    --base-text-inverted-link: var(--grayneutral-900);
+    --base-text-inverted-low-emphasis: hsl(218 28% 17% / 0.8);
+    --brand-border: var(--bluedark-600);
+    --brand-icon: var(--bluedark-400);
+    --brand-icon-on-muted: var(--bluedark-300);
+    --brand-text: var(--base-white);
+    --brand-text-on-muted: var(--bluedark-200);
+    --brand-surface-bolder: var(--bluedark-200);
+    --brand-surface-bolder-hover: var(--bluedark-100);
+    --brand-surface-default: var(--bluedark-400);
+    --brand-surface-default-hover: var(--bluedark-300);
+    --brand-surface-muted: var(--bluedark-800);
+    --brand-surface-muted-hover: var(--bluedark-700);
+    --brand-surface-subtle: var(--bluedark-900);
+    --brand-surface-subtle-hover: var(--bluedark-800);
+    --info-border: var(--grayblue-600);
+    --info-icon: var(--grayblue-300);
+    --info-icon-on-muted: var(--grayblue-300);
+    --info-text: var(--grayblue-300);
+    --info-text-on-muted: var(--grayblue-200);
+    --info-surface-default: var(--grayblue-300);
+    --info-surface-default-hover: var(--grayblue-200);
+    --info-surface-muted: var(--grayblue-800);
+    --info-surface-muted-hover: var(--grayblue-700);
+    --info-surface-subtle: var(--grayblue-900);
+    --info-surface-subtle-hover: var(--grayblue-800);
+    --inverted-border: hsl(0 0 100%);
+    --inverted-icon: hsl(0 0 100%);
+    --inverted-icon-on-muted: hsl(0 0 100%);
+    --inverted-text-default: hsl(0 0 100%);
+    --inverted-text-disabled: hsl(0 0 100%);
+    --inverted-text-muted: hsl(0 0 100%);
+    --inverted-text-on-muted: hsl(0 0 100%);
+    --negative-border: var(--error-600);
+    --negative-icon: var(--error-400);
+    --negative-icon-on-muted: var(--error-200);
+    --negative-text: var(--error-300);
+    --negative-text-on-muted: var(--error-200);
+    --negative-surface-default: var(--error-400);
+    --negative-surface-default-hover: var(--error-300);
+    --negative-surface-muted: var(--error-800);
+    --negative-surface-muted-hover: var(--error-700);
+    --negative-surface-subtle: var(--error-900);
+    --negative-surface-subtle-hover: var(--error-800);
+    --neutral-border: var(--grayneutral-600);
+    --neutral-icon: var(--grayneutral-400);
+    --neutral-icon-on-muted: var(--grayneutral-200);
+    --neutral-text: var(--grayneutral-300);
+    --neutral-text-on-muted: var(--grayneutral-200);
+    --neutral-surface-bolder: hsl(0 0 100%);
+    --neutral-surface-bolder-hover: hsl(0 0 100%);
+    --neutral-surface-default: var(--grayneutral-400);
+    --neutral-surface-default-hover: var(--grayneutral-300);
+    --neutral-surface-muted: var(--grayneutral-700);
+    --neutral-surface-muted-hover: var(--grayneutral-600);
+    --neutral-surface-subtle: var(--grayneutral-800);
+    --neutral-surface-subtle-hover: var(--grayneutral-700);
+    --positive-border: var(--success-600);
+    --positive-icon: var(--success-400);
+    --positive-icon-on-muted: var(--success-300);
+    --positive-text: var(--success-300);
+    --positive-text-on-muted: var(--success-200);
+    --positive-surface-default: var(--green-400);
+    --positive-surface-default-hover: var(--green-300);
+    --positive-surface-muted: var(--green-800);
+    --positive-surface-muted-hover: var(--green-700);
+    --positive-surface-subtle: var(--green-900);
+    --positive-surface-subtle-hover: var(--green-800);
+    --warning-border: var(--warning-600);
+    --warning-icon: var(--warning-400);
+    --warning-icon-on-muted: var(--warning-300);
+    --warning-text: var(--warning-300);
+    --warning-text-on-muted: var(--warning-200);
+    --warning-surface-default: var(--warning-400);
+    --warning-surface-default-hover: var(--warning-300);
+    --warning-surface-muted: var(--warning-800);
+    --warning-surface-muted-hover: var(--warning-700);
+    --warning-surface-subtle: var(--warning-900);
+    --warning-surface-subtle-hover: var(--warning-800);
+}

package/css/colors-light.css

@@ -0,0 +1,118 @@
+/* Color tokens */
+:root {
+  /* Light */
+  /* color */
+  --base-border-border: var(--grayneutral-200);
+  --base-border-input: var(--grayneutral-300);
+  --base-border-inverted-border: hsl(0 0 100% / 0.12);
+  --base-border-inverted-input: hsl(0 0 100% / 0.2);
+  --base-icon-disabled: var(--grayneutral-500);
+  --base-icon-high-emphasis: var(--grayneutral-900);
+  --base-icon-low-emphasis: var(--grayneutral-700);
+  --base-icon-medium-emphasis: var(--grayneutral-700);
+  --base-icon-inverted-low-emphasis: hsl(0 0 100% / 0.75);
+  --base-icon-inverted-disabled: hsl(0 0 100% / 0.5);
+  --base-icon-inverted-high-emphasis: var(--base-white);
+  --base-shadow-shadow-md: hsl(218 28% 17% / 0.1);
+  --base-shadow-shadow-sm: hsl(218 28% 17% / 0.05);
+  --base-surface-background: var(--grayneutral-50);
+  --base-surface-disabled: var(--grayneutral-300);
+  --base-surface-input: var(--base-white);
+  --base-surface-input-disabled: var(--grayneutral-100);
+  --base-surface-input-hover: var(--grayneutral-50);
+  --base-surface-main: var(--base-white);
+  --base-surface-main-hover: var(--grayneutral-100);
+  --base-surface-popup: var(--base-white);
+  --base-surface-tooltip: var(--grayneutral-700);
+  --base-surface-inverted-default: hsl(0 0 100%);
+  --base-surface-inverted-default-hover: hsl(0 0 100% / 0.9);
+  --base-surface-inverted-disabled: var(--grayneutral-300);
+  --base-surface-inverted-main: hsl(0 0 100% / 0.08);
+  --base-surface-inverted-main-hover: hsl(0 0 100% / 0.16);
+  --base-text-disabled: var(--grayneutral-500);
+  --base-text-high-emphasis: var(--grayneutral-900);
+  --base-text-link: var(--grayneutral-900);
+  --base-text-link-pressed: var(--grayneutral-900);
+  --base-text-low-emphasis: var(--grayneutral-700);
+  --base-text-inverted-disabled: hsl(0 0 100% / 0.7);
+  --base-text-inverted-high-emphasis: var(--base-white);
+  --base-text-inverted-link: var(--base-white);
+  --base-text-inverted-low-emphasis: hsl(0 0 100% / 0.8);
+  --brand-border: var(--bluedark-300);
+  --brand-icon: var(--bluedark-900);
+  --brand-icon-on-muted: var(--bluedark-700);
+  --brand-text: var(--bluedark-900);
+  --brand-text-on-muted: var(--bluedark-900);
+  --brand-surface-bolder: var(--bluedark-800);
+  --brand-surface-bolder-hover: var(--bluedark-900);
+  --brand-surface-default: var(--bluedark-600);
+  --brand-surface-default-hover: var(--bluedark-700);
+  --brand-surface-muted: var(--bluedark-100);
+  --brand-surface-muted-hover: var(--bluedark-200);
+  --brand-surface-subtle: var(--bluedark-50);
+  --brand-surface-subtle-hover: var(--bluedark-100);
+  --info-border: var(--grayblue-300);
+  --info-icon: var(--grayblue-500);
+  --info-icon-on-muted: var(--grayblue-700);
+  --info-text: var(--grayblue-600);
+  --info-text-on-muted: var(--grayblue-800);
+  --info-surface-default: var(--grayblue-600);
+  --info-surface-default-hover: var(--graycool-700);
+  --info-surface-muted: var(--graycool-100);
+  --info-surface-muted-hover: var(--graycool-200);
+  --info-surface-subtle: var(--graycool-50);
+  --info-surface-subtle-hover: var(--graycool-100);
+  --inverted-border: hsl(0 0 100%);
+  --inverted-icon: hsl(0 0 100%);
+  --inverted-icon-on-muted: hsl(0 0 100%);
+  --inverted-text-default: hsl(0 0 100%);
+  --inverted-text-disabled: hsl(0 0 100%);
+  --inverted-text-muted: hsl(0 0 100%);
+  --inverted-text-on-muted: hsl(0 0 100%);
+  --negative-border: var(--error-300);
+  --negative-icon: var(--error-600);
+  --negative-icon-on-muted: var(--error-700);
+  --negative-text: var(--error-600);
+  --negative-text-on-muted: var(--error-800);
+  --negative-surface-default: var(--error-600);
+  --negative-surface-default-hover: var(--error-700);
+  --negative-surface-muted: var(--error-100);
+  --negative-surface-muted-hover: var(--error-200);
+  --negative-surface-subtle: var(--error-50);
+  --negative-surface-subtle-hover: var(--error-100);
+  --neutral-border: var(--grayneutral-300);
+  --neutral-icon: var(--grayneutral-500);
+  --neutral-icon-on-muted: var(--grayneutral-700);
+  --neutral-text: var(--grayneutral-600);
+  --neutral-text-on-muted: var(--grayneutral-800);
+  --neutral-surface-bolder: var(--grayneutral-800);
+  --neutral-surface-bolder-hover: var(--grayneutral-900);
+  --neutral-surface-default: var(--grayneutral-600);
+  --neutral-surface-default-hover: var(--grayneutral-700);
+  --neutral-surface-muted: var(--grayneutral-200);
+  --neutral-surface-muted-hover: var(--grayneutral-300);
+  --neutral-surface-subtle: var(--grayneutral-50);
+  --neutral-surface-subtle-hover: var(--grayneutral-100);
+  --positive-border: var(--success-300);
+  --positive-icon: var(--success-500);
+  --positive-icon-on-muted: var(--success-700);
+  --positive-text: var(--success-700);
+  --positive-text-on-muted: var(--success-800);
+  --positive-surface-default: var(--green-600);
+  --positive-surface-default-hover: var(--green-700);
+  --positive-surface-muted: var(--green-100);
+  --positive-surface-muted-hover: var(--green-200);
+  --positive-surface-subtle: var(--green-50);
+  --positive-surface-subtle-hover: var(--green-100);
+  --warning-border: var(--warning-300);
+  --warning-icon: var(--warning-600);
+  --warning-icon-on-muted: var(--warning-700);
+  --warning-text: var(--warning-700);
+  --warning-text-on-muted: var(--warning-800);
+  --warning-surface-default: var(--warning-600);
+  --warning-surface-default-hover: var(--warning-700);
+  --warning-surface-muted: var(--warning-100);
+  --warning-surface-muted-hover: var(--warning-200);
+  --warning-surface-subtle: var(--warning-50);
+  --warning-surface-subtle-hover: var(--warning-100);
+}

package/css/colors-primitives.css

@@ -0,0 +1,312 @@
+/* Primitives */
+:root {
+  /* Mode 1 */
+  /* color */
+  --base-black: hsl(0 0 0%);
+  --base-white: hsl(0 0 100%);
+  --bluedark-100: hsl(220 100% 91%);
+  --bluedark-200: hsl(221 100% 85%);
+  --bluedark-25: hsl(222 100% 98%);
+  --bluedark-300: hsl(220 100% 76%);
+  --bluedark-400: hsl(220 100% 66%);
+  --bluedark-50: hsl(221 100% 97%);
+  --bluedark-500: hsl(220 99% 58%);
+  --bluedark-600: hsl(220 86% 51%);
+  --bluedark-700: hsl(220 100% 46%);
+  --bluedark-800: hsl(220 100% 38%);
+  --bluedark-900: hsl(220 100% 31%);
+  --bluelight-100: hsl(204 94% 94%);
+  --bluelight-200: hsl(201 97% 86%);
+  --bluelight-25: hsl(207 100% 98%);
+  --bluelight-300: hsl(199 97% 74%);
+  --bluelight-400: hsl(198 94% 59%);
+  --bluelight-50: hsl(204 100% 97%);
+  --bluelight-500: hsl(199 91% 48%);
+  --bluelight-600: hsl(200 100% 39%);
+  --bluelight-700: hsl(201 99% 32%);
+  --bluelight-800: hsl(201 91% 27%);
+  --bluelight-900: hsl(202 83% 24%);
+  --cyan-100: hsl(186 96% 90%);
+  --cyan-200: hsl(188 91% 82%);
+  --cyan-300: hsl(189 92% 69%);
+  --cyan-400: hsl(190 85% 53%);
+  --cyan-50: hsl(186 100% 96%);
+  --cyan-500: hsl(191 95% 43%);
+  --cyan-600: hsl(194 92% 36%);
+  --cyan-700: hsl(195 83% 31%);
+  --cyan-800: hsl(196 70% 27%);
+  --cyan-900: hsl(198 65% 24%);
+  --error-100: hsl(4 93% 94%);
+  --error-200: hsl(3 96% 89%);
+  --error-25: hsl(12 100% 99%);
+  --error-300: hsl(4 94% 80%);
+  --error-400: hsl(4 92% 69%);
+  --error-50: hsl(5 86% 97%);
+  --error-500: hsl(4 86% 58%);
+  --error-600: hsl(4 74% 49%);
+  --error-700: hsl(4 76% 40%);
+  --error-800: hsl(4 72% 33%);
+  --error-900: hsl(8 66% 29%);
+  --fuchsia-100: hsl(290 100% 95%);
+  --fuchsia-200: hsl(290 96% 91%);
+  --fuchsia-25: hsl(288 100% 99%);
+  --fuchsia-300: hsl(289 93% 83%);
+  --fuchsia-400: hsl(290 93% 72%);
+  --fuchsia-50: hsl(289 100% 98%);
+  --fuchsia-500: hsl(290 86% 61%);
+  --fuchsia-600: hsl(291 71% 49%);
+  --fuchsia-700: hsl(293 74% 40%);
+  --fuchsia-800: hsl(293 71% 33%);
+  --fuchsia-900: hsl(295 66% 28%);
+  --gray-100: hsl(216 24% 96%);
+  --gray-200: hsl(220 17% 93%);
+  --gray-25: hsl(240 20% 99%);
+  --gray-300: hsl(217 16% 84%);
+  --gray-400: hsl(219 14% 65%);
+  --gray-50: hsl(210 20% 98%);
+  --gray-500: hsl(221 13% 46%);
+  --gray-600: hsl(216 18% 34%);
+  --gray-700: hsl(217 24% 27%);
+  --gray-800: hsl(214 33% 17%);
+  --gray-900: hsl(220 43% 11%);
+  --grayblue-100: hsl(229 35% 94%);
+  --grayblue-200: hsl(229 35% 88%);
+  --grayblue-25: hsl(240 20% 99%);
+  --grayblue-300: hsl(233 36% 78%);
+  --grayblue-400: hsl(232 36% 59%);
+  --grayblue-50: hsl(225 40% 98%);
+  --grayblue-500: hsl(231 36% 48%);
+  --grayblue-600: hsl(232 36% 38%);
+  --grayblue-700: hsl(231 37% 33%);
+  --grayblue-800: hsl(231 35% 25%);
+  --grayblue-900: hsl(231 37% 10%);
+  --graycool-100: hsl(220 23% 95%);
+  --graycool-200: hsl(227 25% 89%);
+  --graycool-25: hsl(240 20% 99%);
+  --graycool-300: hsl(224 24% 78%);
+  --graycool-400: hsl(226 24% 59%);
+  --graycool-50: hsl(240 20% 98%);
+  --graycool-500: hsl(227 24% 48%);
+  --graycool-600: hsl(226 24% 38%);
+  --graycool-700: hsl(227 24% 33%);
+  --graycool-800: hsl(226 24% 25%);
+  --graycool-900: hsl(233 33% 10%);
+  --grayiron-100: hsl(240 5% 96%);
+  --grayiron-200: hsl(240 6% 90%);
+  --grayiron-300: hsl(240 6% 83%);
+  --grayiron-400: hsl(240 6% 65%);
+  --grayiron-50: hsl(0 0 98%);
+  --grayiron-500: hsl(240 5% 46%);
+  --grayiron-600: hsl(235 6% 34%);
+  --grayiron-700: hsl(240 5% 26%);
+  --grayiron-800: hsl(228 6% 16%);
+  --grayiron-900: hsl(240 6% 10%);
+  --graymodern-100: hsl(210 31% 95%);
+  --graymodern-200: hsl(215 27% 91%);
+  --graymodern-25: hsl(240 20% 99%);
+  --graymodern-300: hsl(213 22% 84%);
+  --graymodern-400: hsl(215 13% 65%);
+  --graymodern-50: hsl(210 40% 98%);
+  --graymodern-500: hsl(215 12% 47%);
+  --graymodern-600: hsl(217 15% 35%);
+  --graymodern-700: hsl(216 21% 27%);
+  --graymodern-800: hsl(218 28% 17%);
+  --graymodern-900: hsl(219 36% 11%);
+  --grayneutral-100: hsl(220 14% 96%);
+  --grayneutral-200: hsl(220 13% 91%);
+  --grayneutral-25: hsl(240 20% 99%);
+  --grayneutral-300: hsl(213 11% 84%);
+  --grayneutral-400: hsl(215 9% 65%);
+  --grayneutral-50: hsl(210 20% 98%);
+  --grayneutral-500: hsl(220 8% 46%);
+  --grayneutral-600: hsl(210 11% 34%);
+  --grayneutral-700: hsl(215 18% 27%);
+  --grayneutral-800: hsl(212 28% 17%);
+  --grayneutral-900: hsl(218 39% 11%);
+  --graytrue-100: hsl(0 0 96%);
+  --graytrue-200: hsl(0 0 90%);
+  --graytrue-25: hsl(0 0 99%);
+  --graytrue-300: hsl(0 0 84%);
+  --graytrue-400: hsl(0 0 64%);
+  --graytrue-50: hsl(0 0 98%);
+  --graytrue-500: hsl(0 0 45%);
+  --graytrue-600: hsl(0 0 32%);
+  --graytrue-700: hsl(0 0 26%);
+  --graytrue-800: hsl(0 0 16%);
+  --graytrue-900: hsl(0 0 8%);
+  --graywarm-100: hsl(60 5% 96%);
+  --graywarm-200: hsl(20 6% 90%);
+  --graywarm-25: hsl(60 20% 99%);
+  --graywarm-300: hsl(26 8% 83%);
+  --graywarm-400: hsl(25 7% 64%);
+  --graywarm-50: hsl(60 9% 98%);
+  --graywarm-500: hsl(26 6% 45%);
+  --graywarm-600: hsl(33 5% 32%);
+  --graywarm-700: hsl(30 6% 25%);
+  --graywarm-800: hsl(12 6% 15%);
+  --graywarm-900: hsl(24 10% 10%);
+  --green-100: hsl(139 73% 90%);
+  --green-200: hsl(142 68% 80%);
+  --green-25: hsl(143 80% 98%);
+  --green-300: hsl(146 66% 67%);
+  --green-400: hsl(148 58% 52%);
+  --green-50: hsl(140 71% 96%);
+  --green-500: hsl(150 78% 39%);
+  --green-600: hsl(151 88% 30%);
+  --green-700: hsl(153 87% 24%);
+  --green-800: hsl(153 82% 20%);
+  --green-900: hsl(154 81% 16%);
+  --greenlight-100: hsl(91 85% 89%);
+  --greenlight-200: hsl(91 85% 82%);
+  --greenlight-25: hsl(87 82% 98%);
+  --greenlight-300: hsl(92 81% 67%);
+  --greenlight-400: hsl(93 74% 55%);
+  --greenlight-50: hsl(89 92% 95%);
+  --greenlight-500: hsl(94 75% 44%);
+  --greenlight-600: hsl(95 86% 34%);
+  --greenlight-700: hsl(96 80% 27%);
+  --greenlight-800: hsl(96 70% 23%);
+  --greenlight-900: hsl(98 63% 20%);
+  --indigo-100: hsl(221 100% 94%);
+  --indigo-200: hsl(223 96% 89%);
+  --indigo-25: hsl(222 100% 98%);
+  --indigo-300: hsl(224 96% 82%);
+  --indigo-400: hsl(228 91% 74%);
+  --indigo-50: hsl(219 100% 97%);
+  --indigo-500: hsl(233 86% 66%);
+  --indigo-600: hsl(237 77% 59%);
+  --indigo-700: hsl(239 60% 50%);
+  --indigo-800: hsl(238 57% 41%);
+  --indigo-900: hsl(236 49% 34%);
+  --moss-100: hsl(89 57% 90%);
+  --moss-200: hsl(89 58% 80%);
+  --moss-25: hsl(90 60% 98%);
+  --moss-300: hsl(89 59% 67%);
+  --moss-400: hsl(89 58% 52%);
+  --moss-50: hsl(88 62% 96%);
+  --moss-500: hsl(89 58% 39%);
+  --moss-600: hsl(89 57% 30%);
+  --moss-700: hsl(89 58% 24%);
+  --moss-800: hsl(89 58% 20%);
+  --moss-900: hsl(89 57% 16%);
+  --orange-100: hsl(31 86% 92%);
+  --orange-200: hsl(36 84% 83%);
+  --orange-25: hsl(33 82% 98%);
+  --orange-300: hsl(27 89% 72%);
+  --orange-400: hsl(23 88% 61%);
+  --orange-50: hsl(30 89% 96%);
+  --orange-500: hsl(21 87% 53%);
+  --orange-600: hsl(17 82% 48%);
+  --orange-700: hsl(13 80% 40%);
+  --orange-800: hsl(11 72% 34%);
+  --orange-900: hsl(11 68% 28%);
+  --orangedark-100: hsl(23 100% 92%);
+  --orangedark-25: hsl(24 100% 98%);
+  --orangedark-300: hsl(21 100% 70%);
+  --orangedark-400: hsl(17 99% 59%);
+  --orangedark-50: hsl(20 100% 96%);
+  --orangedark-500: hsl(15 100% 51%);
+  --orangedark-600: hsl(11 97% 46%);
+  --orangedark-700: hsl(7 95% 38%);
+  --orangedark-800: hsl(5 85% 32%);
+  --orangedark-900: hsl(7 80% 26%);
+  --pink-100: hsl(317 78% 95%);
+  --pink-200: hsl(318 88% 90%);
+  --pink-25: hsl(323 80% 98%);
+  --pink-300: hsl(319 87% 82%);
+  --pink-400: hsl(321 87% 70%);
+  --pink-50: hsl(316 73% 97%);
+  --pink-500: hsl(318 83% 60%);
+  --pink-600: hsl(325 72% 50%);
+  --pink-700: hsl(327 80% 42%);
+  --pink-800: hsl(328 77% 35%);
+  --pink-900: hsl(328 72% 30%);
+  --primary-100: hsl(267 100% 96%);
+  --primary-200: hsl(268 95% 92%);
+  --primary-25: hsl(264 100% 99%);
+  --primary-300: hsl(265 89% 86%);
+  --primary-400: hsl(262 85% 77%);
+  --primary-50: hsl(264 100% 98%);
+  --primary-500: hsl(260 77% 70%);
+  --primary-600: hsl(258 63% 59%);
+  --primary-700: hsl(258 54% 51%);
+  --primary-800: hsl(256 48% 42%);
+  --primary-900: hsl(255 45% 34%);
+  --purple-100: hsl(246 91% 95%);
+  --purple-200: hsl(245 95% 92%);
+  --purple-25: hsl(240 100% 99%);
+  --purple-300: hsl(247 95% 85%);
+  --purple-400: hsl(249 93% 76%);
+  --purple-50: hsl(245 100% 98%);
+  --purple-500: hsl(252 92% 66%);
+  --purple-600: hsl(256 84% 58%);
+  --purple-700: hsl(257 72% 50%);
+  --purple-800: hsl(257 71% 42%);
+  --purple-900: hsl(257 69% 35%);
+  --rosé-100: hsl(351 100% 95%);
+  --rosé-200: hsl(349 96% 90%);
+  --rosé-25: hsl(354 100% 98%);
+  --rosé-300: hsl(349 98% 82%);
+  --rosé-400: hsl(347 96% 71%);
+  --rosé-50: hsl(351 100% 97%);
+  --rosé-500: hsl(346 90% 60%);
+  --rosé-600: hsl(343 79% 50%);
+  --rosé-700: hsl(341 86% 41%);
+  --rosé-800: hsl(339 83% 35%);
+  --rosé-900: hsl(338 78% 30%);
+  --success-100: hsl(140 80% 90%);
+  --success-200: hsl(144 78% 80%);
+  --success-25: hsl(143 80% 98%);
+  --success-300: hsl(148 74% 67%);
+  --success-400: hsl(150 66% 51%);
+  --success-50: hsl(145 81% 96%);
+  --success-500: hsl(152 82% 39%);
+  --success-600: hsl(153 96% 30%);
+  --success-700: hsl(155 97% 24%);
+  --success-800: hsl(155 90% 20%);
+  --success-900: hsl(156 88% 16%);
+  --teal-100: hsl(165 85% 89%);
+  --teal-200: hsl(166 84% 78%);
+  --teal-25: hsl(165 80% 98%);
+  --teal-300: hsl(169 76% 64%);
+  --teal-400: hsl(170 65% 50%);
+  --teal-50: hsl(162 76% 97%);
+  --teal-500: hsl(171 79% 40%);
+  --teal-600: hsl(173 83% 32%);
+  --teal-700: hsl(173 77% 26%);
+  --teal-800: hsl(174 68% 22%);
+  --teal-900: hsl(174 61% 19%);
+  --violet-100: hsl(249 91% 95%);
+  --violet-200: hsl(251 95% 92%);
+  --violet-25: hsl(252 100% 99%);
+  --violet-300: hsl(252 95% 85%);
+  --violet-400: hsl(254 92% 76%);
+  --violet-50: hsl(250 100% 98%);
+  --violet-500: hsl(257 91% 66%);
+  --violet-600: hsl(261 83% 58%);
+  --violet-700: hsl(262 71% 50%);
+  --violet-800: hsl(262 70% 42%);
+  --violet-900: hsl(262 69% 35%);
+  --warning-100: hsl(45 96% 89%);
+  --warning-200: hsl(44 98% 77%);
+  --warning-25: hsl(42 100% 98%);
+  --warning-300: hsl(42 99% 65%);
+  --warning-400: hsl(39 98% 56%);
+  --warning-50: hsl(45 100% 96%);
+  --warning-500: hsl(34 94% 50%);
+  --warning-600: hsl(28 97% 44%);
+  --warning-700: hsl(22 93% 37%);
+  --warning-800: hsl(19 85% 31%);
+  --warning-900: hsl(18 79% 27%);
+  --yellow-100: hsl(54 94% 88%);
+  --yellow-200: hsl(51 98% 79%);
+  --yellow-25: hsl(56 88% 97%);
+  --yellow-300: hsl(48 97% 72%);
+  --yellow-400: hsl(46 96% 53%);
+  --yellow-50: hsl(52 92% 95%);
+  --yellow-500: hsl(43 94% 47%);
+  --yellow-600: hsl(39 97% 40%);
+  --yellow-700: hsl(33 93% 33%);
+  --yellow-800: hsl(30 82% 29%);
+  --yellow-900: hsl(26 74% 25%);
+}