UNPKG

@primer/primitives

Version:

Typography, spacing, and color primitives for Primer design system

1,710 lines • 892 kB
{ "avatar-bgColor": { "$value": "#ffffff1a", "$type": "color", "$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 }, "name": "avatar-bgColor", "attributes": {}, "path": ["avatar", "bgColor"], "key": "{avatar.bgColor}" }, "avatar-borderColor": { "$value": "#ffffffe6", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["borderColor"] }, "org.primer.overrides": { "dark-high-contrast": { "$value": "#ffffff", "alpha": 0.9, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-high-contrast": { "$value": "#ffffff", "alpha": 0.9, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "alpha": 0.9, "original": { "$value": "{base.color.neutral.13}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component (internal)", "scopes": ["borderColor"] }, "org.primer.overrides": { "dark-high-contrast": { "$value": "{base.color.neutral.13}", "alpha": 0.9, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" }, "light-high-contrast": { "$value": "{base.color.neutral.13}", "alpha": 0.9, "filePath": "src/tokens/component/avatar.json5", "isSource": true, "$type": "color" } } }, "alpha": 0.9 }, "name": "avatar-borderColor", "attributes": {}, "path": ["avatar", "borderColor"], "key": "{avatar.borderColor}" }, "avatar-shadow": { "$value": "0px 0px 0px 2px #0d1117", "$type": "shadow", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "component shadow" }, "org.primer.overrides": { "dark": { "$value": [ { "color": "#0d1117", "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.1}", "alpha": 1, "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" } } } }, "name": "avatar-shadow", "attributes": {}, "path": ["avatar", "shadow"], "key": "{avatar.shadow}" }, "avatarStack-fade-bgColor-default": { "$value": "#3d444d", "$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"] } } }, "name": "avatarStack-fade-bgColor-default", "attributes": {}, "path": ["avatarStack", "fade", "bgColor", "default"], "key": "{avatarStack.fade.bgColor.default}" }, "avatarStack-fade-bgColor-muted": { "$value": "#2a313c", "$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"] } } }, "name": "avatarStack-fade-bgColor-muted", "attributes": {}, "path": ["avatarStack", "fade", "bgColor", "muted"], "key": "{avatarStack.fade.bgColor.muted}" }, "bgColor-accent-emphasis": { "$value": "#194fb1", "$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": "#409eff", "dark-high-contrast": "#194fb1" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.blue.9}", "$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}" } } }, "name": "bgColor-accent-emphasis", "attributes": {}, "path": ["bgColor", "accent", "emphasis"], "key": "{bgColor.accent.emphasis}" }, "bgColor-accent-muted": { "$value": "#5cacff1a", "$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": "#5cacff", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "alpha": 0.1, "original": { "$value": "{base.color.blue.4}", "$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" } } }, "alpha": 0.1 }, "name": "bgColor-accent-muted", "attributes": {}, "path": ["bgColor", "accent", "muted"], "key": "{bgColor.accent.muted}" }, "bgColor-attention-emphasis": { "$value": "#7b4900", "$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": "#7b4900" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.yellow.9}", "$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}" } } }, "name": "bgColor-attention-emphasis", "attributes": {}, "path": ["bgColor", "attention", "emphasis"], "key": "{bgColor.attention.emphasis}" }, "bgColor-attention-muted": { "$value": "#edaa2726", "$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": "#edaa27", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "alpha": 0.15, "original": { "$value": "{base.color.yellow.4}", "$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" } } }, "alpha": 0.15 }, "name": "bgColor-attention-muted", "attributes": {}, "path": ["bgColor", "attention", "muted"], "key": "{bgColor.attention.muted}" }, "bgColor-black": { "$value": "#010409", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#010409" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.0}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "{base.color.neutral.0}" } } }, "name": "bgColor-black", "attributes": {}, "path": ["bgColor", "black"], "key": "{bgColor.black}" }, "bgColor-closed-emphasis": { "$value": "#ad0116", "$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": "#3d444d", "dark-tritanopia": "#3d444d", "light-protanopia-deuteranopia": "#3d444d", "dark-protanopia-deuteranopia": "#3d444d" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.danger.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}", "dark-tritanopia": "{bgColor.neutral.emphasis}", "light-protanopia-deuteranopia": "{bgColor.neutral.emphasis}", "dark-protanopia-deuteranopia": "{bgColor.neutral.emphasis}" } } }, "name": "bgColor-closed-emphasis", "attributes": {}, "path": ["bgColor", "closed", "emphasis"], "key": "{bgColor.closed.emphasis}" }, "bgColor-closed-muted": { "$value": "#ff80801a", "$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": "#212830", "dark-tritanopia": { "$value": "#212830", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#212830", "dark-protanopia-deuteranopia": { "$value": "#212830", "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.danger.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}", "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}", "dark-protanopia-deuteranopia": { "$value": "{bgColor.neutral.muted}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } } }, "name": "bgColor-closed-muted", "attributes": {}, "path": ["bgColor", "closed", "muted"], "key": "{bgColor.closed.muted}" }, "bgColor-danger-emphasis": { "$value": "#ad0116", "$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": "#e7811d", "dark-protanopia-deuteranopia": "#e7811d", "dark-high-contrast": "#ad0116" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.red.9}", "$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}", "dark-protanopia-deuteranopia": "{base.color.orange.5}", "dark-high-contrast": "{base.color.red.9}" } } }, "name": "bgColor-danger-emphasis", "attributes": {}, "path": ["bgColor", "danger", "emphasis"], "key": "{bgColor.danger.emphasis}" }, "bgColor-danger-muted": { "$value": "#ff80801a", "$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": "#ff8080", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#ffe1b4", "dark-protanopia-deuteranopia": { "$value": "#f48b25", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "alpha": 0.1, "original": { "$value": "{base.color.red.4}", "$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}", "dark-protanopia-deuteranopia": { "$value": "{base.color.orange.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "alpha": 0.1 }, "name": "bgColor-danger-muted", "attributes": {}, "path": ["bgColor", "danger", "muted"], "key": "{bgColor.danger.muted}" }, "bgColor-default": { "$value": "#010409", "$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": "#0d1117", "dark-dimmed": "#212830", "dark-high-contrast": "#010409" } }, "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-high-contrast": "{base.color.neutral.0}" } } }, "name": "bgColor-default", "attributes": {}, "path": ["bgColor", "default"], "key": "{bgColor.default}" }, "bgColor-disabled": { "$value": "#262c36", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#212830", "dark-dimmed": "#2a313c", "light-high-contrast": "#262c36", "dark-high-contrast": "#262c36" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.4}", "$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}", "light-high-contrast": "{base.color.neutral.4}", "dark-high-contrast": "{base.color.neutral.4}" } } }, "name": "bgColor-disabled", "attributes": {}, "path": ["bgColor", "disabled"], "key": "{bgColor.disabled}" }, "bgColor-done-emphasis": { "$value": "#6921d7", "$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": "#6921d7" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.purple.9}", "$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}" } } }, "name": "bgColor-done-emphasis", "attributes": {}, "path": ["bgColor", "done", "emphasis"], "key": "{bgColor.done.emphasis}" }, "bgColor-done-muted": { "$value": "#bf8fff26", "$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": "#bf8fff", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "alpha": 0.15, "original": { "$value": "{base.color.purple.4}", "$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" } } }, "alpha": 0.15 }, "name": "bgColor-done-muted", "attributes": {}, "path": ["bgColor", "done", "muted"], "key": "{bgColor.done.muted}" }, "bgColor-emphasis": { "$value": "#3d444d", "$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": "#3d444d" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.7}", "$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}" } } }, "name": "bgColor-emphasis", "attributes": {}, "path": ["bgColor", "emphasis"], "key": "{bgColor.emphasis}" }, "bgColor-inset": { "$value": "#010409", "$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": "#010409", "dark-dimmed": "#151b23", "light-high-contrast": "#151b23" } }, "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-inset) /* utility class: .color-bg-inset */" } }, "org.primer.overrides": { "dark": "{base.color.neutral.0}", "dark-dimmed": "{base.color.neutral.2}", "light-high-contrast": "{base.color.neutral.2}" } } }, "name": "bgColor-inset", "attributes": {}, "path": ["bgColor", "inset"], "key": "{bgColor.inset}" }, "bgColor-inverse": { "$value": "#ffffff", "$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.13}" } } }, "name": "bgColor-inverse", "attributes": {}, "path": ["bgColor", "inverse"], "key": "{bgColor.inverse}" }, "bgColor-muted": { "$value": "#151b23", "$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": "#151b23", "dark-dimmed": "#262c36", "light-high-contrast": "#212830", "dark-high-contrast": "#151b23" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.2}", "$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}", "light-high-contrast": "{base.color.neutral.3}", "dark-high-contrast": "{base.color.neutral.2}" } } }, "name": "bgColor-muted", "attributes": {}, "path": ["bgColor", "muted"], "key": "{bgColor.muted}" }, "bgColor-neutral-emphasis": { "$value": "#3d444d", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "dark": "#656c76", "dark-dimmed": "#656c76", "light-high-contrast": "#b7bdc8", "dark-high-contrast": "#3d444d" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.7}", "$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}", "light-high-contrast": "{base.color.neutral.10}", "dark-high-contrast": "{base.color.neutral.7}" } } }, "name": "bgColor-neutral-emphasis", "attributes": {}, "path": ["bgColor", "neutral", "emphasis"], "key": "{bgColor.neutral.emphasis}" }, "bgColor-neutral-muted": { "$value": "#212830", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"] }, "org.primer.overrides": { "light": { "$value": "#656c76", "alpha": 0.12, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark": { "$value": "#656c76", "alpha": 0.2, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-high-contrast": "#262c36", "dark-high-contrast": "#212830" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.neutral.3}", "$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}", "dark-high-contrast": "{base.color.neutral.3}" } } }, "name": "bgColor-neutral-muted", "attributes": {}, "path": ["bgColor", "neutral", "muted"], "key": "{bgColor.neutral.muted}" }, "bgColor-open-emphasis": { "$value": "#006222", "$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": "#ff6a69", "dark-tritanopia": "#ff6a69", "light-protanopia-deuteranopia": "#e7811d", "dark-protanopia-deuteranopia": "#e7811d" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.success.emphasis}", "$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}", "dark-tritanopia": "{base.color.red.5}", "light-protanopia-deuteranopia": "{base.color.orange.5}", "dark-protanopia-deuteranopia": "{base.color.orange.5}" } } }, "name": "bgColor-open-emphasis", "attributes": {}, "path": ["bgColor", "open", "emphasis"], "key": "{bgColor.open.emphasis}" }, "bgColor-open-muted": { "$value": "#0ac74026", "$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": "#ffdedb", "dark-tritanopia": { "$value": "#ff8080", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#ffe1b4", "dark-protanopia-deuteranopia": { "$value": "#f48b25", "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.success.muted}", "$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": "{base.color.red.0}", "dark-tritanopia": { "$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}", "dark-protanopia-deuteranopia": { "$value": "{base.color.orange.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } } }, "name": "bgColor-open-muted", "attributes": {}, "path": ["bgColor", "open", "muted"], "key": "{bgColor.open.muted}" }, "bgColor-severe-emphasis": { "$value": "#8f3c00", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */" } }, "org.primer.overrides": { "light-tritanopia": "#ff6a69", "dark-tritanopia": "#ff6a69", "dark-high-contrast": "#8f3c00" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.orange.9}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-severe-emphasis) /* utility class: .color-bg-severe-emphasis */" } }, "org.primer.overrides": { "light-tritanopia": "{base.color.red.5}", "dark-tritanopia": "{base.color.red.5}", "dark-high-contrast": "{base.color.orange.9}" } } }, "name": "bgColor-severe-emphasis", "attributes": {}, "path": ["bgColor", "severe", "emphasis"], "key": "{bgColor.severe.emphasis}" }, "bgColor-severe-muted": { "$value": "#f48b251a", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-severe-muted) /* utility class: .color-bg-severe */" } }, "org.primer.overrides": { "dark": { "$value": "#f48b25", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-tritanopia": "#ffdedb", "dark-tritanopia": { "$value": "#ff8080", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "alpha": 0.1, "original": { "$value": "{base.color.orange.4}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-severe-muted) /* utility class: .color-bg-severe */" } }, "org.primer.overrides": { "dark": { "$value": "{base.color.orange.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-tritanopia": "{base.color.red.0}", "dark-tritanopia": { "$value": "{base.color.red.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "alpha": 0.1 }, "name": "bgColor-severe-muted", "attributes": {}, "path": ["bgColor", "severe", "muted"], "key": "{bgColor.severe.muted}" }, "bgColor-sponsors-emphasis": { "$value": "#9c1d6a", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-sponsors-emphasis) /* utility class: .color-bg-sponsors-emphasis */" } }, "org.primer.overrides": { "dark-high-contrast": "#9c1d6a" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.pink.9}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-sponsors-emphasis) /* utility class: .color-bg-sponsors-emphasis */" } }, "org.primer.overrides": { "dark-high-contrast": "{base.color.pink.9}" } } }, "name": "bgColor-sponsors-emphasis", "attributes": {}, "path": ["bgColor", "sponsors", "emphasis"], "key": "{bgColor.sponsors.emphasis}" }, "bgColor-sponsors-muted": { "$value": "#f87cbd1a", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-sponsors-muted) /* utility class: .color-bg-sponsors */" } }, "org.primer.overrides": { "dark": { "$value": "#f87cbd", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-tritanopia": { "$value": "#db61a2", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "alpha": 0.1, "original": { "$value": "{base.color.pink.4}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-sponsors-muted) /* utility class: .color-bg-sponsors */" } }, "org.primer.overrides": { "dark": { "$value": "{base.color.pink.4}", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "dark-tritanopia": { "$value": "#db61a2", "alpha": 0.1, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "alpha": 0.1 }, "name": "bgColor-sponsors-muted", "attributes": {}, "path": ["bgColor", "sponsors", "muted"], "key": "{bgColor.sponsors.muted}" }, "bgColor-success-emphasis": { "$value": "#006222", "$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": { "dark": "#09b43a", "light-tritanopia": "#409eff", "dark-tritanopia": "#409eff", "light-protanopia-deuteranopia": "#409eff", "dark-protanopia-deuteranopia": "#409eff", "light-high-contrast": "#09b43a", "dark-high-contrast": "#006222" } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.green.9}", "$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": { "dark": "{base.color.green.5}", "light-tritanopia": "{base.color.blue.5}", "dark-tritanopia": "{base.color.blue.5}", "light-protanopia-deuteranopia": "{base.color.blue.5}", "dark-protanopia-deuteranopia": "{base.color.blue.5}", "light-high-contrast": "{base.color.green.5}", "dark-high-contrast": "{base.color.green.9}" } } }, "name": "bgColor-success-emphasis", "attributes": {}, "path": ["bgColor", "success", "emphasis"], "key": "{bgColor.success.emphasis}" }, "bgColor-success-muted": { "$value": "#0ac74026", "$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": { "dark": { "$value": "#0ac740", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-tritanopia": "#caeaff", "dark-tritanopia": { "$value": "#5cacff", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "#caeaff", "dark-protanopia-deuteranopia": { "$value": "#5cacff", "alpha": 0.2, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "alpha": 0.15, "original": { "$value": "{base.color.green.4}", "$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": { "dark": { "$value": "{base.color.green.4}", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-tritanopia": "{base.color.blue.0}", "dark-tritanopia": { "$value": "{base.color.blue.4}", "alpha": 0.15, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" }, "light-protanopia-deuteranopia": "{base.color.blue.0}", "dark-protanopia-deuteranopia": { "$value": "{base.color.blue.4}", "alpha": 0.2, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "$type": "color" } } }, "alpha": 0.15 }, "name": "bgColor-success-muted", "attributes": {}, "path": ["bgColor", "success", "muted"], "key": "{bgColor.success.muted}" }, "bgColor-transparent": { "$value": "#00000000", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{base.color.transparent}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-transparent) /* utility class: .color-bg-transparent */" } } } }, "name": "bgColor-transparent", "attributes": {}, "path": ["bgColor", "transparent"], "key": "{bgColor.transparent}" }, "bgColor-upsell-emphasis": { "$value": "#6921d7", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-upsell-emphasis)" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.done.emphasis}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-upsell-emphasis)" } } } }, "name": "bgColor-upsell-emphasis", "attributes": {}, "path": ["bgColor", "upsell", "emphasis"], "key": "{bgColor.upsell.emphasis}" }, "bgColor-upsell-muted": { "$value": "#bf8fff26", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-upsell-muted)" } } }, "filePath": "src/tokens/functional/color/bgColor.json5", "isSource": true, "original": { "$value": "{bgColor.done.muted}", "$type": "color", "$extensions": { "org.primer.figma": { "collection": "mode", "group": "semantic", "scopes": ["bgColor"], "codeSyntax": { "web": "var(--bgColor-upsell-muted)" } } } }, "name": "bgColor-u