@guebbit/css-toolkit 1.3.2 → 1.4.1

package/src/colors/_customs.scss

@@ -1,53 +1,53 @@
-@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-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%);
-
-$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-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%);
-
-$colors-collection: (
-        "core": (
-                "flatrica-green": $flatrica-green,
-                "manga-red": $manga-red,
-        ),
-        "flatrica-green": (
-                "100": $flatrica-green-100,
-                "200": $flatrica-green-200,
-                "300": $flatrica-green-300,
-                "400": $flatrica-green-400,
-                "500": $flatrica-green-500,
-                "600": $flatrica-green-600,
-                "700": $flatrica-green-700,
-                "800": $flatrica-green-800,
-                "900": $flatrica-green-900,
-        ),
-        "manga-red": (
-                "100": $manga-red-100,
-                "200": $manga-red-200,
-                "300": $manga-red-300,
-                "400": $manga-red-400,
-                "500": $manga-red-500,
-                "600": $manga-red-600,
-                "700": $manga-red-700,
-                "800": $manga-red-800,
-                "900": $manga-red-900,
-        ),
-);
+@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-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%);
+
+$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-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%);
+
+$colors-collection: (
+  "core": (
+    "flatrica-green": $flatrica-green,
+    "manga-red": $manga-red,
+  ),
+  "flatrica-green": (
+    "100": $flatrica-green-100,
+    "200": $flatrica-green-200,
+    "300": $flatrica-green-300,
+    "400": $flatrica-green-400,
+    "500": $flatrica-green-500,
+    "600": $flatrica-green-600,
+    "700": $flatrica-green-700,
+    "800": $flatrica-green-800,
+    "900": $flatrica-green-900,
+  ),
+  "manga-red": (
+    "100": $manga-red-100,
+    "200": $manga-red-200,
+    "300": $manga-red-300,
+    "400": $manga-red-400,
+    "500": $manga-red-500,
+    "600": $manga-red-600,
+    "700": $manga-red-700,
+    "800": $manga-red-800,
+    "900": $manga-red-900,
+  ),
+);

package/src/colors/_index.scss

@@ -1,200 +1,212 @@
-@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,
-        ),
-  // Gradients are special colors that should not be used in texts and borders (for example)
-        "gradient": (
-                "brand-instagram": brands.$gradient-brand-instagram,
-                "brand-tiktok": brands.$gradient-brand-tiktok,
-        ),
-);
+@forward "brands";
+@forward "customs";
+@forward "bootstrap";
+
+@use "bootstrap" as bootstrap;
+@use "customs" as customs;
+@use "brands" as brands;
+
+$colors-collection: (
+  // BOOTSTRAP
+  "neutral": (
+      "0": bootstrap.$black,
+      "100": bootstrap.$grey-900,
+      "200": bootstrap.$grey-800,
+      "300": bootstrap.$grey-700,
+      "400": bootstrap.$grey-600,
+      "500": bootstrap.$grey-500,
+      "600": bootstrap.$grey-400,
+      "700": bootstrap.$grey-300,
+      "800": bootstrap.$grey-200,
+      "900": bootstrap.$white,
+    ),
+  "grey": (
+    "100": bootstrap.$grey-100,
+    "200": bootstrap.$grey-200,
+    "300": bootstrap.$grey-300,
+    "400": bootstrap.$grey-400,
+    "500": bootstrap.$grey-500,
+    "600": bootstrap.$grey-600,
+    "700": bootstrap.$grey-700,
+    "800": bootstrap.$grey-800,
+    "900": bootstrap.$grey-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,
+      "grey": bootstrap.$grey-500,
+      "grey-dark": bootstrap.$grey-900,
+      "flatrica-green": customs.$flatrica-green,
+      "manga-red": customs.$manga-red,
+    ),
+  // Gradients are special colors that should not be used in texts and borders (for example)
+  "gradient": (
+      "brand-instagram": brands.$gradient-brand-instagram,
+      "brand-tiktok": brands.$gradient-brand-tiktok,
+    )
+);

package/src/functions/_breakpoints.scss

@@ -0,0 +1,52 @@
+@use "sass:map";
+@use "sass:list";
+
+$breakpoints-default: (
+  "xs": 0,
+  "sm": 576px,
+  "md": 768px,
+  "lg": 992px,
+  "xl": 1200px,
+  "xxl": 1400px,
+) !default;
+
+/**
+ * Return a breakpoint value from the collection.
+ */
+@function breakpoint-get($name, $breakpoints: $breakpoints-default) {
+  @return map.get($breakpoints, $name);
+}
+
+/**
+ * Return next breakpoint key from the collection.
+ */
+@function breakpoint-next($name, $breakpoints: $breakpoints-default) {
+  $keys: map.keys($breakpoints);
+  $position: list.index($keys, $name);
+  @if not $position or $position >= list.length($keys) {
+    @return null;
+  }
+  @return list.nth($keys, $position + 1);
+}
+
+/**
+ * Return min width for media query.
+ */
+@function breakpoint-min($name, $breakpoints: $breakpoints-default) {
+  $min: breakpoint-get($name, $breakpoints);
+  @if $min == 0 {
+    @return null;
+  }
+  @return $min;
+}
+
+/**
+ * Return max width (exclusive range helper) for media query.
+ */
+@function breakpoint-max($name, $breakpoints: $breakpoints-default) {
+  $next: breakpoint-next($name, $breakpoints);
+  @if not $next {
+    @return null;
+  }
+  @return breakpoint-get($next, $breakpoints) - 0.02px;
+}