fix: align scss var names with css var names

EightfoldAI · Dec 15, 2022 · 9732bc7 · 9732bc7
1 parent cd8ef6e
commit 9732bc7
Show file tree

Hide file tree

Showing 17 changed files with 57 additions and 57 deletions.
diff --git a/src/components/Accordion/accordion.module.scss b/src/components/Accordion/accordion.module.scss
@@ -7,11 +7,11 @@
     }
 
     &.pill {
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
     }
 
     &.rectangle {
-        border-radius: $corner-radius-s;
+        border-radius: $border-radius-s;
     }
 
     .accordion-body-container {
@@ -120,13 +120,13 @@
             &.focus-visible,
             &:focus-visible {
                 border: 2px solid $focus-visible-shadow-color;
-                border-radius: $corner-radius-xl;
+                border-radius: $border-radius-xl;
                 padding: calc(#{$space-l} - 2px);
 
                 &-expanded {
                     border-radius: 0;
-                    border-top-left-radius: $corner-radius-xl;
-                    border-top-right-radius: $corner-radius-xl;
+                    border-top-left-radius: $border-radius-xl;
+                    border-top-right-radius: $border-radius-xl;
                 }
             }
         }

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -611,12 +611,12 @@
     &.split-left {
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
-        border-bottom-right-radius: $corner-radius-s;
-        border-top-right-radius: $corner-radius-s;
+        border-bottom-right-radius: $border-radius-s;
+        border-top-right-radius: $border-radius-s;
 
         &.pill-shape {
-            border-bottom-right-radius: $corner-radius-xl;
-            border-top-right-radius: $corner-radius-xl;
+            border-bottom-right-radius: $border-radius-xl;
+            border-top-right-radius: $border-radius-xl;
         }
 
         .button-text-large {
@@ -642,14 +642,14 @@
     }
 
     &.split-right {
-        border-bottom-left-radius: $corner-radius-s;
-        border-top-left-radius: $corner-radius-s;
+        border-bottom-left-radius: $border-radius-s;
+        border-top-left-radius: $border-radius-s;
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
 
         &.pill-shape {
-            border-bottom-left-radius: $corner-radius-xl;
-            border-top-left-radius: $corner-radius-xl;
+            border-bottom-left-radius: $border-radius-xl;
+            border-top-left-radius: $border-radius-xl;
         }
 
         .button-text-large {

diff --git a/src/components/CheckBox/checkbox.module.scss b/src/components/CheckBox/checkbox.module.scss
@@ -38,7 +38,7 @@
 
             .checkmark {
                 border: $space-xxxs solid var(--grey-color-70);
-                border-radius: $corner-radius-xs;
+                border-radius: $border-radius-xs;
                 height: $checkmark-medium-height;
                 width: $checkmark-medium-width;
                 min-height: $checkmark-medium-height;

diff --git a/src/components/DateTimePicker/DatePicker/datepicker.module.scss b/src/components/DateTimePicker/DatePicker/datepicker.module.scss
@@ -39,7 +39,7 @@
     }
 
     &-pill {
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
     }
 
     &-underline {

diff --git a/src/components/DateTimePicker/Internal/ocpicker.module.scss b/src/components/DateTimePicker/Internal/ocpicker.module.scss
@@ -91,7 +91,7 @@
         display: inline-block;
         vertical-align: top;
         background: $picker-background-color;
-        border-radius: $corner-radius-m;
+        border-radius: $border-radius-m;
         box-shadow: $picker-box-shadow;
 
         &-focused {
@@ -1161,7 +1161,7 @@
             height: $space-xxxs;
             background: $picker-input-active-bar-color;
             border: 1px solid transparent;
-            border-radius: $corner-radius-xs;
+            border-radius: $border-radius-xs;
             opacity: 0;
             transition: all $motion-duration-extra-fast;
             pointer-events: none;

diff --git a/src/components/Dialog/BaseDialog/base-dialog.module.scss b/src/components/Dialog/BaseDialog/base-dialog.module.scss
@@ -19,7 +19,7 @@ $dialog-body-bottom-shadow: inset 0 -11px 8px -10px var(--grey-color-20);
         position: absolute;
         padding: $space-l 0;
         background: var(--background-color);
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
         box-shadow: $shadow-object-l;
         opacity: 0;
 

diff --git a/src/components/Dropdown/dropdown.module.scss b/src/components/Dropdown/dropdown.module.scss
@@ -23,7 +23,7 @@
     background: var(--background-color);
     padding: $space-xs;
     box-shadow: $shadow-object-m;
-    border-radius: $corner-radius-xl;
+    border-radius: $border-radius-xl;
     font-family: $octuple-font-family;
     transition: all $motion-duration-fast $motion-easing-easeout;
     min-width: 200px;

diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss
@@ -18,7 +18,7 @@
         @include text-overflow;
         background-color: var(--background-color);
         border: 1px solid var(--input-border-color);
-        border-radius: $corner-radius-m;
+        border-radius: $border-radius-m;
         box-sizing: border-box;
         color: var(--text-primary-color);
         font-family: $octuple-font-family;
@@ -174,7 +174,7 @@
 
         &.pill-shape {
             border-color: var(--input-border-color);
-            border-radius: $corner-radius-xl;
+            border-radius: $border-radius-xl;
             padding: $space-xs $space-s;
         }
 
@@ -999,7 +999,7 @@
     .text-area {
         background-color: var(--background-color);
         border: 1px solid var(--input-border-color);
-        border-radius: $corner-radius-m;
+        border-radius: $border-radius-m;
         box-sizing: border-box;
         color: var(--text-primary-color);
         font-family: $octuple-font-family;
@@ -1018,7 +1018,7 @@
         }
 
         &.pill-shape {
-            border-radius: $corner-radius-xl;
+            border-radius: $border-radius-xl;
             padding: $space-xs $space-s;
         }
 

diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
@@ -132,7 +132,7 @@
                 line-height: $layout-zero-trigger-height;
                 text-align: center;
                 background: var(--primary-color);
-                border-radius: 0 $corner-radius-xs $corner-radius-xs 0;
+                border-radius: 0 $border-radius-xs $border-radius-xs 0;
                 cursor: pointer;
                 padding: $space-xxs;
                 transition: background 0.3s ease;
@@ -153,12 +153,12 @@
                 }
 
                 &-left {
-                    border-radius: 0 $corner-radius-xs $corner-radius-xs 0;
+                    border-radius: 0 $border-radius-xs $border-radius-xs 0;
                 }
 
                 &-right {
                     left: -$layout-zero-trigger-width;
-                    border-radius: $corner-radius-xs 0 0 $corner-radius-xs;
+                    border-radius: $border-radius-xs 0 0 $border-radius-xs;
                 }
             }
         }

diff --git a/src/components/Menu/MenuItem/menuItem.module.scss b/src/components/Menu/MenuItem/menuItem.module.scss
@@ -5,7 +5,7 @@
     display: flex;
     align-items: center;
     gap: $space-xs;
-    border-radius: $corner-radius-xl;
+    border-radius: $border-radius-xl;
     cursor: pointer;
     font-weight: $text-font-weight-regular;
     transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;

diff --git a/src/components/Pills/pills.module.scss b/src/components/Pills/pills.module.scss
@@ -4,7 +4,7 @@
     --hover-bg: var(--blue-color-30);
     --hover-label: var(--text-primary-color);
     padding: $space-xxs $space-s;
-    border-radius: $corner-radius-m;
+    border-radius: $border-radius-m;
     transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
     background: var(--bg);
     color: var(--label);

diff --git a/src/components/Skeleton/skeleton.module.scss b/src/components/Skeleton/skeleton.module.scss
@@ -46,26 +46,26 @@ $skeleton-wave-background: linear-gradient(
     }
 
     &.pill {
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
     }
 
     &.button-small {
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
         height: 28px;
     }
 
     &.button-medium {
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
         height: 36px;
     }
 
     &.button-large {
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
         height: 44px;
     }
 
     &.rounded {
-        border-radius: $corner-radius-m;
+        border-radius: $border-radius-m;
     }
 
     &.circular {

diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
@@ -115,7 +115,7 @@ $small-marker-top: 0;
     .slider-rail,
     .slider-track,
     .rail-marker-segments {
-        border-radius: $corner-radius-xs;
+        border-radius: $border-radius-xs;
         cursor: pointer;
         height: $medium-track-height;
         left: 0;
@@ -161,7 +161,7 @@ $small-marker-top: 0;
     .rail-marker-segment {
         background-color: var(--slider-default-rail-color);
         border: 1px solid var(--slider-default-rail-border-color);
-        border-radius: $corner-radius-xs;
+        border-radius: $border-radius-xs;
         height: $medium-track-height;
         position: absolute;
         top: $medium-marker-top;
@@ -375,7 +375,7 @@ $small-marker-top: 0;
         .slider-rail,
         .slider-track,
         .rail-marker-segments {
-            border-radius: $corner-radius-m;
+            border-radius: $border-radius-m;
             height: $large-track-height;
             top: $large-rail-top;
         }
@@ -394,7 +394,7 @@ $small-marker-top: 0;
         }
 
         .rail-marker-segment {
-            border-radius: $corner-radius-m;
+            border-radius: $border-radius-m;
             height: $large-track-height;
             top: $large-marker-top;
         }
@@ -512,7 +512,7 @@ $small-marker-top: 0;
         .slider-rail,
         .slider-track,
         .rail-marker-segments {
-            border-radius: $corner-radius-xs;
+            border-radius: $border-radius-xs;
             height: $medium-track-height;
             top: $medium-rail-top;
         }
@@ -531,7 +531,7 @@ $small-marker-top: 0;
         }
 
         .rail-marker-segment {
-            border-radius: $corner-radius-xs;
+            border-radius: $border-radius-xs;
             height: $medium-track-height;
             top: $medium-marker-top;
         }
@@ -653,7 +653,7 @@ $small-marker-top: 0;
         .slider-rail,
         .slider-track,
         .rail-marker-segments {
-            border-radius: $corner-radius-xs;
+            border-radius: $border-radius-xs;
             height: $small-track-height;
             top: $small-rail-top;
         }
@@ -672,7 +672,7 @@ $small-marker-top: 0;
         }
 
         .rail-marker-segment {
-            border-radius: $corner-radius-xs;
+            border-radius: $border-radius-xs;
             height: $small-track-height;
             top: $small-marker-top;
         }

diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
@@ -128,13 +128,13 @@
         --tab-hover-label: var(--tab-pill-hover-label);
         background-color: var(--tab-pill-background);
         width: fit-content;
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
         padding: calc(#{$space-xs} - #{$space-xxxs});
 
         .tab {
             padding: $button-padding-vertical-medium
                 $button-padding-horizontal-medium;
-            border-radius: $corner-radius-xl;
+            border-radius: $border-radius-xl;
 
             &.active {
                 .badge {
@@ -224,7 +224,7 @@
         align-items: center;
         background: var(--bg);
         border: var(--border-width) solid var(--bg);
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
         display: flex;
         padding: $space-ml $space-s;
         width: fit-content;

diff --git a/src/components/Tooltip/tooltip.module.scss b/src/components/Tooltip/tooltip.module.scss
@@ -25,7 +25,7 @@ $tooltip-arrow-shadow: 1px 1px 2px rgba(15, 20, 31, 0.12);
     text-align: center;
     z-index: $z-index-400;
     padding: $space-xs;
-    border-radius: $corner-radius-s;
+    border-radius: $border-radius-s;
     overflow-wrap: break-word;
 
     &.dark {

diff --git a/src/components/Upload/upload.module.scss b/src/components/Upload/upload.module.scss
@@ -83,7 +83,7 @@ $upload-picture-card-size: 104px;
             }
 
             &-info {
-                border-radius: $corner-radius-xl;
+                border-radius: $border-radius-xl;
                 height: 48px;
                 padding: $space-xs;
                 transition: background-color $motion-duration-extra-fast;
@@ -310,7 +310,7 @@ $upload-picture-card-size: 104px;
     &-drop {
         background: var(--background-color);
         background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%23bec2ca' stroke-width='1' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-        border-radius: $corner-radius-xl;
+        border-radius: $border-radius-xl;
         cursor: pointer;
         height: 188px;
         position: relative;
@@ -328,7 +328,7 @@ $upload-picture-card-size: 104px;
         }
 
         &-container {
-            border-radius: $corner-radius-xl;
+            border-radius: $border-radius-xl;
             margin: 0 auto;
             padding: $space-xl;
             position: relative;
@@ -426,7 +426,7 @@ $upload-picture-card-size: 104px;
 
         .upload-list-item {
             border: 1px solid var(--border-color);
-            border-radius: $corner-radius-m;
+            border-radius: $border-radius-m;
             height: 100%;
             margin: 0;
             padding: $space-xs;
@@ -447,7 +447,7 @@ $upload-picture-card-size: 104px;
         }
 
         .upload-list-item-info {
-            border-radius: $corner-radius-m;
+            border-radius: $border-radius-m;
             font-size: $text-font-size-2;
             height: 100%;
             overflow: hidden;
@@ -630,7 +630,7 @@ $upload-picture-card-size: 104px;
     &-select-picture-card {
         background-color: var(--background-color);
         border: 1px solid var(--border-color);
-        border-radius: $corner-radius-m;
+        border-radius: $border-radius-m;
         cursor: pointer;
         height: $upload-picture-card-size;
         margin-bottom: $space-xs;