ewancroft.uk
+1
src/app.css
+1
src/app.css
+231
src/lib/components/layout/ColorThemeToggle.svelte
+231
src/lib/components/layout/ColorThemeToggle.svelte
···
1
+
<script lang="ts">
2
+
import { onMount } from 'svelte';
3
+
import { Palette, Check } from '@lucide/svelte';
4
+
import { colorTheme, type ColorTheme } from '$lib/stores/colorTheme';
5
+
6
+
let isOpen = $state(false);
7
+
let mounted = $state(false);
8
+
let currentTheme = $state<ColorTheme>('sage');
9
+
10
+
interface ThemeDefinition {
11
+
value: ColorTheme;
12
+
label: string;
13
+
description: string;
14
+
color: string;
15
+
category: 'neutral' | 'warm' | 'cool' | 'vibrant';
16
+
}
17
+
18
+
const themes: ThemeDefinition[] = [
19
+
// Neutral themes
20
+
{
21
+
value: 'sage',
22
+
label: 'Sage',
23
+
description: 'Calm green-blue',
24
+
color: 'oklch(77.77% 0.182 127.42)',
25
+
category: 'neutral'
26
+
},
27
+
{
28
+
value: 'monochrome',
29
+
label: 'Monochrome',
30
+
description: 'Pure greyscale',
31
+
color: 'oklch(78% 0 0)',
32
+
category: 'neutral'
33
+
},
34
+
{
35
+
value: 'slate',
36
+
label: 'Slate',
37
+
description: 'Blue-grey',
38
+
color: 'oklch(78.5% 0.095 230)',
39
+
category: 'neutral'
40
+
},
41
+
// Warm themes
42
+
{
43
+
value: 'ruby',
44
+
label: 'Ruby',
45
+
description: 'Bold red',
46
+
color: 'oklch(81.5% 0.228 10)',
47
+
category: 'warm'
48
+
},
49
+
{
50
+
value: 'coral',
51
+
label: 'Coral',
52
+
description: 'Orange-pink',
53
+
color: 'oklch(81.8% 0.212 20)',
54
+
category: 'warm'
55
+
},
56
+
{
57
+
value: 'sunset',
58
+
label: 'Sunset',
59
+
description: 'Warm orange',
60
+
color: 'oklch(80.5% 0.208 45)',
61
+
category: 'warm'
62
+
},
63
+
{
64
+
value: 'amber',
65
+
label: 'Amber',
66
+
description: 'Bright yellow',
67
+
color: 'oklch(82.8% 0.195 85)',
68
+
category: 'warm'
69
+
},
70
+
// Cool themes
71
+
{
72
+
value: 'forest',
73
+
label: 'Forest',
74
+
description: 'Natural green',
75
+
color: 'oklch(79.5% 0.195 145)',
76
+
category: 'cool'
77
+
},
78
+
{
79
+
value: 'teal',
80
+
label: 'Teal',
81
+
description: 'Blue-green',
82
+
color: 'oklch(79% 0.205 195)',
83
+
category: 'cool'
84
+
},
85
+
{
86
+
value: 'ocean',
87
+
label: 'Ocean',
88
+
description: 'Deep blue',
89
+
color: 'oklch(78.2% 0.188 240)',
90
+
category: 'cool'
91
+
},
92
+
// Vibrant themes
93
+
{
94
+
value: 'lavender',
95
+
label: 'Lavender',
96
+
description: 'Soft purple',
97
+
color: 'oklch(82% 0.215 295)',
98
+
category: 'vibrant'
99
+
},
100
+
{
101
+
value: 'rose',
102
+
label: 'Rose',
103
+
description: 'Pink-red',
104
+
color: 'oklch(83.5% 0.230 350)',
105
+
category: 'vibrant'
106
+
}
107
+
];
108
+
109
+
// Group themes by category
110
+
const themesByCategory = {
111
+
neutral: themes.filter((t) => t.category === 'neutral'),
112
+
warm: themes.filter((t) => t.category === 'warm'),
113
+
cool: themes.filter((t) => t.category === 'cool'),
114
+
vibrant: themes.filter((t) => t.category === 'vibrant')
115
+
};
116
+
117
+
const categoryLabels = {
118
+
neutral: 'Neutral',
119
+
warm: 'Warm',
120
+
cool: 'Cool',
121
+
vibrant: 'Vibrant'
122
+
};
123
+
124
+
onMount(() => {
125
+
colorTheme.init();
126
+
127
+
const unsubscribe = colorTheme.subscribe((state) => {
128
+
currentTheme = state.current;
129
+
mounted = state.mounted;
130
+
});
131
+
132
+
// Close dropdown when clicking outside
133
+
const handleClickOutside = (e: MouseEvent) => {
134
+
if (isOpen) {
135
+
const target = e.target as HTMLElement;
136
+
if (!target.closest('.color-theme-dropdown')) {
137
+
isOpen = false;
138
+
}
139
+
}
140
+
};
141
+
document.addEventListener('click', handleClickOutside);
142
+
143
+
// Close on Escape key
144
+
const handleEscape = (e: KeyboardEvent) => {
145
+
if (e.key === 'Escape' && isOpen) {
146
+
isOpen = false;
147
+
}
148
+
};
149
+
document.addEventListener('keydown', handleEscape);
150
+
151
+
return () => {
152
+
unsubscribe();
153
+
document.removeEventListener('click', handleClickOutside);
154
+
document.removeEventListener('keydown', handleEscape);
155
+
};
156
+
});
157
+
158
+
function toggleDropdown() {
159
+
isOpen = !isOpen;
160
+
}
161
+
162
+
function selectTheme(theme: ColorTheme) {
163
+
colorTheme.setTheme(theme);
164
+
isOpen = false;
165
+
}
166
+
</script>
167
+
168
+
<div class="color-theme-dropdown relative">
169
+
<button
170
+
onclick={toggleDropdown}
171
+
class="relative flex h-10 w-10 items-center justify-center rounded-lg bg-canvas-200 text-ink-900 transition-all hover:bg-canvas-300 dark:bg-canvas-800 dark:text-ink-50 dark:hover:bg-canvas-700"
172
+
aria-label="Change color theme"
173
+
aria-expanded={isOpen}
174
+
aria-controls="color-theme-menu"
175
+
type="button"
176
+
>
177
+
{#if mounted}
178
+
<Palette class="h-5 w-5" aria-hidden="true" />
179
+
{:else}
180
+
<div class="h-5 w-5 animate-pulse rounded bg-canvas-300 dark:bg-canvas-700"></div>
181
+
{/if}
182
+
</button>
183
+
184
+
{#if isOpen}
185
+
<div
186
+
id="color-theme-menu"
187
+
class="absolute right-0 top-full z-50 mt-2 w-72 rounded-lg border border-canvas-200 bg-canvas-50 shadow-xl dark:border-canvas-800 dark:bg-canvas-950"
188
+
role="menu"
189
+
>
190
+
<div class="max-h-[32rem] overflow-y-auto p-2">
191
+
<div class="mb-2 px-3 py-2 text-xs font-semibold uppercase text-ink-600 dark:text-ink-400">
192
+
Color Themes
193
+
</div>
194
+
195
+
{#each Object.entries(themesByCategory) as [category, categoryThemes]}
196
+
<div class="mb-3">
197
+
<div class="mb-1.5 px-3 text-xs font-medium text-ink-500 dark:text-ink-500">
198
+
{categoryLabels[category]}
199
+
</div>
200
+
<div class="space-y-1">
201
+
{#each categoryThemes as theme}
202
+
<button
203
+
onclick={() => selectTheme(theme.value)}
204
+
class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors hover:bg-canvas-100 focus-visible:bg-canvas-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:hover:bg-canvas-900 dark:focus-visible:bg-canvas-900"
205
+
role="menuitem"
206
+
aria-current={currentTheme === theme.value ? 'true' : undefined}
207
+
>
208
+
<div
209
+
class="h-6 w-6 shrink-0 rounded-md border border-canvas-300 shadow-sm dark:border-canvas-700"
210
+
style="background-color: {theme.color}"
211
+
aria-hidden="true"
212
+
></div>
213
+
<div class="flex-1 min-w-0">
214
+
<div class="font-medium text-ink-900 dark:text-ink-50">{theme.label}</div>
215
+
<div class="text-xs text-ink-600 dark:text-ink-400">{theme.description}</div>
216
+
</div>
217
+
{#if currentTheme === theme.value}
218
+
<Check
219
+
class="h-5 w-5 shrink-0 text-primary-600 dark:text-primary-400"
220
+
aria-hidden="true"
221
+
/>
222
+
{/if}
223
+
</button>
224
+
{/each}
225
+
</div>
226
+
</div>
227
+
{/each}
228
+
</div>
229
+
</div>
230
+
{/if}
231
+
</div>
+3
src/lib/components/layout/Header.svelte
+3
src/lib/components/layout/Header.svelte
···
5
5
import * as LucideIcons from '@lucide/svelte';
6
6
import ThemeToggle from './ThemeToggle.svelte';
7
7
import WolfToggle from './WolfToggle.svelte';
8
+
import ColorThemeToggle from './ColorThemeToggle.svelte';
8
9
import { navItems } from '$lib/data/navItems';
9
10
import { fetchProfile, type ProfileData } from '$lib/services/atproto';
10
11
import { defaultSiteMeta, createSiteMeta, type SiteMetadata } from '$lib/helper/siteMeta';
···
154
155
155
156
<!-- Desktop Toggles -->
156
157
<div class="flex items-center gap-2">
158
+
<ColorThemeToggle />
157
159
<WolfToggle />
158
160
<ThemeToggle />
159
161
</div>
···
161
163
162
164
<!-- Mobile Menu Button + Toggles -->
163
165
<div class="flex items-center gap-2 md:hidden">
166
+
<ColorThemeToggle />
164
167
<WolfToggle />
165
168
<ThemeToggle />
166
169
<button
+62
src/lib/stores/colorTheme.ts
+62
src/lib/stores/colorTheme.ts
···
1
+
import { writable } from 'svelte/store';
2
+
import { browser } from '$app/environment';
3
+
4
+
export type ColorTheme =
5
+
| 'sage' // Default (existing)
6
+
| 'monochrome' // Greyscale
7
+
// Rainbow spectrum
8
+
| 'ruby' // Red
9
+
| 'sunset' // Orange
10
+
| 'amber' // Yellow
11
+
| 'forest' // Green
12
+
| 'ocean' // Blue
13
+
| 'lavender' // Purple
14
+
| 'rose' // Pink
15
+
// Additional variations
16
+
| 'teal' // Blue-green
17
+
| 'coral' // Orange-pink
18
+
| 'slate'; // Blue-grey
19
+
20
+
interface ColorThemeState {
21
+
current: ColorTheme;
22
+
mounted: boolean;
23
+
}
24
+
25
+
const STORAGE_KEY = 'color-theme';
26
+
const DEFAULT_THEME: ColorTheme = 'forest';
27
+
28
+
function createColorThemeStore() {
29
+
const { subscribe, set, update } = writable<ColorThemeState>({
30
+
current: DEFAULT_THEME,
31
+
mounted: false
32
+
});
33
+
34
+
return {
35
+
subscribe,
36
+
init: () => {
37
+
if (!browser) return;
38
+
39
+
const stored = localStorage.getItem(STORAGE_KEY) as ColorTheme | null;
40
+
const theme = stored || DEFAULT_THEME;
41
+
42
+
update((state) => ({ ...state, current: theme, mounted: true }));
43
+
applyTheme(theme);
44
+
},
45
+
setTheme: (theme: ColorTheme) => {
46
+
if (!browser) return;
47
+
48
+
localStorage.setItem(STORAGE_KEY, theme);
49
+
update((state) => ({ ...state, current: theme }));
50
+
applyTheme(theme);
51
+
}
52
+
};
53
+
}
54
+
55
+
function applyTheme(theme: ColorTheme) {
56
+
if (!browser) return;
57
+
58
+
const root = document.documentElement;
59
+
root.setAttribute('data-color-theme', theme);
60
+
}
61
+
62
+
export const colorTheme = createColorThemeStore();
+15
src/lib/styles/themes.css
+15
src/lib/styles/themes.css
···
1
+
/* Color Theme System - Modular Theme Imports */
2
+
/* Each theme is defined in its own file for better organization */
3
+
4
+
@import './themes/sage.css';
5
+
@import './themes/monochrome.css';
6
+
@import './themes/ruby.css';
7
+
@import './themes/sunset.css';
8
+
@import './themes/amber.css';
9
+
@import './themes/forest.css';
10
+
@import './themes/teal.css';
11
+
@import './themes/ocean.css';
12
+
@import './themes/lavender.css';
13
+
@import './themes/rose.css';
14
+
@import './themes/coral.css';
15
+
@import './themes/slate.css';
+73
src/lib/styles/themes/amber.css
+73
src/lib/styles/themes/amber.css
···
1
+
/* ============================================================================
2
+
AMBER THEME - Yellow
3
+
Primary: Bright yellow
4
+
Secondary: Lime green
5
+
Accent: Gold
6
+
Hue: 85° (yellow-green, warmer yellow)
7
+
============================================================================ */
8
+
[data-color-theme='amber'] {
9
+
/* Primary - Yellow (85°) */
10
+
--color-primary-50: light-dark(oklch(19.5% 0.035 85), oklch(97.9% 0.023 85));
11
+
--color-primary-100: light-dark(oklch(28.2% 0.058 85), oklch(95% 0.045 85));
12
+
--color-primary-200: light-dark(oklch(43.5% 0.098 85), oklch(90% 0.088 85));
13
+
--color-primary-300: light-dark(oklch(57.8% 0.132 85), oklch(81.5% 0.128 85));
14
+
--color-primary-400: light-dark(oklch(70.8% 0.165 85), oklch(72.5% 0.162 85));
15
+
--color-primary-500: light-dark(oklch(82.8% 0.195 85), oklch(63.5% 0.195 85));
16
+
--color-primary-600: light-dark(oklch(85.5% 0.162 85), oklch(53.5% 0.165 85));
17
+
--color-primary-700: light-dark(oklch(88.5% 0.128 85), oklch(43.5% 0.132 85));
18
+
--color-primary-800: light-dark(oklch(92% 0.088 85), oklch(33.5% 0.098 85));
19
+
--color-primary-900: light-dark(oklch(96% 0.045 85), oklch(24.5% 0.058 85));
20
+
--color-primary-950: light-dark(oklch(98.2% 0.023 85), oklch(17% 0.035 85));
21
+
22
+
/* Ink - Yellow-tinted text (85°) */
23
+
--color-ink-50: light-dark(oklch(18% 0.023 85), oklch(97.8% 0.015 85));
24
+
--color-ink-100: light-dark(oklch(26% 0.042 85), oklch(93.5% 0.032 85));
25
+
--color-ink-200: light-dark(oklch(39.5% 0.072 85), oklch(85.5% 0.062 85));
26
+
--color-ink-300: light-dark(oklch(51.5% 0.100 85), oklch(75.5% 0.092 85));
27
+
--color-ink-400: light-dark(oklch(63% 0.125 85), oklch(65.5% 0.120 85));
28
+
--color-ink-500: light-dark(oklch(74% 0.150 85), oklch(55.5% 0.150 85));
29
+
--color-ink-600: light-dark(oklch(78.8% 0.120 85), oklch(45.5% 0.125 85));
30
+
--color-ink-700: light-dark(oklch(84% 0.092 85), oklch(35.5% 0.100 85));
31
+
--color-ink-800: light-dark(oklch(89.5% 0.062 85), oklch(25.5% 0.072 85));
32
+
--color-ink-900: light-dark(oklch(94.8% 0.032 85), oklch(18.5% 0.042 85));
33
+
--color-ink-950: light-dark(oklch(97.8% 0.015 85), oklch(12.5% 0.023 85));
34
+
35
+
/* Canvas - Yellow-tinted backgrounds (85°) */
36
+
--color-canvas-50: light-dark(oklch(18.2% 0.026 85), oklch(98.6% 0.009 85));
37
+
--color-canvas-100: light-dark(oklch(26.2% 0.047 85), oklch(96.8% 0.020 85));
38
+
--color-canvas-200: light-dark(oklch(40% 0.082 85), oklch(92.5% 0.045 85));
39
+
--color-canvas-300: light-dark(oklch(52.8% 0.110 85), oklch(86.5% 0.072 85));
40
+
--color-canvas-400: light-dark(oklch(65% 0.138 85), oklch(80.5% 0.102 85));
41
+
--color-canvas-500: light-dark(oklch(76.5% 0.165 85), oklch(76.5% 0.128 85));
42
+
--color-canvas-600: light-dark(oklch(80.5% 0.102 85), oklch(65% 0.138 85));
43
+
--color-canvas-700: light-dark(oklch(86.5% 0.072 85), oklch(52.8% 0.110 85));
44
+
--color-canvas-800: light-dark(oklch(92.5% 0.045 85), oklch(40% 0.082 85));
45
+
--color-canvas-900: light-dark(oklch(96.8% 0.020 85), oklch(26.2% 0.047 85));
46
+
--color-canvas-950: light-dark(oklch(98.6% 0.009 85), oklch(18.2% 0.026 85));
47
+
48
+
/* Secondary - Lime Green (115°) */
49
+
--color-secondary-50: light-dark(oklch(19% 0.038 115), oklch(97.9% 0.025 115));
50
+
--color-secondary-100: light-dark(oklch(27.5% 0.062 115), oklch(94.8% 0.048 115));
51
+
--color-secondary-200: light-dark(oklch(42.5% 0.105 115), oklch(89.8% 0.095 115));
52
+
--color-secondary-300: light-dark(oklch(56.5% 0.142 115), oklch(81% 0.138 115));
53
+
--color-secondary-400: light-dark(oklch(69.5% 0.175 115), oklch(71.5% 0.172 115));
54
+
--color-secondary-500: light-dark(oklch(81.5% 0.208 115), oklch(62% 0.208 115));
55
+
--color-secondary-600: light-dark(oklch(84.5% 0.172 115), oklch(51.5% 0.175 115));
56
+
--color-secondary-700: light-dark(oklch(88% 0.138 115), oklch(41.5% 0.142 115));
57
+
--color-secondary-800: light-dark(oklch(91.8% 0.095 115), oklch(31.5% 0.105 115));
58
+
--color-secondary-900: light-dark(oklch(95.8% 0.048 115), oklch(23% 0.062 115));
59
+
--color-secondary-950: light-dark(oklch(98.2% 0.025 115), oklch(16.2% 0.038 115));
60
+
61
+
/* Accent - Gold (60°) */
62
+
--color-accent-50: light-dark(oklch(19.3% 0.037 60), oklch(98% 0.024 60));
63
+
--color-accent-100: light-dark(oklch(28% 0.060 60), oklch(95.2% 0.046 60));
64
+
--color-accent-200: light-dark(oklch(43% 0.102 60), oklch(90.2% 0.092 60));
65
+
--color-accent-300: light-dark(oklch(57.2% 0.138 60), oklch(81.8% 0.132 60));
66
+
--color-accent-400: light-dark(oklch(70% 0.172 60), oklch(72.5% 0.168 60));
67
+
--color-accent-500: light-dark(oklch(82% 0.205 60), oklch(63.2% 0.205 60));
68
+
--color-accent-600: light-dark(oklch(85% 0.168 60), oklch(53% 0.172 60));
69
+
--color-accent-700: light-dark(oklch(88.5% 0.132 60), oklch(43% 0.138 60));
70
+
--color-accent-800: light-dark(oklch(92.5% 0.092 60), oklch(33% 0.102 60));
71
+
--color-accent-900: light-dark(oklch(96.2% 0.046 60), oklch(24.2% 0.060 60));
72
+
--color-accent-950: light-dark(oklch(98.5% 0.024 60), oklch(17% 0.037 60));
73
+
}
+73
src/lib/styles/themes/coral.css
+73
src/lib/styles/themes/coral.css
···
1
+
/* ============================================================================
2
+
CORAL THEME - Orange-pink
3
+
Primary: Vibrant coral
4
+
Secondary: Peach
5
+
Accent: Salmon
6
+
Hue: 20° (coral/salmon)
7
+
============================================================================ */
8
+
[data-color-theme='coral'] {
9
+
/* Primary - Coral (20°) */
10
+
--color-primary-50: light-dark(oklch(19.2% 0.040 20), oklch(97.9% 0.027 20));
11
+
--color-primary-100: light-dark(oklch(28% 0.065 20), oklch(94.8% 0.050 20));
12
+
--color-primary-200: light-dark(oklch(43% 0.108 20), oklch(89.5% 0.098 20));
13
+
--color-primary-300: light-dark(oklch(57% 0.145 20), oklch(80.8% 0.142 20));
14
+
--color-primary-400: light-dark(oklch(69.8% 0.180 20), oklch(71.5% 0.178 20));
15
+
--color-primary-500: light-dark(oklch(81.8% 0.212 20), oklch(62% 0.212 20));
16
+
--color-primary-600: light-dark(oklch(84.8% 0.178 20), oklch(51.5% 0.180 20));
17
+
--color-primary-700: light-dark(oklch(88.2% 0.142 20), oklch(41.5% 0.145 20));
18
+
--color-primary-800: light-dark(oklch(92% 0.098 20), oklch(31.5% 0.108 20));
19
+
--color-primary-900: light-dark(oklch(96% 0.050 20), oklch(23% 0.065 20));
20
+
--color-primary-950: light-dark(oklch(98.2% 0.027 20), oklch(16.2% 0.040 20));
21
+
22
+
/* Ink - Coral-tinted text (20°) */
23
+
--color-ink-50: light-dark(oklch(17.8% 0.027 20), oklch(97.6% 0.018 20));
24
+
--color-ink-100: light-dark(oklch(25.5% 0.048 20), oklch(93.2% 0.037 20));
25
+
--color-ink-200: light-dark(oklch(39% 0.082 20), oklch(85.2% 0.070 20));
26
+
--color-ink-300: light-dark(oklch(51% 0.115 20), oklch(75.2% 0.102 20));
27
+
--color-ink-400: light-dark(oklch(62.5% 0.145 20), oklch(65.2% 0.132 20));
28
+
--color-ink-500: light-dark(oklch(73.5% 0.175 20), oklch(55.2% 0.175 20));
29
+
--color-ink-600: light-dark(oklch(78.5% 0.132 20), oklch(45.2% 0.145 20));
30
+
--color-ink-700: light-dark(oklch(83.8% 0.102 20), oklch(35.2% 0.115 20));
31
+
--color-ink-800: light-dark(oklch(89.2% 0.070 20), oklch(25.2% 0.082 20));
32
+
--color-ink-900: light-dark(oklch(94.5% 0.037 20), oklch(18.2% 0.048 20));
33
+
--color-ink-950: light-dark(oklch(97.6% 0.018 20), oklch(12.5% 0.027 20));
34
+
35
+
/* Canvas - Coral-tinted backgrounds (20°) */
36
+
--color-canvas-50: light-dark(oklch(18% 0.030 20), oklch(98.5% 0.011 20));
37
+
--color-canvas-100: light-dark(oklch(26% 0.053 20), oklch(96.5% 0.024 20));
38
+
--color-canvas-200: light-dark(oklch(39.8% 0.092 20), oklch(92% 0.050 20));
39
+
--color-canvas-300: light-dark(oklch(52.5% 0.125 20), oklch(86% 0.082 20));
40
+
--color-canvas-400: light-dark(oklch(64.5% 0.155 20), oklch(80% 0.115 20));
41
+
--color-canvas-500: light-dark(oklch(76% 0.185 20), oklch(76% 0.145 20));
42
+
--color-canvas-600: light-dark(oklch(80% 0.115 20), oklch(64.5% 0.155 20));
43
+
--color-canvas-700: light-dark(oklch(86% 0.082 20), oklch(52.5% 0.125 20));
44
+
--color-canvas-800: light-dark(oklch(92% 0.050 20), oklch(39.8% 0.092 20));
45
+
--color-canvas-900: light-dark(oklch(96.5% 0.024 20), oklch(26% 0.053 20));
46
+
--color-canvas-950: light-dark(oklch(98.5% 0.011 20), oklch(18% 0.030 20));
47
+
48
+
/* Secondary - Peach (35°) */
49
+
--color-secondary-50: light-dark(oklch(19.3% 0.038 35), oklch(98% 0.025 35));
50
+
--color-secondary-100: light-dark(oklch(28% 0.062 35), oklch(95% 0.048 35));
51
+
--color-secondary-200: light-dark(oklch(43% 0.105 35), oklch(90% 0.095 35));
52
+
--color-secondary-300: light-dark(oklch(57.2% 0.142 35), oklch(81.5% 0.138 35));
53
+
--color-secondary-400: light-dark(oklch(70% 0.175 35), oklch(72% 0.172 35));
54
+
--color-secondary-500: light-dark(oklch(82% 0.208 35), oklch(62.5% 0.208 35));
55
+
--color-secondary-600: light-dark(oklch(85% 0.172 35), oklch(52% 0.175 35));
56
+
--color-secondary-700: light-dark(oklch(88.5% 0.138 35), oklch(42% 0.142 35));
57
+
--color-secondary-800: light-dark(oklch(92.5% 0.095 35), oklch(32% 0.105 35));
58
+
--color-secondary-900: light-dark(oklch(96.2% 0.048 35), oklch(23.5% 0.062 35));
59
+
--color-secondary-950: light-dark(oklch(98.5% 0.025 35), oklch(16.8% 0.038 35));
60
+
61
+
/* Accent - Salmon (10°) */
62
+
--color-accent-50: light-dark(oklch(19% 0.042 10), oklch(97.8% 0.028 10));
63
+
--color-accent-100: light-dark(oklch(27.5% 0.068 10), oklch(94.5% 0.052 10));
64
+
--color-accent-200: light-dark(oklch(42.5% 0.115 10), oklch(89.5% 0.105 10));
65
+
--color-accent-300: light-dark(oklch(56.5% 0.155 10), oklch(80.5% 0.148 10));
66
+
--color-accent-400: light-dark(oklch(69.5% 0.192 10), oklch(71% 0.185 10));
67
+
--color-accent-500: light-dark(oklch(81.5% 0.228 10), oklch(61.5% 0.228 10));
68
+
--color-accent-600: light-dark(oklch(84.5% 0.185 10), oklch(51% 0.192 10));
69
+
--color-accent-700: light-dark(oklch(88% 0.148 10), oklch(41% 0.155 10));
70
+
--color-accent-800: light-dark(oklch(91.8% 0.105 10), oklch(31% 0.115 10));
71
+
--color-accent-900: light-dark(oklch(95.8% 0.052 10), oklch(22.5% 0.068 10));
72
+
--color-accent-950: light-dark(oklch(98% 0.028 10), oklch(16% 0.042 10));
73
+
}
+73
src/lib/styles/themes/forest.css
+73
src/lib/styles/themes/forest.css
···
1
+
/* ============================================================================
2
+
FOREST THEME - Green
3
+
Primary: Natural green
4
+
Secondary: Yellow-green
5
+
Accent: Deep emerald
6
+
Hue: 145° (green)
7
+
============================================================================ */
8
+
[data-color-theme='forest'] {
9
+
/* Primary - Green (145°) */
10
+
--color-primary-50: light-dark(oklch(18.8% 0.036 145), oklch(97.6% 0.024 145));
11
+
--color-primary-100: light-dark(oklch(27.2% 0.060 145), oklch(94.3% 0.046 145));
12
+
--color-primary-200: light-dark(oklch(41.8% 0.098 145), oklch(88.8% 0.090 145));
13
+
--color-primary-300: light-dark(oklch(55.5% 0.132 145), oklch(79.2% 0.130 145));
14
+
--color-primary-400: light-dark(oklch(67.8% 0.165 145), oklch(69.5% 0.168 145));
15
+
--color-primary-500: light-dark(oklch(79.5% 0.195 145), oklch(59.8% 0.195 145));
16
+
--color-primary-600: light-dark(oklch(82.8% 0.168 145), oklch(49.2% 0.165 145));
17
+
--color-primary-700: light-dark(oklch(86.8% 0.130 145), oklch(39.5% 0.132 145));
18
+
--color-primary-800: light-dark(oklch(91% 0.090 145), oklch(29.8% 0.098 145));
19
+
--color-primary-900: light-dark(oklch(95.5% 0.046 145), oklch(21.5% 0.060 145));
20
+
--color-primary-950: light-dark(oklch(97.9% 0.024 145), oklch(15.2% 0.036 145));
21
+
22
+
/* Ink - Green-tinted text (145°) */
23
+
--color-ink-50: light-dark(oklch(17.6% 0.024 145), oklch(97.4% 0.016 145));
24
+
--color-ink-100: light-dark(oklch(25.2% 0.044 145), oklch(93% 0.034 145));
25
+
--color-ink-200: light-dark(oklch(38.5% 0.075 145), oklch(85% 0.065 145));
26
+
--color-ink-300: light-dark(oklch(50.8% 0.105 145), oklch(75% 0.095 145));
27
+
--color-ink-400: light-dark(oklch(62.5% 0.132 145), oklch(65% 0.125 145));
28
+
--color-ink-500: light-dark(oklch(73.5% 0.158 145), oklch(55% 0.158 145));
29
+
--color-ink-600: light-dark(oklch(78.5% 0.125 145), oklch(45% 0.132 145));
30
+
--color-ink-700: light-dark(oklch(83.8% 0.095 145), oklch(35% 0.105 145));
31
+
--color-ink-800: light-dark(oklch(89.2% 0.065 145), oklch(25% 0.075 145));
32
+
--color-ink-900: light-dark(oklch(94.5% 0.034 145), oklch(18% 0.044 145));
33
+
--color-ink-950: light-dark(oklch(97.4% 0.016 145), oklch(12% 0.024 145));
34
+
35
+
/* Canvas - Green-tinted backgrounds (145°) */
36
+
--color-canvas-50: light-dark(oklch(17.9% 0.028 145), oklch(98.4% 0.010 145));
37
+
--color-canvas-100: light-dark(oklch(25.9% 0.050 145), oklch(96.4% 0.022 145));
38
+
--color-canvas-200: light-dark(oklch(39.8% 0.088 145), oklch(92% 0.048 145));
39
+
--color-canvas-300: light-dark(oklch(52.5% 0.118 145), oklch(86% 0.078 145));
40
+
--color-canvas-400: light-dark(oklch(64.5% 0.148 145), oklch(80% 0.108 145));
41
+
--color-canvas-500: light-dark(oklch(76% 0.178 145), oklch(76% 0.135 145));
42
+
--color-canvas-600: light-dark(oklch(80% 0.108 145), oklch(64.5% 0.148 145));
43
+
--color-canvas-700: light-dark(oklch(86% 0.078 145), oklch(52.5% 0.118 145));
44
+
--color-canvas-800: light-dark(oklch(92% 0.048 145), oklch(39.8% 0.088 145));
45
+
--color-canvas-900: light-dark(oklch(96.4% 0.022 145), oklch(25.9% 0.050 145));
46
+
--color-canvas-950: light-dark(oklch(98.4% 0.010 145), oklch(17.9% 0.028 145));
47
+
48
+
/* Secondary - Yellow-Green (125°) */
49
+
--color-secondary-50: light-dark(oklch(19.2% 0.038 125), oklch(97.8% 0.025 125));
50
+
--color-secondary-100: light-dark(oklch(27.8% 0.062 125), oklch(94.5% 0.048 125));
51
+
--color-secondary-200: light-dark(oklch(42.8% 0.105 125), oklch(89.2% 0.095 125));
52
+
--color-secondary-300: light-dark(oklch(56.8% 0.142 125), oklch(80.2% 0.138 125));
53
+
--color-secondary-400: light-dark(oklch(69.8% 0.175 125), oklch(70.5% 0.172 125));
54
+
--color-secondary-500: light-dark(oklch(81.8% 0.208 125), oklch(60.8% 0.208 125));
55
+
--color-secondary-600: light-dark(oklch(84.8% 0.172 125), oklch(50.2% 0.175 125));
56
+
--color-secondary-700: light-dark(oklch(88.2% 0.138 125), oklch(40.2% 0.142 125));
57
+
--color-secondary-800: light-dark(oklch(92% 0.095 125), oklch(30.5% 0.105 125));
58
+
--color-secondary-900: light-dark(oklch(96% 0.048 125), oklch(22.2% 0.062 125));
59
+
--color-secondary-950: light-dark(oklch(98.2% 0.025 125), oklch(15.8% 0.038 125));
60
+
61
+
/* Accent - Deep Emerald (160°) */
62
+
--color-accent-50: light-dark(oklch(19% 0.040 160), oklch(97.8% 0.027 160));
63
+
--color-accent-100: light-dark(oklch(27.5% 0.065 160), oklch(94.5% 0.050 160));
64
+
--color-accent-200: light-dark(oklch(42.5% 0.110 160), oklch(89.5% 0.098 160));
65
+
--color-accent-300: light-dark(oklch(56.5% 0.148 160), oklch(80.5% 0.142 160));
66
+
--color-accent-400: light-dark(oklch(69.5% 0.185 160), oklch(70.5% 0.178 160));
67
+
--color-accent-500: light-dark(oklch(81.5% 0.220 160), oklch(61% 0.220 160));
68
+
--color-accent-600: light-dark(oklch(84.5% 0.178 160), oklch(50.5% 0.185 160));
69
+
--color-accent-700: light-dark(oklch(88% 0.142 160), oklch(40.5% 0.148 160));
70
+
--color-accent-800: light-dark(oklch(91.8% 0.098 160), oklch(30.5% 0.110 160));
71
+
--color-accent-900: light-dark(oklch(95.8% 0.050 160), oklch(22.5% 0.065 160));
72
+
--color-accent-950: light-dark(oklch(98% 0.027 160), oklch(16% 0.040 160));
73
+
}
+73
src/lib/styles/themes/lavender.css
+73
src/lib/styles/themes/lavender.css
···
1
+
/* ============================================================================
2
+
LAVENDER THEME - Purple
3
+
Primary: Soft purple
4
+
Secondary: Violet
5
+
Accent: Deep plum
6
+
Hue: 295° (purple/violet)
7
+
============================================================================ */
8
+
[data-color-theme='lavender'] {
9
+
/* Primary - Lavender (295°) */
10
+
--color-primary-50: light-dark(oklch(19.5% 0.042 295), oklch(98% 0.028 295));
11
+
--color-primary-100: light-dark(oklch(28.2% 0.068 295), oklch(95% 0.052 295));
12
+
--color-primary-200: light-dark(oklch(43.5% 0.112 295), oklch(90% 0.098 295));
13
+
--color-primary-300: light-dark(oklch(57.5% 0.148 295), oklch(81.5% 0.142 295));
14
+
--color-primary-400: light-dark(oklch(70.2% 0.182 295), oklch(72% 0.178 295));
15
+
--color-primary-500: light-dark(oklch(82% 0.215 295), oklch(62.5% 0.215 295));
16
+
--color-primary-600: light-dark(oklch(85% 0.178 295), oklch(52% 0.182 295));
17
+
--color-primary-700: light-dark(oklch(88.2% 0.142 295), oklch(42% 0.148 295));
18
+
--color-primary-800: light-dark(oklch(92% 0.098 295), oklch(32% 0.112 295));
19
+
--color-primary-900: light-dark(oklch(96% 0.052 295), oklch(23.5% 0.068 295));
20
+
--color-primary-950: light-dark(oklch(98.2% 0.028 295), oklch(16.5% 0.042 295));
21
+
22
+
/* Ink - Purple-tinted text (295°) */
23
+
--color-ink-50: light-dark(oklch(18% 0.028 295), oklch(97.6% 0.018 295));
24
+
--color-ink-100: light-dark(oklch(26% 0.050 295), oklch(93.2% 0.038 295));
25
+
--color-ink-200: light-dark(oklch(39.5% 0.085 295), oklch(85.2% 0.072 295));
26
+
--color-ink-300: light-dark(oklch(51.5% 0.118 295), oklch(75.2% 0.105 295));
27
+
--color-ink-400: light-dark(oklch(63% 0.148 295), oklch(65.2% 0.135 295));
28
+
--color-ink-500: light-dark(oklch(74% 0.178 295), oklch(55.2% 0.178 295));
29
+
--color-ink-600: light-dark(oklch(78.8% 0.135 295), oklch(45.2% 0.148 295));
30
+
--color-ink-700: light-dark(oklch(84% 0.105 295), oklch(35.2% 0.118 295));
31
+
--color-ink-800: light-dark(oklch(89.5% 0.072 295), oklch(25.2% 0.085 295));
32
+
--color-ink-900: light-dark(oklch(94.8% 0.038 295), oklch(18.2% 0.050 295));
33
+
--color-ink-950: light-dark(oklch(97.6% 0.018 295), oklch(12.5% 0.028 295));
34
+
35
+
/* Canvas - Purple-tinted backgrounds (295°) */
36
+
--color-canvas-50: light-dark(oklch(18.2% 0.031 295), oklch(98.6% 0.011 295));
37
+
--color-canvas-100: light-dark(oklch(26.2% 0.055 295), oklch(96.6% 0.024 295));
38
+
--color-canvas-200: light-dark(oklch(40% 0.095 295), oklch(92.5% 0.052 295));
39
+
--color-canvas-300: light-dark(oklch(52.8% 0.128 295), oklch(86.5% 0.085 295));
40
+
--color-canvas-400: light-dark(oklch(65% 0.162 295), oklch(80.5% 0.118 295));
41
+
--color-canvas-500: light-dark(oklch(76.5% 0.195 295), oklch(76.5% 0.148 295));
42
+
--color-canvas-600: light-dark(oklch(80.5% 0.118 295), oklch(65% 0.162 295));
43
+
--color-canvas-700: light-dark(oklch(86.5% 0.085 295), oklch(52.8% 0.128 295));
44
+
--color-canvas-800: light-dark(oklch(92.5% 0.052 295), oklch(40% 0.095 295));
45
+
--color-canvas-900: light-dark(oklch(96.6% 0.024 295), oklch(26.2% 0.055 295));
46
+
--color-canvas-950: light-dark(oklch(98.6% 0.011 295), oklch(18.2% 0.031 295));
47
+
48
+
/* Secondary - Violet (280°) */
49
+
--color-secondary-50: light-dark(oklch(19.2% 0.041 280), oklch(97.9% 0.027 280));
50
+
--color-secondary-100: light-dark(oklch(27.8% 0.066 280), oklch(94.8% 0.051 280));
51
+
--color-secondary-200: light-dark(oklch(42.8% 0.112 280), oklch(89.8% 0.100 280));
52
+
--color-secondary-300: light-dark(oklch(56.8% 0.151 280), oklch(81% 0.145 280));
53
+
--color-secondary-400: light-dark(oklch(69.8% 0.188 280), oklch(71.5% 0.182 280));
54
+
--color-secondary-500: light-dark(oklch(81.8% 0.224 280), oklch(62% 0.224 280));
55
+
--color-secondary-600: light-dark(oklch(84.8% 0.182 280), oklch(51.5% 0.188 280));
56
+
--color-secondary-700: light-dark(oklch(88.2% 0.145 280), oklch(41.5% 0.151 280));
57
+
--color-secondary-800: light-dark(oklch(92% 0.100 280), oklch(31.5% 0.112 280));
58
+
--color-secondary-900: light-dark(oklch(96% 0.051 280), oklch(23% 0.066 280));
59
+
--color-secondary-950: light-dark(oklch(98.2% 0.027 280), oklch(16.2% 0.041 280));
60
+
61
+
/* Accent - Deep Plum (310°) */
62
+
--color-accent-50: light-dark(oklch(19.5% 0.044 310), oklch(98.1% 0.029 310));
63
+
--color-accent-100: light-dark(oklch(28.2% 0.071 310), oklch(95.2% 0.054 310));
64
+
--color-accent-200: light-dark(oklch(43.5% 0.120 310), oklch(90.2% 0.105 310));
65
+
--color-accent-300: light-dark(oklch(57.8% 0.162 310), oklch(82% 0.152 310));
66
+
--color-accent-400: light-dark(oklch(71% 0.202 310), oklch(72.5% 0.192 310));
67
+
--color-accent-500: light-dark(oklch(83.5% 0.238 310), oklch(63.2% 0.238 310));
68
+
--color-accent-600: light-dark(oklch(86.5% 0.192 310), oklch(52.5% 0.202 310));
69
+
--color-accent-700: light-dark(oklch(89.5% 0.152 310), oklch(42.5% 0.162 310));
70
+
--color-accent-800: light-dark(oklch(92.8% 0.105 310), oklch(32.5% 0.120 310));
71
+
--color-accent-900: light-dark(oklch(96.5% 0.054 310), oklch(24% 0.071 310));
72
+
--color-accent-950: light-dark(oklch(98.5% 0.029 310), oklch(17% 0.044 310));
73
+
}
+71
src/lib/styles/themes/monochrome.css
+71
src/lib/styles/themes/monochrome.css
···
1
+
/* ============================================================================
2
+
MONOCHROME THEME - Pure greyscale
3
+
Neutral, professional, accessible
4
+
All colors desaturated to greyscale
5
+
============================================================================ */
6
+
[data-color-theme='monochrome'] {
7
+
/* Primary - Greyscale */
8
+
--color-primary-50: light-dark(oklch(18% 0 0), oklch(98% 0 0));
9
+
--color-primary-100: light-dark(oklch(26% 0 0), oklch(94.5% 0 0));
10
+
--color-primary-200: light-dark(oklch(40% 0 0), oklch(89% 0 0));
11
+
--color-primary-300: light-dark(oklch(54% 0 0), oklch(79% 0 0));
12
+
--color-primary-400: light-dark(oklch(66% 0 0), oklch(69% 0 0));
13
+
--color-primary-500: light-dark(oklch(78% 0 0), oklch(59% 0 0));
14
+
--color-primary-600: light-dark(oklch(82% 0 0), oklch(49% 0 0));
15
+
--color-primary-700: light-dark(oklch(86.5% 0 0), oklch(39% 0 0));
16
+
--color-primary-800: light-dark(oklch(91% 0 0), oklch(29% 0 0));
17
+
--color-primary-900: light-dark(oklch(95.5% 0 0), oklch(21% 0 0));
18
+
--color-primary-950: light-dark(oklch(98% 0 0), oklch(15% 0 0));
19
+
20
+
/* Ink - Greyscale text */
21
+
--color-ink-50: light-dark(oklch(17% 0 0), oklch(97.5% 0 0));
22
+
--color-ink-100: light-dark(oklch(25% 0 0), oklch(93% 0 0));
23
+
--color-ink-200: light-dark(oklch(38% 0 0), oklch(85% 0 0));
24
+
--color-ink-300: light-dark(oklch(50% 0 0), oklch(75% 0 0));
25
+
--color-ink-400: light-dark(oklch(62% 0 0), oklch(65% 0 0));
26
+
--color-ink-500: light-dark(oklch(73% 0 0), oklch(55% 0 0));
27
+
--color-ink-600: light-dark(oklch(78% 0 0), oklch(45% 0 0));
28
+
--color-ink-700: light-dark(oklch(83.5% 0 0), oklch(35% 0 0));
29
+
--color-ink-800: light-dark(oklch(89% 0 0), oklch(25% 0 0));
30
+
--color-ink-900: light-dark(oklch(94.5% 0 0), oklch(18% 0 0));
31
+
--color-ink-950: light-dark(oklch(97.5% 0 0), oklch(12% 0 0));
32
+
33
+
/* Canvas - Greyscale backgrounds */
34
+
--color-canvas-50: light-dark(oklch(17.5% 0 0), oklch(98.5% 0 0));
35
+
--color-canvas-100: light-dark(oklch(25.5% 0 0), oklch(96.5% 0 0));
36
+
--color-canvas-200: light-dark(oklch(39.5% 0 0), oklch(92% 0 0));
37
+
--color-canvas-300: light-dark(oklch(52% 0 0), oklch(86% 0 0));
38
+
--color-canvas-400: light-dark(oklch(64% 0 0), oklch(80% 0 0));
39
+
--color-canvas-500: light-dark(oklch(75.5% 0 0), oklch(75.5% 0 0));
40
+
--color-canvas-600: light-dark(oklch(80% 0 0), oklch(64% 0 0));
41
+
--color-canvas-700: light-dark(oklch(86% 0 0), oklch(52% 0 0));
42
+
--color-canvas-800: light-dark(oklch(92% 0 0), oklch(39.5% 0 0));
43
+
--color-canvas-900: light-dark(oklch(96.5% 0 0), oklch(25.5% 0 0));
44
+
--color-canvas-950: light-dark(oklch(98.5% 0 0), oklch(17.5% 0 0));
45
+
46
+
/* Secondary - Slightly lighter greyscale */
47
+
--color-secondary-50: light-dark(oklch(19% 0 0), oklch(98% 0 0));
48
+
--color-secondary-100: light-dark(oklch(27% 0 0), oklch(95% 0 0));
49
+
--color-secondary-200: light-dark(oklch(42% 0 0), oklch(89.5% 0 0));
50
+
--color-secondary-300: light-dark(oklch(56% 0 0), oklch(80.5% 0 0));
51
+
--color-secondary-400: light-dark(oklch(69% 0 0), oklch(70.5% 0 0));
52
+
--color-secondary-500: light-dark(oklch(81% 0 0), oklch(60.5% 0 0));
53
+
--color-secondary-600: light-dark(oklch(84.5% 0 0), oklch(50.5% 0 0));
54
+
--color-secondary-700: light-dark(oklch(88% 0 0), oklch(40.5% 0 0));
55
+
--color-secondary-800: light-dark(oklch(92% 0 0), oklch(30.5% 0 0));
56
+
--color-secondary-900: light-dark(oklch(96% 0 0), oklch(22% 0 0));
57
+
--color-secondary-950: light-dark(oklch(98% 0 0), oklch(15.5% 0 0));
58
+
59
+
/* Accent - Darker greyscale */
60
+
--color-accent-50: light-dark(oklch(19.5% 0 0), oklch(98.2% 0 0));
61
+
--color-accent-100: light-dark(oklch(28% 0 0), oklch(95.5% 0 0));
62
+
--color-accent-200: light-dark(oklch(43.5% 0 0), oklch(90.5% 0 0));
63
+
--color-accent-300: light-dark(oklch(58% 0 0), oklch(82.5% 0 0));
64
+
--color-accent-400: light-dark(oklch(71.5% 0 0), oklch(73% 0 0));
65
+
--color-accent-500: light-dark(oklch(84.5% 0 0), oklch(63.5% 0 0));
66
+
--color-accent-600: light-dark(oklch(87% 0 0), oklch(53.5% 0 0));
67
+
--color-accent-700: light-dark(oklch(90% 0 0), oklch(43.5% 0 0));
68
+
--color-accent-800: light-dark(oklch(93% 0 0), oklch(33.5% 0 0));
69
+
--color-accent-900: light-dark(oklch(96.5% 0 0), oklch(24.5% 0 0));
70
+
--color-accent-950: light-dark(oklch(98.2% 0 0), oklch(17.2% 0 0));
71
+
}
+73
src/lib/styles/themes/ocean.css
+73
src/lib/styles/themes/ocean.css
···
1
+
/* ============================================================================
2
+
OCEAN THEME - Blue
3
+
Primary: Deep blue
4
+
Secondary: Sky blue
5
+
Accent: Navy
6
+
Hue: 240° (blue)
7
+
============================================================================ */
8
+
[data-color-theme='ocean'] {
9
+
/* Primary - Blue (240°) */
10
+
--color-primary-50: light-dark(oklch(18.5% 0.035 240), oklch(97.5% 0.022 240));
11
+
--color-primary-100: light-dark(oklch(26.5% 0.058 240), oklch(94.2% 0.045 240));
12
+
--color-primary-200: light-dark(oklch(40.8% 0.095 240), oklch(88.5% 0.088 240));
13
+
--color-primary-300: light-dark(oklch(54.2% 0.128 240), oklch(78.5% 0.128 240));
14
+
--color-primary-400: light-dark(oklch(66.5% 0.158 240), oklch(68.5% 0.162 240));
15
+
--color-primary-500: light-dark(oklch(78.2% 0.188 240), oklch(58.5% 0.188 240));
16
+
--color-primary-600: light-dark(oklch(82.1% 0.162 240), oklch(48.5% 0.158 240));
17
+
--color-primary-700: light-dark(oklch(86.5% 0.128 240), oklch(38.5% 0.128 240));
18
+
--color-primary-800: light-dark(oklch(90.8% 0.088 240), oklch(28.5% 0.095 240));
19
+
--color-primary-900: light-dark(oklch(95.5% 0.045 240), oklch(20.5% 0.058 240));
20
+
--color-primary-950: light-dark(oklch(97.8% 0.022 240), oklch(14.5% 0.035 240));
21
+
22
+
/* Ink - Blue-tinted text (240°) */
23
+
--color-ink-50: light-dark(oklch(17.6% 0.023 240), oklch(97.4% 0.015 240));
24
+
--color-ink-100: light-dark(oklch(25.2% 0.043 240), oklch(93% 0.033 240));
25
+
--color-ink-200: light-dark(oklch(38.5% 0.073 240), oklch(85% 0.063 240));
26
+
--color-ink-300: light-dark(oklch(50.8% 0.100 240), oklch(75% 0.093 240));
27
+
--color-ink-400: light-dark(oklch(62.5% 0.125 240), oklch(65% 0.120 240));
28
+
--color-ink-500: light-dark(oklch(73.5% 0.150 240), oklch(55% 0.150 240));
29
+
--color-ink-600: light-dark(oklch(78.5% 0.120 240), oklch(45% 0.125 240));
30
+
--color-ink-700: light-dark(oklch(83.8% 0.093 240), oklch(35% 0.100 240));
31
+
--color-ink-800: light-dark(oklch(89.2% 0.063 240), oklch(25% 0.073 240));
32
+
--color-ink-900: light-dark(oklch(94.5% 0.033 240), oklch(18% 0.043 240));
33
+
--color-ink-950: light-dark(oklch(97.4% 0.015 240), oklch(12% 0.023 240));
34
+
35
+
/* Canvas - Blue-tinted backgrounds (240°) */
36
+
--color-canvas-50: light-dark(oklch(17.9% 0.026 240), oklch(98.4% 0.009 240));
37
+
--color-canvas-100: light-dark(oklch(25.9% 0.047 240), oklch(96.4% 0.020 240));
38
+
--color-canvas-200: light-dark(oklch(39.8% 0.082 240), oklch(92% 0.045 240));
39
+
--color-canvas-300: light-dark(oklch(52.5% 0.110 240), oklch(86% 0.072 240));
40
+
--color-canvas-400: light-dark(oklch(64.5% 0.138 240), oklch(80% 0.102 240));
41
+
--color-canvas-500: light-dark(oklch(76% 0.165 240), oklch(76% 0.128 240));
42
+
--color-canvas-600: light-dark(oklch(80% 0.102 240), oklch(64.5% 0.138 240));
43
+
--color-canvas-700: light-dark(oklch(86% 0.072 240), oklch(52.5% 0.110 240));
44
+
--color-canvas-800: light-dark(oklch(92% 0.045 240), oklch(39.8% 0.082 240));
45
+
--color-canvas-900: light-dark(oklch(96.4% 0.020 240), oklch(25.9% 0.047 240));
46
+
--color-canvas-950: light-dark(oklch(98.4% 0.009 240), oklch(17.9% 0.026 240));
47
+
48
+
/* Secondary - Sky Blue (220°) */
49
+
--color-secondary-50: light-dark(oklch(19% 0.037 220), oklch(97.8% 0.024 220));
50
+
--color-secondary-100: light-dark(oklch(27.5% 0.060 220), oklch(94.5% 0.046 220));
51
+
--color-secondary-200: light-dark(oklch(42.5% 0.102 220), oklch(89.5% 0.092 220));
52
+
--color-secondary-300: light-dark(oklch(56.5% 0.138 220), oklch(80.5% 0.132 220));
53
+
--color-secondary-400: light-dark(oklch(69.5% 0.172 220), oklch(70.5% 0.168 220));
54
+
--color-secondary-500: light-dark(oklch(81.5% 0.205 220), oklch(61% 0.205 220));
55
+
--color-secondary-600: light-dark(oklch(84.5% 0.168 220), oklch(50.5% 0.172 220));
56
+
--color-secondary-700: light-dark(oklch(88% 0.132 220), oklch(40.5% 0.138 220));
57
+
--color-secondary-800: light-dark(oklch(91.8% 0.092 220), oklch(30.5% 0.102 220));
58
+
--color-secondary-900: light-dark(oklch(95.8% 0.046 220), oklch(22.5% 0.060 220));
59
+
--color-secondary-950: light-dark(oklch(98% 0.024 220), oklch(16% 0.037 220));
60
+
61
+
/* Accent - Navy (255°) */
62
+
--color-accent-50: light-dark(oklch(19% 0.040 255), oklch(97.9% 0.027 255));
63
+
--color-accent-100: light-dark(oklch(27.5% 0.065 255), oklch(94.8% 0.050 255));
64
+
--color-accent-200: light-dark(oklch(42.5% 0.110 255), oklch(89.8% 0.098 255));
65
+
--color-accent-300: light-dark(oklch(56.5% 0.148 255), oklch(81% 0.142 255));
66
+
--color-accent-400: light-dark(oklch(69.5% 0.185 255), oklch(71.5% 0.178 255));
67
+
--color-accent-500: light-dark(oklch(81.5% 0.220 255), oklch(62% 0.220 255));
68
+
--color-accent-600: light-dark(oklch(84.8% 0.178 255), oklch(51.5% 0.185 255));
69
+
--color-accent-700: light-dark(oklch(88.2% 0.142 255), oklch(41.5% 0.148 255));
70
+
--color-accent-800: light-dark(oklch(92% 0.098 255), oklch(31.5% 0.110 255));
71
+
--color-accent-900: light-dark(oklch(96% 0.050 255), oklch(23% 0.065 255));
72
+
--color-accent-950: light-dark(oklch(98.2% 0.027 255), oklch(16.2% 0.040 255));
73
+
}
+73
src/lib/styles/themes/rose.css
+73
src/lib/styles/themes/rose.css
···
1
+
/* ============================================================================
2
+
ROSE THEME - Pink
3
+
Primary: Soft pink
4
+
Secondary: Magenta
5
+
Accent: Deep rose
6
+
Hue: 350° (pink-red)
7
+
============================================================================ */
8
+
[data-color-theme='rose'] {
9
+
/* Primary - Rose (350°) */
10
+
--color-primary-50: light-dark(oklch(19.8% 0.045 350), oklch(98.2% 0.030 350));
11
+
--color-primary-100: light-dark(oklch(28.8% 0.072 350), oklch(95.5% 0.055 350));
12
+
--color-primary-200: light-dark(oklch(44.2% 0.118 350), oklch(90.5% 0.105 350));
13
+
--color-primary-300: light-dark(oklch(58.5% 0.158 350), oklch(82.2% 0.152 350));
14
+
--color-primary-400: light-dark(oklch(71.5% 0.195 350), oklch(73% 0.188 350));
15
+
--color-primary-500: light-dark(oklch(83.5% 0.230 350), oklch(63.5% 0.230 350));
16
+
--color-primary-600: light-dark(oklch(86.2% 0.188 350), oklch(53% 0.195 350));
17
+
--color-primary-700: light-dark(oklch(89.5% 0.152 350), oklch(43% 0.158 350));
18
+
--color-primary-800: light-dark(oklch(92.8% 0.105 350), oklch(33% 0.118 350));
19
+
--color-primary-900: light-dark(oklch(96.5% 0.055 350), oklch(24.5% 0.072 350));
20
+
--color-primary-950: light-dark(oklch(98.5% 0.030 350), oklch(17.2% 0.045 350));
21
+
22
+
/* Ink - Pink-tinted text (350°) */
23
+
--color-ink-50: light-dark(oklch(18.2% 0.030 350), oklch(97.7% 0.020 350));
24
+
--color-ink-100: light-dark(oklch(26.2% 0.053 350), oklch(93.5% 0.040 350));
25
+
--color-ink-200: light-dark(oklch(39.8% 0.090 350), oklch(85.5% 0.075 350));
26
+
--color-ink-300: light-dark(oklch(51.8% 0.125 350), oklch(75.5% 0.110 350));
27
+
--color-ink-400: light-dark(oklch(63.5% 0.158 350), oklch(65.5% 0.142 350));
28
+
--color-ink-500: light-dark(oklch(74.5% 0.190 350), oklch(55.5% 0.190 350));
29
+
--color-ink-600: light-dark(oklch(79.2% 0.142 350), oklch(45.5% 0.158 350));
30
+
--color-ink-700: light-dark(oklch(84.2% 0.110 350), oklch(35.5% 0.125 350));
31
+
--color-ink-800: light-dark(oklch(89.6% 0.075 350), oklch(25.5% 0.090 350));
32
+
--color-ink-900: light-dark(oklch(94.9% 0.040 350), oklch(18.5% 0.053 350));
33
+
--color-ink-950: light-dark(oklch(97.7% 0.020 350), oklch(12.8% 0.030 350));
34
+
35
+
/* Canvas - Pink-tinted backgrounds (350°) */
36
+
--color-canvas-50: light-dark(oklch(18.4% 0.033 350), oklch(98.7% 0.012 350));
37
+
--color-canvas-100: light-dark(oklch(26.4% 0.058 350), oklch(96.7% 0.026 350));
38
+
--color-canvas-200: light-dark(oklch(40.2% 0.100 350), oklch(92.8% 0.055 350));
39
+
--color-canvas-300: light-dark(oklch(53% 0.135 350), oklch(86.8% 0.088 350));
40
+
--color-canvas-400: light-dark(oklch(65.2% 0.168 350), oklch(80.8% 0.122 350));
41
+
--color-canvas-500: light-dark(oklch(76.8% 0.202 350), oklch(76.8% 0.155 350));
42
+
--color-canvas-600: light-dark(oklch(80.8% 0.122 350), oklch(65.2% 0.168 350));
43
+
--color-canvas-700: light-dark(oklch(86.8% 0.088 350), oklch(53% 0.135 350));
44
+
--color-canvas-800: light-dark(oklch(92.8% 0.055 350), oklch(40.2% 0.100 350));
45
+
--color-canvas-900: light-dark(oklch(96.7% 0.026 350), oklch(26.4% 0.058 350));
46
+
--color-canvas-950: light-dark(oklch(98.7% 0.012 350), oklch(18.4% 0.033 350));
47
+
48
+
/* Secondary - Magenta (330°) */
49
+
--color-secondary-50: light-dark(oklch(19.5% 0.043 330), oklch(98% 0.029 330));
50
+
--color-secondary-100: light-dark(oklch(28.2% 0.069 330), oklch(95.2% 0.053 330));
51
+
--color-secondary-200: light-dark(oklch(43.5% 0.116 330), oklch(90.2% 0.103 330));
52
+
--color-secondary-300: light-dark(oklch(57.8% 0.156 330), oklch(82% 0.148 330));
53
+
--color-secondary-400: light-dark(oklch(71% 0.195 330), oklch(72.5% 0.185 330));
54
+
--color-secondary-500: light-dark(oklch(83.5% 0.232 330), oklch(63.2% 0.232 330));
55
+
--color-secondary-600: light-dark(oklch(86.5% 0.185 330), oklch(52.5% 0.195 330));
56
+
--color-secondary-700: light-dark(oklch(89.5% 0.148 330), oklch(42.5% 0.156 330));
57
+
--color-secondary-800: light-dark(oklch(92.8% 0.103 330), oklch(32.5% 0.116 330));
58
+
--color-secondary-900: light-dark(oklch(96.5% 0.053 330), oklch(24% 0.069 330));
59
+
--color-secondary-950: light-dark(oklch(98.5% 0.029 330), oklch(17% 0.043 330));
60
+
61
+
/* Accent - Deep Rose (5°) */
62
+
--color-accent-50: light-dark(oklch(19.2% 0.043 5), oklch(97.9% 0.029 5));
63
+
--color-accent-100: light-dark(oklch(27.8% 0.069 5), oklch(94.8% 0.053 5));
64
+
--color-accent-200: light-dark(oklch(42.8% 0.118 5), oklch(89.8% 0.105 5));
65
+
--color-accent-300: light-dark(oklch(56.8% 0.158 5), oklch(81% 0.150 5));
66
+
--color-accent-400: light-dark(oklch(69.8% 0.198 5), oklch(71.5% 0.188 5));
67
+
--color-accent-500: light-dark(oklch(81.8% 0.235 5), oklch(62% 0.235 5));
68
+
--color-accent-600: light-dark(oklch(84.8% 0.188 5), oklch(51.5% 0.198 5));
69
+
--color-accent-700: light-dark(oklch(88.2% 0.150 5), oklch(41.5% 0.158 5));
70
+
--color-accent-800: light-dark(oklch(92% 0.105 5), oklch(31.5% 0.118 5));
71
+
--color-accent-900: light-dark(oklch(96% 0.053 5), oklch(23% 0.069 5));
72
+
--color-accent-950: light-dark(oklch(98.2% 0.029 5), oklch(16.2% 0.043 5));
73
+
}
+73
src/lib/styles/themes/ruby.css
+73
src/lib/styles/themes/ruby.css
···
1
+
/* ============================================================================
2
+
RUBY THEME - Pure red
3
+
Primary: Bold red
4
+
Secondary: Orange-red complement
5
+
Accent: Deep crimson
6
+
Hue: 10° (red with slight orange warmth)
7
+
============================================================================ */
8
+
[data-color-theme='ruby'] {
9
+
/* Primary - Ruby Red (10°) */
10
+
--color-primary-50: light-dark(oklch(19% 0.042 10), oklch(97.8% 0.028 10));
11
+
--color-primary-100: light-dark(oklch(27.5% 0.068 10), oklch(94.5% 0.052 10));
12
+
--color-primary-200: light-dark(oklch(42.5% 0.115 10), oklch(89.5% 0.105 10));
13
+
--color-primary-300: light-dark(oklch(56.5% 0.155 10), oklch(80.5% 0.148 10));
14
+
--color-primary-400: light-dark(oklch(69.5% 0.192 10), oklch(71% 0.185 10));
15
+
--color-primary-500: light-dark(oklch(81.5% 0.228 10), oklch(61.5% 0.228 10));
16
+
--color-primary-600: light-dark(oklch(84.5% 0.185 10), oklch(51.5% 0.192 10));
17
+
--color-primary-700: light-dark(oklch(88% 0.148 10), oklch(41.5% 0.155 10));
18
+
--color-primary-800: light-dark(oklch(91.8% 0.105 10), oklch(31.5% 0.115 10));
19
+
--color-primary-900: light-dark(oklch(95.8% 0.052 10), oklch(23% 0.068 10));
20
+
--color-primary-950: light-dark(oklch(98% 0.028 10), oklch(16.5% 0.042 10));
21
+
22
+
/* Ink - Red-tinted text (10°) */
23
+
--color-ink-50: light-dark(oklch(17.5% 0.028 10), oklch(97.5% 0.018 10));
24
+
--color-ink-100: light-dark(oklch(25% 0.048 10), oklch(93% 0.038 10));
25
+
--color-ink-200: light-dark(oklch(38.5% 0.082 10), oklch(85% 0.072 10));
26
+
--color-ink-300: light-dark(oklch(50.5% 0.115 10), oklch(75% 0.105 10));
27
+
--color-ink-400: light-dark(oklch(62% 0.145 10), oklch(65% 0.135 10));
28
+
--color-ink-500: light-dark(oklch(73% 0.175 10), oklch(55% 0.175 10));
29
+
--color-ink-600: light-dark(oklch(78% 0.135 10), oklch(45% 0.145 10));
30
+
--color-ink-700: light-dark(oklch(83.5% 0.105 10), oklch(35% 0.115 10));
31
+
--color-ink-800: light-dark(oklch(89% 0.072 10), oklch(25% 0.082 10));
32
+
--color-ink-900: light-dark(oklch(94.5% 0.038 10), oklch(18% 0.048 10));
33
+
--color-ink-950: light-dark(oklch(97.5% 0.018 10), oklch(12% 0.028 10));
34
+
35
+
/* Canvas - Red-tinted backgrounds (10°) */
36
+
--color-canvas-50: light-dark(oklch(17.8% 0.032 10), oklch(98.5% 0.012 10));
37
+
--color-canvas-100: light-dark(oklch(25.8% 0.055 10), oklch(96.5% 0.025 10));
38
+
--color-canvas-200: light-dark(oklch(39.5% 0.095 10), oklch(92% 0.052 10));
39
+
--color-canvas-300: light-dark(oklch(52% 0.128 10), oklch(86% 0.085 10));
40
+
--color-canvas-400: light-dark(oklch(64% 0.162 10), oklch(80% 0.118 10));
41
+
--color-canvas-500: light-dark(oklch(75.5% 0.195 10), oklch(75.5% 0.148 10));
42
+
--color-canvas-600: light-dark(oklch(80% 0.118 10), oklch(64% 0.162 10));
43
+
--color-canvas-700: light-dark(oklch(86% 0.085 10), oklch(52% 0.128 10));
44
+
--color-canvas-800: light-dark(oklch(92% 0.052 10), oklch(39.5% 0.095 10));
45
+
--color-canvas-900: light-dark(oklch(96.5% 0.025 10), oklch(25.8% 0.055 10));
46
+
--color-canvas-950: light-dark(oklch(98.5% 0.012 10), oklch(17.8% 0.032 10));
47
+
48
+
/* Secondary - Orange-Red (30°) */
49
+
--color-secondary-50: light-dark(oklch(19.2% 0.040 30), oklch(97.9% 0.027 30));
50
+
--color-secondary-100: light-dark(oklch(27.8% 0.065 30), oklch(94.8% 0.050 30));
51
+
--color-secondary-200: light-dark(oklch(42.8% 0.110 30), oklch(89.8% 0.098 30));
52
+
--color-secondary-300: light-dark(oklch(56.8% 0.148 30), oklch(81% 0.140 30));
53
+
--color-secondary-400: light-dark(oklch(69.8% 0.185 30), oklch(71.5% 0.178 30));
54
+
--color-secondary-500: light-dark(oklch(81.8% 0.220 30), oklch(62% 0.220 30));
55
+
--color-secondary-600: light-dark(oklch(84.8% 0.178 30), oklch(51.5% 0.185 30));
56
+
--color-secondary-700: light-dark(oklch(88.2% 0.140 30), oklch(41.5% 0.148 30));
57
+
--color-secondary-800: light-dark(oklch(92% 0.098 30), oklch(31.5% 0.110 30));
58
+
--color-secondary-900: light-dark(oklch(96% 0.050 30), oklch(23% 0.065 30));
59
+
--color-secondary-950: light-dark(oklch(98.2% 0.027 30), oklch(16.2% 0.040 30));
60
+
61
+
/* Accent - Deep Crimson (355°) */
62
+
--color-accent-50: light-dark(oklch(19.5% 0.045 355), oklch(98% 0.030 355));
63
+
--color-accent-100: light-dark(oklch(28.2% 0.072 355), oklch(95.2% 0.055 355));
64
+
--color-accent-200: light-dark(oklch(43.5% 0.122 355), oklch(90.2% 0.108 355));
65
+
--color-accent-300: light-dark(oklch(57.8% 0.165 355), oklch(82% 0.155 355));
66
+
--color-accent-400: light-dark(oklch(71% 0.205 355), oklch(72.5% 0.195 355));
67
+
--color-accent-500: light-dark(oklch(83.5% 0.242 355), oklch(63% 0.242 355));
68
+
--color-accent-600: light-dark(oklch(86.5% 0.195 355), oklch(52.5% 0.205 355));
69
+
--color-accent-700: light-dark(oklch(89.5% 0.155 355), oklch(42.5% 0.165 355));
70
+
--color-accent-800: light-dark(oklch(92.8% 0.108 355), oklch(32.5% 0.122 355));
71
+
--color-accent-900: light-dark(oklch(96.5% 0.055 355), oklch(24% 0.072 355));
72
+
--color-accent-950: light-dark(oklch(98.5% 0.030 355), oklch(17% 0.045 355));
73
+
}
+72
src/lib/styles/themes/sage.css
+72
src/lib/styles/themes/sage.css
···
1
+
/* ============================================================================
2
+
SAGE THEME (Default - matches existing colors)
3
+
Primary: Green-blue, calm and balanced
4
+
Secondary: Mint, fresh complement
5
+
Accent: Jade, vibrant highlight
6
+
============================================================================ */
7
+
[data-color-theme='sage'] {
8
+
/* Primary - Sage (Green-blue) */
9
+
--color-primary-50: light-dark(oklch(18.09% 0.031 123.74), oklch(97.73% 0.02 121.83));
10
+
--color-primary-100: light-dark(oklch(26.23% 0.053 126.29), oklch(94% 0.042 123.12));
11
+
--color-primary-200: light-dark(oklch(40.39% 0.088 126.72), oklch(88% 0.082 123.68));
12
+
--color-primary-300: light-dark(oklch(53.63% 0.122 127.17), oklch(78% 0.122 124.71));
13
+
--color-primary-400: light-dark(oklch(65.86% 0.152 127.23), oklch(68% 0.155 125.79));
14
+
--color-primary-500: light-dark(oklch(77.77% 0.182 127.42), oklch(58% 0.182 127.42));
15
+
--color-primary-600: light-dark(oklch(81.83% 0.155 125.79), oklch(48% 0.152 127.23));
16
+
--color-primary-700: light-dark(oklch(86.28% 0.122 124.71), oklch(38% 0.122 127.17));
17
+
--color-primary-800: light-dark(oklch(90.67% 0.082 123.68), oklch(28% 0.088 126.72));
18
+
--color-primary-900: light-dark(oklch(95.38% 0.042 123.12), oklch(20% 0.053 126.29));
19
+
--color-primary-950: light-dark(oklch(97.73% 0.02 121.83), oklch(14% 0.031 123.74));
20
+
21
+
/* Ink - Text colors (same as default) */
22
+
--color-ink-50: light-dark(oklch(17.39% 0.023 124.58), oklch(97.31% 0.015 123.04));
23
+
--color-ink-100: light-dark(oklch(24.9% 0.042 126.8), oklch(93% 0.032 124.47));
24
+
--color-ink-200: light-dark(oklch(38.03% 0.07 126.15), oklch(85% 0.061 123.88));
25
+
--color-ink-300: light-dark(oklch(50.28% 0.098 126.82), oklch(75% 0.093 124.99));
26
+
--color-ink-400: light-dark(oklch(61.88% 0.124 126.72), oklch(65% 0.123 125.63));
27
+
--color-ink-500: light-dark(oklch(72.9% 0.149 127.03), oklch(55% 0.149 127.03));
28
+
--color-ink-600: light-dark(oklch(78.19% 0.123 125.63), oklch(45% 0.124 126.72));
29
+
--color-ink-700: light-dark(oklch(83.5% 0.093 124.99), oklch(35% 0.098 126.82));
30
+
--color-ink-800: light-dark(oklch(88.94% 0.061 123.88), oklch(25% 0.07 126.15));
31
+
--color-ink-900: light-dark(oklch(94.52% 0.032 124.47), oklch(18% 0.042 126.8));
32
+
--color-ink-950: light-dark(oklch(97.31% 0.015 123.04), oklch(12% 0.023 124.58));
33
+
34
+
/* Canvas - Background colors (same as default) */
35
+
--color-canvas-50: light-dark(oklch(17.69% 0.027 125.57), oklch(98.5% 0.01 123.97));
36
+
--color-canvas-100: light-dark(oklch(25.56% 0.047 126.44), oklch(96.5% 0.02 123.69));
37
+
--color-canvas-200: light-dark(oklch(39.36% 0.083 127.85), oklch(92% 0.045 125.14));
38
+
--color-canvas-300: light-dark(oklch(51.84% 0.112 127.68), oklch(86% 0.075 125.55));
39
+
--color-canvas-400: light-dark(oklch(63.78% 0.141 128.14), oklch(80% 0.105 126.87));
40
+
--color-canvas-500: light-dark(oklch(75.25% 0.169 128.13), oklch(75.25% 0.135 128.13));
41
+
--color-canvas-600: light-dark(oklch(80% 0.105 126.87), oklch(63.78% 0.141 128.14));
42
+
--color-canvas-700: light-dark(oklch(86% 0.075 125.55), oklch(51.84% 0.112 127.68));
43
+
--color-canvas-800: light-dark(oklch(92% 0.045 125.14), oklch(39.36% 0.083 127.85));
44
+
--color-canvas-900: light-dark(oklch(96.5% 0.02 123.69), oklch(25.56% 0.047 126.44));
45
+
--color-canvas-950: light-dark(oklch(98.5% 0.01 123.97), oklch(17.69% 0.027 125.57));
46
+
47
+
/* Secondary - Mint (same as default) */
48
+
--color-secondary-50: light-dark(oklch(18.72% 0.037 126.2), oklch(97.87% 0.024 121.9));
49
+
--color-secondary-100: light-dark(oklch(26.82% 0.058 127.38), oklch(94.5% 0.048 123.9));
50
+
--color-secondary-200: light-dark(oklch(42.08% 0.101 128.02), oklch(89% 0.097 124.41));
51
+
--color-secondary-300: light-dark(oklch(55.72% 0.137 128.49), oklch(80% 0.141 125.62));
52
+
--color-secondary-400: light-dark(oklch(68.58% 0.171 128.75), oklch(70% 0.178 127.04));
53
+
--color-secondary-500: light-dark(oklch(81.09% 0.205 129.04), oklch(60% 0.205 129.04));
54
+
--color-secondary-600: light-dark(oklch(84.3% 0.178 127.04), oklch(50% 0.171 128.75));
55
+
--color-secondary-700: light-dark(oklch(87.99% 0.141 125.62), oklch(40% 0.137 128.49));
56
+
--color-secondary-800: light-dark(oklch(91.89% 0.097 124.41), oklch(30% 0.101 128.02));
57
+
--color-secondary-900: light-dark(oklch(95.73% 0.048 123.9), oklch(22% 0.058 127.38));
58
+
--color-secondary-950: light-dark(oklch(97.87% 0.024 121.9), oklch(15% 0.037 126.2));
59
+
60
+
/* Accent - Jade (same as default) */
61
+
--color-accent-50: light-dark(oklch(19.03% 0.041 126.73), oklch(98.05% 0.027 122.65));
62
+
--color-accent-100: light-dark(oklch(27.78% 0.066 127.71), oklch(95% 0.056 123.8));
63
+
--color-accent-200: light-dark(oklch(43.51% 0.11 128.91), oklch(90% 0.11 124.83));
64
+
--color-accent-300: light-dark(oklch(57.9% 0.149 129.35), oklch(82% 0.159 126.06));
65
+
--color-accent-400: light-dark(oklch(71.44% 0.186 129.59), oklch(72% 0.198 127.63));
66
+
--color-accent-500: light-dark(oklch(84.36% 0.221 129.75), oklch(62% 0.221 129.75));
67
+
--color-accent-600: light-dark(oklch(86.93% 0.198 127.63), oklch(52% 0.186 129.59));
68
+
--color-accent-700: light-dark(oklch(89.79% 0.159 126.06), oklch(42% 0.149 129.35));
69
+
--color-accent-800: light-dark(oklch(92.93% 0.11 124.83), oklch(32% 0.11 128.91));
70
+
--color-accent-900: light-dark(oklch(96.35% 0.056 123.8), oklch(23% 0.066 127.71));
71
+
--color-accent-950: light-dark(oklch(98.05% 0.027 122.65), oklch(16% 0.041 126.73));
72
+
}
+73
src/lib/styles/themes/slate.css
+73
src/lib/styles/themes/slate.css
···
1
+
/* ============================================================================
2
+
SLATE THEME - Blue-grey
3
+
Primary: Sophisticated slate
4
+
Secondary: Steel grey
5
+
Accent: Charcoal
6
+
Hue: 230° (blue-grey)
7
+
============================================================================ */
8
+
[data-color-theme='slate'] {
9
+
/* Primary - Slate (230°) */
10
+
--color-primary-50: light-dark(oklch(18.2% 0.018 230), oklch(97.8% 0.012 230));
11
+
--color-primary-100: light-dark(oklch(26.5% 0.030 230), oklch(94.8% 0.022 230));
12
+
--color-primary-200: light-dark(oklch(40.5% 0.048 230), oklch(89.5% 0.042 230));
13
+
--color-primary-300: light-dark(oklch(54% 0.065 230), oklch(79.5% 0.062 230));
14
+
--color-primary-400: light-dark(oklch(66.5% 0.080 230), oklch(69.5% 0.078 230));
15
+
--color-primary-500: light-dark(oklch(78.5% 0.095 230), oklch(59.5% 0.095 230));
16
+
--color-primary-600: light-dark(oklch(82.2% 0.078 230), oklch(49.5% 0.080 230));
17
+
--color-primary-700: light-dark(oklch(86.5% 0.062 230), oklch(39.5% 0.065 230));
18
+
--color-primary-800: light-dark(oklch(91% 0.042 230), oklch(29.5% 0.048 230));
19
+
--color-primary-900: light-dark(oklch(95.8% 0.022 230), oklch(21.5% 0.030 230));
20
+
--color-primary-950: light-dark(oklch(98% 0.012 230), oklch(15.2% 0.018 230));
21
+
22
+
/* Ink - Slate-tinted text (230°) */
23
+
--color-ink-50: light-dark(oklch(17.5% 0.012 230), oklch(97.6% 0.008 230));
24
+
--color-ink-100: light-dark(oklch(25% 0.022 230), oklch(93.2% 0.017 230));
25
+
--color-ink-200: light-dark(oklch(38.5% 0.037 230), oklch(85.2% 0.032 230));
26
+
--color-ink-300: light-dark(oklch(50.5% 0.052 230), oklch(75.2% 0.048 230));
27
+
--color-ink-400: light-dark(oklch(62% 0.065 230), oklch(65.2% 0.062 230));
28
+
--color-ink-500: light-dark(oklch(73% 0.078 230), oklch(55.2% 0.078 230));
29
+
--color-ink-600: light-dark(oklch(78% 0.062 230), oklch(45.2% 0.065 230));
30
+
--color-ink-700: light-dark(oklch(83.5% 0.048 230), oklch(35.2% 0.052 230));
31
+
--color-ink-800: light-dark(oklch(89% 0.032 230), oklch(25.2% 0.037 230));
32
+
--color-ink-900: light-dark(oklch(94.5% 0.017 230), oklch(18.2% 0.022 230));
33
+
--color-ink-950: light-dark(oklch(97.6% 0.008 230), oklch(12.5% 0.012 230));
34
+
35
+
/* Canvas - Slate-tinted backgrounds (230°) */
36
+
--color-canvas-50: light-dark(oklch(17.8% 0.014 230), oklch(98.6% 0.005 230));
37
+
--color-canvas-100: light-dark(oklch(25.8% 0.025 230), oklch(96.6% 0.011 230));
38
+
--color-canvas-200: light-dark(oklch(39.5% 0.042 230), oklch(92.5% 0.024 230));
39
+
--color-canvas-300: light-dark(oklch(52% 0.058 230), oklch(86.5% 0.038 230));
40
+
--color-canvas-400: light-dark(oklch(64% 0.072 230), oklch(80.5% 0.055 230));
41
+
--color-canvas-500: light-dark(oklch(75.5% 0.085 230), oklch(75.5% 0.068 230));
42
+
--color-canvas-600: light-dark(oklch(80.5% 0.055 230), oklch(64% 0.072 230));
43
+
--color-canvas-700: light-dark(oklch(86.5% 0.038 230), oklch(52% 0.058 230));
44
+
--color-canvas-800: light-dark(oklch(92.5% 0.024 230), oklch(39.5% 0.042 230));
45
+
--color-canvas-900: light-dark(oklch(96.6% 0.011 230), oklch(25.8% 0.025 230));
46
+
--color-canvas-950: light-dark(oklch(98.6% 0.005 230), oklch(17.8% 0.014 230));
47
+
48
+
/* Secondary - Steel Grey (215°) */
49
+
--color-secondary-50: light-dark(oklch(18.5% 0.020 215), oklch(97.9% 0.013 215));
50
+
--color-secondary-100: light-dark(oklch(26.8% 0.033 215), oklch(95% 0.024 215));
51
+
--color-secondary-200: light-dark(oklch(41% 0.052 215), oklch(89.8% 0.045 215));
52
+
--color-secondary-300: light-dark(oklch(54.5% 0.070 215), oklch(80.2% 0.065 215));
53
+
--color-secondary-400: light-dark(oklch(67% 0.087 215), oklch(70.2% 0.082 215));
54
+
--color-secondary-500: light-dark(oklch(79% 0.103 215), oklch(60.2% 0.103 215));
55
+
--color-secondary-600: light-dark(oklch(82.8% 0.082 215), oklch(50.2% 0.087 215));
56
+
--color-secondary-700: light-dark(oklch(87% 0.065 215), oklch(40.2% 0.070 215));
57
+
--color-secondary-800: light-dark(oklch(91.5% 0.045 215), oklch(30.5% 0.052 215));
58
+
--color-secondary-900: light-dark(oklch(96% 0.024 215), oklch(22.2% 0.033 215));
59
+
--color-secondary-950: light-dark(oklch(98.2% 0.013 215), oklch(15.8% 0.020 215));
60
+
61
+
/* Accent - Charcoal (240°) */
62
+
--color-accent-50: light-dark(oklch(18.5% 0.022 240), oklch(98% 0.014 240));
63
+
--color-accent-100: light-dark(oklch(26.8% 0.036 240), oklch(95.2% 0.026 240));
64
+
--color-accent-200: light-dark(oklch(41% 0.058 240), oklch(90% 0.048 240));
65
+
--color-accent-300: light-dark(oklch(54.5% 0.078 240), oklch(80.8% 0.072 240));
66
+
--color-accent-400: light-dark(oklch(67% 0.097 240), oklch(71% 0.092 240));
67
+
--color-accent-500: light-dark(oklch(79% 0.115 240), oklch(61% 0.115 240));
68
+
--color-accent-600: light-dark(oklch(82.8% 0.092 240), oklch(51% 0.097 240));
69
+
--color-accent-700: light-dark(oklch(87% 0.072 240), oklch(41% 0.078 240));
70
+
--color-accent-800: light-dark(oklch(91.5% 0.048 240), oklch(31% 0.058 240));
71
+
--color-accent-900: light-dark(oklch(96% 0.026 240), oklch(22.5% 0.036 240));
72
+
--color-accent-950: light-dark(oklch(98.2% 0.014 240), oklch(16.2% 0.022 240));
73
+
}
+73
src/lib/styles/themes/sunset.css
+73
src/lib/styles/themes/sunset.css
···
1
+
/* ============================================================================
2
+
SUNSET THEME - Orange
3
+
Primary: Warm orange
4
+
Secondary: Golden yellow
5
+
Accent: Deep amber
6
+
Hue: 45° (orange)
7
+
============================================================================ */
8
+
[data-color-theme='sunset'] {
9
+
/* Primary - Orange (45°) */
10
+
--color-primary-50: light-dark(oklch(19.2% 0.038 45), oklch(97.8% 0.025 45));
11
+
--color-primary-100: light-dark(oklch(27.8% 0.062 45), oklch(94.5% 0.048 45));
12
+
--color-primary-200: light-dark(oklch(42.5% 0.105 45), oklch(89.2% 0.095 45));
13
+
--color-primary-300: light-dark(oklch(56.2% 0.142 45), oklch(80.2% 0.138 45));
14
+
--color-primary-400: light-dark(oklch(68.8% 0.175 45), oklch(70.5% 0.172 45));
15
+
--color-primary-500: light-dark(oklch(80.5% 0.208 45), oklch(60.8% 0.208 45));
16
+
--color-primary-600: light-dark(oklch(83.8% 0.172 45), oklch(50.2% 0.175 45));
17
+
--color-primary-700: light-dark(oklch(87.5% 0.138 45), oklch(40.2% 0.142 45));
18
+
--color-primary-800: light-dark(oklch(91.5% 0.095 45), oklch(30.5% 0.105 45));
19
+
--color-primary-900: light-dark(oklch(95.8% 0.048 45), oklch(22.2% 0.062 45));
20
+
--color-primary-950: light-dark(oklch(98% 0.025 45), oklch(15.8% 0.038 45));
21
+
22
+
/* Ink - Orange-tinted text (45°) */
23
+
--color-ink-50: light-dark(oklch(17.8% 0.025 45), oklch(97.5% 0.016 45));
24
+
--color-ink-100: light-dark(oklch(25.5% 0.045 45), oklch(93% 0.035 45));
25
+
--color-ink-200: light-dark(oklch(39% 0.078 45), oklch(85% 0.068 45));
26
+
--color-ink-300: light-dark(oklch(51% 0.108 45), oklch(75% 0.098 45));
27
+
--color-ink-400: light-dark(oklch(62.5% 0.135 45), oklch(65% 0.128 45));
28
+
--color-ink-500: light-dark(oklch(73.5% 0.162 45), oklch(55% 0.162 45));
29
+
--color-ink-600: light-dark(oklch(78.5% 0.128 45), oklch(45% 0.135 45));
30
+
--color-ink-700: light-dark(oklch(83.8% 0.098 45), oklch(35% 0.108 45));
31
+
--color-ink-800: light-dark(oklch(89.2% 0.068 45), oklch(25% 0.078 45));
32
+
--color-ink-900: light-dark(oklch(94.5% 0.035 45), oklch(18% 0.045 45));
33
+
--color-ink-950: light-dark(oklch(97.5% 0.016 45), oklch(12% 0.025 45));
34
+
35
+
/* Canvas - Orange-tinted backgrounds (45°) */
36
+
--color-canvas-50: light-dark(oklch(18% 0.028 45), oklch(98.5% 0.010 45));
37
+
--color-canvas-100: light-dark(oklch(26% 0.050 45), oklch(96.5% 0.022 45));
38
+
--color-canvas-200: light-dark(oklch(39.8% 0.088 45), oklch(92% 0.048 45));
39
+
--color-canvas-300: light-dark(oklch(52.5% 0.118 45), oklch(86% 0.078 45));
40
+
--color-canvas-400: light-dark(oklch(64.5% 0.148 45), oklch(80% 0.108 45));
41
+
--color-canvas-500: light-dark(oklch(76% 0.178 45), oklch(76% 0.135 45));
42
+
--color-canvas-600: light-dark(oklch(80% 0.108 45), oklch(64.5% 0.148 45));
43
+
--color-canvas-700: light-dark(oklch(86% 0.078 45), oklch(52.5% 0.118 45));
44
+
--color-canvas-800: light-dark(oklch(92% 0.048 45), oklch(39.8% 0.088 45));
45
+
--color-canvas-900: light-dark(oklch(96.5% 0.022 45), oklch(26% 0.050 45));
46
+
--color-canvas-950: light-dark(oklch(98.5% 0.010 45), oklch(18% 0.028 45));
47
+
48
+
/* Secondary - Golden Yellow (75°) */
49
+
--color-secondary-50: light-dark(oklch(19.5% 0.035 75), oklch(98% 0.023 75));
50
+
--color-secondary-100: light-dark(oklch(28.2% 0.058 75), oklch(95.2% 0.045 75));
51
+
--color-secondary-200: light-dark(oklch(43.5% 0.098 75), oklch(90.2% 0.088 75));
52
+
--color-secondary-300: light-dark(oklch(57.8% 0.132 75), oklch(81.8% 0.128 75));
53
+
--color-secondary-400: light-dark(oklch(70.8% 0.165 75), oklch(72.8% 0.162 75));
54
+
--color-secondary-500: light-dark(oklch(82.8% 0.195 75), oklch(63.8% 0.195 75));
55
+
--color-secondary-600: light-dark(oklch(85.5% 0.162 75), oklch(53.8% 0.165 75));
56
+
--color-secondary-700: light-dark(oklch(88.8% 0.128 75), oklch(43.8% 0.132 75));
57
+
--color-secondary-800: light-dark(oklch(92.5% 0.088 75), oklch(33.8% 0.098 75));
58
+
--color-secondary-900: light-dark(oklch(96.2% 0.045 75), oklch(24.8% 0.058 75));
59
+
--color-secondary-950: light-dark(oklch(98.5% 0.023 75), oklch(17.5% 0.035 75));
60
+
61
+
/* Accent - Deep Amber (25°) */
62
+
--color-accent-50: light-dark(oklch(19% 0.042 25), oklch(97.8% 0.028 25));
63
+
--color-accent-100: light-dark(oklch(27.5% 0.068 25), oklch(94.8% 0.052 25));
64
+
--color-accent-200: light-dark(oklch(42.5% 0.115 25), oklch(89.8% 0.105 25));
65
+
--color-accent-300: light-dark(oklch(56.5% 0.155 25), oklch(81% 0.148 25));
66
+
--color-accent-400: light-dark(oklch(69.5% 0.192 25), oklch(71.5% 0.185 25));
67
+
--color-accent-500: light-dark(oklch(81.5% 0.228 25), oklch(62% 0.228 25));
68
+
--color-accent-600: light-dark(oklch(84.8% 0.185 25), oklch(51.5% 0.192 25));
69
+
--color-accent-700: light-dark(oklch(88.2% 0.148 25), oklch(41.5% 0.155 25));
70
+
--color-accent-800: light-dark(oklch(92% 0.105 25), oklch(31.5% 0.115 25));
71
+
--color-accent-900: light-dark(oklch(96% 0.052 25), oklch(23% 0.068 25));
72
+
--color-accent-950: light-dark(oklch(98.2% 0.028 25), oklch(16.5% 0.042 25));
73
+
}
+73
src/lib/styles/themes/teal.css
+73
src/lib/styles/themes/teal.css
···
1
+
/* ============================================================================
2
+
TEAL THEME - Blue-green (Cyan)
3
+
Primary: Cool teal
4
+
Secondary: Aqua
5
+
Accent: Deep turquoise
6
+
Hue: 195° (cyan/teal)
7
+
============================================================================ */
8
+
[data-color-theme='teal'] {
9
+
/* Primary - Teal (195°) */
10
+
--color-primary-50: light-dark(oklch(18.6% 0.038 195), oklch(97.7% 0.025 195));
11
+
--color-primary-100: light-dark(oklch(26.8% 0.062 195), oklch(94.4% 0.048 195));
12
+
--color-primary-200: light-dark(oklch(41.2% 0.102 195), oklch(89% 0.095 195));
13
+
--color-primary-300: light-dark(oklch(54.8% 0.138 195), oklch(79.8% 0.135 195));
14
+
--color-primary-400: light-dark(oklch(67.2% 0.172 195), oklch(70.2% 0.175 195));
15
+
--color-primary-500: light-dark(oklch(79% 0.205 195), oklch(60.5% 0.205 195));
16
+
--color-primary-600: light-dark(oklch(82.5% 0.175 195), oklch(50.5% 0.172 195));
17
+
--color-primary-700: light-dark(oklch(86.5% 0.135 195), oklch(40.5% 0.138 195));
18
+
--color-primary-800: light-dark(oklch(91% 0.095 195), oklch(30.5% 0.102 195));
19
+
--color-primary-900: light-dark(oklch(95.5% 0.048 195), oklch(22% 0.062 195));
20
+
--color-primary-950: light-dark(oklch(98% 0.025 195), oklch(15.5% 0.038 195));
21
+
22
+
/* Ink - Teal-tinted text (195°) */
23
+
--color-ink-50: light-dark(oklch(17.7% 0.025 195), oklch(97.5% 0.016 195));
24
+
--color-ink-100: light-dark(oklch(25.4% 0.045 195), oklch(93% 0.035 195));
25
+
--color-ink-200: light-dark(oklch(38.8% 0.078 195), oklch(85% 0.068 195));
26
+
--color-ink-300: light-dark(oklch(51.2% 0.108 195), oklch(75% 0.098 195));
27
+
--color-ink-400: light-dark(oklch(62.8% 0.135 195), oklch(65% 0.128 195));
28
+
--color-ink-500: light-dark(oklch(73.8% 0.162 195), oklch(55% 0.162 195));
29
+
--color-ink-600: light-dark(oklch(78.8% 0.128 195), oklch(45% 0.135 195));
30
+
--color-ink-700: light-dark(oklch(84% 0.098 195), oklch(35% 0.108 195));
31
+
--color-ink-800: light-dark(oklch(89.4% 0.068 195), oklch(25% 0.078 195));
32
+
--color-ink-900: light-dark(oklch(94.6% 0.035 195), oklch(18% 0.045 195));
33
+
--color-ink-950: light-dark(oklch(97.5% 0.016 195), oklch(12% 0.025 195));
34
+
35
+
/* Canvas - Teal-tinted backgrounds (195°) */
36
+
--color-canvas-50: light-dark(oklch(18% 0.028 195), oklch(98.5% 0.010 195));
37
+
--color-canvas-100: light-dark(oklch(26% 0.050 195), oklch(96.5% 0.022 195));
38
+
--color-canvas-200: light-dark(oklch(39.8% 0.088 195), oklch(92% 0.048 195));
39
+
--color-canvas-300: light-dark(oklch(52.5% 0.118 195), oklch(86% 0.078 195));
40
+
--color-canvas-400: light-dark(oklch(64.5% 0.148 195), oklch(80% 0.108 195));
41
+
--color-canvas-500: light-dark(oklch(76% 0.178 195), oklch(76% 0.135 195));
42
+
--color-canvas-600: light-dark(oklch(80% 0.108 195), oklch(64.5% 0.148 195));
43
+
--color-canvas-700: light-dark(oklch(86% 0.078 195), oklch(52.5% 0.118 195));
44
+
--color-canvas-800: light-dark(oklch(92% 0.048 195), oklch(39.8% 0.088 195));
45
+
--color-canvas-900: light-dark(oklch(96.5% 0.022 195), oklch(26% 0.050 195));
46
+
--color-canvas-950: light-dark(oklch(98.5% 0.010 195), oklch(18% 0.028 195));
47
+
48
+
/* Secondary - Aqua (180°) */
49
+
--color-secondary-50: light-dark(oklch(19% 0.039 180), oklch(97.8% 0.026 180));
50
+
--color-secondary-100: light-dark(oklch(27.5% 0.063 180), oklch(94.5% 0.049 180));
51
+
--color-secondary-200: light-dark(oklch(42.5% 0.105 180), oklch(89.5% 0.098 180));
52
+
--color-secondary-300: light-dark(oklch(56.5% 0.142 180), oklch(80.5% 0.138 180));
53
+
--color-secondary-400: light-dark(oklch(69.5% 0.178 180), oklch(70.5% 0.175 180));
54
+
--color-secondary-500: light-dark(oklch(81.5% 0.212 180), oklch(61% 0.212 180));
55
+
--color-secondary-600: light-dark(oklch(84.5% 0.175 180), oklch(50.5% 0.178 180));
56
+
--color-secondary-700: light-dark(oklch(88% 0.138 180), oklch(40.5% 0.142 180));
57
+
--color-secondary-800: light-dark(oklch(91.8% 0.098 180), oklch(30.5% 0.105 180));
58
+
--color-secondary-900: light-dark(oklch(95.8% 0.049 180), oklch(22.5% 0.063 180));
59
+
--color-secondary-950: light-dark(oklch(98% 0.026 180), oklch(16% 0.039 180));
60
+
61
+
/* Accent - Deep Turquoise (210°) */
62
+
--color-accent-50: light-dark(oklch(19% 0.040 210), oklch(97.9% 0.027 210));
63
+
--color-accent-100: light-dark(oklch(27.5% 0.065 210), oklch(94.8% 0.050 210));
64
+
--color-accent-200: light-dark(oklch(42.5% 0.110 210), oklch(89.8% 0.098 210));
65
+
--color-accent-300: light-dark(oklch(56.5% 0.148 210), oklch(81% 0.142 210));
66
+
--color-accent-400: light-dark(oklch(69.5% 0.185 210), oklch(71.5% 0.178 210));
67
+
--color-accent-500: light-dark(oklch(81.5% 0.220 210), oklch(62% 0.220 210));
68
+
--color-accent-600: light-dark(oklch(84.8% 0.178 210), oklch(51.5% 0.185 210));
69
+
--color-accent-700: light-dark(oklch(88.2% 0.142 210), oklch(41.5% 0.148 210));
70
+
--color-accent-800: light-dark(oklch(92% 0.098 210), oklch(31.5% 0.110 210));
71
+
--color-accent-900: light-dark(oklch(96% 0.050 210), oklch(23% 0.065 210));
72
+
--color-accent-950: light-dark(oklch(98.2% 0.027 210), oklch(16.2% 0.040 210));
73
+
}