Style dictionary update including adding colors

[lukasoppermann]

As mentioned to @rezrah in the loom, I am trying to get our config back to the SD basics and at the same time extract small functions.

Additionally I want the json files to be the only influence on the token output so that a user can just edit json files and does not have to expect any side effects form the script.

Focus: easy authoring & json that conform to w3c design token spec

Todos

• Add custom alpha function: https://github.com/lukasoppermann/style-dictionary-utils/blob/main/src/utilities/alpha.ts because the color2k transparentize function has very inconsistent behavior and does not work as we work with alpha
• Platforms:
  • CSS
  • SCSS with css variables
  • JS as commonJs module
  • TS as es6 export
  • Typescript definitions
  • JSON for docs
  • JSON for figma
  • JSON for vscode → no changes in output
  • Deprecated JSON → no changes in output
    • individual files for color.json, size.json , typograhy.json
    • build deprecated.json from tokens with deprecated property like @rezrah mentioned here: https://github.com/github/primer/pull/1309#discussion_r978409181
  • Removed JSON → File is just copied over → no changes in output
• JSON5 parser: Move to json5 for token source files. #357
• Color tokens
  • create scale source tokens
  • don't export base pipe base scales to output: https://github.com/github/github/pull/240557
  • create function source tokens
  • scales & merge with colorblindness scales
  • exceptions for functional tokens per color mode
• Shadows:
  • not correct as is not referencing color but moved out of color modes
  • may be solved by [Token update]: Shadows #359 → make shadow transform color with alpha values so we don't need specific shadow colors
  • if not solved by [Token update]: Shadows #359 we need to build shadows with reference to shadowColor
• Figma json
  • filter out all tokens that are not $type=color, $type=typography and have no figmaType
  • add figmaType to all tokens where applicable according to figmaTokens
• FontWeight transformer to number
• Dimension transformer (to px or to rem)
• Shadow transformer
• Transform colors alpha value when alpha is present
  • What happens if value is a color that is already transparent? → Alpha is added up (0.6 - 0.4 => 0.2)
• Update source token files to be w3c conform
  • add $type
  • change value to $value
  • add required letterSpacing to typography tokens hoping for w3c to change typography to not require all values
• add functional font family tokens
  ui, code, content and move system, sansSerif, serif, monospace to base

Cleanup

Could also be tackled after merging.

• Cleanup build file and how different builds are started
• Is there a better way to import color json files (currently it may be confusing for new people) at least storing names in short variables could improve readability
• Organize token folder?
  • base color tokens should files be prefixed with extension to show that they extend dark.json or light.json?
  • functional should exception files be placed in a subfolder?
  • should we split between dark and light mode into subfolders?

Questions

• How do we deal with prefix: Style dictionary update including adding colors #353 (comment)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 58c5979

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Variables changed

No variables changed

[github-actions]

🟢 No design token changes found

[lukasoppermann]

Hey @langermank & @rezrah, I am currently thinking about the prefix.

When do we want to have the primer prefix and for which outputs?

You are export with and without here: https://primer.style/primitives/typography and for sizes.
But only base has no prefix.

It also seems we don't have prefixes here: https://primer.style/react/theming or here https://unpkg.com/@primer/css@20.4.5/dist/primer.css

So should we not add prefixes?

Lastly I am not sure adding prefixes to js objects makes sense as you can prefix them when importing and with prefix you would get something like theme.primer.color.canvas.default.

import theme from '@primer/ts/light.ts'

[lukasoppermann]

Closing as everything is not merged via multiple other PRs.