utility_colors 0.1.8 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4aa8ad1559d7078464f2f5c7d0202bd5d6b9ee1e0618a8cc37bfd216cc0f9f2e
-  data.tar.gz: 53466d34894454a5b95f22d47b5e4f7a200dd7ba5e52bf8d4a21a0e0d898f40e
+  metadata.gz: 7bcb54e43ef56335b61de7c5657477471310d42b4c7150821d874e35cc48af36
+  data.tar.gz: b45099cb134d67fb04898daf013d78a1908d970c63950220e6fc9368eca4653c
 SHA512:
-  metadata.gz: 12c2461a4cba263e3c031aec7d83f5f978ac9aa4652fc4cde2f91b3ae32fd9b88597a9f8907d6c91176fa94f9d6c28d08ca236d62d578cb273fa7d69bd7802c4
-  data.tar.gz: e061a29c8b2e256e396f8256fdf01e7c4849413b33c5adad9670d19a6b03fd5f0f2cd879e9dbfe5d1c170490575780d699952a0ec11fc698493b647b791cd75e
+  metadata.gz: ad703fe0a83d64355550e011eed509101935794f3954e20c8d4bca8b5556ab86f41d6ba0777e021f6afd447c2c5d03b1ba6c3341155a0c8289472b840b38a4d8
+  data.tar.gz: 5ac4ff72a529536744477e3317578c0001f5bb76181aa2618183d984db22900b26f0c5c611124d9ac82d6fcadfff4165227a495cd7a65529376c6c1cec39a155

data/README.md

@@ -1,174 +1,131 @@
-# 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).
+# UtilityColors
+
+![Static Badge](https://img.shields.io/badge/Gem_Version-1.0.0-blue)
+[![Static Badge](https://img.shields.io/badge/RubyGems-red)](https://rubygems.org/gems/utility_colors)
+
+> Generate your own colour specific classes in an instance.
+
+Utility Colors is an ruby gem package for use in ruby or other projects that generates styling classes based on your supplied colours.
+It can take your SCSS or CSS variable, or even a JSON file of them, and provide you with all the classes you need for adding colour to your HTML.
+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.
+
+## Installation
+
+Install the gem and add to the application's Gemfile by executing:
+
+```bash
+bundle add utility_colors
+```
+
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+```bash
+gem install utility_colors
+```
+
+## Usage
+
+To get the config:
+
+```bash
+rails generate utility_colors:config
+```
+
+To generate the colour classes:
+
+```bash
+rails generate utility_colors:generate
+```
+
+## Configuration
+
+>[!WARNING]
+> UtilityColors has moved to a Ruby Config file from v1.0.0.
+> The Pure SCSS version of the gem and JS package are still fully usable and [the documentation can be found here](README_v0.1.8.md).
+> Run `rails generate utility_colors:config` to get the new config and move your values across.
+> The `colors` section of the config is now a part of [UtilityPalettes](https://github.com/louiswdavis/utility_palettes)
+
+### Environment
+
+Set the environment that the sub-data will be read in, meaning that the palette generator can only be run in certain environments.
+
+| Option               | Default        | Value Type | Possible Values        |
+| :------------------- | :------------: | :--------: | :--------------------: |
+| enable_environments  | [:development] | Array      | <any Rails.env symbol> |
+
+### Import
+
+The location of the palette file that you will use to build your colour classes.
+Examples can be found for [SCSS](spec/fixtures/imports.palette.scss), [CSS](spec/fixtures/imports.palette.css), or [JSON](spec/fixtures/imports.palette.json) files, and this is how [UtilityPalettes](https://github.com/louiswdavis/utility_palettes) would be exported.
+
+| Option                   | Default                 | Value Type | Possible Values       |
+| :----------------        | :---------------------: | :--------: | :-------------------: |
+| import_palettes_filepath | 'utility_palettes.scss' | String     | <any filepath string> |
+
+### Output
+
+How the output file and values should be written:
+
+| Option         | Description                                                                       | Default          | Value Type | Possible Values       |
+| :------------  | :-------------------------------------------------------------------------------- | :--------------: | :--------: | :-------------------: |
+| ouput_filename | Where the file should be output to including filename, without the file extension | 'utility_colors' | String     | <any filepath string> |
+| ouput_dated    | Should a timestamp be included in the filenames                                   | false            | Boolean    | true / false          |
+| ouput_files    | The types of files the palette should be output in                                | ['scss']         | Array      | json, scss, css       |
+| ouput_prefix   | A string that is appended to the start of all class names, i.e. 'uc-'             | nil              | String     | <any string>          |
+| ouput_suffix   | A string that is appended to the end of all class names, i.e. '-custom'           | nil              | String     | <any string>          |
+
+### Classes
+
+What types of classes should be built:
+
+| Option                    | Description                                                               | Default | Value Type | Possible Values       |
+| :-----------------------  | :------------------------------------------------------------------------ | :-----: | :--------: | :-------------------: |
+| regular_classes           | Should 'regular' classes be built, e.g. ".bg--red-50"                     | true    | Boolean    | true / false          |
+| breakpoint_classes        | Should 'breakpoint' classes be built, e.g. ".md\\|color--black"           | false   | Boolean    | true / false          |
+| pseudo_classes            | Should 'pseudo' classes be built, e.g. ".hover\\|border-c--blue-50:hover" | false   | Boolean    | true / false          |
+| breakpoint_pseudo_classes | Should 'regular' classes be built, e.g. ".hover\\|md\\|bg--blue-50:hover" | false   | Boolean    | true / false          |
+
+### Extra Information
+
+Breakpoint list:
+
+- sm: 325px
+- md: 768px
+- lg: 1024px
+- xl: 1440px
+
+Pseudo list:
+
+- input: 'checked', 'disabled', 'enabled', 'focus'
+- action: 'active', 'hover', 'link', 'target', 'visited'
+- child: 'root', 'first-child', 'first-of-type', 'last-child', 'last-of-type', 'only-of-type', 'only-child', 'empty'
+
+Classes available:
+
+- 'color--key': will change the `color` property
+- 'bg--key': will change the `background-color` property
+- 'accent-c--key': will change the `accent-color` property
+- 'border-c--key': will change the `border-color` property
+- 'outline-c--key': will change the `outline-color` property
+- 'decoration-c--key': will change the `text-decoration-color` property
+- 'caret-c--key': will change the `caret-color` property
+- 'svg-fill-c--key': will change the `fill` property
+- 'svg-stroke-c--key': will change the `stroke` property
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## 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).
+
+## 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

@@ -1,12 +1,8 @@
-# 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]
+# frozen_string_literal: true
+
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/lib/generators/templates/config/utility_colors.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+UtilityColors.configure do |config|
+  # Enabled Environments
+  # config.enable_environments = [:development]
+
+  # Import
+  # config.import_palettes_filepath = 'utility_palettes.scss'
+
+  # Output
+  # config.output_filename = 'utility_colors'
+  # config.output_dated = false
+  # config.output_files = ['scss']
+  # config.output_prefix = nil
+  # config.output_suffix = nil
+
+  # Class Types
+  # config.regular_classes = true
+  # config.breakpoint_classes = false
+  # config.pseudo_classes = false
+  # config.breakpoint_pseudo_classes = false
+end

data/lib/generators/templates/palettes/_color-variables.scss

@@ -0,0 +1,34 @@
+// v0.1.8 Absolute Sources
+
+$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%);
+
+// v0.1.8 Relative Sources
+
+$success: $green-400;
+$danger: $red-400;
+$information: $blue-400;
+$warning: $gold-400;
+
+// v0.1.8 Single Sources
+
+$white: #fff;
+$black: #000;
+$translucent: rgba(#000, 0.45);

data/lib/generators/utility_colors/config_generator.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module UtilityColors
+  module Generators
+    class ConfigGenerator < Rails::Generators::Base
+      source_root File.expand_path('../../..', __dir__)
+
+      def copy_config
+        copy_file 'lib/generators/templates/config/utility_colors.rb', 'config/initializers/utility_colors.rb'
+      end
+    end
+  end
+end

data/lib/generators/utility_colors/generate_generator.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module UtilityColors
+  module Generators
+    class GenerateGenerator < Rails::Generators::Base
+      def generate_utility_colors
+        # TODO: check if the v0.1.8 scss files exists
+        # "app/app/assets/stylesheets/utility_colors_files" directory
+        self.class.config_format_warn if File.exist?('config/utility_colors.yml') || File.exist?('config/utility_colors.json')
+
+        if UtilityColors.configuration.enable_environments.include?(Rails.env.to_sym)
+          UtilityColors::Colors.generate
+        else
+          self.class.disabled_warn
+        end
+      end
+
+      private
+
+      # TODO: add links to README for migration
+      def self.config_format_warn
+        warn 'WARNING: Utility Colors now uses an initializer to set config. You need to migrate and remove your YML/JSON file.'
+      end
+
+      # TODO: add links to README for environment setting
+      def self.disabled_warn
+        warn 'ERROR: Utility Colors is disabled for this environment. Color classes will not be generated.'
+      end
+    end
+  end
+end

data/lib/utility_colors/builders.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module UtilityColors
+  class Builders
+    # '.' are appended during final formatting
+
+    # 'color--red-400'
+    def self.utility_classes_creation(class_name, content)
+      content = [content] unless content.is_a?(Array)
+      { class_name => "#{content.join(': ')};" }
+    end
+
+    # 'md|color--red-400'
+    def self.utility_pseudo_classes_creation(class_name, content, pseudo)
+      content = [content] unless content.is_a?(Array)
+      { "#{pseudo}\|#{class_name}:#{pseudo}" => "#{content.join(': ')};" }
+    end
+
+    # 'hover|color--red-400'
+    def self.utility_breakpoint_classes_creation(class_name, content, initial, screen_size)
+      content = [content] unless content.is_a?(Array)
+      { "#{initial}\|#{class_name}" => "@media only screen and (min-width: #{screen_size - 1}) { #{content.join(': ')}; }" }
+    end
+
+    # 'hover|md|color--red-400'
+    def self.utility_pseudo_breakpoint_classes_creation(class_name, content, pseudo, initial, screen_size)
+      content = [content] unless content.is_a?(Array)
+      { "#{pseudo}\|#{initial}\|#{class_name}:#{pseudo}" => "@media only screen and (min-width: #{screen_size - 1}) { #{content.join(': ')}; }" }
+    end
+
+    # Bulk Methods
+
+    def self.utility_classes(class_name, content)
+      UtilityColors::Builders.utility_classes_creation(class_name, content)
+    end
+
+    def self.bulk_breakpoint_class_creation(class_hash)
+      uc_screens = UtilityColors::Properties.screen_sizes.transform_values(&:to_f)
+
+      uc_screens.collect do |initial, screen_size|
+        class_hash.collect do |class_name, content|
+          UtilityColors::Builders.utility_breakpoint_classes_creation(class_name, content, initial, screen_size)
+        end
+      end.flatten.reduce({}, :merge)
+    end
+
+    def self.bulk_pseudo_class_creation(class_hash)
+      uc_pseudos = UtilityColors::Properties.pseudos
+
+      uc_pseudos.collect do |pseudo|
+        class_hash.collect do |class_name, content|
+          UtilityColors::Builders.utility_pseudo_classes_creation(class_name, content, pseudo)
+        end
+      end.flatten.reduce({}, :merge)
+    end
+
+    def self.bulk_pseudo_breakpoint_class_creation(class_hash)
+      uc_screens = UtilityColors::Properties.screen_sizes.transform_values(&:to_f)
+      uc_pseudos = UtilityColors::Properties.pseudos
+
+      uc_screens.collect do |initial, screen_size|
+        uc_pseudos.collect do |pseudo|
+          class_hash.collect do |class_name, content|
+            UtilityColors::Builders.utility_pseudo_breakpoint_classes_creation(class_name, content, pseudo, initial, screen_size)
+          end
+        end
+      end.flatten.flatten.reduce({}, :merge)
+    end
+
+    # * Advanced Classes
+
+    # utility_classes(class)
+    # .class { content }
+  end
+end

data/lib/utility_colors/colors.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module UtilityColors
+  class Colors
+    def self.generate
+      configuration = UtilityColors.configuration
+
+      generated_regular_classes = {}
+      generated_breakpoint_classes = {}
+      generated_pseudo_classes = {}
+      generated_pseudo_breakpoint_classes = {}
+
+      puts 'Generating utility colour classes...'
+
+      colour_palette = UtilityColors::Imports.import
+
+      puts 'Retrieved colour palettes...'
+
+      generated_source_classes = UtilityColors::Colors.build_source_classes(colour_palette)
+
+      puts 'Generated source colour classes...'
+
+      if configuration.regular_classes
+        generated_regular_classes = generated_source_classes
+        puts 'Generated regular colour classes...'
+      end
+
+      if configuration.breakpoint_classes
+        generated_breakpoint_classes = UtilityColors::Builders.bulk_breakpoint_class_creation(generated_source_classes)
+        puts 'Generated breakpoint colour classes...'
+      end
+
+      if configuration.breakpoint_classes
+        generated_pseudo_classes = UtilityColors::Builders.bulk_pseudo_class_creation(generated_source_classes)
+        puts 'Generated breakpoint colour classes...'
+      end
+
+      if configuration.breakpoint_classes
+        generated_pseudo_breakpoint_classes = UtilityColors::Builders.bulk_pseudo_breakpoint_class_creation(generated_source_classes)
+        puts 'Generated breakpoint colour classes...'
+      end
+
+      generated_classes = {}.merge(generated_regular_classes, generated_breakpoint_classes, generated_pseudo_classes, generated_pseudo_breakpoint_classes)
+      formatted_classes = self.format_classes(generated_classes)
+
+      filename = configuration.output_filename
+      filename += "-#{Time.zone.now.strftime('%Y%m%d-%H%M%S')}" if configuration.output_dated == true
+
+      output_files = configuration.output_files.map(&:strip)
+
+      UtilityColors::Exports.json(filename, formatted_classes) if output_files.include?('json')
+      UtilityColors::Exports.scss(filename, formatted_classes) if output_files.include?('scss')
+      UtilityColors::Exports.css(filename, formatted_classes) if output_files.include?('css')
+
+      true
+    end
+
+    private
+
+    def self.build_source_classes(colour_palette)
+      colour_style_prefix_and_property = {
+        'color' => 'color',
+        'bg' => 'background-color',
+        'accent-c' => 'accent-color',
+        'border-c' => 'border-color',
+        'outline-c' => 'outline-color',
+        'decoration-c' => 'text-decoration-color',
+        'caret-c' => 'caret-color',
+        'svg-fill-c' => 'fill',
+        'svg-stroke-c' => 'stroke'
+      }
+
+      # 'border-t' => 'border-top-color',
+      # 'border-r' => 'border-right-color',
+      # 'border-b' => 'border-bottom-color',
+      # 'border-l' => 'border-left-color',
+      # 'box-shadow' => '--uc-box-shadow-c'
+      # 'drop-shadow' => '--uc-drop-shadow-c'
+
+      current_colour_class = colour_style_prefix_and_property.collect do |style_class_type, style_property|
+        UtilityColors::Builders.utility_classes_creation("#{style_class_type}--current", [style_property, 'currentColor'])
+      end.reduce({}, :merge)
+
+      # initially use the palette key as the style value so that it can be more easily replaced for the correct type of variable when it is exported
+      base_colour_classes = colour_palette.keys.collect do |style_modifier|
+        colour_style_prefix_and_property.collect do |style_class_type, style_property|
+          UtilityColors::Builders.utility_classes_creation("#{style_class_type}--#{style_modifier}", [style_property, "£$#{style_modifier}$£"])
+        end
+      end.flatten.reduce({}, :merge)
+
+      {}.merge!(current_colour_class, base_colour_classes)
+    end
+
+    def self.format_classes(generated_hash)
+      configuration = UtilityColors.configuration
+
+      generated_hash.transform_keys!(&:to_s)
+      generated_hash.transform_keys! { |key| configuration.output_prefix + key } if configuration.output_prefix.present?
+      generated_hash.transform_keys! { |key| key + configuration.output_suffix } if configuration.output_suffix.present?
+
+      generated_hash.transform_keys! { |key| ".#{key}" }
+
+      generated_hash
+    end
+  end
+end