@sandlada/material-token-generator

If you find any problems, please report them.

This project uses the @material/material-color-utilities open source project to convert the results generated by @material/material-color-utilities into CSS styles.

• ESM Supported Only
• Typescript Supported

npm i @sandlada/material-token-generator @material/material-color-utilities -D

import { Hct } from '@material/material-color-utilities'
import { createTokens, MaterialContrastLevel, MaterialVariant } from '@sandlada/material-token-generator'

const mdt = createTokens(Hct.from(130, 75, 50), MaterialContrastLevel.Default, MaterialVariant.Content)
    
const lightModeCssText = mdt.lightColorCssText()
const darkModeCssText = mdt.darkColorCssText()

const toneCssText = mdt.toneCssText()

const sheet = new CSSStyleSheet()
sheet.replaceSync(`:root:not([dark]){${lightModeCssText}} :root[dark]{${darkModeCssText}} :root{${toneCssText}}`)
document.adoptedStyleSheets.push(sheet)

Usage

MaterialVariant

Variant corresponds to the scheme object used by material-color-utilities before producing colors.

const MaterialVariant: {
    readonly Monochrome: 0
    readonly Neutral   : 1
    readonly TonalSpot : 2
    readonly Vibrant   : 3
    readonly Expressive: 4
    readonly Fidelity  : 5
    readonly Content   : 6
    readonly Rainbow   : 7
    readonly FruitSalad: 8
}

MaterialContrastLevel

Contrast, the default is recommended.

const MaterialContrastLevel: {
    readonly Reduced: -1
    readonly Default: 0
    readonly Medium : 0.5
    readonly High   : 1
}

createTokens

Props	Description
createTokens( HERE )	The first parameter accepts a Hct object, which represents sourceColorHct
createTokens(..., HERE )	Represents contrast, the default is 0. The value range is from -1 to 1
createTokens(..., ..., HERE )	Color variant. Values range from 0 to 8.

import { createTokens, MaterialContrastLevel, MaterialVariant } from '@sandlada/material-token-generator'

const mdt1 = createTokens(Hct.from(130, 75, 50))
const mdt2 = createTokens(Hct.from(130, 75, 50), 0)
const mdt3 = createTokens(Hct.from(130, 75, 50), MaterialContrastLevel.Default)
const mdt5 = createTokens(Hct.from(130, 75, 50), MaterialContrastLevel.Reduced)
const mdt6 = createTokens(Hct.from(130, 75, 50), MaterialContrastLevel.Reduced, 6)
const mdt6 = createTokens(Hct.from(130, 75, 50), MaterialContrastLevel.Reduced, MaterialVariant.Content)

lightColorCssText & darkColorCssText

import { createTokens } from '@sandlada/material-token-generator'

const mdt = createTokens(Hct.from(130, 75, 50))
const lightModeCssText = mdt.lightColorCssText()
const darkModeCssText = mdt.darkColorCssText()

/**
 * @output
 * --md-sys-color-background:#f9fbec;
 * ...
 */
console.log(lightModeCssText)

/**
 * @output
 * --md-sys-color-background:#11140c;
 * ...
 */
console.log(darkModeCssText)

toneCssText

For example:

import { createTokens } from '@sandlada/material-token-generator'

const mdt = createTokens(Hct.from(130, 75, 50))
const toneCssText = mdt.toneCssText()

/**
 * @output
 * ```
 * --md-sys-palette-primary-0:#000000;
 * --md-sys-palette-primary-1:#020500;
 * ...
 * --md-sys-palette-neutral-variant-100:#ffffff;
 * ```
 */
console.log(toneCssText)