axp-ui/src/style/theme.sass

// Layouts.
.layout
  @apply bg-light/10 text-dark
  @apply dark:bg-black dark:text-light
  *
    @apply border-light dark:border-light/40
  a
    @apply text-primary

// body
//   *
.ui
  &-btn,
  &-alert
    @apply bg-white
    &.primary
      @apply bg-primary border-primary text-white
    &.accent
      @apply bg-accent border-accent text-white
    &.info
      @apply bg-info border-info text-white
    &.success
      @apply bg-success border-success text-white
    &.warning
      @apply bg-warning border-warning text-white
    &.error
      @apply bg-error border-error text-white
    &.dark
      @apply bg-dark border-dark text-white
    &.light
      @apply bg-light
    &:disabled
      @apply text-white bg-light border-light

  &-field
    .input > *
      @apply bg-white dark:bg-white/10 text-dark dark:text-white
    .description
      @apply text-dark/50
    &.error
      .label,
      .input,
      .message
        @apply text-error border-error
    &.disabled
      @apply text-dark/30
      .input
        > *
          @apply bg-light
          @apply text-dark/30
  &-btn
    @apply outline-none
    &:hover:not(:active)
      @apply bg-opacity-80

  &-btn,
  &-alert,
  &-field .input,
  &-field .input > *,
  &-card
      @apply rounded

  &-pagination
    .pages
      .active
        @apply bg-primary text-white