@vellira-ui/tokens 2.29.0 → 2.31.0

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/select.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsET,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/highContrast/components/select.ts"],"names":[],"mappings":"AAuHA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLT,CAAC"}

package/dist/highContrast/components/select.js

@@ -1,25 +1,166 @@
+import { createInputColorPalette } from '../../factories/createInputPalette.js';
+import { createSelectPalette } from '../../factories/createSelectPalette.js';
+import { colors } from '../../primitives/colors.js';
 import { border } from '../semantic/border.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
+import { icons } from '../semantic/icons.js';
 import { menu } from '../semantic/menu.js';
-import { shadow } from '../semantic/shadow.js';
 import { status } from '../semantic/status.js';
+import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
+const selectPaletteDefaults = {
+    fg: text.primary,
+    placeholder: text.secondary,
+    filledFocusBg: surface.subtle,
+    hoverBg: surface.hover,
+};
+const primary = createInputColorPalette({
+    ...selectPaletteDefaults,
+    accent: colors.primary[300],
+    accentHover: colors.primary[400],
+    accentSoft: colors.primary[900],
+    filledBg: colors.primary[950],
+    filledHoverBg: colors.primary[900],
+    filledDefaultBorder: colors.primary[300],
+    filledHoverBorder: colors.primary[400],
+    softDefaultBorder: colors.primary[300],
+    softHoverBorder: colors.primary[400],
+    ring: colors.primary[400],
+});
+const neutral = createInputColorPalette({
+    ...selectPaletteDefaults,
+    accent: colors.grayBlue[200],
+    accentHover: colors.gray[200],
+    accentSoft: colors.grayBlue[800],
+    filledBg: colors.grayBlue[900],
+    filledHoverBg: colors.grayBlue[800],
+    filledDefaultBorder: colors.grayBlue[200],
+    filledHoverBorder: colors.gray[200],
+    softDefaultBorder: colors.grayBlue[200],
+    softHoverBorder: colors.gray[200],
+    hoverBg: colors.grayBlue[900],
+    ring: colors.grayBlue[400],
+});
+const success = createInputColorPalette({
+    ...selectPaletteDefaults,
+    accent: colors.success[300],
+    accentHover: colors.success[400],
+    accentSoft: colors.success[900],
+    filledBg: colors.success[950],
+    filledHoverBg: colors.success[900],
+    filledDefaultBorder: colors.success[300],
+    filledHoverBorder: colors.success[400],
+    softDefaultBorder: colors.success[300],
+    softHoverBorder: colors.success[400],
+    hoverBg: colors.success[950],
+    ring: colors.success[500],
+});
+const warning = createInputColorPalette({
+    ...selectPaletteDefaults,
+    accent: colors.warning[500],
+    accentHover: colors.warning[400],
+    accentSoft: colors.warning[900],
+    filledBg: colors.warning[900],
+    filledHoverBg: colors.warning[800],
+    filledDefaultBorder: colors.warning[500],
+    filledHoverBorder: colors.warning[400],
+    softDefaultBorder: colors.warning[500],
+    softHoverBorder: colors.warning[400],
+    hoverBg: colors.warning[950],
+    ring: colors.warning[500],
+});
+const danger = createInputColorPalette({
+    ...selectPaletteDefaults,
+    accent: colors.error[400],
+    accentHover: colors.error[300],
+    accentSoft: colors.error[900],
+    filledBg: colors.error[950],
+    filledHoverBg: colors.error[900],
+    filledDefaultBorder: colors.error[400],
+    filledHoverBorder: colors.error[300],
+    softDefaultBorder: colors.error[400],
+    softHoverBorder: colors.error[300],
+    hoverBg: colors.error[950],
+    ring: colors.error[500],
+});
 export const select = {
+    primary: createSelectPalette(primary, {
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBg: menu.item.hover.bg,
+        optionHoverBorder: 'transparent',
+        optionHoverFg: menu.item.hover.fg,
+        optionPressedBg: menu.item.pressed.bg,
+        optionPressedBorder: 'transparent',
+        optionPressedFg: menu.item.pressed.fg,
+    }),
+    neutral: createSelectPalette(neutral, {
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBg: menu.item.hover.bg,
+        optionHoverBorder: 'transparent',
+        optionHoverFg: menu.item.hover.fg,
+        optionPressedBg: menu.item.pressed.bg,
+        optionPressedBorder: 'transparent',
+        optionPressedFg: menu.item.pressed.fg,
+    }),
+    success: createSelectPalette(success, {
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBg: menu.item.hover.bg,
+        optionHoverBorder: 'transparent',
+        optionHoverFg: menu.item.hover.fg,
+        optionPressedBg: menu.item.pressed.bg,
+        optionPressedBorder: 'transparent',
+        optionPressedFg: menu.item.pressed.fg,
+    }),
+    warning: createSelectPalette(warning, {
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBg: menu.item.hover.bg,
+        optionHoverBorder: 'transparent',
+        optionHoverFg: menu.item.hover.fg,
+        optionPressedBg: menu.item.pressed.bg,
+        optionPressedBorder: 'transparent',
+        optionPressedFg: menu.item.pressed.fg,
+    }),
+    danger: createSelectPalette(danger, {
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBg: menu.item.hover.bg,
+        optionHoverBorder: 'transparent',
+        optionHoverFg: menu.item.hover.fg,
+        optionPressedBg: menu.item.pressed.bg,
+        optionPressedBorder: 'transparent',
+        optionPressedFg: menu.item.pressed.fg,
+    }),
     trigger: {
         default: {
             bg: 'transparent',
             fg: text.primary,
             border: border.default,
+            icon: icons.brand,
+            placeholder: text.secondary,
+        },
+        hover: {
+            ...control.hover,
+            icon: icons.hover,
+            placeholder: text.secondary,
         },
-        hover: control.hover,
         focus: {
             bg: 'transparent',
             fg: text.primary,
             border: border.focus,
             ring: focus.ring.color,
+            icon: icons.brand,
+            placeholder: text.secondary,
+        },
+        disabled: {
+            ...control.disabled,
+            icon: icons.disabled,
+            placeholder: text.disabled,
         },
-        disabled: control.disabled,
         placeholder: {
             fg: text.secondary,
         },
@@ -32,7 +173,23 @@ export const select = {
         bg: menu.background,
         fg: menu.item.default.fg,
         border: menu.border,
-        shadow: shadow.lg,
+        shadow: 'none',
+        search: {
+            bg: surface.default,
+            fg: text.primary,
+            border: border.muted,
+            placeholder: text.secondary,
+            ring: focus.ring.color,
+        },
+        empty: {
+            fg: text.secondary,
+        },
+        groupLabel: {
+            fg: colors.primary[300],
+        },
+        separator: {
+            bg: border.muted,
+        },
     },
     option: {
         default: {
@@ -56,11 +213,36 @@ export const select = {
             bg: control.selected.muted.bg,
             fg: control.selected.muted.fg,
             border: control.selected.muted.border,
-            shadow: shadow.inset,
+            shadow: 'none',
         },
         disabled: {
             ...menu.item.disabled,
             border: 'transparent',
         },
+        description: {
+            fg: text.secondary,
+        },
+        icon: {
+            fg: icons.default,
+        },
+        badge: {
+            bg: surface.subtle,
+            fg: text.secondary,
+            border: border.muted,
+        },
+        shortcut: {
+            bg: surface.subtle,
+            fg: text.secondary,
+            border: border.muted,
+        },
+        success: {
+            fg: status.success.fg,
+        },
+        warning: {
+            fg: status.warning.fg,
+        },
+        danger: {
+            fg: status.error.fg,
+        },
     },
 };

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

@@ -2,6 +2,14 @@ export declare const formField: {
     readonly label: {
         readonly fg: "#3D3754";
     };
+    readonly optional: {
+        readonly fg: "#6B6386";
+    };
+    readonly labelInfo: {
+        readonly fg: "#6B6386";
+        readonly border: "#6B6386";
+        readonly radius: 999;
+    };
     readonly description: {
         readonly fg: "#6B6386";
     };
@@ -30,5 +38,49 @@ export declare const formField: {
         readonly descriptionFg: "#958CB0";
         readonly helperTextFg: "#958CB0";
     };
+    readonly size: {
+        readonly sm: {
+            readonly gap: 4;
+            readonly horizontalGap: 12;
+            readonly labelFontSize: 14;
+            readonly labelLineHeight: 20;
+            readonly descriptionFontSize: 12;
+            readonly descriptionLineHeight: 16;
+            readonly helperTextFontSize: 12;
+            readonly helperTextLineHeight: 16;
+            readonly optionalFontSize: 12;
+            readonly optionalLineHeight: 16;
+            readonly labelInfoSize: 16;
+            readonly labelInfoFontSize: 12;
+        };
+        readonly md: {
+            readonly gap: 8;
+            readonly horizontalGap: 16;
+            readonly labelFontSize: 16;
+            readonly labelLineHeight: 24;
+            readonly descriptionFontSize: 14;
+            readonly descriptionLineHeight: 20;
+            readonly helperTextFontSize: 14;
+            readonly helperTextLineHeight: 20;
+            readonly optionalFontSize: 12;
+            readonly optionalLineHeight: 16;
+            readonly labelInfoSize: 16;
+            readonly labelInfoFontSize: 12;
+        };
+        readonly lg: {
+            readonly gap: 12;
+            readonly horizontalGap: 20;
+            readonly labelFontSize: 20;
+            readonly labelLineHeight: 28;
+            readonly descriptionFontSize: 16;
+            readonly descriptionLineHeight: 24;
+            readonly helperTextFontSize: 16;
+            readonly helperTextLineHeight: 24;
+            readonly optionalFontSize: 14;
+            readonly optionalLineHeight: 20;
+            readonly labelInfoSize: 20;
+            readonly labelInfoFontSize: 14;
+        };
+    };
 };
 //# sourceMappingURL=formField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"formField.d.ts","sourceRoot":"","sources":["../../../src/light/components/formField.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCZ,CAAC"}
+{"version":3,"file":"formField.d.ts","sourceRoot":"","sources":["../../../src/light/components/formField.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FZ,CAAC"}

package/dist/light/components/formField.js

@@ -1,9 +1,20 @@
+import { radius } from '../../tokens/radius.js';
+import { spacing } from '../../tokens/spacing.js';
+import { typography } from '../../tokens/typography.js';
 import { status } from '../semantic/status.js';
 import { text } from '../semantic/text.js';
 export const formField = {
     label: {
         fg: text.primary,
     },
+    optional: {
+        fg: text.secondary,
+    },
+    labelInfo: {
+        fg: text.secondary,
+        border: text.secondary,
+        radius: radius.full,
+    },
     description: {
         fg: text.secondary,
     },
@@ -32,4 +43,48 @@ export const formField = {
         descriptionFg: text.disabled,
         helperTextFg: text.disabled,
     },
+    size: {
+        sm: {
+            gap: spacing[1],
+            horizontalGap: spacing[3],
+            labelFontSize: typography.size.sm,
+            labelLineHeight: typography.lineHeight.sm,
+            descriptionFontSize: typography.size.xs,
+            descriptionLineHeight: typography.lineHeight.xs,
+            helperTextFontSize: typography.size.xs,
+            helperTextLineHeight: typography.lineHeight.xs,
+            optionalFontSize: typography.size.xs,
+            optionalLineHeight: typography.lineHeight.xs,
+            labelInfoSize: spacing[4],
+            labelInfoFontSize: typography.size.xs,
+        },
+        md: {
+            gap: spacing[2],
+            horizontalGap: spacing[4],
+            labelFontSize: typography.size.md,
+            labelLineHeight: typography.lineHeight.md,
+            descriptionFontSize: typography.size.sm,
+            descriptionLineHeight: typography.lineHeight.sm,
+            helperTextFontSize: typography.size.sm,
+            helperTextLineHeight: typography.lineHeight.sm,
+            optionalFontSize: typography.size.xs,
+            optionalLineHeight: typography.lineHeight.xs,
+            labelInfoSize: spacing[4],
+            labelInfoFontSize: typography.size.xs,
+        },
+        lg: {
+            gap: spacing[3],
+            horizontalGap: spacing[5],
+            labelFontSize: typography.size.lg,
+            labelLineHeight: typography.lineHeight.lg,
+            descriptionFontSize: typography.size.md,
+            descriptionLineHeight: typography.lineHeight.md,
+            helperTextFontSize: typography.size.md,
+            helperTextLineHeight: typography.lineHeight.md,
+            optionalFontSize: typography.size.sm,
+            optionalLineHeight: typography.lineHeight.sm,
+            labelInfoSize: spacing[5],
+            labelInfoFontSize: typography.size.sm,
+        },
+    },
 };

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

@@ -1,4 +1,94 @@
 export declare const input: {
+    readonly primary: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
+    readonly neutral: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
+    readonly success: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
+    readonly warning: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
+    readonly danger: {
+        readonly ring: string;
+        readonly outline: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly filled: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+        readonly soft: {
+            default: import("../../factories/createInputPalette.js").InputState;
+            hover: import("../../factories/createInputPalette.js").InputState;
+            focus: import("../../factories/createInputPalette.js").InputState;
+        };
+    };
     readonly default: {
         readonly bg: "transparent";
         readonly fg: "#3D3754";
@@ -32,10 +122,6 @@ export declare const input: {
         readonly border: "#E11D48";
         readonly ring: "#F43F5E";
     };
-    readonly success: {
-        readonly border: "#0F766E";
-        readonly ring: "#14B8A6";
-    };
     readonly readOnly: {
         readonly bg: "#FDFCFF";
         readonly fg: "#6B6386";
@@ -47,7 +133,7 @@ export declare const input: {
         readonly default: "#3D3754";
         readonly primary: "#5037C8";
         readonly secondary: "#6B6386";
-        readonly success: "#0F766E";
+        readonly success: "#14B8A6";
         readonly danger: "#BE123C";
         readonly muted: "#958CB0";
         readonly inverse: "#FFFFFF";
@@ -60,5 +146,24 @@ export declare const input: {
         readonly focusBg: "#FDFCFF";
         readonly pressedBg: "#EEE8FA";
     };
+    readonly revealButton: {
+        readonly fg: "#3D3754";
+        readonly hoverFg: "#3D3754";
+        readonly hoverBg: "#F4F1FB";
+    };
+    readonly addon: {
+        readonly bg: "#F4F1FB";
+        readonly fg: "#6B6386";
+        readonly border: "#BBB2D2";
+    };
+    readonly affix: {
+        readonly fg: "#3D3754";
+    };
+    readonly counter: {
+        readonly fg: "#6B6386";
+    };
+    readonly spinner: {
+        readonly fg: "#958CB0";
+    };
 };
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/light/components/input.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsER,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/light/components/input.ts"],"names":[],"mappings":"AAsEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FR,CAAC"}

package/dist/light/components/input.js

@@ -1,10 +1,72 @@
+import { createInputColorPalette } from '../../factories/createInputPalette.js';
+import { colors } from '../../primitives/colors.js';
 import { border } from '../semantic/border.js';
 import { focus } from '../semantic/focus.js';
 import { icons } from '../semantic/icons.js';
 import { status } from '../semantic/status.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
+const inputPaletteDefaults = {
+    fg: text.primary,
+    placeholder: text.secondary,
+    filledFocusBg: surface.subtle,
+    hoverBg: surface.hover,
+};
+const primary = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.primary[500],
+    accentHover: colors.primary[700],
+    accentSoft: colors.primary[50],
+    filledBg: colors.primary[100],
+    filledHoverBg: colors.primary[200],
+    ring: colors.primary[400],
+});
+const neutral = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.vellira[400],
+    accentHover: colors.vellira[600],
+    accentSoft: colors.vellira[100],
+    filledBg: colors.vellira[150],
+    filledHoverBg: colors.vellira[200],
+    hoverBg: colors.vellira[100],
+    ring: colors.vellira[400],
+});
+const success = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.success[600],
+    accentHover: colors.success[700],
+    accentSoft: colors.success[50],
+    filledBg: colors.success[100],
+    filledHoverBg: colors.success[200],
+    hoverBg: colors.success[50],
+    ring: colors.success[500],
+});
+const warning = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.warning[600],
+    accentHover: colors.warning[700],
+    accentSoft: colors.warning[50],
+    filledBg: colors.warning[100],
+    filledHoverBg: colors.warning[200],
+    hoverBg: colors.warning[50],
+    ring: colors.warning[500],
+});
+const danger = createInputColorPalette({
+    ...inputPaletteDefaults,
+    accent: colors.error[600],
+    accentHover: colors.error[700],
+    accentSoft: colors.error[50],
+    filledBg: colors.error[100],
+    filledHoverBg: colors.error[200],
+    hoverBg: colors.error[50],
+    ring: colors.error[500],
+});
 export const input = {
+    primary,
+    neutral,
+    success,
+    warning,
+    danger,
     default: {
         bg: 'transparent',
         fg: text.primary,
@@ -38,10 +100,6 @@ export const input = {
         border: status.error.border,
         ring: status.error.ring,
     },
-    success: {
-        border: status.success.border,
-        ring: status.success.ring,
-    },
     readOnly: {
         bg: surface.subtle,
         fg: text.secondary,
@@ -66,4 +124,23 @@ export const input = {
         focusBg: surface.subtle,
         pressedBg: surface.active,
     },
+    revealButton: {
+        fg: text.primary,
+        hoverFg: text.primary,
+        hoverBg: surface.hover,
+    },
+    addon: {
+        bg: surface.muted,
+        fg: text.secondary,
+        border: border.default,
+    },
+    affix: {
+        fg: text.primary,
+    },
+    counter: {
+        fg: text.secondary,
+    },
+    spinner: {
+        fg: icons.muted,
+    },
 };