@actabldesign/bellhop-styles 0.0.3 → 0.0.12

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

@@ -0,0 +1,61 @@
+/* ==========================================================================
+   BELLHOP BADGE COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- BADGE TYPOGRAPHY --- */
+  --bh-badge-font-family: var(--bh-font-family-base);
+  --bh-badge-font-weight: var(--bh-font-weight-medium);
+
+  /* --- BADGE SIZING --- */
+  --bh-badge-font-size-sm: var(--bh-font-body-sm);
+  --bh-badge-line-height-sm: var(--bh-line-height-body);
+  --bh-badge-height-sm: calc(var(--bh-spacing-md) * 1.25);
+  --bh-badge-padding-y-sm: var(--bh-spacing-xxs);
+  --bh-badge-padding-x-sm: var(--bh-spacing-sm);
+
+  --bh-badge-font-size-md: var(--bh-font-body-sm);
+  --bh-badge-line-height-md: var(--bh-line-height-body);
+  --bh-badge-height-md: var(--bh-spacing-lg);
+  --bh-badge-padding-y-md: var(--bh-spacing-xs);
+  --bh-badge-padding-x-md: calc(var(--bh-spacing-md) * 0.625);
+
+  --bh-badge-font-size-lg: var(--bh-font-body-md);
+  --bh-badge-line-height-lg: var(--bh-line-height-body);
+  --bh-badge-height-lg: calc(var(--bh-spacing-md) * 1.75);
+  --bh-badge-padding-y-lg: var(--bh-spacing-sm);
+  --bh-badge-padding-x-lg: calc(var(--bh-spacing-md) * 0.75);
+
+  /* --- BADGE BORDER --- */
+  --bh-badge-border-high: var(--bh-border-stroke-none) solid;
+  --bh-badge-border-medium: var(--bh-border-stroke-none) solid;
+  --bh-badge-border-low: var(--bh-border-stroke-thin) solid;
+
+  /* --- BADGE GAP --- */
+  --bh-badge-gap: var(--bh-spacing-sm);
+
+  /* --- BADGE RADIUS --- */
+  --bh-badge-radius: var(--bh-radius-full);
+
+  /* --- BADGE TRANSITION --- */
+  --bh-badge-transition: all 0.2s ease;
+
+  /* --- BADGE ICON SIZES --- */
+  --bh-badge-icon-dot-size-sm: var(--bh-icon-size-xxs);
+  --bh-badge-icon-dot-size-md: var(--bh-icon-size-xxs);
+  --bh-badge-icon-dot-size-lg: var(--bh-icon-size-xxs);
+
+  --bh-badge-icon-custom-size-sm: var(--bh-icon-size-xs);
+  --bh-badge-icon-custom-size-md: var(--bh-icon-size-xs);
+  --bh-badge-icon-custom-size-lg: var(--bh-icon-size-sm);
+
+  /* --- BADGE DISMISS BUTTON --- */
+  --bh-badge-dismiss-size-sm: var(--bh-icon-size-xs);
+  --bh-badge-dismiss-size-md: var(--bh-icon-size-xs);
+  --bh-badge-dismiss-size-lg: var(--bh-icon-size-xs);
+
+  --bh-badge-dismiss-hover: var(--bh-neutral-200);
+}

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

@@ -0,0 +1,65 @@
+/* ==========================================================================
+   BELLHOP BUTTON-ICON COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- BUTTON BASE --- */
+  --bh-button-icon-border-radius: var(--bh-radius-md);
+  --bh-button-icon-transition: all 0.2s ease-in-out;
+  --bh-button-icon-focus-ring-offset: 2px;
+  --bh-button-icon-focus-ring-width: 2px;
+  --bh-button-icon-focus-ring-color: var(--bh-brand-500);
+
+  /* --- SIZES --- */
+  --bh-button-icon-size-xs: 24px;
+  --bh-button-icon-size-sm: 32px;
+  --bh-button-icon-size-md: 40px;
+  --bh-button-icon-size-lg: 48px;
+
+  /* --- ICON SIZES --- */
+  --bh-button-icon-icon-size-xs: 16px;
+  --bh-button-icon-icon-size-sm: 18px;
+  --bh-button-icon-icon-size-md: 20px;
+  --bh-button-icon-icon-size-lg: 24px;
+
+  /* --- PRIMARY HIERARCHY --- */
+  --bh-button-icon-primary-bg: var(--bh-brand-600);
+  --bh-button-icon-primary-color: var(--bh-white);
+  --bh-button-icon-primary-bg-hover: var(--bh-brand-700);
+  --bh-button-icon-primary-bg-active: var(--bh-brand-800);
+
+  /* --- SECONDARY HIERARCHY --- */
+  --bh-button-icon-secondary-bg: var(--bh-white);
+  --bh-button-icon-secondary-color: var(--bh-neutral-700);
+  --bh-button-icon-secondary-border: var(--bh-neutral-300);
+  --bh-button-icon-secondary-bg-hover: var(--bh-neutral-50);
+  --bh-button-icon-secondary-border-hover: var(--bh-neutral-400);
+  --bh-button-icon-secondary-bg-active: var(--bh-neutral-100);
+
+  /* --- TERTIARY HIERARCHY --- */
+  --bh-button-icon-tertiary-bg: transparent;
+  --bh-button-icon-tertiary-color: var(--bh-brand-600);
+  --bh-button-icon-tertiary-bg-hover: var(--bh-brand-50);
+  --bh-button-icon-tertiary-bg-active: var(--bh-brand-100);
+
+  /* --- QUATERNARY HIERARCHY --- */
+  --bh-button-icon-quaternary-bg: transparent;
+  --bh-button-icon-quaternary-color: var(--bh-neutral-500);
+  --bh-button-icon-quaternary-bg-hover: var(--bh-neutral-100);
+  --bh-button-icon-quaternary-color-hover: var(--bh-neutral-700);
+  --bh-button-icon-quaternary-bg-active: var(--bh-neutral-200);
+
+  /* --- STATE --- */
+  --bh-button-icon-disabled-opacity: 0.5;
+
+  /* --- LOADING SPINNER --- */
+  --bh-button-icon-spinner-size-xs: 12px;
+  --bh-button-icon-spinner-size-sm: 14px;
+  --bh-button-icon-spinner-size-md: 16px;
+  --bh-button-icon-spinner-size-lg: 20px;
+  --bh-button-icon-spinner-border-width: 2px;
+  --bh-button-icon-spinner-animation-duration: 0.8s;
+}

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

@@ -0,0 +1,185 @@
+/* ==========================================================================
+   BELLHOP BUTTON COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- BUTTON TYPOGRAPHY --- */
+  --bh-button-font-family: var(--bh-font-family-base);
+  --bh-button-font-weight: var(--bh-font-weight-medium);
+  --bh-button-font-size-xs: var(--bh-font-size-sm);
+  --bh-button-font-size-sm: var(--bh-font-size-sm);
+  --bh-button-font-size-md: var(--bh-font-size-sm);
+  --bh-button-font-size-lg: var(--bh-font-size-md);
+
+  /* --- BUTTON SIZING --- */
+  --bh-button-height-xs: 24px;
+  --bh-button-height-sm: 32px;
+  --bh-button-height-md: 40px;
+  --bh-button-height-lg: 48px;
+
+  --bh-button-padding-x-xs: var(--bh-spacing-lg);
+  --bh-button-padding-x-sm: var(--bh-spacing-xl);
+  --bh-button-padding-x-md: var(--bh-spacing-xl);
+  --bh-button-padding-x-lg: var(--bh-spacing-xl);
+
+  --bh-button-gap-xs: var(--bh-spacing-xs);
+  --bh-button-gap-sm: var(--bh-spacing-xs);
+  --bh-button-gap-md: var(--bh-spacing-xs);
+  --bh-button-gap-lg: var(--bh-spacing-sm);
+
+  /* --- BUTTON RADIUS --- */
+  --bh-button-radius: var(--bh-radius-md);
+  --bh-button-badge-radius: var(--bh-radius-full);
+
+  /* --- BUTTON TRANSITION --- */
+  --bh-button-transition: all 0.2s ease-in-out;
+
+  /* --- BUTTON FOCUS --- */
+  --bh-button-focus-outline-width: 2px;
+  --bh-button-focus-outline-offset: 2px;
+
+  /* --- BUTTON ICON SIZES --- */
+  --bh-button-icon-size-xs: var(--bh-font-size-sm);
+  --bh-button-icon-size-sm: var(--bh-font-size-md);
+  --bh-button-icon-size-md: var(--bh-font-size-lg);
+  --bh-button-icon-size-lg: var(--bh-font-size-lg);
+
+  /* --- BUTTON ICON-ONLY DIMENSIONS --- */
+  --bh-button-icon-only-size-xs: 24px;
+  --bh-button-icon-only-size-sm: 32px;
+  --bh-button-icon-only-size-md: 40px;
+  --bh-button-icon-only-size-lg: 48px;
+
+  /* --- BUTTON BADGE --- */
+  --bh-button-badge-min-width: 20px;
+  --bh-button-badge-height: 20px;
+  --bh-button-badge-padding-x: var(--bh-spacing-xs);
+  --bh-button-badge-offset-top: -8px;
+  --bh-button-badge-offset-right: -8px;
+  --bh-button-badge-font-size: var(--bh-font-size-xs);
+  --bh-button-badge-font-weight: var(--bh-font-weight-semibold);
+
+  /* --- PRIMARY BUTTON - DEFAULT KIND --- */
+  --bh-button-primary-default-bg: var(--bh-brand-600);
+  --bh-button-primary-default-color: var(--bh-white);
+  --bh-button-primary-default-border: var(--bh-brand-600);
+  --bh-button-primary-default-bg-hover: var(--bh-brand-700);
+  --bh-button-primary-default-border-hover: var(--bh-brand-700);
+  --bh-button-primary-default-bg-active: var(--bh-brand-800);
+  --bh-button-primary-default-border-active: var(--bh-brand-800);
+  --bh-button-primary-default-focus: var(--bh-brand-500);
+
+  /* --- SECONDARY BUTTON - DEFAULT KIND --- */
+  --bh-button-secondary-default-bg: var(--bh-white);
+  --bh-button-secondary-default-color: var(--bh-neutral-600);
+  --bh-button-secondary-default-border: var(--bh-neutral-300);
+  --bh-button-secondary-default-bg-hover: var(--bh-neutral-50);
+  --bh-button-secondary-default-color-hover: var(--bh-neutral-700);
+  --bh-button-secondary-default-border-hover: var(--bh-neutral-400);
+  --bh-button-secondary-default-bg-active: var(--bh-neutral-100);
+  --bh-button-secondary-default-border-active: var(--bh-neutral-500);
+
+  /* --- TERTIARY BUTTON - DEFAULT KIND --- */
+  --bh-button-tertiary-default-bg: transparent;
+  --bh-button-tertiary-default-color: var(--bh-neutral-600);
+  --bh-button-tertiary-default-border: transparent;
+  --bh-button-tertiary-default-bg-hover: var(--bh-neutral-100);
+  --bh-button-tertiary-default-color-hover: var(--bh-neutral-700);
+  --bh-button-tertiary-default-bg-active: var(--bh-neutral-100);
+
+  /* --- QUATERNARY BUTTON - DEFAULT KIND --- */
+  --bh-button-quaternary-default-bg: transparent;
+  --bh-button-quaternary-default-color: var(--bh-brand-600);
+  --bh-button-quaternary-default-border: transparent;
+  --bh-button-quaternary-default-color-hover: var(--bh-brand-700);
+  --bh-button-quaternary-default-color-active: var(--bh-brand-800);
+
+  /* --- PRIMARY BUTTON - DESTRUCTIVE KIND --- */
+  --bh-button-primary-destructive-bg: var(--bh-error-600);
+  --bh-button-primary-destructive-color: var(--bh-white);
+  --bh-button-primary-destructive-border: var(--bh-error-600);
+  --bh-button-primary-destructive-bg-hover: var(--bh-error-700);
+  --bh-button-primary-destructive-border-hover: var(--bh-error-700);
+  --bh-button-primary-destructive-bg-active: var(--bh-error-800);
+  --bh-button-primary-destructive-border-active: var(--bh-error-800);
+  --bh-button-primary-destructive-focus: var(--bh-error-500);
+
+  /* --- SECONDARY BUTTON - DESTRUCTIVE KIND --- */
+  --bh-button-secondary-destructive-bg: var(--bh-white);
+  --bh-button-secondary-destructive-color: var(--bh-error-600);
+  --bh-button-secondary-destructive-border: var(--bh-error-300);
+  --bh-button-secondary-destructive-bg-hover: var(--bh-error-50);
+  --bh-button-secondary-destructive-border-hover: var(--bh-error-300);
+  --bh-button-secondary-destructive-bg-active: var(--bh-error-100);
+  --bh-button-secondary-destructive-border-active: var(--bh-error-400);
+
+  /* --- TERTIARY BUTTON - DESTRUCTIVE KIND --- */
+  --bh-button-tertiary-destructive-bg: transparent;
+  --bh-button-tertiary-destructive-color: var(--bh-error-600);
+  --bh-button-tertiary-destructive-border: transparent;
+  --bh-button-tertiary-destructive-bg-hover: var(--bh-error-50);
+  --bh-button-tertiary-destructive-bg-active: var(--bh-error-100);
+
+  /* --- QUATERNARY BUTTON - DESTRUCTIVE KIND --- */
+  --bh-button-quaternary-destructive-bg: transparent;
+  --bh-button-quaternary-destructive-color: var(--bh-error-600);
+  --bh-button-quaternary-destructive-border: transparent;
+  --bh-button-quaternary-destructive-color-hover: var(--bh-error-700);
+  --bh-button-quaternary-destructive-color-active: var(--bh-error-800);
+
+  /* --- PRIMARY BUTTON - SUCCESS KIND --- */
+  --bh-button-primary-success-bg: var(--bh-success-600);
+  --bh-button-primary-success-color: var(--bh-white);
+  --bh-button-primary-success-border: var(--bh-success-600);
+  --bh-button-primary-success-bg-hover: var(--bh-success-700);
+  --bh-button-primary-success-border-hover: var(--bh-success-700);
+  --bh-button-primary-success-bg-active: var(--bh-success-800);
+  --bh-button-primary-success-border-active: var(--bh-success-800);
+  --bh-button-primary-success-focus: var(--bh-success-500);
+
+  /* --- SECONDARY BUTTON - SUCCESS KIND --- */
+  --bh-button-secondary-success-bg: var(--bh-white);
+  --bh-button-secondary-success-color: var(--bh-success-600);
+  --bh-button-secondary-success-border: var(--bh-success-300);
+  --bh-button-secondary-success-bg-hover: var(--bh-success-50);
+  --bh-button-secondary-success-border-hover: var(--bh-success-300);
+  --bh-button-secondary-success-bg-active: var(--bh-success-100);
+  --bh-button-secondary-success-border-active: var(--bh-success-400);
+
+  /* --- TERTIARY BUTTON - SUCCESS KIND --- */
+  --bh-button-tertiary-success-bg: transparent;
+  --bh-button-tertiary-success-color: var(--bh-success-600);
+  --bh-button-tertiary-success-border: transparent;
+  --bh-button-tertiary-success-bg-hover: var(--bh-success-50);
+  --bh-button-tertiary-success-bg-active: var(--bh-success-100);
+
+  /* --- QUATERNARY BUTTON - SUCCESS KIND --- */
+  --bh-button-quaternary-success-bg: transparent;
+  --bh-button-quaternary-success-color: var(--bh-success-600);
+  --bh-button-quaternary-success-border: transparent;
+  --bh-button-quaternary-success-color-hover: var(--bh-success-700);
+  --bh-button-quaternary-success-color-active: var(--bh-success-800);
+
+  /* --- DISABLED STATE --- */
+  --bh-button-disabled-bg: var(--bh-neutral-200);
+  --bh-button-disabled-color: var(--bh-neutral-400);
+  --bh-button-disabled-border: var(--bh-neutral-200);
+  --bh-button-disabled-opacity: 0.5;
+
+  /* --- LOADING STATE --- */
+  --bh-button-loading-label-opacity: 0.7;
+
+  /* --- BADGE COLORS --- */
+  --bh-button-badge-bg-primary: var(--bh-brand-500);
+  --bh-button-badge-bg-secondary: var(--bh-neutral-500);
+  --bh-button-badge-bg-success: var(--bh-success-500);
+  --bh-button-badge-bg-info: var(--bh-brand-500);
+  --bh-button-badge-bg-warn: var(--bh-warning-500);
+  --bh-button-badge-bg-danger: var(--bh-error-500);
+  --bh-button-badge-bg-help: var(--bh-brand-500);
+  --bh-button-badge-bg-contrast: var(--bh-neutral-900);
+  --bh-button-badge-color: var(--bh-white);
+}

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

@@ -0,0 +1,67 @@
+/* ==========================================================================
+   BELLHOP CHECKBOX COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- CHECKBOX SIZING --- */
+  --bh-checkbox-size-sm: 16px;
+  --bh-checkbox-size-md: 20px;
+
+  /* --- CHECKBOX SPACING --- */
+  --bh-checkbox-label-gap: var(--bh-spacing-sm);
+
+  /* --- CHECKBOX BORDER --- */
+  --bh-checkbox-border-width: var(--bh-border-stroke-medium);
+  --bh-checkbox-border-radius: var(--bh-radius-xs);
+
+  /* --- CHECKBOX TRANSITION --- */
+  --bh-checkbox-transition: all 0.2s ease-in-out;
+
+  /* --- CHECKBOX COLORS - DEFAULT (OUTLINED) --- */
+  --bh-checkbox-bg: var(--bh-white);
+  --bh-checkbox-border: var(--bh-neutral-300);
+  --bh-checkbox-checkmark-color: var(--bh-white);
+
+  --bh-checkbox-bg-hover: var(--bh-neutral-50);
+  --bh-checkbox-border-hover: var(--bh-brand-500);
+
+  --bh-checkbox-bg-checked: var(--bh-brand-600);
+  --bh-checkbox-border-checked: var(--bh-brand-600);
+
+  --bh-checkbox-bg-checked-hover: var(--bh-brand-700);
+  --bh-checkbox-border-checked-hover: var(--bh-brand-700);
+
+  --bh-checkbox-bg-indeterminate: var(--bh-brand-600);
+  --bh-checkbox-border-indeterminate: var(--bh-brand-600);
+
+  --bh-checkbox-bg-indeterminate-hover: var(--bh-brand-700);
+  --bh-checkbox-border-indeterminate-hover: var(--bh-brand-700);
+
+  --bh-checkbox-bg-disabled: var(--bh-neutral-100);
+  --bh-checkbox-border-disabled: var(--bh-neutral-200);
+  --bh-checkbox-checkmark-color-disabled: var(--bh-neutral-400);
+  --bh-checkbox-opacity-disabled: 0.5;
+
+  --bh-checkbox-border-invalid: var(--bh-error-300);
+  --bh-checkbox-border-invalid-hover: var(--bh-error-500);
+
+  --bh-checkbox-border-readonly: var(--bh-neutral-300);
+
+  /* --- CHECKBOX FOCUS --- */
+  --bh-checkbox-focus-outline-width: var(--bh-border-stroke-2);
+  --bh-checkbox-focus-outline-offset: var(--bh-border-stroke-2);
+  --bh-checkbox-focus-outline-color: var(--bh-brand-500);
+
+  /* --- CHECKBOX LABEL --- */
+  --bh-checkbox-label-font-size: var(--bh-font-body-sm);
+  --bh-checkbox-label-font-weight: var(--bh-font-weight-regular);
+  --bh-checkbox-label-color: var(--bh-neutral-700);
+  --bh-checkbox-label-color-disabled: var(--bh-neutral-400);
+
+  /* --- CHECKBOX ICON/CHECKMARK --- */
+  --bh-checkbox-checkmark-size-sm: var(--bh-font-body-md);
+  --bh-checkbox-checkmark-size-md: var(--bh-font-body-lg);
+}

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

@@ -0,0 +1,103 @@
+/* ==========================================================================
+   BELLHOP DROPDOWN COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- DROPDOWN SIZING --- */
+  --bh-dropdown-menu-width: 240px;
+
+  /* --- DROPDOWN SPACING --- */
+  --bh-dropdown-trigger-gap: var(--bh-spacing-sm);
+  --bh-dropdown-trigger-padding: var(--bh-spacing-md) var(--bh-spacing-lg);
+  --bh-dropdown-header-padding: var(--bh-spacing-lg) var(--bh-spacing-xl);
+  --bh-dropdown-menu-items-padding: var(--bh-spacing-xs) 0;
+  --bh-dropdown-menu-item-gap: var(--bh-spacing-md);
+  --bh-dropdown-menu-item-padding: var(--bh-spacing-md) var(--bh-spacing-lg);
+  --bh-dropdown-divider-margin: var(--bh-spacing-xs) 0;
+  --bh-dropdown-header-avatar-gap: var(--bh-spacing-lg);
+
+  /* --- DROPDOWN BORDER --- */
+  --bh-dropdown-trigger-border-width: 1px;
+  --bh-dropdown-trigger-radius: var(--bh-radius-md);
+  --bh-dropdown-menu-radius: var(--bh-radius-md);
+  --bh-dropdown-divider-height: 1px;
+
+  /* --- DROPDOWN TRANSITION --- */
+  --bh-dropdown-trigger-transition: all 0.2s ease;
+  --bh-dropdown-menu-item-transition: background-color 0.15s ease;
+  --bh-dropdown-avatar-transition: box-shadow 0.2s ease;
+
+  /* --- DROPDOWN COLORS - TRIGGER --- */
+  --bh-dropdown-trigger-bg: var(--bh-white);
+  --bh-dropdown-trigger-border: var(--bh-neutral-300);
+  --bh-dropdown-trigger-text-color: var(--bh-neutral-700);
+
+  --bh-dropdown-trigger-bg-hover: var(--bh-neutral-50);
+  --bh-dropdown-trigger-border-hover: var(--bh-neutral-400);
+
+  --bh-dropdown-trigger-border-focused: var(--bh-brand-500);
+  --bh-dropdown-trigger-focus-shadow: 0 0 0 2px var(--bh-brand-100);
+
+  --bh-dropdown-trigger-opacity-disabled: 0.5;
+
+  /* --- DROPDOWN COLORS - MENU --- */
+  --bh-dropdown-menu-bg: var(--bh-white);
+  --bh-dropdown-menu-shadow:
+    0px 32px 64px -12px rgba(64, 73, 104, 0.14),
+    0px 0px 1px 1px rgba(64, 73, 104, 0.1);
+
+  /* --- DROPDOWN COLORS - HEADER --- */
+  --bh-dropdown-header-border: var(--bh-neutral-200);
+
+  /* --- DROPDOWN COLORS - MENU ITEMS --- */
+  --bh-dropdown-menu-item-text-color: var(--bh-neutral-700);
+  --bh-dropdown-menu-item-bg-hover: var(--bh-neutral-100);
+  --bh-dropdown-menu-item-opacity-disabled: 0.5;
+
+  /* --- DROPDOWN COLORS - MENU ITEM ICON --- */
+  --bh-dropdown-menu-item-icon-color: var(--bh-neutral-600);
+
+  /* --- DROPDOWN COLORS - MENU ITEM SHORTCUT --- */
+  --bh-dropdown-menu-item-shortcut-color: var(--bh-neutral-500);
+
+  /* --- DROPDOWN COLORS - DIVIDER --- */
+  --bh-dropdown-divider-bg: var(--bh-neutral-200);
+
+  /* --- DROPDOWN COLORS - HEADER TEXT --- */
+  --bh-dropdown-header-name-color: var(--bh-neutral-800);
+  --bh-dropdown-header-email-color: var(--bh-neutral-600);
+  --bh-dropdown-header-title-color: var(--bh-neutral-800);
+
+  /* --- DROPDOWN AVATAR --- */
+  --bh-dropdown-avatar-shadow-hover: 0 0 0 2px var(--bh-neutral-200);
+  --bh-dropdown-avatar-shadow-focused: 0 0 0 2px var(--bh-brand-500);
+  --bh-dropdown-avatar-opacity-disabled: 0.5;
+
+  /* --- DROPDOWN TYPOGRAPHY --- */
+  --bh-dropdown-trigger-font-family: var(--bh-font-family-base);
+  --bh-dropdown-trigger-font-weight: var(--bh-font-weight-semibold);
+  --bh-dropdown-trigger-font-size: var(--bh-font-size-sm);
+
+  --bh-dropdown-menu-item-font-family: var(--bh-font-family-base);
+  --bh-dropdown-menu-item-font-weight: var(--bh-font-weight-medium);
+  --bh-dropdown-menu-item-font-size: var(--bh-font-size-sm);
+  --bh-dropdown-menu-item-line-height: var(--bh-line-height-sm);
+
+  --bh-dropdown-menu-item-shortcut-font-weight: var(--bh-font-weight-regular);
+  --bh-dropdown-menu-item-shortcut-font-size: var(--bh-font-size-xs);
+
+  --bh-dropdown-header-name-font-weight: var(--bh-font-weight-semibold);
+  --bh-dropdown-header-name-font-size: var(--bh-font-size-sm);
+
+  --bh-dropdown-header-email-font-weight: var(--bh-font-weight-regular);
+  --bh-dropdown-header-email-font-size: var(--bh-font-size-sm);
+
+  --bh-dropdown-header-title-font-weight: var(--bh-font-weight-semibold);
+  --bh-dropdown-header-title-font-size: var(--bh-font-size-sm);
+
+  /* --- DROPDOWN ICON SIZE --- */
+  --bh-dropdown-icon-size: var(--bh-icon-size-md);
+}

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

@@ -0,0 +1,57 @@
+/* ==========================================================================
+   BELLHOP FEATURED-ICON COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- BASE --- */
+  --bh-featured-icon-transition: all 0.2s ease;
+
+  /* --- SIZES --- */
+  --bh-featured-icon-size-sm: 32px;
+  --bh-featured-icon-size-md: 40px;
+  --bh-featured-icon-size-lg: 48px;
+  --bh-featured-icon-size-xl: 56px;
+
+  /* --- BORDER RADIUS --- */
+  --bh-featured-icon-radius-sm: 6px;
+  --bh-featured-icon-radius-md: 8px;
+  --bh-featured-icon-radius-lg: 10px;
+  --bh-featured-icon-radius-xl: 12px;
+
+  /* --- ICON SIZES --- */
+  --bh-featured-icon-icon-size-sm: var(--bh-icon-size-xs);
+  --bh-featured-icon-icon-size-md: var(--bh-icon-size-md);
+  --bh-featured-icon-icon-size-lg: var(--bh-icon-size-lg);
+  --bh-featured-icon-icon-size-xl: var(--bh-icon-size-2xl);
+
+  /* --- OUTLINED BORDER --- */
+  --bh-featured-icon-outlined-border-width: 1px;
+  --bh-featured-icon-outlined-border-color: var(--bh-neutral-200);
+
+  /* --- BRAND THEME --- */
+  --bh-featured-icon-brand-icon: var(--bh-brand-600);
+  --bh-featured-icon-brand-bg-filled: var(--bh-brand-100);
+
+  /* --- GRAY THEME --- */
+  --bh-featured-icon-gray-icon: var(--bh-neutral-600);
+  --bh-featured-icon-gray-bg-filled: var(--bh-neutral-100);
+
+  /* --- ERROR THEME --- */
+  --bh-featured-icon-error-icon: var(--bh-error-600);
+  --bh-featured-icon-error-bg-filled: var(--bh-error-100);
+
+  /* --- WARNING THEME --- */
+  --bh-featured-icon-warning-icon: var(--bh-warning-600);
+  --bh-featured-icon-warning-bg-filled: var(--bh-warning-200);
+
+  /* --- SUCCESS THEME --- */
+  --bh-featured-icon-success-icon: var(--bh-success-600);
+  --bh-featured-icon-success-bg-filled: var(--bh-success-100);
+
+  /* --- HIGHLIGHT THEME --- */
+  --bh-featured-icon-highlight-icon: var(--bh-purple-600);
+  --bh-featured-icon-highlight-bg-filled: var(--bh-purple-200);
+}

package/src/bh-tokens/components/_input-number.tokens.scss

@@ -0,0 +1,50 @@
+/* ==========================================================================
+   BELLHOP INPUT-NUMBER COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   Extends base input tokens
+   ========================================================================== */
+
+@use '../_semantic.scss';
+@use './input.tokens';
+
+:root {
+  /* --- INPUT NUMBER CONTAINER --- */
+  --bh-input-number-container-gap: var(--bh-spacing-sm);
+  --bh-input-number-container-padding-sm: 0 var(--bh-spacing-sm);
+  --bh-input-number-container-padding-md: 0 var(--bh-spacing-md);
+  --bh-input-number-container-padding-lg: 0 var(--bh-spacing-lg);
+
+  /* Inherit input sizes */
+  --bh-input-number-height-sm: var(--bh-input-height-sm);
+  --bh-input-number-height-md: var(--bh-input-height-md);
+  --bh-input-number-height-lg: var(--bh-input-height-lg);
+
+  /* Inherit input colors */
+  --bh-input-number-bg: var(--bh-input-bg);
+  --bh-input-number-border: var(--bh-input-border);
+  --bh-input-number-text: var(--bh-input-text);
+  --bh-input-number-radius: var(--bh-input-radius);
+  --bh-input-number-transition: var(--bh-input-transition);
+  --bh-input-number-border-width: var(--bh-input-border-width);
+
+  /* --- INPUT NUMBER BUTTON --- */
+  --bh-input-number-button-size: 24px;
+  --bh-input-number-button-bg: transparent;
+  --bh-input-number-button-color: var(--bh-neutral-600);
+  --bh-input-number-button-radius: var(--bh-radius-xs);
+  --bh-input-number-button-transition: all 0.2s ease-in-out;
+
+  --bh-input-number-button-bg-hover: var(--bh-neutral-100);
+  --bh-input-number-button-color-hover: var(--bh-neutral-800);
+
+  --bh-input-number-button-bg-active: var(--bh-neutral-200);
+
+  --bh-input-number-button-opacity-disabled: 0.4;
+
+  /* --- INPUT NUMBER CLEAR BUTTON --- */
+  --bh-input-number-clear-button-bg: var(--bh-neutral-100);
+  --bh-input-number-clear-button-radius: var(--bh-radius-full);
+
+  /* --- INPUT NUMBER ICON --- */
+  --bh-input-number-icon-size: 20px;
+}

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

@@ -0,0 +1,86 @@
+/* ==========================================================================
+   BELLHOP INPUT COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- INPUT TYPOGRAPHY --- */
+  --bh-input-font-family: var(--bh-font-family-base);
+  --bh-input-font-weight: var(--bh-font-weight-regular);
+  --bh-input-font-size-sm: var(--bh-font-body-sm);
+  --bh-input-font-size-md: var(--bh-font-body-sm);
+
+  --bh-input-label-font-weight: var(--bh-font-weight-medium);
+  --bh-input-label-font-size: var(--bh-font-body-sm);
+
+  --bh-input-hint-font-weight: var(--bh-font-weight-regular);
+  --bh-input-hint-font-size: var(--bh-font-body-sm);
+
+  /* --- INPUT SIZING --- */
+  --bh-input-height-sm: 32px;
+  --bh-input-height-md: 40px;
+
+  --bh-input-padding-sm: var(--bh-spacing-xs) var(--bh-spacing-sm);
+  --bh-input-padding-md: var(--bh-spacing-sm) var(--bh-spacing-md);
+
+  --bh-input-padding-with-leading-sm: var(--bh-spacing-xs) var(--bh-spacing-sm);
+  --bh-input-padding-with-leading-md: var(--bh-spacing-sm) var(--bh-spacing-md);
+
+  /* --- INPUT GAPS --- */
+  --bh-input-wrapper-gap: var(--bh-spacing-sm);
+  --bh-input-label-gap: var(--bh-spacing-xs);
+  --bh-input-container-gap: var(--bh-spacing-md);
+  --bh-input-content-gap: var(--bh-spacing-sm);
+
+  /* --- INPUT RADIUS --- */
+  --bh-input-radius: var(--bh-radius-md);
+
+  /* --- INPUT TRANSITION --- */
+  --bh-input-transition: all 0.2s ease-in-out;
+
+  /* --- INPUT BORDER --- */
+  --bh-input-border-width: 1px;
+
+  /* --- INPUT COLORS - DEFAULT VARIANT --- */
+  --bh-input-bg: var(--bh-white);
+  --bh-input-border: var(--bh-neutral-300);
+  --bh-input-text: var(--bh-neutral-800);
+  --bh-input-placeholder: var(--bh-neutral-500);
+
+  --bh-input-border-hover: var(--bh-brand-500);
+
+  --bh-input-border-focused: var(--bh-brand-500);
+  --bh-input-shadow-focused: 0 0 0 1px var(--bh-brand-500);
+
+  --bh-input-bg-disabled: var(--bh-neutral-50);
+  --bh-input-opacity-disabled: 0.5;
+
+  --bh-input-border-invalid: var(--bh-error-500);
+  --bh-input-border-invalid-hover: var(--bh-error-600);
+  --bh-input-border-invalid-focused: var(--bh-brand-600);
+
+  /* --- INPUT COLORS - FILLED VARIANT --- */
+  --bh-input-filled-bg: var(--bh-neutral-50);
+  --bh-input-filled-border: transparent;
+  --bh-input-filled-bg-hover: var(--bh-neutral-100);
+  --bh-input-filled-bg-focused: var(--bh-white);
+  --bh-input-filled-border-focused: var(--bh-brand-500);
+
+  /* --- INPUT LABEL COLORS --- */
+  --bh-input-label-color: var(--bh-neutral-700);
+  --bh-input-label-required-color: var(--bh-error-500);
+
+  /* --- INPUT ICON COLORS --- */
+  --bh-input-icon-color: var(--bh-neutral-500);
+  --bh-input-icon-color-focused: var(--bh-brand-600);
+  --bh-input-icon-size: var(--bh-font-size-xl);
+
+  --bh-input-help-icon-color: var(--bh-neutral-500);
+  --bh-input-help-icon-color-hover: var(--bh-neutral-700);
+
+  /* --- INPUT HINT TEXT --- */
+  --bh-input-hint-color: var(--bh-neutral-600);
+  --bh-input-hint-error-color: var(--bh-error-600);
+}