Starter

📦 Installation

npm install @myriadjs/core

🔮 Most Common Usage

Simple example

import { myriad } from "@myriadjs/core"

myriad({
  background: '#0c0915',
  foreground: '#c0aea3',
  accents: ['#c97074'],
}).attach()

Outputted CSS attached to the HTML element

--background: #0c0915;
--background-10: #201c26;
--background-20: #484349;

--foreground: #d5c9c1;
--foreground-10: #ada39f;
--foreground-20: #71696b;

--accent: #e6bebf;
--accent-contrast: #0c0915;
--accent-10: #ba9a9d;
--accent-20: #79646a;

These variables are available everywhere as long as the element is inside the HTML tag. Heres an example of how to use them.

.card {
  background-color: var(--background-20);
  color: var(--foreground);
}

Note if youre unfamiliar with CSS variables heres the docs for them

🔮 Details

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)

This allow for flexible customization. Both the scheme and settings can contain as many or as few available parameters as needed, with the function automatically filling in any missing defaults or auto-generated values based on what has been passed in. In the example provided, only a schema with a foreground color is passed, with the remaining parameters handled by the system. This approach enables easy theme creation with minimal parameters, while also providing more control over the theme as additional parameters are added.

myriad({
  foreground: "#ffffff"
})