@guebbit/css-toolkit 1.2.0 → 1.3.1

package/test/test.scss

@@ -1,159 +1,197 @@
-@use "../src/index" as guebbit;
-
-@include guebbit.create-colors(guebbit.$colors-collection);
-
-@include guebbit.create-helper-margin((
-  (auto, auto),
-  (6, 6px),
-  (12, 12px),
-  (24, 24px),
-  (36, 36px),
-  (48, 48px),
-));
-
-@include guebbit.create-helper-padding((
-  (6, 6px),
-  (12, 12px),
-  (24, 24px),
-  (36, 36px),
-  (48, 48px),
-));
-
-@include guebbit.create-instructions("font-size", (
-  (n2, 0.6em),
-  (n1, 0.8em),
-  (1, 1.2em),
-  (2, 1.5em),
-  (3, 2em),
-));
-
-@include guebbit.create-instructions("opacity", (
-  (0, 0),
-  (25, 0.25),
-  (50, 0.50),
-  (75, 0.75),
-  (100, 1),
-));
-
-@include guebbit.create-instructions("width", (
-  (25, 25%),
-  (50, 50%),
-  (75, 75%),
-  (100, 100%),
-  (p25, 25px),
-  (p50, 50px),
-  (p75, 75px),
-  (p100, 100px)
-), true);
-
-@include guebbit.create-instructions("min-width", (
-  (25, 25%),
-  (50, 50%),
-  (75, 75%),
-  (100, 100%),
-  (p25, 25px),
-  (p50, 50px),
-  (p75, 75px),
-  (p100, 100px)
-), true);
-
-@include guebbit.create-instructions("gap", (
-  (6, 6px),
-  (12, 12px),
-  (24, 24px),
-), true, "flex-");
-
-.aspect-ratio-1-1{
-  @include guebbit.build-aspect-ratio(100%);
-}
-
-.aspect-ratio-16-9{
-  @include guebbit.build-aspect-ratio-container(56%);
-
-  .content{
-    @include guebbit.build-aspect-ratio-anchor;
-  }
-}
-
-
-.test-compatibility{
-  @include guebbit.build-compatibility("ie"){
-    &::after{
-      content: "this is internet explorer";
-    }
-  }
-  
-  @include guebbit.build-compatibility("edge"){
-    &::after{
-      content: "this is microsoft edge";
-    }
-  }
-
-  @include guebbit.build-compatibility("firefox"){
-    &::after{
-      content: "this is firefox";
-    }
-  }
-}
-
-// check functions
-$test-color--light: #222;
-$test-color--dark: #ddd;
-$map-deep-get-test: (
-        'size': (
-                'sml': 10px
-        )
-);
-
-$map-deep-get-var: guebbit.map-deep-get($map-deep-get-test, 'size', 'sml');
-
-:root{
-  // --- rgba + rgba = rgba
-  --color-opaque-1: #{guebbit.color-opaque(rgba(0,0,0,0.2), rgba($test-color--light, 0.8))};
-  // --- hex + rgba = rgb
-  --color-opaque-2: #{guebbit.color-opaque(#000, rgba($test-color--dark, 0.5))};
-  // --- hex + hex = hex
-  --color-opaque-3: #{guebbit.color-opaque(#000, $test-color--dark)};
-  // ---
-  --color-tint-1: #{guebbit.color-tint($test-color--light, 25%)};
-  --color-tint-2: #{guebbit.color-tint($test-color--dark, 25%)};
-  // ---
-  --color-shade-1: #{guebbit.color-shade($test-color--light, 25%)};
-  --color-shade-2: #{guebbit.color-shade($test-color--dark, 25%)};
-  // ---
-  --color-shift-1: #{guebbit.color-shift($test-color--light, 25%)};
-  --color-shift-2: #{guebbit.color-shift($test-color--dark, 25%)};
-  --color-shift-3: #{guebbit.color-shift($test-color--light, -25%)};
-  --color-shift-4: #{guebbit.color-shift($test-color--dark, -25%)};
-  // ---
-  --color-contrast-1: #{guebbit.color-contrast($test-color--light)};
-  --color-contrast-2: #{guebbit.color-contrast($test-color--dark)};
-  // ---
-  --color-brightness-1: #{guebbit.color-contrast($test-color--light)};
-  --color-brightness-2: #{guebbit.color-contrast($test-color--dark)};
-  // ---
-  --extract-colors-1: #{guebbit.extract-colors()};
-  --extract-colors-2: #{guebbit.extract-colors($test-color--light)};
-  --extract-colors-3: #{guebbit.extract-colors($test-color--dark)};
-  --extract-colors-4: #{guebbit.extract-colors($test-color--light, 2, true)};
-  --extract-colors-5: #{guebbit.extract-colors($test-color--dark, 2, true)};
-  --extract-colors-6: #{guebbit.extract-colors(rgb(0 255 0))};
-  --extract-colors-7: #{guebbit.extract-colors(rgba(0 255 0 / 0.5))};
-  --extract-colors-8: #{guebbit.extract-colors(rgb(0 255 0), 2, true)};
-  --extract-colors-9: #{guebbit.extract-colors(rgba(0 255 0 / 0.5), 2, true)};
-  --extract-colors-10: #{guebbit.extract-colors(rgb(0, 255, 0))};
-  --extract-colors-11: #{guebbit.extract-colors(rgba(0, 255, 0, 0.5))};
-  --extract-colors-12: #{guebbit.extract-colors(rgb(0, 255, 0), 2, true)};
-  --extract-colors-13: #{guebbit.extract-colors(rgba(0, 255, 0, 0.5), 2, true)};
-  // ---
-  --no-null-1: #{guebbit.no-null-var((undefined, null, transparent, red))};
-  --no-null-2: #{guebbit.no-null-var((blue))};
-  // ---
-  --no-trasparent-1: #{guebbit.no-target-var(transparent, transparent)};
-  --no-trasparent-2: #{guebbit.no-target-var("test", "test")};
-  --no-trasparent-3: #{guebbit.no-target-var(transparent, #123456)};
-  // ---
-  --map-deep-get: #{$map-deep-get-var};
-  // --string-split: #{guebbit.string-split())};
-  // --string-split: #{guebbit.string-ends-with("find-this-word", "this"))};
+@use "../src/index" as guebbit;
+
+:root{
+  @include guebbit.create-colors-vars(guebbit.$colors-collection);
+  @include guebbit.create-colors-vars((
+          "primary": guebbit.create-collection(#ff00ff)
+  ), "g-theme-");
+}
+
+@include guebbit.create-colors(guebbit.$colors-collection);
+@include guebbit.create-colors((
+        // colors are ignored if vars is true
+        "primary": guebbit.create-collection()
+), true, "", "g-theme-");
+
+
+
+
+@include guebbit.create-class("text-align", (
+    "right",
+    "left",
+    "center",
+), true);
+
+
+
+@include guebbit.create-helper-margin((
+  (auto, auto),
+  (6, 6px),
+  (12, 12px),
+  (24, 24px),
+  (36, 36px),
+  (48, 48px),
+));
+
+@include guebbit.create-helper-padding((
+  (6, 6px),
+  (12, 12px),
+  (24, 24px),
+  (36, 36px),
+  (48, 48px),
+));
+
+@include guebbit.create-class("font-size", (
+  (n2, 0.6em),
+  (n1, 0.8em),
+  (1, 1.2em),
+  (2, 1.5em),
+  (3, 2em),
+));
+
+@include guebbit.create-class("opacity", (
+  (0, 0),
+  (25, 0.25),
+  (50, 0.50),
+  (75, 0.75),
+  (100, 1),
+));
+
+@include guebbit.create-class("width", (
+  (25, 25%),
+  (50, 50%),
+  (75, 75%),
+  (100, 100%),
+  (p25, 25px),
+  (p50, 50px),
+  (p75, 75px),
+  (p100, 100px)
+), true);
+
+@include guebbit.create-class("min-width", (
+  (25, 25%),
+  (50, 50%),
+  (75, 75%),
+  (100, 100%),
+  (p25, 25px),
+  (p50, 50px),
+  (p75, 75px),
+  (p100, 100px)
+), true);
+
+@include guebbit.create-class("gap", (
+  (6, 6px),
+  (12, 12px),
+  (24, 24px),
+), true, "flex-");
+
+
+
+.aspect-ratio-1-1{
+  @include guebbit.build-aspect-ratio(100%);
+}
+
+.aspect-ratio-16-9{
+  @include guebbit.build-aspect-ratio-container(56%);
+
+  .content{
+    @include guebbit.build-aspect-ratio-anchor;
+  }
+}
+
+
+
+
+.test-compatibility{
+  @include guebbit.build-compatibility("ie"){
+    &::after{
+      content: "this is internet explorer";
+    }
+  }
+  
+  @include guebbit.build-compatibility("edge"){
+    &::after{
+      content: "this is microsoft edge";
+    }
+  }
+
+  @include guebbit.build-compatibility("firefox"){
+    &::after{
+      content: "this is firefox";
+    }
+  }
+
+  @include guebbit.build-compatibility("opera"){
+    &::after{
+      content: "this is opera";
+    }
+  }
+
+  @include guebbit.build-compatibility("safari"){
+    &::after{
+      content: "this is safari";
+    }
+  }
+}
+
+// check functions
+$test-color--light: #222;
+$test-color--dark: #ddd;
+$map-deep-get-test: (
+        'size': (
+                'sml': 10px
+        )
+);
+
+$map-deep-get-var: guebbit.map-deep-get($map-deep-get-test, 'size', 'sml');
+
+:root{
+  // --- rgba + rgba = rgba
+  --color-opaque-1: #{guebbit.color-opaque(rgba(0,0,0,0.2), rgba($test-color--light, 0.8))};
+  // --- hex + rgba = rgb
+  --color-opaque-2: #{guebbit.color-opaque(#000, rgba($test-color--dark, 0.5))};
+  // --- hex + hex = hex
+  --color-opaque-3: #{guebbit.color-opaque(#000, $test-color--dark)};
+  // ---
+  --color-tint-1: #{guebbit.color-tint($test-color--light, 25%)};
+  --color-tint-2: #{guebbit.color-tint($test-color--dark, 25%)};
+  // ---
+  --color-shade-1: #{guebbit.color-shade($test-color--light, 25%)};
+  --color-shade-2: #{guebbit.color-shade($test-color--dark, 25%)};
+  // ---
+  --color-shift-1: #{guebbit.color-shift($test-color--light, 25%)};
+  --color-shift-2: #{guebbit.color-shift($test-color--dark, 25%)};
+  --color-shift-3: #{guebbit.color-shift($test-color--light, -25%)};
+  --color-shift-4: #{guebbit.color-shift($test-color--dark, -25%)};
+  // ---
+  --color-contrast-1: #{guebbit.color-contrast($test-color--light)};
+  --color-contrast-2: #{guebbit.color-contrast($test-color--dark)};
+  // ---
+  --color-brightness-1: #{guebbit.color-contrast($test-color--light)};
+  --color-brightness-2: #{guebbit.color-contrast($test-color--dark)};
+  // ---
+  --extract-colors-1: #{guebbit.extract-colors()};
+  --extract-colors-2: #{guebbit.extract-colors($test-color--light)};
+  --extract-colors-3: #{guebbit.extract-colors($test-color--dark)};
+  --extract-colors-4: #{guebbit.extract-colors($test-color--light, 2, true)};
+  --extract-colors-5: #{guebbit.extract-colors($test-color--dark, 2, true)};
+  --extract-colors-6: #{guebbit.extract-colors(rgb(0 255 0))};
+  --extract-colors-7: #{guebbit.extract-colors(rgba(0 255 0 / 0.5))};
+  --extract-colors-8: #{guebbit.extract-colors(rgb(0 255 0), 2, true)};
+  --extract-colors-9: #{guebbit.extract-colors(rgba(0 255 0 / 0.5), 2, true)};
+  --extract-colors-10: #{guebbit.extract-colors(rgb(0, 255, 0))};
+  --extract-colors-11: #{guebbit.extract-colors(rgba(0, 255, 0, 0.5))};
+  --extract-colors-12: #{guebbit.extract-colors(rgb(0, 255, 0), 2, true)};
+  --extract-colors-13: #{guebbit.extract-colors(rgba(0, 255, 0, 0.5), 2, true)};
+  // ---
+  --no-null-1: #{guebbit.no-null-var((undefined, null, transparent, red))};
+  --no-null-2: #{guebbit.no-null-var((blue))};
+  // ---
+  --no-trasparent-1: #{guebbit.no-target-var(transparent, transparent)};
+  --no-trasparent-2: #{guebbit.no-target-var("test", "test")};
+  --no-trasparent-3: #{guebbit.no-target-var(transparent, #123456)};
+  // ---
+  --map-deep-get: #{$map-deep-get-var};
+  // --string-split: #{guebbit.string-split())};
+  // --string-split: #{guebbit.string-ends-with("find-this-word", "this"))};
 }

package/vite.config.ts

@@ -1,26 +1,26 @@
-import { defineConfig } from 'vite';
-import * as path from 'path';
-
-export default defineConfig({
-    // root: "/",
-    build: {
-        outDir: path.join(__dirname, "dist"),
-        lib: {
-            entry: path.resolve(__dirname, "index.scss"), // TODO library.scss (import the various components)
-            name: "@guebbit/css-toolkit",
-            fileName: "css-toolkit",
-        },
-    },
-    server: {
-        port: 8080,
-    },
-    resolve: {
-        alias: [
-            {
-                find: '@',
-                replacement: path.resolve(__dirname, 'src')
-            }
-        ]
-    },
-    plugins: [],
+import { defineConfig } from 'vite';
+import * as path from 'path';
+
+export default defineConfig({
+    // root: "/",
+    build: {
+        outDir: path.join(__dirname, "dist"),
+        lib: {
+            entry: path.resolve(__dirname, "index.scss"),
+            name: "@guebbit/css-toolkit",
+            fileName: "css-toolkit",
+        },
+    },
+    server: {
+        port: 8080,
+    },
+    resolve: {
+        alias: [
+            {
+                find: '@',
+                replacement: path.resolve(__dirname, 'src')
+            }
+        ]
+    },
+    plugins: [],
 });

package/docs/.vitepress/dist/assets/app.Cez_7bx7.js

@@ -1 +0,0 @@
-import{R as i}from"./chunks/theme.ZIndENJH.js";import{R as o,a3 as u,a4 as c,a5 as l,a6 as f,a7 as d,a8 as m,a9 as h,aa as g,ab as A,ac as v,d as P,u as R,v as w,s as y,ad as C,ae as b,af as E,ag as S}from"./chunks/framework.BQmytedh.js";function p(e){if(e.extends){const a=p(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const s=p(i),T=P({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=R();return w(()=>{y(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&C(),b(),E(),s.setup&&s.setup(),()=>S(s.Layout)}});async function D(){globalThis.__VITEPRESS__=!0;const e=j(),a=_();a.provide(c,e);const t=l(e.route);return a.provide(f,t),a.component("Content",d),a.component("ClientOnly",m),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),s.enhanceApp&&await s.enhanceApp({app:a,router:e,siteData:h}),{app:a,router:e,data:t}}function _(){return g(T)}function j(){let e=o,a;return A(t=>{let n=v(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=import(n)),o&&(e=!1),r},s.NotFound)}o&&D().then(({app:e,router:a,data:t})=>{a.go().then(()=>{u(a.route,t.site),e.mount("#app")})});export{D as createApp};

package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.CkfJPSmi.js

@@ -1 +0,0 @@
-const t='{"documentCount":31,"nextId":31,"documentIds":{"0":"/colors/bootstrap.html#todo","1":"/colors/brands.html#todo","2":"/colors/customs.html#todo","3":"/functions/colors.html#colors","4":"/functions/colors.html#color-brightness","5":"/functions/colors.html#color-contrast","6":"/functions/colors.html#color-hex2rgba","7":"/functions/colors.html#color-hex2rgbcore","8":"/functions/helpers.html#todo","9":"/functions/strings.html#todo","10":"/#css-toolkit","11":"/#todo","12":"/mixins/build-aspect-ratio.html#todo","13":"/mixins/build-compatibility.html#build-compatibility","14":"/mixins/build-compatibility.html#example","15":"/mixins/build-compatibility.html#code","16":"/mixins/build-compatibility.html#scss-variables","17":"/mixins/build-scrollbar.html#scrollbar","18":"/mixins/build-scrollbar.html#example","19":"/mixins/build-scrollbar.html#code","20":"/mixins/create-colors.html#todo","21":"/mixins/create-helper-margin.html#create-margin","22":"/mixins/create-helper-margin.html#example","23":"/mixins/create-helper-margin.html#code","24":"/mixins/create-helper-padding.html#create-padding","25":"/mixins/create-helper-padding.html#example","26":"/mixins/create-helper-padding.html#code","27":"/mixins/create-instruction.html#create-instruction","28":"/mixins/create-instruction.html#example","29":"/mixins/create-instruction.html#code","30":"/mixins/create-instruction.html#scss-variables"},"fieldIds":{"title":0,"titles":1,"text":2},"fieldLength":{"0":[1,1,1],"1":[1,1,1],"2":[1,1,1],"3":[1,1,18],"4":[2,1,37],"5":[2,1,34],"6":[2,1,11],"7":[2,1,40],"8":[1,1,1],"9":[1,1,1],"10":[2,1,15],"11":[1,1,14],"12":[1,1,1],"13":[2,1,1],"14":[1,2,18],"15":[1,1,43],"16":[2,1,17],"17":[1,1,1],"18":[1,1,12],"19":[1,1,53],"20":[1,1,1],"21":[2,1,1],"22":[1,2,18],"23":[1,2,77],"24":[2,1,1],"25":[1,2,17],"26":[1,2,77],"27":[2,1,10],"28":[1,2,19],"29":[1,2,32],"30":[2,2,44]},"averageFieldLength":[1.354838709677419,1.2580645161290323,19.903225806451612],"storedFields":{"0":{"title":"TODO","titles":[]},"1":{"title":"TODO","titles":[]},"2":{"title":"TODO","titles":[]},"3":{"title":"Colors","titles":[]},"4":{"title":"color-brightness","titles":["Colors"]},"5":{"title":"color-contrast","titles":["Colors"]},"6":{"title":"color-hex2rgba","titles":["Colors"]},"7":{"title":"color-hex2rgbcore","titles":["Colors"]},"8":{"title":"TODO","titles":[]},"9":{"title":"TODO","titles":[]},"10":{"title":"css-toolkit","titles":[]},"11":{"title":"TODO","titles":[]},"12":{"title":"TODO","titles":[]},"13":{"title":"Build Compatibility","titles":[]},"14":{"title":"Example","titles":["Build Compatibility"]},"15":{"title":"Code","titles":[]},"16":{"title":"SCSS variables","titles":["Code"]},"17":{"title":"Scrollbar","titles":[]},"18":{"title":"Example","titles":["Scrollbar"]},"19":{"title":"Code","titles":["Scrollbar"]},"20":{"title":"TODO","titles":[]},"21":{"title":"Create Margin","titles":[]},"22":{"title":"Example","titles":["Create Margin"]},"23":{"title":"Code","titles":["Create Margin"]},"24":{"title":"Create Padding","titles":[]},"25":{"title":"Example","titles":["Create Padding"]},"26":{"title":"Code","titles":["Create Padding"]},"27":{"title":"Create Instruction","titles":[]},"28":{"title":"Example","titles":["Create Instruction"]},"29":{"title":"Code","titles":["Create Instruction"]},"30":{"title":"SCSS variables","titles":["Create Instruction"]}},"dirtCount":0,"index":[["75px",{"2":{"28":1}}],["75",{"2":{"28":2}}],["y",{"2":{"23":1,"26":1}}],["x3c",{"2":{"23":1,"26":1,"29":1}}],["x",{"2":{"23":1,"26":1}}],["x26",{"2":{"19":3}}],["36px",{"2":{"22":1,"25":1}}],["36",{"2":{"22":1,"25":1}}],["30",{"2":{"3":1}}],["6px",{"2":{"22":1,"25":1}}],["6",{"2":{"22":1,"25":1}}],["60",{"2":{"3":1}}],["width",{"2":{"19":1,"27":2,"28":1}}],["webkit",{"2":{"19":3}}],["white",{"2":{"7":1}}],["whichever",{"2":{"5":1,"7":1}}],["what",{"2":{"3":1}}],["48px",{"2":{"22":1,"25":1}}],["48",{"2":{"22":1,"25":1}}],["40",{"2":{"19":1}}],["4px",{"2":{"7":1,"18":1,"19":2}}],["p100",{"2":{"28":1}}],["p75",{"2":{"28":1}}],["p50",{"2":{"28":1}}],["p25",{"2":{"28":1}}],["prevent",{"2":{"23":1,"26":1,"30":1}}],["prefix",{"2":{"23":1,"26":1,"30":1}}],["property",{"2":{"23":1,"26":1}}],["postfix",{"2":{"23":1,"26":1,"29":1}}],["pixels",{"2":{"19":1}}],["padding",{"0":{"24":1},"1":{"25":1,"26":1},"2":{"25":1}}],["pairs",{"2":{"23":1,"26":1,"30":1}}],["param",{"2":{"15":1,"19":3,"23":1,"26":1,"29":1}}],["palette",{"2":{"3":1}}],["name",{"2":{"16":1,"23":4,"26":4,"27":1,"29":2,"30":2}}],["none",{"2":{"4":1,"15":2,"16":1,"30":1}}],["``",{"2":{"16":1,"23":1,"26":1,"30":1}}],["==",{"2":{"15":3,"19":1,"23":9,"26":9,"29":1}}],["\\tbuilder",{"2":{"19":1}}],["\\t",{"2":{"15":2,"19":3}}],["\\tcompatibility",{"2":{"15":1}}],["eventual",{"2":{"23":1,"26":1,"30":1}}],["every",{"2":{"11":1}}],["each",{"2":{"23":1,"26":1,"29":1}}],["element",{"2":{"18":1,"19":1}}],["edge",{"2":{"14":1,"15":2}}],["explorer",{"2":{"14":1,"15":1}}],["example",{"0":{"14":1,"18":1,"22":1,"25":1,"28":1},"2":{"27":1}}],["opera",{"2":{"14":1,"15":1}}],["or",{"2":{"11":1}}],["of",{"2":{"5":1,"7":1,"18":1,"19":4,"23":1,"26":1,"30":2}}],["single",{"2":{"29":1}}],["size",{"2":{"19":3,"27":1}}],["spacing",{"2":{"23":7,"26":7}}],["scrollbars",{"2":{"18":1,"19":1}}],["scrollbar",{"0":{"17":1},"1":{"18":1,"19":1},"2":{"18":1,"19":7}}],["scsscolor",{"2":{"6":1}}],["scssbackground",{"2":{"5":1}}],["scss",{"0":{"16":1,"30":1},"2":{"4":2,"5":1,"7":1,"10":1,"14":1,"15":1,"18":1,"19":1,"22":1,"23":1,"25":1,"26":1,"28":1,"29":1}}],["supports",{"2":{"15":2}}],["safari",{"2":{"14":1,"15":1}}],["style",{"2":{"16":1}}],["string",{"2":{"15":1,"16":1,"19":1,"23":1,"26":1,"30":3}}],["streamlining",{"2":{"10":1}}],["standardizing",{"2":{"10":1}}],["utilities",{"2":{"10":1}}],["using",{"2":{"3":1}}],["0",{"2":{"6":1}}],["00ff00",{"2":{"6":1,"7":1}}],["000",{"2":{"5":1,"7":1,"18":1}}],["final",{"2":{"30":1}}],["firefox",{"2":{"14":1,"15":2}}],["flag",{"2":{"30":1}}],["false",{"2":{"19":1,"23":2,"26":2,"29":1,"30":1}}],["for",{"2":{"10":1,"11":2,"14":1,"15":1,"23":7,"26":7}}],["fff",{"2":{"5":2,"7":1,"18":1,"19":3}}],["functions",{"2":{"10":1,"11":1}}],["function",{"2":{"4":1,"5":1,"11":1}}],["$delimiter",{"2":{"29":2,"30":1}}],["$dark",{"2":{"5":5,"7":1}}],["$instruction",{"2":{"29":3,"30":1}}],["$important",{"2":{"23":11,"26":11,"29":2,"30":1}}],["$val",{"2":{"23":10,"26":10,"29":2}}],["$name",{"2":{"23":8,"26":8,"29":2}}],["$prefix",{"2":{"23":9,"26":9,"29":2,"30":1}}],["$measure",{"2":{"23":3,"26":3,"29":2,"30":1}}],["$fallback",{"2":{"19":6}}],["$radius",{"2":{"19":3}}],["$size",{"2":{"19":5}}],["$bg",{"2":{"19":6}}],["$browser",{"2":{"15":5,"16":1}}],["$background",{"2":{"5":2,"19":1}}],["$light",{"2":{"5":5,"7":1}}],["$color",{"2":{"4":6,"5":5,"7":1,"19":4}}],["quot",{"2":{"5":2,"7":2}}],["my",{"2":{"23":1,"26":1}}],["mx",{"2":{"23":1,"26":1}}],["mr",{"2":{"23":1,"26":1}}],["ml",{"2":{"23":1,"26":1}}],["mb",{"2":{"23":1,"26":1}}],["mt",{"2":{"23":1,"26":1}}],["measure",{"2":{"23":1,"26":1,"29":1}}],["media",{"2":{"15":1}}],["ma",{"2":{"23":1,"26":1}}],["margin",{"0":{"21":1},"1":{"22":1,"23":1},"2":{"22":1,"23":14,"26":14}}],["math",{"2":{"4":1}}],["ms",{"2":{"15":3}}],["min",{"2":{"27":1}}],["microsoft",{"2":{"14":1,"15":1}}],["mixin",{"2":{"11":1,"15":1,"19":1,"23":1,"26":1,"29":1}}],["mixins",{"2":{"10":1}}],["moz",{"2":{"15":1}}],["mode",{"2":{"14":1,"15":1}}],["more",{"2":{"11":1}}],["most",{"2":{"5":1,"7":1}}],["array",{"2":{"23":2,"26":2,"29":1,"30":1}}],["arguments",{"2":{"5":1,"7":1}}],["applies",{"2":{"23":7,"26":7}}],["apply",{"2":{"7":2,"16":1}}],["appearance",{"2":{"15":1}}],["auto",{"2":{"15":1,"19":3,"22":2}}],["automatic",{"2":{"11":1}}],["align",{"2":{"15":1}}],["all",{"2":{"15":1,"23":1,"26":1}}],["active",{"2":{"15":1}}],["accepted",{"2":{"4":1,"7":1,"16":1,"19":1,"23":1,"26":1,"30":1}}],["an",{"2":{"11":1}}],["and",{"2":{"5":1,"7":1,"10":2,"15":1,"23":3,"26":3,"27":2,"29":1}}],["abs",{"2":{"5":2}}],["a",{"2":{"5":1,"7":1,"10":1,"23":1,"26":1}}],["value",{"2":{"23":3,"26":3,"29":1,"30":2}}],["value>",{"2":{"23":1,"26":1,"29":1}}],["values",{"2":{"4":1,"7":1,"16":1,"19":1,"23":1,"26":1,"30":1}}],["var",{"2":{"7":1}}],["variables",{"0":{"16":1,"30":1}}],["variable",{"2":{"4":1,"7":1,"16":1,"19":1,"23":1,"26":1,"30":1}}],["25px",{"2":{"28":1}}],["25",{"2":{"28":2}}],["255",{"2":{"4":1}}],["24px",{"2":{"22":1,"25":1}}],["24",{"2":{"22":1,"25":1}}],["299",{"2":{"4":1}}],["12px",{"2":{"22":1,"25":1}}],["12",{"2":{"22":1,"25":1}}],["114",{"2":{"4":1}}],["10px",{"2":{"18":1,"19":2}}],["100px",{"2":{"28":1}}],["100",{"2":{"4":1,"28":2}}],["10",{"2":{"3":1}}],["5",{"2":{"6":1}}],["587",{"2":{"4":1}}],["50px",{"2":{"28":1}}],["50",{"2":{"4":3,"28":2}}],["generator",{"2":{"29":1}}],["gt",{"2":{"23":2,"26":2,"30":2}}],["guebbit",{"2":{"14":1,"23":1,"26":1,"30":1}}],["gradients",{"2":{"11":1}}],["green",{"2":{"4":1}}],["given",{"2":{"5":1,"7":1,"27":1}}],["gives",{"2":{"4":1}}],["+",{"2":{"4":2}}],["right",{"2":{"23":4,"26":4}}],["r",{"2":{"23":1,"26":1}}],["radius",{"2":{"19":2}}],["rgba",{"2":{"6":1}}],["repository",{"2":{"10":1}}],["red",{"2":{"4":1}}],["returns",{"2":{"5":1,"7":1}}],["return",{"2":{"4":1,"5":1}}],["rule",{"2":{"3":1}}],[">",{"2":{"4":1,"5":1}}],["important",{"2":{"23":10,"26":10,"29":1,"30":1}}],["ime",{"2":{"15":1}}],["ie",{"2":{"14":1,"15":1}}],["insert",{"2":{"30":1}}],["instructions",{"2":{"27":1,"28":1,"29":2}}],["instruction",{"0":{"27":1},"1":{"28":1,"29":1,"30":1},"2":{"23":1,"26":1,"30":2}}],["in",{"2":{"19":1,"23":2,"26":2,"29":1}}],["include",{"2":{"14":1,"18":1,"22":1,"25":1,"28":1}}],["internet",{"2":{"14":1,"15":1}}],["if",{"2":{"4":1,"5":1,"15":3,"19":2,"23":10,"26":10,"29":1,"30":1}}],["is",{"2":{"4":1,"5":1,"7":1,"23":1,"26":1,"30":1}}],["directions",{"2":{"23":1,"26":1}}],["div",{"2":{"4":1}}],["dark",{"2":{"5":1,"7":2}}],["darker",{"2":{"4":1}}],["delimeter",{"2":{"30":1}}],["development",{"2":{"10":1}}],["default",{"2":{"4":1,"7":1,"16":1,"19":2,"23":1,"26":1,"30":1}}],["description",{"2":{"4":1,"7":1,"16":1,"19":1,"23":1,"26":1,"30":1}}],["design",{"2":{"3":1}}],["t",{"2":{"23":1,"26":1}}],["true",{"2":{"22":1,"23":9,"25":1,"26":9,"28":1,"29":1}}],["transparent",{"2":{"19":1}}],["target",{"2":{"15":1}}],["tests",{"2":{"11":1}}],["text",{"2":{"5":4}}],["thumb",{"2":{"19":1}}],["the",{"2":{"5":1,"7":1,"19":1,"23":8,"26":8,"30":1}}],["than",{"2":{"4":2}}],["top",{"2":{"23":4,"26":4}}],["toolkit",{"0":{"10":1}}],["to",{"2":{"4":1,"5":1,"6":1,"7":4,"16":1,"23":1,"26":1,"30":2}}],["todo",{"0":{"0":1,"1":1,"2":1,"8":1,"9":1,"11":1,"12":1,"20":1},"2":{"14":2,"15":2}}],["lt",{"2":{"23":2,"26":2,"30":2}}],["like",{"2":{"23":1,"26":1,"30":1}}],["list",{"2":{"23":5,"26":5,"29":3,"30":2}}],["lighten",{"2":{"19":1}}],["lighter",{"2":{"4":1}}],["light",{"2":{"5":1,"7":1}}],["left",{"2":{"23":4,"26":4}}],["less",{"2":{"4":2}}],["l",{"2":{"23":1,"26":1}}],["logrocket",{"2":{"3":2}}],["boolean",{"2":{"23":1,"26":1,"30":1}}],["both",{"2":{"23":2,"26":2}}],["bottom",{"2":{"23":4,"26":4}}],["border",{"2":{"19":1}}],["b",{"2":{"23":1,"26":1}}],["background",{"2":{"19":7}}],["bg",{"2":{"19":4}}],["browser",{"2":{"15":1,"16":1}}],["browsers",{"2":{"14":1,"15":1}}],["brightness",{"0":{"4":1},"2":{"4":2,"5":10}}],["build",{"0":{"13":1},"1":{"14":1},"2":{"15":1,"18":1,"19":1}}],["building",{"2":{"3":1}}],["blue",{"2":{"4":1}}],["blog",{"2":{"3":2}}],["better",{"2":{"4":1}}],["classnames",{"2":{"30":1}}],["create",{"0":{"21":1,"24":1,"27":1},"1":{"22":1,"23":1,"25":1,"26":1,"28":1,"29":1,"30":1},"2":{"11":1,"22":1,"23":1,"25":1,"26":1,"27":1,"28":1,"29":1}}],["custom",{"2":{"7":1,"30":1}}],["check",{"2":{"4":1,"7":1}}],["css",{"0":{"10":1},"2":{"3":2,"10":1,"16":1,"29":1,"30":1}}],["collisions",{"2":{"23":1,"26":1,"30":1}}],["color",{"0":{"4":1,"5":1,"6":1,"7":1},"2":{"3":1,"4":4,"5":8,"6":3,"7":8,"19":12}}],["colors",{"0":{"3":1},"1":{"4":1,"5":1,"6":1,"7":1},"2":{"3":1}}],["corner",{"2":{"19":1}}],["code",{"0":{"15":1,"19":1,"23":1,"26":1,"29":1},"1":{"16":1}}],["content",{"2":{"15":4,"16":2}}],["containing",{"2":{"10":1}}],["contrasty",{"2":{"5":1,"7":1}}],["contrast",{"0":{"5":1},"2":{"5":3,"7":1,"15":2}}],["convert",{"2":{"6":1}}],["compatibility",{"0":{"13":1},"1":{"14":1},"2":{"14":2,"15":1}}],["compares",{"2":{"5":1,"7":1}}],["com",{"2":{"3":2}}],["has",{"2":{"19":1}}],["high",{"2":{"15":2}}],["helper",{"2":{"22":1,"23":1,"25":1,"26":1}}],["helpful",{"2":{"10":1}}],["height",{"2":{"19":1}}],["hex2rgbcore",{"0":{"7":1},"2":{"7":1}}],["hex2rgba",{"0":{"6":1},"2":{"6":1}}],["hex",{"2":{"6":1}}],["hsl",{"2":{"3":2}}],["https",{"2":{"3":2}}]],"serializationVersion":2}';export{t as default};