material-tokens-generator

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

• ESM Supported Only
• Typescript Supported

import { EMaterialContrastLevel, EMaterialVariant, MaterialDynamicSchemeGenerator } from '@glare-labs/material-tokens-generator'

const colorConfiguration = {
    color: 'rgba(25, 99, 128, 1)',
    isDakk: false,
    contrastLevel: EMaterialContrastLevel.Default,
    variant: EMaterialVariant.VIBRANT,
}

const generateSchemeByVariant = () => {
    const generated = MaterialDynamicSchemeGenerator.generateByVariant(colorConfiguration.color, {
        contrastLevel: colorConfiguration.contrastLevel,
        isDark: colorConfiguration.isDakk,
        variant: colorConfiguration.variant,
    })

    const objValue = generated.value
    const objStylesText = generated.toStyleText()

    console.log(objValue, objStylesText);

    return objStylesText
}

Usage

Import

If you are using ESM, you can try the introduction part of the following code:

import { MaterialDynamicSchemeGenerator, MaterialPaletteGenerator } from '@glare-labs/material-tokens-generator';

Or:

import { MaterialDynamicSchemeGenerator, MaterialPaletteGenerator } from '@glare-labs/material-tokens-generator/build/index';

Generate colors

For example:

import { MaterialDynamicSchemeGenerator } from '@glare-labs/material-tokens-generator';

const s = MaterialDynamicSchemeGenerator.generateByVariant('#123456');

/**
 * @output
 * {
 *   primaryPaletteKeyColor: '#0697ff',
 *   secondaryPaletteKeyColor: '#6b7697',
 *   ...
 *   onTertiaryFixed: '#151643',
 *   onTertiaryFixedVariant: '#414271'
 * }
 */
console.log(s.value);

/**
 * @output
 * --my-prefix-primary-palette-key-color: #0697ff;
 * --my-prefix-secondary-palette-key-color: #6b7697;
 * ...
 * --my-prefix-on-tertiary-fixed: #151643;
 * --my-prefix-on-tertiary-fixed-variant: #414271;
 */
console.log(s.toStyleText({ prefix: 'my-prefix' }));

Generate palettes

For example:

import { MaterialPaletteGenerator } from '@glare-labs/material-tokens-generator';

const p = MaterialPaletteGenerator.generateByVariant('#123456');

/**
 * @output
 * {
 *   primary: {
 *     0: '#000000'
 *     5: '#001225'
 *     ...
 *   },
 *   ...
 *   neutralVariant: {
 *     0: '#000000',
 *     5: '#09111b',
 *     ...
 *   }
 * }
 */
console.log(p.value);

/**
 * @output
 * --my-prefix-primary-0: #000000;
 * --my-prefix-primary-5: #001225;
 * ...
 * --my-prefix-neutral-variant-95: #eaf1ff;
 * --my-prefix-neutral-variant-100: #ffffff;
 */
console.log(p.toStyleText({ prefix: 'my-prefix' }));

API

Classes	Features
MaterialDynamicSchemeGenerator	Used to create tokens like --md-sys-color-primary.
MaterialPaletteGenerator	Used to create tokens like --md-palette-primary-40.

MaterialDynamicSchemeGenerator

generateByVariant()

Param	Type	Option	Required
soureColor	string		Yes
options	0 | 1 | 2 | 3 | 4 | 5 | 6	variant	No
options	boolean	isDark	No
options	-1.0 | 0 | 0.5 | 1.0	contrastLevel	No

MaterialDynamicSchemeGenerator.generateByVariant('#123456');

MaterialDynamicSchemeGenerator.generateByVariant('#123456', {
  variant: EMaterialVariant.TONAL_SPOT,
});

MaterialDynamicSchemeGenerator.generateByVariant('#123456', {
  variant: EMaterialVariant.TONAL_SPOT,
  isDark: true,
  contrastLevel: EMaterialContrastLevel.HIGH
});

generateByPalette()

Param	Type	Option	Required
soureColor	string		Yes
options	0 | 1 | 2 | 3 | 4 | 5 | 6	variant	No
options	boolean	isDark	No
options	-1.0 | 0 | 0.5 | 1.0	contrastLevel	No
options	string	primaryPalette	No
options	string	secondaryPalette	No
options	string	tertiaryPalette	No
options	string	neutralPalette	No
options	string	neutralVariantPalette	No

MaterialDynamicSchemeGenerator.generateByPalette('#123456');

MaterialDynamicSchemeGenerator.generateByPalette('#123456', {
  variant: EMaterialVariant.TONAL_SPOT,
});

MaterialDynamicSchemeGenerator.generateByPalette('#123456', {
  variant: EMaterialVariant.TONAL_SPOT,
  isDark: true,
  contrastLevel: EMaterialContrastLevel.HIGH,
  primaryPalette: '#654321'
});

value

Param	Type	Required

const s = MaterialDynamicSchemeGenerator.generateByVariant('#123456');

/**
 * @output
 * {
 *   primaryPaletteKeyColor: '#0697ff',
 *   secondaryPaletteKeyColor: '#6b7697',
 *   ...
 *   onTertiaryFixed: '#151643',
 *   onTertiaryFixedVariant: '#414271'
 * }
 */
const tokens = s.value

/**
 * @output
 * #161c24
 */ 
const onSurfaceHex = tokens.onSurface

toStyleText()

Param	Type	Option	Required
options	string	prefix	No

const s = MaterialDynamicSchemeGenerator.generateByVariant('#123456');

/**
 * @output
 * --md-sys-color-primary-palette-key-color: #0697ff; ...
 */
const style1 = s.toStyleText()

/**
 * @output
 * --my-loved-primary-palette-key-color: #0697ff; ...
 */
const style2 = s.toStyleText({
    prefix: 'my-loved'
})

MaterialPaletteGenerator

generateByVariant()

Param	Type	Option	Required
soureColor	string		Yes
options	0 | 1 | 2 | 3 | 4 | 5 | 6	variant	No
options	boolean	isDark	No
options	-1.0 | 0 | 0.5 | 1.0	contrastLevel	No
options	Array<number>	cl	No

MaterialPaletteGenerator.generateByVariant('#123456');

MaterialPaletteGenerator.generateByVariant('#123456', {
  variant: EMaterialVariant.TONAL_SPOT,
});

MaterialPaletteGenerator.generateByVariant('#123456', {
  variant: EMaterialVariant.TONAL_SPOT,
  isDark: true,
  cl: [0, 50, 100]
});

generateByPalette()

Param	Type	Option	Required
soureColor	string		Yes
options	0 | 1 | 2 | 3 | 4 | 5 | 6	variant	No
options	boolean	isDark	No
options	-1.0 | 0 | 0.5 | 1.0	contrastLevel	No
options	string	primaryPalette	No
options	string	secondaryPalette	No
options	string	tertiaryPalette	No
options	string	neutralPalette	No
options	string	neutralVariantPalette	No
options	Array<number>	cl	No

MaterialPaletteGenerator.generateByPalette('#123456');

MaterialPaletteGenerator.generateByPalette('#123456', {
  variant: EMaterialVariant.TONAL_SPOT,
});

MaterialPaletteGenerator.generateByPalette('#123456', {
  variant: EMaterialVariant.TONAL_SPOT,
  isDark: true,
  cl: [0, 30, 60, 90, 100],
  primaryPalette: '#654321'
});

value

Param	Type	Required

const s = MaterialPaletteGenerator.generateByVariant('#123456');

/**
 * @output
 * {
 *   primary: {
 *     P0: '#000000',
 *     P5: '#001225',
 *     ...
 *   },
 *   ...
 * }
 */
const tokens = s.value

/**
 * @output
 * #00325a
 */
const p20 = tokens.primary[20];

toStyleText()

Param	Type	Option	Required
options	string	prefix	No

const s = MaterialPaletteGenerator.generateByVariant('#123456');

/**
 * @output
 * --md-sys-palette-primary-0: #000000;--md-sys-palette-primary-5: #001225; ...
 */
const style1 = s.toStyleText()

/**
 * @output
 * --my-loved-primary-0: #000000;--my-loved-primary-5: #001225;--my-loved-primary-10: #001c37; ...
 */
const style2 = s.toStyleText({
    prefix: 'my-loved'
})