@guebbit/css-toolkit 1.2.0 → 1.2.2

package/test/test.css

@@ -5,17 +5,22 @@
  * function credited to https://getbootstrap.com/
  */
 /**
- * Tint a color: mix a color with white
- * function credited to https://getbootstrap.com/
+ * Tint a color
  */
 /**
- * Shade a color: mix a color with black
- * function credited to https://getbootstrap.com/
+ * Shade a color
  */
 /**
  * Shade the color if the weight is positive, else tint it
  * function credited to https://getbootstrap.com/
  */
+/**
+ * Return WCAG2.1 relative luminance
+ * See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+ * See https://en.wikipedia.org/wiki/Relative_luminance
+ * Gives %, less than 50 darker is better, less than 50, lighter.
+ * Function like color.channel($color, "lightness", $space: hsl) gives a different %
+ */
 /**
  * Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
  */
@@ -4989,114 +4994,114 @@
   --grey-700: 73 80 87;
   --grey-800: 52 58 64;
   --grey-900: 33 37 41;
-  --blue-100: 207 226 255;
-  --blue-200: 158 197 254;
-  --blue-300: 110 168 254;
-  --blue-400: 61 139 253;
+  --blue-100: 206.6 226 254.6;
+  --blue-200: 158.2 197 254.2;
+  --blue-300: 109.8 168 253.8;
+  --blue-400: 61.4 139 253.4;
   --blue-500: 13 110 253;
-  --blue-600: 10 88 202;
-  --blue-700: 8 66 152;
-  --blue-800: 5 44 101;
-  --blue-900: 3 22 51;
-  --indigo-100: 224 207 252;
-  --indigo-200: 194 159 250;
-  --indigo-300: 163 112 247;
-  --indigo-400: 133 64 245;
+  --blue-600: 10.4 88 202.4;
+  --blue-700: 7.8 66 151.8;
+  --blue-800: 5.2 44 101.2;
+  --blue-900: 2.6 22 50.6;
+  --indigo-100: 224.4 207.2 252.4;
+  --indigo-200: 193.8 159.4 249.8;
+  --indigo-300: 163.2 111.6 247.2;
+  --indigo-400: 132.6 63.8 244.6;
   --indigo-500: 102 16 242;
-  --indigo-600: 82 13 194;
-  --indigo-700: 61 10 145;
-  --indigo-800: 41 6 97;
-  --indigo-900: 20 3 48;
-  --purple-100: 226 217 243;
-  --purple-200: 197 179 230;
-  --purple-300: 169 142 218;
-  --purple-400: 140 104 205;
+  --indigo-600: 81.6 12.8 193.6;
+  --indigo-700: 61.2 9.6 145.2;
+  --indigo-800: 40.8 6.4 96.8;
+  --indigo-900: 20.4 3.2 48.4;
+  --purple-100: 226.2 217.2 242.6;
+  --purple-200: 197.4 179.4 230.2;
+  --purple-300: 168.6 141.6 217.8;
+  --purple-400: 139.8 103.8 205.4;
   --purple-500: 111 66 193;
-  --purple-600: 89 53 154;
-  --purple-700: 67 40 116;
-  --purple-800: 44 26 77;
-  --purple-900: 22 13 39;
-  --pink-100: 247 214 230;
-  --pink-200: 239 173 206;
-  --pink-300: 230 133 181;
-  --pink-400: 222 92 157;
+  --purple-600: 88.8 52.8 154.4;
+  --purple-700: 66.6 39.6 115.8;
+  --purple-800: 44.4 26.4 77.2;
+  --purple-900: 22.2 13.2 38.6;
+  --pink-100: 246.8 214.2 230.4;
+  --pink-200: 238.6 173.4 205.8;
+  --pink-300: 230.4 132.6 181.2;
+  --pink-400: 222.2 91.8 156.6;
   --pink-500: 214 51 132;
-  --pink-600: 171 41 106;
-  --pink-700: 128 31 79;
-  --pink-800: 86 20 53;
-  --pink-900: 43 10 26;
-  --red-100: 248 215 218;
-  --red-200: 241 174 181;
-  --red-300: 234 134 143;
-  --red-400: 227 93 106;
+  --pink-600: 171.2 40.8 105.6;
+  --pink-700: 128.4 30.6 79.2;
+  --pink-800: 85.6 20.4 52.8;
+  --pink-900: 42.8 10.2 26.4;
+  --red-100: 248 214.6 217.8;
+  --red-200: 241 174.2 180.6;
+  --red-300: 234 133.8 143.4;
+  --red-400: 227 93.4 106.2;
   --red-500: 220 53 69;
-  --red-600: 176 42 55;
-  --red-700: 132 32 41;
-  --red-800: 88 21 28;
-  --red-900: 44 11 14;
-  --orange-100: 255 229 208;
-  --orange-200: 254 203 161;
-  --orange-300: 254 178 114;
-  --orange-400: 253 152 67;
+  --red-600: 176 42.4 55.2;
+  --red-700: 132 31.8 41.4;
+  --red-800: 88 21.2 27.6;
+  --red-900: 44 10.6 13.8;
+  --orange-100: 254.6 229.2 208;
+  --orange-200: 254.2 203.4 161;
+  --orange-300: 253.8 177.6 114;
+  --orange-400: 253.4 151.8 67;
   --orange-500: 253 126 20;
-  --orange-600: 202 101 16;
-  --orange-700: 152 76 12;
-  --orange-800: 101 50 8;
-  --orange-900: 51 25 4;
-  --yellow-100: 255 243 205;
-  --yellow-200: 255 230 156;
-  --yellow-300: 255 218 106;
-  --yellow-400: 255 205 57;
+  --orange-600: 202.4 100.8 16;
+  --orange-700: 151.8 75.6 12;
+  --orange-800: 101.2 50.4 8;
+  --orange-900: 50.6 25.2 4;
+  --yellow-100: 255 242.6 205.4;
+  --yellow-200: 255 230.2 155.8;
+  --yellow-300: 255 217.8 106.2;
+  --yellow-400: 255 205.4 56.6;
   --yellow-500: 255 193 7;
-  --yellow-600: 204 154 6;
-  --yellow-700: 153 116 4;
-  --yellow-800: 102 77 3;
-  --yellow-900: 51 39 1;
-  --green-100: 209 231 221;
-  --green-200: 163 207 187;
-  --green-300: 117 183 152;
-  --green-400: 71 159 118;
+  --yellow-600: 204 154.4 5.6;
+  --yellow-700: 153 115.8 4.2;
+  --yellow-800: 102 77.2 2.8;
+  --yellow-900: 51 38.6 1.4;
+  --green-100: 209 231 220.8;
+  --green-200: 163 207 186.6;
+  --green-300: 117 183 152.4;
+  --green-400: 71 159 118.2;
   --green-500: 25 135 84;
   --green-600: 25 135 84;
-  --green-700: 20 108 67;
-  --green-800: 15 81 50;
-  --green-900: 10 54 34;
-  --teal-100: 210 244 234;
-  --teal-200: 166 233 213;
-  --teal-300: 121 223 193;
-  --teal-400: 77 212 172;
+  --green-700: 20 108 67.2;
+  --green-800: 15 81 50.4;
+  --green-900: 10 54 33.6;
+  --teal-100: 210.4 244.2 234.2;
+  --teal-200: 165.8 233.4 213.4;
+  --teal-300: 121.2 222.6 192.6;
+  --teal-400: 76.6 211.8 171.8;
   --teal-500: 32 201 151;
-  --teal-600: 26 161 121;
-  --teal-700: 19 121 91;
-  --teal-800: 13 80 60;
-  --teal-900: 6 40 30;
-  --cyan-100: 207 244 252;
-  --cyan-200: 158 234 249;
-  --cyan-300: 110 223 246;
-  --cyan-400: 61 213 243;
+  --teal-600: 25.6 160.8 120.8;
+  --teal-700: 19.2 120.6 90.6;
+  --teal-800: 12.8 80.4 60.4;
+  --teal-900: 6.4 40.2 30.2;
+  --cyan-100: 206.6 244.4 252;
+  --cyan-200: 158.2 233.8 249;
+  --cyan-300: 109.8 223.2 246;
+  --cyan-400: 61.4 212.6 243;
   --cyan-500: 13 202 240;
-  --cyan-600: 10 162 192;
-  --cyan-700: 8 121 144;
-  --cyan-800: 5 81 96;
-  --cyan-900: 3 40 48;
-  --flatrica-green-100: 205 237 224;
-  --flatrica-green-200: 155 220 193;
-  --flatrica-green-300: 106 202 161;
-  --flatrica-green-400: 56 185 130;
+  --cyan-600: 10.4 161.6 192;
+  --cyan-700: 7.8 121.2 144;
+  --cyan-800: 5.2 80.8 96;
+  --cyan-900: 2.6 40.4 48;
+  --flatrica-green-100: 205.2 237.4 223.8;
+  --flatrica-green-200: 155.4 219.8 192.6;
+  --flatrica-green-300: 105.6 202.2 161.4;
+  --flatrica-green-400: 55.8 184.6 130.2;
   --flatrica-green-500: 6 167 99;
-  --flatrica-green-600: 5 134 79;
-  --flatrica-green-700: 4 100 59;
-  --flatrica-green-800: 2 67 40;
-  --flatrica-green-900: 1 33 20;
-  --manga-red-100: 246 209 208;
-  --manga-red-200: 238 163 162;
-  --manga-red-300: 229 116 115;
-  --manga-red-400: 221 70 69;
+  --flatrica-green-600: 4.8 133.6 79.2;
+  --flatrica-green-700: 3.6 100.2 59.4;
+  --flatrica-green-800: 2.4 66.8 39.6;
+  --flatrica-green-900: 1.2 33.4 19.8;
+  --manga-red-100: 246.4 208.8 208.4;
+  --manga-red-200: 237.8 162.6 161.8;
+  --manga-red-300: 229.2 116.4 115.2;
+  --manga-red-400: 220.6 70.2 68.6;
   --manga-red-500: 212 24 22;
-  --manga-red-600: 170 19 18;
-  --manga-red-700: 127 14 13;
-  --manga-red-800: 85 10 9;
-  --manga-red-900: 42 5 4;
+  --manga-red-600: 169.6 19.2 17.6;
+  --manga-red-700: 127.2 14.4 13.2;
+  --manga-red-800: 84.8 9.6 8.8;
+  --manga-red-900: 42.4 4.8 4.4;
   --brand-facebook: 59 89 152;
   --brand-youtube: 204 24 30;
   --brand-twitter: 51 204 255;

package/test/test.scss

@@ -1,159 +1,159 @@
-@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;
+
+@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"))};
 }

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"), // 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: [],
 });