search

vkottler / svgen

A tool for working with scalable vector graphics.
MIT License
6 stars 0 forks source link

Add support for generating material design themes #6

Closed vkottler closed 2 years ago

vkottler commented 2 years ago

Figure out what https://material.io/design/color/the-color-system.html#tools-for-picking-colors is doing (likely in HSL-space) and create interfaces to generate "themes"

We should probably make a higher level "color" that has both HSL and RGB, then we can make a set of colors from that (theme class)

vkottler commented 2 years ago

Drive-by upgrade - make sure both Rgb and Hsl colors can have valid == checks done on them between each of the two types so that you can check if rgb1 == rgb2 and rgb1 == hsl1

vkottler commented 2 years ago

Consider adding support for "alpha channel" in colors https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

vkottler commented 2 years ago

We finished adding alpha channels to RGB and HSL, can now add a Color to a style attribute.

Should be ready to work on this issue (and figure out how we want to organize colors in general)

vkottler commented 2 years ago

Something we should implement: https://github.com/material-components/material-components-web/blob/master/packages/mdc-theme/_theme-color.scss#L42

vkottler commented 2 years ago

Google used https://gka.github.io/chroma.js/#color-darken

vkottler commented 2 years ago

This tool is a good example of what's going on probably: http://vis4.net/palettes/#/32|s|00429d,65ffe9,ffffe0|ffffe0,ff005e,93003a|1|1

vkottler commented 2 years ago

Add a class for color palette, figure out a way to plot an analysis of the palette (just show trends)

add the material design themes to the code

find the actual material design generator code

vkottler commented 2 years ago

This person has the "Google algorithm" https://github.com/edelstone/material-palette-generator

vkottler commented 2 years ago

Things to read / look at:

vkottler commented 2 years ago

We need to support "HCT": https://github.com/material-foundation/material-color-utilities/blob/main/typescript/hct/hct.ts

To have a conversion to RGBA, we may need to add support for a few other color or perception models.

The Google code seems to be using: https://en.m.wikipedia.org/wiki/RGBA_color_model

vkottler commented 2 years ago

Not worth the effort: https://github.com/vkottler/svgen/wiki#choosing-colors