@nulllogic/scssleon 1.0.4 → 1.0.6

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/_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,18 +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/mixins/generators/_components.scss

@@ -1,38 +1,68 @@
 @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, $options : ()) {
   $theme-component: '';
+  $color_scheme: functions.get-config($config, 'color-scheme');
 
   // 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, $options);
-  }
+  @each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
+
+    @if $scheme == 'light' {
+      .#{$class} {
+        @include properties.generate-properties($class, $theme-component, $config, map.deep-merge((
+          scheme: $scheme,
+        ), $options));
+      }
+    }
 
-  @include wrapper.generate-wrapper($config) {
-    .#{$class} {
-      @extend %#{$class};
+    @if $scheme == 'dark' {
+      .#{$class}:where([data-theme="#{$scheme}"], [data-theme="#{$scheme}"] *) {
+        @include properties.generate-properties($class, $theme-component, $config, map.deep-merge((
+          scheme: $scheme,
+        ), $options));
+      }
     }
   }
+
 }
 
-//@mixin generate-components($component, $class, $config, $theme) {
+@mixin generate-components($components, $config, $theme) {
 
-@mixin get-structure ($component) {
-  @debug $component;
+  // 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,57 +1,96 @@
 @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, $options : ()) {
-  $prefix: functions.get-config($config, "prefix");
 
-  @if(functions.get-config($options, 'add_pseudo_tag') != nil and functions.get-config($options, 'add_pseudo_tag') == false) {
-    --#{$prefix}-#{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}-#{$tag}-#{functions.replace($property, '--', '')}: #{meta.inspect(
+    --#{$prefix}-#{functions.replace($property, '--', '')}: #{meta.inspect(
       $value
     )};
   }
+
 }
 
-@mixin generate-css-variables($tag, $property, $value, $config) {
-  $prefix: functions.get-config($config, "prefix");
+@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, $requested_color : 'light') {
+  $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 == $requested_color) {
+      @each $color-property, $color-value in $color-properties {
+        @include generate-css-properties($tag, $color-property, $color-value, $config, $options);
       }
     }
   }
@@ -64,16 +103,28 @@
 }
 
 @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, $value in $breakpoints {
-    $property: map.get($properties, $breakpoint);
+    @each $breakpoint, $width in $breakpoints {
+      @if ($property == $breakpoint) {
+        $has-matched-breakpoint: true;
+      }
+    }
 
-    @if $property != null {
-      @media (min-width: $value) {
-        @include generate-properties($tag, $property, $config);
+    @if ($has-matched-breakpoint) {
+      $width: map.get($breakpoints, $property);
+
+      @media (min-width: $width) {
+        @include generate-properties($tag, $value, $config);
       }
+
+    } @else {
+      @warn '❗️Invalid breakpoint '#{$property}'.';
     }
+
   }
 }
 
@@ -81,50 +132,83 @@
   @each $at-rule, $properties in $value {
     // Keep @ at the beginning
     @#{functions.replace($at-rule, '@', '')} {
-      @include generate-properties($tag, $properties, $config, $options);
-    }
+    @include generate-properties($tag, $properties, $config, $options);
+  }
   }
 }
 
-@mixin generate-animation($tag, $value, $config, $options) {
+@mixin generate-print($tag, $value, $config, $options) {
+  //@TODO
+}
 
+@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, $options : ()) {
-  $prefix: functions.get-config($config, "prefix");
+  $prefix: functions.get-config($config, 'prefix');
+  $is_scheme_dark: functions.get-config($options, 'scheme') != nil and functions.get-config($options, 'scheme') == 'dark';
+
+  @if (not $is_scheme_dark) {
+    @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
+      ) {
+        @include generate-css-properties($tag, $property, $value, $config, $options);
+      }
 
-  @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
-    ) {
-      @include generate-css-properties($tag, $property, $value, $config, $options);
-    }
+        // Colors
+      @else if ($property == '_colors') {
+        @include generate-colors($tag, $value, $config, $options, 'light');
+      }
 
-    // Colors
-    @else if ($property == "_colors") {
-      @include generate-colors($tag, $value, $config);
-    }
+        // Responsive
+      @else if ($property == '_responsive') {
+        @include generate-responsive($tag, $value, $config);
+      }
 
-    // Responsive
-    @else if ($property == "_responsive") {
-      @include generate-responsive($tag, $value, $config);
-    }
+        // Sub classes
+      @else if ($property == "_subclasses") {
+        @each $class, $class_properties in $value {
+          @include generate-subclasses($tag, $class, $class_properties, $config, $options);
+        }
+      }
 
-    // Sub classes
-    @else if ($property == "_subclasses") {
-      @each $class, $class_properties in $value {
-        @include generate-subclasses($tag, $class, $class_properties, $config, $options);
+        // At-rules
+      @else if ($property == '_atrule') {
+        @include generate-atrule($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, $options);
       }
     }
-    // At-rules
-    @else if ($property == "_atrule") {
-      @include generate-atrule($tag, $value, $config, $options);
-    }
-    @else {
-      @include generate-css-variables($tag, $property, $value, $config);
+  } @else {
+    @each $property, $value in $properties {
+      @if ($property == '_colors') {
+        @include generate-colors($tag, $value, $config, $options, 'dark');
+      } @else if ($property == '_subclasses') {
+        @each $class, $class_properties in $value {
+          @include generate-subclasses($tag, $class, $class_properties, $config, $options);
+        }
+      }
     }
   }
-}
+}