308 lines
10 KiB
TypeScript
308 lines
10 KiB
TypeScript
/**
|
|
* OPTIONS DE COULEURS MODERNES - PAS DE DÉGRADÉS
|
|
* =================================================
|
|
*
|
|
* Alternatives au bleu traditionnel pour un design contemporain
|
|
*/
|
|
|
|
// =============================================================================
|
|
// OPTION 1: GRIS-BLEU (SLATE) - RECOMMANDÉE ✅
|
|
// =============================================================================
|
|
/**
|
|
* Gris-bleu moderne et professionnel
|
|
* Inspiré par Linear, Vercel, GitHub
|
|
* Très élégant, discret et apaisant pour les yeux
|
|
*/
|
|
export const SLATE_THEME = {
|
|
name: 'Gris-Bleu (Slate)',
|
|
description: 'Moderne, professionnel et apaisant - comme Linear/Vercel',
|
|
|
|
light: {
|
|
// Backgrounds
|
|
background: 'oklch(0.985 0.003 230)', // Blanc grisâtre très léger
|
|
card: 'oklch(1 0 0)', // Blanc pur
|
|
sidebar: 'oklch(0.97 0.004 230)', // Gris-bleu très pâle
|
|
input: 'oklch(0.98 0.003 230)', // Gris-bleu pâle
|
|
|
|
// Textes
|
|
foreground: 'oklch(0.2 0.02 230)', // Gris-bleu foncé
|
|
'foreground-secondary': 'oklch(0.45 0.015 230)', // Gris-bleu moyen
|
|
'foreground-muted': 'oklch(0.6 0.01 230)', // Gris-bleu clair
|
|
|
|
// Primary (le point coloré de l'interface)
|
|
primary: 'oklch(0.45 0.08 230)', // Gris-bleu doux
|
|
'primary-hover': 'oklch(0.4 0.09 230)', // Gris-bleu plus foncé
|
|
'primary-foreground': 'oklch(0.99 0 0)', // Blanc
|
|
|
|
// Accents
|
|
accent: 'oklch(0.94 0.005 230)', // Gris-bleu très pâle
|
|
'accent-foreground': 'oklch(0.2 0.02 230)',
|
|
|
|
// Borders
|
|
border: 'oklch(0.9 0.008 230)', // Gris-bleu très clair
|
|
'border-hover': 'oklch(0.82 0.01 230)',
|
|
|
|
// Functional
|
|
success: 'oklch(0.65 0.15 145)', // Vert emerald
|
|
warning: 'oklch(0.75 0.12 70)', // Jaune/orange
|
|
destructive: 'oklch(0.6 0.18 25)', // Rouge
|
|
},
|
|
|
|
dark: {
|
|
// Backgrounds
|
|
background: 'oklch(0.14 0.005 230)', // Noir grisâtre léger
|
|
card: 'oklch(0.18 0.006 230)', // Gris-bleu foncé
|
|
sidebar: 'oklch(0.12 0.005 230)', // Noir grisâtre
|
|
input: 'oklch(0.2 0.006 230)',
|
|
|
|
// Textes
|
|
foreground: 'oklch(0.97 0.003 230)', // Blanc grisâtre
|
|
'foreground-secondary': 'oklch(0.75 0.008 230)',
|
|
'foreground-muted': 'oklch(0.55 0.01 230)',
|
|
|
|
// Primary
|
|
primary: 'oklch(0.55 0.08 230)', // Gris-bleu plus clair
|
|
'primary-hover': 'oklch(0.6 0.09 230)',
|
|
'primary-foreground': 'oklch(0.1 0 0)',
|
|
|
|
// Accents
|
|
accent: 'oklch(0.24 0.006 230)',
|
|
'accent-foreground': 'oklch(0.97 0.003 230)',
|
|
|
|
// Borders
|
|
border: 'oklch(0.28 0.01 230)',
|
|
'border-hover': 'oklch(0.38 0.012 230)',
|
|
|
|
// Functional
|
|
success: 'oklch(0.7 0.15 145)',
|
|
warning: 'oklch(0.8 0.12 70)',
|
|
destructive: 'oklch(0.65 0.18 25)',
|
|
},
|
|
} as const;
|
|
|
|
// =============================================================================
|
|
// OPTION 2: MONOCHROME GRIS (MINIMALISTE)
|
|
// =============================================================================
|
|
/**
|
|
* Noir et blanc avec subtilités de gris
|
|
* Style minimaliste ultra-moderne (Linear, Stripe, Apple)
|
|
* Absolument pas de couleur sauf pour les fonctionnalités
|
|
*/
|
|
export const MONOCHROME_THEME = {
|
|
name: 'Monochrome Gris',
|
|
description: 'Minimaliste et élégant - style Linear/Apple',
|
|
|
|
light: {
|
|
background: 'oklch(0.99 0 0)', // Blanc pur
|
|
card: 'oklch(1 0 0)', // Blanc pur
|
|
sidebar: 'oklch(0.96 0 0)', // Gris très pâle
|
|
input: 'oklch(0.98 0 0)',
|
|
|
|
foreground: 'oklch(0.15 0 0)', // Noir pur
|
|
'foreground-secondary': 'oklch(0.45 0 0)', // Gris moyen
|
|
'foreground-muted': 'oklch(0.6 0 0)', // Gris clair
|
|
|
|
primary: 'oklch(0.2 0 0)', // Gris foncé
|
|
'primary-hover': 'oklch(0.15 0 0)', // Noir
|
|
'primary-foreground': 'oklch(1 0 0)', // Blanc
|
|
|
|
accent: 'oklch(0.95 0 0)', // Gris très pâle
|
|
'accent-foreground': 'oklch(0.2 0 0)',
|
|
|
|
border: 'oklch(0.89 0 0)', // Gris très clair
|
|
'border-hover': 'oklch(0.75 0 0)',
|
|
|
|
success: 'oklch(0.6 0.15 145)', // Vert subtil
|
|
warning: 'oklch(0.7 0.12 70)', // Jaune subtil
|
|
destructive: 'oklch(0.55 0.18 25)', // Rouge subtil
|
|
},
|
|
|
|
dark: {
|
|
background: 'oklch(0.1 0 0)', // Noir pur
|
|
card: 'oklch(0.14 0 0)', // Gris très foncé
|
|
sidebar: 'oklch(0.08 0 0)', // Noir pur
|
|
input: 'oklch(0.16 0 0)',
|
|
|
|
foreground: 'oklch(0.98 0 0)', // Blanc pur
|
|
'foreground-secondary': 'oklch(0.7 0 0)', // Gris moyen
|
|
'foreground-muted': 'oklch(0.5 0 0)', // Gris foncé
|
|
|
|
primary: 'oklch(0.85 0 0)', // Gris clair
|
|
'primary-hover': 'oklch(0.9 0 0)', // Blanc
|
|
'primary-foreground': 'oklch(0.1 0 0)', // Noir
|
|
|
|
accent: 'oklch(0.2 0 0)', // Gris foncé
|
|
'accent-foreground': 'oklch(0.98 0 0)',
|
|
|
|
border: 'oklch(0.25 0 0)', // Gris foncé
|
|
'border-hover': 'oklch(0.35 0 0)',
|
|
|
|
success: 'oklch(0.65 0.15 145)',
|
|
warning: 'oklch(0.75 0.12 70)',
|
|
destructive: 'oklch(0.6 0.18 25)',
|
|
},
|
|
} as const;
|
|
|
|
// =============================================================================
|
|
// OPTION 3: VIOLET PROFOND (INDIGO)
|
|
// =============================================================================
|
|
/**
|
|
* Violet profond élégant et moderne
|
|
* Entre le bleu et le violet
|
|
* Très professionnel (Discord, Notion, Figma)
|
|
*/
|
|
export const INDIGO_THEME = {
|
|
name: 'Violet Profond',
|
|
description: 'Élégant et moderne - style Discord/Notion',
|
|
|
|
light: {
|
|
background: 'oklch(0.99 0.005 260)', // Blanc légèrement violacé
|
|
card: 'oklch(1 0 0)',
|
|
sidebar: 'oklch(0.96 0.006 260)',
|
|
input: 'oklch(0.97 0.005 260)',
|
|
|
|
foreground: 'oklch(0.2 0.015 260)', // Gris-violet foncé
|
|
'foreground-secondary': 'oklch(0.45 0.012 260)',
|
|
'foreground-muted': 'oklch(0.6 0.008 260)',
|
|
|
|
primary: 'oklch(0.55 0.18 260)', // Violet profond
|
|
'primary-hover': 'oklch(0.5 0.2 260)', // Violet plus foncé
|
|
'primary-foreground': 'oklch(0.99 0 0)',
|
|
|
|
accent: 'oklch(0.94 0.008 260)',
|
|
'accent-foreground': 'oklch(0.2 0.015 260)',
|
|
|
|
border: 'oklch(0.9 0.01 260)',
|
|
'border-hover': 'oklch(0.82 0.012 260)',
|
|
|
|
success: 'oklch(0.65 0.15 145)',
|
|
warning: 'oklch(0.75 0.12 70)',
|
|
destructive: 'oklch(0.6 0.18 25)',
|
|
},
|
|
|
|
dark: {
|
|
background: 'oklch(0.14 0.008 260)', // Noir légèrement violacé
|
|
card: 'oklch(0.18 0.01 260)', // Gris-violet foncé
|
|
sidebar: 'oklch(0.12 0.008 260)',
|
|
input: 'oklch(0.2 0.01 260)',
|
|
|
|
foreground: 'oklch(0.97 0.005 260)', // Blanc légèrement violacé
|
|
'foreground-secondary': 'oklch(0.75 0.008 260)',
|
|
'foreground-muted': 'oklch(0.55 0.01 260)',
|
|
|
|
primary: 'oklch(0.65 0.18 260)', // Violet plus clair
|
|
'primary-hover': 'oklch(0.7 0.2 260)',
|
|
'primary-foreground': 'oklch(0.1 0 0)',
|
|
|
|
accent: 'oklch(0.24 0.01 260)',
|
|
'accent-foreground': 'oklch(0.97 0.005 260)',
|
|
|
|
border: 'oklch(0.28 0.012 260)',
|
|
'border-hover': 'oklch(0.38 0.015 260)',
|
|
|
|
success: 'oklch(0.7 0.15 145)',
|
|
warning: 'oklch(0.8 0.12 70)',
|
|
destructive: 'oklch(0.65 0.18 25)',
|
|
},
|
|
} as const;
|
|
|
|
// =============================================================================
|
|
// OPTION 4: TEAL (TURQUOISE)
|
|
// =============================================================================
|
|
/**
|
|
* Turquoise/teal moderne et rafraîchissante
|
|
* Entre le bleu et le vert
|
|
* Très appréciée dans le design moderne (Linear, Atlassian)
|
|
*/
|
|
export const TEAL_THEME = {
|
|
name: 'Teal (Turquoise)',
|
|
description: 'Moderne et rafraîchissant - style Atlassian/Linear',
|
|
|
|
light: {
|
|
background: 'oklch(0.99 0.003 195)', // Blanc légèrement teinté
|
|
card: 'oklch(1 0 0)',
|
|
sidebar: 'oklch(0.96 0.004 195)',
|
|
input: 'oklch(0.97 0.003 195)',
|
|
|
|
foreground: 'oklch(0.2 0.015 195)', // Gris-teal foncé
|
|
'foreground-secondary': 'oklch(0.45 0.012 195)',
|
|
'foreground-muted': 'oklch(0.6 0.008 195)',
|
|
|
|
primary: 'oklch(0.55 0.14 195)', // Teal moderne
|
|
'primary-hover': 'oklch(0.5 0.16 195)', // Teal plus foncé
|
|
'primary-foreground': 'oklch(0.99 0 0)',
|
|
|
|
accent: 'oklch(0.94 0.005 195)',
|
|
'accent-foreground': 'oklch(0.2 0.015 195)',
|
|
|
|
border: 'oklch(0.9 0.008 195)',
|
|
'border-hover': 'oklch(0.82 0.01 195)',
|
|
|
|
success: 'oklch(0.65 0.15 145)',
|
|
warning: 'oklch(0.75 0.12 70)',
|
|
destructive: 'oklch(0.6 0.18 25)',
|
|
},
|
|
|
|
dark: {
|
|
background: 'oklch(0.14 0.005 195)', // Noir légèrement teinté
|
|
card: 'oklch(0.18 0.006 195)', // Gris-teal foncé
|
|
sidebar: 'oklch(0.12 0.005 195)',
|
|
input: 'oklch(0.2 0.006 195)',
|
|
|
|
foreground: 'oklch(0.97 0.003 195)', // Blanc légèrement teinté
|
|
'foreground-secondary': 'oklch(0.75 0.006 195)',
|
|
'foreground-muted': 'oklch(0.55 0.008 195)',
|
|
|
|
primary: 'oklch(0.65 0.14 195)', // Teal plus clair
|
|
'primary-hover': 'oklch(0.7 0.16 195)',
|
|
'primary-foreground': 'oklch(0.1 0 0)',
|
|
|
|
accent: 'oklch(0.24 0.006 195)',
|
|
'accent-foreground': 'oklch(0.97 0.003 195)',
|
|
|
|
border: 'oklch(0.28 0.01 195)',
|
|
'border-hover': 'oklch(0.38 0.012 195)',
|
|
|
|
success: 'oklch(0.7 0.15 145)',
|
|
warning: 'oklch(0.8 0.12 70)',
|
|
destructive: 'oklch(0.65 0.18 25)',
|
|
},
|
|
} as const;
|
|
|
|
// =============================================================================
|
|
// RÉSUMÉ DES OPTIONS
|
|
// =============================================================================
|
|
|
|
/**
|
|
* Comparaison des options :
|
|
*
|
|
* | Option | Modernité | Professionnalisme | Fatigue oculaire | Unicité |
|
|
* |--------|-----------|-------------------|------------------|----------|
|
|
* | Slate (Gris-Bleu) | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
|
|
* | Monochrome | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
|
|
* | Indigo | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
|
|
* | Teal | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
|
|
*
|
|
* Recommandation : Slate (Gris-Bleu)
|
|
* - Le plus professionnel
|
|
* - Fatigue oculaire minimale
|
|
* - Très moderne et tendance
|
|
* - Différent du bleu traditionnel
|
|
* - Cohérent avec votre suggestion
|
|
*/
|
|
|
|
export type ThemeOption = 'slate' | 'monochrome' | 'indigo' | 'teal';
|
|
|
|
/**
|
|
* Pour choisir le thème :
|
|
*
|
|
* function getTheme(option: ThemeOption) {
|
|
* switch(option) {
|
|
* case 'slate': return SLATE_THEME;
|
|
* case 'monochrome': return MONOCHROME_THEME;
|
|
* case 'indigo': return INDIGO_THEME;
|
|
* case 'teal': return TEAL_THEME;
|
|
* }
|
|
* }
|
|
*/
|