From 403c1ca916f17b146238817c0e470bd9c0d8deeb Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Mon, 29 Jun 2026 14:02:22 +1000 Subject: [PATCH] feat: move to css based config --- apps/remix/app/app.css | 17 +- apps/remix/package.json | 3 +- apps/remix/tailwind.config.ts | 17 -- apps/remix/tsconfig.json | 3 +- apps/remix/vite.config.ts | 1 - package-lock.json | 5 +- packages/email/package.json | 1 - packages/email/preview/app/app.css | 8 +- packages/email/preview/tailwind.config.cjs | 24 --- packages/email/preview/tsconfig.json | 1 - packages/email/preview/vite.config.ts | 5 +- packages/email/tailwind.config.js | 8 - packages/tailwind-config/index.cjs | 162 ---------------- packages/tailwind-config/index.d.ts | 4 - packages/tailwind-config/package.json | 20 -- packages/tailwind-config/tsconfig.json | 9 - packages/tsconfig/ambient.d.ts | 1 - packages/ui/primitives/card.tsx | 2 - packages/ui/primitives/document-dropzone.tsx | 8 +- packages/ui/styles/theme.css | 191 +++++++++++++++---- packages/ui/tailwind.config.cjs | 8 - 21 files changed, 189 insertions(+), 309 deletions(-) delete mode 100644 apps/remix/tailwind.config.ts delete mode 100644 packages/email/preview/tailwind.config.cjs delete mode 100644 packages/email/tailwind.config.js delete mode 100644 packages/tailwind-config/index.cjs delete mode 100644 packages/tailwind-config/index.d.ts delete mode 100644 packages/tailwind-config/package.json delete mode 100644 packages/tailwind-config/tsconfig.json delete mode 100644 packages/tsconfig/ambient.d.ts delete mode 100644 packages/ui/tailwind.config.cjs diff --git a/apps/remix/app/app.css b/apps/remix/app/app.css index 359a10904..99d53cf5e 100644 --- a/apps/remix/app/app.css +++ b/apps/remix/app/app.css @@ -1,5 +1,15 @@ @import "@documenso/ui/styles/theme.css"; +/* Content sources: this app plus the shared `ui` and `email` packages it renders. */ +@source "./**/*.{ts,tsx}"; +@source "../../../packages/ui/primitives/**/*.{ts,tsx}"; +@source "../../../packages/ui/components/**/*.{ts,tsx}"; +@source "../../../packages/ui/icons/**/*.{ts,tsx}"; +@source "../../../packages/ui/lib/**/*.{ts,tsx}"; +@source "../../../packages/email/templates/**/*.{ts,tsx}"; +@source "../../../packages/email/template-components/**/*.{ts,tsx}"; +@source "../../../packages/email/providers/**/*.{ts,tsx}"; + /* Inter Variable Fonts */ @font-face { font-family: "Inter"; @@ -64,8 +74,9 @@ @layer base { :root { - --font-sans: "Inter"; - --font-signature: "Caveat"; - --font-noto: "Noto Sans", "Noto Sans Korean", "Noto Sans Japanese", "Noto Sans Chinese"; + /* Consumed by the `--font-*` theme tokens in @documenso/ui/styles/theme.css. */ + --font-family-sans: "Inter"; + --font-family-signature: "Caveat"; + --font-family-noto: "Noto Sans", "Noto Sans Korean", "Noto Sans Japanese", "Noto Sans Chinese"; } } diff --git a/apps/remix/package.json b/apps/remix/package.json index 8ecd1d4a3..ff4ec6f58 100644 --- a/apps/remix/package.json +++ b/apps/remix/package.json @@ -21,7 +21,6 @@ "@documenso/ee": "*", "@documenso/lib": "*", "@documenso/prisma": "*", - "@documenso/tailwind-config": "*", "@documenso/trpc": "*", "@documenso/ui": "*", "@epic-web/remember": "^1.1.0", @@ -68,9 +67,11 @@ "react-router": "^7.12.0", "recharts": "^2.15.4", "remeda": "^2.32.0", + "@tailwindcss/typography": "^0.5.19", "remix-themes": "^2.0.4", "satori": "^0.18.3", "tailwindcss": "^4.3.1", + "tailwindcss-animate": "^1.0.7", "ts-pattern": "^5.9.0", "ua-parser-js": "^1.0.41", "uqr": "^0.1.2" diff --git a/apps/remix/tailwind.config.ts b/apps/remix/tailwind.config.ts deleted file mode 100644 index db65372ce..000000000 --- a/apps/remix/tailwind.config.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const baseConfig = require('@documenso/ui/tailwind.config.cjs'); -const path = require('path'); - -module.exports = { - presets: [baseConfig], - content: [ - './app/**/*.{ts,tsx}', - `${path.join(require.resolve('@documenso/ui'), '..')}/components/**/*.{ts,tsx}`, - `${path.join(require.resolve('@documenso/ui'), '..')}/icons/**/*.{ts,tsx}`, - `${path.join(require.resolve('@documenso/ui'), '..')}/lib/**/*.{ts,tsx}`, - `${path.join(require.resolve('@documenso/ui'), '..')}/primitives/**/*.{ts,tsx}`, - `${path.join(require.resolve('@documenso/email'), '..')}/templates/**/*.{ts,tsx}`, - `${path.join(require.resolve('@documenso/email'), '..')}/template-components/**/*.{ts,tsx}`, - `${path.join(require.resolve('@documenso/email'), '..')}/providers/**/*.{ts,tsx}`, - ], -}; diff --git a/apps/remix/tsconfig.json b/apps/remix/tsconfig.json index ec392a6d4..1a374e41c 100644 --- a/apps/remix/tsconfig.json +++ b/apps/remix/tsconfig.json @@ -18,8 +18,7 @@ "@documenso/lib": ["../../packages/lib"], "@documenso/prisma": ["../../packages/prisma"], "@documenso/trpc": ["../../packages/trpc"], - "@documenso/ui": ["../../packages/ui"], - "@documenso/tailwind-config": ["../../packages/tailwind-config"] + "@documenso/ui": ["../../packages/ui"] }, "esModuleInterop": true, "verbatimModuleSyntax": true, diff --git a/apps/remix/vite.config.ts b/apps/remix/vite.config.ts index b3e488335..c25380cb8 100644 --- a/apps/remix/vite.config.ts +++ b/apps/remix/vite.config.ts @@ -68,7 +68,6 @@ export default defineConfig({ '@napi-rs/canvas', '@node-rs/bcrypt', '@prisma/client', - '@documenso/tailwind-config', 'playwright', 'playwright-core', '@playwright/browser-chromium', diff --git a/package-lock.json b/package-lock.json index e1b5f4b58..28be133ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -409,7 +409,6 @@ "@documenso/ee": "*", "@documenso/lib": "*", "@documenso/prisma": "*", - "@documenso/tailwind-config": "*", "@documenso/trpc": "*", "@documenso/ui": "*", "@epic-web/remember": "^1.1.0", @@ -429,6 +428,7 @@ "@simplewebauthn/browser": "^13.2.2", "@simplewebauthn/server": "^13.2.2", "@tailwindcss/postcss": "^4.3.1", + "@tailwindcss/typography": "^0.5.19", "@tanstack/react-query": "5.90.10", "colord": "^2.9.3", "content-disposition": "^1.0.1", @@ -459,6 +459,7 @@ "remix-themes": "^2.0.4", "satori": "^0.18.3", "tailwindcss": "^4.3.1", + "tailwindcss-animate": "^1.0.7", "ts-pattern": "^5.9.0", "ua-parser-js": "^1.0.41", "uqr": "^0.1.2" @@ -30084,7 +30085,6 @@ "license": "MIT", "dependencies": { "@documenso/nodemailer-resend": "4.0.0", - "@documenso/tailwind-config": "*", "@react-email/body": "0.2.0", "@react-email/button": "0.2.0", "@react-email/code-block": "0.2.0", @@ -30508,6 +30508,7 @@ "packages/tailwind-config": { "name": "@documenso/tailwind-config", "version": "0.0.0", + "dev": true, "license": "MIT", "dependencies": { "@tailwindcss/typography": "^0.5.19", diff --git a/packages/email/package.json b/packages/email/package.json index 2f057f979..4088162d2 100644 --- a/packages/email/package.json +++ b/packages/email/package.json @@ -18,7 +18,6 @@ }, "dependencies": { "@documenso/nodemailer-resend": "4.0.0", - "@documenso/tailwind-config": "*", "@react-email/body": "0.2.0", "@react-email/button": "0.2.0", "@react-email/code-block": "0.2.0", diff --git a/packages/email/preview/app/app.css b/packages/email/preview/app/app.css index 54ab44525..1a04f3ccb 100644 --- a/packages/email/preview/app/app.css +++ b/packages/email/preview/app/app.css @@ -1,7 +1,11 @@ @import "tailwindcss"; -/* v4 no longer auto-detects the JS config; load the standalone preview config. */ -@config "../tailwind.config.cjs"; +@source "./**/*.{ts,tsx}"; + +@theme { + --font-sans: + "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif; +} html, body { diff --git a/packages/email/preview/tailwind.config.cjs b/packages/email/preview/tailwind.config.cjs deleted file mode 100644 index 10598d0d2..000000000 --- a/packages/email/preview/tailwind.config.cjs +++ /dev/null @@ -1,24 +0,0 @@ -const path = require('node:path'); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [path.join(__dirname, 'app/**/*.{ts,tsx}')], - theme: { - extend: { - fontFamily: { - sans: [ - 'Inter', - 'ui-sans-serif', - 'system-ui', - '-apple-system', - 'Segoe UI', - 'Roboto', - 'Helvetica Neue', - 'Arial', - 'sans-serif', - ], - }, - }, - }, - plugins: [], -}; diff --git a/packages/email/preview/tsconfig.json b/packages/email/preview/tsconfig.json index 4206c21ec..ca4a9396c 100644 --- a/packages/email/preview/tsconfig.json +++ b/packages/email/preview/tsconfig.json @@ -14,7 +14,6 @@ "@documenso/lib": ["../../lib"], "@documenso/lib/*": ["../../lib/*"], "@documenso/prisma": ["../../prisma"], - "@documenso/tailwind-config": ["../../tailwind-config"], "@documenso/ui": ["../../ui"] }, "esModuleInterop": true, diff --git a/packages/email/preview/vite.config.ts b/packages/email/preview/vite.config.ts index 7612976cf..f4f3646b2 100644 --- a/packages/email/preview/vite.config.ts +++ b/packages/email/preview/vite.config.ts @@ -12,14 +12,12 @@ import tsconfigPaths from 'vite-tsconfig-paths'; * * Emails render server-side through the real `renderEmailWithI18N` pipeline * (see `app/routes/preview.tsx`), so the SSR config mirrors the main Remix app: - * Prisma, the tailwind config, and native modules stay external. + * Prisma and native modules stay external. */ export default defineConfig({ root: __dirname, css: { postcss: { - // The JS config is loaded via `@config` in app/app.css (v4 no longer - // auto-detects it or accepts a path argument here). plugins: [tailwindcss()], }, }, @@ -49,7 +47,6 @@ export default defineConfig({ '@napi-rs/canvas', '@node-rs/bcrypt', '@prisma/client', - '@documenso/tailwind-config', 'playwright', 'playwright-core', '@playwright/browser-chromium', diff --git a/packages/email/tailwind.config.js b/packages/email/tailwind.config.js deleted file mode 100644 index 2e138b912..000000000 --- a/packages/email/tailwind.config.js +++ /dev/null @@ -1,8 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const baseConfig = require('@documenso/tailwind-config'); -const path = require('path'); - -module.exports = { - ...baseConfig, - content: [`templates/**/*.{ts,tsx}`], -}; diff --git a/packages/tailwind-config/index.cjs b/packages/tailwind-config/index.cjs deleted file mode 100644 index 4a0eb8b96..000000000 --- a/packages/tailwind-config/index.cjs +++ /dev/null @@ -1,162 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const { fontFamily } = require('tailwindcss/defaultTheme'); - -/** @type {import('tailwindcss').Config} */ -module.exports = { - // `dark:` is driven by `@custom-variant dark` in theme.css; the JS `darkMode` key is ignored under v4. - content: ['src/**/*.{ts,tsx}'], - theme: { - extend: { - fontFamily: { - sans: ['var(--font-sans)', ...fontFamily.sans], - signature: ['var(--font-signature)'], - noto: ['var(--font-noto)'], - }, - zIndex: { - 9999: '9999', - }, - aspectRatio: { - 'signature-pad': '16 / 7', - }, - colors: { - border: 'hsl(var(--border))', - 'field-border': 'hsl(var(--field-border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))', - }, - 'envelope-editor-background': 'hsl(var(--envelope-editor-background))', - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - warning: { - DEFAULT: 'hsl(var(--warning))', - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - 'field-card': { - DEFAULT: 'hsl(var(--field-card))', - border: 'hsl(var(--field-card-border))', - foreground: 'hsl(var(--field-card-foreground))', - }, - widget: { - DEFAULT: 'hsl(var(--widget))', - foreground: 'hsl(var(--widget-foreground))', - }, - documenso: { - DEFAULT: '#A2E771', - 50: '#FFFFFF', - 100: '#FDFFFD', - 200: '#E7F9DA', - 300: '#D0F3B7', - 400: '#B9ED94', - 500: '#A2E771', - 600: '#83DF41', - 700: '#66C622', - 800: '#4D9619', - 900: '#356611', - 950: '#284E0D', - }, - dawn: { - DEFAULT: '#aaa89f', - 50: '#f8f8f8', - 100: '#f1f1ef', - 200: '#e6e5e2', - 300: '#d4d3cd', - 400: '#b9b7b0', - 500: '#aaa89f', - 600: '#88857a', - 700: '#706e65', - 800: '#5f5d55', - 900: '#52514a', - 950: '#2a2925', - }, - water: { - DEFAULT: '#d7e4f3', - 50: '#f3f6fb', - 100: '#e3ebf6', - 200: '#d7e4f3', - 300: '#abc7e5', - 400: '#82abd8', - 500: '#658ecc', - 600: '#5175bf', - 700: '#4764ae', - 800: '#3e538f', - 900: '#364772', - 950: '#252d46', - }, - recipient: { - green: 'hsl(var(--recipient-green))', - blue: 'hsl(var(--recipient-blue))', - purple: 'hsl(var(--recipient-purple))', - orange: 'hsl(var(--recipient-orange))', - yellow: 'hsl(var(--recipient-yellow))', - pink: 'hsl(var(--recipient-pink))', - }, - }, - borderRadius: { - DEFAULT: 'calc(var(--radius) - 3px)', - '2xl': 'calc(var(--radius) + 4px)', - xl: 'calc(var(--radius) + 2px)', - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)', - }, - keyframes: { - 'accordion-down': { - from: { height: 0 }, - to: { height: 'var(--radix-accordion-content-height)' }, - }, - 'accordion-up': { - from: { height: 'var(--radix-accordion-content-height)' }, - to: { height: 0 }, - }, - 'caret-blink': { - '0%,70%,100%': { opacity: '1' }, - '20%,50%': { opacity: '0' }, - }, - }, - animation: { - 'accordion-down': 'accordion-down 0.2s ease-out', - 'accordion-up': 'accordion-up 0.2s ease-out', - 'caret-blink': 'caret-blink 1.25s ease-out infinite', - }, - screens: { - '3xl': '1920px', - '4xl': '2560px', - '5xl': '3840px', - // `print` is defined as `@custom-variant print` in theme.css, not here: - // a `screens` entry would break the `container` utility under v4. - }, - }, - }, - plugins: [ - require('tailwindcss-animate'), - require('@tailwindcss/typography'), - // container-queries and the old `addVariablesForColors` plugin were dropped: - // the former is built into v4 core, the latter broke the themed `--*` color vars. - ], -}; diff --git a/packages/tailwind-config/index.d.ts b/packages/tailwind-config/index.d.ts deleted file mode 100644 index 3255d5393..000000000 --- a/packages/tailwind-config/index.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -import type { Config } from 'tailwindcss'; - -declare const config: Config; -export default config; diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json deleted file mode 100644 index ece7794f1..000000000 --- a/packages/tailwind-config/package.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "@documenso/tailwind-config", - "version": "0.0.0", - "main": "index.cjs", - "types": "index.d.ts", - "license": "MIT", - "scripts": { - "clean": "rimraf node_modules" - }, - "dependencies": { - "@tailwindcss/typography": "^0.5.19", - "postcss": "^8.5.14", - "tailwindcss": "^4.3.1", - "tailwindcss-animate": "^1.0.7" - }, - "devDependencies": {}, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/tailwind-config/tsconfig.json b/packages/tailwind-config/tsconfig.json deleted file mode 100644 index 23aecf759..000000000 --- a/packages/tailwind-config/tsconfig.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "extends": "@documenso/tsconfig/base.json", - "compilerOptions": { - "allowJs": true, - "noEmit": true - }, - "include": ["**/*.cjs", "**/*.js"], - "exclude": ["dist", "build", "node_modules"] -} diff --git a/packages/tsconfig/ambient.d.ts b/packages/tsconfig/ambient.d.ts deleted file mode 100644 index 54b8c1d7c..000000000 --- a/packages/tsconfig/ambient.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module '@documenso/tailwind-config'; diff --git a/packages/ui/primitives/card.tsx b/packages/ui/primitives/card.tsx index 04553e3fc..c80600cb9 100644 --- a/packages/ui/primitives/card.tsx +++ b/packages/ui/primitives/card.tsx @@ -34,8 +34,6 @@ const Card = React.forwardRef( gradient, 'dark:gradient-border-mask before:pointer-events-none before:absolute before:-inset-[2px] before:rounded-lg before:p-[2px] before:[background:linear-gradient(var(--card-gradient-degrees),theme(colors.primary.DEFAULT/70%)_5%,theme(colors.border/80%)_30%)]': gradient, - 'shadow-[0_0_0_4px_theme(colors.gray.100/70%),0_0_0_1px_theme(colors.gray.100/70%),0_0_0_0.5px_theme(colors.primary.DEFAULT/70%)]': true, - 'dark:shadow-[0]': true, }, className, )} diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx index 6949274e8..2d5d50847 100644 --- a/packages/ui/primitives/document-dropzone.tsx +++ b/packages/ui/primitives/document-dropzone.tsx @@ -92,7 +92,7 @@ export const DocumentDropzone = ({ // Disabled State
@@ -109,7 +109,7 @@ export const DocumentDropzone = ({ />
@@ -121,7 +121,7 @@ export const DocumentDropzone = ({ // Non Disabled State
@@ -135,7 +135,7 @@ export const DocumentDropzone = ({
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css index eb9ecbf2e..d25b951d7 100644 --- a/packages/ui/styles/theme.css +++ b/packages/ui/styles/theme.css @@ -1,15 +1,17 @@ /* 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"; -@config "../tailwind.config.cjs"; +@plugin "tailwindcss-animate"; +@plugin "@tailwindcss/typography"; @custom-variant dark (&:is(.dark:not(.dark-mode-disabled) *)); -/* `print:` variant; defining it as a JS `screen` breaks the `container` utility under v4. */ +/* `print:` as a screen would break the `container` utility under v4. */ @custom-variant print (@media print); -/* Safelist for the runtime recipient color classes (v4 ignores the JS config `safelist`). */ +/* 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"); @@ -17,17 +19,163 @@ @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}"); -/* Restore the v3 `ring` defaults (v4 changed them to 1px / currentColor). */ @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; } -/* - * v3-compatible `space-*` utilities. v4's built-in `space-*` uses a zero-specificity - * `:where()` selector that lets child margins collapse the gaps; these reproduce the v3 - * selector/edges so existing layouts keep working. Pair with `twv3-space-{x,y}-reverse`. - */ +@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; @@ -48,7 +196,6 @@ } } -/* Reverse companions for the twv3-space-* utilities above (built-in ones use a different selector). */ @utility twv3-space-y-reverse { & > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 1; @@ -271,14 +418,7 @@ } } -/* - * 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 page setup for reports. */ @page { margin: 1in; size: A4; @@ -311,21 +451,6 @@ display: none; } -/* .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); } diff --git a/packages/ui/tailwind.config.cjs b/packages/ui/tailwind.config.cjs deleted file mode 100644 index 931a0dbf3..000000000 --- a/packages/ui/tailwind.config.cjs +++ /dev/null @@ -1,8 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -const baseConfig = require('@documenso/tailwind-config'); - -// Recipient dynamic classes are safelisted via `@source inline(...)` in theme.css (v4 ignores JS `safelist`). -module.exports = { - presets: [baseConfig], - content: [...baseConfig.content, './primitives/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'], -};