💄(selector/spinner) add color palette for selector/spinner components

Use a color palette for selector and spinner to customize them easily
openfun · Nov 10, 2020 · 26125fe · 26125fe
1 parent d446d02
commit 26125fe
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/src/frontend/js/components/Spinner/_styles.scss b/src/frontend/js/components/Spinner/_styles.scss
@@ -7,8 +7,8 @@
 
 .spinner {
   border: 0.125rem solid transparent;
-  border-left-color: r-color('denim');
-  border-top-color: r-color('denim');
+  border-left-color: r-theme-val(spinner, base-color);
+  border-top-color: r-theme-val(spinner, base-color);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   display: inline-block;

diff --git a/src/frontend/scss/objects/_selector.scss b/src/frontend/scss/objects/_selector.scss
@@ -20,8 +20,8 @@
   }
 
   &__list {
-    background: #ffffff;
-    border: 1px solid r-color('light-grey');
+    background: r-theme-val(selector, base-background);
+    border: 1px solid r-theme-val(selector, base-border);
     list-style: none;
     margin: 0;
     outline: none !important;
@@ -52,27 +52,29 @@
       margin-left: calc(3rem - 10px);
     }
     &:before {
-      border-bottom-color: r-color('light-grey');
+      border-bottom-color: r-theme-val(selector, base-border);
       border-width: 12px;
       margin-left: calc(3rem - 12px);
     }
 
     &__link {
       @include button-reset-style();
-      color: r-color('charcoal');
+      background: r-theme-val(selector, base-background);
+      color: r-theme-val(selector, base-color);
       display: block;
       font-size: 1rem;
       min-width: 10rem;
       padding: 0.5rem 1.5rem;
       text-align: left;
 
       &:hover {
-        color: r-color('charcoal');
+        color: r-theme-val(selector, hover-color);
         text-decoration: underline;
       }
 
       &--highlighted {
-        background: r-color('light-grey');
+        background: r-theme-val(selector, hover-background);
+        color: r-theme-val(selector, hover-color);
       }
 
       .selector--dark & {

diff --git a/src/frontend/scss/settings/_colors.scss b/src/frontend/scss/settings/_colors.scss
@@ -563,5 +563,15 @@ $r-theme: (
     grid-border-color: r-color('silver'),
     cta-sample: $indianred3-scheme,
     spot-sample: $firebrick6-scheme,
+  ),
+  selector: (
+    base-background: r-color('white'),
+    hover-background: r-color('white'),
+    base-color: r-color('charcoal'),
+    hover-color: r-color('charcoal'),
+    base-border: r-color('light-grey'),
+  ),
+  spinner: (
+    base-color: r-color('denim'),
   )
 );