v3: brutalist, geocities and nyt on the token system — single light-dark() palettes, radius scale instead of per-selector overrides
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
@@ -7,133 +7,39 @@
|
||||
Dark scheme → NYT night mode (near-black page, warm-grey ink).
|
||||
══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Dark variant (default for this theme) ────────────────────────── */
|
||||
/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
|
||||
:root[data-style="nyt"] {
|
||||
--color-text: #e6e6e6;
|
||||
--color-text-secondary: #ababab;
|
||||
--color-text-muted: #8a8a8a;
|
||||
--color-on-accent: #121212;
|
||||
/* Square corners everywhere App.css uses the radius scale. */
|
||||
--radius-xs: 0;
|
||||
--radius-sm: 0;
|
||||
--radius-md: 0;
|
||||
--radius-lg: 0;
|
||||
--radius-xl: 0;
|
||||
--radius-full: 0;
|
||||
|
||||
--color-bg: #121212; /* NYT night */
|
||||
--color-surface: #1e1e1e;
|
||||
|
||||
--color-border: #3a3a3a;
|
||||
--color-border-subtle: rgba(255, 255, 255, 0.12);
|
||||
|
||||
--color-accent: #ececec; /* monochrome: interactive = paper-on-ink */
|
||||
--color-accent-hover: #ffffff;
|
||||
|
||||
--color-link: #ececec;
|
||||
--color-link-hover: #ffffff;
|
||||
|
||||
--color-danger: #ff6b6b;
|
||||
--color-danger-bg: #2a1414;
|
||||
--color-danger-hover: #ff9a9a;
|
||||
|
||||
--color-success: #6cc070;
|
||||
--color-success-bg: #122a14;
|
||||
--color-success-hover: #95d699;
|
||||
|
||||
--color-overlay: rgba(0, 0, 0, 0.6);
|
||||
--color-header-user-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-header-user-bg-hover: rgba(255, 255, 255, 0.12);
|
||||
|
||||
--color-option-bg: #181818;
|
||||
--color-option-border: #3a3a3a;
|
||||
}
|
||||
|
||||
/* ── Light via system preference (auto color-scheme) ──────────────── */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="nyt"]:not([data-color-scheme]) {
|
||||
--color-text: #121212; /* ink */
|
||||
--color-text-secondary: #5a5a5a;
|
||||
--color-text-muted: #767676; /* NYT timestamp grey */
|
||||
|
||||
--color-on-accent: #ffffff;
|
||||
|
||||
--color-bg: #ffffff; /* white page — content sits directly on it */
|
||||
--color-surface: #ffffff; /* paper */
|
||||
|
||||
--color-border: #e2e2e2; /* hairline rule */
|
||||
--color-border-subtle: rgba(0, 0, 0, 0.08);
|
||||
|
||||
--color-accent: #121212; /* monochrome: interactive = ink-on-paper */
|
||||
--color-accent-hover: #000000;
|
||||
|
||||
--color-link: #1a1a1a;
|
||||
--color-link-hover: #000000;
|
||||
|
||||
--color-danger: #b10000;
|
||||
--color-danger-bg: #fdecec;
|
||||
--color-danger-hover: #8a0000;
|
||||
|
||||
--color-success: #1a7f37;
|
||||
--color-success-bg: #e6f4ea;
|
||||
--color-success-hover: #136a2c;
|
||||
|
||||
--color-overlay: rgba(0, 0, 0, 0.4);
|
||||
--color-header-user-bg: rgba(0, 0, 0, 0.05);
|
||||
--color-header-user-bg-hover: rgba(0, 0, 0, 0.09);
|
||||
|
||||
--color-option-bg: #f2f2f2;
|
||||
--color-option-border: #e2e2e2;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Manual dark override ─────────────────────────────────────────── */
|
||||
:root[data-style="nyt"][data-color-scheme="dark"] {
|
||||
color-scheme: dark;
|
||||
--color-text: #e6e6e6;
|
||||
--color-text-secondary: #ababab;
|
||||
--color-text-muted: #8a8a8a;
|
||||
--color-on-accent: #121212;
|
||||
--color-bg: #121212;
|
||||
--color-surface: #1e1e1e;
|
||||
--color-border: #3a3a3a;
|
||||
--color-border-subtle: rgba(255, 255, 255, 0.12);
|
||||
--color-accent: #ececec;
|
||||
--color-accent-hover: #ffffff;
|
||||
--color-link: #ececec;
|
||||
--color-link-hover: #ffffff;
|
||||
--color-danger: #ff6b6b;
|
||||
--color-danger-bg: #2a1414;
|
||||
--color-danger-hover: #ff9a9a;
|
||||
--color-success: #6cc070;
|
||||
--color-success-bg: #122a14;
|
||||
--color-success-hover: #95d699;
|
||||
--color-overlay: rgba(0, 0, 0, 0.6);
|
||||
--color-header-user-bg: rgba(255, 255, 255, 0.06);
|
||||
--color-header-user-bg-hover: rgba(255, 255, 255, 0.12);
|
||||
--color-option-bg: #181818;
|
||||
--color-option-border: #3a3a3a;
|
||||
}
|
||||
|
||||
/* ── Manual light override ────────────────────────────────────────── */
|
||||
:root[data-style="nyt"][data-color-scheme="light"] {
|
||||
color-scheme: light;
|
||||
--color-text: #121212;
|
||||
--color-text-secondary: #5a5a5a;
|
||||
--color-text-muted: #767676;
|
||||
--color-on-accent: #ffffff;
|
||||
--color-bg: #ffffff;
|
||||
--color-surface: #ffffff;
|
||||
--color-border: #e2e2e2;
|
||||
--color-border-subtle: rgba(0, 0, 0, 0.08);
|
||||
--color-accent: #121212;
|
||||
--color-accent-hover: #000000;
|
||||
--color-link: #1a1a1a;
|
||||
--color-link-hover: #000000;
|
||||
--color-danger: #b10000;
|
||||
--color-danger-bg: #fdecec;
|
||||
--color-danger-hover: #8a0000;
|
||||
--color-success: #1a7f37;
|
||||
--color-success-bg: #e6f4ea;
|
||||
--color-success-hover: #136a2c;
|
||||
--color-overlay: rgba(0, 0, 0, 0.4);
|
||||
--color-header-user-bg: rgba(0, 0, 0, 0.05);
|
||||
--color-header-user-bg-hover: rgba(0, 0, 0, 0.09);
|
||||
--color-option-bg: #f2f2f2;
|
||||
--color-option-border: #e2e2e2;
|
||||
--color-text: light-dark(#121212, #e6e6e6);
|
||||
--color-text-secondary: light-dark(#5a5a5a, #ababab);
|
||||
--color-text-muted: light-dark(#767676, #8a8a8a);
|
||||
--color-on-accent: light-dark(#ffffff, #121212);
|
||||
--color-bg: light-dark(#ffffff, #121212);
|
||||
--color-surface: light-dark(#ffffff, #1e1e1e);
|
||||
--color-border: light-dark(#e2e2e2, #3a3a3a);
|
||||
--color-border-subtle: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
|
||||
--color-accent: light-dark(#121212, #ececec);
|
||||
--color-accent-hover: light-dark(#000000, #ffffff);
|
||||
--color-link: light-dark(#1a1a1a, #ececec);
|
||||
--color-link-hover: light-dark(#000000, #ffffff);
|
||||
--color-danger: light-dark(#b10000, #ff6b6b);
|
||||
--color-danger-bg: light-dark(#fdecec, #2a1414);
|
||||
--color-danger-hover: light-dark(#8a0000, #ff9a9a);
|
||||
--color-success: light-dark(#1a7f37, #6cc070);
|
||||
--color-success-bg: light-dark(#e6f4ea, #122a14);
|
||||
--color-success-hover: light-dark(#136a2c, #95d699);
|
||||
--color-overlay: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
|
||||
--color-header-user-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
|
||||
--color-header-user-bg-hover: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.12));
|
||||
--color-option-bg: light-dark(#f2f2f2, #181818);
|
||||
--color-option-border: light-dark(#e2e2e2, #3a3a3a);
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════
|
||||
@@ -149,42 +55,6 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Sharp, rectilinear corners throughout — newsprint has no rounding. */
|
||||
[data-style="nyt"] button:not(.dump-fab, .chat-fab),
|
||||
[data-style="nyt"] .dump-card,
|
||||
[data-style="nyt"] .playlist-card,
|
||||
[data-style="nyt"] .journal-card,
|
||||
[data-style="nyt"] .dump-post-header,
|
||||
[data-style="nyt"] .auth-card,
|
||||
[data-style="nyt"] .notification-item,
|
||||
[data-style="nyt"] .user-result-item,
|
||||
[data-style="nyt"] .comment-node-inner,
|
||||
[data-style="nyt"] .comment-top-form,
|
||||
[data-style="nyt"] .rich-content-card,
|
||||
[data-style="nyt"] .rich-content-badge,
|
||||
[data-style="nyt"] .modal-card,
|
||||
[data-style="nyt"] .confirm-modal,
|
||||
[data-style="nyt"] .user-menu-dropdown,
|
||||
[data-style="nyt"] .user-list-popover,
|
||||
[data-style="nyt"] .global-player,
|
||||
[data-style="nyt"] .global-player-media-wrap,
|
||||
[data-style="nyt"] .global-player-iframe-wrap,
|
||||
[data-style="nyt"] .global-player-artwork,
|
||||
[data-style="nyt"] .audio-player-track--stream::before,
|
||||
[data-style="nyt"] .audio-player-track--stream .audio-player-fill,
|
||||
[data-style="nyt"] .fdz,
|
||||
[data-style="nyt"] .visibility-toggle,
|
||||
[data-style="nyt"] .feed-tab,
|
||||
[data-style="nyt"] .md code,
|
||||
[data-style="nyt"] .md pre,
|
||||
[data-style="nyt"]
|
||||
input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not(
|
||||
[type="radio"]
|
||||
),
|
||||
[data-style="nyt"] textarea {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* This theme squares everything off — opt the FAB into a square too (it keeps
|
||||
its animations; only the corners change). */
|
||||
[data-style="nyt"] .dump-fab,
|
||||
@@ -192,18 +62,6 @@
|
||||
--fab-radius: 0;
|
||||
}
|
||||
|
||||
/* In the light variant the resting text colour is dark, but on hover the
|
||||
danger button fills with the dark --color-danger-hover. Force light text on
|
||||
hover so the label stays legible. */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-style="nyt"]:not([data-color-scheme]) .btn-danger:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:root[data-style="nyt"][data-color-scheme="light"] .btn-danger:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── Headlines — display serif ───────────────────────────────────── */
|
||||
[data-style="nyt"] h1,
|
||||
[data-style="nyt"] .app-header-brand,
|
||||
@@ -331,7 +189,6 @@
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -340,7 +197,6 @@
|
||||
[data-style="nyt"] .dump-rich-content {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -349,7 +205,6 @@
|
||||
border: none;
|
||||
border-left: 3px solid transparent;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -448,9 +303,6 @@
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
[data-style="nyt"] .app-header-user {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Primary button — inverted ink-on-paper (auto-flips per scheme) ─ */
|
||||
[data-style="nyt"] .btn-primary {
|
||||
@@ -467,14 +319,6 @@
|
||||
}
|
||||
|
||||
/* Secondary / outline buttons — plain hairline box */
|
||||
[data-style="nyt"] .btn-secondary,
|
||||
[data-style="nyt"] .btn-border,
|
||||
[data-style="nyt"] .btn-add-playlist,
|
||||
[data-style="nyt"] .vote-btn,
|
||||
[data-style="nyt"] .feed-sort-btn,
|
||||
[data-style="nyt"] .follow-btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* ── Inputs — clean field, ink focus ─────────────────────────────── */
|
||||
[data-style="nyt"] .form input:focus,
|
||||
@@ -523,7 +367,6 @@
|
||||
[data-style="nyt"] .feed-sort-btn {
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
color: var(--color-text-muted);
|
||||
padding: 0.2rem 0.15rem;
|
||||
@@ -548,17 +391,10 @@
|
||||
[data-style="nyt"] .btn-add-playlist,
|
||||
[data-style="nyt"] .invite-btn,
|
||||
[data-style="nyt"] .profile-role-chip {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Category management chips / inline editor: squared, no accent glow. */
|
||||
[data-style="nyt"] .category-chip,
|
||||
[data-style="nyt"] .category-editor,
|
||||
[data-style="nyt"] .category-editor-btn,
|
||||
[data-style="nyt"] .dump-card-category-chip {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
[data-style="nyt"] .category-editor {
|
||||
box-shadow: none;
|
||||
@@ -617,7 +453,6 @@
|
||||
fixed, clipped frame, the editorial way. ───────────────────────── */
|
||||
[data-style="nyt"] .dump-card-preview,
|
||||
[data-style="nyt"] .playlist-card-preview {
|
||||
border-radius: 0;
|
||||
transition: none;
|
||||
}
|
||||
[data-style="nyt"] .dump-card-inner:hover .dump-card-preview,
|
||||
@@ -638,7 +473,6 @@
|
||||
/* Match the other nyt popovers (1px rule + editorial shadow, no rounding).
|
||||
Option rows inherit the global square-off, so no per-row rule is needed. */
|
||||
[data-style="nyt"] .category-switcher-menu {
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user