@actabldesign/bellhop-styles 0.0.4 → 0.0.12

package/src/bh-tokens/components/button.scss

@@ -0,0 +1,640 @@
+/* ==========================================================================
+   BH-BUTTON COMPONENT STYLES
+   Uses tokens from _button.tokens.scss
+   ========================================================================== */
+
+@use './button.tokens' as *;
+
+:host {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+/* ==========================================================================
+   BASE BUTTON
+   ========================================================================== */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--bh-button-font-family);
+  font-weight: var(--bh-button-font-weight);
+  border: 1px solid transparent;
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+  transition: var(--bh-button-transition);
+  text-decoration: none;
+  outline: none;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+   BUTTON SIZES
+   ========================================================================== */
+
+.btn-xs {
+  padding: 0 var(--bh-button-padding-x-xs);
+  height: var(--bh-button-height-xs);
+  border-radius: var(--bh-button-radius);
+  font-size: var(--bh-button-font-size-xs);
+  gap: var(--bh-button-gap-xs);
+}
+
+.btn-sm {
+  padding: 0 var(--bh-button-padding-x-sm);
+  height: var(--bh-button-height-sm);
+  border-radius: var(--bh-button-radius);
+  font-size: var(--bh-button-font-size-sm);
+  gap: var(--bh-button-gap-sm);
+}
+
+.btn-md {
+  padding: 0 var(--bh-button-padding-x-md);
+  height: var(--bh-button-height-md);
+  border-radius: var(--bh-button-radius);
+  font-size: var(--bh-button-font-size-md);
+  gap: var(--bh-button-gap-md);
+}
+
+.btn-lg {
+  padding: 0 var(--bh-button-padding-x-lg);
+  height: var(--bh-button-height-lg);
+  border-radius: var(--bh-button-radius);
+  font-size: var(--bh-button-font-size-lg);
+  gap: var(--bh-button-gap-lg);
+}
+
+/* ==========================================================================
+   ICON PADDING COMPENSATION
+   ========================================================================== */
+
+.btn-xs.btn-icon-leading {
+  padding-left: calc(var(--bh-button-padding-x-xs) - var(--bh-button-gap-xs));
+}
+
+.btn-sm.btn-icon-leading {
+  padding-left: calc(var(--bh-button-padding-x-sm) - var(--bh-button-gap-sm));
+}
+
+.btn-md.btn-icon-leading {
+  padding-left: calc(var(--bh-button-padding-x-md) - var(--bh-button-gap-md));
+}
+
+.btn-lg.btn-icon-leading {
+  padding-left: calc(var(--bh-button-padding-x-lg) - var(--bh-button-gap-lg));
+}
+
+.btn-xs.btn-icon-trailing {
+  padding-right: calc(var(--bh-button-padding-x-xs) - var(--bh-button-gap-xs));
+}
+
+.btn-sm.btn-icon-trailing {
+  padding-right: calc(var(--bh-button-padding-x-sm) - var(--bh-button-gap-sm));
+}
+
+.btn-md.btn-icon-trailing {
+  padding-right: calc(var(--bh-button-padding-x-md) - var(--bh-button-gap-md));
+}
+
+.btn-lg.btn-icon-trailing {
+  padding-right: calc(var(--bh-button-padding-x-lg) - var(--bh-button-gap-lg));
+}
+
+/* ==========================================================================
+   BUTTON HIERARCHIES - DEFAULT KIND
+   ========================================================================== */
+
+.btn-primary.btn-default {
+  background-color: var(--bh-button-primary-default-bg);
+  color: var(--bh-button-primary-default-color);
+  border-color: var(--bh-button-primary-default-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-primary-default-color);
+  }
+}
+
+.btn-secondary.btn-default {
+  background-color: var(--bh-button-secondary-default-bg);
+  color: var(--bh-button-secondary-default-color);
+  border-color: var(--bh-button-secondary-default-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-secondary-default-color);
+  }
+}
+
+.btn-tertiary.btn-default {
+  background-color: var(--bh-button-tertiary-default-bg);
+  color: var(--bh-button-tertiary-default-color);
+  border-color: var(--bh-button-tertiary-default-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-tertiary-default-color);
+  }
+}
+
+.btn-quaternary.btn-default {
+  background-color: var(--bh-button-quaternary-default-bg);
+  color: var(--bh-button-quaternary-default-color);
+  border-color: var(--bh-button-quaternary-default-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-quaternary-default-color);
+  }
+}
+
+/* ==========================================================================
+   BUTTON HIERARCHIES - DESTRUCTIVE KIND
+   ========================================================================== */
+
+.btn-primary.btn-destructive {
+  background-color: var(--bh-button-primary-destructive-bg);
+  color: var(--bh-button-primary-destructive-color);
+  border-color: var(--bh-button-primary-destructive-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-primary-destructive-color);
+  }
+}
+
+.btn-secondary.btn-destructive {
+  background-color: var(--bh-button-secondary-destructive-bg);
+  color: var(--bh-button-secondary-destructive-color);
+  border-color: var(--bh-button-secondary-destructive-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-secondary-destructive-color);
+  }
+}
+
+.btn-tertiary.btn-destructive {
+  background-color: var(--bh-button-tertiary-destructive-bg);
+  color: var(--bh-button-tertiary-destructive-color);
+  border-color: var(--bh-button-tertiary-destructive-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-tertiary-destructive-color);
+  }
+}
+
+.btn-quaternary.btn-destructive {
+  background-color: var(--bh-button-quaternary-destructive-bg);
+  color: var(--bh-button-quaternary-destructive-color);
+  border-color: var(--bh-button-quaternary-destructive-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-quaternary-destructive-color);
+  }
+}
+
+/* ==========================================================================
+   BUTTON HIERARCHIES - SUCCESS KIND
+   ========================================================================== */
+
+.btn-primary.btn-success {
+  background-color: var(--bh-button-primary-success-bg);
+  color: var(--bh-button-primary-success-color);
+  border-color: var(--bh-button-primary-success-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-primary-success-color);
+  }
+}
+
+.btn-secondary.btn-success {
+  background-color: var(--bh-button-secondary-success-bg);
+  color: var(--bh-button-secondary-success-color);
+  border-color: var(--bh-button-secondary-success-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-secondary-success-color);
+  }
+}
+
+.btn-tertiary.btn-success {
+  background-color: var(--bh-button-tertiary-success-bg);
+  color: var(--bh-button-tertiary-success-color);
+  border-color: var(--bh-button-tertiary-success-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-tertiary-success-color);
+  }
+}
+
+.btn-quaternary.btn-success {
+  background-color: var(--bh-button-quaternary-success-bg);
+  color: var(--bh-button-quaternary-success-color);
+  border-color: var(--bh-button-quaternary-success-border);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-quaternary-success-color);
+  }
+}
+
+/* ==========================================================================
+   HOVER STATES - DEFAULT KIND
+   ========================================================================== */
+
+.btn-primary.btn-default:hover:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-primary-default-bg-hover);
+  border-color: var(--bh-button-primary-default-border-hover);
+}
+
+.btn-secondary.btn-default:hover:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-secondary-default-bg-hover);
+  color: var(--bh-button-secondary-default-color-hover);
+  border-color: var(--bh-button-secondary-default-border-hover);
+}
+
+.btn-tertiary.btn-default:hover:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-tertiary-default-bg-hover);
+  color: var(--bh-button-tertiary-default-color-hover);
+}
+
+.btn-quaternary.btn-default:hover:not(:disabled):not(.btn-disabled) {
+  color: var(--bh-button-quaternary-default-color-hover);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-quaternary-default-color-hover);
+  }
+}
+
+/* ==========================================================================
+   HOVER STATES - DESTRUCTIVE KIND
+   ========================================================================== */
+
+.btn-primary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-primary-destructive-bg-hover);
+  border-color: var(--bh-button-primary-destructive-border-hover);
+}
+
+.btn-secondary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-secondary-destructive-bg-hover);
+  border-color: var(--bh-button-secondary-destructive-border-hover);
+}
+
+.btn-tertiary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-tertiary-destructive-bg-hover);
+}
+
+.btn-quaternary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {
+  color: var(--bh-button-quaternary-destructive-color-hover);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-quaternary-destructive-color-hover);
+  }
+}
+
+/* ==========================================================================
+   HOVER STATES - SUCCESS KIND
+   ========================================================================== */
+
+.btn-primary.btn-success:hover:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-primary-success-bg-hover);
+  border-color: var(--bh-button-primary-success-border-hover);
+}
+
+.btn-secondary.btn-success:hover:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-secondary-success-bg-hover);
+  border-color: var(--bh-button-secondary-success-border-hover);
+}
+
+.btn-tertiary.btn-success:hover:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-tertiary-success-bg-hover);
+}
+
+.btn-quaternary.btn-success:hover:not(:disabled):not(.btn-disabled) {
+  color: var(--bh-button-quaternary-success-color-hover);
+
+  &.btn-icon-leading span,
+  &.btn-icon-trailing span,
+  .material-symbols-outlined {
+    color: var(--bh-button-quaternary-success-color-hover);
+  }
+}
+
+/* ==========================================================================
+   ACTIVE STATES - DEFAULT KIND
+   ========================================================================== */
+
+.btn-primary.btn-default:active:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-primary-default-bg-active);
+  border-color: var(--bh-button-primary-default-border-active);
+}
+
+.btn-secondary.btn-default:active:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-secondary-default-bg-active);
+  border-color: var(--bh-button-secondary-default-border-active);
+}
+
+.btn-tertiary.btn-default:active:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-tertiary-default-bg-active);
+}
+
+.btn-quaternary.btn-default:active:not(:disabled):not(.btn-disabled) {
+  color: var(--bh-button-quaternary-default-color-active);
+}
+
+/* ==========================================================================
+   ACTIVE STATES - DESTRUCTIVE KIND
+   ========================================================================== */
+
+.btn-primary.btn-destructive:active:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-primary-destructive-bg-active);
+  border-color: var(--bh-button-primary-destructive-border-active);
+}
+
+.btn-secondary.btn-destructive:active:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-secondary-destructive-bg-active);
+  border-color: var(--bh-button-secondary-destructive-border-active);
+}
+
+.btn-tertiary.btn-destructive:active:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-tertiary-destructive-bg-active);
+}
+
+.btn-quaternary.btn-destructive:active:not(:disabled):not(.btn-disabled) {
+  color: var(--bh-button-quaternary-destructive-color-active);
+}
+
+/* ==========================================================================
+   ACTIVE STATES - SUCCESS KIND
+   ========================================================================== */
+
+.btn-primary.btn-success:active:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-primary-success-bg-active);
+  border-color: var(--bh-button-primary-success-border-active);
+}
+
+.btn-secondary.btn-success:active:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-secondary-success-bg-active);
+  border-color: var(--bh-button-secondary-success-border-active);
+}
+
+.btn-tertiary.btn-success:active:not(:disabled):not(.btn-disabled) {
+  background-color: var(--bh-button-tertiary-success-bg-active);
+}
+
+.btn-quaternary.btn-success:active:not(:disabled):not(.btn-disabled) {
+  color: var(--bh-button-quaternary-success-color-active);
+}
+
+/* ==========================================================================
+   FOCUS STATES
+   ========================================================================== */
+
+.btn.btn-default:focus,
+.btn.btn-default:focus-visible {
+  outline: var(--bh-button-focus-outline-width) solid
+    var(--bh-button-primary-default-focus);
+  outline-offset: var(--bh-button-focus-outline-offset);
+}
+
+.btn.btn-destructive:focus,
+.btn.btn-destructive:focus-visible {
+  outline: var(--bh-button-focus-outline-width) solid
+    var(--bh-button-primary-destructive-focus);
+  outline-offset: var(--bh-button-focus-outline-offset);
+}
+
+.btn.btn-success:focus,
+.btn.btn-success:focus-visible {
+  outline: var(--bh-button-focus-outline-width) solid
+    var(--bh-button-primary-success-focus);
+  outline-offset: var(--bh-button-focus-outline-offset);
+}
+
+/* ==========================================================================
+   DISABLED STATES
+   ========================================================================== */
+
+.btn:disabled,
+.btn-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn-primary:disabled,
+.btn-primary.btn-disabled {
+  background-color: var(--bh-button-disabled-bg);
+  color: var(--bh-button-disabled-color);
+  border-color: var(--bh-button-disabled-border);
+}
+
+.btn-secondary:disabled,
+.btn-secondary.btn-disabled,
+.btn-tertiary:disabled,
+.btn-tertiary.btn-disabled,
+.btn-quaternary:disabled,
+.btn-quaternary.btn-disabled {
+  opacity: var(--bh-button-disabled-opacity);
+}
+
+/* ==========================================================================
+   LOADING STATE
+   ========================================================================== */
+
+.btn-loading {
+  cursor: wait;
+  pointer-events: none;
+}
+
+.btn-loading .btn-label {
+  opacity: var(--bh-button-loading-label-opacity);
+}
+
+/* ==========================================================================
+   BUTTON CONTENT ELEMENTS
+   ========================================================================== */
+
+.btn-label {
+  display: inline-block;
+  line-height: inherit;
+}
+
+.btn-quaternary span {
+  text-decoration: underline;
+}
+
+/* ==========================================================================
+   ICONS
+   ========================================================================== */
+
+.btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.btn-icon-material {
+  line-height: 1;
+  vertical-align: middle;
+  color: inherit !important;
+}
+
+.btn-xs .btn-icon-material {
+  font-size: var(--bh-button-icon-size-xs);
+}
+
+.btn-sm .btn-icon-material {
+  font-size: var(--bh-button-icon-size-sm);
+}
+
+.btn-md .btn-icon-material {
+  font-size: var(--bh-button-icon-size-md);
+}
+
+.btn-lg .btn-icon-material {
+  font-size: var(--bh-button-icon-size-lg);
+}
+
+/* ==========================================================================
+   ICON-ONLY BUTTONS
+   ========================================================================== */
+
+.btn-icon-only {
+  padding: 0;
+}
+
+.btn-icon-only.btn-xs {
+  width: var(--bh-button-icon-only-size-xs);
+  height: var(--bh-button-icon-only-size-xs);
+}
+
+.btn-icon-only.btn-sm {
+  width: var(--bh-button-icon-only-size-sm);
+  height: var(--bh-button-icon-only-size-sm);
+}
+
+.btn-icon-only.btn-md {
+  width: var(--bh-button-icon-only-size-md);
+  height: var(--bh-button-icon-only-size-md);
+}
+
+.btn-icon-only.btn-lg {
+  width: var(--bh-button-icon-only-size-lg);
+  height: var(--bh-button-icon-only-size-lg);
+}
+
+.btn-icon-only .btn-icon-material {
+  margin: 0;
+}
+
+/* ==========================================================================
+   LOADING SPINNER
+   ========================================================================== */
+
+.btn-loading-icon {
+  line-height: 1;
+  vertical-align: middle;
+  color: inherit;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==========================================================================
+   FLUID (FULL-WIDTH) BUTTON
+   ========================================================================== */
+
+.btn-fluid {
+  width: 100%;
+  display: flex;
+}
+
+/* ==========================================================================
+   BADGE STYLES
+   ========================================================================== */
+
+.btn-badge {
+  position: absolute;
+  top: var(--bh-button-badge-offset-top);
+  right: var(--bh-button-badge-offset-right);
+  min-width: var(--bh-button-badge-min-width);
+  height: var(--bh-button-badge-height);
+  padding: 0 var(--bh-button-badge-padding-x);
+  border-radius: var(--bh-button-badge-radius);
+  background-color: var(--bh-button-badge-bg-secondary);
+  color: var(--bh-button-badge-color);
+  font-size: var(--bh-button-badge-font-size);
+  line-height: var(--bh-button-badge-height);
+  font-weight: var(--bh-button-badge-font-weight);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Badge severity variants */
+.btn-badge-primary {
+  background-color: var(--bh-button-badge-bg-primary);
+}
+
+.btn-badge-secondary {
+  background-color: var(--bh-button-badge-bg-secondary);
+}
+
+.btn-badge-success {
+  background-color: var(--bh-button-badge-bg-success);
+}
+
+.btn-badge-info {
+  background-color: var(--bh-button-badge-bg-info);
+}
+
+.btn-badge-warn {
+  background-color: var(--bh-button-badge-bg-warn);
+}
+
+.btn-badge-danger {
+  background-color: var(--bh-button-badge-bg-danger);
+}
+
+.btn-badge-help {
+  background-color: var(--bh-button-badge-bg-help);
+}
+
+.btn-badge-contrast {
+  background-color: var(--bh-button-badge-bg-contrast);
+}