@primer/primitives

{ "ansi-black": { "key": "{ansi.black}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#d1d9e0" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.13}", "$type": "color", "$description": "ANSI black for terminal text and backgrounds", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.neutral.6}" } }, "key": "{ansi.black}" }, "name": "ansi-black", "attributes": {}, "path": ["ansi", "black"], "value": "#010409", "type": "color", "description": "ANSI black for terminal text and backgrounds" }, "ansi-blackBright": { "key": "{ansi.blackBright}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#818b98" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.11}", "$type": "color", "$description": "ANSI bright black (dark gray) for dimmed terminal text", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.neutral.8}" } }, "key": "{ansi.blackBright}" }, "name": "ansi-blackBright", "attributes": {}, "path": ["ansi", "blackBright"], "value": "#393f46", "type": "color", "description": "ANSI bright black (dark gray) for dimmed terminal text" }, "ansi-blue": { "key": "{ansi.blue}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#368cf9" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.blue.5}", "$type": "color", "$description": "ANSI blue for informational terminal text", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.blue.3}" } }, "key": "{ansi.blue}" }, "name": "ansi-blue", "attributes": {}, "path": ["ansi", "blue"], "value": "#0349b4", "type": "color", "description": "ANSI blue for informational terminal text" }, "ansi-blueBright": { "key": "{ansi.blueBright}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#67b3fd" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.blue.4}", "$type": "color", "$description": "ANSI bright blue for highlighted info in terminal", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.blue.2}" } }, "key": "{ansi.blueBright}" }, "name": "ansi-blueBright", "attributes": {}, "path": ["ansi", "blueBright"], "value": "#1168e3", "type": "color", "description": "ANSI bright blue for highlighted info in terminal" }, "ansi-cyan": { "key": "{ansi.cyan}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#39c5cf" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": { "colorSpace": "hsl", "components": [184, 65.8, 31], "hex": "#1b7c83" }, "$type": "color", "$description": "ANSI cyan for terminal text", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#39c5cf" } }, "key": "{ansi.cyan}" }, "name": "ansi-cyan", "attributes": {}, "path": ["ansi", "cyan"], "value": "#1b7c83", "type": "color", "description": "ANSI cyan for terminal text" }, "ansi-cyanBright": { "key": "{ansi.cyanBright}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#56d4dd" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": { "colorSpace": "hsl", "components": [191.9, 55.3, 42.9], "hex": "#3192aa" }, "$type": "color", "$description": "ANSI bright cyan for highlighted terminal text", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#56d4dd" } }, "key": "{ansi.cyanBright}" }, "name": "ansi-cyanBright", "attributes": {}, "path": ["ansi", "cyanBright"], "value": "#3192aa", "type": "color", "description": "ANSI bright cyan for highlighted terminal text" }, "ansi-gray": { "key": "{ansi.gray}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#818b98" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.9}", "$type": "color", "$description": "ANSI gray for secondary terminal text", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.neutral.8}" } }, "key": "{ansi.gray}" }, "name": "ansi-gray", "attributes": {}, "path": ["ansi", "gray"], "value": "#59636e", "type": "color", "description": "ANSI gray for secondary terminal text" }, "ansi-green": { "key": "{ansi.green}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#26a148", "dark-tritanopia": "#368cf9", "dark-tritanopia-high-contrast": "#368cf9", "light-tritanopia": "#023b95", "light-tritanopia-high-contrast": "#023b95", "dark-protanopia-deuteranopia": "#368cf9", "dark-protanopia-deuteranopia-high-contrast": "#368cf9", "light-protanopia-deuteranopia": "#023b95", "light-protanopia-deuteranopia-high-contrast": "#023b95" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.blue.6}", "$type": "color", "$description": "ANSI green for success indicators in terminal", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.green.3}", "dark-tritanopia": "{base.color.blue.3}", "dark-tritanopia-high-contrast": "{base.color.blue.3}", "light-tritanopia": "{base.color.blue.6}", "light-tritanopia-high-contrast": "{base.color.blue.6}", "dark-protanopia-deuteranopia": "{base.color.blue.3}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.3}", "light-protanopia-deuteranopia": "{base.color.blue.6}", "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.6}" } }, "key": "{ansi.green}" }, "name": "ansi-green", "attributes": {}, "path": ["ansi", "green"], "value": "#023b95", "type": "color", "description": "ANSI green for success indicators in terminal" }, "ansi-greenBright": { "key": "{ansi.greenBright}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#43c663", "dark-tritanopia": "#67b3fd", "dark-tritanopia-high-contrast": "#67b3fd", "light-tritanopia": "#0349b4", "light-tritanopia-high-contrast": "#0349b4", "dark-protanopia-deuteranopia": "#67b3fd", "dark-protanopia-deuteranopia-high-contrast": "#67b3fd", "light-protanopia-deuteranopia": "#0349b4", "light-protanopia-deuteranopia-high-contrast": "#0349b4" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.blue.5}", "$type": "color", "$description": "ANSI bright green for highlighted success in terminal", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.green.2}", "dark-tritanopia": "{base.color.blue.2}", "dark-tritanopia-high-contrast": "{base.color.blue.2}", "light-tritanopia": "{base.color.blue.5}", "light-tritanopia-high-contrast": "{base.color.blue.5}", "dark-protanopia-deuteranopia": "{base.color.blue.2}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.2}", "light-protanopia-deuteranopia": "{base.color.blue.5}", "light-protanopia-deuteranopia-high-contrast": "{base.color.blue.5}" } }, "key": "{ansi.greenBright}" }, "name": "ansi-greenBright", "attributes": {}, "path": ["ansi", "greenBright"], "value": "#0349b4", "type": "color", "description": "ANSI bright green for highlighted success in terminal" }, "ansi-magenta": { "key": "{ansi.magenta}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#a371f7" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.purple.5}", "$type": "color", "$description": "ANSI magenta for special terminal text", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.purple.3}" } }, "key": "{ansi.magenta}" }, "name": "ansi-magenta", "attributes": {}, "path": ["ansi", "magenta"], "value": "#622cbc", "type": "color", "description": "ANSI magenta for special terminal text" }, "ansi-magentaBright": { "key": "{ansi.magentaBright}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#c49bff" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.purple.4}", "$type": "color", "$description": "ANSI bright magenta for highlighted special text", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.purple.2}" } }, "key": "{ansi.magentaBright}" }, "name": "ansi-magentaBright", "attributes": {}, "path": ["ansi", "magentaBright"], "value": "#844ae7", "type": "color", "description": "ANSI bright magenta for highlighted special text" }, "ansi-red": { "key": "{ansi.red}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#ee5a5d", "dark-protanopia-deuteranopia": "#dc6d1a", "dark-protanopia-deuteranopia-high-contrast": "#dc6d1a", "light-protanopia-deuteranopia": "#873800", "light-protanopia-deuteranopia-high-contrast": "#873800" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.orange.5}", "$type": "color", "$description": "ANSI red for errors and alerts in terminal output", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.red.3}", "dark-protanopia-deuteranopia": "{base.color.orange.3}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.3}", "light-protanopia-deuteranopia": "{base.color.orange.5}", "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}" } }, "key": "{ansi.red}" }, "name": "ansi-red", "attributes": {}, "path": ["ansi", "red"], "value": "#873800", "type": "color", "description": "ANSI red for errors and alerts in terminal output" }, "ansi-redBright": { "key": "{ansi.redBright}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#ff8e8a", "dark-protanopia-deuteranopia": "#f99636", "dark-protanopia-deuteranopia-high-contrast": "#f99636", "light-protanopia-deuteranopia": "#702c00", "light-protanopia-deuteranopia-high-contrast": "#702c00" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.orange.6}", "$type": "color", "$description": "ANSI bright red for highlighted errors in terminal", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.red.2}", "dark-protanopia-deuteranopia": "{base.color.orange.2}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.2}", "light-protanopia-deuteranopia": "{base.color.orange.6}", "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.6}" } }, "key": "{ansi.redBright}" }, "name": "ansi-redBright", "attributes": {}, "path": ["ansi", "redBright"], "value": "#702c00", "type": "color", "description": "ANSI bright red for highlighted errors in terminal" }, "ansi-white": { "key": "{ansi.white}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#25292e" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.9}", "$type": "color", "$description": "ANSI white for terminal text", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.neutral.12}" } }, "key": "{ansi.white}" }, "name": "ansi-white", "attributes": {}, "path": ["ansi", "white"], "value": "#59636e", "type": "color", "description": "ANSI white for terminal text" }, "ansi-whiteBright": { "key": "{ansi.whiteBright}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#010409" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.8}", "$type": "color", "$description": "ANSI bright white for emphasized terminal text", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.neutral.13}" } }, "key": "{ansi.whiteBright}" }, "name": "ansi-whiteBright", "attributes": {}, "path": ["ansi", "whiteBright"], "value": "#818b98", "type": "color", "description": "ANSI bright white for emphasized terminal text" }, "ansi-yellow": { "key": "{ansi.yellow}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#b58407" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.yellow.8}", "$type": "color", "$description": "ANSI yellow for warnings in terminal output", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.yellow.3}" } }, "key": "{ansi.yellow}" }, "name": "ansi-yellow", "attributes": {}, "path": ["ansi", "yellow"], "value": "#3f2200", "type": "color", "description": "ANSI yellow for warnings in terminal output" }, "ansi-yellowBright": { "key": "{ansi.yellowBright}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#d5a824" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.yellow.7}", "$type": "color", "$description": "ANSI bright yellow for highlighted warnings in terminal", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "{base.color.yellow.2}" } }, "key": "{ansi.yellowBright}" }, "name": "ansi-yellowBright", "attributes": {}, "path": ["ansi", "yellowBright"], "value": "#4e2c00", "type": "color", "description": "ANSI bright yellow for highlighted warnings in terminal" }, "avatar-bgColor": { "key": "{avatar.bgColor}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": { "$value": "#010409", "alpha": 0.1, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "original": { "$value": "{base.color.neutral.0}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": { "$value": "{base.color.neutral.13}", "alpha": 0.1, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "key": "{avatar.bgColor}" }, "name": "avatar-bgColor", "attributes": {}, "path": ["avatar", "bgColor"], "value": "#ffffff", "type": "color" }, "avatar-borderColor": { "key": "{avatar.borderColor}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["borderColor"] }, "org.primer.overrides": { "dark-high-contrast": { "$value": "#454c54", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-dimmed-high-contrast": { "$value": "#454c54", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-high-contrast": { "$value": "#454c54", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-tritanopia-high-contrast": { "$value": "#454c54", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia-high-contrast": { "$value": "#454c54", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-tritanopia-high-contrast": { "$value": "#454c54", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#454c54", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "original": { "$value": "{borderColor.emphasis}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["borderColor"] }, "org.primer.overrides": { "dark-high-contrast": { "$value": "{borderColor.emphasis}", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-dimmed-high-contrast": { "$value": "{borderColor.emphasis}", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-high-contrast": { "$value": "{borderColor.emphasis}", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-tritanopia-high-contrast": { "$value": "{borderColor.emphasis}", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia-high-contrast": { "$value": "{borderColor.emphasis}", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-tritanopia-high-contrast": { "$value": "{borderColor.emphasis}", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "{borderColor.emphasis}", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "key": "{avatar.borderColor}" }, "name": "avatar-borderColor", "attributes": {}, "path": ["avatar", "borderColor"], "value": "#454c54", "type": "color" }, "avatar-shadow": { "key": "{avatar.shadow}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component shadow" }, "org.primer.overrides": { "dark": { "$value": [ { "color": "#f6f8fa", "alpha": 1, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 2, "unit": "px" } } ], "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "shadow" } } }, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "original": { "$value": [ { "color": "{base.color.neutral.0}", "alpha": 0.8, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 2, "unit": "px" } } ], "$type": "shadow", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component shadow" }, "org.primer.overrides": { "dark": { "$value": [ { "color": "{base.color.neutral.1}", "alpha": 1, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 2, "unit": "px" } } ], "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "shadow" } } }, "key": "{avatar.shadow}" }, "name": "avatar-shadow", "attributes": {}, "path": ["avatar", "shadow"], "value": "0 0 0 2px #ffffffcc", "type": "shadow" }, "avatarStack-fade-bgColor-default": { "key": "{avatarStack.fade.bgColor.default}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] } }, "filePath": "src/tokens/component/avatarStack.json5", "isSource": true, "original": { "$value": "{base.color.neutral.7}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] } }, "key": "{avatarStack.fade.bgColor.default}" }, "name": "avatarStack-fade-bgColor-default", "attributes": {}, "path": ["avatarStack", "fade", "bgColor", "default"], "value": "#c8d1da", "type": "color" }, "avatarStack-fade-bgColor-muted": { "key": "{avatarStack.fade.bgColor.muted}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] } }, "filePath": "src/tokens/component/avatarStack.json5", "isSource": true, "original": { "$value": "{base.color.neutral.5}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] } }, "key": "{avatarStack.fade.bgColor.muted}" }, "name": "avatarStack-fade-bgColor-muted", "attributes": {}, "path": ["avatarStack", "fade", "bgColor", "muted"], "value": "#dae0e7", "type": "color" }, "bgColor-accent-emphasis": { "key": "{bgColor.accent.emphasis}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-accent-emphasis) /* utility class: .color-bg-accent-emphasis */" } }, "org.primer.overrides": { "dark": "#0349b4", "dark-high-contrast": "#021a4a", "dark-dimmed-high-contrast": "#022f7a", "dark-tritanopia-high-contrast": "#021a4a", "dark-protanopia-deuteranopia-high-contrast": "#021a4a" }, "org.primer.llm": { "usage": ["active-states", "current", "selected", "active-toggle"], "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.blue.5}", "$type": "color", "$description": "Strong accent background for active states and focused states", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-accent-emphasis) /* utility class: .color-bg-accent-emphasis */" } }, "org.primer.overrides": { "dark": "{base.color.blue.5}", "dark-high-contrast": "{base.color.blue.9}", "dark-dimmed-high-contrast": "{base.color.blue.7}", "dark-tritanopia-high-contrast": "{base.color.blue.9}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.blue.9}" }, "org.primer.llm": { "usage": ["active-states", "current", "selected", "active-toggle"], "rules": "MUST use for selected or active states. Pair with fgColor.onEmphasis for text." } }, "key": "{bgColor.accent.emphasis}" }, "name": "bgColor-accent-emphasis", "attributes": {}, "path": ["bgColor", "accent", "emphasis"], "value": "#0349b4", "type": "color", "description": "Strong accent background for active states and focused states" }, "bgColor-accent-muted": { "key": "{bgColor.accent.muted}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-accent-muted) /* utility class: .color-bg-accent */" } }, "org.primer.overrides": { "dark": { "$value": "#1168e3", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"], "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.blue.0}", "$type": "color", "$description": "Subtle accent background for informational or selected elements", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-accent-muted) /* utility class: .color-bg-accent */" } }, "org.primer.overrides": { "dark": { "$value": "{base.color.blue.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"], "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text." } }, "key": "{bgColor.accent.muted}" }, "name": "bgColor-accent-muted", "attributes": {}, "path": ["bgColor", "accent", "muted"], "value": "#dff7ff", "type": "color", "description": "Subtle accent background for informational or selected elements" }, "bgColor-attention-emphasis": { "key": "{bgColor.attention.emphasis}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */" } }, "org.primer.overrides": { "dark-high-contrast": "#2e1800", "dark-dimmed-high-contrast": "#4e2c00", "dark-protanopia-deuteranopia-high-contrast": "#2e1800", "dark-tritanopia-high-contrast": "#2e1800" }, "org.primer.llm": { "usage": ["warning-badge", "caution-label", "attention-indicator"], "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.yellow.5}", "$type": "color", "$description": "Strong attention background for prominent warnings", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-attention-emphasis) /* utility class: .color-bg-attention-emphasis */" } }, "org.primer.overrides": { "dark-high-contrast": "{base.color.yellow.9}", "dark-dimmed-high-contrast": "{base.color.yellow.7}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.yellow.9}", "dark-tritanopia-high-contrast": "{base.color.yellow.9}" }, "org.primer.llm": { "usage": ["warning-badge", "caution-label", "attention-indicator"], "rules": "Use for prominent warnings. Consider fgColor.default for text due to yellow contrast." } }, "key": "{bgColor.attention.emphasis}" }, "name": "bgColor-attention-emphasis", "attributes": {}, "path": ["bgColor", "attention", "emphasis"], "value": "#744500", "type": "color", "description": "Strong attention background for prominent warnings" }, "bgColor-attention-muted": { "key": "{bgColor.attention.muted}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-attention-muted) /* utility class: .color-bg-attention */" } }, "org.primer.overrides": { "dark": { "$value": "#956400", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["warning-banner", "caution-message", "pending-state"], "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.yellow.0}", "$type": "color", "$description": "Subtle attention background for warnings and caution states", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-attention-muted) /* utility class: .color-bg-attention */" } }, "org.primer.overrides": { "dark": { "$value": "{base.color.yellow.4}", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["warning-banner", "caution-message", "pending-state"], "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text." } }, "key": "{bgColor.attention.muted}" }, "name": "bgColor-attention-muted", "attributes": {}, "path": ["bgColor", "attention", "muted"], "value": "#fcf7be", "type": "color", "description": "Subtle attention background for warnings and caution states" }, "bgColor-black": { "key": "{bgColor.black}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#ffffff" }, "org.primer.llm": { "doNotUse": true, "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.13}", "$type": "color", "$description": "Pure black background", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "{base.color.neutral.0}" }, "org.primer.llm": { "doNotUse": true, "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings." } }, "key": "{bgColor.black}" }, "name": "bgColor-black", "attributes": {}, "path": ["bgColor", "black"], "value": "#010409", "type": "color", "description": "Pure black background" }, "bgColor-closed-emphasis": { "key": "{bgColor.closed.emphasis}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */" } }, "org.primer.overrides": { "light-tritanopia": "#454c54", "light-tritanopia-high-contrast": "#454c54", "dark-tritanopia": "#454c54", "dark-tritanopia-high-contrast": "#454c54", "light-protanopia-deuteranopia": "#454c54", "light-protanopia-deuteranopia-high-contrast": "#454c54", "dark-protanopia-deuteranopia": "#454c54", "dark-protanopia-deuteranopia-high-contrast": "#454c54" }, "org.primer.llm": { "usage": ["closed-badge", "closed-label", "declined-status-badge"], "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.neutral.emphasis}", "$type": "color", "$description": "Strong background for closed state badges and labels", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-closed-emphasis) /* utility class: .color-bg-closed-emphasis */" } }, "org.primer.overrides": { "light-tritanopia": "{bgColor.neutral.emphasis}", "light-tritanopia-high-contrast": "{bgColor.neutral.emphasis}", "dark-tritanopia": "{bgColor.neutral.emphasis}", "dark-tritanopia-high-contrast": "{bgColor.neutral.emphasis}", "light-protanopia-deuteranopia": "{bgColor.neutral.emphasis}", "light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}", "dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}", "dark-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.emphasis}" }, "org.primer.llm": { "usage": ["closed-badge", "closed-label", "declined-status-badge"], "rules": "Use for prominent closed/declined state indicators. Pair with fgColor.onEmphasis for text." } }, "key": "{bgColor.closed.emphasis}" }, "name": "bgColor-closed-emphasis", "attributes": {}, "path": ["bgColor", "closed", "emphasis"], "value": "#454c54", "type": "color", "description": "Strong background for closed state badges and labels" }, "bgColor-closed-muted": { "key": "{bgColor.closed.muted}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-closed-muted) /* utility class: .color-bg-closed */" } }, "org.primer.overrides": { "light-tritanopia": "#e0e6eb", "light-tritanopia-high-contrast": "#e0e6eb", "dark-tritanopia": { "$value": "#e0e6eb", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#e0e6eb", "light-protanopia-deuteranopia-high-contrast": "#e0e6eb", "dark-protanopia-deuteranopia": { "$value": "#e0e6eb", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#e0e6eb", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["closed-issue", "closed-pr", "declined-state"], "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.neutral.muted}", "$type": "color", "$description": "Subtle background for closed state indicators (issues, PRs)", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-closed-muted) /* utility class: .color-bg-closed */" } }, "org.primer.overrides": { "light-tritanopia": "{bgColor.neutral.muted}", "light-tritanopia-high-contrast": "{bgColor.neutral.muted}", "dark-tritanopia": { "$value": "{bgColor.neutral.muted}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "{bgColor.neutral.muted}", "light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.muted}", "dark-protanopia-deuteranopia": { "$value": "{bgColor.neutral.muted}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "{bgColor.neutral.muted}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["closed-issue", "closed-pr", "declined-state"], "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs." } }, "key": "{bgColor.closed.muted}" }, "name": "bgColor-closed-muted", "attributes": {}, "path": ["bgColor", "closed", "muted"], "value": "#e0e6eb", "type": "color", "description": "Subtle background for closed state indicators (issues, PRs)" }, "bgColor-danger-emphasis": { "key": "{bgColor.danger.emphasis}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */" } }, "org.primer.overrides": { "light-protanopia-deuteranopia": "#873800", "light-protanopia-deuteranopia-high-contrast": "#873800", "dark-protanopia-deuteranopia": "#873800", "dark-protanopia-deuteranopia-high-contrast": "#361200", "dark-high-contrast": "#430011", "dark-dimmed-high-contrast": "#6e011a", "dark-tritanopia-high-contrast": "#430011" }, "org.primer.llm": { "usage": ["delete-button", "critical-alert", "destructive-confirmation"], "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.orange.5}", "$type": "color", "$description": "Emphasized danger background for critical errors and delete confirmations", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-danger-emphasis) /* utility class: .color-bg-danger-emphasis */" } }, "org.primer.overrides": { "light-protanopia-deuteranopia": "{base.color.orange.5}", "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.5}", "dark-protanopia-deuteranopia": "{base.color.orange.5}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.orange.9}", "dark-high-contrast": "{base.color.red.9}", "dark-dimmed-high-contrast": "{base.color.red.7}", "dark-tritanopia-high-contrast": "{base.color.red.9}" }, "org.primer.llm": { "usage": ["delete-button", "critical-alert", "destructive-confirmation"], "rules": "MUST use for destructive action buttons like delete. Use fgColor.onEmphasis for text on this background." } }, "key": "{bgColor.danger.emphasis}" }, "name": "bgColor-danger-emphasis", "attributes": {}, "path": ["bgColor", "danger", "emphasis"], "value": "#873800", "type": "color", "description": "Emphasized danger background for critical errors and delete confirmations" }, "bgColor-danger-muted": { "key": "{bgColor.danger.muted}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-danger-muted) /* utility class: .color-bg-danger */" } }, "org.primer.overrides": { "dark": { "$value": "#d5232c", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#fff2d5", "light-protanopia-deuteranopia-high-contrast": "#fff2d5", "dark-protanopia-deuteranopia": { "$value": "#b45105", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["error-message", "destructive-action", "validation-error"], "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.orange.0}", "$type": "color", "$description": "Muted danger background for error states and destructive action contexts", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-danger-muted) /* utility class: .color-bg-danger */" } }, "org.primer.overrides": { "dark": { "$value": "{base.color.red.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "{base.color.orange.0}", "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.0}", "dark-protanopia-deuteranopia": { "$value": "{base.color.orange.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["error-message", "destructive-action", "validation-error"], "rules": "Use for error states and destructive action backgrounds.