defgov/packages/ui/src/styles/utility/variant.css

@utility variant-filled {
  --filled-fg: var(--color-white);
  --filled-fg-hover: var(--color-white);
  --filled-fg-active: var(--color-white);
  --filled-bg: var(--brand-bg);
  --filled-bg-hover: var(--brand-bg-hover);
  --filled-bg-active: var(--brand-bg-active);
  --filled-border-color: var(--color-transparent);

  color: var(--filled-fg);
  background-color: var(--filled-bg);
  border-color: var(--filled-border-color);

  &:hover {
    background-color: var(--filled-bg-hover);
    color: var(--filled-fg-hover);
  }

  &:active {
    background-color: var(--filled-bg-active);
    color: var(--filled-fg-active);
  }

  &:focus-visible {
    background-color: var(--filled-bg-hover);
    color: var(--filled-fg-hover);
  }
}

@utility variant-outline {
  --outline-fg: var(--brand-bg);
  --outline-fg-hover: var(--brand-bg);
  --outline-fg-active: var(--brand-bg);
  --outline-bg: var(--color-transparent);
  --outline-bg-hover: var(--brand-bg-low-hover);
  --outline-bg-active: var(--brand-bg-low-active);
  --outline-border-color: var(--brand-bg);

  color: var(--outline-fg);
  background-color: var(--outline-bg);
  border: solid 1px;
  border-color: var(--outline-border-color);

  &:hover {
    background-color: var(--outline-bg-hover);
    color: var(--outline-fg-hover);
  }

  &:active {
    background-color: var(--outline-bg-active);
    color: var(--outline-fg-active);
  }

  &:focus-visible {
    background-color: var(--outline-bg-hover);
    color: var(--outline-fg-hover);
  }
}

@utility variant-subtle {
  --subtle-fg: var(--brand-bg);
  --subtle-fg-hover: var(--brand-bg);
  --subtle-fg-active: var(--brand-bg);
  --subtle-bg: var(--brand-bg-low);
  --subtle-bg-hover: var(--brand-bg-low-hover);
  --subtle-bg-active: var(--brand-bg-low-active);
  --subtle-border-color: var(--color-transparent);

  color: var(--subtle-fg);
  background-color: var(--subtle-bg);
  border-color: var(--subtle-border-color);

  &:hover {
    background-color: var(--subtle-bg-hover);
    color: var(--subtle-fg-hover);
  }

  &:active {
    background-color: var(--subtle-bg-active);
    color: var(--subtle-fg-active);
  }

  &:focus-visible {
    background-color: var(--subtle-bg-hover);
    color: var(--subtle-fg-hover);
  }
}

@utility variant-ghost {
  --ghost-fg: var(--brand-bg);
  --ghost-fg-hover: var(--brand-bg);
  --ghost-fg-active: var(--brand-bg);
  --ghost-bg: var(--color-transparent);
  --ghost-bg-hover: var(--brand-bg-low);
  --ghost-bg-active: var(--brand-bg-low-hover);
  --ghost-border-color: var(--color-transparent);

  color: var(--ghost-fg);
  background-color: var(--ghost-bg);
  border-color: var(--ghost-border-color);

  &:hover {
    background-color: var(--ghost-bg-hover);
    color: var(--ghost-fg-hover);
  }

  &:active {
    background-color: var(--ghost-bg-active);
    color: var(--ghost-fg-active);
  }

  &:focus-visible {
    background-color: var(--ghost-bg-hover);
    color: var(--ghost-fg-hover);
  }
}

@utility variant-filled-disabled {
  color: var(--disabled-fg);
  background-color: var(--disabled-bg);
  border-color: var(--disabled-border-color);
  filter: grayscale(100%);

  &:hover {
    color: var(--disabled-fg);
    background-color: var(--disabled-bg);
    border-color: var(--disabled-border-color);
    filter: grayscale(100%);
  }

  &:active {
    color: var(--disabled-fg);
    background-color: var(--disabled-bg);
    border-color: var(--disabled-border-color);
    filter: grayscale(100%);
  }

  &:focus-visible {
    color: var(--filled-fg);
    background-color: var(--filled-bg);
    border-color: var(--filled-border-color);
    filter: grayscale(100%);
  }
}

@utility variant-outline-disabled {
  color: var(--outline-fg);
  background-color: var(--outline-bg);
  border-color: var(--outline-border-color);
  filter: grayscale(50%);

  &:hover {
    color: var(--outline-fg);
    background-color: var(--outline-bg);
    border-color: var(--outline-border-color);
    filter: grayscale(50%);
  }

  &:active {
    color: var(--outline-fg);
    background-color: var(--outline-bg);
    border-color: var(--outline-border-color);
    filter: grayscale(50%);
  }

  &:focus-visible {
    color: var(--outline-fg);
    background-color: var(--outline-bg);
    border-color: var(--outline-border-color);
    filter: grayscale(50%);
  }
}

@utility variant-ghost-disabled {
  color: var(--ghost-fg);
  background-color: var(--ghost-bg);
  border-color: var(--ghost-border-color);
  filter: grayscale(50%);

  &:hover {
    color: var(--ghost-fg);
    background-color: var(--ghost-bg);
    border-color: var(--ghost-border-color);
    filter: grayscale(50%);
  }

  &:active {
    color: var(--ghost-fg);
    background-color: var(--ghost-bg);
    border-color: var(--ghost-border-color);
    filter: grayscale(50%);
  }

  &:focus-visible {
    color: var(--ghost-fg);
    background-color: var(--ghost-bg);
    border-color: var(--ghost-border-color);
    filter: grayscale(50%);
  }
}