@telesign/boreal-web-components 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/collection/components/actions/bds-button/bds-button.css

@@ -0,0 +1,495 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+bds-button {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.bds-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  appearance: none;
+  border: 1px solid transparent;
+  height: fit-content;
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+  margin: var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);
+  outline: none;
+  font-family: var(--boreal-typography-font-family-primary);
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  width: fit-content;
+  vertical-align: middle;
+}
+.bds-button .bds-button__content {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--boreal-spacing-2xs);
+}
+.bds-button--is-loading {
+  pointer-events: none;
+  position: relative;
+  color: transparent !important;
+}
+.bds-button--is-loading::after {
+  position: absolute;
+  content: " ";
+  box-sizing: inherit;
+  animation: rotateSpinner 0.5s linear infinite;
+  border-radius: 9999px;
+  display: block;
+  height: 1em;
+  width: 1em;
+  rotate: 45deg;
+  left: calc(50% - 0.5em);
+  top: calc(50% - 0.5em);
+  border: 3px solid;
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+.bds-button--size-small {
+  border-radius: var(--boreal-radius-xs);
+  font-size: var(--boreal-typography-font-size-xs);
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+  line-height: var(--boreal-typography-line-height-xs);
+  height: 26px;
+}
+.bds-button--size-small .bds-button__content {
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+}
+.bds-button--size-small .bds-button__content-icon {
+  display: flex;
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: var(--boreal-typography-line-height-xs);
+}
+.bds-button--size-small .bds-button__content-icon:empty {
+  display: none;
+}
+.bds-button--size-small .bds-button__content {
+  /* TODO: Adjust badge styles when badge component is created */
+}
+.bds-button--size-small .bds-button__content-badge:empty {
+  display: none;
+}
+.bds-button--size-small .bds-button__content-badge {
+  display: none;
+}
+.bds-button--size-medium {
+  border-radius: var(--boreal-radius-xs);
+  font-size: var(--boreal-typography-font-size-sm);
+  padding: var(--boreal-spacing-2xs) var(--boreal-spacing-1xs);
+  line-height: var(--boreal-typography-line-height-sm);
+  height: 32px;
+}
+.bds-button--size-medium .bds-button__content {
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+}
+.bds-button--size-medium .bds-button__content-icon {
+  display: flex;
+  font-size: var(--boreal-typography-font-size-md);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-button--size-medium .bds-button__content-icon:empty {
+  display: none;
+}
+.bds-button--size-medium .bds-button__content {
+  /* TODO: Adjust badge styles when badge component is created */
+}
+.bds-button--size-medium .bds-button__content-badge:empty {
+  display: none;
+}
+.bds-button--size-large {
+  border-radius: var(--boreal-radius-xs);
+  font-size: var(--boreal-typography-font-size-md);
+  padding: var(--boreal-spacing-xs);
+  line-height: var(--boreal-typography-line-height-md);
+  height: 44px;
+}
+.bds-button--size-large .bds-button__content {
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+}
+.bds-button--size-large .bds-button__content-icon {
+  display: flex;
+  font-size: var(--boreal-typography-font-size-lg);
+  line-height: var(--boreal-typography-line-height-md);
+}
+.bds-button--size-large .bds-button__content-icon:empty {
+  display: none;
+}
+.bds-button--size-large .bds-button__content {
+  /* TODO: Adjust badge styles when badge component is created */
+}
+.bds-button--size-large .bds-button__content-badge:empty {
+  display: none;
+}
+.bds-button.bds-button--var-default.bds-button--default {
+  color: var(--boreal-text-default);
+  background-color: var(--boreal-ui-inverse);
+  border-color: transparent;
+}
+.bds-button.bds-button--var-default.bds-button--default:hover {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-default.bds-button--default:focus {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--default:active, .bds-button.bds-button--var-default.bds-button--default.bds-button--state-active {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-default.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-disabled);
+  background-color: var(--boreal-ui-inverse);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-disabled);
+  border-bottom-color: var(--boreal-text-disabled);
+}
+.bds-button.bds-button--var-default.bds-button--primary {
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-primary-base);
+  border-color: transparent;
+}
+.bds-button.bds-button--var-default.bds-button--primary:hover {
+  background-color: var(--boreal-ui-primary-dark);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-default.bds-button--primary:focus {
+  background-color: var(--boreal-ui-primary-base);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--primary:active, .bds-button.bds-button--var-default.bds-button--primary.bds-button--state-active {
+  background-color: var(--boreal-ui-primary-dark);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-primary-light);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-inverse);
+  border-bottom-color: var(--boreal-text-inverse);
+}
+.bds-button.bds-button--var-default.bds-button--success {
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-success-base);
+  border-color: transparent;
+}
+.bds-button.bds-button--var-default.bds-button--success:hover {
+  background-color: var(--boreal-ui-success-dark);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-default.bds-button--success:focus {
+  background-color: var(--boreal-ui-success-base);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--success:active, .bds-button.bds-button--var-default.bds-button--success.bds-button--state-active {
+  background-color: var(--boreal-ui-success-dark);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-success-light);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-inverse);
+  border-bottom-color: var(--boreal-text-inverse);
+}
+.bds-button.bds-button--var-default.bds-button--error {
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-danger-base);
+  border-color: transparent;
+}
+.bds-button.bds-button--var-default.bds-button--error:hover {
+  background-color: var(--boreal-ui-danger-dark);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-default.bds-button--error:focus {
+  background-color: var(--boreal-ui-danger-base);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--error:active, .bds-button.bds-button--var-default.bds-button--error.bds-button--state-active {
+  background-color: var(--boreal-ui-danger-dark);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-default.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-inverse);
+  background-color: var(--boreal-ui-danger-light);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-inverse);
+  border-bottom-color: var(--boreal-text-inverse);
+}
+.bds-button.bds-button--var-outline {
+  background-color: transparent;
+}
+.bds-button.bds-button--var-outline.bds-button--default {
+  color: var(--boreal-text-default);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-default-light);
+}
+.bds-button.bds-button--var-outline.bds-button--default:hover {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-outline.bds-button--default:focus {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--default:active, .bds-button.bds-button--var-outline.bds-button--default.bds-button--state-active {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-disabled);
+  background-color: var(--boreal-ui-inverse);
+  border-color: var(--boreal-stroke-default-light);
+  box-shadow: none;
+}
+.bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-disabled);
+  border-bottom-color: var(--boreal-text-disabled);
+}
+.bds-button.bds-button--var-outline.bds-button--primary {
+  color: var(--boreal-text-primary-base);
+  background-color: transparent;
+  border-color: var(--boreal-ui-primary-base);
+}
+.bds-button.bds-button--var-outline.bds-button--primary:hover {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-outline.bds-button--primary:focus {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--primary:active, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--state-active {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-primary-light);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-primary-light);
+  box-shadow: none;
+}
+.bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-primary-light);
+  border-bottom-color: var(--boreal-text-primary-light);
+}
+.bds-button.bds-button--var-outline.bds-button--success {
+  color: var(--boreal-text-success-base);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-success-base);
+}
+.bds-button.bds-button--var-outline.bds-button--success:hover {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-outline.bds-button--success:focus {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--success:active, .bds-button.bds-button--var-outline.bds-button--success.bds-button--state-active {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-success-light);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-success-light);
+  box-shadow: none;
+}
+.bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-success-light);
+  border-bottom-color: var(--boreal-text-success-light);
+}
+.bds-button.bds-button--var-outline.bds-button--error {
+  color: var(--boreal-text-danger-base);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-danger-base);
+}
+.bds-button.bds-button--var-outline.bds-button--error:hover {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-outline.bds-button--error:focus {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--error:active, .bds-button.bds-button--var-outline.bds-button--error.bds-button--state-active {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-danger-light);
+  background-color: transparent;
+  border-color: var(--boreal-stroke-danger-light);
+  box-shadow: none;
+}
+.bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-danger-light);
+  border-bottom-color: var(--boreal-text-danger-light);
+}
+.bds-button.bds-button--var-plain {
+  background-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--default {
+  color: var(--boreal-text-default);
+  background-color: transparent;
+  border-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--default:hover {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-plain.bds-button--default:focus {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-plain.bds-button--default:active, .bds-button.bds-button--var-plain.bds-button--default.bds-button--state-active {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-disabled);
+  background-color: var(--boreal-ui-inverse);
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-disabled);
+  border-bottom-color: var(--boreal-text-disabled);
+}
+.bds-button.bds-button--var-plain.bds-button--primary {
+  color: var(--boreal-text-primary-base);
+  background-color: transparent;
+  border-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--primary:hover {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-plain.bds-button--primary:focus {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-plain.bds-button--primary:active, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--state-active {
+  background-color: var(--boreal-ui-primary-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-primary-light);
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-primary-light);
+  border-bottom-color: var(--boreal-text-primary-light);
+}
+.bds-button.bds-button--var-plain.bds-button--success {
+  color: var(--boreal-text-success-base);
+  background-color: transparent;
+  border-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--success:hover {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-plain.bds-button--success:focus {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-plain.bds-button--success:active, .bds-button.bds-button--var-plain.bds-button--success.bds-button--state-active {
+  background-color: var(--boreal-ui-success-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-success-light);
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-success-light);
+  border-bottom-color: var(--boreal-text-success-light);
+}
+.bds-button.bds-button--var-plain.bds-button--error {
+  color: var(--boreal-text-danger-base);
+  background-color: transparent;
+  border-color: transparent;
+}
+.bds-button.bds-button--var-plain.bds-button--error:hover {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-button.bds-button--var-plain.bds-button--error:focus {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button.bds-button--var-plain.bds-button--error:active, .bds-button.bds-button--var-plain.bds-button--error.bds-button--state-active {
+  background-color: var(--boreal-ui-danger-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading {
+  cursor: not-allowed;
+  color: var(--boreal-text-danger-light);
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading::after {
+  border-left-color: var(--boreal-text-danger-light);
+  border-bottom-color: var(--boreal-text-danger-light);
+}
+
+@keyframes rotateSpinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}