@asafarim/design-tokens 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,1118 @@
+type Token<T extends string | number = string> = {
+    value: T;
+    description: string;
+    meta?: Record<string, unknown>;
+};
+type ThemeName = "light" | "dark" | "high-contrast";
+type ThemeDefinition = {
+    name: ThemeName;
+    tokens: Record<string, string | number>;
+};
+type DensityName = "compact" | "comfortable";
+type DensityDefinition = {
+    name: DensityName;
+    tokens: Record<string, string | number>;
+};
+type TokenTree = Record<string, unknown>;
+type ValidateResult = {
+    ok: boolean;
+    errors: string[];
+    warnings: string[];
+};
+
+declare const themes: {
+    readonly light: ThemeDefinition;
+    readonly dark: ThemeDefinition;
+    readonly highContrast: ThemeDefinition;
+    readonly density: {
+        readonly compact: DensityDefinition;
+        readonly comfortable: DensityDefinition;
+    };
+};
+
+declare const brand: {
+    readonly primary50: {
+        value: string;
+        description: string;
+    };
+    readonly primary100: {
+        value: string;
+        description: string;
+    };
+    readonly primary200: {
+        value: string;
+        description: string;
+    };
+    readonly primary300: {
+        value: string;
+        description: string;
+    };
+    readonly primary400: {
+        value: string;
+        description: string;
+    };
+    readonly primary500: {
+        value: string;
+        description: string;
+        meta: {
+            wcag: string;
+        };
+    };
+    readonly primary600: {
+        value: string;
+        description: string;
+    };
+    readonly primary700: {
+        value: string;
+        description: string;
+    };
+    readonly secondary500: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const neutral: {
+    readonly gray900: {
+        value: string;
+        description: string;
+    };
+    readonly gray700: {
+        value: string;
+        description: string;
+    };
+    readonly gray500: {
+        value: string;
+        description: string;
+    };
+    readonly gray300: {
+        value: string;
+        description: string;
+    };
+    readonly gray50: {
+        value: string;
+        description: string;
+    };
+    readonly white: {
+        value: string;
+        description: string;
+    };
+    readonly black: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const semantic: {
+    readonly success: {
+        value: string;
+        description: string;
+    };
+    readonly successSubtle: {
+        value: string;
+        description: string;
+    };
+    readonly warning: {
+        value: string;
+        description: string;
+    };
+    readonly warningSubtle: {
+        value: string;
+        description: string;
+    };
+    readonly error: {
+        value: string;
+        description: string;
+    };
+    readonly errorSubtle: {
+        value: string;
+        description: string;
+    };
+    readonly info: {
+        value: string;
+        description: string;
+    };
+    readonly infoSubtle: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const accent: {
+    readonly purple500: {
+        value: string;
+        description: string;
+    };
+    readonly cyan500: {
+        value: string;
+        description: string;
+    };
+    readonly pink500: {
+        value: string;
+        description: string;
+    };
+    readonly lime500: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const dataViz: {
+    readonly series1: {
+        value: string;
+        description: string;
+    };
+    readonly series2: {
+        value: string;
+        description: string;
+    };
+    readonly series3: {
+        value: string;
+        description: string;
+    };
+    readonly series4: {
+        value: string;
+        description: string;
+    };
+    readonly series5: {
+        value: string;
+        description: string;
+    };
+    readonly series6: {
+        value: string;
+        description: string;
+    };
+    readonly series7: {
+        value: string;
+        description: string;
+    };
+    readonly series8: {
+        value: string;
+        description: string;
+    };
+    readonly series9: {
+        value: string;
+        description: string;
+    };
+    readonly series10: {
+        value: string;
+        description: string;
+    };
+    readonly series11: {
+        value: string;
+        description: string;
+    };
+    readonly series12: {
+        value: string;
+        description: string;
+    };
+    readonly gridline: {
+        value: string;
+        description: string;
+    };
+    readonly axis: {
+        value: string;
+        description: string;
+    };
+    readonly tooltipBg: {
+        value: string;
+        description: string;
+    };
+    readonly tooltipText: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const overlays: {
+    readonly scrimStrong: {
+        value: string;
+        description: string;
+    };
+    readonly scrim: {
+        value: string;
+        description: string;
+    };
+    readonly scrimSubtle: {
+        value: string;
+        description: string;
+    };
+    readonly glassFill: {
+        value: string;
+        description: string;
+        meta: {
+            note: string;
+        };
+    };
+};
+
+declare const gradients: {
+    readonly primary: {
+        value: string;
+        description: string;
+    };
+    readonly subtleHero: {
+        value: string;
+        description: string;
+        meta: {
+            note: string;
+        };
+    };
+};
+
+declare const color_accent: typeof accent;
+declare const color_brand: typeof brand;
+declare const color_dataViz: typeof dataViz;
+declare const color_gradients: typeof gradients;
+declare const color_neutral: typeof neutral;
+declare const color_overlays: typeof overlays;
+declare const color_semantic: typeof semantic;
+declare namespace color {
+  export { color_accent as accent, color_brand as brand, color_dataViz as dataViz, color_gradients as gradients, color_neutral as neutral, color_overlays as overlays, color_semantic as semantic };
+}
+
+declare const families: {
+    readonly primary: {
+        value: string;
+        description: string;
+    };
+    readonly mono: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const weights: {
+    readonly w100: {
+        value: number;
+        description: string;
+    };
+    readonly w200: {
+        value: number;
+        description: string;
+    };
+    readonly w300: {
+        value: number;
+        description: string;
+    };
+    readonly w400: {
+        value: number;
+        description: string;
+    };
+    readonly w500: {
+        value: number;
+        description: string;
+    };
+    readonly w600: {
+        value: number;
+        description: string;
+    };
+    readonly w700: {
+        value: number;
+        description: string;
+    };
+    readonly w800: {
+        value: number;
+        description: string;
+    };
+    readonly w900: {
+        value: number;
+        description: string;
+    };
+};
+
+declare const sizes$1: {
+    readonly xs: {
+        value: string;
+        description: string;
+    };
+    readonly sm: {
+        value: string;
+        description: string;
+    };
+    readonly md: {
+        value: string;
+        description: string;
+    };
+    readonly lg: {
+        value: string;
+        description: string;
+    };
+    readonly xl: {
+        value: string;
+        description: string;
+    };
+    readonly x2l: {
+        value: string;
+        description: string;
+    };
+    readonly x3l: {
+        value: string;
+        description: string;
+    };
+    readonly x4l: {
+        value: string;
+        description: string;
+    };
+    readonly x5l: {
+        value: string;
+        description: string;
+    };
+    readonly x6l: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const lineHeights: {
+    readonly tight: {
+        value: number;
+        description: string;
+    };
+    readonly normal: {
+        value: number;
+        description: string;
+    };
+    readonly relaxed: {
+        value: number;
+        description: string;
+    };
+    readonly h1: {
+        value: number;
+        description: string;
+    };
+    readonly h2: {
+        value: number;
+        description: string;
+    };
+    readonly h3: {
+        value: number;
+        description: string;
+    };
+    readonly h4: {
+        value: number;
+        description: string;
+    };
+    readonly h5: {
+        value: number;
+        description: string;
+    };
+    readonly h6: {
+        value: number;
+        description: string;
+    };
+};
+
+declare const letterSpacing: {
+    readonly tight: {
+        value: string;
+        description: string;
+    };
+    readonly normal: {
+        value: string;
+        description: string;
+    };
+    readonly wide: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const headings: {
+    readonly h1: {
+        value: string;
+        description: string;
+        meta: {
+            note: string;
+        };
+    };
+    readonly h2: {
+        value: string;
+        description: string;
+    };
+    readonly h3: {
+        value: string;
+        description: string;
+    };
+    readonly h4: {
+        value: string;
+        description: string;
+    };
+    readonly h5: {
+        value: string;
+        description: string;
+    };
+    readonly h6: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const responsive: {
+    readonly bodyMaxWidth: {
+        value: string;
+        description: string;
+    };
+    readonly scaleMobile: {
+        value: number;
+        description: string;
+        meta: {
+            note: string;
+        };
+    };
+    readonly scaleTablet: {
+        value: number;
+        description: string;
+    };
+    readonly scaleDesktop: {
+        value: number;
+        description: string;
+    };
+};
+
+declare const typography_families: typeof families;
+declare const typography_headings: typeof headings;
+declare const typography_letterSpacing: typeof letterSpacing;
+declare const typography_lineHeights: typeof lineHeights;
+declare const typography_responsive: typeof responsive;
+declare const typography_weights: typeof weights;
+declare namespace typography {
+  export { typography_families as families, typography_headings as headings, typography_letterSpacing as letterSpacing, typography_lineHeights as lineHeights, typography_responsive as responsive, sizes$1 as sizes, typography_weights as weights };
+}
+
+declare const scale$1: {
+    readonly s0: {
+        value: string;
+        description: string;
+    };
+    readonly s1: {
+        value: string;
+        description: string;
+    };
+    readonly s2: {
+        value: string;
+        description: string;
+    };
+    readonly s3: {
+        value: string;
+        description: string;
+    };
+    readonly s4: {
+        value: string;
+        description: string;
+    };
+    readonly s5: {
+        value: string;
+        description: string;
+    };
+    readonly s6: {
+        value: string;
+        description: string;
+    };
+    readonly s8: {
+        value: string;
+        description: string;
+    };
+    readonly s10: {
+        value: string;
+        description: string;
+    };
+    readonly s12: {
+        value: string;
+        description: string;
+    };
+    readonly s16: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const layout: {
+    readonly pagePaddingX: {
+        value: string;
+        description: string;
+    };
+    readonly pagePaddingY: {
+        value: string;
+        description: string;
+    };
+    readonly sectionGap: {
+        value: string;
+        description: string;
+    };
+    readonly componentGap: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const grid: {
+    readonly columns: {
+        value: number;
+        description: string;
+    };
+    readonly gutter: {
+        value: string;
+        description: string;
+    };
+    readonly breakpoints: {
+        readonly xs: {
+            value: string;
+            description: string;
+        };
+        readonly sm: {
+            value: string;
+            description: string;
+        };
+        readonly md: {
+            value: string;
+            description: string;
+        };
+        readonly lg: {
+            value: string;
+            description: string;
+        };
+        readonly xl: {
+            value: string;
+            description: string;
+        };
+        readonly x2l: {
+            value: string;
+            description: string;
+        };
+    };
+    readonly containerWidths: {
+        readonly xs: {
+            value: string;
+            description: string;
+        };
+        readonly sm: {
+            value: string;
+            description: string;
+        };
+        readonly md: {
+            value: string;
+            description: string;
+        };
+        readonly lg: {
+            value: string;
+            description: string;
+        };
+        readonly xl: {
+            value: string;
+            description: string;
+        };
+        readonly x2l: {
+            value: string;
+            description: string;
+        };
+    };
+};
+
+declare const density: {
+    readonly compactFactor: {
+        value: number;
+        description: string;
+    };
+    readonly comfortableFactor: {
+        value: number;
+        description: string;
+    };
+};
+
+declare const rtl: {
+    readonly logicalInsetStart: {
+        value: string;
+        description: string;
+    };
+    readonly logicalInsetEnd: {
+        value: string;
+        description: string;
+    };
+    readonly logicalMarginStart: {
+        value: string;
+        description: string;
+    };
+    readonly logicalMarginEnd: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const spacing_density: typeof density;
+declare const spacing_grid: typeof grid;
+declare const spacing_layout: typeof layout;
+declare const spacing_rtl: typeof rtl;
+declare namespace spacing {
+  export { spacing_density as density, spacing_grid as grid, spacing_layout as layout, spacing_rtl as rtl, scale$1 as scale };
+}
+
+declare const radii: {
+    readonly sm: {
+        value: string;
+        description: string;
+    };
+    readonly md: {
+        value: string;
+        description: string;
+    };
+    readonly lg: {
+        value: string;
+        description: string;
+    };
+    readonly xl: {
+        value: string;
+        description: string;
+    };
+    readonly full: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const borders: {
+    readonly hairline: {
+        value: string;
+        description: string;
+    };
+    readonly thin: {
+        value: string;
+        description: string;
+    };
+    readonly thick: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const strokes: {
+    readonly default: {
+        value: string;
+        description: string;
+    };
+    readonly strong: {
+        value: string;
+        description: string;
+    };
+    readonly dash: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const shape_borders: typeof borders;
+declare const shape_radii: typeof radii;
+declare const shape_strokes: typeof strokes;
+declare namespace shape {
+  export { shape_borders as borders, shape_radii as radii, shape_strokes as strokes };
+}
+
+declare const shadows: {
+    readonly sm: {
+        value: string;
+        description: string;
+    };
+    readonly md: {
+        value: string;
+        description: string;
+    };
+    readonly lg: {
+        value: string;
+        description: string;
+    };
+    readonly xl: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const blur: {
+    readonly sm: {
+        value: string;
+        description: string;
+    };
+    readonly md: {
+        value: string;
+        description: string;
+    };
+    readonly lg: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const opacity: {
+    readonly o0: {
+        value: number;
+        description: string;
+    };
+    readonly o10: {
+        value: number;
+        description: string;
+    };
+    readonly o20: {
+        value: number;
+        description: string;
+    };
+    readonly o40: {
+        value: number;
+        description: string;
+    };
+    readonly o60: {
+        value: number;
+        description: string;
+    };
+    readonly o80: {
+        value: number;
+        description: string;
+    };
+    readonly o100: {
+        value: number;
+        description: string;
+    };
+};
+
+declare const textures: {
+    readonly none: {
+        value: string;
+        description: string;
+    };
+    readonly noise: {
+        value: string;
+        description: string;
+        meta: {
+            note: string;
+        };
+    };
+};
+
+declare const effects_blur: typeof blur;
+declare const effects_opacity: typeof opacity;
+declare const effects_shadows: typeof shadows;
+declare const effects_textures: typeof textures;
+declare namespace effects {
+  export { effects_blur as blur, effects_opacity as opacity, effects_shadows as shadows, effects_textures as textures };
+}
+
+declare const duration: {
+    readonly fast: {
+        value: string;
+        description: string;
+    };
+    readonly normal: {
+        value: string;
+        description: string;
+    };
+    readonly slow: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const easing: {
+    readonly standard: {
+        value: string;
+        description: string;
+    };
+    readonly emphasized: {
+        value: string;
+        description: string;
+    };
+    readonly entrance: {
+        value: string;
+        description: string;
+    };
+    readonly exit: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const transitions: {
+    readonly fade: {
+        value: string;
+        description: string;
+    };
+    readonly slide: {
+        value: string;
+        description: string;
+    };
+    readonly scale: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const reducedMotion: {
+    readonly disableTransitions: {
+        value: number;
+        description: string;
+        meta: {
+            hint: string;
+        };
+    };
+};
+
+declare const motion_duration: typeof duration;
+declare const motion_easing: typeof easing;
+declare const motion_reducedMotion: typeof reducedMotion;
+declare const motion_transitions: typeof transitions;
+declare namespace motion {
+  export { motion_duration as duration, motion_easing as easing, motion_reducedMotion as reducedMotion, motion_transitions as transitions };
+}
+
+declare const scale: {
+    readonly base: {
+        value: number;
+        description: string;
+    };
+    readonly dropdown: {
+        value: number;
+        description: string;
+    };
+    readonly sticky: {
+        value: number;
+        description: string;
+    };
+    readonly overlay: {
+        value: number;
+        description: string;
+    };
+    readonly modal: {
+        value: number;
+        description: string;
+    };
+    readonly popover: {
+        value: number;
+        description: string;
+    };
+    readonly tooltip: {
+        value: number;
+        description: string;
+    };
+    readonly toast: {
+        value: number;
+        description: string;
+    };
+};
+
+declare const zindex_scale: typeof scale;
+declare namespace zindex {
+  export { zindex_scale as scale };
+}
+
+declare const sizes: {
+    readonly xs: {
+        value: string;
+        description: string;
+    };
+    readonly sm: {
+        value: string;
+        description: string;
+    };
+    readonly md: {
+        value: string;
+        description: string;
+    };
+    readonly lg: {
+        value: string;
+        description: string;
+    };
+    readonly xl: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const strokeWidths: {
+    readonly thin: {
+        value: number;
+        description: string;
+    };
+    readonly regular: {
+        value: number;
+        description: string;
+    };
+    readonly bold: {
+        value: number;
+        description: string;
+    };
+};
+
+declare const iconography_sizes: typeof sizes;
+declare const iconography_strokeWidths: typeof strokeWidths;
+declare namespace iconography {
+  export { iconography_sizes as sizes, iconography_strokeWidths as strokeWidths };
+}
+
+declare const surface: {
+    readonly background: {
+        value: string;
+        description: string;
+    };
+    readonly surface: {
+        value: string;
+        description: string;
+    };
+    readonly surfaceMuted: {
+        value: string;
+        description: string;
+    };
+    readonly panel: {
+        value: string;
+        description: string;
+    };
+    readonly modal: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const button: {
+    readonly primaryBg: {
+        value: string;
+        description: string;
+    };
+    readonly primaryText: {
+        value: string;
+        description: string;
+    };
+    readonly primaryBgHover: {
+        value: string;
+        description: string;
+    };
+    readonly primaryBgActive: {
+        value: string;
+        description: string;
+    };
+    readonly secondaryBg: {
+        value: string;
+        description: string;
+    };
+    readonly secondaryText: {
+        value: string;
+        description: string;
+    };
+    readonly ghostBgHover: {
+        value: string;
+        description: string;
+    };
+    readonly destructiveBg: {
+        value: string;
+        description: string;
+    };
+    readonly destructiveText: {
+        value: string;
+        description: string;
+    };
+    readonly disabledBg: {
+        value: string;
+        description: string;
+    };
+    readonly disabledText: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const input: {
+    readonly bg: {
+        value: string;
+        description: string;
+    };
+    readonly text: {
+        value: string;
+        description: string;
+    };
+    readonly border: {
+        value: string;
+        description: string;
+    };
+    readonly borderHover: {
+        value: string;
+        description: string;
+    };
+    readonly borderFocus: {
+        value: string;
+        description: string;
+    };
+    readonly placeholder: {
+        value: string;
+        description: string;
+    };
+    readonly errorBorder: {
+        value: string;
+        description: string;
+    };
+    readonly successBorder: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const focus: {
+    readonly ringColor: {
+        value: string;
+        description: string;
+    };
+    readonly ringWidth: {
+        value: string;
+        description: string;
+    };
+    readonly ringOffset: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const overlay: {
+    readonly scrim: {
+        value: string;
+        description: string;
+    };
+    readonly backdropBlur: {
+        value: string;
+        description: string;
+    };
+};
+
+declare const ui_button: typeof button;
+declare const ui_focus: typeof focus;
+declare const ui_input: typeof input;
+declare const ui_overlay: typeof overlay;
+declare const ui_surface: typeof surface;
+declare namespace ui {
+  export { ui_button as button, ui_focus as focus, ui_input as input, ui_overlay as overlay, ui_surface as surface };
+}
+
+declare const tokens: {
+    readonly color: typeof color;
+    readonly typography: typeof typography;
+    readonly spacing: typeof spacing;
+    readonly shape: typeof shape;
+    readonly effects: typeof effects;
+    readonly motion: typeof motion;
+    readonly zindex: typeof zindex;
+    readonly iconography: typeof iconography;
+    readonly ui: typeof ui;
+};
+
+type CssVarDict = Record<string, string>;
+declare function toCssVars(tree: TokenTree): CssVarDict;
+
+declare const cssVarNames: Record<string, string>;
+
+type ApplyThemeOptions = {
+    overrides?: Record<string, string | number>;
+    cleanup?: boolean;
+};
+declare function applyThemeToElement(element: {
+    style: {
+        setProperty: (k: string, v: string) => void;
+        removeProperty: (k: string) => void;
+    };
+}, theme: ThemeDefinition | DensityDefinition, options?: ApplyThemeOptions): void;
+declare function prefersColorScheme(): "light" | "dark" | undefined;
+declare function validateTokens(): ValidateResult;
+
+export { type ApplyThemeOptions, type ThemeDefinition, type Token, type ValidateResult, applyThemeToElement, cssVarNames, prefersColorScheme, themes, toCssVars, tokens, validateTokens };