/* ============================================ RELAY DESIGN SYSTEM — tokens.css Three-tier token architecture: 1. Primitives — raw values, theme-agnostic 2. Semantic — meaning, theme-aware (light/dark) 3. Component — component-specific, point to semantic ============================================ */ /* ============================================ 1. PRIMITIVE TOKENS Raw values. Never reference other tokens. Never used directly in components. ============================================ */ :root { /* --- Color: Warm (background family) --- */ --warm-25: #FFFCF8; --warm-40: #FCF0E2; --warm-50: #FBF4EC; --warm-75: #FAE3C8; --warm-100: #F6E2CD; --warm-200: #F3D9BE; --warm-300: #EFCBA6; --warm-400: #F5C185; /* saturated peach — celebration wash */ /* --- Color: Brown (warm text accent) --- */ --brown-800: #583102; /* deep warm brown — celebration headings */ /* --- Color: Blue (accent family) --- */ --blue-50: #E8EAFC; --blue-100: #D5D9F8; --blue-200: #B0B7F0; --blue-350: #6B78FF; /* bright periwinkle — dark-mode accent */ --blue-400: #6470E8; --blue-500: #4D5BE3; --blue-600: #3A45B0; --blue-700: #2C357F; /* --- Color: Neutral (text + surfaces, both themes) --- */ --neutral-0: #FFFFFF; --neutral-50: #FAFBFE; --neutral-100: #F3F5FC; --neutral-200: #E8E6E1; --neutral-250: #D8D2CA; --neutral-300: #B5ABA2; --neutral-400: #8A8079; --neutral-600: #5A534D; --neutral-700: #444342; --neutral-800: #2B2622; --neutral-900: #1C1916; --neutral-950: #121010; /* --- Color: Teal (dark-mode surface family) --- */ --teal-900: #124649; /* deepest teal — gradient top / page */ --teal-800: #165655; /* mid teal — raised surfaces / gradient */ --teal-700: #4A7578; /* muted teal — checkbox / inverse surface */ --teal-600: #427F7D; /* brighter teal — gradient base */ /* --- Color: Functional --- */ --amber-100: #FBF0E2; --amber-500: #D98324; --amber-700: #9E5D14; --green-100: #E2F3EA; --green-500: #2E9E6B; --green-700: #1E6B48; --red-100: #FBE5E5; --red-500: #DB4A4A; --red-700: #9E2D2D; /* --- Spacing scale (8px base) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* --- Radius scale --- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 30px; --radius-full: 9999px; /* --- Typography: family --- */ --font-family: 'Plus Jakarta Sans', sans-serif; /* --- Typography: size --- */ --font-size-xs: 11px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 19px; --font-size-2xl: 22px; /* off-scale sizes used by specific components */ --font-size-12: 12px; --font-size-15: 15px; --font-size-17: 17px; --font-size-28: 28px; /* --- Typography: weight --- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* --- Typography: line height --- */ --line-height-tight: 1.3; --line-height-base: 1.5; /* --- Shadow --- */ --shadow-card: 0 2px 10px rgba(43, 38, 34, 0.04); --shadow-float: 0 8px 30px rgba(43, 38, 34, 0.15); --shadow-accent: 0 6px 18px rgba(77, 91, 227, 0.40); --shadow-finish: 0 4px 14px rgba(77, 91, 227, 0.30); --shadow-seg: 0 1px 3px rgba(43, 38, 34, 0.12); /* --- Blur scale --- */ --blur-sm: 10px; /* glass / frosted panels */ --blur-md: 24px; /* heavy frosted overlays */ /* --- Motion --- */ --duration-fast: 200ms; --duration-base: 320ms; --easing-standard: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic — gentle, natural deceleration */ --easing-decelerate: cubic-bezier(0.16, 1, 0.3, 1); /* --- Type styles (composite shorthands: weight size/line-height family) --- Typography is theme-agnostic, so these compose primitives directly. --- */ --font: var(--font-family); --ease: var(--duration-fast) var(--easing-standard); --ease-out: var(--duration-base) var(--easing-decelerate); --t-h1: var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-tight) var(--font-family); --t-h2: var(--font-weight-bold) var(--font-size-xl)/var(--line-height-tight) var(--font-family); --t-title: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-tight) var(--font-family); --t-body: var(--font-weight-medium) var(--font-size-md)/var(--line-height-base) var(--font-family); --t-body-r: var(--font-weight-regular) var(--font-size-md)/var(--line-height-base) var(--font-family); --t-action: var(--font-weight-semibold) var(--font-size-15)/1 var(--font-family); --t-sm: var(--font-weight-medium) var(--font-size-sm)/1.4 var(--font-family); --t-cat: var(--font-weight-medium) var(--font-size-sm)/var(--line-height-tight) var(--font-family); --t-xs: var(--font-weight-semibold) var(--font-size-xs)/1.2 var(--font-family); } /* ============================================ 2. SEMANTIC TOKENS — LIGHT MODE (default) Meaning attached. Reference primitives only. This layer carries the theme. ============================================ */ :root { /* --- Background --- */ --color-background-header-start: var(--warm-100); --color-background-header-end: var(--warm-200); --color-background-page: var(--neutral-0); --color-surface-raised: var(--neutral-50); --color-surface-raised-hover: var(--neutral-100); --color-surface-inverse: var(--neutral-0); /* --- Glass surfaces (glassmorphism — opacity baked in) --- */ --color-surface-glass: rgba(250, 251, 254, 0.20); /* card default bg */ --color-surface-glass-raised: rgba(250, 251, 254, 0.50); /* raised glass card */ --color-surface-glass-active: rgba(243, 245, 252, 0.74); /* card clicked bg */ --color-surface-icon-tile: rgba(0, 0, 0, 0.05); /* icon tile default */ --color-surface-icon-tile-active: rgba(0, 0, 0, 0.10); /* icon tile clicked */ /* --- Input focus wrapper --- */ --color-input-focus-wrapper: var(--blue-100); /* --- Background gradient (warm wash → page) --- */ --color-background-gradient-1: var(--warm-75); --color-background-gradient-2: var(--warm-40); --color-background-gradient-3: var(--warm-25); --color-background-gradient-4: var(--neutral-0); /* --- Confirm gradient (celebration wash — warmer than app shell) --- */ --color-confirm-gradient-top: var(--warm-400); --color-confirm-gradient-mid: var(--warm-40); --color-confirm-gradient-end: var(--warm-25); /* --- Text --- */ --color-text-primary: var(--neutral-800); --color-text-secondary: var(--neutral-400); --color-text-tertiary: var(--neutral-300); --color-text-subdued: var(--neutral-700); /* mid-tone: between primary and secondary */ --color-text-warm-strong: var(--brown-800); /* warm heading on celebration wash */ --color-text-on-accent: var(--neutral-0); /* --- Accent --- */ --color-accent: var(--blue-500); --color-accent-hover: var(--blue-600); --color-accent-soft: var(--blue-50); --color-accent-line: var(--blue-500); --color-accent-line-off: rgba(77, 91, 227, 0.15); /* --- Functional --- */ --color-warning: var(--amber-500); --color-warning-soft: var(--amber-100); --color-success: var(--green-500); --color-success-soft: var(--green-100); --color-danger: var(--red-500); --color-danger-soft: var(--red-100); /* --- Border --- */ --color-border-subtle: rgba(43, 38, 34, 0.06); --color-border-accent: rgba(77, 91, 227, 0.18); /* --- Misc --- */ --color-backdrop: var(--neutral-250); /* area around the device frame */ --color-accent-ring: rgba(77, 91, 227, 0.30); /* focus rings */ --color-overlay: rgba(43, 38, 34, 0.45); /* modal / sheet scrim */ --color-accent-pulse-start: rgba(77, 91, 227, 0); /* pulse ring keyframe — invisible */ --color-accent-pulse-end: rgba(77, 91, 227, 0.22); /* pulse ring keyframe — visible */ --color-on-accent-scrim: rgba(255, 255, 255, 0.22); /* translucent fill on accent surfaces */ /* --- Component surfaces (theme-aware; warm in light → cool in dark) --- */ --color-finish-surface: rgba(77, 91, 227, 0.05); /* Done-button fill — 5% accent tint */ --color-finish-surface-hover: rgba(77, 91, 227, 0.10); --color-tabbar-surface: rgba(250, 251, 254, 0.45); /* floating tab bar glass */ --color-summary-add-surface: var(--color-surface-glass-active); /* confirm "add another" */ } /* ============================================ 2b. SEMANTIC TOKENS — DARK MODE (placeholder) Structure ready. Values to be designed later. Only the semantic layer changes between themes. ============================================ */ [data-theme="dark"] { /* --- Background (teal surface family) --- */ --color-background-header-start: var(--teal-900); --color-background-header-end: var(--teal-800); --color-background-page: var(--teal-900); --color-surface-raised: var(--teal-800); --color-surface-raised-hover: var(--teal-700); --color-surface-inverse: var(--teal-700); /* #4A7578 — checkbox fill */ /* --- Background gradient (deep teal wash: #124649 → #165655, stays dark to match Figma) --- */ --color-background-gradient-1: var(--teal-900); --color-background-gradient-2: var(--teal-900); --color-background-gradient-3: var(--teal-800); --color-background-gradient-4: var(--teal-800); /* --- Confirm gradient (same deep teal wash) --- */ --color-confirm-gradient-top: var(--teal-900); --color-confirm-gradient-mid: var(--teal-800); --color-confirm-gradient-end: var(--teal-800); /* --- Glass surfaces (light film over teal) --- */ --color-surface-glass: rgba(250, 251, 254, 0.10); /* card default bg → ~#29585B over teal-900 */ --color-surface-glass-raised: rgba(250, 251, 254, 0.12); /* raised glass card → ~#2C6463 (Figma note card) */ --color-surface-glass-active: rgba(250, 251, 254, 0.14); /* card clicked bg */ --color-surface-icon-tile: rgba(255, 255, 255, 0.08); --color-surface-icon-tile-active: rgba(255, 255, 255, 0.14); /* --- Input focus wrapper --- */ --color-input-focus-wrapper: var(--blue-400); /* --- Text --- */ --color-text-primary: var(--neutral-50); --color-text-secondary: var(--neutral-300); --color-text-tertiary: var(--neutral-400); --color-text-subdued: var(--neutral-200); /* mid-tone in dark mode */ --color-text-warm-strong: var(--warm-50); /* #FBF4EC — confirm heading on teal */ --color-text-on-accent: var(--neutral-0); /* --- Accent (brighter periwinkle on teal) --- */ --color-accent: var(--blue-350); /* #6B78FF */ --color-accent-hover: var(--blue-400); --color-accent-soft: rgba(107, 120, 255, 0.18); --color-accent-line: var(--blue-350); --color-accent-line-off: rgba(107, 120, 255, 0.25); /* --- Functional --- */ --color-warning: var(--amber-500); --color-warning-soft: rgba(217, 131, 36, 0.18); --color-success: var(--green-500); --color-success-soft: rgba(46, 158, 107, 0.18); --color-danger: var(--red-500); --color-danger-soft: rgba(219, 74, 74, 0.18); /* --- Border --- */ --color-border-subtle: rgba(255, 255, 255, 0.08); --color-border-accent: rgba(100, 112, 232, 0.30); /* --- Misc --- */ --color-backdrop: var(--neutral-950); --color-accent-ring: rgba(100, 112, 232, 0.40); --color-overlay: rgba(0, 0, 0, 0.60); --color-accent-pulse-start: rgba(107, 120, 255, 0); --color-accent-pulse-end: rgba(107, 120, 255, 0.30); --color-on-accent-scrim: rgba(255, 255, 255, 0.22); /* --- Component surfaces (theme-aware; warm in light → cool in dark) --- */ --color-finish-surface: rgba(160, 164, 208, 0.12); /* Done-button fill */ --color-finish-surface-hover: rgba(160, 164, 208, 0.20); --color-tabbar-surface: rgba(123, 123, 123, 0.45); /* floating tab bar glass */ --color-summary-add-surface: rgba(77, 91, 227, 0.05); /* confirm "add another" */ } /* ============================================ 3. COMPONENT TOKENS Component-specific. Reference semantic only. Never change between themes — the semantic tokens underneath do the work. ============================================ */ :root { /* --- App shell --- */ --app-background: var(--color-background-page); --app-header-start: var(--color-background-header-start); --app-header-end: var(--color-background-header-end); --app-background-gradient: linear-gradient( 156deg, var(--color-background-gradient-1) 0%, var(--color-background-gradient-2) 7%, var(--color-background-gradient-3) 21%, var(--color-background-gradient-4) 42% ); /* --- Header --- */ --header-title-color: var(--color-text-primary); --header-avatar-bg: #f5c185; /* warm amber backdrop for avatar image */ /* --- Done button --- */ --finish-button-bg: var(--color-finish-surface); --finish-button-bg-hover: var(--color-finish-surface-hover); --finish-button-text: var(--color-text-primary); --finish-button-border: var(--color-border-subtle); --finish-button-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* --- Section header --- */ --section-title-color: var(--color-text-primary); --section-count-color: var(--color-text-secondary); /* --- Card (task / note / report) --- */ --card-background: var(--color-surface-raised); --card-background-hover: var(--color-surface-raised-hover); --card-radius: var(--radius-lg); --card-padding: var(--space-4); --card-shadow: var(--shadow-card); --card-border-active: var(--color-border-subtle); --card-glass-bg: var(--color-surface-glass); /* glassmorphism fill */ --card-glass-bg-active: var(--color-surface-glass-active); /* glassmorphism fill — clicked */ /* --- Accent line --- */ --card-line-active: var(--color-accent-line); --card-line-inactive: var(--color-accent-line-off); /* --- Checkbox --- */ --checkbox-border: var(--color-border-accent); --checkbox-bg: var(--color-surface-inverse); --checkbox-checked-bg: var(--color-accent); --checkbox-check-color: var(--color-text-on-accent); /* --- Icon tile --- */ --icon-tile-bg: var(--color-surface-icon-tile); /* updated: 5% black overlay */ --icon-tile-bg-active: var(--color-surface-icon-tile-active); /* 10% black overlay (clicked) */ --icon-tile-color: var(--color-accent); /* --- Task text --- */ --task-name-color: var(--color-text-primary); --task-category-color: var(--color-text-secondary); --task-done-color: var(--color-text-secondary); --task-input-placeholder: var(--color-text-secondary); --task-input-active: var(--color-text-secondary); /* --- Note --- */ --note-avatar-bg: var(--color-accent); --note-avatar-text: var(--color-text-on-accent); --note-text-color: var(--color-text-primary); --note-edit-color: var(--color-accent); /* --- Report icon variants --- */ --report-icon-warn: var(--color-warning); --report-icon-stock: var(--color-accent); /* --- Add button (muted neutral per design: border neutral-400, text neutral-300) --- */ --add-button-border: var(--color-text-tertiary); --add-button-text: var(--color-text-secondary); --add-button-bg-hover: var(--color-surface-glass); /* --- Normalising copy --- */ --normalising-text-color: var(--color-text-tertiary); /* --- Tab bar --- */ --tabbar-bg: var(--color-tabbar-surface); /* near-white in light, grey-teal in dark */ --tabbar-blur: var(--blur-sm); /* glass effect — Figma GLASS radius 10 */ --tabbar-shadow: var(--shadow-float); --tab-icon-inactive: var(--color-text-subdued); /* #444342 — mid-tone neutral */ --tab-label-inactive: var(--color-text-subdued); --tab-icon-active: var(--color-accent-hover); /* #3A45B0 — deeper blue */ --tab-label-active: var(--color-accent-hover); --tab-active-pill-bg: rgba(0, 0, 0, 0.07); /* subtle dark overlay */ --tab-active-pill-border: var(--color-border-subtle); /* rgba(43,38,34,0.06) */ --tab-plus-bg: var(--color-accent); --tab-plus-icon: var(--color-text-on-accent); --tab-plus-shadow: var(--shadow-accent); /* --- App shell extras --- */ --app-backdrop: var(--color-backdrop); --finish-button-pressed-shadow: var(--shadow-finish); --overlay-bg: var(--color-overlay); /* --- Layout dimensions --- */ --device-width: 390px; --device-height: 844px; --device-radius: 44px; --curve-height: 40px; --tabbar-clearance: 120px; /* --- Inputs (search / text fields / inline detail) --- */ --input-bg: var(--color-surface-raised); --input-border: var(--color-border-subtle); --input-text: var(--color-text-primary); --input-placeholder: var(--color-text-tertiary); --input-focus-border: var(--color-accent); --input-focus-ring: var(--color-accent-ring); --input-focus-wrapper-bg: var(--color-input-focus-wrapper); /* --- Swipe-to-delete --- */ --swipe-delete-bg: var(--color-danger); --swipe-delete-icon: var(--color-text-on-accent); /* --- Bottom sheet --- */ --sheet-bg: var(--color-background-page); --sheet-handle: var(--color-text-tertiary); --sheet-border: var(--color-border-subtle); --sheet-tab-color: var(--color-text-secondary); --sheet-tab-active: var(--color-accent); /* --- Pick row (sheet list item) --- */ --pick-row-bg: var(--color-surface-raised); --pick-row-bg-hover: var(--color-surface-raised-hover); --pick-row-border: var(--color-border-subtle); --pick-row-selected-bg: var(--color-accent-soft); --pick-row-selected-border:var(--color-accent); --radio-border: var(--color-border-accent); --radio-fill: var(--color-accent); /* --- Chip --- */ --chip-bg: var(--color-surface-raised); --chip-border: var(--color-border-subtle); --chip-text: var(--color-text-primary); --chip-active-bg: var(--color-accent); --chip-active-text: var(--color-text-on-accent); /* --- One-off / dashed secondary button --- */ --oneoff-border: var(--color-border-accent); --oneoff-text: var(--color-text-secondary); /* --- Menu drawer --- */ --menu-bg: var(--color-background-page); --menu-border: var(--color-border-subtle); --menu-avatar-bg: var(--color-accent); --menu-avatar-text: var(--color-text-on-accent); /* --- Confirm screen (final handover) --- */ --confirm-bg: linear-gradient( 180deg, var(--color-confirm-gradient-top) 0%, var(--color-confirm-gradient-mid) 52%, var(--color-confirm-gradient-end) 100% ); --confirm-title: var(--color-text-warm-strong); --confirm-body: var(--color-text-subdued); --confirm-section: var(--color-text-warm-strong); --summary-card-bg: var(--color-surface-glass-raised); --summary-card-border: var(--color-border-subtle); --summary-tile-bg: var(--color-surface-icon-tile); --summary-count: var(--color-text-primary); --summary-label: var(--color-text-primary); --summary-add-bg: transparent; --summary-add-text: var(--color-text-primary); --summary-add-shadow: none; --summary-finish-bg: var(--color-accent); --summary-finish-text: var(--color-text-on-accent); /* --- Done screen --- */ --done-bg: var(--color-background-page); --done-icon: var(--color-accent); /* --- Badge (count pill on primary button) --- */ --badge-bg: var(--color-on-accent-scrim); /* --- Segmented theme control --- */ --seg-bg: var(--color-surface-raised); --seg-border: var(--color-border-subtle); --seg-active-bg: var(--color-background-page); --seg-active-text: var(--color-text-primary); --seg-inactive-text: var(--color-text-secondary); --seg-active-shadow: var(--shadow-seg); } /* ============================================ 4. DARK-MODE COMPONENT OVERRIDES A few component tokens need a different value in dark mode than the accent-based default. Uses :root[data-theme="dark"] (higher specificity than :root) so it wins over the component layer above regardless of source order. Light mode is unaffected — these never apply without the attr. ============================================ */ :root[data-theme="dark"] { /* Tab bar: active = light-gray neutral (not blue); inactive dimmed so active stays distinct */ --tab-icon-active: var(--color-text-primary); --tab-label-active: var(--color-text-primary); --tab-icon-inactive: var(--color-text-secondary); --tab-label-inactive: var(--color-text-secondary); }