@luciodale/react-searchable-dropdown/dist/assets/variables.css

A reusable React searchable dropdown component.

.lda-searchable-dropdown {
  /* Colors */
  --color-background: rgb(18, 18, 18);
  --color-disabled: rgb(31, 31, 31);
  --color-border: rgb(55, 55, 55);
  --color-focus: rgb(38, 132, 255);
  --color-text: rgb(255, 255, 255);
  --color-text-secondary: rgb(102, 102, 102);
  --color-chip-bg: rgb(224, 224, 224);
  --color-chip-hover: rgb(208, 208, 208);
  --color-chip-close-hover-bg: rgb(189, 189, 189);
  --color-chip-close-hover-text: rgb(51, 51, 51);
  --color-option-hover: rgb(55, 55, 55);
  --color-option-selected: rgb(155 163 99);
  --color-option-group: rgb(128, 63, 72);
  --color-option-disabled: rgb(44, 44, 44);

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-xxl: 20px;

  /* Sizes */
  --width-container: 300px;
  --height-input: 36px;
  --height-dropdown: 300px;
  --border-radius-sm: 4px;
  --border-radius-md: 16px;
  --border-radius-circle: 50%;

  /* Typography */
  --font-size-sm: 12px;
  --font-size-base: 16px;

  /* Transitions */
  --transition-fast: 0.1s;
  --transition-base: 0.2s;

  /* Z-index */
  --z-dropdown: 10;

  /* Shadows */
  --shadow-focus: 0 0 0 1px var(--color-focus);
  --shadow-button: 0 0 0 2px rgba(0, 0, 0, 0.1);
}