@vellira-ui/tokens 2.95.2 → 2.96.0

package/dist/light/components/contextMenu.js

@@ -1,52 +1,11 @@
+import { createContextMenuTokensFromSemantics } from '../../factories/createContextMenuTokens.js';
 import { focus } from '../semantic/focus.js';
-import { menu as semanticMenu } from '../semantic/menu.js';
+import { menu } from '../semantic/menu.js';
 import { shadow } from '../semantic/shadow.js';
 import { text } from '../semantic/text.js';
-export const contextMenu = {
-    content: {
-        bg: semanticMenu.background,
-        border: semanticMenu.border,
-        shadow: shadow.lg,
-    },
-    item: {
-        default: semanticMenu.item.default,
-        hover: semanticMenu.item.hover,
-        active: {
-            ...semanticMenu.item.active,
-            ring: 'transparent',
-        },
-        pressed: semanticMenu.item.pressed,
-        focus: {
-            ring: focus.ring,
-        },
-        disabled: semanticMenu.item.disabled,
-        danger: semanticMenu.item.danger,
-    },
-    trigger: {
-        default: {
-            bg: 'transparent',
-            fg: text.interactive,
-            border: 'transparent',
-        },
-        hover: {
-            bg: semanticMenu.item.hover.bg,
-            fg: text.interactiveHover,
-            border: 'transparent',
-            ring: 'transparent',
-        },
-        focus: {
-            bg: 'transparent',
-            fg: text.interactive,
-            border: 'transparent',
-            ring: focus.ring,
-        },
-        disabled: {
-            bg: 'transparent',
-            fg: text.disabled,
-            border: 'transparent',
-        },
-    },
-    groupLabel: {
-        fg: text.secondary,
-    },
-};
+export const contextMenu = createContextMenuTokensFromSemantics({
+    focus,
+    menu,
+    shadow,
+    text,
+});

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

@@ -1,85 +1,85 @@
 export declare const formField: {
     readonly label: {
-        readonly fg: "#3D3754";
+        readonly fg: string;
     };
     readonly optional: {
-        readonly fg: "#6B6386";
+        readonly fg: string;
     };
     readonly labelInfo: {
-        readonly fg: "#6B6386";
-        readonly border: "#6B6386";
-        readonly radius: 999;
+        readonly fg: string;
+        readonly border: string;
+        readonly radius: number;
     };
     readonly description: {
-        readonly fg: "#6B6386";
+        readonly fg: string;
     };
     readonly helperText: {
         readonly default: {
-            readonly fg: "#958CB0";
+            readonly fg: string;
         };
         readonly error: {
-            readonly fg: "#BE123C";
+            readonly fg: string;
         };
         readonly success: {
-            readonly fg: "#0F766E";
+            readonly fg: string;
         };
         readonly warning: {
-            readonly fg: "#B45309";
+            readonly fg: string;
         };
         readonly info: {
-            readonly fg: "#0C4A6E";
+            readonly fg: string;
         };
     };
     readonly requiredMark: {
-        readonly fg: "#BE123C";
+        readonly fg: string;
     };
     readonly disabled: {
-        readonly labelFg: "#958CB0";
-        readonly descriptionFg: "#958CB0";
-        readonly helperTextFg: "#958CB0";
+        readonly labelFg: string;
+        readonly descriptionFg: string;
+        readonly helperTextFg: string;
     };
     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 gap: number;
+            readonly horizontalGap: number;
+            readonly labelFontSize: number;
+            readonly labelLineHeight: number;
+            readonly descriptionFontSize: number;
+            readonly descriptionLineHeight: number;
+            readonly helperTextFontSize: number;
+            readonly helperTextLineHeight: number;
+            readonly optionalFontSize: number;
+            readonly optionalLineHeight: number;
+            readonly labelInfoSize: number;
+            readonly labelInfoFontSize: number;
         };
         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 gap: number;
+            readonly horizontalGap: number;
+            readonly labelFontSize: number;
+            readonly labelLineHeight: number;
+            readonly descriptionFontSize: number;
+            readonly descriptionLineHeight: number;
+            readonly helperTextFontSize: number;
+            readonly helperTextLineHeight: number;
+            readonly optionalFontSize: number;
+            readonly optionalLineHeight: number;
+            readonly labelInfoSize: number;
+            readonly labelInfoFontSize: number;
         };
         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;
+            readonly gap: number;
+            readonly horizontalGap: number;
+            readonly labelFontSize: number;
+            readonly labelLineHeight: number;
+            readonly descriptionFontSize: number;
+            readonly descriptionLineHeight: number;
+            readonly helperTextFontSize: number;
+            readonly helperTextLineHeight: number;
+            readonly optionalFontSize: number;
+            readonly optionalLineHeight: number;
+            readonly labelInfoSize: number;
+            readonly labelInfoFontSize: number;
         };
     };
 };

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":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+FZ,CAAC"}
+{"version":3,"file":"formField.d.ts","sourceRoot":"","sources":["../../../src/light/components/formField.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMpB,CAAC"}

package/dist/light/components/formField.js

@@ -1,90 +1,13 @@
+import { createFormFieldTokensFromTheme } from '../../factories/createFormFieldTokens.js';
 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,
-    },
-    helperText: {
-        default: {
-            fg: text.muted,
-        },
-        error: {
-            fg: status.error.fg,
-        },
-        success: {
-            fg: status.success.fg,
-        },
-        warning: {
-            fg: status.warning.fg,
-        },
-        info: {
-            fg: status.info.fg,
-        },
-    },
-    requiredMark: {
-        fg: status.error.fg,
-    },
-    disabled: {
-        labelFg: text.disabled,
-        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,
-        },
-    },
-};
+export const formField = createFormFieldTokensFromTheme({
+    radius,
+    spacing,
+    typography,
+    status,
+    text,
+});

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/light/components/modal.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBhB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/light/components/modal.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQhB,CAAC"}

package/dist/light/components/modal.js

@@ -1,4 +1,4 @@
-import { createModalTokens } from '../../factories/createModalTokens.js';
+import { createModalTokensFromSemantics } from '../../factories/createModalTokens.js';
 import { radius } from '../../tokens/radius.js';
 import { spacing } from '../../tokens/spacing.js';
 import { focus } from '../semantic/focus.js';
@@ -6,26 +6,12 @@ import { overlay } from '../semantic/overlay.js';
 import { shadow } from '../semantic/shadow.js';
 import { surface } from '../semantic/surface.js';
 import { text } from '../semantic/text.js';
-export const modal = createModalTokens({
-    overlayBg: overlay.backdrop,
-    contentBg: overlay.modal.bg,
-    contentFg: text.primary,
-    contentBorder: overlay.modal.border,
-    contentShadow: shadow.xl,
-    titleFg: text.primary,
-    descriptionFg: text.secondary,
-    closeButtonDefaultFg: text.secondary,
-    closeButtonHoverBg: surface.hover,
-    closeButtonHoverFg: text.primary,
-    closeButtonPressedBg: surface.pressed,
-    closeButtonPressedFg: text.primary,
-    closeButtonDisabledFg: text.disabled,
-    closeButtonFocusRing: focus.ring,
-    radiusLg: radius.lg,
-    radiusFull: radius.full,
-    spacing1: spacing[1],
-    spacing3: spacing[3],
-    spacing4: spacing[4],
-    spacing8: spacing[8],
-    spacing10: spacing[10],
+export const modal = createModalTokensFromSemantics({
+    focus,
+    overlay,
+    radius,
+    shadow,
+    spacing,
+    surface,
+    text,
 });

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/light/components/popover.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWlB,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/light/components/popover.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOlB,CAAC"}

package/dist/light/components/popover.js

@@ -1,19 +1,15 @@
-import { createPopoverTokens } from '../../factories/createPopoverTokens.js';
+import { createPopoverTokensFromTheme } from '../../factories/createPopoverTokens.js';
 import { radius } from '../../tokens/radius.js';
 import { shadows } from '../../tokens/shadows.js';
 import { spacing } from '../../tokens/spacing.js';
 import { overlay } from '../semantic/overlay.js';
 import { shadow } from '../semantic/shadow.js';
 import { text } from '../semantic/text.js';
-export const popover = createPopoverTokens({
-    contentBg: overlay.popover.bg,
-    contentFg: text.primary,
-    contentBorder: overlay.popover.border,
-    contentWebShadow: shadow.lg,
-    contentNativeShadow: shadows.lg,
-    titleFg: text.primary,
-    descriptionFg: text.secondary,
-    radiusLg: radius.lg,
-    spacing3: spacing[3],
-    spacing4: spacing[4],
+export const popover = createPopoverTokensFromTheme({
+    overlay,
+    shadow,
+    shadows,
+    text,
+    radius,
+    spacing,
 });

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

@@ -1 +1 @@
-{"version":3,"file":"radioGroup.d.ts","sourceRoot":"","sources":["../../../src/light/components/radioGroup.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAMrB,CAAC"}
+{"version":3,"file":"radioGroup.d.ts","sourceRoot":"","sources":["../../../src/light/components/radioGroup.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAA6C,CAAC"}

package/dist/light/components/radioGroup.js

@@ -1,9 +1,3 @@
-import { createRadioGroupTokens } from '../../factories/createRadioGroupTokens.js';
+import { createRadioGroupTokensFromSpacing } from '../../factories/createRadioGroupTokens.js';
 import { spacing } from '../../tokens/spacing.js';
-export const radioGroup = createRadioGroupTokens({
-    spacing1: spacing[1],
-    spacing2: spacing[2],
-    spacing3: spacing[3],
-    spacing4: spacing[4],
-    spacing5: spacing[5],
-});
+export const radioGroup = createRadioGroupTokensFromSpacing(spacing);

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/light/components/switch.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,oEA0CvB,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/light/components/switch.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,oEAIvB,CAAC"}

package/dist/light/components/switch.js

@@ -1,47 +1,9 @@
-import { createSwitchTokens } from '../../factories/createSwitchTokens.js';
+import { createSwitchTokensFromSemantics } from '../../factories/createSwitchTokens.js';
 import { control } from '../semantic/control.js';
 import { focus } from '../semantic/focus.js';
 import { status } from '../semantic/status.js';
-export const switchTokens = createSwitchTokens({
-    geometry: {
-        trackWidth: 44,
-        trackHeight: 24,
-        borderWidth: 2,
-        padding: 1,
-        thumbSize: 18,
-        thumbTravel: 20,
-        focusRingWidth: 2,
-        focusRingOffset: 2,
-        pressScale: 0.98,
-    },
-    off: {
-        trackBg: control.default.bg,
-        trackBorder: control.default.border,
-        thumbBg: control.default.fg,
-    },
-    on: {
-        default: {
-            trackBg: control.selected.default.bg,
-            trackBorder: control.selected.default.border,
-            thumbBg: control.selected.default.fg,
-        },
-        hover: {
-            trackBg: control.selected.hover.bg,
-            trackBorder: control.selected.hover.border,
-            thumbBg: control.selected.hover.fg,
-        },
-        pressed: {
-            trackBg: control.selected.active.bg,
-            trackBorder: control.selected.active.border,
-            thumbBg: control.selected.active.fg,
-        },
-    },
-    focusRing: focus.ring.color,
-    errorBorder: status.error.border,
-    errorRing: status.error.ring,
-    disabled: {
-        trackBg: control.disabled.bg,
-        trackBorder: control.disabled.border,
-        thumbBg: control.disabled.fg,
-    },
+export const switchTokens = createSwitchTokensFromSemantics({
+    control,
+    focus,
+    status,
 });

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/light/components/tooltip.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO,gEAclB,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/light/components/tooltip.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO,gEAMlB,CAAC"}

package/dist/light/components/tooltip.js

@@ -1,21 +1,13 @@
-import { createTooltipTokens } from '../../factories/createTooltipTokens.js';
+import { createTooltipTokensFromTheme } from '../../factories/createTooltipTokens.js';
 import { radius } from '../../tokens/radius.js';
 import { spacing } from '../../tokens/spacing.js';
 import { typography } from '../../tokens/typography.js';
 import { overlay } from '../semantic/overlay.js';
 import { shadow } from '../semantic/shadow.js';
-export const tooltip = createTooltipTokens({
-    contentBg: overlay.tooltip.bg,
-    contentFg: overlay.tooltip.fg,
-    contentBorder: overlay.tooltip.border,
-    contentShadow: shadow.md,
-    contentRadius: radius.sm,
-    contentPaddingX: spacing[3],
-    contentPaddingY: spacing[2],
-    contentCompactPaddingX: spacing[2],
-    contentCompactPaddingY: spacing[1],
-    contentFontSize: typography.size.sm,
-    contentLineHeight: typography.lineHeight.sm,
-    contentCompactFontSize: typography.size.xs,
-    contentCompactLineHeight: typography.lineHeight.xs,
+export const tooltip = createTooltipTokensFromTheme({
+    overlay,
+    shadow,
+    radius,
+    spacing,
+    typography,
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/tokens",
-  "version": "2.95.2",
+  "version": "2.96.0",
   "description": "Design tokens for Vellira Design System",
   "keywords": [
     "vellira",