utility_colors 0.1.8

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 4aa8ad1559d7078464f2f5c7d0202bd5d6b9ee1e0618a8cc37bfd216cc0f9f2e
+  data.tar.gz: 53466d34894454a5b95f22d47b5e4f7a200dd7ba5e52bf8d4a21a0e0d898f40e
+SHA512:
+  metadata.gz: 12c2461a4cba263e3c031aec7d83f5f978ac9aa4652fc4cde2f91b3ae32fd9b88597a9f8907d6c91176fa94f9d6c28d08ca236d62d578cb273fa7d69bd7802c4
+  data.tar.gz: e061a29c8b2e256e396f8256fdf01e7c4849413b33c5adad9670d19a6b03fd5f0f2cd879e9dbfe5d1c170490575780d699952a0ec11fc698493b647b791cd75e

data/.npmignore

@@ -0,0 +1,28 @@
+.git/
+.github/
+app/
+bin/
+lib/
+spec/
+
+/node_modules/
+/node_modules/*
+
+.gitignore
+.ruby-version
+.rspec
+.rubocop.yml
+
+Gemfile
+Gemfile.lock
+
+DEPTH.md
+NOTES.md
+
+package-lock.json
+
+Rakefile
+
+*.tgz
+*.gem
+utility_colors.gemspec

data/.rspec

@@ -0,0 +1,3 @@
+--format documentation
+--color
+--require spec_helper

data/.rubocop.yml

@@ -0,0 +1,13 @@
+AllCops:
+  TargetRubyVersion: 2.6
+
+Style/StringLiterals:
+  Enabled: true
+  EnforcedStyle: double_quotes
+
+Style/StringLiteralsInInterpolation:
+  Enabled: true
+  EnforcedStyle: double_quotes
+
+Layout/LineLength:
+  Max: 120

data/CHANGELOG.md

@@ -0,0 +1,46 @@
+## [0.1.8] - 2022-08-20
+
+- Made utility_colors accessible as both a ruby gem and npm package
+- Added functions that create a linear, equally spaced and smooth shade palette based off any colour supplied regardless of it's hue, saturation, or lightness
+- Added ability to use default color palettes (shades & tri)
+- Added ability to create custom custom shade and tri palettes
+- Added creation of BEM style utility classes to use colour palette for styles; color, background-color, etc TODO
+  - classes that can be created include:
+    - basic styles `color--red-400`
+    - breakpoint style `md|color--red-400`
+    - pseudo-element styles `hover|color--red-400`
+    - pseudo-element breakpoint styles `hover|md|color--red-400`
+- Created function to get colour variable value based off the name of the colour `get-uc(red-400)`
+- Added configuration map to allow uses to:
+  - add custom colours to be used to create shade palettes, tri palettes, single use colours, and to overwrite the default colour options
+  - disable the creation of classes if they only want to utilize the colour palette variables created
+  - disable the creation of pseudo-element and pseudo-element breakpoint classes by setting a boolean
+  - disable the creation of breakpoint and pseudo-element breakpoint classes by setting a boolean
+  - disable the creation and use of any default colour classes or shades
+
+```scss
+$utility_colors: (
+  config: (
+    classes: BOOLEAN,
+    breakpoint: BOOLEAN,
+    pseudo: BOOLEAN,
+    defaults: BOOLEAN,
+  ),
+  colors: (
+    shades-use: (
+      'base-colour-A-name': hexcode,
+    ),
+    tri-use: (
+      'base-colour-B-name': hexcode,
+    ),
+    single-use: (
+      'base-colour-C-name': hexcode,
+    ),
+  )
+);
+```
+
+
+## [0.1.0] - 2022-08-13
+
+- Initial commits

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,84 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at louiswilliamdavis@gmail.com. All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior,  harassment of an individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0,
+available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.

data/Gemfile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+# Specify your gem's dependencies in utility_colors.gemspec
+gemspec
+
+gem "rake", "~> 13.0"
+
+gem "rspec", "~> 3.0"
+
+gem "rubocop", "~> 1.21"

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Louis W Davis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,174 @@
+# UtilityColors
+
+Utility Colors is a library built and centred around creating quick and effective colour palettes based off of any base colour and then utilizing them in a wide variety of BEM style modifier classes to be used in styling that can come into effect at varying screen sizes and element states.
+
+It's
+- pure sass
+- simple and easily usable right out of the box
+- configurable with the intent to become part of a larger utility class eco-system
+- easily swappable between the gem and package with minimal changes
+
+Firstly, yes the library is called Utility COLORS (for a wide range of reasons) but in this documentation, unless referencing something library specific I'll be spelling it 'colours'.
+
+
+## Installation
+
+### Yarn
+
+Add the package
+
+    $ yarn add utility_colors;
+
+Import the styles from your node_modules and add the **OPTIONAL** configuration map at the top of your scss file
+
+```scss
+$utility_colors: (
+  config: (
+    classes: BOOLEAN,
+    breakpoint: BOOLEAN,
+    pseudo: BOOLEAN,
+    defaults: BOOLEAN,
+  ),
+  colors: (
+    shades-use: (
+      'base-colour-A-name': value,
+      // and more colours
+    ),
+    tri-use: (
+      'base-colour-B-name': value,
+      // and more colours
+    ),
+    single-use: (
+      'base-colour-C-name': value,
+      // and more colours
+    ),
+  )
+);
+
+@import "utility_colors/utility_colors/utility_colors";
+```
+
+### Ruby
+
+**Please be aware there seem to be widespread issues with importing gem styles when using cssbundling so if you are using that you may want to use the package until this is resolved**
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'utility_colors'
+```
+
+And then execute:
+
+    $ bundle install
+
+Or install it yourself as:
+
+    $ gem install utility_colors
+
+Import the styles from the gem and add the **optional** configuration map at the top of your scss file
+
+```scss
+$utility_colors: (
+  config: (
+    classes: BOOLEAN,
+    breakpoint: BOOLEAN,
+    pseudo: BOOLEAN,
+    defaults: BOOLEAN,
+  ),
+  colors: (
+    shades-use: (
+      'base-colour-A-name': value,
+      // and more colours
+    ),
+    tri-use: (
+      'base-colour-B-name': value,
+      // and more colours
+    ),
+    single-use: (
+      'base-colour-C-name': value,
+      // and more colours
+    ),
+  )
+);
+
+@import "utility_colors";
+```
+
+## Examples
+
+![v0.1.8 Colour Palette Example](https://github.com/louiswdavis/utility_colors/blob/master/examples/v0.1.8.png)
+
+## Usage
+
+### Palettes & Classes
+
+After importing the UtilityColors stylesheet your styles will produce a large array of BEM classes that you can use to quickly modify the colour properties of your components. If you have a generic card class being used but in one place you want it to be red and another you want it to be light blue you can add the classes `.color--red` and `.color--blue-200` respectively to your html.
+
+Every default colour supplied by UtilityColors has a base, and a shades palette based off that base. These colours are all given keys which are then appended to the various classes available. The base colours key is simply it's name; 'red', 'blue'. The shade palette colours keys are the base colour they are based off, then appended with a '-' and then a value of **50, 100, 200, ..., 900**, where the large number indicates a darker colour. You may be familiar with this style of naming if you've used other style frameworks.
+
+Additionally to the default colours, UtilityColors also supplies a small collection of role colours based off the defaults; success (green), danger (red), information (blue), warning (gold). And each of these has a light and dark variation where the key is the colour role appended with either `-light` or `-dark`. These variations are referred to as the 'tri palette' (the base, the light, and the dark).
+
+Classes available:
+- change the color property: `.color--key`
+- change the background-color property: `.bg--key`
+- change the border-color property: `.border-c--key`
+- change the outline-color property: `.outline-c--key`
+- change the text-decoration-color property: `.decoration-c--key`
+
+where the key is the colour's 'name' i.e. `red` `green-100` `blue-900` `success-light` `danger-dark`
+
+### Advanced Classes
+
+As previously stated you can use basic UtilityColors classes to change the colours properties of your components but sometimes you may want to make adjustments only in select circumstances. One of these circumstances is the size of the screen, or more accurately the width of the screen. 
+
+You can turn any basic class into an advanced breakpoint class by prepending it with sm, md, lg, or xl followed by a '|' i.e. `.md|color--red` where 325px, 768px, 1024px, 1440px are the minimum screen width where the class will come into effect respectively. 
+Alongside breakpoint classes there are also pseudo-state classes which are advanced classes that can make a colour property come into effect a certain state or condition of an element if achieved. These follow the style of breakpoint where they must be prepended to the basic classes separated by a '|'  i.e. `.hover|color--red`. The pseudo properties currently applicable to these classes are; checked, disabled, enabled, focus, in-range, invalid, optional, out-of-range, read-only, read-write, require, valid, active, hover, link, target, visited, root, first-child, first-of-type, last-child, last-of-type, only-of-type, only-child, empty. 
+And if that wasn't enough you can also combine pseudo-state and breakpoint classes  i.e. `.hover|md|color--red`
+
+
+### Custom Configuration
+
+There are some optional configuration options you can tweak to reduce the number of classes or colours the library will produce for you. All the options listed above are true by default. If you don't want to produce any classes at all you can set `classes` to false. If you don't want to produce any breakpoint classes you can set `breakpoint` to false. This will also not produce the hybrid pseudo-state|breakpoint classes. If you don't want to produce any pseudo-state classes you can set `pseudo` to false. This will also not produce the hybrid pseudo-state|breakpoint classes. If you want to remove all the default colour and subsequent palettes right from the start you can set `defaults` to false.
+
+Obviously a default palette is nice, but it may not include the colours you want or the current named ones may not be based off your preferred variant of that colour (maybe you want your red palette to have a hint more orange to it). That is where the `colors` portion of the $utility_colors configuration variable comes in. 
+If you want to create a new palette or overwrite an existing one simply add the name you want to use for your colour as the key, and the hex, rgb, or hsl code related to it as the value. If you add this colour to the `shades-use` then a base colour and shades palette of colours will be produced and have corresponding classes created for them. 
+If you add this colour to the `tri-use` then a base colour and tri palette of colours will be produced and have corresponding classes created for them. 
+If you add this colour to the `single-use` then just the base colour will be used to create corresponding classes created for it. 
+Don't worry if you want to produce a shades and tri palette for a single base. Adding that colour to both sections will produce all the colours you want and the latter base colour will replace the former. This can also be useful if you want to make slight adjustments to shades or tri palettes as you can add the **full** colour name as a single-use key with the value you want to use and this will overwrite the corresponding matching key colour from any of the palettes.
+
+### Additional Usability
+
+There is also a scss function called `get-uc` that will retrieve the colours value from the various palettes so that it can be used in your later custom classes. It just requires the correct colour key to be called with the function i.e. `color: get-uc(red-400)`.
+
+## Palette Creation
+
+To achieve the shades or tri colour palettes, colours are created by incrementing and decrementing the lightness and saturation of a base colour to get the colours on either side of the base needed for the palettes. I have found this the most effective way of creating custom colour palettes compared to other generators as this method uses and retains your base colour as a part of the larger palette, unlike other generators which take your base and adjust it to suit the generators preferred colour style. This may work if you need to integrate various colours into a larger, pre-determined colour palette but often we are creating the colour palettes from scratch and with the requirement that our base colour be used in it.
+
+This also gives the added benefit that if you used one of the specific shade colour's as your key and provided a different colour value then it would use this new value in the palette and replace the previously created one. As the methods used to create the shade and tri palettes are the same, their outputs will overlap which means you don't have to worry about a extra large amount of classes. Tri colours are two 'steps' away from their base so a base colour `col` that produces that produces the colour `col-400` will mean `col-200` and `col-light` are the same, and `col-600` and `col-dark`. 
+This is just another way to keep palettes in sync and prevent palettes of the same base from becoming unlinked from one another. Be aware that if a colour is very dark or very light one of it's tri colours may only be one step away, or may not be created at all, corresponding to the amount of 'space' available on either side of the base to create the colour.
+
+## Future Development
+
+- add classes for the singular sides of borders and outlines
+- add config variables to disable the creation of certain classes i.e. color, background-color, etc
+- move the config variables to a config.js file as per the norm across many packages
+- make a page/partial/component that can be used to view the colour outputs
+  - first step is putting raw html in a file that can be copied and used
+  - second step is to make a page that can be added to routes
+  - further development of this would be to show accessibilty ratings and more in-depth information of the palettes
+- add the ability to output colour variables/palettes in the terminal to make them more accessible for users to see, check and export
+- validate the user variables added before they are used
+- create a site that will display the descriptions and examples of colours and classes produced by the library more effectively than this markdown file (this markdown is getting a little crowded already)
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/louiswdavis/utility_colors. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/louiswdavis/utility_colors/blob/master/CODE_OF_CONDUCT.md). I am not incredibly familiar with creating gems or packages so there may be things missing that seem obvious to others but are not to me.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Code of Conduct
+
+Everyone interacting in the UtilityColors project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/louiswdavis/utility_colors/blob/master/CODE_OF_CONDUCT.md).

data/Rakefile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+require "rubocop/rake_task"
+
+RuboCop::RakeTask.new
+
+task default: %i[spec rubocop]

data/index.js

@@ -0,0 +1,5 @@
+var path = require("path");
+
+module.exports = {
+  includePaths: [ path.join(__dirname, "utility_colors") ]
+};

data/lib/utility_colors/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module UtilityColors
+  VERSION = "0.1.8"
+end

data/lib/utility_colors.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require_relative "utility_colors/version"
+
+module UtilityColors
+  class Error < StandardError; end
+  # Your code goes here...
+end

data/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "utility_colors",
+  "version": "0.1.8",
+  "description": "The last tool you'll need to create color palettes and style your applications with them",
+  "keywords": [
+    "styles",
+    "styling",
+    "utility",
+    "sass",
+    "scss",
+    "color",
+    "colour"
+  ],
+  "homepage": "https://github.com/louiswdavis/utility_colors#readme",
+  "bugs": {
+    "url": "https://github.com/louiswdavis/utility_colors/issues"
+  },
+  "license": "MIT",
+  "author": "Louis Davis <LouisWilliamDavis@gmail.com> (https://twitter.com/louiswdavis_)",
+  "main": "index.js",
+  "style": "utility_colors/_utility_colors.scss",
+  "repository": "github:louiswdavis/utility_colors",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

data/utility_colors/_utility_colors.scss

@@ -0,0 +1,11 @@
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+
+@import 'utility_colors_files/validators/validations';
+@import 'utility_colors_files/functions/functions';
+@import 'utility_colors_files/variables/variables';
+@import 'utility_colors_files/mixins/mixins';
+@import 'utility_colors_files/utilities/color';

data/utility_colors/utility_colors_files/functions/_functions.scss

@@ -0,0 +1,4 @@
+@import 'mappings';
+@import 'references';
+@import 'sequences';
+@import 'palettes';

data/utility_colors/utility_colors_files/functions/_mappings.scss

@@ -0,0 +1,25 @@
+// a function to combine multiple mappings variables into a single map
+@function map-combine($maps...) {
+  $collection: ();
+
+  // map-merge combines two mappings together into a single map
+  // this new mapping is then recursively merged to the next mapping in the array
+  @each $mapping in $maps {
+    $collection: map-merge($collection, $mapping);
+  }
+
+  @return $collection;
+}
+
+// a function to combine multiple listings variables into a single list
+@function list-combine($lists...) {
+  $collection: ();
+
+  // list.join combines two listings together into a single list
+  // this new listing is then recursively merged to the next listings in the array
+  @each $listings in $lists {
+    $collection: join($collection, $listings);
+  }
+
+  @return $collection;
+}

data/utility_colors/utility_colors_files/functions/_palettes.scss

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

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

@@ -0,0 +1,17 @@
+$_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

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

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

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

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

@@ -0,0 +1,53 @@
+$_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

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

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

metadata

@@ -0,0 +1,73 @@
+--- !ruby/object:Gem::Specification
+name: utility_colors
+version: !ruby/object:Gem::Version
+  version: 0.1.8
+platform: ruby
+authors:
+- Louis W Davis
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2022-08-21 00:00:00.000000000 Z
+dependencies: []
+description: Creates all the color palettes classes you need from your colors
+email:
+- louiswilliamdavis@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".npmignore"
+- ".rspec"
+- ".rubocop.yml"
+- CHANGELOG.md
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- examples/v0.1.8.png
+- index.js
+- lib/utility_colors.rb
+- lib/utility_colors/version.rb
+- package.json
+- utility_colors/_utility_colors.scss
+- utility_colors/utility_colors_files/functions/_functions.scss
+- utility_colors/utility_colors_files/functions/_mappings.scss
+- utility_colors/utility_colors_files/functions/_palettes.scss
+- utility_colors/utility_colors_files/functions/_references.scss
+- utility_colors/utility_colors_files/functions/_sequences.scss
+- utility_colors/utility_colors_files/mixins/_mixins.scss
+- utility_colors/utility_colors_files/utilities/_color.scss
+- utility_colors/utility_colors_files/validators/_validations.scss
+- utility_colors/utility_colors_files/variables/_color-variables.scss
+- utility_colors/utility_colors_files/variables/_mod-variables.scss
+- utility_colors/utility_colors_files/variables/_user-variables.scss
+- utility_colors/utility_colors_files/variables/_variables.scss
+homepage: https://github.com/louiswdavis/utility_colors
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/louiswdavis/utility_colors
+  source_code_uri: https://github.com/louiswdavis/utility_colors
+  changelog_uri: https://github.com/louiswdavis/utility_colors/blob/master/CHANGELOG.md
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.3.7
+signing_key: 
+specification_version: 4
+summary: The last time to worry about color palette styles
+test_files: []