@nulllogic/scssleon 1.0.6 → 1.0.8

package/README.md

@@ -1,6 +1,6 @@
 <p align="left">
     <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="./.imgs/header.jpg">
+      <source media="(prefers-color-scheme: dark)" srcset="./.imgs/header_dark.jpg">
       <img alt="SCSSleon framework" src="./.imgs/header.jpg">
     </picture>
 </p>
@@ -19,7 +19,7 @@ Welcome to SCSSLEON framework ! It's the most advanced responsive front-end fram
 
 ## Table of Contents
 <details>
-    <summary>↪ ≡─〰─〰─ Show TOC ─〰─〰─≡</summary>
+    <summary>↪ ≡˚ ✧ ━━━━⊱TOC⊰━━━━ ✧ ₊˚≡</summary>
 <br />
 
 - [Why SCSSLEON?](#user-content---why-scssleon--)
@@ -214,6 +214,22 @@ npm run sass-dev
 
 ## ┌ 📺 Showcase ┐
 
+<table width="100%" border="0" colspan="0" rowspan="0">
+  <tr>
+    <td width="50%">
+    <a href="https://nulllogic.github.io/scssleon-docs/" target="_blank" title="SCSSleon documentation"><picture>
+      <img alt="SCSSleon framework" src="./.imgs/showcase/1.jpg">
+    </picture></a>
+    </td>
+    <td>2</td>
+   </tr> 
+   <tr>
+      <td>1</td>
+    <td>2</td>
+  </td>
+  </tr>
+</table>
+
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 <hr />

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nulllogic/scssleon",
   "description": "Most advanced, simple and clean SCSS framework",
-  "version": "1.0.6",
-  "version_short": "1.0.6",
+  "version": "1.0.8",
+  "version_short": "1.0.8",
   "keywords": [
     "css",
     "sass",
@@ -16,17 +16,8 @@
     "web",
     "scssleon"
   ],
-  "scripts": {
-    "css": "npm run css-compile",
-    "css-compile": "sass --style expanded --source-map --embed-sources scss/:dist/css/",
-    "dist": "npm run css && npm run minify",
-    "watch": "sass --watch ./scss:./dist/css"
-  },
   "dependencies": {
     "sass": "^1.89.2"
-  },
-  "devDependencies": {
-
   },
   "homepage": "https://nulllogic.github.io/scssleon-docs",
   "style": "dist/scssleon.css",

package/scss/_base.scss

@@ -21,7 +21,7 @@ html {
   color-scheme: string.unquote($color_scheme);
 }
 
-// data-theme attribute is changing the color scheme
+// [data-theme] attribute is changing the color scheme
 html[data-theme="dark"] {
   color-scheme: dark
 }
@@ -32,21 +32,8 @@ html[data-theme="light"] {
 
 @each $tag, $properties in functions.get-theme($theme, 'html') {
   @each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
-
-    @if $scheme == 'light' {
-      #{$tag} {
-        @include mixins.generate-properties(#{$tag}, $properties, $config, (
-          scheme: $scheme,
-        ));
-      }
-    }
-
-    @if $scheme == 'dark' {
-      [data-theme="#{$scheme}"] #{$tag} {
-        @include mixins.generate-properties(#{$tag}, $properties, $config, (
-          scheme: $scheme,
-        ));
-      }
+    #{$tag} {
+      @include mixins.generate-properties(#{$tag}, $properties, $config);
     }
   }
 }

package/scss/_content.scss

@@ -17,32 +17,15 @@ $color_scheme: functions.get-config($config, 'color-scheme');
 @if ($is-content-enabled) {
   @each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
 
-    @if $scheme == 'light' {
-      .content {
-        @each $tag, $properties in functions.get-theme($theme, 'content') {
+    .content {
+      @each $tag, $properties in functions.get-theme($theme, 'content') {
 
-          // Only apply styling to elements, that stand right after `.content` class
-          & > #{$tag} {
-            @include mixins.generate-properties(#{$tag}, $properties, $config, (
-              scheme: $scheme,
-            ));
-          }
+        // Only apply styling to elements, that stand right after `.content` class
+        & > #{$tag} {
+          @include mixins.generate-properties(#{$tag}, $properties, $config);
         }
       }
     }
 
-    @if $scheme == 'dark' {
-      .content:where([data-theme="#{$scheme}"], [data-theme="#{$scheme}"] *) {
-        @each $tag, $properties in functions.get-theme($theme, 'content') {
-
-          // Only apply styling to elements, that stand right after `.content` class
-          & > #{$tag} {
-            @include mixins.generate-properties(#{$tag}, $properties, $config, (
-              scheme: $scheme,
-            ));
-          }
-        }
-      }
-    }
   }
 }

package/scss/_mixins.scss

@@ -3,4 +3,5 @@
 
 // ↓ Generators
 @forward "mixins/generators/components";
-@forward "mixins/generators/properties";
+@forward "mixins/generators/properties";
+

package/scss/mixins/generators/_components.scss

@@ -22,23 +22,8 @@
     $theme-component: $component;
   }
 
-  @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));
-      }
-    }
-
-    @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));
-      }
-    }
+  .#{$class} {
+    @include properties.generate-properties($class, $theme-component, $config, $options);
   }
 
 }

package/scss/mixins/generators/_properties.scss

@@ -49,13 +49,25 @@
 
 }
 
+@mixin generate-print-variables($tag, $value, $config, $options) {
+  @media print {
+    @include generate-properties($tag, $value, $config, $options);
+  }
+}
+
+@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;
+  $variable_name: $tag;
 
   @if ($variable_options_custom_name != nil) {
     $variable_name: $variable_options_custom_name;
@@ -84,15 +96,22 @@
   }
 }
 
-@mixin generate-colors($tag, $value, $config, $options, $requested_color : 'light') {
+@mixin generate-colors($tag, $value, $config, $options) {
   $prefix: functions.get-config($config, 'prefix');
 
   @each $color, $color-properties in $value {
-    @if ($color == $requested_color) {
+    @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);
+        }
+      }
+    }
   }
 }
 
@@ -137,10 +156,6 @@
   }
 }
 
-@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 ;;
@@ -158,57 +173,54 @@
 
 @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, $options, 'light');
-      }
+  @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);
+    }
 
-        // Responsive
-      @else if ($property == '_responsive') {
-        @include generate-responsive($tag, $value, $config);
-      }
+    // Colors
+    @else if ($property == '_colors') {
+      @include generate-colors($tag, $value, $config, $options);
+    }
 
-        // Sub classes
-      @else if ($property == "_subclasses") {
-        @each $class, $class_properties in $value {
-          @include generate-subclasses($tag, $class, $class_properties, $config, $options);
-        }
-      }
+    // Responsive
+    @else if ($property == '_responsive') {
+      @include generate-responsive($tag, $value, $config);
+    }
 
-        // At-rules
-      @else if ($property == '_atrule') {
-        @include generate-atrule($tag, $value, $config, $options);
+    // Subclasses
+    @else if ($property == '_subclasses') {
+      @each $class, $class_properties in $value {
+        @include generate-subclasses($tag, $class, $class_properties, $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 {
-    @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);
-        }
-      }
+
+    // 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, $options);
     }
   }
 }

package/scss/themes/_default.scss

@@ -1806,7 +1806,7 @@ $components-config: (
           )
         ),
 
-        '& .tooltip' : (
+        '.tooltip' : (
 
           --padding: 0.25rem 0.5rem,
 
@@ -1829,6 +1829,9 @@ $components-config: (
 
           color: inherit,
 
+          transition: string.unquote('transform 0.15s ease-in, opacity 0.15s ease-in, display 0.15s ease-in allow-discrete'),
+          translate: -50% 0,
+
           _colors : (
             light : (
               background: #fff,
@@ -1840,9 +1843,6 @@ $components-config: (
             )
           ),
 
-          transition: string.unquote('transform 0.15s ease-in, opacity 0.15s ease-in, display 0.15s ease-in allow-discrete'),
-          translate: -50% 0,
-
           _atrule : (
             '@starting-style' : (
               opacity: 0,
@@ -1957,8 +1957,6 @@ $components-config: (
             ),
           )
         ),
-
-
       )
     )
   )