MOON-377: Add border variables for selectors

Jahia · Dec 30, 2024 · 6435534 · 6435534
1 parent ffc7c91
commit 6435534
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 20 deletions.
diff --git a/src/components/CardSelector/CardSelector.scss b/src/components/CardSelector/CardSelector.scss
@@ -1,21 +1,23 @@
+@use "../../tokens/borders/borders" as *;
+
 .moonstone-cardSelector {
     width: 100%;
     padding: var(--spacing-small);
 
-    border: 1px solid var(--color-gray40);
+    border: var(--selector-border);
     border-radius: 2px;
     background-color: var(--color-white);
     cursor: pointer;
 
     transition: all 0.2s ease-in-out;
 
     &:hover {
-        border-color: var(--color-gray60);
+        border: var(--selector-border_hover);
         box-shadow: 0 1px 6px var(--color-dark20);
     }
 
     &:focus {
-        border-color: var(--color-accent);
+        border: var(--selector-border_focus);
     }
 }
 

diff --git a/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss b/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss
@@ -1,3 +1,5 @@
+@use "../../../tokens/borders/borders" as *;
+
 .moonstone-emptyCardSelector {
     gap: var(--spacing-nano);
     width: 100%;
@@ -14,11 +16,11 @@
     transition: all 0.2s ease-in-out;
 
     &:hover {
-        border: 1px solid var(--color-gray60);
+        border: var(--selector-border_hover);
     }
 
     &:focus {
-        border: 1px solid var(--color-accent);
+        border: var(--selector-border_focus);
     }
 }
 

diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
@@ -1,7 +1,6 @@
 @use '../../utils/index' as *;
 @use "../../tokens/spacings/spacings" as *;
-
-$border-width: 1px;
+@use "../../tokens/borders/borders" as *;
 
 .moonstone-dropdown_container {
     position: relative;
@@ -59,16 +58,16 @@ $border-width: 1px;
     }
 
     &.moonstone-opened {
-        box-shadow: inset 0 0 0 $border-width var(--color-accent);
+        border: var(--selector-border);
     }
 
     &:hover {
         color: var(--color-accent);
     }
 
     &:focus {
+        border: var(--selector-border_focus);
         outline: none;
-        box-shadow: inset 0 0 0 $border-width var(--color-accent);
     }
 
     &:not(.moonstone-filled) .moonstone-dropdown_label {
@@ -83,13 +82,13 @@ $border-width: 1px;
 .moonstone-dropdown_outlined {
     color: var(--color-gray_dark);
 
-    box-shadow: inset 0 0 0 $border-width var(--color-gray40);
+    border: var(--selector-border);
 
     &.moonstone-disabled {
         color: var(--color-gray);
 
-        background-color: var(--color-gray_light40);
+        border: var(--selector-border);
 
-        box-shadow: inset 0 0 0 $border-width var(--color-gray40);
+        background-color: var(--color-gray_light40);
     }
 }
diff --git a/src/components/Input/BaseInput/BaseInput.scss b/src/components/Input/BaseInput/BaseInput.scss
@@ -1,10 +1,9 @@
 @use '../../../utils/index';
+@use "../../../tokens/borders/borders" as *;
 
 $default-size: 24px;
 $big-size: 32px;
 $min-width: 40px;
-$border-width: 1px;
-$border-style: solid;
 $border-radius: 2px;
 
 .moonstone-baseInput {
@@ -25,8 +24,8 @@ $border-radius: 2px;
     }
 
     &.moonstone-outlined {
+        border: var(--selector-border);
         border-radius: $border-radius;
-        box-shadow: inset 0 0 0 $border-width var(--color-gray40);
     }
 }
 
@@ -82,7 +81,7 @@ $border-radius: 2px;
 
     // Reset Firefox invalid required input style
     &:invalid {
-        box-shadow: none;
+        border: none;
     }
 
     &::placeholder {
@@ -101,15 +100,15 @@ $border-radius: 2px;
     }
 
     &:read-only {
-        box-shadow: none;
+        border: none;
     }
 
     &:disabled {
         color: var(--color-gray);
 
-        background-color: var(--color-gray_light40);
+        border: none;
 
-        box-shadow: none;
+        background-color: var(--color-gray_light40);
         cursor: default;
         opacity: 1; // Reset iOS opacity
 

diff --git a/src/components/ListSelector/ValueList/ValueList.scss b/src/components/ListSelector/ValueList/ValueList.scss
@@ -1,3 +1,5 @@
+@use "../../../tokens/borders/borders" as *;
+
 .moonstone-valueList {
     flex-grow: 1;
     height: 300px;
@@ -45,7 +47,7 @@
     min-width: 200px;
     padding: var(--spacing-small);
 
-    border: 1px solid var(--color-gray40);
+    border: var(--selector-border);
 
     .moonstone-dragging {
         background-color: var(--color-light);

diff --git a/src/globals.scss b/src/globals.scss
@@ -7,5 +7,6 @@
 
 @forward 'tokens/spacings/spacings';
 @forward 'tokens/colors/colors';
+@forward 'tokens/borders/borders';
 
 @forward 'icons/icons';
diff --git a/src/tokens/borders/_borders.scss b/src/tokens/borders/_borders.scss
@@ -0,0 +1,8 @@
+@forward '../colors/colors';
+
+:root {
+    --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);
+}