🔮 Settings

The myriad function is the main function that handles everything. It takes a scheme and a settings object, both of which are optional and whos paramaters all have defaults.

myriad(scheme, settings)
const settings = {
  element?: HTMLElement
  readability?: number
  iterations?: number
  foreground?: {shade: number[]}
  background?: {shade: number[]}
  accents?: {shade: number[]}
}

Element

The element the CSS variables should attach to. Defaults to the HTML element

myriad(scheme, {
  element: document.querySelector('.my-element')
})

Readability

The minimum readability score that the system should aim for best it can. Some cases might be impossible, but it will push the foreground color as much as it can to create the desired score. The max score possible is 21, and the reccomended score for small text is 12

myriad(scheme, {
  readability: 12
})

Iterations

The number of times it should try to nudge the colors towards the readability score. Defaults to 20.

myriad(scheme, {
  iterations: 20
})

Color Settings

...

Shades

The next three settings properties have thes same type and work the same. These let you pass an object of settings for each color to adhere to. Currently the only setting available is the shade range.

myriad(scheme, {
  foreground: { shade: [12, 50, 60] }
})

This shade property is just an array of numbers. The shades of each color are all generated by mixing towards either the foreground or the background depending on contrast. The amount of numbers in the array dictates the amount of shades. And the value of the number dictates the % of mixture towards its respective contrast color. Bellow is an example.

Note Defaults to 2 shades for each color. Avoid adding more shades than needed. The default of 2 shades is almost guaranteed to be more than enough.

Input

foreground: { 
  shade: [12, 50, 60] 
}

Output

--foreground: #d5c9c1;
--foreground-10: #bdb2ac;
--foreground-20: #a59b98;
--foreground-30: #857c7c;

This lets you control the "depth" of colors in your theme by setting how far appart each generated shade should be and how many shades should be used. I reccomend keeping the number of colors as small as possible as this helps keep it simpler for you to manage. The library can handle as much as you are eevr likley to throw at it however.

Note Notice however that regardless of the shade value the outputted CSS variables will still be counted 10, 20, 40 etc. This is because the purpose of the CSS variable naming is to count the fractions of shades and to keep this naming consistent and easy to modify. Imagine for instance if you named the CSS variables after the exact percentage, assigned these variables all over the place and then wanted to change it? Your theme would break. Keeping the CSS variable naming simple and independent of color percentages allows you to change themes and have multiple temes without anything breaking as long as you keep using the same amount of shades, the value of the shades wont matter.

import { myriad } from "@myriadj/core"

myriad({
  background: '#0c0915',
  foreground: '#c0aea3',
  accents: ['#c97074'],
})
Table of Contents