@keenmate/web-multiselect 1.5.0 → 1.6.0

package/src/scss/_variables.scss

@@ -1,520 +0,0 @@
-// ==============================================================================
-// MULTISELECT COMPONENT VARIABLES
-// ==============================================================================
-//  Organized by concern for easy discovery and customization
-// Three-tier system:
-//  1. Base primitives - Raw foundational values
-//  2. Semantic scales - Named scales (spacing, colors, typography)
-//  3. Component variables - Component-specific variables
-
-// ==============================================================================
-// 1. BASE PRIMITIVES
-// ==============================================================================
-// Raw values that other variables reference
-
-// Padding & Spacing (using --ms-rem for scalability)
-$padding-xs: calc(0.4 * var(--ms-rem)) !default;   // 4px
-$padding-sm: calc(0.8 * var(--ms-rem)) !default;   // 8px
-$padding-base: calc(1.2 * var(--ms-rem)) !default; // 12px
-$padding-lg: calc(1.6 * var(--ms-rem)) !default;   // 16px
-
-// Border Radius (using --ms-rem for scalability)
-$border-radius-base: calc(0.6 * var(--ms-rem)) !default;  // 6px
-$border-radius-sm: calc(0.4 * var(--ms-rem)) !default;    // 4px
-$border-radius-full: 50% !default;
-
-// Font Sizes (using --ms-rem for scalability)
-$font-size-base: calc(1.4 * var(--ms-rem)) !default;  // 14px
-$font-size-sm: calc(1.2 * var(--ms-rem)) !default;    // 12px
-$font-size-lg: calc(1.6 * var(--ms-rem)) !default;    // 16px
-
-// Border Width
-$border-width-base: 1px !default;
-
-// ==============================================================================
-// 2. SPACING SCALE
-// ==============================================================================
-$ms-spacing-xs: $padding-xs !default;      // 4px
-$ms-spacing-sm: $padding-sm !default;      // 8px
-$ms-spacing-md: $padding-base !default;    // 12px
-$ms-spacing-lg: $padding-lg !default;      // 16px
-
-// ==============================================================================
-// 3. COLOR PALETTE
-// ==============================================================================
-// Neutral Colors
-$ms-color-white: #ffffff !default;
-$ms-color-neutral-lightest: #f9fafb !default;
-$ms-color-neutral-lighter: #f3f4f6 !default;
-$ms-color-neutral-light: #e5e7eb !default;
-$ms-color-neutral-base: #d1d5db !default;
-$ms-color-neutral-dark: #6b7280 !default;
-$ms-color-neutral-darkest: #111827 !default;
-
-// Accent Colors
-$ms-color-accent-lightest: #eff6ff !default;
-$ms-color-accent-lighter: #e0f2fe !default;
-$ms-color-accent-base: #3b82f6 !default;
-$ms-color-accent-dark: #2563eb !default;
-$ms-color-accent-darker: #1d4ed8 !default;
-
-// Tooltip Colors
-$ms-color-tooltip-bg: #333 !default;
-$ms-color-tooltip-text: #fff !default;
-
-// ==============================================================================
-// 4. TYPOGRAPHY SCALE (using --ms-rem for scalability)
-// ==============================================================================
-
-// Font Family
-$ms-font-family: inherit !default;  // Inherits from parent, or set via --base-font-family
-
-// Font Sizes (unitless multipliers × --ms-rem)
-// These are SCSS fallbacks. CSS custom properties in _css-variables.scss use
-// calc(var(--base-font-size-*, default) * var(--ms-rem)) for theme-designer integration.
-$ms-font-size-2xs: calc(1 * var(--ms-rem)) !default;    // 10px
-$ms-font-size-xs: calc(1.2 * var(--ms-rem)) !default;   // 12px
-$ms-font-size-sm: calc(1.4 * var(--ms-rem)) !default;   // 14px
-$ms-font-size-base: calc(1.6 * var(--ms-rem)) !default; // 16px
-$ms-font-size-lg: calc(1.8 * var(--ms-rem)) !default;   // 18px
-$ms-font-size-xl: calc(2 * var(--ms-rem)) !default;     // 20px
-
-// Font Weights
-$ms-font-weight-normal: 400 !default;
-$ms-font-weight-medium: 500 !default;
-$ms-font-weight-semibold: 600 !default;
-
-// Line Heights (Tailwind naming: tight < normal < relaxed)
-$ms-line-height-none: 1 !default;
-$ms-line-height-tight: 1.25 !default;
-$ms-line-height-normal: 1.5 !default;
-$ms-line-height-relaxed: 1.75 !default;
-
-$ms-letter-spacing-wide: 0.05em !default;
-
-// ==============================================================================
-// 5. BORDERS & SHADOWS
-// ==============================================================================
-$ms-border-width-base: $border-width-base !default;
-$ms-border-radius: $border-radius-base !default;
-$ms-border-radius-sm: $border-radius-sm !default;
-$ms-border-radius-full: $border-radius-full !default;
-
-$ms-border-color: $ms-color-neutral-light !default;
-
-$ms-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !default;
-$ms-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !default;
-
-// ==============================================================================
-// 6. TRANSITIONS & ANIMATIONS
-// ==============================================================================
-$ms-transition-fast: 150ms !default;
-$ms-transition-normal: 200ms !default;
-$ms-easing-snappy: cubic-bezier(0.4, 0, 0.2, 1) !default;
-
-// ==============================================================================
-// 7. Z-INDEX LAYERS
-// ==============================================================================
-$ms-z-index-sticky: 1 !default;
-$ms-z-index-dropdown: 9999 !default;
-$ms-z-index-popover: 10000 !default;
-
-// ==============================================================================
-// 8. LAYOUT & DIMENSIONS (using --ms-rem for scalability)
-// ==============================================================================
-$ms-input-icon-spacing: calc(4 * var(--ms-rem)) !default;         // 40px
-$ms-counter-offset: calc(3.2 * var(--ms-rem)) !default;           // 32px
-$ms-option-icon-size: calc(2 * var(--ms-rem)) !default;           // 20px
-$ms-count-clear-size: calc(1.6 * var(--ms-rem)) !default;         // 16px
-$ms-badge-height: calc(2.7 * var(--ms-rem)) !default;             // 27px
-$ms-badge-remove-width: calc(2.7 * var(--ms-rem)) !default;       // 27px
-$ms-popover-close-size: calc(2.4 * var(--ms-rem)) !default;       // 24px
-
-$ms-options-max-height: calc(32 * var(--ms-rem)) !default;        // 320px
-$ms-selected-popover-width: calc(32 * var(--ms-rem)) !default;    // 320px
-$ms-selected-popover-max-height: calc(32 * var(--ms-rem)) !default; // 320px
-$ms-selected-popover-body-max-height: calc(28.8 * var(--ms-rem)) !default; // 288px
-$ms-tooltip-max-width: calc(32 * var(--ms-rem)) !default;         // 320px
-
-// ==============================================================================
-// 9. OPACITY VALUES
-// ==============================================================================
-$ms-opacity-placeholder: 0.6 !default;
-$ms-opacity-disabled: 0.5 !default;
-$ms-opacity-disabled-input: 0.6 !default;
-$ms-opacity-option-selected-bg: 0.1 !default;
-$ms-opacity-highlight-bg: 0.2 !default;
-$ms-opacity-focus-shadow: 0.5 !default;
-$ms-opacity-disabled-bg: 0.05 !default;
-
-// ==============================================================================
-// 10. TRANSFORMS
-// ==============================================================================
-$ms-transform-center-y: translateY(-50%) !default;
-$ms-transform-rotate-180: 180deg !default;
-$ms-transform-scale-hover: 1.1 !default;
-$ms-transform-scale-active: 0.98 !default;
-
-// ==============================================================================
-// 11. ICONS & CONTENT
-// ==============================================================================
-$ms-icon-clear: "×" !default;
-$ms-icon-remove: "×" !default;
-
-// ==============================================================================
-// 12. LAYOUT HELPERS
-// ==============================================================================
-$ms-order-first: -1 !default;
-$ms-focus-outline-width: 2px !default;
-$ms-option-focus-outline-offset: -2px !default;
-
-// ==============================================================================
-// COMPONENT SEMANTIC VARIABLES
-// ==============================================================================
-// These provide a semantic layer over primitive variables for easier customization.
-// Override these to customize individual components without knowing internal structure.
-
-// Input Component
-// ==============================================================================
-$ms-input-padding-v: $ms-spacing-sm !default;
-$ms-input-padding-h: $ms-spacing-md !default;
-$ms-input-height: calc(3.5 * var(--ms-rem)) !default;  // 35px - Input field height
-$ms-input-bg: $ms-color-white !default;
-$ms-input-text: $ms-color-neutral-darkest !default;
-$ms-input-border: $ms-color-neutral-base !default;
-$ms-input-focus-border-color: $ms-color-accent-base !default;
-
-$ms-input-border-style: $ms-border-width-base solid $ms-input-border !default;
-$ms-input-border-radius: $ms-border-radius !default;
-$ms-input-border-hover: $ms-color-neutral-dark !default;
-$ms-input-font-size: $ms-font-size-sm !default;
-$ms-input-padding: $ms-input-padding-v $ms-input-padding-h !default;
-$ms-input-padding-right: $ms-input-icon-spacing !default;
-$ms-input-placeholder-color: $ms-color-neutral-dark !default;
-$ms-input-bg-disabled: rgba($ms-color-neutral-dark, $ms-opacity-disabled-bg) !default;
-
-// Text Colors
-// ==============================================================================
-$ms-text-primary: $ms-color-neutral-darkest !default;
-$ms-text-secondary: $ms-color-neutral-dark !default;
-$ms-text-on-accent: $ms-color-white !default;
-
-// Accent Colors
-// ==============================================================================
-$ms-accent-color: $ms-color-accent-base !default;
-$ms-accent-color-hover: $ms-color-accent-dark !default;
-$ms-accent-color-active: $ms-color-accent-darker !default;
-
-// Background Colors
-// ==============================================================================
-$ms-primary-bg: $ms-color-neutral-lighter !default;
-$ms-primary-bg-hover: $ms-color-neutral-light !default;
-
-// Toggle Icon
-// ==============================================================================
-$ms-toggle-color: $ms-text-secondary !default;
-$ms-toggle-right: $ms-input-padding-h !default;
-
-// Count Badge (in input)
-// ==============================================================================
-$ms-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem)) !default;  // 2px 4px
-$ms-counter-bg: $ms-accent-color !default;
-$ms-counter-color: $ms-text-on-accent !default;
-$ms-counter-font-size: $ms-font-size-xs !default;
-$ms-counter-font-weight: $ms-font-weight-semibold !default;
-$ms-counter-border-radius: $ms-border-radius-sm !default;
-$ms-counter-bg-hover: $ms-accent-color-hover !default;
-
-// Floating Hint
-// ==============================================================================
-$ms-hint-padding: $ms-spacing-sm $ms-spacing-md !default;
-$ms-hint-bg: $ms-color-white !default;
-$ms-hint-border-color: $ms-color-neutral-light !default;
-$ms-hint-border: $ms-border-width-base solid $ms-hint-border-color !default;
-$ms-hint-border-radius: $ms-border-radius !default;
-$ms-hint-box-shadow: $ms-shadow-md !default;
-$ms-hint-font-size: $ms-font-size-xs !default;
-$ms-hint-color: $ms-text-secondary !default;
-
-// Dropdown
-// ==============================================================================
-$ms-dropdown-bg: $ms-color-white !default;
-$ms-dropdown-border-color: $ms-color-neutral-light !default;
-$ms-dropdown-shadow: $ms-shadow-xl !default;
-$ms-dropdown-text: $ms-color-neutral-darkest !default;
-
-$ms-dropdown-border: $ms-border-width-base solid $ms-dropdown-border-color !default;
-$ms-dropdown-border-radius: $ms-border-radius !default;
-$ms-dropdown-box-shadow: $ms-dropdown-shadow !default;
-$ms-option-color: $ms-dropdown-text !default;
-
-// Dropdown Actions
-// ==============================================================================
-$ms-actions-gap: $ms-spacing-xs !default;
-$ms-actions-padding: $ms-spacing-sm !default;
-$ms-actions-border-bottom: $ms-border-width-base solid $ms-border-color !default;
-$ms-actions-bg: $ms-dropdown-bg !default;
-
-// Action Button
-// ==============================================================================
-$ms-action-btn-padding: $ms-spacing-xs $ms-spacing-sm !default;
-$ms-action-btn-font-size: $ms-font-size-xs !default;
-$ms-action-btn-border: $ms-border-width-base solid $ms-border-color !default;
-$ms-action-btn-border-radius: $ms-border-radius-sm !default;
-$ms-action-btn-bg: transparent !default;
-$ms-action-btn-color: inherit !default;
-$ms-action-btn-bg-hover: $ms-primary-bg !default;
-$ms-action-btn-border-color-hover: $ms-accent-color !default;
-
-// Options Container
-// ==============================================================================
-$ms-options-padding: $ms-spacing-xs 0 !default;
-
-// Group
-// ==============================================================================
-$ms-group-border-top: $ms-border-width-base solid $ms-border-color !default;
-$ms-group-margin-top: $ms-spacing-xs !default;
-$ms-group-padding-top: $ms-spacing-xs !default;
-
-// Group Label
-// ==============================================================================
-$ms-option-padding-h: $ms-spacing-md !default;
-$ms-group-label-padding: $ms-spacing-xs $ms-option-padding-h !default;
-$ms-group-label-font-size: $ms-font-size-xs !default;
-$ms-group-label-font-weight: $ms-font-weight-semibold !default;
-$ms-group-label-color: $ms-text-secondary !default;
-$ms-group-label-transform: uppercase !default;
-$ms-group-label-letter-spacing: $ms-letter-spacing-wide !default;
-
-// Option
-// ==============================================================================
-$ms-option-padding-v: $ms-spacing-sm !default;
-$ms-option-gap: $ms-spacing-sm !default;
-$ms-option-hover-bg: $ms-color-neutral-lightest !default;
-
-$ms-option-padding: $ms-option-padding-v $ms-option-padding-h !default;
-$ms-option-bg: transparent !default;
-$ms-option-bg-hover: $ms-option-hover-bg !default;
-$ms-option-bg-focused: $ms-option-hover-bg !default;
-$ms-option-outline-focused: $ms-focus-outline-width solid $ms-accent-color !default;
-$ms-option-bg-matched: rgba($ms-accent-color, 0.08) !default;
-$ms-option-border-matched: 3px solid rgba($ms-accent-color, 0.4) !default;
-$ms-option-bg-selected: rgba($ms-accent-color, $ms-opacity-option-selected-bg) !default;
-$ms-option-color-selected: inherit !default;  // Text color when selected (use 'inherit' to keep default, or set explicit color like #ffffff)
-
-// Option State Combinations
-// ==============================================================================
-$ms-option-bg-focused-hover: $ms-option-hover-bg !default;
-$ms-option-bg-matched-hover: rgba($ms-accent-color, 0.12) !default;
-$ms-option-bg-selected-focused: rgba($ms-accent-color, 0.15) !default;
-$ms-option-bg-selected-matched: rgba($ms-accent-color, 0.15) !default;
-$ms-option-bg-disabled-selected: rgba($ms-accent-color, $ms-opacity-option-selected-bg) !default;
-
-// Option Content
-// ==============================================================================
-$ms-option-content-gap: $ms-spacing-sm !default;
-
-// Option Icon
-// ==============================================================================
-$ms-option-icon-font-size: $ms-font-size-base !default;
-
-// Option Title
-// ==============================================================================
-$ms-option-title-font-size: $ms-font-size-sm !default;
-$ms-option-title-color: inherit !default;
-$ms-option-mark-bg: rgba($ms-accent-color, $ms-opacity-highlight-bg) !default;
-$ms-option-mark-color: inherit !default;
-$ms-option-mark-font-weight: $ms-font-weight-semibold !default;
-
-// Option Subtitle
-// ==============================================================================
-$ms-option-subtitle-margin-top: $ms-spacing-xs !default;
-$ms-option-subtitle-font-size: $ms-font-size-xs !default;
-$ms-option-subtitle-color: $ms-text-secondary !default;
-$ms-option-subtitle-line-height: $ms-line-height-tight !default;
-
-// Empty State
-// ==============================================================================
-$ms-empty-padding: $ms-spacing-lg $ms-option-padding-h !default;
-$ms-empty-font-size: $ms-font-size-sm !default;
-$ms-empty-color: $ms-text-secondary !default;
-
-// Loader
-// ==============================================================================
-$ms-loader-padding: $ms-spacing-lg !default;
-$ms-loader-gap: $ms-spacing-sm !default;
-
-// Loading Text
-// ==============================================================================
-$ms-loading-text-font-size: $ms-font-size-sm !default;
-$ms-loading-text-color: $ms-text-secondary !default;
-
-// Badges Container
-// ==============================================================================
-$ms-badge-gap: $ms-spacing-sm !default;
-$ms-badges-gap: $ms-badge-gap !default;
-$ms-badges-margin-bottom: $ms-spacing-sm !default;
-$ms-badges-margin-top: $ms-spacing-sm !default;
-$ms-badges-margin-left: $ms-spacing-xs !default;
-$ms-badges-margin-right: $ms-spacing-xs !default;
-
-// Count Display
-// ==============================================================================
-$ms-count-display-margin-bottom: $ms-spacing-sm !default;
-$ms-count-display-margin-top: $ms-spacing-sm !default;
-$ms-count-display-margin-left: $ms-spacing-sm !default;
-$ms-count-display-margin-right: $ms-spacing-sm !default;
-
-// Count Badge Wrapper
-// ==============================================================================
-$ms-counter-wrapper-bg: transparent !default;
-$ms-counter-wrapper-border: $ms-border-width-base solid $ms-border-color !default;
-$ms-counter-wrapper-border-radius: $ms-border-radius-sm !default;
-$ms-counter-wrapper-padding: $ms-spacing-xs $ms-spacing-sm !default;
-$ms-counter-wrapper-gap: $ms-spacing-xs !default;
-$ms-counter-wrapper-bg-hover: $ms-option-hover-bg !default;
-$ms-counter-wrapper-border-color-hover: $ms-accent-color !default;
-
-// Count Text
-// ==============================================================================
-$ms-count-text-bg: transparent !default;
-$ms-count-text-border: none !default;
-$ms-count-text-font-size: $ms-font-size-sm !default;
-$ms-count-text-color: $ms-text-primary !default;
-
-// Count Clear Button
-// ==============================================================================
-$ms-count-clear-bg: transparent !default;
-$ms-count-clear-color: $ms-text-secondary !default;
-$ms-count-clear-font-size: $ms-font-size-lg !default;
-$ms-count-clear-border-radius: $ms-border-radius-full !default;
-$ms-count-clear-bg-hover: rgba($ms-accent-color, $ms-opacity-highlight-bg) !default;
-$ms-count-clear-color-hover: $ms-accent-color !default;
-
-// Badge
-// ==============================================================================
-$ms-badge-bg: $ms-color-accent-lightest !default;
-$ms-badge-bg-hover: $ms-color-white !default;
-$ms-badge-bg-active: $ms-color-accent-lighter !default;
-
-$ms-badge-font-size: $ms-font-size-xs !default;
-$ms-badge-font-weight: $ms-font-weight-semibold !default;
-$ms-badge-border-radius: $ms-border-radius !default;
-
-// Badge Text
-// ==============================================================================
-$ms-badge-text-padding: 0 $ms-spacing-sm !default;
-$ms-badge-text-bg: $ms-badge-bg !default;
-$ms-badge-text-color: $ms-accent-color !default;
-$ms-badge-text-border: none !default;
-$ms-badge-text-bg-hover: $ms-badge-bg-hover !default;
-$ms-badge-text-color-hover: $ms-badge-text-color !default;
-
-// Badge Remove Button
-// ==============================================================================
-$ms-badge-remove-bg: $ms-accent-color !default;
-$ms-badge-remove-color: $ms-text-on-accent !default;
-$ms-badge-remove-border: none !default;
-$ms-badge-remove-font-size: $ms-font-size-xs !default;
-$ms-badge-remove-bg-hover: $ms-accent-color-hover !default;
-$ms-badge-remove-box-shadow-focus: 0 0 0 $ms-focus-outline-width
-  rgba($ms-accent-color, $ms-opacity-focus-shadow) !default;
-
-// Badge Indicator (for "+ X more", "3 selected", compact mode display)
-// ==============================================================================
-$ms-badge-counter-bg: transparent !default;
-$ms-badge-counter-border: $ms-border-width-base solid $ms-border-color !default;
-$ms-badge-counter-border-radius: $ms-border-radius-sm !default;
-$ms-badge-counter-text-color: $ms-text-secondary !default;
-$ms-badge-counter-text-bg: $ms-color-neutral-base !default;
-$ms-badge-counter-remove-bg: $ms-color-neutral-dark !default;
-$ms-badge-counter-remove-color: $ms-color-white !default;
-$ms-badge-counter-remove-bg-hover: $ms-color-neutral-darkest !default;
-
-// "+X more" badge (partial mode)
-// ==============================================================================
-$ms-more-badge-bg: $ms-badge-text-bg !default;
-$ms-more-badge-hover-bg: $ms-badge-bg-hover !default;
-$ms-more-badge-active-bg: $ms-badge-bg-active !default;
-
-// Tooltip
-// ==============================================================================
-$ms-tooltip-bg: $ms-color-tooltip-bg !default;
-$ms-tooltip-color: $ms-color-tooltip-text !default;
-$ms-tooltip-padding: $ms-spacing-sm $ms-spacing-md !default;
-$ms-tooltip-border-radius: $ms-border-radius !default;
-$ms-tooltip-font-size: $ms-font-size-sm !default;
-$ms-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !default;
-$ms-tooltip-z-index: $ms-z-index-popover !default;
-
-// Selected Popover
-// ==============================================================================
-$ms-selected-popover-bg: $ms-dropdown-bg !default;
-$ms-selected-popover-border: $ms-border-width-base solid $ms-dropdown-border-color !default;
-$ms-selected-popover-border-radius: $ms-border-radius !default;
-$ms-selected-popover-box-shadow: $ms-dropdown-shadow !default;
-
-// Selected Popover Header
-// ==============================================================================
-$ms-selected-popover-header-padding: $ms-spacing-sm $ms-spacing-md !default;
-$ms-selected-popover-header-bg: rgba($ms-accent-color, $ms-opacity-option-selected-bg) !default;
-$ms-selected-popover-header-border-bottom: $ms-border-width-base solid $ms-border-color !default;
-$ms-selected-popover-header-font-size: $ms-font-size-sm !default;
-$ms-selected-popover-header-font-weight: $ms-font-weight-semibold !default;
-$ms-selected-popover-header-color: $ms-text-primary !default;
-
-// Selected Popover Close
-// ==============================================================================
-$ms-selected-popover-close-bg: transparent !default;
-$ms-selected-popover-close-color: $ms-text-secondary !default;
-$ms-selected-popover-close-font-size: $ms-font-size-xl !default;
-$ms-selected-popover-close-border-radius: $ms-border-radius-full !default;
-$ms-selected-popover-close-bg-hover: rgba($ms-accent-color, $ms-opacity-highlight-bg) !default;
-$ms-selected-popover-close-color-hover: $ms-accent-color !default;
-
-// Selected Popover Body
-// ==============================================================================
-$ms-selected-popover-body-gap: $ms-spacing-xs !default;
-$ms-selected-popover-body-padding: $ms-spacing-sm !default;
-
-// Checkbox
-// ==============================================================================
-$ms-checkbox-offset: calc(0.2 * var(--ms-rem)) !default;  // 2px
-$ms-checkbox-margin-top: $ms-checkbox-offset !default;
-$ms-checkbox-margin-right: 0 !default; // Horizontal spacing handled by flexbox gap
-$ms-checkbox-margin-bottom: 0 !default;
-$ms-checkbox-margin-left: 0 !default;
-$ms-checkbox-size: calc(1.6 * var(--ms-rem)) !default;  // 16px - Width and height of checkbox
-$ms-checkbox-scale: 1 !default; // Scale multiplier for checkbox size
-
-// Checkbox Styling (custom checkbox appearance)
-$ms-checkbox-bg: #ffffff !default;  // White background for better contrast
-$ms-checkbox-border: 1px solid $ms-color-neutral-base !default;  // Darker border (#d1d5db)
-$ms-checkbox-border-radius: calc(0.3 * var(--ms-rem)) !default;  // 3px
-$ms-checkbox-checked-bg: $ms-accent-color !default;
-$ms-checkbox-checked-border: 1px solid $ms-accent-color !default;
-$ms-checkbox-checkmark-color: $ms-text-on-accent !default;
-$ms-checkbox-hover-border-color: $ms-accent-color !default;
-$ms-checkbox-disabled-bg: $ms-primary-bg-hover !default;
-$ms-checkbox-disabled-border: 1px solid $ms-border-color !default;
-
-// Checkbox State Combinations
-$ms-checkbox-checked-bg-hover: $ms-accent-color-hover !default;
-$ms-checkbox-checked-border-color-hover: $ms-accent-color-hover !default;
-
-// Placeholder
-// ==============================================================================
-$ms-placeholder-opacity: $ms-opacity-placeholder !default;
-
-// Disabled States
-// ==============================================================================
-$ms-disabled-opacity: $ms-opacity-disabled !default;
-$ms-disabled-input-opacity: $ms-opacity-disabled-input !default;
-
-// Scrollbar
-// ==============================================================================
-$ms-scrollbar-width: 8px !default;
-$ms-scrollbar-track-bg: transparent !default;
-$ms-scrollbar-thumb-bg: $ms-color-neutral-base !default;  // #d1d5db
-$ms-scrollbar-thumb-bg-hover: $ms-color-neutral-dark !default;  // #6b7280
-$ms-scrollbar-thumb-border-radius: 4px !default;

package/src/scss/main.scss

@@ -1,28 +0,0 @@
-// ==============================================================================
-// MULTISELECT COMPONENT - MAIN ENTRY POINT
-// ==============================================================================
-// Typeahead multiselect with rich content support and floating hints
-//
-// File structure:
-// - _variables.scss       : All variables (base primitives + semantic)
-// - _css-variables.scss   : CSS custom properties at :host level (for theming)
-// - _base.scss            : FOUC prevention + layout containers
-// - _input-dropdown.scss  : Input, toggle, counter, hint, dropdown, actions
-// - _options.scss         : Options list, groups, checkbox, content, states
-// - _badges-display.scss  : Badges, count display, individual badges
-// - _tooltips-popover.scss: Badge tooltips + selected items popover
-// - _rtl.scss             : RTL (Right-to-Left) language support
-// - _modifiers.scss       : Size variants + state modifiers
-// - _debug.scss           : Debug information panel
-
-// Import all partials in dependency order
-@use 'variables';
-@use 'css-variables';  // Define CSS custom properties at :host level
-@use 'base';
-@use 'input-dropdown';
-@use 'options';
-@use 'badges-display';
-@use 'tooltips-popover';
-@use 'rtl';
-@use 'modifiers';
-@use 'debug';