dapa46
0f38d8d588
Includes deep-agents-ui integration, rework detection via Gitea, tool-call sanitization fixes, and startup scripts.
489 lines
15 KiB
JavaScript
489 lines
15 KiB
JavaScript
import { blackA, green, mauve, slate, violet } from "@radix-ui/colors";
|
|
import plugin from "tailwindcss/plugin";
|
|
import containerQueries from "@tailwindcss/container-queries";
|
|
import typography from "@tailwindcss/typography";
|
|
import forms from "@tailwindcss/forms";
|
|
import tailwindcssAnimate from "tailwindcss-animate";
|
|
import headlessui from "@headlessui/tailwindcss";
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
|
darkMode: ["class", '[data-joy-color-scheme="dark"]'],
|
|
theme: {
|
|
extend: {
|
|
fontSize: {
|
|
xxs: [
|
|
"0.75rem", // 12px
|
|
{
|
|
lineHeight: "1.125rem", // 18px
|
|
},
|
|
],
|
|
xs: [
|
|
"0.8125rem", // 13px
|
|
{
|
|
lineHeight: "1.125rem", // 18px
|
|
},
|
|
],
|
|
sm: [
|
|
"0.875rem", // 14px
|
|
{
|
|
lineHeight: "1.25rem", // 20px
|
|
},
|
|
],
|
|
base: [
|
|
"1rem", // 16px
|
|
{
|
|
lineHeight: "1.5rem", // 24px
|
|
},
|
|
],
|
|
lg: [
|
|
"1.125rem", // 18px
|
|
{
|
|
lineHeight: "1.75rem", // 28px
|
|
letterSpacing: "-0.01em", // tracking-tight
|
|
},
|
|
],
|
|
xl: [
|
|
"1.25rem", // 20px
|
|
{
|
|
lineHeight: "1.875rem", // 30px
|
|
letterSpacing: "-0.01em", // tracking-tight
|
|
},
|
|
],
|
|
},
|
|
fontFamily: {
|
|
mono: [
|
|
`"Fira Code"`,
|
|
`ui-monospace`,
|
|
`SFMono-Regular`,
|
|
`Menlo`,
|
|
`Monaco`,
|
|
`Consolas`,
|
|
`"Liberation Mono"`,
|
|
`"Courier New"`,
|
|
`monospace`,
|
|
],
|
|
},
|
|
letterSpacing: {
|
|
tighter: "-0.04em",
|
|
tight: "-0.03em",
|
|
snug: "-0.02em",
|
|
normal: "0",
|
|
wide: "0.03em",
|
|
},
|
|
lineHeight: {
|
|
tight: "1.20",
|
|
},
|
|
backgroundImage: {
|
|
navMenu: "linear-gradient(132deg, #4499F7 0%, #3FCDD6 100%)",
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
xs: "3px",
|
|
},
|
|
boxShadow: {
|
|
xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
|
},
|
|
backgroundColor: {
|
|
primary: "var(--bg-primary)",
|
|
"primary-hover": "var(--bg-primary_hover)",
|
|
secondary: "var(--bg-secondary)",
|
|
"secondary-hover": "var(--bg-secondary_hover)",
|
|
tertiary: "var(--bg-tertiary)",
|
|
quaternary: "var(--bg-quaternary)",
|
|
|
|
"brand-primary": "var(--bg-brand-primary)",
|
|
"brand-primary-hover": "var(--bg-brand-primary_hover)",
|
|
"brand-secondary": "var(--bg-brand-secondary)",
|
|
"brand-tertiary": "var(--bg-brand-tertiary)",
|
|
purple: "var(--bg-purple)",
|
|
|
|
"success-primary": "var(--bg-success-primary)",
|
|
"success-secondary": "var(--bg-success-secondary)",
|
|
"success-strong": "var(--bg-success-strong)",
|
|
"error-primary": "var(--bg-error-primary)",
|
|
"error-secondary": "var(--bg-error-secondary)",
|
|
"error-strong": "var(--bg-error-strong)",
|
|
"error-strong-hover": "var(--bg-error-strong-hover)",
|
|
"warning-primary": "var(--bg-warning-primary)",
|
|
"warning-secondary": "var(--bg-warning-secondary)",
|
|
"warning-strong": "var(--bg-warning-strong)",
|
|
},
|
|
borderColor: {
|
|
primary: "var(--border-primary)",
|
|
secondary: "var(--border-secondary)",
|
|
tertiary: "var(--border-tertiary)",
|
|
error: "var(--border-error)",
|
|
"error-strong": "var(--border-error-strong)",
|
|
brand: "var(--border-brand)",
|
|
"brand-strong": "var(--border-brand-strong)",
|
|
"brand-subtle": "var(--border-brand-subtle)",
|
|
strong: "var(--border-strong)",
|
|
warning: "var(--border-warning)",
|
|
success: "var(--border-success)",
|
|
purple: "var(--border-purple)",
|
|
"status-green": "var(--border-status-green)",
|
|
"status-orange": "var(--border-status-orange)",
|
|
"status-yellow": "var(--border-status-yellow)",
|
|
"status-red": "var(--border-status-red)",
|
|
},
|
|
textColor: {
|
|
primary: "var(--text-primary)",
|
|
secondary: "var(--text-secondary)",
|
|
tertiary: "var(--text-tertiary)",
|
|
quaternary: "var(--text-quaternary)",
|
|
disabled: "var(--text-disabled)",
|
|
error: "var(--text-error)",
|
|
warning: "var(--text-warning)",
|
|
success: "var(--text-success)",
|
|
placeholder: "var(--text-placeholder)",
|
|
purple: "var(--text-purple)",
|
|
"brand-primary": "var(--text-brand-primary)",
|
|
"brand-secondary": "var(--text-brand-secondary)",
|
|
"brand-tertiary": "var(--text-brand-tertiary)",
|
|
"brand-disabled": "var(--text-brand-disabled)",
|
|
"status-green": "var(--text-status-green)",
|
|
"status-orange": "var(--text-status-orange)",
|
|
"status-yellow": "var(--text-status-yellow)",
|
|
"status-red": "var(--text-status-red)",
|
|
"button-primary": "var(--text-button-primary)",
|
|
},
|
|
colors: {
|
|
border: "hsl(var(--border))",
|
|
input: "hsl(var(--input))",
|
|
ring: "hsl(var(--ring))",
|
|
background: "hsl(var(--background))",
|
|
foreground: "hsl(var(--foreground))",
|
|
primary: {
|
|
DEFAULT: "hsl(var(--primary))",
|
|
foreground: "hsl(var(--primary-foreground))",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "hsl(var(--secondary))",
|
|
foreground: "hsl(var(--secondary-foreground))",
|
|
},
|
|
destructive: {
|
|
DEFAULT: "hsl(var(--destructive))",
|
|
foreground: "hsl(var(--destructive-foreground))",
|
|
},
|
|
muted: {
|
|
DEFAULT: "hsl(var(--muted))",
|
|
foreground: "hsl(var(--muted-foreground))",
|
|
},
|
|
accent: {
|
|
DEFAULT: "hsl(var(--accent))",
|
|
foreground: "hsl(var(--accent-foreground))",
|
|
},
|
|
popover: {
|
|
DEFAULT: "hsl(var(--popover))",
|
|
foreground: "hsl(var(--popover-foreground))",
|
|
},
|
|
card: {
|
|
DEFAULT: "hsl(var(--card))",
|
|
foreground: "hsl(var(--card-foreground))",
|
|
},
|
|
sidebar: {
|
|
DEFAULT: "hsl(var(--sidebar))",
|
|
},
|
|
chart: {
|
|
1: "hsl(var(--chart-1))",
|
|
2: "hsl(var(--chart-2))",
|
|
3: "hsl(var(--chart-3))",
|
|
4: "hsl(var(--chart-4))",
|
|
5: "hsl(var(--chart-5))",
|
|
},
|
|
ls: {
|
|
blue: "hsl(211.5, 91.8%, 61.8%)",
|
|
black: "hsl(var(--ls-black))",
|
|
green: {
|
|
600: "hsl(122, 63%, 38%)",
|
|
},
|
|
white: "var(--white)",
|
|
black: "var(--black)",
|
|
red: {
|
|
25: "var(--red-25)",
|
|
50: "var(--red-50)",
|
|
100: "var(--red-100)",
|
|
200: "var(--red-200)",
|
|
300: "var(--red-300)",
|
|
400: "var(--red-400)",
|
|
500: "var(--red-500)",
|
|
600: "var(--red-600)",
|
|
700: "var(--red-700)",
|
|
800: "var(--red-800)",
|
|
900: "var(--red-900)",
|
|
950: "var(--red-950)",
|
|
},
|
|
orange: {
|
|
25: "var(--orange-25)",
|
|
50: "var(--orange-50)",
|
|
100: "var(--orange-100)",
|
|
200: "var(--orange-200)",
|
|
300: "var(--orange-300)",
|
|
400: "var(--orange-400)",
|
|
500: "var(--orange-500)",
|
|
600: "var(--orange-600)",
|
|
700: "var(--orange-700)",
|
|
800: "var(--orange-800)",
|
|
900: "var(--orange-900)",
|
|
950: "var(--orange-950)",
|
|
},
|
|
gray: {
|
|
50: "var(--gray-50)",
|
|
100: "var(--gray-100)",
|
|
200: "var(--gray-200)",
|
|
300: "var(--gray-300)",
|
|
400: "var(--gray-400)",
|
|
500: "var(--gray-500)",
|
|
600: "var(--gray-600)",
|
|
700: "var(--gray-700)",
|
|
800: "var(--gray-800)",
|
|
900: "var(--gray-900)",
|
|
950: "var(--gray-950)",
|
|
},
|
|
green: {
|
|
25: "var(--green-25)",
|
|
50: "var(--green-50)",
|
|
100: "var(--green-100)",
|
|
200: "var(--green-200)",
|
|
300: "var(--green-300)",
|
|
400: "var(--green-400)",
|
|
500: "var(--green-500)",
|
|
600: "var(--green-600)",
|
|
700: "var(--green-700)",
|
|
800: "var(--green-800)",
|
|
900: "var(--green-900)",
|
|
950: "var(--green-950)",
|
|
},
|
|
},
|
|
brand: {
|
|
green: {
|
|
25: "var(--brand-25)",
|
|
50: "var(--brand-50)",
|
|
100: "var(--brand-100)",
|
|
200: "var(--brand-200)",
|
|
300: "var(--brand-300)",
|
|
400: "var(--brand-400)",
|
|
500: "var(--brand-500)",
|
|
600: "var(--brand-600)",
|
|
700: "var(--brand-700)",
|
|
800: "var(--brand-800)",
|
|
900: "var(--brand-900)",
|
|
950: "var(--brand-950)",
|
|
},
|
|
},
|
|
},
|
|
keyframes: {
|
|
hide: {
|
|
from: { opacity: 1 },
|
|
to: { opacity: 0 },
|
|
},
|
|
slideIn: {
|
|
from: {
|
|
transform: "translateX(calc(100% + var(--viewport-padding)))",
|
|
},
|
|
to: { transform: "translateX(0)" },
|
|
},
|
|
swipeOut: {
|
|
from: { transform: "translateX(var(--radix-toast-swipe-end-x))" },
|
|
to: { transform: "translateX(calc(100% + var(--viewport-padding)))" },
|
|
},
|
|
},
|
|
animation: {
|
|
hide: "hide 100ms ease-in",
|
|
slideIn: "slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1)",
|
|
swipeOut: "swipeOut 100ms ease-out",
|
|
},
|
|
},
|
|
typography: {
|
|
playground: {
|
|
css: {
|
|
"h1, h2, h3, h4, h5, h6": {
|
|
fontWeight: "bold",
|
|
},
|
|
h1: {
|
|
fontSize: "24px",
|
|
},
|
|
h2: {
|
|
fontSize: "20px",
|
|
},
|
|
h3: {
|
|
fontSize: "18px",
|
|
},
|
|
h4: {
|
|
fontSize: "16px",
|
|
},
|
|
h5: {
|
|
fontSize: "14px",
|
|
},
|
|
h6: {
|
|
fontSize: "12px",
|
|
},
|
|
ul: {
|
|
marginLeft: "20px !important",
|
|
listStyleType: "disc !important",
|
|
},
|
|
ol: {
|
|
marginLeft: "20px !important",
|
|
listStyleType: "decimal !important",
|
|
},
|
|
a: {
|
|
color: "#287977",
|
|
textDecoration: "underline",
|
|
"&:hover": {
|
|
textDecoration: "underline",
|
|
},
|
|
},
|
|
table: {
|
|
width: "100%",
|
|
borderCollapse: "collapse",
|
|
th: {
|
|
padding: "0.5rem",
|
|
border: "1px solid var(--gray-100)",
|
|
fontWeight: "bold",
|
|
textAlign: "left",
|
|
},
|
|
td: {
|
|
padding: "0.5rem",
|
|
border: "1px solid var(--gray-100)",
|
|
},
|
|
},
|
|
blockquote: {
|
|
borderLeft: "2px solid var(--gray-100)",
|
|
paddingLeft: "1rem",
|
|
marginLeft: "0",
|
|
fontStyle: "italic",
|
|
},
|
|
|
|
"s, strike, del": {
|
|
textDecoration: "line-through",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
containerQueries,
|
|
typography,
|
|
forms,
|
|
tailwindcssAnimate,
|
|
headlessui,
|
|
plugin(({ addUtilities, addBase }) => {
|
|
addBase({
|
|
input: {
|
|
borderWidth: "0",
|
|
padding: "0",
|
|
},
|
|
// Global scrollbar styles for all scrollable elements
|
|
"html, body, *": {
|
|
"scrollbar-width": "thin",
|
|
"scrollbar-color": "var(--scrollbar-thumb) var(--bg-primary)",
|
|
},
|
|
"html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar":
|
|
{
|
|
width: "8px",
|
|
background: "var(--bg-primary)",
|
|
},
|
|
"html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, *::-webkit-scrollbar-track":
|
|
{
|
|
background: "var(--bg-primary)",
|
|
},
|
|
"html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb":
|
|
{
|
|
background: "var(--scrollbar-thumb)",
|
|
"border-radius": "4px",
|
|
},
|
|
"html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover":
|
|
{
|
|
background: "var(--scrollbar-thumb-hover)",
|
|
},
|
|
});
|
|
addUtilities({
|
|
".no-scrollbar": {
|
|
"scrollbar-width": "none",
|
|
"&::-webkit-scrollbar": {
|
|
display: "none",
|
|
},
|
|
},
|
|
});
|
|
|
|
// https://github.com/tailwindlabs/tailwindcss/discussions/12127
|
|
addUtilities({
|
|
".break-anywhere": {
|
|
"@supports (overflow-wrap: anywhere)": {
|
|
"overflow-wrap": "anywhere",
|
|
},
|
|
"@supports not (overflow-wrap: anywhere)": {
|
|
"word-break": "break-word",
|
|
},
|
|
},
|
|
});
|
|
|
|
addUtilities({
|
|
".no-number-spinner": {
|
|
MozAppearance: "textfield",
|
|
"&::-webkit-outer-spin-button": {
|
|
WebkitAppearance: "none !important",
|
|
margin: 0,
|
|
},
|
|
"&::-webkit-inner-spin-button": {
|
|
WebkitAppearance: "none !important",
|
|
margin: 0,
|
|
},
|
|
},
|
|
});
|
|
|
|
addUtilities({
|
|
".text-security": {
|
|
textSecurity: "disc",
|
|
WebkitTextSecurity: "disc",
|
|
MozTextSecurity: "disc",
|
|
},
|
|
});
|
|
|
|
addUtilities({
|
|
".display-sm": {
|
|
fontSize: "1rem", // 16px
|
|
lineHeight: "1.5rem", // 24px
|
|
fontWeight: "600", // semibold
|
|
},
|
|
".display-base": {
|
|
fontSize: "1.5rem", // 24px
|
|
lineHeight: "2rem", // 32px
|
|
letterSpacing: "-0.01em", // tracking-tight
|
|
},
|
|
".display-lg": {
|
|
fontSize: "1.875rem", // 30px
|
|
lineHeight: "2.375rem", // 38px
|
|
letterSpacing: "-0.01em", // tracking-tight
|
|
},
|
|
".display-xl": {
|
|
fontSize: "2.25rem", // 36px
|
|
lineHeight: "2.75rem", // 44px
|
|
letterSpacing: "-0.01em", // tracking-tight
|
|
},
|
|
".display-2xl": {
|
|
fontSize: "3rem", // 48px
|
|
lineHeight: "3.75rem", // 60px
|
|
letterSpacing: "-0.01em", // tracking-tight
|
|
},
|
|
".caps-label-sm": {
|
|
fontSize: "0.875rem", // 14px
|
|
lineHeight: "1.25rem", // 20px
|
|
letterSpacing: "0.02625rem", // 0.42px
|
|
textTransform: "uppercase",
|
|
},
|
|
".caps-label-xs": {
|
|
fontSize: "0.75rem", // 14px
|
|
lineHeight: "1.125rem", // 20px
|
|
letterSpacing: "0.0225rem", // 0.42px
|
|
textTransform: "uppercase",
|
|
},
|
|
});
|
|
}),
|
|
],
|
|
};
|