style(design-system): normalize font-weight literals (400/500/600/700) to tokens

Mechanical, value-preserving: font-weight: 400/500/600/700 -> var(--font-weight-normal/medium/semibold/bold, <same value>) across src/app.
Note: cart.component.scss now sits ~771 bytes over its per-file budget
in angular.json due to longer var() strings; non-fatal build warning,
noted in docs/UI-DESIGN-REVIEW.md as a follow-up (either bump the
component style budget slightly or accept the warning).
This commit is contained in:
sdarbinyan
2026-07-20 03:28:56 +04:00
parent be59db2e2d
commit 5c54541b4c
74 changed files with 286 additions and 286 deletions

View File

@@ -25,7 +25,7 @@
h1 {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #1e3c38;
margin: 0;
}
@@ -38,7 +38,7 @@
border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
cursor: pointer;
transition: all 0.2s;
display: flex;
@@ -72,7 +72,7 @@
h1 {
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #111827;
margin: 0;
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
@@ -88,7 +88,7 @@
border: none;
border-radius: var(--radius-md, 12px);
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
@@ -138,7 +138,7 @@
h2 {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 1.6rem;
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #1e3c38;
margin: 0 0 12px 0;
}
@@ -157,7 +157,7 @@
text-decoration: none;
border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-lg, 1rem);
transition: all 0.2s;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
@@ -194,7 +194,7 @@
h2 {
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #111827;
margin: 0 0 12px 0;
}
@@ -211,7 +211,7 @@
color: white;
text-decoration: none;
border-radius: var(--radius-md, 12px);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-lg, 1rem);
transition: all 0.3s;
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
@@ -332,7 +332,7 @@
.item-name {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-lg, 1rem);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
color: #1e3c38;
text-decoration: none;
transition: color 0.2s;
@@ -378,7 +378,7 @@
background: rgba(73, 118, 113, 0.08);
padding: 3px 10px;
border-radius: 6px;
font-weight: 500;
font-weight: var(--font-weight-medium, 500);
display: inline-flex;
align-items: center;
gap: 6px;
@@ -461,7 +461,7 @@
.item-name {
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #111827;
text-decoration: none;
transition: color 0.2s;
@@ -507,7 +507,7 @@
background: rgba(99, 102, 241, 0.08);
padding: 3px 10px;
border-radius: 6px;
font-weight: 500;
font-weight: var(--font-weight-medium, 500);
display: inline-flex;
align-items: center;
gap: 6px;
@@ -552,13 +552,13 @@
.current-price {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #497671;
}
.delivery-price {
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 500;
font-weight: var(--font-weight-medium, 500);
color: #697777;
}
}
@@ -600,7 +600,7 @@
.qty-value {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #1e3c38;
min-width: 24px;
text-align: center;
@@ -646,7 +646,7 @@
.qty-value {
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #059669;
min-width: 24px;
text-align: center;
@@ -692,7 +692,7 @@
.summary-header h3 {
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #1e3c38;
margin: 0 0 16px 0;
}
@@ -713,7 +713,7 @@
padding-top: 16px;
border-top: 1px solid #d3dad9;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #1e3c38;
margin-top: 8px;
@@ -740,7 +740,7 @@
border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
@@ -784,7 +784,7 @@
.login-gate-title {
margin: 0 0 4px;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #1a1a1a;
}
@@ -805,7 +805,7 @@
background: #2AABEE;
color: #fff;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
cursor: pointer;
transition: all 0.2s;
@@ -842,7 +842,7 @@
.summary-header h3 {
font-size: var(--font-size-3xl, 1.5rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #111827;
margin: 0 0 20px 0;
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
@@ -866,7 +866,7 @@
padding-top: 20px;
border-top: 2px solid #f0fdf4;
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #111827;
margin-top: 12px;
@@ -878,7 +878,7 @@
}
.value {
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
color: #111827;
}
}
@@ -898,7 +898,7 @@
border: none;
border-radius: 14px;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
@@ -950,7 +950,7 @@
.login-gate-title {
margin: 0 0 4px;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #111827;
}
@@ -971,7 +971,7 @@
background: #2AABEE;
color: #fff;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1092,7 +1092,7 @@
a {
color: #497671;
text-decoration: none;
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
&:hover {
text-decoration: underline;
@@ -1124,7 +1124,7 @@
a {
color: #10b981;
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
&:hover {
color: #059669;
@@ -1264,7 +1264,7 @@
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: white;
margin: 0 auto 20px;
}
@@ -1281,7 +1281,7 @@
border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
cursor: pointer;
transition: all 0.2s;
@@ -1399,7 +1399,7 @@
.amount {
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: #1a1a1a;
}
}
@@ -1430,7 +1430,7 @@
flex: 1;
padding: 12px 16px;
border-radius: var(--radius-sm, 8px);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-md, 0.9375rem);
cursor: pointer;
transition: all 0.3s ease;
@@ -1591,7 +1591,7 @@
border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: var(--font-size-lg, 1rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
cursor: pointer;
display: flex;
align-items: center;
@@ -1730,7 +1730,7 @@
h1 {
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: var(--text-primary);
margin: 0;
background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);
@@ -1749,7 +1749,7 @@
border: none;
border-radius: var(--radius-lg);
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
cursor: pointer;
transition: all 0.3s ease;
@@ -1792,7 +1792,7 @@
h2 {
font-size: var(--font-size-4xl, 2rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: var(--text-primary);
margin: 0 0 0.75rem 0;
}
@@ -1811,7 +1811,7 @@
color: white;
text-decoration: none;
border-radius: var(--radius-lg);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-lg, 1rem);
transition: all 0.3s ease;
@@ -1887,7 +1887,7 @@
.item-name {
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
color: var(--text-primary);
text-decoration: none;
margin: 0;
@@ -1945,7 +1945,7 @@
gap: 1rem;
.item-price {
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
font-size: var(--font-size-2xl, 1.25rem);
.price-discount {
@@ -1957,7 +1957,7 @@
font-size: var(--font-size-md, 0.9375rem);
color: var(--text-secondary);
text-decoration: line-through;
font-weight: 400;
font-weight: var(--font-weight-normal, 400);
}
.current {
@@ -2012,7 +2012,7 @@
span {
min-width: 36px;
text-align: center;
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-lg, 1rem);
color: var(--text-primary);
}
@@ -2034,7 +2034,7 @@
h3 {
font-size: var(--font-size-2xl, 1.25rem);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
color: var(--text-primary);
margin: 0 0 1.25rem 0;
padding-bottom: 1rem;
@@ -2050,7 +2050,7 @@
color: var(--text-secondary);
.value {
font-weight: 600;
font-weight: var(--font-weight-semibold, 600);
color: var(--text-primary);
}
}
@@ -2062,7 +2062,7 @@
padding: 1.25rem 0;
margin-top: 1rem;
border-top: 1px solid var(--border-color);
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
font-size: var(--font-size-xl, 1.125rem);
span:first-child {
@@ -2087,7 +2087,7 @@
border: none;
border-radius: var(--radius-md);
font-size: 1.0625rem;
font-weight: 700;
font-weight: var(--font-weight-bold, 700);
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
@@ -2169,7 +2169,7 @@
a {
color: #10b981;
text-decoration: none;
font-weight: 500;
font-weight: var(--font-weight-medium, 500);
transition: all 0.2s;
&:hover {