@actabldesign/bellhop-styles 0.0.4 → 0.0.12

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

@@ -0,0 +1,254 @@
+/* ==========================================================================
+   BH-CHECKBOX COMPONENT STYLES
+   Uses tokens from _checkbox.tokens.scss
+   ========================================================================== */
+
+@use './_checkbox.tokens.scss';
+
+:host {
+  display: inline-flex;
+}
+
+/* ==========================================================================
+   CHECKBOX WRAPPER
+   ========================================================================== */
+
+.checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-checkbox-label-gap);
+  cursor: pointer;
+}
+
+.checkbox-wrapper:has(.bh-checkbox-label) {
+  gap: var(--bh-spacing-none);
+}
+
+.checkbox-wrapper.checkbox-wrapper-disabled {
+  cursor: not-allowed;
+  opacity: var(--bh-checkbox-opacity-disabled);
+}
+
+.checkbox-wrapper.checkbox-wrapper-readonly {
+  cursor: default;
+}
+
+/* ==========================================================================
+   CHECKBOX CONTAINER (Visual checkbox box)
+   ========================================================================== */
+
+.checkbox-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bh-checkbox-size-md);
+  height: var(--bh-checkbox-size-md);
+  background: var(--bh-checkbox-bg);
+  border: var(--bh-checkbox-border-width) solid var(--bh-checkbox-border);
+  border-radius: var(--bh-checkbox-border-radius);
+  transition: var(--bh-checkbox-transition);
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   CHECKBOX SIZES
+   ========================================================================== */
+
+.checkbox-container.checkbox-container-small {
+  width: var(--bh-checkbox-size-sm);
+  height: var(--bh-checkbox-size-sm);
+}
+
+.checkbox-container.checkbox-container-large {
+  width: var(--bh-checkbox-size-md);
+  height: var(--bh-checkbox-size-md);
+}
+
+/* ==========================================================================
+   CHECKBOX STATES - HOVER
+   ========================================================================== */
+
+.checkbox-container.checkbox-container-hovered:not(
+    .checkbox-container-disabled
+  ):not(.checkbox-container-readonly):not(.checkbox-container-checked):not(
+    .checkbox-container-indeterminate
+  ) {
+  background: var(--bh-checkbox-bg-hover);
+  border-color: var(--bh-checkbox-border-hover);
+}
+
+.checkbox-container.checkbox-container-checked.checkbox-container-hovered:not(
+    .checkbox-container-disabled
+  ):not(.checkbox-container-readonly) {
+  background: var(--bh-checkbox-bg-checked-hover);
+  border-color: var(--bh-checkbox-border-checked-hover);
+}
+
+.checkbox-container.checkbox-container-indeterminate.checkbox-container-hovered:not(
+    .checkbox-container-disabled
+  ):not(.checkbox-container-readonly) {
+  background: var(--bh-checkbox-bg-indeterminate-hover);
+  border-color: var(--bh-checkbox-border-indeterminate-hover);
+}
+
+/* ==========================================================================
+   CHECKBOX STATES - CHECKED
+   ========================================================================== */
+
+.checkbox-container.checkbox-container-checked {
+  background: var(--bh-checkbox-bg-checked);
+  border-color: var(--bh-checkbox-border-checked);
+  color: var(--bh-checkbox-checkmark-color);
+  font-weight: var(--bh-font-weight-bold);
+
+  span {
+    color: var(--bh-checkbox-checkmark-color);
+    font-weight: var(--bh-font-weight-bold);
+    font-variation-settings: 'wght' 600;
+  }
+}
+
+/* ==========================================================================
+   CHECKBOX STATES - INDETERMINATE
+   ========================================================================== */
+
+.checkbox-container.checkbox-container-indeterminate {
+  background: var(--bh-checkbox-bg-indeterminate);
+  border-color: var(--bh-checkbox-border-indeterminate);
+  color: var(--bh-checkbox-checkmark-color);
+  font-weight: var(--bh-font-weight-bold);
+
+  span {
+    color: var(--bh-checkbox-checkmark-color);
+    font-weight: var(--bh-font-weight-bold);
+    font-variation-settings: 'wght' 600;
+  }
+}
+
+/* ==========================================================================
+   CHECKBOX STATES - DISABLED
+   ========================================================================== */
+
+.checkbox-container.checkbox-container-disabled {
+  background: var(--bh-checkbox-bg-disabled);
+  border-color: var(--bh-checkbox-border-disabled);
+  cursor: not-allowed;
+}
+
+.checkbox-container.checkbox-container-disabled .checkbox-checkmark {
+  color: var(--bh-checkbox-checkmark-color-disabled);
+}
+
+/* ==========================================================================
+   CHECKBOX STATES - READONLY
+   ========================================================================== */
+
+.checkbox-container.checkbox-container-readonly {
+  border-color: var(--bh-checkbox-border-readonly);
+  cursor: default;
+}
+
+/* ==========================================================================
+   CHECKBOX STATES - INVALID
+   ========================================================================== */
+
+.checkbox-container.checkbox-container-invalid:not(
+    .checkbox-container-checked
+  ):not(.checkbox-container-indeterminate) {
+  border-color: var(--bh-checkbox-border-invalid);
+}
+
+.checkbox-container.checkbox-container-invalid.checkbox-container-hovered:not(
+    .checkbox-container-disabled
+  ):not(.checkbox-container-readonly):not(.checkbox-container-checked):not(
+    .checkbox-container-indeterminate
+  ) {
+  border-color: var(--bh-checkbox-border-invalid-hover);
+}
+
+/* ==========================================================================
+   CHECKBOX STATES - FOCUSED
+   ========================================================================== */
+
+.checkbox-container.checkbox-container-focused {
+  outline: var(--bh-checkbox-focus-outline-width) solid
+    var(--bh-checkbox-focus-outline-color);
+  outline-offset: var(--bh-checkbox-focus-outline-offset);
+}
+
+/* ==========================================================================
+   CHECKBOX CHECKMARK ICON
+   ========================================================================== */
+
+.checkbox-checkmark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bh-checkbox-checkmark-color);
+  opacity: 0;
+  transform: scale(0.7);
+  transition: var(--bh-checkbox-transition);
+}
+
+.checkbox-container-checked .checkbox-checkmark,
+.checkbox-container-indeterminate .checkbox-checkmark {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.checkbox-checkmark .material-symbols-outlined {
+  font-size: var(--bh-checkbox-checkmark-size-md);
+}
+
+.checkbox-container-small .checkbox-checkmark .material-symbols-outlined {
+  font-size: var(--bh-checkbox-checkmark-size-sm);
+}
+
+/* ==========================================================================
+   CHECKBOX LABEL
+   ========================================================================== */
+
+.checkbox-label {
+  font-size: var(--bh-checkbox-label-font-size);
+  font-weight: var(--bh-checkbox-label-font-weight);
+  color: var(--bh-checkbox-label-color);
+  line-height: 1.43;
+  user-select: none;
+}
+
+.checkbox-wrapper-disabled .checkbox-label {
+  color: var(--bh-checkbox-label-color-disabled);
+}
+
+/* ==========================================================================
+   NATIVE INPUT (Hidden but accessible to screen readers)
+   ========================================================================== */
+
+.checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   MATERIAL SYMBOLS
+   ========================================================================== */
+
+.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' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}

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

@@ -0,0 +1,231 @@
+/* ==========================================================================
+   BH-DROPDOWN COMPONENT STYLES
+   Uses tokens from _dropdown.tokens.scss
+   ========================================================================== */
+
+@use './_dropdown.tokens.scss';
+
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+/* ==========================================================================
+   DROPDOWN CONTAINER
+   ========================================================================== */
+
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* ==========================================================================
+   DROPDOWN TRIGGER BUTTON
+   ========================================================================== */
+
+.dropdown-trigger-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-dropdown-trigger-gap);
+  padding: var(--bh-dropdown-trigger-padding);
+  border: var(--bh-dropdown-trigger-border-width) solid var(--bh-dropdown-trigger-border);
+  border-radius: var(--bh-dropdown-trigger-radius);
+  background: var(--bh-dropdown-trigger-bg);
+  font-family: var(--bh-dropdown-trigger-font-family);
+  font-weight: var(--bh-dropdown-trigger-font-weight);
+  font-size: var(--bh-dropdown-trigger-font-size);
+  line-height: 1.43;
+  color: var(--bh-dropdown-trigger-text-color);
+  cursor: pointer;
+  transition: var(--bh-dropdown-trigger-transition);
+}
+
+.dropdown-trigger-button:hover:not(:disabled) {
+  background: var(--bh-dropdown-trigger-bg-hover);
+  border-color: var(--bh-dropdown-trigger-border-hover);
+}
+
+.dropdown-trigger-button:focus {
+  outline: none;
+  border-color: var(--bh-dropdown-trigger-border-focused);
+  box-shadow: var(--bh-dropdown-trigger-focus-shadow);
+}
+
+.dropdown-trigger-button:disabled {
+  opacity: var(--bh-dropdown-trigger-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.dropdown-trigger-button .material-symbols-outlined {
+  font-size: var(--bh-dropdown-icon-size);
+}
+
+/* ==========================================================================
+   AVATAR TRIGGER
+   ========================================================================== */
+
+.dropdown-avatar {
+  cursor: pointer;
+  border-radius: 50%;
+  transition: var(--bh-dropdown-avatar-transition);
+  outline: none;
+  display: inline-flex;
+  user-select: none;
+  line-height: 0;
+}
+
+.dropdown-avatar:hover:not(.dropdown-avatar-disabled) {
+  box-shadow: var(--bh-dropdown-avatar-shadow-hover);
+}
+
+.dropdown-avatar:focus:not(.dropdown-avatar-disabled) {
+  box-shadow: var(--bh-dropdown-avatar-shadow-focused);
+}
+
+.dropdown-avatar-focus {
+  box-shadow: var(--bh-dropdown-avatar-shadow-focused);
+}
+
+.dropdown-avatar-disabled {
+  cursor: not-allowed;
+  opacity: var(--bh-dropdown-avatar-opacity-disabled);
+}
+
+/* ==========================================================================
+   BUTTON STATE WHEN DROPDOWN IS OPEN
+   ========================================================================== */
+
+.dropdown-open bh-button {
+  --button-focus-ring: var(--bh-dropdown-trigger-focus-shadow);
+}
+
+/* ==========================================================================
+   DROPDOWN MENU
+   ========================================================================== */
+
+.dropdown-menu {
+  width: var(--bh-dropdown-menu-width);
+  background: var(--bh-dropdown-menu-bg);
+  border-radius: var(--bh-dropdown-menu-radius);
+  box-shadow: var(--bh-dropdown-menu-shadow);
+  overflow: hidden;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+/* ==========================================================================
+   HEADER SECTION
+   ========================================================================== */
+
+.dropdown-header {
+  padding: var(--bh-dropdown-header-padding);
+  border-bottom: 1px solid var(--bh-dropdown-header-border);
+}
+
+.dropdown-header-avatar {
+  padding: var(--bh-dropdown-header-padding);
+  display: flex;
+  align-items: center;
+  gap: var(--bh-dropdown-header-avatar-gap);
+}
+
+/* ==========================================================================
+   MENU ITEMS SECTION
+   ========================================================================== */
+
+.dropdown-menu-items {
+  padding: var(--bh-dropdown-menu-items-padding);
+}
+
+.dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-dropdown-menu-item-gap);
+  padding: var(--bh-dropdown-menu-item-padding);
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--bh-dropdown-menu-item-font-family);
+  font-weight: var(--bh-dropdown-menu-item-font-weight);
+  font-size: var(--bh-dropdown-menu-item-font-size);
+  line-height: var(--bh-dropdown-menu-item-line-height);
+  color: var(--bh-dropdown-menu-item-text-color);
+  text-align: left;
+  transition: var(--bh-dropdown-menu-item-transition);
+}
+
+.dropdown-menu-item:hover:not(:disabled) {
+  background: var(--bh-dropdown-menu-item-bg-hover);
+}
+
+.dropdown-menu-item:disabled {
+  opacity: var(--bh-dropdown-menu-item-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.menu-item-icon {
+  font-size: var(--bh-dropdown-icon-size);
+  color: var(--bh-dropdown-menu-item-icon-color);
+  flex-shrink: 0;
+}
+
+.menu-item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.menu-item-shortcut {
+  font-family: var(--bh-dropdown-menu-item-font-family);
+  font-weight: var(--bh-dropdown-menu-item-shortcut-font-weight);
+  font-size: var(--bh-dropdown-menu-item-shortcut-font-size);
+  line-height: 1.5;
+  color: var(--bh-dropdown-menu-item-shortcut-color);
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   DIVIDER
+   ========================================================================== */
+
+.dropdown-divider {
+  height: var(--bh-dropdown-divider-height);
+  background: var(--bh-dropdown-divider-bg);
+  margin: var(--bh-dropdown-divider-margin);
+}
+
+/* ==========================================================================
+   HEADER COMPONENTS
+   ========================================================================== */
+
+.header-name {
+  font-family: var(--bh-dropdown-menu-item-font-family);
+  font-weight: var(--bh-dropdown-header-name-font-weight);
+  font-size: var(--bh-dropdown-header-name-font-size);
+  line-height: 1.43;
+  color: var(--bh-dropdown-header-name-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-email {
+  font-family: var(--bh-dropdown-menu-item-font-family);
+  font-weight: var(--bh-dropdown-header-email-font-weight);
+  font-size: var(--bh-dropdown-header-email-font-size);
+  line-height: 1.43;
+  color: var(--bh-dropdown-header-email-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-title {
+  font-family: var(--bh-dropdown-menu-item-font-family);
+  font-weight: var(--bh-dropdown-header-title-font-weight);
+  font-size: var(--bh-dropdown-header-title-font-size);
+  line-height: 1.43;
+  color: var(--bh-dropdown-header-title-color);
+}

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

@@ -0,0 +1,219 @@
+/* ==========================================================================
+   BH-FEATURED-ICON COMPONENT STYLES
+   Uses tokens from _featured-icon.tokens.scss
+   ========================================================================== */
+
+@use './_featured-icon.tokens.scss';
+
+:host {
+  display: inline-block;
+}
+
+/* ==========================================================================
+   BASE CONTAINER
+   ========================================================================== */
+
+.featured-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--bh-featured-icon-transition);
+}
+
+/* ==========================================================================
+   SIZE VARIATIONS
+   ========================================================================== */
+
+.featured-icon-sm {
+  width: var(--bh-featured-icon-size-sm);
+  height: var(--bh-featured-icon-size-sm);
+  border-radius: var(--bh-featured-icon-radius-sm);
+}
+
+.featured-icon-md {
+  width: var(--bh-featured-icon-size-md);
+  height: var(--bh-featured-icon-size-md);
+  border-radius: var(--bh-featured-icon-radius-md);
+}
+
+.featured-icon-lg {
+  width: var(--bh-featured-icon-size-lg);
+  height: var(--bh-featured-icon-size-lg);
+  border-radius: var(--bh-featured-icon-radius-lg);
+}
+
+.featured-icon-xl {
+  width: var(--bh-featured-icon-size-xl);
+  height: var(--bh-featured-icon-size-xl);
+  border-radius: var(--bh-featured-icon-radius-xl);
+}
+
+/* ==========================================================================
+   ICON SIZES
+   ========================================================================== */
+
+.icon-sm {
+  font-size: var(--bh-featured-icon-icon-size-sm);
+  width: var(--bh-featured-icon-icon-size-sm);
+  height: var(--bh-featured-icon-icon-size-sm);
+  line-height: 1;
+}
+
+.icon-md {
+  font-size: var(--bh-featured-icon-icon-size-md);
+  width: var(--bh-featured-icon-icon-size-md);
+  height: var(--bh-featured-icon-icon-size-md);
+  line-height: 1;
+}
+
+.icon-lg {
+  font-size: var(--bh-featured-icon-icon-size-lg);
+  width: var(--bh-featured-icon-icon-size-lg);
+  height: var(--bh-featured-icon-icon-size-lg);
+  line-height: 1;
+}
+
+.icon-xl {
+  font-size: var(--bh-featured-icon-icon-size-xl);
+  width: var(--bh-featured-icon-icon-size-xl);
+  height: var(--bh-featured-icon-icon-size-xl);
+  line-height: 1;
+}
+
+/* ==========================================================================
+   OUTLINED STYLES
+   ========================================================================== */
+
+/* Brand color - Outlined */
+.featured-icon-brand.featured-icon-outlined {
+  background-color: transparent;
+  border: var(--bh-featured-icon-outlined-border-width) solid var(--bh-featured-icon-outlined-border-color);
+}
+
+.featured-icon-brand.featured-icon-outlined .material-symbols-outlined {
+  color: var(--bh-featured-icon-brand-icon);
+}
+
+/* Gray color - Outlined */
+.featured-icon-gray.featured-icon-outlined {
+  border: var(--bh-featured-icon-outlined-border-width) solid var(--bh-featured-icon-outlined-border-color);
+  background-color: transparent;
+}
+
+.featured-icon-gray.featured-icon-outlined .material-symbols-outlined {
+  color: var(--bh-featured-icon-gray-icon);
+}
+
+/* Error color - Outlined */
+.featured-icon-error.featured-icon-outlined {
+  border: var(--bh-featured-icon-outlined-border-width) solid var(--bh-featured-icon-outlined-border-color);
+  background-color: transparent;
+}
+
+.featured-icon-error.featured-icon-outlined .material-symbols-outlined {
+  color: var(--bh-featured-icon-error-icon);
+}
+
+/* Warning color - Outlined */
+.featured-icon-warning.featured-icon-outlined {
+  border: var(--bh-featured-icon-outlined-border-width) solid var(--bh-featured-icon-outlined-border-color);
+  background-color: transparent;
+}
+
+.featured-icon-warning.featured-icon-outlined .material-symbols-outlined {
+  color: var(--bh-featured-icon-warning-icon);
+}
+
+/* Success color - Outlined */
+.featured-icon-success.featured-icon-outlined {
+  border: var(--bh-featured-icon-outlined-border-width) solid var(--bh-featured-icon-outlined-border-color);
+  background-color: transparent;
+}
+
+.featured-icon-success.featured-icon-outlined .material-symbols-outlined {
+  color: var(--bh-featured-icon-success-icon);
+}
+
+/* Highlight color - Outlined */
+.featured-icon-highlight.featured-icon-outlined {
+  border: var(--bh-featured-icon-outlined-border-width) solid var(--bh-featured-icon-outlined-border-color);
+  background-color: transparent;
+}
+
+.featured-icon-highlight.featured-icon-outlined .material-symbols-outlined {
+  color: var(--bh-featured-icon-highlight-icon);
+}
+
+/* ==========================================================================
+   FILLED STYLES
+   ========================================================================== */
+
+/* Brand color - Filled */
+.featured-icon-brand.featured-icon-filled {
+  background-color: var(--bh-featured-icon-brand-bg-filled);
+  border: none;
+}
+
+.featured-icon-brand.featured-icon-filled .material-symbols-outlined {
+  color: var(--bh-featured-icon-brand-icon);
+}
+
+/* Gray color - Filled */
+.featured-icon-gray.featured-icon-filled {
+  background-color: var(--bh-featured-icon-gray-bg-filled);
+  border: none;
+}
+
+.featured-icon-gray.featured-icon-filled .material-symbols-outlined {
+  color: var(--bh-featured-icon-gray-icon);
+}
+
+/* Error color - Filled */
+.featured-icon-error.featured-icon-filled {
+  background-color: var(--bh-featured-icon-error-bg-filled);
+  border: none;
+}
+
+.featured-icon-error.featured-icon-filled .material-symbols-outlined {
+  color: var(--bh-featured-icon-error-icon);
+}
+
+/* Warning color - Filled */
+.featured-icon-warning.featured-icon-filled {
+  background-color: var(--bh-featured-icon-warning-bg-filled);
+  border: none;
+}
+
+.featured-icon-warning.featured-icon-filled .material-symbols-outlined {
+  color: var(--bh-featured-icon-warning-icon);
+}
+
+/* Success color - Filled */
+.featured-icon-success.featured-icon-filled {
+  background-color: var(--bh-featured-icon-success-bg-filled);
+  border: none;
+}
+
+.featured-icon-success.featured-icon-filled .material-symbols-outlined {
+  color: var(--bh-featured-icon-success-icon);
+}
+
+/* Highlight color - Filled */
+.featured-icon-highlight.featured-icon-filled {
+  background-color: var(--bh-featured-icon-highlight-bg-filled);
+  border: none;
+}
+
+.featured-icon-highlight.featured-icon-filled .material-symbols-outlined {
+  color: var(--bh-featured-icon-highlight-icon);
+}
+
+/* ==========================================================================
+   MATERIAL SYMBOLS BASE STYLES
+   ========================================================================== */
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  user-select: none;
+}