diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index f510ac18..01134973 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -35,6 +35,11 @@ --color-action-soft: var(--color-action-soft); --color-action-hover: var(--color-action-hover); --color-action-on-dark: var(--color-action-on-dark); + --color-action-fill: var(--color-action-fill); + --color-action-fill-hover: var(--color-action-fill-hover); + --color-on-action-fill: var(--color-on-action-fill); + --color-action-fill-disabled: var(--color-action-fill-disabled); + --color-on-action-fill-disabled: var(--color-on-action-fill-disabled); --color-focus: var(--color-focus); --color-ink: var(--color-ink); --color-ink-strong: var(--color-ink-strong); @@ -104,6 +109,15 @@ --color-action-hover: #8f4630; --color-focus: #cc785c; --color-action-on-dark: #d78064; + /* Solid-button fill pair (BUG-1079): one primary button colour site-wide. + #fbfaf7 on #a9583e is 4.85:1; the brand coral #cc785c stays for + non-button fills (rails, rings, carets, radios, avatars). Disabled solid + buttons are neutral grey at full opacity, never a faded clay. */ + --color-action-fill: #a9583e; + --color-action-fill-hover: #8f4630; + --color-on-action-fill: #fbfaf7; + --color-action-fill-disabled: var(--color-canvas-strong); + --color-on-action-fill-disabled: var(--color-ink-tertiary); --color-ink: #1d1d1f; --color-ink-strong: #32322f; --color-ink-secondary: #5f5f59; @@ -245,6 +259,12 @@ --color-action-hover: #e59273; --color-focus: #d78064; --color-action-on-dark: #8f4a33; + /* #f2f0ea on #8f4a33 is 5.77:1; hover mixes 6% ink in. */ + --color-action-fill: #8f4a33; + --color-action-fill-hover: color-mix(in srgb, #8f4a33 94%, #f2f0ea); + --color-on-action-fill: #f2f0ea; + --color-action-fill-disabled: var(--color-canvas-strong); + --color-on-action-fill-disabled: var(--color-ink-tertiary); --color-ink: #f2f0ea; --color-ink-strong: #e2dfd6; @@ -333,6 +353,12 @@ --color-action-hover: #e59273; --color-focus: #d78064; --color-action-on-dark: #8f4a33; + /* #f2f0ea on #8f4a33 is 5.77:1; hover mixes 6% ink in. */ + --color-action-fill: #8f4a33; + --color-action-fill-hover: color-mix(in srgb, #8f4a33 94%, #f2f0ea); + --color-on-action-fill: #f2f0ea; + --color-action-fill-disabled: var(--color-canvas-strong); + --color-on-action-fill-disabled: var(--color-ink-tertiary); --color-ink: #f2f0ea; --color-ink-strong: #e2dfd6; @@ -407,9 +433,13 @@ html, body { width: 100%; height: 100%; overflow: hidden; } body { margin: 0; background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } button, input, textarea, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } -button { color: inherit; } button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 56%, transparent); outline-offset: 2px; } -button:disabled { cursor: default; opacity: .45; } +/* BUG-1079: the old unlayered `button { color: inherit; }` beat every layered + Tailwind text utility (Tailwind's preflight already inherits color in + @layer base), so solid