diff --git a/DESIGN.md b/DESIGN.md index 8965532..08a81b0 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -5,7 +5,7 @@ colors: base: "#191724" surface: "#1f1d2e" overlay: "#26233a" - muted: "#6e6a86" + muted: "#8884a0" subtle: "#908caa" text: "#e0def4" danger: "#eb6f92" @@ -130,7 +130,7 @@ A Rose Pine (Main) palette, tinted purple-blue, used in a Restrained strategy. S - **Base** (`#191724`): the deepest surface. Page background only. Never used as a fill on inset elements. - **Surface** (`#1f1d2e`): the slide canvas itself — every slide rests on this layer, one step up from base. - **Overlay** (`#26233a`): toolbars, popovers, anything that sits above the slide. One step up from surface. -- **Muted** (`#6e6a86`): captions, footnotes, secondary metadata. Quiet text. +- **Muted** (`#8884a0`): captions, footnotes, secondary metadata. Quieter than Subtle through reduced chroma rather than reduced lightness, so it still clears WCAG AA at body sizes (≥4.5:1 on Base and Surface). The earlier Rose Pine canonical `#6e6a86` was too dark to carry text reliably. - **Subtle** (`#908caa`): body copy default. The reading color. - **Text** (`#e0def4`): headings and emphasized text. The reading color's bright sibling. - **Highlight Low / Med / High** (`#21202e` / `#403d52` / `#524f67`): three tinted dividers and accent surfaces. Used for borders, rules, code-block backgrounds, table cell strokes. Replaces the entire concept of `border-color: gray`. diff --git a/packages/theme/tokens/colors.json b/packages/theme/tokens/colors.json index d1c0b73..c90d577 100644 --- a/packages/theme/tokens/colors.json +++ b/packages/theme/tokens/colors.json @@ -27,8 +27,8 @@ "$type": "color", "$value": { "colorSpace": "hsl", - "components": [249, 12, 47], - "hex": "#6e6a86" + "components": [248, 13, 57], + "hex": "#8884a0" } }, "subtle": { diff --git a/packages/wc/components/presentation/wc.ts b/packages/wc/components/presentation/wc.ts index bcd1768..9a2dd9b 100644 --- a/packages/wc/components/presentation/wc.ts +++ b/packages/wc/components/presentation/wc.ts @@ -358,7 +358,10 @@ export class PresentationWC extends LitElement { font-variation-settings: "MONO" 1; font-size: 0.7rem; letter-spacing: ${dimension("tracking.wide")}; - color: ${color("muted")}; + /* subtle (#908caa), not muted: these labels sit on the overlay + surface at 0.7rem and need to clear WCAG AA. Muted hits ~4.2:1 + on overlay even after the AA lift; subtle hits ~4.7:1. */ + color: ${color("subtle")}; text-transform: uppercase; }