UNPKG

@atlaskit/tokens

Version:

Design tokens are the single source of truth to name and store design decisions.

1,476 lines 121 kB
{ "name": "Legacy dark", "tokens": { "Legacy dark/color.text": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for primary text, such as body copy, sentence case headers, and buttons." }, "value": "#E6EDFA" }, "Legacy dark/color.text.accent.lime": { "attributes": { "group": "paint", "state": "active", "introduced": "1.8.0", "description": "Use for lime text on subtlest and subtler lime accent backgrounds when there is no meaning tied to the color." }, "value": "#4C6B1F" }, "Legacy dark/color.text.accent.lime.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "1.8.0", "description": "Use for lime text on subtle lime accent backgrounds when there is no meaning tied to the color." }, "value": "#37471F" }, "Legacy dark/color.text.accent.red": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for red text on subtlest and subtler red accent backgrounds when there is no meaning tied to the color." }, "value": "#FF5630" }, "Legacy dark/color.text.accent.red.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for red text on subtle red accent backgrounds when there is no meaning tied to the color." }, "value": "#FF7452" }, "Legacy dark/color.text.accent.orange": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for orange text on subtlest and subtler orange accent backgrounds when there is no meaning tied to the color." }, "value": "#FEC57B" }, "Legacy dark/color.text.accent.orange.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for orange text on subtle orange accent backgrounds when there is no meaning tied to the color." }, "value": "#F18D13" }, "Legacy dark/color.text.accent.yellow": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for yellow text on subtlest and subtler yellow accent backgrounds when there is no meaning tied to the color." }, "value": "#FFAB00" }, "Legacy dark/color.text.accent.yellow.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for yellow text on subtle yellow accent backgrounds when there is no meaning tied to the color." }, "value": "#FFC400" }, "Legacy dark/color.text.accent.green": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for green text on subtlest and subtler green accent backgrounds when there is no meaning tied to the color." }, "value": "#36B37E" }, "Legacy dark/color.text.accent.green.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for green text on subtle green accent backgrounds when there is no meaning tied to the color." }, "value": "#57D9A3" }, "Legacy dark/color.text.accent.teal": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for teal text on subtlest and subtler teal accent backgrounds when there is no meaning tied to the color." }, "value": "#00B8D9" }, "Legacy dark/color.text.accent.teal.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for teal text on subtle teal accent backgrounds when there is no meaning tied to the color." }, "value": "#00C7E6" }, "Legacy dark/color.text.accent.blue": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for blue text on subtlest and subtler blue accent backgrounds when there is no meaning tied to the color." }, "value": "#0065FF" }, "Legacy dark/color.text.accent.blue.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for blue text on subtle blue accent backgrounds when there is no meaning tied to the color." }, "value": "#2684FF" }, "Legacy dark/color.text.accent.purple": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for purple text on subtlest and subtler purple accent backgrounds when there is no meaning tied to the color." }, "value": "#6554C0" }, "Legacy dark/color.text.accent.purple.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for purple text on subtle purple accent backgrounds when there is no meaning tied to the color." }, "value": "#8777D9" }, "Legacy dark/color.text.accent.magenta": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for magenta text on subtlest and subtler magenta accent backgrounds when there is no meaning tied to the color." }, "value": "#F797D2" }, "Legacy dark/color.text.accent.magenta.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for magenta text on subtle magenta accent backgrounds when there is no meaning tied to the color." }, "value": "#FDD0EC" }, "Legacy dark/color.text.accent.gray": { "attributes": { "group": "paint", "state": "active", "introduced": "0.10.5", "description": "Use for text on non-bold gray accent backgrounds, such as colored tags." }, "value": "#8C9CB8" }, "Legacy dark/color.text.accent.gray.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.10.5", "description": "Use for text and icons on gray subtle accent backgrounds." }, "value": "#ABBBD6" }, "Legacy dark/color.text.disabled": { "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for text in a disabled state." }, "value": "#1B2638" }, "Legacy dark/color.text.inverse": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for text on bold backgrounds." }, "value": "#0D1424" }, "Legacy dark/color.text.selected": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for text in selected or opened states, such as tabs and dropdown buttons." }, "value": "#0052CC" }, "Legacy dark/color.text.brand": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for text that reinforces our brand." }, "value": "#0052CC" }, "Legacy dark/color.text.danger": { "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for critical text, such as input field error messaging." }, "value": "#FF5630" }, "Legacy dark/color.text.danger.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance." }, "value": "#FF7452" }, "Legacy dark/color.text.warning": { "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for text to emphasize caution, such as in moved lozenges." }, "value": "#172B4D" }, "Legacy dark/color.text.warning.inverse": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for text when on bold warning backgrounds." }, "value": "#0D1424" }, "Legacy dark/color.text.warning.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance." }, "value": "#253858" }, "Legacy dark/color.text.success": { "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for text to communicate a favorable outcome, such as input field success messaging." }, "value": "#36B37E" }, "Legacy dark/color.text.success.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for text on top of success semantic labels to ensure accessibility and desired visual appearance." }, "value": "#57D9A3" }, "Legacy dark/color.text.discovery": { "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for text to emphasize change or something new, such as in new lozenges." }, "value": "#6554C0" }, "Legacy dark/color.text.discovery.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance." }, "value": "#8777D9" }, "Legacy dark/color.text.information": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for informative text or to communicate something is in progress, such as in-progress lozenges." }, "value": "#0065FF" }, "Legacy dark/color.text.information.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for text on top of information semantic labels to ensure accessibility and desired visual appearance." }, "value": "#2684FF" }, "Legacy dark/color.text.subtlest": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text." }, "value": "#7988A3" }, "Legacy dark/color.text.subtle": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings." }, "value": "#9FB0CC" }, "Legacy dark/color.link": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for links in a default or hovered state. Add an underline for hovered states." }, "value": "#0052CC" }, "Legacy dark/color.link.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for links in a pressed state." }, "value": "#0065FF" }, "Legacy dark/color.link.visited": { "attributes": { "group": "paint", "state": "active", "introduced": "1.23.0", "description": "Use for visited links." }, "value": "#6554C0" }, "Legacy dark/color.link.visited.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.43.0", "description": "Use for visited links in a pressed state." }, "value": "#6554C0" }, "Legacy dark/color.icon": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icon-only buttons, or icons paired with color.text" }, "value": "#DCE5F5" }, "Legacy dark/color.icon.accent.lime": { "attributes": { "group": "paint", "state": "active", "introduced": "1.6.0", "description": "Use for lime icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons." }, "value": "#6A9A23" }, "Legacy dark/color.icon.accent.red": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for red icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons." }, "value": "#BF2600" }, "Legacy dark/color.icon.accent.orange": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for orange icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons." }, "value": "#F18D13" }, "Legacy dark/color.icon.accent.yellow": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons." }, "value": "#FF8B00" }, "Legacy dark/color.icon.accent.green": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons." }, "value": "#006644" }, "Legacy dark/color.icon.accent.teal": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for teal icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons." }, "value": "#008DA6" }, "Legacy dark/color.icon.accent.blue": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons." }, "value": "#0747A6" }, "Legacy dark/color.icon.accent.purple": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for purple icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons." }, "value": "#403294" }, "Legacy dark/color.icon.accent.magenta": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for magenta icons on non-bold backgrounds when there is no meaning tied to the color, such as file type icons." }, "value": "#DA62AC" }, "Legacy dark/color.icon.accent.gray": { "attributes": { "group": "paint", "state": "active", "introduced": "0.10.5", "description": "Use for icons on non-bold gray accent backgrounds, such as file type icons." }, "value": "#B8C7E0" }, "Legacy dark/color.icon.disabled": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons in a disabled state." }, "value": "#0d14245b" }, "Legacy dark/color.icon.inverse": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons on bold backgrounds." }, "value": "#202B3D" }, "Legacy dark/color.icon.selected": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for icons in selected or opened states, such as those used in dropdown buttons." }, "value": "#4C9AFF" }, "Legacy dark/color.icon.brand": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons that reinforce our brand." }, "value": "#4C9AFF" }, "Legacy dark/color.icon.danger": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons communicating critical information, such as those used in error handing." }, "value": "#FF8F73" }, "Legacy dark/color.icon.warning": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons communicating caution, such as those used in warning section messages." }, "value": "#FFF0B3" }, "Legacy dark/color.icon.warning.inverse": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons when on bold warning backgrounds." }, "value": "#202B3D" }, "Legacy dark/color.icon.success": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons communicating a favorable outcome, such as those used in success section messaged." }, "value": "#57D9A3" }, "Legacy dark/color.icon.discovery": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons communicating change or something new, such as discovery section messages." }, "value": "#998DD9" }, "Legacy dark/color.icon.information": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons communicating information or something in-progress, such as information section messages." }, "value": "#B3D4FF" }, "Legacy dark/color.icon.subtlest": { "attributes": { "group": "paint", "state": "active", "introduced": "1.54.0", "description": "Use for icons paired with color.text.subtlest" }, "value": "#202B3D" }, "Legacy dark/color.icon.subtle": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons paired with color.text.subtle" }, "value": "#202B3D" }, "Legacy dark/color.border": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use to visually group or separate UI elements, such as flat cards or side panel dividers." }, "value": "#202B3D" }, "Legacy dark/color.border.accent.lime": { "attributes": { "group": "paint", "state": "active", "introduced": "1.6.0", "description": "Use for lime borders on non-bold backgrounds when there is no meaning tied to the color." }, "value": "#6A9A23" }, "Legacy dark/color.border.accent.red": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for red borders on non-bold backgrounds when there is no meaning tied to the color." }, "value": "#BF2600" }, "Legacy dark/color.border.accent.orange": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for orange borders on non-bold backgrounds when there is no meaning tied to the color." }, "value": "#F18D13" }, "Legacy dark/color.border.accent.yellow": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for yellow borders on non-bold backgrounds when there is no meaning tied to the color." }, "value": "#FF8B00" }, "Legacy dark/color.border.accent.green": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for green borders on non-bold backgrounds when there is no meaning tied to the color." }, "value": "#006644" }, "Legacy dark/color.border.accent.teal": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for teal borders on non-bold backgrounds when there is no meaning tied to the color." }, "value": "#008DA6" }, "Legacy dark/color.border.accent.blue": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for blue borders on non-bold backgrounds when there is no meaning tied to the color." }, "value": "#0747A6" }, "Legacy dark/color.border.accent.purple": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for purple borders on non-bold backgrounds when there is no meaning tied to the color." }, "value": "#403294" }, "Legacy dark/color.border.accent.magenta": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for magenta borders on non-bold backgrounds when there is no meaning tied to the color." }, "value": "#DA62AC" }, "Legacy dark/color.border.accent.gray": { "attributes": { "group": "paint", "state": "active", "introduced": "0.10.5", "description": "Use for borders on non-bold gray accent backgrounds." }, "value": "#B8C7E0" }, "Legacy dark/color.border.disabled": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders of elements in a disabled state." }, "value": "#0E1624" }, "Legacy dark/color.border.focused": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for focus rings of elements in a focus state." }, "value": "#B3D4FF" }, "Legacy dark/color.border.input": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons." }, "value": "#202B3D" }, "Legacy dark/color.border.inverse": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders on bold backgrounds." }, "value": "#0D1424" }, "Legacy dark/color.border.selected": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for borders or visual indicators of elements in a selected or opened state, such as in tabs or menu items." }, "value": "#0052CC" }, "Legacy dark/color.border.brand": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons." }, "value": "#0052CC" }, "Legacy dark/color.border.danger": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders communicating critical information, such as the borders on invalid text fields." }, "value": "#DE350B" }, "Legacy dark/color.border.warning": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders communicating caution." }, "value": "#FF8B00" }, "Legacy dark/color.border.success": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders communicating a favorable outcome, such as the borders on validated text fields." }, "value": "#006644" }, "Legacy dark/color.border.discovery": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders communicating change or something new, such as the borders in onboarding spotlights." }, "value": "#403294" }, "Legacy dark/color.border.information": { "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders communicating information or something in-progress." }, "value": "#0747A6" }, "Legacy dark/color.border.bold": { "attributes": { "group": "paint", "state": "active", "introduced": "0.10.8", "description": "A neutral border option that passes min 3:1 contrast ratios." }, "value": "#7988A3" }, "Legacy dark/color.background.accent.lime.subtlest": { "attributes": { "group": "paint", "state": "active", "introduced": "1.6.0", "description": "Use for for backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." }, "value": "#2A3818" }, "Legacy dark/color.background.accent.lime.subtlest.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.subtlest." }, "value": "#37471F" }, "Legacy dark/color.background.accent.lime.subtlest.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.subtlest." }, "value": "#4C6B1F" }, "Legacy dark/color.background.accent.lime.subtler": { "attributes": { "group": "paint", "state": "active", "introduced": "1.6.0", "description": "Use for for backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#37471F" }, "Legacy dark/color.background.accent.lime.subtler.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.subtler." }, "value": "#4C6B1F" }, "Legacy dark/color.background.accent.lime.subtler.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.subtler." }, "value": "#5B7F24" }, "Legacy dark/color.background.accent.lime.subtle": { "attributes": { "group": "paint", "state": "active", "introduced": "1.6.0", "description": "Use for vibrant for backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#4C6B1F" }, "Legacy dark/color.background.accent.lime.subtle.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.subtle." }, "value": "#37471F" }, "Legacy dark/color.background.accent.lime.subtle.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.subtle." }, "value": "#2A3818" }, "Legacy dark/color.background.accent.lime.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "1.6.0", "description": "Use for for backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." }, "value": "#94C748" }, "Legacy dark/color.background.accent.lime.bolder.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.bolder." }, "value": "#B3DF72" }, "Legacy dark/color.background.accent.lime.bolder.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.bolder." }, "value": "#D3F1A7" }, "Legacy dark/color.background.accent.red.subtlest": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for red backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." }, "value": "#BF2600" }, "Legacy dark/color.background.accent.red.subtlest.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.subtlest." }, "value": "#DE350B" }, "Legacy dark/color.background.accent.red.subtlest.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.subtlest." }, "value": "#FF5630" }, "Legacy dark/color.background.accent.red.subtler": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for red backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#DE350B" }, "Legacy dark/color.background.accent.red.subtler.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.subtler." }, "value": "#FF5630" }, "Legacy dark/color.background.accent.red.subtler.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.subtler." }, "value": "#FF7452" }, "Legacy dark/color.background.accent.red.subtle": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for vibrant red backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#FF5630" }, "Legacy dark/color.background.accent.red.subtle.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.subtle." }, "value": "#DE350B" }, "Legacy dark/color.background.accent.red.subtle.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.subtle." }, "value": "#BF2600" }, "Legacy dark/color.background.accent.red.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for red backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." }, "value": "#FF8F73" }, "Legacy dark/color.background.accent.red.bolder.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.bolder." }, "value": "#FFBDAD" }, "Legacy dark/color.background.accent.red.bolder.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.bolder." }, "value": "#FFEBE6" }, "Legacy dark/color.background.accent.orange.subtlest": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for orange backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." }, "value": "#43290F" }, "Legacy dark/color.background.accent.orange.subtlest.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.subtlest." }, "value": "#5F3811" }, "Legacy dark/color.background.accent.orange.subtlest.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.subtlest." }, "value": "#974F0C" }, "Legacy dark/color.background.accent.orange.subtler": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for orange backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#5F3811" }, "Legacy dark/color.background.accent.orange.subtler.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.subtler." }, "value": "#974F0C" }, "Legacy dark/color.background.accent.orange.subtler.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.subtler." }, "value": "#B65C02" }, "Legacy dark/color.background.accent.orange.subtle": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for vibrant orange backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#974F0C" }, "Legacy dark/color.background.accent.orange.subtle.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.subtle." }, "value": "#5F3811" }, "Legacy dark/color.background.accent.orange.subtle.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.subtle." }, "value": "#4A2B0F" }, "Legacy dark/color.background.accent.orange.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for orange backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." }, "value": "#F18D13" }, "Legacy dark/color.background.accent.orange.bolder.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.bolder." }, "value": "#FEC57B" }, "Legacy dark/color.background.accent.orange.bolder.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.bolder." }, "value": "#FFE2BD" }, "Legacy dark/color.background.accent.yellow.subtlest": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for yellow backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." }, "value": "#FF8B00" }, "Legacy dark/color.background.accent.yellow.subtlest.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.subtlest." }, "value": "#FF991F" }, "Legacy dark/color.background.accent.yellow.subtlest.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.subtlest." }, "value": "#FFAB00" }, "Legacy dark/color.background.accent.yellow.subtler": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for yellow backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#FF991F" }, "Legacy dark/color.background.accent.yellow.subtler.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.subtler." }, "value": "#FFAB00" }, "Legacy dark/color.background.accent.yellow.subtler.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.subtler." }, "value": "#FFC400" }, "Legacy dark/color.background.accent.yellow.subtle": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for vibrant yellow backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#FFAB00" }, "Legacy dark/color.background.accent.yellow.subtle.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.subtle." }, "value": "#FF991F" }, "Legacy dark/color.background.accent.yellow.subtle.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.subtle." }, "value": "#FF8B00" }, "Legacy dark/color.background.accent.yellow.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for yellow backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." }, "value": "#FFE380" }, "Legacy dark/color.background.accent.yellow.bolder.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.bolder." }, "value": "#FFF0B3" }, "Legacy dark/color.background.accent.yellow.bolder.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.bolder." }, "value": "#FFFAE6" }, "Legacy dark/color.background.accent.green.subtlest": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for green backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." }, "value": "#006644" }, "Legacy dark/color.background.accent.green.subtlest.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.subtlest." }, "value": "#00875A" }, "Legacy dark/color.background.accent.green.subtlest.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.subtlest." }, "value": "#36B37E" }, "Legacy dark/color.background.accent.green.subtler": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for green backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#00875A" }, "Legacy dark/color.background.accent.green.subtler.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.subtler." }, "value": "#36B37E" }, "Legacy dark/color.background.accent.green.subtler.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.subtler." }, "value": "#57D9A3" }, "Legacy dark/color.background.accent.green.subtle": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for vibrant green backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#36B37E" }, "Legacy dark/color.background.accent.green.subtle.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.subtle." }, "value": "#00875A" }, "Legacy dark/color.background.accent.green.subtle.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.subtle." }, "value": "#006644" }, "Legacy dark/color.background.accent.green.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for green backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." }, "value": "#79F2C0" }, "Legacy dark/color.background.accent.green.bolder.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.bolder." }, "value": "#ABF5D1" }, "Legacy dark/color.background.accent.green.bolder.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.bolder." }, "value": "#E3FCEF" }, "Legacy dark/color.background.accent.teal.subtlest": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for teal backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." }, "value": "#008DA6" }, "Legacy dark/color.background.accent.teal.subtlest.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.subtlest." }, "value": "#00A3BF" }, "Legacy dark/color.background.accent.teal.subtlest.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.subtlest." }, "value": "#00B8D9" }, "Legacy dark/color.background.accent.teal.subtler": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for teal backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#00A3BF" }, "Legacy dark/color.background.accent.teal.subtler.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.subtler." }, "value": "#00B8D9" }, "Legacy dark/color.background.accent.teal.subtler.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.subtler." }, "value": "#00C7E6" }, "Legacy dark/color.background.accent.teal.subtle": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for vibrant teal backgrounds when there is no meaning tied to the color, such as colored tags." }, "value": "#00B8D9" }, "Legacy dark/color.background.accent.teal.subtle.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.subtle." }, "value": "#00A3BF" }, "Legacy dark/color.background.accent.teal.subtle.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.subtle." }, "value": "#008DA6" }, "Legacy dark/color.background.accent.teal.bolder": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for teal backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." }, "value": "#79E2F2" }, "Legacy dark/color.background.accent.teal.bolder.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.bolder." }, "value": "#B3F5FF" }, "Legacy dark/color.background.accent.teal.bolder.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.bolder." }, "value": "#E6FCFF" }, "Legacy dark/color.background.accent.blue.subtlest": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for blue backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." }, "value": "#0747A6" }, "Legacy dark/color.background.accent.blue.subtlest.hovered": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.blue.subtlest." }, "value": "#0052CC" }, "Legacy dark/color.background.accent.blue.subtlest.pressed": { "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.blue.subtlest." }, "value": "#0065FF" }, "Legacy dark/color.background.accent.blue.subtler": { "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for blue backgrounds when there is no