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

2
src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss
View File

@@ -39,7 +39,7 @@
.catalog-empty-state__content h2 {
color: var(--text-primary);
font-size: 1.3rem;
font-size: var(--font-size-3xl, 1.5rem);
}
.catalog-empty-state__category {

4
src/app/features/website/catalog/components/category-grid/category-grid.component.scss
View File

@@ -70,7 +70,7 @@
.catalog-category-title {
color: #1e3c38;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 800;
line-height: 1.25;
display: -webkit-box;
@@ -90,7 +90,7 @@
border-radius: 999px;
background: rgba(73, 118, 113, 0.1);
color: #3d635f;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 700;
white-space: nowrap;
}

6
src/app/features/website/catalog/components/filters-panel/filters-panel.component.scss
View File

@@ -33,7 +33,7 @@
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 700;
text-align: left;
cursor: pointer;
@@ -42,7 +42,7 @@
.filter-group-chevron {
color: var(--text-secondary);
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
transition: transform 0.2s ease;
}
@@ -82,7 +82,7 @@
.filter-group h4,
.range-field span {
margin: 0;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;

2
src/app/features/website/catalog/components/sorting-control/sorting-control.component.scss
View File

@@ -9,7 +9,7 @@
.catalog-sorting span {
color: var(--text-secondary);
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 700;
}

18
src/app/features/website/catalog/containers/catalog-container.component.scss
View File

@@ -45,7 +45,7 @@
.catalog-root-link {
width: fit-content;
color: #1e3c38;
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 900;
text-decoration: none;
}
@@ -63,7 +63,7 @@
gap: 8px;
flex-wrap: wrap;
color: #697777;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
a,
button {
@@ -239,7 +239,7 @@
.catalog-sort-sheet-head h2 {
margin: 0;
color: var(--text-primary);
font-size: 1.05rem;
font-size: var(--font-size-lg, 1rem);
}
.catalog-icon-btn {
@@ -249,7 +249,7 @@
border-radius: 50%;
background: var(--bg-primary);
color: var(--text-primary);
font-size: 1.15rem;
font-size: var(--font-size-xl, 1.125rem);
line-height: 1;
cursor: pointer;
}
@@ -397,14 +397,14 @@
h1 {
margin: 0;
color: #1e3c38;
font-size: 1.75rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 900;
}
p {
margin: 0;
color: #697777;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
}
@@ -462,7 +462,7 @@
h2 {
margin: 0;
color: #1e3c38;
font-size: 1.35rem;
font-size: var(--font-size-3xl, 1.5rem);
}
p {
@@ -558,7 +558,7 @@
}
.catalog-root-link {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
.catalog-mobile-toolbar {
@@ -572,7 +572,7 @@
}
.catalog-section-heading h1 {
font-size: 1.35rem;
font-size: var(--font-size-3xl, 1.5rem);
}
.catalog-loading {

2
src/app/features/website/product/components/delivery-information/delivery-information.component.scss
View File

@@ -10,7 +10,7 @@
h2 {
margin: 0;
color: #1e3c38;
font-size: 1.05rem;
font-size: var(--font-size-lg, 1rem);
}
}

2
src/app/features/website/product/components/product-gallery/product-gallery.component.scss
View File

@@ -125,7 +125,7 @@
color: #fff;
border-radius: 999px;
padding: 2px 8px;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
text-transform: uppercase;
}

6
src/app/features/website/product/components/product-information/product-information.component.scss
View File

@@ -30,7 +30,7 @@
border-radius: 999px;
background: #497671;
color: #fff;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 900;
text-transform: uppercase;
}
@@ -51,7 +51,7 @@
strong {
color: #1e3c38;
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
line-height: 1;
}
}
@@ -96,7 +96,7 @@
border-radius: 13px;
background: #497671;
color: #fff;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 900;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease;

2
src/app/features/website/product/components/product-specifications/product-specifications.component.scss
View File

@@ -16,7 +16,7 @@ h3 {
h4 {
margin: 0;
color: var(--text-primary);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
dl {

2
src/app/features/website/product/components/variant-selector/variant-selector.component.scss
View File

@@ -12,7 +12,7 @@
.variant-label {
color: #697777;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 800;
}

2
src/app/features/website/product/engagement/components/product-tabs/product-tabs.component.scss
View File

@@ -21,7 +21,7 @@
}
.tab-btn small {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
}

2
src/app/features/website/product/engagement/components/question-card/question-card.component.scss
View File

@@ -46,7 +46,7 @@ header {
.accepted-pill {
border-radius: 999px;
padding: 2px 8px;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
}
.seller-pill {

2
src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss
View File

@@ -13,7 +13,7 @@
}
.average {
font-size: 1.75rem;
font-size: var(--font-size-4xl, 2rem);
color: var(--text-primary);
}

6
src/app/features/website/product/engagement/components/review-card/review-card.component.scss
View File

@@ -10,7 +10,7 @@
align-items: center;
gap: 10px;
color: var(--text-secondary);
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
.author {
@@ -21,13 +21,13 @@
border: 1px dashed var(--border-dark);
border-radius: 999px;
padding: 3px 8px;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
}
h4 {
margin: 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-primary);
}

6
src/app/features/website/product/engagement/components/review-form/review-form.component.scss
View File

@@ -12,7 +12,7 @@ h3 {
label {
font-weight: 700;
color: var(--text-primary);
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
input,
@@ -38,13 +38,13 @@ textarea {
.upload-placeholder {
margin: 0;
color: var(--text-light);
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
.success,
.error {
margin: 0;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
.success {

2
src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
View File

@@ -8,7 +8,7 @@
border: 0;
background: transparent;
color: #cad3d2;
font-size: 1.4rem;
font-size: var(--font-size-3xl, 1.5rem);
line-height: 1;
cursor: pointer;
padding: 0;

2
src/app/features/website/product/engagement/components/stars/stars.component.scss
View File

@@ -2,7 +2,7 @@
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
line-height: 1;
}

4
src/app/features/website/user-experience/compare/components/compare-table.component.scss
View File

@@ -25,7 +25,7 @@
}
.compare-product-title {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 700;
line-height: 1.3;
}
@@ -38,6 +38,6 @@
.compare-table th,
.compare-table td {
padding: 10px;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
}

2
src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss
View File

@@ -32,7 +32,7 @@
border: 0;
background: transparent;
color: var(--text-secondary);
font-size: 1.15rem;
font-size: var(--font-size-xl, 1.125rem);
line-height: 1;
cursor: pointer;
}

2
src/app/features/website/user-experience/components/recently-viewed-strip/recently-viewed-strip.component.scss
View File

@@ -14,7 +14,7 @@
.recently-viewed-head h2 {
margin: 0;
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
color: var(--text-primary);
}