@warp-ds/css - npm Package Compare versions

Comparing version 1.8.0-next.15 to 1.8.0-next.16

component-classes/shortcuts.js

@@ -0,15 +1,17 @@
+import { button } from './index.js';
+
 export const buttons = {
-  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',
-  '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',
-  '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',
+  button: button.secondary,
+  'button--secondary': button.secondary,
+  'button--default': button.secondary,
   'button--small': 'px-16! py-6! text-xs!',
-  'button--link': 'leading-[24] max-w-max bg-transparent focusable ease-in-out inline i-text-$color-button-link-text! active:underline hover:underline',
-  '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',
-  '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',
-  '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',
-  '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!',
-  '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',
-  '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!',
-  '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!',
-  '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!',
+  'button--link': 'leading-[24] max-w-max bg-transparent focusable ease-in-out inline s-text-link! active:underline hover:underline',
+  'button--primary': `${button.primary} max-w-max hover:s-text-inverted`,
+  'button--cta': `${button.primary} max-w-max hover:s-text-inverted`,
+  'button--pill': `${button.pill} max-w-max`,
+  '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!',
+  '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',
+  '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!',
+  '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!',
+  '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!',
 };

package.json

 {
   "name": "@warp-ds/css",
   "repository": "[e-mail]:warp-ds/css.git",
-  "version": "1.8.0-next.15",
+  "version": "1.8.0-next.16",
   "scripts": {
@@ -6,0 +6,0 @@ "build": "pnpm build:tokens && pnpm build:resets && pnpm build:cc",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

317643

decreased by-0.9%

Lines of code

1361

decreased by-0.73%

No dependency changes