@actabldesign/bellhop-styles 0.0.4 → 0.0.12

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

@@ -0,0 +1,497 @@
+/* ==========================================================================
+   BH-BADGE COMPONENT STYLES
+   Uses tokens from _badge.tokens.scss
+   ========================================================================== */
+
+@use './badge.tokens' as *;
+
+/* Badge styles are defined in ../components/badge.css using CSS custom properties */
+/* This file exists for consistency with other components that use the bh-tokens pattern */
+
+/* ==========================================================================
+   BH-BADGE COMPONENT TOKENS
+   ========================================================================== */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bh-spacing-sm);
+  font-family: var(--bh-badge-font-family);
+  font-weight: var(--bh-badge-font-weight);
+  border-radius: var(--bh-badge-radius);
+  white-space: nowrap;
+  text-align: center;
+  transition: var(--bh-badge-transition);
+  border: 1px solid var(--bh-badge-border);
+  background-color: var(--bh-badge-bg);
+  color: var(--bh-badge-text);
+  user-select: none;
+  cursor: default;
+
+  // --- Sizes ---
+  &.badge-sm {
+    max-height: var(--bh-badge-height-sm);
+    padding: var(--bh-badge-padding-y-sm) var(--bh-badge-padding-x-sm);
+
+    .badge-label {
+      font-size: var(--bh-badge-font-size-sm);
+      line-height: var(--bh-badge-line-height-sm);
+    }
+
+    .badge-icon-dot {
+      width: var(--bh-badge-icon-dot-size-sm);
+      height: var(--bh-badge-icon-dot-size-sm);
+      font-size: var(--bh-badge-font-size-sm);
+    }
+    .badge-icon-custom {
+      font-size: var(--bh-badge-icon-custom-size-sm) !important;
+    }
+
+    .badge-dismiss {
+      font-size: var(--bh-badge-dismiss-size-sm);
+    }
+  }
+
+  &.badge-md {
+    max-height: var(--bh-badge-height-md);
+    padding: var(--bh-badge-padding-y-md) var(--bh-badge-padding-x-md);
+
+    .badge-label {
+      font-size: var(--bh-badge-font-size-sm);
+      line-height: var(--bh-badge-line-height-md);
+    }
+    .badge-icon-dot {
+      width: var(--bh-badge-icon-dot-size-md);
+      height: var(--bh-badge-icon-dot-size-md);
+      font-size: var(--bh-font-size-md);
+    }
+    .badge-icon-custom {
+      font-size: var(--bh-badge-icon-custom-size-md) !important;
+    }
+    .badge-dismiss {
+      font-size: var(--bh-badge-dismiss-size-md);
+    }
+  }
+
+  &.badge-lg {
+    max-height: var(--bh-badge-height-lg);
+    padding: var(--bh-badge-padding-y-lg) var(--bh-badge-padding-x-lg);
+    font-size: var(--bh-badge-font-size-lg);
+    line-height: var(--bh-badge-line-height-lg);
+
+    .badge-icon-dot {
+      width: var(--bh-badge-icon-dot-size-lg);
+      height: var(--bh-badge-icon-dot-size-lg);
+      font-size: var(--bh-font-size-lg);
+    }
+    .badge-icon-custom {
+      font-size: var(--bh-badge-icon-custom-size-lg) !important;
+    }
+    .badge-dismiss {
+      font-size: var(--bh-badge-dismiss-size-lg);
+    }
+  }
+
+  // --- Elements ---
+  &.badge-label {
+    flex-shrink: 0;
+    font-weight: inherit;
+  }
+
+  .badge-icon-custom {
+    font-size: 20px !important;
+  }
+
+  .badge-icon-dot {
+    font-size: 12px !important;
+    flex-shrink: 0;
+    font-variation-settings: 'FILL' 1, 'opsz' 16;
+  }
+
+  .badge-dismiss {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin-left: var(--bh-spacing-xxs);
+    border-radius: var(--bh-radius-full);
+    transition: var(--bh-badge-transition);
+    color: inherit;
+    aspect-ratio: 1 / 1;
+
+    .badge-dismiss-icon {
+      line-height: 1;
+      font-variation-settings: 'opsz' 14;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &.badge-high {
+    border: var(--bh-badge-border-high);
+
+    &.badge-gray {
+      background-color: var(--color-neutral-200);
+      color: var(--color-neutral-800);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-neutral-800) !important;
+      }
+    }
+
+    &.badge-blue {
+      background-color: var(--color-brand-200);
+      color: var(--color-brand-800);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-brand-800) !important;
+      }
+    }
+
+    &.badge-red {
+      background-color: var(--color-error-200);
+      color: var(--color-error-800);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-error-800) !important;
+      }
+    }
+
+    &.badge-yellow {
+      background-color: var(--color-warning-200);
+      color: var(--color-warning-800);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-warning-800) !important;
+      }
+    }
+
+    &.badge-green {
+      background-color: var(--color-success-200);
+      color: var(--color-success-800);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-success-800) !important;
+      }
+    }
+
+    &.badge-purple {
+      background-color: var(--color-purple-200);
+      color: var(--color-purple-800);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-purple-800) !important;
+      }
+    }
+
+    &.badge-pink {
+      background-color: var(--color-pink-200);
+      color: var(--color-pink-800);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-pink-800) !important;
+      }
+    }
+
+    &.badge-orange {
+      background-color: var(--color-orange-200);
+      color: var(--color-orange-800);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-orange-800) !important;
+      }
+    }
+  }
+
+  /* ==========================================================================
+    MEDIUM EMPHASIS VARIANTS
+    ========================================================================== */
+
+  &.badge-medium {
+    border: var(--bh-badge-border-medium);
+
+    &.badge-gray {
+      background-color: var(--color-neutral-50);
+      color: var(--color-neutral-700);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-neutral-700) !important;
+      }
+    }
+
+    &.badge-blue {
+      background-color: var(--color-brand-100);
+      color: var(--color-brand-700);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-brand-700) !important;
+      }
+    }
+
+    &.badge-red {
+      background-color: var(--color-error-50);
+      color: var(--color-error-700);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-error-700) !important;
+      }
+    }
+
+    &.badge-yellow {
+      background-color: var(--color-warning-50);
+      color: var(--color-warning-700);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-warning-700) !important;
+      }
+    }
+
+    &.badge-green {
+      background-color: var(--color-success-50);
+      color: var(--color-success-700);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-success-700) !important;
+      }
+    }
+
+    &.badge-purple {
+      background-color: hsl(270, 70%, 97%);
+      color: hsl(270, 70%, 40%);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: hsl(270, 70%, 40%) !important;
+      }
+    }
+
+    &.badge-pink {
+      background-color: hsl(330, 70%, 97%);
+      color: hsl(330, 70%, 40%);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: hsl(330, 70%, 40%) !important;
+      }
+    }
+
+    &.badge-orange {
+      background-color: hsl(25, 90%, 97%);
+      color: hsl(25, 90%, 40%);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: hsl(25, 90%, 40%) !important;
+      }
+    }
+  }
+
+  /* ==========================================================================
+    LOW EMPHASIS VARIANTS
+    ========================================================================== */
+
+  &.badge-low {
+    border: var(--bh-badge-border-low);
+    &.badge-gray {
+      background-color: transparent;
+      color: var(--color-neutral-600);
+      border-color: var(--color-neutral-600);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-neutral-600) !important;
+      }
+    }
+
+    &.badge-blue {
+      background-color: transparent;
+      color: var(--color-brand-600);
+      border-color: var(--color-brand-600);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-brand-600) !important;
+      }
+    }
+
+    &.badge-red {
+      background-color: transparent;
+      color: var(--color-error-600);
+      border-color: var(--color-error-600);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-error-600) !important;
+      }
+    }
+
+    &.badge-yellow {
+      background-color: transparent;
+      color: var(--color-warning-600);
+      border-color: var(--color-warning-600);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-warning-600) !important;
+      }
+    }
+
+    &.badge-green {
+      background-color: transparent;
+      color: var(--color-success-600);
+      border-color: var(--color-success-600);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-success-600) !important;
+      }
+    }
+
+    &.badge-purple {
+      background-color: transparent;
+      color: var(--color-purple-600);
+      border-color: var(--color-purple-600);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-purple-600) !important;
+      }
+    }
+
+    &.badge-pink {
+      background-color: transparent;
+      color: var(--color-pink-600);
+      border-color: var(--color-pink-600);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-pink-600) !important;
+      }
+    }
+
+    &.badge-orange {
+      background-color: transparent;
+      color: var(--color-orange-600);
+      border-color: var(--color-orange-600);
+
+      .badge-icon-dot,
+      .badge-icon-custom {
+        color: var(--color-orange-600) !important;
+      }
+    }
+  }
+
+  &.badge-gray {
+    .badge-dismiss span {
+      color: var(--color-neutral-600) !important;
+    }
+    .badge-dismiss {
+      &:hover {
+        background-color: var(--color-neutral-300);
+      }
+    }
+  }
+
+  &.badge-blue {
+    .badge-dismiss span {
+      color: var(--color-brand-600) !important;
+    }
+    .badge-dismiss {
+      &:hover {
+        background-color: var(--color-brand-300);
+      }
+    }
+  }
+
+  &.badge-red {
+    .badge-dismiss span {
+      color: var(--color-error-600) !important;
+    }
+    .badge-dismiss {
+      &:hover {
+        background-color: var(--color-error-300);
+      }
+    }
+  }
+
+  &.badge-yellow {
+    .badge-dismiss span {
+      color: var(--color-warning-600) !important;
+    }
+    .badge-dismiss {
+      &:hover {
+        background-color: var(--color-warning-300);
+      }
+    }
+  }
+
+  &.badge-green {
+    .badge-dismiss span {
+      color: var(--color-success-600) !important;
+    }
+    .badge-dismiss {
+      &:hover {
+        background-color: var(--color-success-300);
+      }
+    }
+  }
+
+  &.badge-purple {
+    .badge-dismiss span {
+      color: var(--color-purple-600) !important;
+    }
+    .badge-dismiss {
+      &:hover {
+        background-color: var(--color-purple-300);
+      }
+    }
+  }
+
+  &.badge-pink {
+    .badge-dismiss span {
+      color: var(--color-pink-600) !important;
+    }
+    .badge-dismiss {
+      &:hover {
+        background-color: var(--color-pink-300);
+      }
+    }
+  }
+
+  &.badge-orange {
+    .badge-dismiss span {
+      color: var(--color-orange-600) !important;
+    }
+    .badge-dismiss {
+      &:hover {
+        background-color: var(--color-orange-300);
+      }
+    }
+  }
+
+  // --- States ---
+  &.badge-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,227 @@
+/* ==========================================================================
+   BH-BUTTON-ICON COMPONENT STYLES
+   Uses tokens from _button-icon.tokens.scss
+   ========================================================================== */
+
+@use './_button-icon.tokens.scss';
+
+:host {
+  display: inline-block;
+  font-family: var(--bh-font-family);
+}
+
+/* ==========================================================================
+   BASE BUTTON
+   ========================================================================== */
+
+.button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--bh-button-icon-border-radius);
+  cursor: pointer;
+  transition: var(--bh-button-icon-transition);
+  font-family: inherit;
+  outline: none;
+  padding: 0;
+}
+
+.button-icon:focus-visible {
+  box-shadow: 0 0 0 var(--bh-button-icon-focus-ring-offset) var(--bh-white),
+    0 0 0 calc(var(--bh-button-icon-focus-ring-offset) + var(--bh-button-icon-focus-ring-width))
+      var(--bh-button-icon-focus-ring-color);
+}
+
+/* ==========================================================================
+   SIZE VARIATIONS
+   ========================================================================== */
+
+.button-icon-xs {
+  width: var(--bh-button-icon-size-xs);
+  height: var(--bh-button-icon-size-xs);
+}
+
+.button-icon-xs .icon {
+  font-size: var(--bh-button-icon-icon-size-xs);
+}
+
+.button-icon-sm {
+  width: var(--bh-button-icon-size-sm);
+  height: var(--bh-button-icon-size-sm);
+}
+
+.button-icon-sm .icon {
+  font-size: var(--bh-button-icon-icon-size-sm);
+}
+
+.button-icon-md {
+  width: var(--bh-button-icon-size-md);
+  height: var(--bh-button-icon-size-md);
+}
+
+.button-icon-md .icon {
+  font-size: var(--bh-button-icon-icon-size-md);
+}
+
+.button-icon-lg {
+  width: var(--bh-button-icon-size-lg);
+  height: var(--bh-button-icon-size-lg);
+}
+
+.button-icon-lg .icon {
+  font-size: var(--bh-button-icon-icon-size-lg);
+}
+
+/* ==========================================================================
+   HIERARCHY STYLES - PRIMARY
+   ========================================================================== */
+
+.button-icon-primary {
+  background: var(--bh-button-icon-primary-bg);
+  color: var(--bh-button-icon-primary-color);
+}
+
+.button-icon-primary:hover:not(.button-icon-disabled) {
+  background: var(--bh-button-icon-primary-bg-hover);
+}
+
+.button-icon-primary:active:not(.button-icon-disabled) {
+  background: var(--bh-button-icon-primary-bg-active);
+}
+
+/* ==========================================================================
+   HIERARCHY STYLES - SECONDARY
+   ========================================================================== */
+
+.button-icon-secondary {
+  background: var(--bh-button-icon-secondary-bg);
+  color: var(--bh-button-icon-secondary-color);
+  border: 1px solid var(--bh-button-icon-secondary-border);
+}
+
+.button-icon-secondary:hover:not(.button-icon-disabled) {
+  background: var(--bh-button-icon-secondary-bg-hover);
+  border-color: var(--bh-button-icon-secondary-border-hover);
+}
+
+.button-icon-secondary:active:not(.button-icon-disabled) {
+  background: var(--bh-button-icon-secondary-bg-active);
+}
+
+/* ==========================================================================
+   HIERARCHY STYLES - TERTIARY
+   ========================================================================== */
+
+.button-icon-tertiary {
+  background: var(--bh-button-icon-tertiary-bg);
+  color: var(--bh-button-icon-tertiary-color);
+}
+
+.button-icon-tertiary:hover:not(.button-icon-disabled) {
+  background: var(--bh-button-icon-tertiary-bg-hover);
+}
+
+.button-icon-tertiary:active:not(.button-icon-disabled) {
+  background: var(--bh-button-icon-tertiary-bg-active);
+}
+
+/* ==========================================================================
+   HIERARCHY STYLES - QUATERNARY
+   ========================================================================== */
+
+.button-icon-quaternary {
+  background: var(--bh-button-icon-quaternary-bg);
+  color: var(--bh-button-icon-quaternary-color);
+}
+
+.button-icon-quaternary:hover:not(.button-icon-disabled) {
+  background: var(--bh-button-icon-quaternary-bg-hover);
+  color: var(--bh-button-icon-quaternary-color-hover);
+}
+
+.button-icon-quaternary:active:not(.button-icon-disabled) {
+  background: var(--bh-button-icon-quaternary-bg-active);
+}
+
+/* ==========================================================================
+   STATE STYLES
+   ========================================================================== */
+
+/* Disabled State */
+.button-icon-disabled {
+  opacity: var(--bh-button-icon-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* Loading State */
+.button-icon-loading {
+  cursor: wait;
+}
+
+/* ==========================================================================
+   LOADING SPINNER
+   ========================================================================== */
+
+.loading-spinner {
+  width: var(--bh-button-icon-spinner-size-md);
+  height: var(--bh-button-icon-spinner-size-md);
+  border: var(--bh-button-icon-spinner-border-width) solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin var(--bh-button-icon-spinner-animation-duration) linear infinite;
+}
+
+.button-icon-sm .loading-spinner {
+  width: var(--bh-button-icon-spinner-size-sm);
+  height: var(--bh-button-icon-spinner-size-sm);
+}
+
+.button-icon-xs .loading-spinner {
+  width: var(--bh-button-icon-spinner-size-xs);
+  height: var(--bh-button-icon-spinner-size-xs);
+}
+
+.button-icon-lg .loading-spinner {
+  width: var(--bh-button-icon-spinner-size-lg);
+  height: var(--bh-button-icon-spinner-size-lg);
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==========================================================================
+   ICON STYLES
+   ========================================================================== */
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ==========================================================================
+   MATERIAL SYMBOLS BASE STYLES
+   ========================================================================== */
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}