mirror of
https://github.com/documenso/documenso.git
synced 2026-07-11 21:45:18 +10:00
feat: move to css based config
This commit is contained in:
Lucas Smith
+14
-3
@@ -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";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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}`,
|
||||
],
|
||||
};
|
||||
@@ -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,
|
||||
|
||||
@@ -68,7 +68,6 @@ export default defineConfig({
|
||||
'@napi-rs/canvas',
|
||||
'@node-rs/bcrypt',
|
||||
'@prisma/client',
|
||||
'@documenso/tailwind-config',
|
||||
'playwright',
|
||||
'playwright-core',
|
||||
'@playwright/browser-chromium',
|
||||
|
||||
Generated
+3
-2
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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: [],
|
||||
};
|
||||
@@ -14,7 +14,6 @@
|
||||
"@documenso/lib": ["../../lib"],
|
||||
"@documenso/lib/*": ["../../lib/*"],
|
||||
"@documenso/prisma": ["../../prisma"],
|
||||
"@documenso/tailwind-config": ["../../tailwind-config"],
|
||||
"@documenso/ui": ["../../ui"]
|
||||
},
|
||||
"esModuleInterop": true,
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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}`],
|
||||
};
|
||||
@@ -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.
|
||||
],
|
||||
};
|
||||
Vendored
-4
@@ -1,4 +0,0 @@
|
||||
import type { Config } from 'tailwindcss';
|
||||
|
||||
declare const config: Config;
|
||||
export default config;
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "@documenso/tsconfig/base.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["**/*.cjs", "**/*.js"],
|
||||
"exclude": ["dist", "build", "node_modules"]
|
||||
}
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
declare module '@documenso/tailwind-config';
|
||||
@@ -34,8 +34,6 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
||||
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,
|
||||
)}
|
||||
|
||||
@@ -92,7 +92,7 @@ export const DocumentDropzone = ({
|
||||
// Disabled State
|
||||
<div className="flex">
|
||||
<motion.div
|
||||
className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-destructive/10 group-hover:bg-destructive/2"
|
||||
className="a z-10 flex aspect-[3/4] w-24 origin-top-right flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-destructive/10 group-hover:bg-destructive/2"
|
||||
variants={DocumentDropzoneDisabledCardLeftVariants}
|
||||
>
|
||||
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
|
||||
@@ -109,7 +109,7 @@ export const DocumentDropzone = ({
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-destructive/10 group-hover:bg-destructive/2"
|
||||
className="z-10 flex aspect-[3/4] w-24 origin-top-left flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-destructive/10 group-hover:bg-destructive/2"
|
||||
variants={DocumentDropzoneDisabledCardRightVariants}
|
||||
>
|
||||
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
|
||||
@@ -121,7 +121,7 @@ export const DocumentDropzone = ({
|
||||
// Non Disabled State
|
||||
<div className="flex">
|
||||
<motion.div
|
||||
className="a z-10 flex aspect-[3/4] w-24 origin-top-right -rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-documenso/80"
|
||||
className="a z-10 flex aspect-[3/4] w-24 origin-top-right flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-documenso/80"
|
||||
variants={DocumentDropzoneCardLeftVariants}
|
||||
>
|
||||
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
|
||||
@@ -135,7 +135,7 @@ export const DocumentDropzone = ({
|
||||
<Plus strokeWidth="2px" className="h-12 w-12 text-muted-foreground/20 group-hover:text-documenso" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="z-10 flex aspect-[3/4] w-24 origin-top-left rotate-[22deg] flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-documenso/80"
|
||||
className="z-10 flex aspect-[3/4] w-24 origin-top-left flex-col gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-documenso/80"
|
||||
variants={DocumentDropzoneCardRightVariants}
|
||||
>
|
||||
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
|
||||
|
||||
+158
-33
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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}'],
|
||||
};
|
||||
Reference in New Issue
Block a user