@nulllogic/scssleon 1.0.5 → 1.0.6

package/README.md

@@ -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>↪ ≡─〰─〰─ Show 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,80 @@ $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 ┐
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<hr />
+
+## ┌ 📚 Documentation ┐
 
-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.
+SCSSLeon documentation is available here [http://nulllogic.github.io/scssleon-docs](http://nulllogic.github.io/scssleon-docs)
 
-Documentation search is powered by [Algolia's DocSearch](https://community.algolia.com/docsearch/).
+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/).
 
-### ─ Running documentation locally
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-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
+<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.6",
+  "version_short": "1.0.6",
   "keywords": [
     "css",
     "sass",
+    "scss",
+    "scss-framework",
     "mobile-first",
     "responsive",
     "front-end",

package/scss/_mixins.scss

@@ -1,21 +1,6 @@
 // ↓ 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
+@forward "mixins/generators/properties";

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') {
@@ -28,43 +25,22 @@
   @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));
-        }
+      .#{$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}:where([data-theme="#{$scheme}"], [data-theme="#{$scheme}"] *) {
+        @include properties.generate-properties($class, $theme-component, $config, map.deep-merge((
+          scheme: $scheme,
+        ), $options));
       }
     }
   }
+
 }
 
 @mixin generate-components($components, $config, $theme) {
@@ -72,7 +48,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 +65,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 : ()) {
 
@@ -133,8 +132,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);
+  }
   }
 }
 
@@ -172,29 +171,29 @@
         @include generate-css-properties($tag, $property, $value, $config, $options);
       }
 
-      // Colors
+        // Colors
       @else if ($property == '_colors') {
         @include generate-colors($tag, $value, $config, $options, 'light');
       }
 
-      // Responsive
+        // Responsive
       @else if ($property == '_responsive') {
         @include generate-responsive($tag, $value, $config);
       }
 
-      // Sub classes
+        // Sub classes
       @else if ($property == "_subclasses") {
         @each $class, $class_properties in $value {
           @include generate-subclasses($tag, $class, $class_properties, $config, $options);
         }
       }
 
-      // At-rules
+        // At-rules
       @else if ($property == '_atrule') {
         @include generate-atrule($tag, $value, $config, $options);
       }
 
-      // Animations
+        // Animations
       @else if ($property == '_animations') {
         @include generate-animation($tag, $value, $config, $options);
       } @else {
@@ -212,4 +211,4 @@
       }
     }
   }
-}
+}

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),
 

package/scss/_utilities.scss

@@ -1,356 +0,0 @@
-@use "config";
-@use 'sass:map';
-
-$config: nil !default;
-$theme: nil !default;
-
-// Utilities
-// @TODO add grid rules here later
-
-$utilities: () !default;
-
-$utilities: map.merge((
-
-  "display" : (
-    responsive: false,
-    property: 'display',
-    values: (
-      block: block,
-      inline-block: inline-block,
-      inline: inline,
-      flex: flex,
-      inline-flex: inline-flex,
-      table: table,
-      inline-table: inline-table,
-      table-caption: table-caption,
-      table-cell: table-cell,
-      table-column: table-column,
-      table-column-group: table-column-group,
-      table-footer-group: table-footer-group,
-      table-header-group: table-header-group,
-      table-row-group: table-row-group,
-      table-row: table-row,
-      flow-root: flow-root,
-      grid: grid,
-      inline-grid: inline-grid,
-      contents: contents,
-      list-item: list-item,
-      hidden: hidden
-    ),
-  ),
-
-  // Flex
-  "flex": (
-    responsive: false,
-    property: "flex",
-    values: (
-      flex-initial: 0 1 auto,
-      flex-1: 1 1 0%,
-      flex-auto: 1 1 auto,
-      flex-none: none
-    ),
-  ),
-
-  "flex-direction" : (
-    responsive: false,
-    property: "flex-direction",
-    values: (
-      flex-row: row,
-      flex-row-reverse: row-reverse,
-      flex-col: column,
-      flex-col-reverse: column-reverse
-    ),
-  ),
-
-  "flex-grow" : (
-   responsive: false,
-   property: "flex-grow",
-   values: (
-      grow: 1,
-      grow-0: 0
-   )
-  ),
-
-  "flex-shrink" : (
-    responsive: false,
-    property: "flex-shrink",
-    values : (
-      shrink : 1,
-      shrink-0 : 0
-    )
-  ),
-
-  "flex-wrap" : (
-    responsive: false,
-    property: "flex-wrap",
-    values : (
-      flex-wrap : flex-wrap,
-      flex-wrap-reverse: flex-wrap-reverse,
-      flex-nowrap: flex-nowrap
-    )
-  ),
-
-  "order" : (
-    responsive: false,
-    property: "order",
-    values : (
-      order-none: 0,
-      order-first: -9999,
-      order-1: 1,
-      order-2: 2,
-      order-3: 3,
-      order-4: 4,
-      order-5: 5,
-      order-6: 6,
-      order-last: 9999,
-    )
-  ),
-  
-  "align-items" : (
-    responsive: false,
-    property: "align-items",
-    values: (
-      align-items-start: flex-start,
-      align-items-end: flex-end,
-      align-items-center: center,
-      align-items-baseline: baseline,
-      align-items-stretch: stretch
-    )
-  ),
-
-  "align-content" : (
-    responsive: false,
-    property: "align-content",
-    values: (
-      align-content-center: center,
-      align-content-start: flex-start,
-      align-content-end: flex-end,
-      align-content-between: space-between,
-      align-content-around: space-around,
-      align-content-evenly: space-evenly
-    ),
-  ),
-
-  "align-self" : (
-    responsive: false,
-    property: "align-self",
-    values: (
-      align-self-start : flex-start,
-      align-self-end: flex-end,
-      align-self-center: center,
-      align-self-stretch: stretch,
-      align-self-baseline: baseline
-    )
-  ),
-
-  "justify-content": (
-    responsive: false,
-    property: "justify-content",
-    values: (
-      justify-content-start: flex-start,
-      justify-content-end: flex-end,
-      justify-content-center: center,
-      justify-content-between: space-between,
-      justify-content-around: space-around,
-      justify-content-evenly: space-evenly,
-      justify-content-stretch: stretch
-    )
-  ),
-
-  "justify-items" : (
-    responsive: false,
-    property: "justify-items",
-    values: (
-      justify-items-start: start,
-      justify-items-end: end,
-      justify-items-center: center,
-      justify-items-stretch: stretch
-    )
-  ),
-
-  "justify-self" : (
-    responsive: false,
-    property: "justify-self",
-    values: (
-      justify-self-start: start,
-      justify-self-end: end,
-      justify-self-center: center,
-      justify-self-stretch: stretch
-    )
-  ),
-
-  "vertical-align" : (
-    responsive: false,
-    property: "vertical-align",
-    values: (
-      align-baseline: baseline,
-      align-top: top,
-      align-middle: middle,
-      align-bottom: bottom,
-      align-text-top: text-top,
-      align-text-bottom: text-bottom,
-      align-sub: sub,
-      align-super: super
-    )
-  ),
-
-  "float" : (
-    responsive: false,
-    property: "float",
-    values: (
-      float-left: left,
-      float-right: right,
-      float-none: none,
-    )
-  ),
-
-  "overflow" : (
-    responsive: false,
-    property: "overflow",
-    values: (
-      overflow-auto: auto, //@TODO check later
-      overflow-hidden: hidden,
-      overflow-scroll: scroll,
-      overflow-visible: visible
-    )
-  ),
-
-  "position" : (
-    responsive: false,
-    property: "position",
-    values: (
-      static: static,
-      fixed: fixed,
-      absolute: absolute,
-      relative : relative,
-      sticky : sticky
-    )
-  ),
-
-//  "width" : (
-//
-//  ),
-//
-  "max-width" : (
-    responsive: false,
-    property: "max-width",
-    values: (
-      max-w-full : 100%,
-      max-w-none: none
-    )
-  ),
-
-  "min-height" : (
-    responsive: false,
-    property: "min-height",
-    values: (
-      min-h-0: 0px,
-      min-h-full: 100%,
-      min-h-screen: 100vh
-    )
-  ),
-
-  "text-align" : (
-    responsive: false,
-    property: "text-align",
-    values: (
-      "text-left": left,
-      "text-right" : right,
-      "text-center" : center
-    )
-  ),
-//
-//  "word-wrap" : (
-//
-//  ),
-//
-  "white-space" : (
-    responsive: false,
-    property: "white-space",
-    values: (
-      white-space-normal : normal,
-      white-space-nowrap: nowrap,
-      white-space-brake-spaces: break-spaces
-    )
-  ),
-
-  "user-select" : (
-    responsive: false,
-    property: "user-select",
-    values: (
-      select-none: none,
-      select-text: text,
-      select-all: all,
-      select-auto: auto
-    )
-  ),
-
-  "visibility" : (
-    responsive: false,
-    property: "visibility",
-    values: (
-      visible: visible,
-      invisible: invisible,
-      collapse: collapse,
-    )
-  ),
-
-  "grid-rows" : (
-    responsive: false,
-    property: "grid-template-rows",
-    values : (
-      grid-rows-1 : repeat(1, minmax(0, 1fr)),
-      grid-rows-2 : repeat(2, minmax(0, 1fr)),
-      grid-rows-3 : repeat(3, minmax(0, 1fr)),
-      grid-rows-4 : repeat(4, minmax(0, 1fr)),
-      grid-rows-5 : repeat(5, minmax(0, 1fr)),
-      grid-rows-6 : repeat(6, minmax(0, 1fr)),
-      grid-rows-none : none
-    )
-  ),
-
-  "grid-auto-flow" : (
-    responsive: false,
-    property: "grid-auto-flow",
-    values: (
-      grid-flow-row : row,
-      grid-flow-col : column,
-      grid-flow-dense : dense,
-      grid-flow-row-dense : row dense,
-      grid-flow-col-dense : column dense 
-    )
-  ),
-
-  "grid-auto-columns" : (
-    responsive: false,
-    property: "grid-auto-columns",
-    values: (
-      auto-cols-auto : auto,
-      auto-cols-min : min-content,
-      auto-cols-max : max-content,
-      auto-cols-fr : minmax(0, 1fr)
-    )
-  ),
-
-  "grid-auto-rows" : (
-    responsive: false,
-    property: "grid-auto-rows",
-    values : (
-      auto-rows-auto : auto,
-      auto-rows-min : min-content,
-      auto-rows-max: max-content,
-      auto-rows-fr: minmax(0, 1fr)
-    )
-  ),
-
-  "column-gap" : (
-    responsive: false,
-    property: "column-gap",
-    values: (
-      gap-x-1 : .25rem,
-      gap-x-2 : .5rem,
-      gap-x-3 : .75rem
-    )
-  )
-
-), $utilities)

package/scss/animations/_placeholder.scss

@@ -1,12 +0,0 @@
-@keyframes placeholder-glow {
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes placeholder-wave {
-  100% {
-    mask-position: -200% 0;
-    -webkit-mask-position: -200% 0;
-  }
-}

package/scss/helpers/_clearfix.scss

@@ -1,5 +0,0 @@
-@use '../mixins' as mixins;
-
-.clearfix {
-  @include mixins.clearfix();
-}

package/scss/helpers/_screen_reader.scss

@@ -1,11 +0,0 @@
-.sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}

package/scss/helpers/_text_truncate.scss

@@ -1,5 +0,0 @@
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/scss/mixins/_border-radius.scss

@@ -1,3 +0,0 @@
-@mixin border-radius($radius) {
-  border-radius: $radius;
-}

package/scss/mixins/_box-shadow.scss

@@ -1,16 +0,0 @@
-@mixin box-shadow($shadow...) {
-  $result: ();
-
-  @each $value in $shadow {
-    @if $value != null {
-      $result: append($result, $value, "comma");
-    }
-    @if $value == none and length($shadow) > 1 {
-      @warn "The keyword 'none' must be used as a single argument.";
-    }
-  }
-
-  @if (length($result) > 0) {
-    box-shadow: $result;
-  }
-}

package/scss/mixins/_clearfix.scss

@@ -1,9 +0,0 @@
-// scss-docs-start clearfix
-@mixin clearfix() {
-  &::after {
-    display: block;
-    clear: both;
-    content: "";
-  }
-}
-// scss-docs-end clearfix

package/scss/mixins/_forms.scss

@@ -1,152 +0,0 @@
-// This mixin uses an `if()` technique to be compatible with Dart Sass
-// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
-
-// scss-docs-start form-validation-mixins
-@mixin form-validation-state-selector($state) {
-  @if ($state == "valid" or $state == "invalid") {
-    .was-validated #{if(&, "&", "")}:#{$state},
-    #{if(&, "&", "")}.is-#{$state} {
-      @content;
-    }
-  } @else {
-    #{if(&, "&", "")}.is-#{$state} {
-      @content;
-    }
-  }
-}
-
-@mixin form-validation-state(
-  $state,
-  $color,
-  $icon,
-  $tooltip-color: color-contrast($color),
-  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
-) {
-  .#{$state}-feedback {
-    display: none;
-    width: 100%;
-    margin-top: $form-feedback-margin-top;
-    font-size : $form-feedback-font-size;
-    font-style: $form-feedback-font-style;
-    color: $color;
-  }
-
-  .#{$state}-tooltip {
-    position: absolute;
-    top: 100%;
-    z-index: 5;
-    display: none;
-    max-width: 100%; // Contain to parent when possible
-    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
-    margin-top: .1rem;
-    font-size : $form-feedback-tooltip-font-size;
-    line-height: $form-feedback-tooltip-line-height;
-    color: $tooltip-color;
-    background-color: $tooltip-bg-color;
-    @include border-radius($form-feedback-tooltip-border-radius);
-  }
-
-  @include form-validation-state-selector($state) {
-    ~ .#{$state}-feedback,
-    ~ .#{$state}-tooltip {
-      display: block;
-    }
-  }
-
-  .form-control {
-    @include form-validation-state-selector($state) {
-      border-color: $color;
-
-      @if $enable-validation-icons {
-        padding-right: $input-height-inner;
-        background-image: escape-svg($icon);
-        background-repeat: no-repeat;
-        background-position: right $input-height-inner-quarter center;
-        background-size: $input-height-inner-half $input-height-inner-half;
-      }
-
-      &:focus {
-        border-color: $color;
-        box-shadow: $focus-box-shadow;
-      }
-    }
-  }
-
-  // stylelint-disable-next-line selector-no-qualifying-type
-  textarea.form-control {
-    @include form-validation-state-selector($state) {
-      @if $enable-validation-icons {
-        padding-right: $input-height-inner;
-        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
-      }
-    }
-  }
-
-  .form-select {
-    @include form-validation-state-selector($state) {
-      border-color: $color;
-
-      @if $enable-validation-icons {
-        &:not([multiple]):not([size]),
-        &:not([multiple])[size="1"] {
-          padding-right: $form-select-feedback-icon-padding-end;
-          background-image: escape-svg($form-select-indicator), escape-svg($icon);
-          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
-          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
-        }
-      }
-
-      &:focus {
-        border-color: $color;
-        box-shadow: $focus-box-shadow;
-      }
-    }
-  }
-
-  .form-control-color {
-    @include form-validation-state-selector($state) {
-      @if $enable-validation-icons {
-        width: add($form-color-width, $input-height-inner);
-      }
-    }
-  }
-
-  .form-check-input {
-    @include form-validation-state-selector($state) {
-      border-color: $color;
-
-      &:checked {
-        background-color: $color;
-      }
-
-      &:focus {
-        box-shadow: $focus-box-shadow;
-      }
-
-      ~ .form-check-label {
-        color: $color;
-      }
-    }
-  }
-  .form-check-inline .form-check-input {
-    ~ .#{$state}-feedback {
-      margin-left: .5em;
-    }
-  }
-
-  .input-group .form-control,
-  .input-group .form-select {
-    @include form-validation-state-selector($state) {
-      @if $state == "valid" {
-        z-index: 1;
-      } @else if $state == "invalid" {
-        z-index: 2;
-      }
-      &:focus {
-        z-index: 3;
-      }
-    }
-  }
-}
-// scss-docs-end form-validation-mixins

package/scss/mixins/_gradients.scss

@@ -1,6 +0,0 @@
-// Gradients
-// scss-docs-start gradient-bg-mixin
-@mixin gradient-bg($color: null) {
-  background-color: $color;
-}
-// scss-docs-end gradient-bg-mixin

package/scss/mixins/_grid.scss

@@ -1,93 +0,0 @@
-
-@use 'sass:map';
-@use "sass:meta";
-
-@use '../config';
-@use './breakpoints' as mixins;
-@use '../functions' as functions;
-
-// Row columns
-@function divide($dividend, $divisor, $precision: 10) {
-
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-
-  @if $dividend == 0 {
-    @return 0;
-  }
-
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
-    }
-
-    $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
-    }
-
-  }
-  $result: $result * $factor * $sign;
-
-  @return $result;
-}
-
-@mixin generate_columns($size: false, $columns) {
-
-  @if $size {
-    flex: 0 0 auto;
-    width: percentage(divide($size, $columns));
-
-  } @else {
-    flex: 1 1 0;
-    max-width: 100%;
-  }
-
-}
-
-// Framework grid generation
-@mixin generate_grid_columns($columns, $breakpoints) {
-
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: mixins.breakpoint-infix($breakpoint, $breakpoints);
-
-    @include mixins.media-breakpoint-up($breakpoint, $breakpoints) {
-
-      .col#{$infix} {
-        flex: 1 0 0;
-      }
-
-      .col#{$infix}-auto {
-        flex: 0 0 auto;
-        width: auto;
-      }
-
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .col#{$infix}-#{$i} {
-            @include generate_columns($i, $columns);
-          }
-        }
-
-      }
-
-    }
-  }
-
-}

package/scss/mixins/_transition.scss

@@ -1,30 +0,0 @@
-@mixin transition($transition...) {
-  @if length($transition) == 0 {
-    $transition: config.$transition-base;
-  }
-
-  @if length($transition) > 1 {
-    @each $value in $transition {
-      @if $value == null or $value == none {
-        @warn "The keyword 'none' or 'null' must be used as a single argument.";
-      }
-    }
-  }
-
-  @if config.$enable-transitions {
-    @if nth($transition, 1) != null {
-      transition: $transition;
-    }
-
-    @if config.$enable-reduced-motion and
-      nth($transition, 1) !=
-      null and
-      nth($transition, 1) !=
-      none
-    {
-      @media (prefers-reduced-motion: reduce) {
-        transition: none;
-      }
-    }
-  }
-}

package/scss/mixins/_utilities.scss

@@ -1,15 +0,0 @@
-@use 'sass:map';
-
-// Utility generator
-// Used to generate utilities & print utilities
-@mixin generate-utility($property, $settings) {
-  $class : map.get($settings, 'property');
-  $values : map.get($settings, 'values');
-  $suffix : map.get($settings, 'suffix');
-
-  @each $name, $value in $values {
-    .#{$name} {
-      #{$property} : #{$value};
-    }
-  }
-}

package/scss/mixins/generators/_color-sheme.scss

@@ -1,5 +0,0 @@
-@use 'sass:map';
-
-@mixin generate-color-scheme($schema) {
-  @content
-}

package/scss/utilities/_api.scss

@@ -1,24 +0,0 @@
-@use 'sass:map';
-
-@use '../functions' as functions;
-@use '../mixins' as mixins;
-@use '../utilities' as utilities;
-
-$config: nil !default;
-$theme: nil !default;
-
-$grid-breakpoints: functions.get-config($config, 'grid-breakpoints');
-
-// Loop over each breakpoint
-@each $property, $settings in utilities.$utilities {
-  @include mixins.generate-utility($property, $settings);
-}
-
-// Print utilities
-@media print {
-//  @each $key, $utility in utilities.$utilities {
-//    @if type-of($utility) == "map" and map-get($utility, print) == true {
-//      @include mixins.generate-utility($utility, "-print");
-//    }
-//  }
-}