kni-cascade 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kni-cascade",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "KNI Cascade — an opinionated SCSS engine and single source of truth for design scaling.",
   "main": "scss",
   "engines": {

package/readme.md

@@ -20,7 +20,7 @@ It’s designed for **clarity, scalability, and minimal friction** — a single
       <td>
         <ul>
           <li>Modern, layered structure that fixes inheritance issues</li>
-          <li>Clear separation of responsibility → <BR><code>00-config → 01-base → 02-components → 03-modules → 04-pages</code></li>
+          <li>Clear separation of responsibility → <BR><code>00-sass → 01-base → 02-components → 03-modules → 04-pages</code></li>
           <li>Config-first system — tokens, mixins, and primitives power everything downstream</li>
         </ul>
       </td>
@@ -51,7 +51,7 @@ It’s designed for **clarity, scalability, and minimal friction** — a single
 
 ```plaintext
 scss/
-├── 00-config/      # Tokens, mixins, functions, no CSS output
+├── 00-sass/        # Settings, Sass vars, mixins, functions, no CSS output
 ├── 01-base/        # Resets, type, layout, and core utilities
 ├── 02-components/  # Globally-available UI elements (header, footer, buttons, etc.)
 ├── 03-modules/     # Page body building blocks
@@ -92,11 +92,10 @@ By default, **Gulp** runs:
 
 ## Design Principles
 
-1. **Settings-first** – All editable project values live in `_settings.scss`.
-2. **No CSS output in config** – Logic, not styling.
-3. **Token inheritance** – Everything flows from primitives to components.
-4. **Small overrides > big rewrites** – The cascade should always work with you.
-5. **Readable by default** – Comments are documentation.
+
+1. **No CSS output in 00-sass** – Logic, not styling.
+2. **Small overrides > big rewrites** – The cascade should always work with you.
+3. **Readable by default** – Comments are documentation.
 
 ---
 
@@ -119,7 +118,7 @@ By default, **Gulp** runs:
 
 ## 🪄 Quick Philosophy
 
-> If it defines how the system works is a Sass function, mixin or variable, it lives in config.
+> If it defines how the system works is a Sass function, mixin or variable, it lives in sass.
 > If it’s a globally-used reset, type, or layout rule, it lives in base.
 > If it’s a globally-used element, it lives in components.
 > If it's a page body building block, it lives in modules.

package/scss/{00-config → 00-sass}/_index.scss

@@ -6,7 +6,6 @@
 // without generating any CSS.
 // ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 
-@forward 'primitives';
-@forward 'settings';
+@forward 'variables';
 @forward 'functions';
 @forward 'mixins';

package/scss/{00-config → 00-sass}/_mixins.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
-@use "./primitives" as *;
-@use "./settings" as *;
+@use "./variables" as *;
 
 // ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 // 🎨 Mixins

package/scss/{00-config/_settings.scss → 00-sass/_variables.scss}

@@ -1,5 +1,5 @@
 // ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
-// ⚙️ Settings
+// ⚙️ Variables
 // Project-level controls and design tokens — the file to edit.
 // Turn these knobs to adjust site behavior, type scales, or theme values.
 // ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
@@ -21,14 +21,30 @@ $type-scale: (
   heading-s:   (desktop: 26, mobile: 20),
   heading-xs:  (desktop: 20, mobile: 18),
   heading-xxs: (desktop: 18, mobile: 16),
-  body-l:     (desktop: 18, mobile: 16),
-  body-m:     (desktop: 16, mobile: 14),
-  body-s:     (desktop: 14, mobile: 12),
-  body-xs:    (desktop: 12, mobile: 11),
-  body-xxs:   (desktop: 11, mobile: 10),
-  body-xxxs:  (desktop: 10, mobile: 10)
+  body-l:      (desktop: 18, mobile: 16),
+  body-m:      (desktop: 16, mobile: 14),
+  body-s:      (desktop: 14, mobile: 12),
+  body-xs:     (desktop: 12, mobile: 11),
+  body-xxs:    (desktop: 11, mobile: 10),
+  body-xxxs:   (desktop: 10, mobile: 10)
 );
 
 // Colors
 $white: #fff;
 $black: #000;
+
+//  Breakpoints for Sassy mqs - see mixins
+$ms: 320 !default; // Mobile small
+$mm: 375 !default; // Mobile medium
+$ml: 500 !default; // Mobile large
+$ts: 600 !default; // Tablet small
+$tm: 768 !default; // Tablet medium
+$tl: 1024 !default; // Tablet large
+$dxs: $tl !default; // Desktop x-small
+$ds: 1280 !default; // Desktop small
+$dm: 1440 !default; // Desktop medium
+$dl: 1600 !default; // Desktop large
+$dxl: 1800 !default; // Desktop x-large
+
+$type-scale-breakpoint: $tm !default;
+

package/scss/01-base/_index.scss

@@ -1,6 +1,6 @@
 /* this is base index */
-@forward 'settings';
-@forward 'primitives';
+@forward 'scaling';
+@forward 'motion';
 @forward 'reset';
 @forward 'typography';
 @forward 'layout';

package/scss/01-base/_layout.scss

@@ -1,19 +1,27 @@
-@use '../00-config' as *;
+@use '../00-sass' as *;
+
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// 📐 Layout
+// Media Queries, containers, and other layout-related styles
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+
+// Layout Defaults
+:root {
+  --container-size: 1280pxv;
+  --mobile-gutters: 5%;
+  --border-radius: 5pxv;
+}
 
-// 🧩  Responsive Engine
+//  Responsive Engine
 // -----------------------------------------------------------------------------
-// This is our magic "it just works" responsive engine but there are other
-// ways to set up a primary container. Todo: show examples
+// This is our magic "it just works" responsive media query but there are other
+// ways to set up a primary container. 
 // |--------------------|-------------------------------------------|-----------
 // |    Mobile (375)    |              Desktop (1440)               |  No scale
 // |--------------------|-------------------------------------------|-----------
 // | min:320    max:767 | min:768                          max:1800 |
 // |--------------------|-------------------------------------------|-----------
 
-// kill the wp-admin bar
-
-@include wp-admin-bar;
-
 // Primary Media Query
 @media (width >= 768px) {
   :root {
@@ -26,6 +34,10 @@
   }
 }
 
+// kill the wp-admin bar
+@include wp-admin-bar;
+
+
 body {
   min-height: 100vh;
 }

package/scss/01-base/_motion.scss

@@ -0,0 +1,8 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ⏱️ Motion
+// Easing curves, transitions, and animation timing for interactive experiences
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+
+:root {
+  --easing: cubic-bezier(0.23, 1, 0.32, 1); // Michael Jordan Magic Johnson
+}

package/scss/01-base/{_primitives.scss → _scaling.scss}

@@ -1,9 +1,8 @@
-@use '../00-config' as *;
+@use '../00-sass' as *;
 
 // ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
-// 📝 Primitives
-// System-level "physics" of the design system — how scaling, pxv units,
-// and fluid typography behave under the hood. You normally don’t edit this.
+// 📏 Scaling
+// Responsive engine powering sitewide scaling and pxv unit calculations.
 // ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 
 :root {
@@ -16,12 +15,12 @@
   --mobile-squish:0;
 
   // Desktop defaults
-  --desktop-basis-w: 1440; // figma width
-  --desktop-basis-h: 750; // height at which you want site to scale vertically
-  --desktop-min: 768; 
-  --desktop-max: 2000;
-  --desktop-squish: 0.5; // amount to scale height at --desktop-basis
-  --desktop-floor: 500; // height at which to top scaling vertically
+  --desktop-basis-w: 1440;    // Figma width
+  --desktop-basis-h: 750;     // height at which you want site to scale vertically
+  --desktop-min: 768;         // Desktop starts here 
+  --desktop-max: 2000;        // Desktop ends here
+  --desktop-squish: 1;        // amount to scale height at --desktop-basis
+  --desktop-floor: 500;       // height at which to top scaling vertically
 
     // default to mobile sizing
   --active-basis-w: var(--mobile-basis-w);
@@ -37,7 +36,6 @@
   // safe vh used in pxv calculations
   --safe-vh: max(1vh, 1px * var(--active-floor) / 100);
 
-
   // pxv unit - 
   /* stylelint-disable */
   @if $enable-pxv {
@@ -53,9 +51,4 @@
   // Fluid type primitives
   --font-max-clamp: 9999px; // no touch
   --font-size: 16pxv; // fluid-type base font size
-
-  // system font stacks
-  --font-family-system: system-ui, helvetica,arial, sans-serif;
-  --font-family-heading: var(--font-family-system);
-  --font-family-monospace: ui-monospace, sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;
-}
+  }

package/scss/01-base/_typography.scss

@@ -1,19 +1,25 @@
-@use '../00-config' as *;
+@use '../00-sass' as *;
 
 // ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 // 📄 _typography.scss
 // Type system + custom styles
 // ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 
-// Toggle fluid-type in settings.scss
-@if $enable-fluid-type {
-  @include fluid-type;
+// Default type settings
+:root {
+  --font-family-system: system-ui, helvetica,arial, sans-serif;
+  --font-family-heading: var(--font-family-system);
+  --font-family-monospace: ui-monospace, sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;
+  --font-min-clamp: 11px;     // default min-size for all type
+  --line-height: 1.35;        // default line height
+  --text-wrap: pretty;        // default
+  --letter-spacing: normal;   // 0.01em etc - match figma
+  --type-margin: 15pxv;       // Bottom spacing under type elements todo: replace with spacing var
 }
 
-// edit me
-:root {
-  // --font-family-system: '<project font>';
-  // --font-family-heading: if headings use different font;
+// Toggle fluid-type in 00-sass/variables
+@if $enable-fluid-type {
+  @include fluid-type;
 }
 
 // Set top level rules
@@ -36,7 +42,11 @@ html {
 }
 
 // Make code look like code
-code, kbd, samp, pre, tt {
+code,
+kbd,
+samp,
+pre,
+tt {
   font-family: var(--font-family-monospace);
 }
 
@@ -65,19 +75,19 @@ code, kbd, samp, pre, tt {
   line-height: 1.2; // edit me
 }
 
-.heading--xl  {
+.heading--xl {
   @include type-scale(heading-xl);
 
   --font-min-clamp: 28px;
 }
 
-.heading--l  {
+.heading--l {
   @include type-scale(heading-l);
 
   --font-min-clamp: 24px;
 }
 
-.heading--m  {
+.heading--m {
   @include type-scale(heading-m);
 
   --font-min-clamp: 20px;
@@ -101,9 +111,13 @@ code, kbd, samp, pre, tt {
   --font-min-clamp: 14px;
 }
 
-.body--m { @include type-scale(body-m); }
+.body--m {
+  @include type-scale(body-m);
+}
 
-.body--s { @include type-scale(body-s);}
+.body--s {
+  @include type-scale(body-s);
+}
 
 .body--xs {
   @include type-scale(body-xs);
@@ -155,4 +169,4 @@ code, kbd, samp, pre, tt {
 
 .text-right {
   text-align: right;
-}
+}

package/scss/01-base/utilities/_display.scss

@@ -1,4 +1,4 @@
-@use "../../00-config" as *;
+@use "../../00-sass" as *;
 
 .color {
   &--white {

package/scss/01-base/utilities/_flex.scss

@@ -1,4 +1,4 @@
-@use '../../00-config' as *;
+@use '../../00-sass' as *;
 
 .flex {
   display: flex;

package/scss/styles.scss

@@ -1,3 +1,3 @@
-@use './00-config' as *;
+@use './00-sass' as *;
 @use './01-base' as *;
 @use './02-components' as *;

package/test/styles.scss

@@ -1,5 +1,5 @@
 // @use '../scss/site' as *;
-@use '../scss/00-config' as *;
+@use '../scss/00-sass' as *;
 @use '../scss/01-base' as *;
 @use '../scss/02-components' as *;
 @use '../scss/03-modules' as *;

package/scss/00-config/_primitives.scss

@@ -1,21 +0,0 @@
-// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
-// 📜 Primitives
-// System-level "physics" of the design system — how scaling, pxv units,
-// and fluid typography behave under the hood. You normally don’t edit this.
-// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
-
-// 🧩  Breakpoints for Sassy mqs - see mixins
-// -----------------------------------------------------------------------------
-$ms: 320 !default; // Mobile small
-$mm: 375 !default; // Mobile medium
-$ml: 500 !default; // Mobile large
-$ts: 600 !default; // Tablet small
-$tm: 768 !default; // Tablet medium
-$tl: 1024 !default; // Tablet large
-$dxs: $tl !default; // Desktop x-small
-$ds: 1280 !default; // Desktop small
-$dm: 1440 !default; // Desktop medium
-$dl: 1600 !default; // Desktop large
-$dxl: 1800 !default; // Desktop x-large
-
-$type-scale-breakpoint: $tm !default;

package/scss/01-base/_settings.scss

@@ -1,16 +0,0 @@
-:root {
-  // defaults
-  --easing: cubic-bezier(0.23, 1, 0.32, 1); // Michael Jordan Magic Johnson
-  --border-radius: 5pxv;
-
-  // default type settings
-  --font-min-clamp: 11px; // default min-size for all type
-  --line-height: 1.5; // default line height
-  --text-wrap: pretty; // default
-  --letter-spacing: normal; // 0.01em etc - match figma
-  --type-margin: 15pxv; // Bottom spacing under type elements todo: replace with spacing var
-
-  // container settings:
-  --container-size: 1280pxv;
-  --mobile-gutters: 5%;
-}