158 lines
4.0 KiB
CSS
158 lines
4.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
/* Dify / Untitled UI palette */
|
|
--color-bg-primary: #ffffff;
|
|
--color-bg-secondary: #f9fafb;
|
|
--color-bg-tertiary: #f2f4f7;
|
|
--color-bg-section: #f6f7f9;
|
|
|
|
--color-text-primary: #101828;
|
|
--color-text-secondary: #354052;
|
|
--color-text-tertiary: #676f83;
|
|
--color-text-quaternary: #98a2b2;
|
|
--color-text-disabled: #d0d5dc;
|
|
|
|
--color-border-subtle: rgb(16 24 40 / 0.04);
|
|
--color-border-default: rgb(16 24 40 / 0.08);
|
|
--color-border-hover: rgb(16 24 40 / 0.14);
|
|
--color-border-strong: #d0d5dc;
|
|
|
|
--color-card: #ffffff;
|
|
--color-card-hover: #f9fafb;
|
|
|
|
/* Dify primary blue */
|
|
--color-primary-50: #eff4ff;
|
|
--color-primary-100: #d1e0ff;
|
|
--color-primary-200: #b2caff;
|
|
--color-primary-500: #2970ff;
|
|
--color-primary-600: #155aef;
|
|
--color-primary-700: #004aeb;
|
|
--color-primary-800: #00359e;
|
|
|
|
--color-primary: var(--color-primary-600);
|
|
--color-primary-hover: var(--color-primary-700);
|
|
--color-primary-foreground: #ffffff;
|
|
|
|
/* Accent palette for tile icons (also re-declared in :root below so
|
|
Tailwind v4 doesn't tree-shake them — they're only used via inline
|
|
style in tile.tsx, which Tailwind's purger can't see). */
|
|
--color-accent-blue: #155aef;
|
|
--color-accent-indigo: #444ce7;
|
|
--color-accent-violet: #7a5af8;
|
|
--color-accent-cyan: #0ba5ec;
|
|
--color-accent-emerald: #17b26a;
|
|
--color-accent-amber: #f79009;
|
|
--color-accent-rose: #f04438;
|
|
--color-accent-gray: #475467;
|
|
--color-accent-teal: #15b79e;
|
|
|
|
--color-destructive: #d92d20;
|
|
--color-destructive-bg: #fef3f2;
|
|
--color-destructive-border: #fda29b;
|
|
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
|
|
--shadow-card: 0 1px 2px rgb(16 24 40 / 0.05);
|
|
--shadow-card-hover: 0 12px 24px -8px rgb(16 24 40 / 0.12), 0 4px 8px -4px rgb(16 24 40 / 0.06);
|
|
|
|
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
|
|
}
|
|
|
|
/* Re-declare accents in :root so they survive Tailwind v4's purge of unused
|
|
@theme variables. Used by inline styles in tile.tsx (color-mix). */
|
|
:root {
|
|
--color-accent-blue: #155aef;
|
|
--color-accent-indigo: #444ce7;
|
|
--color-accent-violet: #7a5af8;
|
|
--color-accent-cyan: #0ba5ec;
|
|
--color-accent-emerald: #17b26a;
|
|
--color-accent-amber: #f79009;
|
|
--color-accent-rose: #f04438;
|
|
--color-accent-gray: #475467;
|
|
--color-accent-teal: #15b79e;
|
|
}
|
|
|
|
.dark {
|
|
--color-bg-primary: #14181f;
|
|
--color-bg-secondary: #1a1f29;
|
|
--color-bg-tertiary: #232936;
|
|
--color-bg-section: #181d26;
|
|
|
|
--color-text-primary: #f5f7fa;
|
|
--color-text-secondary: #c8ccd5;
|
|
--color-text-tertiary: #98a2b2;
|
|
--color-text-quaternary: #676f83;
|
|
--color-text-disabled: #4a525e;
|
|
|
|
--color-border-subtle: rgb(255 255 255 / 0.05);
|
|
--color-border-default: rgb(255 255 255 / 0.08);
|
|
--color-border-hover: rgb(255 255 255 / 0.14);
|
|
--color-border-strong: #354052;
|
|
|
|
--color-card: #1a1f29;
|
|
--color-card-hover: #232936;
|
|
|
|
--color-primary: var(--color-primary-500);
|
|
--color-primary-hover: #4187ff;
|
|
|
|
--shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
|
|
--shadow-card-hover: 0 12px 24px -8px rgb(0 0 0 / 0.5), 0 4px 8px -4px rgb(0 0 0 / 0.3);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-bg-secondary);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Dify-style typography utilities */
|
|
.system-2xs-medium-uppercase {
|
|
font-size: 10px;
|
|
line-height: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
.system-xs-regular {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
font-weight: 400;
|
|
}
|
|
.system-xs-medium {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
font-weight: 500;
|
|
}
|
|
.system-sm-medium {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-weight: 500;
|
|
}
|
|
.system-sm-semibold {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Scrollbar polish */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
scrollbar-width: none;
|
|
}
|