Harmonium Configuration

[bryanjos]

We want to allow designers and developers a way to configure Harmonium design token values. This will allow for an easier way update values across Harmonium's supported platforms.

This will be done by adding 2 commands to Harmonium

harmonium init

Running the above command will place a file named harmonium.config.js into the current working directory. This JavaScript file will export an object containing properties that are configurable in Harmonium. The first iteration of the file will probably look something like this:

module.exports = {
  outputPath: "./harmonium-settings" //path to output created assets
  designTokens: {}  // All of the design tokens in harmonium
}

The outputPath property is where the created assets will be dumped

The designTokens property will contain all of harmonium's design tokens. This can be created by getting all the json files in the design-tokens folder and merging them together. The resulting object is what will be placed in designTokens property

harmonium init defaults by putting the config in the current working directory. By adding a path, the user can change the name and path.

harmonium init ./config/harmonium-config.js

harmonium build

Running harmonium build will take the harmonium.config.js file and use it to generate the assets. The created files will go into the outputPath value defined. This value can be overridden by using the --outputPath flag.

When harmonium build is executed. It should create a default config object and merge in the user's config into that. This should allow the user's configuration to only include the values they want to change, while leaving the others defaulted.

By default the command looks for harmonium.config.js in the current working directory. But if the name is different or it is at a different path, the user can use the --config flag to point to it

[bryanjos]

I'm thinking we can do something similar to tailwind https://tailwindcss.com/docs/configuration

[oohnoitz]

This looks good to me. Just curious how it'd mesh with the way the design tokens files are currently broken up and if there is a straight forward way of configuring without having to go through a bunch of files? Though I guess it's subject to change right now? Seems like tailwindcss has it all in one huge file. It's a bit straightforward with what the defaults are all in one place.

[bryanjos]

My thought is that if the user does like harmonium init then that would merge the json into one file and put that file in the person's project. From there they can update values, do harmonium build <output folder> and get assets placed in that directory

[oohnoitz]

Read the update and I'm good with this. Just some opinions/thoughts on the designTokens object...

• If this only contains the changes and merges the default (like tailwind), it does make it easier to see what we've changed from the default. This does have it's own pros/cons and I'm interested in feedback from the others.
• However, if we do merge and have all the values there by default, this does force the user to explicitly define all the values, which means there is nothing left as a "default". This is very nice when you don't have to debug and find out that a value was missing and it was being populated by a default.

I think we'll want to shape up the harmonium build process though? With the second option, we'll need to help point the end user in the right direction before a build is complete, though we can help them with changelogs?

• missing design tokens not defined in harmonium.config.js?
• how to make it easier to update the harmonium.config.js when a new design token is added for any reason?

We can think about the same for when harmonium init is ran too.

[bryanjos]

I think I understand. So it would be more like option 1. But init will build a file with all the design tokens with the default values. The end user can delete anything in there they don't want to update.

[bryanjos]

This is done. Closing