@helpwave/hightide/dist/style/uncompiled/theme/components/input-elements.css

helpwave's component and theming library

@utility input-element {
  @apply border-2 focus-style-none focus-style-border focus-style-shadow;
  transition: 
    border-color var(--animation-duration-in, 250ms) ease-in-out, 
    box-shadow var(--animation-duration-in, 250ms) ease-in-out,
    outline-color var(--animation-duration-in, 250ms) ease-in-out,
    outline-offset var(--animation-duration-in, 250ms) ease-in-out,
    color var(--animation-duration-in, 250ms) ease-in-out,
    background-color var(--animation-duration-in, 250ms) ease-in-out;

  &:not([data-disabled]):not([data-invalid]) {
    @apply bg-input-background;

    &:not([data-readonly]) {
      @apply hover:border-primary-hover;
    }

    &:not([data-value]) {
      @apply text-placeholder;
    }

    &[data-value] {
      @apply text-input-text;
    }
  }

  &:not([data-disabled])[data-invalid] {
    @apply bg-negative/20 border-negative;

    &:not([data-readonly]) {
      @apply hover:border-negative-hover;
    }

    --color-focus: var(--color-negative);

    &[data-value] {
      @apply text-negative;
    }

    &:not([data-value]) {
      @apply text-placeholder;
    }
  }

  &[data-disabled] {
    @apply border-disabled bg-disabled text-on-disabled placeholder:text-transparent cursor-not-allowed;
  }
}

/* input-elements */
@layer components {
  [data-name="input"] {
    @apply input-element px-3 py-2 rounded-md h-element-md;
  }
}