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

Merged
merged 17 commits into from
Mar 31, 2025
Merged

feat: add style-dictionary tokens for download #820

merged 17 commits into from
Mar 31, 2025

Conversation

nmerget
Copy link
Collaborator

@nmerget nmerget commented Aug 15, 2024

closes #806

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

@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.

@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
Contributor

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}" }
              }
            }
          }
        }
      }
    }
  }
}

@nmerget
Copy link
Collaborator Author

nmerget commented Feb 27, 2025 •
edited
Loading

@TimKolberger can you check it again with: https://db-ux-design-system.github.io/theme-builder/feat-style-dictionary-token/customization

There is a new folder which uses style-dictionary

@TimKolberger
Copy link
Contributor

That was fast! 🚀 Thanks for diving into it 💖
Looks like the format differs from our previous one, but it looks great!
I'll need to update our transformers, this will take a few days.

In sd.config.json are references from the semantic tokens to the base color tokens in an array notation. e.g.

"neutral": {
  "bg": {
      "basic": {
        "level": {
          "1": {
            "default": {
              "type": "semantic-color",
              "value": { "light": ["neutral", 14], "dark": ["neutral", 3] } // <---

Style Dictionary has its own reference format, which makes it much more easy to work with them: https://styledictionary.com/reference/utils/references/#resolvereferences

This would look like this:

"neutral": {
  "bg": {
      "basic": {
        "level": {
          "1": {
            "default": {
              "type": "semantic-color",
              "value": { "light": "{colors.neutral.14}", "dark": "{colors.neutral.3}" } // <---

Would this work for you, to update the references in the export?

@nmerget
Copy link
Collaborator Author

nmerget commented Feb 28, 2025

That was fast! 🚀 Thanks for diving into it 💖 Looks like the format differs from our previous one, but it looks great! I'll need to update our transformers, this will take a few days.

In sd.config.json are references from the semantic tokens to the base color tokens in an array notation. e.g.

"neutral": {
  "bg": {
      "basic": {
        "level": {
          "1": {
            "default": {
              "type": "semantic-color",
              "value": { "light": ["neutral", 14], "dark": ["neutral", 3] } // <---

Style Dictionary has its own reference format, which makes it much more easy to work with them: https://styledictionary.com/reference/utils/references/#resolvereferences

This would look like this:

"neutral": {
  "bg": {
      "basic": {
        "level": {
          "1": {
            "default": {
              "type": "semantic-color",
              "value": { "light": "{colors.neutral.14}", "dark": "{colors.neutral.3}" } // <---

Would this work for you, to update the references in the export?

The problem here is that it isn't a reference. I need this information to provide light-dark, which I apply with this custom transform:

https://github.com/db-ux-design-system/theme-builder/blob/feat-style-dictionary-token/src/utils/outputs/style-dictionary/config/transforms.ts

@gylxan
Copy link

gylxan commented Mar 27, 2025 •
edited
Loading

HI!

Nice work @nmerget! The style dictionary looks awesome.

I have only one point, that feels odd and could lead to problems in the future:

  1. The tokens for colors like neutral, pink and so on are all on the first level, which makes it difficult to e.g. collect all possible colors to create a tailwind theme and for a specific color scheme.
    Currently I'm collecting all tokens which have the type semantic-color and move them myself, but in the future when you add for instance new colors under border like { ... "border": { "color": { "gray": { "value": "aaaaaa", "type": "semantic-color" }}}} the previous logic would break, because these are not a color scheme.

So it would be nice if you could add all those colors to the colors key or add a new key in the style dictionary and add all color schemes there. When you say, there are no more "semantic-color" type tokens, then it would be ok for now.

  1. It is really nice, that the values for lineHeight, fontSIze and fontFamily are under one value in typography, so that you can easily use it for the CSS font property.
    For other transformations, like when you want to create a tailwind theme, it is really hard to build it up from this format. This is due to the value has to be split up to fit into the sections for --text-* or --leading-* into the tailwind theme. Also because they're split up here, we have to split it up in the CSS to create CSS variables for each lineHeight, fontSize and so on. So we don't really have a benefit from the value being in this format.

Maybe you can split them up, so that we have an entry for lineHeight and fontSize? For font family, we already have one.

What do you think about it?

@nmerget nmerget marked this pull request as ready for review March 31, 2025 10:50
@nmerget nmerget requested a review from mfranzke as a code owner March 31, 2025 10:50
@nmerget nmerget merged commit dc7f2f2 into main Mar 31, 2025
6 checks passed
@nmerget nmerget deleted the feat-style-dictionary-token branch March 31, 2025 10:50
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 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"
4 participants
@nmerget @TimKolberger @gylxan @mfranzke