@nulllogic/scssleon 1.0.33 → 1.0.36

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nulllogic/scssleon",
   "description": "Most advanced, simple and clean SCSS framework",
-  "version": "1.0.33",
+  "version": "1.0.36",
   "version_short": "1.0",
   "keywords": [
     "css",
@@ -23,8 +23,10 @@
     "docs-build": "docker run --rm -it -v $(pwd):/src klakegg/hugo:alpine",
     "docs-serve": "docker run --rm -it -v $(pwd):/src -p 1313:1313 klakegg/hugo:alpine server"
   },
+  "dependencies": {
+    "sass": "^1.77.8"
+  },
   "devDependencies": {
-    "sass": "^1.77.8",
     "clean-css": "^5.3.3"
   },
   "homepage": "https://nulllogic.github.io/scssleon-docs",
@@ -38,5 +40,8 @@
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/nulllogic/scssleon/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   }
 }

package/scss/_base.scss

@@ -4,28 +4,16 @@
 └─┘┴ ┴└─┘└─┘
 */
 
-@use "sass:map";
-@use "sass:meta";
-@use "functions" as functions;
-@use "mixins" as mixins;
+/* Load settings and functions */
+@use 'mixins' as mixins;
+@use 'functions' as functions;
 
+/* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-$prefix: functions.get-config($config, "prefix");
-
-$is-reset-enabled: functions.get-config($config, "enable.reset");
-$is-button-pointers-enabled: functions.get-config(
-  $config,
-  "enable.button-pointers"
-);
-
-$is-spacing-enabled: functions.get-config($config, "enable.spacing");
-
-$color_scheme: functions.get-config($config, "color-scheme");
-
-@each $tag, $properties in functions.get-theme($theme, "html") {
+@each $tag, $properties in functions.get-theme($theme, 'html') {
   #{$tag} {
     @include mixins.generate-properties(#{$tag}, $properties, $config);
   }
-}
+}

package/scss/components/_accordion.scss

@@ -4,12 +4,12 @@
 ┴ ┴└─┘└─┘└─┘┴└──┴┘┴└─┘┘└┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("accordion", "accordion", $config, $theme);
+@include mixins.generate-component('accordion', 'accordion', $config, $theme);

package/scss/components/_alert.scss

@@ -4,12 +4,12 @@
 ┴ ┴┴─┘└─┘┴└─ ┴ └─┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("alert", "alert", $config, $theme);
+@include mixins.generate-component('alert', 'alert', $config, $theme);

package/scss/components/_badge.scss

@@ -4,12 +4,12 @@
 └─┘┴ ┴─┴┘└─┘└─┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("badge", "badge", $config, $theme);
+@include mixins.generate-component('badge', 'badge', $config, $theme);

package/scss/components/_breadcrumb.scss

@@ -4,12 +4,12 @@
 └─┘┴└─└─┘┴ ┴─┴┘└─┘┴└─└─┘┴ ┴└─┘└─┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("breadcrumb", "breadcrumb", $config, $theme);
+@include mixins.generate-component('breadcrumb', 'breadcrumb', $config, $theme);

package/scss/components/_button.scss

@@ -4,12 +4,12 @@
 └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("button", "btn", $config, $theme);
+@include mixins.generate-component('button', 'btn', $config, $theme);

package/scss/components/_button_group.scss

@@ -4,12 +4,12 @@
 └─┘└─┘ ┴  ┴ └─┘┘└┘  └─┘┴└─└─┘└─┘┴
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("button-group", "btn-group", $config, $theme);
+@include mixins.generate-component('button-group', 'btn-group', $config, $theme);

package/scss/components/_card.scss

@@ -4,7 +4,7 @@
 └─┘┴ ┴┴└──┴┘
  */
 
-/* Load settings and functions */
+/* Load mixins/functions */
 @use '../mixins' as mixins;
 @use '../functions' as functions;
 

package/scss/components/_dropdown.scss

@@ -2,4 +2,8 @@
 ┌┬┐┬─┐┌─┐┌─┐┌┬┐┌─┐┬ ┬┌┐┌
  ││├┬┘│ │├─┘ │││ │││││││
 ─┴┘┴└─└─┘┴  ─┴┘└─┘└┴┘┘└┘
- */
+ */
+
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;

package/scss/components/_loader.scss

@@ -4,12 +4,12 @@
 ┴─┘└─┘┴ ┴─┴┘└─┘┴└─
 */
 
-/* Load settings and functions */
-@use "../themes/default" as theme;
-@use "../mixins" as mixins;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("loader", "loader", $config, $theme);
+@include mixins.generate-component('loader', 'loader', $config, $theme);

package/scss/components/_modal.scss

@@ -4,12 +4,12 @@
 ┴ ┴└─┘─┴┘┴ ┴┴─┘
 */
 
-/* Load settings and functions */
-@use "../themes/default" as theme;
-@use "../mixins" as mixins;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("modal", "modal", $config, $theme);
+@include mixins.generate-component('modal', 'modal', $config, $theme);

package/scss/components/_nav.scss

@@ -4,11 +4,12 @@
 ┘└┘┴ ┴ └┘ 
 **/
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("nav", "nav", $config, $theme);
+@include mixins.generate-component('nav', 'nav', $config, $theme);

package/scss/components/_navbar.scss

@@ -4,12 +4,12 @@
 ┘└┘┴ ┴ └┘ ┴└─┘┴ ┴ ┴ ┴└─┘┘└┘
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("navbar", "navbar", $config, $theme);
+@include mixins.generate-component('navbar', 'navbar', $config, $theme);

package/scss/components/_overlay.scss

@@ -4,12 +4,12 @@
 └─┘ └┘ └─┘┴└─┴─┘┴ ┴ ┴
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("overlay", "overlay", $config, $theme);
+@include mixins.generate-component('overlay', 'overlay', $config, $theme);

package/scss/components/_pagination.scss

@@ -4,12 +4,12 @@
 ┴  ┴ ┴└─┘┴┘└┘┴ ┴ ┴ ┴└─┘┘└┘
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("pagination", "pagination", $config, $theme);
+@include mixins.generate-component('pagination', 'pagination', $config, $theme);

package/scss/components/_placeholder.scss

@@ -4,17 +4,17 @@
 ┴  ┴─┘┴ ┴└─┘└─┘┴ ┴└─┘┴─┘─┴┘└─┘┴└─└─┘
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "placeholder",
-  "placeholder",
+  'placeholder',
+  'placeholder',
   $config,
   $theme
 );

package/scss/components/_sidecap.scss

@@ -4,12 +4,12 @@
 └─┘┴─┴┘└─┘└─┘┴ ┴┴
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component("sidecap", "sidecap", $config, $theme);
+@include mixins.generate-component('sidecap', 'sidecap', $config, $theme);

package/scss/components/_table.scss

@@ -4,9 +4,9 @@
  ┴ ┴ ┴└─┘┴─┘└─┘
 */
 
-/* Load settings and functions */
-@use "../mixins" as mixins;
-@use "../functions" as functions;
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;

package/scss/forms/_checkbox.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.checkbox",
-  "checkbox",
+  'form.checkbox',
+  'checkbox',
   $config,
   $theme
 );

package/scss/forms/_input-group.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.input-group",
-  "input-group",
+  'form.input-group',
+  'input-group',
   $config,
   $theme
 );

package/scss/forms/_input.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.input",
-  "input",
+  'form.input',
+  'input',
   $config,
   $theme
 );

package/scss/forms/_label.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.label",
-  "label",
+  'form.label',
+  'label',
   $config,
   $theme
 );

package/scss/forms/_radio.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.radio",
-  "radio",
+  'form.radio',
+  'radio',
   $config,
   $theme
 );

package/scss/forms/_range.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.range",
-  "range",
+  'form.range',
+  'range',
   $config,
   $theme
 );

package/scss/forms/_select.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.select",
-  "select",
+  'form.select',
+  'select',
   $config,
   $theme
 );

package/scss/forms/_switch.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.switch",
-  "switch",
+  'form.switch',
+  'switch',
   $config,
   $theme
 );

package/scss/forms/_validation.scss

@@ -1,14 +1,14 @@
-@use '../themes/default' as theme;
-@use '../functions' as functions;
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
 @include mixins.generate-component(
-  "form.validation",
-  "validation",
+  'form.validation',
+  'validation',
   $config,
   $theme
 );

package/scss/mixins/generators/_components.scss

@@ -1,20 +1,20 @@
-@use "sass:map";
-@use "sass:meta";
+@use 'sass:map';
+@use 'sass:meta';
 
-@use "properties";
-@use "wrapper";
+@use 'properties';
+@use 'wrapper';
 
-@use "../../functions" as functions;
+@use '../../functions' as functions;
 
 @mixin generate-component($component, $class, $config, $theme) {
-  $theme-component: "";
+  $theme-component: '';
 
   // Checking, if the component was previously defined inside theme components
-  @if (meta.type-of($component) == "string") {
+  @if (meta.type-of($component) == 'string') {
     /* Loading component settings and styling */
     $theme-component: functions.get-theme(
       $theme,
-      "components" + "." + $component
+      'components' + '.' + $component
     );
   } @else {
     $theme-component: $component;
@@ -31,3 +31,4 @@
   }
 }
 
+//@mixin generate-components($component, $class, $config, $theme) {

package/scss/themes/_default.scss

@@ -13,15 +13,20 @@ $html-config: (
   html : (
     body : (
       margin: 0,
+
       -webkit-text-size-adjust: 100%,
       font-size : 1rem,
       font-weight: normal,
-      line-height : 1,
       font-family: var(global(--font-family-default)),
+      line-height : 1,
+
       color: var(--color),
       background: var(--background),
+
       text-rendering: optimizelegibility,
       -webkit-font-smoothing: antialiased,
+      font-synthesis-weight: none,
+
       colors: (
         light : (
           background: '#fff',
@@ -45,6 +50,9 @@ $html-config: (
         )
       ),
       subclasses : (
+        "&:hover": (
+          text-decoration: none
+        ),
         "&[target='_blank']" : (
           subclasses : (
             "&:after" : (
@@ -79,6 +87,9 @@ $html-config: (
       height: auto,
       max-width: 100%,
     ),
+    "h1,h2,h3,h4,h5,h6" : (
+      margin: 0
+    ),
     p : (
       margin: 0
     )
@@ -133,7 +144,7 @@ $content-config: (
     ),
     p : (
       margin: 0,
-      padding: 0 0 15px 0
+      padding: 0 0 15px 0,
     ),
     abbr: (
       attributes : (
@@ -288,14 +299,29 @@ $components-config: (
     alert: (
 
       --border-radius: .25rem,
-      --padding: 1.25rem,
+      --grid-template-columns: auto auto 1fr,
+      --gap : 0.5rem,
+      --padding: 0.5rem,
+
+      --left-column-aligment: start,
+      --center-column-alignment: center,
+      --right-column-alignment: end,
 
       box-shadow: var(--shadow),
       background: var(--background),
+      border-radius: var(--border-radius),
 
       outline: 1px solid transparent,
+
       position: relative,
-      display: flex,
+      display: grid,
+      width: 100%,
+      max-width: 100%,
+      align-items: center,
+
+      grid-template-columns: var(--grid-template-columns),
+      grid-gap: var(--gap),
+      padding: var(--padding),
 
       colors: (
         light : (
@@ -307,8 +333,19 @@ $components-config: (
           border: 1px solid rgba(182, 199, 216, .35),
           shadow: string.unquote("inset 0 0.0625rem 0 0 rgba(186, 191, 195, 1), inset 0 0 0 0.0625rem rgba(186, 191, 195, 1)"),
         )
-      )
+      ),
 
+      subclasses : (
+        ".left" : (
+          justify-self: var(--left-column-alignment),
+        ),
+        ".center" : (
+          justify-self: var(--center-column-alignment),
+        ),
+        ".right" : (
+          justify-self: var(--right-column-alignment)
+        ),
+      )
     ),
 
     accordion : (