Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extended colors in JSON should include generated tones #293

Open
joezappie opened this issue Apr 12, 2024 · 3 comments
Open

Extended colors in JSON should include generated tones #293

joezappie opened this issue Apr 12, 2024 · 3 comments

Comments

@joezappie
Copy link

joezappie commented Apr 12, 2024

Is your feature request related to a problem? Please describe.
The spec describes an "error" color, but I'd like to add extended colors for other states such as warn(orange), success(green), info(blue), which is a common design trend.

I'd like to take the export json and use in to generate tailwind theme colors. Extended colors however, only export the input value, where as a color like error gets the errorContainer/onErrorContainer/error/onError.

  "schemes": {
    "light": {
      "error": "#904A46",
      "onError": "#FFFFFF",
      "errorContainer": "#FFDAD7",
      "onErrorContainer": "#3B0909",
    },
   },
  "extendedColors": [
      {
        "name": "Warn",
        "color": "#CA6A34",
        "description": "",
        "harmonized": false
      }
    ],

Describe the solution you'd like
I think extended colors should also get these properties as well.

  "schemes": {
    "light": {
      "warn": "#CA6A34",
      "onWarn": "#FFFFFF",
      "warnContainer": "#FFDBCB",
      "onWarnContainer": "#341100",
    },
   },

The figma plugin generates them, so it would be nice if they were included as well.

image

Describe alternatives you've considered
Use the material-color-utilities library to generate them myself, but I'm not sure how to do that as theres almost no documentation on using it.

@etyarews
Copy link

For some reason there are two theme builders, the one you used doesn't generate custom colors, but use this link for an updated/beta(?) Theme Builder

@joezappie
Copy link
Author

I just tried that, but it looks like the exported json file is identical to the figma export where the extended colors do not include the container/on colors or them as a palette (0-100).

Theyre "generated" but not actually exported:

image

Example json:
material-theme.json

Good to see this tool describes which palette color is used, so I could use something to generate the palette and inject my own colors into the theme file in my tailwind plugin for the time being, but would be awesome to have this info in the json files already.

@etyarews
Copy link

Huh, I use compose and never looked at json. I expected them to have the same tokens, but apparently that's not the case. With json you at least get the ref tokens for primary, secondary, tertiary, surface and surface-variant, that's not the case with compose. See #262

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants