utility_colors 0.1.8 → 1.0.0

data/utility_colors/utility_colors_files/functions/_palettes.scss

@@ -1,123 +0,0 @@
-// * Palettes
-
-// ? Single Colour's Palette
-// a function to create a colour shade palette based off a single color input
-@function single-color-shades-palette($key, $base_color) {
-  $single-color-palette: ();
-
-  // colours are index inversely to their lightness
-  $base-palette-index: palette-index($base_color);
-  $single-color-palette: map-merge($single-color-palette, (#{palette-reference($key, $base_color, $base-palette-index)}: $base_color));
-
-  // Lighter colours
-  // calc the space available to create lightened colours based off the base colour
-  @if $base-palette-index > 0 {
-    @for $i from 1 through $base-palette-index {
-      $col: color-step($base_color, $i, true);
-      $single-color-palette: map-merge($single-color-palette, (#{palette-reference($key, $col, $base-palette-index - $i)}: $col));
-    }
-  }
-
-  // Darker colours
-  // calc the space available to create darkened colours based off the base colour
-  @if $base-palette-index < 9 {
-    @for $i from 1 through 9 - $base-palette-index {
-      $col: color-step($base_color, $i, false);
-      $single-color-palette: map-merge($single-color-palette, (#{palette-reference($key, $col, $base-palette-index + $i)}: $col));
-    }
-  }
-
-  @return $single-color-palette;
-}
-
-
-// ? How to Calculate the next colour in the Palette
-@function color-step($color, $step, $lighter) {
-  $color: hsl_sequence($color, $step, $lighter);
-
-  @return $color;
-}
-
-@function palette-reference($key, $color, $index) {
-  $reference: '';
-
-  @if $index == 0 {
-    $reference: #{$key + '-50'};
-  } @else {
-    $reference: #{$key + '-' + calc($index) + '00'};
-  }
-
-  @return $reference;
-}
-
-
-// ? Single Colour's Trio Palette
-// a function to create a trio shade palette based off a single color input
-@function single-color-tri-palette($key, $base_color) {
-  $single-color-trio: ();
-
-  $base-palette-index: palette-index($base_color);
-  $single-color-trio: map-merge($single-color-trio, (#{$key}: $base_color));
-
-  // Lighter colour
-  @if $base-palette-index > 1 {
-    $col: color-step($base_color, 2, true);
-    $single-color-trio: map-merge($single-color-trio, (#{$key + '-light'}: $col));
-  } @else if $base-palette-index > 0 {
-    $col: color-step($base_color, 1, true);
-    $single-color-trio: map-merge($single-color-trio, (#{$key + '-light'}: $col));
-  } @else {
-    $single-color-trio: map-merge($single-color-trio, (#{$key + '-light'}: null))
-  }
-  
-  // Darker colour
-  @if $base-palette-index < 8 {
-    $col: color-step($base_color, 2, false);
-    $single-color-trio: map-merge($single-color-trio, (#{$key + '-dark'}: $col));
-  } @else if $base-palette-index < 9 {
-    $col: color-step($base_color, 1, false);
-    $single-color-trio: map-merge($single-color-trio, (#{$key + '-dark'}: $col));
-  } @else {
-    $single-color-trio: map-merge($single-color-trio, (#{$key + '-dark'}: null))
-  }
-
-  @return $single-color-trio;
-}
-
-
-
-// ? Multiple Colours
-
-// ? Multiple Colour's Palette
-// a function to loop through a map of colours and create shade palettes for them all and collect this into a single map
-
-@function multi-color-shades-palette($color-map) {
-  $multi-color-palette: ();
-  
-  @each $key, $base_color in $color-map {
-    // create a palette for a single colour from the providing mapping
-    $new-palette: single-color-shades-palette($key, $base_color);
-
-    // merge the colours shade palette into the collective mapping
-    $multi-color-palette: map-merge($multi-color-palette, $new-palette);
-  }
-
-  @return $multi-color-palette;
-}
-
-// ? Multiple Colour's Trio Palette
-// a function to loop through a map of colours and create trio shade palettes for them all and collect this into a single map
-
-@function multi-color-tri-palette($color-map) {
-  $multi-color-trio: ();
-  
-  @each $key, $base_color in $color-map {
-    // create a palette for a single colour from the providing mapping
-    $new-trio: single-color-tri-palette($key, $base_color);
-
-    // merge the colours shade palette into the collective mapping
-    $multi-color-trio: map-merge($multi-color-trio, $new-trio);
-  }
-
-  @return $multi-color-trio;
-}

data/utility_colors/utility_colors_files/functions/_references.scss

@@ -1,7 +0,0 @@
-@function light-index($color) {
-  @return math.floor(math.div(lightness($color), 10%));
-}
-
-@function palette-index($color) {
-  @return 9 - light-index($color);
-}

data/utility_colors/utility_colors_files/functions/_sequences.scss

@@ -1,17 +0,0 @@
-$_uc-brightness-step: 9%;
-$_uc-saturation-step: 2%;
-
-// ? HSL Sequence
-// Equally spaces colours from 50, 100 to 900 by only adjusting saturation and lightness
-
-@function hsl_sequence($color, $step, $lighter) {
-  @if $lighter {
-    $color: lighten($color, $step * $_uc-brightness-step);
-    $color: desaturate($color, $step * $_uc-saturation-step);
-  } @else {
-    $color: darken($color, $step * $_uc-brightness-step);
-    $color: saturate($color, $step * $_uc-saturation-step);
-  }
-
-  @return $color;
-}

data/utility_colors/utility_colors_files/mixins/_mixins.scss

@@ -1,60 +0,0 @@
-// * Advanced Classes
-
-@mixin breakpoint-up($size) {
-  @media only screen and (min-width: #{$size - 1}) {
-    @content;
-  }
-}
-
-// 'md|color--red-400'
-// 'hover|color--red-400'
-// 'hover|md|color--red-400'
-
-@mixin advanced-classes($class) {
-  .#{$class} {
-    @content;
-  }
-
-  @if map.get($_uc_user_utility_colors, config, breakpoint) == true and map.get($_uc_user_utility_colors, config, pseudo) == true {
-    @each $initial, $screen-size in $_uc-screen-sizes {
-      @each $pseudo in $_uc-pseudos {
-        .#{$pseudo}\|#{$initial}\|#{$class}:#{$pseudo} {
-          @include breakpoint-up($screen-size) {
-            @content;
-          }
-        }
-      }
-    }
-  } 
-
-  @if map.get($_uc_user_utility_colors, config, breakpoint) == true {
-    @each $initial, $screen-size in $_uc-screen-sizes {
-      .#{$initial}\|#{$class} {
-        @include breakpoint-up($screen-size) {
-          @content;
-        }
-      }
-    }
-  } 
-
-  @if map.get($_uc_user_utility_colors, config, pseudo) == true {
-    @each $pseudo in $_uc-pseudos {
-      .#{$pseudo}\|#{$class}:#{$pseudo} {
-        @content;
-      }
-    } 
-  }
-}
-
-
-// ? Map Classes
-
-// -|sm|md|lg|xl
-// @include map-simple-classes($map, "class", "style");
-@mixin map-simple-classes($map, $class-prop, $style-prop) {
-  @each $key, $var in $map {
-    @include advanced-classes("#{$class-prop}--#{$key}") {
-      #{$style-prop}: $var
-    }
-  }
-}

data/utility_colors/utility_colors_files/utilities/_color.scss

@@ -1,22 +0,0 @@
-// * Colors
-
-@if map.get($_uc_user_utility_colors, config, classes) {
-  @include advanced-classes("color--current") { color: currentColor; }
-
-  // ? Colors
-  @include map-simple-classes($_uc-all-colors, "color", "color"); // .color--red-100
-
-  // ? Background Colors
-  @include map-simple-classes($_uc-all-colors, "bg", "background-color"); // .bg--red-100
-
-  // ? Border Colors
-  @include map-simple-classes($_uc-all-colors, "border-c", "border-color"); // .border-c--red-100
-
-  // ? Outline Colors
-  @include map-simple-classes($_uc-all-colors, "outline-c", "outline-color"); // .outline-c--red-100
-
-  // ? Text Decoration Colors
-  @include map-simple-classes($_uc-all-colors, "decoration-c", "text-decoration-color"); // .decoration-c--red-100
-}
-
-

data/utility_colors/utility_colors_files/validators/_validations.scss

@@ -1,3 +0,0 @@
-// @if variable-exists("utility_colors") == false {
-//   @warn 'Without the utility colors you may forget about future configuration';
-// }

data/utility_colors/utility_colors_files/variables/_color-variables.scss

@@ -1,64 +0,0 @@
-// * Color Palettes
-
-$_uc-shades-use-colors: (
-  'red': hsl(2, 78%, 64%),
-  'rust': hsl(16, 82%, 62%),
-  'orange': hsl(31, 90%, 65%),
-  'gold': hsl(46, 93%, 54%),
-  'yellow': hsl(58, 87%, 55%),
-  'pear': hsl(80, 74%, 57%),
-  'green': hsl(110, 69%, 58%),
-  'seaside': hsl(156, 78%, 57%),
-  'cyan': hsl(180, 69%, 37%),
-  'capri': hsl(197, 90%, 46%),
-  'blue': hsl(214, 78%, 36%),
-  'iris': hsl(265, 87%, 57%),
-  'purple': hsl(279, 85%, 56%),
-  'magenta': hsl(300, 64%, 66%),
-  'pink': hsl(320, 74%, 66%),
-  'satin': hsl(348, 74%, 57%),
-  'cement': hsl(42, 6%, 87%),
-  'grey': hsl(0, 3%, 46%),
-  'base': hsl(0, 3%, 46%),
-);
-
-$_uc-shades-use-palette: multi-color-shades-palette($_uc-shades-use-colors);
-
-$_uc-all-colors: map-combine(
-  $_uc-shades-use-colors,
-  $_uc-shades-use-palette,
-);
-
-@function get-uc($color-name) {
-  @if map-has-key($_uc-all-colors, #{$color-name}) {
-    @return map.get($_uc-all-colors, #{$color-name});
-  } @else {
-    @error "ERROR: Couldn't find Color";
-  }
-};
-
-$_uc-tri-use-colors: (
-  success: get-uc(green-400),
-  danger: get-uc(red-400),
-  information: get-uc(blue-400),
-  warning: get-uc(gold-400),
-);
-
-$_uc-tri-use-palette: multi-color-tri-palette($_uc-tri-use-colors);
-
-$_uc-all-colors: map-combine(
-  $_uc-all-colors,
-  $_uc-tri-use-palette,
-);
-
-$_uc-single-use-colors: (
-  'white': #fff,
-  'black': #000,
-  translucent: rgba(#000, 0.45),
-);
-
-$_uc-all-colors: map-combine(
-  $_uc-all-colors,
-  $_uc-single-use-colors,
-);
-

data/utility_colors/utility_colors_files/variables/_mod-variables.scss

@@ -1,53 +0,0 @@
-$_uc-screen-sizes: (
-  sm: 325px,
-  md: 768px,
-  lg: 1024px,
-  xl: 1440px,
-);
-
-$_uc-pseudo-input: (
-  checked,
-  disabled,
-  enabled,
-  focus,
-);
-
-$_uc-pseudo-input-extra: (
-  in-range,
-  invalid,
-  optional,
-  out-of-range,
-  read-only,
-  read-write,
-  require,
-  valid
-);
-
-$_uc-pseudo-action: (
-  active,
-  hover,
-  link,
-  target,
-  visited
-);
-
-$_uc-pseudo-child: (
-  root,
-  first-child,
-  first-of-type,
-  last-child,
-  last-of-type,
-  only-of-type,
-  only-child,
-  empty
-  // nth-child(n),
-  // nth-last-child(n),
-  // nth-last-of-type(n),
-  // nth-of-type(n),
-);
-
-$_uc-pseudos: list-combine(
-  $_uc-pseudo-input,
-  $_uc-pseudo-action,
-  $_uc-pseudo-child
-);

data/utility_colors/utility_colors_files/variables/_user-variables.scss

@@ -1,78 +0,0 @@
-// * User Color Palettes
-
-$_default_utility_colors: (
-  config: (
-    classes: true,
-    breakpoint: true,
-    pseudo: true,
-    defaults: true,
-    syntax: 'BEM',
-  ),
-  colors: (
-    shades-use: (
-
-    ),
-    tri-use: (
-
-    ),
-    single-use: (
-
-    ),
-  )
-);
-
-$_uc_user_utility_colors: ();
-$_uc_user_config: ();
-$_uc_user_colors: ();
-
-@if variable-exists(utility_colors) {
-  @if map.get($utility_colors, config) != null {
-    $_uc_user_config: map.merge(map.get($_default_utility_colors, config), map.get($utility_colors, config));
-    @if map.get($_uc_user_utility_colors, config, defaults) == false { $_uc-all-colors: (); }
-  } @else {
-    $_uc_user_config: map.get($_default_utility_colors, config);
-  }
-
-  @if map.get($utility_colors, colors) != null {
-    $_uc_user_colors: map.merge(map.get($_default_utility_colors, colors), map.get($utility_colors, colors));
-  } @else {
-    $_uc_user_colors: map.get($_default_utility_colors, colors);
-  }
-  
-  $_uc_user_utility_colors: (
-    config: $_uc_user_config,
-    colors: $_uc_user_colors,
-  );
-
-  @if map.get($_uc_user_utility_colors, colors, shades-use) != null {
-    $_uc-user-shades-use-colors: map.get($_uc_user_utility_colors, colors, shades-use);
-    $_uc-user-shades-use-palette: multi-color-shades-palette($_uc-user-shades-use-colors);
-
-    $_uc-all-colors: map-combine(
-      $_uc-all-colors,
-      $_uc-user-shades-use-colors,
-      $_uc-user-shades-use-palette,
-    );
-  }
-  
-  @if map.get($_uc_user_utility_colors, colors, tri-use) != null {
-    $_uc-user-tri-use-colors: map.get($_uc_user_utility_colors, colors, tri-use);
-    $_uc-user-tri-use-palette: multi-color-tri-palette($_uc-user-tri-use-colors);
-
-    $_uc-all-colors: map-combine(
-      $_uc-all-colors,
-      $_uc-user-tri-use-palette,
-    );
-  }
-
-  @if map.get($_uc_user_utility_colors, colors, single-use) != null {
-    $_uc-user-single-use-colors: map.get($_uc_user_utility_colors, colors, single-use);
-
-    $_uc-all-colors: map-combine(
-      $_uc-all-colors,
-      $_uc-user-single-use-colors,
-    );
-  }
-} @else {
-  $_uc_user_utility_colors: $_default_utility_colors;
-}

data/utility_colors/utility_colors_files/variables/_variables.scss

@@ -1,3 +0,0 @@
-@import 'mod-variables';
-@import 'color-variables';
-@import 'user-variables';