@guebbit/css-toolkit 1.1.3 → 1.2.0

package/src/colors/_bootstrap.scss

@@ -1,181 +1,180 @@
-@use "sass:color" as color;
-@use "../functions/colors" as color-functions;
-
-// Material colors by Bootstrap
-// https://github.com/twbs/bootstrap
-// https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_variables.scss
-
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-
-// scss-docs-start gray-color-variables
-$white:    #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black:    #000 !default;
-// scss-docs-end gray-color-variables
-
-// fusv-disable
-// scss-docs-start gray-colors-map
-$grays: (
-        "100": $gray-100,
-        "200": $gray-200,
-        "300": $gray-300,
-        "400": $gray-400,
-        "500": $gray-500,
-        "600": $gray-600,
-        "700": $gray-700,
-        "800": $gray-800,
-        "900": $gray-900
-) !default;
-// scss-docs-end gray-colors-map
-// fusv-enable
-
-// scss-docs-start color-variables
-$blue:    #0d6efd !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
-$teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
-// scss-docs-end color-variables
-
-// scss-docs-start colors-map
-$colors: (
-        "blue":       $blue,
-        "indigo":     $indigo,
-        "purple":     $purple,
-        "pink":       $pink,
-        "red":        $red,
-        "orange":     $orange,
-        "yellow":     $yellow,
-        "green":      $green,
-        "teal":       $teal,
-        "cyan":       $cyan,
-        "black":      $black,
-        "white":      $white,
-        "gray":       $gray-600,
-        "gray-dark":  $gray-800
-) !default;
-// scss-docs-end colors-map
-
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-$min-contrast-ratio:   4.5 !default;
-
-// Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark:      $black !default;
-$color-contrast-light:     $white !default;
-
-// fusv-disable
-$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.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.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.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.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.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.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.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.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.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.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;
+@use "../functions/colors" as color-functions;
+
+// Material colors by Bootstrap
+// https://github.com/twbs/bootstrap
+// https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_variables.scss
+
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+
+// scss-docs-start gray-color-variables
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+        "100": $gray-100,
+        "200": $gray-200,
+        "300": $gray-300,
+        "400": $gray-400,
+        "500": $gray-500,
+        "600": $gray-600,
+        "700": $gray-700,
+        "800": $gray-800,
+        "900": $gray-900
+) !default;
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue:    #0d6efd !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #d63384 !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+$teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+        "blue":       $blue,
+        "indigo":     $indigo,
+        "purple":     $purple,
+        "pink":       $pink,
+        "red":        $red,
+        "orange":     $orange,
+        "yellow":     $yellow,
+        "green":      $green,
+        "teal":       $teal,
+        "cyan":       $cyan,
+        "black":      $black,
+        "white":      $white,
+        "gray":       $gray-600,
+        "gray-dark":  $gray-800
+) !default;
+// scss-docs-end colors-map
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio:   4.5 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$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-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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;
+$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;

package/src/colors/_brands.scss

@@ -1,20 +1,20 @@
-$brand-facebook: #3b5998;
-$brand-youtube: #cc181e;
-$brand-twitter: #3cf;
-$brand-skype: #00aff0;
-$brand-linkedin: #1565c0;
-$brand-whatsapp: #4ac959;
-$brand-telegram: #08c;
-$brand-twitch: #6441a4;
-$brand-pinterest: #e60023;
-$brand-reddit: #ff4301;
-$brand-tumblr: #35465c;
-$brand-patreon: #f96854;
-$brand-kickstarter: #05ce78;
-$brand-instagram: #f09433;
-$brand-tiktok: #25f4ee;
-$brand-google: #dc4a38;
-$brand-paypal: #003087;
-$brand-paypal2: #f2b938;
-$advanced-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
+$brand-facebook: #3b5998;
+$brand-youtube: #cc181e;
+$brand-twitter: #3cf;
+$brand-skype: #00aff0;
+$brand-linkedin: #1565c0;
+$brand-whatsapp: #4ac959;
+$brand-telegram: #08c;
+$brand-twitch: #6441a4;
+$brand-pinterest: #e60023;
+$brand-reddit: #ff4301;
+$brand-tumblr: #35465c;
+$brand-patreon: #f96854;
+$brand-kickstarter: #05ce78;
+$brand-instagram: #f09433;
+$brand-tiktok: #25f4ee;
+$brand-google: #dc4a38;
+$brand-paypal: #003087;
+$brand-paypal2: #f2b938;
+$advanced-brand-instagram: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
 $advanced-brand-tiktok: linear-gradient(90deg, #25f4ee 0%, #000 30%, #000 50%, #000 70%, #fe2c55 100%);

package/src/colors/_customs.scss

@@ -1,55 +1,53 @@
-@use "sass:color" as color;
-@use "../functions/colors" as color-functions;
-
-$flatrica-green: #06a763 !default;
-$manga-red: #d41816 !default;
-
-$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.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.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.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": (
-                "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,
+        ),
 );