fix: replace border-radius numeric values ​​with variables (#1369)

Co-authored-by: Валерия Чуричева <[email protected]>

.changeset/polite-stingrays-burn.md

@@ -0,0 +1,20 @@
+---
+"@alfalab/core-components-bank-card": patch
+"@alfalab/core-components-bottom-sheet": patch
+"@alfalab/core-components-button": patch
+"@alfalab/core-components-filter-tag": patch
+"@alfalab/core-components-form-control": patch
+"@alfalab/core-components-modal": patch
+"@alfalab/core-components-popover": patch
+"@alfalab/core-components-popup-sheet": patch
+"@alfalab/core-components-product-cover": patch
+"@alfalab/core-components-pure-cell": patch
+"@alfalab/core-components-segmented-control": patch
+"@alfalab/core-components-select": patch
+"@alfalab/core-components-slider": patch
+"@alfalab/core-components-tag": patch
+"@alfalab/core-components-themes": patch
+"@alfalab/core-components-vars": patch
+---
+
+Заменили числовые значения скругления на переменные

.storybook/blocks/component-header/ComponentHeader.module.css

@@ -41,7 +41,7 @@
     margin-right: var(--gap-8);
     text-decoration: none;
     border: 1px solid var(--color-light-neutral-200);
-    border-radius: 6px;
+    border-radius: var(--border-radius-6);
     color: var(--color-light-text-info);
     background-position: 10% 50%;
     background-repeat: no-repeat;

.storybook/public/global.css

@@ -169,7 +169,7 @@ a[href='#storybook-preview-wrapper'] {
 }
 
 .search-result-item {
-    border-radius: 6px;
+    border-radius: var(--border-radius-6);
 }
 
 .search-result-item[aria-selected='true'] {
@@ -281,7 +281,7 @@ div.sidebar-subheading > button > span:first-of-type {
 }
 
 .sidebar-item {
-    border-radius: 6px;
+    border-radius: var(--border-radius-6);
 }
 
 .sidebar-item > a {
@@ -333,7 +333,7 @@ button[data-action='collapse-root']:focus span:first-of-type {
 select.select {
     font-size: 14px;
     background-color: var(--color-light-neutral-translucent-300);
-    border-radius: 6px;
+    border-radius: var(--border-radius-6);
 }
 
 select.select > option,
@@ -579,7 +579,7 @@ table.docblock-argstable thead.docblock-argstable-head th {
 }
 
 table.docblock-argstable tbody.docblock-argstable-body {
-    border-radius: 4px;
+    border-radius: var(--border-radius-4);
     filter: none;
     box-shadow: 0 0 1px var(--color-light-neutral-500-inverted);
 }
@@ -672,5 +672,5 @@ div.sb-alert {
     padding: var(--gap-16);
     background-color: #fff3e0;
     border: 1px solid #de6a01;
-    border-radius: 8px;
+    border-radius: var(--border-radius-8);
 }

packages/button/src/vars.css

@@ -6,7 +6,7 @@
     --button-font-weight: 500;
 
     /* border-radius desktop */
-    --button-xxs-size-border-radius: 6px;
+    --button-xxs-size-border-radius: var(--border-radius-6);
     --button-xs-size-border-radius: var(--border-radius-8);
     --button-s-size-border-radius: var(--border-radius-8);
     --button-m-size-border-radius: var(--border-radius-12);

packages/filter-tag/src/docs/description.mdx

@@ -175,7 +175,7 @@ render(() => {
 
     const css = `
         div {
-            border-radius: 8px;
+            border-radius: var(--border-radius-8);
         }
     `;
 

packages/form-control/src/vars.css

@@ -62,7 +62,7 @@
     --form-control-m-min-height: var(--size-m-height);
     --form-control-l-min-height: var(--size-l-height);
     --form-control-xl-min-height: var(--size-xl-height);
-    --form-control-border-radius: 4px 4px 0 0;
+    --form-control-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
     --form-control-bg-backdrop-filter: unset;
 
     /* paddings */
@@ -90,10 +90,10 @@
     --form-control-mobile-sub-paddings: var(--gap-0) var(--gap-4);
 
     /* border-radius mobile */
-    --form-control-mobile-s-border-radius: 10px;
-    --form-control-mobile-m-border-radius: 10px;
-    --form-control-mobile-l-border-radius: 10px;
-    --form-control-mobile-xl-border-radius: 10px;
+    --form-control-mobile-s-border-radius: var(--border-radius-10);
+    --form-control-mobile-m-border-radius: var(--border-radius-10);
+    --form-control-mobile-l-border-radius: var(--border-radius-10);
+    --form-control-mobile-xl-border-radius: var(--border-radius-10);
 
     /* color mobile */
     --form-control-mobile-bg-color: var(--color-light-neutral-translucent-100);

packages/popover/src/docs/Component.stories.mdx

@@ -58,7 +58,7 @@ import {
                           }
                 }
             >
-                <style>{`.popover {border-radius: 8px}  `}</style>
+                <style>{`.popover {border-radius: var(--border-radius-8)}  `}</style>
                 <Popover
                     anchorElement={buttonElement}
                     popperClassName='popover'

packages/popup-sheet/src/index.module.css

@@ -6,7 +6,7 @@
     margin: auto var(--gap-8) var(--gap-8);
     width: calc(100% - 2 * var(--gap-8));
     max-width: 600px;
-    border-radius: 36px;
+    border-radius: var(--border-radius-36);
     overflow: hidden;
 }
 

packages/product-cover/src/single/index.module.css

@@ -21,7 +21,7 @@
     }
     &.size-48,
     &.size-40 {
-        border-radius: 6px;
+        border-radius: var(--border-radius-6);
         padding: var(--gap-2) var(--gap-4);
     }
     &.size-32 {

packages/segmented-control/src/index.module.css

@@ -41,7 +41,7 @@
         border-radius: var(--border-radius-12);
 
         & .selectedBox {
-            border-radius: 10px;
+            border-radius: var(--border-radius-10);
         }
     }
 }
@@ -55,7 +55,7 @@
 }
 
 .rectangular {
-    border-radius: 10px;
+    border-radius: var(--border-radius-10);
 
     & .selectedBox {
         border-radius: var(--border-radius-8);

packages/tag/src/vars.css

@@ -12,7 +12,7 @@
     --tag-border-width: 1px;
     --tag-border-radius: var(--border-radius-pill);
     --tag-alt-border-radius: var(--border-radius-4);
-    --tag-rectangular-xxs-border-radius: 6px;
+    --tag-rectangular-xxs-border-radius: var(--border-radius-6);
     --tag-rectangular-xs-border-radius: var(--border-radius-8);
     --tag-rectangular-s-border-radius: var(--border-radius-8);
     --tag-rounded-xxs-border-radius: var(--border-radius-pill);

packages/themes/src/mixins/form-control/site.css

@@ -1,13 +1,13 @@
 @define-mixin form-control-site {
     /* theme */
-    --form-control-s-border-radius: 4px 4px 0 0;
-    --form-control-m-border-radius: 4px 4px 0 0;
-    --form-control-l-border-radius: 4px 4px 0 0;
-    --form-control-xl-border-radius: 4px 4px 0 0;
-    --form-control-mobile-s-border-radius: 4px 4px 0 0;
-    --form-control-mobile-m-border-radius: 4px 4px 0 0;
-    --form-control-mobile-l-border-radius: 4px 4px 0 0;
-    --form-control-mobile-xl-border-radius: 4px 4px 0 0;
+    --form-control-s-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
+    --form-control-m-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
+    --form-control-l-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
+    --form-control-xl-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
+    --form-control-mobile-s-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
+    --form-control-mobile-m-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
+    --form-control-mobile-l-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
+    --form-control-mobile-xl-border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
     --form-control-mobile-sub-paddings: 0;
     --form-control-bg-backdrop-filter: blur(20px);
     --form-control-border-bottom: 1px solid var(--color-light-neutral-500);

packages/vars/src/mixins.css

@@ -29,7 +29,7 @@
     }
 
     &::-webkit-scrollbar-thumb:vertical {
-        border-radius: var(--border-radius-circle) / 6px;
+        border-radius: var(--border-radius-circle) / var(--border-radius-6);
         min-height: 40px;
     }
 
@@ -39,7 +39,7 @@
     }
 
     &::-webkit-scrollbar-thumb:horizontal {
-        border-radius: 6px / var(--border-radius-circle);
+        border-radius: var(--border-radius-6) / var(--border-radius-circle);
         min-width: 40px;
     }