utility_colors 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 4aa8ad1559d7078464f2f5c7d0202bd5d6b9ee1e0618a8cc37bfd216cc0f9f2e
4
+ data.tar.gz: 53466d34894454a5b95f22d47b5e4f7a200dd7ba5e52bf8d4a21a0e0d898f40e
5
+ SHA512:
6
+ metadata.gz: 12c2461a4cba263e3c031aec7d83f5f978ac9aa4652fc4cde2f91b3ae32fd9b88597a9f8907d6c91176fa94f9d6c28d08ca236d62d578cb273fa7d69bd7802c4
7
+ data.tar.gz: e061a29c8b2e256e396f8256fdf01e7c4849413b33c5adad9670d19a6b03fd5f0f2cd879e9dbfe5d1c170490575780d699952a0ec11fc698493b647b791cd75e
data/.npmignore ADDED
@@ -0,0 +1,28 @@
1
+ .git/
2
+ .github/
3
+ app/
4
+ bin/
5
+ lib/
6
+ spec/
7
+
8
+ /node_modules/
9
+ /node_modules/*
10
+
11
+ .gitignore
12
+ .ruby-version
13
+ .rspec
14
+ .rubocop.yml
15
+
16
+ Gemfile
17
+ Gemfile.lock
18
+
19
+ DEPTH.md
20
+ NOTES.md
21
+
22
+ package-lock.json
23
+
24
+ Rakefile
25
+
26
+ *.tgz
27
+ *.gem
28
+ utility_colors.gemspec
data/.rspec ADDED
@@ -0,0 +1,3 @@
1
+ --format documentation
2
+ --color
3
+ --require spec_helper
data/.rubocop.yml ADDED
@@ -0,0 +1,13 @@
1
+ AllCops:
2
+ TargetRubyVersion: 2.6
3
+
4
+ Style/StringLiterals:
5
+ Enabled: true
6
+ EnforcedStyle: double_quotes
7
+
8
+ Style/StringLiteralsInInterpolation:
9
+ Enabled: true
10
+ EnforcedStyle: double_quotes
11
+
12
+ Layout/LineLength:
13
+ Max: 120
data/CHANGELOG.md ADDED
@@ -0,0 +1,46 @@
1
+ ## [0.1.8] - 2022-08-20
2
+
3
+ - Made utility_colors accessible as both a ruby gem and npm package
4
+ - 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
5
+ - Added ability to use default color palettes (shades & tri)
6
+ - Added ability to create custom custom shade and tri palettes
7
+ - Added creation of BEM style utility classes to use colour palette for styles; color, background-color, etc TODO
8
+ - classes that can be created include:
9
+ - basic styles `color--red-400`
10
+ - breakpoint style `md|color--red-400`
11
+ - pseudo-element styles `hover|color--red-400`
12
+ - pseudo-element breakpoint styles `hover|md|color--red-400`
13
+ - Created function to get colour variable value based off the name of the colour `get-uc(red-400)`
14
+ - Added configuration map to allow uses to:
15
+ - add custom colours to be used to create shade palettes, tri palettes, single use colours, and to overwrite the default colour options
16
+ - disable the creation of classes if they only want to utilize the colour palette variables created
17
+ - disable the creation of pseudo-element and pseudo-element breakpoint classes by setting a boolean
18
+ - disable the creation of breakpoint and pseudo-element breakpoint classes by setting a boolean
19
+ - disable the creation and use of any default colour classes or shades
20
+
21
+ ```scss
22
+ $utility_colors: (
23
+ config: (
24
+ classes: BOOLEAN,
25
+ breakpoint: BOOLEAN,
26
+ pseudo: BOOLEAN,
27
+ defaults: BOOLEAN,
28
+ ),
29
+ colors: (
30
+ shades-use: (
31
+ 'base-colour-A-name': hexcode,
32
+ ),
33
+ tri-use: (
34
+ 'base-colour-B-name': hexcode,
35
+ ),
36
+ single-use: (
37
+ 'base-colour-C-name': hexcode,
38
+ ),
39
+ )
40
+ );
41
+ ```
42
+
43
+
44
+ ## [0.1.0] - 2022-08-13
45
+
46
+ - Initial commits
@@ -0,0 +1,84 @@
1
+ # Contributor Covenant Code of Conduct
2
+
3
+ ## Our Pledge
4
+
5
+ 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.
6
+
7
+ We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
8
+
9
+ ## Our Standards
10
+
11
+ Examples of behavior that contributes to a positive environment for our community include:
12
+
13
+ * Demonstrating empathy and kindness toward other people
14
+ * Being respectful of differing opinions, viewpoints, and experiences
15
+ * Giving and gracefully accepting constructive feedback
16
+ * Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
17
+ * Focusing on what is best not just for us as individuals, but for the overall community
18
+
19
+ Examples of unacceptable behavior include:
20
+
21
+ * The use of sexualized language or imagery, and sexual attention or
22
+ advances of any kind
23
+ * Trolling, insulting or derogatory comments, and personal or political attacks
24
+ * Public or private harassment
25
+ * Publishing others' private information, such as a physical or email
26
+ address, without their explicit permission
27
+ * Other conduct which could reasonably be considered inappropriate in a
28
+ professional setting
29
+
30
+ ## Enforcement Responsibilities
31
+
32
+ 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.
33
+
34
+ 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.
35
+
36
+ ## Scope
37
+
38
+ 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.
39
+
40
+ ## Enforcement
41
+
42
+ 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.
43
+
44
+ All community leaders are obligated to respect the privacy and security of the reporter of any incident.
45
+
46
+ ## Enforcement Guidelines
47
+
48
+ Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:
49
+
50
+ ### 1. Correction
51
+
52
+ **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
53
+
54
+ **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.
55
+
56
+ ### 2. Warning
57
+
58
+ **Community Impact**: A violation through a single incident or series of actions.
59
+
60
+ **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.
61
+
62
+ ### 3. Temporary Ban
63
+
64
+ **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior.
65
+
66
+ **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.
67
+
68
+ ### 4. Permanent Ban
69
+
70
+ **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.
71
+
72
+ **Consequence**: A permanent ban from any sort of public interaction within the community.
73
+
74
+ ## Attribution
75
+
76
+ This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0,
77
+ available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
78
+
79
+ Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
80
+
81
+ [homepage]: https://www.contributor-covenant.org
82
+
83
+ For answers to common questions about this code of conduct, see the FAQ at
84
+ https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
data/Gemfile ADDED
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ source "https://rubygems.org"
4
+
5
+ # Specify your gem's dependencies in utility_colors.gemspec
6
+ gemspec
7
+
8
+ gem "rake", "~> 13.0"
9
+
10
+ gem "rspec", "~> 3.0"
11
+
12
+ gem "rubocop", "~> 1.21"
data/LICENSE.txt ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2022 Louis W Davis
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,174 @@
1
+ # UtilityColors
2
+
3
+ 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.
4
+
5
+ It's
6
+ - pure sass
7
+ - simple and easily usable right out of the box
8
+ - configurable with the intent to become part of a larger utility class eco-system
9
+ - easily swappable between the gem and package with minimal changes
10
+
11
+ 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'.
12
+
13
+
14
+ ## Installation
15
+
16
+ ### Yarn
17
+
18
+ Add the package
19
+
20
+ $ yarn add utility_colors;
21
+
22
+ Import the styles from your node_modules and add the **OPTIONAL** configuration map at the top of your scss file
23
+
24
+ ```scss
25
+ $utility_colors: (
26
+ config: (
27
+ classes: BOOLEAN,
28
+ breakpoint: BOOLEAN,
29
+ pseudo: BOOLEAN,
30
+ defaults: BOOLEAN,
31
+ ),
32
+ colors: (
33
+ shades-use: (
34
+ 'base-colour-A-name': value,
35
+ // and more colours
36
+ ),
37
+ tri-use: (
38
+ 'base-colour-B-name': value,
39
+ // and more colours
40
+ ),
41
+ single-use: (
42
+ 'base-colour-C-name': value,
43
+ // and more colours
44
+ ),
45
+ )
46
+ );
47
+
48
+ @import "utility_colors/utility_colors/utility_colors";
49
+ ```
50
+
51
+ ### Ruby
52
+
53
+ **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**
54
+
55
+ Add this line to your application's Gemfile:
56
+
57
+ ```ruby
58
+ gem 'utility_colors'
59
+ ```
60
+
61
+ And then execute:
62
+
63
+ $ bundle install
64
+
65
+ Or install it yourself as:
66
+
67
+ $ gem install utility_colors
68
+
69
+ Import the styles from the gem and add the **optional** configuration map at the top of your scss file
70
+
71
+ ```scss
72
+ $utility_colors: (
73
+ config: (
74
+ classes: BOOLEAN,
75
+ breakpoint: BOOLEAN,
76
+ pseudo: BOOLEAN,
77
+ defaults: BOOLEAN,
78
+ ),
79
+ colors: (
80
+ shades-use: (
81
+ 'base-colour-A-name': value,
82
+ // and more colours
83
+ ),
84
+ tri-use: (
85
+ 'base-colour-B-name': value,
86
+ // and more colours
87
+ ),
88
+ single-use: (
89
+ 'base-colour-C-name': value,
90
+ // and more colours
91
+ ),
92
+ )
93
+ );
94
+
95
+ @import "utility_colors";
96
+ ```
97
+
98
+ ## Examples
99
+
100
+ ![v0.1.8 Colour Palette Example](https://github.com/louiswdavis/utility_colors/blob/master/examples/v0.1.8.png)
101
+
102
+ ## Usage
103
+
104
+ ### Palettes & Classes
105
+
106
+ 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.
107
+
108
+ 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.
109
+
110
+ 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).
111
+
112
+ Classes available:
113
+ - change the color property: `.color--key`
114
+ - change the background-color property: `.bg--key`
115
+ - change the border-color property: `.border-c--key`
116
+ - change the outline-color property: `.outline-c--key`
117
+ - change the text-decoration-color property: `.decoration-c--key`
118
+
119
+ where the key is the colour's 'name' i.e. `red` `green-100` `blue-900` `success-light` `danger-dark`
120
+
121
+ ### Advanced Classes
122
+
123
+ 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.
124
+
125
+ 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.
126
+ 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.
127
+ And if that wasn't enough you can also combine pseudo-state and breakpoint classes i.e. `.hover|md|color--red`
128
+
129
+
130
+ ### Custom Configuration
131
+
132
+ 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.
133
+
134
+ 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.
135
+ 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.
136
+ 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.
137
+ If you add this colour to the `single-use` then just the base colour will be used to create corresponding classes created for it.
138
+ 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.
139
+
140
+ ### Additional Usability
141
+
142
+ 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)`.
143
+
144
+ ## Palette Creation
145
+
146
+ 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.
147
+
148
+ 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`.
149
+ 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.
150
+
151
+ ## Future Development
152
+
153
+ - add classes for the singular sides of borders and outlines
154
+ - add config variables to disable the creation of certain classes i.e. color, background-color, etc
155
+ - move the config variables to a config.js file as per the norm across many packages
156
+ - make a page/partial/component that can be used to view the colour outputs
157
+ - first step is putting raw html in a file that can be copied and used
158
+ - second step is to make a page that can be added to routes
159
+ - further development of this would be to show accessibilty ratings and more in-depth information of the palettes
160
+ - add the ability to output colour variables/palettes in the terminal to make them more accessible for users to see, check and export
161
+ - validate the user variables added before they are used
162
+ - 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)
163
+
164
+ ## Contributing
165
+
166
+ 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.
167
+
168
+ ## License
169
+
170
+ The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
171
+
172
+ ## Code of Conduct
173
+
174
+ 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 ADDED
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "bundler/gem_tasks"
4
+ require "rspec/core/rake_task"
5
+
6
+ RSpec::Core::RakeTask.new(:spec)
7
+
8
+ require "rubocop/rake_task"
9
+
10
+ RuboCop::RakeTask.new
11
+
12
+ task default: %i[spec rubocop]
Binary file
data/index.js ADDED
@@ -0,0 +1,5 @@
1
+ var path = require("path");
2
+
3
+ module.exports = {
4
+ includePaths: [ path.join(__dirname, "utility_colors") ]
5
+ };
@@ -0,0 +1,5 @@
1
+ # frozen_string_literal: true
2
+
3
+ module UtilityColors
4
+ VERSION = "0.1.8"
5
+ end
@@ -0,0 +1,8 @@
1
+ # frozen_string_literal: true
2
+
3
+ require_relative "utility_colors/version"
4
+
5
+ module UtilityColors
6
+ class Error < StandardError; end
7
+ # Your code goes here...
8
+ end
data/package.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "utility_colors",
3
+ "version": "0.1.8",
4
+ "description": "The last tool you'll need to create color palettes and style your applications with them",
5
+ "keywords": [
6
+ "styles",
7
+ "styling",
8
+ "utility",
9
+ "sass",
10
+ "scss",
11
+ "color",
12
+ "colour"
13
+ ],
14
+ "homepage": "https://github.com/louiswdavis/utility_colors#readme",
15
+ "bugs": {
16
+ "url": "https://github.com/louiswdavis/utility_colors/issues"
17
+ },
18
+ "license": "MIT",
19
+ "author": "Louis Davis <LouisWilliamDavis@gmail.com> (https://twitter.com/louiswdavis_)",
20
+ "main": "index.js",
21
+ "style": "utility_colors/_utility_colors.scss",
22
+ "repository": "github:louiswdavis/utility_colors",
23
+ "scripts": {
24
+ "test": "echo \"Error: no test specified\" && exit 1"
25
+ }
26
+ }
@@ -0,0 +1,11 @@
1
+ @use "sass:color";
2
+ @use "sass:list";
3
+ @use "sass:map";
4
+ @use "sass:math";
5
+ @use "sass:meta";
6
+
7
+ @import 'utility_colors_files/validators/validations';
8
+ @import 'utility_colors_files/functions/functions';
9
+ @import 'utility_colors_files/variables/variables';
10
+ @import 'utility_colors_files/mixins/mixins';
11
+ @import 'utility_colors_files/utilities/color';
@@ -0,0 +1,4 @@
1
+ @import 'mappings';
2
+ @import 'references';
3
+ @import 'sequences';
4
+ @import 'palettes';
@@ -0,0 +1,25 @@
1
+ // a function to combine multiple mappings variables into a single map
2
+ @function map-combine($maps...) {
3
+ $collection: ();
4
+
5
+ // map-merge combines two mappings together into a single map
6
+ // this new mapping is then recursively merged to the next mapping in the array
7
+ @each $mapping in $maps {
8
+ $collection: map-merge($collection, $mapping);
9
+ }
10
+
11
+ @return $collection;
12
+ }
13
+
14
+ // a function to combine multiple listings variables into a single list
15
+ @function list-combine($lists...) {
16
+ $collection: ();
17
+
18
+ // list.join combines two listings together into a single list
19
+ // this new listing is then recursively merged to the next listings in the array
20
+ @each $listings in $lists {
21
+ $collection: join($collection, $listings);
22
+ }
23
+
24
+ @return $collection;
25
+ }
@@ -0,0 +1,123 @@
1
+ // * Palettes
2
+
3
+ // ? Single Colour's Palette
4
+ // a function to create a colour shade palette based off a single color input
5
+ @function single-color-shades-palette($key, $base_color) {
6
+ $single-color-palette: ();
7
+
8
+ // colours are index inversely to their lightness
9
+ $base-palette-index: palette-index($base_color);
10
+ $single-color-palette: map-merge($single-color-palette, (#{palette-reference($key, $base_color, $base-palette-index)}: $base_color));
11
+
12
+ // Lighter colours
13
+ // calc the space available to create lightened colours based off the base colour
14
+ @if $base-palette-index > 0 {
15
+ @for $i from 1 through $base-palette-index {
16
+ $col: color-step($base_color, $i, true);
17
+ $single-color-palette: map-merge($single-color-palette, (#{palette-reference($key, $col, $base-palette-index - $i)}: $col));
18
+ }
19
+ }
20
+
21
+ // Darker colours
22
+ // calc the space available to create darkened colours based off the base colour
23
+ @if $base-palette-index < 9 {
24
+ @for $i from 1 through 9 - $base-palette-index {
25
+ $col: color-step($base_color, $i, false);
26
+ $single-color-palette: map-merge($single-color-palette, (#{palette-reference($key, $col, $base-palette-index + $i)}: $col));
27
+ }
28
+ }
29
+
30
+ @return $single-color-palette;
31
+ }
32
+
33
+
34
+ // ? How to Calculate the next colour in the Palette
35
+ @function color-step($color, $step, $lighter) {
36
+ $color: hsl_sequence($color, $step, $lighter);
37
+
38
+ @return $color;
39
+ }
40
+
41
+ @function palette-reference($key, $color, $index) {
42
+ $reference: '';
43
+
44
+ @if $index == 0 {
45
+ $reference: #{$key + '-50'};
46
+ } @else {
47
+ $reference: #{$key + '-' + calc($index) + '00'};
48
+ }
49
+
50
+ @return $reference;
51
+ }
52
+
53
+
54
+ // ? Single Colour's Trio Palette
55
+ // a function to create a trio shade palette based off a single color input
56
+ @function single-color-tri-palette($key, $base_color) {
57
+ $single-color-trio: ();
58
+
59
+ $base-palette-index: palette-index($base_color);
60
+ $single-color-trio: map-merge($single-color-trio, (#{$key}: $base_color));
61
+
62
+ // Lighter colour
63
+ @if $base-palette-index > 1 {
64
+ $col: color-step($base_color, 2, true);
65
+ $single-color-trio: map-merge($single-color-trio, (#{$key + '-light'}: $col));
66
+ } @else if $base-palette-index > 0 {
67
+ $col: color-step($base_color, 1, true);
68
+ $single-color-trio: map-merge($single-color-trio, (#{$key + '-light'}: $col));
69
+ } @else {
70
+ $single-color-trio: map-merge($single-color-trio, (#{$key + '-light'}: null))
71
+ }
72
+
73
+ // Darker colour
74
+ @if $base-palette-index < 8 {
75
+ $col: color-step($base_color, 2, false);
76
+ $single-color-trio: map-merge($single-color-trio, (#{$key + '-dark'}: $col));
77
+ } @else if $base-palette-index < 9 {
78
+ $col: color-step($base_color, 1, false);
79
+ $single-color-trio: map-merge($single-color-trio, (#{$key + '-dark'}: $col));
80
+ } @else {
81
+ $single-color-trio: map-merge($single-color-trio, (#{$key + '-dark'}: null))
82
+ }
83
+
84
+ @return $single-color-trio;
85
+ }
86
+
87
+
88
+
89
+ // ? Multiple Colours
90
+
91
+ // ? Multiple Colour's Palette
92
+ // a function to loop through a map of colours and create shade palettes for them all and collect this into a single map
93
+
94
+ @function multi-color-shades-palette($color-map) {
95
+ $multi-color-palette: ();
96
+
97
+ @each $key, $base_color in $color-map {
98
+ // create a palette for a single colour from the providing mapping
99
+ $new-palette: single-color-shades-palette($key, $base_color);
100
+
101
+ // merge the colours shade palette into the collective mapping
102
+ $multi-color-palette: map-merge($multi-color-palette, $new-palette);
103
+ }
104
+
105
+ @return $multi-color-palette;
106
+ }
107
+
108
+ // ? Multiple Colour's Trio Palette
109
+ // a function to loop through a map of colours and create trio shade palettes for them all and collect this into a single map
110
+
111
+ @function multi-color-tri-palette($color-map) {
112
+ $multi-color-trio: ();
113
+
114
+ @each $key, $base_color in $color-map {
115
+ // create a palette for a single colour from the providing mapping
116
+ $new-trio: single-color-tri-palette($key, $base_color);
117
+
118
+ // merge the colours shade palette into the collective mapping
119
+ $multi-color-trio: map-merge($multi-color-trio, $new-trio);
120
+ }
121
+
122
+ @return $multi-color-trio;
123
+ }
@@ -0,0 +1,7 @@
1
+ @function light-index($color) {
2
+ @return math.floor(math.div(lightness($color), 10%));
3
+ }
4
+
5
+ @function palette-index($color) {
6
+ @return 9 - light-index($color);
7
+ }
@@ -0,0 +1,17 @@
1
+ $_uc-brightness-step: 9%;
2
+ $_uc-saturation-step: 2%;
3
+
4
+ // ? HSL Sequence
5
+ // Equally spaces colours from 50, 100 to 900 by only adjusting saturation and lightness
6
+
7
+ @function hsl_sequence($color, $step, $lighter) {
8
+ @if $lighter {
9
+ $color: lighten($color, $step * $_uc-brightness-step);
10
+ $color: desaturate($color, $step * $_uc-saturation-step);
11
+ } @else {
12
+ $color: darken($color, $step * $_uc-brightness-step);
13
+ $color: saturate($color, $step * $_uc-saturation-step);
14
+ }
15
+
16
+ @return $color;
17
+ }
@@ -0,0 +1,60 @@
1
+ // * Advanced Classes
2
+
3
+ @mixin breakpoint-up($size) {
4
+ @media only screen and (min-width: #{$size - 1}) {
5
+ @content;
6
+ }
7
+ }
8
+
9
+ // 'md|color--red-400'
10
+ // 'hover|color--red-400'
11
+ // 'hover|md|color--red-400'
12
+
13
+ @mixin advanced-classes($class) {
14
+ .#{$class} {
15
+ @content;
16
+ }
17
+
18
+ @if map.get($_uc_user_utility_colors, config, breakpoint) == true and map.get($_uc_user_utility_colors, config, pseudo) == true {
19
+ @each $initial, $screen-size in $_uc-screen-sizes {
20
+ @each $pseudo in $_uc-pseudos {
21
+ .#{$pseudo}\|#{$initial}\|#{$class}:#{$pseudo} {
22
+ @include breakpoint-up($screen-size) {
23
+ @content;
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
29
+
30
+ @if map.get($_uc_user_utility_colors, config, breakpoint) == true {
31
+ @each $initial, $screen-size in $_uc-screen-sizes {
32
+ .#{$initial}\|#{$class} {
33
+ @include breakpoint-up($screen-size) {
34
+ @content;
35
+ }
36
+ }
37
+ }
38
+ }
39
+
40
+ @if map.get($_uc_user_utility_colors, config, pseudo) == true {
41
+ @each $pseudo in $_uc-pseudos {
42
+ .#{$pseudo}\|#{$class}:#{$pseudo} {
43
+ @content;
44
+ }
45
+ }
46
+ }
47
+ }
48
+
49
+
50
+ // ? Map Classes
51
+
52
+ // -|sm|md|lg|xl
53
+ // @include map-simple-classes($map, "class", "style");
54
+ @mixin map-simple-classes($map, $class-prop, $style-prop) {
55
+ @each $key, $var in $map {
56
+ @include advanced-classes("#{$class-prop}--#{$key}") {
57
+ #{$style-prop}: $var
58
+ }
59
+ }
60
+ }
@@ -0,0 +1,22 @@
1
+ // * Colors
2
+
3
+ @if map.get($_uc_user_utility_colors, config, classes) {
4
+ @include advanced-classes("color--current") { color: currentColor; }
5
+
6
+ // ? Colors
7
+ @include map-simple-classes($_uc-all-colors, "color", "color"); // .color--red-100
8
+
9
+ // ? Background Colors
10
+ @include map-simple-classes($_uc-all-colors, "bg", "background-color"); // .bg--red-100
11
+
12
+ // ? Border Colors
13
+ @include map-simple-classes($_uc-all-colors, "border-c", "border-color"); // .border-c--red-100
14
+
15
+ // ? Outline Colors
16
+ @include map-simple-classes($_uc-all-colors, "outline-c", "outline-color"); // .outline-c--red-100
17
+
18
+ // ? Text Decoration Colors
19
+ @include map-simple-classes($_uc-all-colors, "decoration-c", "text-decoration-color"); // .decoration-c--red-100
20
+ }
21
+
22
+
@@ -0,0 +1,3 @@
1
+ // @if variable-exists("utility_colors") == false {
2
+ // @warn 'Without the utility colors you may forget about future configuration';
3
+ // }
@@ -0,0 +1,64 @@
1
+ // * Color Palettes
2
+
3
+ $_uc-shades-use-colors: (
4
+ 'red': hsl(2, 78%, 64%),
5
+ 'rust': hsl(16, 82%, 62%),
6
+ 'orange': hsl(31, 90%, 65%),
7
+ 'gold': hsl(46, 93%, 54%),
8
+ 'yellow': hsl(58, 87%, 55%),
9
+ 'pear': hsl(80, 74%, 57%),
10
+ 'green': hsl(110, 69%, 58%),
11
+ 'seaside': hsl(156, 78%, 57%),
12
+ 'cyan': hsl(180, 69%, 37%),
13
+ 'capri': hsl(197, 90%, 46%),
14
+ 'blue': hsl(214, 78%, 36%),
15
+ 'iris': hsl(265, 87%, 57%),
16
+ 'purple': hsl(279, 85%, 56%),
17
+ 'magenta': hsl(300, 64%, 66%),
18
+ 'pink': hsl(320, 74%, 66%),
19
+ 'satin': hsl(348, 74%, 57%),
20
+ 'cement': hsl(42, 6%, 87%),
21
+ 'grey': hsl(0, 3%, 46%),
22
+ 'base': hsl(0, 3%, 46%),
23
+ );
24
+
25
+ $_uc-shades-use-palette: multi-color-shades-palette($_uc-shades-use-colors);
26
+
27
+ $_uc-all-colors: map-combine(
28
+ $_uc-shades-use-colors,
29
+ $_uc-shades-use-palette,
30
+ );
31
+
32
+ @function get-uc($color-name) {
33
+ @if map-has-key($_uc-all-colors, #{$color-name}) {
34
+ @return map.get($_uc-all-colors, #{$color-name});
35
+ } @else {
36
+ @error "ERROR: Couldn't find Color";
37
+ }
38
+ };
39
+
40
+ $_uc-tri-use-colors: (
41
+ success: get-uc(green-400),
42
+ danger: get-uc(red-400),
43
+ information: get-uc(blue-400),
44
+ warning: get-uc(gold-400),
45
+ );
46
+
47
+ $_uc-tri-use-palette: multi-color-tri-palette($_uc-tri-use-colors);
48
+
49
+ $_uc-all-colors: map-combine(
50
+ $_uc-all-colors,
51
+ $_uc-tri-use-palette,
52
+ );
53
+
54
+ $_uc-single-use-colors: (
55
+ 'white': #fff,
56
+ 'black': #000,
57
+ translucent: rgba(#000, 0.45),
58
+ );
59
+
60
+ $_uc-all-colors: map-combine(
61
+ $_uc-all-colors,
62
+ $_uc-single-use-colors,
63
+ );
64
+
@@ -0,0 +1,53 @@
1
+ $_uc-screen-sizes: (
2
+ sm: 325px,
3
+ md: 768px,
4
+ lg: 1024px,
5
+ xl: 1440px,
6
+ );
7
+
8
+ $_uc-pseudo-input: (
9
+ checked,
10
+ disabled,
11
+ enabled,
12
+ focus,
13
+ );
14
+
15
+ $_uc-pseudo-input-extra: (
16
+ in-range,
17
+ invalid,
18
+ optional,
19
+ out-of-range,
20
+ read-only,
21
+ read-write,
22
+ require,
23
+ valid
24
+ );
25
+
26
+ $_uc-pseudo-action: (
27
+ active,
28
+ hover,
29
+ link,
30
+ target,
31
+ visited
32
+ );
33
+
34
+ $_uc-pseudo-child: (
35
+ root,
36
+ first-child,
37
+ first-of-type,
38
+ last-child,
39
+ last-of-type,
40
+ only-of-type,
41
+ only-child,
42
+ empty
43
+ // nth-child(n),
44
+ // nth-last-child(n),
45
+ // nth-last-of-type(n),
46
+ // nth-of-type(n),
47
+ );
48
+
49
+ $_uc-pseudos: list-combine(
50
+ $_uc-pseudo-input,
51
+ $_uc-pseudo-action,
52
+ $_uc-pseudo-child
53
+ );
@@ -0,0 +1,78 @@
1
+ // * User Color Palettes
2
+
3
+ $_default_utility_colors: (
4
+ config: (
5
+ classes: true,
6
+ breakpoint: true,
7
+ pseudo: true,
8
+ defaults: true,
9
+ syntax: 'BEM',
10
+ ),
11
+ colors: (
12
+ shades-use: (
13
+
14
+ ),
15
+ tri-use: (
16
+
17
+ ),
18
+ single-use: (
19
+
20
+ ),
21
+ )
22
+ );
23
+
24
+ $_uc_user_utility_colors: ();
25
+ $_uc_user_config: ();
26
+ $_uc_user_colors: ();
27
+
28
+ @if variable-exists(utility_colors) {
29
+ @if map.get($utility_colors, config) != null {
30
+ $_uc_user_config: map.merge(map.get($_default_utility_colors, config), map.get($utility_colors, config));
31
+ @if map.get($_uc_user_utility_colors, config, defaults) == false { $_uc-all-colors: (); }
32
+ } @else {
33
+ $_uc_user_config: map.get($_default_utility_colors, config);
34
+ }
35
+
36
+ @if map.get($utility_colors, colors) != null {
37
+ $_uc_user_colors: map.merge(map.get($_default_utility_colors, colors), map.get($utility_colors, colors));
38
+ } @else {
39
+ $_uc_user_colors: map.get($_default_utility_colors, colors);
40
+ }
41
+
42
+ $_uc_user_utility_colors: (
43
+ config: $_uc_user_config,
44
+ colors: $_uc_user_colors,
45
+ );
46
+
47
+ @if map.get($_uc_user_utility_colors, colors, shades-use) != null {
48
+ $_uc-user-shades-use-colors: map.get($_uc_user_utility_colors, colors, shades-use);
49
+ $_uc-user-shades-use-palette: multi-color-shades-palette($_uc-user-shades-use-colors);
50
+
51
+ $_uc-all-colors: map-combine(
52
+ $_uc-all-colors,
53
+ $_uc-user-shades-use-colors,
54
+ $_uc-user-shades-use-palette,
55
+ );
56
+ }
57
+
58
+ @if map.get($_uc_user_utility_colors, colors, tri-use) != null {
59
+ $_uc-user-tri-use-colors: map.get($_uc_user_utility_colors, colors, tri-use);
60
+ $_uc-user-tri-use-palette: multi-color-tri-palette($_uc-user-tri-use-colors);
61
+
62
+ $_uc-all-colors: map-combine(
63
+ $_uc-all-colors,
64
+ $_uc-user-tri-use-palette,
65
+ );
66
+ }
67
+
68
+ @if map.get($_uc_user_utility_colors, colors, single-use) != null {
69
+ $_uc-user-single-use-colors: map.get($_uc_user_utility_colors, colors, single-use);
70
+
71
+ $_uc-all-colors: map-combine(
72
+ $_uc-all-colors,
73
+ $_uc-user-single-use-colors,
74
+ );
75
+ }
76
+ } @else {
77
+ $_uc_user_utility_colors: $_default_utility_colors;
78
+ }
@@ -0,0 +1,3 @@
1
+ @import 'mod-variables';
2
+ @import 'color-variables';
3
+ @import 'user-variables';
metadata ADDED
@@ -0,0 +1,73 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: utility_colors
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.8
5
+ platform: ruby
6
+ authors:
7
+ - Louis W Davis
8
+ autorequire:
9
+ bindir: exe
10
+ cert_chain: []
11
+ date: 2022-08-21 00:00:00.000000000 Z
12
+ dependencies: []
13
+ description: Creates all the color palettes classes you need from your colors
14
+ email:
15
+ - louiswilliamdavis@gmail.com
16
+ executables: []
17
+ extensions: []
18
+ extra_rdoc_files: []
19
+ files:
20
+ - ".npmignore"
21
+ - ".rspec"
22
+ - ".rubocop.yml"
23
+ - CHANGELOG.md
24
+ - CODE_OF_CONDUCT.md
25
+ - Gemfile
26
+ - LICENSE.txt
27
+ - README.md
28
+ - Rakefile
29
+ - examples/v0.1.8.png
30
+ - index.js
31
+ - lib/utility_colors.rb
32
+ - lib/utility_colors/version.rb
33
+ - package.json
34
+ - utility_colors/_utility_colors.scss
35
+ - utility_colors/utility_colors_files/functions/_functions.scss
36
+ - utility_colors/utility_colors_files/functions/_mappings.scss
37
+ - utility_colors/utility_colors_files/functions/_palettes.scss
38
+ - utility_colors/utility_colors_files/functions/_references.scss
39
+ - utility_colors/utility_colors_files/functions/_sequences.scss
40
+ - utility_colors/utility_colors_files/mixins/_mixins.scss
41
+ - utility_colors/utility_colors_files/utilities/_color.scss
42
+ - utility_colors/utility_colors_files/validators/_validations.scss
43
+ - utility_colors/utility_colors_files/variables/_color-variables.scss
44
+ - utility_colors/utility_colors_files/variables/_mod-variables.scss
45
+ - utility_colors/utility_colors_files/variables/_user-variables.scss
46
+ - utility_colors/utility_colors_files/variables/_variables.scss
47
+ homepage: https://github.com/louiswdavis/utility_colors
48
+ licenses:
49
+ - MIT
50
+ metadata:
51
+ homepage_uri: https://github.com/louiswdavis/utility_colors
52
+ source_code_uri: https://github.com/louiswdavis/utility_colors
53
+ changelog_uri: https://github.com/louiswdavis/utility_colors/blob/master/CHANGELOG.md
54
+ post_install_message:
55
+ rdoc_options: []
56
+ require_paths:
57
+ - lib
58
+ required_ruby_version: !ruby/object:Gem::Requirement
59
+ requirements:
60
+ - - ">="
61
+ - !ruby/object:Gem::Version
62
+ version: '0'
63
+ required_rubygems_version: !ruby/object:Gem::Requirement
64
+ requirements:
65
+ - - ">="
66
+ - !ruby/object:Gem::Version
67
+ version: '0'
68
+ requirements: []
69
+ rubygems_version: 3.3.7
70
+ signing_key:
71
+ specification_version: 4
72
+ summary: The last time to worry about color palette styles
73
+ test_files: []