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

136
src/app/pages/cart/cart.component.scss
View File

@@ -24,7 +24,7 @@
h1 {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: #1e3c38;
margin: 0;
@@ -37,7 +37,7 @@
border: 1px solid #d3dad9;
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
@@ -71,7 +71,7 @@
align-items: center;
h1 {
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: #111827;
margin: 0;
@@ -87,7 +87,7 @@
color: white;
border: none;
border-radius: 12px;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -145,7 +145,7 @@
p {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: #697777;
margin: 0 0 28px 0;
}
@@ -158,7 +158,7 @@
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
transition: all 0.2s;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
@@ -193,14 +193,14 @@
}
h2 {
font-size: 1.75rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: #111827;
margin: 0 0 12px 0;
}
p {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: #6b7280;
margin: 0 0 32px 0;
}
@@ -212,7 +212,7 @@
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
transition: all 0.3s;
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
@@ -331,7 +331,7 @@
.item-name {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.05rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 600;
color: #1e3c38;
text-decoration: none;
@@ -360,7 +360,7 @@
.item-description {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
color: #697777;
line-height: 1.5;
}
@@ -373,7 +373,7 @@
margin-top: 4px;
.cart-variant {
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #497671;
background: rgba(73, 118, 113, 0.08);
padding: 3px 10px;
@@ -460,7 +460,7 @@
}
.item-name {
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
color: #111827;
text-decoration: none;
@@ -489,7 +489,7 @@
}
.item-description {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
color: #6b7280;
line-height: 1.6;
}
@@ -502,7 +502,7 @@
margin-top: 4px;
.cart-variant {
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #6366f1;
background: rgba(99, 102, 241, 0.08);
padding: 3px 10px;
@@ -544,20 +544,20 @@
}
.original-price {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #9ca3af;
text-decoration: line-through;
}
.current-price {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.15rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
color: #497671;
}
.delivery-price {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 500;
color: #697777;
}
@@ -599,7 +599,7 @@
.qty-value {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: #1e3c38;
min-width: 24px;
@@ -645,7 +645,7 @@
}
.qty-value {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: #059669;
min-width: 24px;
@@ -691,7 +691,7 @@
.summary-header h3 {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.4rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
color: #1e3c38;
margin: 0 0 16px 0;
@@ -702,7 +702,7 @@
justify-content: space-between;
align-items: center;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: #697777;
&.delivery {
@@ -712,13 +712,13 @@
&.total {
padding-top: 16px;
border-top: 1px solid #d3dad9;
font-size: 1.15rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
color: #1e3c38;
margin-top: 8px;
.total-price {
font-size: 1.35rem;
font-size: var(--font-size-3xl, 1.5rem);
color: #497671;
}
}
@@ -739,7 +739,7 @@
border: none;
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.05rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
@@ -783,14 +783,14 @@
.login-gate-title {
margin: 0 0 4px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: #1a1a1a;
}
.login-gate-desc {
margin: 0 0 16px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #6b7280;
line-height: 1.4;
}
@@ -804,7 +804,7 @@
border-radius: 10px;
background: #2AABEE;
color: #fff;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
@@ -841,7 +841,7 @@
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
.summary-header h3 {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
color: #111827;
margin: 0 0 20px 0;
@@ -855,7 +855,7 @@
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: #6b7280;
&.delivery {
@@ -865,13 +865,13 @@
&.total {
padding-top: 20px;
border-top: 2px solid #f0fdf4;
font-size: 1.2rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: #111827;
margin-top: 12px;
.total-price {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
color: #10b981;
font-weight: 800;
}
@@ -897,7 +897,7 @@
color: white;
border: none;
border-radius: 14px;
font-size: 1.1rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -949,14 +949,14 @@
.login-gate-title {
margin: 0 0 4px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
color: #111827;
}
.login-gate-desc {
margin: 0 0 16px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #6b7280;
line-height: 1.4;
}
@@ -970,7 +970,7 @@
border-radius: 12px;
background: #2AABEE;
color: #fff;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1030,7 +1030,7 @@
}
.terms-text {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #6b7280;
line-height: 1.4;
@@ -1050,7 +1050,7 @@
margin: -4px 0 0;
padding: 10px 12px;
border-radius: 10px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
line-height: 1.5;
}
@@ -1085,7 +1085,7 @@
.terms-text {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: #697777;
line-height: 1.5;
@@ -1119,7 +1119,7 @@
}
.terms-text {
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
line-height: 1.6;
a {
@@ -1229,7 +1229,7 @@
text-align: center;
h2 {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
margin: 20px 0 10px;
color: #1a1a1a;
}
@@ -1280,7 +1280,7 @@
border: none;
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
@@ -1300,7 +1300,7 @@
}
.auto-close {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
margin-top: 20px;
}
}
@@ -1394,11 +1394,11 @@
.label {
color: #6b7280;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
}
.amount {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: #1a1a1a;
}
@@ -1431,7 +1431,7 @@
padding: 12px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
@@ -1532,7 +1532,7 @@
.error-message {
color: #ef4444;
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
padding-left: 4px;
animation: slideDown 0.2s ease;
}
@@ -1553,7 +1553,7 @@
padding: 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
outline: none;
transition: all 0.2s;
@@ -1590,7 +1590,7 @@
border: none;
border-radius: 13px;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
cursor: pointer;
display: flex;
@@ -1698,7 +1698,7 @@
}
.payment-active h2 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
margin-bottom: 16px;
}
}
@@ -1729,7 +1729,7 @@
border-bottom: 2px solid var(--border-color);
h1 {
font-size: 2rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: var(--text-primary);
margin: 0;
@@ -1748,7 +1748,7 @@
color: white;
border: none;
border-radius: var(--radius-lg);
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
@@ -1791,14 +1791,14 @@
}
h2 {
font-size: 1.75rem;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 0.75rem 0;
}
p {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-secondary);
margin: 0 0 2rem 0;
max-width: 400px;
@@ -1812,7 +1812,7 @@
text-decoration: none;
border-radius: var(--radius-lg);
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
transition: all 0.3s ease;
&:hover {
@@ -1886,7 +1886,7 @@
gap: 1rem;
.item-name {
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
@@ -1926,7 +1926,7 @@
}
.item-desc {
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
@@ -1946,7 +1946,7 @@
.item-price {
font-weight: 700;
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
.price-discount {
display: flex;
@@ -1954,7 +1954,7 @@
gap: 0.5rem;
.old {
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: var(--text-secondary);
text-decoration: line-through;
font-weight: 400;
@@ -1962,7 +1962,7 @@
.current {
color: #10b981;
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
}
}
@@ -2013,7 +2013,7 @@
min-width: 36px;
text-align: center;
font-weight: 600;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-primary);
}
}
@@ -2033,7 +2033,7 @@
padding: 1.5rem;
h3 {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 1.25rem 0;
@@ -2046,7 +2046,7 @@
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
color: var(--text-secondary);
.value {
@@ -2063,14 +2063,14 @@
margin-top: 1rem;
border-top: 1px solid var(--border-color);
font-weight: 700;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
span:first-child {
color: var(--text-secondary);
}
.total-price {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
background: linear-gradient(135deg, #10b981, #14b8a6, #06b6d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -2117,7 +2117,7 @@
gap: 0.75rem;
cursor: pointer;
position: relative;
font-size: 0.875rem;
font-size: var(--font-size-base, 0.875rem);
line-height: 1.6;
input[type="checkbox"] {
@@ -2204,7 +2204,7 @@
gap: 1rem;
h1 {
font-size: 1.5rem;
font-size: var(--font-size-3xl, 1.5rem);
}
}
@@ -2234,7 +2234,7 @@
padding: 1.25rem;
.summary-total .total-price {
font-size: 1.25rem;
font-size: var(--font-size-2xl, 1.25rem);
}
}
}