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/features/admin/moderation/components/moderation-dashboard/moderation-dashboard.component.scss
View File

@@ -2,6 +2,6 @@
.moderation-dashboard__metrics { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .moderation-dashboard__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .moderation-dashboard__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.moderation-dashboard__activity h4 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 700; }
.moderation-dashboard__activity ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
.moderation-dashboard__activity p { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
.moderation-dashboard__activity h4 { margin: 0 0 8px; font-size: var(--font-size-md, 0.9375rem); font-weight: 700; }
.moderation-dashboard__activity ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
.moderation-dashboard__activity p { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }

4
src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss
View File

@@ -1,8 +1,8 @@
.review-health { display: grid; gap: 6px; align-items: center; }
.review-health__bar { height: 6px; border-radius: 999px; background: var(--surface-muted, #eef2f0); overflow: hidden; }
.review-health__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); }
.review-health__percent { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary, #5f6e6a); }
.review-health__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.78rem; color: var(--text-secondary, #5f6e6a); }
.review-health__percent { font-size: var(--font-size-xs, 0.75rem); font-weight: 700; color: var(--text-secondary, #5f6e6a); }
.review-health__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); }
.review-health__list li { display: flex; align-items: center; gap: 6px; }
.review-health__list-item--done { color: var(--text-primary, #1e3c38); }
.review-health--compact { grid-template-columns: 1fr auto; }

2
src/app/features/admin/moderation/pages/admin-reports-list-page.component.scss
View File

@@ -1,6 +1,6 @@
.admin-reports-card { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.toolbar { display: flex; align-items: center; gap: 12px; }
.toolbar h1 { margin: 0; font-size: 1.25rem; }
.toolbar h1 { margin: 0; font-size: var(--font-size-2xl, 1.25rem); }
.actions { display: flex; gap: 8px; }
.link-button { all: unset; cursor: pointer; color: var(--brand-primary, #1e8a6e); font-weight: 600; }
.link-button:hover, .link-button:focus-visible { text-decoration: underline; }

4
src/app/features/admin/moderation/pages/admin-review-detail-page.component.scss
View File

@@ -1,12 +1,12 @@
.review-detail { max-width: 1000px; margin: 0 auto; padding: 24px; display: grid; gap: 16px; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar h1 { margin: 0; font-size: 1.25rem; }
.toolbar h1 { margin: 0; font-size: var(--font-size-2xl, 1.25rem); }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); padding: 14px; display: grid; gap: 6px; }
.card h3 { margin: 0 0 6px; }
.card p { margin: 0; }
.muted { color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }
.muted { color: var(--text-secondary, #5f6e6a); font-size: var(--font-size-sm, 0.8125rem); }
.photo-row { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-row img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.workflow-actions { display: flex; flex-wrap: wrap; gap: 8px; }

8
src/app/features/admin/moderation/pages/admin-reviews-list-page.component.scss
View File

@@ -9,7 +9,7 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
.bulk-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skeleton-rows { display: grid; gap: 8px; }
.pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.admin-reviews-card__guide { margin: 0; text-align: center; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
.admin-reviews-card__guide { margin: 0; text-align: center; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
.health-cell { min-width: 140px; }
.table-scroll {
@@ -25,8 +25,8 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
.review-grid--compact { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.review-grid__item { position: relative; display: grid; gap: 6px; }
.review-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
.review-grid__meta { display: flex; justify-content: space-between; font-size: 0.85rem; }
.review-grid__product { margin: 0; font-size: 0.78rem; color: var(--text-tertiary, #9aa6a2); }
.review-grid__text { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.review-grid__meta { display: flex; justify-content: space-between; font-size: var(--font-size-sm, 0.8125rem); }
.review-grid__product { margin: 0; font-size: var(--font-size-xs, 0.75rem); color: var(--text-tertiary, #9aa6a2); }
.review-grid__text { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 640px) { .filters { flex-direction: column; align-items: stretch; } }