Attempt to fix note resizing with React keys and Muuri sync
This commit is contained in:
307
keep-notes/lib/modern-color-options.ts
Normal file
307
keep-notes/lib/modern-color-options.ts
Normal file
@@ -0,0 +1,307 @@
|
||||
/**
|
||||
* 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;
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
Reference in New Issue
Block a user