@vellira-ui/tokens 2.20.0 → 2.22.0

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 fg: "#FB7185";
+        readonly border: "#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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BX,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/checkbox.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBX,CAAC"}

package/dist/highContrast/components/checkbox.js

@@ -5,11 +5,7 @@ import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
 export const checkbox = {
-    default: {
-        bg: surface.default,
-        fg: text.primary,
-        border: border.muted,
-    },
+    default: control.default,
     hover: control.hover,
     checked: {
         default: control.selected.default,
@@ -25,7 +21,7 @@ export const checkbox = {
         border: border.muted,
     },
     error: {
-        border: status.error.fg,
         fg: status.error.fg,
+        border: status.error.fg,
     },
 };

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";

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

@@ -4,33 +4,60 @@ export declare const input: {
         readonly fg: "#FFFFFF";
         readonly border: "#FFFFFF";
         readonly placeholder: "#E5E7EB";
+        readonly icon: "#9B7CFF";
     };
     readonly hover: {
-        readonly bg: "#FFFF00";
+        readonly bg: "#1F2937";
         readonly fg: "#000000";
-        readonly border: "#FFFF00";
+        readonly border: "#FBBF24";
         readonly placeholder: "#000000";
+        readonly icon: "#9B7CFF";
     };
     readonly focus: {
         readonly bg: "transparent";
         readonly fg: "#FFFFFF";
-        readonly border: "#FFFF00";
-        readonly ring: "#FFFF00";
+        readonly border: "#FBBF24";
+        readonly ring: "#F59E0B";
         readonly placeholder: "#E5E7EB";
+        readonly icon: "#FFFFFF";
     };
     readonly disabled: {
-        readonly bg: "#111827";
+        readonly bg: "#1F2937";
         readonly fg: "#6B7280";
         readonly border: "#4B5563";
         readonly placeholder: "#6B7280";
+        readonly icon: "#D1D5DB";
     };
     readonly error: {
-        readonly border: "#FF8A8A";
-        readonly ring: "#FF8A8A";
+        readonly border: "#FB7185";
+        readonly ring: "#FB7185";
     };
     readonly success: {
-        readonly border: "#9AFFB8";
-        readonly ring: "#9AFFB8";
+        readonly border: "#6EE7B7";
+        readonly ring: "#6EE7B7";
+    };
+    readonly readOnly: {
+        readonly bg: "#111827";
+        readonly fg: "#EEE8FA";
+        readonly border: "#FFFFFF";
+        readonly placeholder: "#E5E7EB";
+        readonly icon: "#9CA3AF";
+    };
+    readonly icon: {
+        readonly default: "#0F0F0F";
+        readonly primary: "#B8A8FF";
+        readonly secondary: "#9CA3AF";
+        readonly success: "#10B981";
+        readonly danger: "#F43F5E";
+        readonly muted: "#9CA3AF";
+        readonly inverse: "#1A1A1A";
+    };
+    readonly clearButton: {
+        readonly fg: "#FB7185";
+        readonly hoverFg: "#FB7185";
+        readonly hoverBg: string;
+        readonly focusBg: "#FFFFFF";
+        readonly pressedBg: "#111827";
     };
 };
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/input.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCR,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/input.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqER,CAAC"}

package/dist/highContrast/components/input.js

@@ -1,5 +1,6 @@
 import { border } from '../semantic/border.js';
 import { focus } from '../semantic/focus.js';
+import { icons } from '../semantic/icons.js';
 import { navigation } from '../semantic/navigation.js';
 import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
@@ -10,12 +11,14 @@ export const input = {
         fg: text.primary,
         border: border.default,
         placeholder: text.muted,
+        icon: icons.brand,
     },
     hover: {
-        bg: navigation.hover.bg,
+        bg: surface.hover,
         fg: navigation.hover.fg,
         border: navigation.hover.bg,
         placeholder: navigation.hover.fg,
+        icon: icons.hover,
     },
     focus: {
         bg: 'transparent',
@@ -23,19 +26,44 @@ export const input = {
         border: border.focus,
         ring: focus.ring,
         placeholder: text.muted,
+        icon: icons.subtle,
     },
     disabled: {
         bg: surface.muted,
         fg: text.disabled,
         border: border.muted,
         placeholder: text.disabled,
+        icon: icons.disabled,
     },
     error: {
-        border: status.error.strong,
+        border: status.error.border,
         ring: status.error.fg,
     },
     success: {
         border: status.success.strong,
         ring: status.success.fg,
     },
+    readOnly: {
+        bg: surface.subtle,
+        fg: text.secondary,
+        border: border.default,
+        placeholder: text.muted,
+        icon: icons.muted,
+    },
+    icon: {
+        default: icons.default,
+        primary: icons.primary,
+        secondary: icons.secondary,
+        success: icons.success,
+        danger: icons.danger,
+        muted: icons.muted,
+        inverse: icons.inverse,
+    },
+    clearButton: {
+        fg: status.error.fg,
+        hoverFg: status.error.fg,
+        hoverBg: surface.danger,
+        focusBg: surface.inverse,
+        pressedBg: surface.active,
+    },
 };

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

@@ -13,10 +13,10 @@ export declare const menu: {
             readonly fg: "#FFFFFF";
         };
         readonly focus: {
-            readonly ring: "#FFFF00";
+            readonly ring: "#F59E0B";
         };
         readonly disabled: {
-            readonly bg: "#111827";
+            readonly bg: "#1F2937";
             readonly fg: "#6B7280";
         };
         readonly danger: {
@@ -24,12 +24,12 @@ export declare const menu: {
                 readonly fg: "#E11D48";
             };
             readonly hover: {
-                readonly bg: "#111827";
-                readonly fg: "#FF8A8A";
+                readonly bg: "#FDA4AF";
+                readonly fg: "#FDA4AF";
             };
             readonly active: {
-                readonly bg: "#4C0519";
-                readonly fg: "#FF8A8A";
+                readonly bg: "#FB7185";
+                readonly fg: "#FB7185";
             };
         };
     };
@@ -38,7 +38,7 @@ export declare const menu: {
             readonly fg: "#FFFFFF";
         };
         readonly hover: {
-            readonly bg: "#FFFF00";
+            readonly bg: "#F59E0B";
             readonly fg: "#000000";
             readonly ring: "transparent";
         };

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

@@ -19,7 +19,7 @@ export declare const modal: {
             readonly fg: "#EEE8FA";
         };
         readonly hover: {
-            readonly bg: "#1F2937";
+            readonly bg: "#111827";
             readonly fg: "#FFFFFF";
         };
         readonly disabled: {

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

@@ -6,31 +6,31 @@ export declare const radio: {
     };
     readonly hover: {
         readonly bg: "#111827";
-        readonly fg: "#7C6CF2";
-        readonly border: "#A78BFA";
+        readonly fg: "#B8A8FF";
+        readonly border: "#B8A8FF";
     };
     readonly checked: {
         readonly default: {
-            readonly bg: "#8B7CF6";
-            readonly fg: "#6D5BD0";
-            readonly border: "#7C6CF2";
+            readonly bg: "#9B7CFF";
+            readonly fg: "#7C5CFF";
+            readonly border: "#B8A8FF";
         };
         readonly hover: {
             readonly fg: "#FFFFFF";
-            readonly bg: "#0EA5E9";
-            readonly border: "#0EA5E9";
+            readonly bg: "#0369A1";
+            readonly border: "#0369A1";
         };
         readonly pressed: {
             readonly fg: "#FFFFFF";
-            readonly bg: "#4936D9";
-            readonly border: "#4936D9";
+            readonly bg: "#402C9F";
+            readonly border: "#402C9F";
         };
     };
     readonly focus: {
-        readonly ring: "#FFFF00";
+        readonly ring: "#F59E0B";
     };
     readonly disabled: {
-        readonly bg: "#1F2937";
+        readonly bg: "#111827";
         readonly fg: "#6B7280";
         readonly border: "#FFFFFF";
     };

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

@@ -1,38 +1,38 @@
 export declare const select: {
     readonly trigger: {
         readonly default: {
-            readonly bg: "#000000";
+            readonly bg: "transparent";
             readonly fg: "#FFFFFF";
             readonly border: "#FFFFFF";
         };
         readonly hover: {
-            readonly bg: "transparent";
+            readonly bg: "#1F2937";
             readonly fg: "#FFFFFF";
-            readonly border: "#FFFF00";
+            readonly border: "#FBBF24";
         };
         readonly focus: {
             readonly bg: "#000000";
             readonly fg: "#FFFFFF";
-            readonly border: "#FFFF00";
-            readonly ring: "#FFFF00";
+            readonly border: "#FBBF24";
+            readonly ring: "#F59E0B";
         };
         readonly disabled: {
-            readonly bg: "#1F2937";
+            readonly bg: "#111827";
             readonly fg: "#6B7280";
-            readonly border: "#374151";
+            readonly border: "#4B5563";
         };
         readonly placeholder: {
             readonly fg: "#E5E7EB";
         };
         readonly error: {
-            readonly border: "#FF8A8A";
+            readonly border: "#FB7185";
             readonly ring: "#111827";
         };
     };
     readonly dropdown: {
         readonly bg: "#374151";
         readonly fg: "#FFFFFF";
-        readonly border: "#FFFF00";
+        readonly border: "#FBBF24";
     };
     readonly option: {
         readonly default: {
@@ -41,22 +41,22 @@ export declare const select: {
             readonly border: "#4B5563";
         };
         readonly hover: {
-            readonly bg: "#FFFF00";
+            readonly bg: "#FBBF24";
             readonly fg: "#000000";
         };
         readonly active: {
             readonly ring: "transparent";
-            readonly bg: "#FFFF00";
+            readonly bg: "#FBBF24";
             readonly fg: "#000000";
         };
         readonly selected: {
-            readonly bg: "#7C6CF2";
+            readonly bg: "#7C5CFF";
             readonly fg: "#FFFFFF";
         };
         readonly disabled: {
             readonly bg: "transparent";
             readonly fg: "#6B7280";
-            readonly border: "#374151";
+            readonly border: "#4B5563";
         };
     };
 };

package/dist/highContrast/components/select.js

@@ -8,12 +8,12 @@ import { text } from '../semantic/text.js';
 export const select = {
     trigger: {
         default: {
-            bg: surface.default,
+            bg: 'transparent',
             fg: text.primary,
             border: border.default,
         },
         hover: {
-            bg: 'transparent',
+            bg: surface.muted,
             fg: text.primary,
             border: navigation.hover.bg,
         },