@guebbit/css-toolkit 1.1.1 → 1.1.3

package/docs/mixins/build-compatibility.md

@@ -0,0 +1,23 @@
+# Build Compatibility
+
+## Example
+
+Compatibility mode for browsers
+Firefox, Internet Explorer, Microsoft Edge, Opera (TODO), Safari (TODO)
+
+```scss
+@include guebbit-compatibility("ie") {
+    ...
+}
+```
+
+# Code
+
+<<< ../../src/mixins/_build-compatibility.scss 
+
+## SCSS variables
+
+| Variable     | Description        | Accepted Values | Default |
+|:-------------|:-------------------|:----------------|:--------|
+| `@content`   | CSS Style to apply | `content`       | ``      |
+| `$browser`   | browser name       | `string`        | `none`  |

package/docs/mixins/build-scrollbar.md

@@ -0,0 +1,19 @@
+# Scrollbar
+
+## Example
+Scrollbars of element
+
+```scss
+    @include build-scrollbar(4px, #fff, #000, 10px);
+```
+
+## Code
+
+<<< ../../src/mixins/_build-scrollbar.scss
+
+| Variable  | Description             | Accepted Values | Default |
+|:----------|:------------------------|:----------------|:--------|
+| `$size`   | Size of scrollbar       | `size`          | `4px`   |
+| `$color`  | Color of scrollbar      | `color`         | `#fff`  |
+| `$bg`     | Color in the background | `color`         | `auto`  |
+| `$radius` | Radius of scrollbar     | `size`          | `10px`  |

package/docs/mixins/create-colors.md

@@ -0,0 +1 @@
+# TODO

package/docs/mixins/create-helper-margin.md

@@ -0,0 +1,25 @@
+# Create Margin
+
+## Example
+
+```scss
+@include create-helper-margin((
+    (auto, auto),
+    (6, 6px),
+    (12, 12px),
+    (24, 24px),
+    (36, 36px),
+    (48, 48px),
+), true);
+```
+
+## Code
+
+<<< ../../src/mixins/_create-helper-margin.scss
+
+
+| Variable          | Description                                              | Accepted Values       | Default |
+|:------------------|:---------------------------------------------------------|:----------------------|:--------|
+| `$measure-list`   | List of pairs <name, value>                              | `Array<name,value>[]` | `[]`    |
+| `$important`      | If instruction is !important                             | `boolean`             | `false` |
+| `$prefix`         | Eventual prefix (like `guebbit-`), to prevent collisions | `string`              | ``      |

package/docs/mixins/create-helper-padding.md

@@ -0,0 +1,24 @@
+# Create Padding
+
+## Example
+
+```scss
+@include create-helper-padding((
+    (6, 6px),
+    (12, 12px),
+    (24, 24px),
+    (36, 36px),
+    (48, 48px),
+), true);
+```
+
+## Code
+
+<<< ../../src/mixins/_create-helper-margin.scss
+
+
+| Variable          | Description                                              | Accepted Values       | Default |
+|:------------------|:---------------------------------------------------------|:----------------------|:--------|
+| `$measure-list`   | List of pairs <name, value>                              | `Array<name,value>[]` | `[]`    |
+| `$important`      | If instruction is !important                             | `boolean`             | `false` |
+| `$prefix`         | Eventual prefix (like `guebbit-`), to prevent collisions | `string`              | ``      |

package/docs/mixins/create-instruction.md

@@ -0,0 +1,33 @@
+# Create Instruction
+
+Create instructions. Given name and size.
+Example: width and min-width
+
+## Example
+
+```scss
+@include create-instructions("width", (
+    (25, 25%),
+    (50, 50%),
+    (75, 75%),
+    (100, 100%),
+    (p25, 25px),
+    (p50, 50px),
+    (p75, 75px),
+    (p100, 100px)
+), true);
+```
+
+## Code
+
+<<< ../../src/mixins/_create-instructions.scss
+
+## SCSS variables
+
+| Variable          | Description                                              | Accepted Values       | Default |
+|:------------------|:---------------------------------------------------------|:----------------------|:--------|
+| `$instruction`    | CSS instruction to insert                                | `string`              | `none`  |
+| `$measure-list`   | List of pairs <name, value>                              | `Array<name,value>[]` | `[]`    |
+| `$important`      | Flag: if instruction is !important                       | `boolean`             | `false` |
+| `$prefix`         | Eventual prefix (like `guebbit-`), to prevent collisions | `string`              | ``      |
+| `$delimiter`      | Custom delimeter of the final classnames                 | `string`              | `-`     |

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@guebbit/css-toolkit",
   "type": "module",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A repository containing helpful SCSS functions, mixins, and utilities for streamlining and standardizing CSS development",
   "main": "vite.config.js",
   "files": [
+    "docs",
+    "src",
+    "test",
     "index.scss",
     "README.md",
     "LICENSE",
-    "CHANGELOG"
+    "CHANGELOG",
+    "vite.config.ts"
   ],
   "scripts": {
     "test": "mocha",
@@ -20,25 +24,25 @@
     "publish:public": "npm publish --access public"
   },
   "devDependencies": {
-    "@types/node": "^22.5.4",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "autoprefixer": "^10.4.16",
+    "@types/node": "^22.7.4",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
     "breakpoint-sass": "^3.0.0",
     "chai": "^5.1.1",
     "css-loader": "^7.1.2",
     "cssnano": "^7.0.6",
-    "mocha": "^10.1.0",
-    "postcss": "^8.4.33",
+    "mocha": "^10.7.3",
+    "postcss": "^8.4.47",
     "postcss-loader": "^8.1.1",
-    "postcss-prefix-selector": "^1.16.0",
-    "sass": "^1.69.7",
+    "postcss-prefix-selector": "^1.16.1",
+    "sass": "^1.79.4",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.1.0",
+    "stylelint": "^16.9.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-scss": "^6.0.0",
-    "vite": "^5.0.11",
-    "vitepress": "^1.0.0-rc.36"
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-scss": "^6.7.0",
+    "vite": "^5.4.8",
+    "vitepress": "^1.3.4"
   },
   "repository": {
     "type": "git",

package/src/colors/_bootstrap.scss

@@ -0,0 +1,181 @@
+@use "sass:color" as color;
+@use "../functions/colors" as color-functions;
+
+// Material colors by Bootstrap
+// https://github.com/twbs/bootstrap
+// https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_variables.scss
+
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+
+// scss-docs-start gray-color-variables
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+        "100": $gray-100,
+        "200": $gray-200,
+        "300": $gray-300,
+        "400": $gray-400,
+        "500": $gray-500,
+        "600": $gray-600,
+        "700": $gray-700,
+        "800": $gray-800,
+        "900": $gray-900
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+        "blue":       $blue,
+        "indigo":     $indigo,
+        "purple":     $purple,
+        "pink":       $pink,
+        "red":        $red,
+        "orange":     $orange,
+        "yellow":     $yellow,
+        "green":      $green,
+        "teal":       $teal,
+        "cyan":       $cyan,
+        "black":      $black,
+        "white":      $white,
+        "gray":       $gray-600,
+        "gray-dark":  $gray-800
+) !default;
+// scss-docs-end colors-map
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio:   4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark:      $black !default;
+$color-contrast-light:     $white !default;
+
+// fusv-disable
+$blue-100: color.scale($blue, $lightness: 80%) !default;
+$blue-200: color.scale($blue, $lightness: 60%) !default;
+$blue-300: color.scale($blue, $lightness: 40%) !default;
+$blue-400: color.scale($blue, $lightness: 20%) !default;
+$blue-500: $blue !default;
+$blue-600: color.scale($blue, $lightness: -20%) !default;
+$blue-700: color.scale($blue, $lightness: -40%) !default;
+$blue-800: color.scale($blue, $lightness: -60%) !default;
+$blue-900: color.scale($blue, $lightness: -80%) !default;
+
+$indigo-100: color.scale($indigo, $lightness: 80%) !default;
+$indigo-200: color.scale($indigo, $lightness: 60%) !default;
+$indigo-300: color.scale($indigo, $lightness: 40%) !default;
+$indigo-400: color.scale($indigo, $lightness: 20%) !default;
+$indigo-500: $indigo !default;
+$indigo-600: color.scale($indigo, $lightness: -20%) !default;
+$indigo-700: color.scale($indigo, $lightness: -40%) !default;
+$indigo-800: color.scale($indigo, $lightness: -60%) !default;
+$indigo-900: color.scale($indigo, $lightness: -80%) !default;
+
+$purple-100: color.scale($purple, $lightness: 80%) !default;
+$purple-200: color.scale($purple, $lightness: 60%) !default;
+$purple-300: color.scale($purple, $lightness: 40%) !default;
+$purple-400: color.scale($purple, $lightness: 20%) !default;
+$purple-500: $purple !default;
+$purple-600: color.scale($purple, $lightness: -20%) !default;
+$purple-700: color.scale($purple, $lightness: -40%) !default;
+$purple-800: color.scale($purple, $lightness: -60%) !default;
+$purple-900: color.scale($purple, $lightness: -80%) !default;
+
+$pink-100: color.scale($pink, $lightness: 80%) !default;
+$pink-200: color.scale($pink, $lightness: 60%) !default;
+$pink-300: color.scale($pink, $lightness: 40%) !default;
+$pink-400: color.scale($pink, $lightness: 20%) !default;
+$pink-500: $pink !default;
+$pink-600: color.scale($pink, $lightness: -20%) !default;
+$pink-700: color.scale($pink, $lightness: -40%) !default;
+$pink-800: color.scale($pink, $lightness: -60%) !default;
+$pink-900: color.scale($pink, $lightness: -80%) !default;
+
+$red-100: color.scale($red, $lightness: 80%) !default;
+$red-200: color.scale($red, $lightness: 60%) !default;
+$red-300: color.scale($red, $lightness: 40%) !default;
+$red-400: color.scale($red, $lightness: 20%) !default;
+$red-500: $red !default;
+$red-600: color.scale($red, $lightness: -20%) !default;
+$red-700: color.scale($red, $lightness: -40%) !default;
+$red-800: color.scale($red, $lightness: -60%) !default;
+$red-900: color.scale($red, $lightness: -80%) !default;
+
+$orange-100: color.scale($orange, $lightness: 80%) !default;
+$orange-200: color.scale($orange, $lightness: 60%) !default;
+$orange-300: color.scale($orange, $lightness: 40%) !default;
+$orange-400: color.scale($orange, $lightness: 20%) !default;
+$orange-500: $orange !default;
+$orange-600: color.scale($orange, $lightness: -20%) !default;
+$orange-700: color.scale($orange, $lightness: -40%) !default;
+$orange-800: color.scale($orange, $lightness: -60%) !default;
+$orange-900: color.scale($orange, $lightness: -80%) !default;
+
+$yellow-100: color.scale($yellow, $lightness: 80%) !default;
+$yellow-200: color.scale($yellow, $lightness: 60%) !default;
+$yellow-300: color.scale($yellow, $lightness: 40%) !default;
+$yellow-400: color.scale($yellow, $lightness: 20%) !default;
+$yellow-500: $yellow !default;
+$yellow-600: color.scale($yellow, $lightness: -20%) !default;
+$yellow-700: color.scale($yellow, $lightness: -40%) !default;
+$yellow-800: color.scale($yellow, $lightness: -60%) !default;
+$yellow-900: color.scale($yellow, $lightness: -80%) !default;
+
+$green-100: color.scale($green, $lightness: 80%) !default;
+$green-200: color.scale($green, $lightness: 60%) !default;
+$green-300: color.scale($green, $lightness: 40%) !default;
+$green-400: color.scale($green, $lightness: 20%) !default;
+$green-500: $green !default;
+$green-600: color.scale($green, $lightness: -20%) !default;
+$green-700: color.scale($green, $lightness: -40%) !default;
+$green-800: color.scale($green, $lightness: -60%) !default;
+$green-900: color.scale($green, $lightness: -80%) !default;
+
+$teal-100: color.scale($teal, $lightness: 80%) !default;
+$teal-200: color.scale($teal, $lightness: 60%) !default;
+$teal-300: color.scale($teal, $lightness: 40%) !default;
+$teal-400: color.scale($teal, $lightness: 20%) !default;
+$teal-500: $teal !default;
+$teal-600: color.scale($teal, $lightness: -20%) !default;
+$teal-700: color.scale($teal, $lightness: -40%) !default;
+$teal-800: color.scale($teal, $lightness: -60%) !default;
+$teal-900: color.scale($teal, $lightness: -80%) !default;
+
+$cyan-100: color.scale($cyan, $lightness: 80%) !default;
+$cyan-200: color.scale($cyan, $lightness: 60%) !default;
+$cyan-300: color.scale($cyan, $lightness: 40%) !default;
+$cyan-400: color.scale($cyan, $lightness: 20%) !default;
+$cyan-500: $cyan !default;
+$cyan-600: color.scale($cyan, $lightness: -20%) !default;
+$cyan-700: color.scale($cyan, $lightness: -40%) !default;
+$cyan-800: color.scale($cyan, $lightness: -60%) !default;
+$cyan-900: color.scale($cyan, $lightness: -80%) !default;

package/src/colors/_brands.scss

@@ -0,0 +1,20 @@
+$brand-facebook: #3b5998;
+$brand-youtube: #cc181e;
+$brand-twitter: #3cf;
+$brand-skype: #00aff0;
+$brand-linkedin: #1565c0;
+$brand-whatsapp: #4ac959;
+$brand-telegram: #08c;
+$brand-twitch: #6441a4;
+$brand-pinterest: #e60023;
+$brand-reddit: #ff4301;
+$brand-tumblr: #35465c;
+$brand-patreon: #f96854;
+$brand-kickstarter: #05ce78;
+$brand-instagram: #f09433;
+$brand-tiktok: #25f4ee;
+$brand-google: #dc4a38;
+$brand-paypal: #003087;
+$brand-paypal2: #f2b938;
+$advanced-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
+$advanced-brand-tiktok: linear-gradient(90deg, #25f4ee 0%, #000 30%, #000 50%, #000 70%, #fe2c55 100%);

package/src/colors/_customs.scss

@@ -0,0 +1,55 @@
+@use "sass:color" as color;
+@use "../functions/colors" as color-functions;
+
+$flatrica-green: #06a763 !default;
+$manga-red: #d41816 !default;
+
+$flatrica-green-100: color.scale($flatrica-green, $lightness: 20%);
+$flatrica-green-200: color.scale($flatrica-green, $lightness: 40%);
+$flatrica-green-300: color.scale($flatrica-green, $lightness: 60%);
+$flatrica-green-400: color.scale($flatrica-green, $lightness: 80%);
+$flatrica-green-500: $flatrica-green;
+$flatrica-green-600: color.scale($flatrica-green, $lightness: -20%);
+$flatrica-green-700: color.scale($flatrica-green, $lightness: -40%);
+$flatrica-green-800: color.scale($flatrica-green, $lightness: -60%);
+$flatrica-green-900: color.scale($flatrica-green, $lightness: -80%);
+
+
+$manga-red-100: color.scale($manga-red, $lightness: 20%);
+$manga-red-200: color.scale($manga-red, $lightness: 40%);
+$manga-red-300: color.scale($manga-red, $lightness: 60%);
+$manga-red-400: color.scale($manga-red, $lightness: 80%);
+$manga-red-500: $manga-red;
+$manga-red-600: color.scale($manga-red, $lightness: -20%);
+$manga-red-700: color.scale($manga-red, $lightness: -40%);
+$manga-red-800: color.scale($manga-red, $lightness: -60%);
+$manga-red-900: color.scale($manga-red, $lightness: -80%);
+
+$colors-collection: (
+        "core": (
+                "flatrica-green": $flatrica-green,
+                "manga-red": $manga-red,
+        ),
+        "flatrica-green": (
+                "100": $flatrica-green-100,
+                "200": $flatrica-green-200,
+                "300": $flatrica-green-300,
+                "400": $flatrica-green-400,
+                "500": $flatrica-green-500,
+                "600": $flatrica-green-600,
+                "700": $flatrica-green-700,
+                "800": $flatrica-green-800,
+                "900": $flatrica-green-900,
+        ),
+        "manga-red": (
+                "100": $manga-red-100,
+                "200": $manga-red-200,
+                "300": $manga-red-300,
+                "400": $manga-red-400,
+                "500": $manga-red-500,
+                "600": $manga-red-600,
+                "700": $manga-red-700,
+                "800": $manga-red-800,
+                "900": $manga-red-900,
+        ),
+);

package/src/colors/_index.scss

@@ -0,0 +1,200 @@
+@forward "brands";
+@forward "customs";
+@forward "bootstrap";
+
+@use "bootstrap" as bootstrap;
+@use "customs" as customs;
+@use "brands" as brands;
+
+$colors-collection: (
+  // BOOTSTRAP
+        "grey": (
+                "100": bootstrap.$gray-100,
+                "200": bootstrap.$gray-200,
+                "300": bootstrap.$gray-300,
+                "400": bootstrap.$gray-400,
+                "500": bootstrap.$gray-500,
+                "600": bootstrap.$gray-600,
+                "700": bootstrap.$gray-700,
+                "800": bootstrap.$gray-800,
+                "900": bootstrap.$gray-900,
+        ),
+        "blue": (
+                "100": bootstrap.$blue-100,
+                "200": bootstrap.$blue-200,
+                "300": bootstrap.$blue-300,
+                "400": bootstrap.$blue-400,
+                "500": bootstrap.$blue-500,
+                "600": bootstrap.$blue-600,
+                "700": bootstrap.$blue-700,
+                "800": bootstrap.$blue-800,
+                "900": bootstrap.$blue-900,
+        ),
+        "indigo": (
+                "100": bootstrap.$indigo-100,
+                "200": bootstrap.$indigo-200,
+                "300": bootstrap.$indigo-300,
+                "400": bootstrap.$indigo-400,
+                "500": bootstrap.$indigo-500,
+                "600": bootstrap.$indigo-600,
+                "700": bootstrap.$indigo-700,
+                "800": bootstrap.$indigo-800,
+                "900": bootstrap.$indigo-900,
+        ),
+        "purple": (
+                "100": bootstrap.$purple-100,
+                "200": bootstrap.$purple-200,
+                "300": bootstrap.$purple-300,
+                "400": bootstrap.$purple-400,
+                "500": bootstrap.$purple-500,
+                "600": bootstrap.$purple-600,
+                "700": bootstrap.$purple-700,
+                "800": bootstrap.$purple-800,
+                "900": bootstrap.$purple-900,
+        ),
+        "pink": (
+                "100": bootstrap.$pink-100,
+                "200": bootstrap.$pink-200,
+                "300": bootstrap.$pink-300,
+                "400": bootstrap.$pink-400,
+                "500": bootstrap.$pink-500,
+                "600": bootstrap.$pink-600,
+                "700": bootstrap.$pink-700,
+                "800": bootstrap.$pink-800,
+                "900": bootstrap.$pink-900,
+        ),
+        "red": (
+                "100": bootstrap.$red-100,
+                "200": bootstrap.$red-200,
+                "300": bootstrap.$red-300,
+                "400": bootstrap.$red-400,
+                "500": bootstrap.$red-500,
+                "600": bootstrap.$red-600,
+                "700": bootstrap.$red-700,
+                "800": bootstrap.$red-800,
+                "900": bootstrap.$red-900,
+        ),
+        "orange": (
+                "100": bootstrap.$orange-100,
+                "200": bootstrap.$orange-200,
+                "300": bootstrap.$orange-300,
+                "400": bootstrap.$orange-400,
+                "500": bootstrap.$orange-500,
+                "600": bootstrap.$orange-600,
+                "700": bootstrap.$orange-700,
+                "800": bootstrap.$orange-800,
+                "900": bootstrap.$orange-900,
+        ),
+        "yellow": (
+                "100": bootstrap.$yellow-100,
+                "200": bootstrap.$yellow-200,
+                "300": bootstrap.$yellow-300,
+                "400": bootstrap.$yellow-400,
+                "500": bootstrap.$yellow-500,
+                "600": bootstrap.$yellow-600,
+                "700": bootstrap.$yellow-700,
+                "800": bootstrap.$yellow-800,
+                "900": bootstrap.$yellow-900,
+        ),
+        "green": (
+                "100": bootstrap.$green-100,
+                "200": bootstrap.$green-200,
+                "300": bootstrap.$green-300,
+                "400": bootstrap.$green-400,
+                "500": bootstrap.$green,
+                "600": bootstrap.$green-500,
+                "700": bootstrap.$green-600,
+                "800": bootstrap.$green-700,
+                "900": bootstrap.$green-800,
+        ),
+        "teal": (
+                "100": bootstrap.$teal-100,
+                "200": bootstrap.$teal-200,
+                "300": bootstrap.$teal-300,
+                "400": bootstrap.$teal-400,
+                "500": bootstrap.$teal-500,
+                "600": bootstrap.$teal-600,
+                "700": bootstrap.$teal-700,
+                "800": bootstrap.$teal-800,
+                "900": bootstrap.$teal-900,
+        ),
+        "cyan": (
+                "100": bootstrap.$cyan-100,
+                "200": bootstrap.$cyan-200,
+                "300": bootstrap.$cyan-300,
+                "400": bootstrap.$cyan-400,
+                "500": bootstrap.$cyan-500,
+                "600": bootstrap.$cyan-600,
+                "700": bootstrap.$cyan-700,
+                "800": bootstrap.$cyan-800,
+                "900": bootstrap.$cyan-900,
+        ),
+  // CUSTOM
+        "flatrica-green": (
+                "100": customs.$flatrica-green-100,
+                "200": customs.$flatrica-green-200,
+                "300": customs.$flatrica-green-300,
+                "400": customs.$flatrica-green-400,
+                "500": customs.$flatrica-green-500,
+                "600": customs.$flatrica-green-600,
+                "700": customs.$flatrica-green-700,
+                "800": customs.$flatrica-green-800,
+                "900": customs.$flatrica-green-900,
+        ),
+        "manga-red": (
+                "100": customs.$manga-red-100,
+                "200": customs.$manga-red-200,
+                "300": customs.$manga-red-300,
+                "400": customs.$manga-red-400,
+                "500": customs.$manga-red-500,
+                "600": customs.$manga-red-600,
+                "700": customs.$manga-red-700,
+                "800": customs.$manga-red-800,
+                "900": customs.$manga-red-900,
+        ),
+  // BRANDS
+        "brand": (
+                "facebook": brands.$brand-facebook,
+                "youtube": brands.$brand-youtube,
+                "twitter": brands.$brand-twitter,
+                "skype": brands.$brand-skype,
+                "linkedin": brands.$brand-linkedin,
+                "whatsapp": brands.$brand-whatsapp,
+                "telegram": brands.$brand-telegram,
+                "twitch": brands.$brand-twitch,
+                "pinterest": brands.$brand-pinterest,
+                "reddit": brands.$brand-reddit,
+                "tumblr": brands.$brand-tumblr,
+                "patreon": brands.$brand-patreon,
+                "kickstarter":brands.$brand-kickstarter,
+                "instagram": brands.$brand-instagram,
+                "tiktok": brands.$brand-tiktok,
+                "google": brands.$brand-google,
+                "paypal": brands.$brand-paypal,
+                "paypal2": brands.$brand-paypal2,
+        ),
+  // CORE
+        "core": (
+                "blue": bootstrap.$blue,
+                "indigo": bootstrap.$indigo,
+                "purple": bootstrap.$purple,
+                "pink": bootstrap.$pink,
+                "red": bootstrap.$red,
+                "orange": bootstrap.$orange,
+                "yellow": bootstrap.$yellow,
+                "green": bootstrap.$green,
+                "teal": bootstrap.$teal,
+                "cyan": bootstrap.$cyan,
+                "black": bootstrap.$black,
+                "white": bootstrap.$white,
+                "gray": bootstrap.$gray-500,
+                "gray-dark": bootstrap.$gray-900,
+                "flatrica-green": customs.$flatrica-green,
+                "manga-red": customs.$manga-red,
+        ),
+  // ADVANCED
+        "advanced": (
+                "brand-instagram": brands.$advanced-brand-instagram,
+                "brand-tiktok": brands.$advanced-brand-tiktok,
+        ),
+);