@vellira-ui/tokens 2.20.0 → 2.21.0

package/dist/generated/token-types.js

@@ -131,6 +131,12 @@ export const semanticTokenPaths = [
     'semantic.action.close.hover.bg',
     'semantic.action.close.hover.border',
     'semantic.action.close.hover.fg',
+    'semantic.action.close.muted.bg',
+    'semantic.action.close.muted.border',
+    'semantic.action.close.muted.fg',
+    'semantic.action.close.subtle.bg',
+    'semantic.action.close.subtle.border',
+    'semantic.action.close.subtle.fg',
     'semantic.action.danger.active.bg',
     'semantic.action.danger.active.border',
     'semantic.action.danger.active.fg',
@@ -141,6 +147,7 @@ export const semanticTokenPaths = [
     'semantic.action.danger.hover.border',
     'semantic.action.danger.hover.fg',
     'semantic.action.danger.muted.bg',
+    'semantic.action.danger.muted.border',
     'semantic.action.danger.muted.fg',
     'semantic.action.danger.subtle.bg',
     'semantic.action.danger.subtle.border',
@@ -169,6 +176,12 @@ export const semanticTokenPaths = [
     'semantic.action.secondary.hover.bg',
     'semantic.action.secondary.hover.border',
     'semantic.action.secondary.hover.fg',
+    'semantic.action.secondary.muted.bg',
+    'semantic.action.secondary.muted.border',
+    'semantic.action.secondary.muted.fg',
+    'semantic.action.secondary.subtle.bg',
+    'semantic.action.secondary.subtle.border',
+    'semantic.action.secondary.subtle.fg',
     'semantic.border.default',
     'semantic.border.disabled',
     'semantic.border.elevated',
@@ -244,6 +257,7 @@ export const semanticTokenPaths = [
     'semantic.status.warning.strong',
     'semantic.surface.active',
     'semantic.surface.default',
+    'semantic.surface.disabled',
     'semantic.surface.elevated',
     'semantic.surface.hover',
     'semantic.surface.inverse',
@@ -584,6 +598,7 @@ export const baseTokenPaths = [
     'tokens.radius.md',
     'tokens.radius.sm',
     'tokens.radius.xl',
+    'tokens.radius.xs',
     'tokens.shadows.lg.blur',
     'tokens.shadows.lg.color',
     'tokens.shadows.lg.elevation',
@@ -1080,6 +1095,12 @@ export const tokenPaths = [
     'semantic.action.close.hover.bg',
     'semantic.action.close.hover.border',
     'semantic.action.close.hover.fg',
+    'semantic.action.close.muted.bg',
+    'semantic.action.close.muted.border',
+    'semantic.action.close.muted.fg',
+    'semantic.action.close.subtle.bg',
+    'semantic.action.close.subtle.border',
+    'semantic.action.close.subtle.fg',
     'semantic.action.danger.active.bg',
     'semantic.action.danger.active.border',
     'semantic.action.danger.active.fg',
@@ -1090,6 +1111,7 @@ export const tokenPaths = [
     'semantic.action.danger.hover.border',
     'semantic.action.danger.hover.fg',
     'semantic.action.danger.muted.bg',
+    'semantic.action.danger.muted.border',
     'semantic.action.danger.muted.fg',
     'semantic.action.danger.subtle.bg',
     'semantic.action.danger.subtle.border',
@@ -1118,6 +1140,12 @@ export const tokenPaths = [
     'semantic.action.secondary.hover.bg',
     'semantic.action.secondary.hover.border',
     'semantic.action.secondary.hover.fg',
+    'semantic.action.secondary.muted.bg',
+    'semantic.action.secondary.muted.border',
+    'semantic.action.secondary.muted.fg',
+    'semantic.action.secondary.subtle.bg',
+    'semantic.action.secondary.subtle.border',
+    'semantic.action.secondary.subtle.fg',
     'semantic.border.default',
     'semantic.border.disabled',
     'semantic.border.elevated',
@@ -1193,6 +1221,7 @@ export const tokenPaths = [
     'semantic.status.warning.strong',
     'semantic.surface.active',
     'semantic.surface.default',
+    'semantic.surface.disabled',
     'semantic.surface.elevated',
     'semantic.surface.hover',
     'semantic.surface.inverse',
@@ -1213,6 +1242,7 @@ export const tokenPaths = [
     'tokens.radius.md',
     'tokens.radius.sm',
     'tokens.radius.xl',
+    'tokens.radius.xs',
     'tokens.shadows.lg.blur',
     'tokens.shadows.lg.color',
     'tokens.shadows.lg.elevation',
@@ -1293,6 +1323,7 @@ export const baseCssVariableNames = [
     '--radius-md',
     '--radius-sm',
     '--radius-xl',
+    '--radius-xs',
     '--shadow-lg',
     '--shadow-md',
     '--shadow-sm',
@@ -1324,6 +1355,12 @@ export const themeCssVariableNames = [
     '--action-close-hover-bg',
     '--action-close-hover-border',
     '--action-close-hover-fg',
+    '--action-close-muted-bg',
+    '--action-close-muted-border',
+    '--action-close-muted-fg',
+    '--action-close-subtle-bg',
+    '--action-close-subtle-border',
+    '--action-close-subtle-fg',
     '--action-danger-active-bg',
     '--action-danger-active-border',
     '--action-danger-active-fg',
@@ -1334,6 +1371,7 @@ export const themeCssVariableNames = [
     '--action-danger-hover-border',
     '--action-danger-hover-fg',
     '--action-danger-muted-bg',
+    '--action-danger-muted-border',
     '--action-danger-muted-fg',
     '--action-danger-subtle-bg',
     '--action-danger-subtle-border',
@@ -1362,6 +1400,12 @@ export const themeCssVariableNames = [
     '--action-secondary-hover-bg',
     '--action-secondary-hover-border',
     '--action-secondary-hover-fg',
+    '--action-secondary-muted-bg',
+    '--action-secondary-muted-border',
+    '--action-secondary-muted-fg',
+    '--action-secondary-subtle-bg',
+    '--action-secondary-subtle-border',
+    '--action-secondary-subtle-fg',
     '--border-default',
     '--border-disabled',
     '--border-elevated',
@@ -1834,6 +1878,7 @@ export const themeCssVariableNames = [
     '--status-warning-strong',
     '--surface-active',
     '--surface-default',
+    '--surface-disabled',
     '--surface-elevated',
     '--surface-hover',
     '--surface-inverse',
@@ -1894,6 +1939,12 @@ export const cssVariableNames = [
     '--action-close-hover-bg',
     '--action-close-hover-border',
     '--action-close-hover-fg',
+    '--action-close-muted-bg',
+    '--action-close-muted-border',
+    '--action-close-muted-fg',
+    '--action-close-subtle-bg',
+    '--action-close-subtle-border',
+    '--action-close-subtle-fg',
     '--action-danger-active-bg',
     '--action-danger-active-border',
     '--action-danger-active-fg',
@@ -1904,6 +1955,7 @@ export const cssVariableNames = [
     '--action-danger-hover-border',
     '--action-danger-hover-fg',
     '--action-danger-muted-bg',
+    '--action-danger-muted-border',
     '--action-danger-muted-fg',
     '--action-danger-subtle-bg',
     '--action-danger-subtle-border',
@@ -1932,6 +1984,12 @@ export const cssVariableNames = [
     '--action-secondary-hover-bg',
     '--action-secondary-hover-border',
     '--action-secondary-hover-fg',
+    '--action-secondary-muted-bg',
+    '--action-secondary-muted-border',
+    '--action-secondary-muted-fg',
+    '--action-secondary-subtle-bg',
+    '--action-secondary-subtle-border',
+    '--action-secondary-subtle-fg',
     '--border-default',
     '--border-disabled',
     '--border-elevated',
@@ -2376,6 +2434,7 @@ export const cssVariableNames = [
     '--radius-md',
     '--radius-sm',
     '--radius-xl',
+    '--radius-xs',
     '--select-dropdown-bg',
     '--select-dropdown-border',
     '--select-dropdown-fg',
@@ -2442,6 +2501,7 @@ export const cssVariableNames = [
     '--status-warning-strong',
     '--surface-active',
     '--surface-default',
+    '--surface-disabled',
     '--surface-elevated',
     '--surface-hover',
     '--surface-inverse',

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

@@ -2,52 +2,52 @@ export declare const button: {
     readonly primary: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#6D5BD0";
+                readonly bg: "#6346E8";
                 readonly fg: "#FFFFFF";
-                readonly border: "#6D5BD0";
+                readonly border: "#6346E8";
             };
             readonly hover: {
-                readonly bg: "#5B4BEA";
+                readonly bg: "#7C5CFF";
                 readonly fg: "#FFFFFF";
-                readonly border: "#5B4BEA";
+                readonly border: "#7C5CFF";
             };
             readonly pressed: {
-                readonly bg: "#6D5BD0";
+                readonly bg: "#9B7CFF";
                 readonly fg: "#FFFFFF";
-                readonly border: "#6D5BD0";
+                readonly border: "#9B7CFF";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#6D5BD0";
-                readonly border: "#6D5BD0";
+                readonly fg: "#B8A8FF";
+                readonly border: "#B8A8FF";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#111827";
-                readonly fg: "#5B4BEA";
-                readonly border: "#5B4BEA";
+                readonly bg: "#1F2937";
+                readonly fg: "#B8A8FF";
+                readonly border: "#D4CCFF";
             };
             readonly pressed: {
-                readonly bg: "#111827";
-                readonly fg: "#6D5BD0";
-                readonly border: "#6D5BD0";
+                readonly bg: "#1F2937";
+                readonly fg: "#9B7CFF";
+                readonly border: "#9B7CFF";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#6D5BD0";
+                readonly fg: "#B8A8FF";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#111827";
-                readonly fg: "#5B4BEA";
+                readonly bg: "#1F2937";
+                readonly fg: "#D4CCFF";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#111827";
-                readonly fg: "#6D5BD0";
+                readonly bg: "#1F2937";
+                readonly fg: "#9B7CFF";
                 readonly border: "transparent";
             };
         };
@@ -55,52 +55,52 @@ export declare const button: {
     readonly secondary: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#0265c7";
-                readonly fg: "#FFFFFF";
-                readonly border: "#0265c7";
+                readonly bg: "#3ED5EE";
+                readonly fg: "#000000";
+                readonly border: "#3ED5EE";
             };
             readonly hover: {
-                readonly bg: "#023ac7";
-                readonly fg: "#FFFFFF";
-                readonly border: "#023ac7";
+                readonly bg: "#79E8F8";
+                readonly fg: "#000000";
+                readonly border: "#79E8F8";
             };
             readonly pressed: {
-                readonly bg: "#0265c7";
-                readonly fg: "#FFFFFF";
-                readonly border: "#0265c7";
+                readonly bg: "#B4F4FD";
+                readonly fg: "#000000";
+                readonly border: "#B4F4FD";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#0265c7";
-                readonly border: "#0265c7";
+                readonly fg: "#79E8F8";
+                readonly border: "#79E8F8";
                 readonly bg: string;
             };
             readonly hover: {
                 readonly bg: "#1F2937";
-                readonly fg: "#023ac7";
-                readonly border: "#023ac7";
+                readonly fg: "#B4F4FD";
+                readonly border: "#B4F4FD";
             };
             readonly pressed: {
                 readonly bg: "#111827";
-                readonly fg: "#0265c7";
-                readonly border: "#0265c7";
+                readonly fg: "#B4F4FD";
+                readonly border: "#B4F4FD";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#0265c7";
+                readonly fg: "#79E8F8";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
                 readonly bg: "#1F2937";
-                readonly fg: "#023ac7";
+                readonly fg: "#B4F4FD";
                 readonly border: "transparent";
             };
             readonly pressed: {
                 readonly bg: "#111827";
-                readonly fg: "#0265c7";
+                readonly fg: "#B4F4FD";
                 readonly border: "transparent";
             };
         };
@@ -171,50 +171,50 @@ export declare const button: {
                 readonly border: "#F43F5E";
             };
             readonly pressed: {
-                readonly bg: "#B91C1C";
+                readonly bg: "#9F1239";
                 readonly fg: "#FFFFFF";
-                readonly border: "#B91C1C";
+                readonly border: "#9F1239";
             };
         };
         readonly outline: {
             readonly default: {
-                readonly fg: "#E11D48";
-                readonly border: "#E11D48";
+                readonly fg: "#FB7185";
+                readonly border: "#FB7185";
                 readonly bg: string;
             };
             readonly hover: {
                 readonly bg: "#111827";
-                readonly fg: "#F43F5E";
-                readonly border: "#F43F5E";
+                readonly fg: "#FDA4AF";
+                readonly border: "#FDA4AF";
             };
             readonly pressed: {
                 readonly bg: "#111827";
-                readonly fg: "#B91C1C";
-                readonly border: "#B91C1C";
+                readonly fg: "#9F1239";
+                readonly border: "#9F1239";
             };
         };
         readonly ghost: {
             readonly default: {
-                readonly fg: "#E11D48";
+                readonly fg: "#FB7185";
                 readonly border: "transparent";
                 readonly bg: string;
             };
             readonly hover: {
                 readonly bg: "#111827";
-                readonly fg: "#F43F5E";
+                readonly fg: "#FDA4AF";
                 readonly border: "transparent";
             };
             readonly pressed: {
                 readonly bg: "#111827";
-                readonly fg: "#B91C1C";
+                readonly fg: "#9F1239";
                 readonly border: "transparent";
             };
         };
     };
     readonly disabled: {
-        readonly bg: "#1F2937";
+        readonly bg: "#374151";
         readonly fg: "#6B7280";
-        readonly border: "#FFFFFF";
+        readonly border: "#4B5563";
     };
 };
 //# sourceMappingURL=button.d.ts.map

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":"AASA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/button.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8KT,CAAC"}

package/dist/highContrast/components/button.js

@@ -1,5 +1,6 @@
 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 = {
@@ -15,16 +16,16 @@ export const button = {
         outline: {
             default: {
                 ...transparent,
-                fg: action.primary.default.bg,
-                border: action.primary.default.border,
+                fg: action.primary.muted.bg,
+                border: action.primary.muted.border,
             },
             hover: {
-                bg: action.primary.subtle.bg,
-                fg: action.primary.hover.bg,
-                border: action.primary.hover.border,
+                bg: surface.hover,
+                fg: action.primary.muted.bg,
+                border: action.primary.subtle.border,
             },
             pressed: {
-                bg: action.primary.subtle.bg,
+                bg: surface.hover,
                 fg: action.primary.active.bg,
                 border: action.primary.active.border,
             },
@@ -32,16 +33,16 @@ export const button = {
         ghost: {
             default: {
                 ...transparent,
-                fg: action.primary.default.bg,
+                fg: action.primary.muted.bg,
                 border: 'transparent',
             },
             hover: {
-                bg: action.primary.subtle.bg,
-                fg: action.primary.hover.bg,
+                bg: surface.hover,
+                fg: action.primary.subtle.bg,
                 border: 'transparent',
             },
             pressed: {
-                bg: action.primary.subtle.bg,
+                bg: surface.hover,
                 fg: action.primary.active.bg,
                 border: 'transparent',
             },
@@ -56,13 +57,13 @@ export const button = {
         outline: {
             default: {
                 ...transparent,
-                fg: action.secondary.default.bg,
-                border: action.secondary.default.border,
+                fg: action.secondary.muted.bg,
+                border: action.secondary.muted.border,
             },
             hover: {
                 bg: surface.hover,
-                fg: action.secondary.hover.bg,
-                border: action.secondary.hover.border,
+                fg: action.secondary.subtle.bg,
+                border: action.secondary.subtle.border,
             },
             pressed: {
                 bg: surface.pressed,
@@ -73,12 +74,12 @@ export const button = {
         ghost: {
             default: {
                 ...transparent,
-                fg: action.secondary.default.bg,
+                fg: action.secondary.muted.bg,
                 border: 'transparent',
             },
             hover: {
                 bg: surface.hover,
-                fg: action.secondary.hover.bg,
+                fg: action.secondary.subtle.bg,
                 border: 'transparent',
             },
             pressed: {
@@ -138,16 +139,16 @@ export const button = {
         outline: {
             default: {
                 ...transparent,
-                fg: action.danger.default.bg,
-                border: action.danger.default.border,
+                fg: action.danger.muted.bg,
+                border: action.danger.muted.border,
             },
             hover: {
-                bg: action.danger.subtle.bg,
-                fg: action.danger.hover.bg,
-                border: action.danger.hover.border,
+                bg: status.error.bg,
+                fg: action.danger.subtle.bg,
+                border: action.danger.subtle.border,
             },
             pressed: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.active.bg,
                 border: action.danger.active.border,
             },
@@ -155,24 +156,24 @@ export const button = {
         ghost: {
             default: {
                 ...transparent,
-                fg: action.danger.default.bg,
+                fg: action.danger.muted.bg,
                 border: 'transparent',
             },
             hover: {
-                bg: action.danger.subtle.bg,
-                fg: action.danger.hover.bg,
+                bg: status.error.bg,
+                fg: action.danger.subtle.bg,
                 border: 'transparent',
             },
             pressed: {
-                bg: action.danger.subtle.bg,
+                bg: status.error.bg,
                 fg: action.danger.active.bg,
                 border: 'transparent',
             },
         },
     },
     disabled: {
-        bg: surface.subtle,
+        bg: surface.elevated,
         fg: text.disabled,
-        border: border.default,
+        border: border.disabled,
     },
 };

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

@@ -7,36 +7,36 @@ export declare const checkbox: {
     readonly hover: {
         readonly bg: "#111827";
         readonly fg: "#000000";
-        readonly border: "#7C6CF2";
+        readonly border: "#7C5CFF";
     };
     readonly checked: {
         readonly default: {
-            readonly bg: "#7C6CF2";
+            readonly bg: "#7C5CFF";
             readonly fg: "#FFFFFF";
-            readonly border: "#7C6CF2";
+            readonly border: "#7C5CFF";
         };
         readonly hover: {
-            readonly bg: "#0EA5E9";
+            readonly bg: "#0369A1";
             readonly fg: "#000000";
-            readonly border: "#0EA5E9";
+            readonly border: "#0369A1";
         };
         readonly pressed: {
-            readonly bg: "#4936D9";
+            readonly bg: "#402C9F";
             readonly fg: "#000000";
-            readonly border: "#4936D9";
+            readonly border: "#402C9F";
         };
     };
     readonly focus: {
-        readonly ring: "#FFFF00";
+        readonly ring: "#F59E0B";
     };
     readonly disabled: {
-        readonly bg: "#1F2937";
+        readonly bg: "#111827";
         readonly fg: "#6B7280";
         readonly border: "#4B5563";
     };
     readonly error: {
-        readonly border: "#FF8A8A";
-        readonly fg: "#FF8A8A";
+        readonly border: "#FB7185";
+        readonly fg: "#FB7185";
     };
 };
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -8,17 +8,17 @@ export declare const dropdown: {
         readonly hover: {
             readonly bg: "transparent";
             readonly fg: "#FFFFFF";
-            readonly border: "#FFFF00";
-            readonly ring: "#FFFF00";
+            readonly border: "#FBBF24";
+            readonly ring: "#F59E0B";
         };
         readonly focus: {
             readonly bg: "transparent";
             readonly fg: "#FFFFFF";
-            readonly border: "#FFFF00";
-            readonly ring: "#FFFF00";
+            readonly border: "#FBBF24";
+            readonly ring: "#F59E0B";
         };
         readonly disabled: {
-            readonly bg: "#111827";
+            readonly bg: "#1F2937";
             readonly fg: "#6B7280";
             readonly border: "#4B5563";
         };
@@ -40,10 +40,10 @@ export declare const dropdown: {
         readonly active: {
             readonly bg: "#1F2937";
             readonly fg: "#FFFFFF";
-            readonly ring: "#FFFF00";
+            readonly ring: "#F59E0B";
         };
         readonly focus: {
-            readonly ring: "#FFFF00";
+            readonly ring: "#F59E0B";
         };
         readonly disabled: {
             readonly bg: "transparent";
@@ -51,16 +51,16 @@ export declare const dropdown: {
         };
         readonly danger: {
             readonly default: {
-                readonly fg: "#FF8A8A";
+                readonly fg: "#FB7185";
             };
             readonly hover: {
                 readonly bg: "#1F2937";
-                readonly fg: "#FF8A8A";
+                readonly fg: "#FB7185";
             };
             readonly active: {
                 readonly bg: "#1F2937";
-                readonly fg: "#FF8A8A";
-                readonly ring: "#FFFF00";
+                readonly fg: "#FB7185";
+                readonly ring: "#F59E0B";
             };
         };
     };

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

@@ -10,20 +10,20 @@ export declare const formField: {
             readonly fg: "#E5E7EB";
         };
         readonly error: {
-            readonly fg: "#FF8A8A";
+            readonly fg: "#FB7185";
         };
         readonly success: {
-            readonly fg: "#9AFFB8";
+            readonly fg: "#6EE7B7";
         };
         readonly warning: {
-            readonly fg: "#FFFF00";
+            readonly fg: "#FBBF24";
         };
         readonly info: {
-            readonly fg: "#3399FF";
+            readonly fg: "#0284C7";
         };
     };
     readonly requiredMark: {
-        readonly fg: "#FF8A8A";
+        readonly fg: "#FB7185";
     };
     readonly disabled: {
         readonly labelFg: "#6B7280";