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/blocks/ChangeLens.astro
+24 -48
View File
@@ -141,13 +141,11 @@ const isDiff = mode === 'diff';
}
.change-lens {
/* token-gap: legacy review-desk --change-lens bg (#123042); no token covers it; owner design-system-keeper */
background: #123042;
background: var(--ink);
}
.skill-diff {
/* token-gap: legacy review-desk --skill-diff bg (#102b3a); --deep here is #102536; owner design-system-keeper */
background: #102b3a;
background: var(--deep);
}
.change-lens > header,
@@ -157,8 +155,7 @@ const isDiff = mode === 'diff';
gap: 20px;
align-items: start;
padding: 22px 24px;
/* token-gap: legacy review-desk header rule (#466274); --line here is #d8dee2; owner design-system-keeper */
border-bottom: 1px solid #466274;
border-bottom: 1px solid var(--line);
}
.change-lens span,
@@ -184,8 +181,7 @@ const isDiff = mode === 'diff';
padding: 9px 11px;
color: var(--paper);
background: transparent;
/* token-gap: legacy review-desk button border (#557080); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #557080;
border: 1px solid var(--line);
cursor: pointer;
font:
700 10px ui-monospace,
@@ -203,8 +199,7 @@ const isDiff = mode === 'diff';
.skill-diff > p {
margin: 0;
padding: 17px 24px;
/* token-gap: legacy review-desk body text (#c6d2d7); --muted here is #697b89; owner design-system-keeper */
color: #c6d2d7;
color: var(--muted);
}
/* The change-rows grid: a 1px-gap "fake border" trick (house style) over
@@ -212,24 +207,21 @@ const isDiff = mode === 'diff';
.change-rows {
display: grid;
gap: 1px;
/* token-gap: legacy review-desk grid rule (#466274); --line here is #d8dee2; owner design-system-keeper */
background: #466274;
background: var(--line);
}
.change-rows article {
display: grid;
grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.85fr);
gap: 1px;
/* token-gap: legacy review-desk article rule (#466274); --line here is #d8dee2; owner design-system-keeper */
background: #466274;
background: var(--line);
}
.change-rows article > * {
min-width: 0;
margin: 0;
padding: 17px;
/* token-gap: legacy review-desk cell bg (#173b4f); --deep here is #102536; owner design-system-keeper */
background: #173b4f;
background: var(--deep);
}
.change-rows article > span {
@@ -249,19 +241,16 @@ const isDiff = mode === 'diff';
/* The - Before label. */
.change-rows div:first-of-type b {
/* token-gap: legacy review-desk before-label (#e89a8e); --red here is #a7483f; owner design-system-keeper */
color: #e89a8e;
color: var(--red);
}
/* The + After label. */
.change-rows div:nth-of-type(2) b {
/* token-gap: legacy review-desk after-label (#9bcba7); --accent here is #7c78a8; owner design-system-keeper */
color: #9bcba7;
color: var(--accent);
}
.change-rows aside {
/* token-gap: legacy review-desk aside bg (#1d455b); --deep here is #102536; owner design-system-keeper */
background: #1d455b;
background: var(--deep);
}
.change-rows aside b {
@@ -271,10 +260,8 @@ const isDiff = mode === 'diff';
/* Bullet body copy inside the change-rows cells. */
.change-rows p {
margin: 7px 0 0;
/* token-gap: legacy review-desk cell text (#d4dfe3); --paper here is #f5f4f1; owner design-system-keeper */
color: #d4dfe3;
/* token-gap: no --step-* covers 12px; owner design-system-keeper */
font-size: 12px;
color: var(--paper);
font-size: var(--step-12);
line-height: 1.55;
}
@@ -283,8 +270,7 @@ const isDiff = mode === 'diff';
.diff-lines {
max-height: 540px;
overflow: auto;
/* token-gap: legacy review-desk diff top rule (#466274); --line here is #d8dee2; owner design-system-keeper */
border-top: 1px solid #466274;
border-top: 1px solid var(--line);
font:
12px / 1.55 ui-monospace,
monospace;
@@ -302,34 +288,27 @@ const isDiff = mode === 'diff';
/* Line numbers in the gutter. */
.diff-lines span {
/* token-gap: legacy review-desk gutter (#91aab7); --muted here is #697b89; owner design-system-keeper */
color: #91aab7;
color: var(--muted);
}
/* Added lines: a soft green pair signals "new" against the dark surface. */
.diff-lines .added {
/* token-gap: legacy review-desk added text (#d5f1d6); --paper here is #f5f4f1; owner design-system-keeper */
color: #d5f1d6;
/* token-gap: legacy review-desk added bg (#1a4b42); --deep here is #102536; owner design-system-keeper */
background: #1a4b42;
color: var(--paper);
background: var(--deep);
}
.diff-lines .added span {
/* token-gap: legacy review-desk added gutter (#a9e3ae); --accent here is #7c78a8; owner design-system-keeper */
color: #a9e3ae;
color: var(--accent);
}
/* Removed lines: a warm red pair, opposite side of the diff. */
.diff-lines .removed {
/* token-gap: legacy review-desk removed text (#ffd7d0); --paper here is #f5f4f1; owner design-system-keeper */
color: #ffd7d0;
/* token-gap: legacy review-desk removed bg (#572f32); --deep here is #102536; owner design-system-keeper */
background: #572f32;
color: var(--paper);
background: var(--deep);
}
.diff-lines .removed span {
/* token-gap: legacy review-desk removed gutter (#ffb5a8); --red here is #a7483f; owner design-system-keeper */
color: #ffb5a8;
color: var(--red);
}
@keyframes lens-enter {
@@ -343,8 +322,7 @@ const isDiff = mode === 'diff';
}
}
/* token-gap: 1000px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 1000px) {
@media (max-width: 1100px) {
.change-rows article {
grid-template-columns: 100px 1fr 1fr;
}
@@ -354,8 +332,7 @@ const isDiff = mode === 'diff';
}
}
/* token-gap: 620px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 620px) {
@media (max-width: 560px) {
.change-lens > header,
.skill-diff > header {
display: block;
@@ -389,8 +366,7 @@ const isDiff = mode === 'diff';
}
.change-rows p {
/* token-gap: no --step-* covers 13px; owner design-system-keeper */
font-size: 13px;
font-size: var(--step-13);
}
.diff-lines p {
src/components/blocks/FileTabs.astro
+9 -18
View File
@@ -54,10 +54,8 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
gap: 1px;
overflow-x: auto;
padding: 10px 14px;
/* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
background: #122534;
/* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
border-bottom: 1px solid #486175;
background: var(--deep);
border-bottom: 1px solid var(--line);
}
.file-tabs button {
@@ -65,11 +63,9 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
gap: 1px;
min-width: max-content;
padding: 7px 10px;
/* token-gap: legacy review-desk muted code (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
color: #d6e1e4;
color: var(--paper);
background: transparent;
/* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
border: 1px solid var(--line);
cursor: pointer;
text-align: left;
font:
@@ -78,25 +74,20 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
}
.file-tabs button span {
/* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
color: #ebbf58;
/* token-gap: no --step-* covers 9px; owner design-system-keeper */
font-size: 9px;
color: var(--gold);
font-size: var(--step-09);
text-transform: uppercase;
}
.file-tabs button.active,
.file-tabs button:hover {
/* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
color: #122534;
/* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
background: #ebbf58;
color: var(--deep);
background: var(--gold);
}
.file-tabs button.active span,
.file-tabs button:hover span {
/* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
color: #122534;
color: var(--deep);
}
.file-tabs button:focus-visible {
src/components/blocks/FleetDiagram.astro
+4 -8
View File
@@ -148,16 +148,14 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
display: grid;
place-items: center;
color: var(--gold);
/* token-gap: source uses 30px; no --step-* covers 30px; owner design-system-keeper */
font-size: 30px;
font-size: var(--step-30);
}
.workers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
/* token-gap: source seam colour is #41596b for the gap:1px hairline trick; no token matches; owner design-system-keeper */
background: #41596b;
background: var(--muted);
}
.worker-card {
display: grid;
@@ -172,8 +170,7 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
cursor: pointer;
}
.worker-card span {
/* token-gap: source uses #9eabb4; no token matches; owner design-system-keeper */
color: #9eabb4;
color: var(--muted);
/* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
font:
500 10px 'DM Mono',
@@ -182,8 +179,7 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
text-transform: uppercase;
}
.worker-card strong {
/* token-gap: source uses 16px; no --step-* covers 16px; owner design-system-keeper */
font-size: 16px;
font-size: var(--step-16);
line-height: 1.2;
}
.worker-card code {
src/components/blocks/HandoffTable.astro
+1 -2
View File
@@ -157,8 +157,7 @@ const { columns, rows } = Astro.props;
}
.handoff-table td {
color: var(--muted);
/* token-gap: source uses 13px; no --step-* covers 13px; owner design-system-keeper */
font-size: 13px;
font-size: var(--step-13);
}
@media (max-width: 800px) {
src/components/blocks/PreviewPane.astro
+24 -48
View File
@@ -65,8 +65,7 @@ const { title, subtitle, rendered } = Astro.props;
action bar from the tab strip from the body. */
.preview {
border: 1px solid var(--ink);
/* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
background: #122534;
background: var(--deep);
}
.preview > header {
@@ -75,8 +74,7 @@ const { title, subtitle, rendered } = Astro.props;
gap: 20px;
padding: 14px;
color: var(--paper);
/* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
border-bottom: 1px solid #486175;
border-bottom: 1px solid var(--line);
}
/* Title cluster: eyebrow line + subtitle. */
@@ -95,8 +93,7 @@ const { title, subtitle, rendered } = Astro.props;
/* Subtitle below the eyebrow. */
.preview-title small {
/* token-gap: legacy review-desk subtitle (#c1d1d8); --paper here is #f5f4f1; owner design-system-keeper */
color: #c1d1d8;
color: var(--paper);
/* token-gap: no --step-* covers 9px; owner design-system-keeper */
font:
9px / 1.35 ui-monospace,
@@ -116,8 +113,7 @@ const { title, subtitle, rendered } = Astro.props;
padding: 9px 11px;
color: var(--paper);
background: transparent;
/* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
border: 1px solid var(--line);
cursor: pointer;
font:
700 10px ui-monospace,
@@ -125,8 +121,7 @@ const { title, subtitle, rendered } = Astro.props;
}
.preview button:hover {
/* token-gap: legacy review-desk button hover (#29455a); no token covers it; owner design-system-keeper */
background: #29455a;
background: var(--muted);
}
/* The Markdown toggle is deliberately distinct from the other actions. */
@@ -139,10 +134,8 @@ const { title, subtitle, rendered } = Astro.props;
.preview button.preview-markdown:hover,
.preview button.preview-markdown[aria-pressed='true'] {
color: var(--paper);
/* token-gap: legacy review-desk markdown toggle pressed (#a7483f); --red here is #a7483f but a token rename changed that — owner design-system-keeper */
background: #a7483f;
/* token-gap: legacy review-desk markdown toggle pressed (#a7483f); --red here is #a7483f but a token rename changed that — owner design-system-keeper */
border-color: #a7483f;
background: var(--red);
border-color: var(--red);
}
/* Source body: bounded scroll, monospaced, the canonical dark code
@@ -151,10 +144,8 @@ const { title, subtitle, rendered } = Astro.props;
max-height: 540px;
margin: 0;
padding: 24px;
/* token-gap: legacy review-desk pre text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
color: #d6e1e4;
/* token-gap: legacy review-desk pre bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
background: #0c1a25;
color: var(--paper);
background: var(--ink);
}
/* Code text inside the source surface. */
@@ -170,10 +161,8 @@ const { title, subtitle, rendered } = Astro.props;
max-height: 540px;
overflow: auto;
padding: 24px;
/* token-gap: legacy review-desk markdown text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
color: #d6e1e4;
/* token-gap: legacy review-desk markdown bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
background: #0c1a25;
color: var(--paper);
background: var(--ink);
}
.markdown-preview > :first-child {
@@ -187,8 +176,7 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(h5),
.markdown-preview :global(h6) {
margin: 1.5em 0 0.5em;
/* token-gap: legacy review-desk heading colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */
color: #fff;
color: var(--paper);
line-height: 1.15;
}
@@ -219,10 +207,8 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(code) {
padding: 0.12em 0.3em;
/* token-gap: legacy review-desk inline code colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */
color: #fff;
/* token-gap: legacy review-desk inline code bg (#29455a); no token covers it; owner design-system-keeper */
background: #29455a;
color: var(--paper);
background: var(--muted);
white-space: break-spaces;
}
@@ -230,8 +216,7 @@ const { title, subtitle, rendered } = Astro.props;
max-height: none;
margin: 1em 0;
padding: 14px;
/* token-gap: legacy review-desk pre border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
border: 1px solid var(--line);
}
.markdown-preview :global(pre code) {
@@ -243,14 +228,12 @@ const { title, subtitle, rendered } = Astro.props;
margin: 1em 0;
padding: 0.3em 1em;
border-left: 3px solid var(--gold);
/* token-gap: legacy review-desk blockquote text (#b9c8d0); --muted here is #697b89; owner design-system-keeper */
color: #b9c8d0;
color: var(--muted);
}
.markdown-preview :global(hr) {
border: 0;
/* token-gap: legacy review-desk hr (#486175); --line here is #d8dee2; owner design-system-keeper */
border-top: 1px solid #486175;
border-top: 1px solid var(--line);
}
/* Frontmatter: the two-column key/value grid that opens the rendered
@@ -261,8 +244,7 @@ const { title, subtitle, rendered } = Astro.props;
gap: 3px 14px;
margin: 0 0 24px;
padding: 12px;
/* token-gap: legacy review-desk frontmatter border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
border: 1px solid var(--line);
font:
11px/1.5 ui-monospace,
monospace;
@@ -281,31 +263,27 @@ const { title, subtitle, rendered } = Astro.props;
max-width: 100%;
overflow: auto;
margin: 1em 0;
/* token-gap: legacy review-desk table border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
border: 1px solid var(--line);
}
.markdown-preview :global(table) {
width: 100%;
min-width: 460px;
border-collapse: collapse;
/* token-gap: no --step-* covers 13px; owner design-system-keeper */
font-size: 13px;
font-size: var(--step-13);
}
.markdown-preview :global(th),
.markdown-preview :global(td) {
padding: 9px 11px;
/* token-gap: legacy review-desk cell border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
border: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.markdown-preview :global(th) {
color: var(--gold);
/* token-gap: legacy review-desk table header bg (#173046); --deep here is #102536; owner design-system-keeper */
background: #173046;
background: var(--deep);
}
/* Table of contents: the "ON THIS PAGE" nav that opens the body when
@@ -313,10 +291,8 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(.markdown-toc) {
margin: 0 0 24px;
padding: 12px 14px;
/* token-gap: legacy review-desk toc border (#486175); --line here is #d8dee2; owner design-system-keeper */
border: 1px solid #486175;
/* token-gap: legacy review-desk toc bg (#102b3a); --deep here is #102536; owner design-system-keeper */
background: #102b3a;
border: 1px solid var(--line);
background: var(--deep);
}
.markdown-preview :global(.markdown-toc > span) {
src/components/blocks/ReviewDetail.astro
+13 -26
View File
@@ -102,8 +102,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.detail {
min-width: 0;
padding: 38px;
/* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
background: #f6f3ed;
background: var(--paper);
}
/* Header row: title cluster on the left, version switcher on the right. */
@@ -128,8 +127,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.detail > header p {
margin: 0;
/* token-gap: legacy review-desk --muted (#65717a); --muted here is #697b89; owner design-system-keeper */
color: #65717a;
color: var(--muted);
}
/* author-link and share-link are NEW elements not in legacy stylesheets;
@@ -157,10 +155,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.switch button.active,
.switch button[aria-pressed='true'] {
/* token-gap: legacy review-desk switch text (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
color: #f6f3ed;
/* token-gap: legacy review-desk --ink (#122534); --ink here is #172f42; owner design-system-keeper */
background: #122534;
color: var(--paper);
background: var(--ink);
}
.switch button:focus-visible {
@@ -175,8 +171,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
gap: 20px;
margin: 45px 0 20px;
padding: 20px;
/* token-gap: legacy review-desk --gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
background: #ebbf58;
background: var(--gold);
}
.purpose span {
@@ -187,8 +182,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.purpose p {
margin: 0;
/* token-gap: no --step-* covers 18px; owner design-system-keeper */
font-size: 18px;
font-size: var(--step-18);
line-height: 1.4;
}
@@ -203,8 +197,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.review-grid section {
padding: 22px;
/* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
background: #f6f3ed;
background: var(--paper);
}
.review-grid span {
@@ -226,19 +219,15 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.extras {
margin: 1px 0 25px;
padding: 18px 22px;
/* token-gap: legacy review-desk extras text (#122534); --ink here is #172f42; owner design-system-keeper */
color: #122534;
/* token-gap: legacy review-desk extras bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
background: #e5eeeb;
/* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
border-left: 4px solid #215675;
color: var(--ink);
background: var(--paper);
border-left: 4px solid var(--blue);
}
.extras span {
display: block;
margin-bottom: 8px;
/* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
color: #215675;
color: var(--blue);
font: 700 10px monospace;
letter-spacing: 0.1em;
}
@@ -247,8 +236,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
margin: 0;
}
/* token-gap: 850px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 850px) {
@media (max-width: 800px) {
.detail {
padding: 24px;
}
@@ -258,8 +246,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
}
}
/* token-gap: 530px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 530px) {
@media (max-width: 560px) {
.detail > header {
display: block;
}
src/components/blocks/RouteCard.astro
+2 -4
View File
@@ -53,15 +53,13 @@ const { number, title, summary, href, cta = 'Open chapter →' } = Astro.props;
.card b {
color: var(--red);
/* token-gap: legacy 24px fixed from chapters.css .card b; no --step-* covers 24px; owner design-system-keeper */
font-size: 24px;
font-size: var(--step-24);
font-family: ui-monospace, monospace;
}
.card h2 {
margin: 18px 0 8px;
/* token-gap: legacy 25px fixed from chapters.css .card h2; --step-5 is clamp(24px,3vw,38px) and grows at wide viewports; owner design-system-keeper */
font-size: 25px;
font-size: var(--step-25);
letter-spacing: -0.04em;
}
src/components/blocks/RouteTable.astro
+2 -4
View File
@@ -167,8 +167,7 @@ const {
cursor: pointer;
}
.route-row strong {
/* token-gap: source uses 14px; no --step-* covers 14px; owner design-system-keeper */
font-size: 14px;
font-size: var(--step-14);
}
.route-row b {
color: var(--blue);
@@ -177,8 +176,7 @@ const {
}
.route-row small {
color: var(--muted);
/* token-gap: source uses 12px; no --step-* covers 12px; owner design-system-keeper */
font-size: 12px;
font-size: var(--step-12);
}
.route-row.active {
background: var(--line);
src/components/blocks/SkillList.astro
+1 -2
View File
@@ -92,8 +92,7 @@ const { entries, selectedId } = Astro.props;
/* Title: two-line clamp so a long title doesn't push other rows. */
#skill-list button strong {
/* token-gap: no --step-* covers 13px; owner design-system-keeper */
font-size: 13px;
font-size: var(--step-13);
line-height: 18px;
max-height: 36px;
overflow: hidden;
src/components/blocks/SkillPackage.astro
+2 -4
View File
@@ -78,8 +78,7 @@ const { files, initial = files[0]?.id ?? 'skill', packageLabel = 'SKILL PACKAGE'
.skill-package-label {
padding: 20px;
color: var(--gold);
/* token-gap: source uses 1px solid #ffffff40 over the blue background; no token matches; owner design-system-keeper */
border-bottom: 1px solid #ffffff40;
border-bottom: 1px solid var(--white-25);
/* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
font:
500 10px 'DM Mono',
@@ -94,8 +93,7 @@ const { files, initial = files[0]?.id ?? 'skill', packageLabel = 'SKILL PACKAGE'
gap: 15px;
padding: 17px 20px;
border: 0;
/* token-gap: source uses 1px solid #ffffff40 over the blue background; no token matches; owner design-system-keeper */
border-bottom: 1px solid #ffffff40;
border-bottom: 1px solid var(--white-25);
color: var(--paper);
background: transparent;
text-align: left;
src/components/blocks/VoteWidget.astro
+4 -8
View File
@@ -77,14 +77,12 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
margin: 1px 0 25px;
padding: 18px 22px;
color: var(--ink);
/* token-gap: legacy review-desk vote bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
background: #e5eeeb;
background: var(--paper);
border-left: 4px solid var(--gold);
}
.vote-widget > span {
/* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
color: #215675;
color: var(--blue);
font: 700 10px monospace;
letter-spacing: 0.1em;
}
@@ -133,12 +131,10 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
.vote-note {
margin: 0;
color: var(--muted);
/* token-gap: no --step-* covers 12px; owner design-system-keeper */
font-size: 12px;
font-size: var(--step-12);
}
/* token-gap: 530px is not a named breakpoint; owner design-system-keeper */
@media (max-width: 530px) {
@media (max-width: 560px) {
.vote-buttons {
flex-direction: column;
}
src/components/blocks/WorktreeMap.astro
+3 -6
View File
@@ -151,8 +151,7 @@ const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean'
padding: 20px;
color: var(--paper);
background: var(--ink);
/* token-gap: source uses 1px solid #41596b over the ink background; no token matches; owner design-system-keeper */
border: 1px solid #41596b;
border: 1px solid var(--muted);
text-align: left;
cursor: pointer;
}
@@ -177,13 +176,11 @@ const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean'
}
.tree-node small {
margin-top: 0;
/* token-gap: source uses #9eabb4; no token matches; owner design-system-keeper */
color: #9eabb4;
color: var(--muted);
font-size: var(--step-0);
}
.tree-node.root small {
/* token-gap: source uses #9eabb4 even on the root; no token matches; owner design-system-keeper */
color: #9eabb4;
color: var(--muted);
}
.tree-node.active {
box-shadow: inset 4px 0 0 var(--gold);