2026-09-16 21:21:43 +02:00
|
|
|
/**
|
|
|
|
|
* Design tokens for Tripoli Cloud, centralized here so components never
|
2026-09-22 15:48:55 +02:00
|
|
|
* hardcode colors, radii or spacing inline.
|
2026-09-16 21:21:43 +02:00
|
|
|
*
|
2026-09-22 15:48:55 +02:00
|
|
|
* Surface/text colors resolve through CSS variables (see src/index.css) -
|
|
|
|
|
* a single theme, deliberately: no dark/light toggle to maintain.
|
2026-09-16 21:21:43 +02:00
|
|
|
* @type {import('tailwindcss').Config}
|
|
|
|
|
*/
|
|
|
|
|
export default {
|
|
|
|
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
|
|
|
theme: {
|
|
|
|
|
extend: {
|
|
|
|
|
fontFamily: {
|
|
|
|
|
sans: ['Manrope', 'system-ui', 'sans-serif'],
|
Refonte complète du thème : éditorial clair, inspiré de studiocart.co
À la demande explicite de l'utilisateur (site jugé "trop moche"),
inspiration visuelle prise sur https://www.studiocart.co/ : grands
titres serif (Fraunces) avec italique, fond papier clair plutôt que le
coffre-fort sombre d'origine, un seul accent vif (citron vert) utilisé
avec parcimonie pour les surlignages, cartes blanches nettes à bordure
fine, petites touches dessinées à la main (squiggle, flèche) sur l'écran
de connexion.
- Jetons de thème (index.css, tailwind.config.js) : le thème clair
devient la palette par défaut. Le thème sombre existant reste
disponible via le bouton de bascule, inchangé.
- ThemeContext : thème par défaut passé à 'light'.
- Écran de connexion entièrement repensé (fond génératif pastel qui
dérive lentement, carte blanche, surlignage citron vert via la
nouvelle classe utilitaire .tc-highlight, doodles SVG).
- Reste de l'application : cascade automatique via les tokens CSS déjà
utilisés partout (bg-panel, text-ink, ...), sans avoir à toucher
chaque composant individuellement.
Inspiration de studiocart.co pour le ton visuel uniquement (typographie,
palette, motifs) - aucun contenu, logo ni image de ce site n'est repris.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-22 14:37:16 +02:00
|
|
|
// Titres uniquement (voir `.font-display`) - jamais le corps de
|
|
|
|
|
// texte ni l'UI, pour garder l'interface lisible et rapide à
|
|
|
|
|
// scanner ; le serif est réservé à l'effet éditorial des titres.
|
|
|
|
|
display: ['Fraunces', 'Georgia', 'serif'],
|
2026-09-16 21:21:43 +02:00
|
|
|
},
|
|
|
|
|
colors: {
|
|
|
|
|
brand: {
|
|
|
|
|
from: '#5b8cff',
|
|
|
|
|
to: '#7c5cff',
|
|
|
|
|
DEFAULT: '#5b8cff',
|
|
|
|
|
soft: '#7ba4ff',
|
|
|
|
|
},
|
Refonte complète du thème : éditorial clair, inspiré de studiocart.co
À la demande explicite de l'utilisateur (site jugé "trop moche"),
inspiration visuelle prise sur https://www.studiocart.co/ : grands
titres serif (Fraunces) avec italique, fond papier clair plutôt que le
coffre-fort sombre d'origine, un seul accent vif (citron vert) utilisé
avec parcimonie pour les surlignages, cartes blanches nettes à bordure
fine, petites touches dessinées à la main (squiggle, flèche) sur l'écran
de connexion.
- Jetons de thème (index.css, tailwind.config.js) : le thème clair
devient la palette par défaut. Le thème sombre existant reste
disponible via le bouton de bascule, inchangé.
- ThemeContext : thème par défaut passé à 'light'.
- Écran de connexion entièrement repensé (fond génératif pastel qui
dérive lentement, carte blanche, surlignage citron vert via la
nouvelle classe utilitaire .tc-highlight, doodles SVG).
- Reste de l'application : cascade automatique via les tokens CSS déjà
utilisés partout (bg-panel, text-ink, ...), sans avoir à toucher
chaque composant individuellement.
Inspiration de studiocart.co pour le ton visuel uniquement (typographie,
palette, motifs) - aucun contenu, logo ni image de ce site n'est repris.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-22 14:37:16 +02:00
|
|
|
// Citron vert - l'unique accent vif, utilisé avec parcimonie
|
|
|
|
|
// (surlignage, badge, détail) plutôt que comme couleur dominante.
|
|
|
|
|
accent: '#c8ff52',
|
2026-09-16 21:21:43 +02:00
|
|
|
success: '#4ade80',
|
|
|
|
|
danger: '#ff8f7a',
|
|
|
|
|
violet: '#b39dff',
|
|
|
|
|
bg: 'var(--tc-bg)',
|
|
|
|
|
panel: 'var(--tc-panel)',
|
|
|
|
|
panel2: 'var(--tc-panel-2)',
|
|
|
|
|
line: 'var(--tc-line)',
|
|
|
|
|
field: 'var(--tc-field)',
|
|
|
|
|
selected: 'var(--tc-selected)',
|
|
|
|
|
ink: {
|
|
|
|
|
DEFAULT: 'var(--tc-ink)',
|
|
|
|
|
soft: 'var(--tc-ink-2)',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
backgroundImage: {
|
|
|
|
|
'brand-gradient': 'linear-gradient(135deg, #5b8cff 0%, #7c5cff 100%)',
|
|
|
|
|
},
|
|
|
|
|
borderRadius: {
|
|
|
|
|
card: '16px',
|
|
|
|
|
panel: '18px',
|
|
|
|
|
modal: '14px',
|
|
|
|
|
},
|
|
|
|
|
boxShadow: {
|
|
|
|
|
tc: 'var(--tc-shadow)',
|
|
|
|
|
},
|
|
|
|
|
screens: {
|
|
|
|
|
// Explicit alias for the prototype's documented breakpoint.
|
|
|
|
|
mobile: { max: '767px' },
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
plugins: [],
|
|
|
|
|
}
|