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 +7 -0
- data/CHANGELOG.md +12 -0
- data/LICENSE +21 -0
- data/README.md +164 -0
- data/app/assets/stylesheets/neon_glow/components.css +618 -0
- data/app/assets/stylesheets/neon_glow/tokens.css +256 -0
- data/lib/neon_glow/engine.rb +7 -0
- data/lib/neon_glow/version.rb +3 -0
- data/lib/neon_glow.rb +5 -0
- metadata +68 -0
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
|
+
[](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
|
+
}
|
data/lib/neon_glow.rb
ADDED
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: []
|