generator-white-label 3.0.0 → 5.0.0

package/app/assets/style/toolkit.scss

@@ -0,0 +1,387 @@
+@use "base/colors/colors";
+
+@charset 'UTF-8';
+
+// ## Vendors
+
+// ## toolkit
+@use 'base/toolkit' as *;
+@use 'base/utilities/functions' as *;
+
+.toolkit {
+
+    // styles only for the toolkit guide.
+    &-arial-regular {
+        @extend %arial-regular;
+    }
+
+    &-arial-italic {
+        @extend %arial-italic;
+    }
+
+    &-arial-bold {
+        @extend %arial-bold;
+    }
+
+    &-arial-bold-italic {
+        @extend %arial-bold-italic;
+    }
+
+    &-open-sans-bold {
+        @extend %open-sans-bold;
+    }
+
+    &-open-sans-bold-italic {
+        @extend %open-sans-bold-italic;
+    }
+
+    &-open-sans-extra-bold {
+        @extend %open-sans-extra-bold;
+    }
+
+    &-open-sans-extra-bold-italic {
+        @extend %open-sans-extra-bold-italic;
+    }
+
+    &-open-sans-italic {
+        @extend %open-sans-italic;
+    }
+
+    &-open-sans-light {
+        @extend %open-sans-light;
+    }
+
+    &-open-sans-light-italic {
+        @extend %open-sans-light-italic;
+    }
+
+    &-open-sans-regular {
+        @extend %open-sans-regular;
+    }
+
+    &-open-sans-semi-bold {
+        @extend %open-sans-semi-bold;
+    }
+
+    &-open-sans-semi-bold-italic {
+        @extend %open-sans-semi-bold-italic;
+    }
+
+    &-heading-1,
+    &-heading-2,
+    &-heading-3,
+    &-heading-4 {
+        text-transform: uppercase;
+    }
+
+    &-heading-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);
+        text-align: center;
+
+        @include breakpoint(medium up) {
+            padding: rem-calc(40) 0;
+            position: static;
+        }
+
+    }
+
+    &-heading-2 {
+        font-size: rem-calc(18);
+        margin-bottom: rem-calc(60);
+        text-align: center;
+    }
+
+    &-heading-3 {
+        font-size: rem-calc(16);
+        margin-bottom: rem-calc(20);
+        margin-top: rem-calc(60);
+
+        span {
+            color: colors.$grey-3;
+        }
+
+    }
+
+    &-heading-4 {
+        margin-bottom: rem-calc(20);
+        margin-top: rem-calc(40);
+    }
+
+    &-rule-1 {
+        margin: rem-calc(60) 0;
+    }
+
+    &-header-1 {
+
+        background-color: colors.$black-1;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        z-index: 5;
+
+        @include breakpoint(medium up) {
+            background-color: colors.$white-1;
+            position: static;
+        }
+
+        > button {
+
+            position: absolute;
+
+            &:active,
+            &:focus,
+            &:hover {
+                background-color: colors.$grey-2;
+            }
+
+            @include breakpoint(medium up) {
+                display: none;
+            }
+
+        }
+
+        a {
+            color: colors.$white-1;
+            display: block;
+            font-size: rem-calc(18);
+            font-weight: 700;
+            line-height: rem-calc(52);
+            text-align: center;
+            text-decoration: none;
+            text-transform: uppercase;
+
+            &:hover,
+            &:focus {
+                color: colors.$grey-5;
+            }
+
+            @include breakpoint(medium up) {
+                color: colors.$black-1;
+                font-size: rem-calc(30);
+                line-height: rem-calc(30);
+                margin: rem-calc(52) 0;
+
+                &:hover,
+                &:focus {
+                    color: colors.$grey-2;
+                }
+
+            }
+
+        }
+
+    }
+
+    &-nav-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;
+        text-align: center;
+        width: 100%;
+        z-index: 5;
+
+        @include breakpoint(small only) {
+
+            &.mobile-show-menu {
+                bottom: 0;
+                display: block;
+                left: 0;
+                right: 0;
+                top: rem-calc(50);
+            }
+
+        }
+
+        @include breakpoint(medium up) {
+            display: block;
+            height: rem-calc(47);
+            position: static;
+        }
+
+        a {
+
+            background-color: colors.$black-1;
+            color: colors.$white-1;
+            display: inline-block;
+            line-height: rem-calc(45);
+            padding: 0 rem-calc(15);
+            text-decoration: none;
+            text-transform: uppercase;
+            width: 100%;
+
+            &.selected,
+            &:hover,
+            &:focus {
+                background-color: colors.$white-1;
+                color: colors.$black-1;
+            }
+
+            @include breakpoint(medium up) {
+                font-size: rem-calc(13);
+                margin-left: rem-calc(-3);
+                margin-right: rem-calc(-3);
+                width: auto;
+            }
+
+            @include breakpoint(large up) {
+                font-size: rem-calc(16);
+                width: auto;
+            }
+
+            &[aria-selected='true'] {
+                background-color: colors.$white-1;
+                color: colors.$black-1;
+            }
+
+        }
+
+    }
+
+    &-gherkin-1 {
+        font-style: italic;
+    }
+
+    &-swatch-1 {
+
+        display: block;
+        height: rem-calc(125);
+
+        &.black-1 {
+            background-color: colors.$black-1;
+        }
+
+        &.grey-1 {
+            background-color: colors.$grey-1;
+        }
+
+        &.grey-2 {
+            background-color: colors.$grey-2;
+        }
+
+        &.grey-3 {
+            background-color: colors.$grey-3;
+        }
+
+        &.grey-4 {
+            background-color: colors.$grey-4;
+        }
+
+        &.grey-5 {
+            background-color: colors.$grey-5;
+        }
+
+        &.grey-6 {
+            background-color: colors.$grey-6;
+        }
+
+        &.white-1 {
+            background-color: colors.$white-1;
+        }
+
+        &.red-1 {
+            background-color: colors.$red-1;
+        }
+
+    }
+
+    &-grid-1 {
+
+        overflow: auto;
+
+        .row {
+            background-color: colors.$grey-6;
+        }
+
+        [class*='col-'] {
+            border: rem-calc(2) colors.$black-1 solid;
+            padding: rem-calc(10);
+        }
+
+    }
+
+    &-text-1 {
+        @extend %text-1;
+    }
+
+    &-open-sans-1 {
+        @extend %text-1;
+    }
+
+    &-panels-1 {
+
+        > .panel {
+
+            @extend %heading-1;
+
+            > .panel-content {
+
+                color: colors.$white-1;
+                padding-top: 50vh;
+                text-align: center;
+                text-transform: uppercase;
+
+            }
+
+            &.panel-1 {
+
+                > .panel-content {
+                    background-image: url('../image/demo/panel-1.jpg');
+                }
+
+            }
+
+            &.panel-2 {
+
+                > .panel-content {
+                    background-image: url('../image/demo/panel-2.jpg');
+                }
+
+            }
+
+            &.panel-3 {
+
+                > .panel-content {
+                    background-image: url('../image/demo/panel-3.jpg');
+                }
+
+            }
+
+            &.panel-4 {
+
+                > .panel-content {
+                    background-image: url('../image/demo/panel-4.jpg');
+                }
+
+            }
+
+            &.panel-5 {
+
+                > .panel-content {
+                    background-image: url('../image/demo/panel-5.jpg');
+                }
+
+            }
+
+            &.panel-6 {
+
+                > .panel-content {
+                    background-image: url('../image/demo/panel-6.jpg');
+                }
+
+            }
+
+        }
+
+    }
+
+}

package/app/index.hbs

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html id="index" lang="en-US" dir="ltr">
+    {{> element/head}}
+    <body itemscope itemtype="http://schema.org/WebPage">
+        <div id="wrapper">
+            <main id="main" tabindex="-1" class="container">
+                <h1 class="heading-1">Welcome</h1>
+                <p>Build your site here.</p>
+            </main>
+        </div>
+        {{#if scripts.global}}
+        {{> element/script script=scripts.global}}
+        {{/if}}
+        {{#if scripts.section}}
+        {{> element/script script=scripts.section}}
+        {{/if}}
+        {{#if scripts.page}}
+        {{> element/script script=scripts.page}}
+        {{/if}}
+    </body>
+</html>

package/app/package.json

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

package/app/toolkit/colors.hbs

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html id="toolkit-colors" lang="en-US" dir="ltr">
+    {{> element/head section='toolkit'}}
+    <body itemscope itemtype="http://schema.org/WebPage">
+
+        <div id="wrapper">
+
+            {{>toolkit/accessibility-skip-to-element-1 id='skip-to-content' url='#main' title='skip to content'}}
+
+            <header class="toolkit-header-1">
+                <button aria-expanded="false">main menu toggle</button>
+                <div class="row">
+                    <div class="col-12">
+                        <a href="{{www}}toolkit">Digital Toolkit</a>
+                    </div>
+                </div>
+            </header>
+
+            <div class="sticky-1">
+                <div class="sticky-1-wrapper">
+                    <nav class="toolkit-nav-1" tabindex="-1">
+                        <a href="{{www}}toolkit">Home</a>
+                        <a href="{{www}}toolkit/grids.html">Grids</a>
+                        <a class="selected" href="{{www}}toolkit/colors.html">Colors</a>
+                        <a href="{{www}}toolkit/type.html">Type</a>
+                        <a href="{{www}}toolkit/icons.html">Icons</a>
+                        <a href="{{www}}toolkit/elements.html">Elements</a>
+                        <a href="{{www}}toolkit/components.html">Components</a>
+                    </nav>
+                </div>
+            </div>
+
+            <main id="main" tabindex="-1">
+                <section>
+                    <h1 class="toolkit-heading-1">Colors</h1>
+                    <div class="row">
+                        <div class="col-12 col-md-4 col-lg-2">
+                            <h2 class="toolkit-heading-3">black-1</h2>
+                            <p><span class="toolkit-swatch-1 black-1"></span></p>
+                        </div>
+                        <div class="col-12 col-md-4 col-lg-2">
+                            <h2 class="toolkit-heading-3">grey-1</h2>
+                            <p><span class="toolkit-swatch-1 grey-1"></span></p>
+                        </div>
+                        <div class="col-12 col-md-4 col-lg-2">
+                            <h2 class="toolkit-heading-3">grey-2</h2>
+                            <p><span class="toolkit-swatch-1 grey-2"></span></p>
+                        </div>
+                        <div class="col-12 col-md-4 col-lg-2">
+                            <h2 class="toolkit-heading-3">grey-3</h2>
+                            <p><span class="toolkit-swatch-1 grey-3"></span></p>
+                        </div>
+                        <div class="col-12 col-md-4 col-lg-2">
+                            <h2 class="toolkit-heading-3">grey-4</h2>
+                            <p><span class="toolkit-swatch-1 grey-4"></span></p>
+                        </div>
+                        <div class="col-12 col-md-4 col-lg-2">
+                            <h2 class="toolkit-heading-3">grey-5</h2>
+                            <p><span class="toolkit-swatch-1 grey-5"></span></p>
+                        </div>
+                        <div class="col-12 col-md-4 col-lg-2">
+                            <h2 class="toolkit-heading-3">grey-6</h2>
+                            <p><span class="toolkit-swatch-1 grey-6"></span></p>
+                        </div>
+                        <div class="col-12 col-md-4 col-lg-2">
+                            <h2 class="toolkit-heading-3">white-1</h2>
+                            <p><span class="toolkit-swatch-1 white-1"></span></p>
+                        </div>
+                        <div class="col-12 col-md-4 col-lg-2">
+                            <h2 class="toolkit-heading-3">red-1</h2>
+                            <p><span class="toolkit-swatch-1 red-1"></span></p>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <h3 class="toolkit-heading-4">Source Code</h3>
+                            <ul class="list-1">
+                                <li>style: <a href="{{webRepo}}app/assets/style/base/colors/_colors.scss">_colors.scss</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </section>
+            </main>
+
+            <hr class="toolkit-rule-1">
+
+            {{>toolkit/footer-1}}
+
+        </div>
+
+        {{#if scripts.global}}
+        {{> element/script script=scripts.global}}
+        {{/if}}
+        {{#if scripts.section}}
+        {{> element/script script=scripts.section}}
+        {{/if}}
+        {{#if scripts.page}}
+        {{> element/script script=scripts.page}}
+        {{/if}}
+
+    </body>
+</html>