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/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);