Switch to a numerical color variant naming system based on lightness of variants#18189
Switch to a numerical color variant naming system based on lightness of variants#18189michaseel wants to merge 3 commits intotwbs:v4-devfrom
Conversation
Inspired by Font-Weights (200, 400, 600...) and the Material Design Color System (https://www.google.com/design/spec/style/color.html#color-color-palette): Use numbers to define different shades of gray. This is much more consistent and extendable than light, lighter, lightest, lightest-light. Because sometimes Designers want just more than 5 shades of gray (or primary colors)
|
It might be a good idea to use variables for the percentages as well. For example (PostCSS Implementation): :root {
--percentage-lightest: 93%;
--percentage-lightness: 72%;
--percentage-light: 46%;
--percentage-median: 33%;
--percentage-dark: 20%;
--percentage-darker: 13%;
--percentage-darkest: 5%;
}
:root {
--color-gray-base: #000;
--color-gray-lightest: color(var(--color-gray-base) lightness(var(--percentage-lightest)));
--color-gray-lighter: color(var(--color-gray-base) lightness(var(--percentage-lighter)));
--color-gray-light: color(var(--color-gray-base) lightness(var(--percentage-light)));
--color-gray: color(var(--color-gray-base) lightness(var(--percentage-media)));
--color-gray-dark: color(var(--color-gray-base) lightness(var(--percentage-dark)));
--color-gray-darker: color(var(--color-gray-base) lightness(var(--percentage-darker)));
--color-gray-darkest: color(var(--color-gray-base) lightness(var(--percentage-darkest)));
--color-gray-100: var(--color-gray-lightest);
--color-gray-300: var(--color-gray-lighter);
--color-gray-400: var(--color-gray-light);
--color-gray-500: var(--color-gray);
--color-gray-600: var(--color-gray-dark);
--color-gray-700: var(--color-gray-dark);
--color-gray-900: var(--color-gray-darkest);
} |
|
Agreed on something different than the current solution, but unsure why you've added the primary variables here as well. |
|
I would like to have a central place (in variables.scss) where all color shades are defined. Currently there are a lot of different lighten() and darken() operations spread across the sourcecode. That makes the control of particular color-shades very hard. |
|
Alternate approach coming in #18462 with full colors included. Needs a ton of work, but figured I'd build on this some how. |
|
FYI - I took a stab at providing a PostCSS based implementation here: The superfly-css-utilities-colors module uses the variables to provide a spectrum for both the notification and gray colors. |
Inspired by Font-Weights (200, 400, 600...) and the Material Design Color System (https://www.google.com/design/spec/style/color.html#color-color-palette):
Use numbers to define different shades of gray. This is much more consistent and extendable than light, lighter, lightest, lightest-light.
Because sometimes Designers want just more than 5 shades of gray (or primary colors)