"Component tokens" component

[mimarz]

Make an internal component that automates documentation of a components "component tokens" to be used in Storybook (and Storefront in the future).

Notes:

• Use postcss plugins in js to parse our css
• Let import do the work and pass the content to the component
• List all CSS variables in a table
• Maybe support comments in code thats also interpreted?

Something along the lines of:
Input CSS:

.ds-button {
  --dsc-button-background--active: var(--ds-color-accent-base-active); /** Button background */
  …
}

Component use:

import css from '@digidr/designsystemet-css/button'

<ComponentTokens css={css} />

Rendered table:

Token	Description	Value
--dsc-button-background--active	Button background	var(--ds-color-accent-base-active)

[Barsnes]

I like this, but we should probably filter on --dsc-, and mark our internal variables with something like --dsci- (i for internal`)

[eirikbacker]

Agree! Like the concept - good work 💪 and marking internal is a good suggestion @Barsnes 🙌