neon_glow 0.1.0

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.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: ae2475588bbfa3783bf8b82b750da5f290efbcaf825722db6e5ee42ec92840ae
4
+ data.tar.gz: f4e0f54835876bce240abb67ed09cc1ff175a42ca58808e5ae4afa0eb4aa4bbc
5
+ SHA512:
6
+ metadata.gz: 0523f5b7a8533ddfe7e6f6ae7c3c87c17563a4d38ec547c209e3443ceef37d15c2de53753db95b6a9701383a4cdcda26eafa9730a3ede786151a06519b1fa80b
7
+ data.tar.gz: 0f2bf1eafa4feab1991ef4426e748d9ba420e7d6a00b573fc1613104987e9c0375e2f432c2a4e20e37873a076915f7b4b03d4f60fe4236f585e9323010cb8d26
data/CHANGELOG.md ADDED
@@ -0,0 +1,12 @@
1
+ # Changelog
2
+
3
+ ## 0.1.0 (2026-02-22)
4
+
5
+ - Initial release
6
+ - 4 color palettes: Rainbow, Unicorn, Cinematic, Pink
7
+ - 3 intensity levels: Subtle, Medium, Intense
8
+ - Dark surface system with 4 elevation levels
9
+ - Component classes: buttons, cards, badges, alerts, tables, forms, progress bars, navbar, switches, gradient borders
10
+ - Animated gradient borders and pulse effects
11
+ - `prefers-reduced-motion` accessibility fallback
12
+ - Rails Engine for automatic asset path registration
data/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Claude (Anthropic) & TokenFires
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,164 @@
1
+ # Neon Glow
2
+
3
+ **A dark neon glow design system for Bootstrap and Tailwind CSS.**
4
+
5
+ 4 color palettes. 3 intensity levels. Pure CSS custom properties. Works with any framework or standalone.
6
+
7
+ [![Gem Version](https://badge.fury.io/rb/neon_glow.svg)](https://rubygems.org/gems/neon_glow)
8
+
9
+ ---
10
+
11
+ ## Installation
12
+
13
+ Add to your Gemfile:
14
+
15
+ ```ruby
16
+ gem "neon_glow"
17
+ ```
18
+
19
+ Then run:
20
+
21
+ ```bash
22
+ bundle install
23
+ ```
24
+
25
+ The gem is a Rails Engine that automatically adds the stylesheets to your asset paths.
26
+
27
+ ---
28
+
29
+ ## Usage in Rails
30
+
31
+ ### With Propshaft / Importmap (Rails 7+)
32
+
33
+ Link the stylesheets in your layout:
34
+
35
+ ```erb
36
+ <%= stylesheet_link_tag "neon_glow/tokens", "data-turbo-track": "reload" %>
37
+ <%= stylesheet_link_tag "neon_glow/components", "data-turbo-track": "reload" %>
38
+ ```
39
+
40
+ ### With Tailwind CSS
41
+
42
+ Import in your Tailwind entry point:
43
+
44
+ ```css
45
+ @import "tailwindcss";
46
+ @import "neon_glow/tokens";
47
+ @import "neon_glow/components";
48
+ ```
49
+
50
+ ### With Sprockets (older Rails)
51
+
52
+ Add to your `application.css`:
53
+
54
+ ```css
55
+ /*
56
+ *= require neon_glow/tokens
57
+ *= require neon_glow/components
58
+ */
59
+ ```
60
+
61
+ ### Set the Theme
62
+
63
+ Add palette and intensity classes to your `<body>`:
64
+
65
+ ```html
66
+ <body class="neon-glow-body neon-rainbow neon-medium">
67
+ ```
68
+
69
+ ---
70
+
71
+ ## Palettes
72
+
73
+ | Class | Vibe |
74
+ |-------|------|
75
+ | `neon-rainbow` | Full-spectrum neon. Arcade cabinets and light shows. |
76
+ | `neon-unicorn` | Pastel rainbow. Dreamy, soft, ethereal. |
77
+ | `neon-cinematic` | Electric blue + amber. The Blade Runner palette. |
78
+ | `neon-pink` | Hot pink + magenta. A power color for everyone. |
79
+
80
+ ## Intensity Levels
81
+
82
+ | Class | Description |
83
+ |-------|-------------|
84
+ | `neon-subtle` | Gentle glow. Professional. Easy on the eyes. |
85
+ | `neon-medium` | Balanced glow. The sweet spot for most apps. |
86
+ | `neon-intense` | Maximum glow. Over the top. The WOW factor. |
87
+
88
+ ---
89
+
90
+ ## Switching Themes at Runtime
91
+
92
+ Swap classes on `<body>` -- all colors cascade instantly via CSS custom properties:
93
+
94
+ ```javascript
95
+ document.body.classList.remove("neon-rainbow", "neon-unicorn", "neon-cinematic", "neon-pink");
96
+ document.body.classList.add("neon-cinematic");
97
+
98
+ document.body.classList.remove("neon-subtle", "neon-medium", "neon-intense");
99
+ document.body.classList.add("neon-intense");
100
+ ```
101
+
102
+ ---
103
+
104
+ ## Live Demo
105
+
106
+ See the full kitchen sink demo with all components and palettes:
107
+
108
+ **[rails_neon_glow](https://github.com/tokenfires/rails_neon_glow)** -- Rails 8.1.2 app with Tailwind and Bootstrap showcases.
109
+
110
+ ---
111
+
112
+ ## Component Classes
113
+
114
+ ```
115
+ ng-card -- Dark surface card
116
+ ng-card-raised -- Elevated surface card
117
+ ng-border-glow -- Gradient border with glow
118
+ ng-glow-primary -- Primary color box-shadow glow
119
+ ng-glow-secondary -- Secondary color box-shadow glow
120
+ ng-text-glow -- Glowing text (primary)
121
+ ng-gradient-text -- Rainbow gradient text
122
+ ng-btn -- Base button
123
+ ng-btn-primary -- Primary glowing button
124
+ ng-btn-secondary -- Secondary glowing button
125
+ ng-btn-outline -- Outline button with glow
126
+ ng-btn-ghost -- Ghost button
127
+ ng-input -- Form input with focus glow
128
+ ng-select -- Select dropdown
129
+ ng-switch -- Toggle switch
130
+ ng-badge-* -- Badges (primary, secondary, success, warning, danger, info)
131
+ ng-alert-* -- Alerts with glowing left border
132
+ ng-table -- Dark themed table
133
+ ng-progress -- Progress bar container
134
+ ng-progress-bar -- Gradient progress bar
135
+ ng-navbar -- Sticky navbar with backdrop blur
136
+ ng-divider -- Gradient divider line
137
+ ng-animate-pulse -- Pulsing glow animation
138
+ ng-animate-gradient -- Rotating gradient border animation
139
+ ```
140
+
141
+ ---
142
+
143
+ ## Design
144
+
145
+ **Designed by Claude** (Anthropic) in collaboration with [TokenFires](https://github.com/tokenfires).
146
+
147
+ The Neon Glow design system was created through an AI-human collaboration. Claude designed the color palettes, glow effects, component styles, and the overall dark neon aesthetic. TokenFires provided creative direction, reference materials, and review.
148
+
149
+ ---
150
+
151
+ ## License
152
+
153
+ MIT License -- See [LICENSE](LICENSE)
154
+
155
+ ---
156
+
157
+ ## Also Available
158
+
159
+ - **npm**: [`neon-glow-css`](https://github.com/tokenfires/neon_glow_npm)
160
+ - **Demo**: [`rails_neon_glow`](https://github.com/tokenfires/rails_neon_glow)
161
+
162
+ ---
163
+
164
+ *Built with care by Claude and TokenFires. 2026.*
@@ -0,0 +1,618 @@
1
+ /*
2
+ * Neon Glow Component Styles
3
+ * Designed by Claude (Anthropic)
4
+ *
5
+ * Reusable glow effects for UI components.
6
+ * These classes work with any palette and intensity --
7
+ * they read from the CSS custom properties in tokens.css.
8
+ */
9
+
10
+ /* ============================================================
11
+ BASE BODY STYLES
12
+ ============================================================ */
13
+ .neon-glow-body {
14
+ background-color: var(--ng-bg);
15
+ color: var(--ng-text);
16
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
17
+ transition: background-color var(--ng-transition), color var(--ng-transition);
18
+ }
19
+
20
+ /* ============================================================
21
+ GLOW BOX SHADOWS
22
+ Apply to cards, panels, buttons, inputs, etc.
23
+ ============================================================ */
24
+ .ng-glow-primary {
25
+ box-shadow:
26
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-primary-rgb), var(--ng-glow-opacity)),
27
+ 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.5)),
28
+ inset 0 0 calc(var(--ng-glow-spread) * 0.5) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.15));
29
+ }
30
+
31
+ .ng-glow-secondary {
32
+ box-shadow:
33
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-secondary-rgb), var(--ng-glow-opacity)),
34
+ 0 0 var(--ng-glow-spread) rgba(var(--ng-secondary-rgb), calc(var(--ng-glow-opacity) * 0.5)),
35
+ inset 0 0 calc(var(--ng-glow-spread) * 0.5) rgba(var(--ng-secondary-rgb), calc(var(--ng-glow-opacity) * 0.15));
36
+ }
37
+
38
+ .ng-glow-accent {
39
+ box-shadow:
40
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-accent-rgb), var(--ng-glow-opacity)),
41
+ 0 0 var(--ng-glow-spread) rgba(var(--ng-accent-rgb), calc(var(--ng-glow-opacity) * 0.5)),
42
+ inset 0 0 calc(var(--ng-glow-spread) * 0.5) rgba(var(--ng-accent-rgb), calc(var(--ng-glow-opacity) * 0.15));
43
+ }
44
+
45
+ .ng-glow-success {
46
+ box-shadow:
47
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-success-rgb), var(--ng-glow-opacity)),
48
+ 0 0 var(--ng-glow-spread) rgba(var(--ng-success-rgb), calc(var(--ng-glow-opacity) * 0.5));
49
+ }
50
+
51
+ .ng-glow-warning {
52
+ box-shadow:
53
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-warning-rgb), var(--ng-glow-opacity)),
54
+ 0 0 var(--ng-glow-spread) rgba(var(--ng-warning-rgb), calc(var(--ng-glow-opacity) * 0.5));
55
+ }
56
+
57
+ .ng-glow-danger {
58
+ box-shadow:
59
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-danger-rgb), var(--ng-glow-opacity)),
60
+ 0 0 var(--ng-glow-spread) rgba(var(--ng-danger-rgb), calc(var(--ng-glow-opacity) * 0.5));
61
+ }
62
+
63
+ .ng-glow-info {
64
+ box-shadow:
65
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-info-rgb), var(--ng-glow-opacity)),
66
+ 0 0 var(--ng-glow-spread) rgba(var(--ng-info-rgb), calc(var(--ng-glow-opacity) * 0.5));
67
+ }
68
+
69
+ /* ============================================================
70
+ NEON TEXT
71
+ Glowing text effect using text-shadow.
72
+ ============================================================ */
73
+ .ng-text-glow {
74
+ text-shadow:
75
+ 0 0 var(--ng-glow-text-blur) rgba(var(--ng-primary-rgb), var(--ng-glow-opacity)),
76
+ 0 0 calc(var(--ng-glow-text-blur) * 2) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.4));
77
+ }
78
+
79
+ .ng-text-glow-secondary {
80
+ text-shadow:
81
+ 0 0 var(--ng-glow-text-blur) rgba(var(--ng-secondary-rgb), var(--ng-glow-opacity)),
82
+ 0 0 calc(var(--ng-glow-text-blur) * 2) rgba(var(--ng-secondary-rgb), calc(var(--ng-glow-opacity) * 0.4));
83
+ }
84
+
85
+ .ng-text-glow-accent {
86
+ text-shadow:
87
+ 0 0 var(--ng-glow-text-blur) rgba(var(--ng-accent-rgb), var(--ng-glow-opacity)),
88
+ 0 0 calc(var(--ng-glow-text-blur) * 2) rgba(var(--ng-accent-rgb), calc(var(--ng-glow-opacity) * 0.4));
89
+ }
90
+
91
+ /* ============================================================
92
+ GRADIENT BORDER
93
+ The signature look -- gradient borders with glow.
94
+ Uses a pseudo-element technique for true gradient borders.
95
+ ============================================================ */
96
+ .ng-border-glow {
97
+ position: relative;
98
+ border: 1px solid transparent;
99
+ background-clip: padding-box;
100
+ }
101
+
102
+ .ng-border-glow::before {
103
+ content: "";
104
+ position: absolute;
105
+ inset: -1px;
106
+ border-radius: inherit;
107
+ background: var(--ng-gradient-border);
108
+ z-index: -1;
109
+ opacity: var(--ng-border-glow-opacity);
110
+ transition: opacity var(--ng-transition-glow);
111
+ }
112
+
113
+ .ng-border-glow::after {
114
+ content: "";
115
+ position: absolute;
116
+ inset: -2px;
117
+ border-radius: inherit;
118
+ background: var(--ng-gradient-border);
119
+ z-index: -2;
120
+ opacity: calc(var(--ng-border-glow-opacity) * 0.4);
121
+ filter: blur(var(--ng-glow-blur));
122
+ transition: opacity var(--ng-transition-glow), filter var(--ng-transition-glow);
123
+ }
124
+
125
+ .ng-border-glow:hover::before {
126
+ opacity: 1;
127
+ }
128
+
129
+ .ng-border-glow:hover::after {
130
+ opacity: calc(var(--ng-border-glow-opacity) * 0.7);
131
+ filter: blur(calc(var(--ng-glow-blur) * 1.3));
132
+ }
133
+
134
+ /* Single-color border glow variants */
135
+ .ng-border-primary {
136
+ border: 1px solid var(--ng-primary);
137
+ box-shadow: 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.4));
138
+ transition: box-shadow var(--ng-transition-glow);
139
+ }
140
+
141
+ .ng-border-primary:hover {
142
+ box-shadow: 0 0 var(--ng-glow-blur) rgba(var(--ng-primary-rgb), var(--ng-glow-opacity));
143
+ }
144
+
145
+ .ng-border-secondary {
146
+ border: 1px solid var(--ng-secondary);
147
+ box-shadow: 0 0 var(--ng-glow-spread) rgba(var(--ng-secondary-rgb), calc(var(--ng-glow-opacity) * 0.4));
148
+ transition: box-shadow var(--ng-transition-glow);
149
+ }
150
+
151
+ .ng-border-secondary:hover {
152
+ box-shadow: 0 0 var(--ng-glow-blur) rgba(var(--ng-secondary-rgb), var(--ng-glow-opacity));
153
+ }
154
+
155
+ /* ============================================================
156
+ SURFACE CARDS
157
+ Dark cards with glow borders -- the bread and butter.
158
+ ============================================================ */
159
+ .ng-card {
160
+ background-color: var(--ng-surface);
161
+ border-radius: var(--ng-radius-lg);
162
+ padding: 1.5rem;
163
+ border: 1px solid var(--ng-border-subtle);
164
+ transition: border-color var(--ng-transition), box-shadow var(--ng-transition-glow);
165
+ }
166
+
167
+ .ng-card:hover {
168
+ border-color: var(--ng-border);
169
+ }
170
+
171
+ .ng-card-raised {
172
+ background-color: var(--ng-surface-raised);
173
+ border-radius: var(--ng-radius-lg);
174
+ padding: 1.5rem;
175
+ border: 1px solid var(--ng-border);
176
+ transition: box-shadow var(--ng-transition-glow);
177
+ }
178
+
179
+ /* ============================================================
180
+ NEON BUTTONS
181
+ Glowing buttons with hover intensification.
182
+ ============================================================ */
183
+ .ng-btn {
184
+ display: inline-flex;
185
+ align-items: center;
186
+ justify-content: center;
187
+ padding: 0.5rem 1.25rem;
188
+ border-radius: var(--ng-radius);
189
+ font-weight: 600;
190
+ font-size: 0.875rem;
191
+ line-height: 1.5;
192
+ cursor: pointer;
193
+ border: none;
194
+ transition:
195
+ box-shadow var(--ng-transition-glow),
196
+ transform var(--ng-transition),
197
+ background-color var(--ng-transition);
198
+ }
199
+
200
+ .ng-btn:active {
201
+ transform: scale(0.97);
202
+ }
203
+
204
+ .ng-btn-primary {
205
+ background-color: var(--ng-primary);
206
+ color: var(--ng-text-inverse);
207
+ box-shadow: 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.5));
208
+ }
209
+
210
+ .ng-btn-primary:hover {
211
+ box-shadow:
212
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-primary-rgb), var(--ng-glow-opacity)),
213
+ 0 0 calc(var(--ng-glow-blur) * 2) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.3));
214
+ }
215
+
216
+ .ng-btn-secondary {
217
+ background-color: var(--ng-secondary);
218
+ color: var(--ng-text-inverse);
219
+ box-shadow: 0 0 var(--ng-glow-spread) rgba(var(--ng-secondary-rgb), calc(var(--ng-glow-opacity) * 0.5));
220
+ }
221
+
222
+ .ng-btn-secondary:hover {
223
+ box-shadow:
224
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-secondary-rgb), var(--ng-glow-opacity)),
225
+ 0 0 calc(var(--ng-glow-blur) * 2) rgba(var(--ng-secondary-rgb), calc(var(--ng-glow-opacity) * 0.3));
226
+ }
227
+
228
+ .ng-btn-outline {
229
+ background-color: transparent;
230
+ color: var(--ng-primary);
231
+ border: 1px solid var(--ng-primary);
232
+ box-shadow: 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.25));
233
+ }
234
+
235
+ .ng-btn-outline:hover {
236
+ background-color: rgba(var(--ng-primary-rgb), 0.1);
237
+ box-shadow:
238
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.6)),
239
+ inset 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), 0.1);
240
+ }
241
+
242
+ .ng-btn-ghost {
243
+ background-color: transparent;
244
+ color: var(--ng-text);
245
+ border: 1px solid var(--ng-border);
246
+ }
247
+
248
+ .ng-btn-ghost:hover {
249
+ border-color: var(--ng-primary);
250
+ color: var(--ng-primary);
251
+ box-shadow: 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.3));
252
+ }
253
+
254
+ /* ============================================================
255
+ NEON INPUTS
256
+ Form inputs with glow on focus.
257
+ ============================================================ */
258
+ .ng-input {
259
+ background-color: var(--ng-surface);
260
+ color: var(--ng-text);
261
+ border: 1px solid var(--ng-border);
262
+ border-radius: var(--ng-radius);
263
+ padding: 0.5rem 0.75rem;
264
+ font-size: 0.875rem;
265
+ outline: none;
266
+ transition: border-color var(--ng-transition), box-shadow var(--ng-transition-glow);
267
+ }
268
+
269
+ .ng-input::placeholder {
270
+ color: var(--ng-text-muted);
271
+ }
272
+
273
+ .ng-input:focus {
274
+ border-color: var(--ng-primary);
275
+ box-shadow:
276
+ 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.4)),
277
+ 0 0 var(--ng-glow-blur) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.2));
278
+ }
279
+
280
+ /* ============================================================
281
+ NEON BADGES / PILLS
282
+ ============================================================ */
283
+ .ng-badge {
284
+ display: inline-flex;
285
+ align-items: center;
286
+ padding: 0.2rem 0.6rem;
287
+ border-radius: 9999px;
288
+ font-size: 0.75rem;
289
+ font-weight: 600;
290
+ letter-spacing: 0.025em;
291
+ }
292
+
293
+ .ng-badge-primary {
294
+ background-color: rgba(var(--ng-primary-rgb), 0.15);
295
+ color: var(--ng-primary);
296
+ border: 1px solid rgba(var(--ng-primary-rgb), 0.3);
297
+ }
298
+
299
+ .ng-badge-secondary {
300
+ background-color: rgba(var(--ng-secondary-rgb), 0.15);
301
+ color: var(--ng-secondary);
302
+ border: 1px solid rgba(var(--ng-secondary-rgb), 0.3);
303
+ }
304
+
305
+ .ng-badge-success {
306
+ background-color: rgba(var(--ng-success-rgb), 0.15);
307
+ color: var(--ng-success);
308
+ border: 1px solid rgba(var(--ng-success-rgb), 0.3);
309
+ }
310
+
311
+ .ng-badge-warning {
312
+ background-color: rgba(var(--ng-warning-rgb), 0.15);
313
+ color: var(--ng-warning);
314
+ border: 1px solid rgba(var(--ng-warning-rgb), 0.3);
315
+ }
316
+
317
+ .ng-badge-danger {
318
+ background-color: rgba(var(--ng-danger-rgb), 0.15);
319
+ color: var(--ng-danger);
320
+ border: 1px solid rgba(var(--ng-danger-rgb), 0.3);
321
+ }
322
+
323
+ .ng-badge-info {
324
+ background-color: rgba(var(--ng-info-rgb), 0.15);
325
+ color: var(--ng-info);
326
+ border: 1px solid rgba(var(--ng-info-rgb), 0.3);
327
+ }
328
+
329
+ /* ============================================================
330
+ NEON ALERTS
331
+ ============================================================ */
332
+ .ng-alert {
333
+ padding: 1rem 1.25rem;
334
+ border-radius: var(--ng-radius);
335
+ border-left: 3px solid;
336
+ background-color: var(--ng-surface);
337
+ }
338
+
339
+ .ng-alert-success {
340
+ border-left-color: var(--ng-success);
341
+ box-shadow: -4px 0 var(--ng-glow-spread) rgba(var(--ng-success-rgb), calc(var(--ng-glow-opacity) * 0.3));
342
+ }
343
+
344
+ .ng-alert-warning {
345
+ border-left-color: var(--ng-warning);
346
+ box-shadow: -4px 0 var(--ng-glow-spread) rgba(var(--ng-warning-rgb), calc(var(--ng-glow-opacity) * 0.3));
347
+ }
348
+
349
+ .ng-alert-danger {
350
+ border-left-color: var(--ng-danger);
351
+ box-shadow: -4px 0 var(--ng-glow-spread) rgba(var(--ng-danger-rgb), calc(var(--ng-glow-opacity) * 0.3));
352
+ }
353
+
354
+ .ng-alert-info {
355
+ border-left-color: var(--ng-info);
356
+ box-shadow: -4px 0 var(--ng-glow-spread) rgba(var(--ng-info-rgb), calc(var(--ng-glow-opacity) * 0.3));
357
+ }
358
+
359
+ /* ============================================================
360
+ NEON TABLE
361
+ ============================================================ */
362
+ .ng-table {
363
+ width: 100%;
364
+ border-collapse: separate;
365
+ border-spacing: 0;
366
+ }
367
+
368
+ .ng-table th {
369
+ background-color: var(--ng-surface-raised);
370
+ color: var(--ng-text-secondary);
371
+ font-weight: 600;
372
+ font-size: 0.75rem;
373
+ text-transform: uppercase;
374
+ letter-spacing: 0.05em;
375
+ padding: 0.75rem 1rem;
376
+ text-align: left;
377
+ border-bottom: 1px solid var(--ng-border);
378
+ }
379
+
380
+ .ng-table td {
381
+ padding: 0.75rem 1rem;
382
+ border-bottom: 1px solid var(--ng-border-subtle);
383
+ font-size: 0.875rem;
384
+ }
385
+
386
+ .ng-table tbody tr {
387
+ transition: background-color var(--ng-transition);
388
+ }
389
+
390
+ .ng-table tbody tr:hover {
391
+ background-color: var(--ng-surface);
392
+ }
393
+
394
+ /* ============================================================
395
+ NEON NAVBAR
396
+ ============================================================ */
397
+ .ng-navbar {
398
+ background-color: var(--ng-surface);
399
+ border-bottom: 1px solid var(--ng-border-subtle);
400
+ padding: 0.75rem 1.5rem;
401
+ display: flex;
402
+ align-items: center;
403
+ justify-content: space-between;
404
+ position: sticky;
405
+ top: 0;
406
+ z-index: 50;
407
+ backdrop-filter: blur(12px);
408
+ background-color: rgba(18, 18, 42, 0.85);
409
+ }
410
+
411
+ .ng-navbar-brand {
412
+ font-size: 1.25rem;
413
+ font-weight: 700;
414
+ color: var(--ng-text);
415
+ text-decoration: none;
416
+ }
417
+
418
+ .ng-nav-link {
419
+ color: var(--ng-text-secondary);
420
+ text-decoration: none;
421
+ font-size: 0.875rem;
422
+ font-weight: 500;
423
+ padding: 0.5rem 0.75rem;
424
+ border-radius: var(--ng-radius);
425
+ transition: color var(--ng-transition), background-color var(--ng-transition);
426
+ }
427
+
428
+ .ng-nav-link:hover {
429
+ color: var(--ng-text);
430
+ background-color: var(--ng-surface-raised);
431
+ }
432
+
433
+ .ng-nav-link-active {
434
+ color: var(--ng-primary);
435
+ background-color: rgba(var(--ng-primary-rgb), 0.1);
436
+ }
437
+
438
+ /* ============================================================
439
+ NEON PROGRESS BAR
440
+ ============================================================ */
441
+ .ng-progress {
442
+ width: 100%;
443
+ height: 0.5rem;
444
+ background-color: var(--ng-surface-raised);
445
+ border-radius: 9999px;
446
+ overflow: hidden;
447
+ }
448
+
449
+ .ng-progress-bar {
450
+ height: 100%;
451
+ border-radius: 9999px;
452
+ background: var(--ng-gradient);
453
+ box-shadow: 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), var(--ng-glow-opacity));
454
+ transition: width 0.5s ease;
455
+ }
456
+
457
+ /* ============================================================
458
+ NEON SELECT (for theme switcher and forms)
459
+ ============================================================ */
460
+ .ng-select {
461
+ background-color: var(--ng-surface);
462
+ color: var(--ng-text);
463
+ border: 1px solid var(--ng-border);
464
+ border-radius: var(--ng-radius);
465
+ padding: 0.4rem 2rem 0.4rem 0.75rem;
466
+ font-size: 0.8rem;
467
+ outline: none;
468
+ cursor: pointer;
469
+ appearance: none;
470
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0cc' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
471
+ background-repeat: no-repeat;
472
+ background-position: right 0.5rem center;
473
+ transition: border-color var(--ng-transition), box-shadow var(--ng-transition-glow);
474
+ }
475
+
476
+ .ng-select:focus {
477
+ border-color: var(--ng-primary);
478
+ box-shadow: 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.3));
479
+ }
480
+
481
+ .ng-select option {
482
+ background-color: var(--ng-surface);
483
+ color: var(--ng-text);
484
+ }
485
+
486
+ /* ============================================================
487
+ NEON SWITCH / TOGGLE
488
+ ============================================================ */
489
+ .ng-switch {
490
+ position: relative;
491
+ display: inline-block;
492
+ width: 2.75rem;
493
+ height: 1.5rem;
494
+ }
495
+
496
+ .ng-switch input {
497
+ opacity: 0;
498
+ width: 0;
499
+ height: 0;
500
+ }
501
+
502
+ .ng-switch-slider {
503
+ position: absolute;
504
+ cursor: pointer;
505
+ inset: 0;
506
+ background-color: var(--ng-surface-raised);
507
+ border: 1px solid var(--ng-border);
508
+ border-radius: 9999px;
509
+ transition: background-color var(--ng-transition), box-shadow var(--ng-transition-glow);
510
+ }
511
+
512
+ .ng-switch-slider::before {
513
+ content: "";
514
+ position: absolute;
515
+ height: 1rem;
516
+ width: 1rem;
517
+ left: 0.2rem;
518
+ bottom: 0.19rem;
519
+ background-color: var(--ng-text-muted);
520
+ border-radius: 50%;
521
+ transition: transform var(--ng-transition), background-color var(--ng-transition);
522
+ }
523
+
524
+ .ng-switch input:checked + .ng-switch-slider {
525
+ background-color: rgba(var(--ng-primary-rgb), 0.2);
526
+ border-color: var(--ng-primary);
527
+ box-shadow: 0 0 var(--ng-glow-spread) rgba(var(--ng-primary-rgb), calc(var(--ng-glow-opacity) * 0.4));
528
+ }
529
+
530
+ .ng-switch input:checked + .ng-switch-slider::before {
531
+ transform: translateX(1.25rem);
532
+ background-color: var(--ng-primary);
533
+ }
534
+
535
+ /* ============================================================
536
+ ANIMATIONS
537
+ Subtle pulse and gradient rotation.
538
+ Respects prefers-reduced-motion.
539
+ ============================================================ */
540
+ @keyframes ng-pulse {
541
+ 0%, 100% { opacity: var(--ng-glow-opacity); }
542
+ 50% { opacity: calc(var(--ng-glow-opacity) * 1.4); }
543
+ }
544
+
545
+ @keyframes ng-gradient-rotate {
546
+ 0% { --ng-gradient-angle: 0deg; }
547
+ 100% { --ng-gradient-angle: 360deg; }
548
+ }
549
+
550
+ @property --ng-gradient-angle {
551
+ syntax: "<angle>";
552
+ initial-value: 135deg;
553
+ inherits: false;
554
+ }
555
+
556
+ .ng-animate-pulse {
557
+ animation: ng-pulse 2s ease-in-out infinite;
558
+ }
559
+
560
+ .ng-animate-gradient {
561
+ animation: ng-gradient-rotate 4s linear infinite;
562
+ }
563
+
564
+ @media (prefers-reduced-motion: reduce) {
565
+ .ng-animate-pulse,
566
+ .ng-animate-gradient {
567
+ animation: none;
568
+ }
569
+
570
+ .ng-btn,
571
+ .ng-input,
572
+ .ng-card,
573
+ .ng-card-raised,
574
+ .ng-nav-link,
575
+ .ng-border-glow::before,
576
+ .ng-border-glow::after,
577
+ .ng-switch-slider,
578
+ .ng-switch-slider::before {
579
+ transition: none;
580
+ }
581
+ }
582
+
583
+ /* ============================================================
584
+ UTILITY CLASSES
585
+ ============================================================ */
586
+ .ng-text-primary { color: var(--ng-primary); }
587
+ .ng-text-secondary { color: var(--ng-secondary); }
588
+ .ng-text-accent { color: var(--ng-accent); }
589
+ .ng-text-success { color: var(--ng-success); }
590
+ .ng-text-warning { color: var(--ng-warning); }
591
+ .ng-text-danger { color: var(--ng-danger); }
592
+ .ng-text-info { color: var(--ng-info); }
593
+ .ng-text-muted { color: var(--ng-text-muted); }
594
+
595
+ .ng-bg-surface { background-color: var(--ng-surface); }
596
+ .ng-bg-surface-raised { background-color: var(--ng-surface-raised); }
597
+ .ng-bg-overlay { background-color: var(--ng-surface-overlay); }
598
+
599
+ .ng-gradient-text {
600
+ background: var(--ng-gradient);
601
+ -webkit-background-clip: text;
602
+ -webkit-text-fill-color: transparent;
603
+ background-clip: text;
604
+ }
605
+
606
+ .ng-divider {
607
+ border: none;
608
+ height: 1px;
609
+ background: linear-gradient(
610
+ 90deg,
611
+ transparent,
612
+ var(--ng-border) 20%,
613
+ var(--ng-primary) 50%,
614
+ var(--ng-border) 80%,
615
+ transparent
616
+ );
617
+ opacity: 0.5;
618
+ }
@@ -0,0 +1,256 @@
1
+ /*
2
+ * Neon Glow Design Tokens
3
+ * Designed by Claude (Anthropic)
4
+ *
5
+ * The foundation of the Neon Glow theme system.
6
+ * All palettes, intensities, surfaces, and glow effects are defined here
7
+ * as CSS custom properties. Swap a class on <body> to change everything.
8
+ *
9
+ * Usage:
10
+ * <body class="neon-rainbow neon-intense">
11
+ * <body class="neon-unicorn neon-subtle">
12
+ * <body class="neon-cinematic neon-medium">
13
+ * <body class="neon-pink neon-intense">
14
+ */
15
+
16
+ /* ============================================================
17
+ BASE DARK SURFACE SYSTEM
18
+ Shared across all palettes. Inspired by the deep navy-black
19
+ of the EmberHearth icon backgrounds (#0a0a1e).
20
+ ============================================================ */
21
+ :root {
22
+ --ng-bg: #0a0a1e;
23
+ --ng-surface: #12122a;
24
+ --ng-surface-raised: #1a1a3e;
25
+ --ng-surface-overlay:#222252;
26
+ --ng-border: #2a2a5a;
27
+ --ng-border-subtle: #1e1e48;
28
+
29
+ --ng-text: #e8e8ff;
30
+ --ng-text-secondary: #a0a0cc;
31
+ --ng-text-muted: #6868a0;
32
+ --ng-text-inverse: #0a0a1e;
33
+
34
+ --ng-radius-sm: 0.375rem;
35
+ --ng-radius: 0.5rem;
36
+ --ng-radius-lg: 0.75rem;
37
+ --ng-radius-xl: 1rem;
38
+
39
+ --ng-transition: 0.2s ease;
40
+ --ng-transition-glow: 0.3s ease;
41
+ }
42
+
43
+ /* ============================================================
44
+ PALETTE: RAINBOW GLOW
45
+ Full-spectrum neon. Bold, vivid, electric.
46
+ Think arcade cabinets and pride flags made of light.
47
+ ============================================================ */
48
+ .neon-rainbow {
49
+ --ng-primary: #ff3333;
50
+ --ng-primary-rgb: 255, 51, 51;
51
+ --ng-secondary: #00e5ff;
52
+ --ng-secondary-rgb: 0, 229, 255;
53
+ --ng-accent: #ffdd00;
54
+ --ng-accent-rgb: 255, 221, 0;
55
+ --ng-success: #00ff88;
56
+ --ng-success-rgb: 0, 255, 136;
57
+ --ng-warning: #ff8800;
58
+ --ng-warning-rgb: 255, 136, 0;
59
+ --ng-danger: #ff2255;
60
+ --ng-danger-rgb: 255, 34, 85;
61
+ --ng-info: #8855ff;
62
+ --ng-info-rgb: 136, 85, 255;
63
+
64
+ --ng-gradient: linear-gradient(
65
+ 135deg,
66
+ #ff3333 0%,
67
+ #ff8800 16%,
68
+ #ffdd00 32%,
69
+ #00ff88 48%,
70
+ #00e5ff 64%,
71
+ #8855ff 80%,
72
+ #ff2d95 100%
73
+ );
74
+
75
+ --ng-gradient-border: linear-gradient(
76
+ var(--ng-gradient-angle, 135deg),
77
+ #ff3333, #ff8800, #ffdd00, #00ff88, #00e5ff, #8855ff, #ff2d95
78
+ );
79
+ }
80
+
81
+ /* ============================================================
82
+ PALETTE: UNICORN GLOW
83
+ Pastel rainbow. Dreamy, soft, ethereal.
84
+ The same spectrum, but like light through frosted glass.
85
+ ============================================================ */
86
+ .neon-unicorn {
87
+ --ng-primary: #c4a1ff;
88
+ --ng-primary-rgb: 196, 161, 255;
89
+ --ng-secondary: #7fffe0;
90
+ --ng-secondary-rgb: 127, 255, 224;
91
+ --ng-accent: #ffe4a1;
92
+ --ng-accent-rgb: 255, 228, 161;
93
+ --ng-success: #a1ffcc;
94
+ --ng-success-rgb: 161, 255, 204;
95
+ --ng-warning: #ffc4a1;
96
+ --ng-warning-rgb: 255, 196, 161;
97
+ --ng-danger: #ffa1c4;
98
+ --ng-danger-rgb: 255, 161, 196;
99
+ --ng-info: #a1c4ff;
100
+ --ng-info-rgb: 161, 196, 255;
101
+
102
+ --ng-gradient: linear-gradient(
103
+ 135deg,
104
+ #ffa1a1 0%,
105
+ #ffc4a1 16%,
106
+ #ffe4a1 32%,
107
+ #a1ffcc 48%,
108
+ #7fffe0 64%,
109
+ #c4a1ff 80%,
110
+ #ffb3d9 100%
111
+ );
112
+
113
+ --ng-gradient-border: linear-gradient(
114
+ var(--ng-gradient-angle, 135deg),
115
+ #ffa1a1, #ffc4a1, #ffe4a1, #a1ffcc, #7fffe0, #c4a1ff, #ffb3d9
116
+ );
117
+ }
118
+
119
+ /* ============================================================
120
+ PALETTE: CINEMATIC GLOW
121
+ Electric blue + amber/orange. The Blade Runner palette.
122
+ Every sci-fi movie poster you've ever loved.
123
+ ============================================================ */
124
+ .neon-cinematic {
125
+ --ng-primary: #0088ff;
126
+ --ng-primary-rgb: 0, 136, 255;
127
+ --ng-secondary: #ff8800;
128
+ --ng-secondary-rgb: 255, 136, 0;
129
+ --ng-accent: #ffd700;
130
+ --ng-accent-rgb: 255, 215, 0;
131
+ --ng-success: #00cc88;
132
+ --ng-success-rgb: 0, 204, 136;
133
+ --ng-warning: #ffaa00;
134
+ --ng-warning-rgb: 255, 170, 0;
135
+ --ng-danger: #ff4444;
136
+ --ng-danger-rgb: 255, 68, 68;
137
+ --ng-info: #44aaff;
138
+ --ng-info-rgb: 68, 170, 255;
139
+
140
+ --ng-gradient: linear-gradient(
141
+ 135deg,
142
+ #0088ff 0%,
143
+ #0066dd 25%,
144
+ #ff8800 50%,
145
+ #ffd700 75%,
146
+ #0088ff 100%
147
+ );
148
+
149
+ --ng-gradient-border: linear-gradient(
150
+ var(--ng-gradient-angle, 135deg),
151
+ #0088ff, #44aaff, #ff8800, #ffd700
152
+ );
153
+ }
154
+
155
+ /* ============================================================
156
+ PALETTE: PINK GLOW
157
+ Hot pink + magenta. Unapologetically vibrant.
158
+ For the gamer girls, women in tech, and anyone who
159
+ knows that pink is a power color.
160
+ ============================================================ */
161
+ .neon-pink {
162
+ --ng-primary: #ff2d95;
163
+ --ng-primary-rgb: 255, 45, 149;
164
+ --ng-secondary: #ff00ff;
165
+ --ng-secondary-rgb: 255, 0, 255;
166
+ --ng-accent: #ffb3d9;
167
+ --ng-accent-rgb: 255, 179, 217;
168
+ --ng-success: #00ffaa;
169
+ --ng-success-rgb: 0, 255, 170;
170
+ --ng-warning: #ff88cc;
171
+ --ng-warning-rgb: 255, 136, 204;
172
+ --ng-danger: #ff1155;
173
+ --ng-danger-rgb: 255, 17, 85;
174
+ --ng-info: #cc44ff;
175
+ --ng-info-rgb: 204, 68, 255;
176
+
177
+ --ng-gradient: linear-gradient(
178
+ 135deg,
179
+ #ff2d95 0%,
180
+ #ff00ff 33%,
181
+ #cc44ff 66%,
182
+ #ff2d95 100%
183
+ );
184
+
185
+ --ng-gradient-border: linear-gradient(
186
+ var(--ng-gradient-angle, 135deg),
187
+ #ff2d95, #ff00ff, #cc44ff, #ffb3d9
188
+ );
189
+ }
190
+
191
+ /* ============================================================
192
+ INTENSITY: SUBTLE
193
+ Gentle glow. Professional. Easy on the eyes.
194
+ Good for productivity apps and long reading sessions.
195
+ ============================================================ */
196
+ .neon-subtle {
197
+ --ng-glow-spread: 4px;
198
+ --ng-glow-blur: 8px;
199
+ --ng-glow-opacity: 0.3;
200
+ --ng-glow-text-blur: 4px;
201
+ --ng-border-glow-opacity: 0.4;
202
+ --ng-pulse-scale: 1.02;
203
+ }
204
+
205
+ /* ============================================================
206
+ INTENSITY: MEDIUM (default)
207
+ Balanced glow. Noticeable but not overwhelming.
208
+ The sweet spot for most applications.
209
+ ============================================================ */
210
+ .neon-medium,
211
+ :root {
212
+ --ng-glow-spread: 8px;
213
+ --ng-glow-blur: 16px;
214
+ --ng-glow-opacity: 0.5;
215
+ --ng-glow-text-blur: 8px;
216
+ --ng-border-glow-opacity: 0.6;
217
+ --ng-pulse-scale: 1.04;
218
+ }
219
+
220
+ /* ============================================================
221
+ INTENSITY: INTENSE
222
+ Maximum glow. Over the top. The WOW factor.
223
+ Cranked to 11 for showcases and gaming vibes.
224
+ ============================================================ */
225
+ .neon-intense {
226
+ --ng-glow-spread: 12px;
227
+ --ng-glow-blur: 28px;
228
+ --ng-glow-opacity: 0.7;
229
+ --ng-glow-text-blur: 14px;
230
+ --ng-border-glow-opacity: 0.85;
231
+ --ng-pulse-scale: 1.06;
232
+ }
233
+
234
+ /* ============================================================
235
+ DEFAULT PALETTE
236
+ If no palette class is set, fall back to Rainbow.
237
+ ============================================================ */
238
+ :root {
239
+ --ng-primary: #ff3333;
240
+ --ng-primary-rgb: 255, 51, 51;
241
+ --ng-secondary: #00e5ff;
242
+ --ng-secondary-rgb: 0, 229, 255;
243
+ --ng-accent: #ffdd00;
244
+ --ng-accent-rgb: 255, 221, 0;
245
+ --ng-success: #00ff88;
246
+ --ng-success-rgb: 0, 255, 136;
247
+ --ng-warning: #ff8800;
248
+ --ng-warning-rgb: 255, 136, 0;
249
+ --ng-danger: #ff2255;
250
+ --ng-danger-rgb: 255, 34, 85;
251
+ --ng-info: #8855ff;
252
+ --ng-info-rgb: 136, 85, 255;
253
+ --ng-gradient: linear-gradient(135deg, #ff3333, #ff8800, #ffdd00, #00ff88, #00e5ff, #8855ff, #ff2d95);
254
+ --ng-gradient-border: linear-gradient(135deg, #ff3333, #ff8800, #ffdd00, #00ff88, #00e5ff, #8855ff, #ff2d95);
255
+ --ng-gradient-angle: 135deg;
256
+ }
@@ -0,0 +1,7 @@
1
+ module NeonGlow
2
+ class Engine < ::Rails::Engine
3
+ initializer "neon_glow.assets" do |app|
4
+ app.config.assets.paths << root.join("app", "assets", "stylesheets")
5
+ end
6
+ end
7
+ end
@@ -0,0 +1,3 @@
1
+ module NeonGlow
2
+ VERSION = "0.1.0"
3
+ end
data/lib/neon_glow.rb ADDED
@@ -0,0 +1,5 @@
1
+ require "neon_glow/version"
2
+ require "neon_glow/engine"
3
+
4
+ module NeonGlow
5
+ end
metadata ADDED
@@ -0,0 +1,68 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: neon_glow
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Claude (Anthropic)
8
+ - TokenFires
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 1980-01-02 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: railties
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: '7.0'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ version: '7.0'
27
+ description: 4 color palettes (Rainbow, Unicorn, Cinematic, Pink), 3 intensity levels
28
+ (Subtle, Medium, Intense), and a full component library with glowing buttons, gradient
29
+ borders, neon text, and more. Pure CSS custom properties -- works with any framework
30
+ or standalone.
31
+ email: []
32
+ executables: []
33
+ extensions: []
34
+ extra_rdoc_files: []
35
+ files:
36
+ - CHANGELOG.md
37
+ - LICENSE
38
+ - README.md
39
+ - app/assets/stylesheets/neon_glow/components.css
40
+ - app/assets/stylesheets/neon_glow/tokens.css
41
+ - lib/neon_glow.rb
42
+ - lib/neon_glow/engine.rb
43
+ - lib/neon_glow/version.rb
44
+ homepage: https://github.com/tokenfires/neon_glow_gem
45
+ licenses:
46
+ - MIT
47
+ metadata:
48
+ homepage_uri: https://github.com/tokenfires/neon_glow_gem
49
+ source_code_uri: https://github.com/tokenfires/neon_glow_gem
50
+ changelog_uri: https://github.com/tokenfires/neon_glow_gem/blob/main/CHANGELOG.md
51
+ rdoc_options: []
52
+ require_paths:
53
+ - lib
54
+ required_ruby_version: !ruby/object:Gem::Requirement
55
+ requirements:
56
+ - - ">="
57
+ - !ruby/object:Gem::Version
58
+ version: 3.1.0
59
+ required_rubygems_version: !ruby/object:Gem::Requirement
60
+ requirements:
61
+ - - ">="
62
+ - !ruby/object:Gem::Version
63
+ version: '0'
64
+ requirements: []
65
+ rubygems_version: 3.6.9
66
+ specification_version: 4
67
+ summary: A dark neon glow design system for Bootstrap and Tailwind CSS
68
+ test_files: []