@gitlab/ui
Version:
GitLab UI Components
1,916 lines • 1.06 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": "#4c4b51",
"$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.700}",
"$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": "#3a383f",
"$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.800}",
"$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": "#626168",
"$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.600}",
"$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": "#18171d",
"$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": "{background.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",
"$extensions": {
"com.figma.scopes": []
},
"filePath": "src/tokens/constant/color.alpha.tokens.json",
"isSource": true,
"original": {
"$value": "rgba(255, 255, 255, 0.36)",
"$type": "color",
"$extensions": {
"com.figma.scopes": []
},
"key": "{color.alpha.light.36}"
},
"name": "COLOR_ALPHA_LIGHT_36",
"attributes": {},
"path": [
"color",
"alpha",
"light",
"36"
]
}
}
},
"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"