Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract button and controls into individual files #1175

Merged
merged 4 commits into from
Jan 31, 2025
+2,238 −2,685
Merged

Extract button and controls into individual files #1175

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7252e37
extracted with copilot
lukasoppermann Jan 29, 2025
0e90a9b
trying to fix button
lukasoppermann Jan 29, 2025
f19ff41
move button back to patterns
lukasoppermann Jan 29, 2025
11d0061
add alpha for lihght contorl-danger-bgColor-active
lukasoppermann Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Loading
Loading status checks…
move button back to patterns
@lukasoppermann
lukasoppermann committed Jan 29, 2025
commit f19ff41798e5d84dc7579d7f39fbb1fb87597ac1
494 changes: 0 additions & 494 deletions src/tokens/component/button.json5
View file

This file was deleted.

727 changes: 727 additions & 0 deletions src/tokens/functional/color/dark/patterns-dark.json5
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,731 @@
{
button: {
default: {
fgColor: {
rest: {
$value: '{control.fgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
},
bgColor: {
rest: {
$value: '{control.bgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '{control.bgColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '{control.bgColor.active}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
selected: {
$value: '{control.bgColor.active}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '{control.bgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
borderColor: {
rest: {
$value: '{control.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
hover: {
$value: '{button.default.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
active: {
$value: '{button.default.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
disabled: {
$value: '{control.borderColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
primary: {
fgColor: {
rest: {
$value: '{fgColor.white}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{base.color.neutral.13}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
alpha: 0.4,
},
},
iconColor: {
rest: {
$value: '{fgColor.white}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
},
bgColor: {
rest: {
$value: '{bgColor.success.emphasis}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '#29903B',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '#2E9A40',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '#105823',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
borderColor: {
rest: {
$value: '{base.color.neutral.13}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
alpha: 0.1,
},
hover: {
$value: '{button.primary.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
active: {
$value: '{button.primary.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
disabled: {
$value: '#105823',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
invisible: {
fgColor: {
rest: {
$value: '{control.fgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{control.fgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
active: {
$value: '{control.fgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{control.fgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
},
iconColor: {
rest: {
$value: '{fgColor.muted}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{fgColor.muted}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{control.fgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
},
bgColor: {
rest: {
$value: '{control.transparent.bgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '{control.transparent.bgColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '{control.transparent.bgColor.active}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '{base.color.transparent}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
borderColor: {
rest: {
$value: '{control.transparent.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
hover: {
$value: '{control.transparent.borderColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
disabled: {
$value: '{base.color.transparent}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
outline: {
fgColor: {
rest: {
$value: '{base.color.blue.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{base.color.blue.3}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
active: {
$value: '{base.color.neutral.13}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{fgColor.accent}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
alpha: 0.5,
},
},
bgColor: {
rest: {
$value: '{base.color.neutral.12}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '{control.bgColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '{base.color.blue.7}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '{control.bgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
borderColor: {
hover: {
$value: '{button.default.borderColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
selected: {
$value: '{button.outline.borderColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
danger: {
fgColor: {
rest: {
$value: '#FA5E55',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{base.color.neutral.13}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
active: {
$value: '{base.color.neutral.13}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{fgColor.danger}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
alpha: 0.5,
},
},
iconColor: {
rest: {
$value: '#FA5E55',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{base.color.neutral.13}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
},
bgColor: {
rest: {
$value: '{control.bgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '{base.color.red.6}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '#D03533',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '{control.bgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
borderColor: {
rest: {
$value: '{control.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
hover: {
$value: '{button.primary.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
active: {
$value: '{button.danger.borderColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
inactive: {
fgColor: {
$value: '{base.color.neutral.9}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
bgColor: {
$value: '{base.color.neutral.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
star: {
iconColor: {
$value: '{base.color.yellow.2}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
},
buttonCounter: {
default: {
bgColor: {
721 changes: 721 additions & 0 deletions src/tokens/functional/color/light/patterns-light.json5
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,725 @@
{
button: {
default: {
fgColor: {
rest: {
$value: '{control.fgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
},
bgColor: {
rest: {
$value: '{control.bgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '{control.bgColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '{control.bgColor.active}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
selected: {
$value: '{control.bgColor.active}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '{control.bgColor.disabled}',
$type: 'color',
},
},
borderColor: {
rest: {
$value: '{control.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
hover: {
$value: '{control.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
active: {
$value: '{control.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
disabled: {
$value: '{control.borderColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
primary: {
fgColor: {
rest: {
$value: '{fgColor.white}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{base.color.neutral.0}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
alpha: 0.8,
},
},
iconColor: {
rest: {
$value: '{fgColor.white}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
alpha: 0.8,
},
},
bgColor: {
rest: {
$value: '{bgColor.success.emphasis}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '#1c8139',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '#197935',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '#95d8a6',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
borderColor: {
rest: {
$value: '{base.color.neutral.13}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
alpha: 0.15,
},
hover: {
$value: '{button.primary.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
active: {
$value: '{button.primary.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
disabled: {
$value: '{button.primary.bgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
invisible: {
fgColor: {
rest: {
$value: '{control.fgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{control.fgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
active: {
$value: '{control.fgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{control.fgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
},
iconColor: {
rest: {
$value: '{fgColor.muted}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{fgColor.muted}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{control.fgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
},
bgColor: {
rest: {
$value: '{control.transparent.bgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '{control.transparent.bgColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '{control.transparent.bgColor.active}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '{base.color.transparent}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
borderColor: {
rest: {
$value: '{control.transparent.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
hover: {
$value: '{control.transparent.borderColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
disabled: {
$value: '{base.color.transparent}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
outline: {
fgColor: {
rest: {
$value: '{fgColor.accent}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{base.color.neutral.0}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
active: {
$value: '{base.color.neutral.0}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{fgColor.accent}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
alpha: 0.5,
},
},
bgColor: {
rest: {
$value: '{control.bgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '{bgColor.accent.emphasis}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '#0757ba',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '{control.bgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
borderColor: {
hover: {
$value: '{button.primary.borderColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
active: {
$value: '{button.outline.borderColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
danger: {
fgColor: {
rest: {
$value: '{fgColor.danger}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{base.color.neutral.0}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
active: {
$value: '{base.color.neutral.0}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
disabled: {
$value: '{fgColor.danger}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
alpha: 0.5,
},
},
iconColor: {
rest: {
$value: '{fgColor.danger}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
hover: {
$value: '{base.color.neutral.0}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
},
bgColor: {
rest: {
$value: '{control.bgColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
hover: {
$value: '{base.color.red.6}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
active: {
$value: '#8b0820',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
disabled: {
$value: '{control.bgColor.disabled}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
borderColor: {
rest: {
$value: '{control.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
hover: {
$value: '{button.primary.borderColor.rest}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
active: {
$value: '{button.danger.borderColor.hover}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['borderColor'],
},
},
},
},
},
inactive: {
fgColor: {
$value: '{base.color.neutral.9}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['fgColor'],
},
},
},
bgColor: {
$value: '{base.color.neutral.3}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
star: {
iconColor: {
$value: '{base.color.yellow.2}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
group: 'component (internal)',
scopes: ['bgColor'],
},
},
},
},
},
buttonCounter: {
default: {
bgColor: {