@penaprieto/design-system/dist/components/Select/Select.css

Multi-brand React design system with design tokens from Figma

/* Base Select */
.ds-select {
  display: inline-flex;
  flex-direction: column;
  gap: var(--size1, 4px);
  min-width: 320px;
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  position: relative;
}

.ds-select--disabled {
  cursor: not-allowed;
}

.ds-select--error .ds-select__trigger {
  box-shadow: inset 0 0 0 1px var(--text-field-border-error);
}

.ds-select__label {
  font: var(--text-field-label, 400 14px/150% Satoshi);
  color: var(--semantic-text-corp-primary);
}

/* Trigger */
.ds-select__trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--size3, 12px) var(--size4, 16px);
  background-color: var(--text-field-bg-default);
  box-shadow: inset 0 0 0 1px var(--text-field-border-default);
  border-radius: var(--br-xs, 4px);
  border: none;
  cursor: pointer;
  color: var(--semantic-text-corp-primary);
  text-align: left;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ds-select__trigger:disabled {
  background-color: var(--text-field-bg-disabled);
  box-shadow: inset 0 0 0 1px var(--text-field-border-default);
  color: var(--semantic-text-corp-disabled);
  cursor: not-allowed;
}

.ds-select__trigger:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--text-field-border-hover);
}

.ds-select__trigger:focus-visible {
  box-shadow:
    inset 0 0 0 1px var(--text-field-border-focus),
    var(--semantic-focus-corp);
  outline: none;
}

.ds-select__value {
  flex: 1;
  min-width: 0;
  font-size: var(--body-regular-fontSize, 16px);
  line-height: var(--body-regular-lineHeight, 150%);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ds-select__value--placeholder {
  color: var(--semantic-text-corp-secondary, #6f7175);
}

.ds-select__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--semantic-icon-default-default, #5a5d7b);
}

.ds-select__icon--right {
  margin-left: var(--size2, 8px);
}

.ds-select__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ds-select__icon--right svg {
  transition: transform 0.2s cubic-bezier(0.25,0.46,0.45,0.94);
}

.ds-select--open .ds-select__icon--right svg {
  transform: rotate(180deg);
}

/* Content inside trigger */
.ds-select__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
}

.ds-select__description {
  font: var(--text-field-assistive-text, 400 14px/150% Satoshi);
  color: var(--semantic-text-corp-secondary, #6f7175);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Helper text */
.ds-select__helper {
  font: var(--text-field-assistive-text, 400 14px/150% Satoshi);
  color: var(--semantic-text-corp-secondary, #6f7175);
  margin-top: var(--size2, 8px);
}

.ds-select--error .ds-select__helper {
  color: var(--semantic-text-error);
}

/* Dropdown container (positioned under trigger) */
.ds-select__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: var(--size2, 8px);
  z-index: 10;
}