Merge pull request #148 from locomotivemtl/feature/scss-colors

Color as list

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1680721594993
+    "version": 1683902331941
 }

assets/styles/components/_form.scss

@@ -27,7 +27,7 @@ $input-icon-color: 424242; // No #
 .c-form_input {
     padding: rem(10px);
     border: 1px solid lightgray;
-    background-color: $color-lightest;
+    background-color: color(lightest);
 
     &:hover {
         border-color: darkgray;
@@ -71,7 +71,7 @@ $checkbox-icon-color: $input-icon-color;
     }
 
     &::before {
-        background-color: $color-lightest;
+        background-color: color(lightest);
         border: 1px solid lightgray;
     }
 

assets/styles/components/_scrollbar.scss

@@ -25,7 +25,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    background-color: $color-darkest;
+    background-color: color(darkest);
     opacity: 0.5;
     width: 7px;
     border-radius: 10px;

assets/styles/elements/_document.scss

@@ -73,8 +73,8 @@ body {
 }
 
 ::selection {
-    background-color: $selection-background-color;
-    color: $selection-text-color;
+    background-color: $color-selection-background;
+    color: $color-selection-text;
     text-shadow: none;
 }
 

assets/styles/settings/_config.colors.scss

@@ -5,24 +5,26 @@
 // Palette
 // =============================================================================
 
-$color-lightest:    #FFFFFF;
-$color-darkest:     #000000;
+$colors: (
+    primary:        #3297FD,
+    lightest:       #FFFFFF,
+    darkest:        #000000,
+);
 
-// Specific
+
+// Specifics
 // =============================================================================
 
 // Link
-$color-link:        #1A0DAB;
-$color-link-focus:  #1A0DAB;
-$color-link-hover:  darken(#1A0DAB, 10%);
+$color-link:           color(primary);
+$color-link-focus:     color(primary);
+$color-link-hover:     darken(color(primary), 10%);
 
 // Selection
-$selection-text-color:          #3297FD;
-$selection-background-color:    #FFFFFF;
-
-// Social Colors
-// =============================================================================
+$color-selection-text:         color(darkest);
+$color-selection-background:   color(lightest);
 
+// Socials
 $color-facebook:    #3B5998;
 $color-instagram:   #E1306C;
 $color-youtube:     #CD201F;

assets/styles/settings/_config.scss

@@ -49,7 +49,7 @@ $font-faces: (
 // Base
 $font-size: 16px;
 $line-height:   math.div(24px, $font-size);
-$font-color:    $color-darkest;
+$font-color:    color(darkest);
 
 // Weights
 $font-weight-light:     300;

assets/styles/settings/_config.variables.scss

@@ -21,6 +21,11 @@
     --font-size-h5:     #{rem(18px)};
     --font-size-h6:     #{rem(16px)};
 
+    // // Colors
+    // @each $color, $value in $colors {
+    //     --color-#{"" + $color}: #{$value};
+    // }
+
     @media (min-width: $from-small) {
         --grid-columns:     #{$base-column-nb};
         --grid-gutter:      #{rem(16px)};

assets/styles/tools/_functions.scss

@@ -139,3 +139,22 @@
 }
 
 $context: 'frontend' !default;
+
+
+// Returns color code.
+//
+// ```scss
+// .c-box {
+//     width: color(primary);
+// }
+// ```
+//
+// @param  {string} $key - The color key in $colors.
+// @return {color}
+
+@function color($key) {
+    @if not map-has-key($colors, $key) {
+        @error "Unknown '#{$key}' in $colors.";
+    }
+    @return map-get($colors, $key);
+}