UNPKG

@primer/primitives

Version:

Typography, spacing, and color primitives for Primer design system

1,554 lines • 1.47 MB
{ "avatar-bgColor": { "key": "{avatar.bgColor}", "$value": "#ffffff", "$type": "color", "$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"] }, "avatar-borderColor": { "key": "{avatar.borderColor}", "$value": "#1f232826", "$type": "color", "$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"] }, "avatar-shadow": { "key": "{avatar.shadow}", "$value": "0px 0px 0px 2px #ffffffcc", "$type": "shadow", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component shadow" }, "org.primer.overrides": { "dark": { "$value": [ { "color": "#f6f8fa", "alpha": 1, "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "2px" } ], "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": "0px", "offsetY": "0px", "blur": "0px", "spread": "2px" } ], "$type": "shadow", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component shadow" }, "org.primer.overrides": { "dark": { "$value": [ { "color": "{base.color.neutral.1}", "alpha": 1, "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "2px" } ], "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "shadow" } } }, "key": "{avatar.shadow}" }, "name": "avatar-shadow", "attributes": {}, "path": ["avatar", "shadow"] }, "avatarStack-fade-bgColor-default": { "key": "{avatarStack.fade.bgColor.default}", "$value": "#c8d1da", "$type": "color", "$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"] }, "avatarStack-fade-bgColor-muted": { "key": "{avatarStack.fade.bgColor.muted}", "$value": "#dae0e7", "$type": "color", "$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"] }, "bgColor-accent-emphasis": { "key": "{bgColor.accent.emphasis}", "$value": "#0969da", "$type": "color", "$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" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.blue.5}", "$type": "color", "$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}" } }, "key": "{bgColor.accent.emphasis}" }, "name": "bgColor-accent-emphasis", "attributes": {}, "path": ["bgColor", "accent", "emphasis"] }, "bgColor-accent-muted": { "key": "{bgColor.accent.muted}", "$value": "#ddf4ff", "$type": "color", "$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" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.blue.0}", "$type": "color", "$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" } } }, "key": "{bgColor.accent.muted}" }, "name": "bgColor-accent-muted", "attributes": {}, "path": ["bgColor", "accent", "muted"] }, "bgColor-attention-emphasis": { "key": "{bgColor.attention.emphasis}", "$value": "#9a6700", "$type": "color", "$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" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.yellow.5}", "$type": "color", "$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}" } }, "key": "{bgColor.attention.emphasis}" }, "name": "bgColor-attention-emphasis", "attributes": {}, "path": ["bgColor", "attention", "emphasis"] }, "bgColor-attention-muted": { "key": "{bgColor.attention.muted}", "$value": "#fff8c5", "$type": "color", "$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" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.yellow.0}", "$type": "color", "$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" } } }, "key": "{bgColor.attention.muted}" }, "name": "bgColor-attention-muted", "attributes": {}, "path": ["bgColor", "attention", "muted"] }, "bgColor-black": { "key": "{bgColor.black}", "$value": "#1f2328", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#ffffff" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.13}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "{base.color.neutral.0}" } }, "key": "{bgColor.black}" }, "name": "bgColor-black", "attributes": {}, "path": ["bgColor", "black"] }, "bgColor-closed-emphasis": { "key": "{bgColor.closed.emphasis}", "$value": "#59636e", "$type": "color", "$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" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.neutral.emphasis}", "$type": "color", "$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}" } }, "key": "{bgColor.closed.emphasis}" }, "name": "bgColor-closed-emphasis", "attributes": {}, "path": ["bgColor", "closed", "emphasis"] }, "bgColor-closed-muted": { "key": "{bgColor.closed.muted}", "$value": "#818b981f", "$type": "color", "$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" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.neutral.muted}", "$type": "color", "$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" } } }, "key": "{bgColor.closed.muted}" }, "name": "bgColor-closed-muted", "attributes": {}, "path": ["bgColor", "closed", "muted"] }, "bgColor-danger-emphasis": { "key": "{bgColor.danger.emphasis}", "$value": "#bc4c00", "$type": "color", "$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" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.orange.5}", "$type": "color", "$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}" } }, "key": "{bgColor.danger.emphasis}" }, "name": "bgColor-danger-emphasis", "attributes": {}, "path": ["bgColor", "danger", "emphasis"] }, "bgColor-danger-muted": { "key": "{bgColor.danger.muted}", "$value": "#fff1e5", "$type": "color", "$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" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.orange.0}", "$type": "color", "$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" } } }, "key": "{bgColor.danger.muted}" }, "name": "bgColor-danger-muted", "attributes": {}, "path": ["bgColor", "danger", "muted"] }, "bgColor-default": { "key": "{bgColor.default}", "$value": "#ffffff", "$type": "color", "$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" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.0}", "$type": "color", "$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}" } }, "key": "{bgColor.default}" }, "name": "bgColor-default", "attributes": {}, "path": ["bgColor", "default"] }, "bgColor-disabled": { "key": "{bgColor.disabled}", "$value": "#eff2f5", "$type": "color", "$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" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.2}", "$type": "color", "$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}" } }, "key": "{bgColor.disabled}" }, "name": "bgColor-disabled", "attributes": {}, "path": ["bgColor", "disabled"] }, "bgColor-done-emphasis": { "key": "{bgColor.done.emphasis}", "$value": "#8250df", "$type": "color", "$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" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.purple.5}", "$type": "color", "$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}" } }, "key": "{bgColor.done.emphasis}" }, "name": "bgColor-done-emphasis", "attributes": {}, "path": ["bgColor", "done", "emphasis"] }, "bgColor-done-muted": { "key": "{bgColor.done.muted}", "$value": "#fbefff", "$type": "color", "$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" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.purple.0}", "$type": "color", "$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" } } }, "key": "{bgColor.done.muted}" }, "name": "bgColor-done-muted", "attributes": {}, "path": ["bgColor", "done", "muted"] }, "bgColor-draft-emphasis": { "key": "{bgColor.draft.emphasis}", "$value": "#59636e", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-draft-emphasis)" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.neutral.emphasis}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-draft-emphasis)" } } }, "key": "{bgColor.draft.emphasis}" }, "name": "bgColor-draft-emphasis", "attributes": {}, "path": ["bgColor", "draft", "emphasis"] }, "bgColor-draft-muted": { "key": "{bgColor.draft.muted}", "$value": "#818b981f", "$type": "color", "$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" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.neutral.muted}", "$type": "color", "$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" } } }, "key": "{bgColor.draft.muted}" }, "name": "bgColor-draft-muted", "attributes": {}, "path": ["bgColor", "draft", "muted"] }, "bgColor-emphasis": { "key": "{bgColor.emphasis}", "$value": "#25292e", "$type": "color", "$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" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.12}", "$type": "color", "$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}" } }, "key": "{bgColor.emphasis}" }, "name": "bgColor-emphasis", "attributes": {}, "path": ["bgColor", "emphasis"] }, "bgColor-inset": { "key": "{bgColor.inset}", "$value": "#f6f8fa", "$type": "color", "$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" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.muted}", "$type": "color", "$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}" } }, "key": "{bgColor.inset}" }, "name": "bgColor-inset", "attributes": {}, "path": ["bgColor", "inset"] }, "bgColor-inverse": { "key": "{bgColor.inverse}", "$value": "#25292e", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#1f2328" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.12}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "{base.color.neutral.13}" } }, "key": "{bgColor.inverse}" }, "name": "bgColor-inverse", "attributes": {}, "path": ["bgColor", "inverse"] }, "bgColor-muted": { "key": "{bgColor.muted}", "$value": "#f6f8fa", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "scopes": ["bgColor", "borderColor"], "group": "semantic", "codeSyntax": { "web": "var(--bgColor-muted) /* utility class: .color-bg-muted */" } }, "org.primer.overrides": { "dark": "#eff2f5", "dark-dimmed": "#e0e6eb", "dark-dimmed-high-contrast": "#e0e6eb", "light-high-contrast": "#e6eaef", "light-tritanopia-high-contrast": "#e6eaef", "light-protanopia-deuteranopia-high-contrast": "#e6eaef", "dark-high-contrast": "#eff2f5", "dark-tritanopia-high-contrast": "#eff2f5", "dark-protanopia-deuteranopia-high-contrast": "#eff2f5" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.1}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "scopes": ["bgColor", "borderColor"], "group": "semantic", "codeSyntax": { "web": "var(--bgColor-muted) /* utility class: .color-bg-muted */" } }, "org.primer.overrides": { "dark": "{base.color.neutral.2}", "dark-dimmed": "{base.color.neutral.4}", "dark-dimmed-high-contrast": "{base.color.neutral.4}", "light-high-contrast": "{base.color.neutral.3}", "light-tritanopia-high-contrast": "{base.color.neutral.3}", "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}", "dark-high-contrast": "{base.color.neutral.2}", "dark-tritanopia-high-contrast": "{base.color.neutral.2}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.2}" } }, "key": "{bgColor.muted}" }, "name": "bgColor-muted", "attributes": {}, "path": ["bgColor", "muted"] }, "bgColor-neutral-emphasis": { "key": "{bgColor.neutral.emphasis}", "$value": "#59636e", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#818b98", "dark-dimmed": "#818b98", "dark-dimmed-high-contrast": "#c8d1da", "light-high-contrast": "#454c54", "light-tritanopia-high-contrast": "#454c54", "light-protanopia-deuteranopia-high-contrast": "#454c54", "dark-high-contrast": "#c8d1da", "dark-tritanopia-high-contrast": "#c8d1da", "dark-protanopia-deuteranopia-high-contrast": "#c8d1da" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.9}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "{base.color.neutral.8}", "dark-dimmed": "{base.color.neutral.8}", "dark-dimmed-high-contrast": "{base.color.neutral.7}", "light-high-contrast": "{base.color.neutral.10}", "light-tritanopia-high-contrast": "{base.color.neutral.10}", "light-protanopia-deuteranopia-high-contrast": "{base.color.neutral.10}", "dark-high-contrast": "{base.color.neutral.7}", "dark-tritanopia-high-contrast": "{base.color.neutral.7}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.7}" } }, "key": "{bgColor.neutral.emphasis}" }, "name": "bgColor-neutral-emphasis", "attributes": {}, "path": ["bgColor", "neutral", "emphasis"] }, "bgColor-neutral-muted": { "key": "{bgColor.neutral.muted}", "$value": "#818b981f", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "light": { "$value": "#818b98", "alpha": 0.12, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark": { "$value": "#818b98", "alpha": 0.2, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-high-contrast": "#e0e6eb", "light-tritanopia-high-contrast": "#e0e6eb", "light-protanopia-deuteranopia-high-contrast": "#e0e6eb", "dark-high-contrast": "#e6eaef", "dark-tritanopia-high-contrast": "#e6eaef", "dark-protanopia-deuteranopia-high-contrast": "#e6eaef" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "alpha": 0.12, "original": { "$value": "{base.color.neutral.8}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "light": { "$value": "{base.color.neutral.8}", "alpha": 0.12, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark": { "$value": "{base.color.neutral.8}", "alpha": 0.2, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "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.3}", "dark-tritanopia-high-contrast": "{base.color.neutral.3}", "dark-protanopia-deuteranopia-high-contrast": "{base.color.neutral.3}" } }, "alpha": 0.12, "key": "{bgColor.neutral.muted}" }, "name": "bgColor-neutral-muted", "attributes": {}, "path": ["bgColor", "neutral", "muted"] }, "bgColor-open-emphasis": { "key": "{bgColor.open.emphasis}", "$value": "#bc4c00", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */" } }, "org.primer.overrides": { "light-tritanopia": "#cf222e", "light-tritanopia-high-contrast": "#cf222e", "dark-tritanopia": "#cf222e", "dark-tritanopia-high-contrast": "#4c0014", "light-protanopia-deuteranopia": "#bc4c00", "light-protanopia-deuteranopia-high-contrast": "#bc4c00", "dark-protanopia-deuteranopia": "#bc4c00", "dark-protanopia-deuteranopia-high-contrast": "#471700" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.orange.5}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-success-emphasis) /* utility class: .color-bg-success-emphasis */" } }, "org.primer.overrides": { "light-tritanopia": "{base.color.red.5}", "light-tritanopia-high-contrast": "{base.color.red.5}", "dark-tritanopia": "{base.color.red.5}", "dark-tritanopia-high-contrast": "{base.color.red.9}", "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}" } }, "key": "{bgColor.open.emphasis}" }, "name": "bgColor-open-emphasis", "attributes": {}, "path": ["bgColor", "open", "emphasis"] }, "bgColor-open-muted": { "key": "{bgColor.open.muted}", "$value": "#fff1e5", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-success-muted) /* utility class: .color-bg-success */" } }, "org.primer.overrides": { "light-tritanopia-high-contrast": "#ffebe9", "light-tritanopia": "#ffebe9", "dark-tritanopia": { "$value": "#fa4549", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-tritanopia-high-contrast": { "$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" }, "dark-protanopia-deuteranopia-high-contrast": { "$value": "#e16f24", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.orange.0}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-success-muted) /* utility class: .color-bg-success */" } }, "org.primer.overrides": { "light-tritanopia-high-contrast": "{base.color.red.0}", "light-tritanopia": "{base.color.