{ "name": "UNSAFE dynamic-dark", "tokens": { "UNSAFE dynamic-dark/color.background.accent.lime.subtlest": { "value": "#28311B", "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." } }, "UNSAFE dynamic-dark/color.background.accent.lime.subtlest.hovered": { "value": "#37471F", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.lime.subtlest.pressed": { "value": "#3F5224", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.lime.subtler": { "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, such as colored tags." } }, "UNSAFE dynamic-dark/color.background.accent.lime.subtler.hovered": { "value": "#3F5224", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.lime.subtler.pressed": { "value": "#4C6B1F", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.lime.subtle": { "value": "#4C6B1F", "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." } }, "UNSAFE dynamic-dark/color.background.accent.lime.subtle.hovered": { "value": "#3F5224", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.lime.subtle.pressed": { "value": "#37471F", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.lime.bolder": { "value": "#94C748", "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." } }, "UNSAFE dynamic-dark/color.background.accent.lime.bolder.hovered": { "value": "#B3DF72", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.lime.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.lime.bolder.pressed": { "value": "#BDE97C", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.lime.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.red.subtlest": { "value": "#42221F", "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." } }, "UNSAFE dynamic-dark/color.background.accent.red.subtlest.hovered": { "value": "#5D1F1A", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.red.subtlest.pressed": { "value": "#872821", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.red.subtler": { "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, such as colored tags." } }, "UNSAFE dynamic-dark/color.background.accent.red.subtler.hovered": { "value": "#872821", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.red.subtler.pressed": { "value": "#AE2E24", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.red.subtle": { "value": "#AE2E24", "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." } }, "UNSAFE dynamic-dark/color.background.accent.red.subtle.hovered": { "value": "#872821", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.red.subtle.pressed": { "value": "#5D1F1A", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.red.bolder": { "value": "#F87168", "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." } }, "UNSAFE dynamic-dark/color.background.accent.red.bolder.hovered": { "value": "#FD9891", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.red.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.red.bolder.pressed": { "value": "#FFB8B2", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.red.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.orange.subtlest": { "value": "#3A2C1F", "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." } }, "UNSAFE dynamic-dark/color.background.accent.orange.subtlest.hovered": { "value": "#693200", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.orange.subtlest.pressed": { "value": "#7A3B00", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.orange.subtler": { "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, such as colored tags." } }, "UNSAFE dynamic-dark/color.background.accent.orange.subtler.hovered": { "value": "#7A3B00", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.orange.subtler.pressed": { "value": "#9E4C00", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.orange.subtle": { "value": "#9E4C00", "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." } }, "UNSAFE dynamic-dark/color.background.accent.orange.subtle.hovered": { "value": "#7A3B00", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.orange.subtle.pressed": { "value": "#693200", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.orange.bolder": { "value": "#FCA700", "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." } }, "UNSAFE dynamic-dark/color.background.accent.orange.bolder.hovered": { "value": "#FBC828", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.orange.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.orange.bolder.pressed": { "value": "#FBD779", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.orange.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.subtlest": { "value": "#332E1B", "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." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.subtlest.hovered": { "value": "#533F04", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.subtlest.pressed": { "value": "#614A05", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.subtler": { "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, such as colored tags." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.subtler.hovered": { "value": "#614A05", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.subtler.pressed": { "value": "#7F5F01", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.subtle": { "value": "#7F5F01", "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." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.subtle.hovered": { "value": "#614A05", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.subtle.pressed": { "value": "#533F04", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.bolder": { "value": "#DDB30E", "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." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.bolder.hovered": { "value": "#EED12B", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.yellow.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.yellow.bolder.pressed": { "value": "#EFDD4E", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.yellow.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.green.subtlest": { "value": "#1C3329", "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." } }, "UNSAFE dynamic-dark/color.background.accent.green.subtlest.hovered": { "value": "#164B35", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.green.subtlest.pressed": { "value": "#19573D", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.green.subtler": { "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, such as colored tags." } }, "UNSAFE dynamic-dark/color.background.accent.green.subtler.hovered": { "value": "#19573D", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.green.subtler.pressed": { "value": "#216E4E", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.green.subtle": { "value": "#216E4E", "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." } }, "UNSAFE dynamic-dark/color.background.accent.green.subtle.hovered": { "value": "#19573D", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.green.subtle.pressed": { "value": "#164B35", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.green.bolder": { "value": "#4BCE97", "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." } }, "UNSAFE dynamic-dark/color.background.accent.green.bolder.hovered": { "value": "#7EE2B8", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.green.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.green.bolder.pressed": { "value": "#97EDC9", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.green.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.teal.subtlest": { "value": "#1E3137", "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." } }, "UNSAFE dynamic-dark/color.background.accent.teal.subtlest.hovered": { "value": "#164555", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.teal.subtlest.pressed": { "value": "#1A5265", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.teal.subtler": { "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, such as colored tags." } }, "UNSAFE dynamic-dark/color.background.accent.teal.subtler.hovered": { "value": "#1A5265", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.teal.subtler.pressed": { "value": "#206A83", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.teal.subtle": { "value": "#206A83", "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." } }, "UNSAFE dynamic-dark/color.background.accent.teal.subtle.hovered": { "value": "#1A5265", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.teal.subtle.pressed": { "value": "#164555", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.teal.bolder": { "value": "#6CC3E0", "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." } }, "UNSAFE dynamic-dark/color.background.accent.teal.bolder.hovered": { "value": "#9DD9EE", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.teal.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.teal.bolder.pressed": { "value": "#B1E4F7", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.teal.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.blue.subtlest": { "value": "#1C2B42", "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." } }, "UNSAFE dynamic-dark/color.background.accent.blue.subtlest.hovered": { "value": "#123263", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.blue.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.blue.subtlest.pressed": { "value": "#144794", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.blue.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.blue.subtler": { "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, such as colored tags." } }, "UNSAFE dynamic-dark/color.background.accent.blue.subtler.hovered": { "value": "#144794", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.blue.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.blue.subtler.pressed": { "value": "#1558BC", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.blue.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.blue.subtle": { "value": "#1558BC", "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." } }, "UNSAFE dynamic-dark/color.background.accent.blue.subtle.hovered": { "value": "#144794", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.blue.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.blue.subtle.pressed": { "value": "#123263", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.blue.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.blue.bolder": { "value": "#669DF1", "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." } }, "UNSAFE dynamic-dark/color.background.accent.blue.bolder.hovered": { "value": "#8FB8F6", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.blue.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.blue.bolder.pressed": { "value": "#ADCBFB", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.blue.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.purple.subtlest": { "value": "#35243F", "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." } }, "UNSAFE dynamic-dark/color.background.accent.purple.subtlest.hovered": { "value": "#48245D", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.purple.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.purple.subtlest.pressed": { "value": "#673286", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.purple.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.purple.subtler": { "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, such as colored tags." } }, "UNSAFE dynamic-dark/color.background.accent.purple.subtler.hovered": { "value": "#673286", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.purple.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.purple.subtler.pressed": { "value": "#803FA5", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.purple.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.purple.subtle": { "value": "#803FA5", "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." } }, "UNSAFE dynamic-dark/color.background.accent.purple.subtle.hovered": { "value": "#673286", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.purple.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.purple.subtle.pressed": { "value": "#48245D", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.purple.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.purple.bolder": { "value": "#C97CF4", "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." } }, "UNSAFE dynamic-dark/color.background.accent.purple.bolder.hovered": { "value": "#D8A0F7", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.purple.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.purple.bolder.pressed": { "value": "#E3BDFA", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.purple.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.subtlest": { "value": "#3D2232", "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." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.subtlest.hovered": { "value": "#50253F", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.magenta.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.subtlest.pressed": { "value": "#77325B", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.magenta.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.subtler": { "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, such as colored tags." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.subtler.hovered": { "value": "#77325B", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.magenta.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.subtler.pressed": { "value": "#943D73", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.magenta.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.subtle": { "value": "#943D73", "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." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.subtle.hovered": { "value": "#77325B", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.magenta.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.subtle.pressed": { "value": "#50253F", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.magenta.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.bolder": { "value": "#E774BB", "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." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.bolder.hovered": { "value": "#F797D2", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.magenta.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.magenta.bolder.pressed": { "value": "#FCB6E1", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.magenta.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.gray.subtlest": { "value": "#303134", "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." } }, "UNSAFE dynamic-dark/color.background.accent.gray.subtlest.hovered": { "value": "#3D3F43", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.gray.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.gray.subtlest.pressed": { "value": "#4B4D51", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.gray.subtlest." } }, "UNSAFE dynamic-dark/color.background.accent.gray.subtler": { "value": "#4B4D51", "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." } }, "UNSAFE dynamic-dark/color.background.accent.gray.subtler.hovered": { "value": "#63666B", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.gray.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.gray.subtler.pressed": { "value": "#7E8188", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.gray.subtler." } }, "UNSAFE dynamic-dark/color.background.accent.gray.subtle": { "value": "#63666B", "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." } }, "UNSAFE dynamic-dark/color.background.accent.gray.subtle.hovered": { "value": "#4B4D51", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.gray.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.gray.subtle.pressed": { "value": "#3D3F43", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.gray.subtle." } }, "UNSAFE dynamic-dark/color.background.accent.gray.bolder": { "value": "#96999E", "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." } }, "UNSAFE dynamic-dark/color.background.accent.gray.bolder.hovered": { "value": "#A9ABAF", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Hovered state of color.background.accent.gray.bolder." } }, "UNSAFE dynamic-dark/color.background.accent.gray.bolder.pressed": { "value": "#BFC1C4", "attributes": { "group": "paint", "state": "active", "introduced": "1.19.0", "description": "Pressed state of color.background.accent.gray.subtlest." } }, "UNSAFE dynamic-dark/color.background.code.added.highlight": { "value": "#1C3329", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for highlighted added code lines." } }, "UNSAFE dynamic-dark/color.background.code.added.line": { "value": "#164B35B2", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for added code lines." } }, "UNSAFE dynamic-dark/color.background.code.default": { "value": "#1F1F21", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for the default background of code blocks and code diffs." } }, "UNSAFE dynamic-dark/color.background.code.gutter": { "value": "#242528", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for the background of code gutters." } }, "UNSAFE dynamic-dark/color.background.code.highlight": { "value": "#242528", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for highlighted unchanged code lines." } }, "UNSAFE dynamic-dark/color.background.code.removed.highlight": { "value": "#42221F", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for highlighted removed code lines." } }, "UNSAFE dynamic-dark/color.background.code.removed.line": { "value": "#5D1F1AB2", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for removed code lines." } }, "UNSAFE dynamic-dark/color.background.disabled": { "value": "oklch(from var(--ds-dynamic-background, #000000) l c h / 0.3)", "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for backgrounds of elements in a disabled state." } }, "UNSAFE dynamic-dark/color.background.input": { "value": "var(--ds-dynamic-background, #000000)", "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." } }, "UNSAFE dynamic-dark/color.background.input.hovered": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.input" } }, "UNSAFE dynamic-dark/color.background.input.pressed": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.input" } }, "UNSAFE dynamic-dark/color.background.inverse.subtle": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.background.inverse.subtle.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.8.3", "description": "Use for the hovered state of color.background.inverse.subtle" } }, "UNSAFE dynamic-dark/color.background.inverse.subtle.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.8.3", "description": "Use for the pressed state of color.background.inverse.subtle" } }, "UNSAFE dynamic-dark/color.background.neutral": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "The default background for neutral elements, such as default buttons." } }, "UNSAFE dynamic-dark/color.background.neutral.hovered": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.neutral" } }, "UNSAFE dynamic-dark/color.background.neutral.pressed": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.neutral" } }, "UNSAFE dynamic-dark/color.background.neutral.subtle": { "value": "var(--ds-dynamic-background, #000000)", "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." } }, "UNSAFE dynamic-dark/color.background.neutral.subtle.hovered": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.neutral.subtle" } }, "UNSAFE dynamic-dark/color.background.neutral.subtle.pressed": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.neutral.subtle" } }, "UNSAFE dynamic-dark/color.background.neutral.bold": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "A vibrant background option for neutral UI elements, such as announcement banners." } }, "UNSAFE dynamic-dark/color.background.neutral.bold.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.neutral.bold" } }, "UNSAFE dynamic-dark/color.background.neutral.bold.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.neutral.bold" } }, "UNSAFE dynamic-dark/color.background.selected": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for the background of an element that communicates selection, such as a selected navigation item, or the opened state of a dropdown trigger. Use color.background.selected.hovered or color.background.selected.pressed when interacting with a selected element. Selection is distinct from keyboard focus and hover alone." } }, "UNSAFE dynamic-dark/color.background.selected.hovered": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for the background of an element that is selected and hovered. This preserves selection while showing pointer hover; do not use for an unselected element or keyboard focus alone." } }, "UNSAFE dynamic-dark/color.background.selected.pressed": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for the background of an element that is selected and being pressed. Return to color.background.selected or color.background.selected.hovered when the press ends and the element remains selected. Do not use for an unselected element or keyboard focus alone." } }, "UNSAFE dynamic-dark/color.background.selected.bold": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for the bold background of selected controls, such as checked checkboxes and selected radio buttons. Pair with color.text.inverse or color.icon.inverse for foreground content. Do not use for primary actions or keyboard focus alone." } }, "UNSAFE dynamic-dark/color.background.selected.bold.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for the background of a selected control that uses color.background.selected.bold while it is hovered, such as a checked checkbox. Pair with color.text.inverse or color.icon.inverse for foreground content. Do not use for an unselected control or keyboard focus alone." } }, "UNSAFE dynamic-dark/color.background.selected.bold.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for the background of a selected control that uses color.background.selected.bold while it is being pressed, such as a checked checkbox. Pair with color.text.inverse or color.icon.inverse for foreground content. Do not use for an unselected control or keyboard focus alone." } }, "UNSAFE dynamic-dark/color.background.brand.subtlest": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "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." } }, "UNSAFE dynamic-dark/color.background.brand.subtlest.hovered": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Hovered state of color.background.brand.subtlest." } }, "UNSAFE dynamic-dark/color.background.brand.subtlest.pressed": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Pressed state of color.background.brand.subtlest" } }, "UNSAFE dynamic-dark/color.background.brand.bold": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.background.brand.bold.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.brand.bold." } }, "UNSAFE dynamic-dark/color.background.brand.bold.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.brand.bold." } }, "UNSAFE dynamic-dark/color.background.brand.boldest": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.background.brand.boldest.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Hovered state of color.background.brand.boldest." } }, "UNSAFE dynamic-dark/color.background.brand.boldest.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "1.13.0", "description": "Pressed state of color.background.brand.boldest." } }, "UNSAFE dynamic-dark/color.background.danger": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for backgrounds communicating critical information, such in error section messages." } }, "UNSAFE dynamic-dark/color.background.danger.hovered": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.danger" } }, "UNSAFE dynamic-dark/color.background.danger.pressed": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.danger" } }, "UNSAFE dynamic-dark/color.background.danger.subtler": { "value": "#5D1F1A", "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." } }, "UNSAFE dynamic-dark/color.background.danger.subtler.hovered": { "value": "#872821", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Hovered state of color.background.danger.subtler" } }, "UNSAFE dynamic-dark/color.background.danger.subtler.pressed": { "value": "#AE2E24", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Pressed state of color.background.danger.subtler" } }, "UNSAFE dynamic-dark/color.background.danger.subtle": { "value": "#AE2E24", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Background colour for non-interactive elements communicating critical danger information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.danger.bold or color.background.danger.subtler for interactive states." } }, "UNSAFE dynamic-dark/color.background.danger.bold": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "A vibrant background option for communicating critical information, such as in danger buttons and error banners." } }, "UNSAFE dynamic-dark/color.background.danger.bold.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.danger.bold" } }, "UNSAFE dynamic-dark/color.background.danger.bold.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.danger.bold" } }, "UNSAFE dynamic-dark/color.background.warning": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for backgrounds communicating caution, such as in warning section messages." } }, "UNSAFE dynamic-dark/color.background.warning.hovered": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.warning" } }, "UNSAFE dynamic-dark/color.background.warning.pressed": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.warning" } }, "UNSAFE dynamic-dark/color.background.warning.subtler": { "value": "#693200", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for backgrounds of warning lozenges and badges to ensure accessibility and desired visual appearance." } }, "UNSAFE dynamic-dark/color.background.warning.subtler.hovered": { "value": "#7A3B00", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Hovered state of color.background.warning.subtler" } }, "UNSAFE dynamic-dark/color.background.warning.subtler.pressed": { "value": "#9E4C00", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Pressed state of color.background.warning.subtler" } }, "UNSAFE dynamic-dark/color.background.warning.subtle": { "value": "#9E4C00", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Background colour for non-interactive elements communicating caution (e.g. status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.warning.bold or color.background.warning.subtler for interactive states." } }, "UNSAFE dynamic-dark/color.background.warning.bold": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "A vibrant background option for communicating caution, such as in warning buttons and warning banners." } }, "UNSAFE dynamic-dark/color.background.warning.bold.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.warning.bold" } }, "UNSAFE dynamic-dark/color.background.warning.bold.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.warning.bold" } }, "UNSAFE dynamic-dark/color.background.success": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for backgrounds communicating a favorable outcome, such as in success section messages." } }, "UNSAFE dynamic-dark/color.background.success.hovered": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state for color.background.success" } }, "UNSAFE dynamic-dark/color.background.success.pressed": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.success" } }, "UNSAFE dynamic-dark/color.background.success.subtler": { "value": "#37471F", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for backgrounds of success lozenges and badges to ensure accessibility and desired visual appearance." } }, "UNSAFE dynamic-dark/color.background.success.subtler.hovered": { "value": "#3F5224", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Hovered state of color.background.success.subtler" } }, "UNSAFE dynamic-dark/color.background.success.subtler.pressed": { "value": "#4C6B1F", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Pressed state of color.background.success.subtler" } }, "UNSAFE dynamic-dark/color.background.success.subtle": { "value": "#4C6B1F", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Background colour for non-interactive elements communicating success (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.success.bold or color.background.success.subtler for interactive states." } }, "UNSAFE dynamic-dark/color.background.success.bold": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "A vibrant background option for communicating a favorable outcome, such as in checked toggles." } }, "UNSAFE dynamic-dark/color.background.success.bold.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.success.bold" } }, "UNSAFE dynamic-dark/color.background.success.bold.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.success.bold" } }, "UNSAFE dynamic-dark/color.background.discovery": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for backgrounds communicating change or something new, such as in discovery section messages." } }, "UNSAFE dynamic-dark/color.background.discovery.hovered": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hover state for color.background.discovery" } }, "UNSAFE dynamic-dark/color.background.discovery.pressed": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state for color.background.discovery" } }, "UNSAFE dynamic-dark/color.background.discovery.subtler": { "value": "#48245D", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for backgrounds of discovery lozenges and badges to ensure accessibility and desired visual appearance." } }, "UNSAFE dynamic-dark/color.background.discovery.subtler.hovered": { "value": "#673286", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Hovered state of color.background.discovery.subtler" } }, "UNSAFE dynamic-dark/color.background.discovery.subtler.pressed": { "value": "#803FA5", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Pressed state of color.background.discovery.subtler" } }, "UNSAFE dynamic-dark/color.background.discovery.subtle": { "value": "#803FA5", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Background colour for non-interactive elements communicating discovery (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.discovery.bold or color.background.discovery.subtler for interactive states." } }, "UNSAFE dynamic-dark/color.background.discovery.bold": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "A vibrant background option communicating change or something new, such as in onboarding spotlights." } }, "UNSAFE dynamic-dark/color.background.discovery.bold.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.discovery.bold" } }, "UNSAFE dynamic-dark/color.background.discovery.bold.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.discovery.bold" } }, "UNSAFE dynamic-dark/color.background.information": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for backgrounds communicating information or something in-progress, such as in information section messages." } }, "UNSAFE dynamic-dark/color.background.information.hovered": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.information" } }, "UNSAFE dynamic-dark/color.background.information.pressed": { "value": "oklch(from oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.information" } }, "UNSAFE dynamic-dark/color.background.information.subtler": { "value": "#123263", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Use for backgrounds of information lozenges and badges to ensure accessibility and desired visual appearance." } }, "UNSAFE dynamic-dark/color.background.information.subtler.hovered": { "value": "#144794", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Hovered state of color.background.information.subtler" } }, "UNSAFE dynamic-dark/color.background.information.subtler.pressed": { "value": "#1558BC", "attributes": { "group": "paint", "state": "active", "introduced": "8.1.0", "description": "Pressed state of color.background.information.subtler" } }, "UNSAFE dynamic-dark/color.background.information.subtle": { "value": "#1558BC", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Background colour for non-interactive elements communicating information (e.g. semantic badges, status pills, callout chips). Sits between subtler and bold in visual emphasis. Not for interactive surfaces — see color.background.information.bold or color.background.information.subtler for interactive states." } }, "UNSAFE dynamic-dark/color.background.information.bold": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "A vibrant background option for communicating information or something in-progress." } }, "UNSAFE dynamic-dark/color.background.information.bold.hovered": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Hovered state of color.background.information.bold" } }, "UNSAFE dynamic-dark/color.background.information.bold.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Pressed state of color.background.information.bold" } }, "UNSAFE dynamic-dark/color.border": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) l c h / 0.6)", "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." } }, "UNSAFE dynamic-dark/color.border.accent.lime": { "value": "#82B536", "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." } }, "UNSAFE dynamic-dark/color.border.accent.lime.subtle": { "value": "#4C6B1F", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative lime borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.accent.red": { "value": "#F15B50", "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." } }, "UNSAFE dynamic-dark/color.border.accent.red.subtle": { "value": "#AE2E24", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative red borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.accent.orange": { "value": "#F68909", "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." } }, "UNSAFE dynamic-dark/color.border.accent.orange.subtle": { "value": "#9E4C00", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative orange borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.accent.yellow": { "value": "#CF9F02", "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." } }, "UNSAFE dynamic-dark/color.border.accent.yellow.subtle": { "value": "#7F5F01", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative yellow borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.accent.green": { "value": "#2ABB7F", "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." } }, "UNSAFE dynamic-dark/color.border.accent.green.subtle": { "value": "#216E4E", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative green borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.accent.teal": { "value": "#42B2D7", "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." } }, "UNSAFE dynamic-dark/color.border.accent.teal.subtle": { "value": "#206A83", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative teal borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.accent.blue": { "value": "#4688EC", "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." } }, "UNSAFE dynamic-dark/color.border.accent.blue.subtle": { "value": "#1558BC", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative blue borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.accent.purple": { "value": "#BF63F3", "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." } }, "UNSAFE dynamic-dark/color.border.accent.purple.subtle": { "value": "#803FA5", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative purple borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.accent.magenta": { "value": "#DA62AC", "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." } }, "UNSAFE dynamic-dark/color.border.accent.magenta.subtle": { "value": "#943D73", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative magenta borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.accent.gray": { "value": "#7E8188", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.5", "description": "Use for borders on non-bold gray accent backgrounds." } }, "UNSAFE dynamic-dark/color.border.accent.gray.subtle": { "value": "#4B4D51", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative gray borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.code": { "value": "#E3E4F21F", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for code block and code diff borders." } }, "UNSAFE dynamic-dark/color.border.disabled": { "value": "oklch(from var(--ds-dynamic-background, #000000) l c h / 0.3)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders of elements in a disabled state." } }, "UNSAFE dynamic-dark/color.border.focused": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for the focus ring or border of an element that currently has keyboard or input focus. Do not use to indicate selection or hover alone. When an element is both selected and focused, keep its selected treatment and add a separate focus indicator." } }, "UNSAFE dynamic-dark/color.border.input": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.border.input.search": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) l c h / 0.6)", "attributes": { "group": "paint", "state": "active", "introduced": "16.12.0", "description": "Use for the border of search inputs." } }, "UNSAFE dynamic-dark/color.border.inverse": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders on bold backgrounds." } }, "UNSAFE dynamic-dark/color.border.selected": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for borders or visual indicators that communicate selection, such as the active tab or a selected menu item, or the opened state of a dropdown trigger. Do not use as a keyboard focus indicator; use color.border.focused for focus and preserve the selected treatment when both states apply." } }, "UNSAFE dynamic-dark/color.border.brand": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.border.danger": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders communicating critical information, such as the borders on invalid text fields." } }, "UNSAFE dynamic-dark/color.border.danger.subtle": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) l c h / 0.6)", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative danger borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.warning": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders communicating caution." } }, "UNSAFE dynamic-dark/color.border.warning.subtle": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) l c h / 0.6)", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative warning borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.success": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.border.success.subtle": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) l c h / 0.6)", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative success borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.discovery": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.border.discovery.subtle": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) l c h / 0.6)", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative discovery borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.information": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for borders communicating information or something in-progress." } }, "UNSAFE dynamic-dark/color.border.information.subtle": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) l c h / 0.6)", "attributes": { "group": "paint", "state": "active", "introduced": "13.2.0", "description": "Use for decorative information borders that do not need to meet 3:1 contrast requirements." } }, "UNSAFE dynamic-dark/color.border.bold": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.8", "description": "A neutral border option that passes min 3:1 contrast ratios." } }, "UNSAFE dynamic-dark/color.text": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for primary text, such as body copy, sentence case headers, and buttons." } }, "UNSAFE dynamic-dark/color.text.accent.lime": { "value": "#B3DF72", "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." } }, "UNSAFE dynamic-dark/color.text.accent.lime.bolder": { "value": "#D3F1A7", "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." } }, "UNSAFE dynamic-dark/color.text.accent.red": { "value": "#FD9891", "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." } }, "UNSAFE dynamic-dark/color.text.accent.red.bolder": { "value": "#FFD5D2", "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." } }, "UNSAFE dynamic-dark/color.text.accent.orange": { "value": "#FBC828", "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." } }, "UNSAFE dynamic-dark/color.text.accent.orange.bolder": { "value": "#FCE4A6", "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." } }, "UNSAFE dynamic-dark/color.text.accent.yellow": { "value": "#EED12B", "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." } }, "UNSAFE dynamic-dark/color.text.accent.yellow.bolder": { "value": "#F5E989", "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." } }, "UNSAFE dynamic-dark/color.text.accent.green": { "value": "#7EE2B8", "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." } }, "UNSAFE dynamic-dark/color.text.accent.green.bolder": { "value": "#BAF3DB", "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." } }, "UNSAFE dynamic-dark/color.text.accent.teal": { "value": "#9DD9EE", "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." } }, "UNSAFE dynamic-dark/color.text.accent.teal.bolder": { "value": "#C6EDFB", "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." } }, "UNSAFE dynamic-dark/color.text.accent.blue": { "value": "#8FB8F6", "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." } }, "UNSAFE dynamic-dark/color.text.accent.blue.bolder": { "value": "#CFE1FD", "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." } }, "UNSAFE dynamic-dark/color.text.accent.purple": { "value": "#D8A0F7", "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." } }, "UNSAFE dynamic-dark/color.text.accent.purple.bolder": { "value": "#EED7FC", "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." } }, "UNSAFE dynamic-dark/color.text.accent.magenta": { "value": "#F797D2", "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." } }, "UNSAFE dynamic-dark/color.text.accent.magenta.bolder": { "value": "#FDD0EC", "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." } }, "UNSAFE dynamic-dark/color.text.accent.gray": { "value": "#A9ABAF", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.5", "description": "Use for text on non-bold gray accent backgrounds, such as colored tags." } }, "UNSAFE dynamic-dark/color.text.accent.gray.bolder": { "value": "#E2E3E4", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.5", "description": "Use for text and icons on gray subtle accent backgrounds." } }, "UNSAFE dynamic-dark/color.text.code.accent.1": { "value": "#F797D2", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for an additional syntax-highlighting text color." } }, "UNSAFE dynamic-dark/color.text.code.accent.2": { "value": "#8FB8F6", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for an additional syntax-highlighting text color." } }, "UNSAFE dynamic-dark/color.text.code.comments": { "value": "#A9ABAF", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for comments in syntax-highlighted code." } }, "UNSAFE dynamic-dark/color.text.code.default": { "value": "#A9ABAF", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for default text in code blocks and code diffs." } }, "UNSAFE dynamic-dark/color.text.code.functions": { "value": "#7EE2B8", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for functions in syntax-highlighted code." } }, "UNSAFE dynamic-dark/color.text.code.gutter": { "value": "#96999E", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for line numbers and other code gutter text." } }, "UNSAFE dynamic-dark/color.text.code.keywords": { "value": "#FD9891", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for language keywords in syntax-highlighted code." } }, "UNSAFE dynamic-dark/color.text.code.numbers": { "value": "#EED12B", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for numeric values in syntax-highlighted code." } }, "UNSAFE dynamic-dark/color.text.code.operators": { "value": "#CECFD2", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for operators and punctuation in syntax-highlighted code." } }, "UNSAFE dynamic-dark/color.text.code.strings": { "value": "#B3DF72", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for string values in syntax-highlighted code." } }, "UNSAFE dynamic-dark/color.text.code.tags": { "value": "#FCA700", "attributes": { "group": "paint", "state": "active", "introduced": "16.0.0", "description": "Use for tags in syntax-highlighted code." } }, "UNSAFE dynamic-dark/color.text.disabled": { "value": "oklch(from var(--ds-dynamic-background, #000000) l c h / 0.3)", "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for text in a disabled state." } }, "UNSAFE dynamic-dark/color.text.inverse": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for text on bold backgrounds." } }, "UNSAFE dynamic-dark/color.text.selected": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for text that communicates selection, such as the active tab or a selected navigation item, or the opened state of a dropdown trigger. On bold selected backgrounds, use color.text.inverse instead. Do not use for unselected links, brand emphasis, or hover alone. Keep the selected text treatment when the element also has focus." } }, "UNSAFE dynamic-dark/color.text.brand": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for text that reinforces our brand." } }, "UNSAFE dynamic-dark/color.text.danger": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for critical text, such as input field error messaging." } }, "UNSAFE dynamic-dark/color.text.danger.bolder": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.text.warning": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for text to emphasize caution, such as in moved lozenges." } }, "UNSAFE dynamic-dark/color.text.warning.inverse": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for text when on bold warning backgrounds." } }, "UNSAFE dynamic-dark/color.text.warning.bolder": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.text.success": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for text to communicate a favorable outcome, such as input field success messaging." } }, "UNSAFE dynamic-dark/color.text.success.bolder": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.text.discovery": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for text to emphasize change or something new, such as in new lozenges." } }, "UNSAFE dynamic-dark/color.text.discovery.bolder": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.text.information": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.text.information.bolder": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.text.subtlest": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.15 * max(0, sign(l - 0.9 + 0.0001))) + (0.15 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.15 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.15 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "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." } }, "UNSAFE dynamic-dark/color.text.subtle": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.1 * max(0, sign(l - 0.9 + 0.0001))) + (0.1 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.1 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.1 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "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." } }, "UNSAFE dynamic-dark/color.icon": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icon-only buttons, or icons paired with color.text" } }, "UNSAFE dynamic-dark/color.icon.accent.lime": { "value": "#82B536", "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." } }, "UNSAFE dynamic-dark/color.icon.accent.red": { "value": "#E2483D", "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." } }, "UNSAFE dynamic-dark/color.icon.accent.orange": { "value": "#F68909", "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." } }, "UNSAFE dynamic-dark/color.icon.accent.yellow": { "value": "#EED12B", "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." } }, "UNSAFE dynamic-dark/color.icon.accent.green": { "value": "#2ABB7F", "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." } }, "UNSAFE dynamic-dark/color.icon.accent.teal": { "value": "#42B2D7", "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." } }, "UNSAFE dynamic-dark/color.icon.accent.blue": { "value": "#4688EC", "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." } }, "UNSAFE dynamic-dark/color.icon.accent.purple": { "value": "#BF63F3", "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." } }, "UNSAFE dynamic-dark/color.icon.accent.magenta": { "value": "#DA62AC", "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." } }, "UNSAFE dynamic-dark/color.icon.accent.gray": { "value": "#7E8188", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.5", "description": "Use for icons on non-bold gray accent backgrounds, such as file type icons." } }, "UNSAFE dynamic-dark/color.icon.disabled": { "value": "oklch(from var(--ds-dynamic-background, #000000) l c h / 0.3)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons in a disabled state." } }, "UNSAFE dynamic-dark/color.icon.inverse": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons on bold backgrounds." } }, "UNSAFE dynamic-dark/color.icon.selected": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.2", "description": "Use for icons that communicate selection, such as icons in selected navigation items, or the opened state of a dropdown trigger. On bold selected backgrounds, use color.icon.inverse instead. Do not use for brand emphasis or hover alone. Keep the selected icon treatment when the element also has focus." } }, "UNSAFE dynamic-dark/color.icon.brand": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons that reinforce our brand." } }, "UNSAFE dynamic-dark/color.icon.danger": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons communicating critical information, such as those used in error handing." } }, "UNSAFE dynamic-dark/color.icon.warning": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons communicating caution, such as those used in warning section messages." } }, "UNSAFE dynamic-dark/color.icon.warning.inverse": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons when on bold warning backgrounds." } }, "UNSAFE dynamic-dark/color.icon.success": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.icon.discovery": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons communicating change or something new, such as discovery section messages." } }, "UNSAFE dynamic-dark/color.icon.information": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons communicating information or something in-progress, such as information section messages." } }, "UNSAFE dynamic-dark/color.icon.subtlest": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.15 * max(0, sign(l - 0.9 + 0.0001))) + (0.15 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.15 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.15 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "1.54.0", "description": "Use for icons paired with color.text.subtlest" } }, "UNSAFE dynamic-dark/color.icon.subtle": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.1 * max(0, sign(l - 0.9 + 0.0001))) + (0.1 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.1 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.1 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for icons paired with color.text.subtle" } }, "UNSAFE dynamic-dark/color.link": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "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." } }, "UNSAFE dynamic-dark/color.link.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for links in a pressed state." } }, "UNSAFE dynamic-dark/color.link.visited": { "value": "var(--ds-dynamic-foreground, #FFFFFF)", "attributes": { "group": "paint", "state": "active", "introduced": "1.23.0", "description": "Use for visited links." } }, "UNSAFE dynamic-dark/color.link.visited.pressed": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "1.43.0", "description": "Use for visited links in a pressed state." } }, "UNSAFE dynamic-dark/color.interaction.hovered": { "value": "#ffffff33", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars." } }, "UNSAFE dynamic-dark/color.interaction.pressed": { "value": "#ffffff5c", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars." } }, "UNSAFE dynamic-dark/color.skeleton": { "value": "oklch(from var(--ds-dynamic-background, #000000) l c h / 0.3)", "attributes": { "group": "paint", "state": "active", "introduced": "0.8.0", "description": "Use for skeleton loading states" } }, "UNSAFE dynamic-dark/color.skeleton.subtle": { "value": "oklch(from var(--ds-dynamic-background, #000000) l c h / 0.3)", "attributes": { "group": "paint", "state": "active", "introduced": "0.8.0", "description": "Use for the pulse or shimmer effect in skeleton loading states" } }, "UNSAFE dynamic-dark/color.blanket": { "value": "#050C1F75", "attributes": { "group": "paint", "state": "active", "introduced": "0.0.15", "description": "Use for the screen overlay that appears with modal dialogs" } }, "UNSAFE dynamic-dark/color.blanket.selected": { "value": "#050C1F75", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use as a translucent blanket to communicate selection when changing the background of the selected content is not possible, such as selected Editor blocks. The content beneath remains visible. Do not use to indicate keyboard focus or hover alone." } }, "UNSAFE dynamic-dark/color.blanket.danger": { "value": "#050C1F75", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements" } }, "UNSAFE dynamic-dark/color.chart.categorical.1": { "value": "#4688EC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only. Follow numbered sequence." } }, "UNSAFE dynamic-dark/color.chart.categorical.1.hovered": { "value": "#669DF1", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.categorical.1." } }, "UNSAFE dynamic-dark/color.chart.categorical.2": { "value": "#94C748", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only. Follow numbered sequence." } }, "UNSAFE dynamic-dark/color.chart.categorical.2.hovered": { "value": "#B3DF72", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.categorical.2." } }, "UNSAFE dynamic-dark/color.chart.categorical.3": { "value": "#C97CF4", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only. Follow numbered sequence." } }, "UNSAFE dynamic-dark/color.chart.categorical.3.hovered": { "value": "#D8A0F7", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.categorical.3." } }, "UNSAFE dynamic-dark/color.chart.categorical.4": { "value": "#FCA700", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only. Follow numbered sequence." } }, "UNSAFE dynamic-dark/color.chart.categorical.4.hovered": { "value": "#FBC828", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.categorical.4." } }, "UNSAFE dynamic-dark/color.chart.categorical.5": { "value": "#1558BC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only. Follow numbered sequence." } }, "UNSAFE dynamic-dark/color.chart.categorical.5.hovered": { "value": "#1868DB", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.categorical.5." } }, "UNSAFE dynamic-dark/color.chart.categorical.6": { "value": "#964AC0", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only. Follow numbered sequence." } }, "UNSAFE dynamic-dark/color.chart.categorical.6.hovered": { "value": "#AF59E1", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.categorical.6." } }, "UNSAFE dynamic-dark/color.chart.categorical.7": { "value": "#42B2D7", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only. Follow numbered sequence." } }, "UNSAFE dynamic-dark/color.chart.categorical.7.hovered": { "value": "#6CC3E0", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.categorical.7." } }, "UNSAFE dynamic-dark/color.chart.categorical.8": { "value": "#E06C00", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only. Follow numbered sequence." } }, "UNSAFE dynamic-dark/color.chart.categorical.8.hovered": { "value": "#FBD779", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.categorical.8." } }, "UNSAFE dynamic-dark/color.chart.lime.bold": { "value": "#82B536", "attributes": { "group": "paint", "state": "active", "introduced": "1.8.0", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.lime.bold.hovered": { "value": "#94C748", "attributes": { "group": "paint", "state": "active", "introduced": "1.8.0", "description": "Hovered state of color.chart.lime.bold." } }, "UNSAFE dynamic-dark/color.chart.lime.bolder": { "value": "#94C748", "attributes": { "group": "paint", "state": "active", "introduced": "1.8.0", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.lime.bolder.hovered": { "value": "#B3DF72", "attributes": { "group": "paint", "state": "active", "introduced": "1.8.0", "description": "Hovered state of color.chart.lime.bolder." } }, "UNSAFE dynamic-dark/color.chart.lime.boldest": { "value": "#B3DF72", "attributes": { "group": "paint", "state": "active", "introduced": "1.8.0", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.lime.boldest.hovered": { "value": "#D3F1A7", "attributes": { "group": "paint", "state": "active", "introduced": "1.8.0", "description": "Hovered state of color.chart.lime.boldest." } }, "UNSAFE dynamic-dark/color.chart.neutral": { "value": "#7E8188", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "A secondary color for data visualisation or to communicate 'to-do' statues." } }, "UNSAFE dynamic-dark/color.chart.neutral.hovered": { "value": "#96999E", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.neutral." } }, "UNSAFE dynamic-dark/color.chart.red.bold": { "value": "#E2483D", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.red.bold.hovered": { "value": "#F15B50", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.red.bold." } }, "UNSAFE dynamic-dark/color.chart.red.bolder": { "value": "#F15B50", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.red.bolder.hovered": { "value": "#F87168", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.red.bolder." } }, "UNSAFE dynamic-dark/color.chart.red.boldest": { "value": "#FD9891", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.red.boldest.hovered": { "value": "#FFD5D2", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.red.boldest." } }, "UNSAFE dynamic-dark/color.chart.orange.bold": { "value": "#F68909", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.orange.bold.hovered": { "value": "#FCA700", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.orange.bold." } }, "UNSAFE dynamic-dark/color.chart.orange.bolder": { "value": "#FCA700", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.orange.bolder.hovered": { "value": "#FBC828", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.orange.bolder." } }, "UNSAFE dynamic-dark/color.chart.orange.boldest": { "value": "#FBD779", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.orange.boldest.hovered": { "value": "#FCE4A6", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.orange.boldest." } }, "UNSAFE dynamic-dark/color.chart.yellow.bold": { "value": "#CF9F02", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.yellow.bold.hovered": { "value": "#DDB30E", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.yellow.bold." } }, "UNSAFE dynamic-dark/color.chart.yellow.bolder": { "value": "#DDB30E", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.yellow.bolder.hovered": { "value": "#EED12B", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.yellow.bolder." } }, "UNSAFE dynamic-dark/color.chart.yellow.boldest": { "value": "#EED12B", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.yellow.boldest.hovered": { "value": "#F5E989", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.yellow.boldest." } }, "UNSAFE dynamic-dark/color.chart.green.bold": { "value": "#2ABB7F", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.green.bold.hovered": { "value": "#4BCE97", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.green.bold." } }, "UNSAFE dynamic-dark/color.chart.green.bolder": { "value": "#4BCE97", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.green.bolder.hovered": { "value": "#7EE2B8", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.green.bolder." } }, "UNSAFE dynamic-dark/color.chart.green.boldest": { "value": "#7EE2B8", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.green.boldest.hovered": { "value": "#BAF3DB", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.green.boldest." } }, "UNSAFE dynamic-dark/color.chart.teal.bold": { "value": "#42B2D7", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.teal.bold.hovered": { "value": "#6CC3E0", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.teal.bold." } }, "UNSAFE dynamic-dark/color.chart.teal.bolder": { "value": "#6CC3E0", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.teal.bolder.hovered": { "value": "#9DD9EE", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.teal.bolder." } }, "UNSAFE dynamic-dark/color.chart.teal.boldest": { "value": "#9DD9EE", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.teal.boldest.hovered": { "value": "#C6EDFB", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.teal.boldest." } }, "UNSAFE dynamic-dark/color.chart.blue.bold": { "value": "#357DE8", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.blue.bold.hovered": { "value": "#4688EC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.blue.bold." } }, "UNSAFE dynamic-dark/color.chart.blue.bolder": { "value": "#4688EC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.blue.bolder.hovered": { "value": "#669DF1", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.blue.bolder." } }, "UNSAFE dynamic-dark/color.chart.blue.boldest": { "value": "#8FB8F6", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.blue.boldest.hovered": { "value": "#CFE1FD", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.blue.boldest." } }, "UNSAFE dynamic-dark/color.chart.purple.bold": { "value": "#AF59E1", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.purple.bold.hovered": { "value": "#BF63F3", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.purple.bold." } }, "UNSAFE dynamic-dark/color.chart.purple.bolder": { "value": "#BF63F3", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.purple.bolder.hovered": { "value": "#C97CF4", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.purple.bolder." } }, "UNSAFE dynamic-dark/color.chart.purple.boldest": { "value": "#D8A0F7", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.purple.boldest.hovered": { "value": "#EED7FC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.purple.boldest." } }, "UNSAFE dynamic-dark/color.chart.magenta.bold": { "value": "#CD519D", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.magenta.bold.hovered": { "value": "#DA62AC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.magenta.bold." } }, "UNSAFE dynamic-dark/color.chart.magenta.bolder": { "value": "#DA62AC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.magenta.bolder.hovered": { "value": "#E774BB", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.magenta.bolder." } }, "UNSAFE dynamic-dark/color.chart.magenta.boldest": { "value": "#F797D2", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.magenta.boldest.hovered": { "value": "#FDD0EC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.magenta.boldest." } }, "UNSAFE dynamic-dark/color.chart.gray.bold": { "value": "#7E8188", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.gray.bold.hovered": { "value": "#96999E", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.gray.bold." } }, "UNSAFE dynamic-dark/color.chart.gray.bolder": { "value": "#96999E", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.gray.bolder.hovered": { "value": "#A9ABAF", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.gray.bolder." } }, "UNSAFE dynamic-dark/color.chart.gray.boldest": { "value": "#A9ABAF", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation only." } }, "UNSAFE dynamic-dark/color.chart.gray.boldest.hovered": { "value": "#BFC1C4", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.gray.boldest." } }, "UNSAFE dynamic-dark/color.chart.brand": { "value": "#4688EC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Our primary color for data visualisation. Use when only one color is required." } }, "UNSAFE dynamic-dark/color.chart.brand.hovered": { "value": "#669DF1", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.brand." } }, "UNSAFE dynamic-dark/color.chart.danger": { "value": "#E2483D", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation communicating negative information, such as 'off track'." } }, "UNSAFE dynamic-dark/color.chart.danger.hovered": { "value": "#F15B50", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.danger." } }, "UNSAFE dynamic-dark/color.chart.danger.bold": { "value": "#FFB8B2", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "A stronger emphasis option of color.chart.danger." } }, "UNSAFE dynamic-dark/color.chart.danger.bold.hovered": { "value": "#FD9891", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.danger.bold." } }, "UNSAFE dynamic-dark/color.chart.warning": { "value": "#F68909", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation communicating caution, such as 'at risk' statuses." } }, "UNSAFE dynamic-dark/color.chart.warning.hovered": { "value": "#FCA700", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.warning." } }, "UNSAFE dynamic-dark/color.chart.warning.bold": { "value": "#FBC828", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "A stronger emphasis option of color.chart.warning." } }, "UNSAFE dynamic-dark/color.chart.warning.bold.hovered": { "value": "#FCE4A6", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.warning.bold." } }, "UNSAFE dynamic-dark/color.chart.success": { "value": "#82B536", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation communicating positive information, such as 'on track'." } }, "UNSAFE dynamic-dark/color.chart.success.hovered": { "value": "#94C748", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.success." } }, "UNSAFE dynamic-dark/color.chart.success.bold": { "value": "#B3DF72", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "A stronger emphasis option of color.chart.success." } }, "UNSAFE dynamic-dark/color.chart.success.bold.hovered": { "value": "#D3F1A7", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.success.bold." } }, "UNSAFE dynamic-dark/color.chart.discovery": { "value": "#BF63F3", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation communicating 'new' statuses." } }, "UNSAFE dynamic-dark/color.chart.discovery.hovered": { "value": "#C97CF4", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.discovery." } }, "UNSAFE dynamic-dark/color.chart.discovery.bold": { "value": "#D8A0F7", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "A stronger emphasis option of color.chart.discovery." } }, "UNSAFE dynamic-dark/color.chart.discovery.bold.hovered": { "value": "#EED7FC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.discovery.bold." } }, "UNSAFE dynamic-dark/color.chart.information": { "value": "#4688EC", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "For data visualisation communicating low priority or in-progress statuses." } }, "UNSAFE dynamic-dark/color.chart.information.hovered": { "value": "#669DF1", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.information." } }, "UNSAFE dynamic-dark/color.chart.information.bold": { "value": "#8FB8F6", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "A stronger emphasis option of color.chart.information." } }, "UNSAFE dynamic-dark/color.chart.information.bold.hovered": { "value": "#CFE1FD", "attributes": { "group": "paint", "state": "active", "introduced": "0.13.3", "description": "Hovered state of color.chart.information.bold." } }, "UNSAFE dynamic-dark/color.rovo.background.brand.bold": { "value": "#FFFFFF", "attributes": { "group": "paint", "state": "active", "introduced": "8.2.0", "description": "Background color for Rovo brand emphasis." } }, "UNSAFE dynamic-dark/color.rovo.background.brand.bold.hovered": { "value": "#E2E3E4", "attributes": { "group": "paint", "state": "active", "introduced": "8.2.0", "description": "Hovered state of color.rovo.background.brand.bold." } }, "UNSAFE dynamic-dark/color.rovo.background.brand.bold.pressed": { "value": "#CECFD2", "attributes": { "group": "paint", "state": "active", "introduced": "8.2.0", "description": "Pressed state of color.rovo.background.brand.bold." } }, "UNSAFE dynamic-dark/color.rovo.border.lime": { "value": "#82B536", "attributes": { "group": "paint", "state": "active", "introduced": "13.1.1", "description": "Use for Rovo lime borders." } }, "UNSAFE dynamic-dark/color.rovo.border.saffron": { "value": "#FCA700", "attributes": { "group": "paint", "state": "active", "introduced": "13.1.1", "description": "Use for Rovo saffron borders." } }, "UNSAFE dynamic-dark/color.rovo.border.blue": { "value": "#357DE8", "attributes": { "group": "paint", "state": "active", "introduced": "13.1.1", "description": "Use for Rovo blue borders." } }, "UNSAFE dynamic-dark/color.rovo.border.purple": { "value": "#BF63F3", "attributes": { "group": "paint", "state": "active", "introduced": "13.1.1", "description": "Use for Rovo purple borders." } }, "UNSAFE dynamic-dark/color.rovo.icon.lime": { "value": "#82B536", "attributes": { "group": "paint", "state": "active", "introduced": "13.1.1", "description": "Use for Rovo lime icons." } }, "UNSAFE dynamic-dark/color.rovo.icon.saffron": { "value": "#FCA700", "attributes": { "group": "paint", "state": "active", "introduced": "13.1.1", "description": "Use for Rovo saffron icons." } }, "UNSAFE dynamic-dark/color.rovo.icon.blue": { "value": "#357DE8", "attributes": { "group": "paint", "state": "active", "introduced": "13.1.1", "description": "Use for Rovo blue icons." } }, "UNSAFE dynamic-dark/color.rovo.icon.purple": { "value": "#BF63F3", "attributes": { "group": "paint", "state": "active", "introduced": "13.1.1", "description": "Use for Rovo purple icons." } }, "UNSAFE dynamic-dark/elevation.surface": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use as the primary background for the UI." } }, "UNSAFE dynamic-dark/elevation.surface.hovered": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.20", "description": "Hovered state of elevation.surface" } }, "UNSAFE dynamic-dark/elevation.surface.pressed": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.20", "description": "Pressed state of elevation.surface" } }, "UNSAFE dynamic-dark/elevation.surface.container": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "13.3.0", "description": "Use as a neutral container surface background." } }, "UNSAFE dynamic-dark/elevation.surface.container.hovered": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "14.1.0", "description": "Hovered state of elevation.surface.container" } }, "UNSAFE dynamic-dark/elevation.surface.container.pressed": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "14.1.0", "description": "Pressed state of elevation.surface.container" } }, "UNSAFE dynamic-dark/elevation.surface.overlay": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for the background of elements that sit on top of they UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons. Also use for the background of raised cards in a dragged state. Combine with elevation.shadow.overlay." } }, "UNSAFE dynamic-dark/elevation.surface.overlay.hovered": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.20", "description": "Hovered state of elevation.surface.overlay" } }, "UNSAFE dynamic-dark/elevation.surface.overlay.pressed": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.20", "description": "Pressed state of elevation.surface.overlay" } }, "UNSAFE dynamic-dark/elevation.surface.raised": { "value": "var(--ds-dynamic-background, #000000)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "Use for the background of cards that can be moved, such as Jira cards on a Kanban board. Combine with elevation.shadow.raised." } }, "UNSAFE dynamic-dark/elevation.surface.raised.hovered": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.20", "description": "Hovered state of elevation.surface.raised" } }, "UNSAFE dynamic-dark/elevation.surface.raised.pressed": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.20", "description": "Pressed state of elevation.surface.raised" } }, "UNSAFE dynamic-dark/elevation.surface.sunken": { "value": "oklch(from var(--ds-dynamic-background, #000000) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.6.0", "description": "A secondary background for the UI commonly used for grouping items, such as Jira cards in columns." } }, "UNSAFE dynamic-dark/elevation.rovo.surface.overlay": { "value": "#242528", "attributes": { "group": "paint", "state": "active", "introduced": "13.3.0", "description": "Use for Rovo overlay surface backgrounds." } }, "UNSAFE dynamic-dark/elevation.rovo.surface.overlay.hovered": { "value": "#2B2C2F", "attributes": { "group": "paint", "state": "active", "introduced": "13.3.0", "description": "Hovered state of elevation.rovo.surface.overlay." } }, "UNSAFE dynamic-dark/elevation.rovo.surface.overlay.pressed": { "value": "#303134", "attributes": { "group": "paint", "state": "active", "introduced": "13.3.0", "description": "Pressed state of elevation.rovo.surface.overlay." } }, "UNSAFE dynamic-dark/elevation.shadow.overflow": { "value": [ { "radius": 8, "offset": { "x": 0, "y": 0 }, "color": "var(--ds-dynamic-foreground, #FFFFFF)", "opacity": 0.16 }, { "radius": 1, "offset": { "x": 0, "y": 0 }, "color": "var(--ds-dynamic-foreground, #FFFFFF)", "opacity": 0.12 } ], "attributes": { "group": "shadow", "state": "active", "introduced": "0.6.0", "description": "Use to create a shadow when content scrolls under other content." } }, "UNSAFE dynamic-dark/elevation.shadow.overflow.perimeter": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.05 * max(0, sign(l - 0.9 + 0.0001))) + (0.05 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.05 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.05 * 1.5 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.32", "description": "Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.spread to replicate the overflow shadow." } }, "UNSAFE dynamic-dark/elevation.shadow.overflow.spread": { "value": "oklch(from var(--ds-dynamic-foreground, #FFFFFF) calc(l - (0.03 * max(0, sign(l - 0.9 + 0.0001))) + (0.03 * max(0, sign(0.9 - l - 0.0001) * sign(l - 0.5 + 0.0001))) - (0.03 * max(0, sign(0.5 - l - 0.0001) * sign(l - 0.3 - 0.0001))) + (0.03 * 2 * max(0, sign(0.3 - l + 0.0001)))) c h)", "attributes": { "group": "paint", "state": "active", "introduced": "0.10.32", "description": "Use only when elevation.shadow.overflow is not technically feasible to implement. Pair with elevation.shadow.overflow.perimeter to replicate the overflow shadow." } }, "UNSAFE dynamic-dark/elevation.shadow.overlay": { "value": [ { "radius": 12, "spread": 1, "color": "var(--ds-dynamic-foreground, #FFFFFF)", "offset": { "x": 0, "y": 8 }, "opacity": 0.15 }, { "radius": 1, "offset": { "x": 0, "y": 0 }, "color": "var(--ds-dynamic-foreground, #FFFFFF)", "opacity": 0.31 }, { "radius": 1, "spread": 1, "offset": { "x": 0, "y": 0 }, "color": "#01040475", "opacity": 0.5 } ], "attributes": { "group": "shadow", "state": "active", "introduced": "0.6.0", "description": "Use for the box shadow of elements that sit on top of the UI, such as modals, dropdown menus, flags, and inline dialogs. Combine with elevation.surface.overlay\n\nAlso use for the box shadow of raised cards in a dragged state." } }, "UNSAFE dynamic-dark/elevation.shadow.raised": { "value": [ { "radius": 1, "spread": 1, "color": "var(--ds-dynamic-foreground, #FFFFFF)", "offset": { "x": 0, "y": 1 }, "opacity": 0.25 }, { "radius": 1, "offset": { "x": 0, "y": 0 }, "color": "var(--ds-dynamic-foreground, #FFFFFF)", "opacity": 0.31 }, { "radius": 1, "offset": { "x": 0, "y": 0 }, "color": "#01040475", "opacity": 0.5 } ], "attributes": { "group": "shadow", "state": "active", "introduced": "0.6.0", "description": "Use for the box shadow of raised card elements, such as Jira cards on a Kanban board. Combine with elevation.surface.raised" } } }, "renameMap": {} }