@primer/primitives

{ "avatar-bgColor": { "key": "{avatar.bgColor}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": { "$value": "#1f2328", "alpha": 0.1, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "original": { "$value": "{base.color.neutral.0}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": { "$value": "{base.color.neutral.13}", "alpha": 0.1, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "key": "{avatar.bgColor}" }, "name": "avatar-bgColor", "attributes": {}, "path": ["avatar", "bgColor"], "value": "#ffffff", "type": "color" }, "avatar-borderColor": { "key": "{avatar.borderColor}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["borderColor"] }, "org.primer.overrides": { "dark-high-contrast": { "$value": "#818b98", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-dimmed-high-contrast": { "$value": "#818b98", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-high-contrast": { "$value": "#818b98", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-tritanopia-high-contrast": { "$value": "#818b98", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia-high-contrast": { "$value": "#818b98", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-tritanopia-high-contrast": { "$value": "#818b98", "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#818b98", "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": "#1f232826", "type": "color" }, "avatar-shadow": { "key": "{avatar.shadow}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component shadow" }, "org.primer.overrides": { "dark": { "$value": [ { "color": "#f6f8fa", "alpha": 1, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 2, "unit": "px" } } ], "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "shadow" } } }, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "original": { "$value": [ { "color": "{base.color.neutral.0}", "alpha": 0.8, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 2, "unit": "px" } } ], "$type": "shadow", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component shadow" }, "org.primer.overrides": { "dark": { "$value": [ { "color": "{base.color.neutral.1}", "alpha": 1, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 0, "unit": "px" }, "spread": { "value": 2, "unit": "px" } } ], "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "shadow" } } }, "key": "{avatar.shadow}" }, "name": "avatar-shadow", "attributes": {}, "path": ["avatar", "shadow"], "value": "0 0 0 2px #ffffffcc", "type": "shadow" }, "avatarStack-fade-bgColor-default": { "key": "{avatarStack.fade.bgColor.default}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] } }, "filePath": "src/tokens/component/avatarStack.json5", "isSource": true, "original": { "$value": "{base.color.neutral.7}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] } }, "key": "{avatarStack.fade.bgColor.default}" }, "name": "avatarStack-fade-bgColor-default", "attributes": {}, "path": ["avatarStack", "fade", "bgColor", "default"], "value": "#c8d1da", "type": "color" }, "avatarStack-fade-bgColor-muted": { "key": "{avatarStack.fade.bgColor.muted}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] } }, "filePath": "src/tokens/component/avatarStack.json5", "isSource": true, "original": { "$value": "{base.color.neutral.5}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["bgColor"] } }, "key": "{avatarStack.fade.bgColor.muted}" }, "name": "avatarStack-fade-bgColor-muted", "attributes": {}, "path": ["avatarStack", "fade", "bgColor", "muted"], "value": "#dae0e7", "type": "color" }, "bgColor-accent-emphasis": { "key": "{bgColor.accent.emphasis}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-accent-emphasis) /* utility class: .color-bg-accent-emphasis */" } }, "org.primer.overrides": { "dark": "#0969da", "dark-high-contrast": "#002155", "dark-dimmed-high-contrast": "#033d8b", "dark-tritanopia-high-contrast": "#002155", "dark-protanopia-deuteranopia-high-contrast": "#002155" }, "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": "#0969da", "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": "#218bff", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"], "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.blue.0}", "$type": "color", "$description": "Subtle accent background for informational or selected elements", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-accent-muted) /* utility class: .color-bg-accent */" } }, "org.primer.overrides": { "dark": { "$value": "{base.color.blue.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["selected-row", "info-banner", "active-nav-item", "highlight"], "rules": "Use for selected states or informational highlights. Pair with fgColor.accent for text." } }, "key": "{bgColor.accent.muted}" }, "name": "bgColor-accent-muted", "attributes": {}, "path": ["bgColor", "accent", "muted"], "value": "#ddf4ff", "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": "#3b2300", "dark-dimmed-high-contrast": "#633c01", "dark-protanopia-deuteranopia-high-contrast": "#3b2300", "dark-tritanopia-high-contrast": "#3b2300" }, "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": "#9a6700", "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": "#bf8700", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["warning-banner", "caution-message", "pending-state"], "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.yellow.0}", "$type": "color", "$description": "Subtle attention background for warnings and caution states", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-attention-muted) /* utility class: .color-bg-attention */" } }, "org.primer.overrides": { "dark": { "$value": "{base.color.yellow.4}", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["warning-banner", "caution-message", "pending-state"], "rules": "Use for warnings that need user attention. Pair with fgColor.attention for text." } }, "key": "{bgColor.attention.muted}" }, "name": "bgColor-attention-muted", "attributes": {}, "path": ["bgColor", "attention", "muted"], "value": "#fff8c5", "type": "color", "description": "Subtle attention background for warnings and caution states" }, "bgColor-black": { "key": "{bgColor.black}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#ffffff" }, "org.primer.llm": { "doNotUse": true, "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.13}", "$type": "color", "$description": "Pure black background", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "{base.color.neutral.0}" }, "org.primer.llm": { "doNotUse": true, "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings." } }, "key": "{bgColor.black}" }, "name": "bgColor-black", "attributes": {}, "path": ["bgColor", "black"], "value": "#1f2328", "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": "#59636e", "light-tritanopia-high-contrast": "#59636e", "dark-tritanopia": "#59636e", "dark-tritanopia-high-contrast": "#59636e", "light-protanopia-deuteranopia": "#59636e", "light-protanopia-deuteranopia-high-contrast": "#59636e", "dark-protanopia-deuteranopia": "#59636e", "dark-protanopia-deuteranopia-high-contrast": "#59636e" }, "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": "#59636e", "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": "#818b981f", "light-tritanopia-high-contrast": "#818b981f", "dark-tritanopia": { "$value": "#818b981f", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#818b981f", "light-protanopia-deuteranopia-high-contrast": "#818b981f", "dark-protanopia-deuteranopia": { "$value": "#818b981f", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#818b981f", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["closed-issue", "closed-pr", "declined-state"], "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.neutral.muted}", "$type": "color", "$description": "Subtle background for closed state indicators (issues, PRs)", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-closed-muted) /* utility class: .color-bg-closed */" } }, "org.primer.overrides": { "light-tritanopia": "{bgColor.neutral.muted}", "light-tritanopia-high-contrast": "{bgColor.neutral.muted}", "dark-tritanopia": { "$value": "{bgColor.neutral.muted}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "{bgColor.neutral.muted}", "light-protanopia-deuteranopia-high-contrast": "{bgColor.neutral.muted}", "dark-protanopia-deuteranopia": { "$value": "{bgColor.neutral.muted}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "{bgColor.neutral.muted}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["closed-issue", "closed-pr", "declined-state"], "rules": "Use for closed/declined status indicators. Specifically for GitHub issues and PRs." } }, "key": "{bgColor.closed.muted}" }, "name": "bgColor-closed-muted", "attributes": {}, "path": ["bgColor", "closed", "muted"], "value": "#818b981f", "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": "#bc4c00", "light-protanopia-deuteranopia-high-contrast": "#bc4c00", "dark-protanopia-deuteranopia": "#bc4c00", "dark-protanopia-deuteranopia-high-contrast": "#471700", "dark-high-contrast": "#4c0014", "dark-dimmed-high-contrast": "#82071e", "dark-tritanopia-high-contrast": "#4c0014" }, "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": "#cf222e", "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": "#fa4549", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#fff1e5", "light-protanopia-deuteranopia-high-contrast": "#fff1e5", "dark-protanopia-deuteranopia": { "$value": "#e16f24", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["error-message", "destructive-action", "validation-error"], "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.red.0}", "$type": "color", "$description": "Muted danger background for error states and destructive action contexts", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-danger-muted) /* utility class: .color-bg-danger */" } }, "org.primer.overrides": { "dark": { "$value": "{base.color.red.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "{base.color.orange.0}", "light-protanopia-deuteranopia-high-contrast": "{base.color.orange.0}", "dark-protanopia-deuteranopia": { "$value": "{base.color.orange.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["error-message", "destructive-action", "validation-error"], "rules": "Use for error states and destructive action backgrounds. Pair with fgColor.danger for text." } }, "key": "{bgColor.danger.muted}" }, "name": "bgColor-danger-muted", "attributes": {}, "path": ["bgColor", "danger", "muted"], "value": "#ffebe9", "type": "color", "description": "Muted danger background for error states and destructive action contexts" }, "bgColor-default": { "key": "{bgColor.default}", "$extensions": { "org.primer.figma": { "collection": "mode", "scopes": ["bgColor", "borderColor"], "group": "semantic", "codeSyntax": { "web": "var(--bgColor-default) /* utility class: .color-bg-default */" } }, "org.primer.overrides": { "dark": "#f6f8fa", "dark-dimmed": "#e6eaef", "dark-dimmed-high-contrast": "#e6eaef", "dark-high-contrast": "#ffffff", "dark-tritanopia-high-contrast": "#ffffff", "dark-protanopia-deuteranopia-high-contrast": "#ffffff" }, "org.primer.llm": { "usage": ["page-background", "main-content", "card-background"], "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.0}", "$type": "color", "$description": "Default background color for pages and main content areas", "$extensions": { "org.primer.figma": { "collection": "mode", "scopes": ["bgColor", "borderColor"], "group": "semantic", "codeSyntax": { "web": "var(--bgColor-default) /* utility class: .color-bg-default */" } }, "org.primer.overrides": { "dark": "{base.color.neutral.1}", "dark-dimmed": "{base.color.neutral.3}", "dark-dimmed-high-contrast": "{base.color.neutral.3}", "dark-high-contrast": "{base.color.neutral.0}", "dark-tritanopia-high-contrast": "{base.color.neutral.0}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.0}" }, "org.primer.llm": { "usage": ["page-background", "main-content", "card-background"], "rules": "Use as the primary background for pages and content areas. Do NOT use for emphasis or highlighting." } }, "key": "{bgColor.default}" }, "name": "bgColor-default", "attributes": {}, "path": ["bgColor", "default"], "value": "#ffffff", "type": "color", "description": "Default background color for pages and main content areas" }, "bgColor-disabled": { "key": "{bgColor.disabled}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#e6eaef", "dark-dimmed": "#dae0e7", "dark-dimmed-high-contrast": "#dae0e7", "light-high-contrast": "#e0e6eb", "light-tritanopia-high-contrast": "#e0e6eb", "light-protanopia-deuteranopia-high-contrast": "#e0e6eb", "dark-high-contrast": "#e0e6eb", "dark-tritanopia-high-contrast": "#e0e6eb", "dark-protanopia-deuteranopia-high-contrast": "#e0e6eb" }, "org.primer.llm": { "usage": ["disabled-button", "disabled-input", "inactive-element"], "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.2}", "$type": "color", "$description": "Background for disabled interactive elements", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "{base.color.neutral.3}", "dark-dimmed": "{base.color.neutral.5}", "dark-dimmed-high-contrast": "{base.color.neutral.5}", "light-high-contrast": "{base.color.neutral.4}", "light-tritanopia-high-contrast": "{base.color.neutral.4}", "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}", "dark-high-contrast": "{base.color.neutral.4}", "dark-tritanopia-high-contrast": "{base.color.neutral.4}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.4}" }, "org.primer.llm": { "usage": ["disabled-button", "disabled-input", "inactive-element"], "rules": "MUST use for disabled state backgrounds. Pair with fgColor.disabled for text. Do NOT use for active elements." } }, "key": "{bgColor.disabled}" }, "name": "bgColor-disabled", "attributes": {}, "path": ["bgColor", "disabled"], "value": "#eff2f5", "type": "color", "description": "Background for disabled interactive elements" }, "bgColor-done-emphasis": { "key": "{bgColor.done.emphasis}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-done-emphasis) /* utility class: .color-bg-done-emphasis */" } }, "org.primer.overrides": { "dark-high-contrast": "#2e1461", "dark-dimmed-high-contrast": "#512a97", "dark-tritanopia-high-contrast": "#2e1461", "dark-protanopia-deuteranopia-high-contrast": "#2e1461" }, "org.primer.llm": { "usage": ["done-badge", "merged-label", "completed-indicator"], "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.purple.5}", "$type": "color", "$description": "Strong background for completed/done state badges and labels", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-done-emphasis) /* utility class: .color-bg-done-emphasis */" } }, "org.primer.overrides": { "dark-high-contrast": "{base.color.purple.9}", "dark-dimmed-high-contrast": "{base.color.purple.7}", "dark-tritanopia-high-contrast": "{base.color.purple.9}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.purple.9}" }, "org.primer.llm": { "usage": ["done-badge", "merged-label", "completed-indicator"], "rules": "Use for prominent done/completed state indicators. Pair with fgColor.onEmphasis for text." } }, "key": "{bgColor.done.emphasis}" }, "name": "bgColor-done-emphasis", "attributes": {}, "path": ["bgColor", "done", "emphasis"], "value": "#8250df", "type": "color", "description": "Strong background for completed/done state badges and labels" }, "bgColor-done-muted": { "key": "{bgColor.done.muted}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-done-muted) /* utility class: .color-bg-done */" } }, "org.primer.overrides": { "dark": { "$value": "#a475f9", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["completed-task", "merged-pr", "done-state"], "rules": "Use for completed/done status indicators. Conveys finished or merged state." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.purple.0}", "$type": "color", "$description": "Subtle background for completed/done state indicators", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-done-muted) /* utility class: .color-bg-done */" } }, "org.primer.overrides": { "dark": { "$value": "{base.color.purple.4}", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["completed-task", "merged-pr", "done-state"], "rules": "Use for completed/done status indicators. Conveys finished or merged state." } }, "key": "{bgColor.done.muted}" }, "name": "bgColor-done-muted", "attributes": {}, "path": ["bgColor", "done", "muted"], "value": "#fbefff", "type": "color", "description": "Subtle background for completed/done state indicators" }, "bgColor-draft-emphasis": { "key": "{bgColor.draft.emphasis}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-draft-emphasis)" } }, "org.primer.llm": { "usage": ["draft-badge", "draft-label", "wip-indicator"], "rules": "Use for prominent draft 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 draft state badges and labels", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-draft-emphasis)" } }, "org.primer.llm": { "usage": ["draft-badge", "draft-label", "wip-indicator"], "rules": "Use for prominent draft state indicators. Pair with fgColor.onEmphasis for text." } }, "key": "{bgColor.draft.emphasis}" }, "name": "bgColor-draft-emphasis", "attributes": {}, "path": ["bgColor", "draft", "emphasis"], "value": "#59636e", "type": "color", "description": "Strong background for draft state badges and labels" }, "bgColor-draft-muted": { "key": "{bgColor.draft.muted}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-draft-muted)" } }, "org.primer.overrides": { "light-tritanopia": "#818b981f", "light-tritanopia-high-contrast": "#818b981f", "dark-tritanopia": { "$value": "#818b981f", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#818b981f", "light-protanopia-deuteranopia-high-contrast": "#818b981f", "dark-protanopia-deuteranopia": { "$value": "#818b981f", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#818b981f", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } }, "org.primer.llm": { "usage": ["draft-pr", "draft-issue", "work-in-progress"], "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.neutral.muted}", "$type": "color", "$description": "Subtle background for draft state indicators", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-draft-muted)" } }, "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": ["draft-pr", "draft-issue", "work-in-progress"], "rules": "Use for draft/WIP status indicators. Conveys incomplete or pending state." } }, "key": "{bgColor.draft.muted}" }, "name": "bgColor-draft-muted", "attributes": {}, "path": ["bgColor", "draft", "muted"], "value": "#818b981f", "type": "color", "description": "Subtle background for draft state indicators" }, "bgColor-emphasis": { "key": "{bgColor.emphasis}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-emphasis) /* utility class: .color-bg-emphasis */" } }, "org.primer.overrides": { "dark": "#c8d1da" }, "org.primer.llm": { "usage": ["tooltip", "badge-background", "high-contrast-element"], "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.12}", "$type": "color", "$description": "High-emphasis dark background for strong visual contrast", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-emphasis) /* utility class: .color-bg-emphasis */" } }, "org.primer.overrides": { "dark": "{base.color.neutral.7}" }, "org.primer.llm": { "usage": ["tooltip", "badge-background", "high-contrast-element"], "rules": "Use for elements needing strong visual emphasis. Pair with fgColor.onEmphasis for text. Do NOT use for large areas." } }, "key": "{bgColor.emphasis}" }, "name": "bgColor-emphasis", "attributes": {}, "path": ["bgColor", "emphasis"], "value": "#25292e", "type": "color", "description": "High-emphasis dark background for strong visual contrast" }, "bgColor-inset": { "key": "{bgColor.inset}", "$extensions": { "org.primer.figma": { "collection": "mode", "scopes": ["bgColor", "borderColor"], "group": "semantic", "codeSyntax": { "web": "var(--bgColor-inset) /* utility class: .color-bg-inset */" } }, "org.primer.overrides": { "dark": "#ffffff", "dark-dimmed": "#eff2f5", "dark-dimmed-high-contrast": "#eff2f5", "light-high-contrast": "#eff2f5", "light-tritanopia-high-contrast": "#eff2f5", "light-protanopia-deuteranopia-high-contrast": "#eff2f5" }, "org.primer.llm": { "usage": ["well", "sunken-panel", "recessed-area", "input-background"], "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells." } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.muted}", "$type": "color", "$description": "Inset background for recessed content areas like wells or sunken panels", "$extensions": { "org.primer.figma": { "collection": "mode", "scopes": ["bgColor", "borderColor"], "group": "semantic", "codeSyntax": { "web": "var(--bgColor-inset) /* utility class: .color-bg-inset */" } }, "org.primer.overrides": { "dark": "{base.color.neutral.0}", "dark-dimmed": "{base.color.neutral.2}", "dark-dimmed-high-contrast": "{base.color.neutral.2}", "light-high-contrast": "{base.color.neutral.2}", "light-tritanopia-high-contrast": "{base.color.neutral.2}", "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}" }, "org.primer.llm": { "usage": ["well", "sunken-panel", "recessed-area", "input-background"], "rules": "Use for visually recessed areas. Creates depth hierarchy. Suitable for input fields and wells." } }, "key": "{bgColor.inset}" }, "name": "bgColor-inset", "attributes": {}, "path": ["bgColor", "inset"], "value": "#f6f8fa", "type": "color", "description": "Inset background for recessed content areas like wells or sunken panels" }, "bgColor-inverse": { "key": "{bgColor.inverse}", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#1f2328" }, "org.primer.llm": { "usage": ["overlay-content", "inverse-theme-element"], "rules": "Use w