Merge pull request sass#24 from oddbird/color-config

[color-config] Make sure colors are using CSS Variables where possible

source/_layouts/base.liquid

@@ -67,7 +67,7 @@
         </h1>
       {% endunless %}
 
-      <div class="sl-l-container sl-background--white{% unless is_home %} sl-l-section{% endunless %}">
+      <div class="sl-l-container sl-color--white-background{% unless is_home %} sl-l-section{% endunless %}">
         {{ content | typogr }}
       </div>
 
@@ -84,7 +84,7 @@
       </div>
 
       {% if section_bottom %}
-        <section class="sl-background--white sl-l-container">
+        <section class="sl-color--white-background sl-l-container">
           <ul class="sl-l-grid sl-l-grid--full sl-l-medium-grid--gutters-large sl-l-medium-grid--divide-by-2 sl-l-large-grid--divide-by-3 sl-l-section">
             {% for item in section_bottom %}
               <li class="sl-l-grid__column">

source/assets/sass/_breakpoints.scss

@@ -3,10 +3,10 @@
 $sl-breakpoints: (
   // for mixins to span across breakpoints and without one
   none: 0,
-  small: config.$breakpoint--small,
-  medium: config.$breakpoint--medium,
-  large: config.$breakpoint--large,
-  x-large: config.$breakpoint--x-large
+  small: config.$sl-breakpoint--small,
+  medium: config.$sl-breakpoint--medium,
+  large: config.$sl-breakpoint--large,
+  x-large: config.$sl-breakpoint--x-large
 );
 
 @mixin sl-breakpoint($breakpoint) {
@@ -22,49 +22,49 @@ $sl-breakpoints: (
 }
 
 @mixin sl-breakpoint--small {
-  @include sl-breakpoint(config.$breakpoint--small) {
+  @include sl-breakpoint(config.$sl-breakpoint--small) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--small-max {
-  @include sl-breakpoint-max(config.$breakpoint--small) {
+  @include sl-breakpoint-max(config.$sl-breakpoint--small) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--medium {
-  @include sl-breakpoint(config.$breakpoint--medium) {
+  @include sl-breakpoint(config.$sl-breakpoint--medium) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--medium-max {
-  @include sl-breakpoint-max(config.$breakpoint--medium) {
+  @include sl-breakpoint-max(config.$sl-breakpoint--medium) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--large {
-  @include sl-breakpoint(config.$breakpoint--large) {
+  @include sl-breakpoint(config.$sl-breakpoint--large) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--large-max {
-  @include sl-breakpoint-max(config.$breakpoint--large) {
+  @include sl-breakpoint-max(config.$sl-breakpoint--large) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--x-large {
-  @include sl-breakpoint(config.$breakpoint--x-large) {
+  @include sl-breakpoint(config.$sl-breakpoint--x-large) {
     @content;
   }
 }
 
 @mixin sl-breakpoint--x-large-max {
-  @include sl-breakpoint-max(config.$breakpoint--x-large) {
+  @include sl-breakpoint-max(config.$sl-breakpoint--x-large) {
     @content;
   }
 }

source/assets/sass/components/_buttons.scss

@@ -1,5 +1,4 @@
 @use 'sass:color';
-@use '../functions';
 
 .sl-c-button {
   align-items: center;
@@ -17,7 +16,7 @@
   &:hover,
   &:focus {
     --color-button-text: var(--sl-color--action);
-    --color-button-bg: var(--sl-color-link--action);
+    --color-button-bg: var(--sl-color--link-action);
   }
 
   &:active {

source/assets/sass/components/_callouts.scss

@@ -1,23 +1,23 @@
 @use 'sass:color';
 @use '../breakpoints';
-@use '../visual-design/theme';
+@use '../config/color/brand';
 
 .sl-c-callout {
   margin: var(--sl-gutter--sesqui) 0;
   padding: var(--sl-gutter--sesqui) var(--sl-gutter);
-  background: color.adjust(theme.$sl-color--pale-sky, $lightness: 60%);
+  background: color.adjust(brand.$sl-color--pale-sky, $lightness: 60%);
   border-radius: var(--sl-border-radius--small);
 
   &--warning {
-    background: color.adjust(theme.$sl-color--hopbush, $lightness: 38%);
+    background: color.adjust(brand.$sl-color--hopbush, $lightness: 38%);
     border: var(--sl-border--small) solid
-      color.adjust(theme.$sl-color--hopbush, $lightness: 27%);
+      color.adjust(brand.$sl-color--hopbush, $lightness: 27%);
   }
 
   &--fun-fact {
-    background: color.adjust(theme.$sl-color--patina, $lightness: 47%);
+    background: color.adjust(brand.$sl-color--patina, $lightness: 47%);
     border: var(--sl-border--small) solid
-      color.adjust(theme.$sl-color--patina, $lightness: 32%);
+      color.adjust(brand.$sl-color--patina, $lightness: 32%);
   }
 
   &--function {
@@ -38,7 +38,7 @@
     padding: var(--sl-gutter--minus);
 
     .sl-c-callout & {
-      background: color.adjust(theme.$sl-color--pale-sky, $lightness: 53%);
+      background: color.adjust(brand.$sl-color--pale-sky, $lightness: 53%);
     }
   }
 

source/assets/sass/components/_inputs.scss

@@ -1,10 +1,9 @@
 @use '../breakpoints';
-@use '../visual-design/theme';
 
 input {
   display: block;
   margin: 0 var(--sl-gutter);
-  border: var(--sl-border--small) solid theme.$sl-color--iron;
+  border: var(--sl-border--small) solid var(--sl-color--iron);
   padding: var(--sl-gutter--quarter) var(--sl-gutter);
   width: 100%;
 

source/assets/sass/components/_introduction.scss

@@ -1,9 +1,8 @@
 @use '../breakpoints';
-@use '../visual-design/theme';
 @use '../visual-design/typography';
 
 .sl-c-introduction {
-  color: theme.$sl-color--patina;
+  color: var(--sl-color--patina);
   font-weight: typography.$sl-font-weight--light;
 
   @include breakpoints.sl-breakpoint--medium {

source/assets/sass/components/_link-header.scss

@@ -1,5 +1,3 @@
-@use '../visual-design/theme';
-
 h1,
 h2,
 h3,
@@ -47,7 +45,7 @@ h6 {
 
 @keyframes highlight-header {
   from {
-    background-color: theme.$sl-color--dawn-pink;
+    background-color: var(--sl-color--dawn-pink);
   }
 
   to {
@@ -68,10 +66,10 @@ h6 {
 
 @keyframes highlight-signature {
   from {
-    background-color: theme.$sl-color--dawn-pink;
+    background-color: var(--sl-color--dawn-pink);
   }
 
   to {
-    background-color: var(--sl-color-code--bg);
+    background-color: var(--sl-color--code-background);
   }
 }

source/assets/sass/components/_lists.scss

@@ -1,7 +1,6 @@
 @use 'sass:color';
 @use '../breakpoints';
-@use '../visual-design/theme';
-@use '../visual-design/typography';
+@use '../config/color/brand';
 
 .sl-c-list {
   &,
@@ -69,15 +68,15 @@
         width: 100%;
 
         &:hover {
-          background-color: theme.$sl-color--dawn-pink;
+          background-color: var(--sl-color--dawn-pink);
         }
       }
 
       li.overview a {
         font-size: var(--sl-font-size--small);
 
         &:not(.selected) {
-          color: color.adjust(theme.$sl-color--midnight-blue, $alpha: -0.3);
+          color: color.adjust(brand.$sl-color--midnight-blue, $alpha: -0.3);
         }
       }
 
@@ -110,7 +109,7 @@
           font-weight: bold;
 
           &:not(.section) {
-            background-color: theme.$sl-color--dawn-pink;
+            background-color: var(--sl-color--dawn-pink);
           }
         }
       }
@@ -130,7 +129,7 @@
   }
 
   > div {
-    border-left: var(--sl-border--small) solid theme.$sl-color--iron;
+    border-left: var(--sl-border--small) solid var(--sl-color--iron);
     padding: 0 var(--sl-gutter);
 
     &:first-child {
@@ -140,7 +139,7 @@
 
   .compatibility {
     font-weight: 600;
-    color: theme.$sl-color--midnight-blue;
+    color: var(--sl-color--midnight-blue);
     display: block;
 
     + div {

source/assets/sass/components/_navigation.scss

@@ -1,5 +1,4 @@
 @use '../breakpoints';
-@use '../visual-design/theme';
 
 .sl-l-medium-holy-grail__body.sl-js-nav--is-sticky
   .sl-c-list-navigation-wrapper {
@@ -25,7 +24,7 @@
 
   &:focus {
     transform: translateY(0);
-    background: theme.$sl-color--hopbush;
-    color: theme.$sl-color--white;
+    background: var(--sl-color--hopbush);
+    color: var(--sl-color--white);
   }
 }

source/assets/sass/components/_pop-stripe.scss

@@ -1,14 +1,20 @@
 @use 'sass:math';
 @use 'sass:list';
 @use 'sass:meta';
+@use 'sass:map';
 @use '../functions';
-@use '../visual-design/theme';
+@use '../config/color/brand';
 
-$sl-colors: theme.$sl-color--hopbush theme.$sl-color--bouquet
-  theme.$sl-color--venus theme.$sl-color--patina theme.$sl-color--nebula
-  theme.$sl-color--white theme.$sl-color--dawn-pink theme.$sl-color--wafer
-  theme.$sl-color--iron theme.$sl-color--regent-grey theme.$sl-color--pale-sky
-  theme.$sl-color--midnight-blue;
+$sl-colors: ();
+
+// loop over the variable names in config/color/brand.scss
+@each $color-name in map.keys(meta.module-variables('brand')) {
+  // turn each sass variable name into a css var() function
+  $var: var(--#{$color-name});
+
+  // add each var() function to the space-separated list
+  $sl-colors: list.append($sl-colors, $var, space);
+}
 
 @function stripes($position, $sl-colors) {
   $sl-colors: if(

source/assets/sass/components/_sass-syntax-switcher.scss

@@ -9,7 +9,7 @@
   margin: 0;
 
   a {
-    color: theme.$sl-color--pale-sky;
+    color: var(--sl-color--pale-sky);
     cursor: text;
   }
 
@@ -85,7 +85,7 @@
         }
 
         a::before {
-          color: theme.$sl-color--regent-grey;
+          color: var(--sl-color--regent-grey);
           content: '\21d2';
           font-size: var(--sl-font-size--large);
           font-weight: typography.$sl-font-weight--bold;
@@ -174,7 +174,7 @@ html .ui-button.ui-state-disabled:active {
   top: 0.45rem;
   margin: 0;
   text-transform: uppercase;
-  color: theme.$sl-color--hopbush;
+  color: var(--sl-color--hopbush);
 
   &,
   * {