@vellira-ui/tokens 2.40.0 → 2.41.0

package/dist/css/tokens.css

@@ -2239,7 +2239,24 @@
   --tooltip-content-fg: #FFFFFF;
   --tooltip-content-border: #181521;
   --tooltip-content-shadow: 0 4px 12px rgba(24, 21, 33, 0.12);
+  --tooltip-content-border-width: 1px;
+  --tooltip-content-radius: 8px;
+  --tooltip-content-padding-x: 12px;
+  --tooltip-content-padding-y: 8px;
+  --tooltip-content-max-width: 240px;
+  --tooltip-content-compact-max-width: 200px;
+  --tooltip-content-compact-padding-x: 8px;
+  --tooltip-content-compact-padding-y: 4px;
+  --tooltip-content-font-size: 14px;
+  --tooltip-content-line-height: 20px;
+  --tooltip-content-compact-font-size: 12px;
+  --tooltip-content-compact-line-height: 16px;
+  --tooltip-content-animation-duration: 150ms;
+  --tooltip-content-translate-y: 2px;
+  --tooltip-content-scale: 0.98px;
   --tooltip-arrow-bg: #181521;
+  --tooltip-arrow-size: 10px;
+  --tooltip-arrow-compact-size: 6px;
 }
 
 [data-theme='dark'],
@@ -4427,7 +4444,24 @@
   --tooltip-content-fg: #000000;
   --tooltip-content-border: #2F2A42;
   --tooltip-content-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
+  --tooltip-content-border-width: 1px;
+  --tooltip-content-radius: 8px;
+  --tooltip-content-padding-x: 12px;
+  --tooltip-content-padding-y: 8px;
+  --tooltip-content-max-width: 240px;
+  --tooltip-content-compact-max-width: 200px;
+  --tooltip-content-compact-padding-x: 8px;
+  --tooltip-content-compact-padding-y: 4px;
+  --tooltip-content-font-size: 14px;
+  --tooltip-content-line-height: 20px;
+  --tooltip-content-compact-font-size: 12px;
+  --tooltip-content-compact-line-height: 16px;
+  --tooltip-content-animation-duration: 150ms;
+  --tooltip-content-translate-y: 2px;
+  --tooltip-content-scale: 0.98px;
   --tooltip-arrow-bg: #FFFFFF;
+  --tooltip-arrow-size: 10px;
+  --tooltip-arrow-compact-size: 6px;
 }
 
 [data-theme='high-contrast'],
@@ -6626,5 +6660,22 @@
   --tooltip-content-fg: #000000;
   --tooltip-content-border: #FCD34D;
   --tooltip-content-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
+  --tooltip-content-border-width: 1px;
+  --tooltip-content-radius: 8px;
+  --tooltip-content-padding-x: 12px;
+  --tooltip-content-padding-y: 8px;
+  --tooltip-content-max-width: 240px;
+  --tooltip-content-compact-max-width: 200px;
+  --tooltip-content-compact-padding-x: 8px;
+  --tooltip-content-compact-padding-y: 4px;
+  --tooltip-content-font-size: 14px;
+  --tooltip-content-line-height: 20px;
+  --tooltip-content-compact-font-size: 12px;
+  --tooltip-content-compact-line-height: 16px;
+  --tooltip-content-animation-duration: 150ms;
+  --tooltip-content-translate-y: 2px;
+  --tooltip-content-scale: 0.98px;
   --tooltip-arrow-bg: #FFFFFF;
+  --tooltip-arrow-size: 10px;
+  --tooltip-arrow-compact-size: 6px;
 }

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

@@ -1,12 +1,2 @@
-export declare const tooltip: {
-    readonly content: {
-        readonly bg: "#FFFFFF";
-        readonly fg: "#000000";
-        readonly border: "#2F2A42";
-        readonly shadow: "0 4px 12px rgba(0, 0, 0, 0.22)";
-    };
-    readonly arrow: {
-        readonly bg: "#FFFFFF";
-    };
-};
+export declare const tooltip: import("../../factories/createTooltipTokens.js").TooltipTokens;
 //# sourceMappingURL=tooltip.d.ts.map

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

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

package/dist/dark/components/tooltip.js

@@ -1,13 +1,21 @@
+import { createTooltipTokens } 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 = {
-    content: {
-        bg: overlay.tooltip.bg,
-        fg: overlay.tooltip.fg,
-        border: overlay.tooltip.border,
-        shadow: shadow.md,
-    },
-    arrow: {
-        bg: overlay.tooltip.bg,
-    },
-};
+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,
+});

package/dist/factories/createTooltipTokens.d.ts

@@ -0,0 +1,57 @@
+type TooltipContentTokens = {
+    bg: string;
+    fg: string;
+    border: string;
+    shadow: string;
+    borderWidth: number;
+    radius: number;
+    paddingX: number;
+    paddingY: number;
+    maxWidth: number;
+    compactMaxWidth: number;
+    compactPaddingX: number;
+    compactPaddingY: number;
+    fontSize: number;
+    lineHeight: number;
+    compactFontSize: number;
+    compactLineHeight: number;
+    animationDuration: string;
+    translateY: number;
+    scale: number;
+};
+type TooltipArrowTokens = {
+    bg: string;
+    size: number;
+    compactSize: number;
+};
+type TooltipTokensConfig = {
+    contentBg: string;
+    contentFg: string;
+    contentBorder: string;
+    contentShadow: string;
+    contentBorderWidth?: number;
+    contentRadius: number;
+    contentPaddingX: number;
+    contentPaddingY: number;
+    contentMaxWidth?: number;
+    contentCompactMaxWidth?: number;
+    contentCompactPaddingX: number;
+    contentCompactPaddingY: number;
+    contentFontSize: number;
+    contentLineHeight: number;
+    contentCompactFontSize: number;
+    contentCompactLineHeight: number;
+    contentAnimationDuration?: string;
+    contentTranslateY?: number;
+    contentScale?: number;
+    arrowBg?: string;
+    arrowSize?: number;
+    arrowCompactSize?: number;
+};
+export type TooltipTokens = {
+    content: TooltipContentTokens;
+    arrow: TooltipArrowTokens;
+};
+export declare const createTooltipTokens: ({ contentBg, contentFg, contentBorder, contentShadow, contentBorderWidth, contentRadius, contentPaddingX, contentPaddingY, contentMaxWidth, contentCompactMaxWidth, contentCompactPaddingX, contentCompactPaddingY, contentFontSize, contentLineHeight, contentCompactFontSize, contentCompactLineHeight, contentAnimationDuration, contentTranslateY, contentScale, arrowBg, arrowSize, arrowCompactSize, }: TooltipTokensConfig) => TooltipTokens;
+export {};
+//# sourceMappingURL=createTooltipTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createTooltipTokens.d.ts","sourceRoot":"","sources":["../../src/factories/createTooltipTokens.ts"],"names":[],"mappings":"AAAA,KAAK,oBAAoB,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,MAAM,CAAC;IACjC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,KAAK,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,8YAuBjC,mBAAmB,KAAG,aA6BZ,CAAC"}

package/dist/factories/createTooltipTokens.js

@@ -0,0 +1,28 @@
+export const createTooltipTokens = ({ contentBg, contentFg, contentBorder, contentShadow, contentBorderWidth = 1, contentRadius, contentPaddingX, contentPaddingY, contentMaxWidth = 240, contentCompactMaxWidth = 200, contentCompactPaddingX, contentCompactPaddingY, contentFontSize, contentLineHeight, contentCompactFontSize, contentCompactLineHeight, contentAnimationDuration = '150ms', contentTranslateY = 2, contentScale = 0.98, arrowBg = contentBg, arrowSize = 10, arrowCompactSize = 6, }) => ({
+    content: {
+        bg: contentBg,
+        fg: contentFg,
+        border: contentBorder,
+        shadow: contentShadow,
+        borderWidth: contentBorderWidth,
+        radius: contentRadius,
+        paddingX: contentPaddingX,
+        paddingY: contentPaddingY,
+        maxWidth: contentMaxWidth,
+        compactMaxWidth: contentCompactMaxWidth,
+        compactPaddingX: contentCompactPaddingX,
+        compactPaddingY: contentCompactPaddingY,
+        fontSize: contentFontSize,
+        lineHeight: contentLineHeight,
+        compactFontSize: contentCompactFontSize,
+        compactLineHeight: contentCompactLineHeight,
+        animationDuration: contentAnimationDuration,
+        translateY: contentTranslateY,
+        scale: contentScale,
+    },
+    arrow: {
+        bg: arrowBg,
+        size: arrowSize,
+        compactSize: arrowCompactSize,
+    },
+});

package/dist/factories/index.d.ts

@@ -5,4 +5,5 @@ export * from './createModalTokens.js';
 export * from './createRadioGroupTokens.js';
 export * from './createRadioPalette.js';
 export * from './createTabsTokens.js';
+export * from './createTooltipTokens.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/factories/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/factories/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC"}

package/dist/factories/index.js

@@ -5,3 +5,4 @@ export * from './createModalTokens.js';
 export * from './createRadioGroupTokens.js';
 export * from './createRadioPalette.js';
 export * from './createTabsTokens.js';
+export * from './createTooltipTokens.js';