/* tokenkarma app — design tokens * * Mirror of /Users/jr/Code/jr/brands/tokenkarma/tokenkarma/website/v0/public/design-tokens.css * Extended with app-specific tokens (spacing scale, radii, shadows, motion, font sizes) * required for menu-bar app mockups but not present on the marketing site. * * Canonical site tokens are SACRED — they are not overridden here, only extended. * Any new token added here is meant to be ported back to SwiftUI as a `Color.tk*`, * `Font.tk*`, or `Spacing.tk*` constant by the app-build session. */ :root { /* === Surfaces (mirror site) === * Cycle 3 (2026-05-04) : zero exception background canonical. * `--tk-bg` = `#0a0a0b` opaque strict est l'UNIQUE background root cross-product * (popover A0/A1-A8, window onboarding, NSPanel, Settings sidebar + content, * notifications, modals). Aucun token alternate (`--tk-bg-popover`, * `--tk-bg-popover-tint`) n'est introduit : si tu as besoin de la couleur du * popover, c'est `var(--tk-bg)` — il n'y en a qu'une. * `--tk-bg-elevated` est conservé UNIQUEMENT pour la wallpaper de preview * HTML (faux desktop autour des popovers / `.mockup-id` debug badge). Pas * un token applicatif. NE PAS porter en SwiftUI. */ --tk-bg: #0a0a0b; --tk-bg-elevated: #141416; /* HTML preview wallpaper only — NOT app */ --tk-bg-card: rgba(255, 255, 255, 0.02); --tk-bg-card-hover: rgba(255, 255, 255, 0.04); /* App-specific: row hover & selected (slightly brighter than card-hover) */ --tk-bg-row-hover: rgba(255, 255, 255, 0.045); --tk-bg-row-active: rgba(255, 255, 255, 0.07); /* === Text (mirror site) === */ --tk-fg: #fafafa; --tk-fg-secondary: #a1a1aa; --tk-fg-muted: #71717a; /* App-specific: even quieter than fg-muted, for footer / version chip / inert meta */ --tk-fg-faint: #52525b; /* === Accent (mirror site) === */ --tk-accent: #22c55e; --tk-accent-light: #4ade80; --tk-accent-dark: #16a34a; --tk-accent-glow: rgba(34, 197, 94, 0.15); /* App-specific: accent on text (slightly brightened for legibility on dark) */ --tk-accent-fg: #4ade80; /* === Borders (mirror site) === */ --tk-border: rgba(255, 255, 255, 0.08); --tk-border-hover: rgba(255, 255, 255, 0.16); --tk-border-subtle: rgba(255, 255, 255, 0.04); /* App-specific: separator inside popover (between rows / sections) * Tighter than --tk-border because rows are dense. */ --tk-border-row: rgba(255, 255, 255, 0.05); /* === Status (mirror site) === */ --tk-warning: #eab308; --tk-danger: #f97316; /* App-specific: red for cap-reached state (more urgent than danger orange) */ --tk-critical: #ef4444; /* App-specific: status backgrounds (used for badges / pill backgrounds) */ --tk-warning-bg: rgba(234, 179, 8, 0.12); --tk-danger-bg: rgba(249, 115, 22, 0.12); --tk-critical-bg: rgba(239, 68, 68, 0.12); --tk-accent-bg: rgba(34, 197, 94, 0.10); /* === Typography (mirror site) === */ --tk-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --tk-font-mono: 'Geist Mono', 'SF Mono', Consolas, monospace; /* App-specific: font sizes (Mac menu-bar apps use small type — 11–13px) * Names are intent-based, not size-based, so SwiftUI can map to .font(.tkLabel). * Updated 2026-05-04 (Vinci § Q2 verdict adopted) : body bumped 12→13 to match * site readability after JR test feedback "la fonte size de l'app est petite". * H1/H2 introduced for onboarding Templates A/B. */ --tk-fs-meta: 10px; /* eyebrow uppercase, tracking 0.12em */ --tk-fs-caption: 11px; /* captions, footer dots labels, chips */ --tk-fs-body: 13px; /* body, subtitles, button labels (was 12px pre-2026-05-04) */ --tk-fs-row: 13px; /* form labels, row primary text */ --tk-fs-section: 11px; /* section labels (uppercase tracking) */ --tk-fs-header: 13px; /* popover header title */ --tk-fs-button: 13px; /* button labels (aligned to body, was 12px) */ --tk-fs-h2: 22px; /* step title (Template B Action) */ --tk-fs-h1: 26px; /* welcome / done (Template A Informational) */ /* Letter spacing (Vinci § Q2 — match site tracking) */ --tk-letter-tight: -0.02em; /* H1/H2 letter-spacing (tightened display) */ --tk-letter-body: -0.005em; /* body micro-tighten for Geist */ --tk-letter-meta: 0.12em; /* eyebrow uppercase tracking */ /* App-specific: line heights tuned for dense rows */ --tk-lh-tight: 1.2; --tk-lh-normal: 1.4; --tk-lh-relaxed: 1.5; --tk-lh-heading: 1.18; /* H1/H2 line-height (Vinci § Q2) */ --tk-lh-body: 1.5; /* body line-height (Vinci § Q2) */ /* App-specific: weights (Geist supports 100–900) */ --tk-fw-regular: 400; --tk-fw-medium: 500; --tk-fw-semibold: 600; --tk-fw-bold: 700; /* === Spacing (4-based scale) === */ --tk-space-1: 2px; --tk-space-2: 4px; --tk-space-3: 6px; --tk-space-4: 8px; --tk-space-5: 10px; --tk-space-6: 12px; --tk-space-7: 14px; --tk-space-8: 16px; --tk-space-10: 20px; --tk-space-12: 24px; --tk-space-16: 32px; /* === Radii === * macOS menu popovers tend toward 10–12px outer radius. Inner cards 6–8px. * Buttons 6px. Pills (badges) 999px. */ --tk-radius-sm: 4px; --tk-radius-md: 6px; --tk-radius-lg: 8px; --tk-radius-xl: 10px; --tk-radius-2xl: 12px; --tk-radius-pill: 999px; /* === Shadows === * Used sparingly. Most lift in macOS comes from vibrancy, not box-shadow. * popover: simulates the NSPopover system shadow on light desktops. */ --tk-shadow-popover: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.30); --tk-shadow-button: 0 1px 0 rgba(0, 0, 0, 0.20); --tk-shadow-glow-accent: 0 0 0 3px var(--tk-accent-glow); /* === Motion === * macOS standard: ~120ms for hover, ~200ms for state change, ~280ms for popover open. */ --tk-motion-fast: 120ms; --tk-motion-base: 200ms; --tk-motion-slow: 280ms; --tk-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --tk-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /* === Component-specific === */ /* Popover dimensions (the dropdown menu) * Canonical width 520px — matches Family A grid 3×2 donut layout (mockups A1-A8). * Width updated 2026-05-03 from 320px (legacy single-column list, kept only as A0 alternate). * Reference: brief 2026-05-03-phase-3-suivi-tokens-svg-providers (D1 Q-DD-WIDTH). */ --tk-popover-width: 520px; --tk-popover-padding-x: 12px; --tk-popover-padding-y: 10px; --tk-popover-section-gap: 12px; /* Provider row */ --tk-row-height: 44px; --tk-row-padding-x: 12px; --tk-row-padding-y: 8px; --tk-row-icon-size: 20px; --tk-row-gap: 10px; /* Progress bar (mini, inside row) */ --tk-bar-height: 3px; --tk-bar-radius: 999px; --tk-bar-track: rgba(255, 255, 255, 0.06); /* Buttons */ --tk-button-height: 28px; --tk-button-padding-x: 12px; --tk-button-radius: 6px; /* === macOS Sequoia window chrome (Settings — pivot sidebar 2026-05-04 cycle 3) === * Tokens dédiés à la reproduction CSS de la fidélité visuelle macOS Sequoia * pour le Settings window (NSSplitView sidebar gauche + content area droite, * pattern System Settings.app moderne). * * Cycle 2 (Phase B) → cycle 3 (2026-05-04) : * - Avant : NSToolbar avec icon-tabs en haut (Raycast model). Tokens * `--tk-toolbar-bg/border/height/tab-*` retirés (orphelins post-pivot). * - Après : NSSplitView sidebar gauche (200pt) + content area droite. * - Background : `var(--tk-bg)` strict pour les 2 zones (zero exception JR * directive). Ancien `--tk-window-bg: #1d1d1f` retiré. * - Vibrancy : aucune. Distinction sidebar/content = border 1px subtle. * - Vibrancy tokens (`--tk-vibrancy-popover/sidebar/content`) retirés * (orphelins, jamais référencés dans aucun mockup ou stylesheet). * * Mapping SwiftUI : * NSWindow.styleMask = [.titled, .closable, .miniaturizable, .resizable, .fullSizeContentView] * NSWindow.titlebarAppearsTransparent = true ; titleVisibility = .hidden * NSSplitView (vertical separator) avec NSSplitViewItem sidebar collapsable false * ou SwiftUI : NavigationSplitView { sidebar { List(...) } detail { ScrollView {...} } } * .frame(minWidth: 680, minHeight: 460, idealWidth: 720, idealHeight: 480, maxWidth: 800, maxHeight: 600) */ --tk-window-border: rgba(255, 255, 255, 0.07); --tk-window-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.04), 0 28px 64px rgba(0, 0, 0, 0.55), 0 10px 18px rgba(0, 0, 0, 0.30); --tk-window-radius: 10px; /* macOS Sequoia window outer corner radius */ /* Settings window dimensions (cycle 3 baseline 720×480, resizable 680×460 → 800×600). * SwiftUI : .frame(minWidth: 680, minHeight: 460, idealWidth: 720, idealHeight: 480, * maxWidth: 800, maxHeight: 600) sur Settings root view. */ --tk-settings-window-width: 720px; --tk-settings-window-height: 480px; --tk-settings-window-min-width: 680px; --tk-settings-window-min-height: 460px; --tk-settings-window-max-width: 800px; --tk-settings-window-max-height: 600px; /* Sidebar (System Settings.app pattern — vertical nav, 200pt fixed). */ --tk-settings-sidebar-width: 200px; --tk-settings-sidebar-padding-x: 10px; --tk-settings-sidebar-padding-y: 12px; --tk-settings-sidebar-gap: 1px; /* tight stack, separators implied by hover/active */ --tk-settings-sidebar-traffic-zone: 38px; /* top zone above first nav entry, traffic-lights area */ --tk-settings-sidebar-entry-height: 30px; --tk-settings-sidebar-entry-padding-x: 10px; --tk-settings-sidebar-entry-radius: 6px; --tk-settings-sidebar-entry-icon: 16px; --tk-settings-sidebar-entry-label: 13px; --tk-settings-sidebar-entry-gap: 8px; /* between icon and label */ --tk-settings-sidebar-chevron: 11px; /* === Onboarding window dimensions (Vinci § Q1 verdict adopted 2026-05-04) === * 720×640pt rectangle landscape, hiddenTitleBar style (traffic lights overlay). * Opaque #0a0a0b strict (Vinci § Q4bis Background), border-radius 10px. * SwiftUI : * .windowStyle(HiddenTitleBarWindowStyle()) * .frame(minWidth: 720, minHeight: 640, maxWidth: 720, maxHeight: 640) * NSWindow contentMinSize = (720, 640) to prevent truncation bug (Q5). * Footer locked-bottom 64pt. Min content area between hero and footer 400pt * guaranteed via .frame(minHeight: 400) on inner content stack. */ --tk-onb-window-width: 720px; --tk-onb-window-height: 640px; --tk-onb-window-radius: 10px; --tk-onb-window-bg: var(--tk-bg); /* #0a0a0b opaque strict */ --tk-onb-padding-x: 40px; --tk-onb-padding-top: 32px; --tk-onb-padding-bottom: 24px; --tk-onb-footer-height: 64px; --tk-onb-footer-padding-x: 24px; --tk-onb-min-content-height: 400px; /* min between hero and footer */ /* Template A (Informational) — D0/D1/D6 (welcome, done, prelude fusion) * Max-widths élargies 2026-05-04 (JR feedback cycle 1) : * title 22ch → 32ch (acceptable jusqu'à 36-40ch cas limites) * subtitle 42ch → 50ch (sweet spot empirique 48-52ch). */ --tk-onb-tmpl-a-hero-max-height: 132px; /* large hero zone (mark/orb) */ --tk-onb-tmpl-a-title-size: var(--tk-fs-h1); /* 26px semibold */ --tk-onb-tmpl-a-title-max-width: 32ch; /* was 22ch (2026-05-04) */ --tk-onb-tmpl-a-subtitle-max-width: 50ch; /* was 42ch (2026-05-04) */ --tk-onb-tmpl-a-content-gap: 24px; /* Template B (Action) — D2/D3/D4/D5/Dk (sign-in, pick LLMs, permission, keychain, connect) * Max-widths élargies 2026-05-04 (JR feedback cycle 1) : * title 28ch → 32ch * subtitle 42ch → 50ch. */ --tk-onb-tmpl-b-hero-max-height: 56px; /* icon-size hero (optional) */ --tk-onb-tmpl-b-title-size: var(--tk-fs-h2); /* 22px semibold */ --tk-onb-tmpl-b-title-max-width: 32ch; /* was 28ch (2026-05-04) */ --tk-onb-tmpl-b-subtitle-max-width: 50ch; /* was 42ch (2026-05-04) */ --tk-onb-tmpl-b-content-gap: 20px; /* Padding top sans icon overlay (2026-05-04 JR feedback) : * Tout écran Template A ou B sans icon overlay en haut → padding-top accru * pour éviter que content colle au bord supérieur. Spec ~56-72pt. * Audit : D4 Permission (pas d'icon), D9 si applicable, D5k-try si pas d'icon. * SwiftUI : .padding(.top, 64) à la place du défaut .padding(.top, 32). */ --tk-onb-padding-top-no-hero: 64px; /* === NSPanel centrée (A1-A8 dropdown deep dive) === * Pivot architecture 2026-05-04 : dual-access model * - Click menu bar icon → A0 list compact 320px NSPopover ancré (flèche) * - Cmd+Option+$ → A1-A8 NSPanel centrée écran 720×640pt borderless (no arrow) * - Bouton "Open Tokenkarma" dans A0 → ferme popover + ouvre A1 panel centrée * Background #0a0a0b opaque strict (cohérent verdict Vinci Q4bis amendé JR). * SwiftUI : * NSPanel.borderless + .fullSizeContentView + .nonactivatingPanel * level = .floating (ou .modalPanel selon décision mac-build) * Center on NSScreen.main (or screen with cursor if multi-screen) * Escape closes, click outside closes. * Height peut grandir si content riche le justifie (sparklines, weekly history). */ --tk-panel-width: 720px; --tk-panel-height: 640px; --tk-panel-radius: 10px; --tk-panel-bg: var(--tk-bg); /* #0a0a0b opaque strict */ /* Form controls macOS native (NSPopUpButton, NSTextField, NSButton, NSStepper) */ --tk-form-control-height: 22px; /* macOS standard control height */ --tk-form-control-radius: 5px; --tk-form-control-bg: rgba(255, 255, 255, 0.05); --tk-form-control-border: rgba(255, 255, 255, 0.10); --tk-form-control-focus-ring: rgba(34, 197, 94, 0.35); --tk-form-row-gap: 14px; /* gap between label column and control column */ --tk-form-label-width: 160px; /* fixed label column width (right-aligned) */ } /* === Provider favicon utility === * Tiny favicon shown next to provider name in dropdown cells. * Uses Google's favicon service for the mockup; production app should bundle * SVG provider marks as Image assets to avoid network calls. */ .cell-favicon, .detail-favicon { display: inline-block; width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; vertical-align: -1px; object-fit: cover; background: rgba(255, 255, 255, 0.04); } .detail-favicon { width: 16px; height: 16px; border-radius: 4px; vertical-align: -2px; } /* Make .cell-name a flex container so favicon + name align cleanly */ .cell-name { display: inline-flex !important; align-items: center; gap: 6px; } /* === Provider brand colors (used as tiny accent on logo, NEVER as fill) === * The single-accent rule (#22c55e) applies to UI semantics. Provider logos * keep their brand color as a small identity dot only, capped at 16x16. */ :root { --tk-provider-claude: #cc785c; /* Anthropic warm */ --tk-provider-chatgpt: #10a37f; /* OpenAI green (kept distinct from accent) */ --tk-provider-perplexity: #20808d; /* Perplexity teal */ --tk-provider-cursor: #f3f3f3; /* Cursor monochrome on dark */ --tk-provider-grok: #f5f5f5; /* xAI monochrome on dark */ --tk-provider-gemini: #4285f4; /* Google blue */ } /* === Reset baseline for HTML mockups === */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 13px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--tk-font); font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Geist refinements */ background: var(--tk-bg); color: var(--tk-fg); font-size: var(--tk-fs-body); line-height: var(--tk-lh-normal); } /* Geist load (kept self-contained so mockups can be opened standalone) * Production app: bundled in Swift binary as TTF. * Pin updated 2026-05-05 : @5.0.4 was 404 on jsdelivr (version never published * to the @fontsource/geist registry — see https://data.jsdelivr.com/v1/package/npm/@fontsource/geist). * Targets latest stable: geist@5.2.8 + geist-mono@5.2.7. font-family names * (`Geist`, `Geist Mono`) and file naming (`geist-latin--normal.woff2`) * unchanged across versions — verified against package CSS at /400.css. */ @font-face { font-family: 'Geist'; src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist@5.2.8/files/geist-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist@5.2.8/files/geist-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist@5.2.8/files/geist-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist@5.2.8/files/geist-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.2.7/files/geist-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.2.7/files/geist-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }