@gitlab/ui
Version:
GitLab UI Components
35,917 lines • 1.11 MB
JSON
{
"border": {
"color": {
"transparent": {
"key": "{border.color.transparent}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used when a border needs to be present, but not visibly perceived.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used when a border needs to be present, but not visibly perceived.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{border.color.transparent}"
},
"name": "BORDER_COLOR_TRANSPARENT",
"attributes": {},
"path": [
"border",
"color",
"transparent"
]
},
"default": {
"key": "{border.color.default}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the default border color.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/border.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the default border color.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{border.color.default}"
},
"name": "BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"border",
"color",
"default"
]
},
"subtle": {
"key": "{border.color.subtle}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for a subtle border in combination with the default background.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/border.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for a subtle border in combination with the default background.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{border.color.subtle}"
},
"name": "BORDER_COLOR_SUBTLE",
"attributes": {},
"path": [
"border",
"color",
"subtle"
]
},
"strong": {
"key": "{border.color.strong}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/border.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for a distinct border that emphasizes an edge or boundaries.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{border.color.strong}"
},
"name": "BORDER_COLOR_STRONG",
"attributes": {},
"path": [
"border",
"color",
"strong"
]
},
"section": {
"key": "{border.color.section}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/border.tokens.json",
"isSource": true,
"original": {
"$value": "{border.color.default}",
"$type": "color",
"$description": "Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{border.color.section}"
},
"name": "BORDER_COLOR_SECTION",
"attributes": {},
"path": [
"border",
"color",
"section"
]
}
},
"radius": {
"none": {
"key": "{border.radius.none}",
"$value": "0px",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.0}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.none}"
},
"name": "BORDER_RADIUS_NONE",
"attributes": {},
"path": [
"border",
"radius",
"none"
]
},
"xs": {
"key": "{border.radius.xs}",
"$value": "1px",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.px}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.xs}"
},
"name": "BORDER_RADIUS_XS",
"attributes": {},
"path": [
"border",
"radius",
"xs"
]
},
"sm": {
"key": "{border.radius.sm}",
"$value": "0.125rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.1}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.sm}"
},
"name": "BORDER_RADIUS_SM",
"attributes": {},
"path": [
"border",
"radius",
"sm"
]
},
"md": {
"key": "{border.radius.md}",
"$value": "0.25rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.2}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.md}"
},
"name": "BORDER_RADIUS_MD",
"attributes": {},
"path": [
"border",
"radius",
"md"
]
},
"lg": {
"key": "{border.radius.lg}",
"$value": "0.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.3}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.lg}"
},
"name": "BORDER_RADIUS_LG",
"attributes": {},
"path": [
"border",
"radius",
"lg"
]
},
"xl": {
"key": "{border.radius.xl}",
"$value": "0.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.4}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.xl}"
},
"name": "BORDER_RADIUS_XL",
"attributes": {},
"path": [
"border",
"radius",
"xl"
]
},
"2xl": {
"key": "{border.radius.2xl}",
"$value": "1rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.5}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.2xl}"
},
"name": "BORDER_RADIUS_2XL",
"attributes": {},
"path": [
"border",
"radius",
"2xl"
]
},
"3xl": {
"key": "{border.radius.3xl}",
"$value": "1.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.6}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.3xl}"
},
"name": "BORDER_RADIUS_3XL",
"attributes": {},
"path": [
"border",
"radius",
"3xl"
]
},
"full": {
"key": "{border.radius.full}",
"$value": "9999px",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/constant/border.tokens.json",
"isSource": true,
"original": {
"$value": "9999px",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.full}"
},
"name": "BORDER_RADIUS_FULL",
"attributes": {},
"path": [
"border",
"radius",
"full"
]
},
"default": {
"key": "{border.radius.default}",
"$value": "0.25rem",
"$type": "dimension",
"$description": "",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/semantic/border.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.md}",
"$type": "dimension",
"$description": "",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{border.radius.default}"
},
"name": "BORDER_RADIUS_DEFAULT",
"attributes": {},
"path": [
"border",
"radius",
"default"
]
}
}
},
"color": {
"alpha": {
"0": {
"key": "{color.alpha.0}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.0}"
},
"name": "COLOR_ALPHA_0",
"attributes": {},
"path": [
"color",
"alpha",
"0"
]
},
"dark": {
"2": {
"key": "{color.alpha.dark.2}",
"$value": "rgba(5, 5, 6, 0.02)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.02)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.dark.2}"
},
"name": "COLOR_ALPHA_DARK_2",
"attributes": {},
"path": [
"color",
"alpha",
"dark",
"2"
]
},
"4": {
"key": "{color.alpha.dark.4}",
"$value": "rgba(5, 5, 6, 0.04)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.04)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.dark.4}"
},
"name": "COLOR_ALPHA_DARK_4",
"attributes": {},
"path": [
"color",
"alpha",
"dark",
"4"
]
},
"6": {
"key": "{color.alpha.dark.6}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.dark.6}"
},
"name": "COLOR_ALPHA_DARK_6",
"attributes": {},
"path": [
"color",
"alpha",
"dark",
"6"
]
},
"8": {
"key": "{color.alpha.dark.8}",
"$value": "rgba(5, 5, 6, 0.08)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.08)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.dark.8}"
},
"name": "COLOR_ALPHA_DARK_8",
"attributes": {},
"path": [
"color",
"alpha",
"dark",
"8"
]
},
"16": {
"key": "{color.alpha.dark.16}",
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.dark.16}"
},
"name": "COLOR_ALPHA_DARK_16",
"attributes": {},
"path": [
"color",
"alpha",
"dark",
"16"
]
},
"24": {
"key": "{color.alpha.dark.24}",
"$value": "rgba(5, 5, 6, 0.24)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.24)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.dark.24}"
},
"name": "COLOR_ALPHA_DARK_24",
"attributes": {},
"path": [
"color",
"alpha",
"dark",
"24"
]
},
"40": {
"key": "{color.alpha.dark.40}",
"$value": "rgba(5, 5, 6, 0.4)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.4)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.dark.40}"
},
"name": "COLOR_ALPHA_DARK_40",
"attributes": {},
"path": [
"color",
"alpha",
"dark",
"40"
]
}
},
"light": {
"2": {
"key": "{color.alpha.light.2}",
"$value": "rgba(255, 255, 255, 0.02)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.02)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.light.2}"
},
"name": "COLOR_ALPHA_LIGHT_2",
"attributes": {},
"path": [
"color",
"alpha",
"light",
"2"
]
},
"4": {
"key": "{color.alpha.light.4}",
"$value": "rgba(255, 255, 255, 0.04)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.04)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.light.4}"
},
"name": "COLOR_ALPHA_LIGHT_4",
"attributes": {},
"path": [
"color",
"alpha",
"light",
"4"
]
},
"6": {
"key": "{color.alpha.light.6}",
"$value": "rgba(255, 255, 255, 0.06)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.06)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.light.6}"
},
"name": "COLOR_ALPHA_LIGHT_6",
"attributes": {},
"path": [
"color",
"alpha",
"light",
"6"
]
},
"8": {
"key": "{color.alpha.light.8}",
"$value": "rgba(255, 255, 255, 0.08)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.08)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.light.8}"
},
"name": "COLOR_ALPHA_LIGHT_8",
"attributes": {},
"path": [
"color",
"alpha",
"light",
"8"
]
},
"16": {
"key": "{color.alpha.light.16}",
"$value": "rgba(255, 255, 255, 0.16)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.16)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.light.16}"
},
"name": "COLOR_ALPHA_LIGHT_16",
"attributes": {},
"path": [
"color",
"alpha",
"light",
"16"
]
},
"24": {
"key": "{color.alpha.light.24}",
"$value": "rgba(255, 255, 255, 0.24)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.24)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.light.24}"
},
"name": "COLOR_ALPHA_LIGHT_24",
"attributes": {},
"path": [
"color",
"alpha",
"light",
"24"
]
},
"36": {
"key": "{color.alpha.light.36}",
"$value": "rgba(255, 255, 255, 0.36)",
"$type": "color",
"$deprecated": true,
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.36)",
"$type": "color",
"$deprecated": true,
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.light.36}"
},
"name": "COLOR_ALPHA_LIGHT_36",
"attributes": {},
"path": [
"color",
"alpha",
"light",
"36"
]
},
"40": {
"key": "{color.alpha.light.40}",
"$value": "rgba(255, 255, 255, 0.4)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.4)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.light.40}"
},
"name": "COLOR_ALPHA_LIGHT_40",
"attributes": {},
"path": [
"color",
"alpha",
"light",
"40"
]
}
}
},
"blue": {
"50": {
"key": "{color.blue.50}",
"$value": "#e9f3fc",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#e9f3fc",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.50}"
},
"name": "COLOR_BLUE_50",
"attributes": {},
"path": [
"color",
"blue",
"50"
]
},
"100": {
"key": "{color.blue.100}",
"$value": "#cbe2f9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#cbe2f9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.100}"
},
"name": "COLOR_BLUE_100",
"attributes": {},
"path": [
"color",
"blue",
"100"
]
},
"200": {
"key": "{color.blue.200}",
"$value": "#9dc7f1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#9dc7f1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.200}"
},
"name": "COLOR_BLUE_200",
"attributes": {},
"path": [
"color",
"blue",
"200"
]
},
"300": {
"key": "{color.blue.300}",
"$value": "#63a6e9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#63a6e9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.300}"
},
"name": "COLOR_BLUE_300",
"attributes": {},
"path": [
"color",
"blue",
"300"
]
},
"400": {
"key": "{color.blue.400}",
"$value": "#428fdc",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#428fdc",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.400}"
},
"name": "COLOR_BLUE_400",
"attributes": {},
"path": [
"color",
"blue",
"400"
]
},
"500": {
"key": "{color.blue.500}",
"$value": "#1f75cb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#1f75cb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.500}"
},
"name": "COLOR_BLUE_500",
"attributes": {},
"path": [
"color",
"blue",
"500"
]
},
"600": {
"key": "{color.blue.600}",
"$value": "#2f68b4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#2f68b4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.600}"
},
"name": "COLOR_BLUE_600",
"attributes": {},
"path": [
"color",
"blue",
"600"
]
},
"700": {
"key": "{color.blue.700}",
"$value": "#2f5ca0",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#2f5ca0",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.700}"
},
"name": "COLOR_BLUE_700",
"attributes": {},
"path": [
"color",
"blue",
"700"
]
},
"800": {
"key": "{color.blue.800}",
"$value": "#284779",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#284779",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.800}"
},
"name": "COLOR_BLUE_800",
"attributes": {},
"path": [
"color",
"blue",
"800"
]
},
"900": {
"key": "{color.blue.900}",
"$value": "#213454",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#213454",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.900}"
},
"name": "COLOR_BLUE_900",
"attributes": {},
"path": [
"color",
"blue",
"900"
]
},
"950": {
"key": "{color.blue.950}",
"$value": "#1d283e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.blue.tokens.json",
"isSource": true,
"original": {
"$value": "#1d283e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.blue.950}"
},
"name": "COLOR_BLUE_950",
"attributes": {},
"path": [
"color",
"blue",
"950"
]
}
},
"brand-white": {
"key": "{color.brand-white}",
"$value": "#fff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#fff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-white}"
},
"name": "COLOR_BRAND_WHITE",
"attributes": {},
"path": [
"color",
"brand-white"
]
},
"brand-charcoal": {
"key": "{color.brand-charcoal}",
"$value": "#171321",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#171321",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-charcoal}"
},
"name": "COLOR_BRAND_CHARCOAL",
"attributes": {},
"path": [
"color",
"brand-charcoal"
]
},
"brand-orange": {
"01g": {
"key": "{color.brand-orange.01g}",
"$value": "#ffd1bf",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#ffd1bf",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-orange.01g}"
},
"name": "COLOR_BRAND_ORANGE_01G",
"attributes": {},
"path": [
"color",
"brand-orange",
"01g"
]
},
"01p": {
"key": "{color.brand-orange.01p}",
"$value": "#fca326",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#fca326",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-orange.01p}"
},
"name": "COLOR_BRAND_ORANGE_01P",
"attributes": {},
"path": [
"color",
"brand-orange",
"01p"
]
},
"02p": {
"key": "{color.brand-orange.02p}",
"$value": "#fc6d26",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#fc6d26",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-orange.02p}"
},
"name": "COLOR_BRAND_ORANGE_02P",
"attributes": {},
"path": [
"color",
"brand-orange",
"02p"
]
},
"03p": {
"key": "{color.brand-orange.03p}",
"$value": "#e24329",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#e24329",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-orange.03p}"
},
"name": "COLOR_BRAND_ORANGE_03P",
"attributes": {},
"path": [
"color",
"brand-orange",
"03p"
]
}
},
"brand-purple": {
"01g": {
"key": "{color.brand-purple.01g}",
"$value": "#ceb3ef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#ceb3ef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-purple.01g}"
},
"name": "COLOR_BRAND_PURPLE_01G",
"attributes": {},
"path": [
"color",
"brand-purple",
"01g"
]
},
"01p": {
"key": "{color.brand-purple.01p}",
"$value": "#a989f5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#a989f5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-purple.01p}"
},
"name": "COLOR_BRAND_PURPLE_01P",
"attributes": {},
"path": [
"color",
"brand-purple",
"01p"
]
},
"02p": {
"key": "{color.brand-purple.02p}",
"$value": "#7759c2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#7759c2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-purple.02p}"
},
"name": "COLOR_BRAND_PURPLE_02P",
"attributes": {},
"path": [
"color",
"brand-purple",
"02p"
]
}
},
"brand-gray": {
"01": {
"key": "{color.brand-gray.01}",
"$value": "#d1d0d3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#d1d0d3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-gray.01}"
},
"name": "COLOR_BRAND_GRAY_01",
"attributes": {},
"path": [
"color",
"brand-gray",
"01"
]
},
"02": {
"key": "{color.brand-gray.02}",
"$value": "#a2a1a6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#a2a1a6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-gray.02}"
},
"name": "COLOR_BRAND_GRAY_02",
"attributes": {},
"path": [
"color",
"brand-gray",
"02"
]
},
"03": {
"key": "{color.brand-gray.03}",
"$value": "#74717a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#74717a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-gray.03}"
},
"name": "COLOR_BRAND_GRAY_03",
"attributes": {},
"path": [
"color",
"brand-gray",
"03"
]
},
"04": {
"key": "{color.brand-gray.04}",
"$value": "#45424d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#45424d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-gray.04}"
},
"name": "COLOR_BRAND_GRAY_04",
"attributes": {},
"path": [
"color",
"brand-gray",
"04"
]
},
"05": {
"key": "{color.brand-gray.05}",
"$value": "#2b2838",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#2b2838",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-gray.05}"
},
"name": "COLOR_BRAND_GRAY_05",
"attributes": {},
"path": [
"color",
"brand-gray",
"05"
]
}
},
"brand-pink": {
"01g": {
"key": "{color.brand-pink.01g}",
"$value": "#ffb9c9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.brand.tokens.json",
"isSource": true,
"original": {
"$value": "#ffb9c9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.brand-pink.01g}"
},
"name": "COLOR_BRAND_PINK_01G",
"attributes": {},
"path": [
"color",
"brand-pink",
"01g"
]
}
},
"data-green": {
"50": {
"key": "{color.data-green.50}",
"$value": "#ddfab7",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#ddfab7",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.50}"
},
"name": "COLOR_DATA_GREEN_50",
"attributes": {},
"path": [
"color",
"data-green",
"50"
]
},
"100": {
"key": "{color.data-green.100}",
"$value": "#c6ed94",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#c6ed94",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.100}"
},
"name": "COLOR_DATA_GREEN_100",
"attributes": {},
"path": [
"color",
"data-green",
"100"
]
},
"200": {
"key": "{color.data-green.200}",
"$value": "#b0d97b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#b0d97b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.200}"
},
"name": "COLOR_DATA_GREEN_200",
"attributes": {},
"path": [
"color",
"data-green",
"200"
]
},
"300": {
"key": "{color.data-green.300}",
"$value": "#94c25e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#94c25e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.300}"
},
"name": "COLOR_DATA_GREEN_300",
"attributes": {},
"path": [
"color",
"data-green",
"300"
]
},
"400": {
"key": "{color.data-green.400}",
"$value": "#81ac41",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#81ac41",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.400}"
},
"name": "COLOR_DATA_GREEN_400",
"attributes": {},
"path": [
"color",
"data-green",
"400"
]
},
"500": {
"key": "{color.data-green.500}",
"$value": "#619025",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#619025",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.500}"
},
"name": "COLOR_DATA_GREEN_500",
"attributes": {},
"path": [
"color",
"data-green",
"500"
]
},
"600": {
"key": "{color.data-green.600}",
"$value": "#4e7f0e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#4e7f0e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.600}"
},
"name": "COLOR_DATA_GREEN_600",
"attributes": {},
"path": [
"color",
"data-green",
"600"
]
},
"700": {
"key": "{color.data-green.700}",
"$value": "#366800",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#366800",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.700}"
},
"name": "COLOR_DATA_GREEN_700",
"attributes": {},
"path": [
"color",
"data-green",
"700"
]
},
"800": {
"key": "{color.data-green.800}",
"$value": "#275600",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#275600",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.800}"
},
"name": "COLOR_DATA_GREEN_800",
"attributes": {},
"path": [
"color",
"data-green",
"800"
]
},
"900": {
"key": "{color.data-green.900}",
"$value": "#1a4500",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#1a4500",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.900}"
},
"name": "COLOR_DATA_GREEN_900",
"attributes": {},
"path": [
"color",
"data-green",
"900"
]
},
"950": {
"key": "{color.data-green.950}",
"$value": "#133a03",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#133a03",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-green.950}"
},
"name": "COLOR_DATA_GREEN_950",
"attributes": {},
"path": [
"color",
"data-green",
"950"
]
}
},
"data-aqua": {
"50": {
"key": "{color.data-aqua.50}",
"$value": "#b5fefd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#b5fefd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.50}"
},
"name": "COLOR_DATA_AQUA_50",
"attributes": {},
"path": [
"color",
"data-aqua",
"50"
]
},
"100": {
"key": "{color.data-aqua.100}",
"$value": "#93f2ef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#93f2ef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.100}"
},
"name": "COLOR_DATA_AQUA_100",
"attributes": {},
"path": [
"color",
"data-aqua",
"100"
]
},
"200": {
"key": "{color.data-aqua.200}",
"$value": "#5edee3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#5edee3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.200}"
},
"name": "COLOR_DATA_AQUA_200",
"attributes": {},
"path": [
"color",
"data-aqua",
"200"
]
},
"300": {
"key": "{color.data-aqua.300}",
"$value": "#32c5d2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#32c5d2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.300}"
},
"name": "COLOR_DATA_AQUA_300",
"attributes": {},
"path": [
"color",
"data-aqua",
"300"
]
},
"400": {
"key": "{color.data-aqua.400}",
"$value": "#00acc4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#00acc4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.400}"
},
"name": "COLOR_DATA_AQUA_400",
"attributes": {},
"path": [
"color",
"data-aqua",
"400"
]
},
"500": {
"key": "{color.data-aqua.500}",
"$value": "#0090b1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#0090b1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.500}"
},
"name": "COLOR_DATA_AQUA_500",
"attributes": {},
"path": [
"color",
"data-aqua",
"500"
]
},
"600": {
"key": "{color.data-aqua.600}",
"$value": "#007b9b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#007b9b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.600}"
},
"name": "COLOR_DATA_AQUA_600",
"attributes": {},
"path": [
"color",
"data-aqua",
"600"
]
},
"700": {
"key": "{color.data-aqua.700}",
"$value": "#006381",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#006381",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.700}"
},
"name": "COLOR_DATA_AQUA_700",
"attributes": {},
"path": [
"color",
"data-aqua",
"700"
]
},
"800": {
"key": "{color.data-aqua.800}",
"$value": "#00516c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#00516c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.800}"
},
"name": "COLOR_DATA_AQUA_800",
"attributes": {},
"path": [
"color",
"data-aqua",
"800"
]
},
"900": {
"key": "{color.data-aqua.900}",
"$value": "#004059",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#004059",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.900}"
},
"name": "COLOR_DATA_AQUA_900",
"attributes": {},
"path": [
"color",
"data-aqua",
"900"
]
},
"950": {
"key": "{color.data-aqua.950}",
"$value": "#00344b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#00344b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-aqua.950}"
},
"name": "COLOR_DATA_AQUA_950",
"attributes": {},
"path": [
"color",
"data-aqua",
"950"
]
}
},
"data-blue": {
"50": {
"key": "{color.data-blue.50}",
"$value": "#e9ebff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#e9ebff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.50}"
},
"name": "COLOR_DATA_BLUE_50",
"attributes": {},
"path": [
"color",
"data-blue",
"50"
]
},
"100": {
"key": "{color.data-blue.100}",
"$value": "#d2dcff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#d2dcff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.100}"
},
"name": "COLOR_DATA_BLUE_100",
"attributes": {},
"path": [
"color",
"data-blue",
"100"
]
},
"200": {
"key": "{color.data-blue.200}",
"$value": "#b7c6ff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#b7c6ff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.200}"
},
"name": "COLOR_DATA_BLUE_200",
"attributes": {},
"path": [
"color",
"data-blue",
"200"
]
},
"300": {
"key": "{color.data-blue.300}",
"$value": "#97acff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#97acff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.300}"
},
"name": "COLOR_DATA_BLUE_300",
"attributes": {},
"path": [
"color",
"data-blue",
"300"
]
},
"400": {
"key": "{color.data-blue.400}",
"$value": "#7992f5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#7992f5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.400}"
},
"name": "COLOR_DATA_BLUE_400",
"attributes": {},
"path": [
"color",
"data-blue",
"400"
]
},
"500": {
"key": "{color.data-blue.500}",
"$value": "#617ae2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#617ae2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.500}"
},
"name": "COLOR_DATA_BLUE_500",
"attributes": {},
"path": [
"color",
"data-blue",
"500"
]
},
"600": {
"key": "{color.data-blue.600}",
"$value": "#4e65cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#4e65cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.600}"
},
"name": "COLOR_DATA_BLUE_600",
"attributes": {},
"path": [
"color",
"data-blue",
"600"
]
},
"700": {
"key": "{color.data-blue.700}",
"$value": "#3f51ae",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#3f51ae",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.700}"
},
"name": "COLOR_DATA_BLUE_700",
"attributes": {},
"path": [
"color",
"data-blue",
"700"
]
},
"800": {
"key": "{color.data-blue.800}",
"$value": "#374291",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#374291",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.800}"
},
"name": "COLOR_DATA_BLUE_800",
"attributes": {},
"path": [
"color",
"data-blue",
"800"
]
},
"900": {
"key": "{color.data-blue.900}",
"$value": "#303470",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#303470",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.900}"
},
"name": "COLOR_DATA_BLUE_900",
"attributes": {},
"path": [
"color",
"data-blue",
"900"
]
},
"950": {
"key": "{color.data-blue.950}",
"$value": "#2a2b59",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#2a2b59",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-blue.950}"
},
"name": "COLOR_DATA_BLUE_950",
"attributes": {},
"path": [
"color",
"data-blue",
"950"
]
}
},
"data-magenta": {
"50": {
"key": "{color.data-magenta.50}",
"$value": "#ffe3eb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#ffe3eb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.50}"
},
"name": "COLOR_DATA_MAGENTA_50",
"attributes": {},
"path": [
"color",
"data-magenta",
"50"
]
},
"100": {
"key": "{color.data-magenta.100}",
"$value": "#ffccdb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#ffccdb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.100}"
},
"name": "COLOR_DATA_MAGENTA_100",
"attributes": {},
"path": [
"color",
"data-magenta",
"100"
]
},
"200": {
"key": "{color.data-magenta.200}",
"$value": "#fcacc5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#fcacc5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.200}"
},
"name": "COLOR_DATA_MAGENTA_200",
"attributes": {},
"path": [
"color",
"data-magenta",
"200"
]
},
"300": {
"key": "{color.data-magenta.300}",
"$value": "#f88aaf",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#f88aaf",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.300}"
},
"name": "COLOR_DATA_MAGENTA_300",
"attributes": {},
"path": [
"color",
"data-magenta",
"300"
]
},
"400": {
"key": "{color.data-magenta.400}",
"$value": "#e86e9a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#e86e9a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.400}"
},
"name": "COLOR_DATA_MAGENTA_400",
"attributes": {},
"path": [
"color",
"data-magenta",
"400"
]
},
"500": {
"key": "{color.data-magenta.500}",
"$value": "#cf4d81",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#cf4d81",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.500}"
},
"name": "COLOR_DATA_MAGENTA_500",
"attributes": {},
"path": [
"color",
"data-magenta",
"500"
]
},
"600": {
"key": "{color.data-magenta.600}",
"$value": "#b93d71",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#b93d71",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.600}"
},
"name": "COLOR_DATA_MAGENTA_600",
"attributes": {},
"path": [
"color",
"data-magenta",
"600"
]
},
"700": {
"key": "{color.data-magenta.700}",
"$value": "#9a2e5d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#9a2e5d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.700}"
},
"name": "COLOR_DATA_MAGENTA_700",
"attributes": {},
"path": [
"color",
"data-magenta",
"700"
]
},
"800": {
"key": "{color.data-magenta.800}",
"$value": "#7c214f",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#7c214f",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.800}"
},
"name": "COLOR_DATA_MAGENTA_800",
"attributes": {},
"path": [
"color",
"data-magenta",
"800"
]
},
"900": {
"key": "{color.data-magenta.900}",
"$value": "#661e3a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#661e3a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.900}"
},
"name": "COLOR_DATA_MAGENTA_900",
"attributes": {},
"path": [
"color",
"data-magenta",
"900"
]
},
"950": {
"key": "{color.data-magenta.950}",
"$value": "#541d31",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#541d31",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-magenta.950}"
},
"name": "COLOR_DATA_MAGENTA_950",
"attributes": {},
"path": [
"color",
"data-magenta",
"950"
]
}
},
"data-orange": {
"50": {
"key": "{color.data-orange.50}",
"$value": "#fae8d1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#fae8d1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.50}"
},
"name": "COLOR_DATA_ORANGE_50",
"attributes": {},
"path": [
"color",
"data-orange",
"50"
]
},
"100": {
"key": "{color.data-orange.100}",
"$value": "#f5d6b3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#f5d6b3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.100}"
},
"name": "COLOR_DATA_ORANGE_100",
"attributes": {},
"path": [
"color",
"data-orange",
"100"
]
},
"200": {
"key": "{color.data-orange.200}",
"$value": "#eebd8c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#eebd8c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.200}"
},
"name": "COLOR_DATA_ORANGE_200",
"attributes": {},
"path": [
"color",
"data-orange",
"200"
]
},
"300": {
"key": "{color.data-orange.300}",
"$value": "#e99b60",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#e99b60",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.300}"
},
"name": "COLOR_DATA_ORANGE_300",
"attributes": {},
"path": [
"color",
"data-orange",
"300"
]
},
"400": {
"key": "{color.data-orange.400}",
"$value": "#e07e41",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#e07e41",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.400}"
},
"name": "COLOR_DATA_ORANGE_400",
"attributes": {},
"path": [
"color",
"data-orange",
"400"
]
},
"500": {
"key": "{color.data-orange.500}",
"$value": "#c95d2e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#c95d2e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.500}"
},
"name": "COLOR_DATA_ORANGE_500",
"attributes": {},
"path": [
"color",
"data-orange",
"500"
]
},
"600": {
"key": "{color.data-orange.600}",
"$value": "#b14f18",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#b14f18",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.600}"
},
"name": "COLOR_DATA_ORANGE_600",
"attributes": {},
"path": [
"color",
"data-orange",
"600"
]
},
"700": {
"key": "{color.data-orange.700}",
"$value": "#92430a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#92430a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.700}"
},
"name": "COLOR_DATA_ORANGE_700",
"attributes": {},
"path": [
"color",
"data-orange",
"700"
]
},
"800": {
"key": "{color.data-orange.800}",
"$value": "#6f3500",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#6f3500",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.800}"
},
"name": "COLOR_DATA_ORANGE_800",
"attributes": {},
"path": [
"color",
"data-orange",
"800"
]
},
"900": {
"key": "{color.data-orange.900}",
"$value": "#5e2f05",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#5e2f05",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.900}"
},
"name": "COLOR_DATA_ORANGE_900",
"attributes": {},
"path": [
"color",
"data-orange",
"900"
]
},
"950": {
"key": "{color.data-orange.950}",
"$value": "#4b2707",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.data.tokens.json",
"isSource": true,
"original": {
"$value": "#4b2707",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.data-orange.950}"
},
"name": "COLOR_DATA_ORANGE_950",
"attributes": {},
"path": [
"color",
"data-orange",
"950"
]
}
},
"green": {
"50": {
"key": "{color.green.50}",
"$value": "#ecf4ee",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#ecf4ee",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.50}"
},
"name": "COLOR_GREEN_50",
"attributes": {},
"path": [
"color",
"green",
"50"
]
},
"100": {
"key": "{color.green.100}",
"$value": "#c3e6cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#c3e6cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.100}"
},
"name": "COLOR_GREEN_100",
"attributes": {},
"path": [
"color",
"green",
"100"
]
},
"200": {
"key": "{color.green.200}",
"$value": "#91d4a8",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#91d4a8",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.200}"
},
"name": "COLOR_GREEN_200",
"attributes": {},
"path": [
"color",
"green",
"200"
]
},
"300": {
"key": "{color.green.300}",
"$value": "#52b87a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#52b87a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.300}"
},
"name": "COLOR_GREEN_300",
"attributes": {},
"path": [
"color",
"green",
"300"
]
},
"400": {
"key": "{color.green.400}",
"$value": "#2da160",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#2da160",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.400}"
},
"name": "COLOR_GREEN_400",
"attributes": {},
"path": [
"color",
"green",
"400"
]
},
"500": {
"key": "{color.green.500}",
"$value": "#108548",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#108548",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.500}"
},
"name": "COLOR_GREEN_500",
"attributes": {},
"path": [
"color",
"green",
"500"
]
},
"600": {
"key": "{color.green.600}",
"$value": "#2f7549",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#2f7549",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.600}"
},
"name": "COLOR_GREEN_600",
"attributes": {},
"path": [
"color",
"green",
"600"
]
},
"700": {
"key": "{color.green.700}",
"$value": "#306440",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#306440",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.700}"
},
"name": "COLOR_GREEN_700",
"attributes": {},
"path": [
"color",
"green",
"700"
]
},
"800": {
"key": "{color.green.800}",
"$value": "#225131",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#225131",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.800}"
},
"name": "COLOR_GREEN_800",
"attributes": {},
"path": [
"color",
"green",
"800"
]
},
"900": {
"key": "{color.green.900}",
"$value": "#1e3e28",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#1e3e28",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.900}"
},
"name": "COLOR_GREEN_900",
"attributes": {},
"path": [
"color",
"green",
"900"
]
},
"950": {
"key": "{color.green.950}",
"$value": "#17291c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.green.tokens.json",
"isSource": true,
"original": {
"$value": "#17291c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.green.950}"
},
"name": "COLOR_GREEN_950",
"attributes": {},
"path": [
"color",
"green",
"950"
]
}
},
"neutral": {
"0": {
"key": "{color.neutral.0}",
"$value": "#fff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#fff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.0}"
},
"name": "COLOR_NEUTRAL_0",
"attributes": {},
"path": [
"color",
"neutral",
"0"
]
},
"10": {
"key": "{color.neutral.10}",
"$value": "#fbfafd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#fbfafd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.10}"
},
"name": "COLOR_NEUTRAL_10",
"attributes": {},
"path": [
"color",
"neutral",
"10"
]
},
"50": {
"key": "{color.neutral.50}",
"$value": "#ececef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#ececef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.50}"
},
"name": "COLOR_NEUTRAL_50",
"attributes": {},
"path": [
"color",
"neutral",
"50"
]
},
"100": {
"key": "{color.neutral.100}",
"$value": "#dcdcde",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#dcdcde",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.100}"
},
"name": "COLOR_NEUTRAL_100",
"attributes": {},
"path": [
"color",
"neutral",
"100"
]
},
"200": {
"key": "{color.neutral.200}",
"$value": "#bfbfc3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#bfbfc3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.200}"
},
"name": "COLOR_NEUTRAL_200",
"attributes": {},
"path": [
"color",
"neutral",
"200"
]
},
"300": {
"key": "{color.neutral.300}",
"$value": "#a4a3a8",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#a4a3a8",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.300}"
},
"name": "COLOR_NEUTRAL_300",
"attributes": {},
"path": [
"color",
"neutral",
"300"
]
},
"400": {
"key": "{color.neutral.400}",
"$value": "#89888d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#89888d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.400}"
},
"name": "COLOR_NEUTRAL_400",
"attributes": {},
"path": [
"color",
"neutral",
"400"
]
},
"500": {
"key": "{color.neutral.500}",
"$value": "#737278",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#737278",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.500}"
},
"name": "COLOR_NEUTRAL_500",
"attributes": {},
"path": [
"color",
"neutral",
"500"
]
},
"600": {
"key": "{color.neutral.600}",
"$value": "#626168",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#626168",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.600}"
},
"name": "COLOR_NEUTRAL_600",
"attributes": {},
"path": [
"color",
"neutral",
"600"
]
},
"700": {
"key": "{color.neutral.700}",
"$value": "#4c4b51",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#4c4b51",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.700}"
},
"name": "COLOR_NEUTRAL_700",
"attributes": {},
"path": [
"color",
"neutral",
"700"
]
},
"800": {
"key": "{color.neutral.800}",
"$value": "#3a383f",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#3a383f",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.800}"
},
"name": "COLOR_NEUTRAL_800",
"attributes": {},
"path": [
"color",
"neutral",
"800"
]
},
"900": {
"key": "{color.neutral.900}",
"$value": "#28272d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#28272d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.900}"
},
"name": "COLOR_NEUTRAL_900",
"attributes": {},
"path": [
"color",
"neutral",
"900"
]
},
"950": {
"key": "{color.neutral.950}",
"$value": "#18171d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#18171d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.950}"
},
"name": "COLOR_NEUTRAL_950",
"attributes": {},
"path": [
"color",
"neutral",
"950"
]
},
"1000": {
"key": "{color.neutral.1000}",
"$value": "#050506",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.neutral.tokens.json",
"isSource": true,
"original": {
"$value": "#050506",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.neutral.1000}"
},
"name": "COLOR_NEUTRAL_1000",
"attributes": {},
"path": [
"color",
"neutral",
"1000"
]
}
},
"orange": {
"50": {
"key": "{color.orange.50}",
"$value": "#fdf1dd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#fdf1dd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.50}"
},
"name": "COLOR_ORANGE_50",
"attributes": {},
"path": [
"color",
"orange",
"50"
]
},
"100": {
"key": "{color.orange.100}",
"$value": "#f5d9a8",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#f5d9a8",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.100}"
},
"name": "COLOR_ORANGE_100",
"attributes": {},
"path": [
"color",
"orange",
"100"
]
},
"200": {
"key": "{color.orange.200}",
"$value": "#e9be74",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#e9be74",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.200}"
},
"name": "COLOR_ORANGE_200",
"attributes": {},
"path": [
"color",
"orange",
"200"
]
},
"300": {
"key": "{color.orange.300}",
"$value": "#d99530",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#d99530",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.300}"
},
"name": "COLOR_ORANGE_300",
"attributes": {},
"path": [
"color",
"orange",
"300"
]
},
"400": {
"key": "{color.orange.400}",
"$value": "#c17d10",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#c17d10",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.400}"
},
"name": "COLOR_ORANGE_400",
"attributes": {},
"path": [
"color",
"orange",
"400"
]
},
"500": {
"key": "{color.orange.500}",
"$value": "#ab6100",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#ab6100",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.500}"
},
"name": "COLOR_ORANGE_500",
"attributes": {},
"path": [
"color",
"orange",
"500"
]
},
"600": {
"key": "{color.orange.600}",
"$value": "#995715",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#995715",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.600}"
},
"name": "COLOR_ORANGE_600",
"attributes": {},
"path": [
"color",
"orange",
"600"
]
},
"700": {
"key": "{color.orange.700}",
"$value": "#894b16",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#894b16",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.700}"
},
"name": "COLOR_ORANGE_700",
"attributes": {},
"path": [
"color",
"orange",
"700"
]
},
"800": {
"key": "{color.orange.800}",
"$value": "#693c14",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#693c14",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.800}"
},
"name": "COLOR_ORANGE_800",
"attributes": {},
"path": [
"color",
"orange",
"800"
]
},
"900": {
"key": "{color.orange.900}",
"$value": "#532e16",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#532e16",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.900}"
},
"name": "COLOR_ORANGE_900",
"attributes": {},
"path": [
"color",
"orange",
"900"
]
},
"950": {
"key": "{color.orange.950}",
"$value": "#382315",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.orange.tokens.json",
"isSource": true,
"original": {
"$value": "#382315",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.orange.950}"
},
"name": "COLOR_ORANGE_950",
"attributes": {},
"path": [
"color",
"orange",
"950"
]
}
},
"purple": {
"50": {
"key": "{color.purple.50}",
"$value": "#f4f0ff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#f4f0ff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.50}"
},
"name": "COLOR_PURPLE_50",
"attributes": {},
"path": [
"color",
"purple",
"50"
]
},
"100": {
"key": "{color.purple.100}",
"$value": "#e1d8f9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#e1d8f9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.100}"
},
"name": "COLOR_PURPLE_100",
"attributes": {},
"path": [
"color",
"purple",
"100"
]
},
"200": {
"key": "{color.purple.200}",
"$value": "#cbbbf2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#cbbbf2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.200}"
},
"name": "COLOR_PURPLE_200",
"attributes": {},
"path": [
"color",
"purple",
"200"
]
},
"300": {
"key": "{color.purple.300}",
"$value": "#ac93e6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#ac93e6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.300}"
},
"name": "COLOR_PURPLE_300",
"attributes": {},
"path": [
"color",
"purple",
"300"
]
},
"400": {
"key": "{color.purple.400}",
"$value": "#9475db",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#9475db",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.400}"
},
"name": "COLOR_PURPLE_400",
"attributes": {},
"path": [
"color",
"purple",
"400"
]
},
"500": {
"key": "{color.purple.500}",
"$value": "#7b58cf",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#7b58cf",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.500}"
},
"name": "COLOR_PURPLE_500",
"attributes": {},
"path": [
"color",
"purple",
"500"
]
},
"600": {
"key": "{color.purple.600}",
"$value": "#6a4fb4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#6a4fb4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.600}"
},
"name": "COLOR_PURPLE_600",
"attributes": {},
"path": [
"color",
"purple",
"600"
]
},
"700": {
"key": "{color.purple.700}",
"$value": "#5c47a6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#5c47a6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.700}"
},
"name": "COLOR_PURPLE_700",
"attributes": {},
"path": [
"color",
"purple",
"700"
]
},
"800": {
"key": "{color.purple.800}",
"$value": "#493c83",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#493c83",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.800}"
},
"name": "COLOR_PURPLE_800",
"attributes": {},
"path": [
"color",
"purple",
"800"
]
},
"900": {
"key": "{color.purple.900}",
"$value": "#342d59",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#342d59",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.900}"
},
"name": "COLOR_PURPLE_900",
"attributes": {},
"path": [
"color",
"purple",
"900"
]
},
"950": {
"key": "{color.purple.950}",
"$value": "#27243e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.purple.tokens.json",
"isSource": true,
"original": {
"$value": "#27243e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.purple.950}"
},
"name": "COLOR_PURPLE_950",
"attributes": {},
"path": [
"color",
"purple",
"950"
]
}
},
"red": {
"50": {
"key": "{color.red.50}",
"$value": "#fcf1ef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#fcf1ef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.50}"
},
"name": "COLOR_RED_50",
"attributes": {},
"path": [
"color",
"red",
"50"
]
},
"100": {
"key": "{color.red.100}",
"$value": "#fdd4cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#fdd4cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.100}"
},
"name": "COLOR_RED_100",
"attributes": {},
"path": [
"color",
"red",
"100"
]
},
"200": {
"key": "{color.red.200}",
"$value": "#fcb5aa",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#fcb5aa",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.200}"
},
"name": "COLOR_RED_200",
"attributes": {},
"path": [
"color",
"red",
"200"
]
},
"300": {
"key": "{color.red.300}",
"$value": "#f6806d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#f6806d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.300}"
},
"name": "COLOR_RED_300",
"attributes": {},
"path": [
"color",
"red",
"300"
]
},
"400": {
"key": "{color.red.400}",
"$value": "#ec5941",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#ec5941",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.400}"
},
"name": "COLOR_RED_400",
"attributes": {},
"path": [
"color",
"red",
"400"
]
},
"500": {
"key": "{color.red.500}",
"$value": "#dd2b0e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#dd2b0e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.500}"
},
"name": "COLOR_RED_500",
"attributes": {},
"path": [
"color",
"red",
"500"
]
},
"600": {
"key": "{color.red.600}",
"$value": "#c02f12",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#c02f12",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.600}"
},
"name": "COLOR_RED_600",
"attributes": {},
"path": [
"color",
"red",
"600"
]
},
"700": {
"key": "{color.red.700}",
"$value": "#a32c12",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#a32c12",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.700}"
},
"name": "COLOR_RED_700",
"attributes": {},
"path": [
"color",
"red",
"700"
]
},
"800": {
"key": "{color.red.800}",
"$value": "#812713",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#812713",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.800}"
},
"name": "COLOR_RED_800",
"attributes": {},
"path": [
"color",
"red",
"800"
]
},
"900": {
"key": "{color.red.900}",
"$value": "#582014",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#582014",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.900}"
},
"name": "COLOR_RED_900",
"attributes": {},
"path": [
"color",
"red",
"900"
]
},
"950": {
"key": "{color.red.950}",
"$value": "#3e1a14",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.red.tokens.json",
"isSource": true,
"original": {
"$value": "#3e1a14",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.red.950}"
},
"name": "COLOR_RED_950",
"attributes": {},
"path": [
"color",
"red",
"950"
]
}
}
},
"font": {
"family": {
"regular": {
"key": "{font.family.regular}",
"$value": [
"var(--default-regular-font, 'GitLab Sans')",
"'GitLab Sans'",
"-apple-system",
"BlinkMacSystemFont",
"'Segoe UI'",
"Roboto",
"'Noto Sans'",
"Ubuntu",
"Cantarell",
"'Helvetica Neue'",
"sans-serif",
"'Apple Color Emoji'",
"'Segoe UI Emoji'",
"'Segoe UI Symbol'",
"'Noto Color Emoji'"
],
"$type": "fontFamily",
"$extensions": {
"com.figma.scopes": [
"FONT_FAMILY"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": [
"var(--default-regular-font, 'GitLab Sans')",
"'GitLab Sans'",
"-apple-system",
"BlinkMacSystemFont",
"'Segoe UI'",
"Roboto",
"'Noto Sans'",
"Ubuntu",
"Cantarell",
"'Helvetica Neue'",
"sans-serif",
"'Apple Color Emoji'",
"'Segoe UI Emoji'",
"'Segoe UI Symbol'",
"'Noto Color Emoji'"
],
"$type": "fontFamily",
"$extensions": {
"com.figma.scopes": [
"FONT_FAMILY"
]
},
"key": "{font.family.regular}"
},
"name": "FONT_FAMILY_REGULAR",
"attributes": {},
"path": [
"font",
"family",
"regular"
]
},
"monospace": {
"key": "{font.family.monospace}",
"$value": [
"var(--default-mono-font, 'GitLab Mono')",
"'GitLab Mono'",
"'JetBrains Mono'",
"Menlo",
"'DejaVu Sans Mono'",
"'Liberation Mono'",
"Consolas",
"'Ubuntu Mono'",
"'Courier New'",
"'andale mono'",
"'lucida console'",
"monospace"
],
"$type": "fontFamily",
"$extensions": {
"com.figma.scopes": [
"FONT_FAMILY"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": [
"var(--default-mono-font, 'GitLab Mono')",
"'GitLab Mono'",
"'JetBrains Mono'",
"Menlo",
"'DejaVu Sans Mono'",
"'Liberation Mono'",
"Consolas",
"'Ubuntu Mono'",
"'Courier New'",
"'andale mono'",
"'lucida console'",
"monospace"
],
"$type": "fontFamily",
"$extensions": {
"com.figma.scopes": [
"FONT_FAMILY"
]
},
"key": "{font.family.monospace}"
},
"name": "FONT_FAMILY_MONOSPACE",
"attributes": {},
"path": [
"font",
"family",
"monospace"
]
}
},
"size": {
"100": {
"key": "{font.size.100}",
"$value": "0.75rem",
"$type": "dimension",
"$description": "Used for meta text and small labels.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "0.75rem",
"$type": "dimension",
"$description": "Used for meta text and small labels.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.100}"
},
"name": "FONT_SIZE_100",
"attributes": {},
"path": [
"font",
"size",
"100"
]
},
"200": {
"key": "{font.size.200}",
"$value": "0.8125rem",
"$type": "dimension",
"$description": "Used for level 6 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "0.8125rem",
"$type": "dimension",
"$description": "Used for level 6 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.200}"
},
"name": "FONT_SIZE_200",
"attributes": {},
"path": [
"font",
"size",
"200"
]
},
"300": {
"key": "{font.size.300}",
"$value": "0.875rem",
"$type": "dimension",
"$description": "Used for level 5 headings, body text, input labels, and help text.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "0.875rem",
"$type": "dimension",
"$description": "Used for level 5 headings, body text, input labels, and help text.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.300}"
},
"name": "FONT_SIZE_300",
"attributes": {},
"path": [
"font",
"size",
"300"
]
},
"400": {
"key": "{font.size.400}",
"$value": "1rem",
"$type": "dimension",
"$description": "Used for level 4 headings, large body text.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "1rem",
"$type": "dimension",
"$description": "Used for level 4 headings, large body text.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.400}"
},
"name": "FONT_SIZE_400",
"attributes": {},
"path": [
"font",
"size",
"400"
]
},
"500": {
"key": "{font.size.500}",
"$value": "clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)",
"$type": "string",
"$description": "Used for responsive level 3 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)",
"$type": "string",
"$description": "Used for responsive level 3 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.500}"
},
"name": "FONT_SIZE_500",
"attributes": {},
"path": [
"font",
"size",
"500"
]
},
"600": {
"key": "{font.size.600}",
"$value": "clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)",
"$type": "string",
"$description": "Used for responsive level 2 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)",
"$type": "string",
"$description": "Used for responsive level 2 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.600}"
},
"name": "FONT_SIZE_600",
"attributes": {},
"path": [
"font",
"size",
"600"
]
},
"700": {
"key": "{font.size.700}",
"$value": "clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)",
"$type": "string",
"$description": "Used for responsive level 1 headings",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)",
"$type": "string",
"$description": "Used for responsive level 1 headings",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.700}"
},
"name": "FONT_SIZE_700",
"attributes": {},
"path": [
"font",
"size",
"700"
]
},
"800": {
"key": "{font.size.800}",
"$value": "clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)",
"$type": "string",
"$description": "Used for a responsive display option that can be applied to a level 1 heading to increase its prominence.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)",
"$type": "string",
"$description": "Used for a responsive display option that can be applied to a level 1 heading to increase its prominence.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.800}"
},
"name": "FONT_SIZE_800",
"attributes": {},
"path": [
"font",
"size",
"800"
]
},
"xs": {
"key": "{font.size.xs}",
"$value": "0.625rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "0.625rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.xs}"
},
"name": "FONT_SIZE_XS",
"attributes": {},
"path": [
"font",
"size",
"xs"
]
},
"sm": {
"key": "{font.size.sm}",
"$value": "0.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "{font.size.100}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.sm}"
},
"name": "FONT_SIZE_SM",
"attributes": {},
"path": [
"font",
"size",
"sm"
]
},
"md": {
"key": "{font.size.md}",
"$value": "0.875rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "{font.size.300}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.md}"
},
"name": "FONT_SIZE_MD",
"attributes": {},
"path": [
"font",
"size",
"md"
]
},
"lg": {
"key": "{font.size.lg}",
"$value": "1rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "{font.size.400}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.lg}"
},
"name": "FONT_SIZE_LG",
"attributes": {},
"path": [
"font",
"size",
"lg"
]
},
"100-fixed": {
"key": "{font.size.100-fixed}",
"$value": "0.75rem",
"$type": "dimension",
"$description": "Used for meta text and small labels.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "0.75rem",
"$type": "dimension",
"$description": "Used for meta text and small labels.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.100-fixed}"
},
"name": "FONT_SIZE_100_FIXED",
"attributes": {},
"path": [
"font",
"size",
"100-fixed"
]
},
"200-fixed": {
"key": "{font.size.200-fixed}",
"$value": "0.8125rem",
"$type": "dimension",
"$description": "Used for level 6 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "0.8125rem",
"$type": "dimension",
"$description": "Used for level 6 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.200-fixed}"
},
"name": "FONT_SIZE_200_FIXED",
"attributes": {},
"path": [
"font",
"size",
"200-fixed"
]
},
"300-fixed": {
"key": "{font.size.300-fixed}",
"$value": "0.875rem",
"$type": "dimension",
"$description": "Used for level 5 headings, body text, input labels, and help text.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "0.875rem",
"$type": "dimension",
"$description": "Used for level 5 headings, body text, input labels, and help text.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.300-fixed}"
},
"name": "FONT_SIZE_300_FIXED",
"attributes": {},
"path": [
"font",
"size",
"300-fixed"
]
},
"400-fixed": {
"key": "{font.size.400-fixed}",
"$value": "1rem",
"$type": "dimension",
"$description": "Used for level 4 headings, large body text.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "1rem",
"$type": "dimension",
"$description": "Used for level 4 headings, large body text.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.400-fixed}"
},
"name": "FONT_SIZE_400_FIXED",
"attributes": {},
"path": [
"font",
"size",
"400-fixed"
]
},
"500-fixed": {
"key": "{font.size.500-fixed}",
"$value": "1.125rem",
"$type": "dimension",
"$description": "Used for level 3 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "1.125rem",
"$type": "dimension",
"$description": "Used for level 3 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.500-fixed}"
},
"name": "FONT_SIZE_500_FIXED",
"attributes": {},
"path": [
"font",
"size",
"500-fixed"
]
},
"600-fixed": {
"key": "{font.size.600-fixed}",
"$value": "1.3125rem",
"$type": "dimension",
"$description": "Used for level 2 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "1.3125rem",
"$type": "dimension",
"$description": "Used for level 2 headings.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.600-fixed}"
},
"name": "FONT_SIZE_600_FIXED",
"attributes": {},
"path": [
"font",
"size",
"600-fixed"
]
},
"700-fixed": {
"key": "{font.size.700-fixed}",
"$value": "1.5rem",
"$type": "dimension",
"$description": "Used for level 1 headings",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "1.5rem",
"$type": "dimension",
"$description": "Used for level 1 headings",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.700-fixed}"
},
"name": "FONT_SIZE_700_FIXED",
"attributes": {},
"path": [
"font",
"size",
"700-fixed"
]
},
"800-fixed": {
"key": "{font.size.800-fixed}",
"$value": "1.75rem",
"$type": "dimension",
"$description": "Used for a display option that can be applied to a level 1 heading to increase its prominence.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": "1.75rem",
"$type": "dimension",
"$description": "Used for a display option that can be applied to a level 1 heading to increase its prominence.",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.800-fixed}"
},
"name": "FONT_SIZE_800_FIXED",
"attributes": {},
"path": [
"font",
"size",
"800-fixed"
]
},
"base": {
"key": "{font.size.base}",
"$value": "0.875rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/semantic/font.tokens.json",
"isSource": true,
"original": {
"$value": "{font.size.md}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{font.size.base}"
},
"name": "FONT_SIZE_BASE",
"attributes": {},
"path": [
"font",
"size",
"base"
]
}
},
"weight": {
"100": {
"key": "{font.weight.100}",
"$value": 100,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": 100,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"key": "{font.weight.100}"
},
"name": "FONT_WEIGHT_100",
"attributes": {},
"path": [
"font",
"weight",
"100"
]
},
"300": {
"key": "{font.weight.300}",
"$value": 300,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": 300,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"key": "{font.weight.300}"
},
"name": "FONT_WEIGHT_300",
"attributes": {},
"path": [
"font",
"weight",
"300"
]
},
"normal": {
"key": "{font.weight.normal}",
"$value": 400,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": 400,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"key": "{font.weight.normal}"
},
"name": "FONT_WEIGHT_NORMAL",
"attributes": {},
"path": [
"font",
"weight",
"normal"
]
},
"semibold": {
"key": "{font.weight.semibold}",
"$value": 500,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": 500,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"key": "{font.weight.semibold}"
},
"name": "FONT_WEIGHT_SEMIBOLD",
"attributes": {},
"path": [
"font",
"weight",
"semibold"
]
},
"bold": {
"key": "{font.weight.bold}",
"$value": 600,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"filePath": "src/tokens/constant/font.tokens.json",
"isSource": true,
"original": {
"$value": 600,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"key": "{font.weight.bold}"
},
"name": "FONT_WEIGHT_BOLD",
"attributes": {},
"path": [
"font",
"weight",
"bold"
]
},
"heading": {
"key": "{font.weight.heading}",
"$value": 600,
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"filePath": "src/tokens/semantic/font.tokens.json",
"isSource": true,
"original": {
"$value": "{font.weight.bold}",
"$type": "fontWeight",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"key": "{font.weight.heading}"
},
"name": "FONT_WEIGHT_HEADING",
"attributes": {},
"path": [
"font",
"weight",
"heading"
]
}
}
},
"heading": {
"1": {
"key": "{heading.1}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)",
"letterSpacing": "-0.01em",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.700}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.1}"
},
"name": "HEADING_1",
"attributes": {},
"path": [
"heading",
"1"
]
},
"2": {
"key": "{heading.2}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)",
"letterSpacing": "-0.01em",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.600}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.2}"
},
"name": "HEADING_2",
"attributes": {},
"path": [
"heading",
"2"
]
},
"3": {
"key": "{heading.3}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.500}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.3}"
},
"name": "HEADING_3",
"attributes": {},
"path": [
"heading",
"3"
]
},
"4": {
"key": "{heading.4}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.400}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.4}"
},
"name": "HEADING_4",
"attributes": {},
"path": [
"heading",
"4"
]
},
"5": {
"key": "{heading.5}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.875rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.300}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.5}"
},
"name": "HEADING_5",
"attributes": {},
"path": [
"heading",
"5"
]
},
"6": {
"key": "{heading.6}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.8125rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.200}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.6}"
},
"name": "HEADING_6",
"attributes": {},
"path": [
"heading",
"6"
]
},
"scale": {
"100": {
"key": "{heading.scale.100}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.75rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.100}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.100}"
},
"name": "HEADING_SCALE_100",
"attributes": {},
"path": [
"heading",
"scale",
"100"
]
},
"200": {
"key": "{heading.scale.200}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.8125rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.200}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.200}"
},
"name": "HEADING_SCALE_200",
"attributes": {},
"path": [
"heading",
"scale",
"200"
]
},
"300": {
"key": "{heading.scale.300}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.875rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.300}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.300}"
},
"name": "HEADING_SCALE_300",
"attributes": {},
"path": [
"heading",
"scale",
"300"
]
},
"400": {
"key": "{heading.scale.400}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.400}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.400}"
},
"name": "HEADING_SCALE_400",
"attributes": {},
"path": [
"heading",
"scale",
"400"
]
},
"500": {
"key": "{heading.scale.500}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.500}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.500}"
},
"name": "HEADING_SCALE_500",
"attributes": {},
"path": [
"heading",
"scale",
"500"
]
},
"600": {
"key": "{heading.scale.600}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)",
"letterSpacing": "-0.01em",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.600}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.600}"
},
"name": "HEADING_SCALE_600",
"attributes": {},
"path": [
"heading",
"scale",
"600"
]
},
"700": {
"key": "{heading.scale.700}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)",
"letterSpacing": "-0.01em",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.700}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.700}"
},
"name": "HEADING_SCALE_700",
"attributes": {},
"path": [
"heading",
"scale",
"700"
]
},
"800": {
"key": "{heading.scale.800}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)",
"letterSpacing": "-0.01em",
"lineHeight": 1.125,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.800}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": 1.125,
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.800}"
},
"name": "HEADING_SCALE_800",
"attributes": {},
"path": [
"heading",
"scale",
"800"
]
},
"100-fixed": {
"key": "{heading.scale.100-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.75rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.100-fixed}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.100-fixed}"
},
"name": "HEADING_SCALE_100_FIXED",
"attributes": {},
"path": [
"heading",
"scale",
"100-fixed"
]
},
"200-fixed": {
"key": "{heading.scale.200-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.8125rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.200-fixed}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.200-fixed}"
},
"name": "HEADING_SCALE_200_FIXED",
"attributes": {},
"path": [
"heading",
"scale",
"200-fixed"
]
},
"300-fixed": {
"key": "{heading.scale.300-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.875rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.300-fixed}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.300-fixed}"
},
"name": "HEADING_SCALE_300_FIXED",
"attributes": {},
"path": [
"heading",
"scale",
"300-fixed"
]
},
"400-fixed": {
"key": "{heading.scale.400-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.400-fixed}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.400-fixed}"
},
"name": "HEADING_SCALE_400_FIXED",
"attributes": {},
"path": [
"heading",
"scale",
"400-fixed"
]
},
"500-fixed": {
"key": "{heading.scale.500-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1.125rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.500-fixed}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.500-fixed}"
},
"name": "HEADING_SCALE_500_FIXED",
"attributes": {},
"path": [
"heading",
"scale",
"500-fixed"
]
},
"600-fixed": {
"key": "{heading.scale.600-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1.3125rem",
"letterSpacing": "-0.01em",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.600-fixed}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.600-fixed}"
},
"name": "HEADING_SCALE_600_FIXED",
"attributes": {},
"path": [
"heading",
"scale",
"600-fixed"
]
},
"700-fixed": {
"key": "{heading.scale.700-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1.5rem",
"letterSpacing": "-0.01em",
"lineHeight": 1.25,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.700-fixed}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": "{line-height.heading}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.700-fixed}"
},
"name": "HEADING_SCALE_700_FIXED",
"attributes": {},
"path": [
"heading",
"scale",
"700-fixed"
]
},
"800-fixed": {
"key": "{heading.scale.800-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1.75rem",
"letterSpacing": "-0.01em",
"lineHeight": 1.125,
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/constant/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.800-fixed}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": 1.125,
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.scale.800-fixed}"
},
"name": "HEADING_SCALE_800_FIXED",
"attributes": {},
"path": [
"heading",
"scale",
"800-fixed"
]
}
},
"default": {
"margin": {
"top": {
"key": "{heading.default.margin.top}",
"$value": "0px",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.0}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{heading.default.margin.top}"
},
"name": "HEADING_DEFAULT_MARGIN_TOP",
"attributes": {},
"path": [
"heading",
"default",
"margin",
"top"
]
},
"bottom": {
"key": "{heading.default.margin.bottom}",
"$value": "1rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"PARAGRAPH_SPACING"
]
},
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": "{spacing-scale.5}",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"PARAGRAPH_SPACING"
]
},
"key": "{heading.default.margin.bottom}"
},
"name": "HEADING_DEFAULT_MARGIN_BOTTOM",
"attributes": {},
"path": [
"heading",
"default",
"margin",
"bottom"
]
}
}
},
"display": {
"key": "{heading.display}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)",
"letterSpacing": "-0.01em",
"lineHeight": 1.125,
"marginBottom": "1.5rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.800}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": 1.125,
"marginBottom": "{spacing-scale.6}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.display}"
},
"name": "HEADING_DISPLAY",
"attributes": {},
"path": [
"heading",
"display"
]
},
"1-fixed": {
"key": "{heading.1-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1.5rem",
"letterSpacing": "-0.01em",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.700-fixed}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.1-fixed}"
},
"name": "HEADING_1_FIXED",
"attributes": {},
"path": [
"heading",
"1-fixed"
]
},
"2-fixed": {
"key": "{heading.2-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1.3125rem",
"letterSpacing": "-0.01em",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.600-fixed}",
"letterSpacing": "{letter-spacing.heading}",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.2-fixed}"
},
"name": "HEADING_2_FIXED",
"attributes": {},
"path": [
"heading",
"2-fixed"
]
},
"3-fixed": {
"key": "{heading.3-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1.125rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.500-fixed}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.3-fixed}"
},
"name": "HEADING_3_FIXED",
"attributes": {},
"path": [
"heading",
"3-fixed"
]
},
"4-fixed": {
"key": "{heading.4-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "1rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.400-fixed}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.4-fixed}"
},
"name": "HEADING_4_FIXED",
"attributes": {},
"path": [
"heading",
"4-fixed"
]
},
"5-fixed": {
"key": "{heading.5-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.875rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.300-fixed}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.5-fixed}"
},
"name": "HEADING_5_FIXED",
"attributes": {},
"path": [
"heading",
"5-fixed"
]
},
"6-fixed": {
"key": "{heading.6-fixed}",
"$value": {
"fontWeight": 600,
"marginTop": "0px",
"fontSize": "0.8125rem",
"letterSpacing": "inherit",
"lineHeight": 1.25,
"marginBottom": "1rem",
"color": "#18171d"
},
"$type": "typography",
"filePath": "src/tokens/semantic/heading.tokens.json",
"isSource": true,
"original": {
"$value": {
"fontWeight": "{font.weight.heading}",
"marginTop": "{heading.default.margin.top}",
"fontSize": "{font.size.200-fixed}",
"letterSpacing": "inherit",
"lineHeight": "{line-height.heading}",
"marginBottom": "{heading.default.margin.bottom}",
"color": "{text.color.heading}"
},
"$type": "typography",
"key": "{heading.6-fixed}"
},
"name": "HEADING_6_FIXED",
"attributes": {},
"path": [
"heading",
"6-fixed"
]
}
},
"line-height": {
"12": {
"key": "{line-height.12}",
"$value": "0.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "0.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.12}"
},
"name": "LINE_HEIGHT_12",
"attributes": {},
"path": [
"line-height",
"12"
]
},
"16": {
"key": "{line-height.16}",
"$value": "1rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "1rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.16}"
},
"name": "LINE_HEIGHT_16",
"attributes": {},
"path": [
"line-height",
"16"
]
},
"20": {
"key": "{line-height.20}",
"$value": "1.25rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "1.25rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.20}"
},
"name": "LINE_HEIGHT_20",
"attributes": {},
"path": [
"line-height",
"20"
]
},
"24": {
"key": "{line-height.24}",
"$value": "1.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "1.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.24}"
},
"name": "LINE_HEIGHT_24",
"attributes": {},
"path": [
"line-height",
"24"
]
},
"28": {
"key": "{line-height.28}",
"$value": "1.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "1.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.28}"
},
"name": "LINE_HEIGHT_28",
"attributes": {},
"path": [
"line-height",
"28"
]
},
"32": {
"key": "{line-height.32}",
"$value": "2rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "2rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.32}"
},
"name": "LINE_HEIGHT_32",
"attributes": {},
"path": [
"line-height",
"32"
]
},
"36": {
"key": "{line-height.36}",
"$value": "2.25rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "2.25rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.36}"
},
"name": "LINE_HEIGHT_36",
"attributes": {},
"path": [
"line-height",
"36"
]
},
"42": {
"key": "{line-height.42}",
"$value": "2.625rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "2.625rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.42}"
},
"name": "LINE_HEIGHT_42",
"attributes": {},
"path": [
"line-height",
"42"
]
},
"44": {
"key": "{line-height.44}",
"$value": "2.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "2.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.44}"
},
"name": "LINE_HEIGHT_44",
"attributes": {},
"path": [
"line-height",
"44"
]
},
"52": {
"key": "{line-height.52}",
"$value": "3.25rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/constant/line_height.tokens.json",
"isSource": true,
"original": {
"$value": "3.25rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.52}"
},
"name": "LINE_HEIGHT_52",
"attributes": {},
"path": [
"line-height",
"52"
]
},
"heading": {
"key": "{line-height.heading}",
"$value": 1.25,
"$type": "number",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"filePath": "src/tokens/semantic/line_height.tokens.json",
"isSource": true,
"original": {
"$value": 1.25,
"$type": "number",
"$extensions": {
"com.figma.scopes": [
"LINE_HEIGHT"
]
},
"key": "{line-height.heading}"
},
"name": "LINE_HEIGHT_HEADING",
"attributes": {},
"path": [
"line-height",
"heading"
]
}
},
"opacity": {
"0": {
"key": "{opacity.0}",
"$value": "0",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": "0",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.0}"
},
"name": "OPACITY_0",
"attributes": {},
"path": [
"opacity",
"0"
]
},
"1": {
"key": "{opacity.1}",
"$value": ".1",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": ".1",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.1}"
},
"name": "OPACITY_1",
"attributes": {},
"path": [
"opacity",
"1"
]
},
"2": {
"key": "{opacity.2}",
"$value": ".2",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": ".2",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.2}"
},
"name": "OPACITY_2",
"attributes": {},
"path": [
"opacity",
"2"
]
},
"3": {
"key": "{opacity.3}",
"$value": ".3",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": ".3",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.3}"
},
"name": "OPACITY_3",
"attributes": {},
"path": [
"opacity",
"3"
]
},
"4": {
"key": "{opacity.4}",
"$value": ".4",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": ".4",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.4}"
},
"name": "OPACITY_4",
"attributes": {},
"path": [
"opacity",
"4"
]
},
"5": {
"key": "{opacity.5}",
"$value": ".5",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": ".5",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.5}"
},
"name": "OPACITY_5",
"attributes": {},
"path": [
"opacity",
"5"
]
},
"6": {
"key": "{opacity.6}",
"$value": ".6",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": ".6",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.6}"
},
"name": "OPACITY_6",
"attributes": {},
"path": [
"opacity",
"6"
]
},
"7": {
"key": "{opacity.7}",
"$value": ".7",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": ".7",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.7}"
},
"name": "OPACITY_7",
"attributes": {},
"path": [
"opacity",
"7"
]
},
"8": {
"key": "{opacity.8}",
"$value": ".8",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": ".8",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.8}"
},
"name": "OPACITY_8",
"attributes": {},
"path": [
"opacity",
"8"
]
},
"9": {
"key": "{opacity.9}",
"$value": ".9",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": ".9",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.9}"
},
"name": "OPACITY_9",
"attributes": {},
"path": [
"opacity",
"9"
]
},
"10": {
"key": "{opacity.10}",
"$value": "1",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/opacity.tokens.json",
"isSource": true,
"original": {
"$value": "1",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{opacity.10}"
},
"name": "OPACITY_10",
"attributes": {},
"path": [
"opacity",
"10"
]
}
},
"shadow": {
"sm": {
"key": "{shadow.sm}",
"$value": [
{
"color": "rgba(5, 5, 6, 0.16)",
"offsetX": 0,
"offsetY": 0,
"blur": "2px",
"spread": 0
},
{
"color": "rgba(5, 5, 6, 0.16)",
"offsetX": 0,
"offsetY": "1px",
"blur": "4px",
"spread": 0
}
],
"$type": "shadow",
"$description": "Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/shadow.tokens.json",
"isSource": true,
"original": {
"$value": [
{
"color": "{shadow.color.default}",
"offsetX": 0,
"offsetY": 0,
"blur": "2px",
"spread": 0
},
{
"color": "{shadow.color.default}",
"offsetX": 0,
"offsetY": "1px",
"blur": "4px",
"spread": 0
}
],
"$type": "shadow",
"$description": "Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.",
"$extensions": {
"com.figma.scopes": []
},
"key": "{shadow.sm}"
},
"name": "SHADOW_SM",
"attributes": {},
"path": [
"shadow",
"sm"
]
},
"md": {
"key": "{shadow.md}",
"$value": [
{
"color": "rgba(5, 5, 6, 0.16)",
"offsetX": 0,
"offsetY": 0,
"blur": "1px",
"spread": 0
},
{
"color": "rgba(5, 5, 6, 0.16)",
"offsetX": 0,
"offsetY": 0,
"blur": "2px",
"spread": 0
},
{
"color": "rgba(5, 5, 6, 0.16)",
"offsetX": 0,
"offsetY": "2px",
"blur": "8px",
"spread": 0
}
],
"$type": "shadow",
"$description": "Used for surfaces that need boundary definition and appear on hover. For example, popovers.",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/shadow.tokens.json",
"isSource": true,
"original": {
"$value": [
{
"color": "{shadow.color.default}",
"offsetX": 0,
"offsetY": 0,
"blur": "1px",
"spread": 0
},
{
"color": "{shadow.color.default}",
"offsetX": 0,
"offsetY": 0,
"blur": "2px",
"spread": 0
},
{
"color": "{shadow.color.default}",
"offsetX": 0,
"offsetY": "2px",
"blur": "8px",
"spread": 0
}
],
"$type": "shadow",
"$description": "Used for surfaces that need boundary definition and appear on hover. For example, popovers.",
"$extensions": {
"com.figma.scopes": []
},
"key": "{shadow.md}"
},
"name": "SHADOW_MD",
"attributes": {},
"path": [
"shadow",
"md"
]
},
"lg": {
"key": "{shadow.lg}",
"$value": [
{
"color": "rgba(5, 5, 6, 0.16)",
"offsetX": 0,
"offsetY": 0,
"blur": "2px",
"spread": 0
},
{
"color": "rgba(5, 5, 6, 0.16)",
"offsetX": 0,
"offsetY": 0,
"blur": "2px",
"spread": 0
},
{
"color": "rgba(5, 5, 6, 0.16)",
"offsetX": 0,
"offsetY": "4px",
"blur": "12px",
"spread": 0
}
],
"$type": "shadow",
"$description": "Used for large surfaces that present additional context to the user.",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/shadow.tokens.json",
"isSource": true,
"original": {
"$value": [
{
"color": "{shadow.color.default}",
"offsetX": 0,
"offsetY": 0,
"blur": "2px",
"spread": 0
},
{
"color": "{shadow.color.default}",
"offsetX": 0,
"offsetY": 0,
"blur": "2px",
"spread": 0
},
{
"color": "{shadow.color.default}",
"offsetX": 0,
"offsetY": "4px",
"blur": "12px",
"spread": 0
}
],
"$type": "shadow",
"$description": "Used for large surfaces that present additional context to the user.",
"$extensions": {
"com.figma.scopes": []
},
"key": "{shadow.lg}"
},
"name": "SHADOW_LG",
"attributes": {},
"path": [
"shadow",
"lg"
]
},
"color": {
"default": {
"key": "{shadow.color.default}",
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$description": "Used for the default shadow color.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR"
]
},
"filePath": "src/tokens/semantic/shadow.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.16}",
"$type": "color",
"$description": "Used for the default shadow color.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR"
]
},
"key": "{shadow.color.default}"
},
"name": "SHADOW_COLOR_DEFAULT",
"attributes": {},
"path": [
"shadow",
"color",
"default"
]
}
}
},
"spacing-scale": {
"0": {
"key": "{spacing-scale.0}",
"$value": "0px",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "0px",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.0}"
},
"name": "SPACING_SCALE_0",
"attributes": {},
"path": [
"spacing-scale",
"0"
]
},
"1": {
"key": "{spacing-scale.1}",
"$value": "0.125rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "0.125rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.1}"
},
"name": "SPACING_SCALE_1",
"attributes": {},
"path": [
"spacing-scale",
"1"
]
},
"2": {
"key": "{spacing-scale.2}",
"$value": "0.25rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "0.25rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.2}"
},
"name": "SPACING_SCALE_2",
"attributes": {},
"path": [
"spacing-scale",
"2"
]
},
"3": {
"key": "{spacing-scale.3}",
"$value": "0.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "0.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.3}"
},
"name": "SPACING_SCALE_3",
"attributes": {},
"path": [
"spacing-scale",
"3"
]
},
"4": {
"key": "{spacing-scale.4}",
"$value": "0.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "0.75rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.4}"
},
"name": "SPACING_SCALE_4",
"attributes": {},
"path": [
"spacing-scale",
"4"
]
},
"5": {
"key": "{spacing-scale.5}",
"$value": "1rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "1rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.5}"
},
"name": "SPACING_SCALE_5",
"attributes": {},
"path": [
"spacing-scale",
"5"
]
},
"6": {
"key": "{spacing-scale.6}",
"$value": "1.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "1.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.6}"
},
"name": "SPACING_SCALE_6",
"attributes": {},
"path": [
"spacing-scale",
"6"
]
},
"7": {
"key": "{spacing-scale.7}",
"$value": "2rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "2rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.7}"
},
"name": "SPACING_SCALE_7",
"attributes": {},
"path": [
"spacing-scale",
"7"
]
},
"8": {
"key": "{spacing-scale.8}",
"$value": "2.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "2.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.8}"
},
"name": "SPACING_SCALE_8",
"attributes": {},
"path": [
"spacing-scale",
"8"
]
},
"9": {
"key": "{spacing-scale.9}",
"$value": "3rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "3rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.9}"
},
"name": "SPACING_SCALE_9",
"attributes": {},
"path": [
"spacing-scale",
"9"
]
},
"10": {
"key": "{spacing-scale.10}",
"$value": "3.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "3.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.10}"
},
"name": "SPACING_SCALE_10",
"attributes": {},
"path": [
"spacing-scale",
"10"
]
},
"11": {
"key": "{spacing-scale.11}",
"$value": "4rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "4rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.11}"
},
"name": "SPACING_SCALE_11",
"attributes": {},
"path": [
"spacing-scale",
"11"
]
},
"12": {
"key": "{spacing-scale.12}",
"$value": "5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.12}"
},
"name": "SPACING_SCALE_12",
"attributes": {},
"path": [
"spacing-scale",
"12"
]
},
"13": {
"key": "{spacing-scale.13}",
"$value": "6rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "6rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.13}"
},
"name": "SPACING_SCALE_13",
"attributes": {},
"path": [
"spacing-scale",
"13"
]
},
"15": {
"key": "{spacing-scale.15}",
"$value": "7.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "7.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.15}"
},
"name": "SPACING_SCALE_15",
"attributes": {},
"path": [
"spacing-scale",
"15"
]
},
"18": {
"key": "{spacing-scale.18}",
"$value": "9rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "9rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.18}"
},
"name": "SPACING_SCALE_18",
"attributes": {},
"path": [
"spacing-scale",
"18"
]
},
"20": {
"key": "{spacing-scale.20}",
"$value": "10rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "10rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.20}"
},
"name": "SPACING_SCALE_20",
"attributes": {},
"path": [
"spacing-scale",
"20"
]
},
"26": {
"key": "{spacing-scale.26}",
"$value": "13rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "13rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.26}"
},
"name": "SPACING_SCALE_26",
"attributes": {},
"path": [
"spacing-scale",
"26"
]
},
"28": {
"key": "{spacing-scale.28}",
"$value": "14rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "14rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.28}"
},
"name": "SPACING_SCALE_28",
"attributes": {},
"path": [
"spacing-scale",
"28"
]
},
"30": {
"key": "{spacing-scale.30}",
"$value": "15rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "15rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.30}"
},
"name": "SPACING_SCALE_30",
"attributes": {},
"path": [
"spacing-scale",
"30"
]
},
"31": {
"key": "{spacing-scale.31}",
"$value": "15.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "15.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.31}"
},
"name": "SPACING_SCALE_31",
"attributes": {},
"path": [
"spacing-scale",
"31"
]
},
"33": {
"key": "{spacing-scale.33}",
"$value": "16.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "16.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.33}"
},
"name": "SPACING_SCALE_33",
"attributes": {},
"path": [
"spacing-scale",
"33"
]
},
"34": {
"key": "{spacing-scale.34}",
"$value": "17rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "17rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.34}"
},
"name": "SPACING_SCALE_34",
"attributes": {},
"path": [
"spacing-scale",
"34"
]
},
"37": {
"key": "{spacing-scale.37}",
"$value": "18.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "18.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.37}"
},
"name": "SPACING_SCALE_37",
"attributes": {},
"path": [
"spacing-scale",
"37"
]
},
"48": {
"key": "{spacing-scale.48}",
"$value": "24rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "24rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.48}"
},
"name": "SPACING_SCALE_48",
"attributes": {},
"path": [
"spacing-scale",
"48"
]
},
"62": {
"key": "{spacing-scale.62}",
"$value": "31rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "31rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.62}"
},
"name": "SPACING_SCALE_62",
"attributes": {},
"path": [
"spacing-scale",
"62"
]
},
"75": {
"key": "{spacing-scale.75}",
"$value": "37.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "37.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.75}"
},
"name": "SPACING_SCALE_75",
"attributes": {},
"path": [
"spacing-scale",
"75"
]
},
"80": {
"key": "{spacing-scale.80}",
"$value": "40rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "40rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.80}"
},
"name": "SPACING_SCALE_80",
"attributes": {},
"path": [
"spacing-scale",
"80"
]
},
"88": {
"key": "{spacing-scale.88}",
"$value": "44rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "44rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.88}"
},
"name": "SPACING_SCALE_88",
"attributes": {},
"path": [
"spacing-scale",
"88"
]
},
"px": {
"key": "{spacing-scale.px}",
"$value": "1px",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "1px",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.px}"
},
"name": "SPACING_SCALE_PX",
"attributes": {},
"path": [
"spacing-scale",
"px"
]
},
"2-5": {
"key": "{spacing-scale.2-5}",
"$value": "0.375rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "0.375rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.2-5}"
},
"name": "SPACING_SCALE_2_5",
"attributes": {},
"path": [
"spacing-scale",
"2-5"
]
},
"11-5": {
"key": "{spacing-scale.11-5}",
"$value": "4.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/spacing_scale.tokens.json",
"isSource": true,
"original": {
"$value": "4.5rem",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": []
},
"key": "{spacing-scale.11-5}"
},
"name": "SPACING_SCALE_11_5",
"attributes": {},
"path": [
"spacing-scale",
"11-5"
]
}
},
"zindex": {
"0": {
"key": "{zindex.0}",
"$value": "0",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/zindex.tokens.json",
"isSource": true,
"original": {
"$value": "0",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{zindex.0}"
},
"name": "ZINDEX_0",
"attributes": {},
"path": [
"zindex",
"0"
]
},
"1": {
"key": "{zindex.1}",
"$value": "1",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/zindex.tokens.json",
"isSource": true,
"original": {
"$value": "1",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{zindex.1}"
},
"name": "ZINDEX_1",
"attributes": {},
"path": [
"zindex",
"1"
]
},
"2": {
"key": "{zindex.2}",
"$value": "2",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/zindex.tokens.json",
"isSource": true,
"original": {
"$value": "2",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{zindex.2}"
},
"name": "ZINDEX_2",
"attributes": {},
"path": [
"zindex",
"2"
]
},
"3": {
"key": "{zindex.3}",
"$value": "3",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/zindex.tokens.json",
"isSource": true,
"original": {
"$value": "3",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{zindex.3}"
},
"name": "ZINDEX_3",
"attributes": {},
"path": [
"zindex",
"3"
]
},
"4": {
"key": "{zindex.4}",
"$value": "4",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/zindex.tokens.json",
"isSource": true,
"original": {
"$value": "4",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{zindex.4}"
},
"name": "ZINDEX_4",
"attributes": {},
"path": [
"zindex",
"4"
]
},
"200": {
"key": "{zindex.200}",
"$value": "200",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/zindex.tokens.json",
"isSource": true,
"original": {
"$value": "200",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{zindex.200}"
},
"name": "ZINDEX_200",
"attributes": {},
"path": [
"zindex",
"200"
]
},
"9999": {
"key": "{zindex.9999}",
"$value": "9999",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/zindex.tokens.json",
"isSource": true,
"original": {
"$value": "9999",
"$type": "number",
"$extensions": {
"com.figma.scopes": []
},
"key": "{zindex.9999}"
},
"name": "ZINDEX_9999",
"attributes": {},
"path": [
"zindex",
"9999"
]
}
},
"alert": {
"border": {
"radius": {
"key": "{alert.border.radius}",
"$value": "0.5rem",
"$type": "dimension",
"$description": "Used for alert border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.lg}",
"$type": "dimension",
"$description": "Used for alert border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{alert.border.radius}"
},
"name": "ALERT_BORDER_RADIUS",
"attributes": {},
"path": [
"alert",
"border",
"radius"
]
}
},
"neutral": {
"title": {
"color": {
"key": "{alert.neutral.title.color}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the title color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.heading}",
"$type": "color",
"$description": "Used for the title color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{alert.neutral.title.color}"
},
"name": "ALERT_NEUTRAL_TITLE_COLOR",
"attributes": {},
"path": [
"alert",
"neutral",
"title",
"color"
]
}
},
"background": {
"color": {
"key": "{alert.neutral.background.color}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{feedback.neutral.background.color}",
"$type": "color",
"$description": "Used for the background color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{alert.neutral.background.color}"
},
"name": "ALERT_NEUTRAL_BACKGROUND_COLOR",
"attributes": {},
"path": [
"alert",
"neutral",
"background",
"color"
]
}
},
"border": {
"top": {
"color": {
"key": "{alert.neutral.border.top.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border center color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border center color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{alert.neutral.border.top.color}"
},
"name": "ALERT_NEUTRAL_BORDER_TOP_COLOR",
"attributes": {},
"path": [
"alert",
"neutral",
"border",
"top",
"color"
]
}
},
"bottom": {
"color": {
"key": "{alert.neutral.border.bottom.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border bottom color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a neutral alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{alert.neutral.border.bottom.color}"
},
"name": "ALERT_NEUTRAL_BORDER_BOTTOM_COLOR",
"attributes": {},
"path": [
"alert",
"neutral",
"border",
"bottom",
"color"
]
}
}
}
},
"info": {
"title": {
"color": {
"key": "{alert.info.title.color}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the title color of an info alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.heading}",
"$type": "color",
"$description": "Used for the title color of an info alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{alert.info.title.color}"
},
"name": "ALERT_INFO_TITLE_COLOR",
"attributes": {},
"path": [
"alert",
"info",
"title",
"color"
]
}
},
"background": {
"color": {
"key": "{alert.info.background.color}",
"$value": "#e9f3fc",
"$type": "color",
"$description": "Used for the background color of an info alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{feedback.info.background.color}",
"$type": "color",
"$description": "Used for the background color of an info alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{alert.info.background.color}"
},
"name": "ALERT_INFO_BACKGROUND_COLOR",
"attributes": {},
"path": [
"alert",
"info",
"background",
"color"
]
}
},
"border": {
"top": {
"color": {
"key": "{alert.info.border.top.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border color of an info alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border color of an info alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{alert.info.border.top.color}"
},
"name": "ALERT_INFO_BORDER_TOP_COLOR",
"attributes": {},
"path": [
"alert",
"info",
"border",
"top",
"color"
]
}
},
"bottom": {
"color": {
"key": "{alert.info.border.bottom.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border bottom color of an info alert.",
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of an info alert.",
"key": "{alert.info.border.bottom.color}"
},
"name": "ALERT_INFO_BORDER_BOTTOM_COLOR",
"attributes": {},
"path": [
"alert",
"info",
"border",
"bottom",
"color"
]
}
}
}
},
"success": {
"title": {
"color": {
"key": "{alert.success.title.color}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the title color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.heading}",
"$type": "color",
"$description": "Used for the title color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{alert.success.title.color}"
},
"name": "ALERT_SUCCESS_TITLE_COLOR",
"attributes": {},
"path": [
"alert",
"success",
"title",
"color"
]
}
},
"background": {
"color": {
"key": "{alert.success.background.color}",
"$value": "#ecf4ee",
"$type": "color",
"$description": "Used for the background color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{feedback.success.background.color}",
"$type": "color",
"$description": "Used for the background color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{alert.success.background.color}"
},
"name": "ALERT_SUCCESS_BACKGROUND_COLOR",
"attributes": {},
"path": [
"alert",
"success",
"background",
"color"
]
}
},
"border": {
"top": {
"color": {
"key": "{alert.success.border.top.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{alert.success.border.top.color}"
},
"name": "ALERT_SUCCESS_BORDER_TOP_COLOR",
"attributes": {},
"path": [
"alert",
"success",
"border",
"top",
"color"
]
}
},
"bottom": {
"color": {
"key": "{alert.success.border.bottom.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border bottom color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a success alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{alert.success.border.bottom.color}"
},
"name": "ALERT_SUCCESS_BORDER_BOTTOM_COLOR",
"attributes": {},
"path": [
"alert",
"success",
"border",
"bottom",
"color"
]
}
}
}
},
"warning": {
"title": {
"color": {
"key": "{alert.warning.title.color}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the title color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.heading}",
"$type": "color",
"$description": "Used for the title color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{alert.warning.title.color}"
},
"name": "ALERT_WARNING_TITLE_COLOR",
"attributes": {},
"path": [
"alert",
"warning",
"title",
"color"
]
}
},
"background": {
"color": {
"key": "{alert.warning.background.color}",
"$value": "#fdf1dd",
"$type": "color",
"$description": "Used for the background color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{feedback.warning.background.color}",
"$type": "color",
"$description": "Used for the background color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{alert.warning.background.color}"
},
"name": "ALERT_WARNING_BACKGROUND_COLOR",
"attributes": {},
"path": [
"alert",
"warning",
"background",
"color"
]
}
},
"border": {
"top": {
"color": {
"key": "{alert.warning.border.top.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{alert.warning.border.top.color}"
},
"name": "ALERT_WARNING_BORDER_TOP_COLOR",
"attributes": {},
"path": [
"alert",
"warning",
"border",
"top",
"color"
]
}
},
"bottom": {
"color": {
"key": "{alert.warning.border.bottom.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border bottom color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a warning alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{alert.warning.border.bottom.color}"
},
"name": "ALERT_WARNING_BORDER_BOTTOM_COLOR",
"attributes": {},
"path": [
"alert",
"warning",
"border",
"bottom",
"color"
]
}
}
}
},
"danger": {
"title": {
"color": {
"key": "{alert.danger.title.color}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the title color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.heading}",
"$type": "color",
"$description": "Used for the title color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{alert.danger.title.color}"
},
"name": "ALERT_DANGER_TITLE_COLOR",
"attributes": {},
"path": [
"alert",
"danger",
"title",
"color"
]
}
},
"background": {
"color": {
"key": "{alert.danger.background.color}",
"$value": "#fcf1ef",
"$type": "color",
"$description": "Used for the background color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{feedback.danger.background.color}",
"$type": "color",
"$description": "Used for the background color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{alert.danger.background.color}"
},
"name": "ALERT_DANGER_BACKGROUND_COLOR",
"attributes": {},
"path": [
"alert",
"danger",
"background",
"color"
]
}
},
"border": {
"top": {
"color": {
"key": "{alert.danger.border.top.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{alert.danger.border.top.color}"
},
"name": "ALERT_DANGER_BORDER_TOP_COLOR",
"attributes": {},
"path": [
"alert",
"danger",
"border",
"top",
"color"
]
}
},
"bottom": {
"color": {
"key": "{alert.danger.border.bottom.color}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border bottom color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/alert.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border bottom color of a danger alert.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{alert.danger.border.bottom.color}"
},
"name": "ALERT_DANGER_BORDER_BOTTOM_COLOR",
"attributes": {},
"path": [
"alert",
"danger",
"border",
"bottom",
"color"
]
}
}
}
}
},
"application-chrome": {
"background": {
"color": {
"key": "{application-chrome.background.color}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/application-chrome.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{application-chrome.background.color}"
},
"name": "APPLICATION_CHROME_BACKGROUND_COLOR",
"attributes": {},
"path": [
"application-chrome",
"background",
"color"
]
}
}
},
"avatar": {
"border": {
"color": {
"default": {
"key": "{avatar.border.color.default}",
"$value": "rgba(5, 5, 6, 0.08)",
"$type": "color",
"$description": "Used to define the edge of an avatar.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.8}",
"$type": "color",
"$description": "Used to define the edge of an avatar.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{avatar.border.color.default}"
},
"name": "AVATAR_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"avatar",
"border",
"color",
"default"
]
},
"hover": {
"key": "{avatar.border.color.hover}",
"$value": "rgba(5, 5, 6, 0.24)",
"$type": "color",
"$description": "Used to increase the edge definition of an avatar in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.24}",
"$type": "color",
"$description": "Used to increase the edge definition of an avatar in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{avatar.border.color.hover}"
},
"name": "AVATAR_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"avatar",
"border",
"color",
"hover"
]
}
}
},
"circle": {
"border": {
"radius": {
"default": {
"key": "{avatar.circle.border.radius.default}",
"$value": "9999px",
"$type": "dimension",
"$description": "Border radius for cirlce avatars at all sizes.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.full}",
"$type": "dimension",
"$description": "Border radius for cirlce avatars at all sizes.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{avatar.circle.border.radius.default}"
},
"name": "AVATAR_CIRCLE_BORDER_RADIUS_DEFAULT",
"attributes": {},
"path": [
"avatar",
"circle",
"border",
"radius",
"default"
]
}
}
}
},
"square": {
"border": {
"radius": {
"default": {
"key": "{avatar.square.border.radius.default}",
"$value": "0.25rem",
"$type": "dimension",
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.default}",
"$type": "dimension",
"$description": "Border radius for square avatars at smaller sizes (16px, 24px, 32px).",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{avatar.square.border.radius.default}"
},
"name": "AVATAR_SQUARE_BORDER_RADIUS_DEFAULT",
"attributes": {},
"path": [
"avatar",
"square",
"border",
"radius",
"default"
]
},
"lg": {
"key": "{avatar.square.border.radius.lg}",
"$value": "0.5rem",
"$type": "dimension",
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.lg}",
"$type": "dimension",
"$description": "Border radius for square avatars at larger sizes (48px, 64px, 96px).",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{avatar.square.border.radius.lg}"
},
"name": "AVATAR_SQUARE_BORDER_RADIUS_LG",
"attributes": {},
"path": [
"avatar",
"square",
"border",
"radius",
"lg"
]
}
}
}
},
"fallback": {
"text": {
"color": {
"red": {
"key": "{avatar.fallback.text.color.red}",
"$value": "#812713",
"$type": "color",
"$description": "Red text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.800}",
"$type": "color",
"$description": "Red text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{avatar.fallback.text.color.red}"
},
"name": "AVATAR_FALLBACK_TEXT_COLOR_RED",
"attributes": {},
"path": [
"avatar",
"fallback",
"text",
"color",
"red"
]
},
"purple": {
"key": "{avatar.fallback.text.color.purple}",
"$value": "#493c83",
"$type": "color",
"$description": "Purple text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.800}",
"$type": "color",
"$description": "Purple text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{avatar.fallback.text.color.purple}"
},
"name": "AVATAR_FALLBACK_TEXT_COLOR_PURPLE",
"attributes": {},
"path": [
"avatar",
"fallback",
"text",
"color",
"purple"
]
},
"blue": {
"key": "{avatar.fallback.text.color.blue}",
"$value": "#284779",
"$type": "color",
"$description": "Blue text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.800}",
"$type": "color",
"$description": "Blue text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{avatar.fallback.text.color.blue}"
},
"name": "AVATAR_FALLBACK_TEXT_COLOR_BLUE",
"attributes": {},
"path": [
"avatar",
"fallback",
"text",
"color",
"blue"
]
},
"green": {
"key": "{avatar.fallback.text.color.green}",
"$value": "#225131",
"$type": "color",
"$description": "Green text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.800}",
"$type": "color",
"$description": "Green text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{avatar.fallback.text.color.green}"
},
"name": "AVATAR_FALLBACK_TEXT_COLOR_GREEN",
"attributes": {},
"path": [
"avatar",
"fallback",
"text",
"color",
"green"
]
},
"orange": {
"key": "{avatar.fallback.text.color.orange}",
"$value": "#693c14",
"$type": "color",
"$description": "Orange text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.800}",
"$type": "color",
"$description": "Orange text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{avatar.fallback.text.color.orange}"
},
"name": "AVATAR_FALLBACK_TEXT_COLOR_ORANGE",
"attributes": {},
"path": [
"avatar",
"fallback",
"text",
"color",
"orange"
]
},
"neutral": {
"key": "{avatar.fallback.text.color.neutral}",
"$value": "#3a383f",
"$type": "color",
"$description": "Neutral text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Neutral text color for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{avatar.fallback.text.color.neutral}"
},
"name": "AVATAR_FALLBACK_TEXT_COLOR_NEUTRAL",
"attributes": {},
"path": [
"avatar",
"fallback",
"text",
"color",
"neutral"
]
}
}
},
"background": {
"color": {
"red": {
"key": "{avatar.fallback.background.color.red}",
"$value": "rgba(252, 181, 170, 0.23921568627450981)",
"$type": "color",
"$description": "Red background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(252, 181, 170, 0.23921568627450981)",
"$type": "color",
"$description": "Red background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{avatar.fallback.background.color.red}"
},
"name": "AVATAR_FALLBACK_BACKGROUND_COLOR_RED",
"attributes": {},
"path": [
"avatar",
"fallback",
"background",
"color",
"red"
]
},
"purple": {
"key": "{avatar.fallback.background.color.purple}",
"$value": "rgba(203, 187, 242, 0.23921568627450981)",
"$type": "color",
"$description": "Purple background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(203, 187, 242, 0.23921568627450981)",
"$type": "color",
"$description": "Purple background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{avatar.fallback.background.color.purple}"
},
"name": "AVATAR_FALLBACK_BACKGROUND_COLOR_PURPLE",
"attributes": {},
"path": [
"avatar",
"fallback",
"background",
"color",
"purple"
]
},
"blue": {
"key": "{avatar.fallback.background.color.blue}",
"$value": "rgba(157, 199, 241, 0.23921568627450981)",
"$type": "color",
"$description": "Blue background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(157, 199, 241, 0.23921568627450981)",
"$type": "color",
"$description": "Blue background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{avatar.fallback.background.color.blue}"
},
"name": "AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE",
"attributes": {},
"path": [
"avatar",
"fallback",
"background",
"color",
"blue"
]
},
"green": {
"key": "{avatar.fallback.background.color.green}",
"$value": "rgba(145, 212, 168, 0.23921568627450981)",
"$type": "color",
"$description": "Green background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(145, 212, 168, 0.23921568627450981)",
"$type": "color",
"$description": "Green background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{avatar.fallback.background.color.green}"
},
"name": "AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN",
"attributes": {},
"path": [
"avatar",
"fallback",
"background",
"color",
"green"
]
},
"orange": {
"key": "{avatar.fallback.background.color.orange}",
"$value": "rgba(233, 190, 116, 0.23921568627450981)",
"$type": "color",
"$description": "Orange background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(233, 190, 116, 0.23921568627450981)",
"$type": "color",
"$description": "Orange background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{avatar.fallback.background.color.orange}"
},
"name": "AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE",
"attributes": {},
"path": [
"avatar",
"fallback",
"background",
"color",
"orange"
]
},
"neutral": {
"key": "{avatar.fallback.background.color.neutral}",
"$value": "rgba(191, 191, 195, 0.23921568627450981)",
"$type": "color",
"$description": "Neutral background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/avatar.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(191, 191, 195, 0.23921568627450981)",
"$type": "color",
"$description": "Neutral background for avatar fallback with no particular meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{avatar.fallback.background.color.neutral}"
},
"name": "AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL",
"attributes": {},
"path": [
"avatar",
"fallback",
"background",
"color",
"neutral"
]
}
}
}
}
},
"badge": {
"muted": {
"background": {
"color": {
"default": {
"key": "{badge.muted.background.color.default}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the background of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"$deprecated": true,
"key": "{badge.muted.background.color.default}"
},
"name": "BADGE_MUTED_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"muted",
"background",
"color",
"default"
]
},
"hover": {
"key": "{badge.muted.background.color.hover}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.muted.background.color.default}",
"$type": "color",
"$description": "Used for the background of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"$deprecated": true,
"key": "{badge.muted.background.color.hover}"
},
"name": "BADGE_MUTED_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"muted",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{badge.muted.background.color.focus}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of a muted badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.muted.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a muted badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"$deprecated": true,
"key": "{badge.muted.background.color.focus}"
},
"name": "BADGE_MUTED_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"muted",
"background",
"color",
"focus"
]
},
"active": {
"key": "{badge.muted.background.color.active}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the background of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.muted.background.color.active}"
},
"name": "BADGE_MUTED_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"muted",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{badge.muted.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.muted.border.color.default}"
},
"name": "BADGE_MUTED_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"muted",
"border",
"color",
"default"
]
},
"hover": {
"key": "{badge.muted.border.color.hover}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the border of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the border of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.muted.border.color.hover}"
},
"name": "BADGE_MUTED_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"muted",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{badge.muted.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a muted badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a muted badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.muted.border.color.focus}"
},
"name": "BADGE_MUTED_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"muted",
"border",
"color",
"focus"
]
},
"active": {
"key": "{badge.muted.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.muted.border.color.active}"
},
"name": "BADGE_MUTED_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"muted",
"border",
"color",
"active"
]
}
}
},
"text": {
"color": {
"default": {
"key": "{badge.muted.text.color.default}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the text of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for the text of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.muted.text.color.default}"
},
"name": "BADGE_MUTED_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"muted",
"text",
"color",
"default"
]
},
"hover": {
"key": "{badge.muted.text.color.hover}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the text of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the text of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.muted.text.color.hover}"
},
"name": "BADGE_MUTED_TEXT_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"muted",
"text",
"color",
"hover"
]
},
"focus": {
"key": "{badge.muted.text.color.focus}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the text of a muted badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.muted.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a muted badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"$deprecated": true,
"key": "{badge.muted.text.color.focus}"
},
"name": "BADGE_MUTED_TEXT_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"muted",
"text",
"color",
"focus"
]
},
"active": {
"key": "{badge.muted.text.color.active}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the text of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the text of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.muted.text.color.active}"
},
"name": "BADGE_MUTED_TEXT_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"muted",
"text",
"color",
"active"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{badge.muted.icon.color.default}",
"$value": "#737278",
"$type": "color",
"$description": "Used for the icon of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.500}",
"$type": "color",
"$description": "Used for the icon of a muted badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.muted.icon.color.default}"
},
"name": "BADGE_MUTED_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"muted",
"icon",
"color",
"default"
]
},
"hover": {
"key": "{badge.muted.icon.color.hover}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the icon of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for the icon of a muted badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.muted.icon.color.hover}"
},
"name": "BADGE_MUTED_ICON_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"muted",
"icon",
"color",
"hover"
]
},
"focus": {
"key": "{badge.muted.icon.color.focus}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the icon of a muted badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.muted.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a muted badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"$deprecated": true,
"key": "{badge.muted.icon.color.focus}"
},
"name": "BADGE_MUTED_ICON_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"muted",
"icon",
"color",
"focus"
]
},
"active": {
"key": "{badge.muted.icon.color.active}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the icon of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the icon of a muted badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.muted.icon.color.active}"
},
"name": "BADGE_MUTED_ICON_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"muted",
"icon",
"color",
"active"
]
}
}
}
},
"neutral": {
"background": {
"color": {
"default": {
"key": "{badge.neutral.background.color.default}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the background of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.neutral.background.color.default}"
},
"name": "BADGE_NEUTRAL_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"neutral",
"background",
"color",
"default"
]
},
"hover": {
"key": "{badge.neutral.background.color.hover}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the background of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.neutral.background.color.hover}"
},
"name": "BADGE_NEUTRAL_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"neutral",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{badge.neutral.background.color.focus}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.neutral.background.color.focus}"
},
"name": "BADGE_NEUTRAL_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"neutral",
"background",
"color",
"focus"
]
},
"active": {
"key": "{badge.neutral.background.color.active}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the background of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the background of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.neutral.background.color.active}"
},
"name": "BADGE_NEUTRAL_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"neutral",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{badge.neutral.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.neutral.border.color.default}"
},
"name": "BADGE_NEUTRAL_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"neutral",
"border",
"color",
"default"
]
},
"hover": {
"key": "{badge.neutral.border.color.hover}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the border of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.neutral.border.color.hover}"
},
"name": "BADGE_NEUTRAL_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"neutral",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{badge.neutral.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.neutral.border.color.focus}"
},
"name": "BADGE_NEUTRAL_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"neutral",
"border",
"color",
"focus"
]
},
"active": {
"key": "{badge.neutral.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.neutral.border.color.active}"
},
"name": "BADGE_NEUTRAL_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"neutral",
"border",
"color",
"active"
]
}
}
},
"text": {
"color": {
"default": {
"key": "{badge.neutral.text.color.default}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the text of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the text of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.neutral.text.color.default}"
},
"name": "BADGE_NEUTRAL_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"neutral",
"text",
"color",
"default"
]
},
"hover": {
"key": "{badge.neutral.text.color.hover}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the text of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the text of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.neutral.text.color.hover}"
},
"name": "BADGE_NEUTRAL_TEXT_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"neutral",
"text",
"color",
"hover"
]
},
"focus": {
"key": "{badge.neutral.text.color.focus}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the text of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.neutral.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.neutral.text.color.focus}"
},
"name": "BADGE_NEUTRAL_TEXT_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"neutral",
"text",
"color",
"focus"
]
},
"active": {
"key": "{badge.neutral.text.color.active}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the text of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.900}",
"$type": "color",
"$description": "Used for the text of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.neutral.text.color.active}"
},
"name": "BADGE_NEUTRAL_TEXT_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"neutral",
"text",
"color",
"active"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{badge.neutral.icon.color.default}",
"$value": "#737278",
"$type": "color",
"$description": "Used for the icon of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.500}",
"$type": "color",
"$description": "Used for the icon of a neutral badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.neutral.icon.color.default}"
},
"name": "BADGE_NEUTRAL_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"neutral",
"icon",
"color",
"default"
]
},
"hover": {
"key": "{badge.neutral.icon.color.hover}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.neutral.icon.color.hover}"
},
"name": "BADGE_NEUTRAL_ICON_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"neutral",
"icon",
"color",
"hover"
]
},
"focus": {
"key": "{badge.neutral.icon.color.focus}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.neutral.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.neutral.icon.color.focus}"
},
"name": "BADGE_NEUTRAL_ICON_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"neutral",
"icon",
"color",
"focus"
]
},
"active": {
"key": "{badge.neutral.icon.color.active}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the icon of a neutral badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.neutral.icon.color.active}"
},
"name": "BADGE_NEUTRAL_ICON_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"neutral",
"icon",
"color",
"active"
]
}
}
}
},
"info": {
"background": {
"color": {
"default": {
"key": "{badge.info.background.color.default}",
"$value": "#cbe2f9",
"$type": "color",
"$description": "Used for the background of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.100}",
"$type": "color",
"$description": "Used for the background of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.info.background.color.default}"
},
"name": "BADGE_INFO_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"info",
"background",
"color",
"default"
]
},
"hover": {
"key": "{badge.info.background.color.hover}",
"$value": "#cbe2f9",
"$type": "color",
"$description": "Used for the background of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.info.background.color.default}",
"$type": "color",
"$description": "Used for the background of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.info.background.color.hover}"
},
"name": "BADGE_INFO_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"info",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{badge.info.background.color.focus}",
"$value": "#cbe2f9",
"$type": "color",
"$description": "Used for the background of an informational badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.info.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an informational badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.info.background.color.focus}"
},
"name": "BADGE_INFO_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"info",
"background",
"color",
"focus"
]
},
"active": {
"key": "{badge.info.background.color.active}",
"$value": "#9dc7f1",
"$type": "color",
"$description": "Used for the background of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.200}",
"$type": "color",
"$description": "Used for the background of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.info.background.color.active}"
},
"name": "BADGE_INFO_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"info",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{badge.info.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.info.border.color.default}"
},
"name": "BADGE_INFO_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"info",
"border",
"color",
"default"
]
},
"hover": {
"key": "{badge.info.border.color.hover}",
"$value": "#9dc7f1",
"$type": "color",
"$description": "Used for the border of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.200}",
"$type": "color",
"$description": "Used for the border of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.info.border.color.hover}"
},
"name": "BADGE_INFO_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"info",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{badge.info.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of an informational badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of an informational badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.info.border.color.focus}"
},
"name": "BADGE_INFO_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"info",
"border",
"color",
"focus"
]
},
"active": {
"key": "{badge.info.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.info.border.color.active}"
},
"name": "BADGE_INFO_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"info",
"border",
"color",
"active"
]
}
}
},
"text": {
"color": {
"default": {
"key": "{badge.info.text.color.default}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the text of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.700}",
"$type": "color",
"$description": "Used for the text of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.info.text.color.default}"
},
"name": "BADGE_INFO_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"info",
"text",
"color",
"default"
]
},
"hover": {
"key": "{badge.info.text.color.hover}",
"$value": "#284779",
"$type": "color",
"$description": "Used for the text of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.800}",
"$type": "color",
"$description": "Used for the text of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.info.text.color.hover}"
},
"name": "BADGE_INFO_TEXT_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"info",
"text",
"color",
"hover"
]
},
"focus": {
"key": "{badge.info.text.color.focus}",
"$value": "#284779",
"$type": "color",
"$description": "Used for the text of an informational badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.info.text.color.hover}",
"$type": "color",
"$description": "Used for the text of an informational badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.info.text.color.focus}"
},
"name": "BADGE_INFO_TEXT_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"info",
"text",
"color",
"focus"
]
},
"active": {
"key": "{badge.info.text.color.active}",
"$value": "#213454",
"$type": "color",
"$description": "Used for the text of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.900}",
"$type": "color",
"$description": "Used for the text of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.info.text.color.active}"
},
"name": "BADGE_INFO_TEXT_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"info",
"text",
"color",
"active"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{badge.info.icon.color.default}",
"$value": "#1f75cb",
"$type": "color",
"$description": "Used for the icon of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.500}",
"$type": "color",
"$description": "Used for the icon of an informational badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.info.icon.color.default}"
},
"name": "BADGE_INFO_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"info",
"icon",
"color",
"default"
]
},
"hover": {
"key": "{badge.info.icon.color.hover}",
"$value": "#2f68b4",
"$type": "color",
"$description": "Used for the icon of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.600}",
"$type": "color",
"$description": "Used for the icon of an informational badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.info.icon.color.hover}"
},
"name": "BADGE_INFO_ICON_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"info",
"icon",
"color",
"hover"
]
},
"focus": {
"key": "{badge.info.icon.color.focus}",
"$value": "#2f68b4",
"$type": "color",
"$description": "Used for the icon of an informational badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.info.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of an informational badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.info.icon.color.focus}"
},
"name": "BADGE_INFO_ICON_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"info",
"icon",
"color",
"focus"
]
},
"active": {
"key": "{badge.info.icon.color.active}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the icon of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.700}",
"$type": "color",
"$description": "Used for the icon of an informational badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.info.icon.color.active}"
},
"name": "BADGE_INFO_ICON_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"info",
"icon",
"color",
"active"
]
}
}
}
},
"success": {
"background": {
"color": {
"default": {
"key": "{badge.success.background.color.default}",
"$value": "#c3e6cd",
"$type": "color",
"$description": "Used for the background of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.100}",
"$type": "color",
"$description": "Used for the background of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.success.background.color.default}"
},
"name": "BADGE_SUCCESS_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"success",
"background",
"color",
"default"
]
},
"hover": {
"key": "{badge.success.background.color.hover}",
"$value": "#c3e6cd",
"$type": "color",
"$description": "Used for the background of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.success.background.color.default}",
"$type": "color",
"$description": "Used for the background of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.success.background.color.hover}"
},
"name": "BADGE_SUCCESS_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"success",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{badge.success.background.color.focus}",
"$value": "#c3e6cd",
"$type": "color",
"$description": "Used for the background of a success badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.success.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a success badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.success.background.color.focus}"
},
"name": "BADGE_SUCCESS_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"success",
"background",
"color",
"focus"
]
},
"active": {
"key": "{badge.success.background.color.active}",
"$value": "#91d4a8",
"$type": "color",
"$description": "Used for the background of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.200}",
"$type": "color",
"$description": "Used for the background of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.success.background.color.active}"
},
"name": "BADGE_SUCCESS_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"success",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{badge.success.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.success.border.color.default}"
},
"name": "BADGE_SUCCESS_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"success",
"border",
"color",
"default"
]
},
"hover": {
"key": "{badge.success.border.color.hover}",
"$value": "#91d4a8",
"$type": "color",
"$description": "Used for the border of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.200}",
"$type": "color",
"$description": "Used for the border of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.success.border.color.hover}"
},
"name": "BADGE_SUCCESS_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"success",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{badge.success.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a success badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a success badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.success.border.color.focus}"
},
"name": "BADGE_SUCCESS_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"success",
"border",
"color",
"focus"
]
},
"active": {
"key": "{badge.success.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.success.border.color.active}"
},
"name": "BADGE_SUCCESS_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"success",
"border",
"color",
"active"
]
}
}
},
"text": {
"color": {
"default": {
"key": "{badge.success.text.color.default}",
"$value": "#306440",
"$type": "color",
"$description": "Used for the text of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.700}",
"$type": "color",
"$description": "Used for the text of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.success.text.color.default}"
},
"name": "BADGE_SUCCESS_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"success",
"text",
"color",
"default"
]
},
"hover": {
"key": "{badge.success.text.color.hover}",
"$value": "#225131",
"$type": "color",
"$description": "Used for the text of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.800}",
"$type": "color",
"$description": "Used for the text of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.success.text.color.hover}"
},
"name": "BADGE_SUCCESS_TEXT_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"success",
"text",
"color",
"hover"
]
},
"focus": {
"key": "{badge.success.text.color.focus}",
"$value": "#225131",
"$type": "color",
"$description": "Used for the text of a success badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.success.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a success badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.success.text.color.focus}"
},
"name": "BADGE_SUCCESS_TEXT_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"success",
"text",
"color",
"focus"
]
},
"active": {
"key": "{badge.success.text.color.active}",
"$value": "#1e3e28",
"$type": "color",
"$description": "Used for the text of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.900}",
"$type": "color",
"$description": "Used for the text of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.success.text.color.active}"
},
"name": "BADGE_SUCCESS_TEXT_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"success",
"text",
"color",
"active"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{badge.success.icon.color.default}",
"$value": "#108548",
"$type": "color",
"$description": "Used for the icon of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.500}",
"$type": "color",
"$description": "Used for the icon of a success badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.success.icon.color.default}"
},
"name": "BADGE_SUCCESS_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"success",
"icon",
"color",
"default"
]
},
"hover": {
"key": "{badge.success.icon.color.hover}",
"$value": "#2f7549",
"$type": "color",
"$description": "Used for the icon of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.600}",
"$type": "color",
"$description": "Used for the icon of a success badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.success.icon.color.hover}"
},
"name": "BADGE_SUCCESS_ICON_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"success",
"icon",
"color",
"hover"
]
},
"focus": {
"key": "{badge.success.icon.color.focus}",
"$value": "#2f7549",
"$type": "color",
"$description": "Used for the icon of a success badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.success.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a success badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.success.icon.color.focus}"
},
"name": "BADGE_SUCCESS_ICON_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"success",
"icon",
"color",
"focus"
]
},
"active": {
"key": "{badge.success.icon.color.active}",
"$value": "#306440",
"$type": "color",
"$description": "Used for the icon of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.700}",
"$type": "color",
"$description": "Used for the icon of a success badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.success.icon.color.active}"
},
"name": "BADGE_SUCCESS_ICON_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"success",
"icon",
"color",
"active"
]
}
}
}
},
"warning": {
"background": {
"color": {
"default": {
"key": "{badge.warning.background.color.default}",
"$value": "#f5d9a8",
"$type": "color",
"$description": "Used for the background of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.100}",
"$type": "color",
"$description": "Used for the background of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.warning.background.color.default}"
},
"name": "BADGE_WARNING_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"warning",
"background",
"color",
"default"
]
},
"hover": {
"key": "{badge.warning.background.color.hover}",
"$value": "#f5d9a8",
"$type": "color",
"$description": "Used for the background of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.warning.background.color.default}",
"$type": "color",
"$description": "Used for the background of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.warning.background.color.hover}"
},
"name": "BADGE_WARNING_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"warning",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{badge.warning.background.color.focus}",
"$value": "#f5d9a8",
"$type": "color",
"$description": "Used for the background of a warning badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.warning.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a warning badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.warning.background.color.focus}"
},
"name": "BADGE_WARNING_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"warning",
"background",
"color",
"focus"
]
},
"active": {
"key": "{badge.warning.background.color.active}",
"$value": "#e9be74",
"$type": "color",
"$description": "Used for the background of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.200}",
"$type": "color",
"$description": "Used for the background of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.warning.background.color.active}"
},
"name": "BADGE_WARNING_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"warning",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{badge.warning.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.warning.border.color.default}"
},
"name": "BADGE_WARNING_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"warning",
"border",
"color",
"default"
]
},
"hover": {
"key": "{badge.warning.border.color.hover}",
"$value": "#e9be74",
"$type": "color",
"$description": "Used for the border of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.200}",
"$type": "color",
"$description": "Used for the border of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.warning.border.color.hover}"
},
"name": "BADGE_WARNING_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"warning",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{badge.warning.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a warning badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a warning badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.warning.border.color.focus}"
},
"name": "BADGE_WARNING_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"warning",
"border",
"color",
"focus"
]
},
"active": {
"key": "{badge.warning.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.warning.border.color.active}"
},
"name": "BADGE_WARNING_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"warning",
"border",
"color",
"active"
]
}
}
},
"text": {
"color": {
"default": {
"key": "{badge.warning.text.color.default}",
"$value": "#894b16",
"$type": "color",
"$description": "Used for the text of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.700}",
"$type": "color",
"$description": "Used for the text of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.warning.text.color.default}"
},
"name": "BADGE_WARNING_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"warning",
"text",
"color",
"default"
]
},
"hover": {
"key": "{badge.warning.text.color.hover}",
"$value": "#693c14",
"$type": "color",
"$description": "Used for the text of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.800}",
"$type": "color",
"$description": "Used for the text of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.warning.text.color.hover}"
},
"name": "BADGE_WARNING_TEXT_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"warning",
"text",
"color",
"hover"
]
},
"focus": {
"key": "{badge.warning.text.color.focus}",
"$value": "#693c14",
"$type": "color",
"$description": "Used for the text of a warning badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.warning.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a warning badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.warning.text.color.focus}"
},
"name": "BADGE_WARNING_TEXT_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"warning",
"text",
"color",
"focus"
]
},
"active": {
"key": "{badge.warning.text.color.active}",
"$value": "#532e16",
"$type": "color",
"$description": "Used for the text of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.900}",
"$type": "color",
"$description": "Used for the text of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.warning.text.color.active}"
},
"name": "BADGE_WARNING_TEXT_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"warning",
"text",
"color",
"active"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{badge.warning.icon.color.default}",
"$value": "#ab6100",
"$type": "color",
"$description": "Used for the icon of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.500}",
"$type": "color",
"$description": "Used for the icon of a warning badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.warning.icon.color.default}"
},
"name": "BADGE_WARNING_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"warning",
"icon",
"color",
"default"
]
},
"hover": {
"key": "{badge.warning.icon.color.hover}",
"$value": "#995715",
"$type": "color",
"$description": "Used for the icon of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.600}",
"$type": "color",
"$description": "Used for the icon of a warning badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.warning.icon.color.hover}"
},
"name": "BADGE_WARNING_ICON_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"warning",
"icon",
"color",
"hover"
]
},
"focus": {
"key": "{badge.warning.icon.color.focus}",
"$value": "#995715",
"$type": "color",
"$description": "Used for the icon of a warning badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.warning.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a warning badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.warning.icon.color.focus}"
},
"name": "BADGE_WARNING_ICON_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"warning",
"icon",
"color",
"focus"
]
},
"active": {
"key": "{badge.warning.icon.color.active}",
"$value": "#894b16",
"$type": "color",
"$description": "Used for the icon of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.700}",
"$type": "color",
"$description": "Used for the icon of a warning badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.warning.icon.color.active}"
},
"name": "BADGE_WARNING_ICON_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"warning",
"icon",
"color",
"active"
]
}
}
}
},
"danger": {
"background": {
"color": {
"default": {
"key": "{badge.danger.background.color.default}",
"$value": "#fdd4cd",
"$type": "color",
"$description": "Used for the background of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.100}",
"$type": "color",
"$description": "Used for the background of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.danger.background.color.default}"
},
"name": "BADGE_DANGER_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"danger",
"background",
"color",
"default"
]
},
"hover": {
"key": "{badge.danger.background.color.hover}",
"$value": "#fdd4cd",
"$type": "color",
"$description": "Used for the background of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.danger.background.color.default}",
"$type": "color",
"$description": "Used for the background of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.danger.background.color.hover}"
},
"name": "BADGE_DANGER_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"danger",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{badge.danger.background.color.focus}",
"$value": "#fdd4cd",
"$type": "color",
"$description": "Used for the background of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.danger.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.danger.background.color.focus}"
},
"name": "BADGE_DANGER_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"danger",
"background",
"color",
"focus"
]
},
"active": {
"key": "{badge.danger.background.color.active}",
"$value": "#fcb5aa",
"$type": "color",
"$description": "Used for the background of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.200}",
"$type": "color",
"$description": "Used for the background of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.danger.background.color.active}"
},
"name": "BADGE_DANGER_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"danger",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{badge.danger.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.danger.border.color.default}"
},
"name": "BADGE_DANGER_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"danger",
"border",
"color",
"default"
]
},
"hover": {
"key": "{badge.danger.border.color.hover}",
"$value": "#fcb5aa",
"$type": "color",
"$description": "Used for the border of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.200}",
"$type": "color",
"$description": "Used for the border of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.danger.border.color.hover}"
},
"name": "BADGE_DANGER_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"danger",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{badge.danger.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.danger.border.color.focus}"
},
"name": "BADGE_DANGER_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"danger",
"border",
"color",
"focus"
]
},
"active": {
"key": "{badge.danger.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.danger.border.color.active}"
},
"name": "BADGE_DANGER_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"danger",
"border",
"color",
"active"
]
}
}
},
"text": {
"color": {
"default": {
"key": "{badge.danger.text.color.default}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the text of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.700}",
"$type": "color",
"$description": "Used for the text of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.danger.text.color.default}"
},
"name": "BADGE_DANGER_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"danger",
"text",
"color",
"default"
]
},
"hover": {
"key": "{badge.danger.text.color.hover}",
"$value": "#812713",
"$type": "color",
"$description": "Used for the text of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.800}",
"$type": "color",
"$description": "Used for the text of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.danger.text.color.hover}"
},
"name": "BADGE_DANGER_TEXT_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"danger",
"text",
"color",
"hover"
]
},
"focus": {
"key": "{badge.danger.text.color.focus}",
"$value": "#812713",
"$type": "color",
"$description": "Used for the text of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.danger.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.danger.text.color.focus}"
},
"name": "BADGE_DANGER_TEXT_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"danger",
"text",
"color",
"focus"
]
},
"active": {
"key": "{badge.danger.text.color.active}",
"$value": "#582014",
"$type": "color",
"$description": "Used for the text of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.900}",
"$type": "color",
"$description": "Used for the text of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.danger.text.color.active}"
},
"name": "BADGE_DANGER_TEXT_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"danger",
"text",
"color",
"active"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{badge.danger.icon.color.default}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the icon of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.700}",
"$type": "color",
"$description": "Used for the icon of a danger badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.danger.icon.color.default}"
},
"name": "BADGE_DANGER_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"danger",
"icon",
"color",
"default"
]
},
"hover": {
"key": "{badge.danger.icon.color.hover}",
"$value": "#812713",
"$type": "color",
"$description": "Used for the icon of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.800}",
"$type": "color",
"$description": "Used for the icon of a danger badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.danger.icon.color.hover}"
},
"name": "BADGE_DANGER_ICON_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"danger",
"icon",
"color",
"hover"
]
},
"focus": {
"key": "{badge.danger.icon.color.focus}",
"$value": "#812713",
"$type": "color",
"$description": "Used for the icon of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.danger.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a danger badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.danger.icon.color.focus}"
},
"name": "BADGE_DANGER_ICON_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"danger",
"icon",
"color",
"focus"
]
},
"active": {
"key": "{badge.danger.icon.color.active}",
"$value": "#582014",
"$type": "color",
"$description": "Used for the icon of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.900}",
"$type": "color",
"$description": "Used for the icon of a danger badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.danger.icon.color.active}"
},
"name": "BADGE_DANGER_ICON_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"danger",
"icon",
"color",
"active"
]
}
}
}
},
"tier": {
"background": {
"color": {
"default": {
"key": "{badge.tier.background.color.default}",
"$value": "#e1d8f9",
"$type": "color",
"$description": "Used for the background of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.100}",
"$type": "color",
"$description": "Used for the background of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.tier.background.color.default}"
},
"name": "BADGE_TIER_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"tier",
"background",
"color",
"default"
]
},
"hover": {
"key": "{badge.tier.background.color.hover}",
"$value": "#e1d8f9",
"$type": "color",
"$description": "Used for the background of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.tier.background.color.default}",
"$type": "color",
"$description": "Used for the background of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.tier.background.color.hover}"
},
"name": "BADGE_TIER_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"tier",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{badge.tier.background.color.focus}",
"$value": "#e1d8f9",
"$type": "color",
"$description": "Used for the background of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.tier.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.tier.background.color.focus}"
},
"name": "BADGE_TIER_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"tier",
"background",
"color",
"focus"
]
},
"active": {
"key": "{badge.tier.background.color.active}",
"$value": "#cbbbf2",
"$type": "color",
"$description": "Used for the background of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.200}",
"$type": "color",
"$description": "Used for the background of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{badge.tier.background.color.active}"
},
"name": "BADGE_TIER_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"tier",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{badge.tier.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.tier.border.color.default}"
},
"name": "BADGE_TIER_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"tier",
"border",
"color",
"default"
]
},
"hover": {
"key": "{badge.tier.border.color.hover}",
"$value": "#cbbbf2",
"$type": "color",
"$description": "Used for the border of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.200}",
"$type": "color",
"$description": "Used for the border of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.tier.border.color.hover}"
},
"name": "BADGE_TIER_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"tier",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{badge.tier.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.tier.border.color.focus}"
},
"name": "BADGE_TIER_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"tier",
"border",
"color",
"focus"
]
},
"active": {
"key": "{badge.tier.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{badge.tier.border.color.active}"
},
"name": "BADGE_TIER_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"tier",
"border",
"color",
"active"
]
}
}
},
"text": {
"color": {
"default": {
"key": "{badge.tier.text.color.default}",
"$value": "#5c47a6",
"$type": "color",
"$description": "Used for the text of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.700}",
"$type": "color",
"$description": "Used for the text of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.tier.text.color.default}"
},
"name": "BADGE_TIER_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"tier",
"text",
"color",
"default"
]
},
"hover": {
"key": "{badge.tier.text.color.hover}",
"$value": "#493c83",
"$type": "color",
"$description": "Used for the text of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.800}",
"$type": "color",
"$description": "Used for the text of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.tier.text.color.hover}"
},
"name": "BADGE_TIER_TEXT_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"tier",
"text",
"color",
"hover"
]
},
"focus": {
"key": "{badge.tier.text.color.focus}",
"$value": "#493c83",
"$type": "color",
"$description": "Used for the text of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.tier.text.color.hover}",
"$type": "color",
"$description": "Used for the text of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.tier.text.color.focus}"
},
"name": "BADGE_TIER_TEXT_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"tier",
"text",
"color",
"focus"
]
},
"active": {
"key": "{badge.tier.text.color.active}",
"$value": "#342d59",
"$type": "color",
"$description": "Used for the text of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.900}",
"$type": "color",
"$description": "Used for the text of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{badge.tier.text.color.active}"
},
"name": "BADGE_TIER_TEXT_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"tier",
"text",
"color",
"active"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{badge.tier.icon.color.default}",
"$value": "#5c47a6",
"$type": "color",
"$description": "Used for the icon of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.700}",
"$type": "color",
"$description": "Used for the icon of a tier related badge when static or the default state when linked.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.tier.icon.color.default}"
},
"name": "BADGE_TIER_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"badge",
"tier",
"icon",
"color",
"default"
]
},
"hover": {
"key": "{badge.tier.icon.color.hover}",
"$value": "#493c83",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.800}",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.tier.icon.color.hover}"
},
"name": "BADGE_TIER_ICON_COLOR_HOVER",
"attributes": {},
"path": [
"badge",
"tier",
"icon",
"color",
"hover"
]
},
"focus": {
"key": "{badge.tier.icon.color.focus}",
"$value": "#493c83",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{badge.tier.icon.color.hover}",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.tier.icon.color.focus}"
},
"name": "BADGE_TIER_ICON_COLOR_FOCUS",
"attributes": {},
"path": [
"badge",
"tier",
"icon",
"color",
"focus"
]
},
"active": {
"key": "{badge.tier.icon.color.active}",
"$value": "#342d59",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/badge.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.900}",
"$type": "color",
"$description": "Used for the icon of a tier related badge in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{badge.tier.icon.color.active}"
},
"name": "BADGE_TIER_ICON_COLOR_ACTIVE",
"attributes": {},
"path": [
"badge",
"tier",
"icon",
"color",
"active"
]
}
}
}
}
},
"banner": {
"intro": {
"border": {
"color": {
"key": "{banner.intro.border.color}",
"$value": "#9dc7f1",
"$type": "color",
"$description": "Used for the border of an info banner.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/banner.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.200}",
"$type": "color",
"$description": "Used for the border of an info banner.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{banner.intro.border.color}"
},
"name": "BANNER_INTRO_BORDER_COLOR",
"attributes": {},
"path": [
"banner",
"intro",
"border",
"color"
]
}
}
},
"promo": {
"background": {
"color": {
"key": "{banner.promo.background.color}",
"$value": "#f4f0ff",
"$type": "color",
"$description": "Used for the background of a promo banner.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/banner.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.50}",
"$type": "color",
"$description": "Used for the background of a promo banner.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{banner.promo.background.color}"
},
"name": "BANNER_PROMO_BACKGROUND_COLOR",
"attributes": {},
"path": [
"banner",
"promo",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{banner.promo.border.color}",
"$value": "#cbbbf2",
"$type": "color",
"$description": "Used for the border of a promo banner.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/banner.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.200}",
"$type": "color",
"$description": "Used for the border of a promo banner.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{banner.promo.border.color}"
},
"name": "BANNER_PROMO_BORDER_COLOR",
"attributes": {},
"path": [
"banner",
"promo",
"border",
"color"
]
}
}
}
},
"breadcrumb": {
"separator": {
"color": {
"key": "{breadcrumb.separator.color}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the breadcrumb level separator.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/breadcrumb.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.400}",
"$type": "color",
"$description": "Used for the breadcrumb level separator.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{breadcrumb.separator.color}"
},
"name": "BREADCRUMB_SEPARATOR_COLOR",
"attributes": {},
"path": [
"breadcrumb",
"separator",
"color"
]
}
}
},
"broadcast": {
"banner": {
"background": {
"color": {
"blue": {
"key": "{broadcast.banner.background.color.blue}",
"$value": "#235180",
"$type": "color",
"$description": "Used for the background for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#235180",
"$type": "color",
"$description": "Used for the background for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.blue}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_BLUE",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"blue"
]
},
"dark": {
"key": "{broadcast.banner.background.color.dark}",
"$value": "#737278",
"$type": "color",
"$description": "Used for the background for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.500}",
"$type": "color",
"$description": "Used for the background for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.dark}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_DARK",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"dark"
]
},
"green": {
"key": "{broadcast.banner.background.color.green}",
"$value": "#1b653f",
"$type": "color",
"$description": "Used for the background for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#1b653f",
"$type": "color",
"$description": "Used for the background for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.green}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_GREEN",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"green"
]
},
"indigo": {
"key": "{broadcast.banner.background.color.indigo}",
"$value": "#41419f",
"$type": "color",
"$description": "Used for the background for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#41419f",
"$type": "color",
"$description": "Used for the background for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.indigo}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_INDIGO",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"indigo"
]
},
"light": {
"key": "{broadcast.banner.background.color.light}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the background for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.light}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_LIGHT",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"light"
]
},
"lightblue": {
"key": "{broadcast.banner.background.color.lightblue}",
"$value": "#4977a5",
"$type": "color",
"$description": "Used for the background for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#4977a5",
"$type": "color",
"$description": "Used for the background for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.lightblue}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_LIGHTBLUE",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"lightblue"
]
},
"lightgreen": {
"key": "{broadcast.banner.background.color.lightgreen}",
"$value": "#308258",
"$type": "color",
"$description": "Used for the background for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#308258",
"$type": "color",
"$description": "Used for the background for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.lightgreen}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_LIGHTGREEN",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"lightgreen"
]
},
"lightindigo": {
"key": "{broadcast.banner.background.color.lightindigo}",
"$value": "#6666c4",
"$type": "color",
"$description": "Used for the background for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#6666c4",
"$type": "color",
"$description": "Used for the background for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.lightindigo}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_LIGHTINDIGO",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"lightindigo"
]
},
"lightred": {
"key": "{broadcast.banner.background.color.lightred}",
"$value": "#ad4a3b",
"$type": "color",
"$description": "Used for the background for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#ad4a3b",
"$type": "color",
"$description": "Used for the background for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.lightred}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_LIGHTRED",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"lightred"
]
},
"red": {
"key": "{broadcast.banner.background.color.red}",
"$value": "#8f2110",
"$type": "color",
"$description": "Used for the background for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#8f2110",
"$type": "color",
"$description": "Used for the background for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{broadcast.banner.background.color.red}"
},
"name": "BROADCAST_BANNER_BACKGROUND_COLOR_RED",
"attributes": {},
"path": [
"broadcast",
"banner",
"background",
"color",
"red"
]
}
}
},
"border": {
"color": {
"blue": {
"key": "{broadcast.banner.border.color.blue}",
"$value": "#0b2640",
"$type": "color",
"$description": "Used for the border for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#0b2640",
"$type": "color",
"$description": "Used for the border for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.blue}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_BLUE",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"blue"
]
},
"dark": {
"key": "{broadcast.banner.border.color.dark}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the border for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the border for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.dark}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_DARK",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"dark"
]
},
"green": {
"key": "{broadcast.banner.border.color.green}",
"$value": "#0e4328",
"$type": "color",
"$description": "Used for the border for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#0e4328",
"$type": "color",
"$description": "Used for the border for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.green}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_GREEN",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"green"
]
},
"indigo": {
"key": "{broadcast.banner.border.color.indigo}",
"$value": "#222261",
"$type": "color",
"$description": "Used for the border for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#222261",
"$type": "color",
"$description": "Used for the border for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.indigo}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_INDIGO",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"indigo"
]
},
"light": {
"key": "{broadcast.banner.border.color.light}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the border for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the border for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.light}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_LIGHT",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"light"
]
},
"lightblue": {
"key": "{broadcast.banner.border.color.lightblue}",
"$value": "#235180",
"$type": "color",
"$description": "Used for the border for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#235180",
"$type": "color",
"$description": "Used for the border for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.lightblue}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_LIGHTBLUE",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"lightblue"
]
},
"lightgreen": {
"key": "{broadcast.banner.border.color.lightgreen}",
"$value": "#1b653f",
"$type": "color",
"$description": "Used for the border for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#1b653f",
"$type": "color",
"$description": "Used for the border for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.lightgreen}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_LIGHTGREEN",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"lightgreen"
]
},
"lightindigo": {
"key": "{broadcast.banner.border.color.lightindigo}",
"$value": "#41419f",
"$type": "color",
"$description": "Used for the border for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#41419f",
"$type": "color",
"$description": "Used for the border for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.lightindigo}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_LIGHTINDIGO",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"lightindigo"
]
},
"lightred": {
"key": "{broadcast.banner.border.color.lightred}",
"$value": "#8f2110",
"$type": "color",
"$description": "Used for the border for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#8f2110",
"$type": "color",
"$description": "Used for the border for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.lightred}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_LIGHTRED",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"lightred"
]
},
"red": {
"key": "{broadcast.banner.border.color.red}",
"$value": "#580d02",
"$type": "color",
"$description": "Used for the border for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "#580d02",
"$type": "color",
"$description": "Used for the border for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{broadcast.banner.border.color.red}"
},
"name": "BROADCAST_BANNER_BORDER_COLOR_RED",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"color",
"red"
]
}
},
"radius": {
"key": "{broadcast.banner.border.radius}",
"$value": "0.25rem",
"$type": "dimension",
"$description": "Used for broadcast banner border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.default}",
"$type": "dimension",
"$description": "Used for broadcast banner border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{broadcast.banner.border.radius}"
},
"name": "BROADCAST_BANNER_BORDER_RADIUS",
"attributes": {},
"path": [
"broadcast",
"banner",
"border",
"radius"
]
}
},
"icon": {
"color": {
"blue": {
"key": "{broadcast.banner.icon.color.blue}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the icon for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.blue}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_BLUE",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"blue"
]
},
"dark": {
"key": "{broadcast.banner.icon.color.dark}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the icon for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.dark}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_DARK",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"dark"
]
},
"green": {
"key": "{broadcast.banner.icon.color.green}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the icon for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.green}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_GREEN",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"green"
]
},
"indigo": {
"key": "{broadcast.banner.icon.color.indigo}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the icon for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.indigo}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_INDIGO",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"indigo"
]
},
"light": {
"key": "{broadcast.banner.icon.color.light}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the icon for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.900}",
"$type": "color",
"$description": "Used for the icon for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.light}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_LIGHT",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"light"
]
},
"lightblue": {
"key": "{broadcast.banner.icon.color.lightblue}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the icon for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.lightblue}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_LIGHTBLUE",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"lightblue"
]
},
"lightgreen": {
"key": "{broadcast.banner.icon.color.lightgreen}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the icon for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.lightgreen}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_LIGHTGREEN",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"lightgreen"
]
},
"lightindigo": {
"key": "{broadcast.banner.icon.color.lightindigo}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the icon for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.lightindigo}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_LIGHTINDIGO",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"lightindigo"
]
},
"lightred": {
"key": "{broadcast.banner.icon.color.lightred}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the icon for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.lightred}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_LIGHTRED",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"lightred"
]
},
"red": {
"key": "{broadcast.banner.icon.color.red}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the icon for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the icon for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{broadcast.banner.icon.color.red}"
},
"name": "BROADCAST_BANNER_ICON_COLOR_RED",
"attributes": {},
"path": [
"broadcast",
"banner",
"icon",
"color",
"red"
]
}
}
},
"text": {
"color": {
"blue": {
"key": "{broadcast.banner.text.color.blue}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the text for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the blue banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.blue}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_BLUE",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"blue"
]
},
"dark": {
"key": "{broadcast.banner.text.color.dark}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the text for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the dark banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.dark}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_DARK",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"dark"
]
},
"green": {
"key": "{broadcast.banner.text.color.green}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the text for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the green banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.green}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_GREEN",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"green"
]
},
"indigo": {
"key": "{broadcast.banner.text.color.indigo}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the text for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the indigo banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.indigo}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_INDIGO",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"indigo"
]
},
"light": {
"key": "{broadcast.banner.text.color.light}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the text for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.900}",
"$type": "color",
"$description": "Used for the text for the light banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.light}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_LIGHT",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"light"
]
},
"lightblue": {
"key": "{broadcast.banner.text.color.lightblue}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the text for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the lightblue banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.lightblue}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_LIGHTBLUE",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"lightblue"
]
},
"lightgreen": {
"key": "{broadcast.banner.text.color.lightgreen}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the text for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the lightgreen banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.lightgreen}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_LIGHTGREEN",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"lightgreen"
]
},
"lightindigo": {
"key": "{broadcast.banner.text.color.lightindigo}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the text for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the lightindigo banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.lightindigo}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_LIGHTINDIGO",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"lightindigo"
]
},
"lightred": {
"key": "{broadcast.banner.text.color.lightred}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the text for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the lightred banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.lightred}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_LIGHTRED",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"lightred"
]
},
"red": {
"key": "{broadcast.banner.text.color.red}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the text for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/broadcast.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the text for the red banner type.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{broadcast.banner.text.color.red}"
},
"name": "BROADCAST_BANNER_TEXT_COLOR_RED",
"attributes": {},
"path": [
"broadcast",
"banner",
"text",
"color",
"red"
]
}
}
}
}
},
"button": {
"border": {
"radius": {
"key": "{button.border.radius}",
"$value": "0.5rem",
"$type": "dimension",
"$description": "Used for button border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.border.radius}",
"$type": "dimension",
"$description": "Used for button border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{button.border.radius}"
},
"name": "BUTTON_BORDER_RADIUS",
"attributes": {},
"path": [
"button",
"border",
"radius"
]
}
},
"default": {
"primary": {
"foreground": {
"color": {
"default": {
"key": "{button.default.primary.foreground.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.default.primary.foreground.color.default}"
},
"name": "BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"default",
"primary",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{button.default.primary.foreground.color.hover}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.default.primary.foreground.color.hover}"
},
"name": "BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"default",
"primary",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{button.default.primary.foreground.color.focus}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.default.primary.foreground.color.focus}"
},
"name": "BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"default",
"primary",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{button.default.primary.foreground.color.active}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a default primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.default.primary.foreground.color.active}"
},
"name": "BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"default",
"primary",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{button.default.primary.background.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background of an default primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the background of an default primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.default.primary.background.color.default}"
},
"name": "BUTTON_DEFAULT_PRIMARY_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"default",
"primary",
"background",
"color",
"default"
]
},
"hover": {
"key": "{button.default.primary.background.color.hover}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of an default primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the background of an default primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.default.primary.background.color.hover}"
},
"name": "BUTTON_DEFAULT_PRIMARY_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"default",
"primary",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{button.default.primary.background.color.focus}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of an default primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an default primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.default.primary.background.color.focus}"
},
"name": "BUTTON_DEFAULT_PRIMARY_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"default",
"primary",
"background",
"color",
"focus"
]
},
"active": {
"key": "{button.default.primary.background.color.active}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of an default primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the background of an default primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.default.primary.background.color.active}"
},
"name": "BUTTON_DEFAULT_PRIMARY_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"default",
"primary",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{button.default.primary.border.color.default}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the border of an default primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the border of an default primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.default.primary.border.color.default}"
},
"name": "BUTTON_DEFAULT_PRIMARY_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"default",
"primary",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.default.primary.border.color.hover}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the border of an default primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.400}",
"$type": "color",
"$description": "Used for the border of an default primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.default.primary.border.color.hover}"
},
"name": "BUTTON_DEFAULT_PRIMARY_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"default",
"primary",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.default.primary.border.color.focus}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the border of an default primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.border.color.hover}",
"$type": "color",
"$description": "Used for the border of an default primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.default.primary.border.color.focus}"
},
"name": "BUTTON_DEFAULT_PRIMARY_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"default",
"primary",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.default.primary.border.color.active}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the border of an default primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for the border of an default primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.default.primary.border.color.active}"
},
"name": "BUTTON_DEFAULT_PRIMARY_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"default",
"primary",
"border",
"color",
"active"
]
}
}
}
},
"tertiary": {
"foreground": {
"color": {
"default": {
"key": "{button.default.tertiary.foreground.color.default}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.default.tertiary.foreground.color.default}"
},
"name": "BUTTON_DEFAULT_TERTIARY_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{button.default.tertiary.foreground.color.hover}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.default.tertiary.foreground.color.hover}"
},
"name": "BUTTON_DEFAULT_TERTIARY_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{button.default.tertiary.foreground.color.focus}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.default.tertiary.foreground.color.focus}"
},
"name": "BUTTON_DEFAULT_TERTIARY_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{button.default.tertiary.foreground.color.active}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.active}",
"$type": "color",
"$description": "Used for the foreground of a default borderless, tertiary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.default.tertiary.foreground.color.active}"
},
"name": "BUTTON_DEFAULT_TERTIARY_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{button.default.tertiary.background.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.default.tertiary.background.color.default}"
},
"name": "BUTTON_DEFAULT_TERTIARY_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"background",
"color",
"default"
]
},
"hover": {
"key": "{button.default.tertiary.background.color.hover}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.default.tertiary.background.color.hover}"
},
"name": "BUTTON_DEFAULT_TERTIARY_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{button.default.tertiary.background.color.focus}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.background.color.focus}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.default.tertiary.background.color.focus}"
},
"name": "BUTTON_DEFAULT_TERTIARY_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"background",
"color",
"focus"
]
},
"active": {
"key": "{button.default.tertiary.background.color.active}",
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.background.color.active}",
"$type": "color",
"$description": "Used for the background of a default borderless, tertiary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.default.tertiary.background.color.active}"
},
"name": "BUTTON_DEFAULT_TERTIARY_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{button.default.tertiary.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.border.color.default}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.default.tertiary.border.color.default}"
},
"name": "BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.default.tertiary.border.color.hover}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.default.tertiary.border.color.hover}"
},
"name": "BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.default.tertiary.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.border.color.focus}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.default.tertiary.border.color.focus}"
},
"name": "BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.default.tertiary.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.border.color.active}",
"$type": "color",
"$description": "Used for the border of a default borderless, tertiary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.default.tertiary.border.color.active}"
},
"name": "BUTTON_DEFAULT_TERTIARY_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"default",
"tertiary",
"border",
"color",
"active"
]
}
}
}
}
},
"confirm": {
"primary": {
"foreground": {
"color": {
"default": {
"key": "{button.confirm.primary.foreground.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.primary.foreground.color.default}"
},
"name": "BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{button.confirm.primary.foreground.color.hover}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.primary.foreground.color.hover}"
},
"name": "BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{button.confirm.primary.foreground.color.focus}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.primary.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.primary.foreground.color.focus}"
},
"name": "BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{button.confirm.primary.foreground.color.active}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.primary.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.primary.foreground.color.active}"
},
"name": "BUTTON_CONFIRM_PRIMARY_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{button.confirm.primary.background.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.primary.background.color.default}"
},
"name": "BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"background",
"color",
"default"
]
},
"hover": {
"key": "{button.confirm.primary.background.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.primary.background.color.hover}"
},
"name": "BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{button.confirm.primary.background.color.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.primary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.primary.background.color.focus}"
},
"name": "BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"background",
"color",
"focus"
]
},
"active": {
"key": "{button.confirm.primary.background.color.active}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.1000}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.primary.background.color.active}"
},
"name": "BUTTON_CONFIRM_PRIMARY_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{button.confirm.primary.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.primary.border.color.default}"
},
"name": "BUTTON_CONFIRM_PRIMARY_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.confirm.primary.border.color.hover}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.primary.border.color.default}",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.primary.border.color.hover}"
},
"name": "BUTTON_CONFIRM_PRIMARY_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.confirm.primary.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.primary.border.color.default}",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.primary.border.color.focus}"
},
"name": "BUTTON_CONFIRM_PRIMARY_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.confirm.primary.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.primary.border.color.default}",
"$type": "color",
"$description": "Used for the border of a confirm (positive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.primary.border.color.active}"
},
"name": "BUTTON_CONFIRM_PRIMARY_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"confirm",
"primary",
"border",
"color",
"active"
]
}
}
}
},
"secondary": {
"foreground": {
"color": {
"default": {
"key": "{button.confirm.secondary.foreground.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.secondary.foreground.color.default}"
},
"name": "BUTTON_CONFIRM_SECONDARY_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{button.confirm.secondary.foreground.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.secondary.foreground.color.hover}"
},
"name": "BUTTON_CONFIRM_SECONDARY_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{button.confirm.secondary.foreground.color.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.secondary.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.secondary.foreground.color.focus}"
},
"name": "BUTTON_CONFIRM_SECONDARY_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{button.confirm.secondary.foreground.color.active}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.1000}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.secondary.foreground.color.active}"
},
"name": "BUTTON_CONFIRM_SECONDARY_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{button.confirm.secondary.background.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.secondary.background.color.default}"
},
"name": "BUTTON_CONFIRM_SECONDARY_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"background",
"color",
"default"
]
},
"hover": {
"key": "{button.confirm.secondary.background.color.hover}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.secondary.background.color.hover}"
},
"name": "BUTTON_CONFIRM_SECONDARY_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{button.confirm.secondary.background.color.focus}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.secondary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.secondary.background.color.focus}"
},
"name": "BUTTON_CONFIRM_SECONDARY_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"background",
"color",
"focus"
]
},
"active": {
"key": "{button.confirm.secondary.background.color.active}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the background of an outlined confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.secondary.background.color.active}"
},
"name": "BUTTON_CONFIRM_SECONDARY_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{button.confirm.secondary.border.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.secondary.border.color.default}"
},
"name": "BUTTON_CONFIRM_SECONDARY_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.confirm.secondary.border.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.secondary.border.color.hover}"
},
"name": "BUTTON_CONFIRM_SECONDARY_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.confirm.secondary.border.color.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.confirm.secondary.border.color.hover}",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.secondary.border.color.focus}"
},
"name": "BUTTON_CONFIRM_SECONDARY_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.confirm.secondary.border.color.active}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.1000}",
"$type": "color",
"$description": "Used for the border of an outlined confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.secondary.border.color.active}"
},
"name": "BUTTON_CONFIRM_SECONDARY_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"confirm",
"secondary",
"border",
"color",
"active"
]
}
}
}
},
"tertiary": {
"foreground": {
"color": {
"default": {
"key": "{button.confirm.tertiary.foreground.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.tertiary.foreground.color.default}"
},
"name": "BUTTON_CONFIRM_TERTIARY_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{button.confirm.tertiary.foreground.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.tertiary.foreground.color.hover}"
},
"name": "BUTTON_CONFIRM_TERTIARY_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{button.confirm.tertiary.foreground.color.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.tertiary.foreground.color.focus}"
},
"name": "BUTTON_CONFIRM_TERTIARY_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{button.confirm.tertiary.foreground.color.active}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.foreground.color.active}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.confirm.tertiary.foreground.color.active}"
},
"name": "BUTTON_CONFIRM_TERTIARY_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{button.confirm.tertiary.background.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.background.color.default}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.tertiary.background.color.default}"
},
"name": "BUTTON_CONFIRM_TERTIARY_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"background",
"color",
"default"
]
},
"hover": {
"key": "{button.confirm.tertiary.background.color.hover}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.tertiary.background.color.hover}"
},
"name": "BUTTON_CONFIRM_TERTIARY_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{button.confirm.tertiary.background.color.focus}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.background.color.focus}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.tertiary.background.color.focus}"
},
"name": "BUTTON_CONFIRM_TERTIARY_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"background",
"color",
"focus"
]
},
"active": {
"key": "{button.confirm.tertiary.background.color.active}",
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.background.color.active}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.confirm.tertiary.background.color.active}"
},
"name": "BUTTON_CONFIRM_TERTIARY_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{button.confirm.tertiary.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.border.color.default}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.tertiary.border.color.default}"
},
"name": "BUTTON_CONFIRM_TERTIARY_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.confirm.tertiary.border.color.hover}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.tertiary.border.color.hover}"
},
"name": "BUTTON_CONFIRM_TERTIARY_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.confirm.tertiary.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.border.color.focus}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.tertiary.border.color.focus}"
},
"name": "BUTTON_CONFIRM_TERTIARY_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.confirm.tertiary.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.border.color.active}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary confirm (positive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.confirm.tertiary.border.color.active}"
},
"name": "BUTTON_CONFIRM_TERTIARY_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"confirm",
"tertiary",
"border",
"color",
"active"
]
}
}
}
}
},
"danger": {
"primary": {
"foreground": {
"color": {
"default": {
"key": "{button.danger.primary.foreground.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.primary.foreground.color.default}"
},
"name": "BUTTON_DANGER_PRIMARY_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{button.danger.primary.foreground.color.hover}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.danger.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.primary.foreground.color.hover}"
},
"name": "BUTTON_DANGER_PRIMARY_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{button.danger.primary.foreground.color.focus}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.danger.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.primary.foreground.color.focus}"
},
"name": "BUTTON_DANGER_PRIMARY_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{button.danger.primary.foreground.color.active}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.danger.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.primary.foreground.color.active}"
},
"name": "BUTTON_DANGER_PRIMARY_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{button.danger.primary.background.color.default}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.500}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.primary.background.color.default}"
},
"name": "BUTTON_DANGER_PRIMARY_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"background",
"color",
"default"
]
},
"hover": {
"key": "{button.danger.primary.background.color.hover}",
"$value": "#c02f12",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.600}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.primary.background.color.hover}"
},
"name": "BUTTON_DANGER_PRIMARY_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{button.danger.primary.background.color.focus}",
"$value": "#c02f12",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.danger.primary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.primary.background.color.focus}"
},
"name": "BUTTON_DANGER_PRIMARY_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"background",
"color",
"focus"
]
},
"active": {
"key": "{button.danger.primary.background.color.active}",
"$value": "#812713",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.800}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.primary.background.color.active}"
},
"name": "BUTTON_DANGER_PRIMARY_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{button.danger.primary.border.color.default}",
"$value": "#c02f12",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.600}",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.primary.border.color.default}"
},
"name": "BUTTON_DANGER_PRIMARY_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.danger.primary.border.color.hover}",
"$value": "#812713",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.800}",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.primary.border.color.hover}"
},
"name": "BUTTON_DANGER_PRIMARY_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.danger.primary.border.color.focus}",
"$value": "#812713",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.danger.primary.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.primary.border.color.focus}"
},
"name": "BUTTON_DANGER_PRIMARY_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.danger.primary.border.color.active}",
"$value": "#582014",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.900}",
"$type": "color",
"$description": "Used for the border of a danger (destructive) primary button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.primary.border.color.active}"
},
"name": "BUTTON_DANGER_PRIMARY_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"danger",
"primary",
"border",
"color",
"active"
]
}
}
}
},
"secondary": {
"foreground": {
"color": {
"default": {
"key": "{button.danger.secondary.foreground.color.default}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.500}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.secondary.foreground.color.default}"
},
"name": "BUTTON_DANGER_SECONDARY_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{button.danger.secondary.foreground.color.hover}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.700}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.secondary.foreground.color.hover}"
},
"name": "BUTTON_DANGER_SECONDARY_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{button.danger.secondary.foreground.color.focus}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.danger.secondary.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.secondary.foreground.color.focus}"
},
"name": "BUTTON_DANGER_SECONDARY_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{button.danger.secondary.foreground.color.active}",
"$value": "#582014",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.900}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.secondary.foreground.color.active}"
},
"name": "BUTTON_DANGER_SECONDARY_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{button.danger.secondary.background.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.secondary.background.color.default}"
},
"name": "BUTTON_DANGER_SECONDARY_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"background",
"color",
"default"
]
},
"hover": {
"key": "{button.danger.secondary.background.color.hover}",
"$value": "#fcf1ef",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.50}",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.secondary.background.color.hover}"
},
"name": "BUTTON_DANGER_SECONDARY_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{button.danger.secondary.background.color.focus}",
"$value": "#fcf1ef",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.danger.secondary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.secondary.background.color.focus}"
},
"name": "BUTTON_DANGER_SECONDARY_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"background",
"color",
"focus"
]
},
"active": {
"key": "{button.danger.secondary.background.color.active}",
"$value": "#fdd4cd",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.100}",
"$type": "color",
"$description": "Used for the background of an outlined danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.secondary.background.color.active}"
},
"name": "BUTTON_DANGER_SECONDARY_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{button.danger.secondary.border.color.default}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.500}",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.secondary.border.color.default}"
},
"name": "BUTTON_DANGER_SECONDARY_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.danger.secondary.border.color.hover}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.700}",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.secondary.border.color.hover}"
},
"name": "BUTTON_DANGER_SECONDARY_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.danger.secondary.border.color.focus}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.danger.secondary.border.color.hover}",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.secondary.border.color.focus}"
},
"name": "BUTTON_DANGER_SECONDARY_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.danger.secondary.border.color.active}",
"$value": "#582014",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.900}",
"$type": "color",
"$description": "Used for the border of an outlined danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.secondary.border.color.active}"
},
"name": "BUTTON_DANGER_SECONDARY_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"danger",
"secondary",
"border",
"color",
"active"
]
}
}
}
},
"tertiary": {
"foreground": {
"color": {
"default": {
"key": "{button.danger.tertiary.foreground.color.default}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.tertiary.foreground.color.default}"
},
"name": "BUTTON_DANGER_TERTIARY_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{button.danger.tertiary.foreground.color.hover}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.tertiary.foreground.color.hover}"
},
"name": "BUTTON_DANGER_TERTIARY_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{button.danger.tertiary.foreground.color.focus}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.tertiary.foreground.color.focus}"
},
"name": "BUTTON_DANGER_TERTIARY_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{button.danger.tertiary.foreground.color.active}",
"$value": "#582014",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.foreground.color.active}",
"$type": "color",
"$description": "Used for the foreground of a borderless, tertiary danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.danger.tertiary.foreground.color.active}"
},
"name": "BUTTON_DANGER_TERTIARY_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{button.danger.tertiary.background.color.default}",
"$value": "rgba(245, 127, 108, 0)",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.background.color.default}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.tertiary.background.color.default}"
},
"name": "BUTTON_DANGER_TERTIARY_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"background",
"color",
"default"
]
},
"hover": {
"key": "{button.danger.tertiary.background.color.hover}",
"$value": "rgba(245, 127, 108, 0.16)",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.tertiary.background.color.hover}"
},
"name": "BUTTON_DANGER_TERTIARY_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{button.danger.tertiary.background.color.focus}",
"$value": "rgba(245, 127, 108, 0.16)",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.background.color.focus}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.tertiary.background.color.focus}"
},
"name": "BUTTON_DANGER_TERTIARY_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"background",
"color",
"focus"
]
},
"active": {
"key": "{button.danger.tertiary.background.color.active}",
"$value": "rgba(174, 24, 0, 0.24)",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.background.color.active}",
"$type": "color",
"$description": "Used for the background of a borderless, tertiary danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.danger.tertiary.background.color.active}"
},
"name": "BUTTON_DANGER_TERTIARY_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{button.danger.tertiary.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.border.color.default}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.tertiary.border.color.default}"
},
"name": "BUTTON_DANGER_TERTIARY_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.danger.tertiary.border.color.hover}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.tertiary.border.color.hover}"
},
"name": "BUTTON_DANGER_TERTIARY_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.danger.tertiary.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.border.color.focus}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.tertiary.border.color.focus}"
},
"name": "BUTTON_DANGER_TERTIARY_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.danger.tertiary.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.border.color.active}",
"$type": "color",
"$description": "Used for the border of a borderless, tertiary danger (destructive) button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.danger.tertiary.border.color.active}"
},
"name": "BUTTON_DANGER_TERTIARY_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"danger",
"tertiary",
"border",
"color",
"active"
]
}
}
}
}
},
"dashed": {
"border": {
"color": {
"default": {
"key": "{button.dashed.border.color.default}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the border of a dashed button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.400}",
"$type": "color",
"$description": "Used for the border of a dashed button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"$deprecated": true,
"key": "{button.dashed.border.color.default}"
},
"name": "BUTTON_DASHED_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"dashed",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.dashed.border.color.hover}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the border of a dashed button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.dashed.border.color.default}",
"$type": "color",
"$description": "Used for the border of a dashed button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"$deprecated": true,
"key": "{button.dashed.border.color.hover}"
},
"name": "BUTTON_DASHED_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"dashed",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.dashed.border.color.focus}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the border of a dashed button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.dashed.border.color.default}",
"$type": "color",
"$description": "Used for the border of a dashed button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"$deprecated": true,
"key": "{button.dashed.border.color.focus}"
},
"name": "BUTTON_DASHED_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"dashed",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.dashed.border.color.active}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the border of a dashed button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for the border of a dashed button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"$deprecated": true,
"key": "{button.dashed.border.color.active}"
},
"name": "BUTTON_DASHED_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"dashed",
"border",
"color",
"active"
]
}
}
}
},
"link": {
"border": {
"radius": {
"key": "{button.link.border.radius}",
"$value": "0.25rem",
"$type": "dimension",
"$description": "Used for link button border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.md}",
"$type": "dimension",
"$description": "Used for link button border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{button.link.border.radius}"
},
"name": "BUTTON_LINK_BORDER_RADIUS",
"attributes": {},
"path": [
"button",
"link",
"border",
"radius"
]
}
},
"text": {
"color": {
"default": {
"key": "{button.link.text.color.default}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the text of a link button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.link}",
"$type": "color",
"$description": "Used for the text of a link button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.link.text.color.default}"
},
"name": "BUTTON_LINK_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"link",
"text",
"color",
"default"
]
},
"hover": {
"key": "{button.link.text.color.hover}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the text of a link button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.link.text.color.default}",
"$type": "color",
"$description": "Used for the text of a link button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.link.text.color.hover}"
},
"name": "BUTTON_LINK_TEXT_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"link",
"text",
"color",
"hover"
]
},
"focus": {
"key": "{button.link.text.color.focus}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the text of a link button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.link.text.color.default}",
"$type": "color",
"$description": "Used for the text of a link button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.link.text.color.focus}"
},
"name": "BUTTON_LINK_TEXT_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"link",
"text",
"color",
"focus"
]
},
"active": {
"key": "{button.link.text.color.active}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the text of a link button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.link.text.color.default}",
"$type": "color",
"$description": "Used for the text of a link button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.link.text.color.active}"
},
"name": "BUTTON_LINK_TEXT_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"link",
"text",
"color",
"active"
]
}
}
}
},
"selected": {
"foreground": {
"color": {
"default": {
"key": "{button.selected.foreground.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a selected button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a selected button in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.selected.foreground.color.default}"
},
"name": "BUTTON_SELECTED_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"selected",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{button.selected.foreground.color.hover}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a selected button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a selected button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.selected.foreground.color.hover}"
},
"name": "BUTTON_SELECTED_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"selected",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{button.selected.foreground.color.focus}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a selected button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a selected button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.selected.foreground.color.focus}"
},
"name": "BUTTON_SELECTED_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"selected",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{button.selected.foreground.color.active}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a selected button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.foreground.color.active}",
"$type": "color",
"$description": "Used for the foreground of a selected button in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.selected.foreground.color.active}"
},
"name": "BUTTON_SELECTED_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"selected",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{button.selected.background.color.default}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of a selected button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the background of a selected button in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.selected.background.color.default}"
},
"name": "BUTTON_SELECTED_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"selected",
"background",
"color",
"default"
]
},
"hover": {
"key": "{button.selected.background.color.hover}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of a selected button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a selected button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.selected.background.color.hover}"
},
"name": "BUTTON_SELECTED_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"selected",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{button.selected.background.color.focus}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of a selected button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.background.color.focus}",
"$type": "color",
"$description": "Used for the background of a selected button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.selected.background.color.focus}"
},
"name": "BUTTON_SELECTED_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"selected",
"background",
"color",
"focus"
]
},
"active": {
"key": "{button.selected.background.color.active}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a selected button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.default.primary.background.color.active}",
"$type": "color",
"$description": "Used for the background of a selected button in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.selected.background.color.active}"
},
"name": "BUTTON_SELECTED_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"selected",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{button.selected.border.color.default}",
"$value": "#a4a3a8",
"$type": "color",
"$description": "Used for the border of a selected button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.300}",
"$type": "color",
"$description": "Used for the border of a selected button in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.selected.border.color.default}"
},
"name": "BUTTON_SELECTED_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"button",
"selected",
"border",
"color",
"default"
]
},
"hover": {
"key": "{button.selected.border.color.hover}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the border of a selected button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.400}",
"$type": "color",
"$description": "Used for the border of a selected button in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.selected.border.color.hover}"
},
"name": "BUTTON_SELECTED_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"button",
"selected",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{button.selected.border.color.focus}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the border of a selected button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{button.selected.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a selected button in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.selected.border.color.focus}"
},
"name": "BUTTON_SELECTED_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"button",
"selected",
"border",
"color",
"focus"
]
},
"active": {
"key": "{button.selected.border.color.active}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the border of a selected button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for the border of a selected button in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.selected.border.color.active}"
},
"name": "BUTTON_SELECTED_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"button",
"selected",
"border",
"color",
"active"
]
}
}
}
},
"disabled": {
"foreground": {
"color": {
"key": "{button.disabled.foreground.color}",
"$value": "#737278",
"$type": "color",
"$description": "Used for the foreground of a disabled button.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.500}",
"$type": "color",
"$description": "Used for the foreground of a disabled button.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{button.disabled.foreground.color}"
},
"name": "BUTTON_DISABLED_FOREGROUND_COLOR",
"attributes": {},
"path": [
"button",
"disabled",
"foreground",
"color"
]
}
},
"background": {
"color": {
"key": "{button.disabled.background.color}",
"$value": "#fbfafd",
"$type": "color",
"$description": "Used for the background of a disabled button.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.10}",
"$type": "color",
"$description": "Used for the background of a disabled button.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.disabled.background.color}"
},
"name": "BUTTON_DISABLED_BACKGROUND_COLOR",
"attributes": {},
"path": [
"button",
"disabled",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{button.disabled.border.color}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the border of a disabled button.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the border of a disabled button.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{button.disabled.border.color}"
},
"name": "BUTTON_DISABLED_BORDER_COLOR",
"attributes": {},
"path": [
"button",
"disabled",
"border",
"color"
]
}
}
},
"count": {
"background": {
"color": {
"key": "{button.count.background.color}",
"$value": "rgba(5, 5, 6, 0.08)",
"$type": "color",
"$description": "Used for the background of a button count element.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/button.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.8}",
"$type": "color",
"$description": "Used for the background of a button count element.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{button.count.background.color}"
},
"name": "BUTTON_COUNT_BACKGROUND_COLOR",
"attributes": {},
"path": [
"button",
"count",
"background",
"color"
]
}
}
}
},
"card": {
"border": {
"radius": {
"key": "{card.border.radius}",
"$value": "0.75rem",
"$type": "dimension",
"$description": "Used for card border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/card.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.xl}",
"$type": "dimension",
"$description": "Used for card border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{card.border.radius}"
},
"name": "CARD_BORDER_RADIUS",
"attributes": {},
"path": [
"card",
"border",
"radius"
]
}
}
},
"chart": {
"axis": {
"pointer": {
"color": {
"key": "{chart.axis.pointer.color}",
"$value": "#626168",
"$type": "color",
"$description": "Used in charts for the color of the reference line and axis value under mouse pointer.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"filePath": "src/tokens/contextual/chart.tokens.json",
"isSource": true,
"original": {
"$value": "{icon.color.subtle}",
"$type": "color",
"$description": "Used in charts for the color of the reference line and axis value under mouse pointer.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"key": "{chart.axis.pointer.color}"
},
"name": "CHART_AXIS_POINTER_COLOR",
"attributes": {},
"path": [
"chart",
"axis",
"pointer",
"color"
]
}
},
"line": {
"color": {
"key": "{chart.axis.line.color}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used in charts for axis line color.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"filePath": "src/tokens/contextual/chart.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used in charts for axis line color.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"key": "{chart.axis.line.color}"
},
"name": "CHART_AXIS_LINE_COLOR",
"attributes": {},
"path": [
"chart",
"axis",
"line",
"color"
]
}
},
"text": {
"color": {
"key": "{chart.axis.text.color}",
"$value": "#626168",
"$type": "color",
"$description": "Used in charts for the text color of axis titles and labels.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"filePath": "src/tokens/contextual/chart.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.subtle}",
"$type": "color",
"$description": "Used in charts for the text color of axis titles and labels.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"key": "{chart.axis.text.color}"
},
"name": "CHART_AXIS_TEXT_COLOR",
"attributes": {},
"path": [
"chart",
"axis",
"text",
"color"
]
}
}
},
"threshold": {
"area": {
"color": {
"key": "{chart.threshold.area.color}",
"$value": "rgba(221, 43, 14, 0.1)",
"$type": "color",
"$description": "Used in charts to delineate a threshold area in a chart.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"filePath": "src/tokens/contextual/chart.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(221, 43, 14, 0.1)",
"$type": "color",
"$description": "Used in charts to delineate a threshold area in a chart.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"key": "{chart.threshold.area.color}"
},
"name": "CHART_THRESHOLD_AREA_COLOR",
"attributes": {},
"path": [
"chart",
"threshold",
"area",
"color"
]
}
},
"line": {
"color": {
"key": "{chart.threshold.line.color}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used in charts to divide a threshold area in a chart from other data.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"filePath": "src/tokens/contextual/chart.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.500}",
"$type": "color",
"$description": "Used in charts to divide a threshold area in a chart from other data.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"key": "{chart.threshold.line.color}"
},
"name": "CHART_THRESHOLD_LINE_COLOR",
"attributes": {},
"path": [
"chart",
"threshold",
"line",
"color"
]
}
}
},
"zoom": {
"filler": {
"color": {
"key": "{chart.zoom.filler.color}",
"$value": "rgba(5, 5, 6, 0.08)",
"$type": "color",
"$description": "Used in charts for the overlay color when zooming in on a specific area of data.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"filePath": "src/tokens/contextual/chart.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.8}",
"$type": "color",
"$description": "Used in charts for the overlay color when zooming in on a specific area of data.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"key": "{chart.zoom.filler.color}"
},
"name": "CHART_ZOOM_FILLER_COLOR",
"attributes": {},
"path": [
"chart",
"zoom",
"filler",
"color"
]
}
},
"handle": {
"color": {
"key": "{chart.zoom.handle.color}",
"$value": "#626168",
"$type": "color",
"$description": "Used in charts for the handle color when zooming in on a specific area of data.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"filePath": "src/tokens/contextual/chart.tokens.json",
"isSource": true,
"original": {
"$value": "{icon.color.subtle}",
"$type": "color",
"$description": "Used in charts for the handle color when zooming in on a specific area of data.",
"$extensions": {
"com.figma.scopes": [
"ALL_SCOPES"
]
},
"key": "{chart.zoom.handle.color}"
},
"name": "CHART_ZOOM_HANDLE_COLOR",
"attributes": {},
"path": [
"chart",
"zoom",
"handle",
"color"
]
}
}
}
},
"datepicker": {
"background": {
"color": {
"key": "{datepicker.background.color}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background color of datepicker.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/datepicker.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the background color of datepicker.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{datepicker.background.color}"
},
"name": "DATEPICKER_BACKGROUND_COLOR",
"attributes": {},
"path": [
"datepicker",
"background",
"color"
]
}
},
"date": {
"text": {
"color": {
"selected": {
"key": "{datepicker.date.text.color.selected}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the datepicker date text color state indicators.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/datepicker.tokens.json",
"isSource": true,
"original": {
"$value": "{control.indicator.color.selected}",
"$type": "color",
"$description": "Used for the datepicker date text color state indicators.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{datepicker.date.text.color.selected}"
},
"name": "DATEPICKER_DATE_TEXT_COLOR_SELECTED",
"attributes": {},
"path": [
"datepicker",
"date",
"text",
"color",
"selected"
]
}
}
}
}
},
"drawer": {
"border": {
"radius": {
"key": "{drawer.border.radius}",
"$value": "1rem",
"$type": "dimension",
"$description": "Used for drawer border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/drawer.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.2xl}",
"$type": "dimension",
"$description": "Used for drawer border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{drawer.border.radius}"
},
"name": "DRAWER_BORDER_RADIUS",
"attributes": {},
"path": [
"drawer",
"border",
"radius"
]
}
}
},
"dropdown": {
"background": {
"color": {
"key": "{dropdown.background.color}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{background.color.overlap}",
"$type": "color",
"$description": "Used for the background of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.background.color}"
},
"name": "DROPDOWN_BACKGROUND_COLOR",
"attributes": {},
"path": [
"dropdown",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{dropdown.border.color}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the border of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"STROKE_COLOR"
]
},
"$deprecated": true,
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{border.color.strong}",
"$type": "color",
"$description": "Used for the border of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"STROKE_COLOR"
]
},
"$deprecated": true,
"key": "{dropdown.border.color}"
},
"name": "DROPDOWN_BORDER_COLOR",
"attributes": {},
"path": [
"dropdown",
"border",
"color"
]
},
"radius": {
"key": "{dropdown.border.radius}",
"$value": "0.5rem",
"$type": "dimension",
"$description": "Used for the border radius of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.lg}",
"$type": "dimension",
"$description": "Used for the border radius of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{dropdown.border.radius}"
},
"name": "DROPDOWN_BORDER_RADIUS",
"attributes": {},
"path": [
"dropdown",
"border",
"radius"
]
}
},
"divider": {
"color": {
"key": "{dropdown.divider.color}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the divider of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{border.color.default}",
"$type": "color",
"$description": "Used for the divider of a dropdown.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"STROKE_COLOR"
]
},
"key": "{dropdown.divider.color}"
},
"name": "DROPDOWN_DIVIDER_COLOR",
"attributes": {},
"path": [
"dropdown",
"divider",
"color"
]
}
},
"option": {
"text": {
"color": {
"default": {
"key": "{dropdown.option.text.color.default}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the text of a dropdown option in the default state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the default state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{dropdown.option.text.color.default}"
},
"name": "DROPDOWN_OPTION_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"dropdown",
"option",
"text",
"color",
"default"
]
},
"hover": {
"key": "{dropdown.option.text.color.hover}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the text of a dropdown option in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.hover}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{dropdown.option.text.color.hover}"
},
"name": "DROPDOWN_OPTION_TEXT_COLOR_HOVER",
"attributes": {},
"path": [
"dropdown",
"option",
"text",
"color",
"hover"
]
},
"focus": {
"key": "{dropdown.option.text.color.focus}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the text of a dropdown option in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.focus}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{dropdown.option.text.color.focus}"
},
"name": "DROPDOWN_OPTION_TEXT_COLOR_FOCUS",
"attributes": {},
"path": [
"dropdown",
"option",
"text",
"color",
"focus"
]
},
"active": {
"key": "{dropdown.option.text.color.active}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the text of a dropdown option in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.active}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{dropdown.option.text.color.active}"
},
"name": "DROPDOWN_OPTION_TEXT_COLOR_ACTIVE",
"attributes": {},
"path": [
"dropdown",
"option",
"text",
"color",
"active"
]
},
"disabled": {
"key": "{dropdown.option.text.color.disabled}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the text of a dropdown option in the disabled state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{action.disabled.foreground.color}",
"$type": "color",
"$description": "Used for the text of a dropdown option in the disabled state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{dropdown.option.text.color.disabled}"
},
"name": "DROPDOWN_OPTION_TEXT_COLOR_DISABLED",
"attributes": {},
"path": [
"dropdown",
"option",
"text",
"color",
"disabled"
]
}
}
},
"indicator": {
"color": {
"selected": {
"default": {
"key": "{dropdown.option.indicator.color.selected.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{control.background.color.selected.default}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{dropdown.option.indicator.color.selected.default}"
},
"name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_DEFAULT",
"attributes": {},
"path": [
"dropdown",
"option",
"indicator",
"color",
"selected",
"default"
]
},
"hover": {
"key": "{dropdown.option.indicator.color.selected.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{control.background.color.selected.hover}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{dropdown.option.indicator.color.selected.hover}"
},
"name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_HOVER",
"attributes": {},
"path": [
"dropdown",
"option",
"indicator",
"color",
"selected",
"hover"
]
},
"focus": {
"key": "{dropdown.option.indicator.color.selected.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{control.background.color.selected.focus}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{dropdown.option.indicator.color.selected.focus}"
},
"name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_FOCUS",
"attributes": {},
"path": [
"dropdown",
"option",
"indicator",
"color",
"selected",
"focus"
]
},
"active": {
"key": "{dropdown.option.indicator.color.selected.active}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{control.background.color.selected.focus}",
"$type": "color",
"$description": "Used for the dropdown selected option indicator in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{dropdown.option.indicator.color.selected.active}"
},
"name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_ACTIVE",
"attributes": {},
"path": [
"dropdown",
"option",
"indicator",
"color",
"selected",
"active"
]
}
}
}
},
"background": {
"color": {
"unselected": {
"default": {
"key": "{dropdown.option.background.color.unselected.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.option.background.color.unselected.default}"
},
"name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_DEFAULT",
"attributes": {},
"path": [
"dropdown",
"option",
"background",
"color",
"unselected",
"default"
]
},
"hover": {
"key": "{dropdown.option.background.color.unselected.hover}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.option.background.color.unselected.hover}"
},
"name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_HOVER",
"attributes": {},
"path": [
"dropdown",
"option",
"background",
"color",
"unselected",
"hover"
]
},
"focus": {
"key": "{dropdown.option.background.color.unselected.focus}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.background.color.focus}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.option.background.color.unselected.focus}"
},
"name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_FOCUS",
"attributes": {},
"path": [
"dropdown",
"option",
"background",
"color",
"unselected",
"focus"
]
},
"active": {
"key": "{dropdown.option.background.color.unselected.active}",
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.background.color.active}",
"$type": "color",
"$description": "Used for the background of an unselected dropdown option in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.option.background.color.unselected.active}"
},
"name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_ACTIVE",
"attributes": {},
"path": [
"dropdown",
"option",
"background",
"color",
"unselected",
"active"
]
}
},
"selected": {
"default": {
"key": "{dropdown.option.background.color.selected.default}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.option.background.color.selected.default}"
},
"name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT",
"attributes": {},
"path": [
"dropdown",
"option",
"background",
"color",
"selected",
"default"
]
},
"hover": {
"key": "{dropdown.option.background.color.selected.hover}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.option.background.color.selected.hover}"
},
"name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER",
"attributes": {},
"path": [
"dropdown",
"option",
"background",
"color",
"selected",
"hover"
]
},
"focus": {
"key": "{dropdown.option.background.color.selected.focus}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{dropdown.option.background.color.selected.hover}",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.option.background.color.selected.focus}"
},
"name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS",
"attributes": {},
"path": [
"dropdown",
"option",
"background",
"color",
"selected",
"focus"
]
},
"active": {
"key": "{dropdown.option.background.color.selected.active}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the background of a selected dropdown option in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.option.background.color.selected.active}"
},
"name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE",
"attributes": {},
"path": [
"dropdown",
"option",
"background",
"color",
"selected",
"active"
]
}
}
}
}
},
"search": {
"background": {
"color": {
"key": "{dropdown.search.background.color}",
"$value": "rgba(5, 5, 6, 0.02)",
"$type": "color",
"$description": "Used for the background of a search input in a dropdown listbox.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/dropdown.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.2}",
"$type": "color",
"$description": "Used for the background of a search input in a dropdown listbox.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{dropdown.search.background.color}"
},
"name": "DROPDOWN_SEARCH_BACKGROUND_COLOR",
"attributes": {},
"path": [
"dropdown",
"search",
"background",
"color"
]
}
}
}
},
"filtered-search": {
"token": {
"type": {
"background": {
"color": {
"default": {
"key": "{filtered-search.token.type.background.color.default}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the filtered search type token background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/filtered-search.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the filtered search type token background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{filtered-search.token.type.background.color.default}"
},
"name": "FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"filtered-search",
"token",
"type",
"background",
"color",
"default"
]
},
"hover": {
"key": "{filtered-search.token.type.background.color.hover}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the filtered search type token background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/filtered-search.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the filtered search type token background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{filtered-search.token.type.background.color.hover}"
},
"name": "FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"filtered-search",
"token",
"type",
"background",
"color",
"hover"
]
}
}
}
},
"data": {
"background": {
"color": {
"default": {
"key": "{filtered-search.token.data.background.color.default}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the filtered search data background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/filtered-search.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the filtered search data background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{filtered-search.token.data.background.color.default}"
},
"name": "FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"filtered-search",
"token",
"data",
"background",
"color",
"default"
]
},
"hover": {
"key": "{filtered-search.token.data.background.color.hover}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the filtered search data token background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/filtered-search.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the filtered search data token background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{filtered-search.token.data.background.color.hover}"
},
"name": "FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"filtered-search",
"token",
"data",
"background",
"color",
"hover"
]
}
}
}
},
"operator": {
"background": {
"color": {
"default": {
"key": "{filtered-search.token.operator.background.color.default}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the filtered search operator background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/filtered-search.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the filtered search operator background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{filtered-search.token.operator.background.color.default}"
},
"name": "FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"filtered-search",
"token",
"operator",
"background",
"color",
"default"
]
},
"hover": {
"key": "{filtered-search.token.operator.background.color.hover}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the filtered search operator token background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/filtered-search.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the filtered search operator token background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{filtered-search.token.operator.background.color.hover}"
},
"name": "FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"filtered-search",
"token",
"operator",
"background",
"color",
"hover"
]
}
}
}
}
}
},
"illustration": {
"stroke": {
"color": {
"default": {
"key": "{illustration.stroke.color.default}",
"$value": "#171321",
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#171321",
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{illustration.stroke.color.default}"
},
"name": "ILLUSTRATION_STROKE_COLOR_DEFAULT",
"attributes": {},
"path": [
"illustration",
"stroke",
"color",
"default"
]
}
},
"width": {
"default": {
"key": "{illustration.stroke.width.default}",
"$value": "2",
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail.",
"$extensions": {
"com.figma.scopes": [
"STROKE_FLOAT"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "2",
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail.",
"$extensions": {
"com.figma.scopes": [
"STROKE_FLOAT"
]
},
"key": "{illustration.stroke.width.default}"
},
"name": "ILLUSTRATION_STROKE_WIDTH_DEFAULT",
"attributes": {},
"path": [
"illustration",
"stroke",
"width",
"default"
]
}
}
},
"fill": {
"color": {
"default": {
"key": "{illustration.fill.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Default fill color for an element where specific meaning or emphasis is not required.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#fff",
"$type": "color",
"$description": "Default fill color for an element where specific meaning or emphasis is not required.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.fill.color.default}"
},
"name": "ILLUSTRATION_FILL_COLOR_DEFAULT",
"attributes": {},
"path": [
"illustration",
"fill",
"color",
"default"
]
}
}
},
"status": {
"fill": {
"color": {
"neutral": {
"key": "{illustration.status.fill.color.neutral}",
"$value": "#aea5d6",
"$type": "color",
"$description": "Used as a fill to convey a concept which is neither positive or negative.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#aea5d6",
"$type": "color",
"$description": "Used as a fill to convey a concept which is neither positive or negative.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.status.fill.color.neutral}"
},
"name": "ILLUSTRATION_STATUS_FILL_COLOR_NEUTRAL",
"attributes": {},
"path": [
"illustration",
"status",
"fill",
"color",
"neutral"
]
},
"success": {
"key": "{illustration.status.fill.color.success}",
"$value": "#6fdac9",
"$type": "color",
"$description": "Used as a fill to convey a success or active concept, has a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#6fdac9",
"$type": "color",
"$description": "Used as a fill to convey a success or active concept, has a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.status.fill.color.success}"
},
"name": "ILLUSTRATION_STATUS_FILL_COLOR_SUCCESS",
"attributes": {},
"path": [
"illustration",
"status",
"fill",
"color",
"success"
]
},
"warning": {
"key": "{illustration.status.fill.color.warning}",
"$value": "#fca326",
"$type": "color",
"$description": "Used as a fill to convey a caution or warning concept, has a slightly negative connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#fca326",
"$type": "color",
"$description": "Used as a fill to convey a caution or warning concept, has a slightly negative connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.status.fill.color.warning}"
},
"name": "ILLUSTRATION_STATUS_FILL_COLOR_WARNING",
"attributes": {},
"path": [
"illustration",
"status",
"fill",
"color",
"warning"
]
},
"danger": {
"key": "{illustration.status.fill.color.danger}",
"$value": "#ff9d73",
"$type": "color",
"$description": "Used as a fill to convey a critical or danger concept, has a negative connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#ff9d73",
"$type": "color",
"$description": "Used as a fill to convey a critical or danger concept, has a negative connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.status.fill.color.danger}"
},
"name": "ILLUSTRATION_STATUS_FILL_COLOR_DANGER",
"attributes": {},
"path": [
"illustration",
"status",
"fill",
"color",
"danger"
]
}
}
}
},
"accent": {
"stroke": {
"color": {
"orange": {
"key": "{illustration.accent.stroke.color.orange}",
"$value": "#ff9d73",
"$type": "color",
"$description": "Used for orange accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#ff9d73",
"$type": "color",
"$description": "Used for orange accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{illustration.accent.stroke.color.orange}"
},
"name": "ILLUSTRATION_ACCENT_STROKE_COLOR_ORANGE",
"attributes": {},
"path": [
"illustration",
"accent",
"stroke",
"color",
"orange"
]
},
"teal": {
"key": "{illustration.accent.stroke.color.teal}",
"$value": "#6fdac9",
"$type": "color",
"$description": "Used for teal accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#6fdac9",
"$type": "color",
"$description": "Used for teal accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{illustration.accent.stroke.color.teal}"
},
"name": "ILLUSTRATION_ACCENT_STROKE_COLOR_TEAL",
"attributes": {},
"path": [
"illustration",
"accent",
"stroke",
"color",
"teal"
]
},
"strong": {
"key": "{illustration.accent.stroke.color.strong}",
"$value": "#aea5d6",
"$type": "color",
"$description": "Used for dark accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#aea5d6",
"$type": "color",
"$description": "Used for dark accent stroke detail on an object or attention-drawing element.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{illustration.accent.stroke.color.strong}"
},
"name": "ILLUSTRATION_ACCENT_STROKE_COLOR_STRONG",
"attributes": {},
"path": [
"illustration",
"accent",
"stroke",
"color",
"strong"
]
}
}
},
"fill": {
"color": {
"subtle": {
"key": "{illustration.accent.fill.color.subtle}",
"$value": "#d0c5e2",
"$type": "color",
"$description": "Used to add depth to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#d0c5e2",
"$type": "color",
"$description": "Used to add depth to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.accent.fill.color.subtle}"
},
"name": "ILLUSTRATION_ACCENT_FILL_COLOR_SUBTLE",
"attributes": {},
"path": [
"illustration",
"accent",
"fill",
"color",
"subtle"
]
},
"strong": {
"key": "{illustration.accent.fill.color.strong}",
"$value": "#aea5d6",
"$type": "color",
"$description": "Used for an element requiring visual emphasis without competing with primary content or status indicators.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#aea5d6",
"$type": "color",
"$description": "Used for an element requiring visual emphasis without competing with primary content or status indicators.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.accent.fill.color.strong}"
},
"name": "ILLUSTRATION_ACCENT_FILL_COLOR_STRONG",
"attributes": {},
"path": [
"illustration",
"accent",
"fill",
"color",
"strong"
]
},
"orange": {
"key": "{illustration.accent.fill.color.orange}",
"$value": "#ff9d73",
"$type": "color",
"$description": "Used to add orange to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#ff9d73",
"$type": "color",
"$description": "Used to add orange to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.accent.fill.color.orange}"
},
"name": "ILLUSTRATION_ACCENT_FILL_COLOR_ORANGE",
"attributes": {},
"path": [
"illustration",
"accent",
"fill",
"color",
"orange"
]
},
"teal": {
"key": "{illustration.accent.fill.color.teal}",
"$value": "#6fdac9",
"$type": "color",
"$description": "Used to add teal to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#6fdac9",
"$type": "color",
"$description": "Used to add teal to a secondary element and supporting surface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.accent.fill.color.teal}"
},
"name": "ILLUSTRATION_ACCENT_FILL_COLOR_TEAL",
"attributes": {},
"path": [
"illustration",
"accent",
"fill",
"color",
"teal"
]
}
}
}
},
"base": {
"fill": {
"color": {
"key": "{illustration.base.fill.color}",
"$value": "#e7e4f2",
"$type": "color",
"$description": "Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#e7e4f2",
"$type": "color",
"$description": "Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.base.fill.color}"
},
"name": "ILLUSTRATION_BASE_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"base",
"fill",
"color"
]
}
}
},
"isometric": {
"stroke": {
"color": {
"default": {
"key": "{illustration.isometric.stroke.color.default}",
"$value": "#171321",
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail in isometric illustration.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#171321",
"$type": "color",
"$description": "Default stroke color to define shape and provide essential detail in isometric illustration.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{illustration.isometric.stroke.color.default}"
},
"name": "ILLUSTRATION_ISOMETRIC_STROKE_COLOR_DEFAULT",
"attributes": {},
"path": [
"illustration",
"isometric",
"stroke",
"color",
"default"
]
}
},
"width": {
"default": {
"key": "{illustration.isometric.stroke.width.default}",
"$value": "2",
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail in isometric illustration.",
"$extensions": {
"com.figma.scopes": [
"STROKE_FLOAT"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "2",
"$type": "dimension",
"$description": "Default stroke width to define shape and provide essential detail in isometric illustration.",
"$extensions": {
"com.figma.scopes": [
"STROKE_FLOAT"
]
},
"key": "{illustration.isometric.stroke.width.default}"
},
"name": "ILLUSTRATION_ISOMETRIC_STROKE_WIDTH_DEFAULT",
"attributes": {},
"path": [
"illustration",
"isometric",
"stroke",
"width",
"default"
]
}
}
},
"glyph": {
"top": {
"fill": {
"color": {
"key": "{illustration.isometric.glyph.top.fill.color}",
"$value": "#c5f4ec",
"$type": "color",
"$description": "Used for the top face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#c5f4ec",
"$type": "color",
"$description": "Used for the top face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.glyph.top.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_GLYPH_TOP_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"glyph",
"top",
"fill",
"color"
]
}
}
},
"front": {
"fill": {
"color": {
"key": "{illustration.isometric.glyph.front.fill.color}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the front face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#fff",
"$type": "color",
"$description": "Used for the front face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.glyph.front.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_GLYPH_FRONT_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"glyph",
"front",
"fill",
"color"
]
}
}
},
"side": {
"fill": {
"color": {
"key": "{illustration.isometric.glyph.side.fill.color}",
"$value": "#6fdac9",
"$type": "color",
"$description": "Used for the side face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#6fdac9",
"$type": "color",
"$description": "Used for the side face of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.glyph.side.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_GLYPH_SIDE_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"glyph",
"side",
"fill",
"color"
]
}
}
},
"shadow": {
"fill": {
"color": {
"key": "{illustration.isometric.glyph.shadow.fill.color}",
"$value": "#10b1b1",
"$type": "color",
"$description": "Used for the shadow of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#10b1b1",
"$type": "color",
"$description": "Used for the shadow of isometric text and number elements.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.glyph.shadow.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_GLYPH_SHADOW_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"glyph",
"shadow",
"fill",
"color"
]
}
}
}
},
"object": {
"top": {
"fill": {
"color": {
"key": "{illustration.isometric.object.top.fill.color}",
"$value": "#ff9d73",
"$type": "color",
"$description": "Used for the top face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#ff9d73",
"$type": "color",
"$description": "Used for the top face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.object.top.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_OBJECT_TOP_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"object",
"top",
"fill",
"color"
]
}
}
},
"front": {
"fill": {
"color": {
"key": "{illustration.isometric.object.front.fill.color}",
"$value": "#ffc2a8",
"$type": "color",
"$description": "Used for the front face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#ffc2a8",
"$type": "color",
"$description": "Used for the front face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.object.front.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_OBJECT_FRONT_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"object",
"front",
"fill",
"color"
]
}
}
},
"side": {
"fill": {
"color": {
"key": "{illustration.isometric.object.side.fill.color}",
"$value": "#ff7b42",
"$type": "color",
"$description": "Used for the side face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#ff7b42",
"$type": "color",
"$description": "Used for the side face of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.object.side.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_OBJECT_SIDE_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"object",
"side",
"fill",
"color"
]
}
}
},
"highlight": {
"fill": {
"color": {
"key": "{illustration.isometric.object.highlight.fill.color}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the face of an isometric object or symbol that requires maximum distinction from other elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#fff",
"$type": "color",
"$description": "Used for the face of an isometric object or symbol that requires maximum distinction from other elements.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.object.highlight.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_OBJECT_HIGHLIGHT_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"object",
"highlight",
"fill",
"color"
]
}
}
},
"shadow": {
"fill": {
"color": {
"key": "{illustration.isometric.object.shadow.fill.color}",
"$value": "#e24329",
"$type": "color",
"$description": "Used for the shadow of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#e24329",
"$type": "color",
"$description": "Used for the shadow of an isometric object or symbol.",
"$extensions": {
"com.figma.scopes": [
"EFFECT_COLOR",
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.object.shadow.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_OBJECT_SHADOW_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"object",
"shadow",
"fill",
"color"
]
}
}
}
},
"accent": {
"top": {
"fill": {
"color": {
"key": "{illustration.isometric.accent.top.fill.color}",
"$value": "#45424d",
"$type": "color",
"$description": "Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#45424d",
"$type": "color",
"$description": "Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.accent.top.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_ACCENT_TOP_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"accent",
"top",
"fill",
"color"
]
}
}
},
"front": {
"fill": {
"color": {
"key": "{illustration.isometric.accent.front.fill.color}",
"$value": "#74717a",
"$type": "color",
"$description": "Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#74717a",
"$type": "color",
"$description": "Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.accent.front.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_ACCENT_FRONT_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"accent",
"front",
"fill",
"color"
]
}
}
},
"side": {
"fill": {
"color": {
"key": "{illustration.isometric.accent.side.fill.color}",
"$value": "#2b2838",
"$type": "color",
"$description": "Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#2b2838",
"$type": "color",
"$description": "Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.accent.side.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_ACCENT_SIDE_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"accent",
"side",
"fill",
"color"
]
}
}
}
},
"base": {
"top": {
"fill": {
"color": {
"key": "{illustration.isometric.base.top.fill.color}",
"$value": "#e7e4f2",
"$type": "color",
"$description": "Used for the top surface of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#e7e4f2",
"$type": "color",
"$description": "Used for the top surface of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.base.top.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_BASE_TOP_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"base",
"top",
"fill",
"color"
]
}
}
},
"front": {
"fill": {
"color": {
"key": "{illustration.isometric.base.front.fill.color}",
"$value": "#d5d0e8",
"$type": "color",
"$description": "Used for the front face of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#d5d0e8",
"$type": "color",
"$description": "Used for the front face of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.base.front.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_BASE_FRONT_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"base",
"front",
"fill",
"color"
]
}
}
},
"side": {
"fill": {
"color": {
"key": "{illustration.isometric.base.side.fill.color}",
"$value": "#aea5d6",
"$type": "color",
"$description": "Used for the side face of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/illustration.tokens.json",
"isSource": true,
"original": {
"$value": "#aea5d6",
"$type": "color",
"$description": "Used for the side face of an isometric base platform.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{illustration.isometric.base.side.fill.color}"
},
"name": "ILLUSTRATION_ISOMETRIC_BASE_SIDE_FILL_COLOR",
"attributes": {},
"path": [
"illustration",
"isometric",
"base",
"side",
"fill",
"color"
]
}
}
}
}
}
},
"label": {
"light": {
"text": {
"color": {
"key": "{label.light.text.color}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the label text color on a light background color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the label text color on a light background color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{label.light.text.color}"
},
"name": "LABEL_LIGHT_TEXT_COLOR",
"attributes": {},
"path": [
"label",
"light",
"text",
"color"
]
}
},
"button": {
"background": {
"color": {
"default": {
"key": "{label.light.button.background.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the label remove button background on a light background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the label remove button background on a light background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{label.light.button.background.color.default}"
},
"name": "LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"label",
"light",
"button",
"background",
"color",
"default"
]
},
"hover": {
"key": "{label.light.button.background.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the label remove button background on a light background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the label remove button background on a light background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{label.light.button.background.color.hover}"
},
"name": "LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"label",
"light",
"button",
"background",
"color",
"hover"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{label.light.button.icon.color.default}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the label remove button icon on a light background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the label remove button icon on a light background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{label.light.button.icon.color.default}"
},
"name": "LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"label",
"light",
"button",
"icon",
"color",
"default"
]
}
}
}
}
},
"dark": {
"text": {
"color": {
"key": "{label.dark.text.color}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the label text color on a dark background color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the label text color on a dark background color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{label.dark.text.color}"
},
"name": "LABEL_DARK_TEXT_COLOR",
"attributes": {},
"path": [
"label",
"dark",
"text",
"color"
]
}
},
"button": {
"background": {
"color": {
"default": {
"key": "{label.dark.button.background.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the label remove button background on a dark background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the label remove button background on a dark background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{label.dark.button.background.color.default}"
},
"name": "LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"label",
"dark",
"button",
"background",
"color",
"default"
]
},
"hover": {
"key": "{label.dark.button.background.color.hover}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the label remove button background on a dark background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the label remove button background on a dark background color in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{label.dark.button.background.color.hover}"
},
"name": "LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"label",
"dark",
"button",
"background",
"color",
"hover"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{label.dark.button.icon.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the label remove button icon on a dark background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the label remove button icon on a dark background color in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{label.dark.button.icon.color.default}"
},
"name": "LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"label",
"dark",
"button",
"icon",
"color",
"default"
]
}
}
}
}
},
"scoped": {
"text": {
"color": {
"key": "{label.scoped.text.color}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the scoped label text color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the scoped label text color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{label.scoped.text.color}"
},
"name": "LABEL_SCOPED_TEXT_COLOR",
"attributes": {},
"path": [
"label",
"scoped",
"text",
"color"
]
}
},
"button": {
"background": {
"color": {
"hover": {
"key": "{label.scoped.button.background.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the scoped label remove button background in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the scoped label remove button background in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{label.scoped.button.background.color.hover}"
},
"name": "LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"label",
"scoped",
"button",
"background",
"color",
"hover"
]
}
}
},
"icon": {
"color": {
"default": {
"key": "{label.scoped.button.icon.color.default}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the scoped label remove button icon in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the scoped label remove button icon in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{label.scoped.button.icon.color.default}"
},
"name": "LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"label",
"scoped",
"button",
"icon",
"color",
"default"
]
},
"hover": {
"key": "{label.scoped.button.icon.color.hover}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the scoped label remove button icon in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/label.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the scoped label remove button icon in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{label.scoped.button.icon.color.hover}"
},
"name": "LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER",
"attributes": {},
"path": [
"label",
"scoped",
"button",
"icon",
"color",
"hover"
]
}
}
}
}
}
},
"link": {
"mention": {
"text": {
"color": {
"default": {
"key": "{link.mention.text.color.default}",
"$value": "#284779",
"$type": "color",
"$description": "Used for the mention link text color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/link.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.800}",
"$type": "color",
"$description": "Used for the mention link text color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{link.mention.text.color.default}"
},
"name": "LINK_MENTION_TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"link",
"mention",
"text",
"color",
"default"
]
},
"current": {
"key": "{link.mention.text.color.current}",
"$value": "#693c14",
"$type": "color",
"$description": "Used for the mention link text color when referencing the current user.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/link.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.800}",
"$type": "color",
"$description": "Used for the mention link text color when referencing the current user.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{link.mention.text.color.current}"
},
"name": "LINK_MENTION_TEXT_COLOR_CURRENT",
"attributes": {},
"path": [
"link",
"mention",
"text",
"color",
"current"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{link.mention.background.color.default}",
"$value": "#cbe2f9",
"$type": "color",
"$description": "Used for the mention link default background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/link.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.100}",
"$type": "color",
"$description": "Used for the mention link default background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{link.mention.background.color.default}"
},
"name": "LINK_MENTION_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"link",
"mention",
"background",
"color",
"default"
]
},
"current": {
"key": "{link.mention.background.color.current}",
"$value": "#f5d9a8",
"$type": "color",
"$description": "Used for the mention link background when referencing the current user.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/link.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.100}",
"$type": "color",
"$description": "Used for the mention link background when referencing the current user.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{link.mention.background.color.current}"
},
"name": "LINK_MENTION_BACKGROUND_COLOR_CURRENT",
"attributes": {},
"path": [
"link",
"mention",
"background",
"color",
"current"
]
}
}
}
}
},
"modal": {
"border": {
"radius": {
"key": "{modal.border.radius}",
"$value": "1rem",
"$type": "dimension",
"$description": "Used for modal border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/modal.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.2xl}",
"$type": "dimension",
"$description": "Used for modal border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{modal.border.radius}"
},
"name": "MODAL_BORDER_RADIUS",
"attributes": {},
"path": [
"modal",
"border",
"radius"
]
}
}
},
"nav": {
"item": {
"border": {
"radius": {
"key": "{nav.item.border.radius}",
"$value": "0.5rem",
"$type": "dimension",
"$description": "Used for the border radius of a navigation item",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{action.border.radius}",
"$type": "dimension",
"$description": "Used for the border radius of a navigation item",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{nav.item.border.radius}"
},
"name": "NAV_ITEM_BORDER_RADIUS",
"attributes": {},
"path": [
"nav",
"item",
"border",
"radius"
]
}
},
"font": {
"size": {
"key": "{nav.item.font.size}",
"$value": "0.875rem",
"$type": "dimension",
"$description": "Used for the font size of a navigation item",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{font.size.300}",
"$type": "dimension",
"$description": "Used for the font size of a navigation item",
"$extensions": {
"com.figma.scopes": [
"FONT_SIZE"
]
},
"key": "{nav.item.font.size}"
},
"name": "NAV_ITEM_FONT_SIZE",
"attributes": {},
"path": [
"nav",
"item",
"font",
"size"
]
},
"weight": {
"key": "{nav.item.font.weight}",
"$value": 425,
"$type": "fontWeight",
"$description": "Used for the font weight of a navigation item",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": 425,
"$type": "fontWeight",
"$description": "Used for the font weight of a navigation item",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"key": "{nav.item.font.weight}"
},
"name": "NAV_ITEM_FONT_WEIGHT",
"attributes": {},
"path": [
"nav",
"item",
"font",
"weight"
]
}
},
"foreground": {
"color": {
"default": {
"key": "{nav.item.foreground.color.default}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{nav.item.foreground.color.default}"
},
"name": "NAV_ITEM_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"nav",
"item",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{nav.item.foreground.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{nav.item.foreground.color.hover}"
},
"name": "NAV_ITEM_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"nav",
"item",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{nav.item.foreground.color.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{nav.item.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{nav.item.foreground.color.focus}"
},
"name": "NAV_ITEM_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"nav",
"item",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{nav.item.foreground.color.active}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{nav.item.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a default navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{nav.item.foreground.color.active}"
},
"name": "NAV_ITEM_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"nav",
"item",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{nav.item.background.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the background of a default navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the background of a default navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{nav.item.background.color.default}"
},
"name": "NAV_ITEM_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"nav",
"item",
"background",
"color",
"default"
]
},
"hover": {
"key": "{nav.item.background.color.hover}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a default navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the background of a default navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{nav.item.background.color.hover}"
},
"name": "NAV_ITEM_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"nav",
"item",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{nav.item.background.color.focus}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a default navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{nav.item.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a default navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{nav.item.background.color.focus}"
},
"name": "NAV_ITEM_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"nav",
"item",
"background",
"color",
"focus"
]
},
"active": {
"key": "{nav.item.background.color.active}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the background of a default navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the background of a default navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{nav.item.background.color.active}"
},
"name": "NAV_ITEM_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"nav",
"item",
"background",
"color",
"active"
]
}
}
},
"selected": {
"font": {
"weight": {
"key": "{nav.item.selected.font.weight}",
"$value": 600,
"$type": "fontWeight",
"$description": "Used for the font weight of a selected navigation item.",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{font.weight.bold}",
"$type": "fontWeight",
"$description": "Used for the font weight of a selected navigation item.",
"$extensions": {
"com.figma.scopes": [
"FONT_WEIGHT"
]
},
"key": "{nav.item.selected.font.weight}"
},
"name": "NAV_ITEM_SELECTED_FONT_WEIGHT",
"attributes": {},
"path": [
"nav",
"item",
"selected",
"font",
"weight"
]
}
},
"foreground": {
"color": {
"default": {
"key": "{nav.item.selected.foreground.color.default}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{nav.item.selected.foreground.color.default}"
},
"name": "NAV_ITEM_SELECTED_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"nav",
"item",
"selected",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{nav.item.selected.foreground.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{nav.item.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{nav.item.selected.foreground.color.hover}"
},
"name": "NAV_ITEM_SELECTED_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"nav",
"item",
"selected",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{nav.item.selected.foreground.color.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{nav.item.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{nav.item.selected.foreground.color.focus}"
},
"name": "NAV_ITEM_SELECTED_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"nav",
"item",
"selected",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{nav.item.selected.foreground.color.active}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{nav.item.foreground.color.active}",
"$type": "color",
"$description": "Used for the foreground of a selected navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{nav.item.selected.foreground.color.active}"
},
"name": "NAV_ITEM_SELECTED_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"nav",
"item",
"selected",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{nav.item.selected.background.color.default}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{nav.item.selected.background.color.default}"
},
"name": "NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"nav",
"item",
"selected",
"background",
"color",
"default"
]
},
"hover": {
"key": "{nav.item.selected.background.color.hover}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{nav.item.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{nav.item.selected.background.color.hover}"
},
"name": "NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"nav",
"item",
"selected",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{nav.item.selected.background.color.focus}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{nav.item.background.color.focus}",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{nav.item.selected.background.color.focus}"
},
"name": "NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"nav",
"item",
"selected",
"background",
"color",
"focus"
]
},
"active": {
"key": "{nav.item.selected.background.color.active}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/nav.tokens.json",
"isSource": true,
"original": {
"$value": "{nav.item.background.color.active}",
"$type": "color",
"$description": "Used for the background of a selected navigation item in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{nav.item.selected.background.color.active}"
},
"name": "NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"nav",
"item",
"selected",
"background",
"color",
"active"
]
}
}
}
}
}
},
"progress-bar": {
"indicator": {
"color": {
"default": {
"key": "{progress-bar.indicator.color.default}",
"$value": "#1f75cb",
"$type": "color",
"$description": "Used for the indicator color for the primary progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/progress-bar.tokens.json",
"isSource": true,
"original": {
"$value": "{status.info.icon.color}",
"$type": "color",
"$description": "Used for the indicator color for the primary progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{progress-bar.indicator.color.default}"
},
"name": "PROGRESS_BAR_INDICATOR_COLOR_DEFAULT",
"attributes": {},
"path": [
"progress-bar",
"indicator",
"color",
"default"
]
},
"success": {
"key": "{progress-bar.indicator.color.success}",
"$value": "#108548",
"$type": "color",
"$description": "Used for the indicator color for the success progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/progress-bar.tokens.json",
"isSource": true,
"original": {
"$value": "{status.success.icon.color}",
"$type": "color",
"$description": "Used for the indicator color for the success progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{progress-bar.indicator.color.success}"
},
"name": "PROGRESS_BAR_INDICATOR_COLOR_SUCCESS",
"attributes": {},
"path": [
"progress-bar",
"indicator",
"color",
"success"
]
},
"warning": {
"key": "{progress-bar.indicator.color.warning}",
"$value": "#ab6100",
"$type": "color",
"$description": "Used for the indicator color for the warning progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/progress-bar.tokens.json",
"isSource": true,
"original": {
"$value": "{status.warning.icon.color}",
"$type": "color",
"$description": "Used for the indicator color for the warning progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{progress-bar.indicator.color.warning}"
},
"name": "PROGRESS_BAR_INDICATOR_COLOR_WARNING",
"attributes": {},
"path": [
"progress-bar",
"indicator",
"color",
"warning"
]
},
"danger": {
"key": "{progress-bar.indicator.color.danger}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used for the indicator color for the danger progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/progress-bar.tokens.json",
"isSource": true,
"original": {
"$value": "{status.danger.icon.color}",
"$type": "color",
"$description": "Used for the indicator color for the danger progress-bar variant.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{progress-bar.indicator.color.danger}"
},
"name": "PROGRESS_BAR_INDICATOR_COLOR_DANGER",
"attributes": {},
"path": [
"progress-bar",
"indicator",
"color",
"danger"
]
}
}
},
"track": {
"color": {
"key": "{progress-bar.track.color}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the track color for all progress-bar variants.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/progress-bar.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the track color for all progress-bar variants.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{progress-bar.track.color}"
},
"name": "PROGRESS_BAR_TRACK_COLOR",
"attributes": {},
"path": [
"progress-bar",
"track",
"color"
]
}
}
},
"skeleton-loader": {
"background": {
"color": {
"key": "{skeleton-loader.background.color}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the skeleton loader background color.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/skeleton-loader.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the skeleton loader background color.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{skeleton-loader.background.color}"
},
"name": "SKELETON_LOADER_BACKGROUND_COLOR",
"attributes": {},
"path": [
"skeleton-loader",
"background",
"color"
]
}
},
"shimmer": {
"color": {
"key": "{skeleton-loader.shimmer.color}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the animated shimmer effect in a skeleton loader.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/skeleton-loader.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the animated shimmer effect in a skeleton loader.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{skeleton-loader.shimmer.color}"
},
"name": "SKELETON_LOADER_SHIMMER_COLOR",
"attributes": {},
"path": [
"skeleton-loader",
"shimmer",
"color"
]
}
}
},
"spinner": {
"track": {
"color": {
"default": {
"key": "{spinner.track.color.default}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the static track (background) of a loading spinner.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/spinner.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the static track (background) of a loading spinner.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{spinner.track.color.default}"
},
"name": "SPINNER_TRACK_COLOR_DEFAULT",
"attributes": {},
"path": [
"spinner",
"track",
"color",
"default"
]
},
"light": {
"key": "{spinner.track.color.light}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the static track (background) of a loading spinner on a dark background.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/spinner.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the static track (background) of a loading spinner on a dark background.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{spinner.track.color.light}"
},
"name": "SPINNER_TRACK_COLOR_LIGHT",
"attributes": {},
"path": [
"spinner",
"track",
"color",
"light"
]
}
}
},
"segment": {
"color": {
"default": {
"key": "{spinner.segment.color.default}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the animated segment of a loading spinner.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/spinner.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the animated segment of a loading spinner.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{spinner.segment.color.default}"
},
"name": "SPINNER_SEGMENT_COLOR_DEFAULT",
"attributes": {},
"path": [
"spinner",
"segment",
"color",
"default"
]
},
"light": {
"key": "{spinner.segment.color.light}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the animated segment of a loading spinner on a dark background.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/spinner.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the animated segment of a loading spinner on a dark background.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{spinner.segment.color.light}"
},
"name": "SPINNER_SEGMENT_COLOR_LIGHT",
"attributes": {},
"path": [
"spinner",
"segment",
"color",
"light"
]
}
}
}
},
"table": {
"row": {
"background": {
"color": {
"hover": {
"key": "{table.row.background.color.hover}",
"$value": "#e9f3fc",
"$type": "color",
"$description": "Used for the background of a table row in hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/table.tokens.json",
"isSource": true,
"original": {
"$value": "{highlight.target.background.color}",
"$type": "color",
"$description": "Used for the background of a table row in hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{table.row.background.color.hover}"
},
"name": "TABLE_ROW_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"table",
"row",
"background",
"color",
"hover"
]
}
}
}
},
"sorting": {
"icon": {
"color": {
"key": "{table.sorting.icon.color}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the color of the sorting icons in the column headers.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/table.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.heading}",
"$type": "color",
"$description": "Used for the color of the sorting icons in the column headers.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{table.sorting.icon.color}"
},
"name": "TABLE_SORTING_ICON_COLOR",
"attributes": {},
"path": [
"table",
"sorting",
"icon",
"color"
]
}
}
}
},
"tab": {
"selected": {
"indicator": {
"color": {
"default": {
"key": "{tab.selected.indicator.color.default}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the selected indicator of a tab.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/tabs.tokens.json",
"isSource": true,
"original": {
"$value": "{action.selected.border.color.active}",
"$type": "color",
"$description": "Used for the selected indicator of a tab.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{tab.selected.indicator.color.default}"
},
"name": "TAB_SELECTED_INDICATOR_COLOR_DEFAULT",
"attributes": {},
"path": [
"tab",
"selected",
"indicator",
"color",
"default"
]
}
}
}
}
},
"toggle": {
"switch": {
"track": {
"color": {
"unchecked": {
"default": {
"key": "{toggle.switch.track.color.unchecked.default}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{control.border.color.default}",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.track.color.unchecked.default}"
},
"name": "TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"track",
"color",
"unchecked",
"default"
]
},
"hover": {
"key": "{toggle.switch.track.color.unchecked.hover}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{toggle.switch.track.color.unchecked.default}",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.track.color.unchecked.hover}"
},
"name": "TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"track",
"color",
"unchecked",
"hover"
]
},
"focus": {
"key": "{toggle.switch.track.color.unchecked.focus}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{toggle.switch.track.color.unchecked.hover}",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.track.color.unchecked.focus}"
},
"name": "TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"track",
"color",
"unchecked",
"focus"
]
},
"active": {
"key": "{toggle.switch.track.color.unchecked.active}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{toggle.switch.track.color.unchecked.focus}",
"$type": "color",
"$description": "Used for the track color of an unchecked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.track.color.unchecked.active}"
},
"name": "TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"track",
"color",
"unchecked",
"active"
]
}
},
"checked": {
"default": {
"key": "{toggle.switch.track.color.checked.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.track.color.checked.default}"
},
"name": "TOGGLE_SWITCH_TRACK_COLOR_CHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"track",
"color",
"checked",
"default"
]
},
"hover": {
"key": "{toggle.switch.track.color.checked.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.track.color.checked.hover}"
},
"name": "TOGGLE_SWITCH_TRACK_COLOR_CHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"track",
"color",
"checked",
"hover"
]
},
"focus": {
"key": "{toggle.switch.track.color.checked.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{toggle.switch.track.color.checked.hover}",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.track.color.checked.focus}"
},
"name": "TOGGLE_SWITCH_TRACK_COLOR_CHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"track",
"color",
"checked",
"focus"
]
},
"active": {
"key": "{toggle.switch.track.color.checked.active}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.1000}",
"$type": "color",
"$description": "Used for the track color of a checked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.track.color.checked.active}"
},
"name": "TOGGLE_SWITCH_TRACK_COLOR_CHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"track",
"color",
"checked",
"active"
]
}
}
}
},
"background": {
"color": {
"unchecked": {
"default": {
"key": "{toggle.switch.background.color.unchecked.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{control.indicator.color.selected}",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.background.color.unchecked.default}"
},
"name": "TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"background",
"color",
"unchecked",
"default"
]
},
"hover": {
"key": "{toggle.switch.background.color.unchecked.hover}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{toggle.switch.background.color.unchecked.default}",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.background.color.unchecked.hover}"
},
"name": "TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"background",
"color",
"unchecked",
"hover"
]
},
"focus": {
"key": "{toggle.switch.background.color.unchecked.focus}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{toggle.switch.background.color.unchecked.default}",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.background.color.unchecked.focus}"
},
"name": "TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"background",
"color",
"unchecked",
"focus"
]
},
"active": {
"key": "{toggle.switch.background.color.unchecked.active}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{toggle.switch.background.color.unchecked.default}",
"$type": "color",
"$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.background.color.unchecked.active}"
},
"name": "TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"background",
"color",
"unchecked",
"active"
]
}
},
"checked": {
"default": {
"key": "{toggle.switch.background.color.checked.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.foreground.color.default}",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.background.color.checked.default}"
},
"name": "TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"background",
"color",
"checked",
"default"
]
},
"hover": {
"key": "{toggle.switch.background.color.checked.hover}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.foreground.color.hover}",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.background.color.checked.hover}"
},
"name": "TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"background",
"color",
"checked",
"hover"
]
},
"focus": {
"key": "{toggle.switch.background.color.checked.focus}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.foreground.color.focus}",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.background.color.checked.focus}"
},
"name": "TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"background",
"color",
"checked",
"focus"
]
},
"active": {
"key": "{toggle.switch.background.color.checked.active}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.foreground.color.active}",
"$type": "color",
"$description": "Used for the background color of the checked toggle switch thumb in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.background.color.checked.active}"
},
"name": "TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"background",
"color",
"checked",
"active"
]
}
},
"disabled": {
"key": "{toggle.switch.background.color.disabled}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the background color of the toggle switch thumb in the disabled state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.disabled.foreground.color}",
"$type": "color",
"$description": "Used for the background color of the toggle switch thumb in the disabled state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"FRAME_FILL"
]
},
"key": "{toggle.switch.background.color.disabled}"
},
"name": "TOGGLE_SWITCH_BACKGROUND_COLOR_DISABLED",
"attributes": {},
"path": [
"toggle",
"switch",
"background",
"color",
"disabled"
]
}
}
},
"icon": {
"color": {
"unchecked": {
"default": {
"key": "{toggle.switch.icon.color.unchecked.default}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.background.color.default}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{toggle.switch.icon.color.unchecked.default}"
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"default"
]
},
"hover": {
"key": "{toggle.switch.icon.color.unchecked.hover}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{toggle.switch.icon.color.unchecked.hover}"
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"hover"
]
},
"focus": {
"key": "{toggle.switch.icon.color.unchecked.focus}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.background.color.focus}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{toggle.switch.icon.color.unchecked.focus}"
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"focus"
]
},
"active": {
"key": "{toggle.switch.icon.color.unchecked.active}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.background.color.active}",
"$type": "color",
"$description": "Used for the icon color of an unchecked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{toggle.switch.icon.color.unchecked.active}"
},
"name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"unchecked",
"active"
]
}
},
"checked": {
"default": {
"key": "{toggle.switch.icon.color.checked.default}",
"$value": "#1f75cb",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.background.color.default}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{toggle.switch.icon.color.checked.default}"
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"default"
]
},
"hover": {
"key": "{toggle.switch.icon.color.checked.hover}",
"$value": "#2f68b4",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.background.color.hover}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{toggle.switch.icon.color.checked.hover}"
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"hover"
]
},
"focus": {
"key": "{toggle.switch.icon.color.checked.focus}",
"$value": "#2f68b4",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.background.color.focus}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{toggle.switch.icon.color.checked.focus}"
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"focus"
]
},
"active": {
"key": "{toggle.switch.icon.color.checked.active}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.background.color.active}",
"$type": "color",
"$description": "Used for the icon color of a checked toggle switch in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{toggle.switch.icon.color.checked.active}"
},
"name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"checked",
"active"
]
}
},
"disabled": {
"key": "{toggle.switch.icon.color.disabled}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the icon color of a disabled toggle switch.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/toggle.tokens.json",
"isSource": true,
"original": {
"$value": "{action.disabled.background.color}",
"$type": "color",
"$description": "Used for the icon color of a disabled toggle switch.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL"
]
},
"key": "{toggle.switch.icon.color.disabled}"
},
"name": "TOGGLE_SWITCH_ICON_COLOR_DISABLED",
"attributes": {},
"path": [
"toggle",
"switch",
"icon",
"color",
"disabled"
]
}
}
}
}
},
"token-selector": {
"token-container": {
"token": {
"background": {
"color": {
"focus": {
"key": "{token-selector.token-container.token.background.color.focus}",
"$value": "#a4a3a8",
"$type": "color",
"$description": "Used for the background color of a token in a token-selector when it's token-container is in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/token-selector.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.300}",
"$type": "color",
"$description": "Used for the background color of a token in a token-selector when it's token-container is in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{token-selector.token-container.token.background.color.focus}"
},
"name": "TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"token-selector",
"token-container",
"token",
"background",
"color",
"focus"
]
}
}
}
}
}
},
"token": {
"border": {
"radius": {
"key": "{token.border.radius}",
"$value": "0.25rem",
"$type": "dimension",
"$description": "Used for token border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/contextual/token.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.default}",
"$type": "dimension",
"$description": "Used for token border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{token.border.radius}"
},
"name": "TOKEN_BORDER_RADIUS",
"attributes": {},
"path": [
"token",
"border",
"radius"
]
}
},
"foreground": {
"color": {
"key": "{token.foreground.color}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the token foreground color.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/token.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.default}",
"$type": "color",
"$description": "Used for the token foreground color.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{token.foreground.color}"
},
"name": "TOKEN_FOREGROUND_COLOR",
"attributes": {},
"path": [
"token",
"foreground",
"color"
]
}
},
"background": {
"color": {
"key": "{token.background.color}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the token background color.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/contextual/token.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the token background color.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{token.background.color}"
},
"name": "TOKEN_BACKGROUND_COLOR",
"attributes": {},
"path": [
"token",
"background",
"color"
]
}
}
},
"tooltip": {
"text": {
"color": {
"subtle": {
"key": "{tooltip.text.color.subtle}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/contextual/tooltip.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{tooltip.text.color.subtle}"
},
"name": "TOOLTIP_TEXT_COLOR_SUBTLE",
"attributes": {},
"path": [
"tooltip",
"text",
"color",
"subtle"
]
}
}
}
},
"data-viz": {
"green": {
"50": {
"key": "{data-viz.green.50}",
"$value": "#ddfab7",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#ddfab7",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.50}"
},
"name": "A_VIZ_GREEN_50",
"attributes": {},
"path": [
"data-viz",
"green",
"50"
]
},
"100": {
"key": "{data-viz.green.100}",
"$value": "#c6ed94",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#c6ed94",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.100}"
},
"name": "A_VIZ_GREEN_100",
"attributes": {},
"path": [
"data-viz",
"green",
"100"
]
},
"200": {
"key": "{data-viz.green.200}",
"$value": "#b0d97b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#b0d97b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.200}"
},
"name": "A_VIZ_GREEN_200",
"attributes": {},
"path": [
"data-viz",
"green",
"200"
]
},
"300": {
"key": "{data-viz.green.300}",
"$value": "#94c25e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#94c25e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.300}"
},
"name": "A_VIZ_GREEN_300",
"attributes": {},
"path": [
"data-viz",
"green",
"300"
]
},
"400": {
"key": "{data-viz.green.400}",
"$value": "#81ac41",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#81ac41",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.400}"
},
"name": "A_VIZ_GREEN_400",
"attributes": {},
"path": [
"data-viz",
"green",
"400"
]
},
"500": {
"key": "{data-viz.green.500}",
"$value": "#619025",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#619025",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.500}"
},
"name": "A_VIZ_GREEN_500",
"attributes": {},
"path": [
"data-viz",
"green",
"500"
]
},
"600": {
"key": "{data-viz.green.600}",
"$value": "#4e7f0e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#4e7f0e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.600}"
},
"name": "A_VIZ_GREEN_600",
"attributes": {},
"path": [
"data-viz",
"green",
"600"
]
},
"700": {
"key": "{data-viz.green.700}",
"$value": "#366800",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#366800",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.700}"
},
"name": "A_VIZ_GREEN_700",
"attributes": {},
"path": [
"data-viz",
"green",
"700"
]
},
"800": {
"key": "{data-viz.green.800}",
"$value": "#275600",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#275600",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.800}"
},
"name": "A_VIZ_GREEN_800",
"attributes": {},
"path": [
"data-viz",
"green",
"800"
]
},
"900": {
"key": "{data-viz.green.900}",
"$value": "#1a4500",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#1a4500",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.900}"
},
"name": "A_VIZ_GREEN_900",
"attributes": {},
"path": [
"data-viz",
"green",
"900"
]
},
"950": {
"key": "{data-viz.green.950}",
"$value": "#133a03",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#133a03",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.green.950}"
},
"name": "A_VIZ_GREEN_950",
"attributes": {},
"path": [
"data-viz",
"green",
"950"
]
}
},
"aqua": {
"50": {
"key": "{data-viz.aqua.50}",
"$value": "#b5fefd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#b5fefd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.50}"
},
"name": "A_VIZ_AQUA_50",
"attributes": {},
"path": [
"data-viz",
"aqua",
"50"
]
},
"100": {
"key": "{data-viz.aqua.100}",
"$value": "#93f2ef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#93f2ef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.100}"
},
"name": "A_VIZ_AQUA_100",
"attributes": {},
"path": [
"data-viz",
"aqua",
"100"
]
},
"200": {
"key": "{data-viz.aqua.200}",
"$value": "#5edee3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#5edee3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.200}"
},
"name": "A_VIZ_AQUA_200",
"attributes": {},
"path": [
"data-viz",
"aqua",
"200"
]
},
"300": {
"key": "{data-viz.aqua.300}",
"$value": "#32c5d2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#32c5d2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.300}"
},
"name": "A_VIZ_AQUA_300",
"attributes": {},
"path": [
"data-viz",
"aqua",
"300"
]
},
"400": {
"key": "{data-viz.aqua.400}",
"$value": "#00acc4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#00acc4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.400}"
},
"name": "A_VIZ_AQUA_400",
"attributes": {},
"path": [
"data-viz",
"aqua",
"400"
]
},
"500": {
"key": "{data-viz.aqua.500}",
"$value": "#0090b1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#0090b1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.500}"
},
"name": "A_VIZ_AQUA_500",
"attributes": {},
"path": [
"data-viz",
"aqua",
"500"
]
},
"600": {
"key": "{data-viz.aqua.600}",
"$value": "#007b9b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#007b9b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.600}"
},
"name": "A_VIZ_AQUA_600",
"attributes": {},
"path": [
"data-viz",
"aqua",
"600"
]
},
"700": {
"key": "{data-viz.aqua.700}",
"$value": "#006381",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#006381",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.700}"
},
"name": "A_VIZ_AQUA_700",
"attributes": {},
"path": [
"data-viz",
"aqua",
"700"
]
},
"800": {
"key": "{data-viz.aqua.800}",
"$value": "#00516c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#00516c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.800}"
},
"name": "A_VIZ_AQUA_800",
"attributes": {},
"path": [
"data-viz",
"aqua",
"800"
]
},
"900": {
"key": "{data-viz.aqua.900}",
"$value": "#004059",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#004059",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.900}"
},
"name": "A_VIZ_AQUA_900",
"attributes": {},
"path": [
"data-viz",
"aqua",
"900"
]
},
"950": {
"key": "{data-viz.aqua.950}",
"$value": "#00344b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#00344b",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.aqua.950}"
},
"name": "A_VIZ_AQUA_950",
"attributes": {},
"path": [
"data-viz",
"aqua",
"950"
]
}
},
"blue": {
"50": {
"key": "{data-viz.blue.50}",
"$value": "#e9ebff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#e9ebff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.50}"
},
"name": "A_VIZ_BLUE_50",
"attributes": {},
"path": [
"data-viz",
"blue",
"50"
]
},
"100": {
"key": "{data-viz.blue.100}",
"$value": "#d2dcff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#d2dcff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.100}"
},
"name": "A_VIZ_BLUE_100",
"attributes": {},
"path": [
"data-viz",
"blue",
"100"
]
},
"200": {
"key": "{data-viz.blue.200}",
"$value": "#b7c6ff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#b7c6ff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.200}"
},
"name": "A_VIZ_BLUE_200",
"attributes": {},
"path": [
"data-viz",
"blue",
"200"
]
},
"300": {
"key": "{data-viz.blue.300}",
"$value": "#97acff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#97acff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.300}"
},
"name": "A_VIZ_BLUE_300",
"attributes": {},
"path": [
"data-viz",
"blue",
"300"
]
},
"400": {
"key": "{data-viz.blue.400}",
"$value": "#7992f5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#7992f5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.400}"
},
"name": "A_VIZ_BLUE_400",
"attributes": {},
"path": [
"data-viz",
"blue",
"400"
]
},
"500": {
"key": "{data-viz.blue.500}",
"$value": "#617ae2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#617ae2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.500}"
},
"name": "A_VIZ_BLUE_500",
"attributes": {},
"path": [
"data-viz",
"blue",
"500"
]
},
"600": {
"key": "{data-viz.blue.600}",
"$value": "#4e65cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#4e65cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.600}"
},
"name": "A_VIZ_BLUE_600",
"attributes": {},
"path": [
"data-viz",
"blue",
"600"
]
},
"700": {
"key": "{data-viz.blue.700}",
"$value": "#3f51ae",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#3f51ae",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.700}"
},
"name": "A_VIZ_BLUE_700",
"attributes": {},
"path": [
"data-viz",
"blue",
"700"
]
},
"800": {
"key": "{data-viz.blue.800}",
"$value": "#374291",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#374291",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.800}"
},
"name": "A_VIZ_BLUE_800",
"attributes": {},
"path": [
"data-viz",
"blue",
"800"
]
},
"900": {
"key": "{data-viz.blue.900}",
"$value": "#303470",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#303470",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.900}"
},
"name": "A_VIZ_BLUE_900",
"attributes": {},
"path": [
"data-viz",
"blue",
"900"
]
},
"950": {
"key": "{data-viz.blue.950}",
"$value": "#2a2b59",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#2a2b59",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.blue.950}"
},
"name": "A_VIZ_BLUE_950",
"attributes": {},
"path": [
"data-viz",
"blue",
"950"
]
}
},
"magenta": {
"50": {
"key": "{data-viz.magenta.50}",
"$value": "#ffe3eb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#ffe3eb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.50}"
},
"name": "A_VIZ_MAGENTA_50",
"attributes": {},
"path": [
"data-viz",
"magenta",
"50"
]
},
"100": {
"key": "{data-viz.magenta.100}",
"$value": "#ffccdb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#ffccdb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.100}"
},
"name": "A_VIZ_MAGENTA_100",
"attributes": {},
"path": [
"data-viz",
"magenta",
"100"
]
},
"200": {
"key": "{data-viz.magenta.200}",
"$value": "#fcacc5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#fcacc5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.200}"
},
"name": "A_VIZ_MAGENTA_200",
"attributes": {},
"path": [
"data-viz",
"magenta",
"200"
]
},
"300": {
"key": "{data-viz.magenta.300}",
"$value": "#f88aaf",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#f88aaf",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.300}"
},
"name": "A_VIZ_MAGENTA_300",
"attributes": {},
"path": [
"data-viz",
"magenta",
"300"
]
},
"400": {
"key": "{data-viz.magenta.400}",
"$value": "#e86e9a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#e86e9a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.400}"
},
"name": "A_VIZ_MAGENTA_400",
"attributes": {},
"path": [
"data-viz",
"magenta",
"400"
]
},
"500": {
"key": "{data-viz.magenta.500}",
"$value": "#cf4d81",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#cf4d81",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.500}"
},
"name": "A_VIZ_MAGENTA_500",
"attributes": {},
"path": [
"data-viz",
"magenta",
"500"
]
},
"600": {
"key": "{data-viz.magenta.600}",
"$value": "#b93d71",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#b93d71",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.600}"
},
"name": "A_VIZ_MAGENTA_600",
"attributes": {},
"path": [
"data-viz",
"magenta",
"600"
]
},
"700": {
"key": "{data-viz.magenta.700}",
"$value": "#9a2e5d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#9a2e5d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.700}"
},
"name": "A_VIZ_MAGENTA_700",
"attributes": {},
"path": [
"data-viz",
"magenta",
"700"
]
},
"800": {
"key": "{data-viz.magenta.800}",
"$value": "#7c214f",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#7c214f",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.800}"
},
"name": "A_VIZ_MAGENTA_800",
"attributes": {},
"path": [
"data-viz",
"magenta",
"800"
]
},
"900": {
"key": "{data-viz.magenta.900}",
"$value": "#661e3a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#661e3a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.900}"
},
"name": "A_VIZ_MAGENTA_900",
"attributes": {},
"path": [
"data-viz",
"magenta",
"900"
]
},
"950": {
"key": "{data-viz.magenta.950}",
"$value": "#541d31",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#541d31",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.magenta.950}"
},
"name": "A_VIZ_MAGENTA_950",
"attributes": {},
"path": [
"data-viz",
"magenta",
"950"
]
}
},
"orange": {
"50": {
"key": "{data-viz.orange.50}",
"$value": "#fae8d1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#fae8d1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.50}"
},
"name": "A_VIZ_ORANGE_50",
"attributes": {},
"path": [
"data-viz",
"orange",
"50"
]
},
"100": {
"key": "{data-viz.orange.100}",
"$value": "#f5d6b3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#f5d6b3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.100}"
},
"name": "A_VIZ_ORANGE_100",
"attributes": {},
"path": [
"data-viz",
"orange",
"100"
]
},
"200": {
"key": "{data-viz.orange.200}",
"$value": "#eebd8c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#eebd8c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.200}"
},
"name": "A_VIZ_ORANGE_200",
"attributes": {},
"path": [
"data-viz",
"orange",
"200"
]
},
"300": {
"key": "{data-viz.orange.300}",
"$value": "#e99b60",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#e99b60",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.300}"
},
"name": "A_VIZ_ORANGE_300",
"attributes": {},
"path": [
"data-viz",
"orange",
"300"
]
},
"400": {
"key": "{data-viz.orange.400}",
"$value": "#e07e41",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#e07e41",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.400}"
},
"name": "A_VIZ_ORANGE_400",
"attributes": {},
"path": [
"data-viz",
"orange",
"400"
]
},
"500": {
"key": "{data-viz.orange.500}",
"$value": "#c95d2e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#c95d2e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.500}"
},
"name": "A_VIZ_ORANGE_500",
"attributes": {},
"path": [
"data-viz",
"orange",
"500"
]
},
"600": {
"key": "{data-viz.orange.600}",
"$value": "#b14f18",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#b14f18",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.600}"
},
"name": "A_VIZ_ORANGE_600",
"attributes": {},
"path": [
"data-viz",
"orange",
"600"
]
},
"700": {
"key": "{data-viz.orange.700}",
"$value": "#92430a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#92430a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.700}"
},
"name": "A_VIZ_ORANGE_700",
"attributes": {},
"path": [
"data-viz",
"orange",
"700"
]
},
"800": {
"key": "{data-viz.orange.800}",
"$value": "#6f3500",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#6f3500",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.800}"
},
"name": "A_VIZ_ORANGE_800",
"attributes": {},
"path": [
"data-viz",
"orange",
"800"
]
},
"900": {
"key": "{data-viz.orange.900}",
"$value": "#5e2f05",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#5e2f05",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.900}"
},
"name": "A_VIZ_ORANGE_900",
"attributes": {},
"path": [
"data-viz",
"orange",
"900"
]
},
"950": {
"key": "{data-viz.orange.950}",
"$value": "#4b2707",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.data_viz.tokens.json",
"isSource": true,
"original": {
"$value": "#4b2707",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{data-viz.orange.950}"
},
"name": "A_VIZ_ORANGE_950",
"attributes": {},
"path": [
"data-viz",
"orange",
"950"
]
}
}
},
"black": {
"key": "{black}",
"$value": "#050506",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.1000}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{black}"
},
"name": "CK",
"attributes": {},
"path": [
"black"
]
},
"white": {
"key": "{white}",
"$value": "#fff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{white}"
},
"name": "TE",
"attributes": {},
"path": [
"white"
]
},
"blue": {
"50": {
"key": "{blue.50}",
"$value": "#e9f3fc",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.50}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.50}"
},
"name": "E_50",
"attributes": {},
"path": [
"blue",
"50"
]
},
"100": {
"key": "{blue.100}",
"$value": "#cbe2f9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.100}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.100}"
},
"name": "E_100",
"attributes": {},
"path": [
"blue",
"100"
]
},
"200": {
"key": "{blue.200}",
"$value": "#9dc7f1",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.200}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.200}"
},
"name": "E_200",
"attributes": {},
"path": [
"blue",
"200"
]
},
"300": {
"key": "{blue.300}",
"$value": "#63a6e9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.300}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.300}"
},
"name": "E_300",
"attributes": {},
"path": [
"blue",
"300"
]
},
"400": {
"key": "{blue.400}",
"$value": "#428fdc",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.400}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.400}"
},
"name": "E_400",
"attributes": {},
"path": [
"blue",
"400"
]
},
"500": {
"key": "{blue.500}",
"$value": "#1f75cb",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.500}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.500}"
},
"name": "E_500",
"attributes": {},
"path": [
"blue",
"500"
]
},
"600": {
"key": "{blue.600}",
"$value": "#2f68b4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.600}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.600}"
},
"name": "E_600",
"attributes": {},
"path": [
"blue",
"600"
]
},
"700": {
"key": "{blue.700}",
"$value": "#2f5ca0",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.700}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.700}"
},
"name": "E_700",
"attributes": {},
"path": [
"blue",
"700"
]
},
"800": {
"key": "{blue.800}",
"$value": "#284779",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.800}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.800}"
},
"name": "E_800",
"attributes": {},
"path": [
"blue",
"800"
]
},
"900": {
"key": "{blue.900}",
"$value": "#213454",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.900}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.900}"
},
"name": "E_900",
"attributes": {},
"path": [
"blue",
"900"
]
},
"950": {
"key": "{blue.950}",
"$value": "#1d283e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.950}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{blue.950}"
},
"name": "E_950",
"attributes": {},
"path": [
"blue",
"950"
]
}
},
"gray": {
"10": {
"key": "{gray.10}",
"$value": "#fbfafd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.10}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.10}"
},
"name": "Y_10",
"attributes": {},
"path": [
"gray",
"10"
]
},
"50": {
"key": "{gray.50}",
"$value": "#ececef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.50}"
},
"name": "Y_50",
"attributes": {},
"path": [
"gray",
"50"
]
},
"100": {
"key": "{gray.100}",
"$value": "#dcdcde",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.100}"
},
"name": "Y_100",
"attributes": {},
"path": [
"gray",
"100"
]
},
"200": {
"key": "{gray.200}",
"$value": "#bfbfc3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.200}"
},
"name": "Y_200",
"attributes": {},
"path": [
"gray",
"200"
]
},
"300": {
"key": "{gray.300}",
"$value": "#a4a3a8",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.300}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.300}"
},
"name": "Y_300",
"attributes": {},
"path": [
"gray",
"300"
]
},
"400": {
"key": "{gray.400}",
"$value": "#89888d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.400}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.400}"
},
"name": "Y_400",
"attributes": {},
"path": [
"gray",
"400"
]
},
"500": {
"key": "{gray.500}",
"$value": "#737278",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.500}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.500}"
},
"name": "Y_500",
"attributes": {},
"path": [
"gray",
"500"
]
},
"600": {
"key": "{gray.600}",
"$value": "#626168",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.600}"
},
"name": "Y_600",
"attributes": {},
"path": [
"gray",
"600"
]
},
"700": {
"key": "{gray.700}",
"$value": "#4c4b51",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.700}"
},
"name": "Y_700",
"attributes": {},
"path": [
"gray",
"700"
]
},
"800": {
"key": "{gray.800}",
"$value": "#3a383f",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.800}"
},
"name": "Y_800",
"attributes": {},
"path": [
"gray",
"800"
]
},
"900": {
"key": "{gray.900}",
"$value": "#28272d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.900}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.900}"
},
"name": "Y_900",
"attributes": {},
"path": [
"gray",
"900"
]
},
"950": {
"key": "{gray.950}",
"$value": "#18171d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{gray.950}"
},
"name": "Y_950",
"attributes": {},
"path": [
"gray",
"950"
]
}
},
"green": {
"50": {
"key": "{green.50}",
"$value": "#ecf4ee",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.50}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.50}"
},
"name": "EN_50",
"attributes": {},
"path": [
"green",
"50"
]
},
"100": {
"key": "{green.100}",
"$value": "#c3e6cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.100}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.100}"
},
"name": "EN_100",
"attributes": {},
"path": [
"green",
"100"
]
},
"200": {
"key": "{green.200}",
"$value": "#91d4a8",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.200}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.200}"
},
"name": "EN_200",
"attributes": {},
"path": [
"green",
"200"
]
},
"300": {
"key": "{green.300}",
"$value": "#52b87a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.300}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.300}"
},
"name": "EN_300",
"attributes": {},
"path": [
"green",
"300"
]
},
"400": {
"key": "{green.400}",
"$value": "#2da160",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.400}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.400}"
},
"name": "EN_400",
"attributes": {},
"path": [
"green",
"400"
]
},
"500": {
"key": "{green.500}",
"$value": "#108548",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.500}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.500}"
},
"name": "EN_500",
"attributes": {},
"path": [
"green",
"500"
]
},
"600": {
"key": "{green.600}",
"$value": "#2f7549",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.600}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.600}"
},
"name": "EN_600",
"attributes": {},
"path": [
"green",
"600"
]
},
"700": {
"key": "{green.700}",
"$value": "#306440",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.700}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.700}"
},
"name": "EN_700",
"attributes": {},
"path": [
"green",
"700"
]
},
"800": {
"key": "{green.800}",
"$value": "#225131",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.800}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.800}"
},
"name": "EN_800",
"attributes": {},
"path": [
"green",
"800"
]
},
"900": {
"key": "{green.900}",
"$value": "#1e3e28",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.900}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.900}"
},
"name": "EN_900",
"attributes": {},
"path": [
"green",
"900"
]
},
"950": {
"key": "{green.950}",
"$value": "#17291c",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.950}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{green.950}"
},
"name": "EN_950",
"attributes": {},
"path": [
"green",
"950"
]
}
},
"orange": {
"50": {
"key": "{orange.50}",
"$value": "#fdf1dd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.50}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.50}"
},
"name": "NGE_50",
"attributes": {},
"path": [
"orange",
"50"
]
},
"100": {
"key": "{orange.100}",
"$value": "#f5d9a8",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.100}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.100}"
},
"name": "NGE_100",
"attributes": {},
"path": [
"orange",
"100"
]
},
"200": {
"key": "{orange.200}",
"$value": "#e9be74",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.200}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.200}"
},
"name": "NGE_200",
"attributes": {},
"path": [
"orange",
"200"
]
},
"300": {
"key": "{orange.300}",
"$value": "#d99530",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.300}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.300}"
},
"name": "NGE_300",
"attributes": {},
"path": [
"orange",
"300"
]
},
"400": {
"key": "{orange.400}",
"$value": "#c17d10",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.400}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.400}"
},
"name": "NGE_400",
"attributes": {},
"path": [
"orange",
"400"
]
},
"500": {
"key": "{orange.500}",
"$value": "#ab6100",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.500}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.500}"
},
"name": "NGE_500",
"attributes": {},
"path": [
"orange",
"500"
]
},
"600": {
"key": "{orange.600}",
"$value": "#995715",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.600}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.600}"
},
"name": "NGE_600",
"attributes": {},
"path": [
"orange",
"600"
]
},
"700": {
"key": "{orange.700}",
"$value": "#894b16",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.700}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.700}"
},
"name": "NGE_700",
"attributes": {},
"path": [
"orange",
"700"
]
},
"800": {
"key": "{orange.800}",
"$value": "#693c14",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.800}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.800}"
},
"name": "NGE_800",
"attributes": {},
"path": [
"orange",
"800"
]
},
"900": {
"key": "{orange.900}",
"$value": "#532e16",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.900}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.900}"
},
"name": "NGE_900",
"attributes": {},
"path": [
"orange",
"900"
]
},
"950": {
"key": "{orange.950}",
"$value": "#382315",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.950}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{orange.950}"
},
"name": "NGE_950",
"attributes": {},
"path": [
"orange",
"950"
]
}
},
"purple": {
"50": {
"key": "{purple.50}",
"$value": "#f4f0ff",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.50}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.50}"
},
"name": "PLE_50",
"attributes": {},
"path": [
"purple",
"50"
]
},
"100": {
"key": "{purple.100}",
"$value": "#e1d8f9",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.100}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.100}"
},
"name": "PLE_100",
"attributes": {},
"path": [
"purple",
"100"
]
},
"200": {
"key": "{purple.200}",
"$value": "#cbbbf2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.200}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.200}"
},
"name": "PLE_200",
"attributes": {},
"path": [
"purple",
"200"
]
},
"300": {
"key": "{purple.300}",
"$value": "#ac93e6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.300}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.300}"
},
"name": "PLE_300",
"attributes": {},
"path": [
"purple",
"300"
]
},
"400": {
"key": "{purple.400}",
"$value": "#9475db",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.400}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.400}"
},
"name": "PLE_400",
"attributes": {},
"path": [
"purple",
"400"
]
},
"500": {
"key": "{purple.500}",
"$value": "#7b58cf",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.500}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.500}"
},
"name": "PLE_500",
"attributes": {},
"path": [
"purple",
"500"
]
},
"600": {
"key": "{purple.600}",
"$value": "#6a4fb4",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.600}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.600}"
},
"name": "PLE_600",
"attributes": {},
"path": [
"purple",
"600"
]
},
"700": {
"key": "{purple.700}",
"$value": "#5c47a6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.700}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.700}"
},
"name": "PLE_700",
"attributes": {},
"path": [
"purple",
"700"
]
},
"800": {
"key": "{purple.800}",
"$value": "#493c83",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.800}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.800}"
},
"name": "PLE_800",
"attributes": {},
"path": [
"purple",
"800"
]
},
"900": {
"key": "{purple.900}",
"$value": "#342d59",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.900}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.900}"
},
"name": "PLE_900",
"attributes": {},
"path": [
"purple",
"900"
]
},
"950": {
"key": "{purple.950}",
"$value": "#27243e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.950}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{purple.950}"
},
"name": "PLE_950",
"attributes": {},
"path": [
"purple",
"950"
]
}
},
"red": {
"50": {
"key": "{red.50}",
"$value": "#fcf1ef",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.50}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.50}"
},
"name": "_50",
"attributes": {},
"path": [
"red",
"50"
]
},
"100": {
"key": "{red.100}",
"$value": "#fdd4cd",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.100}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.100}"
},
"name": "_100",
"attributes": {},
"path": [
"red",
"100"
]
},
"200": {
"key": "{red.200}",
"$value": "#fcb5aa",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.200}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.200}"
},
"name": "_200",
"attributes": {},
"path": [
"red",
"200"
]
},
"300": {
"key": "{red.300}",
"$value": "#f6806d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.300}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.300}"
},
"name": "_300",
"attributes": {},
"path": [
"red",
"300"
]
},
"400": {
"key": "{red.400}",
"$value": "#ec5941",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.400}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.400}"
},
"name": "_400",
"attributes": {},
"path": [
"red",
"400"
]
},
"500": {
"key": "{red.500}",
"$value": "#dd2b0e",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.500}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.500}"
},
"name": "_500",
"attributes": {},
"path": [
"red",
"500"
]
},
"600": {
"key": "{red.600}",
"$value": "#c02f12",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.600}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.600}"
},
"name": "_600",
"attributes": {},
"path": [
"red",
"600"
]
},
"700": {
"key": "{red.700}",
"$value": "#a32c12",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.700}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.700}"
},
"name": "_700",
"attributes": {},
"path": [
"red",
"700"
]
},
"800": {
"key": "{red.800}",
"$value": "#812713",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.800}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.800}"
},
"name": "_800",
"attributes": {},
"path": [
"red",
"800"
]
},
"900": {
"key": "{red.900}",
"$value": "#582014",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.900}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.900}"
},
"name": "_900",
"attributes": {},
"path": [
"red",
"900"
]
},
"950": {
"key": "{red.950}",
"$value": "#3e1a14",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.950}",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{red.950}"
},
"name": "_950",
"attributes": {},
"path": [
"red",
"950"
]
}
},
"brand": {
"charcoal": {
"key": "{brand.charcoal}",
"$value": "#171321",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-charcoal instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#171321",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-charcoal instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.charcoal}"
},
"name": "ND_CHARCOAL",
"attributes": {},
"path": [
"brand",
"charcoal"
]
},
"orange": {
"01": {
"key": "{brand.orange.01}",
"$value": "#fca326",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-orange.01p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#fca326",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-orange.01p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.orange.01}"
},
"name": "ND_ORANGE_01",
"attributes": {},
"path": [
"brand",
"orange",
"01"
]
},
"02": {
"key": "{brand.orange.02}",
"$value": "#fc6d26",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-orange.02p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#fc6d26",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-orange.02p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.orange.02}"
},
"name": "ND_ORANGE_02",
"attributes": {},
"path": [
"brand",
"orange",
"02"
]
},
"03": {
"key": "{brand.orange.03}",
"$value": "#e24329",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-orange.03p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#e24329",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-orange.03p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.orange.03}"
},
"name": "ND_ORANGE_03",
"attributes": {},
"path": [
"brand",
"orange",
"03"
]
}
},
"purple": {
"01": {
"key": "{brand.purple.01}",
"$value": "#a989f5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.purple.01p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#a989f5",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.purple.01p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.purple.01}"
},
"name": "ND_PURPLE_01",
"attributes": {},
"path": [
"brand",
"purple",
"01"
]
},
"02": {
"key": "{brand.purple.02}",
"$value": "#7759c2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.purple.02p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#7759c2",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.purple.02p instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.purple.02}"
},
"name": "ND_PURPLE_02",
"attributes": {},
"path": [
"brand",
"purple",
"02"
]
}
},
"gray": {
"01": {
"key": "{brand.gray.01}",
"$value": "#d1d0d3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.01 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#d1d0d3",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.01 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.gray.01}"
},
"name": "ND_GRAY_01",
"attributes": {},
"path": [
"brand",
"gray",
"01"
]
},
"02": {
"key": "{brand.gray.02}",
"$value": "#a2a1a6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.02 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#a2a1a6",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.02 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.gray.02}"
},
"name": "ND_GRAY_02",
"attributes": {},
"path": [
"brand",
"gray",
"02"
]
},
"03": {
"key": "{brand.gray.03}",
"$value": "#74717a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.03 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#74717a",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.03 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.gray.03}"
},
"name": "ND_GRAY_03",
"attributes": {},
"path": [
"brand",
"gray",
"03"
]
},
"04": {
"key": "{brand.gray.04}",
"$value": "#45424d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.04 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#45424d",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.04 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.gray.04}"
},
"name": "ND_GRAY_04",
"attributes": {},
"path": [
"brand",
"gray",
"04"
]
},
"05": {
"key": "{brand.gray.05}",
"$value": "#2b2838",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.05 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.tokens.json",
"isSource": true,
"original": {
"$value": "#2b2838",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.brand-gray.05 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{brand.gray.05}"
},
"name": "ND_GRAY_05",
"attributes": {},
"path": [
"brand",
"gray",
"05"
]
}
}
},
"t-gray-a": {
"16": {
"key": "{t-gray-a.16}",
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.16 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.16 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-gray-a.16}"
},
"name": "RAY_A_16",
"attributes": {},
"path": [
"t-gray-a",
"16"
]
},
"24": {
"key": "{t-gray-a.24}",
"$value": "rgba(5, 5, 6, 0.24)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.24 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.24)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.24 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-gray-a.24}"
},
"name": "RAY_A_24",
"attributes": {},
"path": [
"t-gray-a",
"24"
]
},
"02": {
"key": "{t-gray-a.02}",
"$value": "rgba(5, 5, 6, 0.02)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.2 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.02)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.2 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-gray-a.02}"
},
"name": "RAY_A_02",
"attributes": {},
"path": [
"t-gray-a",
"02"
]
},
"04": {
"key": "{t-gray-a.04}",
"$value": "rgba(5, 5, 6, 0.04)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.4 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.04)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.4 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-gray-a.04}"
},
"name": "RAY_A_04",
"attributes": {},
"path": [
"t-gray-a",
"04"
]
},
"06": {
"key": "{t-gray-a.06}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.6 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.6 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-gray-a.06}"
},
"name": "RAY_A_06",
"attributes": {},
"path": [
"t-gray-a",
"06"
]
},
"08": {
"key": "{t-gray-a.08}",
"$value": "rgba(5, 5, 6, 0.08)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.8 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(5, 5, 6, 0.08)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.dark.8 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-gray-a.08}"
},
"name": "RAY_A_08",
"attributes": {},
"path": [
"t-gray-a",
"08"
]
}
},
"t-white-a": {
"16": {
"key": "{t-white-a.16}",
"$value": "rgba(255, 255, 255, 0.16)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.light.16 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.16)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.light.16 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-white-a.16}"
},
"name": "HITE_A_16",
"attributes": {},
"path": [
"t-white-a",
"16"
]
},
"24": {
"key": "{t-white-a.24}",
"$value": "rgba(255, 255, 255, 0.24)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.light.24 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.24)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.light.24 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-white-a.24}"
},
"name": "HITE_A_24",
"attributes": {},
"path": [
"t-white-a",
"24"
]
},
"36": {
"key": "{t-white-a.36}",
"$value": "rgba(255, 255, 255, 0.36)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.light.36 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.36)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"$description": "Use color.alpha.light.36 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-white-a.36}"
},
"name": "HITE_A_36",
"attributes": {},
"path": [
"t-white-a",
"36"
]
},
"02": {
"key": "{t-white-a.02}",
"$value": "rgba(255, 255, 255, 0.02)",
"$type": "color",
"$extensions": {
"com.figma.scope": []
},
"$description": "Use color.alpha.light.2 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.02)",
"$type": "color",
"$extensions": {
"com.figma.scope": []
},
"$description": "Use color.alpha.light.2 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-white-a.02}"
},
"name": "HITE_A_02",
"attributes": {},
"path": [
"t-white-a",
"02"
]
},
"04": {
"key": "{t-white-a.04}",
"$value": "rgba(255, 255, 255, 0.04)",
"$type": "color",
"$extensions": {
"com.figma.scope": []
},
"$description": "Use color.alpha.light.4 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.04)",
"$type": "color",
"$extensions": {
"com.figma.scope": []
},
"$description": "Use color.alpha.light.4 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-white-a.04}"
},
"name": "HITE_A_04",
"attributes": {},
"path": [
"t-white-a",
"04"
]
},
"06": {
"key": "{t-white-a.06}",
"$value": "rgba(255, 255, 255, 0.06)",
"$type": "color",
"$extensions": {
"com.figma.scope": []
},
"$description": "Use color.alpha.light.6 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.06)",
"$type": "color",
"$extensions": {
"com.figma.scope": []
},
"$description": "Use color.alpha.light.6 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-white-a.06}"
},
"name": "HITE_A_06",
"attributes": {},
"path": [
"t-white-a",
"06"
]
},
"08": {
"key": "{t-white-a.08}",
"$value": "rgba(255, 255, 255, 0.08)",
"$type": "color",
"$extensions": {
"com.figma.scope": []
},
"$description": "Use color.alpha.light.8 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"filePath": "src/tokens/deprecated/deprecated.color.transparency.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.08)",
"$type": "color",
"$extensions": {
"com.figma.scope": []
},
"$description": "Use color.alpha.light.8 instead.",
"themeable": true,
"prefix": false,
"$deprecated": true,
"key": "{t-white-a.08}"
},
"name": "HITE_A_08",
"attributes": {},
"path": [
"t-white-a",
"08"
]
}
},
"action": {
"border": {
"radius": {
"key": "{action.border.radius}",
"$value": "0.5rem",
"$type": "dimension",
"$description": "Used for the border radius of an action.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.lg}",
"$type": "dimension",
"$description": "Used for the border radius of an action.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{action.border.radius}"
},
"name": "ACTION_BORDER_RADIUS",
"attributes": {},
"path": [
"action",
"border",
"radius"
]
}
},
"disabled": {
"foreground": {
"color": {
"key": "{action.disabled.foreground.color}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for the foreground of a disabled action.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.400}",
"$type": "color",
"$description": "Used for the foreground of a disabled action.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.disabled.foreground.color}"
},
"name": "ACTION_DISABLED_FOREGROUND_COLOR",
"attributes": {},
"path": [
"action",
"disabled",
"foreground",
"color"
]
}
},
"background": {
"color": {
"key": "{action.disabled.background.color}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of a disabled action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the background of a disabled action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.disabled.background.color}"
},
"name": "ACTION_DISABLED_BACKGROUND_COLOR",
"attributes": {},
"path": [
"action",
"disabled",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{action.disabled.border.color}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the border of a disabled action.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the border of a disabled action.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.disabled.border.color}"
},
"name": "ACTION_DISABLED_BORDER_COLOR",
"attributes": {},
"path": [
"action",
"disabled",
"border",
"color"
]
}
}
},
"selected": {
"foreground": {
"color": {
"default": {
"key": "{action.selected.foreground.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a selected action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the foreground of a selected action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.selected.foreground.color.default}"
},
"name": "ACTION_SELECTED_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"selected",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{action.selected.foreground.color.hover}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a selected action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.selected.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a selected action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.selected.foreground.color.hover}"
},
"name": "ACTION_SELECTED_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"selected",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{action.selected.foreground.color.focus}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a selected action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.selected.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a selected action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.selected.foreground.color.focus}"
},
"name": "ACTION_SELECTED_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"selected",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{action.selected.foreground.color.active}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a selected action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.selected.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a selected action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.selected.foreground.color.active}"
},
"name": "ACTION_SELECTED_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"selected",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{action.selected.background.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the background of a selected action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the background of a selected action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.selected.background.color.default}"
},
"name": "ACTION_SELECTED_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"selected",
"background",
"color",
"default"
]
},
"hover": {
"key": "{action.selected.background.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the background of a selected action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the background of a selected action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.selected.background.color.hover}"
},
"name": "ACTION_SELECTED_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"selected",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{action.selected.background.color.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the background of a selected action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.selected.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a selected action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.selected.background.color.focus}"
},
"name": "ACTION_SELECTED_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"selected",
"background",
"color",
"focus"
]
},
"active": {
"key": "{action.selected.background.color.active}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the background of a selected action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.1000}",
"$type": "color",
"$description": "Used for the background of a selected action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.selected.background.color.active}"
},
"name": "ACTION_SELECTED_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"selected",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{action.selected.border.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the border of a selected action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.selected.background.color.default}",
"$type": "color",
"$description": "Used for the border of a selected action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.selected.border.color.default}"
},
"name": "ACTION_SELECTED_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"selected",
"border",
"color",
"default"
]
},
"hover": {
"key": "{action.selected.border.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the border of a selected action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.selected.background.color.hover}",
"$type": "color",
"$description": "Used for the border of a selected action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.selected.border.color.hover}"
},
"name": "ACTION_SELECTED_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"selected",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{action.selected.border.color.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the border of a selected action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.selected.background.color.focus}",
"$type": "color",
"$description": "Used for the border of a selected action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.selected.border.color.focus}"
},
"name": "ACTION_SELECTED_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"selected",
"border",
"color",
"focus"
]
},
"active": {
"key": "{action.selected.border.color.active}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the border of a selected action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.selected.background.color.active}",
"$type": "color",
"$description": "Used for the border of a selected action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.selected.border.color.active}"
},
"name": "ACTION_SELECTED_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"selected",
"border",
"color",
"active"
]
}
}
}
},
"neutral": {
"foreground": {
"color": {
"default": {
"key": "{action.neutral.foreground.color.default}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.900}",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.neutral.foreground.color.default}"
},
"name": "ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"neutral",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{action.neutral.foreground.color.hover}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.neutral.foreground.color.hover}"
},
"name": "ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"neutral",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{action.neutral.foreground.color.focus}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.neutral.foreground.color.focus}"
},
"name": "ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"neutral",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{action.neutral.foreground.color.active}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.neutral.foreground.color.active}"
},
"name": "ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"neutral",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{action.neutral.background.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the background of a neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the background of a neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.neutral.background.color.default}"
},
"name": "ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"neutral",
"background",
"color",
"default"
]
},
"hover": {
"key": "{action.neutral.background.color.hover}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of a neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.6}",
"$type": "color",
"$description": "Used for the background of a neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.neutral.background.color.hover}"
},
"name": "ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"neutral",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{action.neutral.background.color.focus}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of a neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.neutral.background.color.focus}"
},
"name": "ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"neutral",
"background",
"color",
"focus"
]
},
"active": {
"key": "{action.neutral.background.color.active}",
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$description": "Used for the background of a neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.16}",
"$type": "color",
"$description": "Used for the background of a neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.neutral.background.color.active}"
},
"name": "ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"neutral",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{action.neutral.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.neutral.border.color.default}"
},
"name": "ACTION_NEUTRAL_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"neutral",
"border",
"color",
"default"
]
},
"hover": {
"key": "{action.neutral.border.color.hover}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.border.color.default}",
"$type": "color",
"$description": "Used for the border of a neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.neutral.border.color.hover}"
},
"name": "ACTION_NEUTRAL_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"neutral",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{action.neutral.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.border.color.default}",
"$type": "color",
"$description": "Used for the border of a neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.neutral.border.color.focus}"
},
"name": "ACTION_NEUTRAL_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"neutral",
"border",
"color",
"focus"
]
},
"active": {
"key": "{action.neutral.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.neutral.border.color.default}",
"$type": "color",
"$description": "Used for the border of a neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.neutral.border.color.active}"
},
"name": "ACTION_NEUTRAL_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"neutral",
"border",
"color",
"active"
]
}
}
}
},
"confirm": {
"foreground": {
"color": {
"default": {
"key": "{action.confirm.foreground.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.confirm.foreground.color.default}"
},
"name": "ACTION_CONFIRM_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"confirm",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{action.confirm.foreground.color.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.confirm.foreground.color.hover}"
},
"name": "ACTION_CONFIRM_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"confirm",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{action.confirm.foreground.color.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.confirm.foreground.color.focus}"
},
"name": "ACTION_CONFIRM_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"confirm",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{action.confirm.foreground.color.active}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.1000}",
"$type": "color",
"$description": "Used for the foreground of a confirm (positive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.confirm.foreground.color.active}"
},
"name": "ACTION_CONFIRM_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"confirm",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{action.confirm.background.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.confirm.background.color.default}"
},
"name": "ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"confirm",
"background",
"color",
"default"
]
},
"hover": {
"key": "{action.confirm.background.color.hover}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.6}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.confirm.background.color.hover}"
},
"name": "ACTION_CONFIRM_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"confirm",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{action.confirm.background.color.focus}",
"$value": "rgba(5, 5, 6, 0.06)",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.confirm.background.color.focus}"
},
"name": "ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"confirm",
"background",
"color",
"focus"
]
},
"active": {
"key": "{action.confirm.background.color.active}",
"$value": "rgba(5, 5, 6, 0.16)",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.16}",
"$type": "color",
"$description": "Used for the background of a confirm (positive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.confirm.background.color.active}"
},
"name": "ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"confirm",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{action.confirm.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.confirm.border.color.default}"
},
"name": "ACTION_CONFIRM_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"confirm",
"border",
"color",
"default"
]
},
"hover": {
"key": "{action.confirm.border.color.hover}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.border.color.default}",
"$type": "color",
"$description": "Used for the border of a confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.confirm.border.color.hover}"
},
"name": "ACTION_CONFIRM_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"confirm",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{action.confirm.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.border.color.default}",
"$type": "color",
"$description": "Used for the border of a confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.confirm.border.color.focus}"
},
"name": "ACTION_CONFIRM_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"confirm",
"border",
"color",
"focus"
]
},
"active": {
"key": "{action.confirm.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.confirm.border.color.default}",
"$type": "color",
"$description": "Used for the border of a confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.confirm.border.color.active}"
},
"name": "ACTION_CONFIRM_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"confirm",
"border",
"color",
"active"
]
}
}
}
},
"danger": {
"foreground": {
"color": {
"default": {
"key": "{action.danger.foreground.color.default}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.500}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.danger.foreground.color.default}"
},
"name": "ACTION_DANGER_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"danger",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{action.danger.foreground.color.hover}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.700}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.danger.foreground.color.hover}"
},
"name": "ACTION_DANGER_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"danger",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{action.danger.foreground.color.focus}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.danger.foreground.color.focus}"
},
"name": "ACTION_DANGER_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"danger",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{action.danger.foreground.color.active}",
"$value": "#582014",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.900}",
"$type": "color",
"$description": "Used for the foreground of a danger (destructive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.danger.foreground.color.active}"
},
"name": "ACTION_DANGER_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"danger",
"foreground",
"color",
"active"
]
}
}
},
"background": {
"color": {
"default": {
"key": "{action.danger.background.color.default}",
"$value": "rgba(245, 127, 108, 0)",
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(245, 127, 108, 0)",
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.danger.background.color.default}"
},
"name": "ACTION_DANGER_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"danger",
"background",
"color",
"default"
]
},
"hover": {
"key": "{action.danger.background.color.hover}",
"$value": "rgba(245, 127, 108, 0.16)",
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(245, 127, 108, 0.16)",
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.danger.background.color.hover}"
},
"name": "ACTION_DANGER_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"danger",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{action.danger.background.color.focus}",
"$value": "rgba(245, 127, 108, 0.16)",
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.danger.background.color.focus}"
},
"name": "ACTION_DANGER_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"danger",
"background",
"color",
"focus"
]
},
"active": {
"key": "{action.danger.background.color.active}",
"$value": "rgba(174, 24, 0, 0.24)",
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(174, 24, 0, 0.24)",
"$type": "color",
"$description": "Used for the background of a danger (destructive) action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.danger.background.color.active}"
},
"name": "ACTION_DANGER_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"danger",
"background",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{action.danger.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a danger action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a danger action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.danger.border.color.default}"
},
"name": "ACTION_DANGER_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"danger",
"border",
"color",
"default"
]
},
"hover": {
"key": "{action.danger.border.color.hover}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a danger action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.border.color.default}",
"$type": "color",
"$description": "Used for the border of a danger action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.danger.border.color.hover}"
},
"name": "ACTION_DANGER_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"danger",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{action.danger.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a danger action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.border.color.default}",
"$type": "color",
"$description": "Used for the border of a danger action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.danger.border.color.focus}"
},
"name": "ACTION_DANGER_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"danger",
"border",
"color",
"focus"
]
},
"active": {
"key": "{action.danger.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a danger action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.danger.border.color.default}",
"$type": "color",
"$description": "Used for the border of a danger action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.danger.border.color.active}"
},
"name": "ACTION_DANGER_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"danger",
"border",
"color",
"active"
]
}
}
}
},
"strong": {
"confirm": {
"background": {
"color": {
"default": {
"key": "{action.strong.confirm.background.color.default}",
"$value": "#1f75cb",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.500}",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.strong.confirm.background.color.default}"
},
"name": "ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"background",
"color",
"default"
]
},
"hover": {
"key": "{action.strong.confirm.background.color.hover}",
"$value": "#2f68b4",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.600}",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.strong.confirm.background.color.hover}"
},
"name": "ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{action.strong.confirm.background.color.focus}",
"$value": "#2f68b4",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.strong.confirm.background.color.focus}"
},
"name": "ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"background",
"color",
"focus"
]
},
"active": {
"key": "{action.strong.confirm.background.color.active}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.700}",
"$type": "color",
"$description": "Used for the background of a strong confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.strong.confirm.background.color.active}"
},
"name": "ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"background",
"color",
"active"
]
}
}
},
"foreground": {
"color": {
"default": {
"key": "{action.strong.confirm.foreground.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.strong.confirm.foreground.color.default}"
},
"name": "ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{action.strong.confirm.foreground.color.hover}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.strong.confirm.foreground.color.hover}"
},
"name": "ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{action.strong.confirm.foreground.color.focus}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.strong.confirm.foreground.color.focus}"
},
"name": "ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{action.strong.confirm.foreground.color.active}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a strong confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.strong.confirm.foreground.color.active}"
},
"name": "ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"foreground",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{action.strong.confirm.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.strong.confirm.border.color.default}"
},
"name": "ACTION_STRONG_CONFIRM_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"border",
"color",
"default"
]
},
"hover": {
"key": "{action.strong.confirm.border.color.hover}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.border.color.default}",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.strong.confirm.border.color.hover}"
},
"name": "ACTION_STRONG_CONFIRM_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{action.strong.confirm.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.strong.confirm.border.color.focus}"
},
"name": "ACTION_STRONG_CONFIRM_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"border",
"color",
"focus"
]
},
"active": {
"key": "{action.strong.confirm.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.confirm.border.color.focus}",
"$type": "color",
"$description": "Used for the border of a strong confirm action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.strong.confirm.border.color.active}"
},
"name": "ACTION_STRONG_CONFIRM_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"strong",
"confirm",
"border",
"color",
"active"
]
}
}
}
},
"neutral": {
"background": {
"color": {
"default": {
"key": "{action.strong.neutral.background.color.default}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.strong.neutral.background.color.default}"
},
"name": "ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"background",
"color",
"default"
]
},
"hover": {
"key": "{action.strong.neutral.background.color.hover}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.strong.neutral.background.color.hover}"
},
"name": "ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"background",
"color",
"hover"
]
},
"focus": {
"key": "{action.strong.neutral.background.color.focus}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.background.color.hover}",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.strong.neutral.background.color.focus}"
},
"name": "ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"background",
"color",
"focus"
]
},
"active": {
"key": "{action.strong.neutral.background.color.active}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the background of a strong neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{action.strong.neutral.background.color.active}"
},
"name": "ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"background",
"color",
"active"
]
}
}
},
"foreground": {
"color": {
"default": {
"key": "{action.strong.neutral.foreground.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.strong.neutral.foreground.color.default}"
},
"name": "ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"foreground",
"color",
"default"
]
},
"hover": {
"key": "{action.strong.neutral.foreground.color.hover}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.foreground.color.default}",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.strong.neutral.foreground.color.hover}"
},
"name": "ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"foreground",
"color",
"hover"
]
},
"focus": {
"key": "{action.strong.neutral.foreground.color.focus}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.foreground.color.hover}",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.strong.neutral.foreground.color.focus}"
},
"name": "ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"foreground",
"color",
"focus"
]
},
"active": {
"key": "{action.strong.neutral.foreground.color.active}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.foreground.color.focus}",
"$type": "color",
"$description": "Used for the foreground of a strong neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{action.strong.neutral.foreground.color.active}"
},
"name": "ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"foreground",
"color",
"active"
]
}
}
},
"border": {
"color": {
"default": {
"key": "{action.strong.neutral.border.color.default}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.0}",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the default state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.strong.neutral.border.color.default}"
},
"name": "ACTION_STRONG_NEUTRAL_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"border",
"color",
"default"
]
},
"hover": {
"key": "{action.strong.neutral.border.color.hover}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.border.color.default}",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the hover state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.strong.neutral.border.color.hover}"
},
"name": "ACTION_STRONG_NEUTRAL_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{action.strong.neutral.border.color.focus}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.border.color.hover}",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the focus state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.strong.neutral.border.color.focus}"
},
"name": "ACTION_STRONG_NEUTRAL_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"border",
"color",
"focus"
]
},
"active": {
"key": "{action.strong.neutral.border.color.active}",
"$value": "rgba(0, 0, 0, 0)",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/action.tokens.json",
"isSource": true,
"original": {
"$value": "{action.strong.neutral.border.color.focus}",
"$type": "color",
"$description": "Used for the border of a strong neutral action in the active state.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{action.strong.neutral.border.color.active}"
},
"name": "ACTION_STRONG_NEUTRAL_BORDER_COLOR_ACTIVE",
"attributes": {},
"path": [
"action",
"strong",
"neutral",
"border",
"color",
"active"
]
}
}
}
}
}
},
"background": {
"color": {
"default": {
"key": "{background.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the default background color.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/background.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for the default background color.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{background.color.default}"
},
"name": "BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"background",
"color",
"default"
]
},
"subtle": {
"key": "{background.color.subtle}",
"$value": "#fbfafd",
"$type": "color",
"$description": "Used to slightly differentiate the background from the default.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/background.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.10}",
"$type": "color",
"$description": "Used to slightly differentiate the background from the default.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{background.color.subtle}"
},
"name": "BACKGROUND_COLOR_SUBTLE",
"attributes": {},
"path": [
"background",
"color",
"subtle"
]
},
"strong": {
"key": "{background.color.strong}",
"$value": "#ececef",
"$type": "color",
"$description": "Used to make the background easily stand out from the default.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/background.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used to make the background easily stand out from the default.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{background.color.strong}"
},
"name": "BACKGROUND_COLOR_STRONG",
"attributes": {},
"path": [
"background",
"color",
"strong"
]
},
"disabled": {
"key": "{background.color.disabled}",
"$value": "#fbfafd",
"$type": "color",
"$description": "Used to identify a disabled section.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/background.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.10}",
"$type": "color",
"$description": "Used to identify a disabled section.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{background.color.disabled}"
},
"name": "BACKGROUND_COLOR_DISABLED",
"attributes": {},
"path": [
"background",
"color",
"disabled"
]
},
"overlap": {
"key": "{background.color.overlap}",
"$value": "#fff",
"$type": "color",
"$description": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/background.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{background.color.overlap}"
},
"name": "BACKGROUND_COLOR_OVERLAP",
"attributes": {},
"path": [
"background",
"color",
"overlap"
]
},
"section": {
"key": "{background.color.section}",
"$value": "#fff",
"$type": "color",
"$description": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/background.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{background.color.section}"
},
"name": "BACKGROUND_COLOR_SECTION",
"attributes": {},
"path": [
"background",
"color",
"section"
]
},
"overlay": {
"key": "{background.color.overlay}",
"$value": "rgba(5, 5, 6, 0.24)",
"$type": "color",
"$description": "Used for an overlay that covers other content.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/background.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.24}",
"$type": "color",
"$description": "Used for an overlay that covers other content.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{background.color.overlay}"
},
"name": "BACKGROUND_COLOR_OVERLAY",
"attributes": {},
"path": [
"background",
"color",
"overlay"
]
}
}
},
"control": {
"background": {
"color": {
"default": {
"key": "{control.background.color.default}",
"$value": "#fff",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) default background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) default background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{control.background.color.default}"
},
"name": "CONTROL_BACKGROUND_COLOR_DEFAULT",
"attributes": {},
"path": [
"control",
"background",
"color",
"default"
]
},
"disabled": {
"key": "{control.background.color.disabled}",
"$value": "#fbfafd",
"$type": "color",
"$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.10}",
"$type": "color",
"$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{control.background.color.disabled}"
},
"name": "CONTROL_BACKGROUND_COLOR_DISABLED",
"attributes": {},
"path": [
"control",
"background",
"color",
"disabled"
]
},
"concatenation": {
"key": "{control.background.color.concatenation}",
"$value": "#fbfafd",
"$type": "color",
"$description": "Used for the background of static content that prepends or appends a text input.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.10}",
"$type": "color",
"$description": "Used for the background of static content that prepends or appends a text input.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{control.background.color.concatenation}"
},
"name": "CONTROL_BACKGROUND_COLOR_CONCATENATION",
"attributes": {},
"path": [
"control",
"background",
"color",
"concatenation"
]
},
"readonly": {
"key": "{control.background.color.readonly}",
"$value": "rgba(5, 5, 6, 0.02)",
"$type": "color",
"$description": "Used for the background of static content that prepends or appends a text input.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.alpha.dark.2}",
"$type": "color",
"$description": "Used for the background of static content that prepends or appends a text input.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{control.background.color.readonly}"
},
"name": "CONTROL_BACKGROUND_COLOR_READONLY",
"attributes": {},
"path": [
"control",
"background",
"color",
"readonly"
]
},
"selected": {
"default": {
"key": "{control.background.color.selected.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{control.background.color.selected.default}"
},
"name": "CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT",
"attributes": {},
"path": [
"control",
"background",
"color",
"selected",
"default"
]
},
"hover": {
"key": "{control.background.color.selected.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{control.background.color.selected.hover}"
},
"name": "CONTROL_BACKGROUND_COLOR_SELECTED_HOVER",
"attributes": {},
"path": [
"control",
"background",
"color",
"selected",
"hover"
]
},
"focus": {
"key": "{control.background.color.selected.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{control.background.color.selected.hover}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{control.background.color.selected.focus}"
},
"name": "CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS",
"attributes": {},
"path": [
"control",
"background",
"color",
"selected",
"focus"
]
}
}
}
},
"border": {
"color": {
"default": {
"key": "{control.border.color.default}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) default border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.400}",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) default border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{control.border.color.default}"
},
"name": "CONTROL_BORDER_COLOR_DEFAULT",
"attributes": {},
"path": [
"control",
"border",
"color",
"default"
]
},
"hover": {
"key": "{control.border.color.hover}",
"$value": "#626168",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) border on hover.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) border on hover.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{control.border.color.hover}"
},
"name": "CONTROL_BORDER_COLOR_HOVER",
"attributes": {},
"path": [
"control",
"border",
"color",
"hover"
]
},
"focus": {
"key": "{control.border.color.focus}",
"$value": "#28272d",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) border on focus.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.900}",
"$type": "color",
"$description": "Used for form control (input, radio button, checkbox, textarea) border on focus.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{control.border.color.focus}"
},
"name": "CONTROL_BORDER_COLOR_FOCUS",
"attributes": {},
"path": [
"control",
"border",
"color",
"focus"
]
},
"disabled": {
"key": "{control.border.color.disabled}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for disabled form control (input, radio button, checkbox, textarea) border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for disabled form control (input, radio button, checkbox, textarea) border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{control.border.color.disabled}"
},
"name": "CONTROL_BORDER_COLOR_DISABLED",
"attributes": {},
"path": [
"control",
"border",
"color",
"disabled"
]
},
"error": {
"key": "{control.border.color.error}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used for invalid form control (input, textarea) border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{feedback.danger.border.color}",
"$type": "color",
"$description": "Used for invalid form control (input, textarea) border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{control.border.color.error}"
},
"name": "CONTROL_BORDER_COLOR_ERROR",
"attributes": {},
"path": [
"control",
"border",
"color",
"error"
]
},
"selected": {
"default": {
"key": "{control.border.color.selected.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{control.background.color.selected.default}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{control.border.color.selected.default}"
},
"name": "CONTROL_BORDER_COLOR_SELECTED_DEFAULT",
"attributes": {},
"path": [
"control",
"border",
"color",
"selected",
"default"
]
},
"hover": {
"key": "{control.border.color.selected.hover}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{control.background.color.selected.hover}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{control.border.color.selected.hover}"
},
"name": "CONTROL_BORDER_COLOR_SELECTED_HOVER",
"attributes": {},
"path": [
"control",
"border",
"color",
"selected",
"hover"
]
},
"focus": {
"key": "{control.border.color.selected.focus}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{control.background.color.selected.focus}",
"$type": "color",
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{control.border.color.selected.focus}"
},
"name": "CONTROL_BORDER_COLOR_SELECTED_FOCUS",
"attributes": {},
"path": [
"control",
"border",
"color",
"selected",
"focus"
]
}
}
},
"radius": {
"key": "{control.border.radius}",
"$value": "0.5rem",
"$type": "dimension",
"$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.lg}",
"$type": "dimension",
"$description": "Used for form control (input, radio button, checkbox, textarea) default border radius.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{control.border.radius}"
},
"name": "CONTROL_BORDER_RADIUS",
"attributes": {},
"path": [
"control",
"border",
"radius"
]
}
},
"text": {
"color": {
"error": {
"key": "{control.text.color.error}",
"$value": "#c02f12",
"$type": "color",
"$description": "Used for the helper text when the input is invalid.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.danger}",
"$type": "color",
"$description": "Used for the helper text when the input is invalid.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{control.text.color.error}"
},
"name": "CONTROL_TEXT_COLOR_ERROR",
"attributes": {},
"path": [
"control",
"text",
"color",
"error"
]
},
"valid": {
"key": "{control.text.color.valid}",
"$value": "#2f7549",
"$type": "color",
"$description": "Used for the helper text when the input is valid.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.success}",
"$type": "color",
"$description": "Used for the helper text when the input is valid.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{control.text.color.valid}"
},
"name": "CONTROL_TEXT_COLOR_VALID",
"attributes": {},
"path": [
"control",
"text",
"color",
"valid"
]
}
}
},
"placeholder": {
"color": {
"key": "{control.placeholder.color}",
"$value": "#737278",
"$type": "color",
"$description": "Used for placeholder text within inputs.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.500}",
"$type": "color",
"$description": "Used for placeholder text within inputs.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{control.placeholder.color}"
},
"name": "CONTROL_PLACEHOLDER_COLOR",
"attributes": {},
"path": [
"control",
"placeholder",
"color"
]
}
},
"indicator": {
"color": {
"selected": {
"key": "{control.indicator.color.selected}",
"$value": "#fff",
"$type": "color",
"$description": "Used for checkbox and radio button state indicators.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for checkbox and radio button state indicators.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{control.indicator.color.selected}"
},
"name": "CONTROL_INDICATOR_COLOR_SELECTED",
"attributes": {},
"path": [
"control",
"indicator",
"color",
"selected"
]
},
"disabled": {
"key": "{control.indicator.color.disabled}",
"$value": "#737278",
"$type": "color",
"$description": "Used for disabled checkbox and radio button state indicators.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/control.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.500}",
"$type": "color",
"$description": "Used for disabled checkbox and radio button state indicators.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{control.indicator.color.disabled}"
},
"name": "CONTROL_INDICATOR_COLOR_DISABLED",
"attributes": {},
"path": [
"control",
"indicator",
"color",
"disabled"
]
}
}
}
},
"feedback": {
"border": {
"radius": {
"key": "{feedback.border.radius}",
"$value": "0.5rem",
"$type": "dimension",
"$description": "Used for the border radius of a feedback element.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{border.radius.lg}",
"$type": "dimension",
"$description": "Used for the border radius of a feedback element.",
"$extensions": {
"com.figma.scopes": [
"CORNER_RADIUS"
]
},
"key": "{feedback.border.radius}"
},
"name": "FEEDBACK_BORDER_RADIUS",
"attributes": {},
"path": [
"feedback",
"border",
"radius"
]
}
},
"strong": {
"background": {
"color": {
"key": "{feedback.strong.background.color}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for a background associated with strong feedback like a tooltip or toast message.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for a background associated with strong feedback like a tooltip or toast message.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{feedback.strong.background.color}"
},
"name": "FEEDBACK_STRONG_BACKGROUND_COLOR",
"attributes": {},
"path": [
"feedback",
"strong",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{feedback.strong.border.color}",
"$value": "#050506",
"$type": "color",
"$description": "Used for the border associated with strong feedback.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.1000}",
"$type": "color",
"$description": "Used for the border associated with strong feedback.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{feedback.strong.border.color}"
},
"name": "FEEDBACK_STRONG_BORDER_COLOR",
"attributes": {},
"path": [
"feedback",
"strong",
"border",
"color"
]
}
},
"text": {
"color": {
"key": "{feedback.strong.text.color}",
"$value": "#fff",
"$type": "color",
"$description": "Used for text on a strong feedback background.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for text on a strong feedback background.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{feedback.strong.text.color}"
},
"name": "FEEDBACK_STRONG_TEXT_COLOR",
"attributes": {},
"path": [
"feedback",
"strong",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{feedback.strong.icon.color}",
"$value": "#fff",
"$type": "color",
"$description": "Used for an icon on a strong feedback background.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for an icon on a strong feedback background.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{feedback.strong.icon.color}"
},
"name": "FEEDBACK_STRONG_ICON_COLOR",
"attributes": {},
"path": [
"feedback",
"strong",
"icon",
"color"
]
}
},
"link": {
"color": {
"key": "{feedback.strong.link.color}",
"$value": "#63a6e9",
"$type": "color",
"$description": "Used for a link on a strong feedback background.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.300}",
"$type": "color",
"$description": "Used for a link on a strong feedback background.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{feedback.strong.link.color}"
},
"name": "FEEDBACK_STRONG_LINK_COLOR",
"attributes": {},
"path": [
"feedback",
"strong",
"link",
"color"
]
}
}
},
"neutral": {
"background": {
"color": {
"key": "{feedback.neutral.background.color}",
"$value": "#ececef",
"$type": "color",
"$description": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.50}",
"$type": "color",
"$description": "Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{feedback.neutral.background.color}"
},
"name": "FEEDBACK_NEUTRAL_BACKGROUND_COLOR",
"attributes": {},
"path": [
"feedback",
"neutral",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{feedback.neutral.border.color}",
"$value": "#bfbfc3",
"$type": "color",
"$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.200}",
"$type": "color",
"$description": "Used for the border of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{feedback.neutral.border.color}"
},
"name": "FEEDBACK_NEUTRAL_BORDER_COLOR",
"attributes": {},
"path": [
"feedback",
"neutral",
"border",
"color"
]
}
},
"text": {
"color": {
"key": "{feedback.neutral.text.color}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{feedback.neutral.text.color}"
},
"name": "FEEDBACK_NEUTRAL_TEXT_COLOR",
"attributes": {},
"path": [
"feedback",
"neutral",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{feedback.neutral.icon.color}",
"$value": "#626168",
"$type": "color",
"$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{feedback.neutral.icon.color}"
},
"name": "FEEDBACK_NEUTRAL_ICON_COLOR",
"attributes": {},
"path": [
"feedback",
"neutral",
"icon",
"color"
]
}
}
},
"info": {
"background": {
"color": {
"key": "{feedback.info.background.color}",
"$value": "#e9f3fc",
"$type": "color",
"$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.50}",
"$type": "color",
"$description": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{feedback.info.background.color}"
},
"name": "FEEDBACK_INFO_BACKGROUND_COLOR",
"attributes": {},
"path": [
"feedback",
"info",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{feedback.info.border.color}",
"$value": "#9dc7f1",
"$type": "color",
"$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.200}",
"$type": "color",
"$description": "Used for the border of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{feedback.info.border.color}"
},
"name": "FEEDBACK_INFO_BORDER_COLOR",
"attributes": {},
"path": [
"feedback",
"info",
"border",
"color"
]
}
},
"text": {
"color": {
"key": "{feedback.info.text.color}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.700}",
"$type": "color",
"$description": "Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{feedback.info.text.color}"
},
"name": "FEEDBACK_INFO_TEXT_COLOR",
"attributes": {},
"path": [
"feedback",
"info",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{feedback.info.icon.color}",
"$value": "#2f68b4",
"$type": "color",
"$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.600}",
"$type": "color",
"$description": "Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{feedback.info.icon.color}"
},
"name": "FEEDBACK_INFO_ICON_COLOR",
"attributes": {},
"path": [
"feedback",
"info",
"icon",
"color"
]
}
}
},
"success": {
"background": {
"color": {
"key": "{feedback.success.background.color}",
"$value": "#ecf4ee",
"$type": "color",
"$description": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.50}",
"$type": "color",
"$description": "Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{feedback.success.background.color}"
},
"name": "FEEDBACK_SUCCESS_BACKGROUND_COLOR",
"attributes": {},
"path": [
"feedback",
"success",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{feedback.success.border.color}",
"$value": "#91d4a8",
"$type": "color",
"$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.200}",
"$type": "color",
"$description": "Used for the border of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{feedback.success.border.color}"
},
"name": "FEEDBACK_SUCCESS_BORDER_COLOR",
"attributes": {},
"path": [
"feedback",
"success",
"border",
"color"
]
}
},
"text": {
"color": {
"key": "{feedback.success.text.color}",
"$value": "#306440",
"$type": "color",
"$description": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.700}",
"$type": "color",
"$description": "Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{feedback.success.text.color}"
},
"name": "FEEDBACK_SUCCESS_TEXT_COLOR",
"attributes": {},
"path": [
"feedback",
"success",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{feedback.success.icon.color}",
"$value": "#2f7549",
"$type": "color",
"$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.600}",
"$type": "color",
"$description": "Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{feedback.success.icon.color}"
},
"name": "FEEDBACK_SUCCESS_ICON_COLOR",
"attributes": {},
"path": [
"feedback",
"success",
"icon",
"color"
]
}
}
},
"warning": {
"background": {
"color": {
"key": "{feedback.warning.background.color}",
"$value": "#fdf1dd",
"$type": "color",
"$description": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.50}",
"$type": "color",
"$description": "Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{feedback.warning.background.color}"
},
"name": "FEEDBACK_WARNING_BACKGROUND_COLOR",
"attributes": {},
"path": [
"feedback",
"warning",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{feedback.warning.border.color}",
"$value": "#e9be74",
"$type": "color",
"$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.200}",
"$type": "color",
"$description": "Used for the border of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{feedback.warning.border.color}"
},
"name": "FEEDBACK_WARNING_BORDER_COLOR",
"attributes": {},
"path": [
"feedback",
"warning",
"border",
"color"
]
}
},
"text": {
"color": {
"key": "{feedback.warning.text.color}",
"$value": "#894b16",
"$type": "color",
"$description": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.700}",
"$type": "color",
"$description": "Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{feedback.warning.text.color}"
},
"name": "FEEDBACK_WARNING_TEXT_COLOR",
"attributes": {},
"path": [
"feedback",
"warning",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{feedback.warning.icon.color}",
"$value": "#995715",
"$type": "color",
"$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.600}",
"$type": "color",
"$description": "Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{feedback.warning.icon.color}"
},
"name": "FEEDBACK_WARNING_ICON_COLOR",
"attributes": {},
"path": [
"feedback",
"warning",
"icon",
"color"
]
}
}
},
"danger": {
"background": {
"color": {
"key": "{feedback.danger.background.color}",
"$value": "#fcf1ef",
"$type": "color",
"$description": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.50}",
"$type": "color",
"$description": "Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{feedback.danger.background.color}"
},
"name": "FEEDBACK_DANGER_BACKGROUND_COLOR",
"attributes": {},
"path": [
"feedback",
"danger",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{feedback.danger.border.color}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.500}",
"$type": "color",
"$description": "Used for the border of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{feedback.danger.border.color}"
},
"name": "FEEDBACK_DANGER_BORDER_COLOR",
"attributes": {},
"path": [
"feedback",
"danger",
"border",
"color"
]
}
},
"text": {
"color": {
"key": "{feedback.danger.text.color}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.700}",
"$type": "color",
"$description": "Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{feedback.danger.text.color}"
},
"name": "FEEDBACK_DANGER_TEXT_COLOR",
"attributes": {},
"path": [
"feedback",
"danger",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{feedback.danger.icon.color}",
"$value": "#c02f12",
"$type": "color",
"$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.600}",
"$type": "color",
"$description": "Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{feedback.danger.icon.color}"
},
"name": "FEEDBACK_DANGER_ICON_COLOR",
"attributes": {},
"path": [
"feedback",
"danger",
"icon",
"color"
]
}
}
},
"brand": {
"background": {
"color": {
"key": "{feedback.brand.background.color}",
"$value": "#f4f0ff",
"$type": "color",
"$description": "Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.50}",
"$type": "color",
"$description": "Used for the background of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{feedback.brand.background.color}"
},
"name": "FEEDBACK_BRAND_BACKGROUND_COLOR",
"attributes": {},
"path": [
"feedback",
"brand",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{feedback.brand.border.color}",
"$value": "#cbbbf2",
"$type": "color",
"$description": "Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.200}",
"$type": "color",
"$description": "Used for the border of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{feedback.brand.border.color}"
},
"name": "FEEDBACK_BRAND_BORDER_COLOR",
"attributes": {},
"path": [
"feedback",
"brand",
"border",
"color"
]
}
},
"text": {
"color": {
"key": "{feedback.brand.text.color}",
"$value": "#5c47a6",
"$type": "color",
"$description": "Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.700}",
"$type": "color",
"$description": "Used for the text of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{feedback.brand.text.color}"
},
"name": "FEEDBACK_BRAND_TEXT_COLOR",
"attributes": {},
"path": [
"feedback",
"brand",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{feedback.brand.icon.color}",
"$value": "#6a4fb4",
"$type": "color",
"$description": "Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/feedback.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.600}",
"$type": "color",
"$description": "Used for the icon of a brand-related feedback item when highlighting information that pertains to GitLab.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{feedback.brand.icon.color}"
},
"name": "FEEDBACK_BRAND_ICON_COLOR",
"attributes": {},
"path": [
"feedback",
"brand",
"icon",
"color"
]
}
}
}
},
"focus-ring": {
"outer": {
"color": {
"key": "{focus-ring.outer.color}",
"$value": "#1f75cb",
"$type": "color",
"$description": "Used for the outer color portion of the focus ring.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/focus-ring.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.500}",
"$type": "color",
"$description": "Used for the outer color portion of the focus ring.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{focus-ring.outer.color}"
},
"name": "FOCUS_RING_OUTER_COLOR",
"attributes": {},
"path": [
"focus-ring",
"outer",
"color"
]
}
},
"inner": {
"color": {
"key": "{focus-ring.inner.color}",
"$value": "#fff",
"$type": "color",
"$description": "Used for the inner neutral portion of the focus ring.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/focus-ring.tokens.json",
"isSource": true,
"original": {
"$value": "{background.color.default}",
"$type": "color",
"$description": "Used for the inner neutral portion of the focus ring.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{focus-ring.inner.color}"
},
"name": "FOCUS_RING_INNER_COLOR",
"attributes": {},
"path": [
"focus-ring",
"inner",
"color"
]
}
}
},
"highlight": {
"match": {
"background": {
"color": {
"key": "{highlight.match.background.color}",
"$value": "#ab6100",
"$type": "color",
"$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/highlight.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.500}",
"$type": "color",
"$description": "Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{highlight.match.background.color}"
},
"name": "HIGHLIGHT_MATCH_BACKGROUND_COLOR",
"attributes": {},
"path": [
"highlight",
"match",
"background",
"color"
]
}
},
"text": {
"color": {
"key": "{highlight.match.text.color}",
"$value": "#fff",
"$type": "color",
"$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/highlight.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.0}",
"$type": "color",
"$description": "Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{highlight.match.text.color}"
},
"name": "HIGHLIGHT_MATCH_TEXT_COLOR",
"attributes": {},
"path": [
"highlight",
"match",
"text",
"color"
]
}
}
},
"target": {
"background": {
"color": {
"key": "{highlight.target.background.color}",
"$value": "#e9f3fc",
"$type": "color",
"$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/highlight.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.50}",
"$type": "color",
"$description": "Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{highlight.target.background.color}"
},
"name": "HIGHLIGHT_TARGET_BACKGROUND_COLOR",
"attributes": {},
"path": [
"highlight",
"target",
"background",
"color"
]
}
},
"border": {
"color": {
"key": "{highlight.target.border.color}",
"$value": "#9dc7f1",
"$type": "color",
"$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"filePath": "src/tokens/semantic/highlight.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.200}",
"$type": "color",
"$description": "Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.",
"$extensions": {
"com.figma.scopes": [
"STROKE_COLOR"
]
},
"key": "{highlight.target.border.color}"
},
"name": "HIGHLIGHT_TARGET_BORDER_COLOR",
"attributes": {},
"path": [
"highlight",
"target",
"border",
"color"
]
}
}
}
},
"icon": {
"color": {
"default": {
"key": "{icon.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the default icon color. Can be paired with default text.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/icon.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.default}",
"$type": "color",
"$description": "Used for the default icon color. Can be paired with default text.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{icon.color.default}"
},
"name": "ICON_COLOR_DEFAULT",
"attributes": {},
"path": [
"icon",
"color",
"default"
]
},
"subtle": {
"key": "{icon.color.subtle}",
"$value": "#626168",
"$type": "color",
"$description": "Used for a static or decorational icon. Can be paired with subtle text.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/icon.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.subtle}",
"$type": "color",
"$description": "Used for a static or decorational icon. Can be paired with subtle text.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{icon.color.subtle}"
},
"name": "ICON_COLOR_SUBTLE",
"attributes": {},
"path": [
"icon",
"color",
"subtle"
]
},
"strong": {
"key": "{icon.color.strong}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for an icon with the highest contrast.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/icon.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.strong}",
"$type": "color",
"$description": "Used for an icon with the highest contrast.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{icon.color.strong}"
},
"name": "ICON_COLOR_STRONG",
"attributes": {},
"path": [
"icon",
"color",
"strong"
]
},
"disabled": {
"key": "{icon.color.disabled}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for an icon within a disabled section.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/icon.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.disabled}",
"$type": "color",
"$description": "Used for an icon within a disabled section.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{icon.color.disabled}"
},
"name": "ICON_COLOR_DISABLED",
"attributes": {},
"path": [
"icon",
"color",
"disabled"
]
},
"link": {
"key": "{icon.color.link}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for an icon within a link.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/icon.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.link}",
"$type": "color",
"$description": "Used for an icon within a link.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{icon.color.link}"
},
"name": "ICON_COLOR_LINK",
"attributes": {},
"path": [
"icon",
"color",
"link"
]
},
"info": {
"key": "{icon.color.info}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for an icon associated with information or help.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/icon.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.700}",
"$type": "color",
"$description": "Used for an icon associated with information or help.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{icon.color.info}"
},
"name": "ICON_COLOR_INFO",
"attributes": {},
"path": [
"icon",
"color",
"info"
]
},
"warning": {
"key": "{icon.color.warning}",
"$value": "#995715",
"$type": "color",
"$description": "Used for an icon associated with a warning.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/icon.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.warning}",
"$type": "color",
"$description": "Used for an icon associated with a warning.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{icon.color.warning}"
},
"name": "ICON_COLOR_WARNING",
"attributes": {},
"path": [
"icon",
"color",
"warning"
]
},
"danger": {
"key": "{icon.color.danger}",
"$value": "#c02f12",
"$type": "color",
"$description": "Used for an icon associated with an error or danger.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/icon.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.danger}",
"$type": "color",
"$description": "Used for an icon associated with an error or danger.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{icon.color.danger}"
},
"name": "ICON_COLOR_DANGER",
"attributes": {},
"path": [
"icon",
"color",
"danger"
]
},
"success": {
"key": "{icon.color.success}",
"$value": "#2f7549",
"$type": "color",
"$description": "Used for an icon associated with success or validity.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/icon.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.success}",
"$type": "color",
"$description": "Used for an icon associated with success or validity.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{icon.color.success}"
},
"name": "ICON_COLOR_SUCCESS",
"attributes": {},
"path": [
"icon",
"color",
"success"
]
}
}
},
"letter-spacing": {
"heading": {
"key": "{letter-spacing.heading}",
"$value": "-0.01em",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LETTER_SPACING"
]
},
"filePath": "src/tokens/semantic/letter_spacing.tokens.json",
"isSource": true,
"original": {
"$value": "-0.01em",
"$type": "dimension",
"$extensions": {
"com.figma.scopes": [
"LETTER_SPACING"
]
},
"key": "{letter-spacing.heading}"
},
"name": "LETTER_SPACING_HEADING",
"attributes": {},
"path": [
"letter-spacing",
"heading"
]
}
},
"status": {
"neutral": {
"background": {
"color": {
"key": "{status.neutral.background.color}",
"$value": "#dcdcde",
"$type": "color",
"$description": "Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.100}",
"$type": "color",
"$description": "Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{status.neutral.background.color}"
},
"name": "STATUS_NEUTRAL_BACKGROUND_COLOR",
"attributes": {},
"path": [
"status",
"neutral",
"background",
"color"
]
}
},
"text": {
"color": {
"key": "{status.neutral.text.color}",
"$value": "#4c4b51",
"$type": "color",
"$description": "Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.700}",
"$type": "color",
"$description": "Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{status.neutral.text.color}"
},
"name": "STATUS_NEUTRAL_TEXT_COLOR",
"attributes": {},
"path": [
"status",
"neutral",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{status.neutral.icon.color}",
"$value": "#737278",
"$type": "color",
"$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.500}",
"$type": "color",
"$description": "Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{status.neutral.icon.color}"
},
"name": "STATUS_NEUTRAL_ICON_COLOR",
"attributes": {},
"path": [
"status",
"neutral",
"icon",
"color"
]
}
}
},
"info": {
"background": {
"color": {
"key": "{status.info.background.color}",
"$value": "#cbe2f9",
"$type": "color",
"$description": "Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.100}",
"$type": "color",
"$description": "Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{status.info.background.color}"
},
"name": "STATUS_INFO_BACKGROUND_COLOR",
"attributes": {},
"path": [
"status",
"info",
"background",
"color"
]
}
},
"text": {
"color": {
"key": "{status.info.text.color}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.700}",
"$type": "color",
"$description": "Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{status.info.text.color}"
},
"name": "STATUS_INFO_TEXT_COLOR",
"attributes": {},
"path": [
"status",
"info",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{status.info.icon.color}",
"$value": "#1f75cb",
"$type": "color",
"$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.500}",
"$type": "color",
"$description": "Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{status.info.icon.color}"
},
"name": "STATUS_INFO_ICON_COLOR",
"attributes": {},
"path": [
"status",
"info",
"icon",
"color"
]
}
}
},
"success": {
"background": {
"color": {
"key": "{status.success.background.color}",
"$value": "#c3e6cd",
"$type": "color",
"$description": "Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.100}",
"$type": "color",
"$description": "Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{status.success.background.color}"
},
"name": "STATUS_SUCCESS_BACKGROUND_COLOR",
"attributes": {},
"path": [
"status",
"success",
"background",
"color"
]
}
},
"text": {
"color": {
"key": "{status.success.text.color}",
"$value": "#306440",
"$type": "color",
"$description": "Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.700}",
"$type": "color",
"$description": "Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{status.success.text.color}"
},
"name": "STATUS_SUCCESS_TEXT_COLOR",
"attributes": {},
"path": [
"status",
"success",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{status.success.icon.color}",
"$value": "#108548",
"$type": "color",
"$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.500}",
"$type": "color",
"$description": "Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{status.success.icon.color}"
},
"name": "STATUS_SUCCESS_ICON_COLOR",
"attributes": {},
"path": [
"status",
"success",
"icon",
"color"
]
}
}
},
"warning": {
"background": {
"color": {
"key": "{status.warning.background.color}",
"$value": "#f5d9a8",
"$type": "color",
"$description": "Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.100}",
"$type": "color",
"$description": "Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{status.warning.background.color}"
},
"name": "STATUS_WARNING_BACKGROUND_COLOR",
"attributes": {},
"path": [
"status",
"warning",
"background",
"color"
]
}
},
"text": {
"color": {
"key": "{status.warning.text.color}",
"$value": "#894b16",
"$type": "color",
"$description": "Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.700}",
"$type": "color",
"$description": "Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{status.warning.text.color}"
},
"name": "STATUS_WARNING_TEXT_COLOR",
"attributes": {},
"path": [
"status",
"warning",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{status.warning.icon.color}",
"$value": "#ab6100",
"$type": "color",
"$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.500}",
"$type": "color",
"$description": "Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{status.warning.icon.color}"
},
"name": "STATUS_WARNING_ICON_COLOR",
"attributes": {},
"path": [
"status",
"warning",
"icon",
"color"
]
}
}
},
"danger": {
"background": {
"color": {
"key": "{status.danger.background.color}",
"$value": "#fdd4cd",
"$type": "color",
"$description": "Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.100}",
"$type": "color",
"$description": "Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{status.danger.background.color}"
},
"name": "STATUS_DANGER_BACKGROUND_COLOR",
"attributes": {},
"path": [
"status",
"danger",
"background",
"color"
]
}
},
"text": {
"color": {
"key": "{status.danger.text.color}",
"$value": "#a32c12",
"$type": "color",
"$description": "Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.700}",
"$type": "color",
"$description": "Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{status.danger.text.color}"
},
"name": "STATUS_DANGER_TEXT_COLOR",
"attributes": {},
"path": [
"status",
"danger",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{status.danger.icon.color}",
"$value": "#dd2b0e",
"$type": "color",
"$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.500}",
"$type": "color",
"$description": "Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{status.danger.icon.color}"
},
"name": "STATUS_DANGER_ICON_COLOR",
"attributes": {},
"path": [
"status",
"danger",
"icon",
"color"
]
}
}
},
"brand": {
"background": {
"color": {
"key": "{status.brand.background.color}",
"$value": "#e1d8f9",
"$type": "color",
"$description": "Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.100}",
"$type": "color",
"$description": "Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
"$extensions": {
"com.figma.scopes": [
"FRAME_FILL",
"SHAPE_FILL"
]
},
"key": "{status.brand.background.color}"
},
"name": "STATUS_BRAND_BACKGROUND_COLOR",
"attributes": {},
"path": [
"status",
"brand",
"background",
"color"
]
}
},
"text": {
"color": {
"key": "{status.brand.text.color}",
"$value": "#5c47a6",
"$type": "color",
"$description": "Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.700}",
"$type": "color",
"$description": "Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{status.brand.text.color}"
},
"name": "STATUS_BRAND_TEXT_COLOR",
"attributes": {},
"path": [
"status",
"brand",
"text",
"color"
]
}
},
"icon": {
"color": {
"key": "{status.brand.icon.color}",
"$value": "#7b58cf",
"$type": "color",
"$description": "Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/status.tokens.json",
"isSource": true,
"original": {
"$value": "{color.purple.500}",
"$type": "color",
"$description": "Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.",
"$extensions": {
"com.figma.scopes": [
"SHAPE_FILL",
"TEXT_FILL"
]
},
"key": "{status.brand.icon.color}"
},
"name": "STATUS_BRAND_ICON_COLOR",
"attributes": {},
"path": [
"status",
"brand",
"icon",
"color"
]
}
}
}
},
"text": {
"primary": {
"key": "{text.primary}",
"$value": "#3a383f",
"$type": "color",
"$description": "Use text.color.default instead.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"$deprecated": true,
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.default}",
"$type": "color",
"$description": "Use text.color.default instead.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"$deprecated": true,
"key": "{text.primary}"
},
"name": "TEXT_PRIMARY",
"attributes": {},
"path": [
"text",
"primary"
]
},
"secondary": {
"key": "{text.secondary}",
"$value": "#626168",
"$type": "color",
"$description": "Use text.color.subtle instead.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"$deprecated": true,
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.subtle}",
"$type": "color",
"$description": "Use text.color.subtle instead.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"$deprecated": true,
"key": "{text.secondary}"
},
"name": "TEXT_SECONDARY",
"attributes": {},
"path": [
"text",
"secondary"
]
},
"tertiary": {
"key": "{text.tertiary}",
"$value": "#89888d",
"$type": "color",
"$description": "Use text.color.disabled instead.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"$deprecated": true,
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{text.color.disabled}",
"$type": "color",
"$description": "Use text.color.disabled instead.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"$deprecated": true,
"key": "{text.tertiary}"
},
"name": "TEXT_TERTIARY",
"attributes": {},
"path": [
"text",
"tertiary"
]
},
"color": {
"default": {
"key": "{text.color.default}",
"$value": "#3a383f",
"$type": "color",
"$description": "Used for the default text color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.800}",
"$type": "color",
"$description": "Used for the default text color.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{text.color.default}"
},
"name": "TEXT_COLOR_DEFAULT",
"attributes": {},
"path": [
"text",
"color",
"default"
]
},
"subtle": {
"key": "{text.color.subtle}",
"$value": "#626168",
"$type": "color",
"$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.600}",
"$type": "color",
"$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{text.color.subtle}"
},
"name": "TEXT_COLOR_SUBTLE",
"attributes": {},
"path": [
"text",
"color",
"subtle"
]
},
"strong": {
"key": "{text.color.strong}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for text with the highest contrast.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for text with the highest contrast.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{text.color.strong}"
},
"name": "TEXT_COLOR_STRONG",
"attributes": {},
"path": [
"text",
"color",
"strong"
]
},
"heading": {
"key": "{text.color.heading}",
"$value": "#18171d",
"$type": "color",
"$description": "Used for headings level 1-6.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.950}",
"$type": "color",
"$description": "Used for headings level 1-6.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{text.color.heading}"
},
"name": "TEXT_COLOR_HEADING",
"attributes": {},
"path": [
"text",
"color",
"heading"
]
},
"link": {
"key": "{text.color.link}",
"$value": "#2f5ca0",
"$type": "color",
"$description": "Used for default text links.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{color.blue.700}",
"$type": "color",
"$description": "Used for default text links.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{text.color.link}"
},
"name": "TEXT_COLOR_LINK",
"attributes": {},
"path": [
"text",
"color",
"link"
]
},
"warning": {
"key": "{text.color.warning}",
"$value": "#995715",
"$type": "color",
"$description": "Used for text that requires caution or careful attention.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{color.orange.600}",
"$type": "color",
"$description": "Used for text that requires caution or careful attention.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{text.color.warning}"
},
"name": "TEXT_COLOR_WARNING",
"attributes": {},
"path": [
"text",
"color",
"warning"
]
},
"danger": {
"key": "{text.color.danger}",
"$value": "#c02f12",
"$type": "color",
"$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{color.red.600}",
"$type": "color",
"$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{text.color.danger}"
},
"name": "TEXT_COLOR_DANGER",
"attributes": {},
"path": [
"text",
"color",
"danger"
]
},
"success": {
"key": "{text.color.success}",
"$value": "#2f7549",
"$type": "color",
"$description": "Used for text indicating success, completion, approval, addition, or validity.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{color.green.600}",
"$type": "color",
"$description": "Used for text indicating success, completion, approval, addition, or validity.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{text.color.success}"
},
"name": "TEXT_COLOR_SUCCESS",
"attributes": {},
"path": [
"text",
"color",
"success"
]
},
"disabled": {
"key": "{text.color.disabled}",
"$value": "#89888d",
"$type": "color",
"$description": "Used for disabled text.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"filePath": "src/tokens/semantic/text.tokens.json",
"isSource": true,
"original": {
"$value": "{color.neutral.400}",
"$type": "color",
"$description": "Used for disabled text.",
"$extensions": {
"com.figma.scopes": [
"TEXT_FILL"
]
},
"key": "{text.color.disabled}"
},
"name": "TEXT_COLOR_DISABLED",
"attributes": {},
"path": [
"text",
"color",
"disabled"
]
}
}
}
}