@vellira-ui/tokens 2.26.1 → 2.28.0

package/dist/highContrast/components/button.js

@@ -1,174 +1,159 @@
 import { colors } from '../../primitives/colors.js';
-import { action } from '../semantic/action.js';
+import { createButtonPalette } from '../../utils/createButtonPalette.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: {
-        solid: {
-            default: action.primary.default,
-            hover: action.primary.hover,
-            pressed: action.primary.active,
+const primary = createButtonPalette({
+    ring: colors.primary[400],
+    solid: {
+        default: {
+            bg: colors.primary[600],
+            fg: colors.primary[50],
+            border: colors.primary[50],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: colors.primary[300],
-                border: colors.primary[300],
-            },
-            hover: {
-                bg: action.primary.subtle.bg,
-                fg: colors.primary[300],
-                border: colors.warning[300],
-            },
-            pressed: {
-                bg: action.primary.muted.bg,
-                fg: colors.primary[400],
-                border: colors.warning[300],
-            },
+        hover: {
+            bg: colors.primary[700],
+            fg: colors.primary[200],
+            border: colors.primary[200],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.primary[300],
-            },
-            hover: {
-                ...transparent,
-                bg: action.primary.subtle.bg,
-                fg: colors.primary[300],
-            },
-            pressed: {
-                ...transparent,
-                bg: action.primary.muted.bg,
-                fg: colors.primary[400],
-            },
+        pressed: {
+            bg: colors.primary[800],
+            fg: colors.primary[300],
+            border: colors.primary[300],
         },
     },
-    secondary: {
-        solid: {
-            default: action.secondary.default,
-            hover: action.secondary.hover,
-            pressed: action.secondary.active,
+    fg: colors.primary[300],
+    bg: colors.grayBlue[900],
+    border: colors.primary[300],
+    hoverBg: colors.primary[950],
+    hoverFg: colors.primary[400],
+    hoverBorder: colors.primary[400],
+    pressedBg: colors.gray[900],
+    pressedFg: colors.primary[500],
+    pressedBorder: colors.primary[500],
+});
+const neutral = createButtonPalette({
+    ring: colors.grayBlue[400],
+    solid: {
+        default: {
+            bg: colors.grayBlue[50],
+            fg: colors.grayBlue[950],
+            border: colors.grayBlue[900],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: colors.secondary[300],
-                border: colors.secondary[300],
-            },
-            hover: {
-                bg: action.secondary.subtle.bg,
-                fg: colors.secondary[400],
-                border: colors.warning[400],
-            },
-            pressed: {
-                bg: action.secondary.muted.bg,
-                fg: colors.secondary[500],
-                border: colors.warning[500],
-            },
+        hover: {
+            bg: colors.grayBlue[200],
+            fg: colors.grayBlue[900],
+            border: colors.grayBlue[700],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: colors.secondary[300],
-            },
-            hover: {
-                ...transparent,
-                bg: action.secondary.subtle.bg,
-                fg: colors.secondary[400],
-            },
-            pressed: {
-                ...transparent,
-                bg: action.secondary.muted.bg,
-                fg: colors.secondary[500],
-            },
+        pressed: {
+            bg: colors.grayBlue[400],
+            fg: colors.grayBlue[800],
+            border: colors.grayBlue[800],
         },
     },
-    close: {
-        solid: {
-            default: action.close.default,
-            hover: action.close.hover,
-            pressed: action.close.active,
+    fg: colors.grayBlue[50],
+    bg: colors.grayBlue[900],
+    border: colors.grayBlue[200],
+    hoverBg: colors.grayBlue[950],
+    hoverFg: colors.gray[200],
+    hoverBorder: colors.gray[200],
+    pressedBg: colors.gray[900],
+    pressedFg: colors.grayBlue[300],
+});
+const success = createButtonPalette({
+    ring: colors.success[500],
+    solid: {
+        default: {
+            bg: colors.success[500],
+            fg: colors.success[950],
+            border: colors.success[50],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: text.primary,
-                border: border.default,
-            },
-            hover: {
-                bg: action.close.subtle.bg,
-                fg: text.primary,
-                border: colors.warning[300],
-            },
-            pressed: {
-                bg: action.close.muted.bg,
-                fg: text.primary,
-                border: colors.warning[300],
-            },
+        hover: {
+            bg: colors.success[600],
+            fg: colors.success[900],
+            border: colors.success[100],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: text.primary,
-            },
-            hover: {
-                ...transparent,
-                bg: action.close.subtle.bg,
-                fg: text.primary,
-            },
-            pressed: {
-                ...transparent,
-                bg: action.close.muted.bg,
-                fg: text.primary,
-            },
+        pressed: {
+            bg: colors.success[700],
+            fg: colors.success[800],
+            border: colors.success[200],
         },
     },
-    danger: {
-        solid: {
-            default: action.danger.default,
-            hover: action.danger.hover,
-            pressed: action.danger.active,
+    fg: colors.success[300],
+    bg: status.success.bg,
+    border: colors.success[300],
+    hoverBg: colors.success[900],
+    hoverFg: colors.success[400],
+    hoverBorder: colors.success[400],
+    pressedBg: colors.success[950],
+    pressedFg: colors.success[500],
+    pressedBorder: colors.success[500],
+});
+const warning = createButtonPalette({
+    ring: colors.warning[500],
+    solid: {
+        default: {
+            bg: colors.warning[500],
+            fg: colors.warning[950],
+            border: colors.warning[50],
         },
-        outline: {
-            default: {
-                bg: 'transparent',
-                fg: status.error.fg,
-                border: status.error.border,
-            },
-            hover: {
-                bg: status.error.bg,
-                fg: status.error.strong,
-                border: colors.warning[300],
-            },
-            pressed: {
-                bg: action.danger.muted.bg,
-                fg: status.error.strong,
-                border: colors.warning[300],
-            },
+        hover: {
+            bg: colors.warning[600],
+            fg: colors.warning[900],
+            border: colors.warning[100],
         },
-        ghost: {
-            default: {
-                ...transparent,
-                fg: status.error.fg,
-            },
-            hover: {
-                ...transparent,
-                bg: status.error.bg,
-                fg: status.error.strong,
-            },
-            pressed: {
-                ...transparent,
-                bg: action.danger.muted.bg,
-                fg: status.error.strong,
-            },
+        pressed: {
+            bg: colors.warning[700],
+            fg: colors.warning[800],
+            border: colors.warning[200],
         },
     },
+    fg: colors.warning[500],
+    bg: status.warning.bg,
+    border: colors.warning[500],
+    hoverBg: colors.warning[900],
+    hoverFg: colors.warning[400],
+    hoverBorder: colors.warning[400],
+    pressedBg: colors.warning[950],
+    pressedFg: colors.warning[600],
+    pressedBorder: colors.warning[600],
+});
+const danger = createButtonPalette({
+    ring: colors.error[500],
+    solid: {
+        default: {
+            bg: colors.error[700],
+            fg: colors.error[50],
+            border: colors.error[200],
+        },
+        hover: {
+            bg: colors.error[600],
+            fg: colors.error[200],
+            border: colors.error[200],
+        },
+        pressed: {
+            bg: colors.error[800],
+            fg: colors.error[300],
+            border: colors.error[400],
+        },
+    },
+    fg: colors.error[400],
+    bg: colors.error[950],
+    border: colors.error[400],
+    hoverBg: colors.error[900],
+    hoverFg: colors.error[200],
+    hoverBorder: colors.error[400],
+    pressedBg: colors.error[800],
+    pressedFg: colors.error[300],
+    pressedBorder: colors.error[500],
+});
+export const button = {
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     disabled: {
         bg: surface.disabled,
         fg: text.disabled,

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

@@ -10,25 +10,35 @@ export declare const checkbox: {
         readonly fg: "#FBBF24";
         readonly border: "#FCD34D";
     };
-    readonly checked: {
-        readonly default: {
-            readonly bg: "#FCD34D";
-            readonly fg: "#000000";
-            readonly border: "#FCD34D";
-            readonly labelFg: "#FBBF24";
-        };
-        readonly hover: {
-            readonly bg: "#FDE68A";
-            readonly fg: "#000000";
-            readonly border: "#FDE68A";
-            readonly labelFg: "#FCD34D";
-        };
-        readonly pressed: {
-            readonly bg: "#FBBF24";
-            readonly fg: "#000000";
-            readonly border: "#FBBF24";
-            readonly labelFg: "#FDE68A";
-        };
+    readonly primary: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly neutral: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly success: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly warning: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
+    };
+    readonly danger: {
+        readonly ring: string;
+        readonly default: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly hover: import("../../utils/createCheckboxPalette.js").CheckboxState;
+        readonly pressed: import("../../utils/createCheckboxPalette.js").CheckboxState;
     };
     readonly focus: {
         readonly ring: "#FCD34D";

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":"AAKA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CX,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/checkbox.ts"],"names":[],"mappings":"AAqHA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBX,CAAC"}

package/dist/highContrast/components/checkbox.js

@@ -1,33 +1,125 @@
+import { colors } from '../../primitives/colors.js';
+import { createCheckboxPalette } from '../../utils/createCheckboxPalette.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
 import { status } from '../semantic/status.js';
 import { text } from '../semantic/text.js';
+const primary = createCheckboxPalette({
+    ring: colors.primary[400],
+    default: {
+        bg: colors.primary[600],
+        fg: colors.primary[50],
+        border: colors.primary[600],
+        labelFg: colors.primary[300],
+    },
+    hover: {
+        bg: colors.primary[700],
+        fg: colors.primary[200],
+        border: colors.primary[700],
+        labelFg: colors.primary[400],
+    },
+    pressed: {
+        bg: colors.primary[800],
+        fg: colors.primary[300],
+        border: colors.primary[800],
+        labelFg: colors.primary[500],
+    },
+});
+const neutral = createCheckboxPalette({
+    ring: colors.grayBlue[400],
+    default: {
+        bg: colors.grayBlue[50],
+        fg: colors.grayBlue[950],
+        border: colors.grayBlue[50],
+        labelFg: colors.grayBlue[50],
+    },
+    hover: {
+        bg: colors.grayBlue[200],
+        fg: colors.grayBlue[900],
+        border: colors.grayBlue[200],
+        labelFg: colors.gray[200],
+    },
+    pressed: {
+        bg: colors.grayBlue[400],
+        fg: colors.grayBlue[800],
+        border: colors.grayBlue[400],
+        labelFg: colors.grayBlue[300],
+    },
+});
+const success = createCheckboxPalette({
+    ring: colors.success[500],
+    default: {
+        bg: colors.success[500],
+        fg: colors.success[950],
+        border: colors.success[500],
+        labelFg: colors.success[300],
+    },
+    hover: {
+        bg: colors.success[600],
+        fg: colors.success[900],
+        border: colors.success[600],
+        labelFg: colors.success[400],
+    },
+    pressed: {
+        bg: colors.success[700],
+        fg: colors.success[800],
+        border: colors.success[700],
+        labelFg: colors.success[500],
+    },
+});
+const warning = createCheckboxPalette({
+    ring: colors.warning[500],
+    default: {
+        bg: colors.warning[500],
+        fg: colors.warning[950],
+        border: colors.warning[500],
+        labelFg: colors.warning[500],
+    },
+    hover: {
+        bg: colors.warning[600],
+        fg: colors.warning[900],
+        border: colors.warning[600],
+        labelFg: colors.warning[400],
+    },
+    pressed: {
+        bg: colors.warning[700],
+        fg: colors.warning[800],
+        border: colors.warning[700],
+        labelFg: colors.warning[600],
+    },
+});
+const danger = createCheckboxPalette({
+    ring: colors.error[500],
+    default: {
+        bg: colors.error[700],
+        fg: colors.error[50],
+        border: colors.error[700],
+        labelFg: colors.error[400],
+    },
+    hover: {
+        bg: colors.error[600],
+        fg: colors.error[200],
+        border: colors.error[600],
+        labelFg: colors.error[200],
+    },
+    pressed: {
+        bg: colors.error[800],
+        fg: colors.error[300],
+        border: colors.error[800],
+        labelFg: colors.error[300],
+    },
+});
 export const checkbox = {
     default: control.default,
     hover: {
         ...control.hover,
         labelFg: text.interactiveHover,
     },
-    checked: {
-        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,
-        },
-    },
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     focus: {
         ring: focus.ring.color,
     },

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

@@ -13,7 +13,7 @@ export declare const formField: {
             readonly fg: "#FB7185";
         };
         readonly success: {
-            readonly fg: "#6EE7B7";
+            readonly fg: "#5EEAD4";
         };
         readonly warning: {
             readonly fg: "#FCD34D";

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

@@ -33,8 +33,8 @@ export declare const input: {
         readonly ring: "#FB7185";
     };
     readonly success: {
-        readonly border: "#6EE7B7";
-        readonly ring: "#6EE7B7";
+        readonly border: "#5EEAD4";
+        readonly ring: "#5EEAD4";
     };
     readonly readOnly: {
         readonly bg: "#1F2937";
@@ -47,7 +47,7 @@ export declare const input: {
         readonly default: "#FFFFFF";
         readonly primary: "#FCD34D";
         readonly secondary: "#E5E7EB";
-        readonly success: "#6EE7B7";
+        readonly success: "#5EEAD4";
         readonly danger: "#FDA4AF";
         readonly muted: "#9CA3AF";
         readonly inverse: "#000000";

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

@@ -8,12 +8,12 @@ export declare const action: {
         readonly hover: {
             readonly bg: "#9B7CFF";
             readonly fg: "#000000";
-            readonly border: "#FCD34D";
+            readonly border: "#D4CCFF";
         };
         readonly active: {
             readonly bg: "#6346E8";
             readonly fg: "#FFFFFF";
-            readonly border: "#FCD34D";
+            readonly border: "#B8A8FF";
         };
         readonly muted: {
             readonly bg: "#21164F";
@@ -35,7 +35,7 @@ export declare const action: {
         readonly hover: {
             readonly bg: "#B4F4FD";
             readonly fg: "#000000";
-            readonly border: "#FCD34D";
+            readonly border: "#79E8F8";
         };
         readonly active: {
             readonly bg: "#3ED5EE";
@@ -57,17 +57,17 @@ export declare const action: {
         readonly default: {
             readonly bg: "#FFFFFF";
             readonly fg: "#000000";
-            readonly border: "#FFFFFF";
+            readonly border: "#000000";
         };
         readonly hover: {
             readonly bg: "#E5E7EB";
             readonly fg: "#000000";
-            readonly border: "#FCD34D";
+            readonly border: "#0B1120";
         };
         readonly active: {
             readonly bg: "#9CA3AF";
             readonly fg: "#000000";
-            readonly border: "#FCD34D";
+            readonly border: "#0B1120";
         };
         readonly muted: {
             readonly bg: "#1F2937";

package/dist/highContrast/semantic/action.js

@@ -9,12 +9,12 @@ export const action = {
         hover: {
             bg: colors.primary[400],
             fg: colors.mono[950],
-            border: colors.warning[300],
+            border: colors.primary[200],
         },
         active: {
             bg: colors.primary[600],
             fg: colors.mono[50],
-            border: colors.warning[300],
+            border: colors.primary[300],
         },
         muted: {
             bg: colors.primary[950],
@@ -36,7 +36,7 @@ export const action = {
         hover: {
             bg: colors.secondary[200],
             fg: colors.mono[950],
-            border: colors.warning[300],
+            border: colors.secondary[300],
         },
         active: {
             bg: colors.secondary[400],
@@ -58,17 +58,17 @@ export const action = {
         default: {
             bg: colors.mono[50],
             fg: colors.mono[950],
-            border: colors.mono[50],
+            border: colors.mono[950],
         },
         hover: {
             bg: colors.gray[200],
             fg: colors.mono[950],
-            border: colors.warning[300],
+            border: colors.gray[950],
         },
         active: {
             bg: colors.gray[400],
             fg: colors.mono[950],
-            border: colors.warning[300],
+            border: colors.gray[950],
         },
         muted: {
             bg: colors.gray[800],

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

@@ -7,7 +7,7 @@ export declare const icons: {
     readonly primary: "#FCD34D";
     readonly brand: "#FCD34D";
     readonly hover: "#FDE68A";
-    readonly success: "#6EE7B7";
+    readonly success: "#5EEAD4";
     readonly danger: "#FDA4AF";
     readonly inverse: "#000000";
 };

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

@@ -1,10 +1,10 @@
 export declare const status: {
     readonly success: {
-        readonly fg: "#6EE7B7";
-        readonly bg: "#022C22";
-        readonly border: "#6EE7B7";
-        readonly ring: "#6EE7B7";
-        readonly strong: "#A7F3D0";
+        readonly fg: "#5EEAD4";
+        readonly bg: "#042F2E";
+        readonly border: "#5EEAD4";
+        readonly ring: "#5EEAD4";
+        readonly strong: "#99F6E4";
     };
     readonly error: {
         readonly fg: "#FB7185";