@guebbit/css-toolkit 1.0.0

package/src/colors/_index.scss

@@ -0,0 +1,205 @@
+@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

@@ -0,0 +1,111 @@
+@use "sass:color";
+@use "sass:math";
+@use "sass: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 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(white, $color, $weight);
+}
+
+
+/*
+ * Shade a color: mix a color with black
+ * function credited to https://getbootstrap.com/
+ */
+@function color-shade($color, $weight) {
+  @return mix(black, $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 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(((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)), 255 * 100%);
+}
+
+
+/**
+ * Hex to RGB (only numbers, transparentize would add rgba(*))
+ */
+@function hex2rgb($color: #fff){
+  @if $color == transparent or type-of($color) != color {
+    @return $color;
+  }
+  @return red($color), green($color), blue($color);
+}
+
+
+/**
+ * RGB to Hex
+ */
+@function rgb2hex($color: rgb(255,255,255)){
+  @if $color == transparent or type-of($color) != color {
+    @return $color;
+  }
+  $ie-hex: ie_hex_str($color);
+  @return string.unquote('#' + string.slice(color.ie-hex-str($color), 4));
+}
+
+
+/**
+ * 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
+}

package/src/functions/_helpers.scss

@@ -0,0 +1,23 @@
+/**
+ * Giving a list of variables and values,
+ * from start to end, try all the values until a non-null is found
+ */
+@function no-null-var($list: ()){
+  @each $value in $list {
+    // stylelint-disable-next-line scss/at-if-no-null
+    @if $value != null{
+      @return $value;
+    }
+  }
+  @return null;
+}
+
+/*
+ * If the color is transparent, return inherit
+ */
+@function no-transparent-var($color: transparent){
+  @if $color == transparent {
+    @return inherit;
+  }
+  @return $color;
+}

package/src/functions/_strings.scss

@@ -0,0 +1,31 @@
+/**
+  Split string into lists
+ */
+@function string-split($string, $separator: "-") {
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index : str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index : str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+/**
+  Check if $string ends with $find
+ */
+@function string-ends-with($string, $find) {
+  @return (str-length($string) >= str-length($find)) and (str-slice($string, (str-length($string) - str-length($find) + 1)) == $find);
+}

package/src/index.scss

@@ -0,0 +1,14 @@
+@forward "./colors";
+
+@forward "./mixins/build-scrollbar";
+@forward "./mixins/build-aspect-ratio";
+
+@forward "mixins/build-compatibility";
+@forward "./mixins/create-colors";
+@forward "./mixins/create-instruction";
+@forward "./mixins/create-helper-margin";
+@forward "./mixins/create-helper-padding";
+
+@forward "./functions/colors";
+@forward "./functions/helpers";
+@forward "./functions/strings";

package/src/mixins/_build-aspect-ratio.scss

@@ -0,0 +1,34 @@
+/**
+ * Use in the parent\container, to be coupled with {build-aspect-ratio-anchor}
+ */
+@mixin build-aspect-ratio-container($ratio: 100%){
+  position: relative;
+
+  &::before{
+    content: "";
+    display: block;
+    padding-top: 100%;
+  }
+}
+
+/**
+ * Use in the child that "gives" form to the parent that has the respective {build-aspect-ratio-container}
+ */
+@mixin build-aspect-ratio-anchor($ratio: 100%){
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ *  aspect ratio shortcut
+ */
+@mixin build-aspect-ratio($ratio: 100%){
+  @include build-aspect-ratio-container($ratio);
+
+  & > * {
+    @include build-aspect-ratio-anchor($ratio);
+  }
+}

package/src/mixins/_build-compatibility.scss

@@ -0,0 +1,28 @@
+/**
+*	Compatibility mode for browsers
+*	@param string $browser: target browser
+*	@content
+**/
+@mixin build-compatibility($browser) {
+  // INTERNET EXPLORER
+  @if $browser == "ie" {
+    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+      @content;
+    }
+  }
+  // MICROSOFT EDGE
+  @if $browser == "edge" {
+    @supports (-ms-ime-align:auto) {
+      @content;
+    }
+  }
+  // FIREFOX
+  @if $browser == "firefox" {
+    @supports (-moz-appearance:none) {
+      @content;
+    }
+  }
+
+  // OPERA TODO
+  // SAFARI TODO
+}

package/src/mixins/_build-scrollbar.scss

@@ -0,0 +1,32 @@
+/**
+ *	Builder - scrollbars of element
+ *	@param string $color
+ *	@param pixels $size
+ *	@param $background: if false, has default lighten 40%
+ */
+@mixin build-scrollbar($size: "4px", $color: "#fff", $bg: "auto", $radius: "10px") {
+  $fallback-color: #fff;
+  $fallback-bg: transparent;
+
+  @if $bg == "auto" {
+    $bg: $fallback-bg;
+  }
+
+  &::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+    background-color: $fallback-bg;
+    background-color: $bg;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: $radius;
+    background-color: $fallback-color;
+    background-color: $color;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: $fallback-bg;
+    background-color: $bg;
+  }
+}

package/src/mixins/_create-colors.scss

@@ -0,0 +1,119 @@
+@use "sass:list";
+@use "sass:string";
+@use "../functions/colors" as color-functions;
+
+/**
+ *  Create all the needed classes for the requested colors
+ *  $color-list     - list of colors (like $colors-collection: ("branch": ( "leaf: $color" )))
+ *  $branch-list:   - when filled: becomes a whitelist (aka: include only listed brands)
+ *  $feature-list:  - when filled: becomes a whitelist. May become cumbersome and many are not needed. Use with care.
+ *    - root
+ *    - on-root (color's "best contrast" partner color)
+ *    - color
+ *    - background
+ *    - border
+ *    - pseudo (bg only, color very rarely used)
+ *    - hover
+ *    $prefix: prefix that applies to classes
+ */
+@mixin create-colors($color-list: (), $branch-list: (), $feature-list: (), $prefix: "") {
+  // for every branch
+  @each $branch-name, $branch in $color-list {
+    // check that there is no $branch-list or, if present, it's correctly whitelisted
+    @if list.length($branch-list) < 1 or list.index($branch-list, $branch-name) {
+
+      // for every leaf
+      @each $sname, $scolor in $branch {
+
+        @if not list.index($branch-name, "advanced"){
+          @if list.length($feature-list) < 1 or list.index($feature-list, "color") {
+            .#{$prefix}#{$branch-name}-#{$sname}-text {
+              color: $scolor !important;
+            }
+          }
+          @if list.length($feature-list) < 1 or list.index($feature-list, "border") {
+            .#{$prefix}#{$branch-name}-#{$sname}-border {
+              border-color: $scolor !important;
+            }
+          }
+        }
+
+        @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
+          .#{$prefix}#{$branch-name}-#{$sname}-bg {
+            background: $scolor !important;
+          }
+        }
+
+        @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
+          .#{$prefix}#{$branch-name}-#{$sname}-pseudo-bg {
+            &::after,
+            &::before {
+              background: $scolor !important;
+            }
+          }
+        }
+
+        @if list.length($feature-list) < 1 or list.index($feature-list, "hover"){
+
+          @if not list.index($branch-name, "advanced"){
+            @if list.length($feature-list) < 1 or list.index($feature-list, "color"){
+              .#{$prefix}#{$branch-name}-#{$sname}-hover-text {
+                &:hover {
+                  color: $scolor !important;
+                }
+              }
+            }
+            @if list.length($feature-list) < 1 or list.index($feature-list, "border"){
+              .#{$prefix}#{$branch-name}-#{$sname}-hover-border {
+                &:hover {
+                  border-color: $scolor !important;
+                }
+              }
+            }
+          }
+
+          @if list.length($feature-list) < 1 or list.index($feature-list, "background") {
+            .#{$prefix}#{$branch-name}-#{$sname}-hover-bg {
+              &:hover {
+                background: $scolor !important;
+              }
+            }
+          }
+
+          @if list.length($feature-list) < 1 or list.index($feature-list, "pseudo") {
+            .#{$prefix}#{$branch-name}-#{$sname}-hover-pseudo-bg {
+              &:hover{
+                &::after,
+                &::before {
+                  background: $scolor !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * CSS VARS on root (they will be translated in "RGB" instead of "HEX"
+   */
+  :root{
+    @if list.length($feature-list) < 1 or list.index($feature-list, "root"){
+      @each $branch-name, $branch in $color-list {
+        @each $sname, $scolor in $branch {
+          --#{$prefix}#{$branch-name}-#{$sname}: #{color-functions.hex2rgb($scolor)};
+        }
+      }
+    }
+    @if list.length($feature-list) < 1 or list.index($feature-list, "on-root"){
+      @each $branch-name, $branch in $color-list {
+        @each $sname, $scolor in $branch {
+          // @if type-of($scolor) == color {
+          --#{$prefix}on-#{$branch-name}-#{$sname}: #{color-functions.hex2rgb(color-functions.color-contrast($scolor))};
+          // _}
+        }
+      }
+    }
+  }
+}

package/src/mixins/_create-helper-margin.scss

@@ -0,0 +1,39 @@
+/**
+ *
+ * t - applies the spacing for margin-top
+ * b - applies the spacing for margin-bottom
+ * l - applies the spacing for margin-left
+ * r - applies the spacing for margin-right
+ * x - applies the spacing for both *-left and *-right
+ * y - applies the spacing for both *-top and *-bottom
+ * a - applies the spacing for the property in all directions
+ *
+ * @param {Array<name,value>[]} measure-list - postfix name and value
+ */
+@mixin create-helper-margin($measure-list: (), $important: false, $prefix: "") {
+  @each $name, $val in $measure-list {
+    .#{$prefix}mt-#{$name} {
+      margin-top: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}mb-#{$name} {
+      margin-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}ml-#{$name} {
+      margin-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}mr-#{$name} {
+      margin-right: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}mx-#{$name} {
+      margin-right: #{$val} #{if($important == true, "!important", "")};
+      margin-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}my-#{$name} {
+      margin-top: #{$val} #{if($important == true, "!important", "")};
+      margin-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}ma-#{$name} {
+      margin: #{$val} #{if($important == true, "!important", "")};
+    }
+  }
+}

package/src/mixins/_create-helper-padding.scss

@@ -0,0 +1,40 @@
+/**
+ *
+ * t - applies the spacing for padding-top
+ * b - applies the spacing for padding-bottom
+ * l - applies the spacing for padding-left
+ * r - applies the spacing for padding-right
+ * x - applies the spacing for both *-left and *-right
+ * y - applies the spacing for both *-top and *-bottom
+ * a - applies the spacing for the property in all directions
+
+ * @param {Array<name,value>[]} measure-list - postfix name and value
+ */
+@mixin create-helper-padding($measure-list: (), $important: false, $prefix: "") {
+
+  @each $name, $val in $measure-list {
+    .#{$prefix}pt-#{$name} {
+      padding-top: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pb-#{$name} {
+      padding-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pl-#{$name} {
+      padding-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pr-#{$name} {
+      padding-right: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}px-#{$name} {
+      padding-right: #{$val} #{if($important == true, "!important", "")};
+      padding-left: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}py-#{$name} {
+      padding-top: #{$val} #{if($important == true, "!important", "")};
+      padding-bottom: #{$val} #{if($important == true, "!important", "")};
+    }
+    .#{$prefix}pa-#{$name} {
+      padding: #{$val} #{if($important == true, "!important", "")};
+    }
+  }
+}