npm - nk_jtb - Versions diffs - 0.8.7 → 0.9.0 - Mend

nk_jtb 0.8.7 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/.prettierignore +1 -0
package/.prettierrc +3 -0
package/.vscode/settings.json +3 -0
package/index.html +225 -3
package/package.json +7 -7
package/readme.md +17 -1
package/src/_nk.scss +44 -15
package/src/base/_base.scss +20 -12
package/src/base/_content_gap.scss +33 -0
package/src/base/_root.scss +1 -1
package/src/base/index.scss +3 -0
package/src/color/_shades.scss +31 -14
package/src/color/_themes.scss +12 -16
package/src/{scss/components → components}/_accordion.scss +1 -1
package/src/{scss/components → components}/_article.scss +2 -2
package/src/components/_banner.scss +17 -0
package/src/{scss/components → components}/_box.scss +2 -3
package/src/components/_button.scss +5 -5
package/src/{scss/components → components}/_dropdown.scss +6 -6
package/src/{scss/components → components}/_icon.scss +6 -3
package/src/{scss/components → components}/_list.scss +1 -2
package/src/{scss/components → components}/_menu.scss +2 -3
package/src/components/_misc.scss +44 -0
package/src/{scss/components → components}/_navbar.scss +4 -4
package/src/{scss/components → components}/_other.scss +2 -2
package/src/components/_sidebar.scss +10 -0
package/src/components-extended/_hero.scss +18 -2
package/src/extras/_code.scss +1 -1
package/src/extras/agate.css +139 -139
package/src/extras/github-dark-dimmed.css +124 -124
package/src/extras/monokai-sublime.css +80 -80
package/src/extras/panda-syntax-dark.css +99 -99
package/src/forms/_choices.scss +3 -3
package/src/forms/_control.scss +41 -22
package/src/forms/_form.scss +54 -33
package/src/forms/_index.scss +5 -0
package/src/{scss/forms → forms}/_toggle.scss +1 -2
package/src/functions/_colorFunctions.scss +1 -1
package/src/functions/helpers/_map-and-list.scss +39 -0
package/src/functions/helpers/_naming-and-formatting.scss +72 -0
package/src/functions/helpers/_string.scss +34 -0
package/src/functions/helpers/_strippers.scss +55 -0
package/src/functions/helpers/_validation.scss +13 -0
package/src/functions/helpers/index.scss +7 -0
package/src/jtb.scss +40 -38
package/src/mixins/_class-helpers.scss +180 -0
package/src/mixins/_classGenerators.scss +14 -0
package/src/mixins/{_colorShadeClasses.scss → _colorThemeGenerators.scss} +20 -7
package/src/mixins/_common.scss +11 -0
package/src/mixins/_extendedThemeClass.scss +3 -3
package/src/mixins/_magicClassGenerators.scss +103 -0
package/src/{scss/mixins/_makeMagicGridEqualWidths.scss → mixins/_magicGridGenerators.scss} +26 -4
package/src/mixins/_media.scss +4 -4
package/src/mixins/_state.scss +17 -0
package/src/mixins/generators/_generate-classes.scss +26 -0
package/src/mixins/generators/_generate-from-values.scss +40 -0
package/src/mixins/generators/_generate-utilities.scss +57 -0
package/src/play.scss +153 -17
package/src/utilities/_border.scss +78 -0
package/src/utilities/_container.scss +31 -0
package/src/utilities/_effects.scss +15 -0
package/src/utilities/_flexbox.scss +93 -0
package/src/utilities/_grid.scss +63 -43
package/src/utilities/_layout.scss +21 -0
package/src/utilities/_margin.scss +21 -0
package/src/utilities/_misc.scss +16 -0
package/src/utilities/_padding.scss +26 -0
package/src/utilities/_position.scss +21 -0
package/src/utilities/_sizing.scss +60 -0
package/src/utilities/_space.scss +29 -0
package/src/utilities/_state.scss +31 -0
package/src/utilities/_typography.scss +185 -0
package/src/utilities/{_responsive_display_visibility.scss → _visibility-display.scss} +15 -10
package/src/{base/_vars_base.scss → variables/_base.scss} +5 -14
package/src/{base/_vars_colors.scss → variables/_colors.scss} +2 -2
package/src/{scss/base/_vars_components.scss → variables/_components.scss} +32 -6
package/src/variables/_identifiers.scss +22 -0
package/src/variables/_utility_maps.scss +127 -0
package/src/variables/index.scss +6 -0
package/tmp/_general.scss +56 -0
package/{src/scss → tmp}/_nk.scss +1 -30
package/tmp/_state.scss +0 -0
package/src/base/_vars_all.scss +0 -6
package/src/base/_vars_class_names.scss +0 -7
package/src/base/_vars_components.scss +0 -21
package/src/base/_vars_utility_maps.scss +0 -112
package/src/functions/_helpers.scss +0 -59
package/src/mixins/_responsiveClassCreators.scss +0 -96
package/src/mixins/_utilityClassCreators.scss +0 -43
package/src/mixins/helpers/_basicColorScheme.scss +0 -7
package/src/mixins/helpers/_classCreators.scss +0 -12
package/src/mixins/helpers/_index.scss +0 -3
package/src/mixins/helpers/_propertyCreators.scss +0 -34
package/src/scss/base/_content_gap.scss +0 -29
package/src/scss/components/_sidebar.scss +0 -26
package/src/scss/forms/_index.scss +0 -4
package/src/scss/functions/_classNaming.scss +0 -26
package/src/scss/layouts/__two-column.scss +0 -32
package/src/scss/mixins/_createState.scss +0 -33
package/src/scss/mixins/_makeMagicClass.scss +0 -80
package/src/scss/mixins/_makeMagicGrid2Cols.scss +0 -70
package/src/scss/mixins/_positionUtilityClasses.scss +0 -50
package/src/scss/utilities/_border.scss +0 -126
package/src/scss/utilities/_display_visibility.scss +0 -60
package/src/scss/utilities/_flex.scss +0 -173
package/src/scss/utilities/_general.scss +0 -127
package/src/scss/utilities/_grid.scss +0 -66
package/src/scss/utilities/_opacity.scss +0 -8
package/src/scss/utilities/_position.scss +0 -87
package/src/scss/utilities/_sizes.scss +0 -71
package/src/scss/utilities/_spacing.scss +0 -247
package/src/scss/utilities/_state.scss +0 -37
package/src/scss/utilities/_text.scss +0 -177
package/src/scss/utilities/_themes.scss +0 -33
package/src/utilities/_general.scss +0 -8
package/src/utilities/_size.scss +0 -55
package/src/utilities/_text.scss +0 -15
package/src/utilities/_utilities.scss +0 -25
/package/src/{scss/forms → forms}/_file.scss +0 -0
/package/src/{_properties.scss → functions/helpers/_numeric.scss} +0 -0
/package/src/{scss/utilities/_translate.scss → utilities/_transforms.scss} +0 -0

package/.prettierignore ADDED Viewed

	@@ -0,0 +1 @@
1	+ functions

package/.prettierrc ADDED Viewed

@@ -0,0 +1,3 @@
+{
+ "printWidth": 140
+}

package/.vscode/settings.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+}

package/index.html CHANGED Viewed

@@ -6,11 +6,203 @@
     <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>NayKel JTB</title>
-    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
+    <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 </head>
 <body>
+    <section>
+        <div class="container">
+            <div class="flex-col">
+                <div class="bx pink h-2"></div>
+                <div class="bx pink h-2"></div>
+            </div>
+            <div class="bx">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit laboriosam aliquid commodi animi magni excepturi inventore qui nemo, sapiente quasi eum beatae ducimus iusto molestiae dolorum obcaecati in eaque vitae.</div>
+        </div>
+    </section>
+    <section>
+        <div class="container">
+            <div class="flex-col lg:flex-row">
+                <div class="bx pink h-24"></div>
+                <div class="bx pink h-24"></div>
+            </div>
+        </div>
+    </section>
+    <div class="container py-5">
+        <div class="overflow-x-auto rounded-lg bdr">
+            <table>
+                <thead class="txt-upper">
+                    <tr>
+                        <th scope="col" class=""> Product name </th>
+                        <th scope="col" class=""> Color </th>
+                        <th scope="col" class=""> Category </th>
+                        <th scope="col" class=""> Price </th>
+                        <th scope="col" class=""> Action </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y bdr-t">
+                    <tr class="">
+                        <th scope="row" class=""> Apple MacBook Pro 17" </th>
+                        <td class=""> Silver </td>
+                        <td class=""> Laptop </td>
+                        <td class=""> $2999 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="bdr-green bdr5">
+                        <th scope="row" class=""> Microsoft Surface Pro </th>
+                        <td class=""> White </td>
+                        <td class=""> Laptop PC </td>
+                        <td class=""> $1999 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="">
+                        <th scope="row" class=""> Magic Mouse 2 </th>
+                        <td class=""> Black </td>
+                        <td class=""> Accessories </td>
+                        <td class=""> $99 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="">
+                        <th scope="row" class=""> Google Pixel Phone </th>
+                        <td class=""> Gray </td>
+                        <td class=""> Phone </td>
+                        <td class=""> $799 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="">
+                        <th scope="row" class=""> Apple Watch 5 </th>
+                        <td class=""> Red </td>
+                        <td class=""> Wearables </td>
+                        <td class=""> $999 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <hr>
+        <div class="overflow-x-auto rounded-lg bdr">
+            <table>
+                <thead class="txt-upper">
+                    <tr>
+                        <th scope="col" class=""> Product name </th>
+                        <th scope="col" class=""> Color </th>
+                        <th scope="col" class=""> Category </th>
+                        <th scope="col" class=""> Price </th>
+                        <th scope="col" class=""> Action </th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y">
+                    <tr class="bdr-b bdr-light">
+                        <th scope="row" class=""> Apple MacBook Pro 17" </th>
+                        <td class=""> Silver </td>
+                        <td class=""> Laptop </td>
+                        <td class=""> $2999 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="bdr-b bdr-light">
+                        <th scope="row" class=""> Microsoft Surface Pro </th>
+                        <td class=""> White </td>
+                        <td class=""> Laptop PC </td>
+                        <td class=""> $1999 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="bdr-b bdr-light">
+                        <th scope="row" class=""> Magic Mouse 2 </th>
+                        <td class=""> Black </td>
+                        <td class=""> Accessories </td>
+                        <td class=""> $99 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="bdr-b bdr-light">
+                        <th scope="row" class=""> Google Pixel Phone </th>
+                        <td class=""> Gray </td>
+                        <td class=""> Phone </td>
+                        <td class=""> $799 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="bdr-blue-40">
+                        <th scope="row" class=""> Apple Watch 5 </th>
+                        <td class=""> Red </td>
+                        <td class=""> Wearables </td>
+                        <td class=""> $999 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <hr>
+        <div class="overflow-x-auto rounded-lg">
+            <table>
+                <thead class="txt-upper txt-white bg-blue-600">
+                    <tr>
+                        <th scope="col" class=""> Product name </th>
+                        <th scope="col" class=""> Color </th>
+                        <th scope="col" class=""> Category </th>
+                        <th scope="col" class=""> Price </th>
+                        <th scope="col" class=""> Action </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr class="bg-blue-500 bdr-b bdr-light">
+                        <th scope="row" class=""> Apple MacBook Pro 17" </th>
+                        <td class=""> Silver </td>
+                        <td class=""> Laptop </td>
+                        <td class=""> $2999 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="bg-blue-500 bdr-b bdr-light">
+                        <th scope="row" class="">
+                            Microsoft Surface Pro
+                        </th>
+                        <td class=""> White </td>
+                        <td class=""> Laptop PC </td>
+                        <td class=""> $1999 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="bg-blue-500 bdr-b bdr-light">
+                        <th scope="row" class=""> Magic Mouse 2 </th>
+                        <td class=""> Black </td>
+                        <td class=""> Accessories </td>
+                        <td class=""> $99 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="bg-blue-500 bdr-b bdr-light">
+                        <th scope="row" class=""> Google Pixel Phone </th>
+                        <td class=""> Gray </td>
+                        <td class=""> Phone </td>
+                        <td class=""> $799 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                    <tr class="bg-blue-500 bdr-blue-40">
+                        <th scope="row" class=""> Apple Watch 5 </th>
+                        <td class=""> Red </td>
+                        <td class=""> Wearables </td>
+                        <td class=""> $999 </td>
+                        <td class=""> <a href="#">Edit</a> </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="flex gap-1 va-c">
+        <div class="bx tac wh-5 pink lh-1 rounded-xs">xs</div>
+        <div class="bx tac wh-5 pink lh-1 rounded-sm">sm</div>
+        <div class="bx tac wh-5 pink lh-1 rounded">base</div>
+        <div class="bx tac wh-5 pink lh-1 rounded-lg">lg</div>
+        <div class="bx tac wh-5 pink lh-1 rounded-xl">xl</div>
+        <div class="bx tac wh-5 pink lh-1 rounded-full">full</div>
+    </div>
+    <section class="container maxw-md mt-2 ">
+    </section>
     <div>
         <header id="nk-header" class="container py">
             <div class="container flex space-between">
@@ -237,6 +429,7 @@
                             <li><a class="menu-item" href="">Parent</a></li>
                             <li><a class="menu-item active" href="">Active</a></li>
                         </ul>
                     </div>
                     <h4>Collapse</h4>
                 </div>
@@ -244,6 +437,15 @@
             <section id="button-theme-examples">
                 <div class="container">
                     <h2 class="title txt-3">Buttons</h2>
+                    <h4>Button sizes</h4>
+                    <div class="flex va-c space-x-05">
+                        <button class="btn primary xs">Extra Small</button>
+                        <button class="btn primary sm">Small</button>
+                        <button class="btn primary">Base</button>
+                        <button class="btn primary lg">Large</button>
+                        <button class="btn primary xl">Extra Large</button>
+                    </div>
+                    <h4>Buttons with icon (TBD)</h4>
                     <h4>Base Colors</h4>
                     <div class="grid-1 cols-9">
                         <button class="btn stone">stone</button>
@@ -360,6 +562,26 @@
             </section>
             <section id="button-and-form-controls">
                 <div class="container">
+                    <label><input type="radio" name="abc">Default Radio</label>
+                    <label><input type="radio" name="abc">Checked State</label>
+                    <div class="frm-row">
+                        <label><input type="radio" name="abc">Default Radio</label>
+                        <label><input type="radio" name="abc">Checked State</label>
+                    </div>
+                    <hr>
+                    <label><input class="wh-3" type="radio" name="abc">Default Radio</label>
+                    <label><input class="wh-3" type="radio" name="abc">Checked State</label>
+                    <hr>
+                    <label class="inline-flex va-c"><input class="wh-3" type="radio" name="abc">Default Radio</label>
+                    <label class="inline-flex va-c"><input class="wh-3" type="radio" name="abc">Checked State</label>
                     <h2 class="title">Buttons and Form Controls</h2>
                     <div class="my">
@@ -378,7 +600,7 @@
                     <div class="frm-row">
                         <label for="error" class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500">Your name</label>
-                        <input type="text" id="error" class="bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500" placeholder="Error input">
+                        <input type="text" id="error" class="bg-red-50 bdr bdr-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 dark:bg-gray-700 focus:bdr-red-500 block w-full p-2.5 dark:text-red-500 dark:placeholder-red-500 dark:bdr-red-500" placeholder="Error input">
                         <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oh, snapp!</span> Some error message.</p>
                     </div>
@@ -418,7 +640,7 @@
                 </div>
             </section>
-            <select id="countries" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+            <select id="countries" class="bg-gray-50 bdr bdr-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:bdr-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:bdr-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:bdr-blue-500">
                 <option selected>Choose a country</option>
                 <option value="US">United States</option>
                 <option value="CA">Canada</option>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "nk_jtb",
     "description": "Yet another utility based framework.",
-    "version": "0.8.7",
+    "version": "0.9.0",
     "repository": {
         "type": "git",
         "url": "https://github.com/naykel76/nk_jtb.git"
@@ -22,11 +22,11 @@
     },
     "devDependencies": {
         "@fullhuman/postcss-purgecss": "^5.0.0",
-        "alpinejs": "^3.12",
-        "autoprefixer": "^10.4.14",
-        "postcss": "^8.4.24",
-        "postcss-cli": "^10.1.0",
-        "sass": "^1.60.0",
-        "vite": "^4.2.1"
+        "alpinejs": "^3.13",
+        "autoprefixer": "^10.4.16",
+        "postcss": "^8.4.33",
+        "postcss-cli": "^11.0.0",
+        "sass": "^1.69.7",
+        "vite": "^5.0.11"
     }
 }

package/readme.md CHANGED Viewed

@@ -2,7 +2,23 @@
 # NAYKEL JTB
-Yet another utility based framework.
+Why!
 > Because without reinventing the wheel we wouldn’t have fast cars.
 > -- Nathan Watts
+**How can I add a value to a utility map?**
+**How can I override a value in a utility map?**
+**How can I override all values in utility map?**
+**How can I add a value to a property map?**
+    height: (
+        prefix: "h-",
+        values: ( full: 100%, screen: 100vh, fit: fit-content, max: max-content, min: min-content ),
+    )

package/src/_nk.scss CHANGED Viewed

@@ -1,9 +1,40 @@
-@use "./base/vars_all" as *;
+@use "./variables" as *;
 @use "./mixins/media" as *;
+// ==========================================================================
+// -- LAYOUT ELEMENTS --
+// ==========================================================================
+body {
+    min-height: 100vh; // set height to push footer to the bottom
+    display: flex;
+    flex-direction: column;
+}
 #nk-header {
     background: $header-bg;
-    margin: 0; // override spacing
+}
+#nk-main {
+    flex: 1; // 1. allow to grow to fill height
+    background-color: $main-bg;
+}
+#nk-footer {
+    background-color: $footer-bg;
+    margin-top: auto; // force footer to the bottom
+    color: #ccc;
+}
+.copyright {
+    color: $copyright-text-color;
+    background-color: $copyright-bg;
+    padding: 0.5rem;
+    text-align: center;
+    font-size: 0.9rem;
+    border: 0; // remove border from colour scheme
+    width: 100%;
+    margin-top: 0;
 }
 // ==========================================================================
@@ -20,6 +51,7 @@
     margin-top: $content-gap;
     font-size: 0.85em;
 }
 code-first-col {
     + table tbody {
         @extend %markdown-table;
@@ -28,6 +60,7 @@ code-first-col {
         }
     }
 }
 code-second-col {
     + table tbody {
         @extend %markdown-table;
@@ -73,11 +106,6 @@ code-first-second-col {
     margin-bottom: 1.5em;
 }
-// this is a hack solution to an ugly problem when using x-gt-markdown
-.markdown pre {
-    overflow: auto;
-}
 .markdown {
     // hack to remove indented when using @verbatim
     .-ml-2 pre code {
@@ -116,12 +144,13 @@ code-first-second-col {
         margin-bottom: $content-gap;
     }
-    h2::before {
-        content: " ";
-        display: block;
-        width: 100%;
-        margin-bottom: 2rem;
-        height: 12px;
-        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");
-    }
+    // squiggle line
+    // h2::before {
+    //     content: " ";
+    //     display: block;
+    //     width: 100%;
+    //     margin-bottom: 2rem;
+    //     height: 12px;
+    //     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");
+    // }
 }

package/src/base/_base.scss CHANGED Viewed

@@ -1,5 +1,4 @@
-@use "./vars_base" as *;
-@use "./vars_colors" as *;
+@use "../variables" as *;
 // 1. Remove the default margin and padding and opt-in as needed
@@ -99,12 +98,19 @@ strong {
     font-weight: bolder;
 }
+//
+pre {
+    overflow: auto;
+    white-space: pre;
+    word-wrap: normal;
+}
 code,
 kbd,
 samp,
 pre {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    font-size: 1rem;
+    font-size: .875rem;
     color: #f0506e;
     border-radius: 0.25rem;
 }
@@ -113,7 +119,6 @@ pre {
 pre code {
     line-height: 1.8;
     padding: 1.25rem !important; // 1
-    // overflow: auto;
 }
 small {
@@ -140,26 +145,27 @@ sup {
 // -- Tables --
 // ==========================================================================
-// do not create to much opinion here, just enough to look
-// respectable out of the box!
+//
 table {
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse;
-    width: 100%; // !!
+    width: 100%;
 }
-th {
+thead {
     font-weight: 600;
-    background: #f8fafc; //
+    background: #f9fafb;
+    font-size: 0.875rem;
+    vertical-align: middle;
 }
 th,
 td {
-    padding: 0.25em; // give some breathing space by default
+    padding-inline: 1rem;
+    padding-block: 0.75rem;
+    vertical-align: inherit;
     text-align: left;
-    vertical-align: top;
 }
 // 1. Change the font styles in all browsers.
@@ -290,6 +296,8 @@ nav ul {
     list-style: none;
     margin: 0; // reset nested
 }
+// -- Controls --
 // ==========================================================================
 // 1. Prevent resizing textareas horizontally by default.

package/src/base/_content_gap.scss ADDED Viewed

@@ -0,0 +1,33 @@
+@use "../variables" as *;
+// any adjacent (excludes first child)
+:where(blockquote, p, pre, form, table, ol, ul, h1, h2, h3, h4, h5, h6) + * {
+    margin-top: $content-gap;
+}
+// this may be more hassle than it is worth but it is handy to place elements
+// with the need for a wrapper element.
+* + :where(table, form) {
+    margin-top: $content-gap;
+}
+:where(.bx, .bx-title, .bx-content, .frm-row, .container) + :where(*):not(.dd-content) {
+    margin-top: $content-gap;
+}
+// exclude section to give more control
+:where([class^="flex"], [class^="grid"]) + :where(*):not(:is([class*="flex"], [class*="grid"], section)) {
+    margin-top: $content-gap;
+}
+// opt-out
+// - Remove margin from all direct child elements of "flex" or
+//   "grid" because it is too inconsistent to manage.
+// - excluding .flex + input is experimental.the exclusion makes it
+//   easier to add tool-tips with a label
+:is([class*="flex"], [class*="grid"]) > *,
+.flex + input {
+    margin: 0;
+}

package/src/base/_root.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@use "./vars_colors" as *;
+@use "../variables" as *;
 :root {
     // create css variables

package/src/base/index.scss ADDED Viewed

@@ -0,0 +1,3 @@
+@forward "./base";
+@forward "./content_gap";
+@forward "./root";

package/src/color/_shades.scss CHANGED Viewed

@@ -1,18 +1,35 @@
-@use "../base/vars_colors" as *;
-@use "../config" as *;
-@use "../functions/get" as *;
-@use "../mixins/colorShadeClasses" as *;
+@use "../mixins/common" as *;
+// @use "../mixins/magicClassGenerators" as *;
+// @use "sass:map";
-@if (get("shades.create-base", $config)) {
-    @each $color, $value in $base-colors {
-        @include colorShadeClasses($color, $value);
-    }
-}
+// @use "../variables" as *;
+// @use "../config" as *;
+// @use "../functions/get" as *;
+// @use "../mixins/colorThemeGenerators" as *;
-@if (get("shades.create-theme", $config)) {
-    @each $color, $value in $base-colors {
-        @include colorShadeClasses($color, $value);
-    }
-}
+// just use tailwind???
+// @if (get("shades.create-base", $config)) {
+//     @each $color, $value in $base-colors {
+//         @include colorShadeClasses($color, $value);
+//     }
+// }
+// @if (get("shades.create-theme", $config)) {
+//     @each $color, $value in $base-colors {
+//         @include colorShadeClasses($color, $value);
+//     }
+// }
+// prettier-ignore
+$colors-map: (
+    background-color: (
+        prefix: #{$bg-identifier},
+        values:( white, black ),
+        breakpoints: ("sm", "md", "lg", "xl")
+    ),
+);
+@include generate-utilities($colors-map);