UNPKG

@atlaskit/tokens

Version:

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

1,412 lines 138 kB
{ "name": "Light increased-contrast", "tokens": { "Light increased-contrast/color.background.accent.lime.subtlest": { "value": "#EFFFD6", "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." } }, "Light increased-contrast/color.background.accent.lime.subtlest.hovered": { "value": "#D3F1A7", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.subtlest." } }, "Light increased-contrast/color.background.accent.lime.subtlest.pressed": { "value": "#BDE97C", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.subtlest." } }, "Light increased-contrast/color.background.accent.lime.subtler": { "value": "#D3F1A7", "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." } }, "Light increased-contrast/color.background.accent.lime.subtler.hovered": { "value": "#BDE97C", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.subtler." } }, "Light increased-contrast/color.background.accent.lime.subtler.pressed": { "value": "#B3DF72", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.subtler." } }, "Light increased-contrast/color.background.accent.lime.subtle": { "value": "#B3DF72", "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." } }, "Light increased-contrast/color.background.accent.lime.subtle.hovered": { "value": "#D3F1A7", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.subtle." } }, "Light increased-contrast/color.background.accent.lime.subtle.pressed": { "value": "#EFFFD6", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.subtle." } }, "Light increased-contrast/color.background.accent.lime.bolder": { "value": "#37471F", "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." } }, "Light increased-contrast/color.background.accent.lime.bolder.hovered": { "value": "#28311B", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.bolder." } }, "Light increased-contrast/color.background.accent.lime.bolder.pressed": { "value": "#233013", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.bolder." } }, "Light increased-contrast/color.background.accent.red.subtlest": { "value": "#FFECEB", "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." } }, "Light increased-contrast/color.background.accent.red.subtlest.hovered": { "value": "#FFD5D2", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.subtlest." } }, "Light increased-contrast/color.background.accent.red.subtlest.pressed": { "value": "#FFB8B2", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.subtlest." } }, "Light increased-contrast/color.background.accent.red.subtler": { "value": "#FFD5D2", "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." } }, "Light increased-contrast/color.background.accent.red.subtler.hovered": { "value": "#FFB8B2", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.subtler." } }, "Light increased-contrast/color.background.accent.red.subtler.pressed": { "value": "#FD9891", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.subtler." } }, "Light increased-contrast/color.background.accent.red.subtle": { "value": "#fbb7ae", "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." } }, "Light increased-contrast/color.background.accent.red.subtle.hovered": { "value": "#FFD5D2", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.subtle." } }, "Light increased-contrast/color.background.accent.red.subtle.pressed": { "value": "#FFECEB", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.subtle." } }, "Light increased-contrast/color.background.accent.red.bolder": { "value": "#5D1F1A", "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." } }, "Light increased-contrast/color.background.accent.red.bolder.hovered": { "value": "#42221F", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.bolder." } }, "Light increased-contrast/color.background.accent.red.bolder.pressed": { "value": "#49120C", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.bolder." } }, "Light increased-contrast/color.background.accent.orange.subtlest": { "value": "#FFF5DB", "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." } }, "Light increased-contrast/color.background.accent.orange.subtlest.hovered": { "value": "#FCE4A6", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.subtlest." } }, "Light increased-contrast/color.background.accent.orange.subtlest.pressed": { "value": "#FBD779", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.subtlest." } }, "Light increased-contrast/color.background.accent.orange.subtler": { "value": "#FCE4A6", "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." } }, "Light increased-contrast/color.background.accent.orange.subtler.hovered": { "value": "#FBD779", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.subtler." } }, "Light increased-contrast/color.background.accent.orange.subtler.pressed": { "value": "#FBC828", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.subtler." } }, "Light increased-contrast/color.background.accent.orange.subtle": { "value": "#FBC828", "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." } }, "Light increased-contrast/color.background.accent.orange.subtle.hovered": { "value": "#FCE4A6", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.subtle." } }, "Light increased-contrast/color.background.accent.orange.subtle.pressed": { "value": "#FFF5DB", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.subtle." } }, "Light increased-contrast/color.background.accent.orange.bolder": { "value": "#693200", "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." } }, "Light increased-contrast/color.background.accent.orange.bolder.hovered": { "value": "#3A2C1F", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.bolder." } }, "Light increased-contrast/color.background.accent.orange.bolder.pressed": { "value": "#3E2108", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.bolder." } }, "Light increased-contrast/color.background.accent.yellow.subtlest": { "value": "#FEF7C8", "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." } }, "Light increased-contrast/color.background.accent.yellow.subtlest.hovered": { "value": "#F5E989", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.subtlest." } }, "Light increased-contrast/color.background.accent.yellow.subtlest.pressed": { "value": "#EFDD4E", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.subtlest." } }, "Light increased-contrast/color.background.accent.yellow.subtler": { "value": "#F5E989", "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." } }, "Light increased-contrast/color.background.accent.yellow.subtler.hovered": { "value": "#EFDD4E", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.subtler." } }, "Light increased-contrast/color.background.accent.yellow.subtler.pressed": { "value": "#EED12B", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.subtler." } }, "Light increased-contrast/color.background.accent.yellow.subtle": { "value": "#EED12B", "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." } }, "Light increased-contrast/color.background.accent.yellow.subtle.hovered": { "value": "#F5E989", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.subtle." } }, "Light increased-contrast/color.background.accent.yellow.subtle.pressed": { "value": "#FEF7C8", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.subtle." } }, "Light increased-contrast/color.background.accent.yellow.bolder": { "value": "#533F04", "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." } }, "Light increased-contrast/color.background.accent.yellow.bolder.hovered": { "value": "#332E1B", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.bolder." } }, "Light increased-contrast/color.background.accent.yellow.bolder.pressed": { "value": "#342800", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.bolder." } }, "Light increased-contrast/color.background.accent.green.subtlest": { "value": "#DCFFF1", "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." } }, "Light increased-contrast/color.background.accent.green.subtlest.hovered": { "value": "#BAF3DB", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.subtlest." } }, "Light increased-contrast/color.background.accent.green.subtlest.pressed": { "value": "#97EDC9", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.subtlest." } }, "Light increased-contrast/color.background.accent.green.subtler": { "value": "#BAF3DB", "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." } }, "Light increased-contrast/color.background.accent.green.subtler.hovered": { "value": "#97EDC9", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.subtler." } }, "Light increased-contrast/color.background.accent.green.subtler.pressed": { "value": "#7EE2B8", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.subtler." } }, "Light increased-contrast/color.background.accent.green.subtle": { "value": "#7EE2B8", "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." } }, "Light increased-contrast/color.background.accent.green.subtle.hovered": { "value": "#BAF3DB", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.subtle." } }, "Light increased-contrast/color.background.accent.green.subtle.pressed": { "value": "#DCFFF1", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.subtle." } }, "Light increased-contrast/color.background.accent.green.bolder": { "value": "#164B35", "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." } }, "Light increased-contrast/color.background.accent.green.bolder.hovered": { "value": "#1C3329", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.bolder." } }, "Light increased-contrast/color.background.accent.green.bolder.pressed": { "value": "#0F3324", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.bolder." } }, "Light increased-contrast/color.background.accent.teal.subtlest": { "value": "#E7F9FF", "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." } }, "Light increased-contrast/color.background.accent.teal.subtlest.hovered": { "value": "#C6EDFB", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.subtlest." } }, "Light increased-contrast/color.background.accent.teal.subtlest.pressed": { "value": "#B1E4F7", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.subtlest." } }, "Light increased-contrast/color.background.accent.teal.subtler": { "value": "#C6EDFB", "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." } }, "Light increased-contrast/color.background.accent.teal.subtler.hovered": { "value": "#B1E4F7", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.subtler." } }, "Light increased-contrast/color.background.accent.teal.subtler.pressed": { "value": "#9DD9EE", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.subtler." } }, "Light increased-contrast/color.background.accent.teal.subtle": { "value": "#9DD9EE", "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." } }, "Light increased-contrast/color.background.accent.teal.subtle.hovered": { "value": "#C6EDFB", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.subtle." } }, "Light increased-contrast/color.background.accent.teal.subtle.pressed": { "value": "#E7F9FF", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.subtle." } }, "Light increased-contrast/color.background.accent.teal.bolder": { "value": "#164555", "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." } }, "Light increased-contrast/color.background.accent.teal.bolder.hovered": { "value": "#1E3137", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.bolder." } }, "Light increased-contrast/color.background.accent.teal.bolder.pressed": { "value": "#103034", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.bolder." } }, "Light increased-contrast/color.background.accent.blue.subtlest": { "value": "#E9F2FE", "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." } }, "Light increased-contrast/color.background.accent.blue.subtlest.hovered": { "value": "#CFE1FD", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.blue.subtlest." } }, "Light increased-contrast/color.background.accent.blue.subtlest.pressed": { "value": "#ADCBFB", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.blue.subtlest." } }, "Light increased-contrast/color.background.accent.blue.subtler": { "value": "#CFE1FD", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for blue backgrounds when there is no meaning tied to the color, such as colored tags." } }, "Light increased-contrast/color.background.accent.blue.subtler.hovered": { "value": "#ADCBFB", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.blue.subtler." } }, "Light increased-contrast/color.background.accent.blue.subtler.pressed": { "value": "#8FB8F6", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.blue.subtler." } }, "Light increased-contrast/color.background.accent.blue.subtle": { "value": "#8FB8F6", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for vibrant blue backgrounds when there is no meaning tied to the color, such as colored tags." } }, "Light increased-contrast/color.background.accent.blue.subtle.hovered": { "value": "#CFE1FD", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.blue.subtle." } }, "Light increased-contrast/color.background.accent.blue.subtle.pressed": { "value": "#E9F2FE", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.blue.subtle." } }, "Light increased-contrast/color.background.accent.blue.bolder": { "value": "#123263", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for blue backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." } }, "Light increased-contrast/color.background.accent.blue.bolder.hovered": { "value": "#1C2B42", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.blue.bolder." } }, "Light increased-contrast/color.background.accent.blue.bolder.pressed": { "value": "#022353", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.blue.bolder." } }, "Light increased-contrast/color.background.accent.purple.subtlest": { "value": "#F8EEFE", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for purple backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." } }, "Light increased-contrast/color.background.accent.purple.subtlest.hovered": { "value": "#EED7FC", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.purple.subtlest." } }, "Light increased-contrast/color.background.accent.purple.subtlest.pressed": { "value": "#E3BDFA", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.purple.subtlest." } }, "Light increased-contrast/color.background.accent.purple.subtler": { "value": "#EED7FC", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for purple backgrounds when there is no meaning tied to the color, such as colored tags." } }, "Light increased-contrast/color.background.accent.purple.subtler.hovered": { "value": "#E3BDFA", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.purple.subtler." } }, "Light increased-contrast/color.background.accent.purple.subtler.pressed": { "value": "#D8A0F7", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.purple.subtler." } }, "Light increased-contrast/color.background.accent.purple.subtle": { "value": "#c3b9fa", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for vibrant purple backgrounds when there is no meaning tied to the color, such as colored tags." } }, "Light increased-contrast/color.background.accent.purple.subtle.hovered": { "value": "#EED7FC", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.purple.subtle." } }, "Light increased-contrast/color.background.accent.purple.subtle.pressed": { "value": "#F8EEFE", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.purple.subtle." } }, "Light increased-contrast/color.background.accent.purple.bolder": { "value": "#48245D", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for purple backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." } }, "Light increased-contrast/color.background.accent.purple.bolder.hovered": { "value": "#35243F", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.purple.bolder." } }, "Light increased-contrast/color.background.accent.purple.bolder.pressed": { "value": "#211A47", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.purple.bolder." } }, "Light increased-contrast/color.background.accent.magenta.subtlest": { "value": "#FFECF8", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for magenta backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." } }, "Light increased-contrast/color.background.accent.magenta.subtlest.hovered": { "value": "#FDD0EC", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.magenta.subtlest." } }, "Light increased-contrast/color.background.accent.magenta.subtlest.pressed": { "value": "#FCB6E1", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.magenta.subtlest." } }, "Light increased-contrast/color.background.accent.magenta.subtler": { "value": "#FDD0EC", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for magenta backgrounds when there is no meaning tied to the color, such as colored tags." } }, "Light increased-contrast/color.background.accent.magenta.subtler.hovered": { "value": "#FCB6E1", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.magenta.subtler." } }, "Light increased-contrast/color.background.accent.magenta.subtler.pressed": { "value": "#F797D2", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.magenta.subtler." } }, "Light increased-contrast/color.background.accent.magenta.subtle": { "value": "#f2a6d4", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for vibrant magenta backgrounds when there is no meaning tied to the color, such as colored tags." } }, "Light increased-contrast/color.background.accent.magenta.subtle.hovered": { "value": "#FDD0EC", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.magenta.subtle." } }, "Light increased-contrast/color.background.accent.magenta.subtle.pressed": { "value": "#FFECF8", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.magenta.subtle." } }, "Light increased-contrast/color.background.accent.magenta.bolder": { "value": "#50253F", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for magenta backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." } }, "Light increased-contrast/color.background.accent.magenta.bolder.hovered": { "value": "#3D2232", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.magenta.bolder." } }, "Light increased-contrast/color.background.accent.magenta.bolder.pressed": { "value": "#37172A", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.magenta.bolder." } }, "Light increased-contrast/color.background.accent.gray.subtlest": { "value": "#F0F1F2", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for gray backgrounds when there is no meaning tied to the color. Reserved for when you only want a hint of color." } }, "Light increased-contrast/color.background.accent.gray.subtlest.hovered": { "value": "#DDDEE1", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.gray.subtlest." } }, "Light increased-contrast/color.background.accent.gray.subtlest.pressed": { "value": "#B7B9BE", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.gray.subtlest." } }, "Light increased-contrast/color.background.accent.gray.subtler": { "value": "#DDDEE1", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for gray backgrounds when there is no meaning tied to the color, such as colored tags." } }, "Light increased-contrast/color.background.accent.gray.subtler.hovered": { "value": "#B7B9BE", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.gray.subtler." } }, "Light increased-contrast/color.background.accent.gray.subtler.pressed": { "value": "#8C8F97", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.gray.subtler." } }, "Light increased-contrast/color.background.accent.gray.subtle": { "value": "#B7B9BE", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for vibrant gray backgrounds when there is no meaning tied to the color, such as colored tags." } }, "Light increased-contrast/color.background.accent.gray.subtle.hovered": { "value": "#DDDEE1", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.gray.subtle." } }, "Light increased-contrast/color.background.accent.gray.subtle.pressed": { "value": "#F0F1F2", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.gray.subtle." } }, "Light increased-contrast/color.background.accent.gray.bolder": { "value": "#505258", "attributes": { "group": "paint", "state": "active", "introduced": "0.7.0", "description": "Use for gray backgrounds when there is no meaning tied to the color, and the background needs to pass min 3:1 contrast requirements." } }, "Light increased-contrast/color.background.accent.gray.bolder.hovered": { "value": "#3B3D42", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.gray.bolder." } }, "Light increased-contrast/color.background.accent.gray.bolder.pressed": { "value": "#292A2E", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.gray.subtlest." } }, "Light increased-contrast/color.background.disabled": { "value": "#0515240F", "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for backgrounds of elements in a disabled state." } }, "Light increased-contrast/color.background.input": { "value": "#FFFFFF", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for background of form UI elements, such as text fields, checkboxes, and radio buttons." } }, "Light increased-contrast/color.background.input.hovered": { "value": "#F8F8F8", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.input" } }, "Light increased-contrast/color.background.input.pressed": { "value": "#FFFFFF", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.input" } }, "Light increased-contrast/color.background.inverse.subtle": { "value": "#00000029", "attributes": { "group": "paint", "state": "active", "introduced": "0.8.3", "description": "Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards." } }, "Light increased-contrast/color.background.inverse.subtle.hovered": { "value": "#0000003D", "attributes": { "group": "paint", "state": "active", "introduced": "0.8.3", "description": "Use for the hovered state of color.background.inverse.subtle" } }, "Light increased-contrast/color.background.inverse.subtle.pressed": { "value": "#00000052", "attributes": { "group": "paint", "state": "active", "introduced": "0.8.3", "description": "Use for the pressed state of color.background.inverse.subtle" } }, "Light increased-contrast/color.background.neutral": { "value": "#0515240F", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "The default background for neutral elements, such as default buttons." } }, "Light increased-contrast/color.background.neutral.hovered": { "value": "#0B120E24", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.neutral" } }, "Light increased-contrast/color.background.neutral.pressed": { "value": "#080F214A", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.neutral" } }, "Light increased-contrast/color.background.neutral.subtle": { "value": "#00000000", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items." } }, "Light increased-contrast/color.background.neutral.subtle.hovered": { "value": "#0515240F", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.neutral.subtle" } }, "Light increased-contrast/color.background.neutral.subtle.pressed": { "value": "#0B120E24", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.neutral.subtle" } }, "Light increased-contrast/color.background.neutral.bold": { "value": "#292A2E", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "A vibrant background option for neutral UI elements, such as announcement banners." } }, "Light increased-contrast/color.background.neutral.bold.hovered": { "value": "#3B3D42", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.neutral.bold" } }, "Light increased-contrast/color.background.neutral.bold.pressed": { "value": "#505258", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.neutral.bold" } }, "Light increased-contrast/color.background.selected": { "value": "#E9F2FE", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for the background of elements in a selected state, such as in opened dropdown buttons." } }, "Light increased-contrast/color.background.selected.hovered": { "value": "#CFE1FD", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Hovered state for color.background.selected" } }, "Light increased-contrast/color.background.selected.pressed": { "value": "#8FB8F6", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Pressed state for color.background.selected" } }, "Light increased-contrast/color.background.selected.bold": { "value": "#123263", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons." } }, "Light increased-contrast/color.background.selected.bold.hovered": { "value": "#1C2B42", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Hovered state of color.background.selected.bold" } }, "Light increased-contrast/color.background.selected.bold.pressed": { "value": "#022353", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Pressed state of color.background.selected.bold" } }, "Light increased-contrast/color.background.brand.subtlest": { "value": "#E9F2FE", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Use for the background of elements used to reinforce our brand, but with less emphasis." } }, "Light increased-contrast/color.background.brand.subtlest.hovered": { "value": "#CFE1FD", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Hovered state of color.background.brand.subtlest." } }, "Light increased-contrast/color.background.brand.subtlest.pressed": { "value": "#ADCBFB", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Pressed state of color.background.brand.subtlest" } }, "Light increased-contrast/color.background.brand.bold": { "value": "#123263", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for the background of elements used to reinforce our brand, but with more emphasis." } }, "Light increased-contrast/color.background.brand.bold.hovered": { "value": "#1C2B42", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.brand.bold." } }, "Light increased-contrast/color.background.brand.bold.pressed": { "value": "#022353", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.brand.bold." } }, "Light increased-contrast/color.background.brand.boldest": { "value": "#1C2B42", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Use for the background of elements used to reinforce our brand, that need to stand out a lot." } }, "Light increased-contrast/color.background.brand.boldest.hovered": { "value": "#123263", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Hovered state of color.background.brand.boldest." } }, "Light increased-contrast/color.background.brand.boldest.pressed": { "value": "#144794", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Pressed state of color.background.brand.boldest." } }, "Light increased-contrast/color.background.danger": { "value": "#FFECEB", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for backgrounds communicating critical information, such in error section messages." } }, "Light increased-contrast/color.background.danger.hovered": { "value": "#FFD5D2", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.danger" } }, "Light increased-contrast/color.background.danger.pressed": { "value": "#FFB8B2", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.danger" } }, "Light increased-contrast/color.background.danger.subtler": { "value": "#FFD5D2", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for backgrounds of danger lozenges and badges to ensure accessibility and desired visual appearance." } }, "Light increased-contrast/color.background.danger.subtler.hovered": { "value": "#FFB8B2", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Hovered state of color.background.danger.subtler" } }, "Light increased-contrast/color.background.danger.subtler.pressed": { "value": "#FD9891", "attributes": { "group": "paint", "state": "acti