@vellira-ui/tokens 2.25.1 → 2.26.1

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

@@ -2,51 +2,51 @@ export declare const button: {
     readonly primary: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#6346E8";
+                readonly bg: "#7352F8";
                 readonly fg: "#FFFFFF";
-                readonly border: "#6346E8";
+                readonly border: "#FFFFFF";
             };
             readonly hover: {
-                readonly bg: "#7C5CFF";
-                readonly fg: "#FFFFFF";
-                readonly border: "#7C5CFF";
+                readonly bg: "#9B7CFF";
+                readonly fg: "#000000";
+                readonly border: "#FCD34D";
             };
             readonly pressed: {
-                readonly bg: "#9B7CFF";
+                readonly bg: "#6346E8";
                 readonly fg: "#FFFFFF";
-                readonly border: "#9B7CFF";
+                readonly border: "#FCD34D";
             };
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#B8A8FF";
                 readonly border: "#B8A8FF";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#1F2937";
+                readonly bg: "#111827";
                 readonly fg: "#B8A8FF";
-                readonly border: "#D4CCFF";
+                readonly border: "#FCD34D";
             };
             readonly pressed: {
-                readonly bg: "#1F2937";
+                readonly bg: "#21164F";
                 readonly fg: "#9B7CFF";
-                readonly border: "#9B7CFF";
+                readonly border: "#FCD34D";
             };
         };
         readonly ghost: {
             readonly default: {
                 readonly fg: "#B8A8FF";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#1F2937";
-                readonly fg: "#D4CCFF";
+                readonly bg: "#111827";
+                readonly fg: "#B8A8FF";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#1F2937";
+                readonly bg: "#21164F";
                 readonly fg: "#9B7CFF";
                 readonly border: "transparent";
             };
@@ -55,52 +55,52 @@ export declare const button: {
     readonly secondary: {
         readonly solid: {
             readonly default: {
-                readonly bg: "#3ED5EE";
+                readonly bg: "#79E8F8";
                 readonly fg: "#000000";
-                readonly border: "#3ED5EE";
+                readonly border: "#FFFFFF";
             };
             readonly hover: {
-                readonly bg: "#79E8F8";
+                readonly bg: "#B4F4FD";
                 readonly fg: "#000000";
-                readonly border: "#79E8F8";
+                readonly border: "#FCD34D";
             };
             readonly pressed: {
-                readonly bg: "#B4F4FD";
+                readonly bg: "#3ED5EE";
                 readonly fg: "#000000";
-                readonly border: "#B4F4FD";
+                readonly border: "#FCD34D";
             };
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#79E8F8";
                 readonly border: "#79E8F8";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#1F2937";
-                readonly fg: "#B4F4FD";
-                readonly border: "#B4F4FD";
+                readonly bg: "#111827";
+                readonly fg: "#3ED5EE";
+                readonly border: "#FBBF24";
             };
             readonly pressed: {
-                readonly bg: "#111827";
-                readonly fg: "#B4F4FD";
-                readonly border: "#B4F4FD";
+                readonly bg: "#062F3B";
+                readonly fg: "#1FBEDB";
+                readonly border: "#F59E0B";
             };
         };
         readonly ghost: {
             readonly default: {
                 readonly fg: "#79E8F8";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#1F2937";
-                readonly fg: "#B4F4FD";
+                readonly bg: "#111827";
+                readonly fg: "#3ED5EE";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#111827";
-                readonly fg: "#B4F4FD";
+                readonly bg: "#062F3B";
+                readonly fg: "#1FBEDB";
                 readonly border: "transparent";
             };
         };
@@ -113,47 +113,47 @@ export declare const button: {
                 readonly border: "#FFFFFF";
             };
             readonly hover: {
-                readonly bg: "#D1D5DB";
+                readonly bg: "#E5E7EB";
                 readonly fg: "#000000";
-                readonly border: "#D1D5DB";
+                readonly border: "#FCD34D";
             };
             readonly pressed: {
                 readonly bg: "#9CA3AF";
                 readonly fg: "#000000";
-                readonly border: "#9CA3AF";
+                readonly border: "#FCD34D";
             };
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#FFFFFF";
-                readonly border: "#FFFFFF";
-                readonly bg: string;
+                readonly border: "#9CA3AF";
             };
             readonly hover: {
-                readonly bg: "#1F2937";
-                readonly fg: "#D1D5DB";
-                readonly border: "#D1D5DB";
+                readonly bg: "#111827";
+                readonly fg: "#FFFFFF";
+                readonly border: "#FCD34D";
             };
             readonly pressed: {
-                readonly bg: "#111827";
-                readonly fg: "#9CA3AF";
-                readonly border: "#9CA3AF";
+                readonly bg: "#1F2937";
+                readonly fg: "#FFFFFF";
+                readonly border: "#FCD34D";
             };
         };
         readonly ghost: {
             readonly default: {
                 readonly fg: "#FFFFFF";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: "#1F2937";
-                readonly fg: "#D1D5DB";
+                readonly bg: "#111827";
+                readonly fg: "#FFFFFF";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: "#111827";
-                readonly fg: "#9CA3AF";
+                readonly bg: "#1F2937";
+                readonly fg: "#FFFFFF";
                 readonly border: "transparent";
             };
         };
@@ -163,56 +163,56 @@ export declare const button: {
             readonly default: {
                 readonly bg: "#E11D48";
                 readonly fg: "#FFFFFF";
-                readonly border: "#E11D48";
+                readonly border: "#FFFFFF";
             };
             readonly hover: {
                 readonly bg: "#F43F5E";
-                readonly fg: "#FFFFFF";
-                readonly border: "#F43F5E";
+                readonly fg: "#000000";
+                readonly border: "#FCD34D";
             };
             readonly pressed: {
-                readonly bg: "#9F1239";
+                readonly bg: "#BE123C";
                 readonly fg: "#FFFFFF";
-                readonly border: "#9F1239";
+                readonly border: "#FCD34D";
             };
         };
         readonly outline: {
             readonly default: {
+                readonly bg: "transparent";
                 readonly fg: "#FB7185";
                 readonly border: "#FB7185";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: string;
-                readonly fg: "#FDA4AF";
-                readonly border: "#FDA4AF";
+                readonly bg: "#4C0519";
+                readonly fg: "#FECDD3";
+                readonly border: "#FCD34D";
             };
             readonly pressed: {
-                readonly bg: string;
-                readonly fg: "#9F1239";
-                readonly border: "#9F1239";
+                readonly bg: "#4C0519";
+                readonly fg: "#FECDD3";
+                readonly border: "#FCD34D";
             };
         };
         readonly ghost: {
             readonly default: {
                 readonly fg: "#FB7185";
+                readonly bg: "transparent";
                 readonly border: "transparent";
-                readonly bg: string;
             };
             readonly hover: {
-                readonly bg: string;
-                readonly fg: "#FDA4AF";
+                readonly bg: "#4C0519";
+                readonly fg: "#FECDD3";
                 readonly border: "transparent";
             };
             readonly pressed: {
-                readonly bg: string;
-                readonly fg: "#9F1239";
+                readonly bg: "#4C0519";
+                readonly fg: "#FECDD3";
                 readonly border: "transparent";
             };
         };
     };
     readonly disabled: {
-        readonly bg: "#374151";
+        readonly bg: "#111827";
         readonly fg: "#6B7280";
         readonly border: "#4B5563";
     };

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":"AAYA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkLT,CAAC"}

package/dist/highContrast/components/button.js

@@ -1,9 +1,12 @@
+import { colors } from '../../primitives/colors.js';
 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 = {
     bg: 'transparent',
+    border: 'transparent',
 };
 export const button = {
     primary: {
@@ -14,36 +17,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.primary.muted.bg,
-                border: action.primary.muted.border,
+                bg: 'transparent',
+                fg: colors.primary[300],
+                border: colors.primary[300],
             },
             hover: {
-                bg: surface.hover,
-                fg: action.primary.muted.bg,
-                border: action.primary.subtle.border,
+                bg: action.primary.subtle.bg,
+                fg: colors.primary[300],
+                border: colors.warning[300],
             },
             pressed: {
-                bg: surface.hover,
-                fg: action.primary.active.bg,
-                border: action.primary.active.border,
+                bg: action.primary.muted.bg,
+                fg: colors.primary[400],
+                border: colors.warning[300],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.primary.muted.bg,
-                border: 'transparent',
+                fg: colors.primary[300],
             },
             hover: {
-                bg: surface.hover,
-                fg: action.primary.subtle.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.primary.subtle.bg,
+                fg: colors.primary[300],
             },
             pressed: {
-                bg: surface.hover,
-                fg: action.primary.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.primary.muted.bg,
+                fg: colors.primary[400],
             },
         },
     },
@@ -55,36 +57,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.secondary.muted.bg,
-                border: action.secondary.muted.border,
+                bg: 'transparent',
+                fg: colors.secondary[300],
+                border: colors.secondary[300],
             },
             hover: {
-                bg: surface.hover,
-                fg: action.secondary.subtle.bg,
-                border: action.secondary.subtle.border,
+                bg: action.secondary.subtle.bg,
+                fg: colors.secondary[400],
+                border: colors.warning[400],
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.secondary.active.bg,
-                border: action.secondary.active.border,
+                bg: action.secondary.muted.bg,
+                fg: colors.secondary[500],
+                border: colors.warning[500],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.secondary.muted.bg,
-                border: 'transparent',
+                fg: colors.secondary[300],
             },
             hover: {
-                bg: surface.hover,
-                fg: action.secondary.subtle.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.secondary.subtle.bg,
+                fg: colors.secondary[400],
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.secondary.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.secondary.muted.bg,
+                fg: colors.secondary[500],
             },
         },
     },
@@ -96,36 +97,35 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.close.default.bg,
-                border: action.close.default.border,
+                bg: 'transparent',
+                fg: text.primary,
+                border: border.default,
             },
             hover: {
-                bg: surface.hover,
-                fg: action.close.hover.bg,
-                border: action.close.hover.border,
+                bg: action.close.subtle.bg,
+                fg: text.primary,
+                border: colors.warning[300],
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.close.active.bg,
-                border: action.close.active.border,
+                bg: action.close.muted.bg,
+                fg: text.primary,
+                border: colors.warning[300],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.close.default.bg,
-                border: 'transparent',
+                fg: text.primary,
             },
             hover: {
-                bg: surface.hover,
-                fg: action.close.hover.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.close.subtle.bg,
+                fg: text.primary,
             },
             pressed: {
-                bg: surface.pressed,
-                fg: action.close.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.close.muted.bg,
+                fg: text.primary,
             },
         },
     },
@@ -137,41 +137,40 @@ export const button = {
         },
         outline: {
             default: {
-                ...transparent,
-                fg: action.danger.muted.bg,
-                border: action.danger.muted.border,
+                bg: 'transparent',
+                fg: status.error.fg,
+                border: status.error.border,
             },
             hover: {
-                bg: surface.danger,
-                fg: action.danger.subtle.bg,
-                border: action.danger.subtle.border,
+                bg: status.error.bg,
+                fg: status.error.strong,
+                border: colors.warning[300],
             },
             pressed: {
-                bg: surface.danger,
-                fg: action.danger.active.bg,
-                border: action.danger.active.border,
+                bg: action.danger.muted.bg,
+                fg: status.error.strong,
+                border: colors.warning[300],
             },
         },
         ghost: {
             default: {
                 ...transparent,
-                fg: action.danger.muted.bg,
-                border: 'transparent',
+                fg: status.error.fg,
             },
             hover: {
-                bg: surface.danger,
-                fg: action.danger.subtle.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: status.error.bg,
+                fg: status.error.strong,
             },
             pressed: {
-                bg: surface.danger,
-                fg: action.danger.active.bg,
-                border: 'transparent',
+                ...transparent,
+                bg: action.danger.muted.bg,
+                fg: status.error.strong,
             },
         },
     },
     disabled: {
-        bg: surface.elevated,
+        bg: surface.disabled,
         fg: text.disabled,
         border: border.disabled,
     },

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

@@ -1,33 +1,37 @@
 export declare const checkbox: {
     readonly default: {
-        readonly bg: "#1F2937";
+        readonly bg: "#000000";
         readonly fg: "#FFFFFF";
-        readonly border: "#4B5563";
+        readonly border: "#9CA3AF";
     };
     readonly hover: {
-        readonly bg: "#111827";
-        readonly fg: "#B8A8FF";
-        readonly border: "#7C5CFF";
+        readonly labelFg: "#FCD34D";
+        readonly bg: "#374151";
+        readonly fg: "#FBBF24";
+        readonly border: "#FCD34D";
     };
     readonly checked: {
         readonly default: {
-            readonly bg: "#9B7CFF";
-            readonly fg: "#FFFFFF";
-            readonly border: "#9B7CFF";
+            readonly bg: "#FCD34D";
+            readonly fg: "#000000";
+            readonly border: "#FCD34D";
+            readonly labelFg: "#FBBF24";
         };
         readonly hover: {
-            readonly bg: "#0369A1";
-            readonly fg: "#F9FAFB";
-            readonly border: "#0369A1";
+            readonly bg: "#FDE68A";
+            readonly fg: "#000000";
+            readonly border: "#FDE68A";
+            readonly labelFg: "#FCD34D";
         };
         readonly pressed: {
-            readonly bg: "#402C9F";
-            readonly fg: "#F9FAFB";
-            readonly border: "#402C9F";
+            readonly bg: "#FBBF24";
+            readonly fg: "#000000";
+            readonly border: "#FBBF24";
+            readonly labelFg: "#FDE68A";
         };
     };
     readonly focus: {
-        readonly ring: "#F59E0B";
+        readonly ring: "#FCD34D";
     };
     readonly disabled: {
         readonly bg: "#111827";
@@ -37,6 +41,7 @@ export declare const checkbox: {
     readonly error: {
         readonly fg: "#FB7185";
         readonly border: "#FB7185";
+        readonly ring: "#FB7185";
     };
 };
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/checkbox.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBX,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/checkbox.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CX,CAAC"}

package/dist/highContrast/components/checkbox.js

@@ -1,27 +1,40 @@
-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 checkbox = {
     default: control.default,
-    hover: control.hover,
+    hover: {
+        ...control.hover,
+        labelFg: text.interactiveHover,
+    },
     checked: {
-        default: control.selected.default,
-        hover: control.selected.hover,
-        pressed: control.selected.active,
+        default: {
+            bg: control.selected.default.bg,
+            fg: control.selected.default.fg,
+            border: control.selected.default.border,
+            labelFg: text.interactive,
+        },
+        hover: {
+            bg: control.selected.hover.bg,
+            fg: control.selected.hover.fg,
+            border: control.selected.hover.border,
+            labelFg: text.interactiveHover,
+        },
+        pressed: {
+            bg: control.selected.active.bg,
+            fg: control.selected.active.fg,
+            border: control.selected.active.border,
+            labelFg: text.interactiveActive,
+        },
     },
     focus: {
-        ring: focus.ring,
-    },
-    disabled: {
-        bg: surface.subtle,
-        fg: text.disabled,
-        border: border.muted,
+        ring: focus.ring.color,
     },
+    disabled: control.disabled,
     error: {
         fg: status.error.fg,
-        border: status.error.fg,
+        border: status.error.border,
+        ring: status.error.ring,
     },
 };