@actabldesign/bellhop-styles 0.0.4 → 0.0.12

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

@@ -0,0 +1,42 @@
+/* ==========================================================================
+   BELLHOP MODAL COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- MODAL SIZING --- */
+  --bh-modal-max-width: 400px;
+  --bh-modal-max-width-mobile: 100%;
+
+  /* --- MODAL SPACING --- */
+  --bh-modal-wrapper-padding: var(--bh-spacing-4xl);
+  --bh-modal-wrapper-padding-mobile: var(--bh-spacing-xl);
+
+  /* --- MODAL BORDER --- */
+  --bh-modal-radius: var(--bh-radius-xl);
+
+  /* --- MODAL Z-INDEX --- */
+  --bh-modal-z-index: 1000;
+  --bh-modal-content-z-index: 1;
+
+  /* --- MODAL OVERLAY --- */
+  --bh-modal-overlay-bg: rgba(64, 73, 104, 0.7);
+  --bh-modal-overlay-backdrop-blur: blur(16px);
+
+  /* --- MODAL COLORS --- */
+  --bh-modal-bg: var(--bh-bg-primary);
+
+  /* --- MODAL SHADOW --- */
+  --bh-modal-shadow:
+    0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+
+  /* --- MODAL ANIMATION --- */
+  --bh-modal-animation-duration: 0.2s;
+  --bh-modal-animation-timing: ease-out;
+
+  /* --- MODAL BREAKPOINTS --- */
+  --bh-modal-mobile-breakpoint: 480px;
+}

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

@@ -0,0 +1,104 @@
+/* ==========================================================================
+   BELLHOP PAGINATION COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- PAGINATION CONTAINER --- */
+  --bh-pagination-gap: var(--bh-spacing-4);
+  --bh-pagination-padding-block: var(--bh-spacing-3);
+  --bh-pagination-padding-inline: var(--bh-spacing-4);
+  --bh-pagination-bg: var(--bh-white);
+  --bh-pagination-border-color: var(--bh-neutral-200);
+  --bh-pagination-border-width: 1px;
+
+  /* --- DISABLED STATE --- */
+  --bh-pagination-disabled-opacity: 0.5;
+
+  /* --- INFO TEXT --- */
+  --bh-pagination-info-font-size: 0.875rem;
+  --bh-pagination-info-color: var(--bh-neutral-600);
+
+  /* --- CONTROLS --- */
+  --bh-pagination-controls-gap: var(--bh-spacing-4);
+
+  /* --- PAGE SIZE SELECTOR --- */
+  --bh-pagination-page-size-gap: var(--bh-spacing-2);
+  --bh-pagination-page-size-label-font-size: 0.875rem;
+  --bh-pagination-page-size-label-color: var(--bh-neutral-600);
+
+  /* --- SELECT DROPDOWN --- */
+  --bh-pagination-select-bg: var(--bh-white);
+  --bh-pagination-select-bg-disabled: var(--bh-neutral-100);
+  --bh-pagination-select-border: var(--bh-neutral-300);
+  --bh-pagination-select-border-hover: var(--bh-neutral-400);
+  --bh-pagination-select-border-focus: var(--bh-brand-600);
+  --bh-pagination-select-border-radius: var(--bh-radius-md);
+  --bh-pagination-select-padding-inline: var(--bh-spacing-3);
+  --bh-pagination-select-padding-inline-end: var(--bh-spacing-6);
+  --bh-pagination-select-height: 32px;
+  --bh-pagination-select-font-size: 0.875rem;
+  --bh-pagination-select-color: var(--bh-neutral-900);
+  --bh-pagination-select-transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  --bh-pagination-select-focus-ring: 0 0 0 3px var(--bh-brand-100);
+
+  /* --- NAVIGATION BUTTONS --- */
+  --bh-pagination-nav-gap: var(--bh-spacing-1);
+  --bh-pagination-btn-size: 32px;
+  --bh-pagination-btn-bg: transparent;
+  --bh-pagination-btn-bg-hover: var(--bh-neutral-100);
+  --bh-pagination-btn-bg-active: var(--bh-neutral-200);
+  --bh-pagination-btn-color: var(--bh-neutral-600);
+  --bh-pagination-btn-color-hover: var(--bh-neutral-900);
+  --bh-pagination-btn-border-radius: var(--bh-radius-md);
+  --bh-pagination-btn-disabled-opacity: 0.4;
+  --bh-pagination-btn-transition: background-color 0.15s ease, color 0.15s ease;
+  --bh-pagination-btn-icon-size: 20px;
+  --bh-pagination-btn-focus-ring: 0 0 0 2px var(--bh-brand-100);
+
+  /* --- PAGE NUMBER BUTTONS --- */
+  --bh-pagination-page-btn-min-width: 32px;
+  --bh-pagination-page-btn-height: 32px;
+  --bh-pagination-page-btn-padding-inline: var(--bh-spacing-2);
+  --bh-pagination-page-btn-bg: transparent;
+  --bh-pagination-page-btn-bg-hover: var(--bh-neutral-100);
+  --bh-pagination-page-btn-bg-active: var(--bh-brand-600);
+  --bh-pagination-page-btn-color: var(--bh-neutral-700);
+  --bh-pagination-page-btn-color-hover: var(--bh-neutral-900);
+  --bh-pagination-page-btn-color-active: var(--bh-white);
+  --bh-pagination-page-btn-border-color-active: var(--bh-brand-600);
+  --bh-pagination-page-btn-border-radius: var(--bh-radius-md);
+  --bh-pagination-page-btn-font-size: 0.875rem;
+  --bh-pagination-page-btn-font-weight: 500;
+  --bh-pagination-page-btn-disabled-opacity: 0.4;
+  --bh-pagination-page-btn-transition: all 0.15s ease;
+  --bh-pagination-page-btn-focus-ring: 0 0 0 2px var(--bh-brand-400);
+
+  /* --- ELLIPSIS --- */
+  --bh-pagination-ellipsis-min-width: 24px;
+  --bh-pagination-ellipsis-color: var(--bh-neutral-400);
+  --bh-pagination-ellipsis-font-size: 0.875rem;
+
+  /* --- COMPACT MODE - PAGE INPUT --- */
+  --bh-pagination-page-display-gap: var(--bh-spacing-2);
+  --bh-pagination-page-text-font-size: 0.875rem;
+  --bh-pagination-page-text-color: var(--bh-neutral-700);
+  --bh-pagination-page-input-width: 60px;
+  --bh-pagination-page-input-height: 32px;
+  --bh-pagination-page-input-padding: var(--bh-spacing-2);
+  --bh-pagination-page-input-border: var(--bh-neutral-300);
+  --bh-pagination-page-input-border-hover: var(--bh-neutral-400);
+  --bh-pagination-page-input-border-focus: var(--bh-brand-500);
+  --bh-pagination-page-input-border-radius: var(--bh-radius-md);
+  --bh-pagination-page-input-font-size: 0.875rem;
+  --bh-pagination-page-input-color: var(--bh-neutral-900);
+  --bh-pagination-page-input-bg: var(--bh-white);
+  --bh-pagination-page-input-bg-disabled: var(--bh-neutral-100);
+  --bh-pagination-page-input-transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  --bh-pagination-page-input-focus-ring: 0 0 0 3px var(--bh-brand-100);
+
+  /* --- RESPONSIVE --- */
+  --bh-pagination-mobile-gap: var(--bh-spacing-3);
+}

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

@@ -0,0 +1,63 @@
+/* ==========================================================================
+   BELLHOP PASSWORD COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   Extends base input tokens
+   ========================================================================== */
+
+@use '../_semantic.scss';
+@use './input.tokens';
+
+:root {
+  /* --- PASSWORD CONTAINER --- */
+  --bh-password-container-gap: var(--bh-spacing-sm);
+  --bh-password-container-padding-sm: 0 var(--bh-spacing-sm);
+  --bh-password-container-padding-md: 0 var(--bh-spacing-md);
+  --bh-password-container-padding-lg: 0 var(--bh-spacing-lg);
+
+  /* Inherit input sizes */
+  --bh-password-height-sm: var(--bh-input-height-sm);
+  --bh-password-height-md: var(--bh-input-height-md);
+  --bh-password-height-lg: var(--bh-input-height-lg);
+
+  /* Inherit input colors */
+  --bh-password-bg: var(--bh-input-bg);
+  --bh-password-border: var(--bh-input-border);
+  --bh-password-text: var(--bh-input-text);
+  --bh-password-radius: var(--bh-input-radius);
+  --bh-password-transition: var(--bh-input-transition);
+  --bh-password-border-width: var(--bh-input-border-width);
+
+  /* --- PASSWORD TOGGLE BUTTON --- */
+  --bh-password-toggle-button-size: 20px;
+  --bh-password-toggle-button-color: var(--bh-neutral-500);
+  --bh-password-toggle-button-color-hover: var(--bh-neutral-700);
+  --bh-password-toggle-button-transition: color 0.2s ease-in-out;
+  --bh-password-toggle-icon-size: 20px;
+
+  /* --- PASSWORD FEEDBACK PANEL --- */
+  --bh-password-feedback-panel-margin-top: var(--bh-spacing-sm);
+  --bh-password-feedback-panel-padding: var(--bh-spacing-md);
+  --bh-password-feedback-panel-bg: var(--bh-white);
+  --bh-password-feedback-panel-border: 1px solid var(--bh-neutral-200);
+  --bh-password-feedback-panel-radius: var(--bh-radius-md);
+  --bh-password-feedback-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  /* --- PASSWORD FEEDBACK HEADER --- */
+  --bh-password-feedback-header-gap: var(--bh-spacing-sm);
+  --bh-password-feedback-header-font-weight: var(--bh-font-weight-medium);
+  --bh-password-feedback-header-font-size: var(--bh-font-size-sm);
+  --bh-password-prompt-color: var(--bh-neutral-600);
+  --bh-password-strength-label-color: var(--bh-neutral-800);
+
+  /* --- PASSWORD STRENGTH METER --- */
+  --bh-password-strength-meter-width: 100%;
+  --bh-password-strength-meter-height: 4px;
+  --bh-password-strength-meter-bg: var(--bh-neutral-200);
+  --bh-password-strength-meter-radius: 2px;
+  --bh-password-strength-meter-transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
+
+  /* --- PASSWORD STRENGTH COLORS --- */
+  --bh-password-strength-weak-color: var(--bh-error-500);
+  --bh-password-strength-medium-color: var(--bh-warning-500);
+  --bh-password-strength-strong-color: var(--bh-success-500);
+}

package/src/bh-tokens/components/_progress-bar.tokens.scss

@@ -0,0 +1,34 @@
+/* ==========================================================================
+   BELLHOP PROGRESS BAR COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- PROGRESS BAR SIZING --- */
+  --bh-progress-bar-height: calc(var(--bh-spacing-md) * 0.5); /* 8px */
+
+  /* --- PROGRESS BAR BORDER --- */
+  --bh-progress-bar-radius: var(--bh-radius-full);
+
+  /* --- PROGRESS BAR TRANSITION --- */
+  --bh-progress-bar-transition: width 0.3s ease-in-out;
+
+  /* --- PROGRESS BAR ANIMATION --- */
+  --bh-progress-bar-animation-duration: 3s;
+
+  /* --- PROGRESS BAR COLORS --- */
+  --bh-progress-bar-bg: var(--bh-neutral-200);
+  --bh-progress-bar-bg-filled: var(--bh-brand-600);
+
+  /* --- PROGRESS BAR LABEL --- */
+  --bh-progress-bar-label-color: var(--bh-neutral-800);
+  --bh-progress-bar-label-border: var(--bh-neutral-200);
+  --bh-progress-bar-label-font-size: var(--bh-font-body-sm);
+  --bh-progress-bar-label-line-height: var(--bh-line-height-body);
+  --bh-progress-bar-label-font-weight: var(--bh-font-weight-semibold);
+  --bh-progress-bar-label-padding: 0 var(--bh-spacing-xs);
+  --bh-progress-bar-label-shadow: var(--bh-shadow-sm);
+  --bh-progress-bar-label-radius: var(--bh-radius-md);
+}

package/src/bh-tokens/components/_progress-spinner.tokens.scss

@@ -0,0 +1,51 @@
+/* ==========================================================================
+   BELLHOP PROGRESS SPINNER COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- PROGRESS SPINNER SIZING --- */
+  --bh-progress-spinner-size-xs: 16px;
+  --bh-progress-spinner-size-sm: 24px;
+  --bh-progress-spinner-size-md: 40px;
+  --bh-progress-spinner-size-lg: 56px;
+  --bh-progress-spinner-size-xl: 72px;
+
+  /* --- PROGRESS SPINNER STROKE --- */
+  --bh-progress-spinner-stroke-width: 4;
+
+  /* --- PROGRESS SPINNER SPACING --- */
+  --bh-progress-spinner-gap: var(--bh-spacing-sm);
+  --bh-progress-spinner-overlay-gap: var(--bh-spacing-md);
+  --bh-progress-spinner-message-margin-top: var(--bh-spacing-xs);
+
+  /* --- PROGRESS SPINNER ANIMATION --- */
+  --bh-progress-spinner-rotation-duration: 2s;
+  --bh-progress-spinner-dash-duration: 1.5s;
+  --bh-progress-spinner-rotation-duration-hover: 1s;
+  --bh-progress-spinner-dash-duration-hover: 0.6s;
+
+  /* --- PROGRESS SPINNER OVERLAY --- */
+  --bh-progress-spinner-overlay-bg: rgba(0, 0, 0, 0.3);
+  --bh-progress-spinner-overlay-backdrop-blur: blur(4px);
+  --bh-progress-spinner-overlay-z-index: 9999;
+
+  /* --- PROGRESS SPINNER MESSAGE --- */
+  --bh-progress-spinner-message-color: var(--bh-neutral-700);
+  --bh-progress-spinner-message-color-overlay: var(--bh-white);
+  --bh-progress-spinner-message-font-size: var(--bh-font-size-sm);
+  --bh-progress-spinner-message-line-height: var(--bh-line-height-sm);
+  --bh-progress-spinner-message-font-weight: var(--bh-font-weight-medium);
+
+  /* --- PROGRESS SPINNER GRADIENT --- */
+  --bh-progress-spinner-gradient-start: var(--bh-accent-300);
+  --bh-progress-spinner-gradient-mid: var(--bh-brand-400);
+  --bh-progress-spinner-gradient-end: var(--bh-brand-600);
+
+  /* --- PROGRESS SPINNER WHITE VARIANT --- */
+  --bh-progress-spinner-white-opacity-start: 1;
+  --bh-progress-spinner-white-opacity-mid: 0.8;
+  --bh-progress-spinner-white-opacity-end: 0.5;
+}

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

@@ -0,0 +1,90 @@
+/**
+ * RadioButton Component Tokens
+ * Maps semantic design tokens to RadioButton-specific custom properties
+ */
+
+@use '../_semantic.scss';
+
+:root {
+  /* ================================
+     Size Tokens
+     ================================ */
+
+  --bh-radiobutton-size-sm: 16px;
+  --bh-radiobutton-size-md: 20px;
+
+  /* ================================
+     Color Tokens - Default State
+     ================================ */
+
+  --bh-radiobutton-bg: var(--bh-white);
+  --bh-radiobutton-bg-checked: var(--bh-brand-600);
+  --bh-radiobutton-border: var(--bh-neutral-400);
+  --bh-radiobutton-border-checked: var(--bh-brand-600);
+  --bh-radiobutton-indicator: var(--bh-white);
+
+  /* ================================
+     Color Tokens - Hover State
+     ================================ */
+
+  --bh-radiobutton-bg-hover: var(--bh-neutral-50);
+  --bh-radiobutton-bg-checked-hover: var(--bh-brand-700);
+  --bh-radiobutton-border-hover: var(--bh-brand-500);
+  --bh-radiobutton-border-checked-hover: var(--bh-brand-700);
+
+  /* ================================
+     Color Tokens - Focus State
+     ================================ */
+
+  --bh-radiobutton-border-focus: var(--bh-brand-600);
+  --bh-radiobutton-outline-focus: var(--bh-brand-100);
+  --bh-radiobutton-outline-offset: 2px;
+
+  /* ================================
+     Color Tokens - Disabled State
+     ================================ */
+
+  --bh-radiobutton-bg-disabled: var(--bh-neutral-100);
+  --bh-radiobutton-bg-checked-disabled: var(--bh-neutral-300);
+  --bh-radiobutton-border-disabled: var(--bh-neutral-300);
+  --bh-radiobutton-indicator-disabled: var(--bh-neutral-500);
+  --bh-radiobutton-label-disabled: var(--bh-neutral-500);
+
+  /* ================================
+     Color Tokens - Invalid State
+     ================================ */
+
+  --bh-radiobutton-border-invalid: var(--bh-error-600);
+  --bh-radiobutton-border-invalid-hover: var(--bh-error-700);
+  --bh-radiobutton-outline-invalid: var(--bh-error-100);
+
+  /* ================================
+     Spacing Tokens
+     ================================ */
+
+  --bh-radiobutton-indicator-size: 8px;
+  --bh-radiobutton-indicator-size-sm: 6px;
+  --bh-radiobutton-label-gap: 8px;
+
+  /* ================================
+     Border Tokens
+     ================================ */
+
+  --bh-radiobutton-border-width: 2px;
+  --bh-radiobutton-border-radius: 50%;
+
+  /* ================================
+     Transition Tokens
+     ================================ */
+
+  --bh-radiobutton-transition: all 0.15s ease-in-out;
+
+  /* ================================
+     Variant: Filled
+     ================================ */
+
+  --bh-radiobutton-filled-bg: var(--bh-neutral-100);
+  --bh-radiobutton-filled-bg-hover: var(--bh-neutral-200);
+  --bh-radiobutton-filled-bg-checked: var(--bh-brand-50);
+  --bh-radiobutton-filled-border-checked: var(--bh-brand-600);
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Skeleton Loader Design Tokens
+ * Based on BellhopOS design system
+ */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- SKELETON COLORS --- */
+  --bh-skeleton-bg: var(--bh-neutral-200);
+  --bh-skeleton-shimmer-from: rgba(255, 255, 255, 0);
+  --bh-skeleton-shimmer-via: rgba(255, 255, 255, 0.4);
+  --bh-skeleton-shimmer-to: rgba(255, 255, 255, 0);
+
+  /* --- SKELETON SHAPE --- */
+  --bh-skeleton-border-radius: 0.25rem;
+  --bh-skeleton-circle-border-radius: 50%;
+
+  /* --- SKELETON ANIMATION --- */
+  --bh-skeleton-animation-duration: 1.2s;
+  --bh-skeleton-animation-timing: ease-in-out;
+}

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

@@ -0,0 +1,76 @@
+/* ==========================================================================
+   BELLHOP TEXTAREA COMPONENT TOKENS
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- TEXTAREA FONT --- */
+  --bh-textarea-font-family: var(--bh-font-family-base);
+  --bh-textarea-font-size: var(--bh-font-size-sm);
+  --bh-textarea-font-weight: var(--bh-font-weight-regular);
+  --bh-textarea-line-height: var(--bh-line-height-sm);
+
+  /* --- TEXTAREA SIZING --- */
+  --bh-textarea-padding-sm: var(--bh-spacing-sm) var(--bh-spacing-md);
+  --bh-textarea-padding-md: var(--bh-spacing-md);
+  --bh-textarea-padding-lg: var(--bh-spacing-lg);
+
+  --bh-textarea-min-height-sm: 64px;
+  --bh-textarea-min-height-md: 80px;
+  --bh-textarea-min-height-lg: 96px;
+
+  /* --- TEXTAREA SPACING --- */
+  --bh-textarea-wrapper-gap: var(--bh-spacing-sm);
+  --bh-textarea-container-gap: var(--bh-spacing-md);
+  --bh-textarea-label-gap: var(--bh-spacing-xs);
+
+  /* --- TEXTAREA BORDER --- */
+  --bh-textarea-border-width: var(--bh-border-stroke-medium);
+  --bh-textarea-border-radius: var(--bh-radius-md);
+
+  /* --- TEXTAREA TRANSITION --- */
+  --bh-textarea-transition: all 0.2s ease-in-out;
+
+  /* --- TEXTAREA COLORS - DEFAULT --- */
+  --bh-textarea-bg: var(--bh-white);
+  --bh-textarea-border: var(--bh-neutral-300);
+  --bh-textarea-text-color: var(--bh-neutral-800);
+  --bh-textarea-placeholder-color: var(--bh-neutral-500);
+
+  --bh-textarea-border-hover: var(--bh-brand-500);
+
+  --bh-textarea-bg-focused: var(--bh-white);
+  --bh-textarea-border-focused: var(--bh-brand-500);
+  --bh-textarea-focus-shadow: 0 0 0 1px var(--bh-brand-500);
+
+  --bh-textarea-bg-disabled: var(--bh-neutral-50);
+  --bh-textarea-opacity-disabled: 0.5;
+
+  --bh-textarea-border-invalid: var(--bh-error-300);
+  --bh-textarea-border-invalid-hover: var(--bh-error-500);
+  --bh-textarea-border-invalid-focused: var(--bh-brand-600);
+
+  /* --- TEXTAREA COLORS - FILLED VARIANT --- */
+  --bh-textarea-filled-bg: var(--bh-neutral-50);
+  --bh-textarea-filled-border: transparent;
+  --bh-textarea-filled-bg-hover: var(--bh-neutral-100);
+  --bh-textarea-filled-bg-focused: var(--bh-white);
+  --bh-textarea-filled-border-focused: var(--bh-brand-500);
+
+  /* --- TEXTAREA LABEL --- */
+  --bh-textarea-label-font-size: var(--bh-font-size-sm);
+  --bh-textarea-label-font-weight: var(--bh-font-weight-medium);
+  --bh-textarea-label-color: var(--bh-neutral-700);
+  --bh-textarea-label-required-color: var(--bh-error-500);
+
+  /* --- TEXTAREA HINT TEXT --- */
+  --bh-textarea-hint-font-size: var(--bh-font-size-sm);
+  --bh-textarea-hint-color: var(--bh-neutral-600);
+  --bh-textarea-hint-error-color: var(--bh-error-600);
+
+  /* --- TEXTAREA HELP ICON --- */
+  --bh-textarea-help-icon-color: var(--bh-neutral-500);
+  --bh-textarea-help-icon-color-hover: var(--bh-neutral-700);
+}

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

@@ -0,0 +1,74 @@
+/* ==========================================================================
+   BELLHOP TOGGLE COMPONENT TOKENS - Material You Design
+   Component-specific tokens that map to semantic layer
+   ========================================================================== */
+
+@use '../_semantic.scss';
+
+:root {
+  /* --- TOGGLE WRAPPER --- */
+  --bh-toggle-gap-with-text-sm: var(--bh-spacing-md);
+  --bh-toggle-gap-with-text-md: var(--bh-spacing-lg);
+
+  /* --- TOGGLE SWITCH BASE --- */
+  --bh-toggle-border-radius: var(--bh-radius-full);
+  --bh-toggle-transition: background-color 0.2s ease;
+  --bh-toggle-disabled-opacity: 0.38;
+
+  /* --- TOGGLE SWITCH SIZES --- */
+  --bh-toggle-width-sm: 36px;
+  --bh-toggle-height-sm: 20px;
+  --bh-toggle-width-md: 40px;
+  --bh-toggle-height-md: 24px;
+
+  /* --- TOGGLE SWITCH STATES - UNPRESSED --- */
+  --bh-toggle-unpressed-bg: var(--bh-neutral-300);
+  --bh-toggle-unpressed-bg-hover: var(--bh-neutral-400);
+  --bh-toggle-unpressed-bg-focus: var(--bh-neutral-200);
+  --bh-toggle-unpressed-bg-disabled: var(--bh-neutral-100);
+  --bh-toggle-unpressed-focus-ring: var(--bh-neutral-600);
+  --bh-toggle-unpressed-focus-ring-opacity: 0.12;
+
+  /* --- TOGGLE SWITCH STATES - PRESSED --- */
+  --bh-toggle-pressed-bg: var(--bh-brand-600);
+  --bh-toggle-pressed-bg-hover: var(--bh-brand-700);
+  --bh-toggle-pressed-bg-focus: var(--bh-brand-600);
+  --bh-toggle-pressed-bg-disabled: var(--bh-neutral-200);
+  --bh-toggle-pressed-focus-ring: var(--bh-brand-100);
+  --bh-toggle-pressed-focus-ring-opacity: 0.24;
+
+  /* --- TOGGLE BUTTON (HANDLE) --- */
+  --bh-toggle-button-bg: var(--bh-white);
+  --bh-toggle-button-bg-disabled: var(--bh-neutral-400);
+  --bh-toggle-button-bg-disabled-pressed: var(--bh-neutral-100);
+  --bh-toggle-button-shadow-hover: var(--bh-shadow-sm);
+  --bh-toggle-button-transition: all 0.2s ease;
+
+  /* --- TOGGLE BUTTON SIZES --- */
+  --bh-toggle-button-size-sm: 16px;
+  --bh-toggle-button-size-md: 20px;
+  --bh-toggle-button-offset-sm: 1px;
+  --bh-toggle-button-offset-md: 1px;
+  --bh-toggle-button-disabled-size-md: 16px;
+  --bh-toggle-button-disabled-offset-md: 4px;
+
+  /* --- FOCUS RING --- */
+  --bh-toggle-focus-ring-offset: -6px;
+  --bh-toggle-focus-ring-size: 12px;
+
+  /* --- TOGGLE LABEL --- */
+  --bh-toggle-label-color: var(--bh-neutral-700);
+  --bh-toggle-label-font-weight: var(--bh-font-weight-medium);
+  --bh-toggle-label-line-height: 1.5;
+  --bh-toggle-label-size-sm: var(--bh-font-body-sm);
+  --bh-toggle-label-size-md: var(--bh-font-body-md);
+
+  /* --- TOGGLE SUPPORTING TEXT --- */
+  --bh-toggle-supporting-text-color: var(--bh-neutral-600);
+  --bh-toggle-supporting-text-font-weight: var(--bh-font-weight-regular);
+  --bh-toggle-supporting-text-size: var(--bh-font-body-sm);
+  --bh-toggle-supporting-text-margin-top: var(--bh-spacing-xxs);
+
+  /* --- HIGH CONTRAST MODE --- */
+  --bh-toggle-high-contrast-border-width: 2px;
+}