Skip to content

Support for color step definition in schema that can make overrides simpler and transforming to other formats #5434

Description

@mimarz

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.

{
  "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 )

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    cli@digdir/designsystemet

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions