@hirobius/design-system 0.8.1

package/dist/types/src/app/design-system/generated-token-refs.d.ts

@@ -0,0 +1,586 @@
+/**
+ * Generated by scripts/build-tokens.mjs — do not edit manually.
+ * Source: hirobius.tokens.json (W3C DTCG 2025.10)
+ * Regenerate: node scripts/build-tokens.mjs
+ *
+ * CSS var reference strings for every token, including typography composites.
+ * Import in tokens.ts or any component that needs a CSS var string without hardcoding.
+ *
+ * Usage:
+ *   import { tokenRefs } from './generated-token-refs';
+ *   tokenRefs.semantic.typography.mono          // { fontFamily: 'var(...)', ... }
+ *   tokenRefs.semantic.color.surface.page       // 'var(--semantic-color-surface-page)'
+ */
+export declare const tokenRefs: {
+    readonly primitive: {
+        readonly color: {
+            readonly neutral: {
+                readonly "50": "var(--primitive-color-neutral-50)";
+                readonly "100": "var(--primitive-color-neutral-100)";
+                readonly "200": "var(--primitive-color-neutral-200)";
+                readonly "300": "var(--primitive-color-neutral-300)";
+                readonly "400": "var(--primitive-color-neutral-400)";
+                readonly "500": "var(--primitive-color-neutral-500)";
+                readonly "600": "var(--primitive-color-neutral-600)";
+                readonly "700": "var(--primitive-color-neutral-700)";
+                readonly "800": "var(--primitive-color-neutral-800)";
+                readonly "850": "var(--primitive-color-neutral-850)";
+                readonly "900": "var(--primitive-color-neutral-900)";
+                readonly "950": "var(--primitive-color-neutral-950)";
+                readonly white: "var(--primitive-color-neutral-white)";
+                readonly black: "var(--primitive-color-neutral-black)";
+            };
+            readonly blue: {
+                readonly "50": "var(--primitive-color-blue-50)";
+                readonly "100": "var(--primitive-color-blue-100)";
+                readonly "200": "var(--primitive-color-blue-200)";
+                readonly "300": "var(--primitive-color-blue-300)";
+                readonly "400": "var(--primitive-color-blue-400)";
+                readonly "450": "var(--primitive-color-blue-450)";
+                readonly "500": "var(--primitive-color-blue-500)";
+                readonly "600": "var(--primitive-color-blue-600)";
+                readonly "700": "var(--primitive-color-blue-700)";
+                readonly "800": "var(--primitive-color-blue-800)";
+                readonly "900": "var(--primitive-color-blue-900)";
+            };
+            readonly red: {
+                readonly "50": "var(--primitive-color-red-50)";
+                readonly "400": "var(--primitive-color-red-400)";
+                readonly "700": "var(--primitive-color-red-700)";
+                readonly "950": "var(--primitive-color-red-950)";
+            };
+            readonly green: {
+                readonly "50": "var(--primitive-color-green-50)";
+                readonly "400": "var(--primitive-color-green-400)";
+                readonly "700": "var(--primitive-color-green-700)";
+                readonly "950": "var(--primitive-color-green-950)";
+            };
+            readonly amber: {
+                readonly "50": "var(--primitive-color-amber-50)";
+                readonly "400": "var(--primitive-color-amber-400)";
+                readonly "800": "var(--primitive-color-amber-800)";
+                readonly "950": "var(--primitive-color-amber-950)";
+            };
+            readonly stone: {
+                readonly "100": "var(--primitive-color-stone-100)";
+                readonly "400": "var(--primitive-color-stone-400)";
+                readonly "450": "var(--primitive-color-stone-450)";
+                readonly "500": "var(--primitive-color-stone-500)";
+                readonly "600": "var(--primitive-color-stone-600)";
+                readonly "700": "var(--primitive-color-stone-700)";
+                readonly "800": "var(--primitive-color-stone-800)";
+                readonly "950": "var(--primitive-color-stone-950)";
+            };
+            readonly projectBrand: {
+                readonly microsoftGameDev: {
+                    readonly "100": "var(--primitive-color-projectBrand-microsoftGameDev-100)";
+                    readonly "500": "var(--primitive-color-projectBrand-microsoftGameDev-500)";
+                    readonly "900": "var(--primitive-color-projectBrand-microsoftGameDev-900)";
+                };
+            };
+        };
+        readonly space: {
+            readonly "0": "var(--primitive-space-0)";
+            readonly "1": "var(--primitive-space-1)";
+            readonly "2": "var(--primitive-space-2)";
+            readonly "3": "var(--primitive-space-3)";
+            readonly "4": "var(--primitive-space-4)";
+            readonly "5": "var(--primitive-space-5)";
+            readonly "6": "var(--primitive-space-6)";
+            readonly "7": "var(--primitive-space-7)";
+            readonly "8": "var(--primitive-space-8)";
+            readonly "10": "var(--primitive-space-10)";
+            readonly "12": "var(--primitive-space-12)";
+            readonly "16": "var(--primitive-space-16)";
+            readonly "20": "var(--primitive-space-20)";
+            readonly "24": "var(--primitive-space-24)";
+            readonly "32": "var(--primitive-space-32)";
+            readonly px1: "var(--primitive-space-px1)";
+            readonly px2: "var(--primitive-space-px2)";
+            readonly px6: "var(--primitive-space-px6)";
+            readonly px10: "var(--primitive-space-px10)";
+        };
+        readonly blur: {
+            readonly "8": "var(--primitive-blur-8)";
+            readonly "16": "var(--primitive-blur-16)";
+        };
+        readonly radius: {
+            readonly "0": "var(--primitive-radius-0)";
+            readonly "2": "var(--primitive-radius-2)";
+            readonly "4": "var(--primitive-radius-4)";
+            readonly "8": "var(--primitive-radius-8)";
+            readonly "12": "var(--primitive-radius-12)";
+            readonly full: "var(--primitive-radius-full)";
+        };
+        readonly typography: {
+            readonly family: {
+                readonly primary: "var(--primitive-typography-family-primary)";
+                readonly display: "var(--primitive-typography-family-display)";
+                readonly mono: "var(--primitive-typography-family-mono)";
+            };
+            readonly size: {
+                readonly "2xs": "var(--primitive-typography-size-2xs)";
+                readonly xs: "var(--primitive-typography-size-xs)";
+                readonly sm: "var(--primitive-typography-size-sm)";
+                readonly base: "var(--primitive-typography-size-base)";
+                readonly lg: "var(--primitive-typography-size-lg)";
+                readonly xl: "var(--primitive-typography-size-xl)";
+                readonly "2xl": "var(--primitive-typography-size-2xl)";
+                readonly "3xl": "var(--primitive-typography-size-3xl)";
+                readonly "4xl": "var(--primitive-typography-size-4xl)";
+                readonly "5xl": "var(--primitive-typography-size-5xl)";
+                readonly "7xl": "var(--primitive-typography-size-7xl)";
+            };
+            readonly weight: {
+                readonly light: "var(--primitive-typography-weight-light)";
+                readonly regular: "var(--primitive-typography-weight-regular)";
+                readonly medium: "var(--primitive-typography-weight-medium)";
+                readonly semibold: "var(--primitive-typography-weight-semibold)";
+                readonly bold: "var(--primitive-typography-weight-bold)";
+            };
+            readonly lineHeight: {
+                readonly compact: "var(--primitive-typography-lineHeight-compact)";
+                readonly none: "var(--primitive-typography-lineHeight-none)";
+                readonly tight: "var(--primitive-typography-lineHeight-tight)";
+                readonly snug: "var(--primitive-typography-lineHeight-snug)";
+                readonly normal: "var(--primitive-typography-lineHeight-normal)";
+                readonly relaxed: "var(--primitive-typography-lineHeight-relaxed)";
+            };
+            readonly letterSpacing: {
+                readonly tighter: "var(--primitive-typography-letterSpacing-tighter)";
+                readonly tight: "var(--primitive-typography-letterSpacing-tight)";
+                readonly normal: "var(--primitive-typography-letterSpacing-normal)";
+                readonly wide: "var(--primitive-typography-letterSpacing-wide)";
+                readonly wider: "var(--primitive-typography-letterSpacing-wider)";
+                readonly caps: "var(--primitive-typography-letterSpacing-caps)";
+            };
+        };
+        readonly duration: {
+            readonly instant: "var(--primitive-duration-instant)";
+            readonly short: "var(--primitive-duration-short)";
+            readonly medium: "var(--primitive-duration-medium)";
+            readonly long: "var(--primitive-duration-long)";
+        };
+        readonly easing: {
+            readonly emphasized: "var(--primitive-easing-emphasized)";
+            readonly decelerate: "var(--primitive-easing-decelerate)";
+            readonly accelerate: "var(--primitive-easing-accelerate)";
+            readonly elastic: "var(--primitive-easing-elastic)";
+        };
+        readonly shadow: {
+            readonly color: "var(--primitive-shadow-color)";
+        };
+        readonly breakpoint: {
+            readonly xs: "var(--primitive-breakpoint-xs)";
+            readonly sm: "var(--primitive-breakpoint-sm)";
+            readonly md: "var(--primitive-breakpoint-md)";
+            readonly lg: "var(--primitive-breakpoint-lg)";
+            readonly xl: "var(--primitive-breakpoint-xl)";
+        };
+        readonly size: {
+            readonly "8": "var(--primitive-size-8)";
+            readonly "10": "var(--primitive-size-10)";
+            readonly "12": "var(--primitive-size-12)";
+            readonly "16": "var(--primitive-size-16)";
+            readonly "20": "var(--primitive-size-20)";
+            readonly "24": "var(--primitive-size-24)";
+            readonly "32": "var(--primitive-size-32)";
+            readonly "40": "var(--primitive-size-40)";
+            readonly "48": "var(--primitive-size-48)";
+            readonly "64": "var(--primitive-size-64)";
+            readonly "80": "var(--primitive-size-80)";
+            readonly "96": "var(--primitive-size-96)";
+            readonly interactive: {
+                readonly min: "var(--primitive-size-interactive-min)";
+            };
+            readonly width: {
+                readonly "96": "var(--primitive-size-width-96)";
+                readonly "760": "var(--primitive-size-width-760)";
+                readonly "1200": "var(--primitive-size-width-1200)";
+                readonly "50ch": "var(--primitive-size-width-50ch)";
+            };
+        };
+        readonly grid: {
+            readonly columns: {
+                readonly "1": "var(--primitive-grid-columns-1)";
+                readonly "2": "var(--primitive-grid-columns-2)";
+                readonly "3": "var(--primitive-grid-columns-3)";
+            };
+        };
+        readonly zIndex: {
+            readonly "0": "var(--primitive-zIndex-0)";
+            readonly "10": "var(--primitive-zIndex-10)";
+            readonly "100": "var(--primitive-zIndex-100)";
+            readonly "1000": "var(--primitive-zIndex-1000)";
+        };
+        readonly borderWidth: {
+            readonly xs: "var(--primitive-borderWidth-xs)";
+            readonly sm: "var(--primitive-borderWidth-sm)";
+            readonly md: "var(--primitive-borderWidth-md)";
+        };
+    };
+    readonly semantic: {
+        readonly motion: {
+            readonly productive: {
+                readonly duration: "var(--hds-motion-productive-duration)";
+                readonly easing: "var(--hds-motion-productive-easing)";
+            };
+            readonly expressive: {
+                readonly duration: "var(--hds-motion-expressive-duration)";
+                readonly easing: "var(--hds-motion-expressive-easing)";
+            };
+            readonly spatial: {
+                readonly duration: "var(--hds-motion-spatial-duration)";
+                readonly easing: "var(--hds-motion-spatial-easing)";
+            };
+            readonly exit: {
+                readonly duration: "var(--hds-motion-exit-duration)";
+                readonly easing: "var(--hds-motion-exit-easing)";
+            };
+        };
+        readonly color: {
+            readonly surface: {
+                readonly page: "var(--semantic-color-surface-page)";
+                readonly raised: "var(--semantic-color-surface-raised)";
+                readonly overlay: "var(--semantic-color-surface-overlay)";
+                readonly inverse: "var(--semantic-color-surface-inverse)";
+                readonly accent: "var(--semantic-color-surface-accent)";
+                readonly accentSubtle: "var(--semantic-color-surface-accentSubtle)";
+            };
+            readonly content: {
+                readonly primary: "var(--semantic-color-content-primary)";
+                readonly secondary: "var(--semantic-color-content-secondary)";
+                readonly disabled: "var(--semantic-color-content-disabled)";
+                readonly inverse: "var(--semantic-color-content-inverse)";
+                readonly accent: "var(--semantic-color-content-accent)";
+                readonly onAccent: "var(--semantic-color-content-onAccent)";
+            };
+            readonly border: {
+                readonly default: "var(--semantic-color-border-default)";
+                readonly subdued: "var(--semantic-color-border-subdued)";
+                readonly subtle: "var(--semantic-color-border-subtle)";
+                readonly strong: "var(--semantic-color-border-strong)";
+                readonly accent: "var(--semantic-color-border-accent)";
+            };
+            readonly feedback: {
+                readonly error: "var(--semantic-color-feedback-error)";
+                readonly success: "var(--semantic-color-feedback-success)";
+                readonly warning: "var(--semantic-color-feedback-warning)";
+                readonly info: "var(--semantic-color-feedback-info)";
+                readonly bg: {
+                    readonly error: "var(--semantic-color-feedback-bg-error)";
+                    readonly success: "var(--semantic-color-feedback-bg-success)";
+                    readonly warning: "var(--semantic-color-feedback-bg-warning)";
+                    readonly info: "var(--semantic-color-feedback-bg-info)";
+                };
+            };
+        };
+        readonly space: {
+            readonly subgrid: {
+                readonly hairline: "var(--semantic-space-subgrid-hairline)";
+                readonly xs: "var(--semantic-space-subgrid-xs)";
+                readonly gap: "var(--semantic-space-subgrid-gap)";
+            };
+            readonly component: {
+                readonly gap: "var(--semantic-space-component-gap)";
+                readonly medium: "var(--semantic-space-component-medium)";
+                readonly padding: "var(--semantic-space-component-padding)";
+            };
+            readonly layout: {
+                readonly tight: "var(--semantic-space-layout-tight)";
+                readonly normal: "var(--semantic-space-layout-normal)";
+                readonly gutter: "var(--semantic-space-layout-gutter)";
+                readonly inset: "var(--semantic-space-layout-inset)";
+                readonly spacious: "var(--semantic-space-layout-spacious)";
+            };
+            readonly section: {
+                readonly stack: "var(--semantic-space-section-stack)";
+                readonly inset: "var(--semantic-space-section-inset)";
+                readonly heroMax: "var(--semantic-space-section-heroMax)";
+            };
+            readonly sidebar: {
+                readonly indent: "var(--semantic-space-sidebar-indent)";
+                readonly gap: "var(--semantic-space-sidebar-gap)";
+                readonly sectionGap: "var(--semantic-space-sidebar-sectionGap)";
+                readonly railPadding: "var(--semantic-space-sidebar-railPadding)";
+            };
+        };
+        readonly layout: {
+            readonly width: {
+                readonly content: "var(--semantic-layout-width-content)";
+                readonly max: "var(--semantic-layout-width-max)";
+            };
+            readonly container: {
+                readonly maxWidth: "var(--semantic-layout-container-maxWidth)";
+            };
+            readonly content: {
+                readonly maxWidth: "var(--semantic-layout-content-maxWidth)";
+            };
+            readonly prose: {
+                readonly maxWidth: "var(--semantic-layout-prose-maxWidth)";
+            };
+            readonly section: {
+                readonly paddingY: "var(--semantic-layout-section-paddingY)";
+            };
+            readonly grid: {
+                readonly gap: "var(--semantic-layout-grid-gap)";
+                readonly columns: {
+                    readonly mobile: "var(--semantic-layout-grid-columns-mobile)";
+                    readonly tablet: "var(--semantic-layout-grid-columns-tablet)";
+                    readonly desktop: "var(--semantic-layout-grid-columns-desktop)";
+                };
+            };
+        };
+        readonly typography: {
+            readonly display: {
+                readonly fontFamily: "var(--semantic-typography-display-font-family)";
+                readonly fontSize: "var(--semantic-typography-display-font-size)";
+                readonly fontWeight: "var(--semantic-typography-display-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-display-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-display-line-height)";
+            };
+            readonly h1: {
+                readonly fontFamily: "var(--semantic-typography-h1-font-family)";
+                readonly fontSize: "var(--semantic-typography-h1-font-size)";
+                readonly fontWeight: "var(--semantic-typography-h1-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-h1-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-h1-line-height)";
+            };
+            readonly h2: {
+                readonly fontFamily: "var(--semantic-typography-h2-font-family)";
+                readonly fontSize: "var(--semantic-typography-h2-font-size)";
+                readonly fontWeight: "var(--semantic-typography-h2-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-h2-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-h2-line-height)";
+            };
+            readonly h3: {
+                readonly fontFamily: "var(--semantic-typography-h3-font-family)";
+                readonly fontSize: "var(--semantic-typography-h3-font-size)";
+                readonly fontWeight: "var(--semantic-typography-h3-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-h3-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-h3-line-height)";
+            };
+            readonly body: {
+                readonly fontFamily: "var(--semantic-typography-body-font-family)";
+                readonly fontSize: "var(--semantic-typography-body-font-size)";
+                readonly fontWeight: "var(--semantic-typography-body-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-body-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-body-line-height)";
+                readonly maxWidth: "var(--semantic-typography-body-max-width)";
+            };
+            readonly ui: {
+                readonly fontFamily: "var(--semantic-typography-ui-font-family)";
+                readonly fontSize: "var(--semantic-typography-ui-font-size)";
+                readonly fontWeight: "var(--semantic-typography-ui-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-ui-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-ui-line-height)";
+                readonly maxWidth: "var(--semantic-typography-ui-max-width)";
+            };
+            readonly eyebrow: {
+                readonly fontFamily: "var(--semantic-typography-eyebrow-font-family)";
+                readonly fontSize: "var(--semantic-typography-eyebrow-font-size)";
+                readonly fontWeight: "var(--semantic-typography-eyebrow-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-eyebrow-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-eyebrow-line-height)";
+                readonly textTransform: "var(--semantic-typography-eyebrow-text-transform)";
+            };
+            readonly mono: {
+                readonly fontFamily: "var(--semantic-typography-mono-font-family)";
+                readonly fontSize: "var(--semantic-typography-mono-font-size)";
+                readonly fontWeight: "var(--semantic-typography-mono-font-weight)";
+                readonly letterSpacing: "var(--semantic-typography-mono-letter-spacing)";
+                readonly lineHeight: "var(--semantic-typography-mono-line-height)";
+                readonly maxWidth: "var(--semantic-typography-mono-max-width)";
+            };
+            readonly lineHeight: {
+                readonly none: "var(--semantic-typography-lineHeight-none)";
+            };
+        };
+        readonly docs: {
+            readonly space: {
+                readonly section: "var(--semantic-docs-space-section)";
+                readonly paragraph: "var(--semantic-docs-space-paragraph)";
+                readonly inline: "var(--semantic-docs-space-inline)";
+            };
+        };
+        readonly accent: {
+            readonly rest: "var(--semantic-accent-rest)";
+            readonly hover: "var(--semantic-accent-hover)";
+            readonly pressed: "var(--semantic-accent-pressed)";
+            readonly inactive: "var(--semantic-accent-inactive)";
+            readonly disabled: "var(--semantic-accent-disabled)";
+            readonly content: "var(--semantic-accent-content)";
+            readonly contentHover: "var(--semantic-accent-contentHover)";
+            readonly subtle: "var(--semantic-accent-subtle)";
+        };
+        readonly radius: {
+            readonly action: "var(--semantic-radius-action)";
+        };
+        readonly borderWidth: {
+            readonly default: "var(--semantic-borderWidth-default)";
+            readonly emphasis: "var(--semantic-borderWidth-emphasis)";
+        };
+        readonly shadow: {
+            readonly subtle: "var(--semantic-shadow-subtle)";
+            readonly floating: "var(--semantic-shadow-floating)";
+            readonly overlay: "var(--semantic-shadow-overlay)";
+        };
+        readonly elevation: {
+            readonly flat: {
+                readonly surface: "var(--semantic-elevation-flat-surface)";
+                readonly shadow: "var(--semantic-elevation-flat-shadow)";
+                readonly border: "var(--semantic-elevation-flat-border)";
+            };
+            readonly raised: {
+                readonly surface: "var(--semantic-elevation-raised-surface)";
+                readonly shadow: "var(--semantic-elevation-raised-shadow)";
+                readonly border: "var(--semantic-elevation-raised-border)";
+            };
+            readonly floating: {
+                readonly surface: "var(--semantic-elevation-floating-surface)";
+                readonly shadow: "var(--semantic-elevation-floating-shadow)";
+                readonly border: "var(--semantic-elevation-floating-border)";
+            };
+            readonly overlay: {
+                readonly surface: "var(--semantic-elevation-overlay-surface)";
+                readonly shadow: "var(--semantic-elevation-overlay-shadow)";
+                readonly border: "var(--semantic-elevation-overlay-border)";
+            };
+        };
+    };
+    readonly component: {
+        readonly nav: {
+            readonly bg: "var(--component-nav-bg)";
+            readonly bgActive: "var(--component-nav-bgActive)";
+            readonly borderActive: "var(--component-nav-borderActive)";
+            readonly text: "var(--component-nav-text)";
+            readonly textActive: "var(--component-nav-textActive)";
+            readonly height: "var(--component-nav-height)";
+            readonly paddingX: "var(--component-nav-paddingX)";
+            readonly paddingY: "var(--component-nav-paddingY)";
+        };
+        readonly tag: {
+            readonly background: "var(--component-tag-background)";
+            readonly text: "var(--component-tag-text)";
+            readonly border: "var(--component-tag-border)";
+            readonly radius: "var(--component-tag-radius)";
+            readonly fontSize: "var(--component-tag-fontSize)";
+            readonly fontWeight: "var(--component-tag-fontWeight)";
+            readonly lineHeight: "var(--component-tag-lineHeight)";
+            readonly minWidth: "var(--component-tag-minWidth)";
+            readonly minHeight: "var(--component-tag-minHeight)";
+            readonly paddingX: "var(--component-tag-paddingX)";
+            readonly paddingY: "var(--component-tag-paddingY)";
+            readonly activeText: "var(--component-tag-activeText)";
+            readonly activeBackground: "var(--component-tag-activeBackground)";
+            readonly activeBorder: "var(--component-tag-activeBorder)";
+            readonly activeHover: "var(--component-tag-activeHover)";
+        };
+        readonly badge: {
+            readonly fontSize: "var(--component-badge-fontSize)";
+            readonly fontWeight: "var(--component-badge-fontWeight)";
+            readonly text: "var(--component-badge-text)";
+            readonly bg: "var(--component-badge-bg)";
+            readonly radius: "var(--component-badge-radius)";
+            readonly height: "var(--component-badge-height)";
+            readonly minWidth: "var(--component-badge-minWidth)";
+            readonly paddingY: "var(--component-badge-paddingY)";
+            readonly paddingX: "var(--component-badge-paddingX)";
+        };
+        readonly button: {
+            readonly bg: "var(--component-button-bg)";
+            readonly bgHover: "var(--component-button-bgHover)";
+            readonly text: "var(--component-button-text)";
+            readonly radius: "var(--component-button-radius)";
+            readonly paddingX: "var(--component-button-paddingX)";
+            readonly paddingY: "var(--component-button-paddingY)";
+            readonly size: {
+                readonly sm: {
+                    readonly paddingX: "var(--component-button-size-sm-paddingX)";
+                    readonly paddingY: "var(--component-button-size-sm-paddingY)";
+                    readonly fontSize: "var(--component-button-size-sm-fontSize)";
+                    readonly iconSize: "var(--component-button-size-sm-iconSize)";
+                    readonly height: "var(--component-button-size-sm-height)";
+                    readonly itemSpacing: "var(--component-button-size-sm-itemSpacing)";
+                };
+                readonly md: {
+                    readonly paddingX: "var(--component-button-size-md-paddingX)";
+                    readonly paddingY: "var(--component-button-size-md-paddingY)";
+                    readonly fontSize: "var(--component-button-size-md-fontSize)";
+                    readonly iconSize: "var(--component-button-size-md-iconSize)";
+                    readonly height: "var(--component-button-size-md-height)";
+                    readonly itemSpacing: "var(--component-button-size-md-itemSpacing)";
+                };
+                readonly lg: {
+                    readonly paddingX: "var(--component-button-size-lg-paddingX)";
+                    readonly paddingY: "var(--component-button-size-lg-paddingY)";
+                    readonly fontSize: "var(--component-button-size-lg-fontSize)";
+                    readonly iconSize: "var(--component-button-size-lg-iconSize)";
+                    readonly height: "var(--component-button-size-lg-height)";
+                    readonly itemSpacing: "var(--component-button-size-lg-itemSpacing)";
+                };
+            };
+            readonly primary: {
+                readonly textDisabled: "var(--component-button-primary-textDisabled)";
+                readonly bgDisabled: "var(--component-button-primary-bgDisabled)";
+            };
+            readonly secondary: {
+                readonly bg: {
+                    readonly rest: "var(--component-button-secondary-bg-rest)";
+                    readonly hover: "var(--component-button-secondary-bg-hover)";
+                    readonly pressed: "var(--component-button-secondary-bg-pressed)";
+                };
+                readonly border: {
+                    readonly rest: "var(--component-button-secondary-border-rest)";
+                    readonly hover: "var(--component-button-secondary-border-hover)";
+                    readonly pressed: "var(--component-button-secondary-border-pressed)";
+                    readonly disabled: "var(--component-button-secondary-border-disabled)";
+                };
+                readonly text: "var(--component-button-secondary-text)";
+            };
+        };
+        readonly input: {
+            readonly bg: "var(--component-input-bg)";
+            readonly text: "var(--component-input-text)";
+            readonly border: "var(--component-input-border)";
+            readonly borderError: "var(--component-input-borderError)";
+            readonly radius: "var(--component-input-radius)";
+            readonly paddingX: "var(--component-input-paddingX)";
+            readonly paddingY: "var(--component-input-paddingY)";
+        };
+        readonly card: {
+            readonly bg: "var(--component-card-bg)";
+            readonly border: "var(--component-card-border)";
+            readonly radius: "var(--component-card-radius)";
+            readonly padding: "var(--component-card-padding)";
+            readonly gap: "var(--component-card-gap)";
+        };
+        readonly lightbox: {
+            readonly backdrop: {
+                readonly blur: "var(--component-lightbox-backdrop-blur)";
+            };
+        };
+    };
+    readonly role: {
+        readonly background: "var(--role-background)";
+        readonly foreground: "var(--role-foreground)";
+        readonly card: "var(--role-card)";
+        readonly "card-foreground": "var(--role-card-foreground)";
+        readonly popover: "var(--role-popover)";
+        readonly "popover-foreground": "var(--role-popover-foreground)";
+        readonly primary: "var(--role-primary)";
+        readonly "primary-foreground": "var(--role-primary-foreground)";
+        readonly secondary: "var(--role-secondary)";
+        readonly "secondary-foreground": "var(--role-secondary-foreground)";
+        readonly muted: "var(--role-muted)";
+        readonly "muted-foreground": "var(--role-muted-foreground)";
+        readonly accent: "var(--role-accent)";
+        readonly "accent-foreground": "var(--role-accent-foreground)";
+        readonly destructive: "var(--role-destructive)";
+        readonly "destructive-foreground": "var(--role-destructive-foreground)";
+        readonly border: "var(--role-border)";
+        readonly input: "var(--role-input)";
+        readonly ring: "var(--role-ring)";
+        readonly radius: "var(--role-radius)";
+    };
+};