mirror of
https://github.com/documenso/documenso.git
synced 2025-11-13 00:03:33 +10:00
b15e1d6c47
## Description Adds support for customising the theme and CSS for the embedding components which is restricted to platform customers and above. Additionally adds proper support for the platform plan which will let us update our stripe products. <img width="1040" alt="image" src="https://github.com/user-attachments/assets/f694cd1e-ac93-4dc0-9f78-92fa813f6404"> <img width="1015" alt="image" src="https://github.com/user-attachments/assets/4209972a-b2bd-40c9-9049-0367382a4de5"> <img width="1065" alt="image" src="https://github.com/user-attachments/assets/fdbaaaa5-a028-4b1d-a58a-ea6224e21abe"> ## Related Issue N/A ## Changes Made - Added support for using CSS Vars and CSS within the embedding route - Added a guard for platform and enterprise plans to activate the custom css - Added support for the platform plan ## Testing Performed Yes
151 lines
4.3 KiB
JavaScript
151 lines
4.3 KiB
JavaScript
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
const { fontFamily } = require('tailwindcss/defaultTheme');
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: ['class'],
|
|
content: ['src/**/*.{ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['var(--font-sans)', ...fontFamily.sans],
|
|
signature: ['var(--font-signature)'],
|
|
},
|
|
zIndex: {
|
|
9999: '9999',
|
|
},
|
|
colors: {
|
|
border: 'hsl(var(--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))',
|
|
},
|
|
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',
|
|
},
|
|
},
|
|
backgroundImage: {
|
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
},
|
|
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: { raw: 'print' },
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('tailwindcss-animate'),
|
|
require('@tailwindcss/typography'),
|
|
require('@tailwindcss/container-queries'),
|
|
],
|
|
};
|