feat: install/integrate sparkle

Author: colbyallenc

package-lock.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",

package.json

@@ -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/_import-sparkle-settings.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/base.scss

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

src/scss/components/_expandable-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/components/_skip-to-content.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