@nulllogic/scssleon 1.0.3 → 1.0.4

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/_utilities.scss

@@ -12,4 +12,4 @@
       #{$property} : #{$value};
     }
   }
-}
+}

package/scss/mixins/generators/_components.scss

@@ -1,27 +1,27 @@
-@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: "";
+@mixin generate-component($component, $class, $config, $theme, $options : ()) {
+  $theme-component: '';
 
-  // Checking, if the component was previously defined inside theme components
-  @if (meta.type-of($component) == "string") {
+  // Checking, if the component was previously defined inside theme's components
+  @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;
   }
 
   %#{$class} {
-    @include properties.generate-properties($class, $theme-component, $config);
+    @include properties.generate-properties($class, $theme-component, $config, $options);
   }
 
   @include wrapper.generate-wrapper($config) {
@@ -31,3 +31,8 @@
   }
 }
 
+//@mixin generate-components($component, $class, $config, $theme) {
+
+@mixin get-structure ($component) {
+  @debug $component;
+}

package/scss/mixins/generators/_properties.scss

@@ -5,11 +5,15 @@
 @use "../../functions" as functions;
 @use "../../mixins/generators/color-sheme" as mixin;
 
-@mixin generate-css-properties($tag, $property, $value, $config) {
+@mixin generate-css-properties($tag, $property, $value, $config, $options : ()) {
   $prefix: functions.get-config($config, "prefix");
 
-  & {
-    --#{$prefix}-#{$tag}-#{functions.str-replace($property, '--', '')}: #{meta.inspect(
+  @if(functions.get-config($options, 'add_pseudo_tag') != nil and functions.get-config($options, 'add_pseudo_tag') == false) {
+    --#{$prefix}-#{functions.replace($property, '--', '')}: #{meta.inspect(
+      $value
+    )};
+  } @else {
+    --#{$prefix}-#{$tag}-#{functions.replace($property, '--', '')}: #{meta.inspect(
       $value
     )};
   }
@@ -18,26 +22,20 @@
 @mixin generate-css-variables($tag, $property, $value, $config) {
   $prefix: functions.get-config($config, "prefix");
 
-  @if (meta.type-of($value) == "string" and str-index($value, "var(--") == 1) {
-    & {
-      #{$property}: #{meta.inspect(
-        functions.str-replace($value, "--", "--" + $prefix + "-" + $tag + "-")
-      )};
-    }
-  } @else if (type-of($value) == "string" and str-index($value, "var(global(") == 1) {
-    & {
-      #{$property}: #{meta.inspect(
-        functions.str-replace(
+  @if (meta.type-of($value) == "string" and string.index($value, "var(--") == 1) {
+    #{$property}: #{meta.inspect(
+      functions.replace($value, "--", "--" + $prefix + "-" + $tag + "-")
+    )};
+  } @else if (meta.type-of($value) == "string" and string.index($value, "var(global(") == 1) {
+    #{$property}: #{meta.inspect(
+        functions.replace(
           string.slice($value, 0, string.length($value) - 1),
           "global(--",
           "--" + $prefix + "-root-"
         )
       )};
-    }
   } @else {
-    & {
-      #{$property}: #{meta.inspect($value)};
-    }
+    #{$property}: #{meta.inspect($value)};
   }
 }
 
@@ -45,15 +43,13 @@
   $prefix: functions.get-config($config, "prefix");
 
   @each $color, $color-properties in $value {
-    @each $scheme in functions.str-split(functions.get-config($config, "color-scheme"), " ") {
+    @each $scheme in string.split(functions.get-config($config, "color-scheme"), " ") {
       @if $scheme == $color {
         @include mixin.generate-color-scheme($color) {
           @each $color-property, $color-value in $color-properties {
-            & {
-              --#{$prefix}-#{$tag}-#{functions.str-replace($color-property, '--', '')}: #{meta.inspect(
-                $color-value
-              )};
-            }
+            --#{$prefix}-#{$tag}-#{functions.replace($color-property, '--', '')}: #{meta.inspect(
+              $color-value
+            )};
           }
         }
       }
@@ -61,9 +57,9 @@
   }
 }
 
-@mixin generate-subclasses($tag, $class, $properties, $config) {
+@mixin generate-subclasses($tag, $class, $properties, $config, $options : ()) {
   #{$class} {
-    @include generate-properties($tag, $properties, $config);
+    @include generate-properties($tag, $properties, $config, $options);
   }
 }
 
@@ -81,7 +77,20 @@
   }
 }
 
-@mixin generate-properties($tag, $properties, $config) {
+@mixin generate-atrule($tag, $value, $config, $options) {
+  @each $at-rule, $properties in $value {
+    // Keep @ at the beginning
+    @#{functions.replace($at-rule, '@', '')} {
+      @include generate-properties($tag, $properties, $config, $options);
+    }
+  }
+}
+
+@mixin generate-animation($tag, $value, $config, $options) {
+
+}
+
+@mixin generate-properties($tag, $properties, $config, $options : ()) {
   $prefix: functions.get-config($config, "prefix");
 
   @each $property, $value in $properties {
@@ -89,27 +98,32 @@
     // Looking for "--" symbols in the beginning of the property
     // Example: --flex-direction : row
     @if (
-        meta.type-of($property) == "string" and str-index($property, "--") == 1
+        meta.type-of($property) == "string" and string.index($property, "--") == 1
     ) {
-      @include generate-css-properties($tag, $property, $value, $config);
+      @include generate-css-properties($tag, $property, $value, $config, $options);
     }
 
-      // Colors
-    @else if ($property == "colors") {
+    // Colors
+    @else if ($property == "_colors") {
       @include generate-colors($tag, $value, $config);
     }
 
-      // Responsive
-    @else if ($property == "responsive") {
+    // Responsive
+    @else if ($property == "_responsive") {
       @include generate-responsive($tag, $value, $config);
     }
 
-      // Subclasses
-    @else if ($property == "subclasses") {
+    // Sub classes
+    @else if ($property == "_subclasses") {
       @each $class, $class_properties in $value {
-        @include generate-subclasses($tag, $class, $class_properties, $config);
+        @include generate-subclasses($tag, $class, $class_properties, $config, $options);
       }
-    } @else {
+    }
+    // At-rules
+    @else if ($property == "_atrule") {
+      @include generate-atrule($tag, $value, $config, $options);
+    }
+    @else {
       @include generate-css-variables($tag, $property, $value, $config);
     }
   }

package/scss/scssleon.scss

@@ -1,3 +1,7 @@
+@charset "UTF-8";
+@use "./mixins" as mixins;
+@use "./functions" as functions;
+
 /*
  * ------------------------------------------------------------------
  * ███████╗ ██████╗ ██████╗███████╗██╗     ███████╗ ██████╗ ███╗   ██╗
@@ -44,15 +48,13 @@ $theme: (
 // ↓ Theme
 /* Override default settings in the theme | @example */
 @use "themes/default" as theme with (
-  $theme: $theme
+  $theme: $theme,
 );
 
 // Getting updated variables
 $config: config.$config;
 $theme: theme.$theme;
 
-/* Main configuration END
--------------------------------------------------------*/
 
 /* ------------------------------------------------------------------
  * Loading modules - this is default configuration with all modules enabled
@@ -64,13 +66,13 @@ $theme: theme.$theme;
   $theme: $theme
 );
 
-// Great reset
+// ↓ Great reset
 @use "reset" with (
   $config: $config,
   $theme: $theme
 );
 
-// Base
+// ↓ Base
 // Special utility, that will dynamically generate CSS
 // properties for HTML tags, specified in theme
 @use "base" with (
@@ -78,7 +80,7 @@ $theme: theme.$theme;
   $theme: $theme
 );
 
-// Amazing content
+// ↓ Amazing content
 // Special class `.content` to allow formatting of the default html tags
 @use "content" with (
   $config: $config,
@@ -129,11 +131,13 @@ $theme: theme.$theme;
   $theme: $theme
 );
 
+// ↓ Alert
 @use "components/alert" with (
   $config: $config,
   $theme: $theme
 );
 
+// ↓ Accordion
 @use "components/accordion" with (
   $config: $config,
   $theme: $theme