@nulllogic/scssleon 1.0.39 → 1.1.0

package/scss/components/_container.scss

@@ -3,36 +3,38 @@
 │  │ ││││ │ ├─┤││││├┤ ├┬┘
 └─┘└─┘┘└┘ ┴ ┴ ┴┴┘└┘└─┘┴└─
 **/
+@use 'sass:map';
 
-@use "sass:map";
-@use "../themes/default" as theme;
-@use "../functions" as functions;
+@use '../functions' as functions;
 @use "../mixins" as mixins;
 
 $config: nil !default;
 $theme: nil !default;
 
-$prefix: functions.get-config($config, "prefix");
-$color_scheme: functions.get-config($config, "color-scheme");
+$prefix: functions.get-config($config, 'prefix');
+$color_scheme: functions.get-config($config, 'color-scheme');
 
-$breakpoints: functions.get-config($config, "breakpoints");
+$breakpoints: functions.get-config($config, 'breakpoints');
 
-$container-component: functions.get-theme($theme, "components.container");
+$container-component: functions.get-theme($theme, 'components.container');
 
 // Container
-@each $name, $size in $breakpoints {
-  @include mixins.breakpoint($size, "min") {
-    .container.#{$name} {
-      max-width: $size;
-      @include mixins.generate-properties(
-        "container",
-        $container-component,
-        $config
-      );
+.container {
+  @include mixins.generate-properties(
+      'container',
+      $container-component,
+      $config
+  );
+
+  @each $name, $size in $breakpoints {
+    @include mixins.breakpoint($size, 'min') {
+      &.#{$name} {
+        max-width: $size;
+      }
     }
   }
-}
 
+}
 /**
 ==[ Note ]==
 We are using mixin here, because @include is not working with @media query in SCSS | 07.12.2023

package/scss/components/_dropdown.scss

@@ -6,4 +6,10 @@
 
 /* Load mixins/functions */
 @use '../mixins' as mixins;
-@use '../functions' as functions;
+@use '../functions' as functions;
+
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component('dropdown', 'dropdown', $config, $theme);

package/scss/components/_form.scss

@@ -1,50 +1,9 @@
-@use '../config';
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@use '../forms/label' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/input' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/select' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/radio' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/checkbox' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/range' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/switch' with (
-  $config : $config,
-  $theme : $theme
-);
-
-
-//@forward '../forms/form-text';
-//@forward '../forms/form-control';
-//@forward '../forms/form-select';
-//@forward '../forms/form-check';
-//@forward '../forms/form-range';
-//@forward '../forms/input-group';
-//@forward '../forms/validation';
+@include mixins.generate-component('form', 'form', $config, $theme);

package/scss/components/_megamenu.scss

@@ -0,0 +1,15 @@
+/*
+┬  ┌─┐┌─┐┌┬┐┌─┐┬─┐
+│  │ │├─┤ ││├┤ ├┬┘
+┴─┘└─┘┴ ┴─┴┘└─┘┴└─
+*/
+
+/* 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('megamenu', 'megamenu', $config, $theme);

package/scss/components/_placeholder.scss

@@ -12,23 +12,4 @@
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component(
-  'placeholder',
-  'placeholder',
-  $config,
-  $theme
-);
-
-@keyframes placeholder-glow {
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes placeholder-wave {
-  100% {
-    mask-position: -200% 0;
-    -webkit-mask-position: -200% 0;
-  }
-}
-
+@include mixins.generate-component('placeholder', 'placeholder', $config, $theme);

package/scss/components/_tooltip.scss

@@ -0,0 +1,15 @@
+/*
+┌┬┐┌─┐┌─┐┬ ┌┬┐┬┌─┐
+ │ │ ││ ││  │ │├─┘
+ ┴ └─┘└─┘┴─┘┴ ┴┴
+*/
+
+/* 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('tooltip', 'has-tooltip', $config, $theme, (variable: (name : 'tooltip')));

package/scss/forms/_checkbox.scss

@@ -10,5 +10,5 @@ $theme: nil !default;
   'form.checkbox',
   'checkbox',
   $config,
-  $theme
+  $theme,
 );

package/scss/mixins/generators/_components.scss

@@ -1,38 +1,53 @@
 @use 'sass:map';
 @use 'sass:meta';
+@use 'sass:list';
+@use 'sass:string';
 
 @use 'properties';
-@use 'wrapper';
 
 @use '../../functions' as functions;
 
-@mixin generate-component($component, $class, $config, $theme) {
+@mixin generate-component($component, $class, $config, $theme, $options : ()) {
   $theme-component: '';
+  $color_scheme: functions.get-config($config, 'color-scheme');
 
-  // Checking, if the component was previously defined inside theme components
+  // 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
+        $theme,
+        'components' + '.' + $component
     );
   } @else {
     $theme-component: $component;
   }
 
-  %#{$class} {
-    @include properties.generate-properties($class, $theme-component, $config);
+  .#{$class} {
+    @include properties.generate-properties($class, $theme-component, $config, $options);
   }
 
-  @include wrapper.generate-wrapper($config) {
-    .#{$class} {
-      @extend %#{$class};
-    }
-  }
 }
 
-//@mixin generate-components($component, $class, $config, $theme) {
-
-@mixin get-structure ($component) {
-  @debug $component;
+@mixin generate-components($components, $config, $theme) {
+
+  // Get components
+  @each $component in $components {
+    // Component options param check
+    @if (list.length($component) > 2) {
+      @include generate-component(
+          list.nth($component, 1),
+          list.nth($component, 2),
+        $config: $config,
+        $theme: $theme,
+        $options: list.nth($component, 3),
+      )
+    } @else {
+      @include generate-component(
+          list.nth($component, 1),
+          list.nth($component, 2),
+        $config: $config,
+        $theme: $theme,
+      )
+    }
+  }
 }

package/scss/mixins/generators/_properties.scss

@@ -1,106 +1,226 @@
 @use "sass:meta";
 @use "sass:string";
 @use "sass:map";
+@use "sass:list";
 
 @use "../../functions" as functions;
-@use "../../mixins/generators/color-sheme" as mixin;
 
-@mixin generate-css-properties($tag, $property, $value, $config) {
-  $prefix: functions.get-config($config, "prefix");
+@mixin generate-css-properties($tag, $property, $value, $config, $options : ()) {
 
-  --#{$prefix}-#{$tag}-#{functions.replace($property, '--', '')}: #{meta.inspect(
+  $prefix: functions.get-config($config, 'prefix');
+
+  $variable_options_custom_name: functions.get-config($options, 'variable.name');
+  $variable_options_exclude: functions.get-config($options, 'variable.exclude');
+
+  $variable_name: $tag;
+
+  $exclude: false;
+
+  @if ($variable_options_custom_name != nil) {
+    $variable_name: $variable_options_custom_name;
+  }
+
+  @if ($variable_options_exclude != nil) {
+
+    @if (meta.type-of($variable_options_exclude) == list) {
+      @each $variable_to_exclude in $variable_options_exclude {
+        @if string.index($property, --#{$variable_to_exclude}) {
+          $exclude: true
+        }
+      }
+    }
+
+    @if (meta.type-of($variable_options_exclude) == string) {
+      @if string.index($property, --#{$variable_options_exclude}) {
+        $exclude: true
+      }
+    }
+  }
+
+  @if ($exclude != true) {
+    --#{$prefix}-#{$variable_name}-#{functions.replace($property, '--', '')}: #{meta.inspect(
+      $value
+    )};
+  } @else {
+    --#{$prefix}-#{functions.replace($property, '--', '')}: #{meta.inspect(
       $value
     )};
+  }
+
+}
+
+@mixin generate-print-variables($tag, $value, $config, $options) {
+  @media print {
+    @include generate-properties($tag, $value, $config, $options);
+  }
 }
 
-@mixin generate-css-variables($tag, $property, $value, $config) {
-  $prefix: functions.get-config($config, "prefix");
+@mixin generate-rtl-variables($tag, $value, $config, $options) {
+  &:where(:dir(rtl),[dir=rtl],[dir=rtl] *) {
+    @include generate-properties($tag, $value, $config, $options);
+  }
+}
+
+@mixin generate-css-variables($tag, $property, $value, $config, $options) {
+  $prefix: functions.get-config($config, 'prefix');
+
+  $variable_options_custom_name: functions.get-config($options, 'variable.name');
+  $variable_options_exclude: functions.get-config($options, 'variable.exclude');
+
+  $variable_name: $tag;
+
+  @if ($variable_options_custom_name != nil) {
+    $variable_name: $variable_options_custom_name;
+  }
+
+  @if (meta.type-of($value) == 'string' and string.index($value, 'var(--') == 1) {
 
-  @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) {
+        functions.replace($value, '--', '--' + $prefix + '-' + $variable_name + '-')
+      )};
+
+  } @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-"
+          'global(--',
+          '--' + $prefix + '-root-'
         )
       )};
+
   } @else {
+
     #{$property}: #{meta.inspect($value)};
+
   }
 }
 
-@mixin generate-colors($tag, $value, $config) {
-  $prefix: functions.get-config($config, "prefix");
+@mixin generate-colors($tag, $value, $config, $options) {
+  $prefix: functions.get-config($config, 'prefix');
 
   @each $color, $color-properties in $value {
-    @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.replace($color-property, '--', '')}: #{meta.inspect(
-              $color-value
-            )};
-          }
+    @if ($color == 'light') {
+      @each $color-property, $color-value in $color-properties {
+        @include generate-css-properties($tag, $color-property, $color-value, $config, $options);
+      }
+    }
+    @if ($color == 'dark') {
+      &:where([data-theme="#{$color}"], [data-theme="#{$color}"] *) {
+        @each $color-property, $color-value in $color-properties {
+          @include generate-css-properties($tag, $color-property, $color-value, $config, $options);
         }
       }
     }
   }
 }
 
-@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);
   }
 }
 
 @mixin generate-responsive($tag, $properties, $config) {
-  $breakpoints: functions.get-config($config, "breakpoints");
+  $breakpoints: functions.get-config($config, 'breakpoints');
+
+  @each $property, $value in $properties {
+    $has-matched-breakpoint: false;
+
+    @each $breakpoint, $width in $breakpoints {
+      @if ($property == $breakpoint) {
+        $has-matched-breakpoint: true;
+      }
+    }
+
+    @if ($has-matched-breakpoint) {
+      $width: map.get($breakpoints, $property);
+
+      @media (min-width: $width) {
+        @include generate-properties($tag, $value, $config);
+      }
+
+    } @else {
+      @warn '❗️Invalid breakpoint '#{$property}'.';
+    }
 
-  @each $breakpoint, $value in $breakpoints {
-    $property: map.get($properties, $breakpoint);
+  }
+}
 
-    @if $property != null {
-      @media (min-width: $value) {
-        @include generate-properties($tag, $property, $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) {
+  @each $name, $properties in $value {
+    // Check, if _animation is not empty ;;
+    @if (meta.type-of($properties) != 'list') {
+      @keyframes #{$name} {
+        @each $offset, $offset-value in $properties {
+          #{$offset} {
+            @include generate-properties($tag, $offset-value, $config, $options);
+          }
+        }
       }
     }
   }
 }
 
-@mixin generate-properties($tag, $properties, $config) {
-  $prefix: functions.get-config($config, "prefix");
+@mixin generate-properties($tag, $properties, $config, $options : ()) {
+  $prefix: functions.get-config($config, 'prefix');
 
   @each $property, $value in $properties {
     // Variables
     // Looking for "--" symbols in the beginning of the property
     // Example: --flex-direction : row
     @if (
-      meta.type-of($property) == "string" and string.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") {
-      @include generate-colors($tag, $value, $config);
+    // Colors
+    @else if ($property == '_colors') {
+      @include generate-colors($tag, $value, $config, $options);
     }
 
-      // Responsive
-    @else if ($property == "responsive") {
+    // Responsive
+    @else if ($property == '_responsive') {
       @include generate-responsive($tag, $value, $config);
     }
 
-      // Subclasses
-    @else if ($property == "subclasses") {
+    // Subclasses
+    @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);
       }
+    }
+
+    // At-rules
+    @else if ($property == '_atrule') {
+      @include generate-atrule($tag, $value, $config, $options);
+    }
+
+    // Print media query
+    @else if ($property == '_print') {
+      @include generate-print-variables($tag, $value, $config, $options);
+    }
+
+    // RTL support
+    @else if ($property == '_rtl') {
+      @include generate-rtl-variables($tag, $value, $config, $options);
+    }
+
+    // Animations
+    @else if ($property == '_animations') {
+      @include generate-animation($tag, $value, $config, $options);
     } @else {
-      @include generate-css-variables($tag, $property, $value, $config);
+      @include generate-css-variables($tag, $property, $value, $config, $options);
     }
   }
-}
+}