@nulllogic/scssleon 1.0.4 → 1.0.5

package/README.md

@@ -1,50 +1,158 @@
 <p align="left">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="./.imgs/header.jpg">
-      <img alt="XII/Grid CSS framework" src="./.imgs/header.jpg">
+      <img alt="SCSSleon framework" src="./.imgs/header.jpg">
     </picture>
 </p>
-Welcome to XII/Grid CSS framework ! It's the most advanced responsive front-end framework, that can boost development of your website or project. It was built in love and with love from internet technologies. Peace ! 
 
-<hr />
+# SCSSLEON [![Version Number](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fnulllogic%2Fscssleon%2Frefs%2Fheads%2Fmaster%2Fpackage.json&query=%24.version&style=flat&label=version&labelColor=%23b0de48&color=%231b3317)](https://github.com/Tencent/QMUI_Web/ "Version Number")
 
-<p align="center">
-– [ <a href="https://nulllogic.github.io/xiigrid/">Demo</a> ] — [ <a href="http://nulllogic.github.io/xiigrid/docs">Documentation</a> ] — [ <a href="https://github.com/nulllogic/xiigrid/issues">Bugs/Issues</a> ] — [ <a href="https://stackoverflow.com/questions/tagged/xiigrid">StackOverflow</a> ] –
-</p>
+Welcome to SCSSLEON framework ! It's the most advanced responsive front-end framework, that can boost development of your website or project. It was built in love and with love from internet technologies. Peace ! 
+
+<hr />
 
 <p align="center">
-  <a href="https://nulllogic.net/"><img src="./.imgs/logo.png" alt="NullLogic logo"></a>
+– [ <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 ┐
 
-[![IMAGE ALT TEXT HERE](http://www.sergiuko.com/wp-content/uploads/2012/04/vimeo-preview-627x351.jpg)](https://vimeo.com/83573522)
+### Prerequisites
+
+- Node.js and npm installed on your system.
+- Basic knowledge of SCSS and Node.js.
+
+### Install
+
+<details>
+    <summary> Method #1 ( 🛖🔥🦴primitive ) </summary>
+
+1. Install packages – run the following command in your project directory to install SCSSLEON + SASS:
+
+```bash
+npm i @nulllogic/scssleon sass
+```
+
+2. Initialize your project (if not already done). If your project doesn't have a package.json file, create one by running:
+
+```bash
+npm init -y
+```
+
+4. Update `package.json` file. Add following strings
+
+```json
+"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"
+}
+```
+
+5. Create `app.scss` inside your project in `/styles` directory
+
+```scss
+@use 'sass:map';
+@use "sass:string";
+
+@forward "@nulllogic/scssleon/scss/mixins";
+@forward "@nulllogic/scssleon/scss/functions";
+
+@use "@nulllogic/scssleon/scss/config.scss" as config with (
+  // This is main config, that you can tweak
+  $config: (
+    prefix: "xii",
+    enable: (
+      wrapper: false,
+    ),
+  )
+);
+
+@use "@nulllogic/scssleon/themes/default.scss" as theme with (
+  $config : config.$config,
+  $theme: (
+    html : (
+      body : (
+        _colors: (
+          light : (
+            background : rgb(244, 244, 244),
+            color: rgb(28, 29, 31),
+          ),
+          dark : (
+            background : rgb(5, 17, 4),
+            color: '#ccc'
+          )
+        )
+      )
+    )
+  )
+);
+
+$config: config.$config;
+$theme: theme.$theme;
+```
+
+6. Create `base.scss` inside your project in `/styles/components` directory
+```scss
+// Loading your SCSS module with pre-defined config and theme
+// ↓ Config
+@use "../app.scss" as app;
+
+// Loading modules and components
+// ↓ Root
+@use "@nulllogic/scssleon/scss/root" with (
+    $config: app.$config,
+    $theme: app.$theme
+);
+
+// Great reset
+@use "@nulllogic/scssleon/scss/reset" with (
+    $config: app.$config,
+    $theme: app.$theme
+);
+
+// Base
+@use "@nulllogic/scssleon/scss/base" with (
+    $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`
+```bash
+npm run sass-dev
+```
+
+8. Profit – you now have output at `/assets/css` directory
+
+</details>
+
 
 ## ┌ 📚 Documentation ┐
 
 <p align="left">
-  <img src="./.imgs/documentation.jpg" width="100%" alt="xiigrid documentation">
+  <img src="./.imgs/documentation.jpg" width="100%" alt="SCSSleon documentation">
 </p>
 
-xiigrid's documentation, included in this repo in the root directory, is built with [Hugo](https://gohugo.io/) and publicly hosted on GitHub Pages at <https://nulllogic.github.io/xiigrid//>. The docs may also be run locally.
+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.
 
-Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/). Working on our search? Be sure to set `debug: true` in `site/assets/js/search.js`.
+Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/).
 
 ### ─ Running documentation locally
 
 1. From the root `/` directory, run `make docs` in the command line.
-2. Open `http://localhost:8000/xiigrid/` in your browser.
+2. Open `http://localhost:8000/scssleon/` in your browser.
 3. Enjoy the documentation locally
 
-
-
-Learn more about using Hugo by reading its [documentation](https://gohugo.io/documentation/).
-
-
 ## ┌ Contributing ┐
 
 <p align="left">
-  <img src="./.imgs/contributing.jpg" width="100%" alt="xiigrid contributing">
+  <img src="./.imgs/contributing.jpg" width="100%" alt="SCSSleon contributing">
 </p>
 
 > For contributing, please view the [CONTRIBUTING](CONTRIBUTING.md).
@@ -52,25 +160,17 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc
 ## ┌ Thanks ┐
 
 <p align="left">
-  <img src="./.imgs/thankyou.jpg" width="100%" alt="xiigrid sponsors">
+  <img src="./.imgs/thankyou.jpg" width="100%" alt="SCSSleon sponsors">
 </p>
 
 <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!
 
 ## ┌ 📜 License ┐
-
-<p align="left">
-  <img src="./.imgs/license.jpg" width="100%" alt="xiigrid licence">
-</p>
-
 [MIT license](LICENSE)
 
-<!--
-```mermaid
-graph LR
-  Frontend -->|API| Backend
-  Backend -->|Database| PostgreSQL
-  Backend -->|Payment| PaymentService
-```
--->
+<hr />
+
+<p align="center">
+  <a href="https://nulllogic.net/" target="_blank"><img src="./.imgs/logo.png" alt="NullLogic" aria-title="NullLogic"></a>
+</p>

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nulllogic/scssleon",
   "description": "Most advanced, simple and clean SCSS framework",
-  "version": "1.0.4",
-  "version_short": "1.0.4",
+  "version": "1.0.5",
+  "version_short": "1.0.5",
   "keywords": [
     "css",
     "sass",

package/scss/_base.scss

@@ -4,6 +4,9 @@
 └─┘┴ ┴└─┘└─┘
 */
 
+@use "sass:string";
+@use "sass:map";
+
 /* Load settings and functions */
 @use 'mixins' as mixins;
 @use 'functions' as functions;
@@ -12,8 +15,38 @@
 $config: nil !default;
 $theme: nil !default;
 
+$color_scheme: functions.get-config($config, 'color-scheme');
+
+html {
+  color-scheme: string.unquote($color_scheme);
+}
+
+// data-theme attribute is changing the color scheme
+html[data-theme="dark"] {
+  color-scheme: dark
+}
+
+html[data-theme="light"] {
+  color-scheme: light
+}
+
 @each $tag, $properties in functions.get-theme($theme, 'html') {
-  #{$tag} {
-    @include mixins.generate-properties(#{$tag}, $properties, $config);
+  @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,
+        ));
+      }
+    }
   }
 }

package/scss/_config.scss

@@ -14,44 +14,25 @@
 $config: () !default;
 
 $default-config: (
-  // scss-docs-start root-variables
-  prefix: "xii",
-  wrapper-class: "wrapper" // scss-docs-end root-variables
+  prefix: 'xii',
+  wrapper: '.wrapper'
 );
 
 // Container breakpoints
-// scss-docs-start container-max-widths
 $breakpoints-config: (
   breakpoints: (
-    sm: 540px,
-    md: 720px,
-    lg: 960px,
-    xl: 1140px,
-    xxl: 1320px,
-  ),
-) !default;
-// scss-docs-end container-max-widths
-
-$default-config: map.deep-merge($default-config, $breakpoints-config);
-
-// Grid breakpoints
-// scss-docs-start grid-breakpoints
-$grid-breakpoints-config: (
-  grid-breakpoints: (
-    xs: 0,
     sm: 576px,
     md: 768px,
     lg: 992px,
-    xl: 1200px,
-    xxl: 1400px,
+    xl: 1220px,
+    xxl: 1380px,
   ),
-);
-// scss-docs-end grid-breakpoints
+) !default;
 
-$default-config: map.deep-merge($default-config, $grid-breakpoints-config);
+$default-config: map.deep-merge($default-config, $breakpoints-config);
 
 $color_scheme-config: (
-  color-scheme: "light dark",
+  color-scheme: 'light dark',
 );
 
 $default-config: map.deep-merge($default-config, $color_scheme-config);
@@ -69,7 +50,7 @@ $enable-rules-config: (
     rtl: false,
     button-pointers: true,
     content-class: true,
-    wrapper: true,
+    wrapper: false,
   ),
 );
 
@@ -87,17 +68,16 @@ $content-default-config: (
 $default-config: map.deep-merge($default-config, $content-default-config);
 
 // Z-index
-// scss-docs-start z-index-stack
 $z-index-config: (
   z-index: (
+    tooltip: 3,
     dropdown: 4,
     header: 5,
     overlay: 6,
     modal : 7,
   ),
 ) !default;
-// scss-docs-end z-index-stack
 
 $default-config: map.deep-merge($default-config, $z-index-config);
 
-$config: map.deep-merge($default-config, $config);
+$config: map.deep-merge($default-config, $config);

package/scss/_content.scss

@@ -3,22 +3,45 @@
 │  │ ││││ │ ├┤ │││ │
 └─┘└─┘┘└┘ ┴ └─┘┘└┘ ┴
 */
-@use "sass:map";
+@use 'sass:map';
+@use 'sass:string';
 @use "functions" as functions;
 @use "./mixins" as mixins;
 
 $config: nil !default;
 $theme: nil !default;
 
-$is-content-enabled: functions.get-config($config, "enable.content");
+$is-content-enabled: functions.get-config($config, 'enable.content');
+$color_scheme: functions.get-config($config, 'color-scheme');
 
 @if ($is-content-enabled) {
-  .content {
-    @each $tag, $properties in functions.get-theme($theme, "content") {
+  @each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
 
-      // Only apply styling to elements, that stand right after `.content` class
-      & > #{$tag} {
-        @include mixins.generate-properties(#{$tag}, $properties, $config);
+    @if $scheme == 'light' {
+      .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,
+            ));
+          }
+        }
+      }
+    }
+
+    @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

@@ -11,7 +11,6 @@
 @forward "mixins/generators/color-sheme";
 @forward "mixins/generators/components";
 @forward "mixins/generators/properties";
-@forward "mixins/generators/wrapper";
 
 // ↓ Utilities
 @forward "mixins/utilities";

package/scss/_reset.scss

@@ -6,22 +6,23 @@
 
 @use "sass:map";
 @use "sass:meta";
+
 @use "functions" as functions;
 @use "mixins" as mixins;
 
 $config: nil !default;
 $theme: nil !default;
 
-$prefix: functions.get-config($config, "prefix");
+$prefix: functions.get-config($config, 'prefix');
 
-$is-reset-enabled: functions.get-config($config, "enable.reset");
+$is-reset-enabled: functions.get-config($config, 'enable.reset');
 $is-button-pointers-enabled: functions.get-config(
   $config,
   "enable.button-pointers"
 );
-$is-spacing-enabled: functions.get-config($config, "enable.spacing");
+$is-spacing-enabled: functions.get-config($config, 'enable.spacing');
 
-$color_scheme: functions.get-config($config, "color-scheme");
+$color_scheme: functions.get-config($config, 'color-scheme');
 
 @if $is-reset-enabled {
   *,
@@ -48,13 +49,13 @@ $color_scheme: functions.get-config($config, "color-scheme");
   h5,
   h6 {
     margin: 0;
-    line-height: normal;
+    line-height: 1;
   }
 
   // Paragraph
   p {
     margin: 0;
-    line-height: normal;
+    line-height: 1;
   }
 
   // Lists
@@ -353,6 +354,22 @@ $color_scheme: functions.get-config($config, "color-scheme");
     vertical-align: baseline;
   }
 
+  // Definition list
+  dl {
+    dd {
+      margin: 0;
+    }
+
+    dt {
+      margin: 0;
+    }
+  }
+
+  // Blockquote
+  blockquote {
+    margin: 0;
+  }
+
   // Hidden attribute
   [hidden] {
     display: none !important;

package/scss/_root.scss

@@ -13,13 +13,10 @@ $is-smooth-scroll-enabled: functions.get-config(
   "enable.smooth-scroll"
 );
 
-$color_scheme: functions.get-config($config, "color-scheme");
-
 $root-variables: functions.get-theme($theme, "root.variables");
 
 :root {
-  color-scheme: string.unquote($color_scheme);
-
+  /* 🌱𖣂🫚🌿 */
   @include mixins.generate-properties(
     "root",
     functions.get-theme($theme, "root"),

package/scss/components/_container.scss

@@ -3,36 +3,38 @@
 │  │ ││││ │ ├─┤││││├┤ ├┬┘
 └─┘└─┘┘└┘ ┴ ┴ ┴┴┘└┘└─┘┴└─
 **/
+@use 'sass:map';
 
-@use "sass:map";
-@use "../themes/default" as theme;
-@use "../functions" as functions;
+@use '../functions' as functions;
 @use "../mixins" as mixins;
 
 $config: nil !default;
 $theme: nil !default;
 
-$prefix: functions.get-config($config, "prefix");
-$color_scheme: functions.get-config($config, "color-scheme");
+$prefix: functions.get-config($config, 'prefix');
+$color_scheme: functions.get-config($config, 'color-scheme');
 
-$breakpoints: functions.get-config($config, "breakpoints");
+$breakpoints: functions.get-config($config, 'breakpoints');
 
-$container-component: functions.get-theme($theme, "components.container");
+$container-component: functions.get-theme($theme, 'components.container');
 
 // Container
-@each $name, $size in $breakpoints {
-  @include mixins.breakpoint($size, "min") {
-    .container.#{$name} {
-      max-width: $size;
-      @include mixins.generate-properties(
-          "container",
-          $container-component,
-          $config
-      );
+.container {
+  @include mixins.generate-properties(
+      'container',
+      $container-component,
+      $config
+  );
+
+  @each $name, $size in $breakpoints {
+    @include mixins.breakpoint($size, 'min') {
+      &.#{$name} {
+        max-width: $size;
+      }
     }
   }
-}
 
+}
 /**
 ==[ Note ]==
 We are using mixin here, because @include is not working with @media query in SCSS | 07.12.2023

package/scss/components/_form.scss

@@ -1,50 +1,9 @@
-@use '../config';
+/* Load mixins/functions */
 @use '../mixins' as mixins;
+@use '../functions' as functions;
 
 /* SCSS variables definition requirement */
 $config: nil !default;
 $theme: nil !default;
 
-@use '../forms/label' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/input' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/select' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/radio' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/checkbox' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/range' with (
-  $config : $config,
-  $theme : $theme
-);
-
-@use '../forms/switch' with (
-  $config : $config,
-  $theme : $theme
-);
-
-
-//@forward '../forms/form-text';
-//@forward '../forms/form-control';
-//@forward '../forms/form-select';
-//@forward '../forms/form-check';
-//@forward '../forms/form-range';
-//@forward '../forms/input-group';
-//@forward '../forms/validation';
+@include mixins.generate-component('form', 'form', $config, $theme);

package/scss/components/_megamenu.scss

@@ -0,0 +1,15 @@
+/*
+┬  ┌─┐┌─┐┌┬┐┌─┐┬─┐
+│  │ │├─┤ ││├┤ ├┬┘
+┴─┘└─┘┴ ┴─┴┘└─┘┴└─
+*/
+
+/* 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('megamenu', 'megamenu', $config, $theme);

package/scss/components/_placeholder.scss

@@ -12,18 +12,4 @@
 $config: nil !default;
 $theme: nil !default;
 
-@include mixins.generate-component('placeholder', 'placeholder', $config, $theme);
-
-@keyframes placeholder-glow {
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes placeholder-wave {
-  100% {
-    mask-position: -200% 0;
-    -webkit-mask-position: -200% 0;
-  }
-}
-
+@include mixins.generate-component('placeholder', 'placeholder', $config, $theme);

package/scss/components/_tooltip.scss

@@ -0,0 +1,15 @@
+/*
+┌┬┐┌─┐┌─┐┬ ┌┬┐┬┌─┐
+ │ │ ││ ││  │ │├─┘
+ ┴ └─┘└─┘┴─┘┴ ┴┴
+*/
+
+/* 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('tooltip', 'has-tooltip', $config, $theme, (variable: (name : 'tooltip')));

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
 }