nk_jtb 0.14.1 → 0.14.3

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "nk_jtb",
     "description": "Yet another utility based framework.",
-    "version": "0.14.1",
+    "version": "0.14.3",
     "repository": {
         "type": "git",
         "url": "https://github.com/naykel76/nk_jtb.git"
@@ -14,7 +14,6 @@
         "jtb": "sass --watch --no-source-map ./src/jtb.scss:dist/css/jtb.css",
         "play": "sass --watch --no-source-map ./src/play.scss:dist/css/play.css",
         "dev": "vite --open",
-        "build:jtb": "sass --style compressed --no-source-map ./src/jtb.scss:dist/jtb.min.css",
         "build": "vite build && npm run build:jtb && npm run build:jtb_basic",
         "preview": "vite preview"
     },

package/src/base/_base.scss

@@ -1,46 +1,6 @@
-// @use '../variables' as *;
 @use '../v1/maps_and_variables/base' as *;
-
 @use 'sass:list';
 
-* {
-    margin: 0; // 1.
-    padding: 0; // 1.
-}
-
-// 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-// 2. Allow adding a border to an element by just adding a border-width.
-
-*,
-::before,
-::after {
-    box-sizing: border-box; // 1
-    border-width: 0; // 2
-    border-style: solid; // 2
-    border-color: $border-color; // 2
-}
-
-// 1. Use a consistent sensible line-height in all browsers.
-// 2. Prevent adjustments of font size after orientation changes in iOS.
-// 3. Use a more readable tab size.
-
-html {
-    line-height: $line-height; // 1
-    -webkit-text-size-adjust: 100%; // 2
-    -moz-tab-size: 4; // 3
-    tab-size: 4; // 3
-    font-family: $font-family;
-    font-size: $font-size;
-    scroll-behavior: smooth;
-}
-
-// 1. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-
-body {
-    line-height: inherit; // 1
-    color: $text-color;
-    background-color: $body-bg;
-}
 
 hr {
     height: 0; 

package/src/components/_accordion.scss

@@ -2,7 +2,7 @@
 @use '../variables' as *;
 @use 'sass:color';
 
-$accordion-color: $color !default;
+$accordion-color: $text-color !default;
 $accordion-font-size: $font-size !default;
 $accordion-font-weight: 600 !default;
 $accordion-bg: rgb(245, 245, 245) !default;

package/src/jtb.scss

@@ -1,4 +1,5 @@
-@use './base';
+@use './base' as oldBase;
+@use './v1/base';
 
 // -- ORDER MATTERS --
 // ----------------------------------------------------------------
@@ -42,6 +43,7 @@
 @forward './utilities/transition';
 @forward './utilities/typography';
 @forward './v1/utilities/backgrounds';
+@forward './v1/utilities/border';
 @forward './v1/utilities/typography';
 
 // extras

package/src/play.scss

@@ -1,18 +1,17 @@
 // @use './utilities/typography' as *;
+@use './v1/maps_and_variables/base' as *;
+@use './v1/maps_and_variables/colors' as *;
+@use './v1/maps_and_variables/tailwind-colors' as *;
 @use 'sass:color';
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:string';
 
-$color: blue;
-
-$darken: color.adjust($color, $lightness: -10%) !default;
-
-
-
-.default-color {
-    color: $color;
-}
-.bg-darken {
-    background-color: $darken;
+// NK::TD Update to use build tools including responsive breakpoints
+@each $color-name, $color-map in $tailwind-colors {
+    @each $key, $value in $color-map {
+        .bdr-#{$color-name}-#{$key} {
+            border-color: $value;
+        }
+    }
 }

package/src/utilities/_border.scss

@@ -3,7 +3,6 @@
 @use 'sass:map';
 
 // remove the following colours from the map
-$border-colors-merged: magic-merge($border-colors, $border-color-variants);
 $border-radius-merged: magic-merge($border-radius-variants, $border-radius-sizes);
 
 // this is not easy to override on the child element unless the
@@ -32,10 +31,6 @@ $border-properties-map: (
             prefix: #{$border-identifier},
             values: (solid, dashed, dotted, double, none),
         ),
-    border-color: (
-        prefix: #{$border-identifier},
-        values: $border-colors-merged
-    ),
     border-radius: (
         prefix: "rounded-",
         values: $border-radius-merged,

package/src/utilities/_typography.scss

@@ -20,7 +20,7 @@ $text-variant-sizes: (
 ) !default;
 
 // convert 'rem' sizes to map and merge with variant sizes
-$text-variants: map.merge(listToMap($text-rem-sizes), $text-variant-sizes);
+$text-sizes: map.merge(listToMap($text-rem-sizes), $text-variant-sizes);
 
 // ==========================================================================
 // -- OPINIONATED TEXT CLASSES --
@@ -62,7 +62,7 @@ $text-variants: map.merge(listToMap($text-rem-sizes), $text-variant-sizes);
 // This needs to be included in the properties map. I have left seperate for now
 // because 'base' is automatically stripped out
 .txt-base {
-    color: $color;
+    color: $text-color;
 }
 // ==========================================================================
 // -- UTILITY CLASS MAP --
@@ -76,7 +76,7 @@ $typography-properties-map: (
     ),
     font-size: (
         prefix: "#{$text-identifier}",
-        values: $text-variants,
+        values: $text-sizes,
         // TXT BREAKPOINTS ARE NOT WORKING CORRECTLY WITH THE UNIT
         // breakpoints: ("sm", "md", "lg", "xl"),
         unit: "rem"

package/src/v1/base/_base.scss

@@ -0,0 +1,30 @@
+@use '../maps_and_variables/base' as *;
+
+*,
+::after,
+::before {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+}
+
+// 1. Prevent font scaling in Safari.
+// 2. Improve tab character spacing in code or pre elements.
+
+html {
+    line-height: $line-height;
+    -webkit-text-size-adjust: 100%; // 1
+    tab-size: 4; // 2
+    font-family: $font-family;
+    font-size: $font-size;
+    scroll-behavior: smooth;
+}
+
+// Inherit from html to allow setting line-height on html directly.
+
+body {
+    line-height: inherit;
+    color: $text-color;
+    background-color: $body-bg;
+}

package/src/v1/base/index.scss

@@ -1 +1,2 @@
+@forward "./base";
 @forward "./root";

package/src/v1/utilities/_border.scss

@@ -0,0 +1,10 @@
+@use '../maps_and_variables/tailwind-colors' as *;
+
+// NK::TD Update to use build tools including responsive breakpoints
+@each $color-name, $color-map in $tailwind-colors {
+    @each $key, $value in $color-map {
+        .bdr-#{$color-name}-#{$key} {
+            border-color: $value;
+        }
+    }
+}

package/src/v1/utilities/_typography.scss

@@ -1,4 +1,5 @@
 @use '../maps_and_variables/tailwind-colors' as *;
+@use 'sass:map';
 
 // NK::TD Consider if I really need place holder color utility classes
 
@@ -15,3 +16,42 @@
         }
     }
 }
+
+// NK::TD Update to use build tools including responsive breakpoints
+$text-variants: (
+    xs: (
+        font-size: 0.75rem,
+        line-height: 1
+    ),
+    sm: (
+        font-size: 0.875rem,
+        line-height: 1.25
+    ),
+    base: (
+        font-size: 1rem,
+        line-height: 1.5
+    ),
+    lg: (
+        font-size: 1.125rem,
+        line-height: 1.5
+    ),
+    xl: (
+        font-size: 1.25rem,
+        line-height: 1.5
+    ),
+    xxl: (
+        font-size: 1.5rem,
+        line-height: 1.5
+    )
+);
+
+@mixin generate-text-variants($map) {
+    @each $name, $props in $map {
+        .txt-#{$name} {
+            font-size: map.get($props, font-size);
+            line-height: map.get($props, line-height);
+        }
+    }
+}
+
+@include generate-text-variants($text-variants);

package/src/variables/_base.scss

@@ -5,7 +5,7 @@
 // ==========================================================================
 // -- Base Styles --
 // ==========================================================================
-$color: #333 !default;
+
 
 $img-path: "/images" !default;
 

package/src/variables/_utility_maps.scss

@@ -60,10 +60,6 @@ $fr-conversion-2-col: (
 // ==========================================================================
 //  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;