Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2026-07-24 08:54:20 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrade to tailwind@4

Browse Source
This commit is contained in:
Lucas Smith
2026-06-29 13:26:14 +10:00
parent 187b612568
commit b79895b38c
289 changed files with 1477 additions and 1941 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/email/package.json
+3 -1
View File
@@ -44,6 +44,8 @@
},
"devDependencies": {
"@documenso/tsconfig": "*",
"@types/nodemailer": "^8.0.0"
"@tailwindcss/postcss": "^4.3.1",
"@types/nodemailer": "^8.0.0",
"tailwindcss": "^4.3.1"
}
}
packages/email/preview/app/app.css
+4 -3
View File
@@ -1,6 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
/* v4 no longer auto-detects the JS config; load the standalone preview config. */
@config "../tailwind.config.cjs";
html,
body {
packages/email/preview/app/components/playground.tsx
+4 -7
View File
@@ -123,7 +123,7 @@ export const EmailPlayground = ({ slug, fields, defaultProps }: PlaygroundProps)
return (
<div className="flex h-screen w-screen overflow-hidden bg-neutral-100 font-sans text-neutral-900">
{/* Sidebar */}
<aside className="flex h-full w-60 flex-shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white">
<aside className="flex h-full w-60 shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white">
<div className="border-neutral-200 border-b px-4 py-3">
<h1 className="font-semibold text-sm">Email Preview</h1>
<p className="text-neutral-500 text-xs">{Object.keys(templates).length} templates</p>
@@ -154,7 +154,7 @@ export const EmailPlayground = ({ slug, fields, defaultProps }: PlaygroundProps)
</aside>
{/* Props panel */}
<section className="flex h-full w-72 flex-shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white px-4 py-3">
<section className="flex h-full w-72 shrink-0 flex-col overflow-y-auto border-neutral-200 border-r bg-white px-4 py-3">
<h2 className="mb-3 font-medium text-neutral-500 text-xs uppercase tracking-wide">Props</h2>
<PropFields fields={fields} values={props} onChange={handlePropChange} />
</section>
@@ -180,10 +180,7 @@ export const EmailPlayground = ({ slug, fields, defaultProps }: PlaygroundProps)
theme === 'dark' ? 'bg-neutral-800' : 'bg-neutral-200'
}`}
>
<div
className="flex-shrink-0 overflow-hidden rounded-lg bg-white shadow-lg"
style={{ width: viewport.width }}
>
<div className="shrink-0 overflow-hidden rounded-lg bg-white shadow-lg" style={{ width: viewport.width }}>
<iframe
title={`${viewport.name} ${theme}`}
srcDoc={displayHtml}
@@ -330,7 +327,7 @@ const ColorInput = (props: ColorInputProps) => {
type="color"
value={props.value}
onChange={(event) => props.onChange(event.target.value)}
className="h-6 w-6 cursor-pointer rounded border border-neutral-300 bg-white p-0"
className="h-6 w-6 cursor-pointer rounded-sm border border-neutral-300 bg-white p-0"
/>
</label>
);
packages/email/preview/app/components/prop-fields.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ type PropFieldProps = {
};
const inputClass =
'w-full rounded-md border border-neutral-300 bg-white px-2 py-1 text-neutral-900 text-xs focus:border-neutral-500 focus:outline-none';
'w-full rounded-md border border-neutral-300 bg-white px-2 py-1 text-neutral-900 text-xs focus:border-neutral-500 focus:outline-hidden';
const PropField = ({ name, field, value, onChange }: PropFieldProps) => {
const id = `prop-${name}`;
packages/email/preview/postcss.config.cjs
+3 -2
View File
@@ -1,6 +1,7 @@
module.exports = {
plugins: {
tailwindcss: { config: './tailwind.config.cjs' },
autoprefixer: {},
// The JS config is loaded via `@config` in app/app.css; v4 auto-prefixes,
// so autoprefixer is no longer needed.
'@tailwindcss/postcss': {},
},
};
packages/email/preview/vite.config.ts
+4 -3
View File
@@ -1,8 +1,7 @@
import path from 'node:path';
import { lingui } from '@lingui/vite-plugin';
import { reactRouter } from '@react-router/dev/vite';
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import tailwindcss from '@tailwindcss/postcss';
import { defineConfig } from 'vite';
import macrosPlugin from 'vite-plugin-babel-macros';
import { viteStaticCopy } from 'vite-plugin-static-copy';
@@ -19,7 +18,9 @@ export default defineConfig({
root: __dirname,
css: {
postcss: {
plugins: [tailwindcss(path.join(__dirname, 'tailwind.config.cjs')), autoprefixer],
// 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()],
},
},
server: {
packages/email/templates/access-auth-2fa.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const AccessAuth2FAEmailTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/admin-user-created.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const AdminUserCreatedTemplate = ({
<Preview>{_(previewText)}</Preview>
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<Img src={getAssetUrl('/static/logo.png')} alt="Documenso Logo" className="mb-4 h-6" />
packages/email/templates/bulk-send-complete.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const BulkSendCompleteEmail = ({
<Preview>{_(msg`Bulk send operation complete for template "${templateName}"`)}</Preview>
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<Text className="text-sm">
<Trans>Hi {userName},</Trans>
packages/email/templates/confirm-email.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const ConfirmEmailTemplate = ({
<Preview>{_(previewText)}</Preview>
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/confirm-team-email.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const ConfirmTeamEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/document-cancel.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const DocumentCancelTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-completed.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const DocumentCompletedEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<Section className="p-2">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-created-from-direct-template.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<Section className="p-2">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-invite.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export const DocumentInviteEmailTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-pending.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const DocumentPendingEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-recipient-signed.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export const DocumentRecipientSignedEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<Section className="p-2">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-rejected.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function DocumentRejectedEmail({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-rejection-confirmed.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function DocumentRejectionConfirmedEmail({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-reminder.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export const DocumentReminderEmailTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-self-signed.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const DocumentSelfSignedEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<Section className="p-2">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/document-super-delete.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const DocumentSuperDeleteEmailTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/forgot-password.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const ForgotPasswordTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/organisation-account-link-confirmation.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const OrganisationAccountLinkConfirmationTemplate = ({
<Preview>{_(previewText)}</Preview>
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-delete.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const OrganisationDeleteEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-invite.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const OrganisationInviteEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-join.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const OrganisationJoinEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-leave.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const OrganisationLeaveEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/organisation-limit-alert.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const OrganisationLimitAlertEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section className="p-2 text-muted-foreground">
packages/email/templates/recipient-expired.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export const RecipientExpiredTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/recipient-removed-from-document.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const RecipientRemovedFromDocumentTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/reset-password.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const ResetPasswordTemplate = ({
<Body className="mx-auto my-auto bg-background font-sans">
<Section>
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-4 backdrop-blur-xs">
<Section>
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6" />
packages/email/templates/team-delete.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const TeamDeleteEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid p-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/email/templates/team-email-removed.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const TeamEmailRemovedTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-background text-muted-foreground">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-sm">
<Container className="mx-auto mt-8 mb-2 max-w-xl rounded-lg border border-border border-solid px-2 pt-2 backdrop-blur-xs">
<TemplateBrandingLogo assetBaseUrl={assetBaseUrl} className="mb-4 h-6 p-2" />
<Section>
packages/tailwind-config/index.cjs
+5 -18
View File
@@ -1,10 +1,9 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const { fontFamily } = require('tailwindcss/defaultTheme');
const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette');
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['variant', '&:is(.dark:not(.dark-mode-disabled) *)'],
// `dark:` is driven by `@custom-variant dark` in theme.css; the JS `darkMode` key is ignored under v4.
content: ['src/**/*.{ts,tsx}'],
theme: {
extend: {
@@ -118,10 +117,6 @@ module.exports = {
pink: 'hsl(var(--recipient-pink))',
},
},
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)',
@@ -153,23 +148,15 @@ module.exports = {
'3xl': '1920px',
'4xl': '2560px',
'5xl': '3840px',
print: { raw: 'print' },
// `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'),
require('@tailwindcss/container-queries'),
addVariablesForColors,
// container-queries and the old `addVariablesForColors` plugin were dropped:
// the former is built into v4 core, the latter broke the themed `--*` color vars.
],
};
function addVariablesForColors({ addBase, theme }) {
const allColors = flattenColorPalette(theme('colors'));
const newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [`--${key}`, val]));
addBase({
':root': newVars,
});
}
packages/tailwind-config/package.json
+1 -3
View File
@@ -8,11 +8,9 @@
"clean": "rimraf node_modules"
},
"dependencies": {
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/typography": "^0.5.19",
"autoprefixer": "^10.4.22",
"postcss": "^8.5.14",
"tailwindcss": "^3.4.18",
"tailwindcss": "^4.3.1",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {},
packages/ui/components/common/copy-text-button.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ export const CopyTextButton = ({
<div
className={cn(
'flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-muted-foreground/10 hover:active:bg-muted-foreground/20',
'flex h-6 w-6 items-center justify-center rounded-sm transition-all hover:bg-muted-foreground/10 hover:active:bg-muted-foreground/20',
{
'ml-1': Boolean(badgeContentCopied || badgeContentUncopied),
},
packages/ui/components/common/local-time.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export const LocalTime = ({ date, className }: LocalTimeProps) => {
}}
onMouseLeave={onMouseLeave}
>
<div className="space-y-1.5 text-xs">
<div className="twv3-space-y-1.5 text-xs">
<TimeRow
label="Local"
value={local}
packages/ui/components/document/document-email-checkboxes.tsx
+10 -10
View File
@@ -20,7 +20,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
const isHidden = (event: DocumentEmailEvents) => hiddenEvents?.includes(event) ?? false;
return (
<div className={cn('space-y-3', className)}>
<div className={cn('twv3-space-y-3', className)}>
{!isHidden(DocumentEmailEvents.RecipientSigned) && (
<div className="flex flex-row items-center">
<Checkbox
@@ -43,7 +43,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Recipient signed email</Trans>
@@ -81,7 +81,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Recipient signing request email</Trans>
@@ -119,7 +119,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Recipient removed email</Trans>
@@ -157,7 +157,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document pending email</Trans>
@@ -198,7 +198,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document completed email</Trans>
@@ -236,7 +236,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document deleted email</Trans>
@@ -274,7 +274,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document completed email</Trans>
@@ -312,7 +312,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document created from direct template email</Trans>
@@ -353,7 +353,7 @@ export const DocumentEmailCheckboxes = ({ value, onChange, className, hiddenEven
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Recipient expired email</Trans>
packages/ui/components/document/document-global-auth-access-select.tsx
+2 -2
View File
@@ -72,7 +72,7 @@ export const DocumentGlobalAuthAccessTooltip = () => (
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document access</Trans>
@@ -87,7 +87,7 @@ export const DocumentGlobalAuthAccessTooltip = () => (
<Trans>Multiple access methods can be selected.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Require account</strong> - The recipient must be signed in to view the document
packages/ui/components/document/document-global-auth-action-select.tsx
+2 -2
View File
@@ -74,7 +74,7 @@ export const DocumentGlobalAuthActionTooltip = () => (
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<Trans>Global recipient action authentication</Trans>
</h2>
@@ -90,7 +90,7 @@ export const DocumentGlobalAuthActionTooltip = () => (
</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Require passkey</strong> - The recipient must have an account and passkey configured via their
packages/ui/components/document/document-read-only-fields.tsx
+1 -1
View File
@@ -151,7 +151,7 @@ export const DocumentReadOnlyFields = ({
</p>
<button
className="absolute top-0 right-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
className="absolute top-0 right-0 my-1 p-2 focus:outline-hidden focus-visible:ring-0"
onClick={() => handleHideField(field.secondaryId)}
title="Hide field"
>
packages/ui/components/document/document-send-email-message-helper.tsx
+9 -5
View File
@@ -9,15 +9,19 @@ export const DocumentSendEmailMessageHelper = () => {
<ul className="mt-2 flex list-inside list-disc flex-col gap-y-2 text-sm">
<li className="text-muted-foreground">
<code className="rounded bg-muted-foreground/20 p-1 text-muted-foreground text-sm">{'{signer.name}'}</code> -{' '}
<Trans>The signer's name</Trans>
<code className="rounded-sm bg-muted-foreground/20 p-1 text-muted-foreground text-sm">{'{signer.name}'}</code>{' '}
- <Trans>The signer's name</Trans>
</li>
<li className="text-muted-foreground">
<code className="rounded bg-muted-foreground/20 p-1 text-muted-foreground text-sm">{'{signer.email}'}</code> -{' '}
<Trans>The signer's email</Trans>
<code className="rounded-sm bg-muted-foreground/20 p-1 text-muted-foreground text-sm">
{'{signer.email}'}
</code>{' '}
- <Trans>The signer's email</Trans>
</li>
<li className="text-muted-foreground">
<code className="rounded bg-muted-foreground/20 p-1 text-muted-foreground text-sm">{'{document.name}'}</code>{' '}
<code className="rounded-sm bg-muted-foreground/20 p-1 text-muted-foreground text-sm">
{'{document.name}'}
</code>{' '}
- <Trans>The document's name</Trans>
</li>
</ul>
packages/ui/components/document/document-signature-settings-tooltip.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ export const DocumentSignatureSettingsTooltip = () => {
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Signature types</Trans>
@@ -20,7 +20,7 @@ export const DocumentSignatureSettingsTooltip = () => {
<Trans>The types of signatures that recipients are allowed to use when signing the document.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>
packages/ui/components/document/document-visibility-select.tsx
+2 -2
View File
@@ -54,7 +54,7 @@ export const DocumentVisibilityTooltip = () => {
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document visibility</Trans>
@@ -65,7 +65,7 @@ export const DocumentVisibilityTooltip = () => {
<Trans>The visibility of the document to the recipient.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Everyone</strong> - Everyone can access and view the document
packages/ui/components/document/envelope-recipient-field-tooltip.tsx
+1 -1
View File
@@ -180,7 +180,7 @@ export function EnvelopeRecipientFieldTooltip({
<p className="mt-1 text-center text-muted-foreground text-xs">{getRecipientDisplayText(field.recipient)}</p>
<button
className="absolute top-0 right-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
className="absolute top-0 right-0 my-1 p-2 focus:outline-hidden focus-visible:ring-0"
onClick={() => setHideField(true)}
title="Hide field"
>
packages/ui/components/recipient/recipient-action-auth-select.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ export const RecipientActionAuthSelect = ({
<Trans>These will override any global settings. Multiple methods can be selected.</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Inherit authentication method</strong> - Use the global action signing authentication method
packages/ui/components/template/template-type-select.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export const TemplateTypeTooltip = ({ organisationTeamCount }: { organisationTea
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<p>
<Trans>
<strong>Private</strong> templates can only be used by your team.
packages/ui/primitives/alert-dialog.tsx
+3 -3
View File
@@ -22,7 +22,7 @@ const AlertDialogOverlay = React.forwardRef<
>(({ className, children: _children, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
'fade-in fixed inset-0 z-50 animate-in bg-background/80 backdrop-blur-sm transition-opacity',
'fade-in fixed inset-0 z-50 animate-in bg-background/80 backdrop-blur-xs transition-opacity',
className,
)}
{...props}
@@ -52,13 +52,13 @@ const AlertDialogContent = React.forwardRef<
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
<div className={cn('twv3-space-y-2 flex flex-col text-center sm:text-left', className)} {...props} />
);
AlertDialogHeader.displayName = 'AlertDialogHeader';
const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
<div className={cn('sm:twv3-space-x-2 flex flex-col-reverse sm:flex-row sm:justify-end', className)} {...props} />
);
AlertDialogFooter.displayName = 'AlertDialogFooter';
packages/ui/primitives/alert.tsx
+6 -1
View File
@@ -32,7 +32,12 @@ const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, padding, ...props }, ref) => (
<div ref={ref} role="alert" className={cn('space-y-2', alertVariants({ variant, padding }), className)} {...props} />
<div
ref={ref}
role="alert"
className={cn('twv3-space-y-2', alertVariants({ variant, padding }), className)}
{...props}
/>
));
Alert.displayName = 'Alert';
packages/ui/primitives/button.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import * as React from 'react';
import { cn } from '../lib/utils';
const buttonVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
{
variants: {
variant: {
packages/ui/primitives/calendar.tsx
+4 -4
View File
@@ -13,18 +13,18 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
showOutsideDays={showOutsideDays}
className={cn('p-3', className)}
classNames={{
months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
month: 'space-y-4',
months: 'flex flex-col sm:flex-row twv3-space-y-4 sm:twv3-space-x-4 sm:twv3-space-y-0',
month: 'twv3-space-y-4',
caption: 'flex justify-center pt-1 relative items-center',
caption_label: 'text-sm font-medium',
nav: 'space-x-1 flex items-center',
nav: 'twv3-space-x-1 flex items-center',
nav_button: cn(
buttonVariants({ variant: 'outline' }),
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
),
nav_button_previous: 'absolute left-1',
nav_button_next: 'absolute right-1',
table: 'w-full border-collapse space-y-1',
table: 'w-full border-collapse twv3-space-y-1',
head_row: 'flex',
head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
row: 'flex w-full mt-2',
packages/ui/primitives/card.tsx
+2 -2
View File
@@ -34,7 +34,7 @@ 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_var(colors.primary.DEFAULT/70%)]': true,
'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,
@@ -51,7 +51,7 @@ Card.displayName = 'Card';
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
<div ref={ref} className={cn('twv3-space-y-1.5 flex flex-col p-6', className)} {...props} />
),
);
packages/ui/primitives/checkbox.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root
ref={ref}
className={cn(
'peer h-4 w-4 shrink-0 rounded-sm border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary',
'peer h-4 w-4 shrink-0 rounded-xs border border-input bg-background ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary',
className,
)}
{...props}
packages/ui/primitives/color-picker.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export const ColorPicker = ({
disabled={disabled}
className="h-12 w-12 rounded-md border bg-background p-1 disabled:pointer-events-none disabled:opacity-50"
>
<div className="h-full w-full rounded-sm" style={{ backgroundColor: color }} />
<div className="h-full w-full rounded-xs" style={{ backgroundColor: color }} />
</button>
</PopoverTrigger>
packages/ui/primitives/command.tsx
+4 -4
View File
@@ -62,7 +62,7 @@ const CommandInput = React.forwardRef<
<CommandPrimitive.Input
ref={ref}
className={cn(
'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-foreground-muted disabled:cursor-not-allowed disabled:opacity-50',
'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-foreground-muted disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
@@ -80,10 +80,10 @@ const CommandTextInput = React.forwardRef<
<CommandPrimitive.Input
ref={ref}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
{
'!ring-destructive ring-2 transition-all': props['aria-invalid'],
'ring-2 ring-destructive! transition-all': props['aria-invalid'],
},
)}
{...props}
@@ -145,7 +145,7 @@ const CommandItem = React.forwardRef<
<CommandPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/context-menu.tsx
+4 -4
View File
@@ -25,7 +25,7 @@ const ContextMenuSubTrigger = React.forwardRef<
<ContextMenuPrimitive.SubTrigger
ref={ref}
className={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
inset && 'pl-8',
className,
)}
@@ -81,7 +81,7 @@ const ContextMenuItem = React.forwardRef<
<ContextMenuPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
className,
)}
@@ -98,7 +98,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
<ContextMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
checked={checked}
@@ -122,7 +122,7 @@ const ContextMenuRadioItem = React.forwardRef<
<ContextMenuPrimitive.RadioItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/dialog.tsx
+4 -4
View File
@@ -38,7 +38,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
'data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out',
'data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 bg-background/80 backdrop-blur-xs transition-all duration-100 data-[state=closed]:animate-out',
className,
)}
{...props}
@@ -74,7 +74,7 @@ const DialogContent = React.forwardRef<
{!hideClose && (
<DialogPrimitive.Close
data-testid="btn-dialog-close"
className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
>
<X className="h-4 w-4" />
<span className="sr-only">
@@ -89,7 +89,7 @@ const DialogContent = React.forwardRef<
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
<div className={cn('twv3-space-y-1.5 flex flex-col text-center sm:text-left', className)} {...props} />
);
DialogHeader.displayName = 'DialogHeader';
@@ -97,7 +97,7 @@ DialogHeader.displayName = 'DialogHeader';
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
'flex flex-col-reverse space-y-2 space-y-reverse sm:flex-row sm:justify-end sm:space-x-2 sm:space-y-0',
'twv3-space-y-2 twv3-space-y-reverse sm:twv3-space-x-2 sm:twv3-space-y-0 flex flex-col-reverse sm:flex-row sm:justify-end',
className,
)}
{...props}
packages/ui/primitives/document-dropzone.tsx
+7 -7
View File
@@ -78,7 +78,7 @@ export const DocumentDropzone = ({
<Card
role="button"
className={cn(
'group flex flex-1 cursor-pointer flex-col items-center justify-center ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'group flex flex-1 cursor-pointer flex-col items-center justify-center ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
className,
)}
gradient={!disabled}
@@ -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-sm group-hover:border-destructive/10 group-hover:bg-destructive/2"
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"
variants={DocumentDropzoneDisabledCardLeftVariants}
>
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
@@ -100,7 +100,7 @@ export const DocumentDropzone = ({
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/10 group-hover:bg-destructive/10" />
</motion.div>
<motion.div
className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-destructive/50 group-hover:bg-destructive/5"
className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-xs group-hover:border-destructive/50 group-hover:bg-destructive/5"
variants={DocumentDropzoneDisabledCardCenterVariants}
>
<AlertTriangle
@@ -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-sm group-hover:border-destructive/10 group-hover:bg-destructive/2"
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"
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-sm group-hover:border-documenso/80"
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"
variants={DocumentDropzoneCardLeftVariants}
>
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
@@ -129,13 +129,13 @@ export const DocumentDropzone = ({
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
</motion.div>
<motion.div
className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center gap-y-1 rounded-lg border border-muted-foreground/20 bg-background/80 px-2 py-4 backdrop-blur-sm group-hover:border-documenso/80"
className="z-20 flex aspect-[3/4] w-24 flex-col items-center justify-center 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={DocumentDropzoneCardCenterVariants}
>
<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-sm group-hover:border-documenso/80"
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"
variants={DocumentDropzoneCardRightVariants}
>
<div className="h-2 w-full rounded-[2px] bg-muted-foreground/20 group-hover:bg-documenso" />
packages/ui/primitives/document-flow/add-settings.tsx
+4 -4
View File
@@ -173,7 +173,7 @@ export const AddSettingsFormPartial = ({
)}
<Form {...form}>
<fieldset className="flex h-full flex-col space-y-6" disabled={form.formState.isSubmitting}>
<fieldset className="twv3-space-y-6 flex h-full flex-col" disabled={form.formState.isSubmitting}>
<FormField
control={form.control}
name="title"
@@ -209,7 +209,7 @@ export const AddSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<Trans>
Controls the language for the document, including the language to be used for email
notifications, and the final certificate that is generated and attached to the document.
@@ -327,12 +327,12 @@ export const AddSettingsFormPartial = ({
<Accordion type="multiple" className="mt-6">
<AccordionItem value="advanced-options" className="border-none">
<AccordionTrigger className="mb-2 rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<AccordionTrigger className="mb-2 rounded-sm border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<Trans>Advanced Options</Trans>
</AccordionTrigger>
<AccordionContent className="-mx-1 px-1 pt-2 text-muted-foreground text-sm leading-relaxed">
<div className="flex flex-col space-y-6">
<div className="twv3-space-y-6 flex flex-col">
<FormField
control={form.control}
name="externalId"
packages/ui/primitives/document-flow/add-signers.tsx
+5 -5
View File
@@ -524,7 +524,7 @@ export const AddSignersFormPartial = ({
control={form.control}
name="signingOrder"
render={({ field }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -581,7 +581,7 @@ export const AddSignersFormPartial = ({
control={form.control}
name="allowDictateNextSigner"
render={({ field: { value, ...field } }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -669,13 +669,13 @@ export const AddSignersFormPartial = ({
name={`signers.${index}.signingOrder`}
render={({ field }) => (
<FormItem
className={cn('col-span-2 mt-auto flex items-center gap-x-1 space-y-0', {
className={cn('twv3-space-y-0 col-span-2 mt-auto flex items-center gap-x-1', {
'mb-6':
form.formState.errors.signers?.[index] &&
!form.formState.errors.signers[index]?.signingOrder,
})}
>
<GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
<GripVerticalIcon className="h-5 w-5 shrink-0 opacity-40" />
<FormControl>
<Input
type="number"
@@ -906,7 +906,7 @@ export const AddSignersFormPartial = ({
/>
<div
className={cn('mt-2 flex flex-row items-center space-x-4', {
className={cn('twv3-space-x-4 mt-2 flex flex-row items-center', {
'mt-4': showAdvancedSettings,
})}
>
packages/ui/primitives/document-flow/document-flow-root.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export const DocumentFlowFormContainerFooter = ({
...props
}: DocumentFlowFormContainerFooterProps) => {
return (
<div className={cn('mt-4 flex-shrink-0', className)} {...props}>
<div className={cn('mt-4 shrink-0', className)} {...props}>
{children}
</div>
);
packages/ui/primitives/document-flow/field-content.tsx
+2 -2
View File
@@ -175,8 +175,8 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
className={cn(
'w-full whitespace-pre-wrap text-left text-[clamp(0.07rem,25cqw,0.825rem)] text-foreground duration-200',
{
'!text-center': textAlign === 'center' || !textToDisplay,
'!text-right': textAlign === 'right',
'text-center!': textAlign === 'center' || !textToDisplay,
'text-right!': textAlign === 'right',
'font-signature text-[clamp(0.07rem,25cqw,1.125rem)]': isSignatureField,
},
)}
packages/ui/primitives/document-flow/field-item.tsx
+6 -6
View File
@@ -315,7 +315,7 @@ const FieldItemInner = ({
'flex h-5 w-5 flex-col items-center justify-center rounded-r-md font-bold text-[0.5rem] text-white opacity-0 transition duration-200 group-hover/field-item:opacity-100',
signerStyles.fieldItemInitials,
{
'!opacity-50': disabled || passive,
'opacity-50!': disabled || passive,
},
)}
>
@@ -324,7 +324,7 @@ const FieldItemInner = ({
</div>
{isDevMode && (
<div className="absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-sm backdrop-blur-sm">
<div className="absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-xs backdrop-blur-xs">
<div className="flex flex-col gap-0.5 text-[9px]">
{field.nativeId && (
<span>
@@ -375,7 +375,7 @@ const FieldItemInner = ({
{advancedField && (
<button
title={_(msg`Advanced settings`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onAdvancedSettings}
onTouchEnd={onAdvancedSettings}
>
@@ -385,7 +385,7 @@ const FieldItemInner = ({
<button
title={_(msg`Duplicate`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onDuplicate}
onTouchEnd={onDuplicate}
>
@@ -394,7 +394,7 @@ const FieldItemInner = ({
<button
title={_(msg`Duplicate on all pages`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onDuplicateAllPages}
onTouchEnd={onDuplicateAllPages}
>
@@ -403,7 +403,7 @@ const FieldItemInner = ({
<button
title={_(msg`Remove`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onRemove}
onTouchEnd={onRemove}
>
packages/ui/primitives/dropdown-menu.tsx
+4 -4
View File
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
inset && 'pl-8',
className,
)}
@@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
className,
)}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/form/form.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn('space-y-2', className)} {...props} />
<div ref={ref} className={cn('twv3-space-y-2', className)} {...props} />
</FormItemContext.Provider>
);
},
packages/ui/primitives/hover-card.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const HoverCardContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
'zoom-in-90 z-50 w-64 animate-in rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
'zoom-in-90 z-50 w-64 animate-in rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden',
className,
)}
{...props}
packages/ui/primitives/input.tsx
+2 -2
View File
@@ -9,10 +9,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground/40 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
className,
{
'!ring-destructive ring-2 transition-all': props['aria-invalid'],
'ring-2 ring-destructive! transition-all': props['aria-invalid'],
},
)}
ref={ref}
packages/ui/primitives/menubar.tsx
+6 -6
View File
@@ -20,7 +20,7 @@ const Menubar = React.forwardRef<
>(({ className, ...props }, ref) => (
<MenubarPrimitive.Root
ref={ref}
className={cn('flex h-10 items-center space-x-1 rounded-md border bg-background p-1', className)}
className={cn('twv3-space-x-1 flex h-10 items-center rounded-md border bg-background p-1', className)}
{...props}
/>
));
@@ -34,7 +34,7 @@ const MenubarTrigger = React.forwardRef<
<MenubarPrimitive.Trigger
ref={ref}
className={cn(
'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 font-medium text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
'flex cursor-default select-none items-center rounded-xs px-3 py-1.5 font-medium text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
className,
)}
{...props}
@@ -52,7 +52,7 @@ const MenubarSubTrigger = React.forwardRef<
<MenubarPrimitive.SubTrigger
ref={ref}
className={cn(
'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
'flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
inset && 'pl-8',
className,
)}
@@ -111,7 +111,7 @@ const MenubarItem = React.forwardRef<
<MenubarPrimitive.Item
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
inset && 'pl-8',
className,
)}
@@ -128,7 +128,7 @@ const MenubarCheckboxItem = React.forwardRef<
<MenubarPrimitive.CheckboxItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
checked={checked}
@@ -152,7 +152,7 @@ const MenubarRadioItem = React.forwardRef<
<MenubarPrimitive.RadioItem
ref={ref}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/multiselect.tsx
+5 -5
View File
@@ -402,7 +402,7 @@ const MultiSelect = ({
>
<div
className={cn(
'relative min-h-[38px] rounded-md border border-input text-sm outline-none transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
'relative min-h-[38px] rounded-md border border-input text-sm outline-hidden transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-aria-invalid:border-destructive has-disabled:opacity-50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
{
'p-1': selected.length !== 0,
'cursor-text': !disabled && selected.length !== 0,
@@ -431,7 +431,7 @@ const MultiSelect = ({
>
{option.label}
<button
className="absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-md border border-transparent p-0 text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
className="absolute -inset-y-px -end-px flex size-7 items-center justify-center rounded-e-md border border-transparent p-0 text-muted-foreground/80 outline-hidden transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
onKeyDown={(e) => {
if (e.key === 'Enter') {
handleUnselect(option);
@@ -474,7 +474,7 @@ const MultiSelect = ({
}}
placeholder={hidePlaceholderWhenSelected && selected.length !== 0 ? '' : placeholder}
className={cn(
'flex-1 bg-transparent outline-none placeholder:text-muted-foreground/70 disabled:cursor-not-allowed',
'flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground/70 disabled:cursor-not-allowed',
{
'w-full': hidePlaceholderWhenSelected,
'px-3 py-2': selected.length === 0,
@@ -490,7 +490,7 @@ const MultiSelect = ({
onChange?.(selected.filter((s) => s.fixed));
}}
className={cn(
'absolute end-0 top-0 flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
'absolute end-0 top-0 flex size-9 items-center justify-center rounded-md border border-transparent text-muted-foreground/80 outline-hidden transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
(hideClearAllButton ||
disabled ||
selected.length < 1 ||
@@ -514,7 +514,7 @@ const MultiSelect = ({
>
{open && (
<CommandList
className="bg-popover text-popover-foreground shadow-lg outline-none"
className="bg-popover text-popover-foreground shadow-lg outline-hidden"
onMouseLeave={() => {
setOnScrollbar(false);
}}
packages/ui/primitives/navigation-menu.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ const NavigationMenuList = React.forwardRef<
>(({ className, ...props }, ref) => (
<NavigationMenuPrimitive.List
ref={ref}
className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
className={cn('group twv3-space-x-1 flex flex-1 list-none items-center justify-center', className)}
{...props}
/>
));
@@ -37,7 +37,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
const NavigationMenuItem = NavigationMenuPrimitive.Item;
const navigationMenuTriggerStyle = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:bg-accent focus:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none bg-background hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent/50 data-[active]:bg-accent/50 h-10 py-2 px-4 group w-max',
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-hidden focus:bg-accent focus:text-accent-foreground disabled:opacity-50 disabled:pointer-events-none bg-background hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent/50 data-[active]:bg-accent/50 h-10 py-2 px-4 group w-max',
);
const NavigationMenuTrigger = React.forwardRef<
packages/ui/primitives/pin-input.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ const PinInputSlot = React.forwardRef<
<div
ref={ref}
className={cn(
'relative flex h-10 w-10 items-center justify-center border-input border-y border-r font-mono shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
'relative flex h-10 w-10 items-center justify-center border-input border-y border-r font-mono shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md',
isActive && 'z-10 ring-1 ring-ring',
className,
)}
packages/ui/primitives/popover.tsx
+2 -2
View File
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 animate-in rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 animate-in rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden',
className,
)}
{...props}
@@ -73,7 +73,7 @@ const PopoverHover = ({ trigger, children, contentProps, side = 'top' }: Popover
return (
<Popover open={open} onOpenChange={onOpenChange}>
<PopoverTrigger
className="flex cursor-pointer outline-none"
className="flex cursor-pointer outline-hidden"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
packages/ui/primitives/radio-group.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow-sm focus:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
packages/ui/primitives/recipient-selector.tsx
+1 -1
View File
@@ -155,7 +155,7 @@ export const RecipientSelector = ({
{recipient.sendStatus !== SendStatus.SENT ? (
<Check
aria-hidden={recipient.id !== selectedRecipient?.id}
className={cn('h-4 w-4 flex-shrink-0', {
className={cn('h-4 w-4 shrink-0', {
'opacity-0': recipient.id !== selectedRecipient?.id,
'opacity-100': recipient.id === selectedRecipient?.id,
})}
packages/ui/primitives/select.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
disabled={loading || props.disabled}
@@ -93,7 +93,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
packages/ui/primitives/sheet.tsx
+4 -4
View File
@@ -39,7 +39,7 @@ const SheetOverlay = React.forwardRef<
>(({ className, children: _children, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
'data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-[61] bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out',
'data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-[61] bg-background/80 backdrop-blur-xs transition-all duration-100 data-[state=closed]:animate-out',
className,
)}
{...props}
@@ -147,7 +147,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
{showOverlay && <SheetOverlay className={sheetClass} />}
<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ position, size }), className)} {...props}>
{children}
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<span className="sr-only">
<Trans>Close</Trans>
@@ -161,13 +161,13 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
SheetContent.displayName = SheetPrimitive.Content.displayName;
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
<div className={cn('twv3-space-y-2 flex flex-col text-center sm:text-left', className)} {...props} />
);
SheetHeader.displayName = 'SheetHeader';
const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
<div className={cn('sm:twv3-space-x-2 flex flex-col-reverse sm:flex-row sm:justify-end', className)} {...props} />
);
SheetFooter.displayName = 'SheetFooter';
packages/ui/primitives/signature-pad/signature-pad-color-picker.tsx
+4 -4
View File
@@ -24,28 +24,28 @@ export const SignaturePadColorPicker = ({
<SelectContent className="w-[100px]" align="end">
<SelectItem value="black">
<div className="flex items-center text-[0.688rem] text-muted-foreground">
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-black shadow-sm" />
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-black shadow-xs" />
<Trans>Black</Trans>
</div>
</SelectItem>
<SelectItem value="red">
<div className="flex items-center text-[0.688rem] text-muted-foreground">
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[red] shadow-sm" />
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[red] shadow-xs" />
<Trans>Red</Trans>
</div>
</SelectItem>
<SelectItem value="blue">
<div className="flex items-center text-[0.688rem] text-muted-foreground">
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[blue] shadow-sm" />
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[blue] shadow-xs" />
<Trans>Blue</Trans>
</div>
</SelectItem>
<SelectItem value="green">
<div className="flex items-center text-[0.688rem] text-muted-foreground">
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[green] shadow-sm" />
<div className="mr-1 h-4 w-4 rounded-full border-2 border-border bg-[green] shadow-xs" />
<Trans>Green</Trans>
</div>
</SelectItem>
packages/ui/primitives/signature-pad/signature-pad-draw.tsx
+2 -2
View File
@@ -281,7 +281,7 @@ export const SignaturePadDraw = ({ className, value, onChange, ...props }: Signa
<div className="absolute right-3 bottom-3 flex gap-2">
<button
type="button"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => onClearClick()}
>
<Trans>Clear Signature</Trans>
@@ -301,7 +301,7 @@ export const SignaturePadDraw = ({ className, value, onChange, ...props }: Signa
<button
type="button"
title="undo"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
onClick={onUndoClick}
>
<Undo2 className="h-4 w-4" />
packages/ui/primitives/signature-pad/signature-pad-type.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const SignaturePadType = ({ className, value, defaultValue, onChange }: S
<input
data-testid="signature-pad-type-input"
placeholder={t`Type your signature`}
className="w-full bg-transparent px-4 text-center font-signature text-7xl text-foreground placeholder:text-4xl focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
className="w-full bg-transparent px-4 text-center font-signature text-7xl text-foreground placeholder:text-4xl focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-offset-0"
// style={{ color: selectedColor }}
value={value}
onChange={(event) => {
packages/ui/primitives/signature-pad/signature-tabs.tsx
+1 -1
View File
@@ -84,7 +84,7 @@ export function TabsTrigger({ value, icon, children, className, ...props }: Tabs
onClick={() => onValueChange(value)}
className={cn(
'relative flex items-center px-4 py-3 font-medium text-sm transition-all',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
isSelected ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
className,
)}
packages/ui/primitives/slider.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ const Slider = React.forwardRef<
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
<SliderPrimitive.Range className="absolute h-full bg-primary" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
</SliderPrimitive.Root>
));
packages/ui/primitives/switch.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
className,
)}
{...props}
packages/ui/primitives/tabs.tsx
+2 -2
View File
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
<TabsPrimitive.Trigger
ref={ref}
className={cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-medium text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
'inline-flex items-center justify-center whitespace-nowrap rounded-xs px-3 py-1.5 font-medium text-sm ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
className,
)}
{...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
<TabsPrimitive.Content
ref={ref}
className={cn(
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
className,
)}
{...props}
packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+5 -5
View File
@@ -439,7 +439,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
control={form.control}
name="signingOrder"
render={({ field }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -481,7 +481,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
control={form.control}
name="allowDictateNextSigner"
render={({ field: { value, ...field } }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -570,8 +570,8 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
control={form.control}
name={`signers.${index}.signingOrder`}
render={({ field }) => (
<FormItem className="col-span-2 mt-auto flex items-center gap-x-1 space-y-0">
<GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
<FormItem className="twv3-space-y-0 col-span-2 mt-auto flex items-center gap-x-1">
<GripVerticalIcon className="h-5 w-5 shrink-0 opacity-40" />
<FormControl>
<Input
type="number"
@@ -772,7 +772,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
/>
<div
className={cn('mt-2 flex flex-row items-center space-x-4', {
className={cn('twv3-space-x-4 mt-2 flex flex-row items-center', {
'mt-4': showAdvancedSettings,
})}
>
packages/ui/primitives/template-flow/add-template-settings.tsx
+8 -8
View File
@@ -183,7 +183,7 @@ export const AddTemplateSettingsFormPartial = ({
)}
<Form {...form}>
<fieldset className="flex h-full flex-col space-y-6" disabled={form.formState.isSubmitting}>
<fieldset className="twv3-space-y-6 flex h-full flex-col" disabled={form.formState.isSubmitting}>
<FormField
control={form.control}
name="title"
@@ -213,7 +213,7 @@ export const AddTemplateSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
Controls the language for the document, including the language to be used for email
notifications, and the final certificate that is generated and attached to the document.
</TooltipContent>
@@ -333,7 +333,7 @@ export const AddTemplateSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<h2>
<strong>
<Trans>Document Distribution Method</Trans>
@@ -346,7 +346,7 @@ export const AddTemplateSettingsFormPartial = ({
</Trans>
</p>
<ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
<ul className="twv3-space-y-0.5 ml-3.5 list-outside list-disc py-2">
<li>
<Trans>
<strong>Email</strong> - The recipient will be emailed the document to sign, approve, etc.
@@ -454,12 +454,12 @@ export const AddTemplateSettingsFormPartial = ({
{distributionMethod === DocumentDistributionMethod.EMAIL && (
<Accordion type="multiple">
<AccordionItem value="email-options" className="border-none">
<AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<AccordionTrigger className="rounded-sm border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<Trans>Email Options</Trans>
</AccordionTrigger>
<AccordionContent className="-mx-1 px-1 pt-4 text-muted-foreground text-sm leading-relaxed [&>div]:pb-0">
<div className="flex flex-col space-y-6">
<div className="twv3-space-y-6 flex flex-col">
{organisation.organisationClaim.flags.emailDomains && (
<FormField
control={form.control}
@@ -588,12 +588,12 @@ export const AddTemplateSettingsFormPartial = ({
<Accordion type="multiple">
<AccordionItem value="advanced-options" className="border-none">
<AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<AccordionTrigger className="rounded-sm border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<Trans>Advanced Options</Trans>
</AccordionTrigger>
<AccordionContent className="-mx-1 px-1 pt-4 text-muted-foreground text-sm leading-relaxed">
<div className="flex flex-col space-y-6">
<div className="twv3-space-y-6 flex flex-col">
<FormField
control={form.control}
name="externalId"
packages/ui/primitives/textarea.tsx
+2 -2
View File
@@ -8,10 +8,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
return (
<textarea
className={cn(
'flex h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground/40 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
{
'!ring-destructive ring-2 transition-all': props['aria-invalid'],
'ring-2 ring-destructive! transition-all': props['aria-invalid'],
},
)}
ref={ref}
packages/ui/primitives/toast.tsx
+3 -3
View File
@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
const toastVariants = cva(
'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full',
'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between twv3-space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full',
{
variants: {
variant: {
@@ -55,7 +55,7 @@ const ToastAction = React.forwardRef<
<ToastPrimitives.Action
ref={ref}
className={cn(
'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',
'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',
className,
)}
{...props}
@@ -72,7 +72,7 @@ const ToastClose = React.forwardRef<
ref={ref}
data-testid="toast-close"
className={cn(
'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-100 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50 md:opacity-0 group-hover:md:opacity-100',
'absolute top-2 right-2 rounded-md p-1 text-foreground/50 opacity-100 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50 md:opacity-0 group-hover:md:opacity-100',
className,
)}
toast-close=""
packages/ui/primitives/toggle.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import * as React from 'react';
import { cn } from '../lib/utils';
const toggleVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground',
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background hover:bg-muted hover:text-muted-foreground',
{
variants: {
variant: {
packages/ui/styles/theme.css
+76 -8
View File
@@ -1,6 +1,65 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* biome-ignore-all lint/suspicious/noDuplicateProperties: twv3-space-* lists both --value(number) and --value([length]) forms; v4 keeps only one per class. */
@import "tailwindcss";
@config "../tailwind.config.cjs";
@custom-variant dark (&:is(.dark:not(.dark-mode-disabled) *));
/* `print:` variant; defining it as a JS `screen` breaks the `container` utility under v4. */
@custom-variant print (@media print);
/* Safelist for the runtime recipient color classes (v4 ignores the JS config `safelist`). */
@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}");
/* Restore the v3 `ring` defaults (v4 changed them to 1px / currentColor). */
@theme {
--default-ring-width: 3px;
--default-ring-color: hsl(var(--ring));
}
/*
* 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 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));
}
}
/* 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;
}
}
@utility twv3-space-x-reverse {
& > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 1;
}
}
@layer base {
:root,
@@ -193,6 +252,17 @@
@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:
@@ -209,11 +279,9 @@
* - Sets page size to A4
* - Sets the font size to 12pt
*/
.print-provider {
@page {
margin: 1in;
size: A4;
}
@page {
margin: 1in;
size: A4;
}
.gradient-border-mask::before {
packages/ui/tailwind.config.cjs
+1 -2
View File
@@ -1,9 +1,8 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const baseConfig = require('@documenso/tailwind-config');
const { RECIPIENT_DYNAMIC_CLASS } = require('./lib/recipient-colors');
// 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}'],
safelist: [RECIPIENT_DYNAMIC_CLASS],
};