Skip to content

Commit ad49d48

Browse files
omar-almasry11thePunderWoman
authored andcommitted
fix(docs-infra): improve dark mode button hover contrast for WCAG compliance
The .docs-primary-btn hover state in dark mode had a contrast ratio of 2.18:1, failing WCAG 2.1 SC 1.4.3. This change reuses the existing --hot-pink-to-electric-violet-radial-gradient to achieve 4.5:1+ contrast.
1 parent 50ded69 commit ad49d48

1 file changed

Lines changed: 13 additions & 9 deletions

File tree

adev/shared-docs/styles/_colors.scss

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,8 @@
179179
--white-to-light-blue-diagonal-gradient: linear-gradient(
180180
132.83deg,
181181
hsl(from color-mix(in srgb, var(--bright-blue), white 60%) h s l / 0) 45.38%,
182-
hsl(from color-mix(in srgb, var(--bright-blue), white 60%) h s l / 0.3) 159.03%);
182+
hsl(from color-mix(in srgb, var(--bright-blue), white 60%) h s l / 0.3) 159.03%
183+
);
183184

184185
--white-to-light-pink-diagonal-gradient: linear-gradient(
185186
135deg,
@@ -230,8 +231,7 @@
230231
// for the "unfilled" portion of the word that hasn't
231232
// been highlighted by the gradient
232233
--gray-unfilled: var(--gray-400);
233-
--webgl-page-background: var(var(--page-background))
234-
--webgl-gray-unfilled: var(--gray-400);
234+
--webgl-page-background: var(var(--page-background)) --webgl-gray-unfilled: var(--gray-400);
235235
}
236236

237237
@mixin dark-mode-definitions() {
@@ -261,9 +261,16 @@
261261
--super-green: color-mix(in srgb, oklch(79.12% 0.257 155.13), var(--full-contrast) 70%);
262262
--light-vivid-pink-to-light-electric-violet-horizontal-gradient:
263263
linear-gradient(hsl(from var(--gray-1000) h s l / 0.9), hsl(from var(--gray-1000) h s l / 0.9)),
264-
linear-gradient(hsl(from var(--full-contrast) h s l / 0.2), hsl(from var(--full-contrast) h s l / 0.2)),
264+
linear-gradient(
265+
hsl(from var(--full-contrast) h s l / 0.2),
266+
hsl(from var(--full-contrast) h s l / 0.2)
267+
),
265268
var(--pink-to-purple-horizontal-gradient);
266-
--white-to-light-pink-diagonal-gradient: color-mix(in srgb, var(--french-violet), var(--full-contrast) 60%);
269+
--white-to-light-pink-diagonal-gradient: color-mix(
270+
in srgb,
271+
var(--french-violet),
272+
var(--full-contrast) 60%
273+
);
267274

268275
--deprecated-dark: oklch(30% 0.02 304.04); // Base color
269276
--deprecated-docs-bg: var(--deprecated-dark); // Alias specifically for deprecated docs
@@ -301,10 +308,7 @@
301308
);
302309

303310
--page-bg-radial-gradient: radial-gradient(circle, black 0%, black 100%);
304-
--soft-pink-radial-gradient:
305-
linear-gradient(119.77deg,
306-
hsl(from color-mix(in srgb, var(--french-violet), white 60%) h s l / 0) 24.32%,
307-
hsl(from color-mix(in srgb, var(--french-violet), white 60%) h s l / 0.3) 116.25%);
311+
--soft-pink-radial-gradient: var(--hot-pink-to-electric-violet-radial-gradient);
308312

309313
// Use light values hot pink and electric violet since this gradient used for
310314
// the decorative header which looks the same in both modes

0 commit comments

Comments
 (0)