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

Multi-brand React design system with design tokens from Figma

/* Base ToggleButton */
.ds-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size2, 8px);
  background: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-radius: var(--br-lg, 12px);
  width: fit-content;
  border: 1px solid var(--button-primary-border-default);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* Label */
.ds-toggle-button__label {
  color: var(--semantic-text-corp-secondary);
  text-align: center;
  font-family: var(--button-medium-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--button-medium-fontSize, 16px);
  font-weight: var(--button-medium-fontWeight, 500);
  line-height: var(--button-medium-lineHeight, 150%);
  transition: color 0.2s ease-in-out;
  white-space: nowrap;
}

/* Icon */
.ds-toggle-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--semantic-icon-default-default);
  transition: color 0.2s ease-in-out;
}

/* Sizes */
.ds-toggle-button--large {
  padding: var(--size3, 12px) var(--size8, 32px);
}

.ds-toggle-button--large .ds-toggle-button__label {
  font-family: var(--button-large-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--button-large-fontSize, 18px);
  font-weight: var(--button-large-fontWeight, 500);
  line-height: var(--button-large-lineHeight, 150%);
}

.ds-toggle-button--small {
  padding: var(--size2, 8px) var(--size6, 24px);
}

.ds-toggle-button--small .ds-toggle-button__label {
  font-family: var(--button-small-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--button-small-fontSize, 14px);
  font-weight: var(--button-small-fontWeight, 500);
  line-height: var(--button-small-lineHeight, 150%);
}

/* Hover */
.ds-toggle-button:hover:not(:disabled) {
  background-color: var(--button-tertiary-bg-hover);
}

/* Focus */
.ds-toggle-button:focus-visible {
  outline: none;
  box-shadow: var(--semantic-focus-corp);
}

/* Active/Click */
.ds-toggle-button:active:not(:disabled) {
  background-color: var(--button-tertiary-bg-active);
}

/* Selected */
.ds-toggle-button--selected {
  background-color: var(--button-tertiary-bg-hover);
}

.ds-toggle-button--selected .ds-toggle-button__label {
  color: var(--semantic-text-indigo-primary);
}

.ds-toggle-button--selected .ds-toggle-button__icon {
  color: var(--semantic-icon-brand-default);
}

.ds-toggle-button--selected:hover:not(:disabled),
.ds-toggle-button--selected:active:not(:disabled) {
  background-color: var(--button-tertiary-bg-active);
}

.ds-toggle-button--selected:focus-visible {
  outline: none;
  box-shadow: var(--semantic-focus-indigo);
}

/* Disabled */
.ds-toggle-button:disabled {
  cursor: not-allowed;
}

.ds-toggle-button:disabled .ds-toggle-button__label {
  color: var(--semantic-text-corp-disabled);
}

.ds-toggle-button:disabled .ds-toggle-button__icon {
  color: var(--semantic-icon-default-disabled);
}

.ds-toggle-button--selected:disabled {
  background-color: var(--button-tertiary-bg-hover);
}

.ds-toggle-button--selected:disabled .ds-toggle-button__label {
  color: var(--semantic-text-indigo-secondary);
}

.ds-toggle-button--selected:disabled .ds-toggle-button__icon {
  color: var(--semantic-icon-brand-disabled);
}