@zendir/ui 0.2.21 → 0.3.1

package/dist/tokens/css-vars.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @zendir/ui — CSS variable name constants
+ *
+ * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.
+ * Regenerate with: npm run build:tokens
+ *
+ * Use these instead of writing `var('--zendir-…')` literally — typos
+ * become compile errors, refactors are safe, and renames propagate.
+ *
+ * Example:
+ *   import { CSS_VAR_FONT_PRIMARY } from '@zendir/ui/tokens/css-vars';
+ *   const style = { fontFamily: `var(${CSS_VAR_FONT_PRIMARY})` };
+ */
+export declare const CSS_VAR_ACCENT_PRIMARY: "--zendir-accent-primary";
+export declare const CSS_VAR_ACCENT_SECONDARY: "--zendir-accent-secondary";
+export declare const CSS_VAR_ACCENT_TERTIARY: "--zendir-accent-tertiary";
+export declare const CSS_VAR_ANIMATION_FAST: "--zendir-animation-fast";
+export declare const CSS_VAR_ANIMATION_NORMAL: "--zendir-animation-normal";
+export declare const CSS_VAR_ANIMATION_SLOW: "--zendir-animation-slow";
+export declare const CSS_VAR_BG_BASE: "--zendir-bg-base";
+export declare const CSS_VAR_BG_ELEVATED: "--zendir-bg-elevated";
+export declare const CSS_VAR_BG_OVERLAY: "--zendir-bg-overlay";
+export declare const CSS_VAR_BG_SURFACE: "--zendir-bg-surface";
+export declare const CSS_VAR_BORDER_DEFAULT: "--zendir-border-default";
+export declare const CSS_VAR_BORDER_FOCUS: "--zendir-border-focus";
+export declare const CSS_VAR_BORDER_MUTED: "--zendir-border-muted";
+export declare const CSS_VAR_FONT_HEADING: "--zendir-font-heading";
+export declare const CSS_VAR_FONT_MONO: "--zendir-font-mono";
+export declare const CSS_VAR_FONT_PRIMARY: "--zendir-font-primary";
+export declare const CSS_VAR_FONT_SIZE_BASE: "--zendir-font-size-base";
+export declare const CSS_VAR_FONT_SIZE_DISPLAY: "--zendir-font-size-display";
+export declare const CSS_VAR_FONT_SIZE_LG: "--zendir-font-size-lg";
+export declare const CSS_VAR_FONT_SIZE_MD: "--zendir-font-size-md";
+export declare const CSS_VAR_FONT_SIZE_MICRO: "--zendir-font-size-micro";
+export declare const CSS_VAR_FONT_SIZE_SM: "--zendir-font-size-sm";
+export declare const CSS_VAR_FONT_SIZE_XL: "--zendir-font-size-xl";
+export declare const CSS_VAR_FONT_SIZE_XS: "--zendir-font-size-xs";
+export declare const CSS_VAR_FONT_SIZE_XXL: "--zendir-font-size-xxl";
+export declare const CSS_VAR_FONT_SIZE_XXS: "--zendir-font-size-xxs";
+export declare const CSS_VAR_FONT_SIZE_XXXL: "--zendir-font-size-xxxl";
+export declare const CSS_VAR_FONT_WEIGHT_BOLD: "--zendir-font-weight-bold";
+export declare const CSS_VAR_FONT_WEIGHT_LIGHT: "--zendir-font-weight-light";
+export declare const CSS_VAR_FONT_WEIGHT_MEDIUM: "--zendir-font-weight-medium";
+export declare const CSS_VAR_FONT_WEIGHT_NORMAL: "--zendir-font-weight-normal";
+export declare const CSS_VAR_LINE_HEIGHT_NORMAL: "--zendir-line-height-normal";
+export declare const CSS_VAR_LINE_HEIGHT_RELAXED: "--zendir-line-height-relaxed";
+export declare const CSS_VAR_LINE_HEIGHT_TIGHT: "--zendir-line-height-tight";
+export declare const CSS_VAR_RADIUS_FULL: "--zendir-radius-full";
+export declare const CSS_VAR_RADIUS_LG: "--zendir-radius-lg";
+export declare const CSS_VAR_RADIUS_MD: "--zendir-radius-md";
+export declare const CSS_VAR_RADIUS_NONE: "--zendir-radius-none";
+export declare const CSS_VAR_RADIUS_SM: "--zendir-radius-sm";
+export declare const CSS_VAR_RADIUS_XL: "--zendir-radius-xl";
+export declare const CSS_VAR_SHADOW_GLOW: "--zendir-shadow-glow";
+export declare const CSS_VAR_SHADOW_LG: "--zendir-shadow-lg";
+export declare const CSS_VAR_SHADOW_MD: "--zendir-shadow-md";
+export declare const CSS_VAR_SHADOW_NONE: "--zendir-shadow-none";
+export declare const CSS_VAR_SHADOW_SM: "--zendir-shadow-sm";
+export declare const CSS_VAR_SHADOW_XL: "--zendir-shadow-xl";
+export declare const CSS_VAR_SPACING_LG: "--zendir-spacing-lg";
+export declare const CSS_VAR_SPACING_MD: "--zendir-spacing-md";
+export declare const CSS_VAR_SPACING_SM: "--zendir-spacing-sm";
+export declare const CSS_VAR_SPACING_XL: "--zendir-spacing-xl";
+export declare const CSS_VAR_SPACING_XS: "--zendir-spacing-xs";
+export declare const CSS_VAR_SPACING_XXL: "--zendir-spacing-xxl";
+export declare const CSS_VAR_STATUS_CAUTION: "--zendir-status-caution";
+export declare const CSS_VAR_STATUS_CAUTION_BORDER: "--zendir-status-caution-border";
+export declare const CSS_VAR_STATUS_CAUTION_LIGHT: "--zendir-status-caution-light";
+export declare const CSS_VAR_STATUS_CRITICAL: "--zendir-status-critical";
+export declare const CSS_VAR_STATUS_CRITICAL_BORDER: "--zendir-status-critical-border";
+export declare const CSS_VAR_STATUS_CRITICAL_LIGHT: "--zendir-status-critical-light";
+export declare const CSS_VAR_STATUS_NORMAL: "--zendir-status-normal";
+export declare const CSS_VAR_STATUS_NORMAL_BORDER: "--zendir-status-normal-border";
+export declare const CSS_VAR_STATUS_NORMAL_LIGHT: "--zendir-status-normal-light";
+export declare const CSS_VAR_STATUS_OFF: "--zendir-status-off";
+export declare const CSS_VAR_STATUS_OFF_BORDER: "--zendir-status-off-border";
+export declare const CSS_VAR_STATUS_OFF_LIGHT: "--zendir-status-off-light";
+export declare const CSS_VAR_STATUS_SERIOUS: "--zendir-status-serious";
+export declare const CSS_VAR_STATUS_SERIOUS_BORDER: "--zendir-status-serious-border";
+export declare const CSS_VAR_STATUS_SERIOUS_LIGHT: "--zendir-status-serious-light";
+export declare const CSS_VAR_STATUS_STANDBY: "--zendir-status-standby";
+export declare const CSS_VAR_STATUS_STANDBY_BORDER: "--zendir-status-standby-border";
+export declare const CSS_VAR_STATUS_STANDBY_LIGHT: "--zendir-status-standby-light";
+export declare const CSS_VAR_TEXT_MUTED: "--zendir-text-muted";
+export declare const CSS_VAR_TEXT_PRIMARY: "--zendir-text-primary";
+export declare const CSS_VAR_TEXT_SECONDARY: "--zendir-text-secondary";
+export declare const CSS_VAR_TEXT_TERTIARY: "--zendir-text-tertiary";
+/** Union of every Zendir CSS variable name. Useful for `as ZendirCSSVar`. */
+export type ZendirCSSVar = '--zendir-accent-primary' | '--zendir-accent-secondary' | '--zendir-accent-tertiary' | '--zendir-animation-fast' | '--zendir-animation-normal' | '--zendir-animation-slow' | '--zendir-bg-base' | '--zendir-bg-elevated' | '--zendir-bg-overlay' | '--zendir-bg-surface' | '--zendir-border-default' | '--zendir-border-focus' | '--zendir-border-muted' | '--zendir-font-heading' | '--zendir-font-mono' | '--zendir-font-primary' | '--zendir-font-size-base' | '--zendir-font-size-display' | '--zendir-font-size-lg' | '--zendir-font-size-md' | '--zendir-font-size-micro' | '--zendir-font-size-sm' | '--zendir-font-size-xl' | '--zendir-font-size-xs' | '--zendir-font-size-xxl' | '--zendir-font-size-xxs' | '--zendir-font-size-xxxl' | '--zendir-font-weight-bold' | '--zendir-font-weight-light' | '--zendir-font-weight-medium' | '--zendir-font-weight-normal' | '--zendir-line-height-normal' | '--zendir-line-height-relaxed' | '--zendir-line-height-tight' | '--zendir-radius-full' | '--zendir-radius-lg' | '--zendir-radius-md' | '--zendir-radius-none' | '--zendir-radius-sm' | '--zendir-radius-xl' | '--zendir-shadow-glow' | '--zendir-shadow-lg' | '--zendir-shadow-md' | '--zendir-shadow-none' | '--zendir-shadow-sm' | '--zendir-shadow-xl' | '--zendir-spacing-lg' | '--zendir-spacing-md' | '--zendir-spacing-sm' | '--zendir-spacing-xl' | '--zendir-spacing-xs' | '--zendir-spacing-xxl' | '--zendir-status-caution' | '--zendir-status-caution-border' | '--zendir-status-caution-light' | '--zendir-status-critical' | '--zendir-status-critical-border' | '--zendir-status-critical-light' | '--zendir-status-normal' | '--zendir-status-normal-border' | '--zendir-status-normal-light' | '--zendir-status-off' | '--zendir-status-off-border' | '--zendir-status-off-light' | '--zendir-status-serious' | '--zendir-status-serious-border' | '--zendir-status-serious-light' | '--zendir-status-standby' | '--zendir-status-standby-border' | '--zendir-status-standby-light' | '--zendir-text-muted' | '--zendir-text-primary' | '--zendir-text-secondary' | '--zendir-text-tertiary';
+/** Array of every Zendir CSS variable name (alphabetised). */
+export declare const ALL_ZENDIR_CSS_VARS: readonly ZendirCSSVar[];

package/dist/tokens/css-vars.js

@@ -0,0 +1,228 @@
+const CSS_VAR_ACCENT_PRIMARY = "--zendir-accent-primary";
+const CSS_VAR_ACCENT_SECONDARY = "--zendir-accent-secondary";
+const CSS_VAR_ACCENT_TERTIARY = "--zendir-accent-tertiary";
+const CSS_VAR_ANIMATION_FAST = "--zendir-animation-fast";
+const CSS_VAR_ANIMATION_NORMAL = "--zendir-animation-normal";
+const CSS_VAR_ANIMATION_SLOW = "--zendir-animation-slow";
+const CSS_VAR_BG_BASE = "--zendir-bg-base";
+const CSS_VAR_BG_ELEVATED = "--zendir-bg-elevated";
+const CSS_VAR_BG_OVERLAY = "--zendir-bg-overlay";
+const CSS_VAR_BG_SURFACE = "--zendir-bg-surface";
+const CSS_VAR_BORDER_DEFAULT = "--zendir-border-default";
+const CSS_VAR_BORDER_FOCUS = "--zendir-border-focus";
+const CSS_VAR_BORDER_MUTED = "--zendir-border-muted";
+const CSS_VAR_FONT_HEADING = "--zendir-font-heading";
+const CSS_VAR_FONT_MONO = "--zendir-font-mono";
+const CSS_VAR_FONT_PRIMARY = "--zendir-font-primary";
+const CSS_VAR_FONT_SIZE_BASE = "--zendir-font-size-base";
+const CSS_VAR_FONT_SIZE_DISPLAY = "--zendir-font-size-display";
+const CSS_VAR_FONT_SIZE_LG = "--zendir-font-size-lg";
+const CSS_VAR_FONT_SIZE_MD = "--zendir-font-size-md";
+const CSS_VAR_FONT_SIZE_MICRO = "--zendir-font-size-micro";
+const CSS_VAR_FONT_SIZE_SM = "--zendir-font-size-sm";
+const CSS_VAR_FONT_SIZE_XL = "--zendir-font-size-xl";
+const CSS_VAR_FONT_SIZE_XS = "--zendir-font-size-xs";
+const CSS_VAR_FONT_SIZE_XXL = "--zendir-font-size-xxl";
+const CSS_VAR_FONT_SIZE_XXS = "--zendir-font-size-xxs";
+const CSS_VAR_FONT_SIZE_XXXL = "--zendir-font-size-xxxl";
+const CSS_VAR_FONT_WEIGHT_BOLD = "--zendir-font-weight-bold";
+const CSS_VAR_FONT_WEIGHT_LIGHT = "--zendir-font-weight-light";
+const CSS_VAR_FONT_WEIGHT_MEDIUM = "--zendir-font-weight-medium";
+const CSS_VAR_FONT_WEIGHT_NORMAL = "--zendir-font-weight-normal";
+const CSS_VAR_LINE_HEIGHT_NORMAL = "--zendir-line-height-normal";
+const CSS_VAR_LINE_HEIGHT_RELAXED = "--zendir-line-height-relaxed";
+const CSS_VAR_LINE_HEIGHT_TIGHT = "--zendir-line-height-tight";
+const CSS_VAR_RADIUS_FULL = "--zendir-radius-full";
+const CSS_VAR_RADIUS_LG = "--zendir-radius-lg";
+const CSS_VAR_RADIUS_MD = "--zendir-radius-md";
+const CSS_VAR_RADIUS_NONE = "--zendir-radius-none";
+const CSS_VAR_RADIUS_SM = "--zendir-radius-sm";
+const CSS_VAR_RADIUS_XL = "--zendir-radius-xl";
+const CSS_VAR_SHADOW_GLOW = "--zendir-shadow-glow";
+const CSS_VAR_SHADOW_LG = "--zendir-shadow-lg";
+const CSS_VAR_SHADOW_MD = "--zendir-shadow-md";
+const CSS_VAR_SHADOW_NONE = "--zendir-shadow-none";
+const CSS_VAR_SHADOW_SM = "--zendir-shadow-sm";
+const CSS_VAR_SHADOW_XL = "--zendir-shadow-xl";
+const CSS_VAR_SPACING_LG = "--zendir-spacing-lg";
+const CSS_VAR_SPACING_MD = "--zendir-spacing-md";
+const CSS_VAR_SPACING_SM = "--zendir-spacing-sm";
+const CSS_VAR_SPACING_XL = "--zendir-spacing-xl";
+const CSS_VAR_SPACING_XS = "--zendir-spacing-xs";
+const CSS_VAR_SPACING_XXL = "--zendir-spacing-xxl";
+const CSS_VAR_STATUS_CAUTION = "--zendir-status-caution";
+const CSS_VAR_STATUS_CAUTION_BORDER = "--zendir-status-caution-border";
+const CSS_VAR_STATUS_CAUTION_LIGHT = "--zendir-status-caution-light";
+const CSS_VAR_STATUS_CRITICAL = "--zendir-status-critical";
+const CSS_VAR_STATUS_CRITICAL_BORDER = "--zendir-status-critical-border";
+const CSS_VAR_STATUS_CRITICAL_LIGHT = "--zendir-status-critical-light";
+const CSS_VAR_STATUS_NORMAL = "--zendir-status-normal";
+const CSS_VAR_STATUS_NORMAL_BORDER = "--zendir-status-normal-border";
+const CSS_VAR_STATUS_NORMAL_LIGHT = "--zendir-status-normal-light";
+const CSS_VAR_STATUS_OFF = "--zendir-status-off";
+const CSS_VAR_STATUS_OFF_BORDER = "--zendir-status-off-border";
+const CSS_VAR_STATUS_OFF_LIGHT = "--zendir-status-off-light";
+const CSS_VAR_STATUS_SERIOUS = "--zendir-status-serious";
+const CSS_VAR_STATUS_SERIOUS_BORDER = "--zendir-status-serious-border";
+const CSS_VAR_STATUS_SERIOUS_LIGHT = "--zendir-status-serious-light";
+const CSS_VAR_STATUS_STANDBY = "--zendir-status-standby";
+const CSS_VAR_STATUS_STANDBY_BORDER = "--zendir-status-standby-border";
+const CSS_VAR_STATUS_STANDBY_LIGHT = "--zendir-status-standby-light";
+const CSS_VAR_TEXT_MUTED = "--zendir-text-muted";
+const CSS_VAR_TEXT_PRIMARY = "--zendir-text-primary";
+const CSS_VAR_TEXT_SECONDARY = "--zendir-text-secondary";
+const CSS_VAR_TEXT_TERTIARY = "--zendir-text-tertiary";
+const ALL_ZENDIR_CSS_VARS = [
+  "--zendir-accent-primary",
+  "--zendir-accent-secondary",
+  "--zendir-accent-tertiary",
+  "--zendir-animation-fast",
+  "--zendir-animation-normal",
+  "--zendir-animation-slow",
+  "--zendir-bg-base",
+  "--zendir-bg-elevated",
+  "--zendir-bg-overlay",
+  "--zendir-bg-surface",
+  "--zendir-border-default",
+  "--zendir-border-focus",
+  "--zendir-border-muted",
+  "--zendir-font-heading",
+  "--zendir-font-mono",
+  "--zendir-font-primary",
+  "--zendir-font-size-base",
+  "--zendir-font-size-display",
+  "--zendir-font-size-lg",
+  "--zendir-font-size-md",
+  "--zendir-font-size-micro",
+  "--zendir-font-size-sm",
+  "--zendir-font-size-xl",
+  "--zendir-font-size-xs",
+  "--zendir-font-size-xxl",
+  "--zendir-font-size-xxs",
+  "--zendir-font-size-xxxl",
+  "--zendir-font-weight-bold",
+  "--zendir-font-weight-light",
+  "--zendir-font-weight-medium",
+  "--zendir-font-weight-normal",
+  "--zendir-line-height-normal",
+  "--zendir-line-height-relaxed",
+  "--zendir-line-height-tight",
+  "--zendir-radius-full",
+  "--zendir-radius-lg",
+  "--zendir-radius-md",
+  "--zendir-radius-none",
+  "--zendir-radius-sm",
+  "--zendir-radius-xl",
+  "--zendir-shadow-glow",
+  "--zendir-shadow-lg",
+  "--zendir-shadow-md",
+  "--zendir-shadow-none",
+  "--zendir-shadow-sm",
+  "--zendir-shadow-xl",
+  "--zendir-spacing-lg",
+  "--zendir-spacing-md",
+  "--zendir-spacing-sm",
+  "--zendir-spacing-xl",
+  "--zendir-spacing-xs",
+  "--zendir-spacing-xxl",
+  "--zendir-status-caution",
+  "--zendir-status-caution-border",
+  "--zendir-status-caution-light",
+  "--zendir-status-critical",
+  "--zendir-status-critical-border",
+  "--zendir-status-critical-light",
+  "--zendir-status-normal",
+  "--zendir-status-normal-border",
+  "--zendir-status-normal-light",
+  "--zendir-status-off",
+  "--zendir-status-off-border",
+  "--zendir-status-off-light",
+  "--zendir-status-serious",
+  "--zendir-status-serious-border",
+  "--zendir-status-serious-light",
+  "--zendir-status-standby",
+  "--zendir-status-standby-border",
+  "--zendir-status-standby-light",
+  "--zendir-text-muted",
+  "--zendir-text-primary",
+  "--zendir-text-secondary",
+  "--zendir-text-tertiary"
+];
+export {
+  ALL_ZENDIR_CSS_VARS,
+  CSS_VAR_ACCENT_PRIMARY,
+  CSS_VAR_ACCENT_SECONDARY,
+  CSS_VAR_ACCENT_TERTIARY,
+  CSS_VAR_ANIMATION_FAST,
+  CSS_VAR_ANIMATION_NORMAL,
+  CSS_VAR_ANIMATION_SLOW,
+  CSS_VAR_BG_BASE,
+  CSS_VAR_BG_ELEVATED,
+  CSS_VAR_BG_OVERLAY,
+  CSS_VAR_BG_SURFACE,
+  CSS_VAR_BORDER_DEFAULT,
+  CSS_VAR_BORDER_FOCUS,
+  CSS_VAR_BORDER_MUTED,
+  CSS_VAR_FONT_HEADING,
+  CSS_VAR_FONT_MONO,
+  CSS_VAR_FONT_PRIMARY,
+  CSS_VAR_FONT_SIZE_BASE,
+  CSS_VAR_FONT_SIZE_DISPLAY,
+  CSS_VAR_FONT_SIZE_LG,
+  CSS_VAR_FONT_SIZE_MD,
+  CSS_VAR_FONT_SIZE_MICRO,
+  CSS_VAR_FONT_SIZE_SM,
+  CSS_VAR_FONT_SIZE_XL,
+  CSS_VAR_FONT_SIZE_XS,
+  CSS_VAR_FONT_SIZE_XXL,
+  CSS_VAR_FONT_SIZE_XXS,
+  CSS_VAR_FONT_SIZE_XXXL,
+  CSS_VAR_FONT_WEIGHT_BOLD,
+  CSS_VAR_FONT_WEIGHT_LIGHT,
+  CSS_VAR_FONT_WEIGHT_MEDIUM,
+  CSS_VAR_FONT_WEIGHT_NORMAL,
+  CSS_VAR_LINE_HEIGHT_NORMAL,
+  CSS_VAR_LINE_HEIGHT_RELAXED,
+  CSS_VAR_LINE_HEIGHT_TIGHT,
+  CSS_VAR_RADIUS_FULL,
+  CSS_VAR_RADIUS_LG,
+  CSS_VAR_RADIUS_MD,
+  CSS_VAR_RADIUS_NONE,
+  CSS_VAR_RADIUS_SM,
+  CSS_VAR_RADIUS_XL,
+  CSS_VAR_SHADOW_GLOW,
+  CSS_VAR_SHADOW_LG,
+  CSS_VAR_SHADOW_MD,
+  CSS_VAR_SHADOW_NONE,
+  CSS_VAR_SHADOW_SM,
+  CSS_VAR_SHADOW_XL,
+  CSS_VAR_SPACING_LG,
+  CSS_VAR_SPACING_MD,
+  CSS_VAR_SPACING_SM,
+  CSS_VAR_SPACING_XL,
+  CSS_VAR_SPACING_XS,
+  CSS_VAR_SPACING_XXL,
+  CSS_VAR_STATUS_CAUTION,
+  CSS_VAR_STATUS_CAUTION_BORDER,
+  CSS_VAR_STATUS_CAUTION_LIGHT,
+  CSS_VAR_STATUS_CRITICAL,
+  CSS_VAR_STATUS_CRITICAL_BORDER,
+  CSS_VAR_STATUS_CRITICAL_LIGHT,
+  CSS_VAR_STATUS_NORMAL,
+  CSS_VAR_STATUS_NORMAL_BORDER,
+  CSS_VAR_STATUS_NORMAL_LIGHT,
+  CSS_VAR_STATUS_OFF,
+  CSS_VAR_STATUS_OFF_BORDER,
+  CSS_VAR_STATUS_OFF_LIGHT,
+  CSS_VAR_STATUS_SERIOUS,
+  CSS_VAR_STATUS_SERIOUS_BORDER,
+  CSS_VAR_STATUS_SERIOUS_LIGHT,
+  CSS_VAR_STATUS_STANDBY,
+  CSS_VAR_STATUS_STANDBY_BORDER,
+  CSS_VAR_STATUS_STANDBY_LIGHT,
+  CSS_VAR_TEXT_MUTED,
+  CSS_VAR_TEXT_PRIMARY,
+  CSS_VAR_TEXT_SECONDARY,
+  CSS_VAR_TEXT_TERTIARY
+};
+//# sourceMappingURL=css-vars.js.map

package/dist/tokens/css-vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-vars.js","sources":["../../src/tokens/css-vars.ts"],"sourcesContent":["/**\n * @zendir/ui — CSS variable name constants\n *\n * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.\n * Regenerate with: npm run build:tokens\n *\n * Use these instead of writing `var('--zendir-…')` literally — typos\n * become compile errors, refactors are safe, and renames propagate.\n *\n * Example:\n *   import { CSS_VAR_FONT_PRIMARY } from '@zendir/ui/tokens/css-vars';\n *   const style = { fontFamily: `var(${CSS_VAR_FONT_PRIMARY})` };\n */\n\n/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n\nexport const CSS_VAR_ACCENT_PRIMARY = '--zendir-accent-primary' as const;\nexport const CSS_VAR_ACCENT_SECONDARY = '--zendir-accent-secondary' as const;\nexport const CSS_VAR_ACCENT_TERTIARY = '--zendir-accent-tertiary' as const;\nexport const CSS_VAR_ANIMATION_FAST = '--zendir-animation-fast' as const;\nexport const CSS_VAR_ANIMATION_NORMAL = '--zendir-animation-normal' as const;\nexport const CSS_VAR_ANIMATION_SLOW = '--zendir-animation-slow' as const;\nexport const CSS_VAR_BG_BASE = '--zendir-bg-base' as const;\nexport const CSS_VAR_BG_ELEVATED = '--zendir-bg-elevated' as const;\nexport const CSS_VAR_BG_OVERLAY = '--zendir-bg-overlay' as const;\nexport const CSS_VAR_BG_SURFACE = '--zendir-bg-surface' as const;\nexport const CSS_VAR_BORDER_DEFAULT = '--zendir-border-default' as const;\nexport const CSS_VAR_BORDER_FOCUS = '--zendir-border-focus' as const;\nexport const CSS_VAR_BORDER_MUTED = '--zendir-border-muted' as const;\nexport const CSS_VAR_FONT_HEADING = '--zendir-font-heading' as const;\nexport const CSS_VAR_FONT_MONO = '--zendir-font-mono' as const;\nexport const CSS_VAR_FONT_PRIMARY = '--zendir-font-primary' as const;\nexport const CSS_VAR_FONT_SIZE_BASE = '--zendir-font-size-base' as const;\nexport const CSS_VAR_FONT_SIZE_DISPLAY = '--zendir-font-size-display' as const;\nexport const CSS_VAR_FONT_SIZE_LG = '--zendir-font-size-lg' as const;\nexport const CSS_VAR_FONT_SIZE_MD = '--zendir-font-size-md' as const;\nexport const CSS_VAR_FONT_SIZE_MICRO = '--zendir-font-size-micro' as const;\nexport const CSS_VAR_FONT_SIZE_SM = '--zendir-font-size-sm' as const;\nexport const CSS_VAR_FONT_SIZE_XL = '--zendir-font-size-xl' as const;\nexport const CSS_VAR_FONT_SIZE_XS = '--zendir-font-size-xs' as const;\nexport const CSS_VAR_FONT_SIZE_XXL = '--zendir-font-size-xxl' as const;\nexport const CSS_VAR_FONT_SIZE_XXS = '--zendir-font-size-xxs' as const;\nexport const CSS_VAR_FONT_SIZE_XXXL = '--zendir-font-size-xxxl' as const;\nexport const CSS_VAR_FONT_WEIGHT_BOLD = '--zendir-font-weight-bold' as const;\nexport const CSS_VAR_FONT_WEIGHT_LIGHT = '--zendir-font-weight-light' as const;\nexport const CSS_VAR_FONT_WEIGHT_MEDIUM = '--zendir-font-weight-medium' as const;\nexport const CSS_VAR_FONT_WEIGHT_NORMAL = '--zendir-font-weight-normal' as const;\nexport const CSS_VAR_LINE_HEIGHT_NORMAL = '--zendir-line-height-normal' as const;\nexport const CSS_VAR_LINE_HEIGHT_RELAXED = '--zendir-line-height-relaxed' as const;\nexport const CSS_VAR_LINE_HEIGHT_TIGHT = '--zendir-line-height-tight' as const;\nexport const CSS_VAR_RADIUS_FULL = '--zendir-radius-full' as const;\nexport const CSS_VAR_RADIUS_LG = '--zendir-radius-lg' as const;\nexport const CSS_VAR_RADIUS_MD = '--zendir-radius-md' as const;\nexport const CSS_VAR_RADIUS_NONE = '--zendir-radius-none' as const;\nexport const CSS_VAR_RADIUS_SM = '--zendir-radius-sm' as const;\nexport const CSS_VAR_RADIUS_XL = '--zendir-radius-xl' as const;\nexport const CSS_VAR_SHADOW_GLOW = '--zendir-shadow-glow' as const;\nexport const CSS_VAR_SHADOW_LG = '--zendir-shadow-lg' as const;\nexport const CSS_VAR_SHADOW_MD = '--zendir-shadow-md' as const;\nexport const CSS_VAR_SHADOW_NONE = '--zendir-shadow-none' as const;\nexport const CSS_VAR_SHADOW_SM = '--zendir-shadow-sm' as const;\nexport const CSS_VAR_SHADOW_XL = '--zendir-shadow-xl' as const;\nexport const CSS_VAR_SPACING_LG = '--zendir-spacing-lg' as const;\nexport const CSS_VAR_SPACING_MD = '--zendir-spacing-md' as const;\nexport const CSS_VAR_SPACING_SM = '--zendir-spacing-sm' as const;\nexport const CSS_VAR_SPACING_XL = '--zendir-spacing-xl' as const;\nexport const CSS_VAR_SPACING_XS = '--zendir-spacing-xs' as const;\nexport const CSS_VAR_SPACING_XXL = '--zendir-spacing-xxl' as const;\nexport const CSS_VAR_STATUS_CAUTION = '--zendir-status-caution' as const;\nexport const CSS_VAR_STATUS_CAUTION_BORDER = '--zendir-status-caution-border' as const;\nexport const CSS_VAR_STATUS_CAUTION_LIGHT = '--zendir-status-caution-light' as const;\nexport const CSS_VAR_STATUS_CRITICAL = '--zendir-status-critical' as const;\nexport const CSS_VAR_STATUS_CRITICAL_BORDER = '--zendir-status-critical-border' as const;\nexport const CSS_VAR_STATUS_CRITICAL_LIGHT = '--zendir-status-critical-light' as const;\nexport const CSS_VAR_STATUS_NORMAL = '--zendir-status-normal' as const;\nexport const CSS_VAR_STATUS_NORMAL_BORDER = '--zendir-status-normal-border' as const;\nexport const CSS_VAR_STATUS_NORMAL_LIGHT = '--zendir-status-normal-light' as const;\nexport const CSS_VAR_STATUS_OFF = '--zendir-status-off' as const;\nexport const CSS_VAR_STATUS_OFF_BORDER = '--zendir-status-off-border' as const;\nexport const CSS_VAR_STATUS_OFF_LIGHT = '--zendir-status-off-light' as const;\nexport const CSS_VAR_STATUS_SERIOUS = '--zendir-status-serious' as const;\nexport const CSS_VAR_STATUS_SERIOUS_BORDER = '--zendir-status-serious-border' as const;\nexport const CSS_VAR_STATUS_SERIOUS_LIGHT = '--zendir-status-serious-light' as const;\nexport const CSS_VAR_STATUS_STANDBY = '--zendir-status-standby' as const;\nexport const CSS_VAR_STATUS_STANDBY_BORDER = '--zendir-status-standby-border' as const;\nexport const CSS_VAR_STATUS_STANDBY_LIGHT = '--zendir-status-standby-light' as const;\nexport const CSS_VAR_TEXT_MUTED = '--zendir-text-muted' as const;\nexport const CSS_VAR_TEXT_PRIMARY = '--zendir-text-primary' as const;\nexport const CSS_VAR_TEXT_SECONDARY = '--zendir-text-secondary' as const;\nexport const CSS_VAR_TEXT_TERTIARY = '--zendir-text-tertiary' as const;\n\n/** Union of every Zendir CSS variable name. Useful for `as ZendirCSSVar`. */\nexport type ZendirCSSVar =\n  | '--zendir-accent-primary'\n  | '--zendir-accent-secondary'\n  | '--zendir-accent-tertiary'\n  | '--zendir-animation-fast'\n  | '--zendir-animation-normal'\n  | '--zendir-animation-slow'\n  | '--zendir-bg-base'\n  | '--zendir-bg-elevated'\n  | '--zendir-bg-overlay'\n  | '--zendir-bg-surface'\n  | '--zendir-border-default'\n  | '--zendir-border-focus'\n  | '--zendir-border-muted'\n  | '--zendir-font-heading'\n  | '--zendir-font-mono'\n  | '--zendir-font-primary'\n  | '--zendir-font-size-base'\n  | '--zendir-font-size-display'\n  | '--zendir-font-size-lg'\n  | '--zendir-font-size-md'\n  | '--zendir-font-size-micro'\n  | '--zendir-font-size-sm'\n  | '--zendir-font-size-xl'\n  | '--zendir-font-size-xs'\n  | '--zendir-font-size-xxl'\n  | '--zendir-font-size-xxs'\n  | '--zendir-font-size-xxxl'\n  | '--zendir-font-weight-bold'\n  | '--zendir-font-weight-light'\n  | '--zendir-font-weight-medium'\n  | '--zendir-font-weight-normal'\n  | '--zendir-line-height-normal'\n  | '--zendir-line-height-relaxed'\n  | '--zendir-line-height-tight'\n  | '--zendir-radius-full'\n  | '--zendir-radius-lg'\n  | '--zendir-radius-md'\n  | '--zendir-radius-none'\n  | '--zendir-radius-sm'\n  | '--zendir-radius-xl'\n  | '--zendir-shadow-glow'\n  | '--zendir-shadow-lg'\n  | '--zendir-shadow-md'\n  | '--zendir-shadow-none'\n  | '--zendir-shadow-sm'\n  | '--zendir-shadow-xl'\n  | '--zendir-spacing-lg'\n  | '--zendir-spacing-md'\n  | '--zendir-spacing-sm'\n  | '--zendir-spacing-xl'\n  | '--zendir-spacing-xs'\n  | '--zendir-spacing-xxl'\n  | '--zendir-status-caution'\n  | '--zendir-status-caution-border'\n  | '--zendir-status-caution-light'\n  | '--zendir-status-critical'\n  | '--zendir-status-critical-border'\n  | '--zendir-status-critical-light'\n  | '--zendir-status-normal'\n  | '--zendir-status-normal-border'\n  | '--zendir-status-normal-light'\n  | '--zendir-status-off'\n  | '--zendir-status-off-border'\n  | '--zendir-status-off-light'\n  | '--zendir-status-serious'\n  | '--zendir-status-serious-border'\n  | '--zendir-status-serious-light'\n  | '--zendir-status-standby'\n  | '--zendir-status-standby-border'\n  | '--zendir-status-standby-light'\n  | '--zendir-text-muted'\n  | '--zendir-text-primary'\n  | '--zendir-text-secondary'\n  | '--zendir-text-tertiary';\n\n/** Array of every Zendir CSS variable name (alphabetised). */\nexport const ALL_ZENDIR_CSS_VARS: readonly ZendirCSSVar[] = [\n  '--zendir-accent-primary',\n  '--zendir-accent-secondary',\n  '--zendir-accent-tertiary',\n  '--zendir-animation-fast',\n  '--zendir-animation-normal',\n  '--zendir-animation-slow',\n  '--zendir-bg-base',\n  '--zendir-bg-elevated',\n  '--zendir-bg-overlay',\n  '--zendir-bg-surface',\n  '--zendir-border-default',\n  '--zendir-border-focus',\n  '--zendir-border-muted',\n  '--zendir-font-heading',\n  '--zendir-font-mono',\n  '--zendir-font-primary',\n  '--zendir-font-size-base',\n  '--zendir-font-size-display',\n  '--zendir-font-size-lg',\n  '--zendir-font-size-md',\n  '--zendir-font-size-micro',\n  '--zendir-font-size-sm',\n  '--zendir-font-size-xl',\n  '--zendir-font-size-xs',\n  '--zendir-font-size-xxl',\n  '--zendir-font-size-xxs',\n  '--zendir-font-size-xxxl',\n  '--zendir-font-weight-bold',\n  '--zendir-font-weight-light',\n  '--zendir-font-weight-medium',\n  '--zendir-font-weight-normal',\n  '--zendir-line-height-normal',\n  '--zendir-line-height-relaxed',\n  '--zendir-line-height-tight',\n  '--zendir-radius-full',\n  '--zendir-radius-lg',\n  '--zendir-radius-md',\n  '--zendir-radius-none',\n  '--zendir-radius-sm',\n  '--zendir-radius-xl',\n  '--zendir-shadow-glow',\n  '--zendir-shadow-lg',\n  '--zendir-shadow-md',\n  '--zendir-shadow-none',\n  '--zendir-shadow-sm',\n  '--zendir-shadow-xl',\n  '--zendir-spacing-lg',\n  '--zendir-spacing-md',\n  '--zendir-spacing-sm',\n  '--zendir-spacing-xl',\n  '--zendir-spacing-xs',\n  '--zendir-spacing-xxl',\n  '--zendir-status-caution',\n  '--zendir-status-caution-border',\n  '--zendir-status-caution-light',\n  '--zendir-status-critical',\n  '--zendir-status-critical-border',\n  '--zendir-status-critical-light',\n  '--zendir-status-normal',\n  '--zendir-status-normal-border',\n  '--zendir-status-normal-light',\n  '--zendir-status-off',\n  '--zendir-status-off-border',\n  '--zendir-status-off-light',\n  '--zendir-status-serious',\n  '--zendir-status-serious-border',\n  '--zendir-status-serious-light',\n  '--zendir-status-standby',\n  '--zendir-status-standby-border',\n  '--zendir-status-standby-light',\n  '--zendir-text-muted',\n  '--zendir-text-primary',\n  '--zendir-text-secondary',\n  '--zendir-text-tertiary',\n] as const;\n"],"names":[],"mappings":"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"}

package/dist/tokens/index.d.ts

@@ -76,19 +76,29 @@ export declare const colors: {
     };
 };
 export declare const spacing: {
+    readonly xxs: "2px";
     readonly xs: "4px";
     readonly sm: "8px";
+    readonly smd: "12px";
     readonly md: "16px";
+    readonly mdl: "20px";
     readonly lg: "24px";
     readonly xl: "32px";
     readonly xxl: "48px";
 };
 export declare const borderRadius: {
     readonly none: "0";
+    readonly xs: "1px";
     readonly sm: "2px";
     readonly md: "4px";
     readonly lg: "8px";
-    readonly xl: "16px";
+    /**
+     * 12px. Sized for surfaces (Container, Card, SidePanel). Matches the
+     * value already in use across zendir-ui components and the operator's
+     * LandingPage. Was 16px in earlier docs — corrected here so the JS
+     * tokens and the auto-generated CSS variables agree.
+     */
+    readonly xl: "12px";
     readonly full: "9999px";
 };
 /**
@@ -107,17 +117,26 @@ export declare const typography: {
         /** Monospace font: Roboto Mono for data/code */
         readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace";
     };
+    /**
+     * Convenience numeric scale used by ~300+ existing zendir-ui components
+     * via `tokens.typography.fontSize.*`. Density-tuned for data-rich UIs.
+     *
+     * For semantically-named typographic styles (display1/2, h1-h6, body1-3,
+     * control1) use the `display` / `heading` / `body` / `control` preset
+     * objects on `<ThemeProvider>` instead — those follow the canonical
+     * AstroUXDS scale.
+     */
     readonly fontSize: {
         readonly micro: "0.5625rem";
         readonly xxs: "0.625rem";
-        readonly xs: "0.75rem";
-        readonly sm: "0.875rem";
-        readonly base: "1rem";
-        readonly md: "1.125rem";
-        readonly lg: "1.25rem";
-        readonly xl: "1.5rem";
-        readonly xxl: "2.125rem";
-        readonly xxxl: "3rem";
+        readonly xs: "0.625rem";
+        readonly sm: "0.75rem";
+        readonly base: "0.875rem";
+        readonly md: "0.875rem";
+        readonly lg: "1rem";
+        readonly xl: "1.25rem";
+        readonly xxl: "1.5rem";
+        readonly xxxl: "2.125rem";
         readonly display: "3.75rem";
     };
     /**
@@ -152,7 +171,21 @@ export declare const animation: {
     readonly normal: "250ms ease";
     readonly slow: "400ms ease";
 };
+/**
+ * Single-mode generator. Emits one `:root { … }` block with the
+ * mode-invariant tokens AND the chosen mode's bg/text/border.
+ *
+ * Useful for runtime injection — `<style>` tags written by SSR helpers
+ * that target a single mode.
+ */
 export declare function generateCSSVariables(mode?: 'dark' | 'light'): string;
+/**
+ * Full stylesheet generator. Emits the complete tokens.css equivalent —
+ * mode-invariant `:root` block plus `:root, [data-theme="dark"]` and
+ * `[data-theme="light"]` mode overrides. This is what scripts/build-tokens.ts
+ * writes to src/tokens/tokens.css.
+ */
+export declare function generateCSSStylesheet(): string;
 declare const _default: {
     colors: {
         readonly status: {
@@ -226,19 +259,29 @@ declare const _default: {
         };
     };
     spacing: {
+        readonly xxs: "2px";
         readonly xs: "4px";
         readonly sm: "8px";
+        readonly smd: "12px";
         readonly md: "16px";
+        readonly mdl: "20px";
         readonly lg: "24px";
         readonly xl: "32px";
         readonly xxl: "48px";
     };
     borderRadius: {
         readonly none: "0";
+        readonly xs: "1px";
         readonly sm: "2px";
         readonly md: "4px";
         readonly lg: "8px";
-        readonly xl: "16px";
+        /**
+         * 12px. Sized for surfaces (Container, Card, SidePanel). Matches the
+         * value already in use across zendir-ui components and the operator's
+         * LandingPage. Was 16px in earlier docs — corrected here so the JS
+         * tokens and the auto-generated CSS variables agree.
+         */
+        readonly xl: "12px";
         readonly full: "9999px";
     };
     typography: {
@@ -250,17 +293,26 @@ declare const _default: {
             /** Monospace font: Roboto Mono for data/code */
             readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace";
         };
+        /**
+         * Convenience numeric scale used by ~300+ existing zendir-ui components
+         * via `tokens.typography.fontSize.*`. Density-tuned for data-rich UIs.
+         *
+         * For semantically-named typographic styles (display1/2, h1-h6, body1-3,
+         * control1) use the `display` / `heading` / `body` / `control` preset
+         * objects on `<ThemeProvider>` instead — those follow the canonical
+         * AstroUXDS scale.
+         */
         readonly fontSize: {
             readonly micro: "0.5625rem";
             readonly xxs: "0.625rem";
-            readonly xs: "0.75rem";
-            readonly sm: "0.875rem";
-            readonly base: "1rem";
-            readonly md: "1.125rem";
-            readonly lg: "1.25rem";
-            readonly xl: "1.5rem";
-            readonly xxl: "2.125rem";
-            readonly xxxl: "3rem";
+            readonly xs: "0.625rem";
+            readonly sm: "0.75rem";
+            readonly base: "0.875rem";
+            readonly md: "0.875rem";
+            readonly lg: "1rem";
+            readonly xl: "1.25rem";
+            readonly xxl: "1.5rem";
+            readonly xxxl: "2.125rem";
             readonly display: "3.75rem";
         };
         /**
@@ -296,5 +348,6 @@ declare const _default: {
         readonly slow: "400ms ease";
     };
     generateCSSVariables: typeof generateCSSVariables;
+    generateCSSStylesheet: typeof generateCSSStylesheet;
 };
 export default _default;