-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(design-tokens): add toggle tokens
- Loading branch information
1 parent
9b482a5
commit 6689b88
Showing
1 changed file
with
207 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,207 @@ | ||
module.exports = { | ||
border: { | ||
toggle: { | ||
primary: { | ||
base: { | ||
comment: 'Border for primary toggles.', | ||
|
||
value: '{border.button.display.base.value}', | ||
}, | ||
hover: { | ||
comment: 'Border when hovering/focusing primary toggles.', | ||
|
||
value: '{border.button.display.hover.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
active: { | ||
comment: 'Border when clicking/activating primary toggles.', | ||
|
||
value: '{border.button.display.active.value}', | ||
}, | ||
toggled: { | ||
comment: 'Border when primary toggles are toggled.', | ||
|
||
value: '{border.1.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
disabled: { | ||
comment: 'Border for disabled primary toggles.', | ||
|
||
value: '{border.button.display.disabled.value}', | ||
}, | ||
}, | ||
}, | ||
}, | ||
|
||
color: { | ||
background: { | ||
toggle: { | ||
primary: { | ||
base: { | ||
comment: 'Background color to use on primary toggles.', | ||
|
||
value: '{color.background.button.display.base.value}', | ||
}, | ||
hover: { | ||
comment: | ||
'Background color to use when hovering/focusing primary toggles.', | ||
|
||
value: '{color.background.button.display.hover.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
active: { | ||
comment: | ||
'Background color to use when clicking/activating a primary toggles.', | ||
|
||
value: '{color.background.button.display.active.value}', | ||
}, | ||
toggled: { | ||
comment: | ||
'Background color to use when primary toggles are toggled.', | ||
|
||
value: '{color.background.button.secondary.active.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
disabled: { | ||
comment: 'Background color to use on disabled primary toggles.', | ||
|
||
value: '{color.background.button.display.disabled.value}', | ||
}, | ||
}, | ||
}, | ||
}, | ||
|
||
icon: { | ||
toggle: { | ||
primary: { | ||
base: { | ||
comment: 'Icon color to use on primary toggles.', | ||
|
||
value: '{color.icon.button.display.base.value}', | ||
}, | ||
hover: { | ||
comment: | ||
'Icon color to use when hovering/focusing primary toggles.', | ||
|
||
value: '{color.icon.button.display.hover.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
active: { | ||
comment: | ||
'Icon color to use when clicking/activating a primary toggles.', | ||
|
||
value: '{color.icon.button.display.active.value}', | ||
}, | ||
toggled: { | ||
comment: | ||
'Background color to use when primary toggles are toggled.', | ||
|
||
value: '{color.icon.button.secondary.active.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
disabled: { | ||
comment: 'Icon color to use on disabled primary toggles.', | ||
|
||
value: '{color.icon.button.display.disabled.value}', | ||
}, | ||
}, | ||
}, | ||
}, | ||
|
||
text: { | ||
toggle: { | ||
primary: { | ||
base: { | ||
comment: 'Text color to use on primary toggles.', | ||
|
||
value: '{color.text.button.display.base.value}', | ||
}, | ||
hover: { | ||
comment: | ||
'Text color to use when hovering/focusing primary toggles.', | ||
|
||
value: '{color.text.button.display.hover.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
active: { | ||
comment: | ||
'Text color to use when clicking/activating a primary toggles.', | ||
|
||
value: '{color.text.button.display.active.value}', | ||
}, | ||
toggled: { | ||
comment: | ||
'Background color to use when primary toggles are toggled.', | ||
|
||
value: '{color.text.button.secondary.active.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
disabled: { | ||
comment: 'Text color to use on disabled primary toggles.', | ||
|
||
value: '{color.text.button.display.disabled.value}', | ||
}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
|
||
shadow: { | ||
toggle: { | ||
primary: { | ||
base: { | ||
comment: 'Shadow for primary toggles.', | ||
|
||
value: '{shadow.button.display.base.value}', | ||
}, | ||
hover: { | ||
comment: 'Shadow when hovering/focusing primary toggles.', | ||
|
||
value: '{shadow.button.display.hover.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
active: { | ||
comment: 'Shadow when clicking/activating primary toggles.', | ||
|
||
value: '{shadow.button.display.active.value}', | ||
}, | ||
toggled: { | ||
comment: 'Background color to use when primary toggles are toggled.', | ||
|
||
value: '{shadow.toggle.primary.active.value}', | ||
}, | ||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
disabled: { | ||
comment: 'Shadow for disabled primary toggles.', | ||
|
||
value: '{shadow.button.display.disabled.value}', | ||
}, | ||
}, | ||
}, | ||
}, | ||
|
||
size: { | ||
toggle: { | ||
padding: { | ||
horizontal: { | ||
comment: 'Horizontal padding for any toggle.', | ||
|
||
value: '{size.button.padding.horizontal.value}', | ||
}, | ||
|
||
vertical: { | ||
comment: 'Vertical padding for any toggle.', | ||
|
||
value: '{size.button.padding.vertical.value}', | ||
}, | ||
}, | ||
|
||
// eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects | ||
gap: { | ||
comment: 'Gap between text and icon.', | ||
|
||
value: '{size.button.gap.value}', | ||
}, | ||
}, | ||
}, | ||
} |