documenso/packages/ui/styles/theme.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root,
  .dark-mode-disabled {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --card: 0 0% 100%;
    --card-border: 214.3 31.8% 91.4%;
    --card-border-tint: 112 205 159;
    --card-foreground: 222.2 47.4% 11.2%;

    --field-card: 95 74% 90%;
    --field-card-border: 95.08 71.08% 67.45%;
    --field-card-foreground: 222.2 47.4% 11.2%;

    --widget: 0 0% 97%;
    --widget-foreground: 0 0% 95%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --primary: 95.08 71.08% 67.45%;
    --primary-foreground: 95.08 71.08% 10%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 95.08 71.08% 67.45%;

    --radius: 0.5rem;

    --warning: 54 96% 45%;

    --gold: 47.9 95.8% 53.1%;

    --recipient-green: 100 48% 55%;
    --recipient-blue: 212 56% 50%;
    --recipient-purple: 266 100% 64%;
    --recipient-orange: 36 92% 54%;
    --recipient-yellow: 51 100% 43%;
    --recipient-pink: 313 65% 57%;

    /* Base - Neutral */
    --new-neutral-50: 0, 0%, 96%;
    --new-neutral-100: 0, 0%, 91%;
    --new-neutral-200: 0, 0%, 82%;
    --new-neutral-300: 0, 0%, 69%;
    --new-neutral-400: 0, 0%, 53%;
    --new-neutral-500: 0, 0%, 43%;
    --new-neutral-600: 0, 0%, 36%;
    --new-neutral-700: 0, 0%, 31%;
    --new-neutral-800: 0, 0%, 27%;
    --new-neutral-900: 0, 0%, 24%;
    --new-neutral-950: 0, 0%, 9%;

    /* Base - White */
    --new-white-50: 0, 0%, 5%;
    --new-white-60: 0, 0%, 6%;
    --new-white-100: 0, 0%, 10%;
    --new-white-200: 0, 0%, 20%;
    --new-white-300: 0, 0%, 30%;
    --new-white-400: 0, 0%, 40%;
    --new-white-500: 0, 0%, 50%;
    --new-white-600: 0, 0%, 60%;
    --new-white-700: 0, 0%, 80%;
    --new-white-800: 0, 0%, 90%;
    --new-white-900: 0, 0%, 100%;

    /* Primary - Green */
    --new-primary-50: 98, 73%, 97%;
    --new-primary-100: 95, 73%, 94%;
    --new-primary-200: 94, 70%, 87%;
    --new-primary-300: 95, 71%, 81%;
    --new-primary-400: 95, 71%, 74%;
    --new-primary-500: 95, 71%, 67%;
    --new-primary-600: 95, 71%, 54%;
    --new-primary-700: 95, 71%, 41%;
    --new-primary-800: 95, 71%, 27%;
    --new-primary-900: 95, 72%, 14%;
    --new-primary-950: 95, 72%, 7%;

    /* Secondary - Info */
    --new-info-50: 210, 54%, 95%;
    --new-info-100: 211, 57%, 90%;
    --new-info-200: 212, 55%, 80%;
    --new-info-300: 212, 56%, 70%;
    --new-info-400: 212, 56%, 60%;
    --new-info-500: 212, 56%, 50%;
    --new-info-600: 212, 56%, 40%;
    --new-info-700: 212, 56%, 30%;
    --new-info-800: 212, 55%, 20%;
    --new-info-900: 211, 57%, 10%;
    --new-info-950: 214, 54%, 5%;

    /* Secondary - Error */
    --new-error-50: 4, 80%, 96%;
    --new-error-100: 3, 78%, 91%;
    --new-error-200: 3, 79%, 83%;
    --new-error-300: 3, 79%, 74%;
    --new-error-400: 3, 79%, 66%;
    --new-error-500: 4, 79%, 57%;
    --new-error-600: 3, 79%, 46%;
    --new-error-700: 3, 79%, 34%;
    --new-error-800: 3, 79%, 23%;
    --new-error-900: 3, 79%, 11%;
    --new-error-950: 3, 80%, 6%;

    /* Secondary - Warning */
    --new-warning-50: 39, 100%, 96%;
    --new-warning-100: 40, 100%, 93%;
    --new-warning-200: 39, 100%, 86%;
    --new-warning-300: 39, 100%, 79%;
    --new-warning-400: 39, 100%, 71%;
    --new-warning-500: 39, 100%, 64%;
    --new-warning-600: 39, 100%, 57%;
    --new-warning-700: 39, 100%, 43%;
    --new-warning-800: 39, 100%, 29%;
    --new-warning-900: 39, 100%, 14%;
    --new-warning-950: 38, 100%, 7%;

    /* Surface */
    --new-surface-black: 0, 0%, 0%;
    --new-surface-white: 0, 0%, 91%;
  }

  .dark:not(.dark-mode-disabled) {
    --background: 0 0% 14.9%;
    --foreground: 0 0% 97%;

    --muted: 0 0% 23.4%;
    --muted-foreground: 0 0% 85%;

    --popover: 0 0% 14.9%;
    --popover-foreground: 0 0% 90%;

    --card: 0 0% 14.9%;
    --card-border: 0 0% 27.9%;
    --card-border-tint: 112 205 159;
    --card-foreground: 0 0% 95%;

    --widget: 0 0% 14.9%;
    --widget-foreground: 0 0% 18%;

    --border: 0 0% 27.9%;
    --input: 0 0% 27.9%;

    --field-border: 214.3 31.8% 91.4%;

    --primary: 95.08 71.08% 67.45%;
    --primary-foreground: 95.08 71.08% 10%;

    --secondary: 0 0% 23.4%;
    --secondary-foreground: 95.08 71.08% 67.45%;

    --accent: 0 0% 27.9%;
    --accent-foreground: 95.08 71.08% 67.45%;

    --destructive: 0 87% 62%;
    --destructive-foreground: 0 87% 19%;

    --ring: 95.08 71.08% 67.45%;

    --radius: 0.5rem;

    --warning: 54 96% 45%;

    --gold: 47.9 95.8% 53.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }
}

/*
 * Custom CSS for printing reports
 * - Sets page margins to 0.5 inches
 * - Hides the header and footer
 * - Hides the print button
 * - Sets page size to A4
 * - Sets the font size to 12pt
 */
.print-provider {
  @page {
    margin: 1in;
    size: A4;
  }
}

.gradient-border-mask::before {
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  background: transparent;
  border-radius: 10px;
  scrollbar-gutter: stable;
}

.custom-scrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(100 116 139 / 1);
  border-radius: 10px;
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(100 116 139 / 0.5);
}

/* Custom Swagger Dark Theme */
.swagger-dark-theme .swagger-ui {
  filter: invert(88%) hue-rotate(180deg);
}

.swagger-dark-theme .swagger-ui .microlight {
  filter: invert(100%) hue-rotate(180deg);
}