nk_jtb 0.2.0 → 0.3.0

package/scss/utilities/_text.scss

@@ -11,7 +11,7 @@ $text-utilities: (
         ),
     ),
     "line-height": (
-        "prefix": "lh",
+        "prefix": "lh-",
         "values": (
             1: 1,
         ),
@@ -96,10 +96,9 @@ h1.title {
 //
 // ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
 
-
-
 .txt {
     // size modifiers
+    // check line heights as the may not be correct!
     &-sm {
         font-size: 0.875rem;
         line-height: 1.25rem;
@@ -113,6 +112,11 @@ h1.title {
         line-height: 1.75rem;
     }
 
+    &-2 {
+        font-size: 2rem;
+        line-height: 1;
+    }
+
     // colour modifiers
     &-green {
         color: map-get($color-map, "green");

package/scss/utilities/_themes.scss

@@ -7,14 +7,31 @@
 
 // ----------------------------------
 
-
-$new-theme: (
+// get this to fall back to the base colors???
+$alert-theme: (
     "danger-light": (
-        "base": #ffe6e6,
-        "border-color": #ff9d9d,
-        "color": #4d0000,
-        "title-color": #900,
-        // no state,
+        "base": hsl(0, 100%, 95%),
+        "border-color": hsl(0, 100%, 81%),
+        "color": hsl(0, 100%, 15%),
+        "title-color": hsl(0, 100%, 30%),
+    ),
+    "info-light": (
+        "base": hsl(211, 94%, 94%),
+        "border-color": hsl(211, 94%, 81%),
+        "color": hsl(211, 94%, 15%),
+        "title-color": hsl(211, 94%, 30%),
+    ),
+    "warning-light": (
+        "base": hsl(50, 92%, 95%),
+        "border-color": hsl(50, 92%, 60%),
+        "color": hsl(50, 92%, 21%),
+        "title-color": hsl(50, 92%, 35%),
+    ),
+    "success-light": (
+        "base": hsl(142, 61%, 92%),
+        "border-color": hsl(142, 61%, 81%),
+        "color": hsl(142, 61%, 15%),
+        "title-color": hsl(142, 62%, 25%),
     ),
     "complement": (
         "base": #ffbfd1,
@@ -41,7 +58,7 @@ $default-themes: (
     ),
 ) !default;
 
-$themes-map: map.merge($new-theme, $default-themes);
+$themes-map: map.merge($alert-theme, $default-themes);
 
 // $key is the theme name, $map is the theme map
 @each $key, $map in $themes-map {
@@ -69,8 +86,6 @@ $themes-map: map.merge($new-theme, $default-themes);
 @include colorShades("bg-blue-", hsl(204, 83%, 53%), 9, 3);
 @include colorShades("bg-green-", hsl(134, 61%, 41%), 9, 3);
 
-
-
 // $themes-map: (
 //     "danger": (
 //         "base": map-get($color-map, "danger"),

package/scss/layout/_grid_old.scss

@@ -1,88 +0,0 @@
-@use "../mixins/media" as *;
-@use "../base/vars_base" as *;
-
-// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
-//
-// This grid systems will be depreciated over time so do not add
-// any new classes in this style sheet.
-//
-// ---------------- BEFORE YOU DO ANYTHING CRAZY ----------------
-
-$grid-gutter: 0.75rem;
-$stack-on-device: $mobile-portrait;
-
-// |--\0/-- Column Width Map --\0/--|
-$col-widths: (
-    8: 8.3333%,
-    10: 10%,
-    15: 15%,
-    20: 20%,
-    25: 25%,
-    30: 30%,
-    33: 33.3333%,
-    40: 40%,
-    50: 50%,
-    60: 60%,
-    66: 66.6666%,
-    70: 70%,
-    75: 75%,
-    80: 80%,
-    85: 85%,
-    90: 90%,
-    100: 100%,
-);
-
-.row {
-    margin-left: -$grid-gutter;
-    margin-right: -$grid-gutter;
-    &.mm {
-        margin-left: 0;
-        margin-right: 0;
-    }
-}
-
-// columns stack and will not flex until min-size
-// 1. columns will wrap when past 100%
-@media screen and (min-width: $stack-on-device), print {
-    .row {
-        display: flex;
-        flex-wrap: wrap; // 1
-    }
-}
-
-.col {
-    display: block;
-    flex-basis: 0; // initial width
-    flex-grow: 1; // can grow
-    flex-shrink: 1; // can shrink
-}
-
-// apply gutter to all column classes
-[class*="col-"] {
-    padding: $grid-gutter;
-}
-
-// Base classes (non responsive)
-// for each width in col-widths
-@each $column, $width in $col-widths {
-    // create class .col-breakpoint-width
-    .col-#{$column} {
-        flex: 0 0 $width;
-        max-width: $width;
-    }
-}
-
-// for each breakpoint (xs, sm, etc ...) in breakpoints
-@each $breakpoint, $size in $breakpoints {
-    // create a media query with min-width of $size
-    @media (min-width: $size) {
-        // for each width in col-widths
-        @each $column, $width in $col-widths {
-            // create class .col-breakpoint-width
-            .col-#{$breakpoint}-#{$column} {
-                flex: 0 0 $width;
-                max-width: $width;
-            }
-        }
-    }
-}