@nulllogic/scssleon 1.0.4 → 1.0.5

package/scss/mixins/generators/_components.scss

@@ -1,38 +1,96 @@
 @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');
+  $is_wrapper_enabled: functions.get-config($config, 'enable.wrapper');
+  $wrapper_class: functions.get-config($config, 'wrapper');
+
   // 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' {
+      @if ($is_wrapper_enabled) {
+        #{$wrapper_class} {
+          .#{$class} {
+            @include properties.generate-properties($class, $theme-component, $config, map.deep-merge((
+              scheme: $scheme,
+            ), $options));
+          }
+        }
+      } @else {
+        .#{$class} {
+          @include properties.generate-properties($class, $theme-component, $config, map.deep-merge((
+            scheme: $scheme,
+          ), $options));
+        }
+      }
+    }
+
+    @if $scheme == 'dark' {
+      @if ($is_wrapper_enabled) {
+        #{$wrapper_class}[data-theme="#{$scheme}"] {
+          .#{$class}:where([data-theme="#{$scheme}"], [data-theme="#{$scheme}"] *) {
+            @include properties.generate-properties($class, $theme-component, $config, map.deep-merge((
+              scheme: $scheme,
+            ), $options));
+          }
+        }
 
-  @include wrapper.generate-wrapper($config) {
-    .#{$class} {
-      @extend %#{$class};
+      } @else {
+        .#{$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) {
+
+  // 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,
+      )
+    }
+  }
+}
 
-@mixin get-structure ($component) {
+@mixin get-structure($component) {
   @debug $component;
 }

package/scss/mixins/generators/_properties.scss

@@ -1,57 +1,97 @@
 @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 +104,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, $width in $breakpoints {
+      @if ($property == $breakpoint) {
+        $has-matched-breakpoint: true;
+      }
+    }
 
-  @each $breakpoint, $value in $breakpoints {
-    $property: map.get($properties, $breakpoint);
+    @if ($has-matched-breakpoint) {
+      $width: map.get($breakpoints, $property);
 
-    @if $property != null {
-      @media (min-width: $value) {
-        @include generate-properties($tag, $property, $config);
+      @media (min-width: $width) {
+        @include generate-properties($tag, $value, $config);
       }
+
+    } @else {
+      @warn '❗️Invalid breakpoint '#{$property}'.';
     }
+
   }
 }
 
@@ -86,45 +138,78 @@
   }
 }
 
-@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);
+        }
+      }
     }
   }
 }

package/scss/scssleon.scss

@@ -1,6 +1,7 @@
 @charset "UTF-8";
-@use "./mixins" as mixins;
-@use "./functions" as functions;
+
+@forward './mixins';
+@forward './functions';
 
 /*
  * ------------------------------------------------------------------
@@ -27,7 +28,7 @@ Main configuration - initial configuration requirement
 // Those two variables will be used to store configuration settings and theme settings
 // You can easily customize any available options to fit your needs
 $config: (
-  prefix: "xii",
+  prefix: 'xii',
   enable: (
     wrapper: false,
   ),
@@ -41,14 +42,15 @@ $theme: (
 
 // ↓ Config
 // Override default config | @example
-@use "config" as config with (
+@use 'config' as config with (
   $config: $config
 );
 
 // ↓ Theme
 /* Override default settings in the theme | @example */
-@use "themes/default" as theme with (
+@use 'themes/default' as theme with (
   $theme: $theme,
+  $config: config.$config,
 );
 
 // Getting updated variables
@@ -61,13 +63,13 @@ $theme: theme.$theme;
  */
 
 // ↓ Root
-@use "root" with (
+@use 'root' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Great reset
-@use "reset" with (
+@use 'reset' with (
   $config: $config,
   $theme: $theme
 );
@@ -75,70 +77,70 @@ $theme: theme.$theme;
 // ↓ Base
 // Special utility, that will dynamically generate CSS
 // properties for HTML tags, specified in theme
-@use "base" with (
+@use 'base' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Amazing content
 // Special class `.content` to allow formatting of the default html tags
-@use "content" with (
+@use 'content' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Container
-@use "components/container" with (
+@use 'components/container' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Card
-@use "components/card" with (
+@use 'components/card' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Badge
-@use "components/badge" with (
+@use 'components/badge' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Form
-@use "components/form" with (
+@use 'components/form' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Buttons
-@use "components/button" with (
+@use 'components/button' with (
   $config: $config,
   $theme: $theme
 );
-@use "components/button_group" with (
+@use 'components/button_group' with (
   $config: $config,
   $theme: $theme
 );
 
-////@use "components/icon";
-//@use "components/button";
-////@use "components/button-group";
+////@use 'components/icon';
+//@use 'components/button';
+////@use 'components/button-group';
 
 // ↓ Breadcrumbs
-@use "components/breadcrumb" with (
+@use 'components/breadcrumb' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Alert
-@use "components/alert" with (
+@use 'components/alert' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Accordion
-@use "components/accordion" with (
+@use 'components/accordion' with (
   $config: $config,
   $theme: $theme
 );
@@ -150,60 +152,66 @@ $theme: theme.$theme;
 //);
 
 // ↓ Overlay
-@use "components/overlay" with (
+@use 'components/overlay' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Pagination
-@use "components/pagination" with (
+@use 'components/pagination' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Placeholder
-@use "components/placeholder" with (
+@use 'components/placeholder' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Modal
-@use "components/modal" with (
+@use 'components/modal' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Loader
-@use "components/loader" with (
+@use 'components/loader' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Nav
-@use "components/nav" with (
+@use 'components/nav' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Navigation bar
-@use "components/navbar" with (
+@use 'components/navbar' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Sidecap
-@use "components/sidecap" with (
+@use 'components/sidecap' with (
+  $config: $config,
+  $theme: $theme
+);
+
+// ↓ Tooltip
+@use 'components/tooltip' with (
   $config: $config,
   $theme: $theme
 );
 
 // ↓ Helpers
-@use "helpers/clearfix";
-@use "helpers/screen_reader";
-@use "helpers/text_truncate";
+@use 'helpers/clearfix';
+@use 'helpers/screen_reader';
+@use 'helpers/text_truncate';
 
 // ↓ Utilities
-@use "utilities/api" with (
+@use 'utilities/api' with (
   $config: $config,
   $theme: $theme
 );