@vellira-ui/tokens 2.52.0 → 2.54.0

package/dist/css/tokens.css

@@ -307,7 +307,7 @@
   --navigation-trigger-hover-bg: #F4F1FB;
   --navigation-trigger-hover-fg: #402C9F;
   --navigation-border: #E4DDF4;
-  --overlay-backdrop: rgba(24, 21, 33, 0.52);
+  --overlay-backdrop: rgba(255, 255, 255, 0.12);
   --overlay-tooltip-bg: #FFFFFF;
   --overlay-tooltip-fg: #3D3754;
   --overlay-tooltip-border: #E4DDF4;
@@ -1243,7 +1243,7 @@
   --input-affix-fg: #3D3754;
   --input-counter-fg: #6B6386;
   --input-spinner-fg: #958CB0;
-  --modal-overlay-bg: rgba(24, 21, 33, 0.52);
+  --modal-overlay-bg: rgba(255, 255, 255, 0.12);
   --modal-overlay-blur: 4px;
   --modal-overlay-animation-duration: 180ms;
   --modal-content-bg: #FFFFFF;
@@ -1295,6 +1295,27 @@
   --modal-motion-close-duration: 150ms;
   --modal-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --modal-motion-open-duration: 180ms;
+  --popover-content-bg: #FFFFFF;
+  --popover-content-fg: #3D3754;
+  --popover-content-border: #E4DDF4;
+  --popover-content-shadow-web: 0 12px 40px rgba(24, 21, 33, 0.16), 0 2px 8px rgba(24, 21, 33, 0.1);
+  --popover-content-shadow-native-x: 0px;
+  --popover-content-shadow-native-y: 12px;
+  --popover-content-shadow-native-blur: 32px;
+  --popover-content-shadow-native-color: #000000;
+  --popover-content-shadow-native-opacity: 0.1px;
+  --popover-content-shadow-native-elevation: 8px;
+  --popover-content-border-width: 1px;
+  --popover-content-radius: 16px;
+  --popover-content-padding: 16px;
+  --popover-content-gap: 12px;
+  --popover-content-min-width: 220px;
+  --popover-content-max-width: 320px;
+  --popover-title-fg: #3D3754;
+  --popover-description-fg: #6B6386;
+  --popover-arrow-size: 10px;
+  --popover-arrow-bg: #FFFFFF;
+  --popover-arrow-border: #E4DDF4;
   --radio-size-sm-control-size: 14px;
   --radio-size-sm-indicator-size: 6px;
   --radio-size-sm-label-font-size: 14px;
@@ -2541,7 +2562,7 @@
   --navigation-trigger-hover-bg: #2F2A42;
   --navigation-trigger-hover-fg: #F4F1FB;
   --navigation-border: #3D3754;
-  --overlay-backdrop: rgba(0,0,0,.72);
+  --overlay-backdrop: rgba(0, 0, 0, 0.72);
   --overlay-tooltip-bg: #2F2A42;
   --overlay-tooltip-fg: #F4F1FB;
   --overlay-tooltip-border: #4F4867;
@@ -3529,6 +3550,27 @@
   --modal-motion-close-duration: 150ms;
   --modal-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --modal-motion-open-duration: 180ms;
+  --popover-content-bg: #242034;
+  --popover-content-fg: #F4F1FB;
+  --popover-content-border: #3D3754;
+  --popover-content-shadow-web: 0 12px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
+  --popover-content-shadow-native-x: 0px;
+  --popover-content-shadow-native-y: 12px;
+  --popover-content-shadow-native-blur: 32px;
+  --popover-content-shadow-native-color: #000000;
+  --popover-content-shadow-native-opacity: 0.1px;
+  --popover-content-shadow-native-elevation: 8px;
+  --popover-content-border-width: 1px;
+  --popover-content-radius: 16px;
+  --popover-content-padding: 16px;
+  --popover-content-gap: 12px;
+  --popover-content-min-width: 220px;
+  --popover-content-max-width: 320px;
+  --popover-title-fg: #F4F1FB;
+  --popover-description-fg: #BBB2D2;
+  --popover-arrow-size: 10px;
+  --popover-arrow-bg: #242034;
+  --popover-arrow-border: #3D3754;
   --radio-size-sm-control-size: 14px;
   --radio-size-sm-indicator-size: 6px;
   --radio-size-sm-label-font-size: 14px;
@@ -4786,7 +4828,7 @@
   --navigation-trigger-hover-bg: #374151;
   --navigation-trigger-hover-fg: #FCD34D;
   --navigation-border: #9CA3AF;
-  --overlay-backdrop: rgba(0, 0, 0, 0.82);
+  --overlay-backdrop: rgba(0, 0, 0, 0.72);
   --overlay-tooltip-bg: #FFFFFF;
   --overlay-tooltip-fg: #000000;
   --overlay-tooltip-border: #FCD34D;
@@ -5722,7 +5764,7 @@
   --input-affix-fg: #FFFFFF;
   --input-counter-fg: #EEE8FA;
   --input-spinner-fg: #9CA3AF;
-  --modal-overlay-bg: rgba(0, 0, 0, 0.82);
+  --modal-overlay-bg: rgba(0, 0, 0, 0.72);
   --modal-overlay-blur: 4px;
   --modal-overlay-animation-duration: 180ms;
   --modal-content-bg: #111827;
@@ -5774,6 +5816,27 @@
   --modal-motion-close-duration: 150ms;
   --modal-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --modal-motion-open-duration: 180ms;
+  --popover-content-bg: #111827;
+  --popover-content-fg: #FFFFFF;
+  --popover-content-border: #9CA3AF;
+  --popover-content-shadow-web: 0 12px 40px rgba(0, 0, 0, 0.7);
+  --popover-content-shadow-native-x: 0px;
+  --popover-content-shadow-native-y: 12px;
+  --popover-content-shadow-native-blur: 32px;
+  --popover-content-shadow-native-color: #000000;
+  --popover-content-shadow-native-opacity: 0.1px;
+  --popover-content-shadow-native-elevation: 8px;
+  --popover-content-border-width: 1px;
+  --popover-content-radius: 16px;
+  --popover-content-padding: 16px;
+  --popover-content-gap: 12px;
+  --popover-content-min-width: 220px;
+  --popover-content-max-width: 320px;
+  --popover-title-fg: #FFFFFF;
+  --popover-description-fg: #EEE8FA;
+  --popover-arrow-size: 10px;
+  --popover-arrow-bg: #111827;
+  --popover-arrow-border: #9CA3AF;
   --radio-size-sm-control-size: 14px;
   --radio-size-sm-indicator-size: 6px;
   --radio-size-sm-label-font-size: 14px;

package/dist/dark/components/index.d.ts

@@ -5,6 +5,7 @@ export { dropdown } from './dropdown.js';
 export { formField } from './formField.js';
 export { input } from './input.js';
 export { modal } from './modal.js';
+export { popover } from './popover.js';
 export { radio } from './radio.js';
 export { radioGroup } from './radioGroup.js';
 export { select } from './select.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dark/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dark/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/dark/components/index.js

@@ -5,6 +5,7 @@ export { dropdown } from './dropdown.js';
 export { formField } from './formField.js';
 export { input } from './input.js';
 export { modal } from './modal.js';
+export { popover } from './popover.js';
 export { radio } from './radio.js';
 export { radioGroup } from './radioGroup.js';
 export { select } from './select.js';

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

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

package/dist/dark/components/modal.js

@@ -1,17 +1,16 @@
 import { createModalTokens } from '../../factories/createModalTokens.js';
-import { overlay } from '../../semantic/overlay.js';
 import { radius } from '../../tokens/radius.js';
 import { spacing } from '../../tokens/spacing.js';
-import { border } from '../semantic/border.js';
 import { focus } from '../semantic/focus.js';
+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: surface.subtle,
+    contentBg: overlay.modal.bg,
     contentFg: text.primary,
-    contentBorder: border.muted,
+    contentBorder: overlay.modal.border,
     contentShadow: shadow.xl,
     titleFg: text.primary,
     descriptionFg: text.secondary,

package/dist/dark/components/popover.d.ts

@@ -0,0 +1,50 @@
+export declare const popover: {
+    readonly content: {
+        readonly bg: string;
+        readonly fg: string;
+        readonly border: string;
+        readonly shadow: {
+            readonly web: string;
+            readonly native: {
+                readonly x: 0;
+                readonly y: 1;
+                readonly blur: 3;
+                readonly color: "#000000";
+                readonly opacity: 0.04;
+                readonly elevation: 1;
+            } | {
+                readonly x: 0;
+                readonly y: 6;
+                readonly blur: 16;
+                readonly color: "#000000";
+                readonly opacity: 0.08;
+                readonly elevation: 4;
+            } | {
+                readonly x: 0;
+                readonly y: 12;
+                readonly blur: 32;
+                readonly color: "#000000";
+                readonly opacity: 0.1;
+                readonly elevation: 8;
+            };
+        };
+        readonly borderWidth: 1;
+        readonly radius: number;
+        readonly padding: number;
+        readonly gap: number;
+        readonly minWidth: 220;
+        readonly maxWidth: 320;
+    };
+    readonly title: {
+        readonly fg: string;
+    };
+    readonly description: {
+        readonly fg: string;
+    };
+    readonly arrow: {
+        readonly size: 10;
+        readonly bg: string;
+        readonly border: string;
+    };
+};
+//# sourceMappingURL=popover.d.ts.map

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

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

package/dist/dark/components/popover.js

@@ -0,0 +1,19 @@
+import { createPopoverTokens } 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],
+});

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

@@ -1,5 +1,5 @@
 export declare const overlay: {
-    readonly backdrop: "rgba(0,0,0,.72)";
+    readonly backdrop: "rgba(0, 0, 0, 0.72)";
     readonly tooltip: {
         readonly bg: "#2F2A42";
         readonly fg: "#F4F1FB";

package/dist/dark/semantic/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/overlay.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAkBV,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/dark/semantic/overlay.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAkBV,CAAC"}

package/dist/dark/semantic/overlay.js

@@ -1,8 +1,9 @@
 import { colors } from '../../primitives/colors.js';
+import { overlay as primitiveOverlay } from '../../primitives/overlay.js';
 import { border } from './border.js';
 import { surface } from './surface.js';
 export const overlay = {
-    backdrop: 'rgba(0,0,0,.72)',
+    backdrop: primitiveOverlay.backdrop,
     tooltip: {
         bg: surface.elevated,
         fg: colors.vellira[100],

package/dist/factories/createPopoverTokens.d.ts

@@ -0,0 +1,44 @@
+import type { shadows } from '../tokens/shadows.js';
+type NativeShadowToken = (typeof shadows)[keyof typeof shadows];
+type PopoverTokensConfig = {
+    contentBg: string;
+    contentFg: string;
+    contentBorder: string;
+    contentWebShadow: string;
+    contentNativeShadow: NativeShadowToken;
+    titleFg: string;
+    descriptionFg: string;
+    radiusLg: number;
+    spacing3: number;
+    spacing4: number;
+};
+export declare const createPopoverTokens: (config: PopoverTokensConfig) => {
+    readonly content: {
+        readonly bg: string;
+        readonly fg: string;
+        readonly border: string;
+        readonly shadow: {
+            readonly web: string;
+            readonly native: NativeShadowToken;
+        };
+        readonly borderWidth: 1;
+        readonly radius: number;
+        readonly padding: number;
+        readonly gap: number;
+        readonly minWidth: 220;
+        readonly maxWidth: 320;
+    };
+    readonly title: {
+        readonly fg: string;
+    };
+    readonly description: {
+        readonly fg: string;
+    };
+    readonly arrow: {
+        readonly size: 10;
+        readonly bg: string;
+        readonly border: string;
+    };
+};
+export {};
+//# sourceMappingURL=createPopoverTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createPopoverTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createPopoverTokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEpD,KAAK,iBAAiB,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAEhE,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,iBAAiB,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,QAAQ,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiClD,CAAC"}

package/dist/factories/createPopoverTokens.js

@@ -0,0 +1,28 @@
+export const createPopoverTokens = (config) => ({
+    content: {
+        bg: config.contentBg,
+        fg: config.contentFg,
+        border: config.contentBorder,
+        shadow: {
+            web: config.contentWebShadow,
+            native: config.contentNativeShadow,
+        },
+        borderWidth: 1,
+        radius: config.radiusLg,
+        padding: config.spacing4,
+        gap: config.spacing3,
+        minWidth: 220,
+        maxWidth: 320,
+    },
+    title: {
+        fg: config.titleFg,
+    },
+    description: {
+        fg: config.descriptionFg,
+    },
+    arrow: {
+        size: 10,
+        bg: config.contentBg,
+        border: config.contentBorder,
+    },
+});