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;

26
src/app/features/project-editor/pages/builder-overview-page.component.scss
View File

@@ -12,7 +12,7 @@
align-items: center;
gap: var(--space-xs);
align-self: flex-start;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
@@ -39,7 +39,7 @@
.builder-overview__eyebrow {
margin: 0;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -54,7 +54,7 @@
.builder-overview__subtitle {
margin: 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: rgba(255, 255, 255, 0.9);
}
@@ -83,7 +83,7 @@
.builder-overview__readiness-hint {
margin: 2px 0 0;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: rgba(255, 255, 255, 0.8);
}
@@ -97,13 +97,13 @@
background: rgba(255, 255, 255, 0.12);
.pi {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
}
}
.builder-overview__next-step-label {
margin: 0;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -113,7 +113,7 @@
.builder-overview__next-step-link {
color: #fff;
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
text-decoration: underline;
}
@@ -129,7 +129,7 @@
h2 {
margin: 0;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
color: var(--text-primary);
}
@@ -178,7 +178,7 @@
}
.builder-overview__card-status {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
.builder-overview__card-status--complete {
@@ -200,20 +200,20 @@
.builder-overview__card-title {
margin: 0;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
color: var(--text-primary);
}
.builder-overview__card-description {
margin: 0;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
flex: 1 1 auto;
}
.builder-overview__card-cta {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
color: var(--primary-color);
}
@@ -234,7 +234,7 @@
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-primary);
}

12
src/app/features/project-editor/pages/project-editor-page.component.scss
View File

@@ -59,7 +59,7 @@
margin-bottom: var(--space-md);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
text-decoration: none;
&:hover {
@@ -118,7 +118,7 @@
list-style: none;
margin: 0 0 4px;
padding: 0;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-light);
}
@@ -166,7 +166,7 @@
}
.project-editor-layout__badge {
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -191,7 +191,7 @@
.project-editor-layout__description {
margin: var(--space-xs) 0 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-secondary);
max-width: 65ch;
}
@@ -232,7 +232,7 @@
h2 {
margin: 0 0 4px;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -241,7 +241,7 @@
p {
margin: 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-secondary);
}
}

26
src/app/features/project-editor/sections/brand/brand-overview.component.scss
View File

@@ -25,7 +25,7 @@
display: grid;
place-items: center;
font-weight: 700;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
color: var(--text-primary);
span {
@@ -44,14 +44,14 @@
h2 {
margin: 0;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
color: var(--text-primary);
}
p {
margin: 4px 0 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-secondary);
}
}
@@ -69,7 +69,7 @@
}
.brand-overview__last-saved {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-light);
}
@@ -85,11 +85,11 @@
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-light);
.pi {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
}
}
@@ -116,7 +116,7 @@
h3 {
margin: 0 0 var(--space-sm);
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -146,7 +146,7 @@
}
.brand-overview__swatch-label {
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-light);
text-align: center;
}
@@ -160,7 +160,7 @@
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--warning-color) 12%, transparent);
color: var(--warning-color);
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
}
@@ -173,7 +173,7 @@
.brand-overview__type-heading {
margin: 0 0 4px;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
color: var(--text-primary);
}
@@ -206,19 +206,19 @@
.brand-overview__social-title {
margin: 0;
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-primary);
}
.brand-overview__social-desc {
margin: 2px 0 0;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
}
.brand-overview__social-empty {
margin: 0;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-light);
}

4
src/app/features/project-editor/sections/footer-section.component.scss
View File

@@ -12,7 +12,7 @@
background: transparent;
cursor: pointer;
color: var(--text-secondary, #6b7280);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
&:hover { color: var(--danger-color, #c0392b); }
}
@@ -52,7 +52,7 @@
background: transparent;
cursor: pointer;
color: var(--text-secondary, #6b7280);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
&:hover { color: var(--danger-color, #c0392b); }
}

12
src/app/features/project-editor/sections/homepage-section.component.scss
View File

@@ -29,15 +29,15 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-size: var(--font-size-2xl, 1.25rem);
color: var(--color-primary, #2f8f5b);
}
.block-card__title-row { display: flex; align-items: center; gap: 8px; }
.block-card__desc { margin: 2px 0 8px; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
.block-card__desc { margin: 2px 0 8px; color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
.block-card__hidden-badge {
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-secondary, #6b7280);
@@ -62,7 +62,7 @@
}
}
.block-card__visible-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.block-card__visible-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm, 0.8125rem); }
.block-card__remove:hover { color: var(--danger-color, #c0392b); }
.block-catalog { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color, #d3dad9); }
@@ -83,10 +83,10 @@
border-radius: var(--radius-sm);
background: var(--bg-secondary, #f7f8f8);
cursor: pointer;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: var(--text-primary, #1e3c38);
.pi { font-size: 1.2rem; color: var(--color-primary, #2f8f5b); }
.pi { font-size: var(--font-size-2xl, 1.25rem); color: var(--color-primary, #2f8f5b); }
&:hover { border-color: var(--color-primary, #2f8f5b); background: #fff; }
&:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }

14
src/app/features/project-editor/sections/homepage/homepage-overview.component.scss
View File

@@ -25,7 +25,7 @@
display: grid;
place-items: center;
font-weight: 700;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
color: var(--text-primary);
span {
@@ -44,20 +44,20 @@
h2 {
margin: 0;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
color: var(--text-primary);
}
p {
margin: 4px 0 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-secondary);
}
}
.homepage-overview__counts {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
}
.homepage-overview__next-step {
@@ -73,7 +73,7 @@
}
.homepage-overview__last-saved {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-light);
}
@@ -89,11 +89,11 @@
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-light);
.pi {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
}
}

10
src/app/features/project-editor/sections/section.shared.scss
View File

@@ -45,7 +45,7 @@ app-form-field.full {
.field-desc {
display: block;
font-weight: 400;
font-size: 12px;
font-size: var(--font-size-xs, 0.75rem);
line-height: 1.4;
color: var(--text-secondary, #5f6e6a);
margin: -2px 0 2px;
@@ -196,7 +196,7 @@ button.secondary {
.preview-changes {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
th,
td {
@@ -235,9 +235,9 @@ button.secondary {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--border-color, #d3dad9);
font-size: 0.8rem; font-weight: 600;
em { font-style: normal; font-weight: 400; font-size: 0.7rem; color: var(--text-secondary, #6b7280); }
font-size: var(--font-size-sm, 0.8125rem); font-weight: 600;
em { font-style: normal; font-weight: 400; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #6b7280); }
}
.languages-summary__chip--default { border-color: var(--color-primary, #2f8f5b); }
.languages-summary__manage { font-size: 0.85rem; text-decoration: underline; color: var(--text-primary, #1e3c38); }
.languages-summary__manage { font-size: var(--font-size-sm, 0.8125rem); text-decoration: underline; color: var(--text-primary, #1e3c38); }
.languages-summary__manage:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }

14
src/app/features/project-editor/sections/widgets-section.component.scss
View File

@@ -11,14 +11,14 @@
}
.widget-card__icon {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
color: var(--primary-color);
flex-shrink: 0;
}
.widget-card__title {
margin: 0;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
color: var(--text-primary);
flex: 1 1 auto;
@@ -26,7 +26,7 @@
}
.widget-card__hidden-badge {
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -80,7 +80,7 @@
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
}
@@ -89,13 +89,13 @@
summary {
cursor: pointer;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
color: var(--text-light);
}
}
.widget-card__subheading { margin: 12px 0 4px; font-size: 0.9rem; }
.widget-card__subheading { margin: 12px 0 4px; font-size: var(--font-size-base, 0.875rem); }
.hero-slide-row {
display: flex;
@@ -111,7 +111,7 @@
background: transparent;
cursor: pointer;
color: var(--text-secondary, #6b7280);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
&:hover { color: var(--danger-color, #c0392b); }
}