apps/frontend/src/index.css
@import "tailwindcss";

@import "@radix-ui/colors/gray" layer(base);
@import "@radix-ui/colors/gray-dark" layer(base);
@import "@radix-ui/colors/mauve" layer(base);
@import "@radix-ui/colors/mauve-dark" layer(base);
@import "@radix-ui/colors/violet" layer(base);
@import "@radix-ui/colors/violet-dark" layer(base);
@import "@radix-ui/colors/tomato" layer(base);
@import "@radix-ui/colors/tomato-dark" layer(base);
@import "@radix-ui/colors/amber" layer(base);
@import "@radix-ui/colors/amber-dark" layer(base);
@import "@radix-ui/colors/orange" layer(base);
@import "@radix-ui/colors/orange-dark" layer(base);
@import "@radix-ui/colors/grass" layer(base);
@import "@radix-ui/colors/grass-dark" layer(base);
@import "@radix-ui/colors/blue" layer(base);
@import "@radix-ui/colors/blue-dark" layer(base);

@theme {
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;

  --color-*: initial;

  --color-white: #fff;
  --color-black: #000;

  --opacity-disabled: 0.38;

  --radius-chip: 20px;

  --text-xxs: 0.6875rem;
  --text-xxs--line-height: 1rem;

  --color-progress-from: var(--violet-8);
  --color-progress-to: var(--violet-10);

  --text-color-default: var(--mauve-12);
  --text-color-low: var(--mauve-11);
  --text-color-placeholder: var(--mauve-10);

  --text-color-primary: var(--violet-12);
  --text-color-primary-low: var(--violet-11);

  --text-color-danger: var(--tomato-12);
  --text-color-danger-low: var(--tomato-11);

  --text-color-warning: var(--orange-12);
  --text-color-warning-low: var(--orange-11);

  --text-color-info: var(--blue-12);
  --text-color-info-low: var(--blue-11);

  --text-color-pending: var(--amber-12);
  --text-color-pending-low: var(--amber-11);

  --text-color-success: var(--grass-12);
  --text-color-success-low: var(--grass-11);

  --background-color-app: var(--mauve-1);
  --background-color-subtle: var(--mauve-2);
  --background-color-ui: var(--mauve-3);
  --background-color-hover: var(--mauve-4);
  --background-color-active: var(--mauve-5);
  --background-color-solid: var(--mauve-9);
  --background-color-solid-hover: var(--mauve-10);
  --background-color-solid-active: var(--mauve-11);

  --background-color-primary-app: var(--violet-1);
  --background-color-primary-subtle: var(--violet-2);
  --background-color-primary-ui: var(--violet-3);
  --background-color-primary-hover: var(--violet-4);
  --background-color-primary-active: var(--violet-5);
  --background-color-primary-solid: var(--violet-9);
  --background-color-primary-solid-hover: var(--violet-10);
  --background-color-primary-solid-active: var(--violet-11);

  --background-color-danger-app: var(--tomato-1);
  --background-color-danger-subtle: var(--tomato-2);
  --background-color-danger-ui: var(--tomato-3);
  --background-color-danger-hover: var(--tomato-4);
  --background-color-danger-active: var(--tomato-5);
  --background-color-danger-solid: var(--tomato-9);
  --background-color-danger-solid-hover: var(--tomato-10);
  --background-color-danger-solid-active: var(--tomato-11);

  --background-color-warning-app: var(--orange-1);
  --background-color-warning-subtle: var(--orange-2);
  --background-color-warning-ui: var(--orange-3);
  --background-color-warning-hover: var(--orange-4);
  --background-color-warning-active: var(--orange-5);
  --background-color-warning-solid: var(--orange-9);
  --background-color-warning-solid-hover: var(--orange-10);
  --background-color-warning-solid-active: var(--orange-11);

  --background-color-info-app: var(--blue-1);
  --background-color-info-subtle: var(--blue-2);
  --background-color-info-ui: var(--blue-3);
  --background-color-info-hover: var(--blue-4);
  --background-color-info-active: var(--blue-5);
  --background-color-info-solid: var(--blue-9);
  --background-color-info-solid-hover: var(--blue-10);
  --background-color-info-solid-active: var(--blue-11);

  --background-color-pending-app: var(--amber-1);
  --background-color-pending-subtle: var(--amber-2);
  --background-color-pending-ui: var(--amber-3);
  --background-color-pending-hover: var(--amber-4);
  --background-color-pending-active: var(--amber-5);
  --background-color-pending-solid: var(--amber-9);
  --background-color-pending-solid-hover: var(--amber-10);
  --background-color-pending-solid-active: var(--amber-11);

  --background-color-success-app: var(--grass-1);
  --background-color-success-subtle: var(--grass-2);
  --background-color-success-ui: var(--grass-3);
  --background-color-success-hover: var(--grass-4);
  --background-color-success-active: var(--grass-5);
  --background-color-success-solid: var(--grass-9);
  --background-color-success-solid-hover: var(--grass-10);
  --background-color-success-solid-active: var(--grass-11);

  --background-color-bar: var(--violet-8);

  --background-color-github: rgb(36 41 46);
  --background-color-github-hover: rgb(85 85 85);
  --background-color-github-active: rgb(85 85 85);

  --background-color-gitlab: rgb(226 67 41);
  --background-color-gitlab-hover: rgb(252 109 38);
  --background-color-gitlab-active: rgb(252 109 38);

  --background-color-google: var(--gray-1);
  --background-color-google-hover: var(--gray-2);
  --background-color-google-active: var(--gray-3);

  --border-color-default: var(--mauve-6);
  --border-color-low: var(--mauve-4);
  --border-color-hover: var(--mauve-8);
  --border-color-active: var(--mauve-9);

  --border-color-primary: var(--violet-6);
  --border-color-primary-hover: var(--violet-8);
  --border-color-primary-active: var(--violet-9);

  --border-color-danger: var(--tomato-6);
  --border-color-danger-hover: var(--tomato-8);
  --border-color-danger-active: var(--tomato-9);

  --border-color-warning: var(--orange-6);
  --border-color-warning-hover: var(--orange-8);

  --border-color-info: var(--blue-6);
  --border-color-info-hover: var(--blue-8);

  --border-color-pending: var(--amber-6);
  --border-color-pending-hover: var(--amber-8);

  --border-color-success: var(--grass-6);
  --border-color-success-hover: var(--grass-8);

  --ring-color-default: var(--border-color-default);

  --ring-color-primary: var(--violet-6);
  --ring-color-primary-hover: var(--violet-8);
  --ring-color-primary-active: var(--violet-9);

  --ring-color-danger: var(--tomato-6);
  --ring-color-danger-hover: var(--tomato-8);
  --ring-color-danger-active: var(--tomato-9);

  --ring-color-success: var(--grass-6);
  --ring-color-success-hover: var(--grass-8);
  --ring-color-success-active: var(--grass-9);

  --ring-color-google: var(--gray-6);

  --outline-color-primary: var(--violet-6);

  --stroke-low: var(--border-color-low);

  --fill-subtle: var(--background-color-subtle);
  --fill-text-low: var(--text-color-low);

  --z-index-hover-card: 800;
  --z-index-dialog: 900;

  --animate-caret-blink: caret-blink 1.2s ease-out infinite;

  @keyframes caret-blink {
    0%,
    70%,
    100% {
      opacity: 1;
    }
    20%,
    50% {
      opacity: 0;
    }
  }

  --animate-bounce-down: bounce-down 1s infinite;

  @keyframes bounce-down {
    0%,
    100% {
      transform: translateY(25%);
    }
    50% {
      transform: none;
    }
  }

  --animate-bounce-up: bounce-up 1s infinite;

  @keyframes bounce-up {
    0%,
    100% {
      transform: translateY(-25%);
    }
    50% {
      transform: none;
    }
  }

  --animate-highlight-svg: highlight-svg 1s cubic-bezier(0.4, 0, 0.2, 1)
    forwards;

  @keyframes highlight-svg {
    0% {
      r: 0;
      opacity: 0;
      stroke-width: 0;
    }
    40% {
      r: 50%;
      opacity: 1;
      stroke-width: 2;
    }
    100% {
      r: 0;
      opacity: 1;
      stroke-width: 1;
    }
  }
}

@plugin "tailwindcss-animate";

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant search-cancel (&::-webkit-search-cancel-button);

@utility rac-focus {
  &[data-focused]:not([data-focus-visible]) {
    @apply outline-none;
  }

  &[data-focus-visible] {
    @apply outline-(--violet-10) outline-1 outline-offset-1;
  }
}

@utility rac-focus-group {
  .group:focus & {
    @apply outline-none;
  }

  .group[data-focus-visible] & {
    @apply outline-(--violet-10) outline-1 outline-offset-1;
  }
}

@utility underline-emphasis {
  @apply underline decoration-dotted decoration-1 underline-offset-1;
}

@utility underline-link {
  @apply underline decoration-1 underline-offset-2;
}

@layer base {
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --chart-6: 210 50% 50%;
    --chart-7: 120 40% 40%;
    --chart-8: 60 30% 30%;
    --chart-9: 300 20% 20%;
    --chart-10: 180 10% 10%;
    --chart-11: 90 70% 70%;
    --chart-12: 45 60% 60%;
    --chart-13: 15 50% 50%;
    --chart-14: 75 40% 40%;
    --chart-15: 105 30% 30%;
  }

  .dark {
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --chart-6: 200 70% 50%;
    --chart-7: 140 60% 45%;
    --chart-8: 100 50% 40%;
    --chart-9: 250 40% 35%;
    --chart-10: 300 30% 30%;
    --chart-11: 50 70% 70%;
    --chart-12: 20 60% 60%;
    --chart-13: 10 50% 50%;
    --chart-14: 80 40% 40%;
    --chart-15: 110 30% 30%;
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--border-color-default, currentColor);
  }

  html,
  body {
    @apply bg-app text-default scheme-only-light h-full font-sans antialiased;
  }

  html.dark body {
    @apply scheme-only-dark;
  }

  #root {
    @apply h-full;
  }

  [data-backdrop]::after {
    @apply bg-app backdrop-blur-xs absolute inset-0 opacity-60 content-[''];
  }

  button,
  [role="button"] {
    @apply cursor-default;
  }

  strong {
    @apply font-semibold;
  }
}
