@vellira-ui/tokens 2.29.0 → 2.31.0

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

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

package/dist/light/components/select.js

@@ -1,25 +1,142 @@
+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[500],
+    accentHover: colors.primary[700],
+    accentSoft: colors.primary[50],
+    filledBg: colors.primary[100],
+    filledHoverBg: colors.primary[200],
+    ring: colors.primary[400],
+});
+const neutral = createInputColorPalette({
+    ...selectPaletteDefaults,
+    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({
+    ...selectPaletteDefaults,
+    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({
+    ...selectPaletteDefaults,
+    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({
+    ...selectPaletteDefaults,
+    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 select = {
+    primary: createSelectPalette(primary, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBg: colors.primary[50],
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.primary[200],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.primary[100],
+    }),
+    neutral: createSelectPalette(neutral, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.vellira[200],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.vellira[150],
+    }),
+    success: createSelectPalette(success, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.success[200],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.success[100],
+    }),
+    warning: createSelectPalette(warning, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.warning[200],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.warning[100],
+    }),
+    danger: createSelectPalette(danger, {
+        dropdownBorder: 'transparent',
+        optionActiveBorder: 'transparent',
+        optionActiveRing: 'transparent',
+        optionHoverBorder: 'transparent',
+        optionPressedBg: colors.error[200],
+        optionPressedBorder: 'transparent',
+        optionSelectedBg: colors.error[100],
+    }),
     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 +148,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[500],
+        },
+        separator: {
+            bg: border.muted,
+        },
     },
     option: {
         default: {
@@ -56,11 +189,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/semantic/icons.d.ts

@@ -7,7 +7,7 @@ export declare const icons: {
     readonly primary: "#5037C8";
     readonly brand: "#5037C8";
     readonly hover: "#402C9F";
-    readonly success: "#0F766E";
+    readonly success: "#14B8A6";
     readonly danger: "#BE123C";
     readonly inverse: "#FFFFFF";
 };

package/dist/light/semantic/icons.js

@@ -8,7 +8,7 @@ export const icons = {
     primary: colors.primary[700],
     brand: colors.primary[700],
     hover: colors.primary[800],
-    success: colors.success[700],
+    success: colors.success[500],
     danger: colors.error[700],
     inverse: colors.mono[50],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/tokens",
-  "version": "2.29.0",
+  "version": "2.31.0",
   "description": "Design tokens for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",
@@ -30,10 +30,11 @@
   ],
   "scripts": {
     "clean": "node --input-type=module -e \"import fs from 'node:fs'; fs.rmSync('dist', { recursive: true, force: true })\"",
+    "clean:build": "node --input-type=module -e \"import fs from 'node:fs'; if (fs.existsSync('dist')) for (const entry of fs.readdirSync('dist')) { if (entry !== 'css') fs.rmSync('dist/' + entry, { recursive: true, force: true }); }\"",
     "generate:types": "tsx scripts/generate-token-types.ts",
     "generate:types:check": "tsx scripts/generate-token-types.ts --check",
     "build:tokens": "pnpm run generate:types && tsx scripts/generate-css.ts",
-    "build": "pnpm run clean && pnpm run build:tokens && tsc -p tsconfig.build.json",
+    "build": "pnpm run clean:build && pnpm run build:tokens && tsc -p tsconfig.build.json",
     "typecheck": "pnpm run generate:types:check && tsc -p tsconfig.json --noEmit",
     "test": "pnpm run generate:types:check && vitest run"
   },