Originally talked about here: #4054_
This would be beneficial and simpler way to transform generated color steps and overrides from themebuilder to design-tokens, css and figma. The mental model would also be closer to light-dark syntax in css which we are going to start using soon ™️™
Would like to get this done before v2 as this feature would deprecate and replace overrides today. In addition we need this to support custom colors for our new plugin as current structure does not support this.
We support custom.
Support this in our schema would also make it simpler to input values from other source such as CSS config #5396 (postcss parsed values populates this schema).
css-config -> parsed values with postcss/css-color (#5394) -> config (validates) -> design-token (or other outputs #4324 )
Originally talked about here: #4054_
This would be beneficial and simpler way to transform generated color steps and overrides from themebuilder to design-tokens, css and figma. The mental model would also be closer to light-dark syntax in css which we are going to start using soon ™️™
Would like to get this done before v2 as this feature would deprecate and replace
overridestoday. In addition we need this to support custom colors for our new plugin as current structure does not support this.We support custom.
{ "themes": { "designsystemet": { "colors": { "accent": { "base-default": { "light": "#094A3F"}, // if base-defeault is declared we generate the full scale. "base-hover": "#0D7A5F", // overrides take presedence and if only one color-scheme is defined, we generate the other one. "custom-step": "#0D7A5F", // could be supported with custom step and manually adding hex code. Resolves to `--ds-color-accent-custom-step`? // defined step -> overrides (this will replace themes.overrides) }, "neutral": "#24272B", // backwards compatible with todays single top level color hex }, } } }Support this in our schema would also make it simpler to input values from other source such as CSS config #5396 (postcss parsed values populates this schema).
css-config -> parsed values with postcss/css-color (#5394) -> config (validates) -> design-token (or other outputs #4324 )