@nulllogic/scssleon 1.0.2 → 1.0.4

package/scss/forms/_checkbox.scss

@@ -1,33 +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;
 
-$prefix: functions.get-config($config, 'prefix');
-$color_scheme: functions.get-config($config, 'color-scheme');
-
-$is_shadow_enabled: functions.get-config($config, 'shadow');
-$is_border_radius_enabled: functions.get-config($config, 'border-radius');
-
-$label-component: functions.get-theme($theme, 'components.form.checkbox');
-
-.checkbox {
-  @include mixins.generate-properties('checkbox', $label-component, $config);
-
-  background: var(--#{$prefix}-select-background);
-  color: var(--#{$prefix}-select-color);
-  padding: var(--#{$prefix}-select-padding);
-  border: var(--#{$prefix}-select-border);
-
-  @if($is_border_radius_enabled) {
-    @include mixins.border-radius(var(--#{$prefix}-select-border-radius));
-  }
-
-  @if($is_shadow_enabled) {
-    @include mixins.box-shadow(var(--#{$prefix}-select-box-shadow));
-  }
-
-}
-
+@include mixins.generate-component(
+  'form.checkbox',
+  'checkbox',
+  $config,
+  $theme,
+);

package/scss/forms/_input-group.scss

@@ -1,121 +1,14 @@
-//
-// Base styles
-//
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
-.input-group {
-//  position: relative;
-//  display: flex;
-//  flex-wrap: wrap; // For form validation feedback
-//  align-items: stretch;
-//  width: 100%;
-//
-//  > .form-control,
-//  > .form-select {
-//    position: relative; // For focus state's z-index
-//    flex: 1 1 auto;
-//    width: 1%;
-//    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
-//  }
-//
-//  // Bring the "active" form control to the top of surrounding elements
-//  > .form-control:focus,
-//  > .form-select:focus {
-//    z-index: 3;
-//  }
-//
-//  // Ensure buttons are always above inputs for more visually pleasing borders.
-//  // This isn't needed for `.input-group-text` since it shares the same border-color
-//  // as our inputs.
-//  .btn {
-//    position: relative;
-//    z-index: 2;
-//
-//    &:focus {
-//      z-index: 3;
-//    }
-//  }
-//}
-//
-//
-//// Textual addons
-////
-//// Serves as a catch-all element for any text or radio/checkbox input you wish
-//// to prepend or append to an input.
-//
-//.input-group-text {
-//  display: flex;
-//  align-items: center;
-//  padding: $input-group-addon-padding-y $input-group-addon-padding-x;
-//  font-size: $input-font-size; // Match inputs
-//  font-weight: $input-group-addon-font-weight;
-//  line-height: $input-line-height;
-//  color: $input-group-addon-color;
-//  text-align: center;
-//  white-space: nowrap;
-//  background-color: $input-group-addon-bg;
-//  border: $input-border-width solid $input-group-addon-border-color;
-//  @include border-radius($input-border-radius);
-//}
-//
-//
-//// Sizing
-////
-//// Remix the default form control sizing classes into new ones for easier
-//// manipulation.
-//
-//.input-group-lg > .form-control,
-//.input-group-lg > .form-select,
-//.input-group-lg > .input-group-text,
-//.input-group-lg > .btn {
-//  padding: $input-padding-y-lg $input-padding-x-lg;
-//  font-size: $input-font-size-lg;
-//  @include border-radius($input-border-radius-lg);
-//}
-//
-//.input-group-sm > .form-control,
-//.input-group-sm > .form-select,
-//.input-group-sm > .input-group-text,
-//.input-group-sm > .btn {
-//  padding: $input-padding-y-sm $input-padding-x-sm;
-//  font-size : $input-font-size-sm;
-//  @include border-radius($input-border-radius-sm);
-//}
-//
-//.input-group-lg > .form-select,
-//.input-group-sm > .form-select {
-//  padding-right: $form-select-padding-x + $form-select-indicator-padding;
-//}
-//
-//
-//// Rounded corners
-////
-//// These rulesets must come after the sizing ones to properly override sm and lg
-//// border-radius values when extending. They're more specific than we'd like
-//// with the `.input-group >` part, but without it, we cannot override the sizing.
-//
-//// stylelint-disable-next-line no-duplicate-selectors
-//.input-group {
-//  &:not(.has-validation) {
-//    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
-//    > .dropdown-toggle:nth-last-child(n + 3) {
-//      @include border-end-radius(0);
-//    }
-//  }
-//
-//  &.has-validation {
-//    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
-//    > .dropdown-toggle:nth-last-child(n + 4) {
-//      @include border-end-radius(0);
-//    }
-//  }
-//
-//  $validation-messages: "";
-//  @each $state in map-keys($form-validation-states) {
-//    $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
-//  }
-//
-//  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-//    margin-left: -$input-border-width;
-//    @include border-start-radius(0);
-//  }
-}
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  'form.input-group',
+  'input-group',
+  $config,
+  $theme
+);

package/scss/forms/_input.scss

@@ -1,34 +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;
 
-$prefix: functions.get-config($config, 'prefix');
-$color_scheme: functions.get-config($config, 'color-scheme');
-
-$is_shadow_enabled: functions.get-config($config, 'shadow');
-$is_border_radius_enabled: functions.get-config($config, 'border-radius');
-
-$label-component: functions.get-theme($theme, 'components.form.input');
-
-.input {
-  @include mixins.generate-properties('input', $label-component, $config);
-
-  background: var(--#{$prefix}-input-background);
-  color: var(--#{$prefix}-input-color);
-  padding: var(--#{$prefix}-input-padding);
-  border: var(--#{$prefix}-input-border);
-
-  @if($is_border_radius_enabled) {
-    @include mixins.border-radius(var(--#{$prefix}-input-border-radius));
-  }
-
-  @if($is_shadow_enabled) {
-    @include mixins.box-shadow(var(--#{$prefix}-input-box-shadow));
-  }
-
-
-}
-
+@include mixins.generate-component(
+  'form.input',
+  'input',
+  $config,
+  $theme
+);

package/scss/forms/_label.scss

@@ -1,15 +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;
 
-$prefix: functions.get-config($config, 'prefix');
-$color_scheme: functions.get-config($config, 'color-scheme');
-
-$label-component: functions.get-theme($theme, 'components.form.label');
-
-.label {
-  @include mixins.generate-properties('label', $label-component, $config);
-}
+@include mixins.generate-component(
+  'form.label',
+  'label',
+  $config,
+  $theme
+);

package/scss/forms/_radio.scss

@@ -1,34 +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;
 
-$prefix: functions.get-config($config, 'prefix');
-$color_scheme: functions.get-config($config, 'color-scheme');
-
-$is_shadow_enabled: functions.get-config($config, 'shadow');
-$is_border_radius_enabled: functions.get-config($config, 'border-radius');
-
-$label-component: functions.get-theme($theme, 'components.form.radio');
-
-.radio {
-  @include mixins.generate-properties('radio', $label-component, $config);
-
-  background: var(--#{$prefix}-select-background);
-  color: var(--#{$prefix}-select-color);
-  padding: var(--#{$prefix}-select-padding);
-  border: var(--#{$prefix}-select-border);
-
-  @if($is_border_radius_enabled) {
-    @include mixins.border-radius(var(--#{$prefix}-select-border-radius));
-  }
-
-  @if($is_shadow_enabled) {
-    @include mixins.box-shadow(var(--#{$prefix}-select-box-shadow));
-  }
-
-}
-
-
+@include mixins.generate-component(
+  'form.radio',
+  'radio',
+  $config,
+  $theme
+);

package/scss/forms/_range.scss

@@ -1,7 +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',
+  $config,
+  $theme
+);

package/scss/forms/_select.scss

@@ -1,34 +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;
 
-$prefix: functions.get-config($config, 'prefix');
-$color_scheme: functions.get-config($config, 'color-scheme');
-
-$is_shadow_enabled: functions.get-config($config, 'shadow');
-$is_border_radius_enabled: functions.get-config($config, 'border-radius');
-
-$label-component: functions.get-theme($theme, 'components.form.select');
-
-.select {
-  @include mixins.generate-properties('select', $label-component, $config);
-
-  background: var(--#{$prefix}-select-background);
-  color: var(--#{$prefix}-select-color);
-  padding: var(--#{$prefix}-select-padding);
-  border: var(--#{$prefix}-select-border);
-  appearance: none;
-  -webkit-appearance: none;
-
-  @if($is_border_radius_enabled) {
-    @include mixins.border-radius(var(--#{$prefix}-select-border-radius));
-  }
-
-  @if($is_shadow_enabled) {
-    @include mixins.box-shadow(var(--#{$prefix}-select-box-shadow));
-  }
-
-}
+@include mixins.generate-component(
+  'form.select',
+  'select',
+  $config,
+  $theme
+);

package/scss/forms/_switch.scss

@@ -1,18 +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;
 
-$prefix: functions.get-config($config, 'prefix');
-$color_scheme: functions.get-config($config, 'color-scheme');
-
-$is_shadow_enabled: functions.get-config($config, 'shadow');
-$is_border_radius_enabled: functions.get-config($config, 'border-radius');
-
-$label-component: functions.get-theme($theme, 'components.form.input');
-
-.switch {
-
-}
+@include mixins.generate-component(
+  'form.switch',
+  'switch',
+  $config,
+  $theme
+);

package/scss/forms/_validation.scss

@@ -1,12 +1,14 @@
-// Form validation
-//
-// Provide feedback to users when form field values are valid or invalid. Works
-// primarily for client-side validation via scoped `:invalid` and `:valid`
-// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
-// server-side validation.
+/* Load mixins/functions */
+@use '../mixins' as mixins;
+@use '../functions' as functions;
 
-// scss-docs-start form-validation-states-loop
-//@each $state, $data in $form-validation-states {
-//  @include form-validation-state($state, $data...);
-//}
-// scss-docs-end form-validation-states-loop
+/* SCSS variables definition requirement */
+$config: nil !default;
+$theme: nil !default;
+
+@include mixins.generate-component(
+  '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,26 +5,30 @@
 @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
+    )};
+  }
 }
 
 @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) {
+  @if (meta.type-of($value) == "string" and string.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)
-  {
+      functions.replace($value, "--", "--" + $prefix + "-" + $tag + "-")
+    )};
+  } @else if (meta.type-of($value) == "string" and string.index($value, "var(global(") == 1) {
     #{$property}: #{meta.inspect(
-        functions.str-replace(
+        functions.replace(
           string.slice($value, 0, string.length($value) - 1),
           "global(--",
           "--" + $prefix + "-root-"
@@ -39,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
+            )};
           }
         }
       }
@@ -55,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);
   }
 }
 
@@ -75,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 {
@@ -83,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") {
+    @else if ($property == "_colors") {
       @include generate-colors($tag, $value, $config);
     }
 
     // Responsive
-    @else if ($property == "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,
@@ -114,7 +116,7 @@ $theme: theme.$theme;
   $config: $config,
   $theme: $theme
 );
-@use "components/button-group" with (
+@use "components/button_group" with (
   $config: $config,
   $theme: $theme
 );
@@ -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