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

Multi-brand React design system with design tokens from Figma

/* Trigger */
.ds-menu-trigger {
  display: inline-block;
  cursor: pointer;
}

/* Base Menu */
.ds-menu {
  z-index: 1100;
  min-width: 200px;
  background-color: var(--semantic-bg-surface-default);
  border: 1px solid var(--semantic-border-default-default);
  border-radius: var(--br-sm, 8px);
  box-shadow: var(--semantic-elevation-elevation2);
  padding: var(--size2, 8px);
  -webkit-font-smoothing: antialiased;
  animation: ds-menu-fade-in 0.15s ease-out;
}

/* Item */
.ds-menu__item {
  display: flex;
  align-items: center;
  gap: var(--size3, 12px);
  padding: var(--size2, 8px) var(--size3, 12px);
  border-radius: var(--br-xs, 4px);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-regular-fontSize, 16px);
  font-weight: var(--body-regular-fontWeight, 400);
  line-height: var(--body-regular-lineHeight, 150%);
  color: var(--semantic-text-corp-primary);
}

.ds-menu__item:hover:not(.ds-menu__item--disabled) {
  background-color: var(--dropdown-bg-hover);
}

.ds-menu__item:active:not(.ds-menu__item--disabled) {
  background-color: var(--dropdown-bg-active);
}

.ds-menu__item--disabled {
  color: var(--semantic-text-corp-disabled);
  cursor: not-allowed;
}

/* Icon */
.ds-menu__icon {
  display: flex;
  align-items: center;
  color: var(--semantic-icon-default-default);
  flex-shrink: 0;
}

.ds-menu__item--disabled .ds-menu__icon {
  color: var(--semantic-icon-default-disabled);
}

/* Label */
.ds-menu__label {
  flex: 1;
}

/* Divider */
.ds-menu__divider {
  height: 1px;
  background-color: var(--semantic-border-default-subtle);
  margin: var(--size2, 8px) 0;
}

/* Animation */
@keyframes ds-menu-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}