@guebbit/css-toolkit 1.1.2 → 1.1.3

package/docs/.vitepress/dist/mixins/create-instruction.html

@@ -6,13 +6,13 @@
     <title>Create Instruction - base SCSS plus components</title>
     <meta name="description" content="Guebbit's personal SCSS Library (MIT license, free to use).">
     <meta name="generator" content="VitePress v1.3.4">
-    <link rel="preload stylesheet" href="/assets/style.DDLX1Ber.css" as="style">
+    <link rel="preload stylesheet" href="/assets/style.B-ztagZG.css" as="style">
     
-    <script type="module" src="/assets/app.CpyNzro9.js"></script>
+    <script type="module" src="/assets/app.BlbAZR_S.js"></script>
     <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
-    <link rel="modulepreload" href="/assets/chunks/theme.CviQ0biq.js">
-    <link rel="modulepreload" href="/assets/chunks/framework.DJJi9g99.js">
-    <link rel="modulepreload" href="/assets/mixins_create-instruction.md.DKI2LvdM.lean.js">
+    <link rel="modulepreload" href="/assets/chunks/theme.VODMs8XS.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.Bt53DRYp.js">
+    <link rel="modulepreload" href="/assets/mixins_create-instruction.md.CGTPQqQv.lean.js">
     <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
     <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
@@ -37,7 +37,7 @@
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="scss-variables" tabindex="-1">SCSS variables <a class="header-anchor" href="#scss-variables" aria-label="Permalink to &quot;SCSS variables&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Variable</th><th style="text-align:left;">Description</th><th style="text-align:left;">Accepted Values</th><th style="text-align:left;">Default</th></tr></thead><tbody><tr><td style="text-align:left;"><code>$instruction</code></td><td style="text-align:left;">CSS instruction to insert</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;"><code>none</code></td></tr><tr><td style="text-align:left;"><code>$measure-list</code></td><td style="text-align:left;">List of pairs &lt;name, value&gt;</td><td style="text-align:left;"><code>Array&lt;name,value&gt;[]</code></td><td style="text-align:left;"><code>[]</code></td></tr><tr><td style="text-align:left;"><code>$important</code></td><td style="text-align:left;">Flag: if instruction is !important</td><td style="text-align:left;"><code>boolean</code></td><td style="text-align:left;"><code>false</code></td></tr><tr><td style="text-align:left;"><code>$prefix</code></td><td style="text-align:left;">Eventual prefix (like <code>guebbit-</code>), to prevent collisions</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">``</td></tr><tr><td style="text-align:left;"><code>$delimiter</code></td><td style="text-align:left;">Custom delimeter of the final classnames</td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;"><code>-</code></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/colors/bootstrap.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Bootstrap</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
-    <script>window.__VP_HASH_MAP__=JSON.parse("{\"colors_bootstrap.md\":\"DiC9aO06\",\"colors_brands.md\":\"Bp8_jfHR\",\"colors_customs.md\":\"DyEXln8b\",\"functions_colors.md\":\"CtYahXnA\",\"functions_helpers.md\":\"DZRTPA4t\",\"functions_strings.md\":\"BMMJdTdo\",\"index.md\":\"2uetSBMH\",\"mixins_build-aspect-ratio.md\":\"8mabvpDg\",\"mixins_build-compatibility.md\":\"cOIJ58bq\",\"mixins_build-scrollbar.md\":\"DrR7vY38\",\"mixins_create-colors.md\":\"FiVBK2v9\",\"mixins_create-helper-margin.md\":\"B85aWiR9\",\"mixins_create-helper-padding.md\":\"_fxbDV5T\",\"mixins_create-instruction.md\":\"DKI2LvdM\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Guebbit SCSS Library\",\"titleTemplate\":\":title - base SCSS plus components\",\"description\":\"Guebbit's personal SCSS Library (MIT license, free to use).\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logotype.svg\",\"siteTitle\":\"SCSS Library\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Github\",\"link\":\"https://github.com/Guebbit/css-toolkit\"}],\"sidebar\":[{\"text\":\"Colors\",\"collapsed\":false,\"items\":[{\"text\":\"Bootstrap\",\"link\":\"/colors/bootstrap.md\"},{\"text\":\"Brands\",\"link\":\"/colors/brands.md\"},{\"text\":\"Gradients\",\"link\":\"/colors/customs.md\"}]},{\"text\":\"Functions\",\"collapsed\":false,\"items\":[{\"text\":\"Colors\",\"link\":\"/functions/colors.md\"},{\"text\":\"Helpers\",\"link\":\"/functions/helpers.md\"}]},{\"text\":\"Mixins\",\"collapsed\":false,\"items\":[{\"text\":\"Build Aspect Ratio\",\"link\":\"/mixins/build-aspect-ratio.md\"},{\"text\":\"Build Compatibility\",\"link\":\"/mixins/build-compatibility.md\"},{\"text\":\"Build Scrollbar\",\"link\":\"/mixins/build-scrollbar.md\"},{\"text\":\"Create Colors\",\"link\":\"/mixins/create-colors.md\"},{\"text\":\"Create Size instruction\",\"link\":\"/mixins/create-instructions.md\"},{\"text\":\"Create Margin helper\",\"link\":\"/mixins/create-helper-margin.md\"},{\"text\":\"Create Padding helper\",\"link\":\"/mixins/create-helper-padding.md\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"colors_bootstrap.md\":\"Bfy-p7dM\",\"colors_brands.md\":\"Ch21qzT7\",\"colors_customs.md\":\"CrumAnve\",\"functions_colors.md\":\"Dz-AUCFY\",\"functions_helpers.md\":\"BLiEkjA1\",\"functions_strings.md\":\"BHTeKsax\",\"index.md\":\"Dwdim14B\",\"mixins_build-aspect-ratio.md\":\"l9MRJQQl\",\"mixins_build-compatibility.md\":\"t0sS5a2s\",\"mixins_build-scrollbar.md\":\"C-TaPgpo\",\"mixins_create-colors.md\":\"Bs8hXar1\",\"mixins_create-helper-margin.md\":\"BFzwO-0T\",\"mixins_create-helper-padding.md\":\"Ci6DL4m-\",\"mixins_create-instruction.md\":\"CGTPQqQv\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Guebbit SCSS Library\",\"titleTemplate\":\":title - base SCSS plus components\",\"description\":\"Guebbit's personal SCSS Library (MIT license, free to use).\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logotype.svg\",\"siteTitle\":\"SCSS Library\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Github\",\"link\":\"https://github.com/Guebbit/css-toolkit\"}],\"sidebar\":[{\"text\":\"Colors\",\"collapsed\":false,\"items\":[{\"text\":\"Bootstrap\",\"link\":\"/colors/bootstrap.md\"},{\"text\":\"Brands\",\"link\":\"/colors/brands.md\"},{\"text\":\"Gradients\",\"link\":\"/colors/customs.md\"}]},{\"text\":\"Functions\",\"collapsed\":false,\"items\":[{\"text\":\"Colors\",\"link\":\"/functions/colors.md\"},{\"text\":\"Helpers\",\"link\":\"/functions/helpers.md\"}]},{\"text\":\"Mixins\",\"collapsed\":false,\"items\":[{\"text\":\"Build Aspect Ratio\",\"link\":\"/mixins/build-aspect-ratio.md\"},{\"text\":\"Build Compatibility\",\"link\":\"/mixins/build-compatibility.md\"},{\"text\":\"Build Scrollbar\",\"link\":\"/mixins/build-scrollbar.md\"},{\"text\":\"Create Colors\",\"link\":\"/mixins/create-colors.md\"},{\"text\":\"Create Size instruction\",\"link\":\"/mixins/create-instructions.md\"},{\"text\":\"Create Margin helper\",\"link\":\"/mixins/create-helper-margin.md\"},{\"text\":\"Create Padding helper\",\"link\":\"/mixins/create-helper-padding.md\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>

package/docs/functions/colors.md

@@ -12,9 +12,7 @@ Gives %, less than 50 darker is better, less than 50, lighter.
 ```
 
 ```scss
-@function color-brightness($color) {
-  @return math.div(((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)), 255 * 100%);
-}
+TODO
 ```
 
 | Variable  | Description    | Accepted Values | Default |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guebbit/css-toolkit",
   "type": "module",
-  "version": "1.1.2",
+  "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": [
@@ -24,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

@@ -1,3 +1,4 @@
+@use "sass:color" as color;
 @use "../functions/colors" as color-functions;
 
 // Material colors by Bootstrap
@@ -79,102 +80,102 @@ $color-contrast-dark:      $black !default;
 $color-contrast-light:     $white !default;
 
 // fusv-disable
-$blue-100: color-functions.color-tint($blue, 80%) !default;
-$blue-200: color-functions.color-tint($blue, 60%) !default;
-$blue-300: color-functions.color-tint($blue, 40%) !default;
-$blue-400: color-functions.color-tint($blue, 20%) !default;
+$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-functions.color-shade($blue, 20%) !default;
-$blue-700: color-functions.color-shade($blue, 40%) !default;
-$blue-800: color-functions.color-shade($blue, 60%) !default;
-$blue-900: color-functions.color-shade($blue, 80%) !default;
-
-$indigo-100: color-functions.color-tint($indigo, 80%) !default;
-$indigo-200: color-functions.color-tint($indigo, 60%) !default;
-$indigo-300: color-functions.color-tint($indigo, 40%) !default;
-$indigo-400: color-functions.color-tint($indigo, 20%) !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-functions.color-shade($indigo, 20%) !default;
-$indigo-700: color-functions.color-shade($indigo, 40%) !default;
-$indigo-800: color-functions.color-shade($indigo, 60%) !default;
-$indigo-900: color-functions.color-shade($indigo, 80%) !default;
-
-$purple-100: color-functions.color-tint($purple, 80%) !default;
-$purple-200: color-functions.color-tint($purple, 60%) !default;
-$purple-300: color-functions.color-tint($purple, 40%) !default;
-$purple-400: color-functions.color-tint($purple, 20%) !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-functions.color-shade($purple, 20%) !default;
-$purple-700: color-functions.color-shade($purple, 40%) !default;
-$purple-800: color-functions.color-shade($purple, 60%) !default;
-$purple-900: color-functions.color-shade($purple, 80%) !default;
-
-$pink-100: color-functions.color-tint($pink, 80%) !default;
-$pink-200: color-functions.color-tint($pink, 60%) !default;
-$pink-300: color-functions.color-tint($pink, 40%) !default;
-$pink-400: color-functions.color-tint($pink, 20%) !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-functions.color-shade($pink, 20%) !default;
-$pink-700: color-functions.color-shade($pink, 40%) !default;
-$pink-800: color-functions.color-shade($pink, 60%) !default;
-$pink-900: color-functions.color-shade($pink, 80%) !default;
-
-$red-100: color-functions.color-tint($red, 80%) !default;
-$red-200: color-functions.color-tint($red, 60%) !default;
-$red-300: color-functions.color-tint($red, 40%) !default;
-$red-400: color-functions.color-tint($red, 20%) !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-functions.color-shade($red, 20%) !default;
-$red-700: color-functions.color-shade($red, 40%) !default;
-$red-800: color-functions.color-shade($red, 60%) !default;
-$red-900: color-functions.color-shade($red, 80%) !default;
-
-$orange-100: color-functions.color-tint($orange, 80%) !default;
-$orange-200: color-functions.color-tint($orange, 60%) !default;
-$orange-300: color-functions.color-tint($orange, 40%) !default;
-$orange-400: color-functions.color-tint($orange, 20%) !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-functions.color-shade($orange, 20%) !default;
-$orange-700: color-functions.color-shade($orange, 40%) !default;
-$orange-800: color-functions.color-shade($orange, 60%) !default;
-$orange-900: color-functions.color-shade($orange, 80%) !default;
-
-$yellow-100: color-functions.color-tint($yellow, 80%) !default;
-$yellow-200: color-functions.color-tint($yellow, 60%) !default;
-$yellow-300: color-functions.color-tint($yellow, 40%) !default;
-$yellow-400: color-functions.color-tint($yellow, 20%) !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-functions.color-shade($yellow, 20%) !default;
-$yellow-700: color-functions.color-shade($yellow, 40%) !default;
-$yellow-800: color-functions.color-shade($yellow, 60%) !default;
-$yellow-900: color-functions.color-shade($yellow, 80%) !default;
-
-$green-100: color-functions.color-tint($green, 80%) !default;
-$green-200: color-functions.color-tint($green, 60%) !default;
-$green-300: color-functions.color-tint($green, 40%) !default;
-$green-400: color-functions.color-tint($green, 20%) !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-functions.color-shade($green, 20%) !default;
-$green-700: color-functions.color-shade($green, 40%) !default;
-$green-800: color-functions.color-shade($green, 60%) !default;
-$green-900: color-functions.color-shade($green, 80%) !default;
-
-$teal-100: color-functions.color-tint($teal, 80%) !default;
-$teal-200: color-functions.color-tint($teal, 60%) !default;
-$teal-300: color-functions.color-tint($teal, 40%) !default;
-$teal-400: color-functions.color-tint($teal, 20%) !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-functions.color-shade($teal, 20%) !default;
-$teal-700: color-functions.color-shade($teal, 40%) !default;
-$teal-800: color-functions.color-shade($teal, 60%) !default;
-$teal-900: color-functions.color-shade($teal, 80%) !default;
-
-$cyan-100: color-functions.color-tint($cyan, 80%) !default;
-$cyan-200: color-functions.color-tint($cyan, 60%) !default;
-$cyan-300: color-functions.color-tint($cyan, 40%) !default;
-$cyan-400: color-functions.color-tint($cyan, 20%) !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-functions.color-shade($cyan, 20%) !default;
-$cyan-700: color-functions.color-shade($cyan, 40%) !default;
-$cyan-800: color-functions.color-shade($cyan, 60%) !default;
-$cyan-900: color-functions.color-shade($cyan, 80%) !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/_customs.scss

@@ -1,27 +1,29 @@
+@use "sass:color" as color;
 @use "../functions/colors" as color-functions;
 
 $flatrica-green: #06a763 !default;
 $manga-red: #d41816 !default;
 
-$flatrica-green-100: color-functions.color-tint($flatrica-green, 80%);
-$flatrica-green-200: color-functions.color-tint($flatrica-green, 60%);
-$flatrica-green-300: color-functions.color-tint($flatrica-green, 40%);
-$flatrica-green-400: color-functions.color-tint($flatrica-green, 20%);
+$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-functions.color-shade($flatrica-green, 20%);
-$flatrica-green-700: color-functions.color-shade($flatrica-green, 40%);
-$flatrica-green-800: color-functions.color-shade($flatrica-green, 60%);
-$flatrica-green-900: color-functions.color-shade($flatrica-green, 80%);
+$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-functions.color-tint($manga-red, 80%);
-$manga-red-200: color-functions.color-tint($manga-red, 60%);
-$manga-red-300: color-functions.color-tint($manga-red, 40%);
-$manga-red-400: color-functions.color-tint($manga-red, 20%);
+
+$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-functions.color-shade($manga-red, 20%);
-$manga-red-700: color-functions.color-shade($manga-red, 40%);
-$manga-red-800: color-functions.color-shade($manga-red, 60%);
-$manga-red-900: color-functions.color-shade($manga-red, 80%);
+$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": (

package/src/functions/_colors.scss

@@ -1,6 +1,6 @@
-@use "sass:color";
-@use "sass:math";
-@use "sass:string";
+@use "sass:color" as color;
+@use "sass:math" as math;
+@use "sass:string" as string;
 
 /**
  * Return opaque color
@@ -8,34 +8,15 @@
  * function credited to https://getbootstrap.com/
  */
 @function color-opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+  @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%, $method: rgb);
 }
 
-
-/**
- * Tint a color: mix a color with white
- * function credited to https://getbootstrap.com/
- */
-@function color-tint($color, $weight) {
-  @return mix(white, $color, $weight);
-}
-
-
-/**
- * Shade a color: mix a color with black
- * function credited to https://getbootstrap.com/
- */
-@function color-shade($color, $weight) {
-  @return mix(black, $color, $weight);
-}
-
-
 /**
  * Shade the color if the weight is positive, else tint it
  * function credited to https://getbootstrap.com/
  */
 @function color-shift($color, $weight) {
-  @return if($weight > 0, color-shade($color, $weight), color-tint($color, -$weight));
+  @return if($weight > 0, color.scale($color, $lightness: $weight), color.scale($color, $lightness: -$weight));
 }
 
 
@@ -64,7 +45,11 @@
   @if $color == transparent or type-of($color) != color {
     @return 100;
   }
-  @return math.div(((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)), 255 * 100%);
+  @return math.div((
+          (color.channel($color, "red", $space: rgb) * .299) +
+          (color.channel($color, "green", $space: rgb) * .587) +
+          (color.channel($color, "blue", $space: rgb) * .114)
+  ), 255 * 100%);
 }
 
 /**
@@ -92,26 +77,32 @@
   }
   $alpha: alpha($color);
   @if $mode == 1 or ($mode == 2 and $alpha == 1) {
-    @return red($color) + $delimiter + green($color) + $delimiter + blue($color);
+    @return color.channel($color, "red", $space: rgb) +
+        $delimiter + color.channel($color, "green", $space: rgb) +
+        $delimiter + color.channel($color, "blue", $space: rgb);
   }
   // Regular RGBA compliant result ("number" notation)
-  @return red($color) + $delimiter + green($color) + $delimiter + blue($color) + $delimiter-alpha + alpha($color); // * 100%
+  @return color.channel($color, "red", $space: rgb) +
+        $delimiter + color.channel($color, "green", $space: rgb) +
+        $delimiter + color.channel($color, "blue", $space: rgb) +
+        $delimiter-alpha + color.channel($color, "alpha"); // * 100%
 }
 
 /**
  * Create default collection
  */
+// TODO CHECK
 @function create-collection($color){
   $list: (
-          "100": color-tint($color, 80%),
-          "200": color-tint($color, 60%),
-          "300": color-tint($color, 40%),
-          "400": color-tint($color, 20%),
+          "100": color.scale($color, $lightness: 80%),
+          "200": color.scale($color, $lightness: 60%),
+          "300": color.scale($color, $lightness: 40%),
+          "400": color.scale($color, $lightness: 20%),
           "500": $color,
-          "600": color-shade($color, 20%),
-          "700": color-shade($color, 40%),
-          "800": color-shade($color, 60%),
-          "900": color-shade($color, 80%)
+          "600": color.scale($color, $lightness: -20%),
+          "700": color.scale($color, $lightness: -40%),
+          "800": color.scale($color, $lightness: -60%),
+          "900": color.scale($color, $lightness: -80%)
   );
 
   @return $list

package/test/compile.test.js

@@ -31,13 +31,13 @@ describe("COMPILE", function() {
     });
 
     it('Check some rules', function() {
-        // --
+        // -- TODO
         expect(cssCompiled).to.contain('.blue-400-text {');
-        expect(cssCompiled).to.contain('color: #3d8bfd !important;');
-        expect(cssCompiled).to.contain('.blue-400-bg {');
-        expect(cssCompiled).to.contain('background: #3d8bfd !important;');
+        expect(cssCompiled).to.contain('color: rgb(61.4, 139, 253.4) !important');
+        expect(cssCompiled).to.contain('.blue-500-bg {');
+        expect(cssCompiled).to.contain('background: #0d6efd !important');
         // --
-        expect(cssCompiled).to.contain('--blue-400: 61 139 253;');
+        expect(cssCompiled).to.contain('--blue-400: 61.4 139 253.4;');
         expect(cssCompiled).to.contain('--manga-red-500: 212 24 22;');
         expect(cssCompiled).to.contain('--advanced-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);');
         expect(cssCompiled).to.contain('.mt-auto {');
@@ -58,18 +58,12 @@ describe("COMPILE", function() {
         expect(cssCompiled).to.contain('@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {');
         expect(cssCompiled).to.contain('@supports (-ms-ime-align: auto) {');
         expect(cssCompiled).to.contain('@supports (-moz-appearance: none) {');
-        // --
+        // -- RGB or hex based on color precision. Use sass:color hex or rgb to be sure
         expect(cssCompiled).to.contain('--color-opaque-1: #111111;');
-        expect(cssCompiled).to.contain('--color-opaque-2: #6f6f6f;');
-        // --
-        expect(cssCompiled).to.contain('--color-tint-1: #595959;');
-        expect(cssCompiled).to.contain('--color-tint-2: #e6e6e6;');
-        // --
-        expect(cssCompiled).to.contain('--color-shade-1: #1a1a1a;');
-        expect(cssCompiled).to.contain('--color-shade-2: #a6a6a6;');
+        expect(cssCompiled).to.contain('--color-opaque-2: rgb(110.5, 110.5, 110.5);');
         // --
-        expect(cssCompiled).to.contain('--color-shift-1: #1a1a1a;');
-        expect(cssCompiled).to.contain('--color-shift-2: #a6a6a6;');
+        expect(cssCompiled).to.contain('--color-shift-1: rgb(89.25, 89.25, 89.25);');
+        expect(cssCompiled).to.contain('--color-shift-2: rgb(229.5, 229.5, 229.5);');
         // --
         expect(cssCompiled).to.contain('--color-contrast-1: #fff;');
         expect(cssCompiled).to.contain('--color-contrast-2: #000;');