sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(design-system): normalize exact-match border-radius literals to tokens

Browse Source 
Mechanical sweep for border-radius: 4px/8px/12px/13px/999px replaced
with var(--radius-xs/sm/md/lg/full, <same value>) across src/app.
Only exact matches to existing token values were touched (20px, 16px,
10px, 6px, 3px, 2px etc. were left as-is since no token maps to them
without a visible size change on at least one tenant theme — see
docs/UI-DESIGN-REVIEW.md).
This commit is contained in:
sdarbinyan
2026-07-20 03:27:25 +04:00
parent 7cb1c8c3c6
commit be59db2e2d
51 changed files with 130 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,7 +42,7 @@
.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: var(--font-size-sm, 0.8125rem); }
.health-widget__bar { height: 8px; border-radius: 999px; background: var(--surface-muted, #eef2f0); overflow: hidden; }
.health-widget__bar { height: 8px; border-radius: var(--radius-full, 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: var(--font-size-sm, 0.8125rem); color: var(--text-secondary, #6b7280); }

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

@@ -6,7 +6,7 @@
.category-health__bar {
height: 6px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0);
overflow: hidden;
}

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

@@ -1,5 +1,5 @@
.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 { height: 6px; border-radius: var(--radius-full, 999px); background: var(--surface-muted, #eef2f0); overflow: hidden; }
.review-health__bar-fill { height: 100%; background: var(--brand-primary, #1e8a6e); }
.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); }

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

@@ -26,7 +26,7 @@
.order-timeline__dot {
width: 10px;
height: 10px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--brand-primary, #1e8a6e);
margin-top: 4px;
flex-shrink: 0;

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

@@ -46,7 +46,7 @@ select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borde
.status-stepper__dot {
width: 14px;
height: 14px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0);
border: 2px solid var(--border-subtle, #e7ece9);
flex-shrink: 0;

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

@@ -109,7 +109,7 @@ input[type='checkbox'] { width: auto; }
.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;
min-height: 24px; padding: 3px 10px; border-radius: var(--radius-full, 999px);
color: #fff; font-size: var(--font-size-xs, 0.75rem); font-weight: 700; text-transform: uppercase;
border: none;
}

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

@@ -6,7 +6,7 @@
.product-health__bar {
height: 6px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0);
overflow: hidden;
}

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

@@ -17,7 +17,7 @@
.attribute-card__tag {
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;
border-radius: var(--radius-full, 999px); padding: 1px 8px;
}
.attribute-card__remove {
margin-left: auto; border: none; background: transparent; cursor: pointer;
@@ -31,7 +31,7 @@
.value-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; border-radius: 999px;
padding: 3px 8px; border-radius: var(--radius-full, 999px);
border: 1px solid var(--border-color, #d3dad9);
font-size: var(--font-size-sm, 0.8125rem);

4
src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss
View File

@@ -6,13 +6,13 @@
.asset-details__preview img {
max-width: 100%;
max-height: 220px;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
object-fit: contain;
}
.asset-details__file {
padding: 20px;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
background: var(--surface-muted, #eef2f0);
text-align: center;
}

4
src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss
View File

@@ -26,7 +26,7 @@
&:focus-visible {
outline: 2px solid var(--brand-primary, #1e8a6e);
outline-offset: 3px;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
}
}
@@ -34,7 +34,7 @@
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
background: var(--surface-muted, #eef2f0);
}

2
src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss
View File

@@ -24,7 +24,7 @@
.health-widget__bar {
height: 8px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--surface-muted, #eef2f0);
overflow: hidden;
}

2
src/app/features/content-management/components/page-card/page-card.component.scss
View File

@@ -15,7 +15,7 @@
&:focus-visible {
outline: 2px solid var(--brand-primary, #1e8a6e);
outline-offset: 3px;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
}
}

2
src/app/features/content-management/components/page-editor/page-editor.component.scss
View File

@@ -101,7 +101,7 @@
width: 100%;
max-height: 140px;
object-fit: cover;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
}
.media-block__actions {

2
src/app/features/diagnostics/components/diagnostics-page.component.scss
View File

@@ -60,7 +60,7 @@
.entry {
border: 1px solid #d9e2e1;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
padding: 14px;
}

2
src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss
View File

@@ -58,7 +58,7 @@
.html-editor-surface {
min-height: 160px;
border: 1px solid var(--border, #ccc);
border-radius: 4px;
border-radius: var(--radius-xs, 4px);
padding: 0.5rem;
overflow-y: auto;
}

2
src/app/features/project-editor/pages/project-editor-page.component.scss
View File

@@ -281,7 +281,7 @@
color: #b91c1c;
background: transparent;
border: 1px solid #d3dad9;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
padding: 6px 12px;
cursor: pointer;
transition: background-color var(--transition-fast, 120ms ease), border-color var(--transition-fast, 120ms ease);

2
src/app/features/project-editor/sections/homepage-section.component.scss
View File

@@ -42,7 +42,7 @@
letter-spacing: 0.4px;
color: var(--text-secondary, #6b7280);
border: 1px solid var(--border-color, #d3dad9);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
padding: 1px 8px;
}

4
src/app/features/project-editor/sections/section.shared.scss
View File

@@ -91,7 +91,7 @@ input[type='color'] {
.sortable-item,
.sub-card {
border: 1px solid var(--border-color, #d3dad9);
border-radius: 12px;
border-radius: var(--radius-md, 12px);
padding: 12px;
background: #fbfcfc;
}
@@ -233,7 +233,7 @@ button.secondary {
.languages-summary__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.languages-summary__chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
padding: 4px 10px; border-radius: var(--radius-full, 999px);
border: 1px solid var(--border-color, #d3dad9);
font-size: var(--font-size-sm, 0.8125rem); font-weight: 600;
em { font-style: normal; font-weight: 400; font-size: var(--font-size-xs, 0.75rem); color: var(--text-secondary, #6b7280); }

2
src/app/features/search/components/empty-results/search-empty-results.component.scss
View File

@@ -34,7 +34,7 @@ h3 {
.chip {
min-height: 36px;
border: 1px solid var(--border-color);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 12px;

2
src/app/features/search/components/search-bar/search-bar.component.scss
View File

@@ -126,7 +126,7 @@
.chip {
min-height: 32px;
border: 1px solid var(--border-color);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 10px;

2
src/app/features/search/components/trending-searches/trending-searches.component.scss
View File

@@ -12,7 +12,7 @@
.chip {
min-height: 32px;
border: 1px solid var(--border-color);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 10px;

2
src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss
View File

@@ -97,7 +97,7 @@
.catalog-empty-state__chip {
min-height: 34px;
border: 1px solid var(--border-color);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 12px;

4
src/app/features/website/catalog/components/category-grid/category-grid.component.scss
View File

@@ -20,7 +20,7 @@
&:focus-visible {
outline: 3px solid rgba(73, 118, 113, 0.28);
outline-offset: 4px;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
}
}
@@ -87,7 +87,7 @@
span {
padding: 2px 7px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: rgba(73, 118, 113, 0.1);
color: #3d635f;
font-size: var(--font-size-sm, 0.8125rem);

2
src/app/features/website/catalog/components/search-results/search-results.component.scss
View File

@@ -29,7 +29,7 @@
.skeleton-card {
min-height: 340px;
border: 1px solid #d3dad9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
background:
linear-gradient(90deg, #edf1f1 25%, #e2ebea 50%, #edf1f1 75%) 16px 16px / calc(100% - 32px) calc(100% - 32px) no-repeat,
#f5f3f9;

8
src/app/features/website/catalog/containers/catalog-container.component.scss
View File

@@ -24,7 +24,7 @@
align-items: center;
gap: 4px;
border: 1px solid var(--border-color);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--bg-primary);
padding: 4px 8px;
}
@@ -361,7 +361,7 @@
.subcategory-chip {
min-height: 36px;
border: 1px solid var(--border-color);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--bg-primary);
color: var(--text-primary);
padding: 0 10px;
@@ -417,7 +417,7 @@
.catalog-skeleton-card {
min-height: 340px;
border: 1px solid #d3dad9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
padding: 16px;
background: #f5f3f9;
}
@@ -475,7 +475,7 @@
min-height: 42px;
padding: 0 22px;
border: 0;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
background: #497671;
color: #fff;
font-weight: 800;

4
src/app/features/website/product/components/delivery-information/delivery-information.component.scss
View File

@@ -4,7 +4,7 @@
gap: 12px;
padding: 16px;
border: 1px solid #d3dad9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
background: #f8faf9;
h2 {
@@ -17,7 +17,7 @@
.delivery-chip {
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: rgba(73, 118, 113, 0.12);
color: #3d635f;
font-weight: 800;

8
src/app/features/website/product/components/product-gallery/product-gallery.component.scss
View File

@@ -8,7 +8,7 @@
position: relative;
aspect-ratio: 1;
border: 1px solid #d3dad9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
overflow: hidden;
background: #fff;
display: flex;
@@ -40,7 +40,7 @@
border: 1px solid rgba(30, 60, 56, 0.25);
background: rgba(255, 255, 255, 0.9);
color: #1e3c38;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
padding: 0 10px;
font-weight: 700;
cursor: pointer;
@@ -61,7 +61,7 @@
a {
min-height: 38px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
border: 1px solid #497671;
color: #2e5e59;
text-decoration: none;
@@ -123,7 +123,7 @@
z-index: 1;
background: rgba(30, 60, 56, 0.78);
color: #fff;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
padding: 2px 8px;
font-size: var(--font-size-xs, 0.75rem);
text-transform: uppercase;

4
src/app/features/website/product/components/product-information/product-information.component.scss
View File

@@ -27,7 +27,7 @@
align-items: center;
min-height: 26px;
padding: 3px 9px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: #497671;
color: #fff;
font-size: var(--font-size-xs, 0.75rem);
@@ -93,7 +93,7 @@
width: 100%;
min-height: 48px;
border: 0;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
background: #497671;
color: #fff;
font-size: var(--font-size-lg, 1rem);

2
src/app/features/website/product/components/variant-selector/variant-selector.component.scss
View File

@@ -49,7 +49,7 @@
min-height: 34px;
padding: 0 14px;
border: 1px solid #d3dad9;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: #fff;
color: #1e3c38;
font-weight: 800;

2
src/app/features/website/product/containers/product-details-container.component.scss
View File

@@ -61,7 +61,7 @@
min-height: 42px;
padding: 0 22px;
border: 0;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
background: #497671;
color: #fff;
text-decoration: none;

4
src/app/features/website/product/engagement/components/question-card/question-card.component.scss
View File

@@ -44,7 +44,7 @@ header {
.seller-pill,
.accepted-pill {
border-radius: 999px;
border-radius: var(--radius-full, 999px);
padding: 2px 8px;
font-size: var(--font-size-xs, 0.75rem);
}
@@ -72,7 +72,7 @@ footer {
footer button {
min-height: 32px;
border: 1px solid var(--border-color);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 10px;

4
src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss
View File

@@ -39,7 +39,7 @@
.distribution-row progress {
width: 100%;
height: 8px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
overflow: hidden;
}
@@ -58,7 +58,7 @@
.line {
height: 12px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: linear-gradient(90deg, #edf1f1 25%, #e2ebea 50%, #edf1f1 75%);
background-size: 200% 100%;
animation: shimmer 1.2s linear infinite;

4
src/app/features/website/product/engagement/components/review-card/review-card.component.scss
View File

@@ -19,7 +19,7 @@
.pill {
border: 1px dashed var(--border-dark);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
padding: 3px 8px;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary);
@@ -45,7 +45,7 @@ p {
.review-actions button {
min-height: 32px;
border: 1px solid var(--border-color);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: var(--bg-primary);
color: var(--text-secondary);
padding: 0 10px;

2
src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss
View File

@@ -26,5 +26,5 @@
.star-btn:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
border-radius: 4px;
border-radius: var(--radius-xs, 4px);
}

2
src/app/features/website/user-experience/compare/components/compare-table.component.scss
View File

@@ -1,7 +1,7 @@
.compare-table-wrap {
overflow-x: auto;
border: 1px solid var(--border-color);
border-radius: 12px;
border-radius: var(--radius-md, 12px);
background: var(--bg-primary);
}

2
src/app/features/website/user-experience/compare/containers/compare-page.component.scss
View File

@@ -47,7 +47,7 @@
align-items: center;
gap: 8px;
border: 1px solid var(--border-color);
border-radius: 999px;
border-radius: var(--radius-full, 999px);
padding: 4px 10px;
background: var(--bg-primary);
}

2
src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss
View File

@@ -13,7 +13,7 @@
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
border: 1px solid var(--border-color);
background: #ffffff;
box-shadow: 0 10px 24px rgba(30, 60, 56, 0.2);