@cbpds/web-components/dist/collection/components/cbp-button/cbp-button.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-button-color: var(--cbp-color-text-lightest);
* @prop --cbp-button-color-hover: var(--cbp-color-text-lightest);
* @prop --cbp-button-color-focus: var(--cbp-color-text-lightest);
* @prop --cbp-button-color-active: var(--cbp-color-text-lightest);
* @prop --cbp-button-color-bg: var(--cbp-color-interactive-primary-dark);
* @prop --cbp-button-color-bg-hover: var(--cbp-color-interactive-primary-darker);
* @prop --cbp-button-color-bg-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-button-color-bg-active: var(--cbp-color-interactive-active-dark);
* @prop --cbp-button-color-border: var(--cbp-color-interactive-primary-dark);
* @prop --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-darker);
* @prop --cbp-button-color-border-focus: var(--cbp-color-interactive-focus-dark);
* @prop --cbp-button-color-border-active: var(--cbp-color-interactive-active-dark);
* @prop --cbp-button-color-dark: var(--cbp-color-text-darkest);
* @prop --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
* @prop --cbp-button-color-focus-dark: var(--cbp-color-text-darkest);
* @prop --cbp-button-color-active-dark: var(--cbp-color-text-darkest);
* @prop --cbp-button-color-bg-dark: var(--cbp-color-interactive-primary-base);
* @prop --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-primary-light);
* @prop --cbp-button-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-button-color-bg-active-dark: var(--cbp-color-interactive-active-light);
* @prop --cbp-button-color-border-dark: var(--cbp-color-interactive-primary-base);
* @prop --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-primary-light);
* @prop --cbp-button-color-border-focus-dark: var(--cbp-color-interactive-focus-light);
* @prop --cbp-button-color-border-active-dark: var(--cbp-color-interactive-active-light);
* @prop --cbp-button-color-outline-focus: var(--cbp-color-white);
* @prop --cbp-button-color-outline-focus-dark: var(--cbp-color-black);
* @prop --cbp-button-border-width: var(--cbp-border-size-md);
* @prop --cbp-button-border-style: solid;
* @prop --cbp-button-border-radius: var(--cbp-border-radius-soft);
* @prop --cbp-button-gap: 0 var(--cbp-space-2x);
*/
/* 
 * Buttons get customized and overridden often within the design system and may benefit from a fully fleshed-out CSS API
 */
:root {
  --cbp-button-color: var(--cbp-color-text-lightest);
  --cbp-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-button-color-focus: var(--cbp-color-text-lightest);
  --cbp-button-color-active: var(--cbp-color-text-lightest);
  --cbp-button-color-bg: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-primary-darker);
  --cbp-button-color-bg-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-button-color-bg-active: var(--cbp-color-interactive-active-dark);
  --cbp-button-color-border: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-darker);
  --cbp-button-color-border-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-button-color-border-active: var(--cbp-color-interactive-active-dark);
  --cbp-button-color-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-focus-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-active-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-bg-dark: var(--cbp-color-interactive-primary-base);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-primary-light);
  --cbp-button-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-button-color-bg-active-dark: var(--cbp-color-interactive-active-light);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-primary-base);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-primary-light);
  --cbp-button-color-border-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-button-color-border-active-dark: var(--cbp-color-interactive-active-light);
  --cbp-button-color-outline-focus: var(--cbp-color-white);
  --cbp-button-color-outline-focus-dark: var(--cbp-color-black);
  --cbp-button-focus-outline-width: var(--cbp-border-size-md);
  --cbp-button-padding: var(--cbp-space-2x);
  --cbp-button-border-width: var(--cbp-border-size-md);
  --cbp-button-border-style: solid;
  --cbp-button-border-radius: var(--cbp-border-radius-soft);
  --cbp-button-min-width: auto;
  --cbp-button-min-height: 2.25rem;
  --cbp-button-width: auto;
  --cbp-button-height: auto;
  --cbp-button-gap: 0 var(--cbp-space-2x);
}

/* 
 * Dark Mode - display dark design based on mode or context.
 * This toggle should have the highest specificity, so that what ever values were specified for the dark version 
 * get written to the light within the scope of this component.
 */
[data-cbp-theme=light] cbp-button[context*=dark]:not(#fakeId),
[data-cbp-theme=dark] cbp-button:not([context=dark-inverts]):not([context=light-always]):not(#fakeId) {
  --cbp-button-color: var(--cbp-button-color-dark);
  --cbp-button-color-hover: var(--cbp-button-color-hover-dark);
  --cbp-button-color-focus: var(--cbp-button-color-focus-dark);
  --cbp-button-color-active: var(--cbp-button-color-active-dark);
  --cbp-button-color-bg: var(--cbp-button-color-bg-dark);
  --cbp-button-color-bg-hover: var(--cbp-button-color-bg-hover-dark);
  --cbp-button-color-bg-focus: var(--cbp-button-color-bg-focus-dark);
  --cbp-button-color-bg-active: var(--cbp-button-color-bg-active-dark);
  --cbp-button-color-border: var(--cbp-button-color-border-dark);
  --cbp-button-color-border-hover: var(--cbp-button-color-border-hover-dark);
  --cbp-button-color-border-focus: var(--cbp-button-color-border-focus-dark);
  --cbp-button-color-border-active: var(--cbp-button-color-border-active-dark);
  --cbp-button-color-outline-focus: var(--cbp-button-color-outline-focus-dark);
}

cbp-button {
  display: inline-block;
  width: var(--cbp-button-width);
  height: var(--cbp-button-height);
}
cbp-button button, cbp-button a {
  display: inline-flex;
  gap: var(--cbp-button-gap);
  align-items: center;
  justify-content: center;
  border-width: var(--cbp-button-border-width);
  border-style: solid;
  border-radius: var(--cbp-button-border-radius);
  font-weight: var(--cbp-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--cbp-letter-spacing-loose);
  text-decoration: none;
  padding: var(--cbp-button-padding);
  transition: all var(--cbp-motion-duration-shorter);
  min-width: var(--cbp-button-min-width);
  min-height: var(--cbp-button-min-height);
  width: var(--cbp-button-width);
  height: var(--cbp-button-height);
  white-space: nowrap;
  cursor: pointer;
  color: var(--cbp-button-color);
  background-color: var(--cbp-button-color-bg);
  border-color: var(--cbp-button-color-border);
  outline-color: var(--cbp-button-color-outline-focus);
  outline-style: solid;
  outline-width: 0;
  outline-offset: calc(-1 * var(--cbp-space-1x));
}
cbp-button button:hover, cbp-button a:hover {
  --cbp-button-color: var(--cbp-button-color-hover);
  --cbp-button-color-bg: var(--cbp-button-color-bg-hover);
  --cbp-button-color-border: var(--cbp-button-color-border-hover);
}
cbp-button button:focus, cbp-button a:focus {
  --cbp-button-color: var(--cbp-button-color-focus);
  --cbp-button-color-bg: var(--cbp-button-color-bg-focus);
  --cbp-button-color-border: var(--cbp-button-color-border-focus);
  outline-width: var(--cbp-button-focus-outline-width);
}
cbp-button button:active, cbp-button a:active {
  --cbp-button-color: var(--cbp-button-color-active);
  --cbp-button-color-bg: var(--cbp-button-color-bg-active);
  --cbp-button-color-border: var(--cbp-button-color-border-active);
}
cbp-button[fill=solid] {
  --cbp-button-color: var(--cbp-color-text-lightest);
  --cbp-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-button-color-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
}
cbp-button[fill=solid][color=primary] {
  --cbp-button-color-bg: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-primary-darker);
  --cbp-button-color-border: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-darker);
  --cbp-button-color-bg-dark: var(--cbp-color-interactive-primary-light);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-primary-lighter);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-primary-light);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-primary-lighter);
}
cbp-button[fill=solid][color=secondary] {
  --cbp-button-color-bg: var(--cbp-color-interactive-secondary-dark);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-border: var(--cbp-color-interactive-secondary-dark);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-bg-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}
cbp-button[fill=solid][color=tertiary] {
  --cbp-button-color-bg: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-border: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-dark: var(--cbp-color-text-lightest);
  --cbp-button-color-bg-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}
cbp-button[fill=solid][color=danger] {
  --cbp-button-color-bg: var(--cbp-color-danger-dark);
  --cbp-button-color-bg-hover: var(--cbp-color-danger-darker);
  --cbp-button-color-border: var(--cbp-color-danger-dark);
  --cbp-button-color-border-hover: var(--cbp-color-danger-darker);
  --cbp-button-color-bg-dark: var(--cbp-color-danger-light);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-danger-lighter);
  --cbp-button-color-border-dark: var(--cbp-color-danger-light);
  --cbp-button-color-border-hover-dark: var(--cbp-color-danger-lighter);
}
cbp-button[fill=solid]:has(button:disabled), cbp-button[fill=solid]:has(a[aria-disabled=true]) {
  --cbp-button-color: var(--cbp-color-interactive-disabled-light);
  --cbp-button-color-hover: var(--cbp-button-color);
  --cbp-button-color-focus: var(--cbp-button-color);
  --cbp-button-color-active: var(--cbp-button-color);
  --cbp-button-color-bg: var(--cbp-color-interactive-disabled-dark);
  --cbp-button-color-bg-hover: var(--cbp-button-color-bg);
  --cbp-button-color-bg-focus: var(--cbp-button-color-bg);
  --cbp-button-color-bg-active: var(--cbp-button-color-bg);
  --cbp-button-color-border: var(--cbp-color-interactive-disabled-dark);
  --cbp-button-color-border-hover: var(--cbp-button-color-border);
  --cbp-button-color-border-focus: var(--cbp-button-color-border);
  --cbp-button-color-border-active: var(--cbp-button-color-border);
  --cbp-button-color-dark: var(--cbp-color-interactive-disabled-dark);
  --cbp-button-color-hover-dark: var(--cbp-button-color-dark);
  --cbp-button-color-focus-dark: var(--cbp-button-color-dark);
  --cbp-button-color-active-dark: var(--cbp-button-color-dark);
  --cbp-button-color-bg-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-button-color-bg-hover-dark: var(--cbp-button-color-bg-dark);
  --cbp-button-color-bg-focus-dark: var(--cbp-button-color-bg-dark);
  --cbp-button-color-bg-active-dark: var(--cbp-button-color-bg-dark);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-button-color-border-hover-dark: var(--cbp-button-color-border-dark);
  --cbp-button-color-border-focus-dark: var(--cbp-button-color-border-dark);
  --cbp-button-color-border-active-dark: var(--cbp-button-color-border-dark);
}
cbp-button[fill=outline] {
  --cbp-button-color-bg: var(--cbp-color-white);
  --cbp-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-button-color-bg-dark: var(--cbp-color-gray-cool-80);
  --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
}
cbp-button[fill=outline][color=primary] {
  --cbp-button-color: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-border: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-dark: var(--cbp-color-interactive-primary-light);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-primary-light);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-primary-light);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-primary-light);
}
cbp-button[fill=outline][color=secondary] {
  --cbp-button-color: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-border: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}
cbp-button[fill=outline][color=tertiary] {
  --cbp-button-color: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-border: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}
cbp-button[fill=outline][color=danger] {
  --cbp-button-color: var(--cbp-color-danger-dark);
  --cbp-button-color-bg-hover: var(--cbp-color-danger-dark);
  --cbp-button-color-border: var(--cbp-color-danger-dark);
  --cbp-button-color-border-hover: var(--cbp-color-danger-darker);
  --cbp-button-color-dark: var(--cbp-color-danger-light);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-danger-light);
  --cbp-button-color-border-dark: var(--cbp-color-danger-light);
  --cbp-button-color-border-hover-dark: var(--cbp-color-danger-light);
}
cbp-button[fill=outline]:has(button:disabled), cbp-button[fill=outline]:has(a[aria-disabled=true]) {
  --cbp-button-color: var(--cbp-color-interactive-disabled-dark);
  --cbp-button-color-hover: var(--cbp-button-color);
  --cbp-button-color-focus: var(--cbp-button-color);
  --cbp-button-color-active: var(--cbp-button-color);
  --cbp-button-color-bg: var(--cbp-color-white);
  --cbp-button-color-bg-hover: var(--cbp-color-white);
  --cbp-button-color-bg-focus: var(--cbp-color-white);
  --cbp-button-color-bg-active: var(--cbp-color-white);
  --cbp-button-color-border: var(--cbp-color-interactive-disabled-dark);
  --cbp-button-color-border-hover: var(--cbp-button-color-border);
  --cbp-button-color-border-focus: var(--cbp-button-color-border);
  --cbp-button-color-border-active: var(--cbp-button-color-border);
  --cbp-button-color-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-button-color-hover-dark: var(--cbp-button-color-dark);
  --cbp-button-color-focus-dark: var(--cbp-button-color-dark);
  --cbp-button-color-active-dark: var(--cbp-button-color-dark);
  --cbp-button-color-bg-dark: var(--cbp-color-gray-cool-80);
  --cbp-button-color-bg-hover-dark: var(--cbp-button-color-bg-dark);
  --cbp-button-color-bg-focus-dark: var(--cbp-button-color-bg-dark);
  --cbp-button-color-bg-active-dark: var(--cbp-button-color-bg-dark);
  --cbp-button-color-border-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-button-color-border-hover-dark: var(--cbp-button-color-border-dark);
  --cbp-button-color-border-focus-dark: var(--cbp-button-color-border-dark);
  --cbp-button-color-border-active-dark: var(--cbp-button-color-border-dark);
}
cbp-button[fill=ghost] {
  --cbp-button-color-bg: transparent;
  --cbp-button-color-border: transparent;
  --cbp-button-color-bg-dark: transparent;
  --cbp-button-color-border-dark: transparent;
}
cbp-button[fill=ghost][color=primary] {
  --cbp-button-color: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-primary-dark);
  --cbp-button-color-dark: var(--cbp-color-interactive-primary-light);
  --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-primary-light);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-primary-light);
}
cbp-button[fill=ghost][color=secondary] {
  --cbp-button-color: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}
cbp-button[fill=ghost][color=tertiary] {
  --cbp-button-color: var(--cbp-color-interactive-secondary-base);
  --cbp-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-button-color-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-button-color-border-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}
cbp-button[fill=ghost][color=danger] {
  --cbp-button-color: var(--cbp-color-danger-dark);
  --cbp-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-button-color-bg-hover: var(--cbp-color-danger-dark);
  --cbp-button-color-border-hover: var(--cbp-color-danger-dark);
  --cbp-button-color-dark: var(--cbp-color-danger-light);
  --cbp-button-color-hover-dark: var(--cbp-color-text-darkest);
  --cbp-button-color-bg-hover-dark: var(--cbp-color-danger-light);
  --cbp-button-color-border-hover-dark: var(--cbp-color-danger-light);
}
cbp-button[fill=ghost]:has(button:disabled), cbp-button[fill=ghost]:has(a[aria-disabled=true]) {
  --cbp-button-color: var(--cbp-color-interactive-disabled-dark);
  --cbp-button-color-hover: var(--cbp-button-color);
  --cbp-button-color-focus: var(--cbp-button-color);
  --cbp-button-color-active: var(--cbp-button-color);
  --cbp-button-color-bg-hover: transparent;
  --cbp-button-color-bg-focus: transparent;
  --cbp-button-color-bg-active: transparent;
  --cbp-button-color-border-hover: transparent;
  --cbp-button-color-border-focus: transparent;
  --cbp-button-color-border-active: transparent;
  --cbp-button-color-dark: var(--cbp-color-interactive-disabled-light);
  --cbp-button-color-hover-dark: var(--cbp-button-color-dark);
  --cbp-button-color-focus-dark: var(--cbp-button-color-dark);
  --cbp-button-color-active-dark: var(--cbp-button-color-dark);
  --cbp-button-color-bg-hover-dark: transparent;
  --cbp-button-color-bg-focus-dark: transparent;
  --cbp-button-color-bg-active-dark: transparent;
  --cbp-button-color-border-hover-dark: transparent;
  --cbp-button-color-border-focus-dark: transparent;
  --cbp-button-color-border-active-dark: transparent;
}
cbp-button[variant=square] button, cbp-button[variant=square] a {
  --cbp-button-height: 2.25rem;
  --cbp-button-width: var(--cbp-button-height);
  padding: unset;
  letter-spacing: unset;
}
cbp-button[variant=cta] button, cbp-button[variant=cta] a {
  font-size: var(--cbp-font-size-heading-sm);
  padding-left: var(--cbp-space-4x);
  padding-right: var(--cbp-space-4x);
  min-height: 3.25rem;
}
cbp-button button:disabled,
cbp-button a[aria-disabled=true] {
  font-style: italic;
  outline: 0;
  cursor: not-allowed;
}