JavaScript 56.7%
TypeScript 42.6%
1import type { Config } from "tailwindcss";23/**4 * SPB Cloud v3 — design system "Aurora"5 *6 * - `gray` → neutre froid maison (remplace la palette Tailwind, ré-harmonise7 * les ~22k lignes existantes sans les toucher).8 * - `blue` → ACCENT dynamique (variables CSS --accent-*), sélectionnable par9 * l'utilisateur (Préférences → Accent). Tout `text-blue-500`,10 * `bg-blue-600/10`… suit l'accent choisi.11 * - `canvas` / `surface` / `elevated` / `line` → surfaces sémantiques.12 */13const accent = (n: number) => `rgb(var(--accent-${n}) / <alpha-value>)`;1415const config: Config = {16 darkMode: "class",17 content: [18 "./pages/**/*.{js,ts,jsx,tsx,mdx}",19 "./components/**/*.{js,ts,jsx,tsx,mdx}",20 "./app/**/*.{js,ts,jsx,tsx,mdx}",21 ],22 theme: {23 extend: {24 fontFamily: {25 sans: ["var(--font-geist)", "Inter", "system-ui", "-apple-system", "sans-serif"],26 mono: ["var(--font-geist-mono)", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],27 },28 colors: {29 background: "var(--background)",30 foreground: "var(--foreground)",31 canvas: "rgb(var(--canvas) / <alpha-value>)",32 surface: "rgb(var(--surface) / <alpha-value>)",33 elevated: "rgb(var(--elevated) / <alpha-value>)",34 line: "rgb(var(--line) / <alpha-value>)",35 accent: {36 50: accent(50), 100: accent(100), 200: accent(200), 300: accent(300),37 400: accent(400), 500: accent(500), 600: accent(600), 700: accent(700),38 800: accent(800), 900: accent(900), 950: accent(950),39 DEFAULT: accent(500),40 },41 blue: {42 50: accent(50), 100: accent(100), 200: accent(200), 300: accent(300),43 400: accent(400), 500: accent(500), 600: accent(600), 700: accent(700),44 800: accent(800), 900: accent(900), 950: accent(950),45 },46 gray: {47 50: "#f7f8fa",48 100: "#eef0f3",49 200: "#dfe3e8",50 300: "#c8cdd5",51 400: "#9aa1ad",52 500: "#6b7280",53 600: "#4f5663",54 700: "#3a404b",55 800: "#23272f",56 900: "#15181e",57 950: "#0b0c10",58 },59 cloud: {60 50: "#f7f8fa", 100: "#eef0f3", 200: "#dfe3e8", 300: "#c8cdd5", 400: "#9aa1ad",61 500: "#6b7280", 600: "#4f5663", 700: "#3a404b", 800: "#23272f", 900: "#15181e", 950: "#0b0c10",62 },63 },64 borderRadius: {65 "2xl": "1rem",66 "3xl": "1.25rem",67 "4xl": "1.75rem",68 },69 boxShadow: {70 card: "0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06)",71 "card-hover": "0 4px 12px rgb(15 23 42 / 0.08), 0 1px 3px rgb(15 23 42 / 0.06)",72 pop: "0 12px 40px -8px rgb(15 23 42 / 0.25), 0 2px 8px rgb(15 23 42 / 0.08)",73 glow: "0 0 0 1px rgb(var(--accent-500) / 0.35), 0 8px 30px -6px rgb(var(--accent-500) / 0.45)",74 "inner-hi": "inset 0 1px 0 0 rgb(255 255 255 / 0.06)",75 },76 backgroundImage: {77 "accent-gradient":78 "linear-gradient(135deg, rgb(var(--accent-500)) 0%, rgb(var(--accent-600)) 60%, rgb(var(--accent-700)) 100%)",79 aurora:80 "radial-gradient(1200px 600px at 10% -10%, rgb(var(--accent-500) / 0.25), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgb(var(--accent-300) / 0.18), transparent 55%), radial-gradient(700px 500px at 50% 120%, rgb(var(--accent-700) / 0.22), transparent 60%)",81 grid: "linear-gradient(to right, rgb(var(--line) / 0.7) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--line) / 0.7) 1px, transparent 1px)",82 },83 keyframes: {84 shimmer: { "0%": { backgroundPosition: "-200% 0" }, "100%": { backgroundPosition: "200% 0" } },85 "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },86 "slide-up": { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },87 "scale-in": { from: { opacity: "0", transform: "scale(0.96)" }, to: { opacity: "1", transform: "scale(1)" } },88 float: { "0%,100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-6px)" } },89 "pulse-ring": { "0%": { transform: "scale(1)", opacity: "0.6" }, "100%": { transform: "scale(1.8)", opacity: "0" } },90 drift: {91 "0%,100%": { transform: "translate(0,0) scale(1)" },92 "33%": { transform: "translate(40px,-30px) scale(1.05)" },93 "66%": { transform: "translate(-30px,20px) scale(0.97)" },94 },95 },96 animation: {97 shimmer: "shimmer 1.6s linear infinite",98 "fade-in": "fade-in .2s ease-out both",99 "slide-up": "slide-up .25s cubic-bezier(.2,.8,.2,1) both",100 "scale-in": "scale-in .18s cubic-bezier(.2,.8,.2,1) both",101 float: "float 6s ease-in-out infinite",102 "pulse-ring": "pulse-ring 1.6s cubic-bezier(.2,.8,.2,1) infinite",103 drift: "drift 22s ease-in-out infinite",104 },105 transitionTimingFunction: {106 spring: "cubic-bezier(.2,.8,.2,1)",107 },108 },109 },110 plugins: [],111};112export default config;113