frontend/tailwind.config.ts
Rama main · réplica de lectura del repositorio original.
import type { Config } from 'tailwindcss';
const config: Config = {
content: ['./src/**/*.{ts,tsx}'],
theme: {
extend: {
colors: {
// Maestro palette — "neon arcade / synthwave" full-spectrum. Near-black
// base, warm champagne brand + cyan, with a per-domain neon spectrum.
background: '#0a0a10',
surface: '#12121c',
'surface-2': '#171724',
border: {
DEFAULT: '#26263a',
bright: '#3d3d5c',
},
primary: {
DEFAULT: '#d3cbc0',
hover: '#e0dbd3',
dim: 'rgba(211,203,192,0.10)',
},
accent: {
DEFAULT: '#22d3ee',
dim: 'rgba(34,211,238,0.10)',
},
danger: {
DEFAULT: '#ff4d6d',
dim: 'rgba(255,77,109,0.10)',
},
// Orange caution hue — user-initiated stops (cancelled tasks), kept
// distinct from danger red. Same hex as domain.data, separate semantic.
warning: {
DEFAULT: '#ff7a45',
dim: 'rgba(255,122,69,0.10)',
},
// Neon mint for successful outcomes. Same hex as domain.finance —
// Tailwind's emerald-* reads washed-out against the near-black base and
// sits outside this palette.
success: {
DEFAULT: '#2ee6a6',
dim: 'rgba(46,230,166,0.10)',
},
// GitHub Sponsors brand pink — used only by the Sponsor CTA.
sponsor: {
DEFAULT: '#db61a2',
dim: 'rgba(219,97,162,0.10)',
},
// Same blue-grey hue (~230°); lightness lifted 59%->68% so small text
// clears contrast on macOS grayscale antialiasing, not just Windows
// ClearType. Contrast vs #0a0a10 background ~8:1 (was ~6.2:1).
muted: '#a0a4ba',
// Per-group neon hues (bright — UI accents, glows, chips, active state).
// One hue per *family* of domains rather than per domain: see the header
// of src/lib/agent-colors.ts for why forty-three hues is neither
// perceptually honest nor maintainable. Each hue is inherited from the
// domain that used to define it, so a family keeps the colour users
// already associate with it. Opacity modifiers (bg-domain-x/10,
// border-domain-x/40) supply the dim fills, so no -dim tokens are needed.
domain: {
build: '#3b9dff', // was software
market: '#ff5cc8', // was marketing
money: '#2ee6a6', // was finance
operate: '#ff4d5e', // was legal
life: '#ffb02e', // was seo / local
knowledge: '#a78bfa', // was research
},
// Per-module chrome accents — each app module owns one neon hue so the
// chrome (buttons, focus, glows, nav) shifts color per section instead
// of reusing the lime brand everywhere. Hexes mirror proven domain.*
// values; kept as separate semantic tokens so they can be retuned
// without touching the domain system. Source of truth for consumers:
// src/lib/module-colors.ts.
module: {
dashboard: '#22d3ee',
marketplace: '#ff5cc8',
architect: '#9d4dff',
agents: '#3b9dff',
documents: '#ff7a45',
// The three settings sub-sections each own a distinct hue so the
// sidebar tabs and per-page chrome no longer share one color.
'api-keys': '#2ee6a6',
billing: '#ffb02e',
profile: '#e879f9',
settings: '#2ee6a6',
// Moderation/admin chrome — a commanding red that reads as authority,
// distinct from the marketplace pink and the danger semantic.
admin: '#ff4d5e',
// Observability/traces chrome — an indigo neon sitting in the gap
// between the agents blue and the architect violet.
traces: '#6d7cff',
brand: '#d3cbc0',
},
},
fontFamily: {
sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
mono: ['var(--font-mono)', 'ui-monospace', 'monospace'],
},
boxShadow: {
'glow-primary': '0 0 24px -6px rgba(211,203,192,0.45)',
'glow-cyan': '0 0 24px -6px rgba(34,211,238,0.45)',
'glow-danger': '0 0 24px -6px rgba(255,77,109,0.45)',
'glow-warning': '0 0 24px -6px rgba(255,122,69,0.45)',
'glow-sponsor': '0 0 24px -6px rgba(219,97,162,0.45)',
// Per-group neon glows (mirror the domain.* hues above).
'glow-build': '0 0 24px -6px rgba(59,157,255,0.45)',
'glow-market': '0 0 24px -6px rgba(255,92,200,0.45)',
'glow-money': '0 0 24px -6px rgba(46,230,166,0.45)',
'glow-operate': '0 0 24px -6px rgba(255,77,94,0.45)',
'glow-life': '0 0 24px -6px rgba(255,176,46,0.45)',
'glow-knowledge': '0 0 24px -6px rgba(167,139,250,0.45)',
// Per-module neon glows (mirror the module.* hues).
'glow-mod-dashboard': '0 0 24px -6px rgba(34,211,238,0.45)',
'glow-mod-marketplace': '0 0 24px -6px rgba(255,92,200,0.45)',
'glow-mod-architect': '0 0 24px -6px rgba(157,77,255,0.45)',
'glow-mod-agents': '0 0 24px -6px rgba(59,157,255,0.45)',
'glow-mod-documents': '0 0 24px -6px rgba(255,122,69,0.45)',
'glow-mod-api-keys': '0 0 24px -6px rgba(46,230,166,0.45)',
'glow-mod-billing': '0 0 24px -6px rgba(255,176,46,0.45)',
'glow-mod-profile': '0 0 24px -6px rgba(232,121,249,0.45)',
'glow-mod-settings': '0 0 24px -6px rgba(46,230,166,0.45)',
'glow-mod-admin': '0 0 24px -6px rgba(255,77,94,0.45)',
'glow-mod-traces': '0 0 24px -6px rgba(109,124,255,0.45)',
'glow-mod-brand': '0 0 24px -6px rgba(211,203,192,0.45)',
},
letterSpacing: {
micro: '0.18em',
},
keyframes: {
blink: {
'0%, 49%': { opacity: '1' },
'50%, 100%': { opacity: '0' },
},
dash: {
to: { strokeDashoffset: '-16' },
},
'pulse-glow': {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.4' },
},
indeterminate: {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(400%)' },
},
'fade-in': {
from: { opacity: '0', transform: 'translateY(6px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
shimmer: {
from: { transform: 'translateX(-150%) skewX(-12deg)' },
to: { transform: 'translateX(250%) skewX(-12deg)' },
},
'border-pan': {
from: { backgroundPosition: '0% 50%, 0 0' },
to: { backgroundPosition: '200% 50%, 0 0' },
},
'flow-dash': {
to: { strokeDashoffset: '-24' },
},
'pop-flash': {
'0%': { filter: 'brightness(1)' },
'35%': { filter: 'brightness(1.35)' },
'100%': { filter: 'brightness(1)' },
},
shake: {
'0%, 100%': { transform: 'translateX(0)' },
'20%': { transform: 'translateX(-6px)' },
'40%': { transform: 'translateX(6px)' },
'60%': { transform: 'translateX(-3px)' },
'80%': { transform: 'translateX(3px)' },
},
'shine-sweep': {
from: { backgroundPosition: '150% center' },
to: { backgroundPosition: '-50% center' },
},
'gradient-pan': {
from: { backgroundPosition: '0% 50%' },
to: { backgroundPosition: '100% 50%' },
},
'word-in': {
from: {
opacity: '0',
transform: 'translateY(6px)',
filter: 'blur(4px)',
},
to: { opacity: '1', transform: 'translateY(0)', filter: 'blur(0px)' },
},
'node-ping': {
'0%': { opacity: '0.7', transform: 'scale(1)' },
'100%': { opacity: '0', transform: 'scale(1.05)' },
},
},
animation: {
blink: 'blink 1.1s step-end infinite',
dash: 'dash 0.9s linear infinite',
'pulse-glow': 'pulse-glow 1.6s ease-in-out infinite',
indeterminate: 'indeterminate 1.4s ease-in-out infinite',
'fade-in': 'fade-in 0.25s ease-out both',
shimmer: 'shimmer 0.9s ease-out',
'border-pan': 'border-pan 6s linear infinite',
'flow-dash': 'flow-dash 1.2s linear infinite',
'pop-flash': 'pop-flash 0.4s ease-out',
shake: 'shake 0.4s ease-in-out',
'shine-sweep': 'shine-sweep 3s linear infinite',
'gradient-pan': 'gradient-pan 4s ease-in-out infinite alternate',
'word-in': 'word-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both',
'node-ping': 'node-ping 1.6s ease-out infinite',
},
},
},
plugins: [],
};
export default config;