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/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 {