feat: install/integrate sparkle

package.json

@@ -38,6 +38,7 @@
   ],
   "dependencies": {
     "@babel/polyfill": "^7.4.0",
+    "@sparkbox/sparkle": "^0.2.0",
     "autoprefixer": "^9.4.2",
     "babel-loader": "^8.0.4",
     "core-js": "^3.1.3",

src/scss/_import-sparkle-settings.scss

@@ -0,0 +1,18 @@
+$settings: map-merge(
+    $settings, 
+    (
+    'prefix': 'utility',
+    'loop-mq': true,
+    'print-classes': true,
+    'utility-background-color': true,
+    'utility-border-color': true,
+    'utility-foreground-color': true,
+    'utility-outline-color': true,
+    'utility-text-decoration-color': true,
+    'utility-z-index': true,
+    'utility-display': true,
+    'utility-position': true,
+    'utility-text-align': true,
+    'utility-visually-hidden': true
+    )
+);

src/scss/base.scss

@@ -17,6 +17,7 @@
 // 7. Vendors
 // 8. Utilities
 
+
 // =====================================================================
 // 1. Settings
 //    When using a preprocessor, settings are used to define variable.
@@ -28,20 +29,19 @@
 //    to write comments describing the colors and font stacks as a guide.
 //    If using features such as custom properties, those that are global
 //    custom properties should be described in this section.
+@import "../../node_modules/@sparkbox/sparkle/settings";
+@import 'import-sparkle-settings';
 @import "settings/variables";
 @import "settings/colors";
 @import "settings/fonts";
-@import "settings/z-index";
-
-
 // =====================================================================
 // 2. Tools
 //    This section is specifically for preprocessor global mixins and
 //    functions. No CSS should be generated by the preprocessor from
 //    partials in this section.
-@import "tools/functions";
-@import "tools/mixins";
 
+@import "../../node_modules/@sparkbox/sparkle/tools";
+@import "tools/mixins";
 
 // =====================================================================
 // 3. Generic
@@ -53,7 +53,6 @@
 @import "generic/keyframes";
 @import "generic/safe-focus";
 
-
 // =====================================================================
 // 4. Elements
 //    Styling for bare HTML elements (like H1, A, etc.). These come with
@@ -72,7 +71,7 @@
 // 5. Objects
 //    Class-based selectors which define undecorated design patterns,
 //    for example media object known from OOCSS.
-@import "object/grid";
+
 @import "object/width-limiter";
 
 
@@ -101,6 +100,4 @@
 // 8. Utilities
 //    Utilities and helper classes with ability to override anything
 //    which goes before in the triangle, eg. hide helper class
-@import "utilities/display";
-@import "utilities/spacing";
-@import "utilities/text";
+@import "../../node_modules/@sparkbox/sparkle/utilities";

src/scss/components/_expandable-content.scss

@@ -2,7 +2,7 @@
   &__button {
     position: relative;
 
-    z-index: $z-index-expandable-content-button;
+    z-index: z-index(1);
   }
 
   &__content {

src/scss/components/_skip-to-content.scss

@@ -2,7 +2,7 @@
   position: absolute;
   top: 1rem;
   left: -100%;
-  z-index: $z-index-skip-to-link;
+  z-index: z-index(10);
 
   &:focus {
     left: 1rem;

src/scss/settings/_variables.scss

@@ -3,45 +3,13 @@
 //
 $font-stack-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
 
-//
-// BREAKPOINTS
-//
-$bp-sm: 30rem;
-$bp-md: 50rem;
-$bp-lg: 60rem;
-$bp-xl: 80rem;
-
-$grid-breakpoints: (
-  sm: $bp-sm,
-  md: $bp-md,
-  lg: $bp-lg,
-  xl: $bp-xl
-);
-
 //
 // LENGTHS
 //
 $page-margin: 1.75rem;
 
 $max-page-width: 53rem;
 
-//
-// SPACING
-//
-$spacer: 1rem;
-$spacers: () !default;
-$spacers: map-merge(
-  (
-    none: 0,
-    xs: $spacer * 0.25,
-    sm: $spacer * 0.5,
-    md: $spacer,
-    lg: $spacer * 1.5,
-    xl: $spacer * 3,
-    xxl: $spacer * 5,
-  ),
-  $spacers
-);
 
 //
 // LINE HEIGHTS

src/scss/tools/_mixins.scss

@@ -1,38 +1,3 @@
-@mixin clearfix {
-  &::after {
-    clear: both;
-    content: '';
-    display: table;
-  }
-}
-
-@mixin unbuttonize {
-  // This removes styles added by default to button elements.
-  // For when something should semantically be a button,
-  // but isn't buttony in appearance.
-  background-color: transparent;
-  color: inherit;
-  border: none;
-  margin: 0;
-  padding: 0;
-  text-align: inherit;
-  font: inherit;
-  border-radius: 0;
-  appearance: none; // Just in case we missed anything.
-}
-
-// Auto-generates media queries for looping content
-@mixin loop-mq {
-  @content;
-  @each $key, $val in $grid-breakpoints {
-    @media (min-width: #{$val}) {
-      &\@#{$key} {
-        @content;
-      }
-    }
-  }
-}
-
 @mixin default-paragraph {
   margin: 0 0 space(lg);
 
@@ -177,25 +142,6 @@
   margin: 0 0 space(md);
 }
 
-@mixin visually-hidden($status:null) {
-  position: absolute !important;
-  clip: rect(1px 1px 1px 1px); // IE6, IE7
-  clip: rect(1px, 1px, 1px, 1px);
-  padding: 0 !important;
-  border: 0 !important;
-  height: 1px !important;
-  width: 1px !important;
-  overflow: hidden;
-
-  @if $status == 'disable' {
-    position: static !important;
-    clip: auto !important;
-    height: auto !important;
-    width: auto !important;
-    overflow: visible;
-  }
-}
-
 @mixin focus-styles {
   // Disable native outline since we're drawing our own via box-shadow
   outline: none;
@@ -209,4 +155,4 @@
       0 0 0 2px $c-safe-focus,
       0 0 0 4px white !important;
   }
-}
+}