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

24
src/app/features/admin/shell/admin-layout.component.scss
View File

@@ -113,7 +113,7 @@
.admin-layout__nav-group {
padding: var(--space-md) var(--space-sm) var(--space-xs);
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -130,13 +130,13 @@
background: none;
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
text-align: left;
text-decoration: none;
cursor: pointer;
.pi {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
width: 1.2rem;
flex-shrink: 0;
}
@@ -170,7 +170,7 @@
.admin-layout__soon-badge {
margin-left: auto;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-lg);
@@ -227,7 +227,7 @@
list-style: none;
margin: 0 0 2px;
padding: 0;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-light);
}
@@ -262,7 +262,7 @@
.admin-layout__title {
margin: 0;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
@@ -272,7 +272,7 @@
.admin-layout__description {
margin: 2px 0 0;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
@@ -297,7 +297,7 @@
border-radius: var(--radius-field, var(--radius-sm));
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
&:focus-visible {
outline: 2px solid var(--primary-color);
@@ -312,7 +312,7 @@
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
.admin-layout__icon-button {
@@ -357,7 +357,7 @@
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-secondary);
z-index: 25;
@@ -383,13 +383,13 @@
border-radius: 50%;
background: var(--primary-color);
color: #fff;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
flex-shrink: 0;
}
.admin-layout__account-name {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
max-width: 140px;
overflow: hidden;