@automattic/vip-design-system 1.2.3 → 1.3.1

package/tokens/valet-core/wpvip-web.json

@@ -0,0 +1,1310 @@
+{
+  "body": {
+    "1-short": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.2}"
+      },
+      "type": "typography"
+    },
+    "1-short-medium": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.2}"
+      },
+      "type": "typography"
+    },
+    "1-short-caps": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.2}",
+        "textCase": "uppercase"
+      },
+      "type": "typography"
+    },
+    "2-short": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.3}"
+      },
+      "type": "typography"
+    },
+    "2-short-medium": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.3}"
+      },
+      "type": "typography"
+    },
+    "3-short": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.4}"
+      },
+      "type": "typography"
+    },
+    "4-short": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.5}"
+      },
+      "type": "typography"
+    },
+    "4-serif": {
+      "value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.5}",
+        "fontSize": "{fontSize.static.5}"
+      },
+      "type": "typography"
+    }
+  },
+  "heading": {
+    "1": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.6}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "2": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.7}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "3": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.9}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "4": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.10}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "5": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.11}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "6": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.12}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "7": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.medium}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.13}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "1-light": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.light}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.6}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "2-light": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.light}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.8}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "3-light": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.light}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.9}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "4-light": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.light}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.10}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "5-light": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.light}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.11}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "5-serif": {
+      "value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.11}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "6-serif": {
+      "value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.12}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "7-serif": {
+      "value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.13}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    }
+  },
+  "paragraph": {
+    "1": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.7}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    }
+  },
+  "quotation": {
+    "1": {
+      "value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.responsive.8}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "2": {
+      "value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.responsive.10}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    },
+    "3": {
+      "value": {
+        "fontFamily": "{fontFamily.serif}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.3}",
+        "fontSize": "{fontSize.responsive.11}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    }
+  },
+  "caption": {
+    "1": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.1}",
+        "letterSpacing": "{letterSpacing.loose}"
+      },
+      "type": "typography"
+    },
+    "2": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.2}",
+        "letterSpacing": "{letterSpacing.loose}"
+      },
+      "type": "typography"
+    }
+  },
+  "code": {
+    "1": {
+      "value": {
+        "fontFamily": "{fontFamily.monospace}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.2}"
+      },
+      "type": "typography"
+    },
+    "2": {
+      "value": {
+        "fontFamily": "{fontFamily.monospace}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.4}",
+        "fontSize": "{fontSize.static.3}"
+      },
+      "type": "typography"
+    }
+  },
+  "supporting": {
+    "helper-text": {
+      "1": {
+        "value": {
+          "fontFamily": "{fontFamily.sans}",
+          "fontWeight": "{fontWeight.regular}",
+          "lineHeight": "{lineHeight.4}",
+          "fontSize": "{fontSize.static.1}",
+          "letterSpacing": "{letterSpacing.loose}"
+        },
+        "type": "typography"
+      },
+      "1-caps": {
+        "value": {
+          "fontFamily": "{fontFamily.sans}",
+          "fontWeight": "{fontWeight.regular}",
+          "lineHeight": "{lineHeight.4}",
+          "fontSize": "{fontSize.static.1}",
+          "letterSpacing": "{letterSpacing.loose}",
+          "textCase": "{textCase.uppercase}"
+        },
+        "type": "typography"
+      }
+    },
+    "support-text": {
+      "1": {
+        "value": {
+          "fontFamily": "{fontFamily.accent}",
+          "fontWeight": "{fontWeight.medium}",
+          "lineHeight": "{lineHeight.4}",
+          "fontSize": "{fontSize.static.1}",
+          "letterSpacing": "{letterSpacing.loose}",
+          "textCase": "{textCase.uppercase}"
+        },
+        "type": "typography"
+      },
+      "2": {
+        "value": {
+          "fontFamily": "{fontFamily.accent}",
+          "fontWeight": "{fontWeight.medium}",
+          "lineHeight": "{lineHeight.4}",
+          "fontSize": "{fontSize.static.3}",
+          "letterSpacing": "{letterSpacing.loose}",
+          "textCase": "{textCase.uppercase}"
+        },
+        "type": "typography"
+      }
+    }
+  },
+  "fontFamily": {
+    "sans": {
+      "value": "Aktiv Grotesk VF",
+      "type": "fontFamilies"
+    },
+    "serif": {
+      "value": "IvarText-Regular",
+      "type": "fontFamilies"
+    },
+    "display": {
+      "value": "Recoleta",
+      "type": "fontFamilies"
+    },
+    "accent": {
+      "value": "Aktiv Grotesk EX",
+      "type": "fontFamilies"
+    },
+    "mono": {
+      "value": "AkkuratMonoLLWeb-Regular",
+      "type": "fontFamilies"
+    }
+  },
+  "letterSpacing": {
+    "tight": {
+      "value": "-0.01em",
+      "type": "letterSpacing"
+    },
+    "none": {
+      "value": "0em",
+      "type": "letterSpacing"
+    },
+    "loose": {
+      "value": "0.03em",
+      "type": "letterSpacing"
+    }
+  },
+  "statistic": {
+    "1": {
+      "value": {
+        "fontFamily": "{fontFamily.sans}",
+        "fontWeight": "{fontWeight.regular}",
+        "lineHeight": "{lineHeight.responsive}",
+        "fontSize": "{fontSize.responsive.12}",
+        "letterSpacing": "{letterSpacing.tight}"
+      },
+      "type": "typography"
+    }
+  },
+  "space": {
+    "padding": {
+      "global": {
+        "value": "{space.responsive.4-7}",
+        "type": "spacing",
+        "description": "Use for global padding for the application—usually the outer margins of the screen. "
+      }
+    },
+    "responsive": {
+      "x-small": {
+        "value": "{space.responsive.3-4}",
+        "type": "spacing"
+      },
+      "small": {
+        "value": "{space.responsive.4-5}",
+        "type": "spacing"
+      },
+      "medium": {
+        "value": "{space.responsive.5-6}",
+        "type": "spacing"
+      },
+      "large": {
+        "value": "{space.responsive.6-7}",
+        "type": "spacing",
+        "description": "The default space between sequential blocks in a layout"
+      },
+      "x-large": {
+        "value": "{space.responsive.7-8}",
+        "type": "spacing"
+      },
+      "xx-large": {
+        "value": "{space.responsive.8-9}",
+        "type": "spacing"
+      },
+      "xxx-large": {
+        "value": "{space.responsive.9-10}",
+        "type": "spacing"
+      }
+    },
+    "static": {
+      "x-small": {
+        "value": "{space.static.1}",
+        "type": "spacing"
+      },
+      "small": {
+        "value": "{space.static.2}",
+        "type": "spacing"
+      },
+      "medium": {
+        "value": "{space.static.3}",
+        "type": "spacing"
+      },
+      "large": {
+        "value": "{space.static.4}",
+        "type": "spacing"
+      },
+      "x-large": {
+        "value": "{space.static.5}",
+        "type": "spacing"
+      },
+      "xx-large": {
+        "value": "{space.static.6}",
+        "type": "spacing"
+      },
+      "xxx-large": {
+        "value": "{space.static.7}",
+        "type": "spacing"
+      }
+    }
+  },
+  "shadow": {
+    "high": {
+      "value": "{shadow.3}",
+      "type": "boxShadow"
+    },
+    "medium": {
+      "value": "{shadow.2}",
+      "type": "boxShadow"
+    },
+    "low": {
+      "value": "{shadow.1}",
+      "type": "boxShadow"
+    }
+  },
+  "screen-width": {
+    "S": {
+      "value": "{breakpoint.S}",
+      "type": "sizing",
+      "description": "< 655px"
+    },
+    "M": {
+      "value": "{breakpoint.M}",
+      "type": "sizing",
+      "description": "656–1047px"
+    },
+    "L": {
+      "value": "{breakpoint.L}",
+      "type": "sizing"
+    },
+    "XL": {
+      "value": "{breakpoint.XL}",
+      "type": "sizing",
+      "description": "1312–1535px"
+    },
+    "XXL": {
+      "value": "{breakpoint.XXL}",
+      "type": "sizing",
+      "description": "1536–1647px"
+    },
+    "MAX": {
+      "value": "{breakpoint.MAX}",
+      "type": "sizing",
+      "description": "1648px +"
+    }
+  },
+  "alignment": {
+    "center": {
+      "value": "744",
+      "type": "sizing",
+      "description": "min-width: 744px"
+    },
+    "wide": {
+      "value": "1008",
+      "type": "sizing",
+      "description": "min-width: 1008px"
+    },
+    "full": {
+      "value": "1536",
+      "type": "sizing",
+      "description": "max-width: 1536px"
+    }
+  },
+  "borderRadius": {
+    "static": {
+      "small": {
+        "value": "{borderRadius.static.2}",
+        "type": "borderRadius"
+      },
+      "medium": {
+        "value": "{borderRadius.static.3}",
+        "type": "borderRadius"
+      },
+      "large": {
+        "value": "{borderRadius.static.4}",
+        "type": "borderRadius"
+      },
+      "x-large": {
+        "value": "{borderRadius.static.5}",
+        "type": "borderRadius"
+      },
+      "xx-large": {
+        "value": "{borderRadius.static.6}",
+        "type": "borderRadius"
+      },
+      "x-small": {
+        "value": "{borderRadius.static.1}",
+        "type": "borderRadius"
+      }
+    },
+    "responsive": {
+      "medium": {
+        "value": "{borderRadius.responsive.3-5}",
+        "type": "borderRadius"
+      },
+      "large": {
+        "value": "{borderRadius.responsive.4-6}",
+        "type": "borderRadius"
+      }
+    }
+  },
+  "background": {
+    "primary": {
+      "type": "color",
+      "description": "Use as main application background",
+      "value": "{color.gold.3}"
+    },
+    "inverse": {
+      "value": "{color.black}",
+      "type": "color",
+      "description": "Use as component background in high-contrast situations. "
+    },
+    "brand": {
+      "type": "color",
+      "value": "{color.gold.30}"
+    }
+  },
+  "layer": {
+    "1": {
+      "type": "color",
+      "value": "{color.gold.0}"
+    },
+    "2": {
+      "type": "color",
+      "value": "{color.gradient.neutral-light-1}"
+    },
+    "3": {
+      "type": "color",
+      "value": "{color.gold.0}"
+    },
+    "4": {
+      "value": "{color.pure-white}",
+      "type": "color"
+    },
+    "accent": {
+      "1": {
+        "type": "color",
+        "value": "{color.gold.20}"
+      },
+      "2": {
+        "type": "color",
+        "value": "{color.pink.20}"
+      },
+      "3": {
+        "type": "color",
+        "value": "{color.red.30}"
+      },
+      "4": {
+        "type": "color",
+        "value": "{color.salmon.25}"
+      },
+      "5": {
+        "type": "color",
+        "value": "{color.orange.25}"
+      },
+      "6": {
+        "type": "color",
+        "value": "{color.yellow.20}"
+      },
+      "7": {
+        "type": "color",
+        "value": "{color.green.25}"
+      },
+      "8": {
+        "type": "color",
+        "value": "{color.blue.25}"
+      },
+      "neutral-1": {
+        "type": "color",
+        "value": "{color.gradient.neutral-light-1}"
+      },
+      "neutral-2": {
+        "type": "color",
+        "value": "{color.gradient.neutral-light-2}"
+      },
+      "neutral-3": {
+        "type": "color",
+        "value": "{color.gradient.neutral-light-3}"
+      },
+      "neutral-4": {
+        "type": "color",
+        "value": "{color.gradient.neutral-light-4}"
+      },
+      "brand": {
+        "type": "color",
+        "value": "{color.gold.30}"
+      },
+      "colorful-1": {
+        "type": "color",
+        "value": "{color.gradient.colorful-light-1}"
+      },
+      "colorful-2": {
+        "type": "color",
+        "value": "{color.gradient.colorful-light-2}"
+      },
+      "colorful-3": {
+        "type": "color",
+        "value": "{color.gradient.colorful-light-3}"
+      },
+      "colorful-4": {
+        "type": "color",
+        "value": "{color.gradient.colorful-light-4}"
+      },
+      "dark-1": {
+        "type": "color",
+        "value": "{color.gradient.colorful-dark-1}"
+      },
+      "dark-2": {
+        "type": "color",
+        "value": "{color.gradient.colorful-dark-2}"
+      },
+      "black": {
+        "value": "{color.black}",
+        "type": "color"
+      }
+    },
+    "blur": {
+      "value": "rgba({background.primary}, .75)",
+      "type": "color",
+      "description": "color fill for transparent blurred component backgrounds"
+    }
+  },
+  "field": {
+    "1": {
+      "value": "rgba(0,0,0,0)",
+      "type": "color"
+    },
+    "2": {
+      "value": "rgba(0,0,0,0)",
+      "type": "color"
+    },
+    "3": {
+      "value": "rgba(0,0,0,0)",
+      "type": "color"
+    },
+    "4": {
+      "value": "rgba(0,0,0,0)",
+      "type": "color"
+    }
+  },
+  "border": {
+    "1": {
+      "value": "{color.black}",
+      "type": "color"
+    },
+    "2": {
+      "type": "color",
+      "value": "{color.gray.70}"
+    },
+    "3": {
+      "type": "color",
+      "value": "{color.gray.25}"
+    },
+    "4": {
+      "type": "color",
+      "value": "{color.gray.15}"
+    },
+    "accent": {
+      "type": "color",
+      "value": "{color.gold.50}"
+    },
+    "inverse-1": {
+      "value": "{color.pure-white}",
+      "type": "color"
+    },
+    "inverse-2": {
+      "value": "{color.gray.30}",
+      "type": "color"
+    },
+    "inverse-3": {
+      "value": "{color.gray.75}",
+      "type": "color"
+    },
+    "inverse-4": {
+      "value": "{color.gray.80}",
+      "type": "color"
+    }
+  },
+  "text": {
+    "primary": {
+      "value": "{color.black}",
+      "type": "color",
+      "description": "Use for headings"
+    },
+    "secondary": {
+      "type": "color",
+      "description": "Use for body text ",
+      "value": "{color.gray.75}"
+    },
+    "helper": {
+      "type": "color",
+      "description": "Use for helper text",
+      "value": "{color.gray.60}"
+    },
+    "placeholder": {
+      "type": "color",
+      "description": "Use for placeholder text in fields",
+      "value": "{color.gray.45}"
+    },
+    "disabled": {
+      "type": "color",
+      "value": "{color.gray.25}"
+    },
+    "inverse": {
+      "type": "color",
+      "value": "{color.gray.0}"
+    },
+    "inverse-secondary": {
+      "value": "{color.gray.15}",
+      "type": "color"
+    },
+    "interactive": {
+      "type": "color",
+      "value": "{color.gold.60}"
+    }
+  },
+  "link": {
+    "default": {
+      "type": "color",
+      "description": "Use for text links",
+      "value": "{color.gold.60}"
+    },
+    "hover": {
+      "type": "color",
+      "value": "{color.gold.70}"
+    },
+    "active": {
+      "type": "color",
+      "value": "{color.gold.80}"
+    },
+    "visited": {
+      "type": "color",
+      "value": "{color.gold.70}"
+    }
+  },
+  "icon": {
+    "primary": {
+      "value": "{color.black}",
+      "type": "color"
+    },
+    "secondary": {
+      "type": "color",
+      "value": "{color.gray.60}"
+    },
+    "helper": {
+      "type": "color",
+      "value": "{color.gray.40}"
+    },
+    "background": {
+      "value": "{color.gray.20}",
+      "type": "color"
+    },
+    "inverse": {
+      "type": "color",
+      "value": "{color.gold.0}"
+    },
+    "disabled": {
+      "type": "color",
+      "value": "{color.gray.25}"
+    }
+  },
+  "button": {
+    "primary": {
+      "default": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gold.30}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gold.50}"
+      },
+      "disabled": {
+        "type": "color",
+        "value": "{color.gray.50}"
+      },
+      "label": {
+        "value": "{color.gold.0}",
+        "type": "color"
+      },
+      "label hover": {
+        "value": "{color.black}",
+        "type": "color"
+      }
+    },
+    "secondary": {
+      "default": {
+        "value": "rgba(0,0,0,0)",
+        "type": "color"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gold.30}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gold.50}"
+      },
+      "disabled": {
+        "value": "rgba(0,0,0,0)",
+        "type": "color"
+      },
+      "label": {
+        "value": "{color.black}",
+        "type": "color"
+      }
+    },
+    "tertiary": {
+      "default": {
+        "value": "rgba(0,0,0,0)",
+        "type": "color"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gray.7}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gray.25}"
+      },
+      "disabled": {
+        "value": "rgba(0,0,0,0)",
+        "type": "color"
+      },
+      "label": {
+        "value": "{color.black}",
+        "type": "color"
+      }
+    },
+    "display": {
+      "default": {
+        "value": "linear-gradient(55deg, {color.gold.30} 10%, {color.gold.20} 90%)",
+        "type": "color"
+      },
+      "hover": {
+        "value": "linear-gradient(55deg, {color.gold.65} 10%, {color.gold.45} 90%)",
+        "type": "color"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gold.65}"
+      },
+      "disabled": {
+        "type": "color",
+        "value": "{color.gray.50}"
+      },
+      "label": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "label hover": {
+        "value": "{color.pure-white}",
+        "type": "color"
+      }
+    }
+  },
+  "support": {
+    "background": {
+      "error": {
+        "type": "color",
+        "value": "{color.red.7}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.yellow.7}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.blue.7}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.green.7}"
+      }
+    },
+    "text": {
+      "error": {
+        "type": "color",
+        "value": "{color.red.60}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.yellow.60}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.blue.60}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.green.60}"
+      }
+    },
+    "icon": {
+      "error": {
+        "type": "color",
+        "value": "{color.red.50}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.yellow.50}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.blue.50}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.green.50}"
+      }
+    },
+    "accent": {
+      "error": {
+        "type": "color",
+        "value": "{color.red.60}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.yellow.60}"
+      },
+      "info": {
+        "type": "color",
+        "value": "{color.blue.60}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.green.60}"
+      }
+    },
+    "link": {
+      "error": {
+        "default": {
+          "type": "color",
+          "description": "Use for text links",
+          "value": "{color.red.60}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{color.red.70}"
+        },
+        "active": {
+          "type": "color",
+          "value": "{color.red.80}"
+        },
+        "visited": {
+          "type": "color",
+          "value": "{color.red.80}"
+        }
+      },
+      "warning": {
+        "default": {
+          "type": "color",
+          "description": "Use for text links",
+          "value": "{color.yellow.60}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{color.yellow.70}"
+        },
+        "active": {
+          "type": "color",
+          "value": "{color.yellow.80}"
+        },
+        "visited": {
+          "type": "color",
+          "value": "{color.yellow.70}"
+        }
+      },
+      "info": {
+        "default": {
+          "type": "color",
+          "description": "Use for text links",
+          "value": "{color.blue.60}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{color.blue.70}"
+        },
+        "active": {
+          "type": "color",
+          "value": "{color.blue.80}"
+        },
+        "visited": {
+          "type": "color",
+          "value": "{color.blue.70}"
+        }
+      },
+      "success": {
+        "default": {
+          "type": "color",
+          "description": "Use for text links",
+          "value": "{color.green.60}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{color.green.70}"
+        },
+        "active": {
+          "type": "color",
+          "value": "{color.green.80}"
+        },
+        "visited": {
+          "type": "color",
+          "value": "{color.green.70}"
+        }
+      }
+    }
+  },
+  "focus": {
+    "default": {
+      "value": "{color.focus}",
+      "type": "color"
+    },
+    "inset": {
+      "value": "{color.pure-white}",
+      "type": "color"
+    }
+  },
+  "overlay": {
+    "type": "color",
+    "value": "rgba({color.gray.55},.25)"
+  },
+  "interactive": {
+    "type": "color",
+    "value": "{color.gold.55}"
+  },
+  "tag": {
+    "gray": {
+      "background": {
+        "type": "color",
+        "value": "{color.gray.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.gray.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gray.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gray.20}"
+      }
+    },
+    "blue": {
+      "background": {
+        "type": "color",
+        "value": "{color.blue.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.blue.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.blue.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.blue.20}"
+      }
+    },
+    "green": {
+      "background": {
+        "type": "color",
+        "value": "{color.green.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.green.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.green.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.green.20}"
+      }
+    },
+    "red": {
+      "background": {
+        "type": "color",
+        "value": "{color.red.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.red.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.red.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.red.20}"
+      }
+    },
+    "gold": {
+      "background": {
+        "type": "color",
+        "value": "{color.gold.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.gold.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.gold.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.gold.20}"
+      }
+    },
+    "yellow": {
+      "background": {
+        "type": "color",
+        "value": "{color.yellow.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.yellow.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.yellow.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.yellow.20}"
+      }
+    },
+    "orange": {
+      "background": {
+        "type": "color",
+        "value": "{color.orange.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.orange.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.orange.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.orange.20}"
+      }
+    },
+    "salmon": {
+      "background": {
+        "type": "color",
+        "value": "{color.salmon.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.salmon.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.salmon.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.salmon.20}"
+      }
+    },
+    "pink": {
+      "background": {
+        "type": "color",
+        "value": "{color.pink.10}"
+      },
+      "text": {
+        "value": "{color.black}",
+        "type": "color"
+      },
+      "icon": {
+        "type": "color",
+        "value": "{color.pink.65}"
+      },
+      "hover": {
+        "type": "color",
+        "value": "{color.pink.15}"
+      },
+      "active": {
+        "type": "color",
+        "value": "{color.pink.20}"
+      }
+    }
+  }
+}