refactor(styles): resolve token gaps and expand typography scale
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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user