nk_jtb 0.9.8 → 0.9.10

package/index.html

@@ -12,6 +12,39 @@
 
 <body">
     <div class="quick-hide-div zebra">
+        <section id="typography" class="py-3">
+            <div class="container">
+                <h2 class="title mb-3">Typography</h2>
+                <div class="grid-3 cols-2">
+                    <div id="headings">
+                        <h1>Heading 1</h1>
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
+                        <h2>Heading 2</h2>
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
+                        <h3>Heading 3</h3>
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
+                        <h4>Heading 4</h4>
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
+                        <h5>Heading 5</h5>
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
+                        <h6>Heading 6</h6>
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
+                    </div>
+                    <div>
+                        <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
+
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum ipsam!</p>
+
+                        <h3 class="title">Text Sizes</h3>
+                        <p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
+                        <p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
+                        <p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
+                        <p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
+                        <p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
+                    </div>
+                </div>
+            </div>
+        </section>
         <section id="form-controls" class="py-3">
             <div class="container grid cols-2">
                 <div id="radio-check-toggle">
@@ -80,7 +113,7 @@
                 </div>
             </div>
         </section>
-        <section id="box" class="py-3">
+        <section id="notifications" class="py-3">
             <div class="container">
                 <div class="grid cols-3">
                     <div class="bx pxy-1 flex va-c">
@@ -97,7 +130,7 @@
                 </div>
             </div>
         </section>
-        <section id="box" class="py-3">
+        <section id="alignment-techniques" class="py-3">
             <div class="container">
                 <h2>Alignment Techniques</h2>
                 <div class="grid cols-3">
@@ -424,36 +457,7 @@
         </div>
 
         <div class="quick-hide-wrapper zebra c-py-5-3-2">
-            <section id="typography">
-                <div class="container maxw-md">
-                    <h2 class="title txt-3">Typography</h2>
-
-                    <h1>Heading 1</h1>
-                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
-                    <h2>Heading 2</h2>
-                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
-                    <h3>Heading 3</h3>
-                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
-                    <h4>Heading 4</h4>
-                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
-                    <h5>Heading 5</h5>
-                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
-                    <h6>Heading 6</h6>
-                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae aperiam quas totam laboriosam soluta harum beatae qui reiciendis possimus molestiae?</p>
-
-                    <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sed aperiam quibusdam adipisci sequi deserunt nesciunt vel illum voluptatibus maxime soluta repudiandae numquam sapiente exercitationem, culpa, omnis expedita tempore? Similique.</p>
 
-                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at corporis deserunt sint eum laboriosam quae nulla fugit, error, tempore quibusdam temporibus fuga adipisci. Nam architecto sunt cupiditate soluta molestias ipsum delectus numquam illo magnam! Praesentium quos deserunt sed, maxime, eligendi quasi, sequi fugiat facere neque harum debitis laborum ipsam!</p>
-
-                    <h3 class="title">Text Sizes</h3>
-                    <p class="txt-xs">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
-                    <p class="txt-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
-                    <p class="txt-base">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
-                    <p class="txt-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
-                    <p class="txt-xl">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto delectus asperiores commodi incidunt facilis nisi adipisci magni assumenda ullam exercitationem id similique dolore at reiciendis impedit suscipit, soluta ratione nam deleniti non magnam et repudiandae, aliquam fugit? Eum, expedita officia!</p>
-
-                </div>
-            </section>
             <section id="menu">
                 <div class="container">
                     <h2 class="title txt-3">Menu Component</h2>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "nk_jtb",
     "description": "Yet another utility based framework.",
-    "version": "0.9.8",
+    "version": "0.9.10",
     "repository": {
         "type": "git",
         "url": "https://github.com/naykel76/nk_jtb.git"

package/src/_nk.scss

@@ -41,7 +41,7 @@ body {
 // -- MARKDOWN --
 // ==========================================================================
 
-h2 code{
+h2 code {
     font-size: 0.9em;
 }
 
@@ -158,3 +158,21 @@ code-first-second-col {
     //     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20px' height='12px' viewBox='0 0 20 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='square'%3e%3cpath d='M25,1 C20,1 20,11 15,11 C10,11 10,1 5,1 C0,1 0,11 -5,11 C-10,11 -10,1 -15,1' id='Line' stroke='%23CBD5DF' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
     // }
 }
+
+.bg-stripes-blue {
+    background-color: #60a5fa1a;
+    background-image: linear-gradient(135deg, #3b82f680 10%, #0000 0, #0000 50%, #3b82f680 0, #3b82f680 60%, #0000 0, #0000);
+    background-size: 7.07px 7.07px;
+}
+
+.bg-stripes-pink {
+    background-color: #f472b61a;
+    background-image: linear-gradient(135deg, #ec489980 10%, #0000 0, #0000 50%, #ec489980 0, #ec489980 60%, #0000 0, #0000);
+    background-size: 7.07px 7.07px;
+}
+
+.bg-stripes-violet {
+    background-color: #a78bfa1a;
+    background-image: linear-gradient(135deg, #8b5cf680 10%, #0000 0, #0000 50%, #8b5cf680 0, #8b5cf680 60%, #0000 0, #0000);
+    background-size: 7.07px 7.07px;
+}

package/src/base/_base.scss

@@ -38,7 +38,7 @@ html {
 body {
     line-height: inherit; // 1
     color: $text;
-    background-color: $background;
+    background-color: $body-bg;
 }
 
 // 1. Add the correct height in Firefox.
@@ -73,11 +73,13 @@ abbr:where([title]) {
     font-weight: $heading-font-weight;
     color: $heading-and-title-color;
     line-height: 1.125;
+    text-wrap: balance;
 }
 
-// add top margin to all headings unless they are a first child
+// add top margin to all headings unless they are H1 or first child. H1 will
+// almost always be first child
 // 1. use em to adjust gap between sizes
-:is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+:is(h2, h3, h4, h5, h6):not(:first-child) {
     margin-top: 2em; // 1
 }
 

package/src/base/_content_gap.scss

@@ -1,10 +1,5 @@
 @use "../variables" as *;
 
-// Use `em` for heading to allow for better spacing when larger sizes.
-:where(h1, h2, h3, h4, h5, h6) + *:not(label) {
-    margin-top: $content-gap-em;
-}
-
 :where(blockquote, p, pre, form, table, ol, ul, h1, h2, h3, h4, h5, h6) + *:not(label) {
     margin-top: $content-gap;
 }

package/src/color/_themes.scss

@@ -8,7 +8,7 @@
 // ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
 // There is a fair bit going on here and the BUILD ORDER MATTERS.
 // Make sure you read the comments before making any changes.
-// ------------------------------------------------------------------
+// ==========================================================================
 
 $alert-theme: (
     "danger-light": (
@@ -57,9 +57,9 @@ $extended-theme-overrides: (
     // ),
 ) !default;
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- CREATE EXTENDED COLOR SCHEMES --
-// ------------------------------------------------------------------
+// ==========================================================================
 // extended maps add extra element styles and classes. For example,
 // `withState`, `bx-title` and link-colors.
 //
@@ -75,9 +75,9 @@ $extended-themes: mapMerge($alert-theme, $themes-map, $extended-theme-overrides)
     @include extendedThemeClass($theme-name, $map);
 }
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- CREATE BASIC COLOR SCHEMES --
-// ------------------------------------------------------------------
+// ==========================================================================
 // To prevent duplication make sure the `$extended-themes` are
 // created first.
 
@@ -90,9 +90,9 @@ $extended-themes: mapMerge($alert-theme, $themes-map, $extended-theme-overrides)
     }
 }
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- CREATE UTILITY CLASSES --
-// ------------------------------------------------------------------
+// ==========================================================================
 
 // this could arguably be removed and just use base colors?? maybe
 // leave main theme colors like primary, secondary, and accent

package/src/components/_button.scss

@@ -4,9 +4,9 @@
 @use "../mixins/state" as *;
 @use "../utilities/transition" as *;
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- BASE CLASS --
-// ------------------------------------------------------------------
+// ==========================================================================
 // items that are in themes are more difficult to override in the
 // base class. For example, setting the border-width in the base
 // class will do nothing because the theme border takes precedence.
@@ -35,9 +35,9 @@
     @include active($btn-bg);
 }
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- THEMES AND VARIATIONS --
-// ------------------------------------------------------------------
+// ==========================================================================
 //
 //  must explicitly create btn state to override base class because
 //  theme only apply when the `withState` modifier is included

package/src/components/_list.scss

@@ -1,8 +1,8 @@
 @use "../variables" as *;
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- TICK ICON LIST --
-// ------------------------------------------------------------------
+// ==========================================================================
 //
 
 .icon-list {

package/src/components-extended/_hero.scss

@@ -5,7 +5,7 @@
 // ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
 // constant debate has surrounded a `hero-text` wrapper. It has been
 // removed because it is easier to manage with utility classes
-// ------------------------------------------------------------------
+// ==========================================================================
 
 .hero {
     background-repeat: no-repeat;

package/src/functions/_colorFunctions.scss

@@ -1,8 +1,8 @@
 @use "../variables/base" as *;
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // set text colour based on the background
-// ------------------------------------------------------------------
+// ==========================================================================
 
 @function setTextColor($bg) {
 
@@ -31,9 +31,9 @@
     }
 }
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // Set transparent border color based on the background color.
-// ------------------------------------------------------------------
+// ==========================================================================
 // this is not a perfect solution because sometimes a dark color can
 // have a low lightness, and visa-versa, but it is good enough.
 //

package/src/functions/_mapMerge.scss

@@ -1,8 +1,8 @@
 @use "sass:map";
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // merge two or more maps into a single map.
-// ------------------------------------------------------------------
+// ==========================================================================
 //
 // EXAMPLE:
 // $colors: mapMerge($map-a, $map-b, $map-c);

package/src/mixins/_class-helpers.scss

@@ -1,8 +1,8 @@
 @use "../functions/helpers" as *;
 @use "./media" as *;
-// --------------------------------------------------------------------------
+// ==========================================================================
 // -- CLASS CREATORS --
-// --------------------------------------------------------------------------
+// ==========================================================================
 
 // prettier-ignore
 @mixin singlePropertyClass($class, $property, $value, $breakpoints: "") {
@@ -52,9 +52,9 @@
     }
 }
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // -- CREATE ONE OR MANY PROPERTIES FROM MAP OF KEY-VALUE PAIRS --
-// --------------------------------------------------------------------------
+// ==========================================================================
 @mixin createProperties($props) {
     @each $property, $value in $props {
         #{$property}: $value;
@@ -66,11 +66,11 @@
     #{$property}: $value;
 }
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // Generate properties based on positional requirements. For
 // example, when `margin-top` requires a value for `top`, and
 // `margin-x` requires values for `left` and `right`.
-// --------------------------------------------------------------------------
+// ==========================================================================
 // This mixin iterates through a list of positions, creating the
 // appropriate property (e.g., `top`, `bottom`, `left`, `right`)
 // based on the provided value.
@@ -88,7 +88,7 @@
 // ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------
 // SCSS does not support interpolation for @include so there is no
 // choice other than using multiple if-else statements.
-// --------------------------------------------------------------------------
+// ==========================================================================
 
 // output:  {bp}\:identifier
 

package/src/mixins/_classGenerators.scss

@@ -2,9 +2,9 @@
 @use "../mixins/class-helpers" as *;
 @use "sass:string";
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // Standalone mixin to create single property unit based classes
-// --------------------------------------------------------------------------
+// ==========================================================================
 @mixin unitBasedClasses($property, $values, $identifier, $unit: "rem") {
     @each $value in $values {
         $escapedValue: escape-invalid($value);

package/src/mixins/_colorThemeGenerators.scss

@@ -26,9 +26,9 @@
     }
 }
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // creates multiple classes with different color shades
-// --------------------------------------------------------------------------
+// ==========================================================================
 
 @mixin colorShadeClasses($identifier, $base-color, $num-shades: 6, $step: get("shades.step", $config), $shade: "both") {
     @include generateDarkerShades($identifier, $base-color, $num-shades, $step);
@@ -40,9 +40,9 @@
 }
 
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // -- CREATE PROPERTIES FOR BASIC COLOR SCHEME --
-// --------------------------------------------------------------------------
+// ==========================================================================
 
 @mixin basicColorScheme($base, $border-color: setBorderShadeColor($base), $font-color: setTextColor($base)) {
     background-color: $base;

package/src/mixins/_magicClassGenerators.scss

@@ -3,9 +3,9 @@
 @use "../variables/utility_maps" as *;
 @use "sass:list";
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // -- HELPER MIXIN FOR MAGIC CLASSES --
-// --------------------------------------------------------------------------
+// ==========================================================================
 // NOTE: the values do not include the unit!! These mixins will always use rem
 // as the unit. I don't see this as a problem because all the classes that use
 // these mixins will be using rem as the unit. If you need to use a different
@@ -45,9 +45,9 @@
     }
 }
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // -- GENERATE MAGIC CLASS FOR A SINGLE PROPERTY --
-// --------------------------------------------------------------------------
+// ==========================================================================
 // * `rem` is the default unit, pass in empty string to set to null
 
 @mixin magicClass($property, $values-list, $identifier, $unit: "rem", $position-or-axis: "") {

package/src/mixins/_media.scss

@@ -1,7 +1,7 @@
 @use '../variables' as *;
 
 // |-- on-device --|
-// --------------------------------------------------------------------------
+// ==========================================================================
 @mixin on-sm {
     @media (min-width: $sm) and (max-width: calc($md - 1px)) {
         @content;
@@ -33,7 +33,7 @@
 }
 
 // |-- from-device (device and larger) --|
-// --------------------------------------------------------------------------
+// ==========================================================================
 
 @mixin from-sm {
     @media (min-width: $sm) {
@@ -66,7 +66,7 @@
 }
 
 // |-- to-device (up-to but not including) --|
-// --------------------------------------------------------------------------
+// ==========================================================================
 @mixin to-sm {
     @media (max-width: calc($sm - 1px)) {
         @content;

package/src/mixins/generators/_generate-classes.scss

@@ -2,9 +2,9 @@
 @use "../../mixins/class-helpers" as *;
 @use "sass:string";
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // --  --
-// --------------------------------------------------------------------------
+// ==========================================================================
 
 @mixin generate-classes($properties-map) {
 

package/src/mixins/generators/_generate-from-values.scss

@@ -2,11 +2,11 @@
 @use "../../mixins/class-helpers" as *;
 @use "sass:string";
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // Generate class variants for a given property and list of values
-// --------------------------------------------------------------------------
+// ==========================================================================
 // !! IMPORTANT !! does not support position based classes
-// --------------------------------------------------------------------------
+// ==========================================================================
 // Note: I really don't like that you must set a unit to use the
 // breakpoints, even if you don't want one. This is a tradeoff to
 // allow responsive utilities to be generated from this mixin.

package/src/utilities/_grid.scss

@@ -5,10 +5,35 @@
 @use "../mixins/magicGridGenerators" as *;
 
 $gap: get("grid.default-gap", $config);
-
 $gap-sizes: (0, 0.5, 1, 1.25, 1.5, 2, 3, 4, 5) !default;
 $num-grid-cols: get("grid.num-grid-cols", $config);
 
+// ==========================================================================
+// -- GRID --
+// ==========================================================================
+// NK::TD refactor into a more reusable mixin
+// Must sit above utility classes
+
+@each $size in $gap-sizes {
+    $class: escapeDecimal($size);
+    .grid-#{$class} {
+        display: grid;
+        gap: #{$size}rem;
+    }
+}
+.grid {
+    display: grid;
+    gap: $gap;
+}
+
+.gap {
+    gap: $gap;
+}
+
+// ==========================================================================
+// -- GENERAL --
+// ==========================================================================
+
 // prettier-ignore
 $grid-properties-map: (
     gap: (
@@ -39,30 +64,9 @@ $grid-properties-map: (
 
 @include generate-utilities($grid-properties-map);
 
-// ------------------------------------------------------------------
-// -- GRID --
-// ------------------------------------------------------------------
-// NK::TD refactor into a more reusable mixin
-
-.grid {
-    display: grid;
-    gap: $gap;
-}
-.gap {
-    gap: $gap;
-}
-
-@each $size in $gap-sizes {
-    $class: escapeDecimal($size);
-    .grid-#{$class} {
-        display: grid;
-        gap: #{$size}rem;
-    }
-}
-
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- EQUAL WIDTHS COLUMNS(RESPONSIVE AND NON-RESPONSIVE) --
-// ------------------------------------------------------------------
+// ==========================================================================
 @for $i from 1 through $num-grid-cols {
     // base class
     .cols-#{$i} {
@@ -77,9 +81,9 @@ $grid-properties-map: (
     @include makeFromBreakpoint($props, $class, $breakpoints...);
 }
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- MAGIC CLASSES --
-// ------------------------------------------------------------------
+// ==========================================================================
 // THIS IS EXPERIMENTAL AND MAY NAT STAY IN THE CODEBASE
 
 // ---------------- BEFORE YOU DO ANYTHING CRAZY ------------------

package/src/utilities/_sizing.scss

@@ -19,9 +19,9 @@ $sizing-properties-map: (
 
 @include generate-utilities($sizing-properties-map);
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- WIDTH AND HEIGHT UTILITY CLASSES --
-// ------------------------------------------------------------------
+// ==========================================================================
 
 // -- WIDTH & HEIGHT --
 @each $size in $sizing-rem {
@@ -33,9 +33,9 @@ $sizing-properties-map: (
 }
 
 // generateResponsiveClasses();
-// // ------------------------------------------------------------------
+// // ==========================================================================
 // // -- RESPONSIVE SIZES --
-// // ------------------------------------------------------------------
+// // ==========================================================================
 
 // // prettier-ignore
 // @include makeFromBreakpoint((width: 16rem), "w-16", "sm", "md", "lg", "xl");
@@ -46,11 +46,11 @@ $sizing-properties-map: (
 // // prettier-ignore
 // @include makeFromBreakpoint((width: 100%), "w-full", "sm", "md", "lg", "xl");
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // I really don't think fractional widths are worth it. I think it
 // is better to use the grid system for this. I am leaving this here
 // for now but I think it will be removed in the future.
-// ------------------------------------------------------------------
+// ==========================================================================
 
 // $fractional-sizes: (1\/4: 25%, 1\/3: 33.33%, 1\/2: 50%, 3\/4: 75%) !default;
 

package/src/utilities/_state.scss

@@ -1,16 +1,16 @@
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // -- DISABLED --
-// --------------------------------------------------------------------------
+// ==========================================================================
 :disabled,
 .disabled {
     cursor: not-allowed;
     opacity: 0.5;
 }
 
-// --------------------------------------------------------------------------
+// ==========================================================================
 // -- REVIEW --
-// --------------------------------------------------------------------------
+// ==========================================================================
 
 // .hover\:txt-primary:hover {
 //     color: $primary;

package/src/utilities/_typography.scss

@@ -8,9 +8,9 @@
 // be overridden by utility classes
 // ******************************************************************
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- PROPERTY MAPS --
-// ------------------------------------------------------------------
+// ==========================================================================
 // remove the following colours from the map
 $text-colors: map.remove($color-map, "danger", "dark", "info", "light", "success", "warning");
 
@@ -25,9 +25,9 @@ $text-variant-sizes: (
 // convert 'rem' sizes to map and merge with variant sizes
 $text-variants: map-merge(listToMap($text-rem-sizes), $text-variant-sizes);
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- OPINIONATED TEXT CLASSES --
-// ------------------------------------------------------------------
+// ==========================================================================
 //
 .lead {
     font-size: 1.2rem;
@@ -62,9 +62,9 @@ $text-variants: map-merge(listToMap($text-rem-sizes), $text-variant-sizes);
     }
 }
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- UTILITY CLASS MAP --
-// ------------------------------------------------------------------
+// ==========================================================================
 
 // pettier-ignore
 $typography-properties-map: (

package/src/variables/_base.scss

@@ -4,20 +4,20 @@
 
 // generic
 $text: #333;
-$background: #ffffff;
+$body-bg: #ffffff;
 $primary: #2563eb;
 $secondary: #181e20;
 $accent: #ffbb1c;
 
 // dark
 // $text: #e4e8ec;
-// $background: #0b101d;
+// $body-bg: #0b101d;
 // $primary: #2876dc;
 // $secondary: #e1e1df;
 // $accent: #e6c637;
 
 $text: $text !default;
-$background: $background !default;
+$body-bg: $body-bg !default;
 $primary: $primary !default;
 $secondary: $secondary !default;
 $accent: $accent !default;
@@ -61,8 +61,6 @@ $copyright-text-color: $footer-text-color !default;
 // ==========================================================================
 $base-list-spacing: 0.25em !default;
 $content-gap: 1.25rem;
-// better for headings
-$content-gap-em: 1.25em;
 
 // ==========================================================================
 // -- Responsive Sizes and Breakpoints --

package/src/variables/_components.scss

@@ -51,10 +51,10 @@ $btn-text-transform: capitalize;
 
 // -- icons --
 // ==============================================================
-$icon-xy-sm: 1em !default;
-$icon-xy: 1.5em !default;
-$icon-xy-md: 2em !default;
-$icon-xy-lg: 3em !default;
+$icon-xy-sm: 1rem !default;
+$icon-xy: 1.5rem !default;
+$icon-xy-md: 2rem !default;
+$icon-xy-lg: 3rem !default;
 $icon-color: inherit !default;
 
 // -- menu --

package/src/variables/_utility_maps.scss

@@ -2,9 +2,9 @@
 @use "../variables/colors" as *;
 @use "sass:map";
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- AXIS TO POSITIONS MAP --
-// ------------------------------------------------------------------
+// ==========================================================================
 // Uses the key to defines the mapping structure that can be used to
 // retrieve css positions for a axis or position.
 //
@@ -38,9 +38,9 @@ $corners-map: (
     br: bottom-right,
 );
 
-// ------------------------------------------------------------------
+// ==========================================================================
 // -- COMMON SIZES (REM) --
-// ------------------------------------------------------------------
+// ==========================================================================
 // for creating margin, padding and other size related utilities.
 //
 // DO NOT add unit here, it can get in the way with some mixins
@@ -85,26 +85,26 @@ $fr-conversion-2-col: (
     80: ( 4fr, 1fr )
 );
 
-// ------------------------------------------------------------------
+// ==========================================================================
 //  Border, and border-radius sizes
-// ------------------------------------------------------------------
+// ==========================================================================
 $border-color-variants: (light: rgba(255, 255, 255, 0.15), dark: rgba(0, 0, 0, 0.15) ) !default;
 $border-colors: map.remove($color-map, "danger", "dark", "info", "light", "success", "warning") !default;
 
 $border-radius-sizes: (0, 0.25, 0.5, 0.75, 1, 1.5, 2) !default;
 $border-radius-variants: (xs: 0.125rem, sm: 0.25rem, base: 0.375, lg: 0.5rem, xl: 0.75rem, full: 9999rem) !default;
 
-// ------------------------------------------------------------------
+// ==========================================================================
 //  Space sizes and variants for margin and padding utilities
-// ------------------------------------------------------------------
+// ==========================================================================
 
 $space-rem-sizes: (0, 0.125, 0.25, 0.5, 0.75, 0.875, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 4, 5) !default;
 $margin-variants: (base: 1.5, auto: auto) !default;
 $padding-variants: (default: 1.5) !default;
 
-// ------------------------------------------------------------------
+// ==========================================================================
 //  Sizing maps and variants
-// ------------------------------------------------------------------
+// ==========================================================================
 
 $sizing-pixels: (200px, 250px, 300px, 400px, 600px) !default; // include unit to make merge easier
 $sizing-rem: (0, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24) !default;