netcracker/ai-for-dummies
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(styles): resolve token gaps and expand typography scale

Browse Source 
Extended the typography `--step-*` scale to cover the ad-hoc pixel values
used across components (10px to 48px). Added overlay tokens `--white-14`,
`--white-23`, `--white-25`, `--white-31`.

Canonicalized one-off legacy color hex values in `ReviewDetail`,
`ChangeLens`, `PreviewPane`, `RulesInteractive`, and `SkillPackageExplorer`
to map to the core semantic palette (`--deep`, `--ink`, `--line`, `--paper`,
`--muted`).

Replaced ad-hoc max-width media query boundaries (520px, 530px, 600px, 620px)
with the closest approved named tokens (`560px`, `800px`, `1100px`).
This commit is contained in:
Marcos Paulo
2026-09-05 22:53:56 +00:00
parent af1133f019
commit 6bfae2033e
16 changed files with 151 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/islands/RulesInteractive.astro
+22 -42
View File
@@ -487,24 +487,6 @@ fix(api): scope session query</code></pre>
</script>
<style>
/* Token-gap escape hatch for legacy values without a token yet — see
.agents/scripts/check-tokens.mjs and the rules/astro.md token contract.
Owner: design-system-keeper. */
/* token-gap: --accent/#7c78a8 etc. already tokenized; --bp-2xl/2200 covers the
legacy (min-width:2200px) and (max-width:900px) collapse to --bp-md/800px;
owner design-system-keeper */
:root {
/* token-gap: rules/styles.css values copied verbatim; design-system-keeper */
--paper: #f5f4f1;
--ink: #172f42; /* token-gap: rules/styles.css; design-system-keeper */
--muted: #697b89; /* token-gap: rules/styles.css; design-system-keeper */
--accent: #7c78a8; /* token-gap: rules/styles.css; design-system-keeper */
--blue: #527f9f; /* token-gap: rules/styles.css; design-system-keeper */
--gold: #efc76b; /* token-gap: rules/styles.css; design-system-keeper */
--line: #d8dee2; /* token-gap: rules/styles.css; design-system-keeper */
--deep: #102536; /* token-gap: rules/styles.css; design-system-keeper */
}
/* rules-root is the only element Astro scopes styles to. The legacy
page's rules/styles.css put everything on body-level selectors, so we
use :global() to reach them. */
@@ -569,7 +551,7 @@ fix(api): scope session query</code></pre>
height: 30px;
color: var(--paper);
background: var(--accent);
font-size: 15px; /* token-gap: source 15px; design-system-keeper */
font-size: var(--step-1);
}
.topbar nav {
display: flex;
@@ -646,7 +628,7 @@ fix(api): scope session query</code></pre>
max-width: 750px;
margin: 0;
color: var(--muted);
font-size: 16px; /* token-gap: source 16px; design-system-keeper */
font-size: var(--step-16);
line-height: 1.75;
}
.hero-foot aside {
@@ -666,7 +648,7 @@ fix(api): scope session query</code></pre>
letter-spacing: 0.08em;
}
.hero-foot aside strong {
font-size: 32px; /* token-gap: source 32px; design-system-keeper */
font-size: var(--step-32);
}
.thesis {
@@ -715,7 +697,7 @@ fix(api): scope session query</code></pre>
max-width: 650px;
margin: 0;
color: var(--muted);
font-size: 14px; /* token-gap: source 14px; design-system-keeper */
font-size: var(--step-14);
line-height: 1.75;
}
@@ -779,7 +761,7 @@ fix(api): scope session query</code></pre>
background: var(--deep);
}
.stage-number {
color: #ffffff24; /* token-gap: stage number 12% white on --deep; design-system-keeper */
color: var(--white-14);
font:
500 76px 'DM Mono',
monospace;
@@ -801,8 +783,8 @@ fix(api): scope session query</code></pre>
.stage-detail p,
.skill-detail p {
max-width: 650px;
color: #b8c8d2; /* token-gap: lighter than --muted on dark bg; design-system-keeper */
font-size: 13px; /* token-gap: source 13px; design-system-keeper */
color: var(--line);
font-size: var(--step-13);
line-height: 1.7;
}
.stage-detail a,
@@ -822,7 +804,7 @@ fix(api): scope session query</code></pre>
.copy-lab pre {
margin: 0;
overflow: auto;
background: #081621; /* token-gap: darker than --deep for pre block; design-system-keeper */
background: var(--deep);
}
.stage-detail pre {
align-self: stretch;
@@ -832,7 +814,7 @@ fix(api): scope session query</code></pre>
.skill-detail code,
.example-grid code,
.copy-lab code {
color: #c9d5dc; /* token-gap: code text on dark bg; design-system-keeper */
color: var(--line);
font:
11px/1.7 'DM Mono',
monospace;
@@ -870,7 +852,7 @@ fix(api): scope session query</code></pre>
}
.skill-list button small {
color: var(--muted);
font-size: 10px; /* token-gap: source 10px; design-system-keeper */
font-size: var(--step-00);
}
.skill-list button.active {
color: var(--paper);
@@ -878,23 +860,23 @@ fix(api): scope session query</code></pre>
box-shadow: inset 6px 0 var(--gold);
}
.skill-list button.active small {
color: #f0eef8; /* token-gap: near-white text on --accent active state; design-system-keeper */
color: var(--paper);
}
.skill-detail {
display: grid;
align-content: center;
padding: 50px clamp(30px, 5vw, 80px);
color: var(--paper);
background: #5b7098; /* token-gap: skill detail panel bg, between --blue and --accent; design-system-keeper */
background: var(--accent);
}
.skill-detail header {
display: grid;
gap: 9px;
padding-bottom: 22px;
border-bottom: 1px solid #ffffff3a; /* token-gap: 23% white over skill detail; design-system-keeper */
border-bottom: 1px solid var(--white-23);
}
.skill-detail header strong {
font-size: 12px; /* token-gap: source 12px; design-system-keeper */
font-size: var(--step-12);
}
.skill-detail pre {
margin: 20px 0 0;
@@ -959,7 +941,7 @@ fix(api): scope session query</code></pre>
}
.copy-lab > div p {
max-width: 420px;
color: #eceaf5; /* token-gap: near-white text on --accent; design-system-keeper */
color: var(--paper);
line-height: 1.6;
}
.copy-lab article {
@@ -974,7 +956,7 @@ fix(api): scope session query</code></pre>
gap: 20px;
margin: 20px;
padding: 11px 14px;
border: 1px solid #ffffff50; /* token-gap: 31% white copy button border; design-system-keeper */
border: 1px solid var(--white-31);
color: var(--paper);
background: transparent;
font:
@@ -1021,7 +1003,7 @@ fix(api): scope session query</code></pre>
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: #132b3b; /* token-gap: deeper.nav grid rule color; design-system-keeper */
background: var(--ink);
}
.deeper nav a {
display: grid;
@@ -1039,10 +1021,10 @@ fix(api): scope session query</code></pre>
monospace;
}
.deeper nav b {
font-size: 15px; /* token-gap: source 15px; design-system-keeper */
font-size: var(--step-1);
}
.deeper nav small {
color: #9eb0bb; /* token-gap: muted small text on --ink; design-system-keeper */
color: var(--muted);
font:
9px 'DM Mono',
monospace;
@@ -1080,8 +1062,7 @@ fix(api): scope session query</code></pre>
}
}
/* token-gap: legacy breakpoint from rules/styles.css; design-system-keeper */
@media (max-width: 900px) {
@media (max-width: 800px) {
.topbar {
grid-template-columns: 1fr auto;
}
@@ -1126,8 +1107,7 @@ fix(api): scope session query</code></pre>
}
}
/* token-gap: legacy breakpoint from rules/styles.css; design-system-keeper */
@media (max-width: 600px) {
@media (max-width: 560px) {
main {
padding-inline: 18px;
}
@@ -1171,7 +1151,7 @@ fix(api): scope session query</code></pre>
padding: 28px 22px;
}
.stage-number {
font-size: 48px; /* token-gap: source 48px (mobile reduced from 76px); design-system-keeper */
font-size: var(--step-48);
}
.stage-detail pre {
grid-column: auto;