Mirrors_Framework/awesome-python
1
0
Fork 0
mirror of https://github.com/vinta/awesome-python.git synced 2026-05-09 22:53:49 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor(css): extract inline OKLCH values into CSS custom properties

Browse Source 
Add 23 design tokens to :root for colors previously hardcoded inline:
hero text (kicker, proof), hero background gradient, hero button gradient,
accent underline (shared across 3 rules), page background gradient,
table row states (hover, focus, open), sticky header bg, search shadows
and focus ring, tag states, and CTA background.

Decorative one-off values (hero noise, sheen, grid overlay) left inline
since they are tightly coupled to their visual effects.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-03-24 12:30:22 +08:00
parent 8861bcc05d
commit 60836d00a1
1 changed files with 50 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/static/style.css
+50 -22
View File
@@ -13,6 +13,8 @@
--shell-pad: clamp(1.25rem, 3vw, 2.5rem); --shell-pad: clamp(1.25rem, 3vw, 2.5rem);
--bg-page: oklch(96.8% 0.018 80); --bg-page: oklch(96.8% 0.018 80);
--bg-page-top: oklch(95.2% 0.018 78);
--bg-page-end: oklch(98.4% 0.01 80);
--bg-paper: oklch(98.6% 0.01 80); --bg-paper: oklch(98.6% 0.01 80);
--bg-paper-strong: oklch(95.7% 0.016 76); --bg-paper-strong: oklch(95.7% 0.016 76);
--ink: oklch(22% 0.02 55); --ink: oklch(22% 0.02 55);
@@ -23,11 +25,37 @@
--accent: oklch(58% 0.16 45); --accent: oklch(58% 0.16 45);
--accent-deep: oklch(44% 0.15 42); --accent-deep: oklch(44% 0.15 42);
--accent-soft: oklch(92% 0.045 55); --accent-soft: oklch(92% 0.045 55);
--accent-underline: oklch(58% 0.16 45 / 0.4);
--highlight: oklch(87% 0.08 78); --highlight: oklch(87% 0.08 78);
--hero-ink: oklch(15% 0.02 40); --hero-ink: oklch(15% 0.02 40);
--hero-text: oklch(97% 0.012 85); --hero-text: oklch(97% 0.012 85);
--hero-muted: oklch(88% 0.02 82); --hero-muted: oklch(88% 0.02 82);
--hero-line: oklch(100% 0 0 / 0.16); --hero-line: oklch(100% 0 0 / 0.16);
--hero-kicker: oklch(82% 0.04 72);
--hero-proof: oklch(68% 0.02 72);
--hero-bg-start: oklch(14% 0.03 32);
--hero-bg-mid: oklch(19% 0.035 35);
--hero-bg-end: oklch(28% 0.05 42);
--hero-btn-start: oklch(83% 0.08 72);
--hero-btn-end: oklch(73% 0.14 58);
--row-hover: oklch(96.2% 0.02 76);
--row-focus: oklch(95.7% 0.026 68);
--row-open-start: oklch(96.2% 0.03 76);
--row-open-end: oklch(95.4% 0.026 74);
--thead-bg: oklch(98.2% 0.012 80 / 0.97);
--search-inset: oklch(100% 0 0 / 0.75);
--search-shadow: oklch(18% 0.03 45 / 0.24);
--search-focus-ring: oklch(61% 0.14 48 / 0.45);
--search-focus-shadow: oklch(34% 0.08 42 / 0.28);
--tag-hover-border: oklch(71% 0.09 62 / 0.45);
--tag-active-start: oklch(82% 0.08 75);
--tag-active-end: oklch(74% 0.11 58);
--cta-bg: oklch(94% 0.025 72);
--text-xs: 0.8rem; --text-xs: 0.8rem;
--text-sm: 0.95rem; --text-sm: 0.95rem;
@@ -56,7 +84,7 @@ body {
color: var(--ink); color: var(--ink);
background: background:
radial-gradient(circle at top left, oklch(100% 0 0 / 0.72), transparent 28rem), radial-gradient(circle at top left, oklch(100% 0 0 / 0.72), transparent 28rem),
linear-gradient(180deg, oklch(95.2% 0.018 78), var(--bg-page) 24rem, oklch(98.4% 0.01 80)); linear-gradient(180deg, var(--bg-page-top), var(--bg-page) 24rem, var(--bg-page-end));
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
@@ -127,7 +155,7 @@ kbd {
background: background:
radial-gradient(circle at 18% 18%, oklch(55% 0.14 45 / 0.34), transparent 22rem), radial-gradient(circle at 18% 18%, oklch(55% 0.14 45 / 0.34), transparent 22rem),
radial-gradient(circle at 78% 32%, oklch(62% 0.17 70 / 0.17), transparent 24rem), radial-gradient(circle at 78% 32%, oklch(62% 0.17 70 / 0.17), transparent 24rem),
linear-gradient(140deg, oklch(14% 0.03 32) 0%, oklch(19% 0.035 35) 52%, oklch(28% 0.05 42) 100%); linear-gradient(140deg, var(--hero-bg-start) 0%, var(--hero-bg-mid) 52%, var(--hero-bg-end) 100%);
color: var(--hero-text); color: var(--hero-text);
} }
@@ -263,7 +291,7 @@ kbd {
} }
.hero-kicker { .hero-kicker {
color: oklch(82% 0.04 72); color: var(--hero-kicker);
} }
.section-label { .section-label {
@@ -306,7 +334,7 @@ kbd {
.hero-proof { .hero-proof {
margin-top: 1.5rem; margin-top: 1.5rem;
color: oklch(68% 0.02 72); color: var(--hero-proof);
font-size: var(--text-sm); font-size: var(--text-sm);
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
@@ -332,7 +360,7 @@ kbd {
.hero-action-primary { .hero-action-primary {
color: var(--hero-ink); color: var(--hero-ink);
background: linear-gradient(135deg, oklch(83% 0.08 72), oklch(73% 0.14 58)); background: linear-gradient(135deg, var(--hero-btn-start), var(--hero-btn-end));
box-shadow: 0 1.2rem 2.5rem -1.5rem oklch(0% 0 0 / 0.65); box-shadow: 0 1.2rem 2.5rem -1.5rem oklch(0% 0 0 / 0.65);
} }
@@ -417,12 +445,12 @@ kbd {
padding: 1rem 1.15rem 1rem 3.2rem; padding: 1rem 1.15rem 1rem 3.2rem;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(180deg, oklch(100% 0 0 / 0.82), oklch(98.6% 0.01 80)); background: linear-gradient(180deg, oklch(100% 0 0 / 0.82), var(--bg-paper));
color: var(--ink); color: var(--ink);
font-size: clamp(1rem, 1.4vw, 1.06rem); font-size: clamp(1rem, 1.4vw, 1.06rem);
box-shadow: box-shadow:
inset 0 1px 0 oklch(100% 0 0 / 0.75), inset 0 1px 0 var(--search-inset),
0 1.4rem 2.6rem -2.1rem oklch(18% 0.03 45 / 0.24); 0 1.4rem 2.6rem -2.1rem var(--search-shadow);
transition: transition:
border-color 180ms ease, border-color 180ms ease,
box-shadow 180ms ease, box-shadow 180ms ease,
@@ -434,10 +462,10 @@ kbd {
} }
.search:focus { .search:focus {
border-color: oklch(61% 0.14 48 / 0.45); border-color: var(--search-focus-ring);
box-shadow: box-shadow:
inset 0 1px 0 oklch(100% 0 0 / 0.75), inset 0 1px 0 var(--search-inset),
0 1.6rem 3rem -2rem oklch(34% 0.08 42 / 0.28); 0 1.6rem 3rem -2rem var(--search-focus-shadow);
} }
.filter-bar { .filter-bar {
@@ -532,7 +560,7 @@ kbd {
letter-spacing: 0.03em; letter-spacing: 0.03em;
white-space: nowrap; white-space: nowrap;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: oklch(98.2% 0.012 80 / 0.97); background: var(--thead-bg);
} }
.table tbody td { .table tbody td {
@@ -554,16 +582,16 @@ kbd {
} }
.row:not(.open):hover td { .row:not(.open):hover td {
background: oklch(96.2% 0.02 76); background: var(--row-hover);
} }
.row:focus-visible td { .row:focus-visible td {
background: oklch(95.7% 0.026 68); background: var(--row-focus);
box-shadow: inset 3px 0 0 var(--accent); box-shadow: inset 3px 0 0 var(--accent);
} }
.row.open td { .row.open td {
background: linear-gradient(180deg, oklch(96.2% 0.03 76), oklch(95.4% 0.026 74)); background: linear-gradient(180deg, var(--row-open-start), var(--row-open-end));
border-bottom-color: transparent; border-bottom-color: transparent;
} }
@@ -592,7 +620,7 @@ kbd {
.col-name > a:hover { .col-name > a:hover {
color: var(--accent-deep); color: var(--accent-deep);
text-decoration: underline; text-decoration: underline;
text-decoration-color: oklch(58% 0.16 45 / 0.4); text-decoration-color: var(--accent-underline);
text-underline-offset: 0.2em; text-underline-offset: 0.2em;
} }
@@ -695,7 +723,7 @@ th[data-sort].sort-asc::after {
.expand-row td { .expand-row td {
padding-top: 0.1rem; padding-top: 0.1rem;
padding-bottom: 1.15rem; padding-bottom: 1.15rem;
background: linear-gradient(180deg, oklch(96.2% 0.03 76), oklch(95.4% 0.026 74)); background: linear-gradient(180deg, var(--row-open-start), var(--row-open-end));
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
} }
@@ -722,7 +750,7 @@ th[data-sort].sort-asc::after {
.expand-meta a:hover { .expand-meta a:hover {
color: var(--accent); color: var(--accent);
text-decoration: underline; text-decoration: underline;
text-decoration-color: oklch(58% 0.16 45 / 0.4); text-decoration-color: var(--accent-underline);
text-underline-offset: 0.2em; text-underline-offset: 0.2em;
} }
@@ -777,12 +805,12 @@ th[data-sort].sort-asc::after {
.tag:hover { .tag:hover {
background: var(--highlight); background: var(--highlight);
border-color: oklch(71% 0.09 62 / 0.45); border-color: var(--tag-hover-border);
color: var(--ink); color: var(--ink);
} }
.tag.active { .tag.active {
background: linear-gradient(135deg, oklch(82% 0.08 75), oklch(74% 0.11 58)); background: linear-gradient(135deg, var(--tag-active-start), var(--tag-active-end));
color: var(--hero-ink); color: var(--hero-ink);
} }
@@ -829,7 +857,7 @@ th[data-sort].sort-asc::after {
font: inherit; font: inherit;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
text-decoration-color: oklch(58% 0.16 45 / 0.4); text-decoration-color: var(--accent-underline);
text-underline-offset: 0.2em; text-underline-offset: 0.2em;
} }
@@ -839,7 +867,7 @@ th[data-sort].sort-asc::after {
.final-cta { .final-cta {
padding-block: clamp(3rem, 7vw, 5.5rem); padding-block: clamp(3rem, 7vw, 5.5rem);
background: oklch(94% 0.025 72); background: var(--cta-bg);
} }
.final-cta > .section-shell { .final-cta > .section-shell {