lukasoppermann/design-tokens

Roadmap

lukasoppermann opened this issue · 4 comments

Roadmap

Beta

Colors

  • solid fills only
  • only one fill per color token

Borders

  • solid fills only
  • only one fill per token

Grids

  • support multiple grids

Sizes

  • only width is used

Effects

  • support multiple effects

Version 1.0

  • ignore styles that have a name starting with _

Colors

  • support gradients

Workflow

  • provide amazon style directory transformers for css & sass

Version 1.X

Primitives ?

  • should primitives be included and used to build tokens? e.g. font-family, color (without opacity), typescale (separated from font itself)
  • allow tokens that can be styles (e.g. text, color, etc.) to be created from elements as well?
    • this would allow to use core styles in other styles (e.g. core-color-primary could be used as the color for button-color-primary)
    • may allow for granular tokens, e.g. font-family or only font-size

Colors

  • support multiple fills?

Borders

  • support gradients
  • support multiple fills?
  • create reference if design token color are used

Sizes

Include different sizes, maybe the ones below (?):

  • spacers (only width)
  • padding (autolayout)
  • width
  • height

Others

  • Maybe include motion properties?
  • How can properties that are not applicable to figma be created and exported in figma?

Settings

  • setting to choose if units should be added or not (12px or just 12)
  • setting to include top level prefix (e.g. token or style)
  • setting to include category level prefix (e.g. color or typography)
  • setting to only import selected tokens e.g. only colors
  • toggle between not converting styles prefixed with _ and only converting styles that are subitem of _tokens

Workflow

Testing

  • implement tests #4

I really want the feature of Export Design Token File By Type, for example, _tokens/sizes Frame exported to sizes.json, _tokens/colors exported to colors.json.
In this way, we can export multiple json files.
This feature can be integrated with style dictionary v3 to automatically generate 1:1 token files based on a custom filter.

That is _tokens/colors > colors.json > colors.css.
more idiomatic to dev.

Hey @uptonking can you send a PR to include this?

Would it be possible to include elevation/dropshadow values?

Would it be possible to include elevation/dropshadow values?

This is currently working via effect styles. Do you have any issue with that as to why you feel it would need to also be included as a custom token?