feat(colors): introduces new color system

Instead of SASS vars that get compiled to explicit values, Gravity now uses CSS custom properties. This allows color values to be overridden via the CSS cascade, so different parts of a page can have different color schemes applied to them.

BREAKING CHANGE: All `grav-co-*` SASS vars have been removed. The new CSS custom properties should be used instead.

fix #147

src/styleguide/sass/components/_example.scss

@@ -1,28 +1,32 @@
 /** @define sg-example */
 .sg-example--inline-block {
+  @include grav-color-grp-b-apply('background-color', 'neutral', true);
+
   content: ' ';
   display: inline-block;
   width: 1em;
   height: 1em;
-  background-color: $grav-co-neutral-warm-grey;
   margin-right: 0.5rem;
   vertical-align: middle;
 }
 
 .sg-example--padded-block {
+  @include grav-color-grp-b-apply('background-color', 'accent', true);
+
   max-width: 8rem;
-  background-color: $grav-co-primary-satsuma;
 }
 
 .sg-example--padded-block > div {
+  @include grav-color-grp-b-apply('background-color', 'accent', true);
+
   height: 6rem;
   position: relative;
-  background-color: $grav-co-primary-satsuma;
   box-sizing: border-box;
 }
 
 .sg-example--padded-block > div > div {
+  @include grav-color-grp-b-apply('background-color', 'neutral', true);
+
   position: absolute;
-  background-color: $grav-co-neutral-warm-grey;
   box-sizing: border-box;
 }

src/styleguide/sass/components/_swatch.scss

@@ -37,11 +37,11 @@
 }
 
 .sg-swatch-check__item--light::before {
-  color: $grav-co-neutral-dirty-snow-white;
+  @include grav-color-grp-a-apply('color', 'neutral', true);
 }
 
 .sg-swatch-check__item--dark::before {
-  color: $grav-co-neutral-charcoal;
+  @include grav-color-grp-b-apply('color', 'neutral', true);
 }
 
 .sg-swatch-check__item--small::before {
@@ -53,10 +53,11 @@
 }
 
 .sg-swatch-check__item-label {
+  @include grav-color-grp-b-apply('background-color', 'neutral', true);
+  @include grav-color-grp-a-apply('color', 'neutral', true);
+
   padding: 2px 4px;
-  background-color: $grav-co-neutral-charcoal;
   border-radius: 5px;
-  color: $grav-co-neutral-dirty-snow-white;
   font-size: 0.7em;
   text-align: center;
   text-transform: uppercase;

src/styleguide/sass/pattern-scaffolding.scss

@@ -8,17 +8,12 @@
 // === Settings layer ===
 // Used with preprocessors and contain font, colors definitions, etc.
 // Must not output any CSS.
-@import '../../ui-lib/sass/00-settings/typography';
-@import '../../ui-lib/sass/00-settings/modularscale-settings';
-@import '../../ui-lib/sass/00-settings/gravy-settings';
-@import '../../ui-lib/sass/00-settings/colors';
-@import '../../ui-lib/sass/00-settings/spacing';
-@import '../../ui-lib/sass/00-settings/strokes';
+@import '../../ui-lib/sass/00-settings/settings.all';
 
 // === Tools layer ===
 // Globally used mixins and functions.
 // Must not output any CSS.
-
+@import '../../ui-lib/sass/01-tools/color-schemes';
 
 // === Generic layer ===
 // Reset and/or normalize styles, box-sizing definition, etc.

src/ui-lib/sass/00-settings/_color-schemes.scss

@@ -0,0 +1,122 @@
+////
+/// Definitions of Gravity's out-of-the-box colour scheme maps.
+///
+/// @group  colours
+/// @access public
+////
+
+
+/// Light colour scheme.
+$grav-co-scheme-light: (
+  // == Group A colours ==
+  'group-a': (
+    // Base neutral colour.
+    //
+    // Always used for container background,
+    // may be used for other things.
+    'neutral': $grav-co-wipro-white,
+
+    // Alternative neutral colour to be used
+    // for subtle, NON-ESSENTIAL, effects. E.g.
+    // banding alternate table rows.
+    'neutral-alt': $grav-co-wipro-white,
+
+    // Accent colour for elements that should draw the user's
+    // focus.
+    // Typically, this should be paired with the corresponing
+    // layer 1 accent colour, because colour schemes may assign
+    // neutral colours to either the layer 0 or layer 1 accent
+    // colours.
+    // For example: highlighted text, calls to action, etc.
+    'accent': $grav-co-wipro-white,
+
+    // Accent colour for elements that indicate success or
+    // completion.
+    // For example: Status messages or icons that indicate that
+    // something is OK or complete.
+    'accent-success': $grav-co-wipro-white,
+
+    // Accent colour for elements that require the user's
+    // attention.
+    // For example: Warning messages or alerts.
+    'accent-attention': $grav-co-wipro-white,
+
+    // Accent colour for elements that indicate danger or risk.
+    // For example: Error messages or destructive actions.
+    'accent-danger': $grav-co-wipro-white,
+
+  ),
+
+  // == Group B colours ==
+  'group-b': (
+    // Base neutral colour.
+    // Always used for container foreground (i.e. text).
+    // May be used for other non-interactive things that need
+    // to be visibly distinguishable against the background
+    // such as table borders, dividers, etc.
+    'neutral': $grav-co-wipro-dark-gray,
+
+    // Alternative neutral colour to be used
+    // for non-interactive items that need to visually stand out
+    // less against their surroundings. E.g. small text, code
+    // comments, etc.
+    'neutral-subtle': $grav-co-wipro-dark-gray,
+
+    // Alternative neutral colour to be used
+    // for non-interactive items that need to visually stand out
+    // more against their surroundings. E.g. emphasized text,
+    // quotes, etc.
+    'neutral-emphasis': $grav-co-wipro-dark-gray,
+
+    // Colour intended for interactive controls (links, buttons, etc.)
+    // that need to be visually distinguishable against the background.
+    'control': $grav-co-wipro-teal-100,
+
+    // Colour intended for an alternative state or type of interactive
+    // control. For example, a visited link.
+    'control-alt': $grav-co-wipro-violet-100,
+
+    // Colour intended for states of interactive controls that need
+    // to be visually emphasised somehow. Typically this will be used
+    // for hover and/or focus states.
+    'control-emphasis': $grav-co-wipro-teal-80,
+
+    // Colour intended for the active state of interactive controls.
+    // Typically this will be used when a button is pressed or a link
+    // is clicked.
+    'control-active': $grav-co-wipro-teal-80,
+
+    // Colour intended for the disbaled state of interactive controls.
+    'control-disabled': $grav-co-wipro-dark-gray,
+
+    // Accent colour for elements that should draw the user's
+    // focus.
+    // Typically, this should be paired with the corresponing
+    // layer 0 accent colour, because colour schemes may assign
+    // neutral colours to either the layer 0 or layer 1 accent
+    // colours.
+    // For example: highlighted text, calls to action, etc.
+    'accent': $grav-co-wipro-red-100,
+
+    // Accent colour for elements that indicate success or
+    // completion.
+    // For example: Status messages or icons that indicate that
+    // something is OK or complete.
+    'accent-success': $grav-co-wipro-dark-gray,
+
+    // Accent colour for elements that require the user's
+    // attention.
+    // For example: Warning messages or alerts.
+    'accent-attention': $grav-co-wipro-dark-gray,
+
+    // Accent colour for elements that indicate danger or risk.
+    // For example: Error messages or destructive actions.
+    'accent-danger': $grav-co-wipro-dark-gray,
+  ),
+);
+
+
+
+
+/// The default colour scheme that is applied to pages
+$grav-co-scheme-default: $grav-co-scheme-light;

src/ui-lib/sass/00-settings/_settings.all.scss

@@ -4,7 +4,8 @@
 @import 'typography';
 @import 'modularscale-settings';
 @import 'gravy-settings';
-@import 'colors';
+@import 'color-values';
+@import 'color-schemes';
 @import 'spacing';
 @import 'strokes';
 @import 'animations';

src/ui-lib/sass/01-tools/_color-schemes.scss

@@ -0,0 +1,92 @@
+////
+/// Mixins for defining color schemes in CSS.
+///
+///
+/// @group  colours
+/// @access public
+////
+
+
+@function grav-color-scheme-class-name($color-scheme-name) {
+  @return '.grav-u-color-scheme-#{$color-scheme-name}';
+}
+
+
+/// Returns the CSS custom property name of a given group A color.
+@function grav-color-grp-a-prop-name($color-name) {
+  @return --grav-co-grp-a-#{$color-name};
+}
+
+/// Returns the CSS custom property name of a given group A color.
+@function grav-color-grp-b-prop-name($color-name) {
+  @return --grav-co-grp-b-#{$color-name};
+}
+
+
+/// Returns the default color scheme's value for a given group A color.
+@function grav-color-grp-a-default-value($color-name) {
+  $group-a-colors: map-get($grav-co-scheme-default, 'group-a');
+  @return map-get($group-a-colors, $color-name);
+}
+
+/// Returns the default color scheme's value for a given group A color.
+@function grav-color-grp-b-default-value($color-name) {
+  $group-b-colors: map-get($grav-co-scheme-default, 'group-b');
+  @return map-get($group-b-colors, $color-name);
+}
+
+
+/// Outputs CSS custom property definitions for a color scheme.
+@mixin grav-color-scheme-props($color-scheme-map) {
+  @each $name, $color in map-get($color-scheme-map, 'group-a') {
+    #{grav-color-grp-a-prop-name($name)}: $color;
+  }
+
+  @each $name, $color in map-get($color-scheme-map, 'group-b') {
+    #{grav-color-grp-b-prop-name($name)}: $color;
+  }
+}
+
+
+/// Applys a group A color value to the given CSS property.
+///
+/// If `$use-fallback` is set, the default colour scheme's color value will be
+/// set first as a fallback for older browsers that do not support CSS custom
+/// properties.
+@mixin grav-color-grp-a-apply($css-property, $color-name, $use-fallback: false) {
+  @if $use-fallback {
+    #{$css-property}: grav-color-grp-a-default-value($color-name);
+  }
+  #{$css-property}: var(#{grav-color-grp-a-prop-name($color-name)});
+}
+
+/// Applies a group B color value to the given CSS property.
+///
+/// If `$use-fallback` is set, the default colour scheme's color value will be
+/// set first as a fallback for older browsers that do not support CSS custom
+/// properties.
+@mixin grav-color-grp-b-apply($css-property, $color-name, $use-fallback: false) {
+  @if $use-fallback {
+    #{$css-property}: grav-color-grp-b-default-value($color-name);
+  }
+  #{$css-property}: var(#{grav-color-grp-b-prop-name($color-name)});
+}
+
+
+/// Sets the `color` and `background-color` to the `neutral` colors of group A and B
+/// respectively.
+///
+/// Color scheme classes must always do this to visually "apply" the new color scheme
+/// to the element they are set on.
+@mixin grav-color-scheme-apply($use-fallback: false) {
+  @include grav-color-grp-a-apply('background', 'neutral', $use-fallback);
+  @include grav-color-grp-b-apply('color', 'neutral', $use-fallback);
+}
+
+/// Defines a color scheme CSS class.
+@mixin grav-color-scheme-define-class($color-scheme-name, $color-scheme-map) {
+  #{grav-color-scheme-class-name($color-scheme-name)} {
+    @include grav-color-scheme-props($color-scheme-map);
+    @include grav-color-scheme-apply;
+  }
+}

src/ui-lib/sass/01-tools/_tools.all.scss

@@ -3,3 +3,4 @@
 // Must not output any CSS.
 @import 'container';
 @import 'clear';
+@import 'color-schemes';