julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update background gradients and presets in BackgroundImageSelector

Browse Source 
- Adjusted gradient definitions for various themes to enhance visual appeal and consistency.
- Added new gradient presets (sunset, ocean, forest, galaxy) to the BackgroundContext for broader customization options.
- Cleaned up unused console logs in useBackgroundCycle for better performance and readability.
This commit is contained in:
Julien Froidefond
2025-10-02 14:14:06 +02:00
parent 9094aca1ff
commit fbb9311f9e
3 changed files with 27 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/settings/BackgroundImageSelector.tsx
View File

@@ -17,67 +17,67 @@ const PRESET_BACKGROUNDS = [
id: 'theme-subtle',
name: 'Dégradé subtil',
description: 'Dégradé doux avec les couleurs du thème',
preview: 'linear-gradient(135deg, var(--background) 0%, var(--card-column) 100%)'
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)'
},
{
id: 'theme-primary',
name: 'Dégradé primaire',
description: 'Dégradé marqué avec la couleur primaire',
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 60%, var(--background)) 100%)'
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--primary) 25%, var(--background)) 100%)'
},
{
id: 'theme-accent',
name: 'Dégradé accent',
description: 'Dégradé marqué avec la couleur d\'accent',
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 60%, var(--background)) 100%)'
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--accent) 25%, var(--background)) 100%)'
},
{
id: 'theme-success',
name: 'Dégradé succès',
description: 'Dégradé marqué avec la couleur de succès',
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 60%, var(--background)) 100%)'
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--success) 25%, var(--background)) 100%)'
},
{
id: 'theme-purple',
name: 'Dégradé violet',
description: 'Dégradé marqué avec la couleur violette',
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 60%, var(--background)) 100%)'
preview: 'linear-gradient(135deg, var(--background) 0%, color-mix(in srgb, var(--purple) 25%, var(--background)) 100%)'
},
{
id: 'theme-diagonal',
name: 'Dégradé diagonal',
description: 'Dégradé diagonal avec plusieurs couleurs',
preview: 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 40%, var(--background)) 50%, color-mix(in srgb, var(--accent) 40%, var(--background)) 100%)'
preview: 'linear-gradient(45deg, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 50%, color-mix(in srgb, var(--accent) 20%, var(--background)) 100%)'
},
{
id: 'theme-radial',
name: 'Dégradé radial',
description: 'Dégradé radial centré avec les couleurs du thème',
preview: 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 50%, var(--background)) 100%)'
preview: 'radial-gradient(circle at center, var(--background) 0%, color-mix(in srgb, var(--primary) 20%, var(--background)) 100%)'
},
{
id: 'theme-sunset',
name: 'Dégradé coucher de soleil',
description: 'Dégradé orange-rouge intense',
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 60%, var(--background)) 100%)'
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--background)) 0%, color-mix(in srgb, var(--destructive) 20%, var(--background)) 100%)'
},
{
id: 'theme-ocean',
name: 'Dégradé océan',
description: 'Dégradé bleu profond',
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 70%, var(--background)) 0%, color-mix(in srgb, var(--primary) 50%, var(--background)) 100%)'
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--blue) 25%, var(--background)) 0%, color-mix(in srgb, var(--primary) 15%, var(--background)) 100%)'
},
{
id: 'theme-forest',
name: 'Dégradé forêt',
description: 'Dégradé vert naturel',
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--green) 60%, var(--background)) 0%, color-mix(in srgb, var(--success) 40%, var(--background)) 100%)'
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--green) 25%, var(--background)) 0%, color-mix(in srgb, var(--success) 15%, var(--background)) 100%)'
},
{
id: 'theme-galaxy',
name: 'Dégradé galaxie',
description: 'Dégradé violet-bleu mystique',
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 70%, var(--background)) 0%, color-mix(in srgb, var(--blue) 50%, var(--background)) 100%)'
preview: 'linear-gradient(135deg, color-mix(in srgb, var(--purple) 25%, var(--background)) 0%, color-mix(in srgb, var(--blue) 20%, var(--background)) 100%)'
}
];