@vellira-ui/tokens 2.21.0 → 2.22.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.default.bg',
+    'semantic.control.default.border',
+    'semantic.control.default.fg',
     'semantic.control.hover.bg',
     'semantic.control.hover.border',
     'semantic.control.hover.fg',
@@ -256,6 +259,7 @@ export const semanticTokenPaths = [
     'semantic.status.warning.fg',
     'semantic.status.warning.strong',
     'semantic.surface.active',
+    'semantic.surface.danger',
     'semantic.surface.default',
     'semantic.surface.disabled',
     'semantic.surface.elevated',
@@ -454,25 +458,46 @@ export const componentTokenPaths = [
     'components.formField.helperText.warning.fg',
     'components.formField.label.fg',
     'components.formField.requiredMark.fg',
+    'components.input.clearButton.fg',
+    'components.input.clearButton.focusBg',
+    'components.input.clearButton.hoverBg',
+    'components.input.clearButton.hoverFg',
+    'components.input.clearButton.pressedBg',
     'components.input.default.bg',
     'components.input.default.border',
     'components.input.default.fg',
+    'components.input.default.icon',
     'components.input.default.placeholder',
     'components.input.disabled.bg',
     'components.input.disabled.border',
     'components.input.disabled.fg',
+    'components.input.disabled.icon',
     'components.input.disabled.placeholder',
     'components.input.error.border',
     'components.input.error.ring',
     'components.input.focus.bg',
     'components.input.focus.border',
     'components.input.focus.fg',
+    'components.input.focus.icon',
     'components.input.focus.placeholder',
     'components.input.focus.ring',
     'components.input.hover.bg',
     'components.input.hover.border',
     'components.input.hover.fg',
+    'components.input.hover.icon',
     'components.input.hover.placeholder',
+    'components.input.icon.danger',
+    'components.input.icon.default',
+    'components.input.icon.inverse',
+    'components.input.icon.muted',
+    'components.input.icon.primary',
+    'components.input.icon.secondary',
+    'components.input.icon.success',
+    'components.input.readOnly.bg',
+    'components.input.readOnly.border',
+    'components.input.readOnly.fg',
+    'components.input.readOnly.icon',
+    'components.input.readOnly.placeholder',
     'components.input.success.border',
     'components.input.success.ring',
     'components.menu.groupLabel.fg',
@@ -949,25 +974,46 @@ export const tokenPaths = [
     'components.formField.helperText.warning.fg',
     'components.formField.label.fg',
     'components.formField.requiredMark.fg',
+    'components.input.clearButton.fg',
+    'components.input.clearButton.focusBg',
+    'components.input.clearButton.hoverBg',
+    'components.input.clearButton.hoverFg',
+    'components.input.clearButton.pressedBg',
     'components.input.default.bg',
     'components.input.default.border',
     'components.input.default.fg',
+    'components.input.default.icon',
     'components.input.default.placeholder',
     'components.input.disabled.bg',
     'components.input.disabled.border',
     'components.input.disabled.fg',
+    'components.input.disabled.icon',
     'components.input.disabled.placeholder',
     'components.input.error.border',
     'components.input.error.ring',
     'components.input.focus.bg',
     'components.input.focus.border',
     'components.input.focus.fg',
+    'components.input.focus.icon',
     'components.input.focus.placeholder',
     'components.input.focus.ring',
     'components.input.hover.bg',
     'components.input.hover.border',
     'components.input.hover.fg',
+    'components.input.hover.icon',
     'components.input.hover.placeholder',
+    'components.input.icon.danger',
+    'components.input.icon.default',
+    'components.input.icon.inverse',
+    'components.input.icon.muted',
+    'components.input.icon.primary',
+    'components.input.icon.secondary',
+    'components.input.icon.success',
+    'components.input.readOnly.bg',
+    'components.input.readOnly.border',
+    'components.input.readOnly.fg',
+    'components.input.readOnly.icon',
+    'components.input.readOnly.placeholder',
     'components.input.success.border',
     'components.input.success.ring',
     'components.menu.groupLabel.fg',
@@ -1153,6 +1199,9 @@ export const tokenPaths = [
     'semantic.border.muted',
     'semantic.border.strong',
     'semantic.border.subtle',
+    'semantic.control.default.bg',
+    'semantic.control.default.border',
+    'semantic.control.default.fg',
     'semantic.control.hover.bg',
     'semantic.control.hover.border',
     'semantic.control.hover.fg',
@@ -1220,6 +1269,7 @@ export const tokenPaths = [
     'semantic.status.warning.fg',
     'semantic.status.warning.strong',
     'semantic.surface.active',
+    'semantic.surface.danger',
     'semantic.surface.default',
     'semantic.surface.disabled',
     'semantic.surface.elevated',
@@ -1660,6 +1710,9 @@ export const themeCssVariableNames = [
     '--color-warning-800',
     '--color-warning-900',
     '--color-warning-950',
+    '--control-default-bg',
+    '--control-default-border',
+    '--control-default-fg',
     '--control-hover-bg',
     '--control-hover-border',
     '--control-hover-fg',
@@ -1733,25 +1786,46 @@ export const themeCssVariableNames = [
     '--form-field-helper-text-warning-fg',
     '--form-field-label-fg',
     '--form-field-required-mark-fg',
+    '--input-clear-button-fg',
+    '--input-clear-button-focus-bg',
+    '--input-clear-button-hover-bg',
+    '--input-clear-button-hover-fg',
+    '--input-clear-button-pressed-bg',
     '--input-default-bg',
     '--input-default-border',
     '--input-default-fg',
+    '--input-default-icon',
     '--input-default-placeholder',
     '--input-disabled-bg',
     '--input-disabled-border',
     '--input-disabled-fg',
+    '--input-disabled-icon',
     '--input-disabled-placeholder',
     '--input-error-border',
     '--input-error-ring',
     '--input-focus-bg',
     '--input-focus-border',
     '--input-focus-fg',
+    '--input-focus-icon',
     '--input-focus-placeholder',
     '--input-focus-ring',
     '--input-hover-bg',
     '--input-hover-border',
     '--input-hover-fg',
+    '--input-hover-icon',
     '--input-hover-placeholder',
+    '--input-icon-danger',
+    '--input-icon-default',
+    '--input-icon-inverse',
+    '--input-icon-muted',
+    '--input-icon-primary',
+    '--input-icon-secondary',
+    '--input-icon-success',
+    '--input-read-only-bg',
+    '--input-read-only-border',
+    '--input-read-only-fg',
+    '--input-read-only-icon',
+    '--input-read-only-placeholder',
     '--input-success-border',
     '--input-success-ring',
     '--menu-group-label-fg',
@@ -1877,6 +1951,7 @@ export const themeCssVariableNames = [
     '--status-warning-fg',
     '--status-warning-strong',
     '--surface-active',
+    '--surface-danger',
     '--surface-default',
     '--surface-disabled',
     '--surface-elevated',
@@ -2244,6 +2319,9 @@ export const cssVariableNames = [
     '--color-warning-800',
     '--color-warning-900',
     '--color-warning-950',
+    '--control-default-bg',
+    '--control-default-border',
+    '--control-default-fg',
     '--control-hover-bg',
     '--control-hover-border',
     '--control-hover-fg',
@@ -2332,25 +2410,46 @@ export const cssVariableNames = [
     '--form-field-helper-text-warning-fg',
     '--form-field-label-fg',
     '--form-field-required-mark-fg',
+    '--input-clear-button-fg',
+    '--input-clear-button-focus-bg',
+    '--input-clear-button-hover-bg',
+    '--input-clear-button-hover-fg',
+    '--input-clear-button-pressed-bg',
     '--input-default-bg',
     '--input-default-border',
     '--input-default-fg',
+    '--input-default-icon',
     '--input-default-placeholder',
     '--input-disabled-bg',
     '--input-disabled-border',
     '--input-disabled-fg',
+    '--input-disabled-icon',
     '--input-disabled-placeholder',
     '--input-error-border',
     '--input-error-ring',
     '--input-focus-bg',
     '--input-focus-border',
     '--input-focus-fg',
+    '--input-focus-icon',
     '--input-focus-placeholder',
     '--input-focus-ring',
     '--input-hover-bg',
     '--input-hover-border',
     '--input-hover-fg',
+    '--input-hover-icon',
     '--input-hover-placeholder',
+    '--input-icon-danger',
+    '--input-icon-default',
+    '--input-icon-inverse',
+    '--input-icon-muted',
+    '--input-icon-primary',
+    '--input-icon-secondary',
+    '--input-icon-success',
+    '--input-read-only-bg',
+    '--input-read-only-border',
+    '--input-read-only-fg',
+    '--input-read-only-icon',
+    '--input-read-only-placeholder',
     '--input-success-border',
     '--input-success-ring',
     '--line-height-lg',
@@ -2500,6 +2599,7 @@ export const cssVariableNames = [
     '--status-warning-fg',
     '--status-warning-strong',
     '--surface-active',
+    '--surface-danger',
     '--surface-default',
     '--surface-disabled',
     '--surface-elevated',

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

@@ -35,8 +35,8 @@ export declare const checkbox: {
         readonly border: "#4B5563";
     };
     readonly error: {
-        readonly border: "#FB7185";
         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/input.d.ts

@@ -4,12 +4,14 @@ export declare const input: {
         readonly fg: "#FFFFFF";
         readonly border: "#FFFFFF";
         readonly placeholder: "#E5E7EB";
+        readonly icon: "#9B7CFF";
     };
     readonly hover: {
-        readonly bg: "#FBBF24";
+        readonly bg: "#1F2937";
         readonly fg: "#000000";
         readonly border: "#FBBF24";
         readonly placeholder: "#000000";
+        readonly icon: "#9B7CFF";
     };
     readonly focus: {
         readonly bg: "transparent";
@@ -17,12 +19,14 @@ export declare const input: {
         readonly border: "#FBBF24";
         readonly ring: "#F59E0B";
         readonly placeholder: "#E5E7EB";
+        readonly icon: "#FFFFFF";
     };
     readonly disabled: {
         readonly bg: "#1F2937";
         readonly fg: "#6B7280";
         readonly border: "#4B5563";
         readonly placeholder: "#6B7280";
+        readonly icon: "#D1D5DB";
     };
     readonly error: {
         readonly border: "#FB7185";
@@ -32,5 +36,28 @@ export declare const input: {
         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,12 +26,14 @@ 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.border,
@@ -38,4 +43,27 @@ export const input = {
         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/semantic/control.d.ts

@@ -1,4 +1,9 @@
 export declare const control: {
+    readonly default: {
+        readonly bg: "#000000";
+        readonly fg: "#FFFFFF";
+        readonly border: "#4B5563";
+    };
     readonly hover: {
         readonly bg: "#111827";
         readonly fg: "#000000";

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":"AAIA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCV,CAAC"}
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/control.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CV,CAAC"}

package/dist/highContrast/semantic/control.js

@@ -1,6 +1,13 @@
 import { colors } from '../../primitives/colors.js';
+import { border } from './border.js';
+import { surface } from './surface.js';
 import { text } from './text.js';
 export const control = {
+    default: {
+        bg: surface.default,
+        fg: text.primary,
+        border: border.muted,
+    },
     hover: {
         bg: colors.gray[900],
         fg: text.inverse,

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

@@ -0,0 +1,15 @@
+export declare const icons: {
+    readonly default: "#0F0F0F";
+    readonly primary: "#B8A8FF";
+    readonly secondary: "#9CA3AF";
+    readonly success: "#10B981";
+    readonly muted: "#9CA3AF";
+    readonly disabled: "#D1D5DB";
+    readonly subtle: "#FFFFFF";
+    readonly danger: "#F43F5E";
+    readonly hover: "#9B7CFF";
+    readonly inverse: "#1A1A1A";
+    readonly onInverse: "#000000";
+    readonly brand: "#9B7CFF";
+};
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/icons.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAgBR,CAAC"}

package/dist/highContrast/semantic/icons.js

@@ -0,0 +1,15 @@
+import { colors } from '../../primitives/colors.js';
+export const icons = {
+    default: colors.mono[900],
+    primary: colors.primary[300],
+    secondary: colors.mono[500],
+    success: colors.success[500],
+    muted: colors.mono[500],
+    disabled: colors.mono[400],
+    subtle: colors.mono[50],
+    danger: colors.error[500],
+    hover: colors.primary[400],
+    inverse: colors.mono[800],
+    onInverse: colors.mono[950],
+    brand: colors.primary[400],
+};

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

@@ -4,6 +4,7 @@ export declare const surface: {
     readonly subtle: "#111827";
     readonly elevated: "#374151";
     readonly pressed: "#111827";
+    readonly danger: string;
     readonly hover: "#1F2937";
     readonly active: "#111827";
     readonly inverse: "#FFFFFF";

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

@@ -1 +1 @@
-{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/surface.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;CAWV,CAAC"}
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/highContrast/semantic/surface.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;CAYV,CAAC"}

package/dist/highContrast/semantic/surface.js

@@ -1,10 +1,12 @@
 import { colors } from '../../primitives/colors.js';
+import { withAlpha } from '../../utils/color.js';
 export const surface = {
     default: colors.mono[950],
     muted: colors.gray[800],
     subtle: colors.gray[900],
     elevated: colors.gray[700],
     pressed: colors.gray[900],
+    danger: withAlpha(colors.error[800], 0.5),
     hover: colors.gray[800],
     active: colors.gray[900],
     inverse: colors.mono[50],

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

@@ -214,7 +214,7 @@ export declare const button: {
     readonly disabled: {
         readonly bg: "#F4F1FB";
         readonly fg: "#9CA3AF";
-        readonly border: "#EEE8FA";
+        readonly border: "#BBB2D2";
     };
 };
 //# sourceMappingURL=button.d.ts.map

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

@@ -35,8 +35,8 @@ export declare const checkbox: {
         readonly border: "#EEE8FA";
     };
     readonly error: {
-        readonly border: "#BE123C";
-        readonly fg: "#BE123C";
+        readonly fg: "#F43F5E";
+        readonly border: "#F43F5E";
     };
 };
 //# sourceMappingURL=checkbox.d.ts.map

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

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

package/dist/light/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.subtle,
-    },
+    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/light/components/dropdown.d.ts

@@ -51,15 +51,15 @@ export declare const dropdown: {
         };
         readonly danger: {
             readonly default: {
-                readonly fg: "#BE123C";
+                readonly fg: "#F43F5E";
             };
             readonly hover: {
                 readonly bg: "#FFE4E6";
-                readonly fg: "#BE123C";
+                readonly fg: "#F43F5E";
             };
             readonly active: {
                 readonly bg: "#FFE4E6";
-                readonly fg: "#BE123C";
+                readonly fg: "#F43F5E";
                 readonly ring: "transparent";
             };
         };

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

@@ -1,6 +1,6 @@
 export declare const formField: {
     readonly label: {
-        readonly fg: "#6B6386";
+        readonly fg: "#1A1A1A";
     };
     readonly description: {
         readonly fg: "#6B6386";
@@ -10,7 +10,7 @@ export declare const formField: {
             readonly fg: "#958CB0";
         };
         readonly error: {
-            readonly fg: "#BE123C";
+            readonly fg: "#F43F5E";
         };
         readonly success: {
             readonly fg: "#047857";
@@ -23,7 +23,7 @@ export declare const formField: {
         };
     };
     readonly requiredMark: {
-        readonly fg: "#BE123C";
+        readonly fg: "#F43F5E";
     };
     readonly disabled: {
         readonly labelFg: "#9CA3AF";

package/dist/light/components/formField.js

@@ -2,7 +2,7 @@ import { status } from '../semantic/status.js';
 import { text } from '../semantic/text.js';
 export const formField = {
     label: {
-        fg: text.secondary,
+        fg: text.subtle,
     },
     description: {
         fg: text.secondary,