From be59db2e2d612b6a995d0cbc1e72a580f0332aae Mon Sep 17 00:00:00 2001 From: sdarbinyan Date: Mon, 20 Jul 2026 03:27:25 +0400 Subject: [PATCH] style(design-system): normalize exact-match border-radius literals to tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mechanical sweep for border-radius: 4px/8px/12px/13px/999px replaced with var(--radius-xs/sm/md/lg/full, ) 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). --- src/app/app.scss | 2 +- .../delivery-selector.component.scss | 4 +- .../components/footer/footer.component.scss | 2 +- .../components/header/header.component.scss | 4 +- .../items-carousel.component.scss | 2 +- .../language-selector.component.scss | 14 ++--- .../product-card/product-card.component.scss | 8 +-- .../region-selector.component.scss | 6 +-- .../telegram-login.component.scss | 6 +-- .../pages/admin-analytics-page.component.scss | 2 +- .../category-health-widget.component.scss | 2 +- .../review-health-widget.component.scss | 2 +- .../order-timeline.component.scss | 2 +- .../admin-order-detail-page.component.scss | 2 +- .../admin-product-form.component.scss | 2 +- .../product-health-widget.component.scss | 2 +- .../product-variants-editor.component.scss | 4 +- .../asset-details-drawer.component.scss | 4 +- .../asset-tile/asset-tile.component.scss | 4 +- .../content-health-widget.component.scss | 2 +- .../page-card/page-card.component.scss | 2 +- .../page-editor/page-editor.component.scss | 2 +- .../diagnostics-page.component.scss | 2 +- .../marketplace-html-editor.component.scss | 2 +- .../pages/project-editor-page.component.scss | 2 +- .../sections/homepage-section.component.scss | 2 +- .../sections/section.shared.scss | 4 +- .../search-empty-results.component.scss | 2 +- .../search-bar/search-bar.component.scss | 2 +- .../trending-searches.component.scss | 2 +- .../catalog-empty-state.component.scss | 2 +- .../category-grid.component.scss | 4 +- .../search-results.component.scss | 2 +- .../catalog-container.component.scss | 8 +-- .../delivery-information.component.scss | 4 +- .../product-gallery.component.scss | 8 +-- .../product-information.component.scss | 4 +- .../variant-selector.component.scss | 2 +- .../product-details-container.component.scss | 2 +- .../question-card.component.scss | 4 +- .../rating-summary.component.scss | 4 +- .../review-card/review-card.component.scss | 4 +- .../star-selector.component.scss | 2 +- .../components/compare-table.component.scss | 2 +- .../containers/compare-page.component.scss | 2 +- .../floating-notifications.component.scss | 2 +- src/app/pages/cart/cart.component.scss | 54 +++++++++---------- .../pages/category/category.component.scss | 4 +- .../category/subcategories.component.scss | 14 ++--- .../item-detail/item-detail.component.scss | 26 ++++----- src/app/pages/search/search.component.scss | 8 +-- 51 files changed, 130 insertions(+), 130 deletions(-) diff --git a/src/app/app.scss b/src/app/app.scss index f54e84c..e083e96 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -55,7 +55,7 @@ .retry-btn { padding: 0.75rem 2rem; border: none; - border-radius: 8px; + border-radius: var(--radius-sm, 8px); background: var(--primary-color, #007bff); color: #fff; font-size: var(--font-size-lg, 1rem); diff --git a/src/app/components/delivery-selector/delivery-selector.component.scss b/src/app/components/delivery-selector/delivery-selector.component.scss index 349a41e..64e9aed 100644 --- a/src/app/components/delivery-selector/delivery-selector.component.scss +++ b/src/app/components/delivery-selector/delivery-selector.component.scss @@ -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; } diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss index 4c9d28b..70590bc 100644 --- a/src/app/components/footer/footer.component.scss +++ b/src/app/components/footer/footer.component.scss @@ -69,7 +69,7 @@ flex-wrap: wrap; img { - border-radius: 4px; + border-radius: var(--radius-xs, 4px); background: #fff; padding: 2px 6px; } diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index a03f412..40fb293 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -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); diff --git a/src/app/components/items-carousel/items-carousel.component.scss b/src/app/components/items-carousel/items-carousel.component.scss index 0f2a169..8d67fce 100644 --- a/src/app/components/items-carousel/items-carousel.component.scss +++ b/src/app/components/items-carousel/items-carousel.component.scss @@ -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); diff --git a/src/app/components/language-selector/language-selector.component.scss b/src/app/components/language-selector/language-selector.component.scss index 32eda8f..06af68e 100644 --- a/src/app/components/language-selector/language-selector.component.scss +++ b/src/app/components/language-selector/language-selector.component.scss @@ -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); diff --git a/src/app/components/product-card/product-card.component.scss b/src/app/components/product-card/product-card.component.scss index e19c646..a0d6ed1 100644 --- a/src/app/components/product-card/product-card.component.scss +++ b/src/app/components/product-card/product-card.component.scss @@ -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; diff --git a/src/app/components/region-selector/region-selector.component.scss b/src/app/components/region-selector/region-selector.component.scss index b6038c6..20b1c6b 100644 --- a/src/app/components/region-selector/region-selector.component.scss +++ b/src/app/components/region-selector/region-selector.component.scss @@ -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); diff --git a/src/app/components/telegram-login/telegram-login.component.scss b/src/app/components/telegram-login/telegram-login.component.scss index 173803f..f7026c5 100644 --- a/src/app/components/telegram-login/telegram-login.component.scss +++ b/src/app/components/telegram-login/telegram-login.component.scss @@ -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 { diff --git a/src/app/features/admin/analytics/pages/admin-analytics-page.component.scss b/src/app/features/admin/analytics/pages/admin-analytics-page.component.scss index 36470a0..201a583 100644 --- a/src/app/features/admin/analytics/pages/admin-analytics-page.component.scss +++ b/src/app/features/admin/analytics/pages/admin-analytics-page.component.scss @@ -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); } diff --git a/src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss b/src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss index 79124d8..d6c6aca 100644 --- a/src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss +++ b/src/app/features/admin/categories/components/category-health-widget/category-health-widget.component.scss @@ -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; } diff --git a/src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss b/src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss index d87eb8d..726e1fd 100644 --- a/src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss +++ b/src/app/features/admin/moderation/components/review-health-widget/review-health-widget.component.scss @@ -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); } diff --git a/src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss b/src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss index 1595dad..2a85591 100644 --- a/src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss +++ b/src/app/features/admin/orders/components/order-timeline/order-timeline.component.scss @@ -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; diff --git a/src/app/features/admin/orders/pages/admin-order-detail-page.component.scss b/src/app/features/admin/orders/pages/admin-order-detail-page.component.scss index b96ae4e..05eb85a 100644 --- a/src/app/features/admin/orders/pages/admin-order-detail-page.component.scss +++ b/src/app/features/admin/orders/pages/admin-order-detail-page.component.scss @@ -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; diff --git a/src/app/features/admin/products/components/admin-product-form.component.scss b/src/app/features/admin/products/components/admin-product-form.component.scss index 5557e07..5350a92 100644 --- a/src/app/features/admin/products/components/admin-product-form.component.scss +++ b/src/app/features/admin/products/components/admin-product-form.component.scss @@ -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; } diff --git a/src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss b/src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss index 8786efd..4d937a2 100644 --- a/src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss +++ b/src/app/features/admin/products/components/product-health-widget/product-health-widget.component.scss @@ -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; } diff --git a/src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss b/src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss index 8708678..f15b739 100644 --- a/src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss +++ b/src/app/features/admin/products/components/product-variants-editor/product-variants-editor.component.scss @@ -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); diff --git a/src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss b/src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss index b3fde4f..526e18c 100644 --- a/src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss +++ b/src/app/features/backoffice/media/components/asset-details-drawer/asset-details-drawer.component.scss @@ -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; } diff --git a/src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss b/src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss index a22dfee..eced555 100644 --- a/src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss +++ b/src/app/features/backoffice/media/components/asset-tile/asset-tile.component.scss @@ -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); } diff --git a/src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss b/src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss index 3b247fa..c2f45aa 100644 --- a/src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss +++ b/src/app/features/content-management/components/content-health-widget/content-health-widget.component.scss @@ -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; } diff --git a/src/app/features/content-management/components/page-card/page-card.component.scss b/src/app/features/content-management/components/page-card/page-card.component.scss index c23d7a9..76ae4e1 100644 --- a/src/app/features/content-management/components/page-card/page-card.component.scss +++ b/src/app/features/content-management/components/page-card/page-card.component.scss @@ -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); } } diff --git a/src/app/features/content-management/components/page-editor/page-editor.component.scss b/src/app/features/content-management/components/page-editor/page-editor.component.scss index 9e99e94..b477e09 100644 --- a/src/app/features/content-management/components/page-editor/page-editor.component.scss +++ b/src/app/features/content-management/components/page-editor/page-editor.component.scss @@ -101,7 +101,7 @@ width: 100%; max-height: 140px; object-fit: cover; - border-radius: 8px; + border-radius: var(--radius-sm, 8px); } .media-block__actions { diff --git a/src/app/features/diagnostics/components/diagnostics-page.component.scss b/src/app/features/diagnostics/components/diagnostics-page.component.scss index 94d6d0a..932d097 100644 --- a/src/app/features/diagnostics/components/diagnostics-page.component.scss +++ b/src/app/features/diagnostics/components/diagnostics-page.component.scss @@ -60,7 +60,7 @@ .entry { border: 1px solid #d9e2e1; - border-radius: 12px; + border-radius: var(--radius-md, 12px); padding: 14px; } diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss index aad2e47..16511ef 100644 --- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss +++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss @@ -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; } diff --git a/src/app/features/project-editor/pages/project-editor-page.component.scss b/src/app/features/project-editor/pages/project-editor-page.component.scss index 5a7b965..9113484 100644 --- a/src/app/features/project-editor/pages/project-editor-page.component.scss +++ b/src/app/features/project-editor/pages/project-editor-page.component.scss @@ -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); diff --git a/src/app/features/project-editor/sections/homepage-section.component.scss b/src/app/features/project-editor/sections/homepage-section.component.scss index 8879b54..395a8c3 100644 --- a/src/app/features/project-editor/sections/homepage-section.component.scss +++ b/src/app/features/project-editor/sections/homepage-section.component.scss @@ -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; } diff --git a/src/app/features/project-editor/sections/section.shared.scss b/src/app/features/project-editor/sections/section.shared.scss index f408119..1a6f1a5 100644 --- a/src/app/features/project-editor/sections/section.shared.scss +++ b/src/app/features/project-editor/sections/section.shared.scss @@ -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); } diff --git a/src/app/features/search/components/empty-results/search-empty-results.component.scss b/src/app/features/search/components/empty-results/search-empty-results.component.scss index 53fc855..f7576b7 100644 --- a/src/app/features/search/components/empty-results/search-empty-results.component.scss +++ b/src/app/features/search/components/empty-results/search-empty-results.component.scss @@ -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; diff --git a/src/app/features/search/components/search-bar/search-bar.component.scss b/src/app/features/search/components/search-bar/search-bar.component.scss index 529ff99..7ebddc3 100644 --- a/src/app/features/search/components/search-bar/search-bar.component.scss +++ b/src/app/features/search/components/search-bar/search-bar.component.scss @@ -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; diff --git a/src/app/features/search/components/trending-searches/trending-searches.component.scss b/src/app/features/search/components/trending-searches/trending-searches.component.scss index b3d91b8..8f798df 100644 --- a/src/app/features/search/components/trending-searches/trending-searches.component.scss +++ b/src/app/features/search/components/trending-searches/trending-searches.component.scss @@ -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; diff --git a/src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss b/src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss index ac56615..8db9fab 100644 --- a/src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss +++ b/src/app/features/website/catalog/components/catalog-empty-state/catalog-empty-state.component.scss @@ -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; diff --git a/src/app/features/website/catalog/components/category-grid/category-grid.component.scss b/src/app/features/website/catalog/components/category-grid/category-grid.component.scss index b7b4bfe..32aa56a 100644 --- a/src/app/features/website/catalog/components/category-grid/category-grid.component.scss +++ b/src/app/features/website/catalog/components/category-grid/category-grid.component.scss @@ -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); diff --git a/src/app/features/website/catalog/components/search-results/search-results.component.scss b/src/app/features/website/catalog/components/search-results/search-results.component.scss index 3ccb6d4..385b4af 100644 --- a/src/app/features/website/catalog/components/search-results/search-results.component.scss +++ b/src/app/features/website/catalog/components/search-results/search-results.component.scss @@ -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; diff --git a/src/app/features/website/catalog/containers/catalog-container.component.scss b/src/app/features/website/catalog/containers/catalog-container.component.scss index 42dd644..11e3137 100644 --- a/src/app/features/website/catalog/containers/catalog-container.component.scss +++ b/src/app/features/website/catalog/containers/catalog-container.component.scss @@ -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; diff --git a/src/app/features/website/product/components/delivery-information/delivery-information.component.scss b/src/app/features/website/product/components/delivery-information/delivery-information.component.scss index 8d66816..32e097f 100644 --- a/src/app/features/website/product/components/delivery-information/delivery-information.component.scss +++ b/src/app/features/website/product/components/delivery-information/delivery-information.component.scss @@ -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; diff --git a/src/app/features/website/product/components/product-gallery/product-gallery.component.scss b/src/app/features/website/product/components/product-gallery/product-gallery.component.scss index ee7c32c..148d64a 100644 --- a/src/app/features/website/product/components/product-gallery/product-gallery.component.scss +++ b/src/app/features/website/product/components/product-gallery/product-gallery.component.scss @@ -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; diff --git a/src/app/features/website/product/components/product-information/product-information.component.scss b/src/app/features/website/product/components/product-information/product-information.component.scss index 0f94cb3..cb967d7 100644 --- a/src/app/features/website/product/components/product-information/product-information.component.scss +++ b/src/app/features/website/product/components/product-information/product-information.component.scss @@ -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); diff --git a/src/app/features/website/product/components/variant-selector/variant-selector.component.scss b/src/app/features/website/product/components/variant-selector/variant-selector.component.scss index 510fe3c..3254647 100644 --- a/src/app/features/website/product/components/variant-selector/variant-selector.component.scss +++ b/src/app/features/website/product/components/variant-selector/variant-selector.component.scss @@ -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; diff --git a/src/app/features/website/product/containers/product-details-container.component.scss b/src/app/features/website/product/containers/product-details-container.component.scss index 15064a5..e05a279 100644 --- a/src/app/features/website/product/containers/product-details-container.component.scss +++ b/src/app/features/website/product/containers/product-details-container.component.scss @@ -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; diff --git a/src/app/features/website/product/engagement/components/question-card/question-card.component.scss b/src/app/features/website/product/engagement/components/question-card/question-card.component.scss index 7ec4c64..958c9cd 100644 --- a/src/app/features/website/product/engagement/components/question-card/question-card.component.scss +++ b/src/app/features/website/product/engagement/components/question-card/question-card.component.scss @@ -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; diff --git a/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss b/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss index 3f51474..855100b 100644 --- a/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss +++ b/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.scss @@ -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; diff --git a/src/app/features/website/product/engagement/components/review-card/review-card.component.scss b/src/app/features/website/product/engagement/components/review-card/review-card.component.scss index 8c94393..ec0dddf 100644 --- a/src/app/features/website/product/engagement/components/review-card/review-card.component.scss +++ b/src/app/features/website/product/engagement/components/review-card/review-card.component.scss @@ -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; diff --git a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss index b821e8c..4c8e8b1 100644 --- a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss +++ b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.scss @@ -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); } diff --git a/src/app/features/website/user-experience/compare/components/compare-table.component.scss b/src/app/features/website/user-experience/compare/components/compare-table.component.scss index b95101b..44bdf1a 100644 --- a/src/app/features/website/user-experience/compare/components/compare-table.component.scss +++ b/src/app/features/website/user-experience/compare/components/compare-table.component.scss @@ -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); } diff --git a/src/app/features/website/user-experience/compare/containers/compare-page.component.scss b/src/app/features/website/user-experience/compare/containers/compare-page.component.scss index 5df494f..002e31e 100644 --- a/src/app/features/website/user-experience/compare/containers/compare-page.component.scss +++ b/src/app/features/website/user-experience/compare/containers/compare-page.component.scss @@ -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); } diff --git a/src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss b/src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss index 4cf12db..6db9fa6 100644 --- a/src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss +++ b/src/app/features/website/user-experience/components/floating-notifications/floating-notifications.component.scss @@ -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); diff --git a/src/app/pages/cart/cart.component.scss b/src/app/pages/cart/cart.component.scss index 232d2ae..d291fd5 100644 --- a/src/app/pages/cart/cart.component.scss +++ b/src/app/pages/cart/cart.component.scss @@ -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; diff --git a/src/app/pages/category/category.component.scss b/src/app/pages/category/category.component.scss index e7db29c..88610fb 100644 --- a/src/app/pages/category/category.component.scss +++ b/src/app/pages/category/category.component.scss @@ -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; diff --git a/src/app/pages/category/subcategories.component.scss b/src/app/pages/category/subcategories.component.scss index d407223..25a5dc5 100644 --- a/src/app/pages/category/subcategories.component.scss +++ b/src/app/pages/category/subcategories.component.scss @@ -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; diff --git a/src/app/pages/item-detail/item-detail.component.scss b/src/app/pages/item-detail/item-detail.component.scss index 1da15e4..7f42219 100644 --- a/src/app/pages/item-detail/item-detail.component.scss +++ b/src/app/pages/item-detail/item-detail.component.scss @@ -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); diff --git a/src/app/pages/search/search.component.scss b/src/app/pages/search/search.component.scss index f4b20d3..568617b 100644 --- a/src/app/pages/search/search.component.scss +++ b/src/app/pages/search/search.component.scss @@ -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;