jeremy.herve.bzh / skypress
A calm place to write long-form, and publish it to the open social web. skypress.blog/
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Fix primary-button contrast and reuse it for the publication CTA

The publication CTA hand-rolled its own `.author__cta` button instead of
the design system's `.btn .btn--primary`. Point it at the shared button
so its styling and hover stay in sync with the rest of the app; this also
lets the author page drop its bespoke `is:global` block (the .btn classes
are already global via Base.astro).

White text on `--sun` only reaches ~2.5:1 contrast (1.9:1 in dark mode,
where the accent is light) — below WCAG AA. Introduce `--btn-primary` /
`--btn-primary-hover` fills, a deeper sun tuned to clear 4.5:1 with white
text in both color schemes, and use them for `.btn--primary` and the
dashboard's `.dash__new`.

author
Jeremy Herve date (Jun 9, 2026, 3:48 AM +0200) commit 90555395 parent f1e53e7e
+17 -28
+1 -1
src/components/CreatePublicationCta.tsx
··· 16 16 return null; 17 17 } 18 18 return ( 19 - <a className="author__cta" href="/dashboard"> 19 + <a className="btn btn--primary" href="/dashboard"> 20 20 Create your first publication 21 21 </a> 22 22 );
+6 -24
src/pages/[author]/index.astro
··· 161 161 .author__empty { 162 162 color: var(--muted); 163 163 } 164 + .author__emptyblock { 165 + display: flex; 166 + flex-direction: column; 167 + align-items: flex-start; 168 + gap: 1rem; 169 + } 164 170 .author__list { 165 171 list-style: none; 166 172 padding: 0; ··· 213 219 font-size: 0.95rem; 214 220 } 215 221 </style> 216 - 217 - <!-- CreatePublicationCta is a `client:only` React island, so Astro's scoped 218 - styles never reach its DOM. The CTA rule must be global. --> 219 - <style is:global> 220 - .author__emptyblock { 221 - display: flex; 222 - flex-direction: column; 223 - align-items: flex-start; 224 - gap: 1rem; 225 - } 226 - .author__cta { 227 - display: inline-block; 228 - border-radius: 8px; 229 - background: var(--sun); 230 - color: #fff; 231 - font-weight: 600; 232 - text-decoration: none; 233 - padding: 0.5rem 1rem; 234 - } 235 - .author__cta:hover { 236 - text-decoration: none; 237 - opacity: 0.92; 238 - } 239 - </style>
+1 -1
src/pages/dashboard.astro
··· 119 119 .dash__new { 120 120 border: 0; 121 121 border-radius: 8px; 122 - background: var(--sun); 122 + background: var(--btn-primary); 123 123 color: #fff; 124 124 font: inherit; 125 125 font-weight: 600;
+9 -2
src/styles/global.css
··· 35 35 --sun: #e8920c; 36 36 --sun-strong: #b85c12; 37 37 --sun-tint: #fbe6cc; 38 + /* Filled-button background: a deeper sun that clears WCAG AA (≥4.5:1) with 39 + white text. Bare --sun is too light for white text (~2.5:1). */ 40 + --btn-primary: #b85c12; 41 + --btn-primary-hover: #9a4c0f; 38 42 --ember: #bb5a36; /* rare warm accent (the ink/press counterweight) */ 39 43 40 44 --radius: 12px; ··· 56 60 --sun: #f4b13f; 57 61 --sun-strong: #f7c97a; 58 62 --sun-tint: #2a1f12; 63 + /* Dark mode's accents are light, so white text still needs a deeper fill. */ 64 + --btn-primary: #aa6010; 65 + --btn-primary-hover: #964f0c; 59 66 --ember: #e08a63; 60 67 --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.6); 61 68 } ··· 134 141 transform: translateY(1px); 135 142 } 136 143 .btn--primary { 137 - background: var(--sun); 144 + background: var(--btn-primary); 138 145 color: #fff; 139 146 } 140 147 .btn--primary:hover { 141 - background: var(--sun-strong); 148 + background: var(--btn-primary-hover); 142 149 color: #fff; 143 150 } 144 151 .btn--ghost {