@guebbit/css-toolkit 1.0.1 → 1.1.0

package/src/colors/_bootstrap.scss

@@ -1,180 +0,0 @@
-@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 +0,0 @@
-$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,53 +0,0 @@
-@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,205 +0,0 @@
-@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,111 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-/**
- * 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

@@ -1,31 +0,0 @@
-/**
-  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

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

@@ -1,34 +0,0 @@
-/**
- * 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);
-  }
-}