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

54
src/app/pages/cart/cart.component.scss
View File

@@ -35,7 +35,7 @@
background: transparent;
color: #697777;
border: 1px solid #d3dad9;
border-radius: 13px;
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;
@@ -86,7 +86,7 @@
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
border: none;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
cursor: pointer;
@@ -122,7 +122,7 @@
padding: 80px 20px;
text-align: center;
background: #f5f3f9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
border: 1px solid #d3dad9;
.empty-icon {
@@ -155,7 +155,7 @@
background: #497671;
color: white;
text-decoration: none;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 600;
font-size: var(--font-size-lg, 1rem);
@@ -210,7 +210,7 @@
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
text-decoration: none;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
font-weight: 600;
font-size: var(--font-size-lg, 1rem);
transition: all 0.3s;
@@ -251,7 +251,7 @@
.cart-item-wrapper {
position: relative;
overflow: hidden;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
transition: transform 0.3s ease;
&.swiped {
@@ -277,7 +277,7 @@
gap: 20px;
background: white;
border: 1px solid #d3dad9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
padding: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
@@ -294,7 +294,7 @@
flex-shrink: 0;
width: 100px;
height: 100px;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
overflow: hidden;
background: #f5f3f9;
border: 1px solid #d3dad9;
@@ -349,7 +349,7 @@
border: none;
color: #a1b4b5;
cursor: pointer;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
transition: all 0.2s;
&:hover {
@@ -425,7 +425,7 @@
flex-shrink: 0;
width: 100px;
height: 100px;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
overflow: hidden;
background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
border: 2px solid #d1fae5;
@@ -478,7 +478,7 @@
border: none;
color: #9ca3af;
cursor: pointer;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
transition: all 0.2s;
&:hover {
@@ -569,7 +569,7 @@
align-items: center;
gap: 12px;
background: #f5f3f9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
padding: 4px 10px;
border: 1px solid #d3dad9;
@@ -682,7 +682,7 @@
top: 90px;
background: #f5f3f9;
border: 1px solid #d3dad9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
padding: 28px;
display: flex;
flex-direction: column;
@@ -737,7 +737,7 @@
background: #497671;
color: white;
border: none;
border-radius: 13px;
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;
@@ -967,7 +967,7 @@
gap: 8px;
padding: 12px 24px;
border: none;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
background: #2AABEE;
color: #fff;
font-size: var(--font-size-md, 0.9375rem);
@@ -1012,7 +1012,7 @@
width: 18px;
background: white;
border: 2px solid #d1d5db;
border-radius: 4px;
border-radius: var(--radius-xs, 4px);
transition: all 0.2s;
&::after {
@@ -1080,7 +1080,7 @@
.checkmark {
border: 2px solid #d3dad9;
border-radius: 4px;
border-radius: var(--radius-xs, 4px);
}
.terms-text {
@@ -1150,7 +1150,7 @@
.payment-modal {
background: white;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
max-width: 500px;
width: 100%;
padding: 40px;
@@ -1278,7 +1278,7 @@
background: #497671;
color: white;
border: none;
border-radius: 13px;
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;
@@ -1344,7 +1344,7 @@
.qr-wrapper {
padding: 16px;
background: white;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
@@ -1389,7 +1389,7 @@
align-items: center;
padding: 16px;
background: #f9fafb;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
margin-bottom: 16px;
.label {
@@ -1429,7 +1429,7 @@
.open-btn {
flex: 1;
padding: 12px 16px;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
font-weight: 600;
font-size: var(--font-size-md, 0.9375rem);
cursor: pointer;
@@ -1495,7 +1495,7 @@
height: min(760px, 86vh);
padding: 56px 16px 16px;
background: white;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}
@@ -1503,7 +1503,7 @@
width: 100%;
height: 100%;
border: 0;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
background: white;
}
@@ -1552,7 +1552,7 @@
width: 100%;
padding: 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
font-size: var(--font-size-lg, 1rem);
outline: none;
transition: all 0.2s;
@@ -1588,7 +1588,7 @@
background: #497671;
color: white;
border: none;
border-radius: 13px;
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;
@@ -2144,7 +2144,7 @@
width: 20px;
background-color: transparent;
border: 2px solid var(--border-color);
border-radius: 4px;
border-radius: var(--radius-xs, 4px);
transition: all 0.2s ease;
margin-top: 2px;

4
src/app/pages/category/category.component.scss
View File

@@ -59,7 +59,7 @@
padding: 10px 28px;
background: #497671;
color: white;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", sans-serif;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
@@ -79,7 +79,7 @@
background: #497671;
color: white;
border: none;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
cursor: pointer;
font-size: var(--font-size-lg, 1rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

14
src/app/pages/category/subcategories.component.scss
View File

@@ -52,7 +52,7 @@
background: #497671;
color: white;
border: none;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
font-size: var(--font-size-md, 0.9375rem);
font-weight: 500;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -113,7 +113,7 @@
padding: 10px 28px;
background: #497671;
color: white;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
font-family: "DM Sans", sans-serif;
font-size: var(--font-size-md, 0.9375rem);
font-weight: 600;
@@ -252,7 +252,7 @@
span {
padding: 2px 7px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: rgba(73, 118, 113, 0.1);
color: #3d635f;
white-space: nowrap;
@@ -262,7 +262,7 @@
.category-mixed {
width: fit-content;
padding: 2px 7px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: #eef1f1;
color: #697777;
font-family: "DM Sans", sans-serif;
@@ -293,7 +293,7 @@
flex-direction: column;
text-decoration: none;
border: 1px solid #d3dad9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
@@ -346,7 +346,7 @@
font-size: 0.65rem;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
border-radius: var(--radius-xs, 4px);
text-transform: uppercase;
}
}
@@ -396,7 +396,7 @@
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
padding: 6px 10px;
cursor: pointer;
transition: background 0.2s ease;

26
src/app/pages/item-detail/item-detail.component.scss
View File

@@ -47,7 +47,7 @@ $dx-card-bg: #f5f3f9;
background: $dx-primary;
color: white;
text-decoration: none;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
font-weight: 600;
transition: all 0.2s;
@@ -152,7 +152,7 @@ $dx-card-bg: #f5f3f9;
aspect-ratio: 1;
background: white;
border: 1px solid $dx-border;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
overflow: hidden;
display: flex;
align-items: center;
@@ -291,7 +291,7 @@ $dx-card-bg: #f5f3f9;
background: $dx-primary;
color: white;
border: none;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
font-family: $dx-font;
font-size: var(--font-size-xl, 1.125rem);
font-weight: 700;
@@ -338,7 +338,7 @@ $dx-card-bg: #f5f3f9;
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
font-size: var(--font-size-base, 0.875rem);
font-weight: 600;
border: 1.5px solid $dx-border;
@@ -410,7 +410,7 @@ $dx-card-bg: #f5f3f9;
gap: 10px;
padding: 14px 16px;
border: 1px solid $dx-border;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
background: #f8fafa;
}
@@ -456,7 +456,7 @@ $dx-card-bg: #f5f3f9;
display: inline-flex;
align-self: flex-start;
padding: 6px 12px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: rgba(73, 118, 113, 0.12);
color: $dx-primary;
font-size: var(--font-size-base, 0.875rem);
@@ -498,7 +498,7 @@ $dx-card-bg: #f5f3f9;
.dx-review-form {
background: $dx-card-bg;
border: 1px solid $dx-border;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
padding: 24px;
margin-bottom: 24px;
@@ -593,7 +593,7 @@ $dx-card-bg: #f5f3f9;
color: white;
border: none;
padding: 12px 28px;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
font-family: $dx-font;
font-weight: 700;
font-size: var(--font-size-md, 0.9375rem);
@@ -669,7 +669,7 @@ $dx-card-bg: #f5f3f9;
.dx-review-card {
background: white;
border: 1px solid $dx-border;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
padding: 20px;
transition: box-shadow 0.2s;
@@ -743,7 +743,7 @@ $dx-card-bg: #f5f3f9;
.dx-qa-card {
background: white;
border: 1px solid $dx-border;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
padding: 20px;
}
@@ -793,7 +793,7 @@ $dx-card-bg: #f5f3f9;
gap: 5px;
background: none;
border: 1px solid $dx-border;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
padding: 6px 12px;
font-size: var(--font-size-sm, 0.8125rem);
color: $dx-muted;
@@ -1938,7 +1938,7 @@ $dx-card-bg: #f5f3f9;
.item-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
border-radius: var(--radius-xs, 4px);
font-size: var(--font-size-xs, 0.75rem);
font-weight: 600;
text-transform: uppercase;
@@ -1966,7 +1966,7 @@ $dx-card-bg: #f5f3f9;
.item-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
font-size: var(--font-size-xs, 0.75rem);
color: #497671;
background: rgba(73, 118, 113, 0.08);

8
src/app/pages/search/search.component.scss
View File

@@ -27,7 +27,7 @@
font-size: var(--font-size-xl, 1.125rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
border: 2px solid #d3dad9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
outline: none;
transition: border-color 0.2s;
@@ -137,7 +137,7 @@
background: var(--primary-color);
color: white;
border: none;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
cursor: pointer;
font-size: var(--font-size-lg, 1rem);
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
@@ -162,7 +162,7 @@
.item-card {
background: white;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
border: 1px solid #d3dad9;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.08);
overflow: hidden;
@@ -190,7 +190,7 @@
padding-top: 75%;
background: #f5f5f5;
overflow: hidden;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
img {
position: absolute;