@uxf/ui 11.35.0 → 11.37.0

package/css/figma-colors.css

@@ -0,0 +1,540 @@
+/* this file is generated automatically, do not change anything manually in the contents of this file */
+:root {
+    --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%);
+
+    --uxf-color-base-border-border: var(--grayneutral-200);
+    --uxf-color-base-border-input: var(--grayneutral-300);
+    --uxf-color-base-border-inverted-border: hsl(0 0 100% / 0.12);
+    --uxf-color-base-border-inverted-input: hsl(0 0 100% / 0.2);
+    --uxf-color-base-icon-disabled: var(--grayneutral-500);
+    --uxf-color-base-icon-high-emphasis: var(--grayneutral-900);
+    --uxf-color-base-icon-low-emphasis: var(--grayneutral-700);
+    --uxf-color-base-icon-medium-emphasis: var(--grayneutral-700);
+    --uxf-color-base-icon-inverted-low-emphasis: hsl(0 0 100% / 0.75);
+    --uxf-color-base-icon-inverted-disabled: hsl(0 0 100% / 0.5);
+    --uxf-color-base-icon-inverted-high-emphasis: var(--base-white);
+    --uxf-color-base-shadow-shadow-md: hsl(218 28% 17% / 0.1);
+    --uxf-color-base-shadow-shadow-sm: hsl(218 28% 17% / 0.05);
+    --uxf-color-base-surface-background: var(--grayneutral-50);
+    --uxf-color-base-surface-disabled: var(--grayneutral-300);
+    --uxf-color-base-surface-input: var(--base-white);
+    --uxf-color-base-surface-input-disabled: var(--grayneutral-100);
+    --uxf-color-base-surface-input-hover: var(--grayneutral-50);
+    --uxf-color-base-surface-main: var(--base-white);
+    --uxf-color-base-surface-main-hover: var(--grayneutral-100);
+    --uxf-color-base-surface-popup: var(--base-white);
+    --uxf-color-base-surface-tooltip: var(--grayneutral-700);
+    --uxf-color-base-surface-inverted-default: hsl(0 0 100%);
+    --uxf-color-base-surface-inverted-default-hover: hsl(0 0 100% / 0.9);
+    --uxf-color-base-surface-inverted-disabled: var(--grayneutral-300);
+    --uxf-color-base-surface-inverted-main: hsl(0 0 100% / 0.08);
+    --uxf-color-base-surface-inverted-main-hover: hsl(0 0 100% / 0.16);
+    --uxf-color-base-text-disabled: var(--grayneutral-500);
+    --uxf-color-base-text-high-emphasis: var(--grayneutral-900);
+    --uxf-color-base-text-link: var(--grayneutral-900);
+    --uxf-color-base-text-link-pressed: var(--grayneutral-900);
+    --uxf-color-base-text-low-emphasis: var(--grayneutral-700);
+    --uxf-color-base-text-inverted-disabled: hsl(0 0 100% / 0.7);
+    --uxf-color-base-text-inverted-high-emphasis: var(--base-white);
+    --uxf-color-base-text-inverted-link: var(--base-white);
+    --uxf-color-base-text-inverted-low-emphasis: hsl(0 0 100% / 0.8);
+    --uxf-color-brand-border: var(--bluedark-300);
+    --uxf-color-brand-icon: var(--bluedark-900);
+    --uxf-color-brand-icon-on-muted: var(--bluedark-700);
+    --uxf-color-brand-text: var(--bluedark-900);
+    --uxf-color-brand-text-on-muted: var(--bluedark-900);
+    --uxf-color-brand-surface-bolder: var(--bluedark-800);
+    --uxf-color-brand-surface-bolder-hover: var(--bluedark-900);
+    --uxf-color-brand-surface-default: var(--bluedark-600);
+    --uxf-color-brand-surface-default-hover: var(--bluedark-700);
+    --uxf-color-brand-surface-muted: var(--bluedark-100);
+    --uxf-color-brand-surface-muted-hover: var(--bluedark-200);
+    --uxf-color-brand-surface-subtle: var(--bluedark-50);
+    --uxf-color-brand-surface-subtle-hover: var(--bluedark-100);
+    --uxf-color-info-border: var(--grayblue-300);
+    --uxf-color-info-icon: var(--grayblue-500);
+    --uxf-color-info-icon-on-muted: var(--grayblue-700);
+    --uxf-color-info-text: var(--grayblue-600);
+    --uxf-color-info-text-on-muted: var(--grayblue-800);
+    --uxf-color-info-surface-default: var(--grayblue-600);
+    --uxf-color-info-surface-default-hover: var(--graycool-700);
+    --uxf-color-info-surface-muted: var(--graycool-100);
+    --uxf-color-info-surface-muted-hover: var(--graycool-200);
+    --uxf-color-info-surface-subtle: var(--graycool-50);
+    --uxf-color-info-surface-subtle-hover: var(--graycool-100);
+    --uxf-color-inverted-border: hsl(0 0 100%);
+    --uxf-color-inverted-icon: hsl(0 0 100%);
+    --uxf-color-inverted-icon-on-muted: hsl(0 0 100%);
+    --uxf-color-inverted-text-default: hsl(0 0 100%);
+    --uxf-color-inverted-text-disabled: hsl(0 0 100%);
+    --uxf-color-inverted-text-muted: hsl(0 0 100%);
+    --uxf-color-inverted-text-on-muted: hsl(0 0 100%);
+    --uxf-color-negative-border: var(--error-300);
+    --uxf-color-negative-icon: var(--error-600);
+    --uxf-color-negative-icon-on-muted: var(--error-700);
+    --uxf-color-negative-text: var(--error-600);
+    --uxf-color-negative-text-on-muted: var(--error-800);
+    --uxf-color-negative-surface-default: var(--error-600);
+    --uxf-color-negative-surface-default-hover: var(--error-700);
+    --uxf-color-negative-surface-muted: var(--error-100);
+    --uxf-color-negative-surface-muted-hover: var(--error-200);
+    --uxf-color-negative-surface-subtle: var(--error-50);
+    --uxf-color-negative-surface-subtle-hover: var(--error-100);
+    --uxf-color-neutral-border: var(--grayneutral-300);
+    --uxf-color-neutral-icon: var(--grayneutral-500);
+    --uxf-color-neutral-icon-on-muted: var(--grayneutral-700);
+    --uxf-color-neutral-text: var(--grayneutral-600);
+    --uxf-color-neutral-text-on-muted: var(--grayneutral-800);
+    --uxf-color-neutral-surface-bolder: var(--grayneutral-800);
+    --uxf-color-neutral-surface-bolder-hover: var(--grayneutral-900);
+    --uxf-color-neutral-surface-default: var(--grayneutral-600);
+    --uxf-color-neutral-surface-default-hover: var(--grayneutral-700);
+    --uxf-color-neutral-surface-muted: var(--grayneutral-200);
+    --uxf-color-neutral-surface-muted-hover: var(--grayneutral-300);
+    --uxf-color-neutral-surface-subtle: var(--grayneutral-50);
+    --uxf-color-neutral-surface-subtle-hover: var(--grayneutral-100);
+    --uxf-color-positive-border: var(--success-300);
+    --uxf-color-positive-icon: var(--success-500);
+    --uxf-color-positive-icon-on-muted: var(--success-700);
+    --uxf-color-positive-text: var(--success-700);
+    --uxf-color-positive-text-on-muted: var(--success-800);
+    --uxf-color-positive-surface-default: var(--green-600);
+    --uxf-color-positive-surface-default-hover: var(--green-700);
+    --uxf-color-positive-surface-muted: var(--green-100);
+    --uxf-color-positive-surface-muted-hover: var(--green-200);
+    --uxf-color-positive-surface-subtle: var(--green-50);
+    --uxf-color-positive-surface-subtle-hover: var(--green-100);
+    --uxf-color-warning-border: var(--warning-300);
+    --uxf-color-warning-icon: var(--warning-600);
+    --uxf-color-warning-icon-on-muted: var(--warning-700);
+    --uxf-color-warning-text: var(--warning-700);
+    --uxf-color-warning-text-on-muted: var(--warning-800);
+    --uxf-color-warning-surface-default: var(--warning-600);
+    --uxf-color-warning-surface-default-hover: var(--warning-700);
+    --uxf-color-warning-surface-muted: var(--warning-100);
+    --uxf-color-warning-surface-muted-hover: var(--warning-200);
+    --uxf-color-warning-surface-subtle: var(--warning-50);
+    --uxf-color-warning-surface-subtle-hover: var(--warning-100);
+
+    .dark {
+        --uxf-color-base-border-border: hsl(0 0 100% / 0.12);
+        --uxf-color-base-border-input: hsl(0 0 100% / 0.2);
+        --uxf-color-base-border-inverted-border: hsl(218 28% 17% / 0.12);
+        --uxf-color-base-border-inverted-input: hsl(218 28% 17% / 0.2);
+        --uxf-color-base-icon-disabled: hsl(0 0 100% / 0.5);
+        --uxf-color-base-icon-high-emphasis: var(--base-white);
+        --uxf-color-base-icon-low-emphasis: hsl(0 0 100% / 0.75);
+        --uxf-color-base-icon-medium-emphasis: hsl(0 0 100% / 0.75);
+        --uxf-color-base-icon-inverted-low-emphasis: var(--grayneutral-900);
+        --uxf-color-base-icon-inverted-disabled: var(--grayneutral-900);
+        --uxf-color-base-icon-inverted-high-emphasis: var(--grayneutral-900);
+        --uxf-color-base-shadow-shadow-md: hsl(0 0 100% / 0);
+        --uxf-color-base-shadow-shadow-sm: hsl(0 0 100% / 0);
+        --uxf-color-base-surface-background: var(--grayneutral-800);
+        --uxf-color-base-surface-disabled: hsl(0 0 100% / 0.2);
+        --uxf-color-base-surface-input: var(--grayneutral-900);
+        --uxf-color-base-surface-input-disabled: var(--grayneutral-600);
+        --uxf-color-base-surface-input-hover: var(--grayneutral-800);
+        --uxf-color-base-surface-main: var(--grayneutral-900);
+        --uxf-color-base-surface-main-hover: var(--grayneutral-800);
+        --uxf-color-base-surface-popup: var(--grayneutral-800);
+        --uxf-color-base-surface-tooltip: var(--grayneutral-50);
+        --uxf-color-base-surface-inverted-default: hsl(218 28% 17%);
+        --uxf-color-base-surface-inverted-default-hover: hsl(218 28% 17% / 0.9);
+        --uxf-color-base-surface-inverted-disabled: var(--grayneutral-500);
+        --uxf-color-base-surface-inverted-main: hsl(218 28% 17% / 0.08);
+        --uxf-color-base-surface-inverted-main-hover: hsl(218 28% 17% / 0.16);
+        --uxf-color-base-text-disabled: hsl(0 0 100% / 0.6);
+        --uxf-color-base-text-high-emphasis: hsl(0 0 100%);
+        --uxf-color-base-text-link: var(--base-white);
+        --uxf-color-base-text-link-pressed: var(--base-white);
+        --uxf-color-base-text-low-emphasis: hsl(0 0 100% / 0.8);
+        --uxf-color-base-text-inverted-disabled: hsl(218 28% 17% / 0.7);
+        --uxf-color-base-text-inverted-high-emphasis: var(--grayneutral-900);
+        --uxf-color-base-text-inverted-link: var(--grayneutral-900);
+        --uxf-color-base-text-inverted-low-emphasis: hsl(218 28% 17% / 0.8);
+        --uxf-color-brand-border: var(--bluedark-600);
+        --uxf-color-brand-icon: var(--bluedark-400);
+        --uxf-color-brand-icon-on-muted: var(--bluedark-300);
+        --uxf-color-brand-text: var(--base-white);
+        --uxf-color-brand-text-on-muted: var(--bluedark-200);
+        --uxf-color-brand-surface-bolder: var(--bluedark-200);
+        --uxf-color-brand-surface-bolder-hover: var(--bluedark-100);
+        --uxf-color-brand-surface-default: var(--bluedark-400);
+        --uxf-color-brand-surface-default-hover: var(--bluedark-300);
+        --uxf-color-brand-surface-muted: var(--bluedark-800);
+        --uxf-color-brand-surface-muted-hover: var(--bluedark-700);
+        --uxf-color-brand-surface-subtle: var(--bluedark-900);
+        --uxf-color-brand-surface-subtle-hover: var(--bluedark-800);
+        --uxf-color-info-border: var(--grayblue-600);
+        --uxf-color-info-icon: var(--grayblue-300);
+        --uxf-color-info-icon-on-muted: var(--grayblue-300);
+        --uxf-color-info-text: var(--grayblue-300);
+        --uxf-color-info-text-on-muted: var(--grayblue-200);
+        --uxf-color-info-surface-default: var(--grayblue-300);
+        --uxf-color-info-surface-default-hover: var(--grayblue-200);
+        --uxf-color-info-surface-muted: var(--grayblue-800);
+        --uxf-color-info-surface-muted-hover: var(--grayblue-700);
+        --uxf-color-info-surface-subtle: var(--grayblue-900);
+        --uxf-color-info-surface-subtle-hover: var(--grayblue-800);
+        --uxf-color-inverted-border: hsl(0 0 100%);
+        --uxf-color-inverted-icon: hsl(0 0 100%);
+        --uxf-color-inverted-icon-on-muted: hsl(0 0 100%);
+        --uxf-color-inverted-text-default: hsl(0 0 100%);
+        --uxf-color-inverted-text-disabled: hsl(0 0 100%);
+        --uxf-color-inverted-text-muted: hsl(0 0 100%);
+        --uxf-color-inverted-text-on-muted: hsl(0 0 100%);
+        --uxf-color-negative-border: var(--error-600);
+        --uxf-color-negative-icon: var(--error-400);
+        --uxf-color-negative-icon-on-muted: var(--error-200);
+        --uxf-color-negative-text: var(--error-300);
+        --uxf-color-negative-text-on-muted: var(--error-200);
+        --uxf-color-negative-surface-default: var(--error-400);
+        --uxf-color-negative-surface-default-hover: var(--error-300);
+        --uxf-color-negative-surface-muted: var(--error-800);
+        --uxf-color-negative-surface-muted-hover: var(--error-700);
+        --uxf-color-negative-surface-subtle: var(--error-900);
+        --uxf-color-negative-surface-subtle-hover: var(--error-800);
+        --uxf-color-neutral-border: var(--grayneutral-600);
+        --uxf-color-neutral-icon: var(--grayneutral-400);
+        --uxf-color-neutral-icon-on-muted: var(--grayneutral-200);
+        --uxf-color-neutral-text: var(--grayneutral-300);
+        --uxf-color-neutral-text-on-muted: var(--grayneutral-200);
+        --uxf-color-neutral-surface-bolder: hsl(0 0 100%);
+        --uxf-color-neutral-surface-bolder-hover: hsl(0 0 100%);
+        --uxf-color-neutral-surface-default: var(--grayneutral-400);
+        --uxf-color-neutral-surface-default-hover: var(--grayneutral-300);
+        --uxf-color-neutral-surface-muted: var(--grayneutral-700);
+        --uxf-color-neutral-surface-muted-hover: var(--grayneutral-600);
+        --uxf-color-neutral-surface-subtle: var(--grayneutral-800);
+        --uxf-color-neutral-surface-subtle-hover: var(--grayneutral-700);
+        --uxf-color-positive-border: var(--success-600);
+        --uxf-color-positive-icon: var(--success-400);
+        --uxf-color-positive-icon-on-muted: var(--success-300);
+        --uxf-color-positive-text: var(--success-300);
+        --uxf-color-positive-text-on-muted: var(--success-200);
+        --uxf-color-positive-surface-default: var(--green-400);
+        --uxf-color-positive-surface-default-hover: var(--green-300);
+        --uxf-color-positive-surface-muted: var(--green-800);
+        --uxf-color-positive-surface-muted-hover: var(--green-700);
+        --uxf-color-positive-surface-subtle: var(--green-900);
+        --uxf-color-positive-surface-subtle-hover: var(--green-800);
+        --uxf-color-warning-border: var(--warning-600);
+        --uxf-color-warning-icon: var(--warning-400);
+        --uxf-color-warning-icon-on-muted: var(--warning-300);
+        --uxf-color-warning-text: var(--warning-300);
+        --uxf-color-warning-text-on-muted: var(--warning-200);
+        --uxf-color-warning-surface-default: var(--warning-400);
+        --uxf-color-warning-surface-default-hover: var(--warning-300);
+        --uxf-color-warning-surface-muted: var(--warning-800);
+        --uxf-color-warning-surface-muted-hover: var(--warning-700);
+        --uxf-color-warning-surface-subtle: var(--warning-900);
+        --uxf-color-warning-surface-subtle-hover: var(--warning-800);
+    }
+}

package/css/icon-button.css

@@ -0,0 +1,9 @@
+.uxf-icon-button {
+    flex-shrink: 0;
+    padding: 0;
+    width: var(--uxf-button-height);
+
+    &.uxf-button--is-loading::after {
+        margin-left: 0;
+    }
+}

package/css/modal-header.css

@@ -9,10 +9,10 @@
 }
 
 .uxf-modal-header {
-    --uxf-modal-header-background-color: var(--uxf-color-base-surface-main);
-    --uxf-modal-header-border-color: var(--uxf-color-base-border-border);
-    --uxf-modal-header-description-text-color: var(--uxf-color-base-text-low-emphasis);
-    --uxf-modal-header-title-text-color: var(--uxf-color-base-text-high-emphasis);
+    --uxf-modal-header-background-color: theme("colors.base_surface_main");
+    --uxf-modal-header-border-color: theme("colors.base_border_border");
+    --uxf-modal-header-description-text-color: theme("colors.base_text_low_emphasis");
+    --uxf-modal-header-title-text-color: theme("colors.base_text_high_emphasis");
     --uxf-icon-color: var(--uxf-modal-header-title-text-color);
 
     background-color: var(--uxf-modal-header-background-color);

package/css/radio-group.css

@@ -122,7 +122,7 @@
 
 .uxf-radio-group--column {
     .uxf-radio-group__options-wrapper {
-        align-items: start;
+        align-items: flex-start;
         display: flex;
         flex-direction: column;
         gap: theme("spacing.2");

package/css/text-link.css

@@ -6,7 +6,7 @@
     }
 
     &--variant-default {
-        color: var(--uxf-color-primary-surface-default);
+        color: theme("colors.primary_surface_default");
 
         @apply is-hoverable:text-[--uxf-color-primary-surface-default-hover] focus-visible:before:border-[--uxf-color-primary-surface-default];
     }

package/css/toggle.css

@@ -1,5 +1,5 @@
 .uxf-toggle {
-    --uxf-toggle-selected-color: var(--uxf-color-primary-surface-default);
+    --uxf-toggle-selected-color: theme("colors.primary_surface_default");
 
     align-items: center;
     background-color: theme("colors.gray.200");

package/dropzone/README.md

@@ -72,7 +72,7 @@ function BasicExample() {
     const { status } = getDropzoneState(files);
 
     // Confirm file removal
-    const onRemoveConfirm = (): Promise<boolean> => Promise.resolve(confirm("Do you want to delete the file?"));
+    const removeConfirmHandler = (): Promise<boolean> => Promise.resolve(confirm("Do you want to delete the file?"));
     
     // Handle upload errors
     const onUploadError = (error: unknown) => {
@@ -93,7 +93,7 @@ function BasicExample() {
             {/* List of uploaded files */}
             <Dropzone.List
                 onChange={setFiles}
-                onRemoveConfirm={onRemoveConfirm}
+                removeConfirmHandler={removeConfirmHandler}
                 value={files}
             />
         </div>