@guebbit/css-toolkit 1.1.3 → 1.2.0

package/src/colors/_index.scss

@@ -1,200 +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,
-        ),
+@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,
+        ),
 );

package/src/functions/_colors.scss

@@ -1,109 +1,122 @@
-@use "sass:color" as color;
-@use "sass:math" as math;
-@use "sass:string" as string;
-
-/**
- * Return opaque color
- * color-opaque(#fff, rgba(0, 0, 0, .5)) => #808080
- * function credited to https://getbootstrap.com/
- */
-@function color-opaque($background, $foreground) {
-  @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%, $method: rgb);
-}
-
-/**
- * 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.scale($color, $lightness: $weight), color.scale($color, $lightness: -$weight));
-}
-
-
-/**
- * Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
- */
-@function color-contrast($color: #fff, $dark: #000, $light: #fff) {
-  @if type-of($color) != color or $color == transparent {
-    @return inherit;
-  }
-  $color-brightness: color-brightness($color);
-  $light-text-brightness: color-brightness($light);
-  $dark-text-brightness: color-brightness($dark);
-
-  @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
-}
-
-
-
-// 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 color-brightness($color) {
-  // fallback
-  @if $color == transparent or type-of($color) != color {
-    @return 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%);
-}
-
-/**
- * NEW numeric annotation
- * Hex to RGB (only numbers, transparentize would add rgba(*))
- * $color
- * $alpha:
- *    - 0: never 4° digit
- *    - 1: always 4° digit
- *    - 2: 4° digit only when needed
- * $classic: false = new number annotation
- */
-@function extract-colors($color: #fff, $mode: 2, $classic: false){
-  // colors only
-  @if $color == transparent or type-of($color) != color {
-    @return $color;
-  }
-  // new annotation
-  $delimiter: " ";
-  $delimiter-alpha: " / ";
-  // old annotation
-  @if $classic{
-    $delimiter: ", ";
-    $delimiter-alpha: ", ";
-  }
-  $alpha: alpha($color);
-  @if $mode == 1 or ($mode == 2 and $alpha == 1) {
-    @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 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.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.scale($color, $lightness: -20%),
-          "700": color.scale($color, $lightness: -40%),
-          "800": color.scale($color, $lightness: -60%),
-          "900": color.scale($color, $lightness: -80%)
-  );
-
-  @return $list
+@use "sass:color";
+@use "sass:math";
+@use "sass:string";
+@use "sass:meta";
+
+/**
+ * Return opaque color
+ * color-opaque(#fff, rgba(0, 0, 0, .5)) => #808080
+ * function credited to https://getbootstrap.com/
+ */
+@function color-opaque($background, $foreground) {
+  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+}
+
+
+/**
+ * Tint a color: mix a color with white
+ * function credited to https://getbootstrap.com/
+ */
+@function color-tint($color, $weight) {
+  @return mix(#fff, $color, $weight);
+}
+
+
+/**
+ * Shade a color: mix a color with black
+ * function credited to https://getbootstrap.com/
+ */
+@function color-shade($color, $weight) {
+  @return mix(#000, $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)
+  );
+}
+
+
+/**
+ * Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
+ */
+@function color-contrast($color: #fff, $dark: #000, $light: #fff) {
+  @if meta.type-of($color) != color or $color == transparent {
+    @return inherit;
+  }
+  $color-brightness: color-brightness($color);
+  $light-text-brightness: color-brightness($light);
+  $dark-text-brightness: color-brightness($dark);
+
+  @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+}
+
+
+
+// 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 color-brightness($color) {
+  // fallback
+  @if $color == transparent or meta.type-of($color) != color {
+    @return 100;
+  }
+  @return math.div(((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)), 255 * 100%);
+}
+
+/**
+ * NEW numeric annotation
+ * Hex to RGB (only numbers, transparentize would add rgba(*))
+ * $color
+ * $alpha:
+ *    - 0: never 4° digit
+ *    - 1: always 4° digit
+ *    - 2: 4° digit only when needed
+ * $classic: false = new number annotation
+ */
+@function extract-colors($color: #fff, $mode: 2, $classic: false){
+  // colors only
+  @if $color == transparent or meta.type-of($color) != color {
+    @return $color;
+  }
+  // new annotation
+  $delimiter: " ";
+  $delimiter-alpha: " / ";
+  // old annotation
+  @if $classic{
+    $delimiter: ", ";
+    $delimiter-alpha: ", ";
+  }
+  $alpha: alpha($color);
+  @if $mode == 1 or ($mode == 2 and $alpha == 1) {
+    @return red($color) + $delimiter + green($color) + $delimiter + blue($color);
+  }
+  // Regular RGBA compliant result ("number" notation)
+  @return red($color) + $delimiter + green($color) + $delimiter + blue($color) + $delimiter-alpha + alpha($color); // * 100%
+}
+
+/**
+ * Create default collection
+ */
+@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%),
+          "500": $color,
+          "600": color-shade($color, 20%),
+          "700": color-shade($color, 40%),
+          "800": color-shade($color, 60%),
+          "900": color-shade($color, 80%)
+  );
+
+  @return $list
 }