/** * Gamma Design System — Colors & Typography * Source: design-system/tokens.css + design-system/Gamma Design System.html * Package: @gamma/web-shared · packages/web-shared/src/tokens/theme.css * * Usage: * import "@gamma/web-shared/tokens" ← in Next.js app/layout.tsx * ← in prototypes * * Google Fonts import (add to ): * https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700 * &family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700 * &family=JetBrains+Mono:wght@400;500;600&display=swap */ /* ══════════════════════════════════════════════════════════════════ COLOR TOKENS — Dark (default) ══════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* native controls follow the palette */ /* ── Surfaces (warm-neutral chrome) ──────────────────────────── */ --color-bg: hsl(35 16% 5%); /* Page canvas */ --color-surface-0: hsl(35 13% 8%); /* Card, sidebar, popover */ --color-surface-1: hsl(35 11% 11%); /* Filter bar, secondary chrome */ --color-surface-2: hsl(35 9% 15%); /* Hover, dropdown row */ --color-surface-3: hsl(35 7% 19%); /* Scrollbar thumb, raised tile */ /* ── Brand / Semantic ─────────────────────────────────────────── */ --color-primary: hsl(155 26% 46%); /* SAGE — AI only. Always with ✦ */ --color-primary-fg: hsl(35 16% 5%); /* Text on primary bg */ --color-primary-muted: hsl(155 26% 46% / 0.14); /* AI tint bg */ --color-accent: hsl(30 58% 50%); /* TERRACOTTA — user-attention only */ --color-accent-muted: hsl(30 58% 50% / 0.14); /* Attention tint bg */ --color-gold: hsl(38 60% 48%); /* GOLD — money only (amounts/rates) */ /* ── Status (entity states only, never on chrome) ─────────────── */ --color-success: hsl(145 42% 48%); /* Approved, paid, completed */ --color-warning: hsl(40 80% 56%); /* Overdue, anomaly, on-hold — amber, distinct from error */ --color-error: hsl(5 65% 54%); /* Rejected, voided, failed */ --color-error-fg: hsl(40 28% 100%); /* Text on error bg */ --color-info: hsl(205 55% 55%); /* In-progress, requested */ /* ── Text ──────────────────────────────────────────────────────── */ --color-text-1: hsl(40 28% 90%); /* Primary text, foreground */ --color-text-2: hsl(35 10% 55%); /* Secondary text, labels */ --color-text-3: hsl(35 8% 51%); /* Mono kickers, captions, meta — 4.5:1 on surface-1 */ /* ── Borders ───────────────────────────────────────────────────── */ --color-border: hsl(35 10% 14%); /* 1px hairline — row dividers */ --color-border-subtle: hsl(35 8% 10%); /* Nested separation */ --color-border-strong: hsl(35 12% 22%); /* 1.4px primary — cards, inputs */ /* ── Glass ─────────────────────────────────────────────────────── */ --glass-bg: rgb(23 21 18 / 0.75); /* Command palette backdrop */ /* ── Border Radii ──────────────────────────────────────────────── */ --radius-sm: 6px; /* Nav items, tags, rule chips */ --radius-md: 8px; /* Inputs, buttons, dropdowns */ --radius-lg: 12px; /* Cards, modals */ --radius-xl: 16px; /* Dialogs */ --radius-2xl: 24px; /* Sheets, paper object */ --radius-pill: 999px; /* Badges, pills, progress bars */ /* ── Border Widths ─────────────────────────────────────────────── */ --border-width-hairline: 1px; /* Row dividers */ --border-width-primary: 1.4px; /* Card borders, inputs, filter bar */ /* ── Font Families ─────────────────────────────────────────────── */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-serif: "Fraunces", ui-serif, Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ── Layout Constants ──────────────────────────────────────────── */ --sidebar-width-expanded: 224px; --sidebar-width-collapsed: 56px; --sidebar-width-mobile: 280px; --topbar-height: 56px; --topbar-height-mobile: 48px; --nav-item-height: 36px; --input-height: 36px; --input-height-mobile: 44px; --btn-height-sm: 28px; --btn-height-md: 36px; --btn-height-lg: 44px; --page-max-width: 1440px; } /* ══════════════════════════════════════════════════════════════════ COLOR TOKENS — Light theme ══════════════════════════════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; --color-bg: hsl(35 32% 97%); --color-surface-0: hsl(35 30% 94%); --color-surface-1: hsl(35 26% 91%); --color-surface-2: hsl(35 22% 87%); --color-surface-3: hsl(35 18% 83%); --color-primary: hsl(155 32% 34%); --color-primary-fg: hsl(35 32% 97%); --color-primary-muted: hsl(155 32% 34% / 0.12); --color-accent: hsl(30 65% 34%); --color-accent-muted: hsl(30 65% 34% / 0.12); --color-success: hsl(145 55% 28%); --color-warning: hsl(38 85% 30%); --color-error: hsl(5 68% 42%); --color-error-fg: hsl(35 32% 97%); --color-info: hsl(205 65% 35%); --color-gold: hsl(38 72% 30%); --color-text-1: hsl(35 20% 12%); --color-text-2: hsl(35 16% 35%); --color-text-3: hsl(35 10% 40%); /* 4.5:1 on surface-1 */ --color-border: hsl(35 18% 78%); --color-border-subtle: hsl(35 22% 87%); --color-border-strong: hsl(35 18% 62%); --glass-bg: rgb(255 250 240 / 0.78); } /* ══════════════════════════════════════════════════════════════════ TYPOGRAPHY — Semantic Classes ══════════════════════════════════════════════════════════════════ */ /* ── Base reset ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; line-height: 1.5; } /* No italic allowed anywhere in Gamma UI */ em, i { font-style: normal; font-weight: 500; } /* ── Display (Fraunces — 36px+ only) ─────────────────────────────── */ .t-display-3xl { font-family: var(--font-serif); font-weight: 600; font-size: 52px; line-height: 1.05; letter-spacing: -0.02em; } .t-display-2xl { font-family: var(--font-serif); font-weight: 600; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; } .t-display-xl { font-family: var(--font-serif); font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; } /* ── Headings (Inter) ─────────────────────────────────────────────── */ .t-h1 { font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -0.005em; } .t-h2 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.005em; } .t-h3 { font-family: var(--font-sans); font-weight: 600; font-size: 16px; line-height: 1.4; } /* ── Body (Inter) ─────────────────────────────────────────────────── */ .t-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; } .t-body { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.5; } .t-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.5; } .t-caption, .t-label { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.4; } /* ── Mono (JetBrains Mono) ────────────────────────────────────────── */ .t-overline, .t-kicker { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-text-3); } .t-mono-data { font-family: var(--font-mono); font-weight: 500; font-size: 13px; font-variant-numeric: tabular-nums; } .t-mono-sm { font-family: var(--font-mono); font-weight: 500; font-size: 11px; font-variant-numeric: tabular-nums; } .t-mono-code { font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 1.7; } /* ── Semantic color helpers ───────────────────────────────────────── */ .text-1 { color: var(--color-text-1); } .text-2 { color: var(--color-text-2); } .text-3 { color: var(--color-text-3); } .text-primary { color: var(--color-primary); } .text-accent { color: var(--color-accent); } .text-gold { color: var(--color-gold); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); } .text-info { color: var(--color-info); } /* ── Surface helpers ──────────────────────────────────────────────── */ .bg-bg { background: var(--color-bg); } .bg-surface-0 { background: var(--color-surface-0); } .bg-surface-1 { background: var(--color-surface-1); } .bg-surface-2 { background: var(--color-surface-2); } .bg-surface-3 { background: var(--color-surface-3); } /* ── Border helpers ───────────────────────────────────────────────── */ .border-default { border: 1px solid var(--color-border); } .border-strong { border: var(--border-width-primary) solid var(--color-border-strong); } .border-dashed { border: var(--border-width-primary) dashed var(--color-border-strong); } .border-ai { border: var(--border-width-primary) solid var(--color-primary); } /* ── Radius helpers ───────────────────────────────────────────────── */ .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-pill { border-radius: var(--radius-pill); } /* ── Focus ring (standardized terracotta keyboard-focus indicator) ─── One ring for every focusable surface — inputs, buttons, rows, cards, links, switches. Terracotta = user-attention (matches the brand role). `outline` is used (not box-shadow) so it never fights the elevation box-shadows on raised buttons/cards, and modern browsers clip the outline to each control's border-radius. Pointer focus stays quiet — only :focus-visible (keyboard / programmatic) paints the ring. */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* The bottom-sheet dialog container takes focus on open for the focus trap but is not an actionable control — suppress its ring (it also sets outline:none inline; this keeps the intent explicit and theme-safe). */ [role="dialog"]:focus-visible { outline: none; } /* ── Minimum 44px hit area (P2 button-touch-targets-below-44) ──────── Small visual controls (32px sm buttons, the segmented thumb, swipe actions, steppers) keep their compact LOOK but gain a centered 44px touch target via a ::before overlay — zero layout shift, no change to the painted box. Only applies to genuinely small controls so already- large targets (md/lg buttons, rows) are untouched. */ .q-btn, .q-iconbtn { position: relative; } .q-btn::before, .q-iconbtn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%); /* purely a hit-area expander: invisible, never intercepts the ring/paint */ pointer-events: none; } /* Re-enable pointer events on the expander itself so the gap around a sub-44 control is still tappable, without blocking the icon glyph. */ @media (pointer: coarse) { .q-btn::before, .q-iconbtn::before { pointer-events: auto; } } /* ── Light-theme press / elevation overrides ───────────────────────── (P2 elevation-press-shadows-dark-ink-in-light) The raised-button and transition shadows in index.html are authored in dark ink (hsl 35 16% 5%) which reads as a hard black halo in the light theme. Re-tint them to the light theme's ink (hsl 35 20% 12%) at low alpha so raised CTAs and pressed states get soft, warm depth instead of a dark smudge. Specificity (0,2,0 via [data-theme]) wins over the bare .q-btn-raised rule regardless of stylesheet order. */ [data-theme="light"] .q-btn-raised { box-shadow: 0 1px 2px hsl(35 20% 12% / 0.10), 0 4px 14px hsl(35 20% 12% / 0.10); } [data-theme="light"] .q-btn-raised:active:not(:disabled) { box-shadow: 0 1px 2px hsl(35 20% 12% / 0.10); } [data-theme="light"] .q-anim-push-in, [data-theme="light"] .q-anim-pop-out { box-shadow: -18px 0 48px hsl(35 20% 12% / 0.10); } [data-theme="light"] .q-screen-dim { background: hsl(35 20% 12% / 0.10); } /* ── Scrollbar ────────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--color-surface-3) transparent; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-surface-3); border-radius: var(--radius-pill); }