@warp-ds/css 1.0.1-next.2 → 1.0.1-next.3

package/component-classes/index.d.ts

@@ -199,23 +199,63 @@ export namespace expandable {
     export const titleType: string;
 }
 export namespace button {
-    export const buttonSecondary: string;
-    export const buttonPrimary: string;
-    export const buttonFlat: string;
-    export const buttonDestructive: string;
-    export const buttonDestructiveFlat: string;
-    export const buttonUtility: string;
-    export const buttonUtilityFlat: string;
-    export const buttonPill: string;
-    export const buttonLink: string;
-    export const buttonSmall: string;
-    export const buttonSmallOverride: string;
-    export const buttonSmallSecondary: string;
-    export const buttonSmallUtility: string;
-    export const buttonSmallButtonPill: string;
-    export const buttonSmallButtonLink: string;
-    export const buttonIsDisabled: string;
-    export const buttonInProgress: string;
+    export const secondary: string;
+    export const secondaryHref: string;
+    export const secondaryDisabled: string;
+    export const secondarySmall: string;
+    export const secondarySmallDisabled: string;
+    export const secondaryQuiet: string;
+    export const secondaryQuietDisabled: string;
+    export const secondarySmallQuiet: string;
+    export const secondarySmallQuietDisabled: string;
+    export const secondaryLoading: string;
+    export const secondarySmallLoading: string;
+    export const secondarySmallQuietLoading: string;
+    export const secondaryQuietLoading: string;
+    export const primary: string;
+    export const primaryDisabled: string;
+    export const primarySmall: string;
+    export const primarySmallDisabled: string;
+    export const primaryQuiet: string;
+    export const primaryQuietDisabled: string;
+    export const primarySmallQuiet: string;
+    export const primarySmallQuietDisabled: string;
+    export const primaryLoading: string;
+    export const primarySmallLoading: string;
+    export const primarySmallQuietLoading: string;
+    export const primaryQuietLoading: string;
+    export const utility: string;
+    export const utilityDisabled: string;
+    export const utilityQuiet: string;
+    export const utilityQuietDisabled: string;
+    export const utilitySmall: string;
+    export const utilitySmallDisabled: string;
+    export const utilitySmallQuiet: string;
+    export const utilitySmallQuietDisabled: string;
+    export const utilityLoading: string;
+    export const utilitySmallLoading: string;
+    export const utilityQuietLoading: string;
+    export const utilitySmallQuietLoading: string;
+    const negative_1: string;
+    export { negative_1 as negative };
+    export const negativeDisabled: string;
+    export const negativeQuiet: string;
+    export const negativeQuietDisabled: string;
+    export const negativeSmall: string;
+    export const negativeSmallDisabled: string;
+    export const negativeSmallQuiet: string;
+    export const negativeSmallQuietDisabled: string;
+    export const negativeLoading: string;
+    export const negativeSmallLoading: string;
+    export const negativeQuietLoading: string;
+    export const negativeSmallQuietLoading: string;
+    const pill_1: string;
+    export { pill_1 as pill };
+    export const pillSmall: string;
+    export const pillLoading: string;
+    export const pillSmallLoading: string;
+    export const link: string;
+    export const linkSmall: string;
     export const linkAsButton: string;
     const a11y_3: string;
     export { a11y_3 as a11y };
@@ -266,8 +306,8 @@ export namespace alert {
     export { title_2 as title };
     const icon_2: string;
     export { icon_2 as icon };
-    const negative_1: string;
-    export { negative_1 as negative };
+    const negative_2: string;
+    export { negative_2 as negative };
     export const negativeIcon: string;
     const positive_1: string;
     export { positive_1 as positive };
@@ -342,7 +382,8 @@ export namespace breadcrumbs {
     const wrapper_9: string;
     export { wrapper_9 as wrapper };
     export const text: string;
-    export const link: string;
+    const link_1: string;
+    export { link_1 as link };
     export const separator: string;
     const a11y_4: string;
     export { a11y_4 as a11y };

package/component-classes/index.js

@@ -220,39 +220,129 @@ export const expandable = {
   titleType: 'h4',
 };
 
+const buttonDefaultStyling = 'font-bold max-w-max focusable justify-center transition-colors ease-in-out';
+
+const buttonColors = {
+  primary: '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',
+  secondary: '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',
+  utility: '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',
+  destructive: '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',
+  pill: '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',
+  disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',
+  quiet: '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',
+  utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',
+  negativeQuiet: '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',
+  loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',
+  link: 'i-text-$color-button-link-text',
+};
+
+const buttonTypes = {
+  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,
+  utility: `border rounded-4 ${buttonDefaultStyling}`,
+  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  pill:
+  `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
+  link: `max-w-max bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,
+};
+
+const buttonSizes = {
+  xsmall: 'py-6 px-16',
+  small: 'py-8 px-16',
+  medium: 'py-10 px-14',
+  large: 'py-12 px-16',
+  utility: 'py-[11px] px-[15px]',
+  smallUtility: 'py-[7px] px-[15px]',
+  pill: 'min-h-[44px] min-w-[44px]',
+  pillSmall: 'min-h-32 min-w-32',
+  linkSmall: 'p-0',
+};
+
+const buttonTextSizes = {
+  medium: 'text-m leading-[24]',
+  xsmall: 'text-xs',
+};
+
+const buttonVariants = {
+  inProgress:
+    `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited
+  quiet:
+    `border-0 rounded-8 ${buttonDefaultStyling}`,
+  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
+  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  isDisabled:
+    `font-bold max-w-max justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled
+};
+
 export const button = {
   // Buttontypes
-  buttonSecondary:
-    'py-10 px-14 border-2 font-bold rounded-8 text-m leading-[24] 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--default. using tailwind ease-in-out instead of fabric transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96)
-  buttonPrimary:
-    '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-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--primary, .button--cta
-  buttonFlat:
-    '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--quiet, .button--flat
-  buttonDestructive:
-    '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
-  buttonDestructiveFlat:
-    '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--destructive-flat
-  buttonUtility:
-    '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
-  buttonUtilityFlat:
-    'py-12 px-16 bg-transparent 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--utility-flat
-  buttonPill:
-    'font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out rounded-full! min-h-[44px] min-w-[44px] border-0! p-4 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 inline-flex items-center justify-center hover:bg-clip-padding', // .button--pill
-  buttonLink:
-    'leading-[24] max-w-max bg-transparent focusable ease-in-out inline i-text-$color-button-link-text active:underline hover:underline', //.button--link /* Buttons pretending to be links, (Should rather inherit the actual link setup in the future?)  */
-  // Size stuff
-  buttonSmall: 'px-16 py-6 text-xs!', // .button--small
-  buttonSmallOverride: 'py-8', // .button--small.button--primary, .button--small.button--destructive, .button--small.button--destructive-flat, .button--small.button--order, .button--small.button--quiet
-  buttonSmallSecondary: 'py-6', // .button--small.button--secondary
-  buttonSmallUtility: 'py-7 px-15', // .button--small.button--secondary
-  buttonSmallButtonPill: 'p-4 min-h-32 min-w-32', // .button--small.button--pill
-  buttonSmallButtonLink: 'p-0', // .button--small.button--link
-  // Disabled
-  buttonIsDisabled:
-    'py-10 px-14 font-bold leading-[24] max-w-max justify-center transition-colors ease-in-out i-bg-$color-button-disabled-background! i-text-$color-button-disabled-text cursor-default pointer-events-none', // .button:disabled, .button--is-disabled
-  // Progress indicator
-  buttonInProgress:
-    'py-10 px-14 border-0 font-bold rounded-8 leading-[24] max-w-max focusable justify-center transition-colors ease-in-out animate-inprogress i-text-$color-button-loading-text! pointer-events-none i-bg-$color-button-loading-background!', // .button--in-progress, a.button--in-progress:visited
+  secondary:
+  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button
+  secondaryHref:
+  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondaryDisabled:
+  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondaryQuiet:
+  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondaryQuietDisabled:
+  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondaryLoading:
+  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  secondaryQuietLoading:
+  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+
+  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta
+  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,
+  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,
+  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,
+  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+
+  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility
+  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat
+  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,
+  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
+  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+
+  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive
+  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat
+  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,
+  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,
+  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
+  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,
+  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,
+  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,
+
+  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill
+  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,
+  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+
+  link: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.link}`,
+  linkSmall: `${buttonSizes.linkSmall} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
   linkAsButton: 'inline-block hover:no-underline',
   a11y: 'sr-only',
 };
@@ -292,7 +382,7 @@ export const modal = {
   title:
     '-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0',
   titleText: 'mb-0 h4 sm:h3',
-  titleButton: button.buttonPill + ' sm:min-h-[32px] sm:min-w-[32px]',
+  titleButton: button.pill + ' sm:min-h-[32px] sm:min-w-[32px]',
   titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',
   titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',
   titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',

package/component-classes/shortcuts.js

@@ -1,17 +1,15 @@
-import { button } from './index.js';
-
 export const buttons = {
-  'button': button.buttonSecondary,
-  'button--secondary': button.buttonSecondary,
-  'button--default': button.buttonSecondary,
-  'button--small': button.buttonSmall,
-  'button--link': button.buttonLink,
-  'button--primary': button.buttonPrimary,
-  'button--cta': button.buttonPrimary,
-  'button--pill': button.buttonPill,
-  'button--utility': button.buttonUtility,
-  'button--utility-flat': button.buttonUtilityFlat,
-  'button--destructive': button.buttonDestructive,
-  'button--destructive-flat': button.buttonDestructiveFlat,
-  'button--flat': button.buttonFlat,
+  '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--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!',
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/css",
   "repository": "git@github.com:warp-ds/css.git",
-  "version": "1.0.1-next.2",
+  "version": "1.0.1-next.3",
   "scripts": {
     "build": "pnpm build:tokens && pnpm build:resets && pnpm build:cc",
     "commit": "cz",