@nulllogic/scssleon 1.0.3 → 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 ! 
+
+# 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")
+
+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.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> ] –
+– [ <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>
 
-<p align="center">
-  <a href="https://nulllogic.net/"><img src="./.imgs/logo.png" alt="NullLogic logo"></a>
-</p>
+## ┌ 🧭 Quickstart ┐
+
+### 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
+```
 
-## ┌ Quickstart ┐
+8. Profit – you now have output at `/assets/css` directory
 
-[![IMAGE ALT TEXT HERE](http://www.sergiuko.com/wp-content/uploads/2012/04/vimeo-preview-627x351.jpg)](https://vimeo.com/83573522)
+</details>
 
-## ┌ Documentation ┐
+
+## ┌ 📚 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>
-
+## ┌ 📜 License ┐
 [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.3",
-  "version_short": "1.0",
+  "version": "1.0.5",
+  "version_short": "1.0.5",
   "keywords": [
     "css",
     "sass",
@@ -18,16 +18,15 @@
     "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",
-    "minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
-    "docs-build": "docker run --rm -it -v $(pwd):/src klakegg/hugo:alpine",
-    "docs-serve": "docker run --rm -it -v $(pwd):/src -p 1313:1313 klakegg/hugo:alpine server"
+    "watch": "sass --watch ./scss:./dist/css"
+  },
+  "dependencies": {
+    "sass": "^1.89.2"
   },
   "devDependencies": {
-    "sass": "^1.77.8",
-    "clean-css": "^5.3.3"
+
   },
-  "homepage": "https://nulllogic.github.io/scssleon",
+  "homepage": "https://nulllogic.github.io/scssleon-docs",
   "style": "dist/scssleon.css",
   "sass": "scss/scssleon.scss",
   "repository": {
@@ -38,5 +37,8 @@
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/nulllogic/scssleon/issues"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   }
-}
+}

package/scss/_base.scss

@@ -1,31 +1,52 @@
 /*
 ┌┐ ┌─┐┌─┐┌─┐
-├┴┐├─┤└─┐├┤ 
+├┴┐├─┤└─┐├┤
 └─┘┴ ┴└─┘└─┘
 */
 
+@use "sass:string";
 @use "sass:map";
-@use "sass:meta";
-@use "functions" as functions;
-@use "mixins" as mixins;
 
+/* Load settings and 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-reset-enabled: functions.get-config($config, "enable.reset");
-$is-button-pointers-enabled: functions.get-config(
-  $config,
-  "enable.button-pointers"
-);
+html {
+  color-scheme: string.unquote($color_scheme);
+}
 
-$is-spacing-enabled: functions.get-config($config, "enable.spacing");
+// data-theme attribute is changing the color scheme
+html[data-theme="dark"] {
+  color-scheme: dark
+}
 
-$color_scheme: functions.get-config($config, "color-scheme");
+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 $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,
+        ));
+      }
+    }
   }
-}
+}

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,23 +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: (
-    dropdown: 1000,
-    sticky: 1020,
-    fixed: 1030,
-    offcanvas-backdrop: 1040,
-    offcanvas: 1045,
-    modal-backdrop: 1050,
-    modal: 1055,
-    popover: 1070,
-    tooltip: 1080,
-    toast: 1090,
+    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,46 @@
 │  │ ││││ │ ├┤ │││ │
 └─┘└─┘┘└┘ ┴ └─┘┘└┘ ┴
 */
-@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") {
-      #{$tag} {
-        @include mixins.generate-properties(#{$tag}, $properties, $config);
+  @each $scheme in string.split(functions.get-config($config, 'color-scheme'), ' ') {
+
+    @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/_functions.scss

@@ -1,25 +1,12 @@
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:string';
 
-@function str-split($string, $separator) {
-  $split-arr: ();
-  $index : str-index($string, $separator);
-  @while $index != null {
-    $item: str-slice($string, 1, $index - 1);
-    $split-arr: append($split-arr, $item);
-    $string: str-slice($string, $index + 1);
-    $index : str-index($string, $separator);
-  }
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+@function replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return string.slice($string, 1, $index - 1) + $replace + replace(string.slice($string, $index + string.length($search)), $search, $replace);
   }
 
   @return $string;
@@ -33,8 +20,8 @@
     @return nil;
   }
 
-  @if (str-index($value, '.')) {
-    $path: str-split($value, '.');
+  @if (string.index($value, '.')) {
+    $path: string.split($value, '.');
     $val: map.get($config, $path...);
   } @else {
     $val: map.get($config, $value);
@@ -55,8 +42,8 @@
     @return nil;
   }
 
-  @if (str-index($value, '.')) {
-    $path: str-split($value, '.');
+  @if (string.index($value, '.')) {
+    $path: string.split($value, '.');
     $val: map.get($theme, $path...);
   } @else {
     $val: map.get($theme, $value);
@@ -74,13 +61,13 @@
 //
 // Requires the use of quotes around data URIs.
 @function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if string.index($string, "data:image/svg+xml") {
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      @if string.index($string, "url(") == 1 {
+        $string: url("#{string.replace(string.slice($string, 6, -3), $char, $encoded)}");
       } @else {
-        $string: str-replace($string, $char, $encoded);
+        $string: string.replace($string, $char, $encoded);
       }
     }
   }

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 {
   *,
@@ -40,6 +41,23 @@ $color_scheme: functions.get-config($config, "color-scheme");
     text-decoration-skip-ink: none;
   }
 
+  // Headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    line-height: 1;
+  }
+
+  // Paragraph
+  p {
+    margin: 0;
+    line-height: 1;
+  }
+
   // Lists
   ul,ol,
   ol ol,
@@ -121,7 +139,10 @@ $color_scheme: functions.get-config($config, "color-scheme");
 
   // Images and content
   img,
+  iframe,
   svg {
+    // Adding `display` rule here, because if `display` is not specified, 2px will be added
+    display: inline-block;
     vertical-align: middle;
   }
 
@@ -211,19 +232,12 @@ $color_scheme: functions.get-config($config, "color-scheme");
   // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
   //    controls in Android 4.
   // 2. Correct the inability to style clickable types in iOS and Safari.
-  // 3. Opinionated: add "hand" cursor to non-disabled button elements.
 
   button,
   [type="button"], // 1
   [type="reset"],
   [type="submit"] {
     -webkit-appearance: button; // 2
-
-    @if $is-button-pointers-enabled {
-      &:not(:disabled) {
-        cursor: pointer; // 3
-      }
-    }
   }
 
   // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
@@ -340,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,24 +13,19 @@ $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 {
+  /* 🌱𖣂🫚🌿 */
+  @include mixins.generate-properties(
+    "root",
+    functions.get-theme($theme, "root"),
+    $config,
+  );
+
   @if $is-smooth-scroll-enabled {
     @media (prefers-reduced-motion: no-preference) {
       scroll-behavior: smooth;
     }
   }
-
-  & {
-    color-scheme: string.unquote($color_scheme);
-  }
-
-  @include mixins.generate-properties(
-    "root",
-    functions.get-theme($theme, "root"),
-    $config
-  );
-}
+}