feat(design-tokens): add toggle tokens

snowball-tech · Jul 21, 2023 · 6689b88 · 6689b88
1 parent 9b482a5
commit 6689b88
Showing 1 changed file with 207 additions and 0 deletions.
diff --git a/packages/design-tokens/tokens/toggle.js b/packages/design-tokens/tokens/toggle.js
@@ -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}',
+ },
+ },
+ },
+}