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

14
src/app/features/admin/analytics/pages/admin-analytics-page.component.scss
View File

@@ -8,7 +8,7 @@
border: none;
background: transparent;
padding: 10px 14px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 600;
color: var(--text-secondary, #6b7280);
cursor: pointer;
@@ -22,12 +22,12 @@
.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.summary-card { border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 4px; background: #fff; }
.summary-card span { font-size: 0.75rem; color: var(--text-secondary, #6b7280); }
.summary-card strong { font-size: 1.1rem; }
.summary-card span { font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #6b7280); }
.summary-card strong { font-size: var(--font-size-xl, 1.125rem); }
.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.card-head { display: flex; justify-content: space-between; align-items: center; }
.card h2 { margin: 0; font-size: 1.1rem; }
.card h2 { margin: 0; font-size: var(--font-size-xl, 1.125rem); }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.chart .bar { flex: 1; background: var(--color-primary, #2f8f5b); border-radius: 3px 3px 0 0; min-height: 2px; }
.pending-section p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-secondary, #6b7280); }
@@ -35,16 +35,16 @@
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.activity-list, .warning-list, .recommendation-list, .health-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.85rem; }
.activity-list, .warning-list, .recommendation-list, .health-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--font-size-sm, 0.8125rem); }
.activity-list li { display: flex; justify-content: space-between; gap: 8px; }
.warning-list li, .recommendation-list li, .health-checks li { display: flex; align-items: center; gap: 10px; }
.recommendation-list a, .health-checks a { color: var(--text-primary, #1e3c38); text-decoration: underline; }
.recommendation-list a:focus-visible, .health-checks a:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
.muted { color: var(--text-secondary, #6b7280); font-size: 0.8rem; }
.muted { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
.health-widget__bar { height: 8px; border-radius: 999px; background: var(--surface-muted, #eef2f0); overflow: hidden; }
.health-widget__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); transition: width 0.3s ease; }
.health-percent { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #6b7280); }
.health-percent { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }
@media (max-width: 900px) {
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

12
src/app/features/admin/categories/components/admin-categories-list.component.scss
View File

@@ -13,7 +13,7 @@ tr.deleted { opacity: 0.55; }
.view-toggle { display: flex; gap: 2px; }
.columns-panel { display: flex; flex-wrap: wrap; gap: 12px; }
.health-cell { min-width: 140px; }
.admin-categories-card__guide { margin: 0; text-align: center; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
.admin-categories-card__guide { margin: 0; text-align: center; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
.density-compact td, .density-compact th { padding: 4px 8px; }
.category-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 100%; overflow-x: auto; }
@@ -33,9 +33,9 @@ tr.deleted { opacity: 0.55; }
.category-tree__row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.category-tree__toggle { all: unset; cursor: pointer; width: 18px; text-align: center; color: var(--text-secondary, #5f6e6a); }
.category-tree__toggle-spacer { width: 18px; display: inline-block; }
.category-tree__icon { font-size: 1rem; }
.category-tree__icon { font-size: var(--font-size-lg, 1rem); }
.category-tree__title { font-weight: 600; color: var(--text-primary, #1e3c38); }
.category-tree__items { font-size: 0.78rem; color: var(--text-tertiary, #9aa6a2); }
.category-tree__items { font-size: var(--font-size-xs, 0.75rem); color: var(--text-tertiary, #9aa6a2); }
.category-tree__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
@@ -43,9 +43,9 @@ tr.deleted { opacity: 0.55; }
.category-grid__item { position: relative; display: grid; gap: 6px; }
.category-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
.category-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted, #eef2f0); }
.category-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.category-grid__name { margin: 0; font-size: 0.85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-grid__items { margin: 0; font-size: 0.78rem; color: var(--text-secondary, #5f6e6a); }
.category-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-3xl, 1.5rem); }
.category-grid__name { margin: 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-grid__items { margin: 0; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #5f6e6a); }
.category-grid__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dialog-body { display: grid; gap: 12px; }

22
src/app/features/admin/categories/components/admin-category-form.component.scss
View File

@@ -7,7 +7,7 @@ label.check { display: flex; align-items: center; gap: 8px; }
textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; font: inherit; }
input[type='checkbox'] { width: auto; }
.sub-block { border-top: 1px dashed #d9e2e1; padding-top: 12px; }
.breadcrumb-preview { margin: 0; color: var(--text-muted, #667); font-size: 0.9rem; }
.breadcrumb-preview { margin: 0; color: var(--text-muted, #667); font-size: var(--font-size-base, 0.875rem); }
.image-field { display: flex; align-items: center; gap: 12px; }
.image-field .preview { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color, #d3dad9); }
.actions { display: flex; justify-content: flex-end; gap: 10px; }
@@ -21,7 +21,7 @@ input[type='checkbox'] { width: auto; }
cursor: pointer;
padding: 10px 14px;
border-radius: 8px 8px 0 0;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
color: var(--text-secondary, #5f6e6a);
display: inline-flex;
@@ -32,18 +32,18 @@ input[type='checkbox'] { width: auto; }
}
.form-card__tab--active { color: var(--brand-primary, #1e8a6e); background: var(--surface-muted, #eef2f0); }
.form-card__panel { min-height: 200px; display: grid; gap: 14px; }
.form-card__subheading { margin: 8px 0 0; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); }
.form-card__explain { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
.form-card__subheading { margin: 8px 0 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); }
.form-card__explain { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
.toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.nav-children { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.85rem; }
.nav-children { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--font-size-sm, 0.8125rem); }
.seo-preview { border: 1px solid var(--border-subtle, #e7ece9); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; }
.seo-preview__title { margin: 0; color: #1a0dab; font-size: 1rem; }
.seo-preview__url { margin: 0; color: #006621; font-size: 0.8rem; }
.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }
.seo-preview__title { margin: 0; color: #1a0dab; font-size: var(--font-size-lg, 1rem); }
.seo-preview__url { margin: 0; color: #006621; font-size: var(--font-size-sm, 0.8125rem); }
.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: var(--font-size-sm, 0.8125rem); }
.icon-field { display: flex; align-items: center; gap: 8px; app-input { flex: 1; } }
.icon-field__preview { font-size: 1.4rem; line-height: 1; }
.icon-field__preview { font-size: var(--font-size-3xl, 1.5rem); line-height: 1; }
.seo-generate-row { display: flex; align-items: center; gap: 10px; }
.seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: 0.8rem; }
.breadcrumb-hint { margin: 0 0 4px; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
.seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
.breadcrumb-hint { margin: 0 0 4px; color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }

4
src/app/features/admin/categories/components/categories-dashboard/categories-dashboard.component.scss
View File

@@ -29,13 +29,13 @@
h4 {
margin: 0;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 700;
}
p {
margin: 0;
color: var(--text-secondary, #5f6e6a);
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
}

4
src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss
View File

@@ -17,7 +17,7 @@
}
.category-health__percent {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
color: var(--text-secondary, #5f6e6a);
}
@@ -28,7 +28,7 @@
padding: 0;
display: grid;
gap: 4px;
font-size: 0.78rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #5f6e6a);
li {

4
src/app/features/admin/customers/pages/admin-customer-detail-page.component.scss
View File

@@ -1,12 +1,12 @@
.customer-detail { max-width: 1000px; margin: 0 auto; padding: 24px; display: grid; gap: 16px; }
.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); }
.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); }
.order-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle, #e7ece9); }
.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/dashboard/components/dashboard-card.component.scss
View File

@@ -16,12 +16,12 @@
.dashboard-card__icon {
color: var(--primary-color);
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
}
.dashboard-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;

6
src/app/features/admin/dashboard/components/dashboard-metric.component.scss
View File

@@ -6,7 +6,7 @@
}
.dashboard-metric__label {
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -17,7 +17,7 @@
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
@@ -26,7 +26,7 @@
}
.dashboard-metric__badge {
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;

4
src/app/features/admin/dashboard/components/dashboard-section.component.scss
View File

@@ -13,7 +13,7 @@
.dashboard-section__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;
@@ -22,7 +22,7 @@
.dashboard-section__description {
flex-basis: 100%;
margin: 0;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
}

8
src/app/features/admin/dashboard/components/dashboard-shortcut-card.component.scss
View File

@@ -47,7 +47,7 @@
}
.dashboard-shortcut-card__icon {
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
color: var(--primary-color);
}
@@ -56,7 +56,7 @@
}
.dashboard-shortcut-card__title {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
font-weight: 600;
color: var(--text-primary);
}
@@ -66,7 +66,7 @@
}
.dashboard-shortcut-card__description {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
}
@@ -74,7 +74,7 @@
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-lg);

6
src/app/features/admin/dashboard/components/dashboard-status-row.component.scss
View File

@@ -3,11 +3,11 @@
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
.dashboard-status-row__icon {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
flex-shrink: 0;
}
@@ -26,7 +26,7 @@
}
.dashboard-status-row__status-text {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-light);
white-space: nowrap;
}

6
src/app/features/admin/dashboard/components/dashboard-timeline.component.scss
View File

@@ -28,19 +28,19 @@
.dashboard-timeline__icon {
color: var(--primary-color);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
flex-shrink: 0;
}
.dashboard-timeline__label {
flex: 1 1 auto;
color: var(--text-primary);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
min-width: 0;
}
.dashboard-timeline__time {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-light);
white-space: nowrap;
}

16
src/app/features/admin/dashboard/pages/admin-dashboard-page.component.scss
View File

@@ -34,7 +34,7 @@
.dashboard-welcome__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;
@@ -53,7 +53,7 @@
}
.dashboard-welcome__env-badge {
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -99,7 +99,7 @@
.dashboard-draft__lead {
margin: 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-primary);
}
@@ -108,7 +108,7 @@
align-items: center;
gap: var(--space-xs);
margin: 0;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--success-color);
font-weight: 600;
}
@@ -123,7 +123,7 @@
}
.dashboard-draft__field-chip {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
padding: 2px 8px;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--primary-color) 8%, transparent);
@@ -137,7 +137,7 @@
.dashboard-draft__saved-at {
margin: 0;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
}
@@ -167,7 +167,7 @@
padding: var(--space-xs) 0;
border: none;
background: none;
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-light);
text-align: left;
cursor: not-allowed;
@@ -179,7 +179,7 @@
.dashboard-doc-list__badge {
margin-left: auto;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-lg);

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; } }

2
src/app/features/admin/monitoring/pages/admin-monitoring-page.component.scss
View File

@@ -1,6 +1,6 @@
.admin-monitoring-page { display: grid; gap: 16px; padding: 16px; max-width: 1100px; margin: 0 auto; }
.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.card h2 { margin: 0; font-size: 1.1rem; }
.card h2 { margin: 0; font-size: var(--font-size-xl, 1.125rem); }
.health-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.queue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.queue-item { border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; padding: 10px; display: grid; gap: 4px; }

4
src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss
View File

@@ -41,7 +41,7 @@
display: flex;
gap: 8px;
align-items: center;
font-size: 0.78rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-tertiary, #9aa6a2);
}
@@ -52,6 +52,6 @@
.order-timeline__note {
margin: 0;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: var(--text-secondary, #5f6e6a);
}

6
src/app/features/admin/orders/components/orders-dashboard/orders-dashboard.component.scss
View File

@@ -30,7 +30,7 @@
.orders-dashboard__activity h4 {
margin: 0 0 8px;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 700;
}
@@ -40,12 +40,12 @@
padding: 0;
display: grid;
gap: 4px;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: var(--text-secondary, #5f6e6a);
}
.orders-dashboard__activity p {
margin: 0;
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
color: var(--text-secondary, #5f6e6a);
}

4
src/app/features/admin/orders/pages/admin-order-detail-page.component.scss
View File

@@ -1,6 +1,6 @@
.order-detail { max-width: 1000px; margin: 0 auto; padding: 24px; display: grid; gap: 16px; }
.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); }
.spacer { flex: 1; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -59,7 +59,7 @@ select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borde
}
.status-stepper__label {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 600;
color: var(--text-secondary, #5f6e6a);
}

26
src/app/features/admin/products/components/admin-product-form.component.scss
View File

@@ -23,7 +23,7 @@ input[type='checkbox'] { width: auto; }
background: var(--surface-muted, #eef2f0);
color: var(--text-secondary, #5f6e6a);
cursor: pointer;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
padding: 2px 4px;
&:hover, &:focus-visible {
@@ -45,7 +45,7 @@ input[type='checkbox'] { width: auto; }
cursor: pointer;
padding: 10px 14px;
border-radius: 8px 8px 0 0;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
color: var(--text-secondary, #5f6e6a);
display: inline-flex;
@@ -56,8 +56,8 @@ input[type='checkbox'] { width: auto; }
}
.form-card__tab--active { color: var(--brand-primary, #1e8a6e); background: var(--surface-muted, #eef2f0); }
.form-card__panel { min-height: 200px; display: grid; gap: 14px; }
.form-card__subheading { margin: 8px 0 0; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); }
.form-card__explain { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
.form-card__subheading { margin: 8px 0 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary, #5f6e6a); }
.form-card__explain { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
.form-card__group { border: 1px solid var(--border-subtle, #e7ece9); border-radius: 10px; padding: 10px 14px; }
.form-card__group summary { cursor: pointer; font-weight: 700; color: var(--text-primary, #1e3c38); }
.toggle-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }
@@ -69,12 +69,12 @@ input[type='checkbox'] { width: auto; }
display: grid;
gap: 2px;
}
.seo-preview__title { margin: 0; color: #1a0dab; font-size: 1rem; }
.seo-preview__url { margin: 0; color: #006621; font-size: 0.8rem; }
.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: 0.85rem; }
.seo-preview__title { margin: 0; color: #1a0dab; font-size: var(--font-size-lg, 1rem); }
.seo-preview__url { margin: 0; color: #006621; font-size: var(--font-size-sm, 0.8125rem); }
.seo-preview__description { margin: 0; color: var(--text-secondary, #5f6e6a); font-size: var(--font-size-sm, 0.8125rem); }
.field-with-action { display: flex; gap: 8px; align-items: center; app-input { flex: 1; } }
.seo-generate-row { display: flex; align-items: center; gap: 10px; }
.seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: 0.8rem; }
.seo-generate-row__hint { color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
.translations-block {
border: 1px solid var(--border-color, #d3dad9);
@@ -87,7 +87,7 @@ input[type='checkbox'] { width: auto; }
gap: 8px;
cursor: pointer;
font-weight: 600;
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
&:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; }
}
@@ -97,26 +97,26 @@ input[type='checkbox'] { width: auto; }
.translations-block__count {
margin-left: auto;
color: var(--text-secondary, #6b7280);
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 400;
}
.translations-block__hint {
margin: 0 0 10px;
color: var(--text-secondary, #6b7280);
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}
.badge-manager { display: grid; gap: 10px; }
.badge-manager__current, .badge-manager__known { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-chip {
display: inline-flex; align-items: center; gap: 4px;
min-height: 24px; padding: 3px 10px; border-radius: 999px;
color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
color: #fff; font-size: var(--font-size-xs, 0.75rem); font-weight: 700; text-transform: uppercase;
border: none;
}
.badge-chip--add { cursor: pointer; opacity: 0.55; &:hover { opacity: 1; } &:focus-visible { outline: 2px solid var(--color-primary, #2f8f5b); outline-offset: 2px; opacity: 1; } }
.badge-chip__remove {
border: none; background: transparent; color: inherit; cursor: pointer;
font-size: 0.9rem; line-height: 1; padding: 0 0 0 2px;
font-size: var(--font-size-base, 0.875rem); line-height: 1; padding: 0 0 0 2px;
&:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
}
.badge-manager__custom { display: flex; gap: 8px; align-items: center; app-input { flex: 1; max-width: 260px; } }

8
src/app/features/admin/products/components/admin-products-list.component.scss
View File

@@ -12,7 +12,7 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
.view-toggle { display: flex; gap: 2px; }
.columns-panel { display: flex; flex-wrap: wrap; gap: 12px; }
.health-cell { min-width: 140px; }
.admin-products-card__guide { margin: 0; text-align: center; font-size: 0.85rem; color: var(--text-secondary, #5f6e6a); }
.admin-products-card__guide { margin: 0; text-align: center; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
.density-compact td, .density-compact th { padding: 4px 8px; }
@@ -21,9 +21,9 @@ select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color
.product-grid__item { position: relative; display: grid; gap: 6px; }
.product-grid__select { position: absolute; top: 8px; left: 8px; z-index: 1; }
.product-grid__image { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-muted, #eef2f0); }
.product-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--text-tertiary, #9aa6a2); }
.product-grid__name { margin: 0; font-size: 0.85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-grid__price { margin: 0; font-size: 0.8rem; color: var(--text-secondary, #5f6e6a); }
.product-grid__image--placeholder { display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs, 0.75rem); color: var(--text-tertiary, #9aa6a2); }
.product-grid__name { margin: 0; font-size: var(--font-size-sm, 0.8125rem); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-grid__price { margin: 0; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #5f6e6a); }
.product-grid__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dialog-body { display: grid; gap: 12px; }

4
src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss
View File

@@ -17,7 +17,7 @@
}
.product-health__percent {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
color: var(--text-secondary, #5f6e6a);
}
@@ -28,7 +28,7 @@
padding: 0;
display: grid;
gap: 4px;
font-size: 0.78rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #5f6e6a);
li {

20
src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss
View File

@@ -1,6 +1,6 @@
.variants-editor { display: grid; gap: 16px; }
.variants-editor h5 { margin: 0 0 4px; font-size: 0.9rem; }
.variants-editor__hint { margin: 0 0 8px; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
.variants-editor h5 { margin: 0 0 4px; font-size: var(--font-size-base, 0.875rem); }
.variants-editor__hint { margin: 0 0 8px; color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
.attribute-card {
display: grid;
@@ -15,29 +15,29 @@
.attribute-card__head { display: flex; align-items: center; gap: 8px; }
.attribute-card__tag {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px;
font-size: var(--font-size-xs, 0.75rem); text-transform: uppercase; letter-spacing: 0.4px;
color: var(--text-secondary, #6b7280); border: 1px solid var(--border-color, #d3dad9);
border-radius: 999px; padding: 1px 8px;
}
.attribute-card__remove {
margin-left: auto; border: none; background: transparent; cursor: pointer;
font-size: 1rem; color: var(--text-secondary, #6b7280);
font-size: var(--font-size-lg, 1rem); color: var(--text-secondary, #6b7280);
&:hover { color: var(--danger-color, #c0392b); }
}
.attribute-card__values { display: flex; flex-wrap: wrap; gap: 6px; }
.attribute-card__add { display: flex; align-items: center; gap: 8px; }
.attribute-card__color-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.attribute-card__color-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm, 0.8125rem); }
.value-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; border-radius: 999px;
border: 1px solid var(--border-color, #d3dad9);
font-size: 0.8rem;
font-size: var(--font-size-sm, 0.8125rem);
button {
border: none; background: transparent; cursor: pointer; padding: 0;
color: var(--text-secondary, #6b7280); font-size: 0.85rem; line-height: 1;
color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); line-height: 1;
}
}
@@ -63,7 +63,7 @@
.variant-card__combo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.variant-card__remove {
margin-left: auto; border: none; background: transparent; cursor: pointer;
color: var(--text-secondary, #6b7280); font-size: 0.8rem; text-decoration: underline;
color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); text-decoration: underline;
}
.variant-card__fields {
@@ -71,7 +71,7 @@
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
label { display: grid; gap: 4px; font-size: 0.8rem; color: var(--text-secondary, #6b7280); }
label { display: grid; gap: 4px; font-size: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }
}
.variant-card__prices { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@@ -82,7 +82,7 @@
button { border: none; background: transparent; cursor: pointer; color: var(--text-secondary, #6b7280); }
}
.price-row__currency { font-weight: 700; font-size: 0.8rem; min-width: 32px; }
.price-row__currency { font-weight: 700; font-size: var(--font-size-sm, 0.8125rem); min-width: 32px; }
.price-row--add { gap: 4px; }
@media (max-width: 640px) {

8
src/app/features/admin/products/components/products-dashboard/products-dashboard.component.scss
View File

@@ -42,14 +42,14 @@
h4 {
margin: 0;
font-size: 0.95rem;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 700;
}
p {
margin: 0;
color: var(--text-secondary, #5f6e6a);
font-size: 0.9rem;
font-size: var(--font-size-base, 0.875rem);
}
}
@@ -65,7 +65,7 @@
all: unset;
cursor: pointer;
color: var(--brand-primary, #1e8a6e);
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
&:hover, &:focus-visible {
text-decoration: underline;
@@ -73,5 +73,5 @@
}
.products-dashboard__hint {
font-size: 0.85rem;
font-size: var(--font-size-sm, 0.8125rem);
}

24
src/app/features/admin/shell/admin-layout.component.scss
View File

@@ -113,7 +113,7 @@
.admin-layout__nav-group {
padding: var(--space-md) var(--space-sm) var(--space-xs);
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
@@ -130,13 +130,13 @@
background: none;
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
text-align: left;
text-decoration: none;
cursor: pointer;
.pi {
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
width: 1.2rem;
flex-shrink: 0;
}
@@ -170,7 +170,7 @@
.admin-layout__soon-badge {
margin-left: auto;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-lg);
@@ -227,7 +227,7 @@
list-style: none;
margin: 0 0 2px;
padding: 0;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-light);
}
@@ -262,7 +262,7 @@
.admin-layout__title {
margin: 0;
font-size: 1.125rem;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
@@ -272,7 +272,7 @@
.admin-layout__description {
margin: 2px 0 0;
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
@@ -297,7 +297,7 @@
border-radius: var(--radius-field, var(--radius-sm));
background: var(--bg-secondary);
color: var(--text-primary);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
&:focus-visible {
outline: 2px solid var(--primary-color);
@@ -312,7 +312,7 @@
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
}
.admin-layout__icon-button {
@@ -357,7 +357,7 @@
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: 1rem;
font-size: var(--font-size-lg, 1rem);
color: var(--text-secondary);
z-index: 25;
@@ -383,13 +383,13 @@
border-radius: 50%;
background: var(--primary-color);
color: #fff;
font-size: 0.7rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 700;
flex-shrink: 0;
}
.admin-layout__account-name {
font-size: 0.75rem;
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
max-width: 140px;
overflow: hidden;

4
src/app/features/admin/users/pages/admin-users-page.component.scss
View File

@@ -1,7 +1,7 @@
.admin-users-page { display: grid; gap: 16px; padding: 16px; max-width: 1100px; margin: 0 auto; }
.card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border-color, #d3dad9); border-radius: var(--radius-md); background: #fff; }
.card h2 { margin: 0; font-size: 1.1rem; }
.hint { margin: 0; color: var(--text-secondary, #6b7280); font-size: 0.85rem; }
.card h2 { margin: 0; font-size: var(--font-size-xl, 1.125rem); }
.hint { margin: 0; color: var(--text-secondary, #6b7280); font-size: var(--font-size-sm, 0.8125rem); }
.invite-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
select { min-height: 40px; padding: 0 10px; border: 1px solid var(--border-color, #d3dad9); border-radius: 10px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }