@nulllogic/scssleon 1.0.5 → 1.0.7

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>
@@ -15,17 +15,68 @@ Welcome to SCSSLEON framework ! It's the most advanced responsive front-end fram
 – [ <a href="http://nulllogic.github.io/scssleon-docs" target="_self">Documentation</a> ] — [ <a href="https://github.com/nulllogic/scssleon/issues" target="_blank">Bugs/Issues</a> ] — [ <a href="https://stackoverflow.com/questions/tagged/scssleon" target="_blank">StackOverflow</a> ] –
 </p>
 
-## ┌ 🧭 Quickstart ┐
+<hr />
+
+## Table of Contents
+<details>
+    <summary>↪ ≡˚ ✧ ━━━━⊱TOC⊰━━━━ ✧ ₊˚≡</summary>
+<br />
+
+- [Why SCSSLEON?](#user-content---why-scssleon--)
+- [Features](#user-content---features-)
+- [Getting started](#user-content---getting-started-)
+- [Usage Examples](#user-content---usage-examples-)
+- [Showcase](#user-content---showcase-)
+- [Documentation](#user-content---documentation-)
+- [Contributing](#user-content--contributing-)
+- [Thanks](#user-content--thanks-)
+- [License](#user-content---license-)
+<br />
+</details>
+
+<hr />
+
+
+### ⓘ Prerequisites
+- Knowledge of [SCSS](https://sass-lang.com).
+- [🐳 Docker](https://www.docker.com)
+- [💻 Node](https://nodejs.org) + [📦 NPM](https://nodejs.org)
+
+<hr />
+
+## ┌ 🤔 Why SCSSLEON ? ┐ 
+
+SCSSLEON is designed for developers who want a lightweight, modular, and highly customizable SCSS framework. Unlike other frameworks, SCSSLEON:
+
+- Offers a minimal footprint for faster load times.
+- Provides intuitive mixins and utilities for rapid development.
+- Supports easy theming with customizable variables.
+- Color scheme support – easily add dark and light theme support
+- Responsive support with zero efforts
+- Easy to learn, easy to use
+- Zero dependencies, except SASS
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-### Prerequisites
+<hr />
+
+## ┌ ✨ Features ┐
 
-- Node.js and npm installed on your system.
-- Basic knowledge of SCSS and Node.js.
+- **Responsive Grid System**: Build flexible layouts with a customizable 12-column grid.
+- **Theming Support**: Easily customize colors, fonts, and spacing with SCSS variables.
+- **Utility Classes**: Includes helpers for spacing, typography, and visibility.
+- **Lightweight**: Minimal CSS output for faster performance.
+- **Modern CSS**: Built-in support for Flexbox, CSS Grid, and custom properties.
 
-### Install
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
+## ┌ 🧭 Getting Started ┐
 
 <details>
-    <summary> Method #1 ( 🛖🔥🦴primitive ) </summary>
+    <summary> Method #1 - NodeJS + NPM basic setup [ 🛖🔥🦴 primitive ] </summary>
+<br />
 
 1. Install packages – run the following command in your project directory to install SCSSLEON + SASS:
 
@@ -39,7 +90,7 @@ npm i @nulllogic/scssleon sass
 npm init -y
 ```
 
-4. Update `package.json` file. Add following strings
+3. Update `package.json` file. Add following strings
 
 ```json
 "scripts": {
@@ -48,7 +99,29 @@ npm init -y
 }
 ```
 
-5. Create `app.scss` inside your project in `/styles` directory
+It will look like this : 
+```json
+{
+  "dependencies": {
+    "@nulllogic/scssleon": "^1.0.5",
+    "sass": "^1.89.2"
+  },
+  "name": "test",
+  "version": "1.0.0",
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "sass-dev": "sass --watch --update --style=expanded styles:assets/css --load-path=node_modules",
+    "sass-prod": "sass --no-source-map --style=compressed styles:assets/css --load-path=node_modules"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}
+```
+
+4. Create `app.scss` inside your project in `/styles` directory
 
 ```scss
 @use 'sass:map';
@@ -91,7 +164,7 @@ $config: config.$config;
 $theme: theme.$theme;
 ```
 
-6. Create `base.scss` inside your project in `/styles/components` directory
+5. Create `base.scss` inside your project in `/styles/components` directory
 ```scss
 // Loading your SCSS module with pre-defined config and theme
 // ↓ Config
@@ -115,62 +188,96 @@ $theme: theme.$theme;
     $config: app.$config,
     $theme: app.$theme
 );
-
-// ↓ Container
-@use "@nulllogic/scssleon/scss/container" with (
-    $config: app.$config,
-    $theme: app.$theme
-);
 ```
 
-7. Run node command at root `/` of your project to generate CSS code to `/assets/css`
+6. Run node command at root `/` of your project to generate CSS code to `/assets/css`
+
 ```bash
 npm run sass-dev
 ```
 
-8. Profit – you now have output at `/assets/css` directory
+7. Profit – you have output at `/assets/css` directory now 🙌
+
+<img alt="SCSSleon framework" src="./.imgs/method_1.jpg">
 
 </details>
 
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## ┌ 📚 Documentation ┐
+<hr />
 
-<p align="left">
-  <img src="./.imgs/documentation.jpg" width="100%" alt="SCSSleon documentation">
-</p>
+## ┌ 👓 Usage Examples ┐
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
+## ┌ 📺 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>
 
-SCSSleon's documentation is built with [Astro](https://astro.build/) and publicly hosted on GitHub Pages at <https://nulllogic.github.io/scssleon-docs/>. The docs may also be run locally.
+<hr />
 
-Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/).
+## ┌ 📚 Documentation ┐
 
-### ─ Running documentation locally
+SCSSLeon documentation is available here [http://nulllogic.github.io/scssleon-docs](http://nulllogic.github.io/scssleon-docs)
 
-1. From the root `/` directory, run `make docs` in the command line.
-2. Open `http://localhost:8000/scssleon/` in your browser.
-3. Enjoy the documentation locally
+Documentation is built with [Astro](https://astro.build/) and publicly hosted on GitHub Pages [here](http://nulllogic.github.io/scssleon-docs).
+Search is powered by [Algolia](https://community.algolia.com/docsearch/).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
 
 ## ┌ Contributing ┐
 
-<p align="left">
-  <img src="./.imgs/contributing.jpg" width="100%" alt="SCSSleon contributing">
-</p>
+For contributing, please view the [CONTRIBUTING](CONTRIBUTING.md).
 
-> For contributing, please view the [CONTRIBUTING](CONTRIBUTING.md).
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
 
 ## ┌ Thanks ┐
 
-<p align="left">
-  <img src="./.imgs/thankyou.jpg" width="100%" alt="SCSSleon sponsors">
-</p>
+<a href="https://www.browserstack.com" title="BrowserStack" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="./.imgs/bstack-logo-global.svg">
+      <img alt="SCSSleon framework" src="./.imgs/bstack-logo-global-dark.svg">
+    </picture>
+</a><br />
 
-<a href="https://www.browserstack.com"><img src="./.imgs/browserstack.jpg" alt="browserstack"></a><br />
 Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!
 
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
 ## ┌ 📜 License ┐
 [MIT license](LICENSE)
 
 <hr />
 
 <p align="center">
-  <a href="https://nulllogic.net/" target="_blank"><img src="./.imgs/logo.png" alt="NullLogic" aria-title="NullLogic"></a>
+  <a href="https://nulllogic.net/" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="./.imgs/logo_nulllogic_dark.png">
+      <img alt="SCSSleon framework" src="./.imgs/logo_nulllogic.png">
+    </picture>
+  </a>
 </p>

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@nulllogic/scssleon",
   "description": "Most advanced, simple and clean SCSS framework",
-  "version": "1.0.5",
-  "version_short": "1.0.5",
+  "version": "1.0.7",
+  "version_short": "1.0.7",
   "keywords": [
     "css",
     "sass",
+    "scss",
+    "scss-framework",
     "mobile-first",
     "responsive",
     "front-end",

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

@@ -1,21 +1,7 @@
 // ↓ Helpers
 @forward "mixins/breakpoints";
-@forward "mixins/clearfix";
-
-@forward "mixins/box-shadow";
-@forward "mixins/border-radius";
-@forward "mixins/transition";
-@forward "mixins/gradients";
 
 // ↓ Generators
-@forward "mixins/generators/color-sheme";
 @forward "mixins/generators/components";
 @forward "mixins/generators/properties";
 
-// ↓ Utilities
-@forward "mixins/utilities";
-
-// ↓ Components
-@forward "mixins/forms";
-
-// ↓ Layout

package/scss/_root.scss

@@ -1,6 +1,7 @@
 /* - ૮₍ ˃ ⤙ ˂ ₎ა – root  */
-@use "sass:string";
-@use "./mixins" as mixins;
+@use 'sass:string';
+
+@use './mixins' as mixins;
 @use "./functions" as functions;
 
 $config: () !default;
@@ -10,16 +11,14 @@ $prefix: functions.get-config($config, "prefix");
 
 $is-smooth-scroll-enabled: functions.get-config(
   $config,
-  "enable.smooth-scroll"
+  'enable.smooth-scroll'
 );
 
-$root-variables: functions.get-theme($theme, "root.variables");
-
 :root {
   /* 🌱𖣂🫚🌿 */
   @include mixins.generate-properties(
-    "root",
-    functions.get-theme($theme, "root"),
+    'root',
+    functions.get-theme($theme, 'root'),
     $config,
   );
 

package/scss/mixins/generators/_components.scss

@@ -9,10 +9,7 @@
 
 @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') {
@@ -25,46 +22,10 @@
     $theme-component: $component;
   }
 
-  @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));
-        }
-
-      }
-    }
+  .#{$class} {
+    @include properties.generate-properties($class, $theme-component, $config, $options);
   }
+
 }
 
 @mixin generate-components($components, $config, $theme) {
@@ -72,7 +33,7 @@
   // Get components
   @each $component in $components {
     // Component options param check
-    @if(list.length($component) > 2) {
+    @if (list.length($component) > 2) {
       @include generate-component(
           list.nth($component, 1),
           list.nth($component, 2),
@@ -89,8 +50,4 @@
       )
     }
   }
-}
-
-@mixin get-structure($component) {
-  @debug $component;
 }

package/scss/mixins/generators/_properties.scss

@@ -4,7 +4,6 @@
 @use "sass:list";
 
 @use "../../functions" as functions;
-@use "../../mixins/generators/color-sheme" as mixin;
 
 @mixin generate-css-properties($tag, $property, $value, $config, $options : ()) {
 
@@ -56,7 +55,7 @@
   $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;
@@ -85,15 +84,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);
+        }
+      }
+    }
   }
 }
 
@@ -133,8 +139,8 @@
   @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);
+  }
   }
 }
 
@@ -161,55 +167,43 @@
   $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);
+    // Sub classes
+    @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);
-        }
-      }
+
+    // Animations
+    @else if ($property == '_animations') {
+      @include generate-animation($tag, $value, $config, $options);
+    } @else {
+      @include generate-css-variables($tag, $property, $value, $config, $options);
     }
   }
-}
+}

package/scss/scssleon.scss

@@ -203,15 +203,4 @@ $theme: theme.$theme;
 @use 'components/tooltip' with (
   $config: $config,
   $theme: $theme
-);
-
-// ↓ Helpers
-@use 'helpers/clearfix';
-@use 'helpers/screen_reader';
-@use 'helpers/text_truncate';
-
-// ↓ Utilities
-@use 'utilities/api' with (
-  $config: $config,
-  $theme: $theme
 );

package/scss/themes/_default.scss

@@ -215,7 +215,6 @@ $content-config: (
       line-height: clamp(1.25em, 4vw, 1.5em),
       padding: 1rem,
       font-style: italic,
-      font-size: 1.5rem,
 
       border-left: var(--blockquote-border),
 
@@ -1807,7 +1806,7 @@ $components-config: (
           )
         ),
 
-        '& .tooltip' : (
+        '.tooltip' : (
 
           --padding: 0.25rem 0.5rem,
 
@@ -1830,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,
@@ -1841,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,
@@ -1958,8 +1957,6 @@ $components-config: (
             ),
           )
         ),
-
-
       )
     )
   )