playwriter
Code Issues

refactor: replace .dark CSS selectors with @variant dark for strategy-agnostic dark mode

Browse Source 
Replace all hardcoded .dark class selectors with Tailwind v4's @variant dark
directive, which compiles to whatever strategy is configured in
@custom-variant dark. This means changing the dark mode strategy
(class, prefers-color-scheme, data-attribute, or combined) only requires
updating one line in globals.css — all dark mode variable overrides
and token styles follow automatically.

Changes:
- globals.css: update @custom-variant to (&:where(.dark, .dark *)) to
  include the .dark element itself with zero specificity, replace
  .dark {} block with @variant dark {}
- liveline.css: replace .dark .liveline-page {} with
  @variant dark { .liveline-page {} }
- liveline-prism.css: replace 20+ .dark .token.* rules with a single
  @variant dark {} block
This commit is contained in:
Tommy D. Rossi
2026-02-20 11:05:09 +01:00
parent d562047618
commit a71cc88336
3 changed files with 119 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/styles/liveline.css
+44 -41
View File
@@ -96,51 +96,54 @@
--ll-fade-12: rgba(255, 255, 255, 0);
}
/* Dark mode overrides */
.dark .liveline-page {
--ll-text-primary: rgba(255, 255, 255, 0.9);
--ll-text-secondary: rgba(255, 255, 255, 0.45);
--ll-text-tertiary: rgba(255, 255, 255, 0.25);
--ll-text-muted: rgba(255, 255, 255, 0.35);
--ll-text-hover: rgba(255, 255, 255, 0.7);
--ll-bg: rgb(17, 17, 17);
--ll-border: rgba(255, 255, 255, 0.1);
--ll-divider: rgba(255, 255, 255, 0.06);
--ll-code-bg: rgba(255, 255, 255, 0.05);
--ll-code-line-nr: rgba(255, 255, 255, 0.15);
--ll-selection-bg: rgba(255, 255, 255, 0.1);
/* Dark mode overrides — uses @variant dark so it follows whatever
strategy is configured in @custom-variant dark (globals.css) */
@variant dark {
.liveline-page {
--ll-text-primary: rgba(255, 255, 255, 0.9);
--ll-text-secondary: rgba(255, 255, 255, 0.45);
--ll-text-tertiary: rgba(255, 255, 255, 0.25);
--ll-text-muted: rgba(255, 255, 255, 0.35);
--ll-text-hover: rgba(255, 255, 255, 0.7);
--ll-bg: rgb(17, 17, 17);
--ll-border: rgba(255, 255, 255, 0.1);
--ll-divider: rgba(255, 255, 255, 0.06);
--ll-code-bg: rgba(255, 255, 255, 0.05);
--ll-code-line-nr: rgba(255, 255, 255, 0.15);
--ll-selection-bg: rgba(255, 255, 255, 0.1);
--ll-btn-bg: rgb(30, 30, 30);
--ll-btn-shadow: rgba(255, 255, 255, 0.05) 0px 2px 8px,
rgba(255, 255, 255, 0.02) 0px 4px 16px,
rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
--ll-btn-bg: rgb(30, 30, 30);
--ll-btn-shadow: rgba(255, 255, 255, 0.05) 0px 2px 8px,
rgba(255, 255, 255, 0.02) 0px 4px 16px,
rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
--ll-primary: #60a5fa;
--ll-secondary: #f5a623;
--ll-primary: #60a5fa;
--ll-secondary: #f5a623;
--ll-overlay-bg: hsla(0, 0%, 7%, 0.8);
--ll-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
0 1.625rem 3.375rem rgba(0, 0, 0, 0.3),
0 1rem 2rem rgba(0, 0, 0, 0.2),
0 0.625rem 1rem rgba(0, 0, 0, 0.15),
0 0.3125rem 0.5rem rgba(0, 0, 0, 0.1),
0 0.125rem 0.25rem rgba(0, 0, 0, 0.08),
0 0 0.125rem rgba(0, 0, 0, 0.05);
--ll-overlay-bg: hsla(0, 0%, 7%, 0.8);
--ll-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
0 1.625rem 3.375rem rgba(0, 0, 0, 0.3),
0 1rem 2rem rgba(0, 0, 0, 0.2),
0 0.625rem 1rem rgba(0, 0, 0, 0.15),
0 0.3125rem 0.5rem rgba(0, 0, 0, 0.1),
0 0.125rem 0.25rem rgba(0, 0, 0, 0.08),
0 0 0.125rem rgba(0, 0, 0, 0.05);
/* Header fade gradient stops (dark) */
--ll-fade-0: rgb(17, 17, 17);
--ll-fade-1: rgba(17, 17, 17, 0.737);
--ll-fade-2: rgba(17, 17, 17, 0.541);
--ll-fade-3: rgba(17, 17, 17, 0.382);
--ll-fade-4: rgba(17, 17, 17, 0.278);
--ll-fade-5: rgba(17, 17, 17, 0.194);
--ll-fade-6: rgba(17, 17, 17, 0.126);
--ll-fade-7: rgba(17, 17, 17, 0.075);
--ll-fade-8: rgba(17, 17, 17, 0.042);
--ll-fade-9: rgba(17, 17, 17, 0.021);
--ll-fade-10: rgba(17, 17, 17, 0.008);
--ll-fade-11: rgba(17, 17, 17, 0.002);
--ll-fade-12: rgba(17, 17, 17, 0);
/* Header fade gradient stops (dark) */
--ll-fade-0: rgb(17, 17, 17);
--ll-fade-1: rgba(17, 17, 17, 0.737);
--ll-fade-2: rgba(17, 17, 17, 0.541);
--ll-fade-3: rgba(17, 17, 17, 0.382);
--ll-fade-4: rgba(17, 17, 17, 0.278);
--ll-fade-5: rgba(17, 17, 17, 0.194);
--ll-fade-6: rgba(17, 17, 17, 0.126);
--ll-fade-7: rgba(17, 17, 17, 0.075);
--ll-fade-8: rgba(17, 17, 17, 0.042);
--ll-fade-9: rgba(17, 17, 17, 0.021);
--ll-fade-10: rgba(17, 17, 17, 0.008);
--ll-fade-11: rgba(17, 17, 17, 0.002);
--ll-fade-12: rgba(17, 17, 17, 0);
}
}
@supports (color: color(display-p3 1 1 1)) {