@warp-ds/css 1.8.0-next.15 → 1.8.0-next.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/component-classes/shortcuts.js +14 -12
  2. package/package.json +1 -1
package/component-classes/shortcuts.js CHANGED
@@ -1,15 +1,17 @@
1
+ import { button } from './index.js';
2
+
1
3
  export const buttons = {
2
- button: 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',
3
- 'button--secondary': 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',
4
- 'button--default': 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',
4
+ button: button.secondary,
5
+ 'button--secondary': button.secondary,
6
+ 'button--default': button.secondary,
5
7
  'button--small': 'px-16! py-6! text-xs!',
6
- 'button--link': 'leading-[24] max-w-max bg-transparent focusable ease-in-out inline i-text-$color-button-link-text! active:underline hover:underline',
7
- 'button--primary': 'py-12 px-16 text-m leading-[24] border-0 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',
8
- 'button--cta': 'py-12 px-16 text-m leading-[24] border-0 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',
9
- 'button--pill': 'min-h-[44px] min-w-[44px] text-m leading-[24] p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding font-bold max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',
10
- 'button--utility': 'px-[15px] py-[11px] font-bold text-m leading-[24] max-w-max! focusable justify-center transition-colors ease-in-out border rounded-4 i-text-$color-button-utility-text! hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background! i-border-$color-button-utility-border! hover:i-bg-$color-button-utility-background! hover:i-border-$color-button-utility-border-hover! active:i-border-$color-button-utility-border-active!',
11
- 'button--utility-flat': 'py-12 px-16 border-0 font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-text-$color-button-utility-quiet-text! i-bg-$color-button-utility-quiet-background! hover:i-bg-$color-button-utility-quiet-background-hover! rounded-4',
12
- 'button--destructive': 'py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover! active:i-bg-$color-button-negative-background-active!',
13
- 'button--destructive-flat': 'py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-negative-quiet-background! i-text-$color-button-negative-quiet-text! hover:i-bg-$color-button-negative-quiet-background-hover! active:i-bg-$color-button-negative-quiet-background-active!',
14
- 'button--flat': 'py-12 px-16 border-0! font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out i-bg-$color-button-quiet-background! i-text-$color-button-quiet-text! hover:i-bg-$color-button-quiet-background-hover! active:i-bg-$color-button-quiet-background-active!',
8
+ 'button--link': 'leading-[24] max-w-max bg-transparent focusable ease-in-out inline s-text-link! active:underline hover:underline',
9
+ 'button--primary': `${button.primary} max-w-max hover:s-text-inverted`,
10
+ 'button--cta': `${button.primary} max-w-max hover:s-text-inverted`,
11
+ 'button--pill': `${button.pill} max-w-max`,
12
+ 'button--utility': 'px-[15px] py-[11px] font-bold text-m leading-[24] max-w-max! focusable justify-center transition-colors ease-in-out border rounded-4 s-text! hover:s-text s-bg! hover:s-bg-hover! s-border! hover:s-border-hover! active:s-border-active!',
13
+ 'button--utility-flat': 'py-12 px-16 border-0 font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out s-text! bg-transparent! hover:s-bg-subtle-hover! rounded-4',
14
+ 'button--destructive': 'py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out s-bg-negative s-text-inverted hover:s-text-inverted hover:s-bg-negative-hover! active:s-bg-negative-active!',
15
+ 'button--destructive-flat': 'py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out bg-transparent! s-text-negative! hover:s-bg-negative-subtle-hover! active:s-bg-negative-subtle-active!',
16
+ 'button--flat': 'py-12 px-16 border-0! font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out bg-transparent! s-text-link! hover:s-bg-hover! active:s-bg-active!',
15
17
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@warp-ds/css",
3
3
  "repository": "git@github.com:warp-ds/css.git",
4
- "version": "1.8.0-next.15",
4
+ "version": "1.8.0-next.16",
5
5
  "scripts": {
6
6
  "build": "pnpm build:tokens && pnpm build:resets && pnpm build:cc",
7
7
  "commit": "cz",