@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": "#539bf5" } }, "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": "#539bf5", "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": "#6cb6ff" } }, "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": "#6cb6ff", "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": "#57ab5a", "dark-tritanopia": "#539bf5", "dark-tritanopia-high-contrast": "#539bf5", "light-tritanopia": "#255ab2", "light-tritanopia-high-contrast": "#255ab2", "dark-protanopia-deuteranopia": "#539bf5", "dark-protanopia-deuteranopia-high-contrast": "#539bf5", "light-protanopia-deuteranopia": "#255ab2", "light-protanopia-deuteranopia-high-contrast": "#255ab2" } }, "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": "#57ab5a", "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": "#6bc46d", "dark-tritanopia": "#6cb6ff", "dark-tritanopia-high-contrast": "#6cb6ff", "light-tritanopia": "#316dca", "light-tritanopia-high-contrast": "#316dca", "dark-protanopia-deuteranopia": "#6cb6ff", "dark-protanopia-deuteranopia-high-contrast": "#6cb6ff", "light-protanopia-deuteranopia": "#316dca", "light-protanopia-deuteranopia-high-contrast": "#316dca" } }, "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": "#6bc46d", "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": "#b083f0" } }, "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": "#b083f0", "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": "#dcbdfb" } }, "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": "#dcbdfb", "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": "#f47067", "dark-protanopia-deuteranopia": "#e0823d", "dark-protanopia-deuteranopia-high-contrast": "#e0823d", "light-protanopia-deuteranopia": "#ae5622", "light-protanopia-deuteranopia-high-contrast": "#ae5622" } }, "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": "#f47067", "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": "#ff938a", "dark-protanopia-deuteranopia": "#f69d50", "dark-protanopia-deuteranopia-high-contrast": "#f69d50", "light-protanopia-deuteranopia": "#94471b", "light-protanopia-deuteranopia-high-contrast": "#94471b" } }, "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": "#ff938a", "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": "#cdd9e5" } }, "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": "#cdd9e5", "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": "#c69026" } }, "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": "#c69026", "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": "#daaa3f" } }, "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": "#daaa3f", "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": "#cdd9e5", "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": "#cdd9e51a", "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": "#656c76", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-dimmed-high-contrast": { "$value": "#656c76", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-high-contrast": { "$value": "#656c76", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-tritanopia-high-contrast": { "$value": "#656c76", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia-high-contrast": { "$value": "#656c76", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-tritanopia-high-contrast": { "$value": "#656c76", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#656c76", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "original": { "$value": "{borderColor.translucent}", "$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": "#cdd9e526", "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": "#316dca", "dark-high-contrast": "#0f2d5c", "dark-dimmed-high-contrast": "#1b4b91", "dark-tritanopia-high-contrast": "#0f2d5c", "dark-protanopia-deuteranopia-high-contrast": "#0f2d5c" }, "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": "#316dca", "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": "#4184e4", "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": "#4184e41a", "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": "#452700", "dark-dimmed-high-contrast": "#6c4400", "dark-protanopia-deuteranopia-high-contrast": "#452700", "dark-tritanopia-high-contrast": "#452700" }, "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": "#966600", "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": "#ae7c14", "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": "#ae7c1426", "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": "#656c76", "light-tritanopia-high-contrast": "#656c76", "dark-tritanopia": "#656c76", "dark-tritanopia-high-contrast": "#656c76", "light-protanopia-deuteranopia": "#656c76", "light-protanopia-deuteranopia-high-contrast": "#656c76", "dark-protanopia-deuteranopia": "#656c76", "dark-protanopia-deuteranopia-high-contrast": "#656c76" }, "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": "#c93c37", "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": "#656c7633", "light-tritanopia-high-contrast": "#656c7633", "dark-tritanopia": { "$value": "#656c7633", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#656c7633", "light-protanopia-deuteranopia-high-contrast": "#656c7633", "dark-protanopia-deuteranopia": { "$value": "#656c7633", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#656c7633", "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": "#e5534b1a", "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": "#ae5622", "light-protanopia-deuteranopia-high-contrast": "#ae5622", "dark-protanopia-deuteranopia": "#ae5622", "dark-protanopia-deuteranopia-high-contrast": "#4d210c", "dark-high-contrast": "#5d0f12", "dark-dimmed-high-contrast": "#922323", "dark-tritanopia-high-contrast": "#5d0f12" }, "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.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": "#c93c37", "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": "#e5534b", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#ffddb0", "light-protanopia-deuteranopia-high-contrast": "#ffddb0", "dark-protanopia-deuteranopia": { "$value": "#cc6b2c", "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." }