@vellira-ui/tokens 2.98.6 → 2.99.0

package/dist/light/semantic/overlay.d.ts

@@ -5,11 +5,11 @@ export declare const overlay: {
         readonly fg: "#3D3754";
         readonly border: "#E4DDF4";
     };
-    readonly popover: {
+    readonly floating: {
         readonly bg: "#FFFFFF";
         readonly border: "#E4DDF4";
     };
-    readonly modal: {
+    readonly dialog: {
         readonly bg: "#FFFFFF";
         readonly border: "#E4DDF4";
     };

package/dist/light/semantic/overlay.js

@@ -9,11 +9,11 @@ export const overlay = {
         fg: colors.vellira[700],
         border: border.muted,
     },
-    popover: {
+    floating: {
         bg: surface.elevated,
         border: border.muted,
     },
-    modal: {
+    dialog: {
         bg: surface.elevated,
         border: border.muted,
     },

package/dist/light/semantic/status.d.ts

@@ -4,28 +4,28 @@ export declare const status: {
         readonly bg: "#F0FDFA";
         readonly border: "#0F766E";
         readonly ring: "#14B8A6";
-        readonly strong: "#115E59";
+        readonly emphasisFg: "#115E59";
     };
     readonly error: {
         readonly fg: "#BE123C";
         readonly bg: "#FFE4E6";
         readonly border: "#E11D48";
         readonly ring: "#F43F5E";
-        readonly strong: "#9F1239";
+        readonly emphasisFg: "#9F1239";
     };
     readonly warning: {
         readonly fg: "#B45309";
         readonly bg: "#FFFBEB";
         readonly border: "#B45309";
         readonly ring: "#F59E0B";
-        readonly strong: "#92400E";
+        readonly emphasisFg: "#92400E";
     };
     readonly info: {
         readonly fg: "#0C4A6E";
         readonly bg: "#F0F9FF";
         readonly border: "#0369A1";
         readonly ring: "#0369A1";
-        readonly strong: "#082F49";
+        readonly emphasisFg: "#082F49";
     };
 };
 //# sourceMappingURL=status.d.ts.map

package/dist/light/semantic/status.js

@@ -5,27 +5,27 @@ export const status = {
         bg: colors.success[50],
         border: colors.success[700],
         ring: colors.success[500],
-        strong: colors.success[800],
+        emphasisFg: colors.success[800],
     },
     error: {
         fg: colors.error[700],
         bg: colors.error[100],
         border: colors.error[600],
         ring: colors.error[500],
-        strong: colors.error[800],
+        emphasisFg: colors.error[800],
     },
     warning: {
         fg: colors.warning[700],
         bg: colors.warning[50],
         border: colors.warning[700],
         ring: colors.warning[500],
-        strong: colors.warning[800],
+        emphasisFg: colors.warning[800],
     },
     info: {
         fg: colors.info[700],
         bg: colors.info[50],
         border: colors.info[500],
         ring: colors.info[500],
-        strong: colors.info[800],
+        emphasisFg: colors.info[800],
     },
 };

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

@@ -1,10 +1,10 @@
 export declare const surface: {
     readonly canvas: "#FAF8FF";
     readonly default: "#FAF8FF";
+    readonly panel: "#FFFFFF";
     readonly muted: "#F4F1FB";
     readonly subtle: "#FDFCFF";
     readonly elevated: "#FFFFFF";
-    readonly background: "#FFFFFF";
     readonly hover: "#F4F1FB";
     readonly active: "#EEE8FA";
     readonly pressed: "#E4DDF4";

package/dist/light/semantic/surface.js

@@ -3,10 +3,10 @@ import { withAlpha } from '../../utils/color.js';
 export const surface = {
     canvas: colors.vellira[50],
     default: colors.vellira[50],
+    panel: colors.mono[50],
     muted: colors.vellira[100],
     subtle: colors.vellira[25],
     elevated: colors.mono[50],
-    background: colors.mono[50],
     hover: colors.vellira[100],
     active: colors.vellira[150],
     pressed: colors.vellira[200],

package/dist/platform-output/component-token-intents.d.ts

@@ -0,0 +1,71 @@
+export declare const componentShadowLevels: readonly ["sm", "md", "lg", "xl"];
+export type ComponentShadowLevel = (typeof componentShadowLevels)[number];
+export type ComponentElevationShadowIntent = Readonly<{
+    kind: 'shadow';
+    role: 'elevation';
+    level: ComponentShadowLevel;
+}>;
+export type ComponentFocusRingShadowIntent = Readonly<{
+    kind: 'shadow';
+    role: 'focus-ring';
+}>;
+export type ComponentNoShadowIntent = Readonly<{
+    kind: 'shadow';
+    role: 'none';
+}>;
+export type ComponentShadowIntent = ComponentElevationShadowIntent | ComponentFocusRingShadowIntent | ComponentNoShadowIntent;
+export type ComponentViewportHeightIntent = Readonly<{
+    kind: 'viewport-height';
+    ratio: number;
+}>;
+export type ComponentPlatformIntent = ComponentShadowIntent | ComponentViewportHeightIntent;
+export type ReactNativeShadowOutput = Readonly<{
+    x: number;
+    y: number;
+    blur: number;
+    color: string;
+    opacity: number;
+    elevation: number;
+}>;
+export type ComponentPlatformOutputSources = Readonly<{
+    web: {
+        shadow: Readonly<Record<ComponentShadowLevel, string>>;
+        focusRingShadow: string;
+    };
+    reactNative: {
+        shadow: Readonly<Record<ComponentShadowLevel, ReactNativeShadowOutput>>;
+    };
+}>;
+type ComponentOutputThemeSources = Readonly<{
+    semantic: {
+        focus: {
+            ring: {
+                shadow: string;
+            };
+        };
+        shadow: Readonly<Record<ComponentShadowLevel, string>>;
+    };
+    tokens: {
+        shadows: Readonly<Record<'sm' | 'md' | 'lg', ReactNativeShadowOutput>>;
+    };
+}>;
+type WebAdaptedIntent<T> = T extends ComponentPlatformIntent ? string : never;
+type ReactNativeAdaptedIntent<T> = T extends ComponentElevationShadowIntent ? ReactNativeShadowOutput : T extends ComponentFocusRingShadowIntent | ComponentNoShadowIntent ? null : T extends ComponentViewportHeightIntent ? string : never;
+export type WebComponentTokens<T> = T extends ComponentPlatformIntent ? WebAdaptedIntent<T> : T extends readonly (infer TEntry)[] ? readonly WebComponentTokens<TEntry>[] : T extends object ? {
+    readonly [K in keyof T]: WebComponentTokens<T[K]>;
+} : T;
+export type ReactNativeComponentTokens<T> = T extends ComponentPlatformIntent ? ReactNativeAdaptedIntent<T> : T extends readonly (infer TEntry)[] ? readonly ReactNativeComponentTokens<TEntry>[] : T extends object ? {
+    readonly [K in keyof T]: ReactNativeComponentTokens<T[K]>;
+} : T;
+export declare function createComponentShadowIntent(level: ComponentShadowLevel): ComponentElevationShadowIntent;
+export declare function createComponentFocusRingShadowIntent(): ComponentFocusRingShadowIntent;
+export declare function createComponentNoShadowIntent(): ComponentNoShadowIntent;
+export declare function createComponentViewportHeightIntent(ratio: number): ComponentViewportHeightIntent;
+export declare function isComponentPlatformIntent(value: unknown): value is ComponentPlatformIntent;
+export declare function createComponentPlatformOutputSources(theme: ComponentOutputThemeSources): ComponentPlatformOutputSources;
+export declare function resolveComponentIntentForWeb(intent: ComponentPlatformIntent, sources: ComponentPlatformOutputSources): string;
+export declare function resolveComponentIntentForReactNative(intent: ComponentPlatformIntent, sources: ComponentPlatformOutputSources): string | ReactNativeShadowOutput | null;
+export declare function adaptComponentTokensForWeb<T>(components: T, sources: ComponentPlatformOutputSources): WebComponentTokens<T>;
+export declare function adaptComponentTokensForReactNative<T>(components: T, sources: ComponentPlatformOutputSources): ReactNativeComponentTokens<T>;
+export {};
+//# sourceMappingURL=component-token-intents.d.ts.map

package/dist/platform-output/component-token-intents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-token-intents.d.ts","sourceRoot":"","sources":["../../src/platform-output/component-token-intents.ts"],"names":[],"mappings":"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"}

package/dist/platform-output/component-token-intents.js

@@ -0,0 +1,110 @@
+export const componentShadowLevels = ['sm', 'md', 'lg', 'xl'];
+export function createComponentShadowIntent(level) {
+    return { kind: 'shadow', role: 'elevation', level };
+}
+export function createComponentFocusRingShadowIntent() {
+    return { kind: 'shadow', role: 'focus-ring' };
+}
+export function createComponentNoShadowIntent() {
+    return { kind: 'shadow', role: 'none' };
+}
+export function createComponentViewportHeightIntent(ratio) {
+    if (!Number.isFinite(ratio) || ratio <= 0 || ratio > 1) {
+        throw new Error(`Component viewport-height ratio must be finite and within (0, 1], received ${ratio}.`);
+    }
+    return { kind: 'viewport-height', ratio };
+}
+function hasExactKeys(candidate, expectedKeys) {
+    const actualKeys = Object.keys(candidate);
+    return (actualKeys.length === expectedKeys.length &&
+        actualKeys.every((key) => expectedKeys.includes(key)));
+}
+export function isComponentPlatformIntent(value) {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+        return false;
+    }
+    const candidate = value;
+    if (candidate.kind === 'shadow') {
+        if (candidate.role === 'focus-ring' || candidate.role === 'none') {
+            return hasExactKeys(candidate, ['kind', 'role']);
+        }
+        return (candidate.role === 'elevation' &&
+            hasExactKeys(candidate, ['kind', 'role', 'level']) &&
+            typeof candidate.level === 'string' &&
+            componentShadowLevels.includes(candidate.level));
+    }
+    return (candidate.kind === 'viewport-height' &&
+        hasExactKeys(candidate, ['kind', 'ratio']) &&
+        typeof candidate.ratio === 'number' &&
+        Number.isFinite(candidate.ratio) &&
+        candidate.ratio > 0 &&
+        candidate.ratio <= 1);
+}
+export function createComponentPlatformOutputSources(theme) {
+    return {
+        web: {
+            shadow: {
+                sm: theme.semantic.shadow.sm,
+                md: theme.semantic.shadow.md,
+                lg: theme.semantic.shadow.lg,
+                xl: theme.semantic.shadow.xl,
+            },
+            focusRingShadow: theme.semantic.focus.ring.shadow,
+        },
+        reactNative: {
+            shadow: {
+                sm: theme.tokens.shadows.sm,
+                md: theme.tokens.shadows.md,
+                lg: theme.tokens.shadows.lg,
+                // Preserve current native Modal output. #885 owns the later authority
+                // decision for whether an independent structured xl shadow is needed.
+                xl: theme.tokens.shadows.lg,
+            },
+        },
+    };
+}
+function formatPercentage(ratio) {
+    const percentage = ratio * 100;
+    return Number.isInteger(percentage)
+        ? String(percentage)
+        : String(Number(percentage.toFixed(4)));
+}
+export function resolveComponentIntentForWeb(intent, sources) {
+    if (intent.kind === 'viewport-height') {
+        return `${formatPercentage(intent.ratio)}vh`;
+    }
+    if (intent.role === 'focus-ring')
+        return sources.web.focusRingShadow;
+    if (intent.role === 'none')
+        return 'none';
+    return sources.web.shadow[intent.level];
+}
+export function resolveComponentIntentForReactNative(intent, sources) {
+    if (intent.kind === 'viewport-height') {
+        return `${formatPercentage(intent.ratio)}%`;
+    }
+    if (intent.role === 'focus-ring' || intent.role === 'none')
+        return null;
+    return sources.reactNative.shadow[intent.level];
+}
+function adaptComponentTokenTree(value, resolveIntent) {
+    if (isComponentPlatformIntent(value)) {
+        return resolveIntent(value);
+    }
+    if (Array.isArray(value)) {
+        return value.map((entry) => adaptComponentTokenTree(entry, resolveIntent));
+    }
+    if (typeof value === 'object' && value !== null) {
+        return Object.fromEntries(Object.entries(value).map(([key, entry]) => [
+            key,
+            adaptComponentTokenTree(entry, resolveIntent),
+        ]));
+    }
+    return value;
+}
+export function adaptComponentTokensForWeb(components, sources) {
+    return adaptComponentTokenTree(components, (intent) => resolveComponentIntentForWeb(intent, sources));
+}
+export function adaptComponentTokensForReactNative(components, sources) {
+    return adaptComponentTokenTree(components, (intent) => resolveComponentIntentForReactNative(intent, sources));
+}

package/dist/platform-output/component-token-web-compatibility.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Legacy Web output identities retained by #884 only for compatibility.
+ *
+ * These paths are not canonical component tokens. They exist after the
+ * renderer-neutral component boundary and are intentionally revisited by #889.
+ */
+export declare const componentTokenWebCompatibilityAliases: readonly [{
+    readonly path: "components.modal.content.nativeMaxHeight";
+    readonly variable: "--modal-content-native-max-height";
+}, {
+    readonly path: "components.popover.content.shadow.web";
+    readonly variable: "--popover-content-shadow-web";
+}, {
+    readonly path: "components.popover.content.shadow.native.x";
+    readonly variable: "--popover-content-shadow-native-x";
+}, {
+    readonly path: "components.popover.content.shadow.native.y";
+    readonly variable: "--popover-content-shadow-native-y";
+}, {
+    readonly path: "components.popover.content.shadow.native.blur";
+    readonly variable: "--popover-content-shadow-native-blur";
+}, {
+    readonly path: "components.popover.content.shadow.native.color";
+    readonly variable: "--popover-content-shadow-native-color";
+}, {
+    readonly path: "components.popover.content.shadow.native.opacity";
+    readonly variable: "--popover-content-shadow-native-opacity";
+}, {
+    readonly path: "components.popover.content.shadow.native.elevation";
+    readonly variable: "--popover-content-shadow-native-elevation";
+}];
+//# sourceMappingURL=component-token-web-compatibility.d.ts.map

package/dist/platform-output/component-token-web-compatibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-token-web-compatibility.d.ts","sourceRoot":"","sources":["../../src/platform-output/component-token-web-compatibility.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,qCAAqC;;;;;;;;;;;;;;;;;;;;;;;;EAiCxC,CAAC"}

package/dist/platform-output/component-token-web-compatibility.js

@@ -0,0 +1,40 @@
+/**
+ * Legacy Web output identities retained by #884 only for compatibility.
+ *
+ * These paths are not canonical component tokens. They exist after the
+ * renderer-neutral component boundary and are intentionally revisited by #889.
+ */
+export const componentTokenWebCompatibilityAliases = [
+    {
+        path: 'components.modal.content.nativeMaxHeight',
+        variable: '--modal-content-native-max-height',
+    },
+    {
+        path: 'components.popover.content.shadow.web',
+        variable: '--popover-content-shadow-web',
+    },
+    {
+        path: 'components.popover.content.shadow.native.x',
+        variable: '--popover-content-shadow-native-x',
+    },
+    {
+        path: 'components.popover.content.shadow.native.y',
+        variable: '--popover-content-shadow-native-y',
+    },
+    {
+        path: 'components.popover.content.shadow.native.blur',
+        variable: '--popover-content-shadow-native-blur',
+    },
+    {
+        path: 'components.popover.content.shadow.native.color',
+        variable: '--popover-content-shadow-native-color',
+    },
+    {
+        path: 'components.popover.content.shadow.native.opacity',
+        variable: '--popover-content-shadow-native-opacity',
+    },
+    {
+        path: 'components.popover.content.shadow.native.elevation',
+        variable: '--popover-content-shadow-native-elevation',
+    },
+];