@vellira-ui/tokens 2.23.0 → 2.24.0

package/dist/generated/token-types.js

@@ -189,6 +189,9 @@ export const semanticTokenPaths = [
     'semantic.border.muted',
     'semantic.border.strong',
     'semantic.border.subtle',
+    'semantic.control.active.bg',
+    'semantic.control.active.border',
+    'semantic.control.active.fg',
     'semantic.control.default.bg',
     'semantic.control.default.border',
     'semantic.control.default.fg',
@@ -270,6 +273,7 @@ export const semanticTokenPaths = [
     'semantic.surface.subtle',
     'semantic.text.brand',
     'semantic.text.disabled',
+    'semantic.text.elevated',
     'semantic.text.hover',
     'semantic.text.inverse',
     'semantic.text.muted',
@@ -534,6 +538,9 @@ export const componentTokenPaths = [
     'components.radio.checked.default.bg',
     'components.radio.checked.default.border',
     'components.radio.checked.default.fg',
+    'components.radio.checked.disabled.bg',
+    'components.radio.checked.disabled.border',
+    'components.radio.checked.disabled.fg',
     'components.radio.checked.hover.bg',
     'components.radio.checked.hover.border',
     'components.radio.checked.hover.fg',
@@ -546,10 +553,17 @@ export const componentTokenPaths = [
     'components.radio.disabled.bg',
     'components.radio.disabled.border',
     'components.radio.disabled.fg',
+    'components.radio.focus.border',
     'components.radio.focus.ring',
     'components.radio.hover.bg',
     'components.radio.hover.border',
     'components.radio.hover.fg',
+    'components.radio.invalid.bg',
+    'components.radio.invalid.border',
+    'components.radio.invalid.fg',
+    'components.radio.pressed.bg',
+    'components.radio.pressed.border',
+    'components.radio.pressed.fg',
     'components.select.dropdown.bg',
     'components.select.dropdown.border',
     'components.select.dropdown.fg',
@@ -662,6 +676,8 @@ export const baseTokenPaths = [
     'tokens.typography.lineHeight.md',
     'tokens.typography.lineHeight.sm',
     'tokens.typography.lineHeight.xl',
+    'tokens.typography.lineHeight.xs',
+    'tokens.typography.lineHeight.xxl',
     'tokens.typography.size.lg',
     'tokens.typography.size.md',
     'tokens.typography.size.sm',
@@ -1050,6 +1066,9 @@ export const tokenPaths = [
     'components.radio.checked.default.bg',
     'components.radio.checked.default.border',
     'components.radio.checked.default.fg',
+    'components.radio.checked.disabled.bg',
+    'components.radio.checked.disabled.border',
+    'components.radio.checked.disabled.fg',
     'components.radio.checked.hover.bg',
     'components.radio.checked.hover.border',
     'components.radio.checked.hover.fg',
@@ -1062,10 +1081,17 @@ export const tokenPaths = [
     'components.radio.disabled.bg',
     'components.radio.disabled.border',
     'components.radio.disabled.fg',
+    'components.radio.focus.border',
     'components.radio.focus.ring',
     'components.radio.hover.bg',
     'components.radio.hover.border',
     'components.radio.hover.fg',
+    'components.radio.invalid.bg',
+    'components.radio.invalid.border',
+    'components.radio.invalid.fg',
+    'components.radio.pressed.bg',
+    'components.radio.pressed.border',
+    'components.radio.pressed.fg',
     'components.select.dropdown.bg',
     'components.select.dropdown.border',
     'components.select.dropdown.fg',
@@ -1199,6 +1225,9 @@ export const tokenPaths = [
     'semantic.border.muted',
     'semantic.border.strong',
     'semantic.border.subtle',
+    'semantic.control.active.bg',
+    'semantic.control.active.border',
+    'semantic.control.active.fg',
     'semantic.control.default.bg',
     'semantic.control.default.border',
     'semantic.control.default.fg',
@@ -1280,6 +1309,7 @@ export const tokenPaths = [
     'semantic.surface.subtle',
     'semantic.text.brand',
     'semantic.text.disabled',
+    'semantic.text.elevated',
     'semantic.text.hover',
     'semantic.text.inverse',
     'semantic.text.muted',
@@ -1331,6 +1361,8 @@ export const tokenPaths = [
     'tokens.typography.lineHeight.md',
     'tokens.typography.lineHeight.sm',
     'tokens.typography.lineHeight.xl',
+    'tokens.typography.lineHeight.xs',
+    'tokens.typography.lineHeight.xxl',
     'tokens.typography.size.lg',
     'tokens.typography.size.md',
     'tokens.typography.size.sm',
@@ -1368,6 +1400,8 @@ export const baseCssVariableNames = [
     '--line-height-md',
     '--line-height-sm',
     '--line-height-xl',
+    '--line-height-xs',
+    '--line-height-xxl',
     '--radius-full',
     '--radius-lg',
     '--radius-md',
@@ -1710,6 +1744,9 @@ export const themeCssVariableNames = [
     '--color-warning-800',
     '--color-warning-900',
     '--color-warning-950',
+    '--control-active-bg',
+    '--control-active-border',
+    '--control-active-fg',
     '--control-default-bg',
     '--control-default-border',
     '--control-default-fg',
@@ -1884,6 +1921,9 @@ export const themeCssVariableNames = [
     '--radio-checked-default-bg',
     '--radio-checked-default-border',
     '--radio-checked-default-fg',
+    '--radio-checked-disabled-bg',
+    '--radio-checked-disabled-border',
+    '--radio-checked-disabled-fg',
     '--radio-checked-hover-bg',
     '--radio-checked-hover-border',
     '--radio-checked-hover-fg',
@@ -1896,10 +1936,17 @@ export const themeCssVariableNames = [
     '--radio-disabled-bg',
     '--radio-disabled-border',
     '--radio-disabled-fg',
+    '--radio-focus-border',
     '--radio-focus-ring',
     '--radio-hover-bg',
     '--radio-hover-border',
     '--radio-hover-fg',
+    '--radio-invalid-bg',
+    '--radio-invalid-border',
+    '--radio-invalid-fg',
+    '--radio-pressed-bg',
+    '--radio-pressed-border',
+    '--radio-pressed-fg',
     '--select-dropdown-bg',
     '--select-dropdown-border',
     '--select-dropdown-fg',
@@ -1992,6 +2039,7 @@ export const themeCssVariableNames = [
     '--tabs-trigger-hover-fg',
     '--text-brand',
     '--text-disabled',
+    '--text-elevated',
     '--text-hover',
     '--text-inverse',
     '--text-muted',
@@ -2319,6 +2367,9 @@ export const cssVariableNames = [
     '--color-warning-800',
     '--color-warning-900',
     '--color-warning-950',
+    '--control-active-bg',
+    '--control-active-border',
+    '--control-active-fg',
     '--control-default-bg',
     '--control-default-border',
     '--control-default-fg',
@@ -2456,6 +2507,8 @@ export const cssVariableNames = [
     '--line-height-md',
     '--line-height-sm',
     '--line-height-xl',
+    '--line-height-xs',
+    '--line-height-xxl',
     '--menu-group-label-fg',
     '--menu-item-active-bg',
     '--menu-item-active-fg',
@@ -2512,6 +2565,9 @@ export const cssVariableNames = [
     '--radio-checked-default-bg',
     '--radio-checked-default-border',
     '--radio-checked-default-fg',
+    '--radio-checked-disabled-bg',
+    '--radio-checked-disabled-border',
+    '--radio-checked-disabled-fg',
     '--radio-checked-hover-bg',
     '--radio-checked-hover-border',
     '--radio-checked-hover-fg',
@@ -2524,10 +2580,17 @@ export const cssVariableNames = [
     '--radio-disabled-bg',
     '--radio-disabled-border',
     '--radio-disabled-fg',
+    '--radio-focus-border',
     '--radio-focus-ring',
     '--radio-hover-bg',
     '--radio-hover-border',
     '--radio-hover-fg',
+    '--radio-invalid-bg',
+    '--radio-invalid-border',
+    '--radio-invalid-fg',
+    '--radio-pressed-bg',
+    '--radio-pressed-border',
+    '--radio-pressed-fg',
     '--radius-full',
     '--radius-lg',
     '--radius-md',
@@ -2640,6 +2703,7 @@ export const cssVariableNames = [
     '--tabs-trigger-hover-fg',
     '--text-brand',
     '--text-disabled',
+    '--text-elevated',
     '--text-hover',
     '--text-inverse',
     '--text-muted',

package/dist/highContrast/components/button.d.ts

@@ -183,12 +183,12 @@ export declare const button: {
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#111827";
+                readonly bg: string;
                 readonly fg: "#FDA4AF";
                 readonly border: "#FDA4AF";
             };
             readonly pressed: {
-                readonly bg: "#111827";
+                readonly bg: string;
                 readonly fg: "#9F1239";
                 readonly border: "#9F1239";
             };
@@ -200,12 +200,12 @@ export declare const button: {
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#111827";
+                readonly bg: string;
                 readonly fg: "#FDA4AF";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#111827";
+                readonly bg: string;
                 readonly fg: "#9F1239";
                 readonly border: "transparent";
             };

package/dist/highContrast/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/button.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/button.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}

package/dist/highContrast/components/button.js

@@ -1,6 +1,5 @@
 import { action } from '../semantic/action.js';
 import { border } from '../semantic/border.js';
-import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 const transparent = {
@@ -143,12 +142,12 @@ export const button = {
                 border: action.danger.muted.border,
             },
             hover: {
-                bg: status.error.bg,
+                bg: surface.danger,
                 fg: action.danger.subtle.bg,
                 border: action.danger.subtle.border,
             },
             pressed: {
-                bg: status.error.bg,
+                bg: surface.danger,
                 fg: action.danger.active.bg,
                 border: action.danger.active.border,
             },
@@ -160,12 +159,12 @@ export const button = {
                 border: 'transparent',
             },
             hover: {
-                bg: status.error.bg,
+                bg: surface.danger,
                 fg: action.danger.subtle.bg,
                 border: 'transparent',
             },
             pressed: {
-                bg: status.error.bg,
+                bg: surface.danger,
                 fg: action.danger.active.bg,
                 border: 'transparent',
             },

package/dist/highContrast/components/checkbox.d.ts

@@ -6,23 +6,23 @@ export declare const checkbox: {
     };
     readonly hover: {
         readonly bg: "#111827";
-        readonly fg: "#000000";
+        readonly fg: "#B8A8FF";
         readonly border: "#7C5CFF";
     };
     readonly checked: {
         readonly default: {
-            readonly bg: "#7C5CFF";
+            readonly bg: "#9B7CFF";
             readonly fg: "#FFFFFF";
-            readonly border: "#7C5CFF";
+            readonly border: "#9B7CFF";
         };
         readonly hover: {
             readonly bg: "#0369A1";
-            readonly fg: "#000000";
+            readonly fg: "#F9FAFB";
             readonly border: "#0369A1";
         };
         readonly pressed: {
             readonly bg: "#402C9F";
-            readonly fg: "#000000";
+            readonly fg: "#F9FAFB";
             readonly border: "#402C9F";
         };
     };

package/dist/highContrast/components/formField.d.ts

@@ -3,7 +3,7 @@ export declare const formField: {
         readonly fg: "#EEE8FA";
     };
     readonly description: {
-        readonly fg: "#E5E7EB";
+        readonly fg: "#9CA3AF";
     };
     readonly helperText: {
         readonly default: {

package/dist/highContrast/components/formField.js

@@ -5,7 +5,7 @@ export const formField = {
         fg: text.secondary,
     },
     description: {
-        fg: text.muted,
+        fg: text.elevated,
     },
     helperText: {
         default: {

package/dist/highContrast/components/input.d.ts

@@ -29,7 +29,7 @@ export declare const input: {
         readonly icon: "#D1D5DB";
     };
     readonly error: {
-        readonly border: "#FB7185";
+        readonly border: "#F43F5E";
         readonly ring: "#FB7185";
     };
     readonly success: {
@@ -57,7 +57,7 @@ export declare const input: {
         readonly hoverFg: "#FB7185";
         readonly hoverBg: string;
         readonly focusBg: "#FFFFFF";
-        readonly pressedBg: "#111827";
+        readonly pressedBg: "#6B7280";
     };
 };
 //# sourceMappingURL=input.d.ts.map

package/dist/highContrast/components/radio.d.ts

@@ -1,38 +1,54 @@
 export declare const radio: {
     readonly default: {
         readonly bg: "#000000";
-        readonly fg: "#FFFFFF";
+        readonly fg: "#F9FAFB";
         readonly border: "#FFFFFF";
     };
     readonly hover: {
         readonly bg: "#111827";
         readonly fg: "#B8A8FF";
-        readonly border: "#B8A8FF";
+        readonly border: "#7C5CFF";
+    };
+    readonly pressed: {
+        readonly bg: "#E9E6FF";
+        readonly fg: "#342580";
+        readonly border: "#402C9F";
     };
     readonly checked: {
         readonly default: {
+            readonly fg: "#B8A8FF";
             readonly bg: "#9B7CFF";
-            readonly fg: "#7C5CFF";
-            readonly border: "#B8A8FF";
+            readonly border: "#9B7CFF";
         };
         readonly hover: {
-            readonly fg: "#FFFFFF";
+            readonly fg: "#B8A8FF";
             readonly bg: "#0369A1";
             readonly border: "#0369A1";
         };
         readonly pressed: {
-            readonly fg: "#FFFFFF";
+            readonly fg: "#B8A8FF";
             readonly bg: "#402C9F";
             readonly border: "#402C9F";
         };
+        readonly disabled: {
+            readonly bg: "#111827";
+            readonly fg: "#6B7280";
+            readonly border: "#4B5563";
+        };
     };
     readonly focus: {
         readonly ring: "#F59E0B";
+        readonly border: "#FBBF24";
+    };
+    readonly invalid: {
+        readonly bg: "#000000";
+        readonly fg: "#F9FAFB";
+        readonly border: "#F43F5E";
     };
     readonly disabled: {
         readonly bg: "#111827";
         readonly fg: "#6B7280";
-        readonly border: "#FFFFFF";
+        readonly border: "#4B5563";
     };
 };
 //# sourceMappingURL=radio.d.ts.map

package/dist/highContrast/components/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/radio.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BR,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/radio.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDR,CAAC"}

package/dist/highContrast/components/radio.js

@@ -1,32 +1,48 @@
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
+import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const radio = {
     default: {
         bg: surface.default,
-        fg: text.primary,
+        fg: text.inverse,
         border: border.default,
     },
-    hover: control.radioHover,
+    hover: control.hover,
+    pressed: control.active,
     checked: {
-        default: control.selected.radioDefault,
+        default: {
+            ...control.selected.default,
+            fg: text.brand,
+        },
         hover: {
             ...control.selected.hover,
-            fg: text.primary,
+            fg: text.brand,
         },
         pressed: {
             ...control.selected.active,
-            fg: text.primary,
+            fg: text.brand,
+        },
+        disabled: {
+            bg: surface.subtle,
+            fg: text.disabled,
+            border: border.disabled,
         },
     },
     focus: {
         ring: focus.ring,
+        border: border.focus,
+    },
+    invalid: {
+        bg: surface.default,
+        fg: text.inverse,
+        border: status.error.border,
     },
     disabled: {
         bg: surface.subtle,
         fg: text.disabled,
-        border: border.default,
+        border: border.disabled,
     },
 };

package/dist/highContrast/components/select.d.ts

@@ -26,7 +26,7 @@ export declare const select: {
         };
         readonly error: {
             readonly border: "#FB7185";
-            readonly ring: "#111827";
+            readonly ring: "#E11D48";
         };
     };
     readonly dropdown: {
@@ -50,7 +50,7 @@ export declare const select: {
             readonly fg: "#000000";
         };
         readonly selected: {
-            readonly bg: "#7C5CFF";
+            readonly bg: "#9B7CFF";
             readonly fg: "#FFFFFF";
         };
         readonly disabled: {

package/dist/highContrast/components/tabs.d.ts

@@ -35,7 +35,7 @@ export declare const tabs: {
         };
         readonly hover: {
             readonly bg: "#FBBF24";
-            readonly fg: "#000000";
+            readonly fg: "#F9FAFB";
             readonly border: "transparent";
         };
         readonly active: {

package/dist/highContrast/components/tooltip.d.ts

@@ -1,7 +1,7 @@
 export declare const tooltip: {
     readonly content: {
         readonly bg: "#FFFFFF";
-        readonly fg: "#000000";
+        readonly fg: "#F9FAFB";
         readonly border: "#FFFFFF";
     };
     readonly arrow: {

package/dist/highContrast/semantic/action.d.ts

@@ -22,7 +22,7 @@ export declare const action: {
         };
         readonly subtle: {
             readonly bg: "#D4CCFF";
-            readonly fg: "#000000";
+            readonly fg: "#F9FAFB";
             readonly border: "#D4CCFF";
         };
     };

package/dist/highContrast/semantic/action.js

@@ -31,17 +31,17 @@ export const action = {
     secondary: {
         default: {
             bg: colors.secondary[400],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[400],
         },
         hover: {
             bg: colors.secondary[300],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[300],
         },
         active: {
             bg: colors.secondary[200],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[200],
         },
         muted: {
@@ -51,24 +51,24 @@ export const action = {
         },
         subtle: {
             bg: colors.secondary[200],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.secondary[200],
         },
     },
     close: {
         default: {
             bg: colors.mono[50],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.mono[50],
         },
         hover: {
             bg: colors.gray[300],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.gray[300],
         },
         active: {
             bg: colors.gray[400],
-            fg: text.inverse,
+            fg: text.onInverse,
             border: colors.gray[400],
         },
     },

package/dist/highContrast/semantic/control.d.ts

@@ -6,9 +6,14 @@ export declare const control: {
     };
     readonly hover: {
         readonly bg: "#111827";
-        readonly fg: "#000000";
+        readonly fg: "#B8A8FF";
         readonly border: "#7C5CFF";
     };
+    readonly active: {
+        readonly bg: "#E9E6FF";
+        readonly fg: "#342580";
+        readonly border: "#402C9F";
+    };
     readonly radioHover: {
         readonly bg: "#111827";
         readonly fg: "#B8A8FF";
@@ -16,18 +21,18 @@ export declare const control: {
     };
     readonly selected: {
         readonly default: {
-            readonly bg: "#7C5CFF";
+            readonly bg: "#9B7CFF";
             readonly fg: "#FFFFFF";
-            readonly border: "#7C5CFF";
+            readonly border: "#9B7CFF";
         };
         readonly hover: {
             readonly bg: "#0369A1";
-            readonly fg: "#000000";
+            readonly fg: "#F9FAFB";
             readonly border: "#0369A1";
         };
         readonly active: {
             readonly bg: "#402C9F";
-            readonly fg: "#000000";
+            readonly fg: "#F9FAFB";
             readonly border: "#402C9F";
         };
         readonly muted: {

package/dist/highContrast/semantic/control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/control.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CV,CAAC"}
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/control.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDV,CAAC"}

package/dist/highContrast/semantic/control.js

@@ -10,9 +10,14 @@ export const control = {
     },
     hover: {
         bg: colors.gray[900],
-        fg: text.inverse,
+        fg: text.brand,
         border: colors.primary[500],
     },
+    active: {
+        bg: colors.primary[100],
+        fg: colors.primary[900],
+        border: colors.primary[800],
+    },
     radioHover: {
         bg: colors.gray[900],
         fg: colors.primary[300],
@@ -20,9 +25,9 @@ export const control = {
     },
     selected: {
         default: {
-            bg: colors.primary[500],
+            bg: colors.primary[400],
             fg: text.primary,
-            border: colors.primary[500],
+            border: colors.primary[400],
         },
         hover: {
             bg: colors.info[500],

package/dist/highContrast/semantic/navigation.d.ts

@@ -22,7 +22,7 @@ export declare const navigation: {
         readonly fg: "#FFFFFF";
     };
     readonly optionActive: {
-        readonly bg: "#111827";
+        readonly bg: "#6B7280";
         readonly fg: "#FFFFFF";
     };
     readonly disabled: {

package/dist/highContrast/semantic/status.d.ts

@@ -7,8 +7,8 @@ export declare const status: {
     };
     readonly error: {
         readonly fg: "#FB7185";
-        readonly bg: "#111827";
-        readonly border: "#FB7185";
+        readonly bg: "#E11D48";
+        readonly border: "#F43F5E";
         readonly strong: "#FDA4AF";
     };
     readonly warning: {