MOON-472: Rename borders & radius variables and update all requiring …

…styles with the new variables

src/components/Badge/Badge.scss

@@ -12,7 +12,7 @@
         height: 20px;
         padding: var(--spacing-nano);
 
-        border-radius: 2rem;
+        border-radius: var(--radius_rounded);
     }
 
     &.moonstone-badge_accent {

src/components/Button/Button.scss

@@ -18,7 +18,7 @@ $button-size_big: 32px;
 
     font-family: inherit;
 
-    border-radius: 4px;
+    border-radius: var(--radius);
 
     outline: none;
     cursor: pointer;

src/components/ButtonGroup/ButtonGroup.scss

@@ -7,15 +7,15 @@
     }
 
     > *:first-child {
-        border-radius: 4px 0 0 4px;
+        border-radius: var(--radius) 0 0 var(--radius);
     }
 
     > *:last-child {
-        border-radius: 0 4px 4px 0;
+        border-radius: 0 var(--radius) var(--radius) 0;
     }
 
     > *:only-child {
-        border-radius: 4px;
+        border-radius: var(--radius);
     }
 
     // Manage separator

src/components/CardSelector/CardSelector.scss

@@ -2,20 +2,20 @@
     width: 100%;
     padding: var(--spacing-small);
 
-    border: var(--selector-border);
-    border-radius: var(--selector-border-radius);
+    border: var(--border-selector);
+    border-radius: var(--radius_small);
     background-color: var(--color-white);
     cursor: pointer;
 
     transition: all 0.2s ease-in-out;
 
     &:hover {
-        border: var(--selector-border_hover);
+        border: var(--border-selector_hover);
         box-shadow: 0 1px 6px var(--color-dark20);
     }
 
     &:focus {
-        border: var(--selector-border_focus);
+        border: var(--border-selector_focus);
     }
 }
 
@@ -55,7 +55,7 @@
     margin-right: var(--spacing-small);
     overflow: hidden;
 
-    border-radius: 2px;
+    border-radius: var(--radius_small);
     background-color: var(--color-gray_light40);
 }
 
@@ -83,7 +83,7 @@
     color: var(--color-warning);
 
     border: 1px solid var(--color-warning);
-    border-radius: var(--selector-border-radius);
+    border-radius: var(--radius_small);
     background-color: var(--color-white);
 
     pointer-events: none;

src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss

@@ -7,18 +7,18 @@
     color: var(--color-dark_plain60);
 
     border: 1px dashed var(--color-gray40);
-    border-radius: var(--selector-border-radius);
+    border-radius: var(--radius_small);
     background-color: var(--color-white);
     cursor: pointer;
 
     transition: all 0.2s ease-in-out;
 
     &:hover {
-        border: var(--selector-border_hover);
+        border: var(--border-selector_hover);
     }
 
     &:focus {
-        border: var(--selector-border_focus);
+        border: var(--border-selector_focus);
     }
 }
 

src/components/Checkbox/Checkbox.scss

@@ -43,7 +43,7 @@ $checkbox-sizeBig: 20px;
     appearance: none;
 
     border: none;
-    border-radius: 2px;
+    border-radius: var(--radius_small);
     outline: none;
     background: transparent;
 

src/components/Dropdown/Dropdown.scss

@@ -35,7 +35,7 @@
     gap: $spacing-icon;
     padding: var(--spacing-nano) var(--spacing-small);
 
-    border-radius: var(--selector-border-radius);
+    border-radius: var(--radius_small);
     cursor: pointer;
 
     &.moonstone-disabled {
@@ -57,15 +57,15 @@
     }
 
     &.moonstone-opened {
-        border: var(--selector-border_active);
+        border: var(--border-selector_active);
     }
 
     &:hover {
         color: var(--color-accent);
     }
 
     &:focus {
-        border: var(--selector-border_focus);
+        border: var(--border-selector_focus);
         outline: none;
     }
 
@@ -81,7 +81,7 @@
 .moonstone-dropdown_outlined {
     color: var(--color-gray_dark);
 
-    border: var(--selector-border);
+    border: var(--border-selector);
 
     &.moonstone-disabled {
         color: var(--color-gray);

src/components/Input/BaseInput/BaseInput.scss

@@ -22,8 +22,8 @@ $min-width: 40px;
     }
 
     &.moonstone-outlined {
-        border: var(--selector-border);
-        border-radius: var(--selector-border-radius);
+        border: var(--border-selector);
+        border-radius: var(--radius_small);
     }
 }
 

src/components/ListSelector/ValueList/ValueList.scss

@@ -45,7 +45,7 @@
     min-width: 200px;
     padding: var(--spacing-small);
 
-    border: var(--selector-border);
+    border: var(--border-selector);
 
     .moonstone-dragging {
         background-color: var(--color-light);

src/components/Menu/Menu.scss

@@ -7,7 +7,7 @@
 
     color: var(--color-gray_dark);
 
-    border-radius: 4px;
+    border-radius: var(--radius);
 
     list-style: none;
     background-color: var(--color-light);

src/components/Paper/Paper.scss

@@ -1,5 +1,5 @@
 .moonstone-paper {
-    border-radius: 4px;
+    border-radius: var(--radius);
     background-color: var(--color-white);
     box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px;
 

src/components/Pill/Pill.scss

@@ -2,7 +2,7 @@
 .moonstone-pill {
     padding: 0 var(--spacing-nano);
 
-    border-radius: 2px;
+    border-radius: var(--radius_small);
     background-color: var(--color-gray_light40);
 
     &.moonstone-pill_reversed {

src/components/PrimaryNav/PrimaryNavItem/PrimaryNavItem.scss

@@ -9,7 +9,7 @@
 
     color: var(--color-light);
 
-    border-radius: 2rem;
+    border-radius: var(--radius_rounded);
     cursor: pointer;
 
     transition: color 0.2s, background-color 0.2s;

src/components/Tab/TabItem/TabItem.scss

@@ -14,7 +14,7 @@ $big-tab-height: 32px;
 
     font-family: inherit;
 
-    border-radius: 4px;
+    border-radius: var(--radius);
 
     outline: none;
     cursor: pointer;

src/components/Tag/Tag.scss

@@ -7,7 +7,7 @@
     color: var(--color-light);
 
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius);
     background-color: var(--color-accent);
     cursor: pointer;
 

src/tokens/borders/_borders.scss

@@ -1,10 +1,9 @@
 :root {
-    --border-radius: 4px;
-    --border-radius_rounded: 2rem;
-    --selector-border-radius: 2px;
-    --selector-border-radius_big: 4px;
-    --selector-border: solid 1px var(--color-gray40);
-    --selector-border_hover: solid 1px var(--color-accent);
-    --selector-border_focus: solid 1px var(--color-accent);
-    --selector-border_active: solid 1px var(--color-accent);
+    --radius: 4px;
+    --radius_small: 2px;
+    --radius_rounded: 2rem;
+    --border-selector: solid 1px var(--color-gray40);
+    --border-selector_hover: solid 1px var(--color-accent);
+    --border-selector_focus: solid 1px var(--color-accent);
+    --border-selector_active: solid 1px var(--color-accent);
 }