gent_styleguide 5.1.4 → 6.0.0-alpha2

package/build/styleguide/sass/00-settings/_colors.scss

@@ -1,10 +1,9 @@
 ////
 ///
-/// This file defines all color settings, mixins and fucntions necessary
+/// This file defines all color settings, mixins and functions necessary
 /// to provide the themify engine the style guide is based on.
 ///
 /// @group colors
-/// @author Gert-Jan Meire
 ///
 ////
 
@@ -15,20 +14,24 @@
 /// @group colors
 /// @access public
 /// @type map
-/// @author Gert-Jan Meire
 ///
 $colors: (
+  // 6.x colors
+  'gray': #001823,
+  'blue': #005ba9,
+  'yellow': #ffdb5a,
   'cyan': #009de0,
+  'cyan-hover': #1abcff,
+  'red': #ea0d33,
+  'green': #2c8726,
+  'white': #fff,
+
+  // 5.x colors legacy
   'cyan-wcag': #007db3,
   'dark-gray': #23333a,
-  'white': #fff,
-  'blue': #0340c7,
   'teal': #29cfc9,
-  'green': #38ab30,
   'lemon': #f5d605,
-  'yellow': #fab600,
   'orange': #f95706,
-  'red': #f20f36,
   'pink': #f09,
   'purple': #5a0ec4,
 ) !default;
@@ -42,18 +45,18 @@ $colors: (
 /// @group colors
 /// @access public
 /// @type map
-/// @author Gert-Jan Meire
 ///
 $tints: (
   1: 10%,
   2: 25%,
   3: 50%,
   -1: .75,
-  -2: .5,
-  -3: .25,
-  -4: .1,
-  -5: .06,
-  -6: .02,
+  -2: .6,
+  -3: .5,
+  -4: .25,
+  -5: .1,
+  -6: .06,
+  -7: .02,
 ) !default;
 
 ///
@@ -64,7 +67,6 @@ $tints: (
 /// @group colors
 /// @access public
 /// @type string
-/// @author Gert-Jan Meire
 ///
 $box-shadow-primary: 0 2px 8px 0;
 $box-shadow-secondary: 0 2px 12px 0;
@@ -75,8 +77,6 @@ $box-shadow-secondary: 0 2px 12px 0;
 /// @since 3.0.0
 /// @group colors
 /// @access public
-/// @author Jeroen Goossens
-/// @require $colors
 ///
 /// @param {color} $base-color
 ///   The key of the color in the $colors map.
@@ -94,7 +94,6 @@ $box-shadow-secondary: 0 2px 12px 0;
 /// @since 3.0.0
 /// @group colors
 /// @access public
-/// @author Gert-Jan Meire
 /// @require $colors
 ///
 /// @param {color} $base-color
@@ -141,7 +140,6 @@ $box-shadow-secondary: 0 2px 12px 0;
 /// @since 3.0.0
 /// @group colors
 /// @access public
-/// @author Gert-Jan Meire
 /// @require $tints
 /// @require $colors
 ///
@@ -168,7 +166,6 @@ $box-shadow-secondary: 0 2px 12px 0;
 /// @since 3.0.0
 /// @group colors
 /// @access public
-/// @author Gert-Jan Meire
 /// @require $tints
 /// @require $colors
 ///
@@ -198,251 +195,92 @@ $box-shadow-secondary: 0 2px 12px 0;
 /// @group colors
 /// @access public
 /// @type map
-/// @author Gert-Jan Meire
 ///
 $themes: (
-  'cyan': (
+  'blue': (
     // Required colors!
-    'color-primary': color('cyan'),
-    'color-secondary': color('white'),
-    'color-tertiary': color('dark-gray'),
+    'color-zero': color('gray'),
+    'color-none': color('white'),
+    'color-primary': color('blue'),
+    'color-secondary': color('yellow'),
+    'color-tertiary': color('cyan'),
     'color-info': color('cyan'),
     'color-success': color('green'),
-    'color-warning': color('orange'),
+    'color-warning': color('orange'), // Deprecated color.
     'color-error': color('red'),
-    'color-box-shadow': $box-shadow-primary color('cyan-wcag', -3),
-    'color-box-shadow-hover': $box-shadow-primary color('cyan-wcag', -2),
-    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
-    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
-    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
-    'accolade-stroke-light': svg-as-background('accolade-stroke', color('cyan-wcag', -4), 1280, 21),
+    'color-box-shadow': $box-shadow-primary color('gray', -4), // @todo Remove shadow.
+    'color-box-shadow-hover': $box-shadow-primary color('gray', -3), // @todo Remove shadow.
+    'color-box-shadow-dark': $box-shadow-primary color('gray', -4), // @todo Remove shadow.
+    'color-box-shadow-dark-hover': $box-shadow-primary color('gray', -3), // @todo Remove shadow.
+    'color-box-shadow-secondary-dark': $box-shadow-secondary color('gray', -4), // @todo Remove shadow.
+
+    'default-text-color': color('gray'),
+
+    'accolade-stroke-light': svg-as-background('accolade-stroke', color('cyan', -5), 1280, 21),
     'accolade-stroke-dark': svg-as-background('accolade-stroke', color('cyan', 1), 1280, 21),
 
     // Exceptions to colors go here...
     // These should be as limited as possible though!
+    'heading-inverse-primary-background-color': color('blue'),
+
     'link-color': color('cyan-wcag', 1),
-    'link-hover-background': color('cyan-wcag', -4),
-    'link-hover-color': color('cyan-wcag', 2),
-    'link-underlined-hover-color': color('cyan-wcag', 2),
+    'link-hover-background': color('cyan', -5),
+    'link-hover-color': color('cyan', 2),
+    'link-underlined-hover-color': color('cyan', 2),
 
-    'focus-outline': color('cyan-wcag'),
+    'focus-outline': color('cyan'),
 
     'breadcrumb-expandable-color': color('cyan'),
-    'breadcrumb-expandable-background-color-hover': color('cyan', -4),
-
-    'button-primary-background': color('cyan-wcag'),
-    'button-primary-border-color': color('cyan-wcag'),
-    'button-primary-hover-background': color('cyan-wcag', 1),
-    'button-primary-hover-border-color': color('cyan-wcag', 1),
-    'button-primary-focus-background': color('cyan-wcag', 3),
-    'button-primary-focus-border-color': color('cyan-wcag', 3),
-
-    'button-secondary-border-color': color('cyan-wcag', -2),
-    'button-secondary-color': color('cyan-wcag'),
-    'button-secondary-hover-color': color('cyan-wcag', 1),
-    'button-secondary-hover-border-color': color('cyan', -1),
-    'button-secondary-focus-color': color('cyan-wcag', 3),
-    'button-secondary-focus-background': color('cyan-wcag', -4),
-    'button-secondary-focus-border-color': color('cyan-wcag', -1),
-
-    'image-gallery-show-more-background-color': color('cyan-wcag', 3),
-
-    'radio-background-color-checked': color('cyan', -5),
+    'breadcrumb-expandable-background-color-hover': color('cyan', -5),
+
+    'button-primary-background': color('gray'),
+    'button-primary-color': color('white'),
+    'button-primary-border-color': color('gray'), // @todo Remove border.
+    'button-primary-hover-background': color('gray', -2),
+    'button-primary-hover-color': color('white'),
+    'button-primary-hover-border-color': color('gray', -2), // @todo Remove border.
+    'button-primary-active-background': color('white'),
+    'button-primary-active-color': color('gray'),
+    'button-primary-active-border-color': color('gray'), // @todo Remove border.
+
+    'button-secondary-background': color('cyan', -3),
+    'button-secondary-border-color': color('cyan', -3), // @todo Remove border.
+    'button-secondary-color': color('gray'),
+    'button-secondary-hover-background': color('cyan-hover'),
+    'button-secondary-hover-color': color('gray'),
+    'button-secondary-hover-border-color': color('cyan-hover'), // @todo Remove border.
+    'button-secondary-active-color': color('gray'),
+    'button-secondary-active-background': color('white'),
+    'button-secondary-active-border-color': color('cyan-hover'), // @todo Remove border.
+
+    'image-gallery-show-more-background-color': color('cyan', 3),
+
+    'radio-background-color-checked': color('cyan', -6),
     'radio-border-color-checked': color('cyan'),
     'radio-checkmark-color': color('cyan'),
 
-    'radio-background-color-hover-and-checked': color('cyan', -3),
+    'radio-background-color-hover-and-checked': color('cyan', -4),
     'radio-border-color-hover-and-checked': color('cyan', 3),
     'radio-color-hover-and-checked': color('cyan', 3),
 
-    'checkbox-background-color-checked': color('cyan', -5),
+    'checkbox-background-color-checked': color('cyan', -6),
     'checkbox-border-color-checked': color('cyan'),
     'checkbox-checkmark-color': color('cyan'),
 
-    'checkbox-background-color-hover-and-checked': color('cyan', -3),
+    'checkbox-background-color-hover-and-checked': color('cyan', -4),
     'checkbox-border-color-hover-and-checked': color('cyan', 3),
     'checkbox-color-hover-and-checked': color('cyan', 3),
 
-    'readspeaker-icon-color': color('cyan-wcag'),
-    'readspeaker-icon-border-color': color('cyan-wcag', -2),
+    'readspeaker-icon-color': color('cyan'),
+    'readspeaker-icon-border-color': color('cyan', -3),
 
-    'tag-border-color-hover': color('cyan-wcag', -2),
-    'tag-close-button-background-hover': color('cyan-wcag', -4),
-    'teaser-label-icon-color': color('cyan-wcag'),
+    'tag-border-color-hover': color('cyan', -3),
+    'tag-close-button-background-hover': color('cyan', -5),
+    'teaser-label-icon-color': color('cyan'),
 
-    'gentinfo-content-shadow': color('cyan-wcag', -5),
+    'gentinfo-content-shadow': color('cyan', -6),
 
-    'tag-border-color': color('cyan-wcag', -2),
-    'tag-span-border-color': color('cyan-wcag', -3),
-  ),
-  'orange': (
-    // Required colors!
-    'color-primary': color('orange'),
-    'color-secondary': color('white'),
-    'color-tertiary': color('dark-gray'),
-    'color-info': color('cyan'),
-    'color-success': color('green'),
-    'color-warning': color('orange'),
-    'color-error': color('red'),
-    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
-    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
-    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
-    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
-    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
-    'accolade-stroke-light': svg-as-background('accolade-stroke', color('orange', -4), 1280, 21),
-    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('orange', 1), 1280, 21),
-
-    // Exceptions to colors go here...
-    // These should be as limited as possible though!
-    'link-color': color('dark-gray'),
-    'link-hover-color': color('dark-gray', 2),
-    'link-underline-color': color('dark-gray', 2),
-
-    'button-primary-background': color('dark-gray'),
-    'button-primary-border-color': color('dark-gray'),
-    'button-primary-hover-background': color('dark-gray', 1),
-    'button-primary-hover-border-color': color('dark-gray', 1),
-    'button-primary-focus-background': color('dark-gray', 3),
-    'button-primary-focus-border-color': color('dark-gray', 3),
-
-    'button-secondary-border-color': color('dark-gray', -2),
-    'button-secondary-color': color('dark-gray'),
-    'button-secondary-hover-color': color('dark-gray', 1),
-    'button-secondary-hover-background': color('dark-gray', -4),
-    'button-secondary-hover-border-color': color('dark-gray', -1),
-    'button-secondary-focus-color': color('dark-gray', 3),
-    'button-secondary-focus-background': color('dark-gray', -4),
-    'button-secondary-focus-border-color': color('dark-gray', -1),
-  ),
-  'blue': (
-    // Required colors!
-    'color-primary': color('blue', 3),
-    'color-secondary': color('white'),
-    'color-tertiary': color('dark-gray'),
-    'color-info': color('cyan'),
-    'color-success': color('green'),
-    'color-warning': color('orange'),
-    'color-error': color('red'),
-    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
-    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
-    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
-    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
-    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
-    'accolade-stroke-light': svg-as-background('accolade-stroke', color('blue', -4), 1280, 21),
-    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('blue', 1), 1280, 21),
-
-    // Exceptions to colors go here...
-    // These should be as limited as possible though!
-    'link-color': color('dark-gray'),
-    'link-hover-color': color('dark-gray', 2),
-    'link-underline-color': color('dark-gray', 2),
-
-    'button-primary-background': color('dark-gray'),
-    'button-primary-border-color': color('dark-gray'),
-    'button-primary-hover-background': color('dark-gray', 1),
-    'button-primary-hover-border-color': color('dark-gray', 1),
-    'button-primary-focus-background': color('dark-gray', 3),
-    'button-primary-focus-border-color': color('dark-gray', 3),
-
-    'button-secondary-border-color': color('dark-gray', -2),
-    'button-secondary-color': color('dark-gray'),
-    'button-secondary-hover-color': color('dark-gray', 1),
-    'button-secondary-hover-background': color('dark-gray', -4),
-    'button-secondary-hover-border-color': color('dark-gray', -1),
-    'button-secondary-focus-color': color('dark-gray', 3),
-    'button-secondary-focus-background': color('dark-gray', -4),
-    'button-secondary-focus-border-color': color('dark-gray', -1),
-  ),
-  'teal': (
-    // Required colors!
-    'color-primary': color('teal'),
-    'color-secondary': color('white'),
-    'color-tertiary': color('dark-gray'),
-    'color-info': color('cyan'),
-    'color-success': color('green'),
-    'color-warning': color('orange'),
-    'color-error': color('red'),
-    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
-    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
-    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
-    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
-    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
-    'accolade-stroke-light': svg-as-background('accolade-stroke', color('teal', -4), 1280, 21),
-    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('teal', 1), 1280, 21),
-
-    // Exceptions to colors go here...
-    // These should be as limited as possible though!
-    'link-color': color('dark-gray'),
-    'link-hover-color': color('dark-gray', 2),
-    'link-underline-color': color('dark-gray', 2),
-
-    'button-primary-background': color('dark-gray'),
-    'button-primary-border-color': color('dark-gray'),
-    'button-primary-hover-background': color('dark-gray', 1),
-    'button-primary-hover-border-color': color('dark-gray', 1),
-    'button-primary-focus-background': color('dark-gray', 3),
-    'button-primary-focus-border-color': color('dark-gray', 3),
-
-    'button-secondary-border-color': color('dark-gray', -2),
-    'button-secondary-color': color('dark-gray'),
-    'button-secondary-hover-color': color('dark-gray', 1),
-    'button-secondary-hover-background': color('dark-gray', -4),
-    'button-secondary-hover-border-color': color('dark-gray', -1),
-    'button-secondary-focus-color': color('dark-gray', 3),
-    'button-secondary-focus-background': color('dark-gray', -4),
-    'button-secondary-focus-border-color': color('dark-gray', -1),
-
-    'heading-1-color': color('dark-gray'),
-    'hero-background-color': color('teal', 2),
-
-    'label-optional-color': color('teal', 3)
-  ),
-  'green': (
-    // Required colors!
-    'color-primary': color('green'),
-    'color-secondary': color('white'),
-    'color-tertiary': color('dark-gray'),
-    'color-info': color('cyan'),
-    'color-success': color('green'),
-    'color-warning': color('orange'),
-    'color-error': color('red'),
-    'color-box-shadow': $box-shadow-primary color('dark-gray', -3),
-    'color-box-shadow-hover': $box-shadow-primary color('dark-gray', -2),
-    'color-box-shadow-dark': $box-shadow-primary color('dark-gray', -3),
-    'color-box-shadow-dark-hover': $box-shadow-primary color('dark-gray', -2),
-    'color-box-shadow-secondary-dark': $box-shadow-secondary color('dark-gray', -3),
-    'accolade-stroke-light': svg-as-background('accolade-stroke', color('green', -4), 1280, 21),
-    'accolade-stroke-dark': svg-as-background('accolade-stroke', color('green', 1), 1280, 21),
-
-    // Exceptions to colors go here...
-    // These should be as limited as possible though!
-    'link-color': color('dark-gray'),
-    'link-hover-color': color('dark-gray', 2),
-    'link-underline-color': color('dark-gray', 2),
-
-    'button-primary-background': color('dark-gray'),
-    'button-primary-border-color': color('dark-gray'),
-    'button-primary-hover-background': color('dark-gray', 1),
-    'button-primary-hover-border-color': color('dark-gray', 1),
-    'button-primary-focus-background': color('dark-gray', 3),
-    'button-primary-focus-border-color': color('dark-gray', 3),
-
-    'button-secondary-border-color': color('dark-gray', -2),
-    'button-secondary-color': color('dark-gray'),
-    'button-secondary-hover-color': color('dark-gray', 1),
-    'button-secondary-hover-background': color('dark-gray', -4),
-    'button-secondary-hover-border-color': color('dark-gray', -1),
-    'button-secondary-focus-color': color('dark-gray', 3),
-    'button-secondary-focus-background': color('dark-gray', -4),
-    'button-secondary-focus-border-color': color('dark-gray', -1),
-
-    'paragraph-type-background-color': color('green', -5),
-    'paragraph-type-color': color('green'),
-    'paragraph-course-background-color': color('green'),
-    'paragraph-course-color': color('white'),
-
-    'heading-1-color': color('dark-gray'),
-    'tag-span-border-color': color('dark-gray', -2),
-    'tag-border-color': color('dark-gray', -2),
+    'tag-border-color': color('cyan', -3),
+    'tag-span-border-color': color('cyan', -4),
   )
 ) !default;

package/build/styleguide/sass/11-base/fonts/_fonts.scss

@@ -5,7 +5,7 @@
 ////
 
 // 03-06-2022 : switching to locally hosted fonts in favor of GDPR - see : https://district09.atlassian.net/browse/DTGB-874
-// @import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600,700&display=swap'); // sass-lint:disable-line no-url-protocols
+// @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700;800&display=swap'); // sass-lint:disable-line no-url-protocols
 
 // fira-sans-regular - latin-ext_latin //
 @font-face {
@@ -52,6 +52,20 @@
   font-display: swap;
 }
 
+// fira-sans-800 - latin-ext_latin //
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: url('#{$styleguide-dir}/googlefonts/fira-sans-v16-latin-ext_latin-800.eot'),
+  local('Fira Sans'),
+  url('#{$styleguide-dir}/googlefonts/fira-sans-v16-latin-ext_latin-800.eot?#iefix') format('embedded-opentype'),
+  url('#{$styleguide-dir}/googlefonts/fira-sans-v16-latin-ext_latin-800.woff2') format('woff2'),
+  url('#{$styleguide-dir}/googlefonts/fira-sans-v16-latin-ext_latin-800.woff') format('woff'),
+  url('#{$styleguide-dir}/googlefonts/fira-sans-v16-latin-ext_latin-800.ttf') format('truetype'),
+  url('#{$styleguide-dir}/googlefonts/fira-sans-v16-latin-ext_latin-800.svg#FiraSans') format('svg');
+  font-display: swap;
+}
 
 // WebfontLoader
 // Bypass the FOUT.

package/build/styleguide/sass/11-base/fonts/_icons.scss

@@ -10,18 +10,18 @@
 $id: random(1000);
 
 @font-face {
-  font-family: "gent-icons-v5";
-  src: url('#{$styleguide-dir}/fonts/gent-icons-v5.eot?v=#{$id}');
-  src: url('#{$styleguide-dir}/fonts/gent-icons-v5.eot?#iefix?v=#{$id}') format('eot'),
-  url('#{$styleguide-dir}/fonts/gent-icons-v5.woff2?v=#{$id}') format('woff2'),
-  url('#{$styleguide-dir}/fonts/gent-icons-v5.woff?v=#{$id}') format('woff'),
-  url('#{$styleguide-dir}/fonts/gent-icons-v5.ttf?v=#{$id}') format('truetype'),
-  url('#{$styleguide-dir}/fonts/gent-icons-v5.svg#gent-icons-v5?v=#{$id}') format('svg');
+  font-family: "gent-icons-v6";
+  src: url('#{$styleguide-dir}/fonts/gent-icons-v6.eot?v=#{$id}');
+  src: url('#{$styleguide-dir}/fonts/gent-icons-v6.eot?#iefix?v=#{$id}') format('eot'),
+  url('#{$styleguide-dir}/fonts/gent-icons-v6.woff2?v=#{$id}') format('woff2'),
+  url('#{$styleguide-dir}/fonts/gent-icons-v6.woff?v=#{$id}') format('woff'),
+  url('#{$styleguide-dir}/fonts/gent-icons-v6.ttf?v=#{$id}') format('truetype'),
+  url('#{$styleguide-dir}/fonts/gent-icons-v6.svg#gent-icons-v6?v=#{$id}') format('svg');
   font-display: swap;
 }
 
 @mixin icon-styles {
-  font-family: "gent-icons-v5";
+  font-family: "gent-icons-v6";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-style: normal;

package/build/styleguide/sass/21-atoms/button/_button.scss

@@ -82,14 +82,12 @@
 @mixin button-disabled {
   [class*='cs--'] & {
     border: 0;
-    background-color: color('dark-gray', -3);
-    color: color('white');
-    box-shadow: none;
+    background-color: color('gray', -5);
+    color: color('gray', -2);
 
     &:hover {
-      background-color: color('dark-gray', -3);
-      color: color('white');
-      box-shadow: none;
+      background-color: color('gray', -5);
+      color: color('gray', -2);
       cursor: not-allowed;
     }
   }
@@ -108,9 +106,8 @@
   @include bold-text;
 
   padding: 0 2.6em;
-  transition: background-color .2s ease-in-out, color .2s ease-in-out, box-shadow .1s ease-in-out;
+  transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
   border: 2px solid;
-  border-radius: border-radius('radius-1');
   font-family: $default-font-family;
   text-align: center;
   cursor: pointer;

package/build/styleguide/sass/21-atoms/button/css/_button-alert.scss

@@ -4,7 +4,6 @@
 /// @since 3.0.0
 /// @access public
 /// @author Gert-Jan Meire
-/// @require $box-shadow-primary
 /// @require color
 ///
 %button-alert,
@@ -14,7 +13,6 @@
   border-color: color('red', 1);
   background-color: color('red', 1);
   color: color('white');
-  box-shadow: $box-shadow-primary color('red', -3);
 
   &:not([class*="icon-"]) {
     @include icon(lightning);
@@ -29,13 +27,11 @@
     border-color: color('red', 2);
     background-color: color('red', 2);
     color: color('white');
-    box-shadow:  $box-shadow-primary color('red', -2);
   }
 
   &:active {
     border-color: color('red', 3);
     background-color: color('red', 3);
     color: color('white');
-    box-shadow: none;
   }
 }

package/build/styleguide/sass/21-atoms/button/css/_button-primary.scss

@@ -3,28 +3,23 @@
 ///
 /// @since 3.0.0
 /// @access public
-/// @author Gert-Jan Meire
 ///
 %button-primary,
 .button-primary {
-  @include theme('background-color', 'color-primary', 'button-primary-background');
+  @include theme('background-color', 'button-primary-background', 'button-primary-background');
   @include theme('color', 'color-secondary', 'button-primary-color');
-  @include theme('box-shadow', 'color-box-shadow', 'button-primary-shadow');
   @include theme('border-color', 'color-primary', 'button-primary-border-color');
 
   &:hover,
   &:focus {
     @include theme('background-color', 'color-primary--darken-1', 'button-primary-hover-background');
     @include theme('color', 'color-secondary', 'button-primary-hover-color');
-    @include theme('box-shadow', 'color-box-shadow-hover', 'button-primary-hover-shadow');
     @include theme('border-color', 'color-primary--darken-1', 'button-primary-hover-border-color');
   }
 
   &:active {
-    @include theme('background-color', 'color-primary--darken-3', 'button-primary-focus-background');
-    @include theme('color', 'color-secondary', 'button-primary-focus-color');
-    @include theme('border-color', 'color-primary--darken-3', 'button-primary-focus-border-color');
-
-    box-shadow: none;
+    @include theme('background-color', 'color-primary--darken-3', 'button-primary-active-background');
+    @include theme('color', 'color-secondary', 'button-primary-active-color');
+    @include theme('border-color', 'color-primary--darken-3', 'button-primary-active-border-color');
   }
 }

package/build/styleguide/sass/21-atoms/button/css/_button-secondary-alert.scss

@@ -4,7 +4,6 @@
 /// @since 3.0.0
 /// @access public
 /// @author Gert-Jan Meire
-/// @require $box-shadow-primary
 /// @require color
 ///
 %button-alert,

package/build/styleguide/sass/21-atoms/button/css/_button-secondary.scss

@@ -19,10 +19,8 @@
   }
 
   &:active {
-    @include theme('background-color', 'color-primary--lighten-3', 'button-secondary-focus-background');
-    @include theme('color', 'color-primary--darken-3', 'button-secondary-focus-color');
-    @include theme('border-color', 'color-primary', 'button-secondary-focus-border-color');
-
-    box-shadow: none;
+    @include theme('background-color', 'color-primary--lighten-3', 'button-secondary-active-background');
+    @include theme('color', 'color-primary--darken-3', 'button-secondary-active-color');
+    @include theme('border-color', 'color-primary', 'button-secondary-active-border-color');
   }
 }

package/build/styleguide/sass/21-atoms/heading/_heading.scss

@@ -15,9 +15,8 @@ h5,
 %h5 {
   @include bold-text;
 
-  margin: 0 0 .8rem;
+  margin: 1.6rem 0;
   font-style: normal;
-  line-height: 1.5;
 
   button {
     display: flex;

package/build/styleguide/sass/21-atoms/heading/css/_background-title.scss

@@ -0,0 +1,21 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  &.bg-primary {
+    span {
+      padding: 0 .75rem;
+      background-color: color('blue');
+      color: color('white');
+    }
+  }
+
+  &.bg-none {
+    span {
+      padding: 0 .75rem;
+      background-color: color('white');
+    }
+  }
+}

package/build/styleguide/sass/21-atoms/heading/css/_heading-1.scss

@@ -1,11 +1,14 @@
 h1,
 .h1,
 %h1 {
-  @include theme('color', 'color-primary', 'heading-1-color');
+  @include theme('color', 'color-zero', 'heading-1-color');
+  @include extra-bold-text();
 
-  font-size: 1.6rem;
+  font-size: 2rem;
+  line-height: 2.6rem;
 
   @include tablet {
-    font-size: 2.1rem;
+    font-size: 2.5rem;
+    line-height: 3.25rem;
   }
 }