@primer/primitives
Version:
Typography, spacing, and color primitives for Primer design system
1,710 lines • 892 kB
JSON
{
"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": "#ffffff26",
"$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,
"original": {
"$value": "{borderColor.translucent}",
"$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"
}
}
}
},
"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": "#1f6feb",
"$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": "#1f6feb",
"dark-high-contrast": "#051d4d"
}
},
"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}"
}
}
},
"name": "bgColor-accent-emphasis",
"attributes": {},
"path": ["bgColor", "accent", "emphasis"],
"key": "{bgColor.accent.emphasis}"
},
"bgColor-accent-muted": {
"$value": "#388bfd1a",
"$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": "#388bfd",
"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": "#9e6a03",
"$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": "#341a00"
}
},
"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}"
}
}
},
"name": "bgColor-attention-emphasis",
"attributes": {},
"path": ["bgColor", "attention", "emphasis"],
"key": "{bgColor.attention.emphasis}"
},
"bgColor-attention-muted": {
"$value": "#bb800926",
"$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": "#bb8009",
"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": "#da3633",
"$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": "#656c76",
"dark-tritanopia": "#656c76",
"light-protanopia-deuteranopia": "#656c76",
"dark-protanopia-deuteranopia": "#656c76"
}
},
"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": "#f851491a",
"$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": "#656c7633",
"dark-tritanopia": {
"$value": "#656c7633",
"alpha": 0.1,
"filePath": "src/tokens/functional/color/bgColor.json5",
"isSource": true,
"$type": "color"
},
"light-protanopia-deuteranopia": "#656c7633",
"dark-protanopia-deuteranopia": {
"$value": "#656c7633",
"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": "#da3633",
"$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": "#bd561d",
"dark-protanopia-deuteranopia": "#bd561d",
"dark-high-contrast": "#490202"
}
},
"filePath": "src/tokens/functional/color/bgColor.json5",
"isSource": true,
"original": {
"$value": "{base.color.red.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}",
"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": "#f851491a",
"$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": "#f85149",
"alpha": 0.1,
"filePath": "src/tokens/functional/color/bgColor.json5",
"isSource": true,
"$type": "color"
},
"light-protanopia-deuteranopia": "#ffdfb6",
"dark-protanopia-deuteranopia": {
"$value": "#db6d28",
"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": "#0d1117",
"$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.1}",
"$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": "#212830",
"$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.3}",
"$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": "#8957e5",
"$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": "#271052"
}
},
"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}"
}
}
},
"name": "bgColor-done-emphasis",
"attributes": {},
"path": ["bgColor", "done", "emphasis"],
"key": "{bgColor.done.emphasis}"
},
"bgColor-done-muted": {
"$value": "#ab7df826",
"$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": "#ab7df8",
"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": "#656c76",
"$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.8}",
"$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": "#656c7633",
"$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,
"alpha": 0.2,
"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}",
"dark-high-contrast": "{base.color.neutral.3}"
}
},
"alpha": 0.2
},
"name": "bgColor-neutral-muted",
"attributes": {},
"path": ["bgColor", "neutral", "muted"],
"key": "{bgColor.neutral.muted}"
},
"bgColor-open-emphasis": {
"$value": "#238636",
"$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": "#da3633",
"dark-tritanopia": "#da3633",
"light-protanopia-deuteranopia": "#bd561d",
"dark-protanopia-deuteranopia": "#bd561d"
}
},
"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": "#2ea04326",
"$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": "#ffdcd7",
"dark-tritanopia": {
"$value": "#f85149",
"alpha": 0.1,
"filePath": "src/tokens/functional/color/bgColor.json5",
"isSource": true,
"$type": "color"
},
"light-protanopia-deuteranopia": "#ffdfb6",
"dark-protanopia-deuteranopia": {
"$value": "#db6d28",
"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": "#bd561d",
"$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": "#da3633",
"dark-tritanopia": "#da3633",
"dark-high-contrast": "#3d1300"
}
},
"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-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": "#db6d281a",
"$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": "#db6d28",
"alpha": 0.1,
"filePath": "src/tokens/functional/color/bgColor.json5",
"isSource": true,
"$type": "color"
},
"light-tritanopia": "#ffdcd7",
"dark-tritanopia": {
"$value": "#f85149",
"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": "#bf4b8a",
"$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": "#42062a"
}
},
"filePath": "src/tokens/functional/color/bgColor.json5",
"isSource": true,
"original": {
"$value": "{base.color.pink.5}",
"$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": "#db61a21a",
"$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": "#db61a2",
"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": "#238636",
"$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": "#238636",
"light-tritanopia": "#1f6feb",
"dark-tritanopia": "#1f6feb",
"light-protanopia-deuteranopia": "#1f6feb",
"dark-protanopia-deuteranopia": "#1f6feb",
"light-high-contrast": "#238636",
"dark-high-contrast": "#04260f"
}
},
"filePath": "src/tokens/functional/color/bgColor.json5",
"isSource": true,
"original": {
"$value": "{base.color.green.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": {
"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": "#2ea04326",
"$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": "#2ea043",
"alpha": 0.15,
"filePath": "src/tokens/functional/color/bgColor.json5",
"isSource": true,
"$type": "color"
},
"light-tritanopia": "#cae8ff",
"dark-tritanopia": {
"$value": "#388bfd",
"alpha": 0.15,
"filePath": "src/tokens/functional/color/bgColor.json5",
"isSource": true,
"$type": "color"
},
"light-protanopia-deuteranopia": "#cae8ff",
"dark-protanopia-deuteranopia": {
"$value": "#388bfd",
"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": "#8957e5",
"$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": "#ab7df826",
"$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"