a new start
This commit is contained in:
valknarness
254
lib/themes.ts
Normal file
254
lib/themes.ts
Normal file
@@ -0,0 +1,254 @@
|
||||
export interface ColorPalette {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
colors: {
|
||||
primary: string
|
||||
primaryLight: string
|
||||
primaryDark: string
|
||||
secondary: string
|
||||
secondaryLight: string
|
||||
secondaryDark: string
|
||||
accent: string
|
||||
accentLight: string
|
||||
accentDark: string
|
||||
}
|
||||
gradient: string
|
||||
}
|
||||
|
||||
export const colorPalettes: ColorPalette[] = [
|
||||
{
|
||||
id: 'awesome',
|
||||
name: 'Awesome Purple',
|
||||
description: 'Our signature purple, pink, and gold theme',
|
||||
colors: {
|
||||
primary: '#DA22FF',
|
||||
primaryLight: '#E855FF',
|
||||
primaryDark: '#9733EE',
|
||||
secondary: '#FF69B4',
|
||||
secondaryLight: '#FFB6D9',
|
||||
secondaryDark: '#FF1493',
|
||||
accent: '#FFD700',
|
||||
accentLight: '#FFE44D',
|
||||
accentDark: '#FFC700',
|
||||
},
|
||||
gradient: 'linear-gradient(135deg, #DA22FF 0%, #9733EE 50%, #FFD700 100%)',
|
||||
},
|
||||
{
|
||||
id: 'royal',
|
||||
name: 'Royal Violet',
|
||||
description: 'Deep purple with regal blue and silver accents',
|
||||
colors: {
|
||||
primary: '#7C3AED',
|
||||
primaryLight: '#A78BFA',
|
||||
primaryDark: '#5B21B6',
|
||||
secondary: '#6366F1',
|
||||
secondaryLight: '#818CF8',
|
||||
secondaryDark: '#4F46E5',
|
||||
accent: '#94A3B8',
|
||||
accentLight: '#CBD5E1',
|
||||
accentDark: '#64748B',
|
||||
},
|
||||
gradient: 'linear-gradient(135deg, #7C3AED 0%, #6366F1 50%, #94A3B8 100%)',
|
||||
},
|
||||
{
|
||||
id: 'cosmic',
|
||||
name: 'Cosmic Purple',
|
||||
description: 'Deep space purple with cyan and magenta',
|
||||
colors: {
|
||||
primary: '#8B5CF6',
|
||||
primaryLight: '#A78BFA',
|
||||
primaryDark: '#6D28D9',
|
||||
secondary: '#EC4899',
|
||||
secondaryLight: '#F472B6',
|
||||
secondaryDark: '#DB2777',
|
||||
accent: '#06B6D4',
|
||||
accentLight: '#22D3EE',
|
||||
accentDark: '#0891B2',
|
||||
},
|
||||
gradient: 'linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #06B6D4 100%)',
|
||||
},
|
||||
{
|
||||
id: 'sunset',
|
||||
name: 'Purple Sunset',
|
||||
description: 'Warm purple with orange and coral tones',
|
||||
colors: {
|
||||
primary: '#A855F7',
|
||||
primaryLight: '#C084FC',
|
||||
primaryDark: '#7E22CE',
|
||||
secondary: '#F97316',
|
||||
secondaryLight: '#FB923C',
|
||||
secondaryDark: '#EA580C',
|
||||
accent: '#FB7185',
|
||||
accentLight: '#FDA4AF',
|
||||
accentDark: '#F43F5E',
|
||||
},
|
||||
gradient: 'linear-gradient(135deg, #A855F7 0%, #F97316 50%, #FB7185 100%)',
|
||||
},
|
||||
{
|
||||
id: 'lavender',
|
||||
name: 'Lavender Dreams',
|
||||
description: 'Soft purple with pastel pink and mint',
|
||||
colors: {
|
||||
primary: '#C084FC',
|
||||
primaryLight: '#D8B4FE',
|
||||
primaryDark: '#A855F7',
|
||||
secondary: '#F9A8D4',
|
||||
secondaryLight: '#FBC8E7',
|
||||
secondaryDark: '#F472B6',
|
||||
accent: '#86EFAC',
|
||||
accentLight: '#BBF7D0',
|
||||
accentDark: '#4ADE80',
|
||||
},
|
||||
gradient: 'linear-gradient(135deg, #C084FC 0%, #F9A8D4 50%, #86EFAC 100%)',
|
||||
},
|
||||
{
|
||||
id: 'neon',
|
||||
name: 'Neon Purple',
|
||||
description: 'Electric purple with bright neon accents',
|
||||
colors: {
|
||||
primary: '#D946EF',
|
||||
primaryLight: '#E879F9',
|
||||
primaryDark: '#C026D3',
|
||||
secondary: '#F0ABFC',
|
||||
secondaryLight: '#F5D0FE',
|
||||
secondaryDark: '#E879F9',
|
||||
accent: '#22D3EE',
|
||||
accentLight: '#67E8F9',
|
||||
accentDark: '#06B6D4',
|
||||
},
|
||||
gradient: 'linear-gradient(135deg, #D946EF 0%, #F0ABFC 50%, #22D3EE 100%)',
|
||||
},
|
||||
{
|
||||
id: 'galaxy',
|
||||
name: 'Galaxy Purple',
|
||||
description: 'Deep cosmic purple with star-like shimmer',
|
||||
colors: {
|
||||
primary: '#6D28D9',
|
||||
primaryLight: '#8B5CF6',
|
||||
primaryDark: '#5B21B6',
|
||||
secondary: '#7C3AED',
|
||||
secondaryLight: '#A78BFA',
|
||||
secondaryDark: '#6D28D9',
|
||||
accent: '#FBBF24',
|
||||
accentLight: '#FCD34D',
|
||||
accentDark: '#F59E0B',
|
||||
},
|
||||
gradient: 'linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #FBBF24 100%)',
|
||||
},
|
||||
{
|
||||
id: 'berry',
|
||||
name: 'Berry Blast',
|
||||
description: 'Rich purple with berry and wine tones',
|
||||
colors: {
|
||||
primary: '#9333EA',
|
||||
primaryLight: '#A855F7',
|
||||
primaryDark: '#7E22CE',
|
||||
secondary: '#BE123C',
|
||||
secondaryLight: '#E11D48',
|
||||
secondaryDark: '#9F1239',
|
||||
accent: '#FB923C',
|
||||
accentLight: '#FDBA74',
|
||||
accentDark: '#F97316',
|
||||
},
|
||||
gradient: 'linear-gradient(135deg, #9333EA 0%, #BE123C 50%, #FB923C 100%)',
|
||||
},
|
||||
]
|
||||
|
||||
export type ThemeMode = 'light' | 'dark'
|
||||
|
||||
export interface ThemeConfig {
|
||||
mode: ThemeMode
|
||||
palette: string
|
||||
}
|
||||
|
||||
export function getThemeVariables(palette: ColorPalette, mode: ThemeMode) {
|
||||
const isDark = mode === 'dark'
|
||||
|
||||
return {
|
||||
// Base colors
|
||||
background: isDark ? '0 0% 3.9%' : '0 0% 100%',
|
||||
foreground: isDark ? '0 0% 98%' : '0 0% 3.9%',
|
||||
|
||||
// Card
|
||||
card: isDark ? '0 0% 3.9%' : '0 0% 100%',
|
||||
cardForeground: isDark ? '0 0% 98%' : '0 0% 3.9%',
|
||||
|
||||
// Popover
|
||||
popover: isDark ? '0 0% 3.9%' : '0 0% 100%',
|
||||
popoverForeground: isDark ? '0 0% 98%' : '0 0% 3.9%',
|
||||
|
||||
// Primary (from palette)
|
||||
primary: palette.colors.primary,
|
||||
primaryLight: palette.colors.primaryLight,
|
||||
primaryDark: palette.colors.primaryDark,
|
||||
primaryForeground: isDark ? '0 0% 9%' : '0 0% 98%',
|
||||
|
||||
// Secondary (from palette)
|
||||
secondary: palette.colors.secondary,
|
||||
secondaryLight: palette.colors.secondaryLight,
|
||||
secondaryDark: palette.colors.secondaryDark,
|
||||
secondaryForeground: isDark ? '0 0% 98%' : '0 0% 9%',
|
||||
|
||||
// Accent (from palette)
|
||||
accent: palette.colors.accent,
|
||||
accentLight: palette.colors.accentLight,
|
||||
accentDark: palette.colors.accentDark,
|
||||
accentForeground: isDark ? '0 0% 98%' : '0 0% 9%',
|
||||
|
||||
// Muted
|
||||
muted: isDark ? '0 0% 14.9%' : '0 0% 96.1%',
|
||||
mutedForeground: isDark ? '0 0% 63.9%' : '0 0% 45.1%',
|
||||
|
||||
// Destructive
|
||||
destructive: isDark ? '0 62.8% 30.6%' : '0 84.2% 60.2%',
|
||||
destructiveForeground: '0 0% 98%',
|
||||
|
||||
// Border
|
||||
border: isDark ? '0 0% 14.9%' : '0 0% 89.8%',
|
||||
input: isDark ? '0 0% 14.9%' : '0 0% 89.8%',
|
||||
ring: palette.colors.primary,
|
||||
|
||||
// Gradient
|
||||
gradient: palette.gradient,
|
||||
}
|
||||
}
|
||||
|
||||
export function hexToHsl(hex: string): string {
|
||||
// Remove the hash if present
|
||||
hex = hex.replace(/^#/, '')
|
||||
|
||||
// Parse the hex values
|
||||
const r = parseInt(hex.substring(0, 2), 16) / 255
|
||||
const g = parseInt(hex.substring(2, 4), 16) / 255
|
||||
const b = parseInt(hex.substring(4, 6), 16) / 255
|
||||
|
||||
const max = Math.max(r, g, b)
|
||||
const min = Math.min(r, g, b)
|
||||
let h = 0
|
||||
let s = 0
|
||||
const l = (max + min) / 2
|
||||
|
||||
if (max !== min) {
|
||||
const d = max - min
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
|
||||
|
||||
switch (max) {
|
||||
case r:
|
||||
h = ((g - b) / d + (g < b ? 6 : 0)) / 6
|
||||
break
|
||||
case g:
|
||||
h = ((b - r) / d + 2) / 6
|
||||
break
|
||||
case b:
|
||||
h = ((r - g) / d + 4) / 6
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
h = Math.round(h * 360)
|
||||
s = Math.round(s * 100)
|
||||
const lightness = Math.round(l * 100)
|
||||
|
||||
return `${h} ${s}% ${lightness}%`
|
||||
}
|
||||
Reference in New Issue
Block a user