my website at ewancroft.uk
feat: update default color theme to 'slate' and enhance theme variables for improved accessibility
+75
-3
+72
src/app.css
+72
src/app.css
···
2
2
@import 'tailwindcss';
3
3
@import './lib/styles/themes.css';
4
4
5
+
@theme {
6
+
/* Font Family */
7
+
--font-family-sans:
8
+
'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
9
+
'Segoe UI Symbol', 'Noto Color Emoji';
10
+
11
+
/* Ink - Slate-tinted text (230°) */
12
+
--color-ink-50: light-dark(oklch(17.5% 0.012 230), oklch(97.6% 0.008 230));
13
+
--color-ink-100: light-dark(oklch(25% 0.022 230), oklch(93.2% 0.017 230));
14
+
--color-ink-200: light-dark(oklch(38.5% 0.037 230), oklch(85.2% 0.032 230));
15
+
--color-ink-300: light-dark(oklch(50.5% 0.052 230), oklch(75.2% 0.048 230));
16
+
--color-ink-400: light-dark(oklch(62% 0.065 230), oklch(65.2% 0.062 230));
17
+
--color-ink-500: light-dark(oklch(73% 0.078 230), oklch(55.2% 0.078 230));
18
+
--color-ink-600: light-dark(oklch(78% 0.062 230), oklch(45.2% 0.065 230));
19
+
--color-ink-700: light-dark(oklch(83.5% 0.048 230), oklch(35.2% 0.052 230));
20
+
--color-ink-800: light-dark(oklch(89% 0.032 230), oklch(25.2% 0.037 230));
21
+
--color-ink-900: light-dark(oklch(94.5% 0.017 230), oklch(18.2% 0.022 230));
22
+
--color-ink-950: light-dark(oklch(97.6% 0.008 230), oklch(12.5% 0.012 230));
23
+
24
+
/* Canvas - Slate-tinted backgrounds (230°) */
25
+
--color-canvas-50: light-dark(oklch(17.8% 0.014 230), oklch(98.6% 0.005 230));
26
+
--color-canvas-100: light-dark(oklch(25.8% 0.025 230), oklch(96.6% 0.011 230));
27
+
--color-canvas-200: light-dark(oklch(39.5% 0.042 230), oklch(92.5% 0.024 230));
28
+
--color-canvas-300: light-dark(oklch(52% 0.058 230), oklch(86.5% 0.038 230));
29
+
--color-canvas-400: light-dark(oklch(64% 0.072 230), oklch(80.5% 0.055 230));
30
+
--color-canvas-500: light-dark(oklch(75.5% 0.085 230), oklch(75.5% 0.068 230));
31
+
--color-canvas-600: light-dark(oklch(80.5% 0.055 230), oklch(64% 0.072 230));
32
+
--color-canvas-700: light-dark(oklch(86.5% 0.038 230), oklch(52% 0.058 230));
33
+
--color-canvas-800: light-dark(oklch(92.5% 0.024 230), oklch(39.5% 0.042 230));
34
+
--color-canvas-900: light-dark(oklch(96.6% 0.011 230), oklch(25.8% 0.025 230));
35
+
--color-canvas-950: light-dark(oklch(98.6% 0.005 230), oklch(17.8% 0.014 230));
36
+
37
+
/* Slate - Primary colors (230°) */
38
+
--color-primary-50: light-dark(oklch(18.2% 0.018 230), oklch(97.8% 0.012 230));
39
+
--color-primary-100: light-dark(oklch(26.5% 0.030 230), oklch(94.8% 0.022 230));
40
+
--color-primary-200: light-dark(oklch(40.5% 0.048 230), oklch(89.5% 0.042 230));
41
+
--color-primary-300: light-dark(oklch(54% 0.065 230), oklch(79.5% 0.062 230));
42
+
--color-primary-400: light-dark(oklch(66.5% 0.080 230), oklch(69.5% 0.078 230));
43
+
--color-primary-500: light-dark(oklch(78.5% 0.095 230), oklch(59.5% 0.095 230));
44
+
--color-primary-600: light-dark(oklch(82.2% 0.078 230), oklch(49.5% 0.080 230));
45
+
--color-primary-700: light-dark(oklch(86.5% 0.062 230), oklch(39.5% 0.065 230));
46
+
--color-primary-800: light-dark(oklch(91% 0.042 230), oklch(29.5% 0.048 230));
47
+
--color-primary-900: light-dark(oklch(95.8% 0.022 230), oklch(21.5% 0.030 230));
48
+
--color-primary-950: light-dark(oklch(98% 0.012 230), oklch(15.2% 0.018 230));
49
+
50
+
/* Steel Grey - Secondary colors (215°) */
51
+
--color-secondary-50: light-dark(oklch(18.5% 0.020 215), oklch(97.9% 0.013 215));
52
+
--color-secondary-100: light-dark(oklch(26.8% 0.033 215), oklch(95% 0.024 215));
53
+
--color-secondary-200: light-dark(oklch(41% 0.052 215), oklch(89.8% 0.045 215));
54
+
--color-secondary-300: light-dark(oklch(54.5% 0.070 215), oklch(80.2% 0.065 215));
55
+
--color-secondary-400: light-dark(oklch(67% 0.087 215), oklch(70.2% 0.082 215));
56
+
--color-secondary-500: light-dark(oklch(79% 0.103 215), oklch(60.2% 0.103 215));
57
+
--color-secondary-600: light-dark(oklch(82.8% 0.082 215), oklch(50.2% 0.087 215));
58
+
--color-secondary-700: light-dark(oklch(87% 0.065 215), oklch(40.2% 0.070 215));
59
+
--color-secondary-800: light-dark(oklch(91.5% 0.045 215), oklch(30.5% 0.052 215));
60
+
--color-secondary-900: light-dark(oklch(96% 0.024 215), oklch(22.2% 0.033 215));
61
+
--color-secondary-950: light-dark(oklch(98.2% 0.013 215), oklch(15.8% 0.020 215));
62
+
63
+
/* Charcoal - Accent colors (240°) */
64
+
--color-accent-50: light-dark(oklch(18.5% 0.022 240), oklch(98% 0.014 240));
65
+
--color-accent-100: light-dark(oklch(26.8% 0.036 240), oklch(95.2% 0.026 240));
66
+
--color-accent-200: light-dark(oklch(41% 0.058 240), oklch(90% 0.048 240));
67
+
--color-accent-300: light-dark(oklch(54.5% 0.078 240), oklch(80.8% 0.072 240));
68
+
--color-accent-400: light-dark(oklch(67% 0.097 240), oklch(71% 0.092 240));
69
+
--color-accent-500: light-dark(oklch(79% 0.115 240), oklch(61% 0.115 240));
70
+
--color-accent-600: light-dark(oklch(82.8% 0.092 240), oklch(51% 0.097 240));
71
+
--color-accent-700: light-dark(oklch(87% 0.072 240), oklch(41% 0.078 240));
72
+
--color-accent-800: light-dark(oklch(91.5% 0.048 240), oklch(31% 0.058 240));
73
+
--color-accent-900: light-dark(oklch(96% 0.026 240), oklch(22.5% 0.036 240));
74
+
--color-accent-950: light-dark(oklch(98.2% 0.014 240), oklch(16.2% 0.022 240));
75
+
}
76
+
5
77
@layer base {
6
78
/* Base styles for consistent typography and accessibility */
7
79
html {
+1
-1
src/lib/components/layout/ColorThemeToggle.svelte
+1
-1
src/lib/components/layout/ColorThemeToggle.svelte
+1
-1
src/lib/stores/colorTheme.ts
+1
-1
src/lib/stores/colorTheme.ts
+1
-1
src/routes/+layout.svelte
+1
-1
src/routes/+layout.svelte