@stanfordspezi/spezi-web-design-system/dist/tailwind.css

Stanford Biodesign Digital Health Spezi Web Design System

/*

This source file is part of the Stanford Biodesign Digital Health Spezi Web Design System open-source project

SPDX-FileCopyrightText: 2024 Stanford University and the project authors (see CONTRIBUTORS.md)

SPDX-License-Identifier: MIT

*/

@import "tailwindcss";
@import "tw-animate-css";

@theme inline {
  --color-surface: var(--color-surface, rgb(250 250 249));
  --color-surface-primary: var(--color-surface-primary, rgb(255 255 255));
  --color-foreground: var(--color-foreground, rgb(9 4 4));
  --color-card: var(--color-card, rgb(255 255 255));
  --color-card-foreground: var(--color-card-foreground, rgb(9 4 4));
  --color-popover: var(--color-popover, rgb(255 255 255));
  --color-popover-foreground: var(--color-popover-foreground, rgb(9 4 4));
  --color-primary: var(--color-primary, rgb(62 176 85));
  --color-primary-foreground: var(--color-primary-foreground, rgb(243 243 243));
  --color-secondary: var(--color-secondary, rgb(242 240 240));
  --color-secondary-foreground: var(
    --color-secondary-foreground,
    rgb(30 15 15)
  );
  --color-muted: var(--color-muted, rgb(242 240 240));
  --color-muted-foreground: var(--color-muted-foreground, rgb(159 159 159));
  --color-accent: var(--color-accent, rgb(242 240 240));
  --color-accent-foreground: var(--color-accent-foreground, rgb(30 15 15));
  --color-border: var(--color-border, rgb(232 215 221));
  --color-input: var(--color-input, rgb(232 215 221));
  --color-destructive: var(--color-destructive, rgb(222 65 38));
  --color-destructive-foreground: var(
    --color-destructive-foreground,
    rgb(243 243 243)
  );
  --color-success: var(--color-success, rgb(34 197 94));
  --color-success-foreground: var(--color-success-foreground, rgb(243 243 243));
  --color-warning: var(--color-warning, rgb(252 211 3));
  --color-warning-dark: var(--color-warning-dark, rgb(153 101 21));
  --color-warning-foreground: var(--color-warning-foreground, rgb(9 4 4));
  --color-inverted: var(--color-inverted, rgb(9 4 4));
  --color-inverted-foreground: var(
    --color-inverted-foreground,
    rgb(243 243 243)
  );
  --color-ring: var(--color-ring, rgb(62 176 85));
}

@utility focus-ring {
  @apply ring-offset-surface focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden;
}

@utility no-scrollbar {
  /* Hide scrollbar for Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

@utility flex-center {
  @apply flex items-center justify-center;
}

@utility inline-flex-center {
  @apply inline-flex items-center justify-center;
}

@utility interactive-opacity {
  @apply focus-ring transition hover:opacity-60;
}

@utility hide-all-hidden {
  & [aria-hidden="true"] {
    display: none;
  }
}

/*
  Utility for data-state based fade in animations.
  RadixUI components use it.
*/
@utility animate-entrance-fade {
  @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0;
}

/*
  Utility for data-state based fade in animations.
  RadixUI components use it.
*/
@utility animate-entrance-fade-zoom {
  @apply animate-entrance-fade data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
}

/*
  Utility for data-state based fade in animations with slide based on side.
  RadixUI components use it.
*/
@utility animate-entrance-fade-slide {
  @apply animate-entrance-fade-zoom data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
}