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

6
src/app/components/delivery-selector/delivery-selector.component.scss
View File

@@ -13,7 +13,7 @@
.delivery-label {
display: block;
margin-bottom: 8px;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 700;
color: #3f5f5c;
}
@@ -25,7 +25,7 @@
border: 1px solid #c9d5d3;
background: #fff;
color: #1f2937;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
line-height: 1.4;
}
@@ -49,7 +49,7 @@
align-items: center;
padding: 6px 10px;
border-radius: 999px;
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 700;
}

6
src/app/components/footer/footer.component.scss
View File

@@ -35,7 +35,7 @@
.app-footer__group {
h4 {
margin: 0 0 0.75rem;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: #fff;
}
@@ -86,13 +86,13 @@
p {
margin: 0;
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
}

14
src/app/components/header/header.component.scss
View File

@@ -60,7 +60,7 @@
background: rgba(255, 255, 255, 0.74);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-size: 15px;
font-size: var(--font-size-md, 0.9375rem);
color: #1e3c38;
text-decoration: none;
cursor: pointer;
@@ -124,7 +124,7 @@
outline: none;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-size: 15px;
font-size: var(--font-size-md, 0.9375rem);
color: #828e8d;
cursor: pointer;
@@ -163,7 +163,7 @@
}
.platform-ux-icon {
font-size: 15px;
font-size: var(--font-size-md, 0.9375rem);
line-height: 1;
font-weight: 700;
}
@@ -276,7 +276,7 @@
border-radius: 13px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
font-family: 'DM Sans', sans-serif;
font-size: 16px;
font-size: var(--font-size-lg, 1rem);
font-weight: 500;
color: #1e3c38;
text-decoration: none;
@@ -389,7 +389,7 @@
}
.platform-nav-btn {
font-size: 18px;
font-size: var(--font-size-xl, 1.125rem);
padding: 8px 32px !important;
}
@@ -418,7 +418,7 @@
}
.platform-nav-btn {
font-size: 16px;
font-size: var(--font-size-lg, 1rem);
padding: 8px 24px !important;
}
@@ -439,7 +439,7 @@
}
.platform-search-input {
font-size: 18px;
font-size: var(--font-size-xl, 1.125rem);
}
}

14
src/app/components/items-carousel/items-carousel.component.scss
View File

@@ -185,7 +185,7 @@
padding: 4px 10px;
border-radius: 20px;
font-family: "DM Sans", sans-serif;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
letter-spacing: 0.02em;
z-index: 2;
@@ -202,7 +202,7 @@
.item-name {
font-family: "DM Sans", sans-serif;
font-size: 0.8125rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 600;
margin: 0;
line-height: 1.35;
@@ -225,7 +225,7 @@
align-items: center;
gap: 4px;
font-family: "DM Sans", sans-serif;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
svg {
flex-shrink: 0;
@@ -260,7 +260,7 @@
.current-price,
.discounted-price {
font-size: 0.9375rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 700;
color: #1e3c38;
}
@@ -270,7 +270,7 @@
}
.original-price {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: #a1b4b5;
text-decoration: line-through;
}
@@ -361,13 +361,13 @@
}
.item-name {
font-size: 0.8125rem;
font-size: var(--font-size-sm, 0.8125rem);
}
.item-price {
.current-price,
.discounted-price {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
}
}

28
src/app/components/language-selector/language-selector.component.scss
View File

@@ -14,7 +14,7 @@
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
font-size: var(--font-size-base, 0.875rem);
font-weight: 500;
&:hover {
@@ -78,7 +78,7 @@
color: #ffffff;
cursor: pointer;
transition: background 0.2s ease;
font-size: 14px;
font-size: var(--font-size-base, 0.875rem);
text-align: left;
&:hover:not(.disabled) {
@@ -183,7 +183,7 @@
.language-code {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 500;
font-size: 15px;
font-size: var(--font-size-md, 0.9375rem);
color: #1e3c38;
letter-spacing: 0;
line-height: 1;
@@ -224,7 +224,7 @@
@media (max-width: 768px) {
.language-button {
padding: 6px 10px;
font-size: 13px;
font-size: var(--font-size-sm, 0.8125rem);
.language-flag {
width: 18px;
@@ -238,7 +238,7 @@
.language-option {
padding: 10px 14px;
font-size: 13px;
font-size: var(--font-size-sm, 0.8125rem);
.option-flag {
width: 20px;
@@ -254,7 +254,7 @@
}
.language-button .language-code {
font-size: 18px;
font-size: var(--font-size-xl, 1.125rem);
}
}
}
@@ -325,7 +325,7 @@
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
font-size: var(--font-size-base, 0.875rem);
font-weight: 500;
&:hover {
@@ -334,12 +334,12 @@
}
.currency-symbol {
font-size: 15px;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 700;
}
.currency-code {
font-size: 13px;
font-size: var(--font-size-sm, 0.8125rem);
letter-spacing: 0.5px;
}
@@ -384,7 +384,7 @@
color: #ffffff;
cursor: pointer;
transition: background 0.2s ease;
font-size: 14px;
font-size: var(--font-size-base, 0.875rem);
&:hover {
background: rgba(255, 255, 255, 0.05);
@@ -396,7 +396,7 @@
}
.cur-symbol {
font-size: 16px;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
width: 20px;
text-align: center;
@@ -407,7 +407,7 @@
}
.cur-code {
font-size: 12px;
font-size: var(--font-size-xs, 0.75rem);
opacity: 0.6;
}
}
@@ -450,8 +450,8 @@
&:hover {
background: rgba(255, 255, 255, 0.5);
}
.currency-symbol { font-size: 14px; color: #1e3c38; }
.currency-code { font-size: 13px; color: #1e3c38; }
.currency-symbol { font-size: var(--font-size-base, 0.875rem); color: #1e3c38; }
.currency-code { font-size: var(--font-size-sm, 0.8125rem); color: #1e3c38; }
.dropdown-arrow path { stroke: #1e3c38; }
}
.currency-dropdown {

16
src/app/components/product-card/product-card.component.scss
View File

@@ -58,7 +58,7 @@
padding: 6px 12px;
border-radius: 20px;
font-weight: 700;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
z-index: 1;
}
@@ -74,7 +74,7 @@
border-radius: 999px;
background: rgba(22, 163, 74, 0.9);
color: #fff;
font-size: 0.72rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
text-transform: capitalize;
}
@@ -99,7 +99,7 @@
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: #1e3c38;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
display: inline-flex;
align-items: center;
@@ -160,7 +160,7 @@
border-radius: 999px;
background: #497671;
color: #fff;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
text-transform: uppercase;
}
@@ -197,7 +197,7 @@
.product-description {
margin: 0;
color: #697777;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
line-height: 1.45;
display: -webkit-box;
line-clamp: 2;
@@ -210,7 +210,7 @@
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #697777;
.rating-stars {
@@ -229,13 +229,13 @@
.original-price {
text-decoration: line-through;
color: #a1b4b5;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
.discounted-price,
.current-price {
color: #1e3c38;
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 800;
}

10
src/app/components/region-selector/region-selector.component.scss
View File

@@ -11,7 +11,7 @@
border-radius: 8px;
background: transparent;
cursor: pointer;
font-size: 13px;
font-size: var(--font-size-sm, 0.8125rem);
color: var(--text-primary, #333);
transition: all 0.2s ease;
white-space: nowrap;
@@ -66,7 +66,7 @@
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--border-color, #e0e0e0);
font-size: 12px;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
color: var(--text-secondary, #666);
text-transform: uppercase;
@@ -108,7 +108,7 @@
border-radius: 8px;
background: transparent;
cursor: pointer;
font-size: 14px;
font-size: var(--font-size-base, 0.875rem);
color: var(--text-primary, #333);
text-align: left;
transition: background 0.15s ease;
@@ -131,7 +131,7 @@
}
.region-country {
font-size: 12px;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #999);
}
}
@@ -156,7 +156,7 @@
@media (max-width: 768px) {
.region-trigger {
padding: 5px 8px;
font-size: 12px;
font-size: var(--font-size-xs, 0.75rem);
.region-name {
max-width: 80px;

18
src/app/components/telegram-login/telegram-login.component.scss
View File

@@ -59,14 +59,14 @@
h2 {
margin: 0 0 8px;
font-size: 20px;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: var(--text-primary, #1a1a1a);
}
.login-desc {
margin: 0 0 24px;
font-size: 14px;
font-size: var(--font-size-base, 0.875rem);
color: var(--text-secondary, #666);
line-height: 1.5;
}
@@ -82,7 +82,7 @@ h2 {
border-radius: 12px;
background: #2AABEE;
color: #fff;
font-size: 16px;
font-size: var(--font-size-lg, 1rem);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
@@ -106,7 +106,7 @@ h2 {
display: block;
margin-top: 10px;
color: var(--accent-color, #497671);
font-size: 12px;
font-size: var(--font-size-xs, 0.75rem);
line-height: 1.35;
overflow-wrap: anywhere;
text-decoration: none;
@@ -121,7 +121,7 @@ h2 {
.qr-hint {
margin: 0 0 12px;
font-size: 13px;
font-size: var(--font-size-sm, 0.8125rem);
color: var(--text-secondary, #999);
}
@@ -169,7 +169,7 @@ h2 {
}
span {
font-size: 13px;
font-size: var(--font-size-sm, 0.8125rem);
}
}
@@ -189,7 +189,7 @@ h2 {
}
span {
font-size: 13px;
font-size: var(--font-size-sm, 0.8125rem);
}
}
}
@@ -197,7 +197,7 @@ h2 {
.login-note {
margin: 16px 0 0;
font-size: 12px;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #999);
line-height: 1.4;
}
@@ -209,7 +209,7 @@ h2 {
gap: 10px;
padding: 16px;
color: var(--text-secondary, #666);
font-size: 14px;
font-size: var(--font-size-base, 0.875rem);
.spinner {
width: 20px;