@primer/primitives

{ "ansi-black": { "key": "{ansi.black}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "syntax" }, "org.primer.overrides": { "dark": "#2f3742" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.6}", "$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": "#2f3742", "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": "#656c76" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.8}", "$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": "#656c76", "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": "#71b7ff" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.blue.3}", "$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": "#71b7ff", "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": "#91cbff" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.blue.2}", "$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": "#91cbff", "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": "#39c5cf", "$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": "#39c5cf", "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": "#56d4dd", "$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": "#56d4dd", "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": "#656c76" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.8}", "$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": "#656c76", "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": "#28d751", "dark-tritanopia": "#71b7ff", "dark-tritanopia-high-contrast": "#71b7ff", "light-tritanopia": "#318bf8", "light-tritanopia-high-contrast": "#318bf8", "dark-protanopia-deuteranopia": "#71b7ff", "dark-protanopia-deuteranopia-high-contrast": "#71b7ff", "light-protanopia-deuteranopia": "#318bf8", "light-protanopia-deuteranopia-high-contrast": "#318bf8" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.green.3}", "$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": "#28d751", "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": "#4ae168", "dark-tritanopia": "#91cbff", "dark-tritanopia-high-contrast": "#91cbff", "light-tritanopia": "#409eff", "light-tritanopia-high-contrast": "#409eff", "dark-protanopia-deuteranopia": "#91cbff", "dark-protanopia-deuteranopia-high-contrast": "#91cbff", "light-protanopia-deuteranopia": "#409eff", "light-protanopia-deuteranopia-high-contrast": "#409eff" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.green.2}", "$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": "#4ae168", "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": "#cb9eff" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.purple.3}", "$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": "#cb9eff", "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": "#dbb7ff" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.purple.2}", "$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": "#dbb7ff", "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": "#ff9492", "dark-protanopia-deuteranopia": "#fe9a2d", "dark-protanopia-deuteranopia-high-contrast": "#fe9a2d", "light-protanopia-deuteranopia": "#e7811d", "light-protanopia-deuteranopia-high-contrast": "#e7811d" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.red.3}", "$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": "#ff9492", "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": "#ffb1af", "dark-protanopia-deuteranopia": "#ffb757", "dark-protanopia-deuteranopia-high-contrast": "#ffb757", "light-protanopia-deuteranopia": "#d57014", "light-protanopia-deuteranopia-high-contrast": "#d57014" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.red.2}", "$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": "#ffb1af", "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": "#f0f6fc" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.12}", "$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": "#f0f6fc", "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": "#ffffff" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.neutral.13}", "$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": "#ffffff", "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": "#f0b72f" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.yellow.3}", "$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": "#f0b72f", "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": "#f7c843" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.yellow.2}", "$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": "#f7c843", "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": "#ffffff", "alpha": 0.1, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "alpha": 0.1, "original": { "$value": "{base.color.neutral.13}", "$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" } } }, "alpha": 0.1, "key": "{avatar.bgColor}" }, "name": "avatar-bgColor", "attributes": {}, "path": ["avatar", "bgColor"], "value": "#ffffff1a", "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": "#b7bdc8", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-dimmed-high-contrast": { "$value": "#b7bdc8", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-high-contrast": { "$value": "#b7bdc8", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-tritanopia-high-contrast": { "$value": "#b7bdc8", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia-high-contrast": { "$value": "#b7bdc8", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-tritanopia-high-contrast": { "$value": "#b7bdc8", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#b7bdc8", "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": "#b7bdc8", "type": "color" }, "avatar-shadow": { "key": "{avatar.shadow}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component shadow" }, "org.primer.overrides": { "dark": { "$value": [ { "color": "#0d1117", "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.1}", "alpha": 1, "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 #0d1117", "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": "#3d444d", "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": "#2a313c", "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": "#409eff", "dark-high-contrast": "#194fb1", "dark-dimmed-high-contrast": "#2672f3", "dark-tritanopia-high-contrast": "#194fb1", "dark-protanopia-deuteranopia-high-contrast": "#194fb1" }, "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.9}", "$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": "#194fb1", "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": "#5cacff", "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, "alpha": 0.1, "original": { "$value": "{base.color.blue.4}", "$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." } }, "alpha": 0.1, "key": "{bgColor.accent.muted}" }, "name": "bgColor-accent-muted", "attributes": {}, "path": ["bgColor", "accent", "muted"], "value": "#5cacff1a", "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": "#7b4900", "dark-dimmed-high-contrast": "#ae7104", "dark-protanopia-deuteranopia-high-contrast": "#7b4900", "dark-tritanopia-high-contrast": "#7b4900" }, "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.9}", "$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": "#7b4900", "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": "#edaa27", "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, "alpha": 0.15, "original": { "$value": "{base.color.yellow.4}", "$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." } }, "alpha": 0.15, "key": "{bgColor.attention.muted}" }, "name": "bgColor-attention-muted", "attributes": {}, "path": ["bgColor", "attention", "muted"], "value": "#edaa2726", "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": "#010409" }, "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.0}", "$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": "#3d444d", "light-tritanopia-high-contrast": "#3d444d", "dark-tritanopia": "#3d444d", "dark-tritanopia-high-contrast": "#3d444d", "light-protanopia-deuteranopia": "#3d444d", "light-protanopia-deuteranopia-high-contrast": "#3d444d", "dark-protanopia-deuteranopia": "#3d444d", "dark-protanopia-deuteranopia-high-contrast": "#3d444d" }, "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.danger.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": "#ad0116", "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": "#212830", "light-tritanopia-high-contrast": "#212830", "dark-tritanopia": { "$value": "#212830", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#212830", "light-protanopia-deuteranopia-high-contrast": "#212830", "dark-protanopia-deuteranopia": { "$value": "#212830", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#212830", "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.danger.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": "#ff80801a", "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": "#e7811d", "light-protanopia-deuteranopia-high-contrast": "#e7811d", "dark-protanopia-deuteranopia": "#e7811d", "dark-protanopia-deuteranopia-high-contrast": "#8f3c00", "dark-high-contrast": "#ad0116", "dark-dimmed-high-contrast": "#e82a2f", "dark-tritanopia-high-contrast": "#ad0116" }, "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.red.9}", "$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": "#ad0116", "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": "#ff8080", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#ffe1b4", "light-protanopia-deuteranopia-high-contrast": "#ffe1b4", "dark-protanopia-deuteranopia": { "$value": "#f48b25", "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, "alpha": 0.1, "original": { "$value": "{base.color.red.4}", "$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. Pair with fgColor.danger for text." } }, "al