@cube-dev/ui-kit 0.166.0 → 0.167.0

package/dist/tokens/{index.js → all-tokens.js}

@@ -1,34 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
-import { colorSeed } from "./color-seed.js";
-import { DEFAULT_PALETTE_CONFIG, MAX_BASE_SATURATION, getPaletteConfig, getPaletteConfigInput, getPaletteVersion, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion } from "./palette-config.js";
+/** @license MIT | @cube-dev/ui-kit v0.167.0 | Cube Dev Team */
+import { getPaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";
-import { PALETTE_TOKENS, getCodeTheme, getPalette, getPaletteTokens, renderPaletteTokens } from "./palette.js";
 import { SHADOW_TOKENS } from "./shadows.js";
-import { COLOR_TOKENS, getColorTokens, renderColorTokens } from "./colors.js";
+import { getColorTokens } from "./colors.js";
 import { LAYOUT_TOKENS } from "./layout.js";
-import { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS } from "./sizes.js";
+import { SIZE_TOKENS } from "./sizes.js";
 import { SPACE_TOKENS } from "./spacing.js";
 import { TYPOGRAPHY_PRESETS } from "./typography.js";
-import { colorThemeSeed, getColorTheme, useColorTheme } from "./color-theme.js";
 import { generateTypographyTokens } from "@tenphi/tasty";
 
-//#region src/tokens/index.ts
-/**
-* Design tokens for the Cube UI Kit.
-*
-* This module exports all design tokens used throughout the design system.
-* All token keys use $ prefix for CSS custom properties.
-*
-* Categories:
-* - Colors: Base color palette with -color and -color-rgb variants
-* - Typography: Font presets for headings, text, paragraphs, etc.
-* - Sizes: Component size values (XS, SM, MD, LG, XL)
-* - Spacing: Space tokens using gap multipliers
-* - Shadows: Shadow definitions for elevation
-* - Layout: Common layout dimensions
-* - Base: Core design system values
-*/
+//#region src/tokens/all-tokens.ts
 /**
 * All design tokens combined into a single Styles object.
 * Keys use $ prefix for CSS custom properties.
@@ -45,7 +27,7 @@ import { generateTypographyTokens } from "@tenphi/tasty";
 * - Shadow tokens ($shadow, $item-shadow, etc.)
 * - Layout tokens ($max-content-width, $topbar-height, etc.)
 * - Typography tokens ($h1-font-size, $t3-line-height, etc.)
-* - Color tokens ($purple-color, $purple-color-rgb, etc.)
+* - Color tokens ($purple-color, $danger-color, etc.)
 */
 let tokensCache = null;
 let cachedVersion = -1;
@@ -70,4 +52,4 @@ const TOKENS = lazyStyles(getTokens);
 
 //#endregion
 export { TOKENS, getTokens };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=all-tokens.js.map

package/dist/tokens/all-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"all-tokens.js","names":[],"sources":["../../src/tokens/all-tokens.ts"],"sourcesContent":["import { generateTypographyTokens } from '@tenphi/tasty';\n\nimport { BASE_TOKENS } from './base';\nimport { getColorTokens } from './colors';\nimport { LAYOUT_TOKENS } from './layout';\nimport { lazyStyles } from './lazy-styles';\nimport { getPaletteVersion } from './palette-config';\nimport { SHADOW_TOKENS } from './shadows';\nimport { SIZE_TOKENS } from './sizes';\nimport { SPACE_TOKENS } from './spacing';\nimport { TYPOGRAPHY_PRESETS } from './typography';\n\nimport type { Styles } from '@tenphi/tasty';\n\n/**\n * All design tokens combined into a single Styles object.\n * Keys use $ prefix for CSS custom properties.\n *\n * Color tokens resolve against the current palette config (see\n * {@link getColorTokens}), and this map is memoized against that config's\n * version so `setPaletteConfig()` invalidates it. Prefer this over the lazy\n * {@link TOKENS} proxy when applying styles from React (`GlobalStyles`).\n *\n * Includes:\n * - Base tokens ($gap, $radius, etc.)\n * - Space tokens ($space-xs, $space-sm, etc.)\n * - Size tokens ($size-xs, $size-sm, etc.)\n * - Shadow tokens ($shadow, $item-shadow, etc.)\n * - Layout tokens ($max-content-width, $topbar-height, etc.)\n * - Typography tokens ($h1-font-size, $t3-line-height, etc.)\n * - Color tokens ($purple-color, $danger-color, etc.)\n */\nlet tokensCache: Styles | null = null;\nlet cachedVersion = -1;\n\nexport function getTokens(): Styles {\n  const version = getPaletteVersion();\n\n  if (!tokensCache || cachedVersion !== version) {\n    tokensCache = {\n      ...BASE_TOKENS,\n      ...SPACE_TOKENS,\n      ...SIZE_TOKENS,\n      ...SHADOW_TOKENS,\n      ...LAYOUT_TOKENS,\n      ...generateTypographyTokens(TYPOGRAPHY_PRESETS),\n      ...getColorTokens(),\n    };\n    cachedVersion = version;\n  }\n  return tokensCache;\n}\n\n/** Lazy proxy of {@link getTokens}. Prefer `getTokens()` in new code. */\nexport const TOKENS: Styles = lazyStyles(getTokens);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAI,cAA6B;AACjC,IAAI,gBAAgB;AAEpB,SAAgB,YAAoB;CAClC,MAAM,UAAU,mBAAmB;AAEnC,KAAI,CAAC,eAAe,kBAAkB,SAAS;AAC7C,gBAAc;GACZ,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG,yBAAyB,mBAAmB;GAC/C,GAAG,gBAAgB;GACpB;AACD,kBAAgB;;AAElB,QAAO;;;AAIT,MAAa,SAAiB,WAAW,UAAU"}

package/dist/tokens/base.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.167.0 | Cube Dev Team */
 //#region src/tokens/base.ts
 /**
 * Base design system tokens.
@@ -26,6 +26,7 @@ const BASE_TOKENS = {
 	"$disclosure-transition": "120ms",
 	"$tab-transition": "120ms",
 	"$fade-transition": "200ms",
+	"$tokens-applied": "1",
 	"$scrollbar-width": "1.5x",
 	"$scrollbar-outline-width": "1ow",
 	"$scrollbar-radius": "1.5r",

package/dist/tokens/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","names":[],"sources":["../../src/tokens/base.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Base design system tokens.\n * These define the fundamental units and values used throughout the system.\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const BASE_TOKENS: Styles = {\n  // Typography base\n  /** @deprecated Use preset tokens instead */\n  '$font-size': '14px',\n  /** @deprecated Use preset tokens instead */\n  '$line-height': '20px',\n\n  // Input typography\n  '$input-font-size': '14px',\n  '$input-line-height': '20px',\n  '$input-letter-spacing': '0.02em',\n\n  // Opacity & dimensions\n  /** Opacity for disabled elements */\n  '$disabled-opacity': '.4',\n  /** Base gap unit for spacing (used with `.5x`, `1x`, `2x` etc.) */\n  $gap: '8px',\n  /** Stroke width for icons */\n  '$stroke-width': 1.5,\n  /** Focus outline width */\n  '$outline-width': 'calc(1rem / 16 * 3)',\n  /** Border width for bordered elements */\n  '$border-width': '1px',\n\n  // Border radius\n  /** Base border radius (used with `1r`, `2r` etc.) */\n  $radius: '6px',\n  /** Larger radius using tasty calc: 1r + 0.5x */\n  '$large-radius': '(1r + .5x)',\n  /** Card border radius */\n  '$card-radius': '(1r + .5x)',\n  /** Sharp corner for leaf shapes */\n  '$sharp-radius': '0px',\n\n  // Misc dimensions\n  /** Minimum dialog width (responsive) */\n  '$min-dialog-size': 'min(288px, calc(100vw - (2 * var(--gap))))',\n\n  // Transitions\n  /** Default transition duration */\n  $transition: '80ms',\n  /** Transition for disclosure animations */\n  '$disclosure-transition': '120ms',\n  /** Transition for tab animations */\n  '$tab-transition': '120ms',\n  /** Transition for fade animations */\n  '$fade-transition': '200ms',\n\n  // Scrollbar tokens\n  '$scrollbar-width': '1.5x',\n  '$scrollbar-outline-width': '1ow',\n  '$scrollbar-radius': '1.5r',\n  '#scrollbar-thumb': '#text.5',\n  '#scrollbar-outline': '#clear',\n  '#scrollbar-bg': '#surface-2',\n  '#scrollbar-corner': '#clear',\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,cAAsB;CAGjC,cAAc;CAEd,gBAAgB;CAGhB,oBAAoB;CACpB,sBAAsB;CACtB,yBAAyB;CAIzB,qBAAqB;CAErB,MAAM;CAEN,iBAAiB;CAEjB,kBAAkB;CAElB,iBAAiB;CAIjB,SAAS;CAET,iBAAiB;CAEjB,gBAAgB;CAEhB,iBAAiB;CAIjB,oBAAoB;CAIpB,aAAa;CAEb,0BAA0B;CAE1B,mBAAmB;CAEnB,oBAAoB;CAGpB,oBAAoB;CACpB,4BAA4B;CAC5B,qBAAqB;CACrB,oBAAoB;CACpB,sBAAsB;CACtB,iBAAiB;CACjB,qBAAqB;CACtB"}
+{"version":3,"file":"base.js","names":[],"sources":["../../src/tokens/base.ts"],"sourcesContent":["import type { Styles } from '@tenphi/tasty';\n\n/**\n * Base design system tokens.\n * These define the fundamental units and values used throughout the system.\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const BASE_TOKENS: Styles = {\n  // Typography base\n  /** @deprecated Use preset tokens instead */\n  '$font-size': '14px',\n  /** @deprecated Use preset tokens instead */\n  '$line-height': '20px',\n\n  // Input typography\n  '$input-font-size': '14px',\n  '$input-line-height': '20px',\n  '$input-letter-spacing': '0.02em',\n\n  // Opacity & dimensions\n  /** Opacity for disabled elements */\n  '$disabled-opacity': '.4',\n  /** Base gap unit for spacing (used with `.5x`, `1x`, `2x` etc.) */\n  $gap: '8px',\n  /** Stroke width for icons */\n  '$stroke-width': 1.5,\n  /** Focus outline width */\n  '$outline-width': 'calc(1rem / 16 * 3)',\n  /** Border width for bordered elements */\n  '$border-width': '1px',\n\n  // Border radius\n  /** Base border radius (used with `1r`, `2r` etc.) */\n  $radius: '6px',\n  /** Larger radius using tasty calc: 1r + 0.5x */\n  '$large-radius': '(1r + .5x)',\n  /** Card border radius */\n  '$card-radius': '(1r + .5x)',\n  /** Sharp corner for leaf shapes */\n  '$sharp-radius': '0px',\n\n  // Misc dimensions\n  /** Minimum dialog width (responsive) */\n  '$min-dialog-size': 'min(288px, calc(100vw - (2 * var(--gap))))',\n\n  // Transitions\n  /** Default transition duration */\n  $transition: '80ms',\n  /** Transition for disclosure animations */\n  '$disclosure-transition': '120ms',\n  /** Transition for tab animations */\n  '$tab-transition': '120ms',\n  /** Transition for fade animations */\n  '$fade-transition': '200ms',\n\n  /**\n   * Marks an element as carrying the token block. Not a design value — nothing\n   * styles against it.\n   *\n   * `resolveTokenValue()` reads it to answer the one question a computed value\n   * cannot: \"are the kit's tokens in effect here?\" Tasty registers `@property`\n   * defaults with real initial values — `--gap` is `4px` off the block, not\n   * `0px` — so a token read from outside `<Root>` comes back plausible and\n   * wrong, and no amount of inspecting the value would reveal it. This is\n   * declared alongside the tokens, so it is present exactly where they are.\n   */\n  '$tokens-applied': '1',\n\n  // Scrollbar tokens\n  '$scrollbar-width': '1.5x',\n  '$scrollbar-outline-width': '1ow',\n  '$scrollbar-radius': '1.5r',\n  '#scrollbar-thumb': '#text.5',\n  '#scrollbar-outline': '#clear',\n  '#scrollbar-bg': '#surface-2',\n  '#scrollbar-corner': '#clear',\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,cAAsB;CAGjC,cAAc;CAEd,gBAAgB;CAGhB,oBAAoB;CACpB,sBAAsB;CACtB,yBAAyB;CAIzB,qBAAqB;CAErB,MAAM;CAEN,iBAAiB;CAEjB,kBAAkB;CAElB,iBAAiB;CAIjB,SAAS;CAET,iBAAiB;CAEjB,gBAAgB;CAEhB,iBAAiB;CAIjB,oBAAoB;CAIpB,aAAa;CAEb,0BAA0B;CAE1B,mBAAmB;CAEnB,oBAAoB;CAapB,mBAAmB;CAGnB,oBAAoB;CACpB,4BAA4B;CAC5B,qBAAqB;CACrB,oBAAoB;CACpB,sBAAsB;CACtB,iBAAiB;CACjB,qBAAqB;CACtB"}

package/dist/tokens/color-seed.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.167.0 | Cube Dev Team */
 import { glaze } from "@tenphi/glaze";
 
 //#region src/tokens/color-seed.ts

package/dist/tokens/color-theme.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.167.0 | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { DEFAULT_HUE, DEFAULT_SATURATION, getPaletteConfig, getPaletteVersion, usePaletteVersion } from "./palette-config.js";
 import { tintRecipe } from "./palette.js";

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.167.0 | Cube Dev Team */
 import { getPaletteVersion } from "./palette-config.js";
 import { BASE_TOKENS } from "./base.js";
 import { lazyStyles } from "./lazy-styles.js";

package/dist/tokens/index.d.ts

@@ -1,6 +1,8 @@
 
 import { DEFAULT_PALETTE_CONFIG, MAX_BASE_SATURATION, PaletteCodeSeed, PaletteConfig, PaletteNumericSeed, PaletteSeed, PaletteThemeName, ResolvedPaletteConfig, ResolvedThemeSeed, SurfaceMode, getPaletteConfig, getPaletteConfigInput, invalidatePaletteTokens, resetPaletteConfig, resolvePaletteConfig, setPaletteConfig, subscribePaletteConfig, usePaletteConfig, usePaletteVersion } from "./palette-config.js";
 import { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS, SizeKey, SizeName } from "./sizes.js";
+import { TOKENS, getTokens } from "./all-tokens.js";
+import { ResolveTokenOptions, ResolvedPreset, resolvePresetValues, resolveTokenValue, resolveTokenValues, usePresetValues, useTokenValue, useTokenValues } from "./resolve.js";
 import { PALETTE_TOKENS, RenderPaletteOptions, getCodeTheme, getPalette, getPaletteTokens, renderPaletteTokens } from "./palette.js";
 import { COLOR_TOKENS, getColorTokens, renderColorTokens } from "./colors.js";
 import { ColorSeed, colorSeed } from "./color-seed.js";
@@ -9,13 +11,4 @@ import { SPACE_TOKENS } from "./spacing.js";
 import { SHADOW_TOKENS } from "./shadows.js";
 import { LAYOUT_TOKENS } from "./layout.js";
 import { BASE_TOKENS } from "./base.js";
-import { TYPOGRAPHY_PRESETS } from "./typography.js";
-import { Styles } from "@tenphi/tasty";
-
-//#region src/tokens/index.d.ts
-declare function getTokens(): Styles;
-/** Lazy proxy of {@link getTokens}. Prefer `getTokens()` in new code. */
-declare const TOKENS: Styles;
-//#endregion
-export { TOKENS, getTokens };
-//# sourceMappingURL=index.d.ts.map
+import { TYPOGRAPHY_PRESETS } from "./typography.js";

package/dist/tokens/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.167.0 | Cube Dev Team */
 //#region src/tokens/layout.ts
 /**
 * Layout-related tokens for common UI dimensions.

package/dist/tokens/lazy-styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.167.0 | Cube Dev Team */
 //#region src/tokens/lazy-styles.ts
 /**
 * Proxy that defers to `factory()` on every property / enumeration access.

package/dist/tokens/palette-config.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.167.0 | Cube Dev Team */
 import { colorSeed } from "./color-seed.js";
 import { useSyncExternalStore } from "react";
 

package/dist/tokens/palette.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.166.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.167.0 | Cube Dev Team */
 import { SURFACE_SATURATION_SHARE, getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { apcaContrast, glaze, okhslToLinearSrgb, variantToOkhsl } from "@tenphi/glaze";

package/dist/tokens/resolve.d.ts

@@ -0,0 +1,113 @@
+
+//#region src/tokens/resolve.d.ts
+interface ResolveTokenOptions {
+  /**
+   * Element to read the tokens off. Defaults to the document `<body>`, which is
+   * where `<Root>` declares them.
+   *
+   * Pass an element when the value has to reflect a *local* override — a subtree
+   * carrying its own `tokens` prop (`renderColorTokens()`), or one under a
+   * `data-schema` / `data-contrast` attribute that differs from the document's.
+   * The element's own document and view are used, so a node inside a same-origin
+   * iframe resolves against that iframe.
+   */
+  element?: Element | null;
+  /**
+   * Returned in place of `null` when a token is unset, unresolvable, or reads
+   * back as an `@property` placeholder — including on the server, where there is
+   * no DOM to read.
+   */
+  fallback?: string;
+}
+/**
+ * Fields mirror {@link TypographyPreset}. A field the preset does not define is
+ * `null`, except `fontFamily`, which falls back to the document's `--font-sans`
+ * so the common case (`t1`–`t4`, `h1`–`h6`, which inherit the sans stack rather
+ * than naming it) still hands back a usable stack.
+ */
+type ResolvedPreset = {
+  fontFamily: string | null;
+  fontSize: string | null;
+  fontStyle: string | null;
+  fontWeight: string | null;
+  lineHeight: string | null;
+  letterSpacing: string | null;
+  textTransform: string | null;
+  boldFontWeight: string | null;
+  iconSize: string | null;
+};
+/**
+ * Read the resolved value of one design token — a color, a length, a font
+ * descriptor — as a literal string.
+ *
+ * ```ts
+ * resolveTokenValue('#purple'); // 'oklch(0.52 0.24 285)'
+ * resolveTokenValue('$space-md'); // '8px'
+ * resolveTokenValue('$t3-font-size'); // '14px'
+ * ```
+ *
+ * Returns `options.fallback ?? null` when the token is not declared on the
+ * element it was read from — see {@link ResolveTokenOptions}.
+ */
+declare function resolveTokenValue(token: string, options?: ResolveTokenOptions): string | null;
+/**
+ * {@link resolveTokenValue} for several tokens at once, through a single
+ * `getComputedStyle` call. Prefer this when building a theme object — a Stripe
+ * `Appearance`, a CodeMirror theme — which needs a dozen values at a time.
+ *
+ * ```ts
+ * const { '#surface': background, '#surface-text': color } = resolveTokenValues([
+ *   '#surface',
+ *   '#surface-text',
+ * ]);
+ * ```
+ */
+declare function resolveTokenValues<T extends string>(tokens: readonly T[], options?: ResolveTokenOptions): Record<T, string | null>;
+/**
+ * Resolve a typography preset — `'t3'`, `'h2'`, `'s3'` — to the literal font
+ * descriptors behind it, for a surface that takes a font as values rather than
+ * as a `preset` style.
+ *
+ * ```ts
+ * const { fontFamily, fontSize, lineHeight } = resolvePresetValues('t3');
+ * ```
+ *
+ * A preset legitimately leaves most of these unset — only headings carry an
+ * `iconSize`, only the `s*` family names a `fontFamily` — so unlike
+ * {@link resolveTokenValues} a miss here is expected and never warns.
+ */
+declare function resolvePresetValues(preset: string, options?: ResolveTokenOptions): ResolvedPreset;
+/**
+ * {@link resolveTokenValue} as a hook: re-renders when the palette is re-seeded
+ * or the scheme / contrast tier flips.
+ *
+ * ```tsx
+ * const accent = useTokenValue('#purple');
+ *
+ * return <Chart series={{ color: accent ?? '#000' }} />;
+ * ```
+ */
+declare function useTokenValue(token: string, options?: ResolveTokenOptions): string | null;
+/**
+ * {@link resolveTokenValues} as a hook. The returned object keeps its identity
+ * while the values are unchanged, so it is safe as a dependency of the theme
+ * object built from it — and the token list may be an inline literal.
+ *
+ * ```tsx
+ * const colors = useTokenValues(['#surface', '#surface-text', '#border']);
+ *
+ * const appearance = useMemo(() => toStripeAppearance(colors), [colors]);
+ * ```
+ */
+declare function useTokenValues<T extends string>(tokens: readonly T[], options?: ResolveTokenOptions): Record<T, string | null>;
+/**
+ * {@link resolvePresetValues} as a hook.
+ *
+ * ```tsx
+ * const { fontFamily, fontSize } = usePresetValues('s3');
+ * ```
+ */
+declare function usePresetValues(preset: string, options?: ResolveTokenOptions): ResolvedPreset;
+//#endregion
+export { ResolveTokenOptions, ResolvedPreset, resolvePresetValues, resolveTokenValue, resolveTokenValues, usePresetValues, useTokenValue, useTokenValues };
+//# sourceMappingURL=resolve.d.ts.map