documenso/packages/ui/styles/theme.css

/* biome-ignore-all lint/suspicious/noDuplicateProperties: twv3-space-* lists both --value(number) and --value([length]) forms; v4 keeps only one per class. */

/* Shared theme. Apps declare their own `@source` file globs in their CSS entry. */
@import "tailwindcss";

@plugin "tailwindcss-animate";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark:not(.dark-mode-disabled) *));

/* `print:` as a screen would break the `container` utility under v4. */
@custom-variant print (@media print);

/* Recipient color safelist (built dynamically at runtime). */
@source inline("{ring,bg,border,text}-recipient-{green,blue,purple,orange,yellow,pink}");
@source inline("hover:bg-recipient-{green,blue,purple,orange,yellow,pink}/{15,30}");
@source inline("active:bg-recipient-{green,blue,purple,orange,yellow,pink}/15");
@source inline("hover:border-recipient-{green,blue,purple,orange,yellow,pink}");
@source inline("group-hover:text-recipient-{green,blue,purple,orange,yellow,pink}");
@source inline("group-hover/field-item:bg-recipient-{green,blue,purple,orange,yellow,pink}");

@theme {
  /* Restore v3 `ring` defaults (v4 uses 1px / currentColor). */
  --default-ring-width: 3px;
  --default-ring-color: hsl(var(--ring));

  /* Families are injected at runtime via `--font-family-*` (see the app entry). */
  --font-sans:
    var(--font-family-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-signature: var(--font-family-signature);
  --font-noto: var(--font-family-noto);

  --breakpoint-3xl: 1920px;
  --breakpoint-4xl: 2560px;
  --breakpoint-5xl: 3840px;

  --aspect-signature-pad: 16 / 7;

  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 2px);
  --radius-2xl: calc(var(--radius) + 4px);

  /* Themed colors (driven by the runtime HSL vars below). */
  --color-border: hsl(var(--border));
  --color-field-border: hsl(var(--field-border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-envelope-editor-background: hsl(var(--envelope-editor-background));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-warning: hsl(var(--warning));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-field-card: hsl(var(--field-card));
  --color-field-card-border: hsl(var(--field-card-border));
  --color-field-card-foreground: hsl(var(--field-card-foreground));

  --color-widget: hsl(var(--widget));
  --color-widget-foreground: hsl(var(--widget-foreground));

  /* Static brand palettes */
  --color-documenso: #a2e771;
  --color-documenso-50: #ffffff;
  --color-documenso-100: #fdfffd;
  --color-documenso-200: #e7f9da;
  --color-documenso-300: #d0f3b7;
  --color-documenso-400: #b9ed94;
  --color-documenso-500: #a2e771;
  --color-documenso-600: #83df41;
  --color-documenso-700: #66c622;
  --color-documenso-800: #4d9619;
  --color-documenso-900: #356611;
  --color-documenso-950: #284e0d;

  --color-dawn: #aaa89f;
  --color-dawn-50: #f8f8f8;
  --color-dawn-100: #f1f1ef;
  --color-dawn-200: #e6e5e2;
  --color-dawn-300: #d4d3cd;
  --color-dawn-400: #b9b7b0;
  --color-dawn-500: #aaa89f;
  --color-dawn-600: #88857a;
  --color-dawn-700: #706e65;
  --color-dawn-800: #5f5d55;
  --color-dawn-900: #52514a;
  --color-dawn-950: #2a2925;

  --color-water: #d7e4f3;
  --color-water-50: #f3f6fb;
  --color-water-100: #e3ebf6;
  --color-water-200: #d7e4f3;
  --color-water-300: #abc7e5;
  --color-water-400: #82abd8;
  --color-water-500: #658ecc;
  --color-water-600: #5175bf;
  --color-water-700: #4764ae;
  --color-water-800: #3e538f;
  --color-water-900: #364772;
  --color-water-950: #252d46;

  --color-recipient-green: hsl(var(--recipient-green));
  --color-recipient-blue: hsl(var(--recipient-blue));
  --color-recipient-purple: hsl(var(--recipient-purple));
  --color-recipient-orange: hsl(var(--recipient-orange));
  --color-recipient-yellow: hsl(var(--recipient-yellow));
  --color-recipient-pink: hsl(var(--recipient-pink));

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
}

@utility z-9999 {
  z-index: 9999;
}

/* Bare `rounded` differs from `--radius`, so it can't be a theme token. */
@utility rounded {
  border-radius: calc(var(--radius) - 3px);
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

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

/* v3-compatible `space-*`; v4's built-in uses a `:where()` selector that collapses gaps. */
@utility twv3-space-y-* {
  & > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(--spacing(--value(number)) * calc(1 - var(--tw-space-y-reverse)));
    margin-top: calc(--value([length]) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(--spacing(--value(number)) * var(--tw-space-y-reverse));
    margin-bottom: calc(--value([length]) * var(--tw-space-y-reverse));
  }
}

@utility twv3-space-x-* {
  & > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-left: calc(--spacing(--value(number)) * calc(1 - var(--tw-space-x-reverse)));
    margin-left: calc(--value([length]) * calc(1 - var(--tw-space-x-reverse)));
    margin-right: calc(--spacing(--value(number)) * var(--tw-space-x-reverse));
    margin-right: calc(--value([length]) * var(--tw-space-x-reverse));
  }
}

@utility twv3-space-y-reverse {
  & > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 1;
  }
}

@utility twv3-space-x-reverse {
  & > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
  }
}

@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%;

    --envelope-editor-background: 210 40% 98.04%;
  }

  .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%;

    --envelope-editor-background: 0 0% 14.9%;
  }
}

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

  /* Restore v3 preflight defaults that v4 changed. */
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  input::placeholder,
  textarea::placeholder {
    color: hsl(var(--muted-foreground));
  }

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

/* Print page setup for reports. */
@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;
}

.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

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

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