@bsuite/theme 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/css/utilities.css +12 -12
- package/src/css/vars.css +50 -63
- package/src/preset-v4.css +27 -27
- package/src/tailwind-preset.js +37 -31
package/package.json
CHANGED
package/src/css/utilities.css
CHANGED
|
@@ -5,37 +5,37 @@
|
|
|
5
5
|
* consumer regardless of their Tailwind version (v3 or v4).
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
/* ===== Glow effects (
|
|
8
|
+
/* ===== Glow effects (oklch with alpha scaled by glow-strength) ===== */
|
|
9
9
|
.glow-electric-blue {
|
|
10
|
-
box-shadow: 0 0 20px
|
|
10
|
+
box-shadow: 0 0 20px oklch(0.546 0.215 262.9 / var(--glow-strength));
|
|
11
11
|
}
|
|
12
12
|
.glow-electric-cyan {
|
|
13
|
-
box-shadow: 0 0 20px
|
|
13
|
+
box-shadow: 0 0 20px oklch(0.769 0.132 191.7 / var(--glow-strength));
|
|
14
14
|
}
|
|
15
15
|
.glow-electric-indigo {
|
|
16
|
-
box-shadow: 0 0 20px
|
|
16
|
+
box-shadow: 0 0 20px oklch(0.511 0.23 277 / var(--glow-strength));
|
|
17
17
|
}
|
|
18
18
|
.glow-electric-purple {
|
|
19
|
-
box-shadow: 0 0 20px
|
|
19
|
+
box-shadow: 0 0 20px oklch(0.568 0.202 283.1 / var(--glow-strength));
|
|
20
20
|
}
|
|
21
21
|
.glow-electric-pink {
|
|
22
|
-
box-shadow: 0 0 20px
|
|
22
|
+
box-shadow: 0 0 20px oklch(0.656 0.212 354.3 / var(--glow-strength));
|
|
23
23
|
}
|
|
24
24
|
.glow-electric-coral {
|
|
25
|
-
box-shadow: 0 0 20px
|
|
25
|
+
box-shadow: 0 0 20px oklch(0.669 0.219 20.9 / var(--glow-strength));
|
|
26
26
|
}
|
|
27
27
|
.glow-electric-magenta {
|
|
28
|
-
box-shadow: 0 0 20px
|
|
28
|
+
box-shadow: 0 0 20px oklch(0.742 0.167 359.5 / var(--glow-strength));
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
/* ===== Neon text shadows ===== */
|
|
32
32
|
.neon-text-cyan {
|
|
33
|
-
text-shadow: 0 0 10px
|
|
34
|
-
0 0 20px
|
|
33
|
+
text-shadow: 0 0 10px oklch(0.769 0.132 191.7 / 0.5),
|
|
34
|
+
0 0 20px oklch(0.769 0.132 191.7 / 0.3);
|
|
35
35
|
}
|
|
36
36
|
.neon-text-electric {
|
|
37
|
-
text-shadow: 0 0 10px
|
|
38
|
-
0 0 20px
|
|
37
|
+
text-shadow: 0 0 10px oklch(0.546 0.215 262.9 / 0.5),
|
|
38
|
+
0 0 20px oklch(0.546 0.215 262.9 / 0.3);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
/* ===== Smooth theme transition ===== */
|
package/src/css/vars.css
CHANGED
|
@@ -1,84 +1,71 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* @bsuite/theme — CSS custom properties (:root + .dark)
|
|
3
3
|
*
|
|
4
|
-
* Canonical D2C Neon Electric palette
|
|
5
|
-
*
|
|
4
|
+
* Canonical D2C Neon Electric palette in oklch. Tailwind v4 supports
|
|
5
|
+
* native alpha modifiers on oklch values, so RGB triplets are no longer
|
|
6
|
+
* needed:
|
|
6
7
|
*
|
|
7
8
|
* color: var(--neon-electric-blue);
|
|
8
|
-
* background:
|
|
9
|
+
* background: oklch(from var(--neon-electric-blue) l c h / 0.4);
|
|
9
10
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* resolve correctly.
|
|
11
|
+
* In Tailwind v4 @theme blocks, oklch values automatically support
|
|
12
|
+
* alpha modifiers: bg-neon-electric-blue/40 works natively.
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
:root {
|
|
16
16
|
/* ===== Neon Electric (11 colours — FROZEN per D2C spec v1.00A) ===== */
|
|
17
|
-
--neon-electric-blue:
|
|
18
|
-
--neon-electric-cyan:
|
|
19
|
-
--neon-electric-indigo:
|
|
20
|
-
--neon-electric-purple:
|
|
21
|
-
--neon-electric-magenta:
|
|
22
|
-
--neon-electric-pink:
|
|
23
|
-
--neon-electric-coral:
|
|
24
|
-
--neon-electric-orange:
|
|
25
|
-
--neon-electric-yellow:
|
|
26
|
-
--neon-electric-green:
|
|
27
|
-
--neon-electric-lavender:
|
|
28
|
-
|
|
29
|
-
/* RGB triplets for rgba() use and Tailwind alpha-value substitution */
|
|
30
|
-
--neon-electric-blue-rgb: 37 99 235;
|
|
31
|
-
--neon-electric-cyan-rgb: 0 206 201;
|
|
32
|
-
--neon-electric-indigo-rgb: 79 70 229;
|
|
33
|
-
--neon-electric-purple-rgb: 108 92 231;
|
|
34
|
-
--neon-electric-magenta-rgb: 253 121 168;
|
|
35
|
-
--neon-electric-pink-rgb: 236 72 153;
|
|
36
|
-
--neon-electric-coral-rgb: 255 71 87;
|
|
37
|
-
--neon-electric-orange-rgb: 255 118 117;
|
|
38
|
-
--neon-electric-yellow-rgb: 253 203 110;
|
|
39
|
-
--neon-electric-green-rgb: 34 197 94;
|
|
40
|
-
--neon-electric-lavender-rgb: 162 155 254;
|
|
17
|
+
--neon-electric-blue: oklch(0.546 0.215 262.9);
|
|
18
|
+
--neon-electric-cyan: oklch(0.769 0.132 191.7);
|
|
19
|
+
--neon-electric-indigo: oklch(0.511 0.23 277);
|
|
20
|
+
--neon-electric-purple: oklch(0.568 0.202 283.1);
|
|
21
|
+
--neon-electric-magenta: oklch(0.742 0.167 359.5);
|
|
22
|
+
--neon-electric-pink: oklch(0.656 0.212 354.3);
|
|
23
|
+
--neon-electric-coral: oklch(0.669 0.219 20.9);
|
|
24
|
+
--neon-electric-orange: oklch(0.728 0.168 22.5);
|
|
25
|
+
--neon-electric-yellow: oklch(0.868 0.125 81.4);
|
|
26
|
+
--neon-electric-green: oklch(0.723 0.192 149.6);
|
|
27
|
+
--neon-electric-lavender: oklch(0.736 0.141 285.6);
|
|
41
28
|
|
|
42
29
|
/* ===== Light theme surfaces ===== */
|
|
43
|
-
--light-bg-primary:
|
|
44
|
-
--light-bg-secondary:
|
|
45
|
-
--light-bg-tertiary:
|
|
46
|
-
--light-bg-accent:
|
|
47
|
-
--light-text-primary:
|
|
48
|
-
--light-text-secondary:
|
|
49
|
-
--light-text-tertiary:
|
|
50
|
-
--light-text-quaternary:
|
|
51
|
-
--light-border:
|
|
52
|
-
--light-hover:
|
|
30
|
+
--light-bg-primary: oklch(0.961 0 0.5);
|
|
31
|
+
--light-bg-secondary: oklch(0.982 0.002 248);
|
|
32
|
+
--light-bg-tertiary: oklch(0.963 0.003 228.9);
|
|
33
|
+
--light-bg-accent: oklch(1 0 0.5);
|
|
34
|
+
--light-text-primary: oklch(0.319 0.01 216.8);
|
|
35
|
+
--light-text-secondary: oklch(0.53 0.015 221.6);
|
|
36
|
+
--light-text-tertiary: oklch(0.768 0.123 250);
|
|
37
|
+
--light-text-quaternary: oklch(0.748 0.017 239.2);
|
|
38
|
+
--light-border: oklch(0.942 0.005 247.9);
|
|
39
|
+
--light-hover: oklch(0.963 0.003 228.9);
|
|
53
40
|
|
|
54
41
|
/* ===== Dark theme surfaces ===== */
|
|
55
|
-
--dark-bg-primary:
|
|
56
|
-
--dark-bg-secondary:
|
|
57
|
-
--dark-bg-tertiary:
|
|
58
|
-
--dark-bg-quaternary:
|
|
59
|
-
--dark-bg-accent:
|
|
60
|
-
--dark-text-primary:
|
|
61
|
-
--dark-text-secondary:
|
|
62
|
-
--dark-text-tertiary:
|
|
63
|
-
--dark-text-quaternary:
|
|
64
|
-
--dark-border:
|
|
65
|
-
--dark-hover:
|
|
42
|
+
--dark-bg-primary: oklch(0.166 0.026 269.4);
|
|
43
|
+
--dark-bg-secondary: oklch(0.242 0.03 269.9);
|
|
44
|
+
--dark-bg-tertiary: oklch(0.326 0.036 266.7);
|
|
45
|
+
--dark-bg-quaternary: oklch(0.39 0.035 265);
|
|
46
|
+
--dark-bg-accent: oklch(0.292 0.034 270);
|
|
47
|
+
--dark-text-primary: oklch(0.982 0.002 248);
|
|
48
|
+
--dark-text-secondary: oklch(0.769 0.015 248);
|
|
49
|
+
--dark-text-tertiary: oklch(0.558 0.016 244.9);
|
|
50
|
+
--dark-text-quaternary: oklch(0.428 0.015 248.2);
|
|
51
|
+
--dark-border: oklch(0.428 0.015 248.2);
|
|
52
|
+
--dark-hover: oklch(0.39 0.035 265);
|
|
66
53
|
|
|
67
54
|
/* ===== Semantic status colours ===== */
|
|
68
|
-
--status-success:
|
|
69
|
-
--status-warning:
|
|
70
|
-
--status-error:
|
|
71
|
-
--status-info:
|
|
55
|
+
--status-success: oklch(0.697 0.135 172.1);
|
|
56
|
+
--status-warning: oklch(0.868 0.125 81.4);
|
|
57
|
+
--status-error: oklch(0.669 0.219 20.9);
|
|
58
|
+
--status-info: oklch(0.769 0.132 191.7);
|
|
72
59
|
|
|
73
60
|
/* ===== WCAG AA compliant text pairs =====
|
|
74
61
|
*
|
|
75
|
-
* Raw neon cyan
|
|
62
|
+
* Raw neon cyan on light bg is 1.76:1 — fails WCAG AA 4.5:1.
|
|
76
63
|
* These tokens are the accessible text equivalents for the same visual
|
|
77
64
|
* identity. Use these for any text, border, or icon that needs to pass
|
|
78
65
|
* contrast checks; use raw --neon-electric-cyan for backgrounds and
|
|
79
66
|
* decorative elements only. */
|
|
80
|
-
--color-accent-text:
|
|
81
|
-
--color-primary-text:
|
|
67
|
+
--color-accent-text: oklch(0.486 0.084 191.5); /* Dark cyan — passes AA on light bg */
|
|
68
|
+
--color-primary-text: oklch(0.485 0.243 263.6); /* Saturated blue — passes AA on light bg */
|
|
82
69
|
|
|
83
70
|
/* ===== Glow + shadow strength multipliers ===== */
|
|
84
71
|
--glow-strength: 0.4;
|
|
@@ -86,14 +73,14 @@
|
|
|
86
73
|
}
|
|
87
74
|
|
|
88
75
|
.dark {
|
|
89
|
-
/* Neon palette is identical in dark mode — same
|
|
90
|
-
*
|
|
76
|
+
/* Neon palette is identical in dark mode — same oklch values.
|
|
77
|
+
* What changes is the intensity of glow/shadow effects, which
|
|
91
78
|
* we scale down to suit dark surfaces. */
|
|
92
79
|
--glow-strength: 0.6;
|
|
93
80
|
--shadow-strength: 0.8;
|
|
94
81
|
|
|
95
82
|
/* Accent/primary text tokens flip to the raw neons in dark mode because
|
|
96
|
-
* contrast on
|
|
97
|
-
--color-accent-text:
|
|
98
|
-
--color-primary-text:
|
|
83
|
+
* contrast on navy bg is already ≥ 9:1 for those values. */
|
|
84
|
+
--color-accent-text: oklch(0.769 0.132 191.7);
|
|
85
|
+
--color-primary-text: oklch(0.623 0.188 259.8);
|
|
99
86
|
}
|
package/src/preset-v4.css
CHANGED
|
@@ -20,39 +20,39 @@
|
|
|
20
20
|
|
|
21
21
|
@theme {
|
|
22
22
|
/* ===== Neon Electric palette (11 colours, canonical D2C) ===== */
|
|
23
|
-
--color-neon-electric-blue:
|
|
24
|
-
--color-neon-electric-cyan:
|
|
25
|
-
--color-neon-electric-indigo:
|
|
26
|
-
--color-neon-electric-purple:
|
|
27
|
-
--color-neon-electric-magenta:
|
|
28
|
-
--color-neon-electric-pink:
|
|
29
|
-
--color-neon-electric-coral:
|
|
30
|
-
--color-neon-electric-orange:
|
|
31
|
-
--color-neon-electric-yellow:
|
|
32
|
-
--color-neon-electric-green:
|
|
33
|
-
--color-neon-electric-lavender:
|
|
23
|
+
--color-neon-electric-blue: oklch(0.546 0.215 262.9);
|
|
24
|
+
--color-neon-electric-cyan: oklch(0.769 0.132 191.7);
|
|
25
|
+
--color-neon-electric-indigo: oklch(0.511 0.23 277);
|
|
26
|
+
--color-neon-electric-purple: oklch(0.568 0.202 283.1);
|
|
27
|
+
--color-neon-electric-magenta: oklch(0.742 0.167 359.5);
|
|
28
|
+
--color-neon-electric-pink: oklch(0.656 0.212 354.3);
|
|
29
|
+
--color-neon-electric-coral: oklch(0.669 0.219 20.9);
|
|
30
|
+
--color-neon-electric-orange: oklch(0.728 0.168 22.5);
|
|
31
|
+
--color-neon-electric-yellow: oklch(0.868 0.125 81.4);
|
|
32
|
+
--color-neon-electric-green: oklch(0.723 0.192 149.6);
|
|
33
|
+
--color-neon-electric-lavender: oklch(0.736 0.141 285.6);
|
|
34
34
|
|
|
35
35
|
/* ===== Light surface tokens ===== */
|
|
36
|
-
--color-light-bg-primary:
|
|
37
|
-
--color-light-bg-secondary:
|
|
38
|
-
--color-light-bg-tertiary:
|
|
39
|
-
--color-light-bg-accent:
|
|
40
|
-
--color-light-text-primary:
|
|
41
|
-
--color-light-text-secondary:
|
|
36
|
+
--color-light-bg-primary: oklch(0.961 0 0.5);
|
|
37
|
+
--color-light-bg-secondary: oklch(0.982 0.002 248);
|
|
38
|
+
--color-light-bg-tertiary: oklch(0.963 0.003 228.9);
|
|
39
|
+
--color-light-bg-accent: oklch(1 0 0.5);
|
|
40
|
+
--color-light-text-primary: oklch(0.319 0.01 216.8);
|
|
41
|
+
--color-light-text-secondary: oklch(0.53 0.015 221.6);
|
|
42
42
|
|
|
43
43
|
/* ===== Dark surface tokens ===== */
|
|
44
|
-
--color-dark-bg-primary:
|
|
45
|
-
--color-dark-bg-secondary:
|
|
46
|
-
--color-dark-bg-tertiary:
|
|
47
|
-
--color-dark-bg-accent:
|
|
48
|
-
--color-dark-text-primary:
|
|
49
|
-
--color-dark-text-secondary:
|
|
44
|
+
--color-dark-bg-primary: oklch(0.166 0.026 269.4);
|
|
45
|
+
--color-dark-bg-secondary: oklch(0.242 0.03 269.9);
|
|
46
|
+
--color-dark-bg-tertiary: oklch(0.326 0.036 266.7);
|
|
47
|
+
--color-dark-bg-accent: oklch(0.292 0.034 270);
|
|
48
|
+
--color-dark-text-primary: oklch(0.982 0.002 248);
|
|
49
|
+
--color-dark-text-secondary: oklch(0.769 0.015 248);
|
|
50
50
|
|
|
51
51
|
/* ===== Semantic status ===== */
|
|
52
|
-
--color-status-success:
|
|
53
|
-
--color-status-warning:
|
|
54
|
-
--color-status-error:
|
|
55
|
-
--color-status-info:
|
|
52
|
+
--color-status-success: oklch(0.697 0.135 172.1);
|
|
53
|
+
--color-status-warning: oklch(0.868 0.125 81.4);
|
|
54
|
+
--color-status-error: oklch(0.669 0.219 20.9);
|
|
55
|
+
--color-status-info: oklch(0.769 0.132 191.7);
|
|
56
56
|
|
|
57
57
|
/* ===== Animations (Tailwind v4 exposes via --animate-*) ===== */
|
|
58
58
|
--animate-pulse-soft: pulse-soft 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
package/src/tailwind-preset.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @bsuite/theme — Tailwind v3 preset
|
|
2
|
+
* @bsuite/theme — Tailwind v3 preset (oklch edition)
|
|
3
3
|
*
|
|
4
4
|
* Consume via:
|
|
5
5
|
* // tailwind.config.js (CommonJS)
|
|
@@ -12,9 +12,15 @@
|
|
|
12
12
|
* surface tokens, semantic status colours, gradients, glow shadows, and
|
|
13
13
|
* the six canonical animations. Does not override Tailwind's default scale.
|
|
14
14
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* CSS
|
|
15
|
+
* Colour values are inline oklch so the preset is self-contained — no
|
|
16
|
+
* dependency on any `--*-rgb` CSS custom property. Tailwind v3 injects
|
|
17
|
+
* `<alpha-value>` into any valid CSS colour function, and `oklch(L C H / A)`
|
|
18
|
+
* is valid CSS Color 4 syntax (supported in all evergreen browsers:
|
|
19
|
+
* Chrome ≥111, Safari ≥15.4, Firefox ≥113). Keeps bg-neon-electric-blue/40
|
|
20
|
+
* and friends working without the RGB-triplet variable indirection.
|
|
21
|
+
*
|
|
22
|
+
* Values are kept in sync with `preset-v4.css` — editing one without the
|
|
23
|
+
* other will cause v3 and v4 consumers to diverge. See README.
|
|
18
24
|
*
|
|
19
25
|
* NOTE: Tailwind v4 apps should import `@bsuite/theme/preset-v4.css` instead.
|
|
20
26
|
* v4 removed the preset system — presets exist only for v3.
|
|
@@ -27,17 +33,17 @@ module.exports = {
|
|
|
27
33
|
extend: {
|
|
28
34
|
colors: {
|
|
29
35
|
neon: {
|
|
30
|
-
'electric-blue': '
|
|
31
|
-
'electric-cyan': '
|
|
32
|
-
'electric-indigo': '
|
|
33
|
-
'electric-purple': '
|
|
34
|
-
'electric-magenta': '
|
|
35
|
-
'electric-pink': '
|
|
36
|
-
'electric-coral': '
|
|
37
|
-
'electric-orange': '
|
|
38
|
-
'electric-yellow': '
|
|
39
|
-
'electric-green': '
|
|
40
|
-
'electric-lavender': '
|
|
36
|
+
'electric-blue': 'oklch(0.546 0.215 262.9 / <alpha-value>)',
|
|
37
|
+
'electric-cyan': 'oklch(0.769 0.132 191.7 / <alpha-value>)',
|
|
38
|
+
'electric-indigo': 'oklch(0.511 0.23 277 / <alpha-value>)',
|
|
39
|
+
'electric-purple': 'oklch(0.568 0.202 283.1 / <alpha-value>)',
|
|
40
|
+
'electric-magenta': 'oklch(0.742 0.167 359.5 / <alpha-value>)',
|
|
41
|
+
'electric-pink': 'oklch(0.656 0.212 354.3 / <alpha-value>)',
|
|
42
|
+
'electric-coral': 'oklch(0.669 0.219 20.9 / <alpha-value>)',
|
|
43
|
+
'electric-orange': 'oklch(0.728 0.168 22.5 / <alpha-value>)',
|
|
44
|
+
'electric-yellow': 'oklch(0.868 0.125 81.4 / <alpha-value>)',
|
|
45
|
+
'electric-green': 'oklch(0.726 0.197 145.5 / <alpha-value>)',
|
|
46
|
+
'electric-lavender': 'oklch(0.749 0.115 288.4 / <alpha-value>)',
|
|
41
47
|
},
|
|
42
48
|
light: {
|
|
43
49
|
bg: {
|
|
@@ -82,26 +88,26 @@ module.exports = {
|
|
|
82
88
|
|
|
83
89
|
backgroundImage: {
|
|
84
90
|
'gradient-brand':
|
|
85
|
-
'linear-gradient(135deg,
|
|
91
|
+
'linear-gradient(135deg, oklch(0.669 0.219 20.9) 0%, oklch(0.728 0.168 22.5) 25%, oklch(0.868 0.125 81.4) 50%, oklch(0.769 0.132 191.7) 75%, oklch(0.749 0.115 288.4) 100%)',
|
|
86
92
|
'gradient-electric':
|
|
87
|
-
'linear-gradient(135deg,
|
|
93
|
+
'linear-gradient(135deg, oklch(0.546 0.215 262.9) 0%, oklch(0.769 0.132 191.7) 50%, oklch(0.656 0.212 354.3) 100%)',
|
|
88
94
|
'gradient-neon':
|
|
89
|
-
'linear-gradient(90deg,
|
|
95
|
+
'linear-gradient(90deg, oklch(0.769 0.132 191.7) 0%, oklch(0.568 0.202 283.1) 50%, oklch(0.669 0.219 20.9) 100%)',
|
|
90
96
|
'gradient-chat-user':
|
|
91
|
-
'linear-gradient(135deg,
|
|
97
|
+
'linear-gradient(135deg, oklch(0.636 0.153 271.3) 0%, oklch(0.466 0.168 296.3) 100%)',
|
|
92
98
|
'gradient-chat-agent':
|
|
93
|
-
'linear-gradient(135deg,
|
|
99
|
+
'linear-gradient(135deg, oklch(0.546 0.215 262.9) 0%, oklch(0.656 0.212 354.3) 100%)',
|
|
94
100
|
'gradient-neural':
|
|
95
|
-
'radial-gradient(circle at center,
|
|
101
|
+
'radial-gradient(circle at center, oklch(0.769 0.132 191.7 / 0.1) 0%, transparent 50%)',
|
|
96
102
|
},
|
|
97
103
|
|
|
98
104
|
boxShadow: {
|
|
99
|
-
'glow-electric-blue': '0 0 20px
|
|
100
|
-
'glow-electric-cyan': '0 0 20px
|
|
101
|
-
'glow-electric-purple': '0 0 20px
|
|
102
|
-
'glow-electric-pink': '0 0 20px
|
|
103
|
-
'glow-electric-coral': '0 0 20px
|
|
104
|
-
'glow-electric-magenta': '0 0 20px
|
|
105
|
+
'glow-electric-blue': '0 0 20px oklch(0.546 0.215 262.9 / var(--glow-strength))',
|
|
106
|
+
'glow-electric-cyan': '0 0 20px oklch(0.769 0.132 191.7 / var(--glow-strength))',
|
|
107
|
+
'glow-electric-purple': '0 0 20px oklch(0.568 0.202 283.1 / var(--glow-strength))',
|
|
108
|
+
'glow-electric-pink': '0 0 20px oklch(0.656 0.212 354.3 / var(--glow-strength))',
|
|
109
|
+
'glow-electric-coral': '0 0 20px oklch(0.669 0.219 20.9 / var(--glow-strength))',
|
|
110
|
+
'glow-electric-magenta': '0 0 20px oklch(0.742 0.167 359.5 / var(--glow-strength))',
|
|
105
111
|
},
|
|
106
112
|
|
|
107
113
|
animation: {
|
|
@@ -119,8 +125,8 @@ module.exports = {
|
|
|
119
125
|
'50%': { opacity: '0.7' },
|
|
120
126
|
},
|
|
121
127
|
glow: {
|
|
122
|
-
'0%': { boxShadow: '0 0 5px
|
|
123
|
-
'100%': { boxShadow: '0 0 20px
|
|
128
|
+
'0%': { boxShadow: '0 0 5px oklch(0.769 0.132 191.7 / 0.2)' },
|
|
129
|
+
'100%': { boxShadow: '0 0 20px oklch(0.769 0.132 191.7 / 0.6)' },
|
|
124
130
|
},
|
|
125
131
|
typing: {
|
|
126
132
|
'0%, 60%': { opacity: '1' },
|
|
@@ -135,8 +141,8 @@ module.exports = {
|
|
|
135
141
|
'50%': { transform: 'translateY(-10px)' },
|
|
136
142
|
},
|
|
137
143
|
'neon-pulse': {
|
|
138
|
-
'0%, 100%': { textShadow: '0 0 10px
|
|
139
|
-
'50%': { textShadow: '0 0 20px
|
|
144
|
+
'0%, 100%': { textShadow: '0 0 10px oklch(0.769 0.132 191.7 / 0.3)' },
|
|
145
|
+
'50%': { textShadow: '0 0 20px oklch(0.769 0.132 191.7 / 0.8)' },
|
|
140
146
|
},
|
|
141
147
|
},
|
|
142
148
|
},
|