This is a script to generate material you compatible DCP CSS tokens.
It has some additional token to be used with svelte you UI library.
To install the script use the following command:
npm i -g svelte-you-theme-generator
yarn add -g svelte-you-theme-generator
Generate theme from color
Usage: sytg from-color [options] <primary>
Generate material you theme with colors inputs. Compatible with svelte-you.
Arguments:
primary Primary color of palette
Options:
-v Print current version
-s, --secondary <color> Secondary color of palette
-t, --tertiary <color> Tertiary color of palette
-n1, --neutral <color> Neutral color of palette
-n2, --neutral-variant <color> Neutral variant color of palette
-e --error <color> Error color of palette
--full Output complete css files. (Not just theme file)
-d, --destination <path> Output path for generated path, default to pwd
-c --custom <name:color:harmonize...> Extended colors for palette
-f --force Force entered color, i.e Skip harmonizing color. Useful if brand color needs to be preserved
-h, --help display help for command
- Generate theme file from just primary color
sytg from-color "#6750A4"
- Generate theme file in a different folder
sytg from-color "#6750A4" -d /tmp/theme
- Generate theme file in a additional colors
sytg from-color "#6750A4" -s "#958DA5" -t "#B58392" -n2 "#939094" -d /tmp/theme
- Generate complete theme file, along with supporting css file
sytg from-color "#6750A4" --full
- Generate theme file without harmonizing colors
sytg from-color "#6750A4" -s "#958DA5" -f
- Add extended colors and harmonize it wih primary color
sytg from-color "#6750A4" -c "spaceGray:#958DA5:true"
- Add extended colors and don't harmonize it wih primary color
sytg from-color "#6750A4" -c "spaceGray:#958DA5:false"
- Add multiple extended colors
sytg from-color "#6750A4" -c "spaceGray:#958DA5:false" -c "deepRed:#730024:true"
Generate style sheet
import { createStylesheet } from 'svelte-you-theme-generator/lib/index.js';
import { argbFromHex } from 'svelte-you-theme-generator/lib/util/index.js';
const themeCSS = createStylesheet({
primary: argbFromHex('#6750A4'),
tones: [
{
name: 'spaceGray',
color: '#423123',
harmonize: true,
},
],
});
console.log(themeCSS);
This script is built with Node (yarn), TypeScript, Nx.
Development is pretty straightforward:
- Clone the project
- Install dependencies
yarn install
- Build the project
yarn nx run svelte-you-theme-generator:build
- To run demo script
node libs/svelte-you-theme-generator/demo/index.mjs
-
This extension is provided under Apache 2.0 License.
-
This extension is a wrapper around material-color-utilities which is also published under Apache 2.0 License.
-
Shout out to Google Material Team for Material You design system.