august-design-system

/** * AugustDesignSystem - Token Type Definitions * * Core type definitions for design tokens following Apple HIG standards. * These types ensure type-safe access to all design tokens throughout the system. */ /** * Semantic color roles following Apple's color system. * Each color has both light and dark mode variants. */ interface ColorTokens { readonly background: { readonly primary: string; readonly secondary: string; readonly tertiary: string; readonly grouped: string; readonly groupedSecondary: string; readonly groupedTertiary: string; }; readonly label: { readonly primary: string; readonly secondary: string; readonly tertiary: string; readonly quaternary: string; }; readonly fill: { readonly primary: string; readonly secondary: string; readonly tertiary: string; readonly quaternary: string; }; readonly separator: { readonly opaque: string; readonly nonOpaque: string; }; readonly system: { readonly red: string; readonly orange: string; readonly yellow: string; readonly green: string; readonly mint: string; readonly teal: string; readonly cyan: string; readonly blue: string; readonly indigo: string; readonly purple: string; readonly pink: string; readonly brown: string; readonly gray: string; readonly gray2: string; readonly gray3: string; readonly gray4: string; readonly gray5: string; readonly gray6: string; }; readonly semantic: { readonly success: string; readonly warning: string; readonly error: string; readonly info: string; }; readonly interactive: { readonly tint: string; readonly tintPressed: string; readonly tintDisabled: string; readonly destructive: string; readonly destructivePressed: string; }; readonly material: { readonly thin: string; readonly regular: string; readonly thick: string; readonly chrome: string; }; } /** * Font weight values following SF Pro specifications. */ type FontWeight = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; /** * Individual typography style definition. */ interface TypographyStyle { readonly fontFamily: string; readonly fontSize: number; readonly lineHeight: number; readonly letterSpacing: number; readonly fontWeight: FontWeight; } /** * Complete typography scale following Apple's Dynamic Type system. * Includes all standard iOS text styles. */ interface TypographyTokens { readonly largeTitle: TypographyStyle; readonly title1: TypographyStyle; readonly title2: TypographyStyle; readonly title3: TypographyStyle; readonly headline: TypographyStyle; readonly subheadline: TypographyStyle; readonly body: TypographyStyle; readonly callout: TypographyStyle; readonly footnote: TypographyStyle; readonly caption1: TypographyStyle; readonly caption2: TypographyStyle; } /** * Font family definitions. */ interface FontFamilyTokens { readonly regular: string; readonly medium: string; readonly semibold: string; readonly bold: string; readonly heavy: string; readonly monospace: string; readonly rounded: string; } /** * Spacing scale based on 4pt grid system. * Apple uses 8pt as base unit; we use 4pt for finer control. */ interface SpacingTokens { readonly none: number; readonly xxs: number; readonly xs: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; readonly xxl: number; readonly xxxl: number; readonly xxxxl: number; readonly xxxxxl: number; readonly inset: { readonly none: number; readonly xs: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; }; readonly stack: { readonly none: number; readonly xs: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; }; readonly inline: { readonly none: number; readonly xs: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; }; } /** * Border radius scale following Apple's continuous corner curve style. */ interface RadiusTokens { readonly none: number; readonly xs: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; readonly xxl: number; readonly full: number; } /** * Individual shadow definition following React Native's shadow properties. */ interface ShadowStyle { readonly shadowColor: string; readonly shadowOffset: { readonly width: number; readonly height: number; }; readonly shadowOpacity: number; readonly shadowRadius: number; readonly elevation: number; } /** * Elevation scale for depth hierarchy. */ interface ShadowTokens { readonly none: ShadowStyle; readonly xs: ShadowStyle; readonly sm: ShadowStyle; readonly md: ShadowStyle; readonly lg: ShadowStyle; readonly xl: ShadowStyle; readonly xxl: ShadowStyle; } /** * Duration values in milliseconds. */ interface DurationTokens { readonly instant: number; readonly fastest: number; readonly faster: number; readonly fast: number; readonly normal: number; readonly slow: number; readonly slower: number; readonly slowest: number; } /** * Easing curves for animations. */ interface EasingTokens { readonly linear: readonly [number, number, number, number]; readonly easeIn: readonly [number, number, number, number]; readonly easeOut: readonly [number, number, number, number]; readonly easeInOut: readonly [number, number, number, number]; readonly spring: { readonly damping: number; readonly stiffness: number; readonly mass: number; }; readonly springGentle: { readonly damping: number; readonly stiffness: number; readonly mass: number; }; readonly springBouncy: { readonly damping: number; readonly stiffness: number; readonly mass: number; }; } /** * Complete animation tokens. */ interface AnimationTokens { readonly duration: DurationTokens; readonly easing: EasingTokens; } /** * Component sizing following Apple HIG minimum touch targets (44pt). */ interface SizeTokens { readonly touchTarget: { readonly minimum: number; readonly comfortable: number; readonly spacious: number; }; readonly icon: { readonly xs: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; readonly xxl: number; }; readonly avatar: { readonly xs: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; readonly xxl: number; }; readonly button: { readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; }; readonly input: { readonly sm: number; readonly md: number; readonly lg: number; }; } /** * Z-index scale for layering. */ interface ZIndexTokens { readonly base: number; readonly dropdown: number; readonly sticky: number; readonly overlay: number; readonly modal: number; readonly popover: number; readonly tooltip: number; readonly toast: number; } /** * Responsive breakpoints based on device sizes. */ interface BreakpointTokens { readonly xs: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; } /** * Opacity values for various states. */ interface OpacityTokens { readonly transparent: number; readonly disabled: number; readonly medium: number; readonly high: number; readonly opaque: number; } /** * Complete design token set combining all token categories. */ interface DesignTokens { readonly colors: ColorTokens; readonly typography: TypographyTokens; readonly fontFamily: FontFamilyTokens; readonly spacing: SpacingTokens; readonly radius: RadiusTokens; readonly shadows: ShadowTokens; readonly animation: AnimationTokens; readonly sizes: SizeTokens; readonly zIndex: ZIndexTokens; readonly breakpoints: BreakpointTokens; readonly opacity: OpacityTokens; } export type { AnimationTokens as A, BreakpointTokens as B, ColorTokens as C, DurationTokens as D, EasingTokens as E, FontWeight as F, OpacityTokens as O, RadiusTokens as R, SpacingTokens as S, TypographyStyle as T, ZIndexTokens as Z, DesignTokens as a, TypographyTokens as b, FontFamilyTokens as c, ShadowStyle as d, ShadowTokens as e, SizeTokens as f };