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

feat: add export format "Amazon Style Dictionary" #806

Open
TimKolberger opened this issue Aug 9, 2024 · 0 comments · May be fixed by #820
Open

feat: add export format "Amazon Style Dictionary" #806

TimKolberger opened this issue Aug 9, 2024 · 0 comments · May be fixed by #820
Labels
👩‍👧‍👦community feedback 🪩 🔥 🕺 cool topic some relevant topics, that we even also need to report in different rounds / to stakeholders

Comments

@TimKolberger
Copy link

TimKolberger commented Aug 9, 2024

Feature request

📝 Description

We maintain a separate design system with our own component library, and want to migrate to the new DB X tokens.
Our token management is based on Amazon Style Dictionary with our core tokens, semantic tokens and component tokens.

🧑‍🏫 Problem Statement

The Theme Builder export does not contain a .json export for the core and semantic tokens which are compatible with Style Dictionary.
The other exports (CSS, Android, Utils, or WhiteLabelTheme.json) are not compatible.

🧑‍🔬 Possible Solution

The Builder could export additional files in the Style Dictionary format:

.
├── StyleDictionary
│   └── core-tokens
│           ├── colors.json
│           ├── sizes.json
│           └── ...
│   ├──  semantic-tokens
│           ├── colors.json
│           └── colors-dark.json

Where the core-tokens/colors.json could look like this:

{
  "colors": {
    "blue": {
      "50": {
        "value": "#EFF7FD"
      },
      "100": {
        "value": "#e0effb"
      }
      // ...
  }
}

core-tokens/sizes.json:

{
  "sizes": {
    "1": {
      "value": "0.25rem"
    },
    "2": {
      "value": "0.5rem"
    }
    // ...
}

semantic-tokens/colors.json:

{
  "colors": {
    "brand": {
        "value": "{colors.red.500.value}" // variable references
      }
    // ...
  }
}

semantic-tokens/colors-dark.json:

{
  "colors": {
    "brand": {
      "_dark": {
        "value": "{colors.red.400.value}"
      }
    }
  }
}

📝 Additional Information

We use Style Dictionary to generate theme definitions for tailwind, Chakra UI, Vanilla Extract and plain CSS.
These new export formats would help us to align with the DB X Design System mid to long term.

@nmerget nmerget linked a pull request Aug 15, 2024 that will close this issue
@mfranzke mfranzke added the 🪩 🔥 🕺 cool topic some relevant topics, that we even also need to report in different rounds / to stakeholders label Aug 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
👩‍👧‍👦community feedback 🪩 🔥 🕺 cool topic some relevant topics, that we even also need to report in different rounds / to stakeholders
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants