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/SkillPackageExplorer.astro
+14 -26
View File
@@ -140,8 +140,7 @@ const packageFiles: PackageFile[] = [
.package-tree {
padding: 22px 16px;
/* token-gap: legacy 1px solid #426070 over --ink; no token matches; owner design-system-keeper */
border-right: 1px solid #426070;
border-right: 1px solid var(--muted);
min-width: 0;
}
@@ -149,9 +148,8 @@ const packageFiles: PackageFile[] = [
.package-preview > span {
margin: 0 0 14px;
color: var(--gold);
/* token-gap: source uses 11px monospace; no --step-* covers 11px on this surface; design-system-keeper */
font:
700 11px / 1.35 ui-monospace,
700 var(--step-0) / 1.35 ui-monospace,
monospace;
letter-spacing: 0.1em;
}
@@ -166,8 +164,7 @@ const packageFiles: PackageFile[] = [
border: 0;
border-left: 2px solid transparent;
background: transparent;
/* token-gap: legacy #d6e1e4 over --ink tree buttons; no token matches; design-system-keeper */
color: #d6e1e4;
color: var(--line);
text-align: left;
cursor: pointer;
transition:
@@ -180,8 +177,7 @@ const packageFiles: PackageFile[] = [
.package-tree button:focus-visible,
.package-tree button.active {
border-left-color: var(--gold);
/* token-gap: legacy #1f3a4b active/hover on --ink tree; no token matches; design-system-keeper */
background: #1f3a4b;
background: var(--blue);
outline: 0;
}
@@ -198,8 +194,7 @@ const packageFiles: PackageFile[] = [
}
.package-tree small {
/* token-gap: legacy #aebfc7 muted text on --ink tree; no token matches; design-system-keeper */
color: #aebfc7;
color: var(--muted);
font:
11px / 1.25 Arial,
sans-serif;
@@ -209,8 +204,7 @@ const packageFiles: PackageFile[] = [
.package-preview {
min-width: 0;
padding: 26px;
/* token-gap: legacy #173245 preview surface (between --ink and --blue); no token matches; design-system-keeper */
background: #173245;
background: var(--ink);
color: var(--paper);
}
@@ -224,8 +218,7 @@ const packageFiles: PackageFile[] = [
.package-preview p {
max-width: 52ch;
margin: 0;
/* token-gap: legacy #d6e1e4 muted text on #173245 preview; no token matches; design-system-keeper */
color: #d6e1e4;
color: var(--line);
}
.package-preview pre {
@@ -233,12 +226,9 @@ const packageFiles: PackageFile[] = [
margin: 20px 0 0;
padding: 15px;
overflow: auto;
/* token-gap: legacy #466274 rule on preview pre border; no token matches; design-system-keeper */
border: 1px solid #466274;
/* token-gap: legacy #102837 fill on preview pre background; no token matches; design-system-keeper */
background: #102837;
/* token-gap: legacy #d6e1e4 code text on #102837; no token matches; design-system-keeper */
color: #d6e1e4;
border: 1px solid var(--muted);
background: var(--deep);
color: var(--line);
font:
12px / 1.55 ui-monospace,
monospace;
@@ -265,16 +255,15 @@ const packageFiles: PackageFile[] = [
}
.package-tree {
border-right: 0;
/* token-gap: legacy #426070 mobile layout rule over --ink; no token matches; design-system-keeper */
border-bottom: 1px solid #426070;
/* token-gap: legacy var(--muted) mobile layout rule over --ink; no token matches; design-system-keeper */
border-bottom: 1px solid var(--muted);
}
.package-preview {
padding: 22px;
}
}
/* token-gap: legacy 520px breakpoint from skills/styles.css (mobile phone), not in named set 560/800/1100/1600/2200; design-system-keeper */
@media (max-width: 520px) {
@media (max-width: 560px) {
.package-tree {
padding: 18px 10px;
}
@@ -288,8 +277,7 @@ const packageFiles: PackageFile[] = [
padding: 18px;
}
.package-preview pre {
/* token-gap: legacy 11px mobile font-size from skills/styles.css; no --step-* covers 11px; design-system-keeper */
font-size: 11px;
font-size: var(--step-0);
}
}