Marcos Paulo
edd03f9716
Six token-gap markers were closed by pointing the value at a palette token that does not match it. Their own comments said so -- "between --blue and --accent", "lighter than --muted on dark bg", "no token matches" -- and were removed along with the values: #5b7098 -> var(--accent) #7c78a8, blue-grey to purple #9eb0bb -> var(--muted) #697b89, light-on-dark to dark-on-light #b8c8d2 -> var(--line) #d8dee2 #c9d5dc -> var(--line) #d8dee2 #eceaf5 -> var(--paper) #f5f4f1, violet-tinted to warm #f0eef8 -> var(--paper) #f5f4f1 All six are text or surfaces on --ink and --accent, where the light-background palette is the wrong family: --muted is illegible on --ink. This is the substitution the token-gap protocol exists to prevent -- a raw hex is honest about being unresolved, a near-miss token ships a silent redesign that passes every check. Adds six exact on-dark tokens and points the six declarations at them. design-system-keeper owns tokens.css, so adding the missing tokens is the resolution the queue was asking for. Also makes the four overlay tokens exact. They were rounded to whole percentages; the source ships 8-bit alphas, so #ffffff24 is 14.1176%, not 14%. The names stay rounded, the values do not. Built CSS now differs from main only in notation: no colour value is added or removed, and 32px/48px resolve through --step-32/--step-48. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
68 lines
1.8 KiB
CSS
68 lines
1.8 KiB
CSS
:root {
|
|
/* Palette */
|
|
--accent: #7c78a8;
|
|
--blue: #527f9f;
|
|
--deep: #102536;
|
|
--gold: #efc76b;
|
|
--ink: #172f42;
|
|
--line: #d8dee2;
|
|
--muted: #697b89;
|
|
--paper: #f5f4f1;
|
|
--red: #a7483f;
|
|
--violet: #6b668f;
|
|
|
|
/* Fonts */
|
|
--font-sans: manrope, arial, sans-serif;
|
|
--font-mono: 'DM Mono', monospace;
|
|
|
|
/* Typography Scale */
|
|
--step-display: clamp(56px, 9vw, 126px);
|
|
--step-6: clamp(36px, 5vw, 65px);
|
|
--step-5: clamp(24px, 3vw, 38px);
|
|
--step-4: clamp(22px, 3vw, 36px);
|
|
--step-48: 48px;
|
|
--step-32: 32px;
|
|
--step-30: 30px;
|
|
--step-25: 25px;
|
|
--step-24: 24px;
|
|
--step-22: 22px;
|
|
--step-20: 20px;
|
|
--step-18: 18px;
|
|
--step-17: 17px;
|
|
--step-16: 16px;
|
|
--step-1: 15px;
|
|
--step-14: 14px;
|
|
--step-13: 13px;
|
|
--step-12: 12px;
|
|
--step-0: 11px;
|
|
--step-00: 10px;
|
|
--step-09: 9px;
|
|
|
|
/* On-dark palette. These are the values the source actually uses on the
|
|
--ink and --accent surfaces. They are not near-misses of the palette
|
|
above: --muted is a dark-on-light value and is illegible on --ink, and
|
|
--paper is warm where the text over --accent is violet-tinted. Each one
|
|
is the exact hex the legacy stylesheets ship. */
|
|
--ink-muted: #9eb0bb;
|
|
--ink-line: #b8c8d2;
|
|
--ink-code: #c9d5dc;
|
|
--accent-paper: #eceaf5;
|
|
--accent-paper-active: #f0eef8;
|
|
--accent-surface: #5b7098;
|
|
|
|
/* Overlays. The percentages are the exact 8-bit alphas the source ships
|
|
(#ffffff24, #ffffff3a, #ffffff40, #ffffff50), not rounded to whole
|
|
numbers — the names are rounded, the values are not. */
|
|
--white-14: rgb(255 255 255 / 14.1176%);
|
|
--white-23: rgb(255 255 255 / 22.7451%);
|
|
--white-25: rgb(255 255 255 / 25.098%);
|
|
--white-31: rgb(255 255 255 / 31.3725%);
|
|
|
|
/* Breakpoints */
|
|
--bp-sm: 560px;
|
|
--bp-md: 800px;
|
|
--bp-lg: 1100px;
|
|
--bp-xl: 1600px;
|
|
--bp-2xl: 2200px;
|
|
}
|