/** * Astryx Design Tokens * * Defines all design tokens using StyleX defineVars. * - *Defaults: Plain objects with default values (used by defineVars and themes) * - *Vars: CSS custom properties that themes can override via createTheme * * SYNC: When modified, run `node scripts/generate-token-docs.mjs` to update docs. * CI checks for drift via --check flag. * * Domain tokens (syntax highlighting, data visualization) live separately in * /packages/core/src/theme/domainTokens/ — they're tree-shaken from core components. */ import * as stylex from '@stylexjs/stylex'; export declare const colorDefaults: { readonly '--color-accent': "light-dark(#0064E0, #2694FE)"; readonly '--color-accent-muted': "light-dark(#0082FB33, #0082FB3F)"; readonly '--color-on-accent': "light-dark(#FFFFFF, #FFFFFF)"; readonly '--color-neutral': "light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))"; readonly '--color-background-surface': "light-dark(#FFFFFF, #1F1F22)"; readonly '--color-background-body': "light-dark(#F1F4F7, #111112)"; readonly '--color-overlay': "light-dark(#01122866, #11111299)"; readonly '--color-overlay-hover': "light-dark(#0536590C, #FFFFFF0C)"; readonly '--color-overlay-pressed': "light-dark(#05365919, #FFFFFF19)"; readonly '--color-background-muted': "light-dark(#0536590C, #1111127F)"; readonly '--color-text-primary': "light-dark(#0A1317, #DFE2E5)"; readonly '--color-text-secondary': "light-dark(#4E606F, #AAAFB5)"; readonly '--color-text-disabled': "light-dark(#A4B0BC, #6F747C)"; readonly '--color-text-accent': "light-dark(#0064E0, #3E9EFB)"; readonly '--color-on-dark': "light-dark(#FFFFFF, #FFFFFF)"; readonly '--color-on-light': "light-dark(#000000, #000000)"; readonly '--color-icon-accent': "light-dark(#0064E0, #2694FE)"; readonly '--color-icon-primary': "light-dark(#0A1317, #DFE2E5)"; readonly '--color-icon-secondary': "light-dark(#4E606F, #AAAFB5)"; readonly '--color-icon-disabled': "light-dark(#A4B0BC, #6F747C)"; readonly '--color-background-card': "light-dark(#FFFFFF, #1F1F22)"; readonly '--color-background-popover': "light-dark(#FFFFFF, #28292C)"; readonly '--color-background-inverted': "light-dark(#0A1317, #FFFFFF)"; readonly '--color-background-error-inverted': "light-dark(#AA071E, #E3193B)"; readonly '--color-success': "light-dark(#0D8626, #0D8626)"; readonly '--color-success-muted': "light-dark(#0B991F33, #0B991F3F)"; readonly '--color-on-success': "light-dark(#FFFFFF, #FFFFFF)"; readonly '--color-error': "light-dark(#E3193B, #F5394F)"; readonly '--color-error-muted': "light-dark(#E3193B33, #F5394F3F)"; readonly '--color-on-error': "light-dark(#FFFFFF, #FFFFFF)"; readonly '--color-warning': "light-dark(#E9AF08, #F2C00B)"; readonly '--color-warning-muted': "light-dark(#E2A40033, #E2A4003F)"; readonly '--color-on-warning': "light-dark(#0A1317, #0A1317)"; readonly '--color-border': "light-dark(#05365919, #F2F4F619)"; readonly '--color-border-emphasized': "light-dark(#CCD3DB, #494D53)"; readonly '--color-skeleton': "light-dark(#CCD3DB, #5A5E66)"; readonly '--color-track': "light-dark(#CCD3DB, #5A5E66)"; readonly '--color-shadow': "light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3))"; readonly '--color-tint-hover': "light-dark(black, white)"; readonly '--color-background-blue': "light-dark(#0171E333, #0171E333)"; readonly '--color-border-blue': "light-dark(#0064E0, #2694FE)"; readonly '--color-icon-blue': "light-dark(#0064E0, #2694FE)"; readonly '--color-text-blue': "light-dark(#042F97, #AFD7FF)"; readonly '--color-background-cyan': "light-dark(#03A7D733, #03A7D733)"; readonly '--color-border-cyan': "light-dark(#089DD0, #0171A4)"; readonly '--color-icon-cyan': "light-dark(#00ACC1, #26C6DA)"; readonly '--color-text-cyan': "light-dark(#014975, #A1EEF9)"; readonly '--color-background-gray': "light-dark(#0A131733, #666A724C)"; readonly '--color-border-gray': "light-dark(#647685, #748695)"; readonly '--color-icon-gray': "light-dark(#4E606F, #AAAFB5)"; readonly '--color-text-gray': "light-dark(#0A1317, #E7EAED)"; readonly '--color-background-green': "light-dark(#24BB5E33, #24BB5E33)"; readonly '--color-border-green': "light-dark(#0D8626, #0B991F)"; readonly '--color-icon-green': "light-dark(#0D8626, #26A756)"; readonly '--color-text-green': "light-dark(#09441F, #A5F690)"; readonly '--color-background-orange': "light-dark(#F2790233, #F2790233)"; readonly '--color-border-orange': "light-dark(#EB6E00, #B34A01)"; readonly '--color-icon-orange': "light-dark(#E9690B, #FB8C00)"; readonly '--color-text-orange': "light-dark(#6B2203, #FDB876)"; readonly '--color-background-pink': "light-dark(#E638B333, #E638B333)"; readonly '--color-border-pink': "light-dark(#F351C0, #C02294)"; readonly '--color-icon-pink': "light-dark(#C2185B, #EC407A)"; readonly '--color-text-pink': "light-dark(#650053, #FEADE3)"; readonly '--color-background-purple': "light-dark(#7952FF33, #7952FF33)"; readonly '--color-border-purple': "light-dark(#9081FF, #7340FE)"; readonly '--color-icon-purple': "light-dark(#5B08D8, #7952FF)"; readonly '--color-text-purple': "light-dark(#3E0697, #B3B0FE)"; readonly '--color-background-red': "light-dark(#E3193B33, #E3193B33)"; readonly '--color-border-red': "light-dark(#E3193B, #F5394F)"; readonly '--color-icon-red': "light-dark(#D31130, #E3193B)"; readonly '--color-text-red': "light-dark(#7B0210, #FFB2B8)"; readonly '--color-background-teal': "light-dark(#0DB7AF33, #0DB7AF33)"; readonly '--color-border-teal': "light-dark(#08A3A3, #08767D)"; readonly '--color-icon-teal': "light-dark(#009688, #26A69A)"; readonly '--color-text-teal': "light-dark(#083943, #40DCCD)"; readonly '--color-background-yellow': "light-dark(#E2A40033, #E2A40033)"; readonly '--color-border-yellow': "light-dark(#C58600, #B47700)"; readonly '--color-icon-yellow': "light-dark(#FBC02D, #FFEE58)"; readonly '--color-text-yellow': "light-dark(#753F07, #FBCE03)"; }; export declare const colorVars: stylex.VarGroup, symbol>; export declare const spacingDefaults: { readonly '--spacing-0': "0px"; readonly '--spacing-0-5': "2px"; readonly '--spacing-1': "4px"; readonly '--spacing-1-5': "6px"; readonly '--spacing-2': "8px"; readonly '--spacing-3': "12px"; readonly '--spacing-4': "16px"; readonly '--spacing-5': "20px"; readonly '--spacing-6': "24px"; readonly '--spacing-7': "28px"; readonly '--spacing-8': "32px"; readonly '--spacing-9': "36px"; readonly '--spacing-10': "40px"; readonly '--spacing-11': "44px"; readonly '--spacing-12': "48px"; }; export declare const spacingVars: stylex.VarGroup, symbol>; export declare const sizeDefaults: { readonly '--size-element-sm': "28px"; readonly '--size-element-md': "32px"; readonly '--size-element-lg': "36px"; }; export declare const sizeVars: stylex.VarGroup, symbol>; export declare const borderDefaults: { readonly '--border-width': "1px"; }; export declare const borderVars: stylex.VarGroup, symbol>; export type BorderVarName = keyof typeof borderDefaults; export declare const radiusDefaults: { readonly '--radius-none': "0px"; readonly '--radius-inner': "4px"; readonly '--radius-element': "8px"; readonly '--radius-container': "12px"; readonly '--radius-page': "28px"; readonly '--radius-chat': "28px"; readonly '--radius-full': "9999px"; }; export declare const radiusVars: stylex.VarGroup, symbol>; export declare const shadowDefaults: { readonly '--shadow-low': "0px 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2))"; readonly '--shadow-med': "0px 1px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 2px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2))"; readonly '--shadow-high': "0px 2px 2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)), 0px 8px 24px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3))"; readonly '--shadow-inset-hover': "inset 0px 0px 0px 2px light-dark(rgba(5, 54, 89, 0.15), rgba(223, 226, 229, 0.2))"; readonly '--shadow-inset-selected': "inset 0px 0px 0px 2px rgba(1, 113, 227, 0.5)"; readonly '--shadow-inset-success': "inset 0px 0px 0px 2px rgba(38, 167, 86, 0.3)"; readonly '--shadow-inset-warning': "inset 0px 0px 0px 2px rgba(226, 164, 0, 0.3)"; readonly '--shadow-inset-error': "inset 0px 0px 0px 2px rgba(227, 25, 59, 0.3)"; }; export declare const shadowVars: stylex.VarGroup, symbol>; export declare const durationDefaults: { readonly '--duration-fast-min': "130ms"; readonly '--duration-fast': "175ms"; readonly '--duration-fast-max': "230ms"; readonly '--duration-medium-min': "310ms"; readonly '--duration-medium': "410ms"; readonly '--duration-medium-max': "550ms"; readonly '--duration-slow-min': "730ms"; readonly '--duration-slow': "975ms"; readonly '--duration-slow-max': "1300ms"; }; export declare const durationVars: stylex.VarGroup, symbol>; export type DurationVarName = keyof typeof durationDefaults; export declare const easeDefaults: { readonly '--ease-standard': "cubic-bezier(0.24, 1, 0.4, 1)"; }; export declare const easeVars: stylex.VarGroup, symbol>; export type EaseVarName = keyof typeof easeDefaults; export declare const typographyDefaults: { readonly '--font-family-body': "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"; readonly '--font-family-code': "\"SF Mono\", Monaco, Consolas, monospace"; readonly '--font-family-heading': "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"; }; export declare const typographyVars: stylex.VarGroup, symbol>; export declare const textSizeDefaults: { readonly '--font-size-4xs': "0.375rem"; readonly '--font-size-3xs': "0.4375rem"; readonly '--font-size-2xs': "0.5rem"; readonly '--font-size-xs': "0.625rem"; readonly '--font-size-sm': "0.75rem"; readonly '--font-size-base': "0.875rem"; readonly '--font-size-lg': "1.0625rem"; readonly '--font-size-xl': "1.25rem"; readonly '--font-size-2xl': "1.5rem"; readonly '--font-size-3xl': "1.8125rem"; readonly '--font-size-4xl': "2.1875rem"; readonly '--font-size-5xl': "2.625rem"; }; export declare const textSizeVars: stylex.VarGroup, symbol>; export declare const fontWeightDefaults: { readonly '--font-weight-normal': "400"; readonly '--font-weight-medium': "500"; readonly '--font-weight-semibold': "600"; readonly '--font-weight-bold': "700"; }; export declare const fontWeightVars: stylex.VarGroup, symbol>; export type ColorVarName = keyof typeof colorDefaults; export type SpacingVarName = keyof typeof spacingDefaults; export type SizeVarName = keyof typeof sizeDefaults; export type RadiusVarName = keyof typeof radiusDefaults; export type ShadowVarName = keyof typeof shadowDefaults; export type TypographyVarName = keyof typeof typographyDefaults; export type TextSizeVarName = keyof typeof textSizeDefaults; export type FontWeightVarName = keyof typeof fontWeightDefaults; export declare const typeScaleDefaults: { readonly '--text-heading-1-size': "var(--font-size-2xl)"; readonly '--text-heading-1-weight': "var(--font-weight-semibold)"; readonly '--text-heading-1-leading': "1.3333"; readonly '--text-heading-2-size': "var(--font-size-xl)"; readonly '--text-heading-2-weight': "var(--font-weight-semibold)"; readonly '--text-heading-2-leading': "1.4"; readonly '--text-heading-3-size': "var(--font-size-lg)"; readonly '--text-heading-3-weight': "var(--font-weight-semibold)"; readonly '--text-heading-3-leading': "1.4118"; readonly '--text-heading-4-size': "var(--font-size-base)"; readonly '--text-heading-4-weight': "var(--font-weight-semibold)"; readonly '--text-heading-4-leading': "1.4286"; readonly '--text-heading-5-size': "var(--font-size-sm)"; readonly '--text-heading-5-weight': "var(--font-weight-semibold)"; readonly '--text-heading-5-leading': "1.6667"; readonly '--text-heading-6-size': "var(--font-size-xs)"; readonly '--text-heading-6-weight': "var(--font-weight-semibold)"; readonly '--text-heading-6-leading': "1.6"; readonly '--text-body-size': "var(--font-size-base)"; readonly '--text-body-weight': "var(--font-weight-normal)"; readonly '--text-body-leading': "1.4286"; readonly '--text-large-size': "var(--font-size-lg)"; readonly '--text-large-weight': "var(--font-weight-semibold)"; readonly '--text-large-leading': "1.4118"; readonly '--text-label-size': "var(--font-size-base)"; readonly '--text-label-weight': "var(--font-weight-medium)"; readonly '--text-label-leading': "1.4286"; readonly '--text-code-size': "var(--font-size-base)"; readonly '--text-code-weight': "var(--font-weight-normal)"; readonly '--text-code-leading': "1.4286"; readonly '--text-supporting-size': "var(--font-size-sm)"; readonly '--text-supporting-weight': "var(--font-weight-normal)"; readonly '--text-supporting-leading': "1.6667"; readonly '--text-display-1-size': "var(--font-size-5xl)"; readonly '--text-display-1-weight': "var(--font-weight-normal)"; readonly '--text-display-1-leading': "1.2381"; readonly '--text-display-2-size': "var(--font-size-4xl)"; readonly '--text-display-2-weight': "var(--font-weight-normal)"; readonly '--text-display-2-leading': "1.2571"; readonly '--text-display-3-size': "var(--font-size-3xl)"; readonly '--text-display-3-weight': "var(--font-weight-normal)"; readonly '--text-display-3-leading': "1.2414"; }; export declare const typeScaleVars: stylex.VarGroup, symbol>; export type TypeScaleVarName = keyof typeof typeScaleDefaults; //# sourceMappingURL=tokens.stylex.d.ts.map