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

4
src/app/components/delivery-selector/delivery-selector.component.scss
View File

@@ -5,7 +5,7 @@
.delivery-selector {
margin-top: 12px;
padding: 12px;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
border: 1px solid #d3dad9;
background: #fafbfb;
}
@@ -48,7 +48,7 @@
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
font-size: var(--font-size-sm, 0.8125rem);
font-weight: 700;
}

2
src/app/components/footer/footer.component.scss
View File

@@ -69,7 +69,7 @@
flex-wrap: wrap;
img {
border-radius: 4px;
border-radius: var(--radius-xs, 4px);
background: #fff;
padding: 2px 6px;
}

4
src/app/components/header/header.component.scss
View File

@@ -174,7 +174,7 @@
top: -6px;
min-width: 16px;
height: 16px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: #497671;
color: #ffffff;
font-size: 10px;
@@ -273,7 +273,7 @@
padding: 15px 26px;
background: #e9edf1;
border: 1px solid #d3dad9;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
font-family: 'DM Sans', sans-serif;
font-size: var(--font-size-lg, 1rem);

2
src/app/components/items-carousel/items-carousel.component.scss
View File

@@ -128,7 +128,7 @@
// Item card styles
.item-card {
background: #ffffff;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
border: 1px solid #d3dad9;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);

14
src/app/components/language-selector/language-selector.component.scss
View File

@@ -10,7 +10,7 @@
padding: 8px 12px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
@@ -51,7 +51,7 @@
min-width: 180px;
background: var(--card-bg, #1a1a1a);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
border-radius: var(--radius-md, 12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
@@ -167,7 +167,7 @@
gap: 4px;
background: rgba(255, 255, 255, 0.3);
border: 1px solid #677b78;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
color: #1e3c38;
justify-content: center;
@@ -282,7 +282,7 @@
transition: max-height 0.3s ease, visibility 0s 0.3s;
box-shadow: none;
border: none;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
margin-top: 8px;
background: rgba(233, 237, 241, 0.9);
@@ -321,7 +321,7 @@
padding: 8px 10px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
color: #ffffff;
cursor: pointer;
transition: all 0.3s ease;
@@ -357,7 +357,7 @@
min-width: 170px;
background: var(--card-bg, #1a1a1a);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
border-radius: var(--radius-md, 12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
@@ -445,7 +445,7 @@
gap: 3px;
background: rgba(255, 255, 255, 0.3);
border: 1px solid #677b78;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
color: #1e3c38;
&:hover {
background: rgba(255, 255, 255, 0.5);

8
src/app/components/product-card/product-card.component.scss
View File

@@ -71,7 +71,7 @@
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: rgba(22, 163, 74, 0.9);
color: #fff;
font-size: var(--font-size-xs, 0.75rem);
@@ -157,7 +157,7 @@
align-items: center;
min-height: 24px;
padding: 3px 8px;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: #497671;
color: #fff;
font-size: var(--font-size-xs, 0.75rem);
@@ -251,7 +251,7 @@
.bar-segment {
flex: 1;
border-radius: 999px;
border-radius: var(--radius-full, 999px);
background: #d3dad9;
&.filled.high {
@@ -272,7 +272,7 @@
margin-top: 12px;
min-height: 42px;
border: 0;
border-radius: 13px;
border-radius: var(--radius-lg, 13px);
background: #497671;
color: #fff;
font-weight: 700;

6
src/app/components/region-selector/region-selector.component.scss
View File

@@ -8,7 +8,7 @@
gap: 6px;
padding: 6px 10px;
border: 1px solid var(--border-color, #e0e0e0);
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
background: transparent;
cursor: pointer;
font-size: var(--font-size-sm, 0.8125rem);
@@ -53,7 +53,7 @@
min-width: 220px;
background: var(--bg-card, #fff);
border: 1px solid var(--border-color, #e0e0e0);
border-radius: 12px;
border-radius: var(--radius-md, 12px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 1000;
overflow: hidden;
@@ -105,7 +105,7 @@
width: 100%;
padding: 10px 12px;
border: none;
border-radius: 8px;
border-radius: var(--radius-sm, 8px);
background: transparent;
cursor: pointer;
font-size: var(--font-size-base, 0.875rem);

6
src/app/components/telegram-login/telegram-login.component.scss
View File

@@ -79,7 +79,7 @@ h2 {
width: 100%;
padding: 14px 24px;
border: none;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
background: #2AABEE;
color: #fff;
font-size: var(--font-size-lg, 1rem);
@@ -129,12 +129,12 @@ h2 {
display: inline-flex;
padding: 12px;
background: #fff;
border-radius: 12px;
border-radius: var(--radius-md, 12px);
border: 1px solid #e8e8e8;
img {
display: block;
border-radius: 4px;
border-radius: var(--radius-xs, 4px);
}
&.qr-loading {