@vellira-ui/tokens 2.29.0 → 2.31.0

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

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

package/dist/dark/components/select.js

@@ -1,25 +1,141 @@
+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[400],
+    accentHover: colors.primary[500],
+    accentSoft: colors.primary[900],
+    filledBg: colors.primary[950],
+    filledHoverBg: colors.primary[900],
+    ring: colors.primary[400],
+});
+const neutral = createInputColorPalette({
+    ...selectPaletteDefaults,
+    accent: colors.vellira[300],
+    accentHover: colors.vellira[400],
+    accentSoft: colors.vellira[800],
+    filledBg: colors.vellira[900],
+    filledHoverBg: colors.vellira[800],
+    hoverBg: colors.vellira[900],
+    ring: colors.vellira[400],
+});
+const success = createInputColorPalette({
+    ...selectPaletteDefaults,
+    accent: colors.success[400],
+    accentHover: colors.success[500],
+    accentSoft: colors.success[900],
+    filledBg: colors.success[950],
+    filledHoverBg: colors.success[900],
+    hoverBg: colors.success[950],
+    ring: colors.success[500],
+});
+const warning = createInputColorPalette({
+    ...selectPaletteDefaults,
+    accent: colors.warning[400],
+    accentHover: colors.warning[500],
+    accentSoft: colors.warning[900],
+    filledBg: colors.warning[950],
+    filledHoverBg: colors.warning[900],
+    hoverBg: colors.warning[950],
+    ring: colors.warning[500],
+});
+const danger = createInputColorPalette({
+    ...selectPaletteDefaults,
+    accent: colors.error[400],
+    accentHover: colors.error[500],
+    accentSoft: colors.error[900],
+    filledBg: colors.error[950],
+    filledHoverBg: colors.error[900],
+    hoverBg: colors.error[950],
+    ring: colors.error[500],
+});
 export const select = {
+    primary: createSelectPalette(primary, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.primary[700],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.primary[800],
+    }),
+    neutral: createSelectPalette(neutral, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.vellira[800],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.vellira[850],
+    }),
+    success: createSelectPalette(success, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.success[800],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.success[900],
+    }),
+    warning: createSelectPalette(warning, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.warning[800],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.warning[900],
+    }),
+    danger: createSelectPalette(danger, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.error[800],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.error[900],
+    }),
     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,
         },
@@ -31,8 +147,24 @@ export const select = {
     dropdown: {
         bg: menu.background,
         fg: menu.item.default.fg,
-        border: menu.border,
-        shadow: shadow.lg,
+        border: 'transparent',
+        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: {
@@ -60,12 +192,37 @@ export const select = {
             bg: control.selected.muted.bg,
             fg: control.selected.muted.fg,
             border: control.selected.muted.border,
-            shadow: shadow.inset,
+            shadow: 'none',
         },
         disabled: {
             bg: menu.item.disabled.bg,
             fg: menu.item.disabled.fg,
             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/factories/createInputPalette.d.ts

@@ -0,0 +1,78 @@
+export type InputState = {
+    bg: string;
+    fg: string;
+    border: string;
+    placeholder: string;
+    icon: string;
+};
+export type InputPaletteConfig = {
+    ring: string;
+    outline: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    filled: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    soft: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+};
+export declare const createInputPalette: ({ ring, outline, filled, soft, }: InputPaletteConfig) => {
+    readonly ring: string;
+    readonly outline: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    readonly filled: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    readonly soft: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+};
+export type InputColorPaletteConfig = {
+    accent: string;
+    accentHover: string;
+    accentSoft: string;
+    filledBg: string;
+    filledHoverBg: string;
+    hoverBg: string;
+    ring: string;
+    fg: string;
+    placeholder: string;
+    filledFocusBg: string;
+    filledDefaultBorder?: string;
+    filledHoverBorder?: string;
+    softDefaultBorder?: string;
+    softHoverBorder?: string;
+};
+export declare const createInputColorPalette: ({ accent, accentHover, accentSoft, filledBg, filledHoverBg, hoverBg, ring, fg, placeholder, filledFocusBg, filledDefaultBorder, filledHoverBorder, softDefaultBorder, softHoverBorder, }: InputColorPaletteConfig) => {
+    readonly ring: string;
+    readonly outline: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    readonly filled: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+    readonly soft: {
+        default: InputState;
+        hover: InputState;
+        focus: InputState;
+    };
+};
+//# sourceMappingURL=createInputPalette.d.ts.map

package/dist/factories/createInputPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createInputPalette.d.ts","sourceRoot":"","sources":["../../src/factories/createInputPalette.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QACP,OAAO,EAAE,UAAU,CAAC;QACpB,KAAK,EAAE,UAAU,CAAC;QAClB,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,UAAU,CAAC;QACpB,KAAK,EAAE,UAAU,CAAC;QAClB,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU,CAAC;QACpB,KAAK,EAAE,UAAU,CAAC;QAClB,KAAK,EAAE,UAAU,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kCAKhC,kBAAkB;;;iBArBR,UAAU;eACZ,UAAU;eACV,UAAU;;;iBAGR,UAAU;eACZ,UAAU;eACV,UAAU;;;iBAGR,UAAU;eACZ,UAAU;eACV,UAAU;;CAeR,CAAC;AAEd,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,0LAerC,uBAAuB;;;iBA7Db,UAAU;eACZ,UAAU;eACV,UAAU;;;iBAGR,UAAU;eACZ,UAAU;eACV,UAAU;;;iBAGR,UAAU;eACZ,UAAU;eACV,UAAU;;CAyHjB,CAAC"}

package/dist/factories/createInputPalette.js

@@ -0,0 +1,78 @@
+export const createInputPalette = ({ ring, outline, filled, soft, }) => ({
+    ring,
+    outline,
+    filled,
+    soft,
+});
+export const createInputColorPalette = ({ accent, accentHover, accentSoft, filledBg, filledHoverBg, hoverBg, ring, fg, placeholder, filledFocusBg, filledDefaultBorder = 'transparent', filledHoverBorder = accent, softDefaultBorder = 'transparent', softHoverBorder = accent, }) => createInputPalette({
+    ring,
+    outline: {
+        default: {
+            bg: 'transparent',
+            fg,
+            border: accent,
+            placeholder,
+            icon: accent,
+        },
+        hover: {
+            bg: hoverBg,
+            fg,
+            border: accentHover,
+            placeholder,
+            icon: accentHover,
+        },
+        focus: {
+            bg: 'transparent',
+            fg,
+            border: accentHover,
+            placeholder,
+            icon: accentHover,
+        },
+    },
+    filled: {
+        default: {
+            bg: filledBg,
+            fg,
+            border: filledDefaultBorder,
+            placeholder,
+            icon: accent,
+        },
+        hover: {
+            bg: filledHoverBg,
+            fg,
+            border: filledHoverBorder,
+            placeholder,
+            icon: accentHover,
+        },
+        focus: {
+            bg: filledFocusBg,
+            fg,
+            border: accentHover,
+            placeholder,
+            icon: accentHover,
+        },
+    },
+    soft: {
+        default: {
+            bg: accentSoft,
+            fg,
+            border: softDefaultBorder,
+            placeholder,
+            icon: accent,
+        },
+        hover: {
+            bg: accentSoft,
+            fg,
+            border: softHoverBorder,
+            placeholder,
+            icon: accentHover,
+        },
+        focus: {
+            bg: accentSoft,
+            fg,
+            border: accentHover,
+            placeholder,
+            icon: accentHover,
+        },
+    },
+});