@nulllogic/scssleon 1.0.3 → 1.0.5

package/scss/mixins/generators/_color-sheme.scss

@@ -1,17 +1,5 @@
 @use 'sass:map';
 
-@use '../../functions' as functions;
-
-// Media that add color variables
-
 @mixin generate-color-scheme($schema) {
-  @if $schema == 'light' {
-    @media (prefers-color-scheme: light) {
-      @content
-    }
-  } @else if $schema == 'dark' {
-    @media (prefers-color-scheme: dark) {
-      @content
-    }
-  }
+  @content
 }

package/scss/mixins/generators/_components.scss

@@ -1,33 +1,96 @@
-@use "sass:map";
-@use "sass:meta";
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:string';
 
-@use "properties";
-@use "wrapper";
+@use 'properties';
 
-@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") {
+  $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);
+  @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));
+          }
+        }
+
+      } @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($components, $config, $theme) {
 
-  @include wrapper.generate-wrapper($config) {
-    .#{$class} {
-      @extend %#{$class};
+  // 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) {
+  @debug $component;
+}

package/scss/mixins/generators/_properties.scss

@@ -1,116 +1,215 @@
 @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.str-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-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 str-index($value, "var(--") == 1) {
-    & {
-      #{$property}: #{meta.inspect(
-        functions.str-replace($value, "--", "--" + $prefix + "-" + $tag + "-")
+  @if (meta.type-of($value) == 'string' and string.index($value, 'var(--') == 1) {
+
+    #{$property}: #{meta.inspect(
+        functions.replace($value, '--', '--' + $prefix + '-' + $variable_name + '-')
       )};
-    }
-  } @else if (type-of($value) == "string" and str-index($value, "var(global(") == 1) {
-    & {
-      #{$property}: #{meta.inspect(
-        functions.str-replace(
+
+  } @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)};
-    }
+
+    #{$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 functions.str-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
-              )};
-            }
-          }
-        }
+    @if ($color == $requested_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 $breakpoint, $value in $breakpoints {
-    $property: map.get($properties, $breakpoint);
+  @each $property, $value in $properties {
+    $has-matched-breakpoint: false;
 
-    @if $property != null {
-      @media (min-width: $value) {
-        @include generate-properties($tag, $property, $config);
+    @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}'.';
+    }
+
   }
 }
 
-@mixin generate-properties($tag, $properties, $config) {
-  $prefix: functions.get-config($config, "prefix");
+@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);
+    }
+  }
+}
 
-  @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 str-index($property, "--") == 1
-    ) {
-      @include generate-css-properties($tag, $property, $value, $config);
+@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');
+  $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);
+      }
 
       // Colors
-    @else if ($property == "colors") {
-      @include generate-colors($tag, $value, $config);
-    }
+      @else if ($property == '_colors') {
+        @include generate-colors($tag, $value, $config, $options, 'light');
+      }
 
       // Responsive
-    @else if ($property == "responsive") {
-      @include generate-responsive($tag, $value, $config);
-    }
+      @else if ($property == '_responsive') {
+        @include generate-responsive($tag, $value, $config);
+      }
 
-      // Subclasses
-    @else if ($property == "subclasses") {
-      @each $class, $class_properties in $value {
-        @include generate-subclasses($tag, $class, $class_properties, $config);
+      // 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);
+      }
+    }
+  } @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);
+        }
       }
-    } @else {
-      @include generate-css-variables($tag, $property, $value, $config);
     }
   }
 }

package/scss/scssleon.scss

@@ -1,3 +1,8 @@
+@charset "UTF-8";
+
+@forward './mixins';
+@forward './functions';
+
 /*
  * ------------------------------------------------------------------
  * ███████╗ ██████╗ ██████╗███████╗██╗     ███████╗ ██████╗ ███╗   ██╗
@@ -23,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,
   ),
@@ -37,104 +42,105 @@ $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 (
-  $theme: $theme
+@use 'themes/default' as theme with (
+  $theme: $theme,
+  $config: config.$config,
 );
 
 // Getting updated variables
 $config: config.$config;
 $theme: theme.$theme;
 
-/* Main configuration END
--------------------------------------------------------*/
 
 /* ------------------------------------------------------------------
  * Loading modules - this is default configuration with all modules enabled
  */
 
 // ↓ Root
-@use "root" with (
+@use 'root' with (
   $config: $config,
   $theme: $theme
 );
 
-// Great reset
-@use "reset" with (
+// ↓ 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 (
+@use 'base' with (
   $config: $config,
   $theme: $theme
 );
 
-// Amazing content
+// ↓ 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
 );
 
-@use "components/alert" with (
+// ↓ Alert
+@use 'components/alert' with (
   $config: $config,
   $theme: $theme
 );
 
-@use "components/accordion" with (
+// ↓ Accordion
+@use 'components/accordion' with (
   $config: $config,
   $theme: $theme
 );
@@ -146,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
 );