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.

Sign up for GitHub

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

Jump to bottom

feat: add style-dictionary tokens for download #820

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

feat: add style-dictionary tokens for download #820

wants to merge 5 commits into from

Conversation

nmerget
Copy link
Member

@nmerget nmerget commented Aug 15, 2024

closes #806

TimKolberger
TimKolberger reviewed Aug 15, 2024
View reviewed changes
Copy link

@TimKolberger TimKolberger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your time working on this!

I added a few comments regarding the style dictionary tokens generation.

Additionally I think there might be some opportunities when revisiting the idea of using Style Dictionary as the basis implementation and deriving all other export formats from it.

They have a Style Dictionary Playground which lets me assume, that it runs in the browser as well and does not need a server runtime. This could make it a good fit for this SPA as well.

src/utils/outputs/style-dictionary/colors.ts
return { colors };
};

export const getSDSpeakingColors = (
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: Is SpeakingColors an existing term in this application?

I did not find any naming in the Design Tokens W3C Spec, but the Figma Docs (and I 😄) use the name semantic tokens.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We use the term "semantic" for the colors successful, critical, informational and warning.
To avoid misunderstandings we decided to use "speaking-colors" for those tokens.

I can discuss this with our design colleagues, why they use the terms like this if you like

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would be interesting to know the thoughts behind the naming. "speaking color" seems to me like a failed translation from german to english.

I use the following token types:

  • core tokens: hardcoded values e.g. colors.red.500 = #f00
  • semantic tokens: tokens, which can alter their value depending of the surrounding context e.g. (color mode, parent dom node, user preferences)
  • component tokens: tokens, which can alter their value based on the behaviour of a component e.g. checked checkbox, collapsed accordion etc.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I asked a colleague, she said it was "grown historically" ^.^

Like I said they reserved the term "semantic" for another context. But we want to change the "speaking color" to "usage colors" (tbd. with the rest of the team).

Would it be a big problem on your side if the filename is usage-colors.json?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the info!

Would it be a big problem on your side if the filename is usage-colors.json?

No, filenames do not matter to Style Dictionary.

src/utils/outputs/style-dictionary/colors.ts Outdated Show resolved Hide resolved
src/utils/outputs/style-dictionary/colors.ts Outdated Show resolved Hide resolved
TimKolberger
TimKolberger reviewed Aug 15, 2024
View reviewed changes
src/utils/outputs/style-dictionary/colors.ts
const themeObj: any = {
origin: {
default: {
value: `{colors.${name}.${theme}.origin.default.value}`,

This comment was marked as outdated.

Sign in to view

This comment was marked as outdated.

Sign in to view

@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
@TimKolberger
Copy link

TimKolberger commented Aug 30, 2024 •
edited
Loading

I get the following referencing errors when reading in the tokens:

Reference Errors: Some token references (180) could not be found. 
Reference Errors:
Some token references (180) could not be found.

colors.light.neutral.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.neutral.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.neutral.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.neutral.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.neutral.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.neutral.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.brand.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.brand.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.brand.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.brand.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.brand.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.brand.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.informational.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.informational.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.informational.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.informational.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.informational.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.informational.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.warning.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.warning.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.warning.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.warning.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.warning.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.warning.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.successful.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.successful.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.successful.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.successful.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.successful.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.successful.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.critical.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.critical.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.critical.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.critical.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.critical.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.critical.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.yellow.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.yellow.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.yellow.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.yellow.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.yellow.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.yellow.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.orange.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.orange.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.orange.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.orange.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.orange.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.orange.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.red.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.red.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.red.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.red.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.red.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.red.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.pink.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.pink.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.pink.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.pink.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.pink.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.pink.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.violet.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.violet.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.violet.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.violet.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.violet.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.violet.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.blue.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.blue.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.blue.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.blue.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.blue.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.blue.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.cyan.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.cyan.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.cyan.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.cyan.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.cyan.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.cyan.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.turquoise.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.turquoise.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.turquoise.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.turquoise.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.turquoise.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.turquoise.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.light.green.origin.default.value tries to reference colors.light.origin.default.value, which is not defined.
colors.light.green.origin.hovered.value tries to reference colors.light.origin.hovered.value, which is not defined.
colors.light.green.origin.pressed.value tries to reference colors.light.origin.pressed.value, which is not defined.
colors.light.green.on.origin.default.value tries to reference colors.light.on.origin.default.value, which is not defined.
colors.light.green.on.origin.hovered.value tries to reference colors.light.on.origin.hovered.value, which is not defined.
colors.light.green.on.origin.pressed.value tries to reference colors.light.on.origin.pressed.value, which is not defined.
colors.dark.neutral.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.neutral.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.neutral.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.neutral.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.neutral.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.neutral.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.brand.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.brand.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.brand.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.brand.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.brand.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.brand.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.informational.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.informational.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.informational.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.informational.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.informational.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.informational.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.warning.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.warning.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.warning.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.warning.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.warning.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.warning.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.successful.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.successful.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.successful.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.successful.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.successful.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.successful.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.critical.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.critical.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.critical.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.critical.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.critical.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.critical.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.yellow.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.yellow.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.yellow.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.yellow.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.yellow.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.yellow.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.orange.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.orange.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.orange.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.orange.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.orange.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.orange.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.red.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.red.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.red.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.red.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.red.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.red.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.pink.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.pink.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.pink.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.pink.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.pink.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.pink.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.violet.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.violet.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.violet.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.violet.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.violet.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.violet.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.blue.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.blue.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.blue.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.blue.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.blue.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.blue.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.cyan.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.cyan.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.cyan.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.cyan.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.cyan.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.cyan.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.turquoise.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.turquoise.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.turquoise.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.turquoise.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.turquoise.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.turquoise.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.
colors.dark.green.origin.default.value tries to reference colors.dark.origin.default.value, which is not defined.
colors.dark.green.origin.hovered.value tries to reference colors.dark.origin.hovered.value, which is not defined.
colors.dark.green.origin.pressed.value tries to reference colors.dark.origin.pressed.value, which is not defined.
colors.dark.green.on.origin.default.value tries to reference colors.dark.on.origin.default.value, which is not defined.
colors.dark.green.on.origin.hovered.value tries to reference colors.dark.on.origin.hovered.value, which is not defined.
colors.dark.green.on.origin.pressed.value tries to reference colors.dark.on.origin.pressed.value, which is not defined.

Updated file:

speaking-colors.json 
{
  "colors": {
    "light": {
      "neutral": {
        "origin": {
          "default": { "value": "{colors.neutral.light.origin.default.value}" },
          "hovered": { "value": "{colors.neutral.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.neutral.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.neutral.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.neutral.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.neutral.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.neutral.9.value}" },
                  "hovered": { "value": "{colors.neutral.8.value}" },
                  "pressed": { "value": "{colors.neutral.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.neutral.10.value}" },
                  "hovered": { "value": "{colors.neutral.9.value}" },
                  "pressed": { "value": "{colors.neutral.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.neutral.7.value}" },
                  "hovered": { "value": "{colors.neutral.6.value}" },
                  "pressed": { "value": "{colors.neutral.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.neutral.6.value}" },
                  "hovered": { "value": "{colors.neutral.5.value}" },
                  "pressed": { "value": "{colors.neutral.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.neutral.5.value}" },
                  "hovered": { "value": "{colors.neutral.6.value}" },
                  "pressed": { "value": "{colors.neutral.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.neutral.3.value}" },
                  "hovered": { "value": "{colors.neutral.4.value}" },
                  "pressed": { "value": "{colors.neutral.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.neutral.14.value}" },
              "hovered": { "value": "{colors.neutral.13.value}" },
              "pressed": { "value": "{colors.neutral.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.neutral.14.value}" },
                "hovered": { "value": "{colors.neutral.13.value}" },
                "pressed": { "value": "{colors.neutral.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.neutral.13.value}" },
                "hovered": { "value": "{colors.neutral.12.value}" },
                "pressed": { "value": "{colors.neutral.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.neutral.12.value}" },
                "hovered": { "value": "{colors.neutral.11.value}" },
                "pressed": { "value": "{colors.neutral.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.neutral.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.neutral.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.neutral.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.neutral.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.neutral.3.value}" },
                "hovered": { "value": "{colors.neutral.4.value}" },
                "pressed": { "value": "{colors.neutral.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.neutral.6.value}" },
                "hovered": { "value": "{colors.neutral.5.value}" },
                "pressed": { "value": "{colors.neutral.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.neutral.7.value}" },
                "hovered": { "value": "{colors.neutral.6.value}" },
                "pressed": { "value": "{colors.neutral.5.value}" }
              }
            }
          }
        }
      },
      "brand": {
        "origin": {
          "default": { "value": "{colors.brand.light.origin.default.value}" },
          "hovered": { "value": "{colors.brand.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.brand.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.brand.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.brand.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.brand.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.brand.9.value}" },
                  "hovered": { "value": "{colors.brand.8.value}" },
                  "pressed": { "value": "{colors.brand.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.brand.10.value}" },
                  "hovered": { "value": "{colors.brand.9.value}" },
                  "pressed": { "value": "{colors.brand.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.brand.7.value}" },
                  "hovered": { "value": "{colors.brand.6.value}" },
                  "pressed": { "value": "{colors.brand.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.brand.6.value}" },
                  "hovered": { "value": "{colors.brand.5.value}" },
                  "pressed": { "value": "{colors.brand.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.brand.5.value}" },
                  "hovered": { "value": "{colors.brand.6.value}" },
                  "pressed": { "value": "{colors.brand.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.brand.3.value}" },
                  "hovered": { "value": "{colors.brand.4.value}" },
                  "pressed": { "value": "{colors.brand.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.brand.14.value}" },
              "hovered": { "value": "{colors.brand.13.value}" },
              "pressed": { "value": "{colors.brand.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.brand.14.value}" },
                "hovered": { "value": "{colors.brand.13.value}" },
                "pressed": { "value": "{colors.brand.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.brand.13.value}" },
                "hovered": { "value": "{colors.brand.12.value}" },
                "pressed": { "value": "{colors.brand.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.brand.12.value}" },
                "hovered": { "value": "{colors.brand.11.value}" },
                "pressed": { "value": "{colors.brand.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.brand.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.brand.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.brand.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.brand.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.brand.3.value}" },
                "hovered": { "value": "{colors.brand.4.value}" },
                "pressed": { "value": "{colors.brand.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.brand.6.value}" },
                "hovered": { "value": "{colors.brand.5.value}" },
                "pressed": { "value": "{colors.brand.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.brand.7.value}" },
                "hovered": { "value": "{colors.brand.6.value}" },
                "pressed": { "value": "{colors.brand.5.value}" }
              }
            }
          }
        }
      },
      "informational": {
        "origin": {
          "default": { "value": "{colors.informational.light.origin.default.value}" },
          "hovered": { "value": "{colors.informational.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.informational.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.informational.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.informational.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.informational.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.informational.9.value}" },
                  "hovered": { "value": "{colors.informational.8.value}" },
                  "pressed": { "value": "{colors.informational.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.informational.10.value}" },
                  "hovered": { "value": "{colors.informational.9.value}" },
                  "pressed": { "value": "{colors.informational.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.informational.7.value}" },
                  "hovered": { "value": "{colors.informational.6.value}" },
                  "pressed": { "value": "{colors.informational.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.informational.6.value}" },
                  "hovered": { "value": "{colors.informational.5.value}" },
                  "pressed": { "value": "{colors.informational.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.informational.5.value}" },
                  "hovered": { "value": "{colors.informational.6.value}" },
                  "pressed": { "value": "{colors.informational.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.informational.3.value}" },
                  "hovered": { "value": "{colors.informational.4.value}" },
                  "pressed": { "value": "{colors.informational.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.informational.14.value}" },
              "hovered": { "value": "{colors.informational.13.value}" },
              "pressed": { "value": "{colors.informational.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.informational.14.value}" },
                "hovered": { "value": "{colors.informational.13.value}" },
                "pressed": { "value": "{colors.informational.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.informational.13.value}" },
                "hovered": { "value": "{colors.informational.12.value}" },
                "pressed": { "value": "{colors.informational.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.informational.12.value}" },
                "hovered": { "value": "{colors.informational.11.value}" },
                "pressed": { "value": "{colors.informational.10.value}" }
              }
            },
            "transparent": {
              "full": {
                "default": { "value": "{colors.informational.6.value}", "transparent": 100 }
              },
              "semi": {
                "default": { "value": "{colors.informational.6.value}", "transparent": 92 }
              },
              "hovered": { "value": "{colors.informational.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.informational.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.informational.3.value}" },
                "hovered": { "value": "{colors.informational.4.value}" },
                "pressed": { "value": "{colors.informational.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.informational.6.value}" },
                "hovered": { "value": "{colors.informational.5.value}" },
                "pressed": { "value": "{colors.informational.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.informational.7.value}" },
                "hovered": { "value": "{colors.informational.6.value}" },
                "pressed": { "value": "{colors.informational.5.value}" }
              }
            }
          }
        }
      },
      "warning": {
        "origin": {
          "default": { "value": "{colors.warning.light.origin.default.value}" },
          "hovered": { "value": "{colors.warning.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.warning.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.warning.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.warning.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.warning.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.warning.9.value}" },
                  "hovered": { "value": "{colors.warning.8.value}" },
                  "pressed": { "value": "{colors.warning.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.warning.10.value}" },
                  "hovered": { "value": "{colors.warning.9.value}" },
                  "pressed": { "value": "{colors.warning.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.warning.7.value}" },
                  "hovered": { "value": "{colors.warning.6.value}" },
                  "pressed": { "value": "{colors.warning.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.warning.6.value}" },
                  "hovered": { "value": "{colors.warning.5.value}" },
                  "pressed": { "value": "{colors.warning.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.warning.5.value}" },
                  "hovered": { "value": "{colors.warning.6.value}" },
                  "pressed": { "value": "{colors.warning.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.warning.3.value}" },
                  "hovered": { "value": "{colors.warning.4.value}" },
                  "pressed": { "value": "{colors.warning.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.warning.14.value}" },
              "hovered": { "value": "{colors.warning.13.value}" },
              "pressed": { "value": "{colors.warning.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.warning.14.value}" },
                "hovered": { "value": "{colors.warning.13.value}" },
                "pressed": { "value": "{colors.warning.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.warning.13.value}" },
                "hovered": { "value": "{colors.warning.12.value}" },
                "pressed": { "value": "{colors.warning.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.warning.12.value}" },
                "hovered": { "value": "{colors.warning.11.value}" },
                "pressed": { "value": "{colors.warning.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.warning.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.warning.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.warning.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.warning.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.warning.3.value}" },
                "hovered": { "value": "{colors.warning.4.value}" },
                "pressed": { "value": "{colors.warning.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.warning.6.value}" },
                "hovered": { "value": "{colors.warning.5.value}" },
                "pressed": { "value": "{colors.warning.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.warning.7.value}" },
                "hovered": { "value": "{colors.warning.6.value}" },
                "pressed": { "value": "{colors.warning.5.value}" }
              }
            }
          }
        }
      },
      "successful": {
        "origin": {
          "default": { "value": "{colors.successful.light.origin.default.value}" },
          "hovered": { "value": "{colors.successful.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.successful.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.successful.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.successful.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.successful.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.successful.9.value}" },
                  "hovered": { "value": "{colors.successful.8.value}" },
                  "pressed": { "value": "{colors.successful.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.successful.10.value}" },
                  "hovered": { "value": "{colors.successful.9.value}" },
                  "pressed": { "value": "{colors.successful.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.successful.7.value}" },
                  "hovered": { "value": "{colors.successful.6.value}" },
                  "pressed": { "value": "{colors.successful.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.successful.6.value}" },
                  "hovered": { "value": "{colors.successful.5.value}" },
                  "pressed": { "value": "{colors.successful.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.successful.5.value}" },
                  "hovered": { "value": "{colors.successful.6.value}" },
                  "pressed": { "value": "{colors.successful.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.successful.3.value}" },
                  "hovered": { "value": "{colors.successful.4.value}" },
                  "pressed": { "value": "{colors.successful.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.successful.14.value}" },
              "hovered": { "value": "{colors.successful.13.value}" },
              "pressed": { "value": "{colors.successful.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.successful.14.value}" },
                "hovered": { "value": "{colors.successful.13.value}" },
                "pressed": { "value": "{colors.successful.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.successful.13.value}" },
                "hovered": { "value": "{colors.successful.12.value}" },
                "pressed": { "value": "{colors.successful.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.successful.12.value}" },
                "hovered": { "value": "{colors.successful.11.value}" },
                "pressed": { "value": "{colors.successful.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.successful.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.successful.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.successful.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.successful.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.successful.3.value}" },
                "hovered": { "value": "{colors.successful.4.value}" },
                "pressed": { "value": "{colors.successful.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.successful.6.value}" },
                "hovered": { "value": "{colors.successful.5.value}" },
                "pressed": { "value": "{colors.successful.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.successful.7.value}" },
                "hovered": { "value": "{colors.successful.6.value}" },
                "pressed": { "value": "{colors.successful.5.value}" }
              }
            }
          }
        }
      },
      "critical": {
        "origin": {
          "default": { "value": "{colors.critical.light.origin.default.value}" },
          "hovered": { "value": "{colors.critical.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.critical.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.critical.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.critical.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.critical.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.critical.9.value}" },
                  "hovered": { "value": "{colors.critical.8.value}" },
                  "pressed": { "value": "{colors.critical.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.critical.10.value}" },
                  "hovered": { "value": "{colors.critical.9.value}" },
                  "pressed": { "value": "{colors.critical.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.critical.7.value}" },
                  "hovered": { "value": "{colors.critical.6.value}" },
                  "pressed": { "value": "{colors.critical.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.critical.6.value}" },
                  "hovered": { "value": "{colors.critical.5.value}" },
                  "pressed": { "value": "{colors.critical.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.critical.5.value}" },
                  "hovered": { "value": "{colors.critical.6.value}" },
                  "pressed": { "value": "{colors.critical.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.critical.3.value}" },
                  "hovered": { "value": "{colors.critical.4.value}" },
                  "pressed": { "value": "{colors.critical.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.critical.14.value}" },
              "hovered": { "value": "{colors.critical.13.value}" },
              "pressed": { "value": "{colors.critical.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.critical.14.value}" },
                "hovered": { "value": "{colors.critical.13.value}" },
                "pressed": { "value": "{colors.critical.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.critical.13.value}" },
                "hovered": { "value": "{colors.critical.12.value}" },
                "pressed": { "value": "{colors.critical.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.critical.12.value}" },
                "hovered": { "value": "{colors.critical.11.value}" },
                "pressed": { "value": "{colors.critical.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.critical.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.critical.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.critical.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.critical.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.critical.3.value}" },
                "hovered": { "value": "{colors.critical.4.value}" },
                "pressed": { "value": "{colors.critical.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.critical.6.value}" },
                "hovered": { "value": "{colors.critical.5.value}" },
                "pressed": { "value": "{colors.critical.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.critical.7.value}" },
                "hovered": { "value": "{colors.critical.6.value}" },
                "pressed": { "value": "{colors.critical.5.value}" }
              }
            }
          }
        }
      },
      "yellow": {
        "origin": {
          "default": { "value": "{colors.yellow.light.origin.default.value}" },
          "hovered": { "value": "{colors.yellow.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.yellow.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.yellow.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.yellow.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.yellow.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.yellow.9.value}" },
                  "hovered": { "value": "{colors.yellow.8.value}" },
                  "pressed": { "value": "{colors.yellow.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.yellow.10.value}" },
                  "hovered": { "value": "{colors.yellow.9.value}" },
                  "pressed": { "value": "{colors.yellow.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.yellow.7.value}" },
                  "hovered": { "value": "{colors.yellow.6.value}" },
                  "pressed": { "value": "{colors.yellow.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.yellow.6.value}" },
                  "hovered": { "value": "{colors.yellow.5.value}" },
                  "pressed": { "value": "{colors.yellow.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.yellow.5.value}" },
                  "hovered": { "value": "{colors.yellow.6.value}" },
                  "pressed": { "value": "{colors.yellow.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.yellow.3.value}" },
                  "hovered": { "value": "{colors.yellow.4.value}" },
                  "pressed": { "value": "{colors.yellow.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.yellow.14.value}" },
              "hovered": { "value": "{colors.yellow.13.value}" },
              "pressed": { "value": "{colors.yellow.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.yellow.14.value}" },
                "hovered": { "value": "{colors.yellow.13.value}" },
                "pressed": { "value": "{colors.yellow.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.yellow.13.value}" },
                "hovered": { "value": "{colors.yellow.12.value}" },
                "pressed": { "value": "{colors.yellow.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.yellow.12.value}" },
                "hovered": { "value": "{colors.yellow.11.value}" },
                "pressed": { "value": "{colors.yellow.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.yellow.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.yellow.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.yellow.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.yellow.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.yellow.3.value}" },
                "hovered": { "value": "{colors.yellow.4.value}" },
                "pressed": { "value": "{colors.yellow.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.yellow.6.value}" },
                "hovered": { "value": "{colors.yellow.5.value}" },
                "pressed": { "value": "{colors.yellow.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.yellow.7.value}" },
                "hovered": { "value": "{colors.yellow.6.value}" },
                "pressed": { "value": "{colors.yellow.5.value}" }
              }
            }
          }
        }
      },
      "orange": {
        "origin": {
          "default": { "value": "{colors.orange.light.origin.default.value}" },
          "hovered": { "value": "{colors.orange.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.orange.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.orange.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.orange.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.orange.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.orange.9.value}" },
                  "hovered": { "value": "{colors.orange.8.value}" },
                  "pressed": { "value": "{colors.orange.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.orange.10.value}" },
                  "hovered": { "value": "{colors.orange.9.value}" },
                  "pressed": { "value": "{colors.orange.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.orange.7.value}" },
                  "hovered": { "value": "{colors.orange.6.value}" },
                  "pressed": { "value": "{colors.orange.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.orange.6.value}" },
                  "hovered": { "value": "{colors.orange.5.value}" },
                  "pressed": { "value": "{colors.orange.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.orange.5.value}" },
                  "hovered": { "value": "{colors.orange.6.value}" },
                  "pressed": { "value": "{colors.orange.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.orange.3.value}" },
                  "hovered": { "value": "{colors.orange.4.value}" },
                  "pressed": { "value": "{colors.orange.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.orange.14.value}" },
              "hovered": { "value": "{colors.orange.13.value}" },
              "pressed": { "value": "{colors.orange.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.orange.14.value}" },
                "hovered": { "value": "{colors.orange.13.value}" },
                "pressed": { "value": "{colors.orange.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.orange.13.value}" },
                "hovered": { "value": "{colors.orange.12.value}" },
                "pressed": { "value": "{colors.orange.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.orange.12.value}" },
                "hovered": { "value": "{colors.orange.11.value}" },
                "pressed": { "value": "{colors.orange.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.orange.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.orange.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.orange.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.orange.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.orange.3.value}" },
                "hovered": { "value": "{colors.orange.4.value}" },
                "pressed": { "value": "{colors.orange.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.orange.6.value}" },
                "hovered": { "value": "{colors.orange.5.value}" },
                "pressed": { "value": "{colors.orange.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.orange.7.value}" },
                "hovered": { "value": "{colors.orange.6.value}" },
                "pressed": { "value": "{colors.orange.5.value}" }
              }
            }
          }
        }
      },
      "red": {
        "origin": {
          "default": { "value": "{colors.red.light.origin.default.value}" },
          "hovered": { "value": "{colors.red.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.red.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.red.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.red.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.red.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.red.9.value}" },
                  "hovered": { "value": "{colors.red.8.value}" },
                  "pressed": { "value": "{colors.red.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.red.10.value}" },
                  "hovered": { "value": "{colors.red.9.value}" },
                  "pressed": { "value": "{colors.red.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.red.7.value}" },
                  "hovered": { "value": "{colors.red.6.value}" },
                  "pressed": { "value": "{colors.red.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.red.6.value}" },
                  "hovered": { "value": "{colors.red.5.value}" },
                  "pressed": { "value": "{colors.red.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.red.5.value}" },
                  "hovered": { "value": "{colors.red.6.value}" },
                  "pressed": { "value": "{colors.red.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.red.3.value}" },
                  "hovered": { "value": "{colors.red.4.value}" },
                  "pressed": { "value": "{colors.red.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.red.14.value}" },
              "hovered": { "value": "{colors.red.13.value}" },
              "pressed": { "value": "{colors.red.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.red.14.value}" },
                "hovered": { "value": "{colors.red.13.value}" },
                "pressed": { "value": "{colors.red.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.red.13.value}" },
                "hovered": { "value": "{colors.red.12.value}" },
                "pressed": { "value": "{colors.red.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.red.12.value}" },
                "hovered": { "value": "{colors.red.11.value}" },
                "pressed": { "value": "{colors.red.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.red.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.red.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.red.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.red.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.red.3.value}" },
                "hovered": { "value": "{colors.red.4.value}" },
                "pressed": { "value": "{colors.red.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.red.6.value}" },
                "hovered": { "value": "{colors.red.5.value}" },
                "pressed": { "value": "{colors.red.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.red.7.value}" },
                "hovered": { "value": "{colors.red.6.value}" },
                "pressed": { "value": "{colors.red.5.value}" }
              }
            }
          }
        }
      },
      "pink": {
        "origin": {
          "default": { "value": "{colors.pink.light.origin.default.value}" },
          "hovered": { "value": "{colors.pink.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.pink.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.pink.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.pink.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.pink.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.pink.9.value}" },
                  "hovered": { "value": "{colors.pink.8.value}" },
                  "pressed": { "value": "{colors.pink.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.pink.10.value}" },
                  "hovered": { "value": "{colors.pink.9.value}" },
                  "pressed": { "value": "{colors.pink.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.pink.7.value}" },
                  "hovered": { "value": "{colors.pink.6.value}" },
                  "pressed": { "value": "{colors.pink.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.pink.6.value}" },
                  "hovered": { "value": "{colors.pink.5.value}" },
                  "pressed": { "value": "{colors.pink.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.pink.5.value}" },
                  "hovered": { "value": "{colors.pink.6.value}" },
                  "pressed": { "value": "{colors.pink.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.pink.3.value}" },
                  "hovered": { "value": "{colors.pink.4.value}" },
                  "pressed": { "value": "{colors.pink.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.pink.14.value}" },
              "hovered": { "value": "{colors.pink.13.value}" },
              "pressed": { "value": "{colors.pink.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.pink.14.value}" },
                "hovered": { "value": "{colors.pink.13.value}" },
                "pressed": { "value": "{colors.pink.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.pink.13.value}" },
                "hovered": { "value": "{colors.pink.12.value}" },
                "pressed": { "value": "{colors.pink.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.pink.12.value}" },
                "hovered": { "value": "{colors.pink.11.value}" },
                "pressed": { "value": "{colors.pink.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.pink.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.pink.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.pink.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.pink.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.pink.3.value}" },
                "hovered": { "value": "{colors.pink.4.value}" },
                "pressed": { "value": "{colors.pink.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.pink.6.value}" },
                "hovered": { "value": "{colors.pink.5.value}" },
                "pressed": { "value": "{colors.pink.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.pink.7.value}" },
                "hovered": { "value": "{colors.pink.6.value}" },
                "pressed": { "value": "{colors.pink.5.value}" }
              }
            }
          }
        }
      },
      "violet": {
        "origin": {
          "default": { "value": "{colors.violet.light.origin.default.value}" },
          "hovered": { "value": "{colors.violet.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.violet.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.violet.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.violet.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.violet.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.violet.9.value}" },
                  "hovered": { "value": "{colors.violet.8.value}" },
                  "pressed": { "value": "{colors.violet.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.violet.10.value}" },
                  "hovered": { "value": "{colors.violet.9.value}" },
                  "pressed": { "value": "{colors.violet.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.violet.7.value}" },
                  "hovered": { "value": "{colors.violet.6.value}" },
                  "pressed": { "value": "{colors.violet.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.violet.6.value}" },
                  "hovered": { "value": "{colors.violet.5.value}" },
                  "pressed": { "value": "{colors.violet.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.violet.5.value}" },
                  "hovered": { "value": "{colors.violet.6.value}" },
                  "pressed": { "value": "{colors.violet.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.violet.3.value}" },
                  "hovered": { "value": "{colors.violet.4.value}" },
                  "pressed": { "value": "{colors.violet.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.violet.14.value}" },
              "hovered": { "value": "{colors.violet.13.value}" },
              "pressed": { "value": "{colors.violet.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.violet.14.value}" },
                "hovered": { "value": "{colors.violet.13.value}" },
                "pressed": { "value": "{colors.violet.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.violet.13.value}" },
                "hovered": { "value": "{colors.violet.12.value}" },
                "pressed": { "value": "{colors.violet.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.violet.12.value}" },
                "hovered": { "value": "{colors.violet.11.value}" },
                "pressed": { "value": "{colors.violet.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.violet.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.violet.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.violet.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.violet.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.violet.3.value}" },
                "hovered": { "value": "{colors.violet.4.value}" },
                "pressed": { "value": "{colors.violet.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.violet.6.value}" },
                "hovered": { "value": "{colors.violet.5.value}" },
                "pressed": { "value": "{colors.violet.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.violet.7.value}" },
                "hovered": { "value": "{colors.violet.6.value}" },
                "pressed": { "value": "{colors.violet.5.value}" }
              }
            }
          }
        }
      },
      "blue": {
        "origin": {
          "default": { "value": "{colors.blue.light.origin.default.value}" },
          "hovered": { "value": "{colors.blue.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.blue.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.blue.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.blue.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.blue.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.blue.9.value}" },
                  "hovered": { "value": "{colors.blue.8.value}" },
                  "pressed": { "value": "{colors.blue.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.blue.10.value}" },
                  "hovered": { "value": "{colors.blue.9.value}" },
                  "pressed": { "value": "{colors.blue.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.blue.7.value}" },
                  "hovered": { "value": "{colors.blue.6.value}" },
                  "pressed": { "value": "{colors.blue.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.blue.6.value}" },
                  "hovered": { "value": "{colors.blue.5.value}" },
                  "pressed": { "value": "{colors.blue.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.blue.5.value}" },
                  "hovered": { "value": "{colors.blue.6.value}" },
                  "pressed": { "value": "{colors.blue.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.blue.3.value}" },
                  "hovered": { "value": "{colors.blue.4.value}" },
                  "pressed": { "value": "{colors.blue.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.blue.14.value}" },
              "hovered": { "value": "{colors.blue.13.value}" },
              "pressed": { "value": "{colors.blue.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.blue.14.value}" },
                "hovered": { "value": "{colors.blue.13.value}" },
                "pressed": { "value": "{colors.blue.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.blue.13.value}" },
                "hovered": { "value": "{colors.blue.12.value}" },
                "pressed": { "value": "{colors.blue.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.blue.12.value}" },
                "hovered": { "value": "{colors.blue.11.value}" },
                "pressed": { "value": "{colors.blue.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.blue.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.blue.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.blue.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.blue.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.blue.3.value}" },
                "hovered": { "value": "{colors.blue.4.value}" },
                "pressed": { "value": "{colors.blue.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.blue.6.value}" },
                "hovered": { "value": "{colors.blue.5.value}" },
                "pressed": { "value": "{colors.blue.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.blue.7.value}" },
                "hovered": { "value": "{colors.blue.6.value}" },
                "pressed": { "value": "{colors.blue.5.value}" }
              }
            }
          }
        }
      },
      "cyan": {
        "origin": {
          "default": { "value": "{colors.cyan.light.origin.default.value}" },
          "hovered": { "value": "{colors.cyan.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.cyan.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.cyan.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.cyan.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.cyan.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.cyan.9.value}" },
                  "hovered": { "value": "{colors.cyan.8.value}" },
                  "pressed": { "value": "{colors.cyan.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.cyan.10.value}" },
                  "hovered": { "value": "{colors.cyan.9.value}" },
                  "pressed": { "value": "{colors.cyan.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.cyan.7.value}" },
                  "hovered": { "value": "{colors.cyan.6.value}" },
                  "pressed": { "value": "{colors.cyan.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.cyan.6.value}" },
                  "hovered": { "value": "{colors.cyan.5.value}" },
                  "pressed": { "value": "{colors.cyan.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.cyan.5.value}" },
                  "hovered": { "value": "{colors.cyan.6.value}" },
                  "pressed": { "value": "{colors.cyan.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.cyan.3.value}" },
                  "hovered": { "value": "{colors.cyan.4.value}" },
                  "pressed": { "value": "{colors.cyan.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.cyan.14.value}" },
              "hovered": { "value": "{colors.cyan.13.value}" },
              "pressed": { "value": "{colors.cyan.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.cyan.14.value}" },
                "hovered": { "value": "{colors.cyan.13.value}" },
                "pressed": { "value": "{colors.cyan.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.cyan.13.value}" },
                "hovered": { "value": "{colors.cyan.12.value}" },
                "pressed": { "value": "{colors.cyan.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.cyan.12.value}" },
                "hovered": { "value": "{colors.cyan.11.value}" },
                "pressed": { "value": "{colors.cyan.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.cyan.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.cyan.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.cyan.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.cyan.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.cyan.3.value}" },
                "hovered": { "value": "{colors.cyan.4.value}" },
                "pressed": { "value": "{colors.cyan.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.cyan.6.value}" },
                "hovered": { "value": "{colors.cyan.5.value}" },
                "pressed": { "value": "{colors.cyan.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.cyan.7.value}" },
                "hovered": { "value": "{colors.cyan.6.value}" },
                "pressed": { "value": "{colors.cyan.5.value}" }
              }
            }
          }
        }
      },
      "turquoise": {
        "origin": {
          "default": { "value": "{colors.turquoise.light.origin.default.value}" },
          "hovered": { "value": "{colors.turquoise.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.turquoise.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.turquoise.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.turquoise.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.turquoise.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.turquoise.9.value}" },
                  "hovered": { "value": "{colors.turquoise.8.value}" },
                  "pressed": { "value": "{colors.turquoise.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.turquoise.10.value}" },
                  "hovered": { "value": "{colors.turquoise.9.value}" },
                  "pressed": { "value": "{colors.turquoise.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.turquoise.7.value}" },
                  "hovered": { "value": "{colors.turquoise.6.value}" },
                  "pressed": { "value": "{colors.turquoise.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.turquoise.6.value}" },
                  "hovered": { "value": "{colors.turquoise.5.value}" },
                  "pressed": { "value": "{colors.turquoise.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.turquoise.5.value}" },
                  "hovered": { "value": "{colors.turquoise.6.value}" },
                  "pressed": { "value": "{colors.turquoise.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.turquoise.3.value}" },
                  "hovered": { "value": "{colors.turquoise.4.value}" },
                  "pressed": { "value": "{colors.turquoise.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.turquoise.14.value}" },
              "hovered": { "value": "{colors.turquoise.13.value}" },
              "pressed": { "value": "{colors.turquoise.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.turquoise.14.value}" },
                "hovered": { "value": "{colors.turquoise.13.value}" },
                "pressed": { "value": "{colors.turquoise.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.turquoise.13.value}" },
                "hovered": { "value": "{colors.turquoise.12.value}" },
                "pressed": { "value": "{colors.turquoise.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.turquoise.12.value}" },
                "hovered": { "value": "{colors.turquoise.11.value}" },
                "pressed": { "value": "{colors.turquoise.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.turquoise.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.turquoise.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.turquoise.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.turquoise.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.turquoise.3.value}" },
                "hovered": { "value": "{colors.turquoise.4.value}" },
                "pressed": { "value": "{colors.turquoise.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.turquoise.6.value}" },
                "hovered": { "value": "{colors.turquoise.5.value}" },
                "pressed": { "value": "{colors.turquoise.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.turquoise.7.value}" },
                "hovered": { "value": "{colors.turquoise.6.value}" },
                "pressed": { "value": "{colors.turquoise.5.value}" }
              }
            }
          }
        }
      },
      "green": {
        "origin": {
          "default": { "value": "{colors.green.light.origin.default.value}" },
          "hovered": { "value": "{colors.green.light.origin.hovered.value}" },
          "pressed": { "value": "{colors.green.light.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.green.light.on.origin.default.value}" },
            "hovered": { "value": "{colors.green.light.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.green.light.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.green.9.value}" },
                  "hovered": { "value": "{colors.green.8.value}" },
                  "pressed": { "value": "{colors.green.7.value}" }
                },
                "60": {
                  "default": { "value": "{colors.green.10.value}" },
                  "hovered": { "value": "{colors.green.9.value}" },
                  "pressed": { "value": "{colors.green.8.value}" }
                },
                "70": {
                  "default": { "value": "{colors.green.7.value}" },
                  "hovered": { "value": "{colors.green.6.value}" },
                  "pressed": { "value": "{colors.green.5.value}" }
                },
                "80": {
                  "default": { "value": "{colors.green.6.value}" },
                  "hovered": { "value": "{colors.green.5.value}" },
                  "pressed": { "value": "{colors.green.4.value}" }
                },
                "90": {
                  "default": { "value": "{colors.green.5.value}" },
                  "hovered": { "value": "{colors.green.6.value}" },
                  "pressed": { "value": "{colors.green.7.value}" }
                },
                "100": {
                  "default": { "value": "{colors.green.3.value}" },
                  "hovered": { "value": "{colors.green.4.value}" },
                  "pressed": { "value": "{colors.green.5.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.green.14.value}" },
              "hovered": { "value": "{colors.green.13.value}" },
              "pressed": { "value": "{colors.green.12.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.green.14.value}" },
                "hovered": { "value": "{colors.green.13.value}" },
                "pressed": { "value": "{colors.green.12.value}" }
              },
              "2": {
                "default": { "value": "{colors.green.13.value}" },
                "hovered": { "value": "{colors.green.12.value}" },
                "pressed": { "value": "{colors.green.11.value}" }
              },
              "3": {
                "default": { "value": "{colors.green.12.value}" },
                "hovered": { "value": "{colors.green.11.value}" },
                "pressed": { "value": "{colors.green.10.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.green.6.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.green.6.value}", "transparent": 92 } },
              "hovered": { "value": "{colors.green.6.value}", "transparent": 84 },
              "pressed": { "value": "{colors.green.6.value}", "transparent": 76 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.green.3.value}" },
                "hovered": { "value": "{colors.green.4.value}" },
                "pressed": { "value": "{colors.green.5.value}" }
              },
              "high": {
                "default": { "value": "{colors.green.6.value}" },
                "hovered": { "value": "{colors.green.5.value}" },
                "pressed": { "value": "{colors.green.4.value}" }
              },
              "low": {
                "default": { "value": "{colors.green.7.value}" },
                "hovered": { "value": "{colors.green.6.value}" },
                "pressed": { "value": "{colors.green.5.value}" }
              }
            }
          }
        }
      }
    },
    "dark": {
      "neutral": {
        "origin": {
          "default": { "value": "{colors.neutral.dark.origin.default.value}" },
          "hovered": { "value": "{colors.neutral.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.neutral.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.neutral.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.neutral.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.neutral.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.neutral.5.value}" },
                  "hovered": { "value": "{colors.neutral.4.value}" },
                  "pressed": { "value": "{colors.neutral.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.neutral.6.value}" },
                  "hovered": { "value": "{colors.neutral.5.value}" },
                  "pressed": { "value": "{colors.neutral.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.neutral.8.value}" },
                  "hovered": { "value": "{colors.neutral.7.value}" },
                  "pressed": { "value": "{colors.neutral.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.neutral.9.value}" },
                  "hovered": { "value": "{colors.neutral.8.value}" },
                  "pressed": { "value": "{colors.neutral.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.neutral.10.value}" },
                  "hovered": { "value": "{colors.neutral.9.value}" },
                  "pressed": { "value": "{colors.neutral.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.neutral.12.value}" },
                  "hovered": { "value": "{colors.neutral.11.value}" },
                  "pressed": { "value": "{colors.neutral.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.neutral.3.value}" },
              "hovered": { "value": "{colors.neutral.4.value}" },
              "pressed": { "value": "{colors.neutral.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.neutral.3.value}" },
                "hovered": { "value": "{colors.neutral.4.value}" },
                "pressed": { "value": "{colors.neutral.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.neutral.2.value}" },
                "hovered": { "value": "{colors.neutral.3.value}" },
                "pressed": { "value": "{colors.neutral.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.neutral.1.value}" },
                "hovered": { "value": "{colors.neutral.2.value}" },
                "pressed": { "value": "{colors.neutral.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.neutral.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.neutral.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.neutral.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.neutral.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.neutral.12.value}" },
                "hovered": { "value": "{colors.neutral.11.value}" },
                "pressed": { "value": "{colors.neutral.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.neutral.9.value}" },
                "hovered": { "value": "{colors.neutral.8.value}" },
                "pressed": { "value": "{colors.neutral.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.neutral.8.value}" },
                "hovered": { "value": "{colors.neutral.7.value}" },
                "pressed": { "value": "{colors.neutral.6.value}" }
              }
            }
          }
        }
      },
      "brand": {
        "origin": {
          "default": { "value": "{colors.brand.dark.origin.default.value}" },
          "hovered": { "value": "{colors.brand.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.brand.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.brand.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.brand.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.brand.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.brand.5.value}" },
                  "hovered": { "value": "{colors.brand.4.value}" },
                  "pressed": { "value": "{colors.brand.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.brand.6.value}" },
                  "hovered": { "value": "{colors.brand.5.value}" },
                  "pressed": { "value": "{colors.brand.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.brand.8.value}" },
                  "hovered": { "value": "{colors.brand.7.value}" },
                  "pressed": { "value": "{colors.brand.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.brand.9.value}" },
                  "hovered": { "value": "{colors.brand.8.value}" },
                  "pressed": { "value": "{colors.brand.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.brand.10.value}" },
                  "hovered": { "value": "{colors.brand.9.value}" },
                  "pressed": { "value": "{colors.brand.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.brand.12.value}" },
                  "hovered": { "value": "{colors.brand.11.value}" },
                  "pressed": { "value": "{colors.brand.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.brand.3.value}" },
              "hovered": { "value": "{colors.brand.4.value}" },
              "pressed": { "value": "{colors.brand.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.brand.3.value}" },
                "hovered": { "value": "{colors.brand.4.value}" },
                "pressed": { "value": "{colors.brand.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.brand.2.value}" },
                "hovered": { "value": "{colors.brand.3.value}" },
                "pressed": { "value": "{colors.brand.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.brand.1.value}" },
                "hovered": { "value": "{colors.brand.2.value}" },
                "pressed": { "value": "{colors.brand.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.brand.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.brand.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.brand.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.brand.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.brand.12.value}" },
                "hovered": { "value": "{colors.brand.11.value}" },
                "pressed": { "value": "{colors.brand.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.brand.9.value}" },
                "hovered": { "value": "{colors.brand.8.value}" },
                "pressed": { "value": "{colors.brand.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.brand.8.value}" },
                "hovered": { "value": "{colors.brand.7.value}" },
                "pressed": { "value": "{colors.brand.6.value}" }
              }
            }
          }
        }
      },
      "informational": {
        "origin": {
          "default": { "value": "{colors.informational.dark.origin.default.value}" },
          "hovered": { "value": "{colors.informational.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.informational.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.informational.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.informational.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.informational.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.informational.5.value}" },
                  "hovered": { "value": "{colors.informational.4.value}" },
                  "pressed": { "value": "{colors.informational.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.informational.6.value}" },
                  "hovered": { "value": "{colors.informational.5.value}" },
                  "pressed": { "value": "{colors.informational.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.informational.8.value}" },
                  "hovered": { "value": "{colors.informational.7.value}" },
                  "pressed": { "value": "{colors.informational.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.informational.9.value}" },
                  "hovered": { "value": "{colors.informational.8.value}" },
                  "pressed": { "value": "{colors.informational.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.informational.10.value}" },
                  "hovered": { "value": "{colors.informational.9.value}" },
                  "pressed": { "value": "{colors.informational.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.informational.12.value}" },
                  "hovered": { "value": "{colors.informational.11.value}" },
                  "pressed": { "value": "{colors.informational.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.informational.3.value}" },
              "hovered": { "value": "{colors.informational.4.value}" },
              "pressed": { "value": "{colors.informational.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.informational.3.value}" },
                "hovered": { "value": "{colors.informational.4.value}" },
                "pressed": { "value": "{colors.informational.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.informational.2.value}" },
                "hovered": { "value": "{colors.informational.3.value}" },
                "pressed": { "value": "{colors.informational.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.informational.1.value}" },
                "hovered": { "value": "{colors.informational.2.value}" },
                "pressed": { "value": "{colors.informational.3.value}" }
              }
            },
            "transparent": {
              "full": {
                "default": { "value": "{colors.informational.9.value}", "transparent": 100 }
              },
              "semi": {
                "default": { "value": "{colors.informational.9.value}", "transparent": 84 }
              },
              "hovered": { "value": "{colors.informational.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.informational.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.informational.12.value}" },
                "hovered": { "value": "{colors.informational.11.value}" },
                "pressed": { "value": "{colors.informational.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.informational.9.value}" },
                "hovered": { "value": "{colors.informational.8.value}" },
                "pressed": { "value": "{colors.informational.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.informational.8.value}" },
                "hovered": { "value": "{colors.informational.7.value}" },
                "pressed": { "value": "{colors.informational.6.value}" }
              }
            }
          }
        }
      },
      "warning": {
        "origin": {
          "default": { "value": "{colors.warning.dark.origin.default.value}" },
          "hovered": { "value": "{colors.warning.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.warning.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.warning.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.warning.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.warning.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.warning.5.value}" },
                  "hovered": { "value": "{colors.warning.4.value}" },
                  "pressed": { "value": "{colors.warning.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.warning.6.value}" },
                  "hovered": { "value": "{colors.warning.5.value}" },
                  "pressed": { "value": "{colors.warning.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.warning.8.value}" },
                  "hovered": { "value": "{colors.warning.7.value}" },
                  "pressed": { "value": "{colors.warning.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.warning.9.value}" },
                  "hovered": { "value": "{colors.warning.8.value}" },
                  "pressed": { "value": "{colors.warning.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.warning.10.value}" },
                  "hovered": { "value": "{colors.warning.9.value}" },
                  "pressed": { "value": "{colors.warning.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.warning.12.value}" },
                  "hovered": { "value": "{colors.warning.11.value}" },
                  "pressed": { "value": "{colors.warning.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.warning.3.value}" },
              "hovered": { "value": "{colors.warning.4.value}" },
              "pressed": { "value": "{colors.warning.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.warning.3.value}" },
                "hovered": { "value": "{colors.warning.4.value}" },
                "pressed": { "value": "{colors.warning.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.warning.2.value}" },
                "hovered": { "value": "{colors.warning.3.value}" },
                "pressed": { "value": "{colors.warning.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.warning.1.value}" },
                "hovered": { "value": "{colors.warning.2.value}" },
                "pressed": { "value": "{colors.warning.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.warning.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.warning.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.warning.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.warning.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.warning.12.value}" },
                "hovered": { "value": "{colors.warning.11.value}" },
                "pressed": { "value": "{colors.warning.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.warning.9.value}" },
                "hovered": { "value": "{colors.warning.8.value}" },
                "pressed": { "value": "{colors.warning.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.warning.8.value}" },
                "hovered": { "value": "{colors.warning.7.value}" },
                "pressed": { "value": "{colors.warning.6.value}" }
              }
            }
          }
        }
      },
      "successful": {
        "origin": {
          "default": { "value": "{colors.successful.dark.origin.default.value}" },
          "hovered": { "value": "{colors.successful.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.successful.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.successful.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.successful.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.successful.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.successful.5.value}" },
                  "hovered": { "value": "{colors.successful.4.value}" },
                  "pressed": { "value": "{colors.successful.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.successful.6.value}" },
                  "hovered": { "value": "{colors.successful.5.value}" },
                  "pressed": { "value": "{colors.successful.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.successful.8.value}" },
                  "hovered": { "value": "{colors.successful.7.value}" },
                  "pressed": { "value": "{colors.successful.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.successful.9.value}" },
                  "hovered": { "value": "{colors.successful.8.value}" },
                  "pressed": { "value": "{colors.successful.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.successful.10.value}" },
                  "hovered": { "value": "{colors.successful.9.value}" },
                  "pressed": { "value": "{colors.successful.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.successful.12.value}" },
                  "hovered": { "value": "{colors.successful.11.value}" },
                  "pressed": { "value": "{colors.successful.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.successful.3.value}" },
              "hovered": { "value": "{colors.successful.4.value}" },
              "pressed": { "value": "{colors.successful.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.successful.3.value}" },
                "hovered": { "value": "{colors.successful.4.value}" },
                "pressed": { "value": "{colors.successful.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.successful.2.value}" },
                "hovered": { "value": "{colors.successful.3.value}" },
                "pressed": { "value": "{colors.successful.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.successful.1.value}" },
                "hovered": { "value": "{colors.successful.2.value}" },
                "pressed": { "value": "{colors.successful.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.successful.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.successful.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.successful.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.successful.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.successful.12.value}" },
                "hovered": { "value": "{colors.successful.11.value}" },
                "pressed": { "value": "{colors.successful.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.successful.9.value}" },
                "hovered": { "value": "{colors.successful.8.value}" },
                "pressed": { "value": "{colors.successful.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.successful.8.value}" },
                "hovered": { "value": "{colors.successful.7.value}" },
                "pressed": { "value": "{colors.successful.6.value}" }
              }
            }
          }
        }
      },
      "critical": {
        "origin": {
          "default": { "value": "{colors.critical.dark.origin.default.value}" },
          "hovered": { "value": "{colors.critical.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.critical.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.critical.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.critical.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.critical.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.critical.5.value}" },
                  "hovered": { "value": "{colors.critical.4.value}" },
                  "pressed": { "value": "{colors.critical.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.critical.6.value}" },
                  "hovered": { "value": "{colors.critical.5.value}" },
                  "pressed": { "value": "{colors.critical.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.critical.8.value}" },
                  "hovered": { "value": "{colors.critical.7.value}" },
                  "pressed": { "value": "{colors.critical.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.critical.9.value}" },
                  "hovered": { "value": "{colors.critical.8.value}" },
                  "pressed": { "value": "{colors.critical.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.critical.10.value}" },
                  "hovered": { "value": "{colors.critical.9.value}" },
                  "pressed": { "value": "{colors.critical.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.critical.12.value}" },
                  "hovered": { "value": "{colors.critical.11.value}" },
                  "pressed": { "value": "{colors.critical.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.critical.3.value}" },
              "hovered": { "value": "{colors.critical.4.value}" },
              "pressed": { "value": "{colors.critical.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.critical.3.value}" },
                "hovered": { "value": "{colors.critical.4.value}" },
                "pressed": { "value": "{colors.critical.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.critical.2.value}" },
                "hovered": { "value": "{colors.critical.3.value}" },
                "pressed": { "value": "{colors.critical.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.critical.1.value}" },
                "hovered": { "value": "{colors.critical.2.value}" },
                "pressed": { "value": "{colors.critical.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.critical.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.critical.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.critical.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.critical.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.critical.12.value}" },
                "hovered": { "value": "{colors.critical.11.value}" },
                "pressed": { "value": "{colors.critical.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.critical.9.value}" },
                "hovered": { "value": "{colors.critical.8.value}" },
                "pressed": { "value": "{colors.critical.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.critical.8.value}" },
                "hovered": { "value": "{colors.critical.7.value}" },
                "pressed": { "value": "{colors.critical.6.value}" }
              }
            }
          }
        }
      },
      "yellow": {
        "origin": {
          "default": { "value": "{colors.yellow.dark.origin.default.value}" },
          "hovered": { "value": "{colors.yellow.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.yellow.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.yellow.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.yellow.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.yellow.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.yellow.5.value}" },
                  "hovered": { "value": "{colors.yellow.4.value}" },
                  "pressed": { "value": "{colors.yellow.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.yellow.6.value}" },
                  "hovered": { "value": "{colors.yellow.5.value}" },
                  "pressed": { "value": "{colors.yellow.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.yellow.8.value}" },
                  "hovered": { "value": "{colors.yellow.7.value}" },
                  "pressed": { "value": "{colors.yellow.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.yellow.9.value}" },
                  "hovered": { "value": "{colors.yellow.8.value}" },
                  "pressed": { "value": "{colors.yellow.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.yellow.10.value}" },
                  "hovered": { "value": "{colors.yellow.9.value}" },
                  "pressed": { "value": "{colors.yellow.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.yellow.12.value}" },
                  "hovered": { "value": "{colors.yellow.11.value}" },
                  "pressed": { "value": "{colors.yellow.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.yellow.3.value}" },
              "hovered": { "value": "{colors.yellow.4.value}" },
              "pressed": { "value": "{colors.yellow.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.yellow.3.value}" },
                "hovered": { "value": "{colors.yellow.4.value}" },
                "pressed": { "value": "{colors.yellow.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.yellow.2.value}" },
                "hovered": { "value": "{colors.yellow.3.value}" },
                "pressed": { "value": "{colors.yellow.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.yellow.1.value}" },
                "hovered": { "value": "{colors.yellow.2.value}" },
                "pressed": { "value": "{colors.yellow.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.yellow.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.yellow.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.yellow.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.yellow.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.yellow.12.value}" },
                "hovered": { "value": "{colors.yellow.11.value}" },
                "pressed": { "value": "{colors.yellow.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.yellow.9.value}" },
                "hovered": { "value": "{colors.yellow.8.value}" },
                "pressed": { "value": "{colors.yellow.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.yellow.8.value}" },
                "hovered": { "value": "{colors.yellow.7.value}" },
                "pressed": { "value": "{colors.yellow.6.value}" }
              }
            }
          }
        }
      },
      "orange": {
        "origin": {
          "default": { "value": "{colors.orange.dark.origin.default.value}" },
          "hovered": { "value": "{colors.orange.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.orange.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.orange.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.orange.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.orange.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.orange.5.value}" },
                  "hovered": { "value": "{colors.orange.4.value}" },
                  "pressed": { "value": "{colors.orange.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.orange.6.value}" },
                  "hovered": { "value": "{colors.orange.5.value}" },
                  "pressed": { "value": "{colors.orange.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.orange.8.value}" },
                  "hovered": { "value": "{colors.orange.7.value}" },
                  "pressed": { "value": "{colors.orange.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.orange.9.value}" },
                  "hovered": { "value": "{colors.orange.8.value}" },
                  "pressed": { "value": "{colors.orange.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.orange.10.value}" },
                  "hovered": { "value": "{colors.orange.9.value}" },
                  "pressed": { "value": "{colors.orange.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.orange.12.value}" },
                  "hovered": { "value": "{colors.orange.11.value}" },
                  "pressed": { "value": "{colors.orange.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.orange.3.value}" },
              "hovered": { "value": "{colors.orange.4.value}" },
              "pressed": { "value": "{colors.orange.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.orange.3.value}" },
                "hovered": { "value": "{colors.orange.4.value}" },
                "pressed": { "value": "{colors.orange.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.orange.2.value}" },
                "hovered": { "value": "{colors.orange.3.value}" },
                "pressed": { "value": "{colors.orange.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.orange.1.value}" },
                "hovered": { "value": "{colors.orange.2.value}" },
                "pressed": { "value": "{colors.orange.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.orange.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.orange.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.orange.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.orange.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.orange.12.value}" },
                "hovered": { "value": "{colors.orange.11.value}" },
                "pressed": { "value": "{colors.orange.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.orange.9.value}" },
                "hovered": { "value": "{colors.orange.8.value}" },
                "pressed": { "value": "{colors.orange.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.orange.8.value}" },
                "hovered": { "value": "{colors.orange.7.value}" },
                "pressed": { "value": "{colors.orange.6.value}" }
              }
            }
          }
        }
      },
      "red": {
        "origin": {
          "default": { "value": "{colors.red.dark.origin.default.value}" },
          "hovered": { "value": "{colors.red.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.red.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.red.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.red.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.red.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.red.5.value}" },
                  "hovered": { "value": "{colors.red.4.value}" },
                  "pressed": { "value": "{colors.red.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.red.6.value}" },
                  "hovered": { "value": "{colors.red.5.value}" },
                  "pressed": { "value": "{colors.red.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.red.8.value}" },
                  "hovered": { "value": "{colors.red.7.value}" },
                  "pressed": { "value": "{colors.red.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.red.9.value}" },
                  "hovered": { "value": "{colors.red.8.value}" },
                  "pressed": { "value": "{colors.red.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.red.10.value}" },
                  "hovered": { "value": "{colors.red.9.value}" },
                  "pressed": { "value": "{colors.red.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.red.12.value}" },
                  "hovered": { "value": "{colors.red.11.value}" },
                  "pressed": { "value": "{colors.red.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.red.3.value}" },
              "hovered": { "value": "{colors.red.4.value}" },
              "pressed": { "value": "{colors.red.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.red.3.value}" },
                "hovered": { "value": "{colors.red.4.value}" },
                "pressed": { "value": "{colors.red.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.red.2.value}" },
                "hovered": { "value": "{colors.red.3.value}" },
                "pressed": { "value": "{colors.red.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.red.1.value}" },
                "hovered": { "value": "{colors.red.2.value}" },
                "pressed": { "value": "{colors.red.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.red.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.red.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.red.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.red.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.red.12.value}" },
                "hovered": { "value": "{colors.red.11.value}" },
                "pressed": { "value": "{colors.red.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.red.9.value}" },
                "hovered": { "value": "{colors.red.8.value}" },
                "pressed": { "value": "{colors.red.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.red.8.value}" },
                "hovered": { "value": "{colors.red.7.value}" },
                "pressed": { "value": "{colors.red.6.value}" }
              }
            }
          }
        }
      },
      "pink": {
        "origin": {
          "default": { "value": "{colors.pink.dark.origin.default.value}" },
          "hovered": { "value": "{colors.pink.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.pink.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.pink.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.pink.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.pink.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.pink.5.value}" },
                  "hovered": { "value": "{colors.pink.4.value}" },
                  "pressed": { "value": "{colors.pink.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.pink.6.value}" },
                  "hovered": { "value": "{colors.pink.5.value}" },
                  "pressed": { "value": "{colors.pink.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.pink.8.value}" },
                  "hovered": { "value": "{colors.pink.7.value}" },
                  "pressed": { "value": "{colors.pink.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.pink.9.value}" },
                  "hovered": { "value": "{colors.pink.8.value}" },
                  "pressed": { "value": "{colors.pink.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.pink.10.value}" },
                  "hovered": { "value": "{colors.pink.9.value}" },
                  "pressed": { "value": "{colors.pink.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.pink.12.value}" },
                  "hovered": { "value": "{colors.pink.11.value}" },
                  "pressed": { "value": "{colors.pink.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.pink.3.value}" },
              "hovered": { "value": "{colors.pink.4.value}" },
              "pressed": { "value": "{colors.pink.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.pink.3.value}" },
                "hovered": { "value": "{colors.pink.4.value}" },
                "pressed": { "value": "{colors.pink.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.pink.2.value}" },
                "hovered": { "value": "{colors.pink.3.value}" },
                "pressed": { "value": "{colors.pink.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.pink.1.value}" },
                "hovered": { "value": "{colors.pink.2.value}" },
                "pressed": { "value": "{colors.pink.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.pink.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.pink.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.pink.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.pink.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.pink.12.value}" },
                "hovered": { "value": "{colors.pink.11.value}" },
                "pressed": { "value": "{colors.pink.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.pink.9.value}" },
                "hovered": { "value": "{colors.pink.8.value}" },
                "pressed": { "value": "{colors.pink.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.pink.8.value}" },
                "hovered": { "value": "{colors.pink.7.value}" },
                "pressed": { "value": "{colors.pink.6.value}" }
              }
            }
          }
        }
      },
      "violet": {
        "origin": {
          "default": { "value": "{colors.violet.dark.origin.default.value}" },
          "hovered": { "value": "{colors.violet.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.violet.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.violet.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.violet.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.violet.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.violet.5.value}" },
                  "hovered": { "value": "{colors.violet.4.value}" },
                  "pressed": { "value": "{colors.violet.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.violet.6.value}" },
                  "hovered": { "value": "{colors.violet.5.value}" },
                  "pressed": { "value": "{colors.violet.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.violet.8.value}" },
                  "hovered": { "value": "{colors.violet.7.value}" },
                  "pressed": { "value": "{colors.violet.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.violet.9.value}" },
                  "hovered": { "value": "{colors.violet.8.value}" },
                  "pressed": { "value": "{colors.violet.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.violet.10.value}" },
                  "hovered": { "value": "{colors.violet.9.value}" },
                  "pressed": { "value": "{colors.violet.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.violet.12.value}" },
                  "hovered": { "value": "{colors.violet.11.value}" },
                  "pressed": { "value": "{colors.violet.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.violet.3.value}" },
              "hovered": { "value": "{colors.violet.4.value}" },
              "pressed": { "value": "{colors.violet.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.violet.3.value}" },
                "hovered": { "value": "{colors.violet.4.value}" },
                "pressed": { "value": "{colors.violet.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.violet.2.value}" },
                "hovered": { "value": "{colors.violet.3.value}" },
                "pressed": { "value": "{colors.violet.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.violet.1.value}" },
                "hovered": { "value": "{colors.violet.2.value}" },
                "pressed": { "value": "{colors.violet.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.violet.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.violet.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.violet.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.violet.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.violet.12.value}" },
                "hovered": { "value": "{colors.violet.11.value}" },
                "pressed": { "value": "{colors.violet.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.violet.9.value}" },
                "hovered": { "value": "{colors.violet.8.value}" },
                "pressed": { "value": "{colors.violet.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.violet.8.value}" },
                "hovered": { "value": "{colors.violet.7.value}" },
                "pressed": { "value": "{colors.violet.6.value}" }
              }
            }
          }
        }
      },
      "blue": {
        "origin": {
          "default": { "value": "{colors.blue.dark.origin.default.value}" },
          "hovered": { "value": "{colors.blue.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.blue.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.blue.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.blue.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.blue.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.blue.5.value}" },
                  "hovered": { "value": "{colors.blue.4.value}" },
                  "pressed": { "value": "{colors.blue.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.blue.6.value}" },
                  "hovered": { "value": "{colors.blue.5.value}" },
                  "pressed": { "value": "{colors.blue.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.blue.8.value}" },
                  "hovered": { "value": "{colors.blue.7.value}" },
                  "pressed": { "value": "{colors.blue.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.blue.9.value}" },
                  "hovered": { "value": "{colors.blue.8.value}" },
                  "pressed": { "value": "{colors.blue.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.blue.10.value}" },
                  "hovered": { "value": "{colors.blue.9.value}" },
                  "pressed": { "value": "{colors.blue.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.blue.12.value}" },
                  "hovered": { "value": "{colors.blue.11.value}" },
                  "pressed": { "value": "{colors.blue.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.blue.3.value}" },
              "hovered": { "value": "{colors.blue.4.value}" },
              "pressed": { "value": "{colors.blue.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.blue.3.value}" },
                "hovered": { "value": "{colors.blue.4.value}" },
                "pressed": { "value": "{colors.blue.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.blue.2.value}" },
                "hovered": { "value": "{colors.blue.3.value}" },
                "pressed": { "value": "{colors.blue.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.blue.1.value}" },
                "hovered": { "value": "{colors.blue.2.value}" },
                "pressed": { "value": "{colors.blue.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.blue.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.blue.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.blue.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.blue.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.blue.12.value}" },
                "hovered": { "value": "{colors.blue.11.value}" },
                "pressed": { "value": "{colors.blue.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.blue.9.value}" },
                "hovered": { "value": "{colors.blue.8.value}" },
                "pressed": { "value": "{colors.blue.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.blue.8.value}" },
                "hovered": { "value": "{colors.blue.7.value}" },
                "pressed": { "value": "{colors.blue.6.value}" }
              }
            }
          }
        }
      },
      "cyan": {
        "origin": {
          "default": { "value": "{colors.cyan.dark.origin.default.value}" },
          "hovered": { "value": "{colors.cyan.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.cyan.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.cyan.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.cyan.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.cyan.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.cyan.5.value}" },
                  "hovered": { "value": "{colors.cyan.4.value}" },
                  "pressed": { "value": "{colors.cyan.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.cyan.6.value}" },
                  "hovered": { "value": "{colors.cyan.5.value}" },
                  "pressed": { "value": "{colors.cyan.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.cyan.8.value}" },
                  "hovered": { "value": "{colors.cyan.7.value}" },
                  "pressed": { "value": "{colors.cyan.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.cyan.9.value}" },
                  "hovered": { "value": "{colors.cyan.8.value}" },
                  "pressed": { "value": "{colors.cyan.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.cyan.10.value}" },
                  "hovered": { "value": "{colors.cyan.9.value}" },
                  "pressed": { "value": "{colors.cyan.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.cyan.12.value}" },
                  "hovered": { "value": "{colors.cyan.11.value}" },
                  "pressed": { "value": "{colors.cyan.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.cyan.3.value}" },
              "hovered": { "value": "{colors.cyan.4.value}" },
              "pressed": { "value": "{colors.cyan.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.cyan.3.value}" },
                "hovered": { "value": "{colors.cyan.4.value}" },
                "pressed": { "value": "{colors.cyan.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.cyan.2.value}" },
                "hovered": { "value": "{colors.cyan.3.value}" },
                "pressed": { "value": "{colors.cyan.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.cyan.1.value}" },
                "hovered": { "value": "{colors.cyan.2.value}" },
                "pressed": { "value": "{colors.cyan.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.cyan.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.cyan.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.cyan.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.cyan.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.cyan.12.value}" },
                "hovered": { "value": "{colors.cyan.11.value}" },
                "pressed": { "value": "{colors.cyan.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.cyan.9.value}" },
                "hovered": { "value": "{colors.cyan.8.value}" },
                "pressed": { "value": "{colors.cyan.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.cyan.8.value}" },
                "hovered": { "value": "{colors.cyan.7.value}" },
                "pressed": { "value": "{colors.cyan.6.value}" }
              }
            }
          }
        }
      },
      "turquoise": {
        "origin": {
          "default": { "value": "{colors.turquoise.dark.origin.default.value}" },
          "hovered": { "value": "{colors.turquoise.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.turquoise.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.turquoise.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.turquoise.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.turquoise.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.turquoise.5.value}" },
                  "hovered": { "value": "{colors.turquoise.4.value}" },
                  "pressed": { "value": "{colors.turquoise.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.turquoise.6.value}" },
                  "hovered": { "value": "{colors.turquoise.5.value}" },
                  "pressed": { "value": "{colors.turquoise.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.turquoise.8.value}" },
                  "hovered": { "value": "{colors.turquoise.7.value}" },
                  "pressed": { "value": "{colors.turquoise.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.turquoise.9.value}" },
                  "hovered": { "value": "{colors.turquoise.8.value}" },
                  "pressed": { "value": "{colors.turquoise.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.turquoise.10.value}" },
                  "hovered": { "value": "{colors.turquoise.9.value}" },
                  "pressed": { "value": "{colors.turquoise.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.turquoise.12.value}" },
                  "hovered": { "value": "{colors.turquoise.11.value}" },
                  "pressed": { "value": "{colors.turquoise.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.turquoise.3.value}" },
              "hovered": { "value": "{colors.turquoise.4.value}" },
              "pressed": { "value": "{colors.turquoise.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.turquoise.3.value}" },
                "hovered": { "value": "{colors.turquoise.4.value}" },
                "pressed": { "value": "{colors.turquoise.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.turquoise.2.value}" },
                "hovered": { "value": "{colors.turquoise.3.value}" },
                "pressed": { "value": "{colors.turquoise.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.turquoise.1.value}" },
                "hovered": { "value": "{colors.turquoise.2.value}" },
                "pressed": { "value": "{colors.turquoise.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.turquoise.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.turquoise.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.turquoise.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.turquoise.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.turquoise.12.value}" },
                "hovered": { "value": "{colors.turquoise.11.value}" },
                "pressed": { "value": "{colors.turquoise.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.turquoise.9.value}" },
                "hovered": { "value": "{colors.turquoise.8.value}" },
                "pressed": { "value": "{colors.turquoise.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.turquoise.8.value}" },
                "hovered": { "value": "{colors.turquoise.7.value}" },
                "pressed": { "value": "{colors.turquoise.6.value}" }
              }
            }
          }
        }
      },
      "green": {
        "origin": {
          "default": { "value": "{colors.green.dark.origin.default.value}" },
          "hovered": { "value": "{colors.green.dark.origin.hovered.value}" },
          "pressed": { "value": "{colors.green.dark.origin.pressed.value}" }
        },
        "on": {
          "origin": {
            "default": { "value": "{colors.green.dark.on.origin.default.value}" },
            "hovered": { "value": "{colors.green.dark.on.origin.hovered.value}" },
            "pressed": { "value": "{colors.green.dark.on.origin.pressed.value}" }
          },
          "bg": {
            "basic": {
              "emphasis": {
                "50": {
                  "default": { "value": "{colors.green.5.value}" },
                  "hovered": { "value": "{colors.green.4.value}" },
                  "pressed": { "value": "{colors.green.3.value}" }
                },
                "60": {
                  "default": { "value": "{colors.green.6.value}" },
                  "hovered": { "value": "{colors.green.5.value}" },
                  "pressed": { "value": "{colors.green.4.value}" }
                },
                "70": {
                  "default": { "value": "{colors.green.8.value}" },
                  "hovered": { "value": "{colors.green.7.value}" },
                  "pressed": { "value": "{colors.green.6.value}" }
                },
                "80": {
                  "default": { "value": "{colors.green.9.value}" },
                  "hovered": { "value": "{colors.green.8.value}" },
                  "pressed": { "value": "{colors.green.7.value}" }
                },
                "90": {
                  "default": { "value": "{colors.green.10.value}" },
                  "hovered": { "value": "{colors.green.9.value}" },
                  "pressed": { "value": "{colors.green.8.value}" }
                },
                "100": {
                  "default": { "value": "{colors.green.12.value}" },
                  "hovered": { "value": "{colors.green.11.value}" },
                  "pressed": { "value": "{colors.green.10.value}" }
                }
              }
            },
            "inverted": {
              "default": { "value": "{colors.green.3.value}" },
              "hovered": { "value": "{colors.green.4.value}" },
              "pressed": { "value": "{colors.green.5.value}" }
            }
          }
        },
        "bg": {
          "basic": {
            "level": {
              "1": {
                "default": { "value": "{colors.green.3.value}" },
                "hovered": { "value": "{colors.green.4.value}" },
                "pressed": { "value": "{colors.green.5.value}" }
              },
              "2": {
                "default": { "value": "{colors.green.2.value}" },
                "hovered": { "value": "{colors.green.3.value}" },
                "pressed": { "value": "{colors.green.4.value}" }
              },
              "3": {
                "default": { "value": "{colors.green.1.value}" },
                "hovered": { "value": "{colors.green.2.value}" },
                "pressed": { "value": "{colors.green.3.value}" }
              }
            },
            "transparent": {
              "full": { "default": { "value": "{colors.green.9.value}", "transparent": 100 } },
              "semi": { "default": { "value": "{colors.green.9.value}", "transparent": 84 } },
              "hovered": { "value": "{colors.green.9.value}", "transparent": 76 },
              "pressed": { "value": "{colors.green.9.value}", "transparent": 68 }
            }
          },
          "inverted": {
            "contrast": {
              "max": {
                "default": { "value": "{colors.green.12.value}" },
                "hovered": { "value": "{colors.green.11.value}" },
                "pressed": { "value": "{colors.green.10.value}" }
              },
              "high": {
                "default": { "value": "{colors.green.9.value}" },
                "hovered": { "value": "{colors.green.8.value}" },
                "pressed": { "value": "{colors.green.7.value}" }
              },
              "low": {
                "default": { "value": "{colors.green.8.value}" },
                "hovered": { "value": "{colors.green.7.value}" },
                "pressed": { "value": "{colors.green.6.value}" }
              }
            }
          }
        }
      }
    }
  }
}

TimKolberger
TimKolberger reviewed Sep 2, 2024
View reviewed changes
src/utils/outputs/download.ts
Comment on lines +95 to +100
for (const prop of tokenProps) {
zip.file(
`${sdFolder}/${prop}s.json`,
JSON.stringify({ [prop]: token[prop] }),
);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: Style Dictionary Tokens need a value property, to be recognised.

This code generates something like this:

{
  "border": {
    "height": {
      "3xs": "0.0625rem",

but we need

{
  "border": {
    "height": {
      "3xs": {
        "value": "0.0625rem",
      }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@TimKolberger TimKolberger TimKolberger left review comments

@mfranzke mfranzke Awaiting requested review from mfranzke mfranzke will be requested when the pull request is marked ready for review mfranzke is a code owner

@dkolba dkolba Awaiting requested review from dkolba dkolba will be requested when the pull request is marked ready for review dkolba is a code owner

@annsch annsch Awaiting requested review from annsch annsch will be requested when the pull request is marked ready for review annsch is a code owner

Assignees
No one assigned
Labels
🪩 🔥 🕺 cool topic some relevant topics, that we even also need to report in different rounds / to stakeholders
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

feat: add export format "Amazon Style Dictionary"
3 participants
@nmerget @TimKolberger @mfranzke