@smtv/design-tokens
Version:
Design tokens for SMTV component library and TV app prototype
66 lines (64 loc) • 1.93 kB
CSS
/**
* Do not edit directly
* Generated on Thu, 15 May 2025 13:21:30 GMT
*/
:root {
--animation-transition-duration: 200ms;
--animation-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
--animation-focus-scale: 1.02;
--focus-outline-width: 10px;
--focus-ring-offset: 0;
--focus-ring-style: solid;
--tv-width: 1920px;
--tv-height: 1080px;
--tv-base-font-size: 16px;
--color-primary: #007AFF;
--color-primary-dark: #0056B3;
--color-background: #121212;
--color-surface: #1E1E1E;
--color-text-primary: #FFFFFF;
--color-text-secondary: #B3B3B3;
--color-success: #34C759;
--color-warning: #FFD60A;
--color-error: #FF3B30;
--color-outline-secondary: #707070;
--color-focus-ring: #fff;
--color-focus-bg: rgba(0, 122, 255, 0.1);
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-s12: 12px;
--spacing-md: 16px;
--spacing-m20: 20px;
--spacing-lg: 24px;
--spacing-l28: 28px;
--spacing-xl: 32px;
--spacing-x36: 36px;
--spacing-x40: 40px;
--spacing-x44: 44px;
--spacing-xxl: 48px;
--component-button-height-small: 36px;
--component-button-height-medium: 48px;
--component-button-height-large: 64px;
--component-button-padding: 16px 24px;
--component-button-radius: 8px;
--component-button-min-width-small: 100px;
--component-button-min-width-default: 120px;
--component-button-min-width-large: 140px;
--component-card-size: 300px;
--component-card-padding: 24px;
--component-card-radius: 24px;
--component-input-height: 48px;
--component-input-padding: 12px 16px;
--component-input-radius: 8px;
--component-header-height: 100px;
--font-family-primary: 'Inter', sans-serif;
--font-family-secondary: 'SF Pro Display', sans-serif;
--font-size-h1: 48px;
--font-size-h2: 36px;
--font-size-h3: 28px;
--font-size-body: 24px;
--font-size-small: 16px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
}