Color Theming Ideas

syntax-highlighting.md

Possible data structuring

When assigning importance/priority to semantic tokens, it starts to get muddy fast, however this idea MIGHT help:

Basic Idea

Originally, there was going to be a level or order of priority to each token after they have been sorted into categories.

The original idea was to use an anylogous harmony on the items in each list, which the primary color going to the top item. This ended up very flawed, very quickly.

The actual idea now, i swear

Have two levels of data types, one for categories, and another for tokens. This could even go further with a Layer > Category > Token flow. Add priority to each type. The priority is then applied in the HSL space.

My suggested application:

• Hue: Apply to token
• Saturation: Apply to layer
• Lightness: Apply to category

THIS IS COMPLETELY UNTESTED AND ALREADY LOOKS LIKE IT COULD BE A DISASTER!!

But the actual implimentation is expected to change drastically, while the data structure when building out a theme seems far more sound as of now.

IDEA: Probably best to build out from a config containing nested arrays?

Example of Data Structure

Possible Output:

const layer = {
  priority: 1,
  categories: {
    [name]: {
      priority: 1,
      tokens: {
        priority: 1,
        name: 'hello',
      },
    },
  },
}

Possible Input:

layer_name:
  - name: categoryName
    tokens:
      - tokenName

Theme Breakdown

Primary
/  |  \

RANDOM THOUGHTS

• Can visibility stats/ranking be derived from HSL values?

Can I do some kind of calculation determining how eye-catching a passed color is?

Start with the Hue, and assume full (100%) saturation and lightness. From that provide a ranking. Then, move to Saturation, and do the same, and so on. From the updating of the ranking, the final output should show the visibility level of the color and can then be applied to a token. This will, of course, have to be put against a background color for comparison

Could be possible to use accessibility tools that currently exist to evaluate websites and apply them here (contrast scores?).