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
}
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';
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' }));
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' }));
Classes | Features |
---|---|
MaterialDynamicSchemeGenerator | Used to create tokens like --md-sys-color-primary . |
MaterialPaletteGenerator | Used to create tokens like --md-palette-primary-40 . |
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
});
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'
});
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
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'
})
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]
});
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'
});
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];
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'
})