@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": "#58a6ff" } }, "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": "#58a6ff", "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": "#79c0ff" } }, "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": "#79c0ff", "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": "#3fb950", "dark-tritanopia": "#58a6ff", "dark-tritanopia-high-contrast": "#58a6ff", "light-tritanopia": "#1158c7", "light-tritanopia-high-contrast": "#1158c7", "dark-protanopia-deuteranopia": "#58a6ff", "dark-protanopia-deuteranopia-high-contrast": "#58a6ff", "light-protanopia-deuteranopia": "#1158c7", "light-protanopia-deuteranopia-high-contrast": "#1158c7" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.blue.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": "#58a6ff", "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": "#56d364", "dark-tritanopia": "#79c0ff", "dark-tritanopia-high-contrast": "#79c0ff", "light-tritanopia": "#1f6feb", "light-tritanopia-high-contrast": "#1f6feb", "dark-protanopia-deuteranopia": "#79c0ff", "dark-protanopia-deuteranopia-high-contrast": "#79c0ff", "light-protanopia-deuteranopia": "#1f6feb", "light-protanopia-deuteranopia-high-contrast": "#1f6feb" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.blue.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": "#79c0ff", "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": "#be8fff" } }, "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": "#be8fff", "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": "#d2a8ff" } }, "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": "#d2a8ff", "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": "#ff7b72", "dark-protanopia-deuteranopia": "#f0883e", "dark-protanopia-deuteranopia-high-contrast": "#f0883e", "light-protanopia-deuteranopia": "#bd561d", "light-protanopia-deuteranopia-high-contrast": "#bd561d" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.orange.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": "#f0883e", "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": "#ffa198", "dark-protanopia-deuteranopia": "#ffa657", "dark-protanopia-deuteranopia-high-contrast": "#ffa657", "light-protanopia-deuteranopia": "#9b4215", "light-protanopia-deuteranopia-high-contrast": "#9b4215" } }, "filePath": "src/tokens/functional/color/syntax.json5", "isSource": true, "original": { "$value": "{base.color.orange.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": "#ffa657", "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": "#d29922" } }, "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": "#d29922", "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": "#e3b341" } }, "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": "#e3b341", "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": "#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": "#ffffff26", "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": "#1f6feb", "dark-high-contrast": "#051d4d", "dark-dimmed-high-contrast": "#0d419d", "dark-tritanopia-high-contrast": "#051d4d", "dark-protanopia-deuteranopia-high-contrast": "#051d4d" }, "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": "#1f6feb", "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": "#388bfd", "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": "#388bfd1a", "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": "#341a00", "dark-dimmed-high-contrast": "#693e00", "dark-protanopia-deuteranopia-high-contrast": "#341a00", "dark-tritanopia-high-contrast": "#341a00" }, "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": "#9e6a03", "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": "#bb8009", "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": "#bb800926", "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.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": "#656c76", "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, "alpha": 0.1, "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." } }, "alpha": 0.1, "key": "{bgColor.closed.muted}" }, "name": "bgColor-closed-muted", "attributes": {}, "path": ["bgColor", "closed", "muted"], "value": "#656c761a", "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": "#bd561d", "light-protanopia-deuteranopia-high-contrast": "#bd561d", "dark-protanopia-deuteranopia": "#bd561d", "dark-protanopia-deuteranopia-high-contrast": "#3d1300", "dark-high-contrast": "#490202", "dark-dimmed-high-contrast": "#8e1519", "dark-tritanopia-high-contrast": "#490202" }, "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": "#bd561d", "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": "#f85149", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#ffdfb6", "light-protanopia-deuteranopia-high-contrast": "#ffdfb6", "dark-protanopia-deuteranopia": { "$value": "#db6d28", "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.orange.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 backgrou