generator-white-label 3.2.0 → 5.0.0

package/app/assets/style/base/components/_tabpanel-1.scss

@@ -1,3 +1,8 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use 'tabpanel-base-1' as *;
+@use '../type/text' as *;
+
 // ## tabpanel-1
 
 %tabpanel-1 {
@@ -18,12 +23,12 @@
 
             @extend %text-1;
 
-            background-color: $white-1;
-            border-bottom: rem-calc(1) solid $white-1;
-            border-left: rem-calc(1) solid $black-1;
-            border-right: rem-calc(1) solid $black-1;
-            border-top: rem-calc(1) solid $black-1;
-            color: $black-1;
+            background-color: colors.$white-1;
+            border-bottom: rem-calc(1) solid colors.$white-1;
+            border-left: rem-calc(1) solid colors.$black-1;
+            border-right: rem-calc(1) solid colors.$black-1;
+            border-top: rem-calc(1) solid colors.$black-1;
+            color: colors.$black-1;
             display: block;
             float: left;
             list-style: none;
@@ -32,9 +37,9 @@
             text-decoration: none;
 
             &[aria-selected='false'] {
-                background-color: $black-1;
-                border-bottom-color: $black-1;
-                color: $white-1;
+                background-color: colors.$black-1;
+                border-bottom-color: colors.$black-1;
+                color: colors.$white-1;
             }
 
         }
@@ -42,7 +47,7 @@
     }
 
     > [role='tabpanel'] {
-        border: rem-calc(1) solid $black-1;
+        border: rem-calc(1) solid colors.$black-1;
         margin-top: rem-calc(-1);
         padding: rem-calc(10);
     }
@@ -62,7 +67,7 @@
 
         @include clearfix;
 
-        border: rem-calc(1) solid $black-1;
+        border: rem-calc(1) solid colors.$black-1;
         margin: 0;
         padding: 0;
 
@@ -70,9 +75,9 @@
 
             @extend %text-1;
 
-            background-color: $grey-5;
-            border-bottom: rem-calc(1) solid $black-1;
-            color: $black-1;
+            background-color: colors.$grey-5;
+            border-bottom: rem-calc(1) solid colors.$black-1;
+            color: colors.$black-1;
             display: block;
             list-style: none;
             margin: 0 rem-calc(1) 0 0;
@@ -81,9 +86,9 @@
             width: 100%;
 
             &[aria-selected='false'] {
-                background-color: $black-1;
+                background-color: colors.$black-1;
                 border: 0;
-                color: $white-1;
+                color: colors.$white-1;
             }
 
         }

package/app/assets/style/base/components/_tabpanel-2.scss

@@ -1,3 +1,8 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use 'tabpanel-base-1' as *;
+@use '../type/text' as *;
+
 // ## tabpanel-2
 
 %tabpanel-2 {
@@ -11,7 +16,7 @@
 
         @include clearfix;
 
-        border: rem-calc(1) solid $black-1;
+        border: rem-calc(1) solid colors.$black-1;
         margin: 0;
         padding: 0;
 
@@ -19,9 +24,9 @@
 
             @extend %text-1;
 
-            background-color: $grey-5;
-            border-bottom: rem-calc(1) solid $black-1;
-            color: $black-1;
+            background-color: colors.$grey-5;
+            border-bottom: rem-calc(1) solid colors.$black-1;
+            color: colors.$black-1;
             display: block;
             list-style: none;
             margin: 0 rem-calc(1) 0 0;
@@ -30,9 +35,9 @@
             width: 100%;
 
             &[aria-selected='false'] {
-                background-color: $black-1;
+                background-color: colors.$black-1;
                 border: 0;
-                color: $white-1;
+                color: colors.$white-1;
             }
 
         }

package/app/assets/style/base/components/_youtube-player-1.scss

@@ -1,9 +1,10 @@
+@use '../utilities/functions' as *;
+
 // ### youtube-video-1
 
 %youtube-player-1 {
 
-    //include from foundation
-    //http://foundation.zurb.com/sites/docs/flex-video.html
+    // Keep embedded videos responsive without depending on framework Sass mixins.
     @include responsive-embed;
 
     margin: 0;

package/app/assets/style/base/elements/_anchors.scss

@@ -1,3 +1,5 @@
+@use '../type/text' as *;
+
 %anchor-base-1 {
 
     @extend %text-1;

package/app/assets/style/base/elements/_buttons.scss

@@ -1,3 +1,7 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use '../type/text' as *;
+
 %button-base-1 {
 
     @extend %text-1;
@@ -13,9 +17,9 @@
 
     @extend %button-base-1;
 
-    background-color: $black-1;
-    border: rem-calc(1) solid $black-1;
-    color: $white-1;
+    background-color: colors.$black-1;
+    border: rem-calc(1) solid colors.$black-1;
+    color: colors.$white-1;
     padding: 0 rem-calc(13.5);
 
 }

package/app/assets/style/base/elements/_fieldsets.scss

@@ -1,3 +1,5 @@
+@use '../type/text' as *;
+
 %fieldset-1 {
 
     @extend %text-1;

package/app/assets/style/base/elements/_inputs.scss

@@ -1,3 +1,7 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use '../type/text' as *;
+
 %input-base-1 {
 
     @extend %text-1;
@@ -19,8 +23,8 @@
 
     @extend %input-base-1;
 
-    background-color: $red-1;
-    color: $white-1;
+    background-color: colors.$red-1;
+    color: colors.$white-1;
     font-weight: 700;
     margin-top: rem-calc(5);
     padding: rem-calc(10);

package/app/assets/style/base/elements/_labels.scss

@@ -1,3 +1,5 @@
+@use '../type/text' as *;
+
 %label-base-1 {
 
     @extend %text-1;

package/app/assets/style/base/elements/_legends.scss

@@ -1,3 +1,5 @@
+@use '../type/headings' as *;
+
 // ## labels
 
 %legend-1 {

package/app/assets/style/base/elements/_lists.scss

@@ -1,3 +1,5 @@
+@use '../type/text' as *;
+
 %list-base-1 {
 
     @extend %text-1;

package/app/assets/style/base/elements/_tables.scss

@@ -1,3 +1,7 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use '../type/text' as *;
+
 %table-base-1 {
 
     @extend %text-1;
@@ -13,22 +17,22 @@
 
     @extend %table-base-1;
 
-    border: rem-calc(1) solid $black-1;
+    border: rem-calc(1) solid colors.$black-1;
     width: 80%;
 
     thead {
-        background-color: $black-1;
-        color: $white-1;
+        background-color: colors.$black-1;
+        color: colors.$white-1;
     }
 
     tfoot {
-        background-color: $grey-5;
-        color: $black-1;
+        background-color: colors.$grey-5;
+        color: colors.$black-1;
     }
 
     td,
     th {
-        border: rem-calc(1) solid $black-1;
+        border: rem-calc(1) solid colors.$black-1;
         padding: rem-calc(10);
     }
 

package/app/assets/style/base/layouts/_staggered-1.scss

@@ -1,3 +1,6 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+
 %staggered-1 {
 
     > div {
@@ -6,7 +9,7 @@
         column-gap: 0;
 
         > div {
-            border: rem-calc(2) solid $black-1;
+            border: rem-calc(2) solid colors.$black-1;
             break-inside: avoid;
             display: inline-block;
             padding: rem-calc(10);

package/app/assets/style/base/type/_fonts.scss

@@ -1,5 +1,8 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+
 %font-base-1 {
-    color: $black-1;
+    color: colors.$black-1;
     font-size: rem-calc(16);
     // sass-lint:disable no-misspelled-properties
     font-smoothing: antialiased;

package/app/assets/style/base/type/_headings.scss

@@ -1,3 +1,6 @@
+@use '../utilities/functions' as *;
+@use 'fonts' as *;
+
 %heading-base-1 {
 
     @extend %open-sans-bold;

package/app/assets/style/base/type/_text.scss

@@ -1,3 +1,5 @@
+@use 'fonts' as *;
+
 %text-base-1 {
     @extend %open-sans-regular;
 }

package/app/assets/style/base/utilities/_accessibility.scss

@@ -1,3 +1,6 @@
+@use "../colors/colors";
+@use 'functions' as *;
+
 // ## accessibility hidden text
 // hide text off screen for sighted users and leave accessible for screen readers
 
@@ -38,8 +41,8 @@
 
     @extend %accessibility-focus-1;
 
-    background-color: $white-1;
-    color: $black-1;
+    background-color: colors.$white-1;
+    color: colors.$black-1;
     display: block;
     padding: rem-calc(10);
     text-align: center;

package/app/assets/style/base/utilities/_functions.scss

@@ -1,31 +1,84 @@
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
 /// Remove the unit of a length
 /// @param {Number} $number - Number to remove unit from
 /// @return {Number} - Unitless number
 
 $rem-base: 16px;
+$responsive-embed-margin-bottom: 1rem;
+
+/// Contain floated children.
+@mixin clearfix {
+    &::before,
+    &::after {
+        content: ' ';
+        display: table;
+        flex-basis: 0;
+        order: 1;
+    }
+
+    &::after {
+        clear: both;
+    }
+}
+
+/// Create a responsive 4:3 media container.
+@mixin responsive-embed {
+    height: 0;
+    margin-bottom: $responsive-embed-margin-bottom;
+    overflow: hidden;
+    padding-bottom: 75%;
+    position: relative;
+
+    iframe,
+    object,
+    embed,
+    video {
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+}
+
+/// Apply content at the Bootstrap breakpoints used by the project templates.
+/// @param {String} $query - Supported query: small only, medium up, or large up
+@mixin breakpoint($query) {
+    @if $query == (small only) {
+        @media print, screen and (max-width: 47.99875em) { @content; }
+    } @else if $query == (medium up) {
+        @media print, screen and (min-width: 48em) { @content; }
+    } @else if $query == (large up) {
+        @media print, screen and (min-width: 62em) { @content; }
+    } @else {
+        @error 'Unsupported breakpoint: #{$query}';
+    }
+}
 
 @function strip-unit($number) {
-    @if type-of($number) == 'number' and not unitless($number) {
-        @return $number / ($number * 0 + 1);
+    @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
+        @return math.div($number, $number * 0 + 1);
     }
 
     @return $number;
 }
 
 @function convert-to-rem($value, $base-value: $rem-base) {
-    $value: strip-unit($value) / strip-unit($base-value) * 1rem;
+    $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
     //@if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
     @return $value;
 }
 
 @function rem-calc($values, $base-value: $rem-base) {
-    $max: length($values);
+    $max: list.length($values);
 
-    @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
+    @if $max == 1 { @return convert-to-rem(list.nth($values, 1), $base-value); }
 
     $rem-values: ();
     @for $i from 1 through $max {
-        $rem-values: append($rem-values, convert-to-rem(nth($values, $i), $base-value));
+        $rem-values: list.append($rem-values, convert-to-rem(list.nth($values, $i), $base-value));
     }
     @return $rem-values;
 }
@@ -33,13 +86,13 @@ $rem-base: 16px;
 @function em-calc($values) {
     $rem-values: rem-calc($values);
 
-    $max: length($rem-values);
+    $max: list.length($rem-values);
 
-    @if $max == 1 { @return strip-unit(nth($rem-values, 1)) * 1em; }
+    @if $max == 1 { @return strip-unit(list.nth($rem-values, 1)) * 1em; }
 
     $em-values: ();
     @for $i from 1 through $max {
-        $em-values: append($em-values, strip-unit(nth($rem-values, $i)) * 1em);
+        $em-values: list.append($em-values, strip-unit(list.nth($rem-values, $i)) * 1em);
     }
     @return $em-values;
 }

package/app/assets/style/global.scss

@@ -1,19 +1,12 @@
 @charset 'UTF-8';
 
+// ## toolkit
+@use 'base/toolkit' as *;
+
 // ## Vendors
 
-// ## foundation
-$grid-row-width: 100%;
-$breakpoint-classes: (small medium large xlarge);
-@import '../../../node_modules/foundation-sites/scss/foundation';
-@include foundation-global-styles;
-@include foundation-flex-grid;
-@include foundation-xy-grid-classes;
 // ## Define Fonts
-@import '../font/opensans/stylesheet';
-
-// ## toolkit
-@import 'base/toolkit';
+@import '../font/opensans/stylesheet.css';
 
 //STYLES
 

package/app/assets/style/print.scss

@@ -2,8 +2,5 @@
 
 // ## Vendors
 
-// ## foundation
-@import '../../../node_modules/foundation-sites/scss/foundation';
-
 // ## toolkit
-@import 'base/toolkit';
+@use 'base/toolkit' as *;

package/app/assets/style/toolkit.scss

@@ -1,12 +1,12 @@
+@use "base/colors/colors";
+
 @charset 'UTF-8';
 
 // ## Vendors
 
-// ## foundation
-@import '../../../node_modules/foundation-sites/scss/foundation';
-
 // ## toolkit
-@import 'base/toolkit';
+@use 'base/toolkit' as *;
+@use 'base/utilities/functions' as *;
 
 .toolkit {
 
@@ -76,8 +76,8 @@
 
     &-heading-1 {
 
-        background-color: $grey-2;
-        color: $white-1;
+        background-color: colors.$grey-2;
+        color: colors.$white-1;
         font-size: rem-calc(22);
         margin: 0 0 rem-calc(60);
         padding: rem-calc(87) 0 rem-calc(40);
@@ -102,7 +102,7 @@
         margin-top: rem-calc(60);
 
         span {
-            color: $grey-3;
+            color: colors.$grey-3;
         }
 
     }
@@ -118,14 +118,14 @@
 
     &-header-1 {
 
-        background-color: $black-1;
+        background-color: colors.$black-1;
         position: fixed;
         top: 0;
         width: 100%;
         z-index: 5;
 
         @include breakpoint(medium up) {
-            background-color: $white-1;
+            background-color: colors.$white-1;
             position: static;
         }
 
@@ -136,7 +136,7 @@
             &:active,
             &:focus,
             &:hover {
-                background-color: $grey-2;
+                background-color: colors.$grey-2;
             }
 
             @include breakpoint(medium up) {
@@ -146,7 +146,7 @@
         }
 
         a {
-            color: $white-1;
+            color: colors.$white-1;
             display: block;
             font-size: rem-calc(18);
             font-weight: 700;
@@ -157,18 +157,18 @@
 
             &:hover,
             &:focus {
-                color: $grey-5;
+                color: colors.$grey-5;
             }
 
             @include breakpoint(medium up) {
-                color: $black-1;
+                color: colors.$black-1;
                 font-size: rem-calc(30);
                 line-height: rem-calc(30);
                 margin: rem-calc(52) 0;
 
                 &:hover,
                 &:focus {
-                    color: $grey-2;
+                    color: colors.$grey-2;
                 }
 
             }
@@ -179,10 +179,10 @@
 
     &-nav-1 {
 
-        background-color: $black-1;
-        border-bottom: rem-calc(1) solid $black-1;
-        border-top: rem-calc(1) solid $black-1;
-        color: $white-1;
+        background-color: colors.$black-1;
+        border-bottom: rem-calc(1) solid colors.$black-1;
+        border-top: rem-calc(1) solid colors.$black-1;
+        color: colors.$white-1;
         display: none;
         height: 100%;
         position: fixed;
@@ -210,8 +210,8 @@
 
         a {
 
-            background-color: $black-1;
-            color: $white-1;
+            background-color: colors.$black-1;
+            color: colors.$white-1;
             display: inline-block;
             line-height: rem-calc(45);
             padding: 0 rem-calc(15);
@@ -222,8 +222,8 @@
             &.selected,
             &:hover,
             &:focus {
-                background-color: $white-1;
-                color: $black-1;
+                background-color: colors.$white-1;
+                color: colors.$black-1;
             }
 
             @include breakpoint(medium up) {
@@ -239,8 +239,8 @@
             }
 
             &[aria-selected='true'] {
-                background-color: $white-1;
-                color: $black-1;
+                background-color: colors.$white-1;
+                color: colors.$black-1;
             }
 
         }
@@ -257,39 +257,39 @@
         height: rem-calc(125);
 
         &.black-1 {
-            background-color: $black-1;
+            background-color: colors.$black-1;
         }
 
         &.grey-1 {
-            background-color: $grey-1;
+            background-color: colors.$grey-1;
         }
 
         &.grey-2 {
-            background-color: $grey-2;
+            background-color: colors.$grey-2;
         }
 
         &.grey-3 {
-            background-color: $grey-3;
+            background-color: colors.$grey-3;
         }
 
         &.grey-4 {
-            background-color: $grey-4;
+            background-color: colors.$grey-4;
         }
 
         &.grey-5 {
-            background-color: $grey-5;
+            background-color: colors.$grey-5;
         }
 
         &.grey-6 {
-            background-color: $grey-6;
+            background-color: colors.$grey-6;
         }
 
         &.white-1 {
-            background-color: $white-1;
+            background-color: colors.$white-1;
         }
 
         &.red-1 {
-            background-color: $red-1;
+            background-color: colors.$red-1;
         }
 
     }
@@ -299,11 +299,11 @@
         overflow: auto;
 
         .row {
-            background-color: $grey-6;
+            background-color: colors.$grey-6;
         }
 
-        .columns {
-            border: rem-calc(2) $black-1 solid;
+        [class*='col-'] {
+            border: rem-calc(2) colors.$black-1 solid;
             padding: rem-calc(10);
         }
 
@@ -325,7 +325,7 @@
 
             > .panel-content {
 
-                color: $white-1;
+                color: colors.$white-1;
                 padding-top: 50vh;
                 text-align: center;
                 text-transform: uppercase;

package/app/package.json

@@ -0,0 +1 @@
+{"private":true,"type":"module"}