nk_jtb 0.16.1 → 0.17.1

package/package.json

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

package/src/base/_base.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable */
 @use '../maps_and_variables/base' as *;
 @use '../maps_and_variables/layout' as *;
 @use '../maps_and_variables/typography' as *;
@@ -36,7 +37,7 @@ body {
 
 hr {
     height: 0;
-    margin: $content-gap 0;
+    margin: $base-gap 0;
     border-color: $border-color;
     border-top-width: 2px;
 }

package/src/base/_content_gap.scss

@@ -2,23 +2,24 @@
 
 // don't be tempted to add div here, it creates more problems than it solves
 $html-elements: blockquote, p, pre, form, table, ol, ul, h1, h2, h3, h4, h5, h6;
-$common-classes: '.bx', '.bx-content', '.bx-title', "[class*='container']", '.frm-row', '.grid', "[class*='flex']:not(.inline-flex)";
+$common-classes: '.bx', '.bx-content', '.bx-title', "[class*='container']", '.frm-row', '.grid',
+    "[class*='flex']:not(.inline-flex)";
 
 // Content gap
 :where(#{$html-elements}, #{$common-classes}) + :where(*) {
-    margin-top: $content-gap;
+    margin-top: $base-gap;
 }
 
 // This is experimental and may be more hassle than it's worth. It is to cover
 // the case when there are hidden inputs in the form.
 :where(input) + :where(div:not(.slider), p) {
-    margin-top: $content-gap;
+    margin-top: $base-gap;
 }
 
 // catch the strays (use with caution). The :where selector is to kill the
 // specificity for easier override
-:where(*:not([class*='flex']):not([class*='grid'])) > :where(.frm-row, table, form, pre):not(:first-child) {
-    margin-top: $content-gap;
+:where(*:not([class*='flex'], [class*='grid'])) > :where(.frm-row, table, form, pre):not(:first-child) {
+    margin-top: $base-gap;
 }
 
 // opt out for `flex` and `grid` element and use `gap` instead.

package/src/base/_typography.scss

@@ -13,8 +13,8 @@
 }
 
 :where(h1, h2, h3, h4, h5, h6) {
-    font-weight: $heading-font-weight;
     color: $heading-color;
+    font-weight: $heading-font-weight;
     line-height: 1.25;
     text-wrap: balance;
 }
@@ -51,10 +51,10 @@ code,
 kbd,
 pre,
 samp {
+    border-radius: 0.25rem;
+    color: #d9558c;
     font-family: $mono-font;
     font-size: 0.875rem;
-    color: #d9558c;
-    border-radius: 0.25rem;
 }
 
 pre {
@@ -69,8 +69,8 @@ pre {
 
 :is(a) {
     color: $link-color;
-    text-decoration: inherit;
     cursor: pointer;
+    text-decoration: inherit;
 
     &:hover {
         color: $link-hover-color;
@@ -86,7 +86,7 @@ pre {
 ul,
 ol {
     list-style-position: outside; // 1
-    margin-inline-start: $content-padding; // 2
+    margin-inline-start: $base-padding; // 2
 }
 
 li {

package/src/components/_menu.scss

@@ -15,26 +15,26 @@
     }
 
     :where(a, li a, .menu-item) {
+        align-items: center;
         color: inherit;
-        padding: $menu-padding-y $menu-padding-x;
         display: flex;
-        align-items: center;
+        padding: $menu-padding-y $menu-padding-x;
 
         &:is(.active, :hover):not(.disabled) {
-            cursor: pointer;
-            color: $menu-link-hover-color;
             background-color: $menu-hover-bg;
+            color: $menu-link-hover-color;
+            cursor: pointer;
         }
     }
 
     .menu-title {
         font-weight: 600;
         letter-spacing: 0.05em;
-        margin-left: $menu-padding-x;
         margin-bottom: 0.5em;
+        margin-left: $menu-padding-x;
 
         &:not(:first-child) {
-            margin-top: $content-gap;
+            margin-top: $base-gap;
         }
     }
 }

package/{tmp427 → src/extras}/_hero.scss

@@ -1,4 +1,4 @@
-@use '../src/common-tools' as *;
+@use '../common-tools' as *;
 
 $hero-title-color: #eee !default;
 $hero-title-lg: 3rem !default;
@@ -7,11 +7,11 @@ $hero-subtitle-color: #eee !default;
 $hero-subtitle-lg: 2.5rem !default;
 $hero-subtitle-sm: 1.75rem !default;
 $hero-gradient: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 40%)) !default;
-$hero-text-padding: $content-gap !default;
+$hero-text-padding: $base-padding !default;
 
 .hero {
-    background-repeat: no-repeat;
     background-position: center;
+    background-repeat: no-repeat;
     background-size: cover;
 
     .title {

package/src/extras/_nk-docs.scss

@@ -14,11 +14,11 @@ $question-color: #c40c9a !default;
 // ==========================================================================
 question {
     color: $question-color;
-    margin-block-start: $content-gap;
-    font-weight: 700;
-    font-style: italic;
     display: block;
     font-size: 1.15rem;
+    font-style: italic;
+    font-weight: 700;
+    margin-block-start: $base-gap;
 }
 
 // Reduce margin between a <question> and the following paragraph.
@@ -40,8 +40,8 @@ p:has(question) + p {
 */
 pre {
     border-radius: 0.25rem;
-    margin-top: 1rem;
     margin-bottom: 1rem;
+    margin-top: 1rem;
     overflow-x: auto;
 }
 
@@ -54,8 +54,8 @@ pre {
 pre code.torchlight {
     display: block;
     min-width: max-content;
-    padding-top: 1rem;
     padding-bottom: 1rem;
+    padding-top: 1rem;
 }
 
 /*

package/src/maps_and_variables/_base.scss

@@ -37,12 +37,14 @@ $line-height-condensed: 1.25 !default;
 // 
 $body-bg: hsl(0deg 0% 100%) !default;
 
-
 // -- Spacing --
 // ==========================================================================
 $base-list-spacing: 0.25em !default;
-$content-gap: 1.25rem !default;
-$content-padding: 1rem !default;
+$base-gap: 1.25rem !default;        // default gap between content blocks
+$base-padding: 1.25rem !default;    // default padding inside content blocks
+
+// 
+// ==========================================================================
 $header-bg: $secondary !default;
 $main-bg: transparent !default;
 $footer-bg: #1d1d1c !default;

package/src/maps_and_variables/_components.scss

@@ -35,7 +35,7 @@ $icon-tick: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><
 // -- BOX --
 // ==========================================================================
 $bx-bg: #fff !default;
-$bx-padding: $content-padding !default;
+$bx-padding: $base-padding !default;
 $bx-border-radius: 0.5rem !default;
 $bx-header-bg: rgb(250 250 250) !default;
 $bx-title-font-weight: 600 !default;

package/src/maps_and_variables/_utility-maps.scss

@@ -6,30 +6,6 @@
 @use '../functions/map-and-list-helpers' as *;
 @use 'sass:map';
 
-// ### Core Convention
-
-// * **`$<name>-values`** — raw or ordered values used in class generation
-// * **`$<name>-variants`** — named key\:value pairs for semantic or responsive variants
-// * **`$<name>-map`** — final merged map, used in class generators
-
-// ```
-// $spacing-values: (0, 0.25, 0.5, 1, 1.5, 2, 3, 4) !default;
-// $spacing-variants: (sm: 0.75, md: 1.25, lg: 2) !default;
-// $spacing-map: smart-merge($spacing-values, $spacing-variants) !default;
-// ```
-
-// ```
-// $size-values: (auto, full, screen) !default;
-// $size-variants: (sm: 16rem, md: 32rem, lg: 64rem) !default;
-// $size-map: smart-merge($size-values, $size-variants) !default;
-// ```
-
-// ```
-// $color-values: (primary, secondary, accent, muted) !default;
-// $color-variants: ( primary: #007bff, secondary: #6c757d) !default;
-// $color-map: smart-merge($color-values, $color-variants) !default;
-// ```
-
 // ==========================================================================
 //  Border, and border-radius sizes
 // ==========================================================================
@@ -67,18 +43,6 @@ $gap-values: (0, 0.25, 0.5, 1, 1.25, 1.5, 2, 3, 4, 5) !default;
 $gap-variants: (sm:.75, base: 1.25, lg:2) !default;
 $gap-map: smart-merge($gap-values, $gap-variants) !default;
 
-//  Space sizes and variants for margin and padding utilities
-// ==========================================================================
-$spacing-values: (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;
-$padding-variants: ( default: $content-padding ) !default;
-$margin-variants: ( base: 1.5, auto: auto ) !default;
-$padding-map: map.merge($margin-variants, list-to-map($spacing-values));
-$margin-map: map.merge($margin-variants, list-to-map($spacing-values));
-
-// magic variations
-$magic-margin-y: ((5, 3, 2), (3, 2, 1)) !default;
-$magic-padding-y: ((5, 3, 2), (5, 3, 2, 2), (3, 2, 1)) !default;
-
 // ==========================================================================
 //  Sizing maps and variants
 // ==========================================================================

package/src/maps_and_variables/_values-variants-and-properties.scss

@@ -0,0 +1,50 @@
+@use '../maps_and_variables/base' as *;
+@use '../maps_and_variables/layout' as *;
+@use '../maps_and_variables/property-maps' as *;
+@use '../maps_and_variables/colors' as *;
+@use '../functions/list-helpers' as *;
+@use '../functions/map-and-list-helpers' as *;
+@use 'sass:map';
+
+// ### Map Naming Convention
+// ===========================================================================
+// Use the following convention for defining values, variants, and CSS property values in SCSS maps:
+
+// When only CSS property values are needed, use the property name as the map name:
+// $position: (static, absolute, fixed, relative, sticky);
+
+// For utility class generation with values, variants and css property values, use the following naming convention:
+// * **`$<name>-values`** — raw or ordered numeric values used in class generation
+// * **`$<name>-variants`** — named key:value pairs for semantic, responsive, or CSS property variants
+// * **`$<name>-map`** — final merged map, used in class generators
+
+// Note: Variants can include both custom semantic values AND CSS property values (like auto, inherit, etc.)
+
+// ```
+// $spacing-values: (0, 0.25, 0.5, 1, 1.5, 2) !default;
+// $spacing-variants: (sm: 0.75rem, lg: 2rem, auto: auto, base: 1rem) !default;
+// $spacing-map: smart-merge($spacing-values, $spacing-variants) !default;
+// ```
+
+// ==========================================================================
+// -- SPACING -- (margin, padding, gap, inset)
+// ==========================================================================
+$spacing-values: (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: $base-gap, auto: auto ) !default;
+$margin-map: map.merge($margin-variants, list-to-map($spacing-values));
+
+$padding-variants: ( base: $base-padding ) !default;
+$padding-map: map.merge($padding-variants, list-to-map($spacing-values));
+
+// Magic Variants
+$margin-magic-y: ((5, 3, 2), (3, 2, 1)) !default;
+$padding-magic-y: ((5, 3, 2), (5, 3, 2, 2), (3, 2, 1)) !default;
+
+// ==========================================================================
+// -- SIZING -- (width, height)
+// ==========================================================================
+
+// ==========================================================================
+// -- BORDER -- (radius, width, color)
+// ==========================================================================

package/src/maps_and_variables/index.scss

@@ -4,7 +4,10 @@
 @forward './config';
 @forward './layout';
 @forward './position-maps';
-@forward './property-maps';
 @forward './tailwind-colors';
 @forward './typography';
+@forward './values-variants-and-properties';
+
+// DEPRECATED
+@forward './property-maps';
 @forward './utility-maps';

package/src/utilities/_margin.scss

@@ -11,28 +11,28 @@ $margin-properties-map: (
     )
 );
 
-
-// NKTD: Refactor to use build tools
-.space-x > *:not(:first-child) {
-    margin-left: $content-gap;
+// NKTD: Refactor to use build tools and include custom variants
+:where(.space-x > *:not(:first-child)) {
+    margin-left: $base-gap;
 }
 
-.space-y > *:not(:first-child) {
-    margin-top: $content-gap;
+:where(.space-y > *:not(:first-child)) {
+    margin-top: $base-gap;
 }
 
+// the problem here is that the spacing values do not include variants.
 @each $value in $spacing-values {
     $variant: #{sanitize-class-name($value)};
-    .space-x-#{$variant} > *:not(:first-child) {
+    :where(.space-x-#{$variant} > *:not(:first-child)) {
         margin-left: #{$value}rem;
     }
-    .space-y-#{$variant} > *:not(:first-child) {
+    :where(.space-y-#{$variant} > *:not(:first-child)) {
         margin-top: #{$value}rem;
     }
 }
 
 @include from-xl {
-    .lg\:space-x > *:not(:first-child) {
+    :where(.lg\:space-x > *:not(:first-child)) {
         margin-left: 1rem;
     }
 }
@@ -41,4 +41,4 @@ $margin-properties-map: (
 // Builds
 // ==========================================================================
 @include build-property-classes($margin-properties-map, $responsive: true);
-@include build-magic-classes(margin, $magic-margin-y, 'my', $position-or-axis: y);
+@include build-magic-classes(margin, $margin-magic-y, 'my', $position-or-axis: y);

package/src/utilities/_padding.scss

@@ -10,9 +10,8 @@ $padding-properties-map: (
     )
 );
 
+// ==========================================================================
+// Builds
+// ==========================================================================
 @include build-property-classes($padding-properties-map, $responsive: true);
-
-// magic classes
-$magic-padding-y: ((5, 3, 2), (5, 3, 2, 2), (3, 2, 1)) !default;
-
-@include build-magic-classes(padding, $magic-padding-y, "py", $position-or-axis: y);
+@include build-magic-classes(padding, $padding-magic-y, 'py', $position-or-axis: y);