sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(design-system): roll out font-size scale across storefront/builder/backoffice

Browse Source 
Mechanical, value-preserving substitution: every literal font-size
declaration across src/app (89 files) that matched one of the 9
typography scale steps introduced earlier (--font-size-xs..4xl) was
replaced with var(--font-size-STEP, <same-or-nearest-step-value>).

Values within ~0.03rem/1px of a scale step were snapped to that step
(e.g. 0.85rem and 0.8rem both -> --font-size-sm/0.8125rem; 0.9rem and
0.875rem -> --font-size-base/0.875rem) to consolidate roughly 15
near-duplicate sizes down to the 9-step scale, per the RC design-system
finalization brief. This eliminates most of the font-size fragmentation
found across the app (previously: 0.7/0.72/0.75/0.78/0.8/0.8125/0.85/
0.875/0.9/0.9375/0.95/1/1.05/1.1/1.125/1.15/1.2/1.25/1.3/1.35/1.4/1.5/
1.75/2rem all in live use simultaneously).

Not touched (deliberately, see docs/UI-DESIGN-REVIEW.md): 3rem+ display
sizes (too large a jump to any existing step, would need a --font-size-5xl
addition), font-size values expressed via clamp()/calc(), and any
component listed as intentionally distinct (code-editor syntax tokens,
theme brand colors).
This commit is contained in:
sdarbinyan
2026-07-20 03:26:17 +04:00
parent aaa3604cd4
commit 7cb1c8c3c6
88 changed files with 538 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss
View File

@@ -41,10 +41,10 @@
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-primary, #1e3c38);
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
cursor: pointer;
.pi { font-size: 0.85rem; }
.pi { font-size: var(--font-size-sm, 0.8125rem); }
&:hover { background: var(--bg-tertiary, #e8ecea); }
&:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 1px; }
@@ -53,7 +53,7 @@
.html-editor-toolbar__btn--bold { font-weight: 700; }
.html-editor-toolbar__btn--italic { font-style: italic; font-family: serif; }
.html-editor-toolbar__btn--underline { text-decoration: underline; }
.html-editor-toolbar__btn--wide { padding: 0 10px; font-size: 0.8rem; color: var(--text-secondary, #6b7280); }
.html-editor-toolbar__btn--wide { padding: 0 10px; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }
.html-editor-surface {
min-height: 160px;
@@ -66,5 +66,5 @@
.html-editor-code-error {
margin: 0;
color: var(--error-color, #991b1b);
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}

12
src/app/features/project-editor/components/project-editor-nav.component.scss
View File

@@ -14,12 +14,12 @@
.editor-nav-group__icon {
color: var(--primary-color);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
.editor-nav-group__label {
flex: 1 1 auto;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -27,7 +27,7 @@
}
.editor-nav-group__status {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
.editor-nav-group__status--complete {
@@ -67,7 +67,7 @@
color: var(--text-primary);
padding: 0 var(--space-sm);
font-weight: 500;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
cursor: pointer;
text-decoration: none;
@@ -89,7 +89,7 @@
}
.editor-nav-link__status {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
flex-shrink: 0;
}
@@ -128,7 +128,7 @@
border-radius: var(--radius-lg);
background: var(--error-color);
color: #fff;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
line-height: 1;
flex-shrink: 0;