@wallet-ui/tailwind/dist/index.css

Tailwind CSS for Wallet UI

@import "tailwindcss";

/* src/wallet-ui-variables.css */
:root,
html.light:root,
[data-theme=light]:root {
  --wu-color-background: var(--color-neutral-50);
  --wu-color-background-hover: var(--color-neutral-100);
  --wu-color-border: var(--color-neutral-200);
  --wu-color-foreground: var(--color-neutral-950);
  --wu-color-foreground-hover: var(--color-neutral-900);
  --wu-color-ring: var(--color-neutral-400);
}
html.dark:root,
[data-theme=dark]:root {
  --wu-color-background: var(--color-neutral-950);
  --wu-color-background-hover: var(--color-neutral-900);
  --wu-color-border: var(--color-neutral-800);
  --wu-color-foreground: var(--color-neutral-100);
  --wu-color-foreground-hover: var(--color-white);
  --wu-color-ring: var(--color-neutral-500);
}

/* src/wallet-ui-base-button.css */
[data-wu=base-button] {
  background: var(--wu-color-background);
  color: var(--wu-color-foreground);
  @apply border;
  border-color: var(--wu-color-border);
  @apply rounded-md shadow-sm cursor-pointer;
  @apply flex items-center justify-center gap-2 whitespace-nowrap;
  @apply disabled:cursor-not-allowed disabled:opacity-50;
  @apply px-4 py-3;
  @apply text-base;
  @apply font-semibold;
  &:hover {
    background: var(--wu-color-background-hover);
    color: var(--wu-color-foreground-hover);
  }
  &:focus {
    @apply outline-none;
    box-shadow: 0 0 0 2px var(--wu-color-ring);
  }
}
[data-wu=base-button-left-section] {
  @apply mr-2;
  @apply text-sm;
}
[data-wu=base-button-right-section] {
  @apply ml-2;
  @apply text-sm;
}

/* src/wallet-ui-base-dropdown.css */
[data-wu=base-dropdown-list] {
  background: var(--wu-color-background);
  @apply border outline-hidden;
  border-color: var(--wu-color-border);
  @apply overflow-clip rounded-md p-1;
}
[data-wu=base-dropdown-item] {
  background: var(--wu-color-background);
  color: var(--wu-color-foreground);
  @apply flex items-center gap-2;
  @apply cursor-pointer w-full rounded-md;
  @apply px-4 py-3;
  @apply text-base;
  &:hover {
    background: var(--wu-color-background-hover);
    color: var(--wu-color-foreground-hover);
  }
}
[data-wu=base-dropdown-item-left-section] {
  @apply mr-2;
}
[data-wu=base-dropdown-item-right-section] {
  @apply ml-2;
}

/* src/wallet-ui-base-modal.css */
[data-scope=dialog][data-part=backdrop] {
  @apply fixed top-0 left-0 bottom-0 w-full z-20;
  @apply bg-black/40 dark:bg-black/70;
}
[data-scope=dialog][data-part=positioner] {
  @apply fixed top-0 left-0 bottom-0 w-full z-20;
  @apply flex items-center justify-center;
}
[data-scope=dialog][data-part=content] {
  background: var(--wu-color-background);
  @apply border;
  border-color: var(--wu-color-border);
  @apply w-full overflow-hidden shadow-lg;
  @apply max-w-sm mx-4;
  @apply rounded-lg outline-0;
  @apply p-2;
}
[data-scope=dialog][data-part=content] header {
  @apply flex items-center justify-end;
  @apply pb-4;
  @apply text-2xl;
}
[data-scope=dialog][data-part=description] {
  @apply flex items-center justify-center;
  @apply pb-4 px-4;
  @apply text-base;
  color: var(--wu-color-foreground);
}
[data-scope=dialog][data-part=close-trigger] {
  @apply border;
  border-color: var(--wu-color-border);
  @apply cursor-pointer;
  @apply flex items-center justify-center;
  @apply h-8 w-8 rounded-full;
  color: var(--wu-color-foreground);
  &:hover {
    background: var(--wu-color-background-hover);
    color: var(--wu-color-foreground-hover);
  }
}
[data-scope=dialog][data-part=content][data-state=open] {
  animation: anim-scale-in 300ms ease-out;
}
[data-scope=dialog][data-part=content][data-state=closed] {
  animation: anim-scale-out 200ms ease-in;
}
@keyframes anim-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes anim-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* src/wallet-ui-icon.css */
[data-wu=wallet-ui-icon] {
  @apply border-0;
  @apply m-0;
  @apply rounded-md;
  @apply h-[24px] w-[24px];
}

/* src/wallet-ui-label.css */
[data-wu=wallet-ui-label] {
  color: var(--wu-color-foreground);
  @apply text-base;
  @apply font-normal;
}

/* src/wallet-ui-list-button.css */
[data-wu=wallet-ui-list-button] {
  @apply flex items-center gap-2;
  @apply whitespace-nowrap;
  @apply cursor-pointer select-none appearance-none disabled:cursor-not-allowed disabled:opacity-50;
  @apply rounded-lg;
  @apply px-2 py-2 rounded-lg;
  &:hover {
    background: var(--wu-color-background-hover);
  }
}

/* src/wallet-ui-list.css */
[data-wu=wallet-ui-list] {
  @apply flex flex-col;
  @apply gap-2;
}

/* src/index.css */
/*# sourceMappingURL=index.css.map */