@skdx/tokens 0.27.0 → 0.29.0

package/dist/utils/foundation.cjs

@@ -1,15 +1,15 @@
-"use strict";var i=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var n in e)i(o,n,{get:e[n],enumerable:!0})},z=(o,e,n,m)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of v(e))!C.call(o,a)&&a!==n&&i(o,a,{get:()=>e[a],enumerable:!(m=$(e,a))||m.enumerable});return o};var M=o=>z(i({},"__esModule",{value:!0}),o);var V={};b(V,{borderWidth:()=>y,breakpoints:()=>F,coarsePointerToCssVars:()=>S,controls:()=>f,controlsCoarse:()=>w,focusRing:()=>h,foundationToCss:()=>I,foundationToCssVars:()=>T,motion:()=>x,opacity:()=>k,radii:()=>l,shadows:()=>g,space:()=>d,typography:()=>c,zIndex:()=>u});module.exports=M(V);var t=require("./cssVars.cjs"),p=require("./theme.cjs"),r="skdx",c={fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",fontFamilyMono:"'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem"},fontWeight:{regular:400,medium:500,semibold:600,bold:700},lineHeight:{tight:"1.25",snug:"1.43",normal:"1.5",relaxed:"1.75"},letterSpacing:{tight:"-0.015em",normal:"0em",wide:"0.025em",wider:"0.05em"}},d={1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem"},l={sm:"0.25rem",inner:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem",full:"9999px"},g={sm:`0 1px 2px 0 ${s(.05)}`,md:`0 4px 6px -1px ${s(.1)}, 0 2px 4px -2px ${s(.1)}`,lg:`0 10px 15px -3px ${s(.1)}, 0 4px 6px -4px ${s(.1)}`,overlay:`0 25px 50px -12px ${s(.25)}`};function s(o){return`rgb(var(--${r}-shadow-color) / calc(${o} * var(--${r}-shadow-strength)))`}var x=p.defaultMotion,u={base:0,dropdown:10,sticky:20,overlay:30,modal:35,popover:40,toast:50,max:9999},h={width:"2px",offset:"2px",offsetInset:"calc(-1 * var(--skdx-focus-ring-width))"},y={thin:"1px",thick:"2px",thicker:"4px"},f={control:{height:{sm:"1.875rem",md:"2.25rem",lg:"2.625rem",compact:"2rem"},padding:{sm:"0.625rem",md:`var(--${r}-space-3)`,lg:`var(--${r}-space-4)`},gap:{sm:`var(--${r}-space-1)`,md:`var(--${r}-space-2)`,lg:`var(--${r}-space-2)`}},iconSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},indicatorSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},item:{height:{sm:"1.75rem",md:"2.25rem",lg:"2.5rem"},gap:"2px"},overlay:{padding:`var(--${r}-space-1)`,radius:`var(--${r}-radius-lg)`,minWidth:"7.5rem"},field:{gap:`var(--${r}-space-1)`,labelGap:`var(--${r}-space-1)`},target:{min:"24px"}},w={control:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem",compact:"2.75rem"}},item:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem"}},target:{min:"44px"}},k={disabled:"0.5",scrim:"0.6"},F={sm:640,md:768,lg:1024,xl:1280};function T(){return(0,t.sectionsToCssVars)([["font",c],["space",d],["radius",l],["shadow",g],["motion",x],["z-index",u],["focus-ring",h],["border-width",y],["opacity",k],...R(f)])}function R(o){let e=n=>o[n];return[["control",e("control")],["icon-size",e("iconSize")],["indicator-size",e("indicatorSize")],["item",e("item")],["overlay",e("overlay")],["field",e("field")],["target",e("target")]]}function S(){return(0,t.sectionsToCssVars)(R(w))}function I(){let o=T(),e=(0,t.reducedMotionVarNames)(o).map(n=>`    ${n}: 0ms;`);return`:root {
-${(0,t.varsToDeclarations)(o)}
+"use strict";var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var R=(r,o)=>{for(var t in o)a(r,t,{get:o[t],enumerable:!0})},k=(r,o,t,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of b(o))!w.call(r,s)&&s!==t&&a(r,s,{get:()=>o[s],enumerable:!(m=v(o,s))||m.enumerable});return r};var z=r=>k(a({},"__esModule",{value:!0}),r);var F={};R(F,{borderWidth:()=>y,breakpoints:()=>M,coarsePointerToCssVars:()=>$,controls:()=>f,controlsCoarse:()=>u,focusRing:()=>h,foundationToCss:()=>V,foundationToCssVars:()=>C,motion:()=>x,opacity:()=>T,radii:()=>d,shadows:()=>l,space:()=>c,typography:()=>p,zIndex:()=>g});module.exports=z(F);var e=require("./cssVars.cjs"),i=require("./theme.cjs"),p={fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",fontFamilyMono:"'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem"},fontWeight:{regular:400,medium:500,semibold:600,bold:700},lineHeight:{tight:"1.25",snug:"1.43",normal:"1.5",relaxed:"1.75"},letterSpacing:{tight:"-0.015em",normal:"0em",wide:"0.025em",wider:"0.05em"}},c={1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem"},d={sm:"0.25rem",inner:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem",full:"9999px"},l={sm:`0 1px 2px 0 ${n(.05)}`,md:`0 4px 6px -1px ${n(.1)}, 0 2px 4px -2px ${n(.1)}`,lg:`0 10px 15px -3px ${n(.1)}, 0 4px 6px -4px ${n(.1)}`,overlay:`0 25px 50px -12px ${n(.25)}`};function n(r){return`rgb(var(--${e.PREFIX}-shadow-color) / calc(${r} * var(--${e.PREFIX}-shadow-strength)))`}var x=i.defaultMotion,g={base:0,dropdown:10,sticky:20,overlay:30,modal:35,popover:40,toast:50,max:9999},h={width:"2px",offset:"2px",offsetInset:"calc(-1 * var(--skdx-focus-ring-width))"},y={thin:"1px",thick:"2px",thicker:"4px"},f={control:{height:{sm:"1.875rem",md:"2.25rem",lg:"2.625rem",compact:"2rem"},padding:{sm:"0.625rem",md:`var(--${e.PREFIX}-space-3)`,lg:`var(--${e.PREFIX}-space-4)`},gap:{sm:`var(--${e.PREFIX}-space-1)`,md:`var(--${e.PREFIX}-space-2)`,lg:`var(--${e.PREFIX}-space-2)`}},iconSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},indicatorSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},item:{height:{sm:"1.75rem",md:"2.25rem",lg:"2.5rem"},gap:"2px"},overlay:{padding:`var(--${e.PREFIX}-space-1)`,radius:`var(--${e.PREFIX}-radius-lg)`,minWidth:"7.5rem"},field:{gap:`var(--${e.PREFIX}-space-1)`,labelGap:`var(--${e.PREFIX}-space-1)`},target:{min:"24px"}},u={control:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem",compact:"2.75rem"}},item:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem"}},target:{min:"44px"}},T={disabled:"0.5",scrim:"0.6"},M={sm:640,md:768,lg:1024,xl:1280};function C(){return(0,e.sectionsToCssVars)([["font",p],["space",c],["radius",d],["shadow",l],["motion",x],["z-index",g],["focus-ring",h],["border-width",y],["opacity",T],...S(f)])}function S(r){let o=t=>r[t];return[["control",o("control")],["icon-size",o("iconSize")],["indicator-size",o("indicatorSize")],["item",o("item")],["overlay",o("overlay")],["field",o("field")],["target",o("target")]]}function $(){return(0,e.sectionsToCssVars)(S(u))}function V(){let r=C(),o=(0,e.reducedMotionVarNames)(r).map(t=>`    ${t}: 0ms;`);return`:root {
+${(0,e.varsToDeclarations)(r)}
 }
 @media (prefers-reduced-motion: reduce) {
   :root {
-${e.join(`
+${o.join(`
 `)}
   }
 }
 @media (pointer: coarse) {
   :root {
-${(0,t.varsToDeclarations)(S(),"    ")}
+${(0,e.varsToDeclarations)($(),"    ")}
   }
 }
 `}0&&(module.exports={borderWidth,breakpoints,coarsePointerToCssVars,controls,controlsCoarse,focusRing,foundationToCss,foundationToCssVars,motion,opacity,radii,shadows,space,typography,zIndex});

package/dist/utils/foundation.d.cts

@@ -1,79 +1,17 @@
+import { type CssVar } from './cssVars.cjs';
 import { type ThemeControls, type ThemeControlsCoarse, type ThemeMotion, type ThemeRadii, type ThemeShadows, type ThemeSpace, type ThemeTypography } from './theme.cjs';
-/**
- * The type system: one font stack, one scale, one set of weights,
- * line-heights and tracking steps, shared by every theme.
- *
- * A theme picks colors. It does not get to resize the type scale, because a
- * layout that reflows when you switch brand is a layout that was never
- * designed — it was designed once, against one scale, and every other brand
- * was hoping. The two font *stacks* are the only part a theme can override,
- * and only through {@link ThemeTypographyDeviation}, because impersonating a
- * design language means impersonating its typeface.
- *
- * @public
- */
+/** The shared type system — font stacks, scale, weights, line-heights, tracking — with only stacks overridable via {@link ThemeTypographyDeviation}. @public */
 export declare const typography: ThemeTypography;
-/**
- * The spacing scale — a 4px base with the usual gaps (no `7`, no `9`) so the
- * steps stay memorable rather than exhaustive. Structural: gap and padding are
- * rhythm, and rhythm is a property of the design system, not of the brand
- * painted on top of it.
- *
- * @public
- */
+/** The spacing scale — a 4px base, structural rather than per-brand. @public */
 export declare const space: ThemeSpace;
-/**
- * The corner-radius scale. Shared for the same reason {@link space} is: a
- * component's silhouette is part of the system's shape language, and a brand
- * that rounds its corners differently is a different component library
- * wearing the same class names.
- *
- * @public
- */
+/** The corner-radius scale, structural like {@link space} rather than per-brand. @public */
 export declare const radii: ThemeRadii;
-/**
- * The elevation scale — geometry only. Every value defers its color to
- * `var(--skdx-shadow-color)` and scales its alpha by
- * `var(--skdx-shadow-strength)`, both of which a theme supplies (see
- * {@link ThemeShadowColor}).
- *
- * This split is the whole reason shadows can be shared at all. A shadow is one
- * CSS string that welds geometry to a color, so before this every theme
- * restated `0 4px 6px -1px` purely to be able to change `rgb(…)` at the end of
- * it — 38 copies of the same three offsets, and no way to tell a deliberate
- * elevation change from a color change.
- *
- * The base alphas below are the original `skanda-light` values, so a theme
- * with `strength: '1'` renders exactly what it did before the split.
- * Substitution is lazy: these live at `:root`, but `var(--skdx-shadow-color)`
- * resolves against the element the shadow is finally *used* on, so the active
- * `[data-skdx-theme]` block wins. `calc()` is legal in the alpha slot, and an
- * alpha above 1 clamps rather than erroring — which is what keeps a
- * high-strength dark theme from being a footgun.
- *
- * @public
- */
+/** The elevation scale (geometry only); color and alpha come from theme-supplied `--skdx-shadow-color`/`-strength` (see {@link ThemeShadowColor}). @public */
 export declare const shadows: ThemeShadows;
-/**
- * The shared animation timing — re-exported from {@link defaultMotion}, which
- * remains the single source so that `themeToCssVars` can keep merging it under
- * a theme's {@link Theme.motion} without importing this module.
- *
- * See {@link ThemeMotion} for why motion is theme-invariant.
- *
- * @public
- */
+/** The shared animation timing, re-exported from {@link defaultMotion} and invariant per {@link ThemeMotion}. @public */
 export declare const motion: Required<ThemeMotion>;
 /**
- * A structural stacking-order scale for overlay-class UI (dropdowns, sticky
- * headers, dialog/popover backdrops, floating content, toasts). Unlike the
- * rest of the token system, z-index isn't a per-brand visual choice — every
- * theme should stack the same way — so it's exported once here rather than
- * duplicated into all 38 {@link Theme} objects. Consumers building an app
- * with multiple concurrent overlay types (e.g. a `Select` opened from inside
- * a `Dialog`, with a `Toast` on top of both) should coordinate their own
- * z-indices against this scale instead of picking ad hoc numbers per
- * component.
+ * Structural stacking-order scale for overlay-class UI (dropdowns, headers, dialogs, toasts), shared by every theme.
  *
  * @example
  * ```css
@@ -88,27 +26,19 @@ export declare const zIndex: {
     readonly base: 0;
     readonly dropdown: 10;
     readonly sticky: 20;
-    /** The scrim behind a modal surface. */
+    /** Scrim behind modal. */
     readonly overlay: 30;
-    /** The modal surface itself — above its own scrim, below any popover opened from inside it. */
+    /** Modal surface; above scrim, below popovers opened from inside. */
     readonly modal: 35;
     readonly popover: 40;
     readonly toast: 50;
-    /**
-     * Escape hatch for the one thing that must sit above everything, e.g. a
-     * debug overlay or an "app is offline" banner. Deliberately far above
-     * `toast` so app code never has to guess a bigger number.
-     */
+    /** Escape hatch for the one thing that must sit above everything, e.g. a debug overlay. */
     readonly max: 9999;
 };
 /** The shape of the {@link zIndex} scale — a map of named stacking layers (`sticky`, `overlay`, `popover`, `toast`, …) to their numeric `z-index`. @public */
 export type ZIndexScale = typeof zIndex;
 /**
- * Structural focus-ring geometry (width/offset) — the *color* half of the
- * focus-ring contract is themed per brand ({@link SemanticColors.focusRing}),
- * but the ring's thickness and offset are a layout constant every theme
- * should share, so they live here rather than being repeated as identical
- * values across all 38 bundled themes.
+ * Structural focus-ring geometry (width/offset); color is themed separately via {@link SemanticColors.focusRing}.
  *
  * @example
  * ```css
@@ -123,31 +53,13 @@ export type ZIndexScale = typeof zIndex;
 export declare const focusRing: {
     readonly width: "2px";
     readonly offset: "2px";
-    /**
-     * The offset a *clipping* container hands down to its children.
-     *
-     * An outline is painted outward from the border edge and is clipped by an
-     * ancestor's `overflow` exactly like any other overflowing paint — which
-     * sliced the ring off inside every control group that rounds its corners by
-     * clipping. Because `outline-offset` is read from a custom property, such a
-     * container sets this on itself and every descendant ring moves *inside* the
-     * border box, where nothing can reach it. One declaration per clipping
-     * container, no per-part focus rules.
-     *
-     * Negative by exactly the ring width, which lands it flush against the
-     * inside of the edge rather than floating in from it.
-     */
+    /** Offset for clipping containers: moves the ring inside the border-box so overflow doesn't clip it. */
     readonly offsetInset: "calc(-1 * var(--skdx-focus-ring-width))";
 };
 /** The shape of the {@link focusRing} geometry — the structural `width`/`offset` of the focus ring (its color is themed separately). @public */
 export type FocusRingScale = typeof focusRing;
 /**
- * Border thicknesses. Structural for the same reason {@link focusRing}'s
- * geometry is: a brand changes border *color* (see
- * {@link SemanticColors.border}), not how many pixels thick a hairline is.
- * Three steps only — a hairline, an emphasis weight (focus/selected/invalid
- * outlines drawn without the focus ring), and a heavy weight for deliberate
- * structural rules. There is no `0`: that's `border: none`, not a token.
+ * Border thicknesses, structural like {@link focusRing}: brand changes border color via {@link SemanticColors.border}, not width; no `0` step exists.
  *
  * @example
  * ```css
@@ -164,38 +76,17 @@ export declare const borderWidth: {
 };
 /** The shape of the {@link borderWidth} scale — `thin`/`thick`/`thicker` border thicknesses. @public */
 export type BorderWidthScale = typeof borderWidth;
-/**
- * The shared control geometry — heights, paddings, icon boxes, row heights and
- * overlay insets. See {@link ThemeControls} for why this is structural rather
- * than per-brand, and for the retuning escape hatch.
- *
- * The ladder is an even 6px step (30/36/42) and every rung sits inside the
- * range the two reference libraries surveyed occupy. Several values are
- * `var()` references rather than lengths on purpose: a control's inline
- * padding *is* a step of {@link space}, and restating `0.75rem` here would let
- * the two drift. The exceptions are the four numbers that are deliberately off
- * a scale — `padding.sm` (10px), `height.compact` (32px), `item.gap` (2px) and
- * `target.min` (24px) — each documented where it is declared.
- *
- * @public
- */
+/** The shared control geometry (heights, paddings, icon boxes, insets); see {@link ThemeControls} for the retuning escape hatch, and values reference {@link space} steps where they align. @public */
 export declare const controls: ThemeControls;
 /**
- * What a coarse pointer overrides. Emitted by {@link foundationToCss} as a
- * `@media (pointer: coarse)` block; see {@link ThemeControlsCoarse} for why
+ * What a coarse pointer overrides, emitted as a `@media (pointer: coarse)`
+ * block by {@link foundationToCss}; see {@link ThemeControlsCoarse} for why
  * only hit sizes are listed.
- *
  * @public
  */
 export declare const controlsCoarse: ThemeControlsCoarse;
 /**
- * The two opacities the system actually has an opinion about. Deliberately
- * *not* a 0–100 ramp: an arbitrary ramp invents decisions nobody made, while
- * these two are real, repeated cross-component choices — how faded a disabled
- * control is, and how much a modal scrim dims the page behind it.
- *
- * Scrim *color* is themed ({@link SemanticColors.overlay}); this is the
- * structural strength of the dim, so every brand's scrim occludes equally.
+ * The two intentional opacities — disabled fade and modal scrim dim — not an arbitrary ramp; scrim color is themed via {@link SemanticColors.overlay}.
  *
  * @example
  * ```css
@@ -212,16 +103,7 @@ export declare const opacity: {
 /** The shape of the {@link opacity} scale — the `disabled` and `scrim` opacities. @public */
 export type OpacityScale = typeof opacity;
 /**
- * Viewport widths, in pixels, as **TypeScript exports only** — deliberately
- * not emitted as CSS custom properties by {@link foundationToCss}. A custom
- * property cannot be used in a `@media` query's condition (`@media (min-width:
- * var(--x))` is invalid CSS), so a `--skdx-breakpoint-*` variable would be a
- * token that looks usable and isn't. Consume these from JS/TS, or from a
- * build step that inlines the number into your own media queries.
- *
- * The components themselves are headless and ship no responsive behavior;
- * this exists so consumers building a styled layer on top don't have to
- * invent their own set.
+ * Viewport widths in pixels, as TypeScript exports only — `@media (min-width: var(--x))` is invalid CSS.
  *
  * @example
  * ```ts
@@ -241,52 +123,17 @@ export declare const breakpoints: {
 /** The shape of the {@link breakpoints} scale — named viewport widths in pixels. @public */
 export type BreakpointScale = typeof breakpoints;
 /**
- * Flattens every shared token into a map of CSS custom property names to
- * values — the foundation's counterpart to `themeToCssVars`. Together the two
- * maps are the complete `--skdx-*` surface, and they never overlap.
- *
- * {@link breakpoints} is not included — see its docs for why a breakpoint
- * can't be a CSS custom property.
+ * Flattens every shared token into `--skdx-*` custom property values, the foundation's counterpart to `themeToCssVars`; excludes {@link breakpoints}, which can't be a CSS custom property.
  *
  * @returns A plain object keyed by CSS custom property name (e.g. `'--skdx-space-4'`), unprefixed by any selector.
- *
- * @public
- */
-export declare function foundationToCssVars(): Record<string, string>;
-/**
- * The control metrics a coarse pointer overrides, as a var map — the
- * `@media (pointer: coarse)` counterpart to {@link foundationToCssVars}.
- *
- * Exported because `@skdx/skins` renders its own no-tokens fallback copy of
- * both blocks from these functions rather than restating the values, which is
- * the only thing that keeps the two in step.
- *
  * @public
  */
-export declare function coarsePointerToCssVars(): Record<string, string>;
+export declare function foundationToCssVars(): Record<CssVar, string>;
+/** The control metrics a coarse pointer overrides, as a var map — the `@media (pointer: coarse)` counterpart to {@link foundationToCssVars}. @public */
+export declare function coarsePointerToCssVars(): Record<CssVar, string>;
 /**
- * Renders every shared token as a `:root`-scoped `--skdx-*` rule block — the
- * theme-invariant counterpart to {@link themeToCss}. **Inject this exactly
- * once**, then inject `themeToCss(theme)` per theme alongside it. Without it
- * the type scale, spacing, radii, shadow geometry and motion are simply
- * absent, because no theme declares them any more.
- *
- * Followed by a `@media (prefers-reduced-motion: reduce)` block that
- * re-declares every `--skdx-motion-duration-*` and `--skdx-motion-stagger-*` as
- * `0ms`. Components are headless and animate nothing themselves, so honoring
- * the preference has to happen where the durations are *defined* rather than
- * where they're used — this way a consumer who writes `transition-duration:
- * var(--skdx-motion-duration-normal)` gets WCAG 2.3.3 behavior for free instead
- * of having to remember the media query at every call site. The easing curve
- * is left alone: it's a shape, not a duration, and is inert at `0ms`. A theme
- * that retunes motion via `ThemeMotionDeviation` emits its own copy of this
- * block, so the guarantee survives the escape hatch.
- *
- * Then a `@media (pointer: coarse)` block re-declaring the hit sizes from
- * {@link controlsCoarse}, for the same reason: the preference has to be honored
- * where the metric is *defined*, so a consumer who writes
- * `block-size: var(--skdx-control-height-md)` gets a touch-sized control without
- * having to remember the query.
+ * Renders every shared token as a `:root`-scoped `--skdx-*` rule block, plus `prefers-reduced-motion` and `pointer: coarse` override blocks.
+ * Inject this exactly once, then {@link themeToCss} per theme.
  *
  * @example
  * ```ts

package/dist/utils/foundation.d.ts

@@ -1,79 +1,17 @@
+import { type CssVar } from './cssVars.js';
 import { type ThemeControls, type ThemeControlsCoarse, type ThemeMotion, type ThemeRadii, type ThemeShadows, type ThemeSpace, type ThemeTypography } from './theme.js';
-/**
- * The type system: one font stack, one scale, one set of weights,
- * line-heights and tracking steps, shared by every theme.
- *
- * A theme picks colors. It does not get to resize the type scale, because a
- * layout that reflows when you switch brand is a layout that was never
- * designed — it was designed once, against one scale, and every other brand
- * was hoping. The two font *stacks* are the only part a theme can override,
- * and only through {@link ThemeTypographyDeviation}, because impersonating a
- * design language means impersonating its typeface.
- *
- * @public
- */
+/** The shared type system — font stacks, scale, weights, line-heights, tracking — with only stacks overridable via {@link ThemeTypographyDeviation}. @public */
 export declare const typography: ThemeTypography;
-/**
- * The spacing scale — a 4px base with the usual gaps (no `7`, no `9`) so the
- * steps stay memorable rather than exhaustive. Structural: gap and padding are
- * rhythm, and rhythm is a property of the design system, not of the brand
- * painted on top of it.
- *
- * @public
- */
+/** The spacing scale — a 4px base, structural rather than per-brand. @public */
 export declare const space: ThemeSpace;
-/**
- * The corner-radius scale. Shared for the same reason {@link space} is: a
- * component's silhouette is part of the system's shape language, and a brand
- * that rounds its corners differently is a different component library
- * wearing the same class names.
- *
- * @public
- */
+/** The corner-radius scale, structural like {@link space} rather than per-brand. @public */
 export declare const radii: ThemeRadii;
-/**
- * The elevation scale — geometry only. Every value defers its color to
- * `var(--skdx-shadow-color)` and scales its alpha by
- * `var(--skdx-shadow-strength)`, both of which a theme supplies (see
- * {@link ThemeShadowColor}).
- *
- * This split is the whole reason shadows can be shared at all. A shadow is one
- * CSS string that welds geometry to a color, so before this every theme
- * restated `0 4px 6px -1px` purely to be able to change `rgb(…)` at the end of
- * it — 38 copies of the same three offsets, and no way to tell a deliberate
- * elevation change from a color change.
- *
- * The base alphas below are the original `skanda-light` values, so a theme
- * with `strength: '1'` renders exactly what it did before the split.
- * Substitution is lazy: these live at `:root`, but `var(--skdx-shadow-color)`
- * resolves against the element the shadow is finally *used* on, so the active
- * `[data-skdx-theme]` block wins. `calc()` is legal in the alpha slot, and an
- * alpha above 1 clamps rather than erroring — which is what keeps a
- * high-strength dark theme from being a footgun.
- *
- * @public
- */
+/** The elevation scale (geometry only); color and alpha come from theme-supplied `--skdx-shadow-color`/`-strength` (see {@link ThemeShadowColor}). @public */
 export declare const shadows: ThemeShadows;
-/**
- * The shared animation timing — re-exported from {@link defaultMotion}, which
- * remains the single source so that `themeToCssVars` can keep merging it under
- * a theme's {@link Theme.motion} without importing this module.
- *
- * See {@link ThemeMotion} for why motion is theme-invariant.
- *
- * @public
- */
+/** The shared animation timing, re-exported from {@link defaultMotion} and invariant per {@link ThemeMotion}. @public */
 export declare const motion: Required<ThemeMotion>;
 /**
- * A structural stacking-order scale for overlay-class UI (dropdowns, sticky
- * headers, dialog/popover backdrops, floating content, toasts). Unlike the
- * rest of the token system, z-index isn't a per-brand visual choice — every
- * theme should stack the same way — so it's exported once here rather than
- * duplicated into all 38 {@link Theme} objects. Consumers building an app
- * with multiple concurrent overlay types (e.g. a `Select` opened from inside
- * a `Dialog`, with a `Toast` on top of both) should coordinate their own
- * z-indices against this scale instead of picking ad hoc numbers per
- * component.
+ * Structural stacking-order scale for overlay-class UI (dropdowns, headers, dialogs, toasts), shared by every theme.
  *
  * @example
  * ```css
@@ -88,27 +26,19 @@ export declare const zIndex: {
     readonly base: 0;
     readonly dropdown: 10;
     readonly sticky: 20;
-    /** The scrim behind a modal surface. */
+    /** Scrim behind modal. */
     readonly overlay: 30;
-    /** The modal surface itself — above its own scrim, below any popover opened from inside it. */
+    /** Modal surface; above scrim, below popovers opened from inside. */
     readonly modal: 35;
     readonly popover: 40;
     readonly toast: 50;
-    /**
-     * Escape hatch for the one thing that must sit above everything, e.g. a
-     * debug overlay or an "app is offline" banner. Deliberately far above
-     * `toast` so app code never has to guess a bigger number.
-     */
+    /** Escape hatch for the one thing that must sit above everything, e.g. a debug overlay. */
     readonly max: 9999;
 };
 /** The shape of the {@link zIndex} scale — a map of named stacking layers (`sticky`, `overlay`, `popover`, `toast`, …) to their numeric `z-index`. @public */
 export type ZIndexScale = typeof zIndex;
 /**
- * Structural focus-ring geometry (width/offset) — the *color* half of the
- * focus-ring contract is themed per brand ({@link SemanticColors.focusRing}),
- * but the ring's thickness and offset are a layout constant every theme
- * should share, so they live here rather than being repeated as identical
- * values across all 38 bundled themes.
+ * Structural focus-ring geometry (width/offset); color is themed separately via {@link SemanticColors.focusRing}.
  *
  * @example
  * ```css
@@ -123,31 +53,13 @@ export type ZIndexScale = typeof zIndex;
 export declare const focusRing: {
     readonly width: "2px";
     readonly offset: "2px";
-    /**
-     * The offset a *clipping* container hands down to its children.
-     *
-     * An outline is painted outward from the border edge and is clipped by an
-     * ancestor's `overflow` exactly like any other overflowing paint — which
-     * sliced the ring off inside every control group that rounds its corners by
-     * clipping. Because `outline-offset` is read from a custom property, such a
-     * container sets this on itself and every descendant ring moves *inside* the
-     * border box, where nothing can reach it. One declaration per clipping
-     * container, no per-part focus rules.
-     *
-     * Negative by exactly the ring width, which lands it flush against the
-     * inside of the edge rather than floating in from it.
-     */
+    /** Offset for clipping containers: moves the ring inside the border-box so overflow doesn't clip it. */
     readonly offsetInset: "calc(-1 * var(--skdx-focus-ring-width))";
 };
 /** The shape of the {@link focusRing} geometry — the structural `width`/`offset` of the focus ring (its color is themed separately). @public */
 export type FocusRingScale = typeof focusRing;
 /**
- * Border thicknesses. Structural for the same reason {@link focusRing}'s
- * geometry is: a brand changes border *color* (see
- * {@link SemanticColors.border}), not how many pixels thick a hairline is.
- * Three steps only — a hairline, an emphasis weight (focus/selected/invalid
- * outlines drawn without the focus ring), and a heavy weight for deliberate
- * structural rules. There is no `0`: that's `border: none`, not a token.
+ * Border thicknesses, structural like {@link focusRing}: brand changes border color via {@link SemanticColors.border}, not width; no `0` step exists.
  *
  * @example
  * ```css
@@ -164,38 +76,17 @@ export declare const borderWidth: {
 };
 /** The shape of the {@link borderWidth} scale — `thin`/`thick`/`thicker` border thicknesses. @public */
 export type BorderWidthScale = typeof borderWidth;
-/**
- * The shared control geometry — heights, paddings, icon boxes, row heights and
- * overlay insets. See {@link ThemeControls} for why this is structural rather
- * than per-brand, and for the retuning escape hatch.
- *
- * The ladder is an even 6px step (30/36/42) and every rung sits inside the
- * range the two reference libraries surveyed occupy. Several values are
- * `var()` references rather than lengths on purpose: a control's inline
- * padding *is* a step of {@link space}, and restating `0.75rem` here would let
- * the two drift. The exceptions are the four numbers that are deliberately off
- * a scale — `padding.sm` (10px), `height.compact` (32px), `item.gap` (2px) and
- * `target.min` (24px) — each documented where it is declared.
- *
- * @public
- */
+/** The shared control geometry (heights, paddings, icon boxes, insets); see {@link ThemeControls} for the retuning escape hatch, and values reference {@link space} steps where they align. @public */
 export declare const controls: ThemeControls;
 /**
- * What a coarse pointer overrides. Emitted by {@link foundationToCss} as a
- * `@media (pointer: coarse)` block; see {@link ThemeControlsCoarse} for why
+ * What a coarse pointer overrides, emitted as a `@media (pointer: coarse)`
+ * block by {@link foundationToCss}; see {@link ThemeControlsCoarse} for why
  * only hit sizes are listed.
- *
  * @public
  */
 export declare const controlsCoarse: ThemeControlsCoarse;
 /**
- * The two opacities the system actually has an opinion about. Deliberately
- * *not* a 0–100 ramp: an arbitrary ramp invents decisions nobody made, while
- * these two are real, repeated cross-component choices — how faded a disabled
- * control is, and how much a modal scrim dims the page behind it.
- *
- * Scrim *color* is themed ({@link SemanticColors.overlay}); this is the
- * structural strength of the dim, so every brand's scrim occludes equally.
+ * The two intentional opacities — disabled fade and modal scrim dim — not an arbitrary ramp; scrim color is themed via {@link SemanticColors.overlay}.
  *
  * @example
  * ```css
@@ -212,16 +103,7 @@ export declare const opacity: {
 /** The shape of the {@link opacity} scale — the `disabled` and `scrim` opacities. @public */
 export type OpacityScale = typeof opacity;
 /**
- * Viewport widths, in pixels, as **TypeScript exports only** — deliberately
- * not emitted as CSS custom properties by {@link foundationToCss}. A custom
- * property cannot be used in a `@media` query's condition (`@media (min-width:
- * var(--x))` is invalid CSS), so a `--skdx-breakpoint-*` variable would be a
- * token that looks usable and isn't. Consume these from JS/TS, or from a
- * build step that inlines the number into your own media queries.
- *
- * The components themselves are headless and ship no responsive behavior;
- * this exists so consumers building a styled layer on top don't have to
- * invent their own set.
+ * Viewport widths in pixels, as TypeScript exports only — `@media (min-width: var(--x))` is invalid CSS.
  *
  * @example
  * ```ts
@@ -241,52 +123,17 @@ export declare const breakpoints: {
 /** The shape of the {@link breakpoints} scale — named viewport widths in pixels. @public */
 export type BreakpointScale = typeof breakpoints;
 /**
- * Flattens every shared token into a map of CSS custom property names to
- * values — the foundation's counterpart to `themeToCssVars`. Together the two
- * maps are the complete `--skdx-*` surface, and they never overlap.
- *
- * {@link breakpoints} is not included — see its docs for why a breakpoint
- * can't be a CSS custom property.
+ * Flattens every shared token into `--skdx-*` custom property values, the foundation's counterpart to `themeToCssVars`; excludes {@link breakpoints}, which can't be a CSS custom property.
  *
  * @returns A plain object keyed by CSS custom property name (e.g. `'--skdx-space-4'`), unprefixed by any selector.
- *
- * @public
- */
-export declare function foundationToCssVars(): Record<string, string>;
-/**
- * The control metrics a coarse pointer overrides, as a var map — the
- * `@media (pointer: coarse)` counterpart to {@link foundationToCssVars}.
- *
- * Exported because `@skdx/skins` renders its own no-tokens fallback copy of
- * both blocks from these functions rather than restating the values, which is
- * the only thing that keeps the two in step.
- *
  * @public
  */
-export declare function coarsePointerToCssVars(): Record<string, string>;
+export declare function foundationToCssVars(): Record<CssVar, string>;
+/** The control metrics a coarse pointer overrides, as a var map — the `@media (pointer: coarse)` counterpart to {@link foundationToCssVars}. @public */
+export declare function coarsePointerToCssVars(): Record<CssVar, string>;
 /**
- * Renders every shared token as a `:root`-scoped `--skdx-*` rule block — the
- * theme-invariant counterpart to {@link themeToCss}. **Inject this exactly
- * once**, then inject `themeToCss(theme)` per theme alongside it. Without it
- * the type scale, spacing, radii, shadow geometry and motion are simply
- * absent, because no theme declares them any more.
- *
- * Followed by a `@media (prefers-reduced-motion: reduce)` block that
- * re-declares every `--skdx-motion-duration-*` and `--skdx-motion-stagger-*` as
- * `0ms`. Components are headless and animate nothing themselves, so honoring
- * the preference has to happen where the durations are *defined* rather than
- * where they're used — this way a consumer who writes `transition-duration:
- * var(--skdx-motion-duration-normal)` gets WCAG 2.3.3 behavior for free instead
- * of having to remember the media query at every call site. The easing curve
- * is left alone: it's a shape, not a duration, and is inert at `0ms`. A theme
- * that retunes motion via `ThemeMotionDeviation` emits its own copy of this
- * block, so the guarantee survives the escape hatch.
- *
- * Then a `@media (pointer: coarse)` block re-declaring the hit sizes from
- * {@link controlsCoarse}, for the same reason: the preference has to be honored
- * where the metric is *defined*, so a consumer who writes
- * `block-size: var(--skdx-control-height-md)` gets a touch-sized control without
- * having to remember the query.
+ * Renders every shared token as a `:root`-scoped `--skdx-*` rule block, plus `prefers-reduced-motion` and `pointer: coarse` override blocks.
+ * Inject this exactly once, then {@link themeToCss} per theme.
  *
  * @example
  * ```ts

package/dist/utils/foundation.js

@@ -1,4 +1,4 @@
-import{reducedMotionVarNames as m,sectionsToCssVars as a,varsToDeclarations as s}from"./cssVars.js";import{defaultMotion as p}from"./theme.js";var e="skdx",c={fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",fontFamilyMono:"'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem"},fontWeight:{regular:400,medium:500,semibold:600,bold:700},lineHeight:{tight:"1.25",snug:"1.43",normal:"1.5",relaxed:"1.75"},letterSpacing:{tight:"-0.015em",normal:"0em",wide:"0.025em",wider:"0.05em"}},d={1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem"},l={sm:"0.25rem",inner:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem",full:"9999px"},g={sm:`0 1px 2px 0 ${n(.05)}`,md:`0 4px 6px -1px ${n(.1)}, 0 2px 4px -2px ${n(.1)}`,lg:`0 10px 15px -3px ${n(.1)}, 0 4px 6px -4px ${n(.1)}`,overlay:`0 25px 50px -12px ${n(.25)}`};function n(r){return`rgb(var(--${e}-shadow-color) / calc(${r} * var(--${e}-shadow-strength)))`}var x=p,u={base:0,dropdown:10,sticky:20,overlay:30,modal:35,popover:40,toast:50,max:9999},h={width:"2px",offset:"2px",offsetInset:"calc(-1 * var(--skdx-focus-ring-width))"},y={thin:"1px",thick:"2px",thicker:"4px"},f={control:{height:{sm:"1.875rem",md:"2.25rem",lg:"2.625rem",compact:"2rem"},padding:{sm:"0.625rem",md:`var(--${e}-space-3)`,lg:`var(--${e}-space-4)`},gap:{sm:`var(--${e}-space-1)`,md:`var(--${e}-space-2)`,lg:`var(--${e}-space-2)`}},iconSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},indicatorSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},item:{height:{sm:"1.75rem",md:"2.25rem",lg:"2.5rem"},gap:"2px"},overlay:{padding:`var(--${e}-space-1)`,radius:`var(--${e}-radius-lg)`,minWidth:"7.5rem"},field:{gap:`var(--${e}-space-1)`,labelGap:`var(--${e}-space-1)`},target:{min:"24px"}},w={control:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem",compact:"2.75rem"}},item:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem"}},target:{min:"44px"}},k={disabled:"0.5",scrim:"0.6"},v={sm:640,md:768,lg:1024,xl:1280};function T(){return a([["font",c],["space",d],["radius",l],["shadow",g],["motion",x],["z-index",u],["focus-ring",h],["border-width",y],["opacity",k],...i(f)])}function i(r){let o=t=>r[t];return[["control",o("control")],["icon-size",o("iconSize")],["indicator-size",o("indicatorSize")],["item",o("item")],["overlay",o("overlay")],["field",o("field")],["target",o("target")]]}function R(){return a(i(w))}function C(){let r=T(),o=m(r).map(t=>`    ${t}: 0ms;`);return`:root {
+import{PREFIX as e,reducedMotionVarNames as i,sectionsToCssVars as a,varsToDeclarations as s}from"./cssVars.js";import{defaultMotion as p}from"./theme.js";var c={fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",fontFamilyMono:"'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace",fontSize:{xs:"0.75rem",sm:"0.875rem",md:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem"},fontWeight:{regular:400,medium:500,semibold:600,bold:700},lineHeight:{tight:"1.25",snug:"1.43",normal:"1.5",relaxed:"1.75"},letterSpacing:{tight:"-0.015em",normal:"0em",wide:"0.025em",wider:"0.05em"}},d={1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem"},l={sm:"0.25rem",inner:"0.375rem",md:"0.5rem",lg:"0.75rem",xl:"1rem",full:"9999px"},x={sm:`0 1px 2px 0 ${t(.05)}`,md:`0 4px 6px -1px ${t(.1)}, 0 2px 4px -2px ${t(.1)}`,lg:`0 10px 15px -3px ${t(.1)}, 0 4px 6px -4px ${t(.1)}`,overlay:`0 25px 50px -12px ${t(.25)}`};function t(r){return`rgb(var(--${e}-shadow-color) / calc(${r} * var(--${e}-shadow-strength)))`}var g=p,h={base:0,dropdown:10,sticky:20,overlay:30,modal:35,popover:40,toast:50,max:9999},y={width:"2px",offset:"2px",offsetInset:"calc(-1 * var(--skdx-focus-ring-width))"},f={thin:"1px",thick:"2px",thicker:"4px"},u={control:{height:{sm:"1.875rem",md:"2.25rem",lg:"2.625rem",compact:"2rem"},padding:{sm:"0.625rem",md:`var(--${e}-space-3)`,lg:`var(--${e}-space-4)`},gap:{sm:`var(--${e}-space-1)`,md:`var(--${e}-space-2)`,lg:`var(--${e}-space-2)`}},iconSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},indicatorSize:{sm:"1rem",md:"1.25rem",lg:"1.5rem"},item:{height:{sm:"1.75rem",md:"2.25rem",lg:"2.5rem"},gap:"2px"},overlay:{padding:`var(--${e}-space-1)`,radius:`var(--${e}-radius-lg)`,minWidth:"7.5rem"},field:{gap:`var(--${e}-space-1)`,labelGap:`var(--${e}-space-1)`},target:{min:"24px"}},T={control:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem",compact:"2.75rem"}},item:{height:{sm:"2.25rem",md:"2.75rem",lg:"3rem"}},target:{min:"44px"}},C={disabled:"0.5",scrim:"0.6"},w={sm:640,md:768,lg:1024,xl:1280};function S(){return a([["font",c],["space",d],["radius",l],["shadow",x],["motion",g],["z-index",h],["focus-ring",y],["border-width",f],["opacity",C],...m(u)])}function m(r){let o=n=>r[n];return[["control",o("control")],["icon-size",o("iconSize")],["indicator-size",o("indicatorSize")],["item",o("item")],["overlay",o("overlay")],["field",o("field")],["target",o("target")]]}function $(){return a(m(T))}function R(){let r=S(),o=i(r).map(n=>`    ${n}: 0ms;`);return`:root {
 ${s(r)}
 }
 @media (prefers-reduced-motion: reduce) {
@@ -9,7 +9,7 @@ ${o.join(`
 }
 @media (pointer: coarse) {
   :root {
-${s(R(),"    ")}
+${s($(),"    ")}
   }
 }
-`}export{y as borderWidth,v as breakpoints,R as coarsePointerToCssVars,f as controls,w as controlsCoarse,h as focusRing,C as foundationToCss,T as foundationToCssVars,x as motion,k as opacity,l as radii,g as shadows,d as space,c as typography,u as zIndex};
+`}export{f as borderWidth,w as breakpoints,$ as coarsePointerToCssVars,u as controls,T as controlsCoarse,y as focusRing,R as foundationToCss,S as foundationToCssVars,g as motion,C as opacity,l as radii,x as shadows,d as space,c as typography,h as zIndex};

package/dist/utils/mode.cjs

@@ -1 +1 @@
-"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},k=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of S(e))!b.call(t,r)&&r!==n&&d(t,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return t};var E=t=>k(d({},"__esModule",{value:!0}),t);var M={};O(M,{BRAND_STORAGE_KEY:()=>g,MODE_STORAGE_KEY:()=>c,getThemeInitScript:()=>x,watchSystemMode:()=>v});module.exports=E(M);var a=require("../themes/brands.cjs"),f=require("./toCss.cjs"),c="skdx-mode",g="skdx-brand",y="(prefers-color-scheme: dark)";function v(t={}){let{brand:e,element:n,persist:o=!1,storageKey:r=c}=t,s=(e===void 0?void 0:(0,a.getBrand)(e))??a.defaultBrand,i=window.matchMedia(y),h=m=>{let p=m?"dark":"light";if((0,f.applyTheme)(s.themes[p],n),!!o)try{localStorage.setItem(r,p)}catch{}};h(i.matches);let l=m=>h(m.matches);return i.addEventListener("change",l),()=>i.removeEventListener("change",l)}function x(t={}){let{brandKey:e=g,modeKey:n=c,fallbackBrand:o=a.defaultBrand.name}=t,r=Object.fromEntries(a.brands.map(s=>[s.name,[s.themes.light.name,s.themes.dark.name]]));return`(function(){try{var t=${JSON.stringify(r)},f=${JSON.stringify(o)};var b=localStorage.getItem(${JSON.stringify(e)})||f;var m=localStorage.getItem(${JSON.stringify(n)});if(m!=="light"&&m!=="dark")m=matchMedia(${JSON.stringify(y)}).matches?"dark":"light";var p=t[b]||t[f];if(!p)return;var e=document.documentElement;e.setAttribute("data-skdx-theme",p[m==="dark"?1:0]);e.setAttribute("data-skdx-mode",m);}catch(e){}})();`}0&&(module.exports={BRAND_STORAGE_KEY,MODE_STORAGE_KEY,getThemeInitScript,watchSystemMode});
+"use strict";var l=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var v=(t,e)=>{for(var n in e)l(t,n,{get:e[n],enumerable:!0})},x=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of E(e))!k.call(t,r)&&r!==n&&l(t,r,{get:()=>e[r],enumerable:!(a=O(e,r))||a.enumerable});return t};var M=t=>x(l({},"__esModule",{value:!0}),t);var I={};v(I,{BRAND_STORAGE_KEY:()=>S,MODE_STORAGE_KEY:()=>h,getThemeInitScript:()=>K,watchSystemMode:()=>T});module.exports=M(I);var o=require("../themes/brands.cjs"),y=require("./toCss.cjs"),h="skdx-mode",S="skdx-brand",b="(prefers-color-scheme: dark)";function T(t={}){let{brand:e,element:n,persist:a=!1,storageKey:r=h}=t,i=(e===void 0?void 0:(0,o.getBrand)(e))??o.defaultBrand,d=window.matchMedia(b),g,p=m=>{let s=null;try{s=localStorage.getItem(r)}catch{}let u=s==="light"||s==="dark"?s:void 0,c=(u!==g?u:void 0)??(m?"dark":"light");if((0,y.applyTheme)(i.themes[c],n),!!a)try{localStorage.setItem(r,c),g=c}catch{}};p(d.matches);let f=m=>p(m.matches);return d.addEventListener("change",f),()=>d.removeEventListener("change",f)}function K(t={}){let{brandKey:e=S,modeKey:n=h,brand:a=o.defaultBrand.name}=t,r=Object.fromEntries(o.brands.map(i=>[i.name,[i.themes.light.name,i.themes.dark.name]]));return`(function(){try{var t=${JSON.stringify(r)},f=${JSON.stringify(a)};var b=localStorage.getItem(${JSON.stringify(e)})||f;var m=localStorage.getItem(${JSON.stringify(n)});if(m!=="light"&&m!=="dark")m=matchMedia(${JSON.stringify(b)}).matches?"dark":"light";var p=t[b]||t[f];if(!p)return;var e=document.documentElement;e.setAttribute("data-skdx-theme",p[m==="dark"?1:0]);e.setAttribute("data-skdx-mode",m);}catch(e){}})();`}0&&(module.exports={BRAND_STORAGE_KEY,MODE_STORAGE_KEY,getThemeInitScript,watchSystemMode});