neon-glow-css 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.
- package/CHANGELOG.md +12 -0
- package/LICENSE +21 -0
- package/README.md +197 -0
- package/css/components.css +618 -0
- package/css/neon-glow.css +11 -0
- package/css/tokens.css +256 -0
- package/package.json +36 -0
package/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
|
+
- Combined entry point (`neon-glow.css`) and individual imports
|
package/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.
|
package/README.md
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
# neon-glow-css
|
|
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. Zero dependencies. Works everywhere.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/neon-glow-css)
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install neon-glow-css
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### Import Everything
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
@import "neon-glow-css/css/neon-glow.css";
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Import Individually
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import "neon-glow-css/css/tokens.css";
|
|
31
|
+
@import "neon-glow-css/css/components.css";
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### With Tailwind CSS
|
|
35
|
+
|
|
36
|
+
In your Tailwind entry point:
|
|
37
|
+
|
|
38
|
+
```css
|
|
39
|
+
@import "tailwindcss";
|
|
40
|
+
@import "neon-glow-css/css/tokens.css";
|
|
41
|
+
@import "neon-glow-css/css/components.css";
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### With a Bundler (Vite, Webpack, etc.)
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
import "neon-glow-css/css/neon-glow.css";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Via CDN (unpkg)
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<link rel="stylesheet" href="https://unpkg.com/neon-glow-css/css/neon-glow.css">
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Plain HTML
|
|
57
|
+
|
|
58
|
+
Download the CSS files and link them directly:
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<link rel="stylesheet" href="path/to/tokens.css">
|
|
62
|
+
<link rel="stylesheet" href="path/to/components.css">
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## Set the Theme
|
|
68
|
+
|
|
69
|
+
Add palette and intensity classes to your `<body>`:
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<body class="neon-glow-body neon-rainbow neon-medium">
|
|
73
|
+
<!-- your content -->
|
|
74
|
+
</body>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## Palettes
|
|
80
|
+
|
|
81
|
+
| Class | Vibe |
|
|
82
|
+
|-------|------|
|
|
83
|
+
| `neon-rainbow` | Full-spectrum neon. Arcade cabinets and light shows. |
|
|
84
|
+
| `neon-unicorn` | Pastel rainbow. Dreamy, soft, ethereal. |
|
|
85
|
+
| `neon-cinematic` | Electric blue + amber. The Blade Runner palette. |
|
|
86
|
+
| `neon-pink` | Hot pink + magenta. A power color for everyone. |
|
|
87
|
+
|
|
88
|
+
## Intensity Levels
|
|
89
|
+
|
|
90
|
+
| Class | Description |
|
|
91
|
+
|-------|-------------|
|
|
92
|
+
| `neon-subtle` | Gentle glow. Professional. Easy on the eyes. |
|
|
93
|
+
| `neon-medium` | Balanced glow. The sweet spot for most apps. |
|
|
94
|
+
| `neon-intense` | Maximum glow. Over the top. The WOW factor. |
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
## Switching Themes at Runtime
|
|
99
|
+
|
|
100
|
+
Swap classes on `<body>` -- all colors cascade instantly via CSS custom properties:
|
|
101
|
+
|
|
102
|
+
```javascript
|
|
103
|
+
document.body.classList.remove("neon-rainbow", "neon-unicorn", "neon-cinematic", "neon-pink");
|
|
104
|
+
document.body.classList.add("neon-cinematic");
|
|
105
|
+
|
|
106
|
+
document.body.classList.remove("neon-subtle", "neon-medium", "neon-intense");
|
|
107
|
+
document.body.classList.add("neon-intense");
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## CSS Custom Properties
|
|
113
|
+
|
|
114
|
+
All colors are available as CSS variables for custom styling:
|
|
115
|
+
|
|
116
|
+
```css
|
|
117
|
+
var(--ng-primary) /* Primary palette color */
|
|
118
|
+
var(--ng-secondary) /* Secondary palette color */
|
|
119
|
+
var(--ng-accent) /* Accent color */
|
|
120
|
+
var(--ng-success) /* Success green */
|
|
121
|
+
var(--ng-warning) /* Warning orange */
|
|
122
|
+
var(--ng-danger) /* Danger red */
|
|
123
|
+
var(--ng-info) /* Info purple */
|
|
124
|
+
var(--ng-bg) /* Background */
|
|
125
|
+
var(--ng-surface) /* Card/panel surface */
|
|
126
|
+
var(--ng-surface-raised) /* Elevated surface */
|
|
127
|
+
var(--ng-text) /* Primary text */
|
|
128
|
+
var(--ng-text-secondary) /* Secondary text */
|
|
129
|
+
var(--ng-text-muted) /* Muted text */
|
|
130
|
+
var(--ng-gradient) /* Full gradient */
|
|
131
|
+
var(--ng-glow-blur) /* Current glow blur radius */
|
|
132
|
+
var(--ng-glow-opacity) /* Current glow opacity */
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
## Component Classes
|
|
138
|
+
|
|
139
|
+
```
|
|
140
|
+
ng-card -- Dark surface card
|
|
141
|
+
ng-card-raised -- Elevated surface card
|
|
142
|
+
ng-border-glow -- Gradient border with glow
|
|
143
|
+
ng-glow-primary -- Primary color box-shadow glow
|
|
144
|
+
ng-glow-secondary -- Secondary color box-shadow glow
|
|
145
|
+
ng-text-glow -- Glowing text (primary)
|
|
146
|
+
ng-gradient-text -- Rainbow gradient text
|
|
147
|
+
ng-btn -- Base button
|
|
148
|
+
ng-btn-primary -- Primary glowing button
|
|
149
|
+
ng-btn-secondary -- Secondary glowing button
|
|
150
|
+
ng-btn-outline -- Outline button with glow
|
|
151
|
+
ng-btn-ghost -- Ghost button
|
|
152
|
+
ng-input -- Form input with focus glow
|
|
153
|
+
ng-select -- Select dropdown
|
|
154
|
+
ng-switch -- Toggle switch
|
|
155
|
+
ng-badge-* -- Badges (primary, secondary, success, warning, danger, info)
|
|
156
|
+
ng-alert-* -- Alerts with glowing left border
|
|
157
|
+
ng-table -- Dark themed table
|
|
158
|
+
ng-progress -- Progress bar container
|
|
159
|
+
ng-progress-bar -- Gradient progress bar
|
|
160
|
+
ng-navbar -- Sticky navbar with backdrop blur
|
|
161
|
+
ng-divider -- Gradient divider line
|
|
162
|
+
ng-animate-pulse -- Pulsing glow animation
|
|
163
|
+
ng-animate-gradient -- Rotating gradient border animation
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
## Live Demo
|
|
169
|
+
|
|
170
|
+
See the full kitchen sink demo with all components and palettes:
|
|
171
|
+
|
|
172
|
+
**[rails_neon_glow](https://github.com/tokenfires/rails_neon_glow)** -- Rails app with Tailwind and Bootstrap showcases.
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
## Design
|
|
177
|
+
|
|
178
|
+
**Designed by Claude** (Anthropic) in collaboration with [TokenFires](https://github.com/tokenfires).
|
|
179
|
+
|
|
180
|
+
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.
|
|
181
|
+
|
|
182
|
+
---
|
|
183
|
+
|
|
184
|
+
## License
|
|
185
|
+
|
|
186
|
+
MIT License -- See [LICENSE](LICENSE)
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
## Also Available
|
|
191
|
+
|
|
192
|
+
- **Ruby gem**: [`neon_glow`](https://github.com/tokenfires/neon_glow_gem)
|
|
193
|
+
- **Demo**: [`rails_neon_glow`](https://github.com/tokenfires/rails_neon_glow)
|
|
194
|
+
|
|
195
|
+
---
|
|
196
|
+
|
|
197
|
+
*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,11 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Neon Glow CSS
|
|
3
|
+
* Designed by Claude (Anthropic)
|
|
4
|
+
*
|
|
5
|
+
* Combined entry point -- imports tokens and components.
|
|
6
|
+
* You can also import them individually:
|
|
7
|
+
* @import "neon-glow-css/css/tokens.css";
|
|
8
|
+
* @import "neon-glow-css/css/components.css";
|
|
9
|
+
*/
|
|
10
|
+
@import "./tokens.css";
|
|
11
|
+
@import "./components.css";
|
package/css/tokens.css
ADDED
|
@@ -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
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "neon-glow-css",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "A dark neon glow design system for Bootstrap and Tailwind CSS. 4 color palettes, 3 intensity levels, pure CSS custom properties.",
|
|
5
|
+
"main": "css/neon-glow.css",
|
|
6
|
+
"style": "css/neon-glow.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"css/",
|
|
9
|
+
"LICENSE",
|
|
10
|
+
"README.md",
|
|
11
|
+
"CHANGELOG.md"
|
|
12
|
+
],
|
|
13
|
+
"keywords": [
|
|
14
|
+
"css",
|
|
15
|
+
"neon",
|
|
16
|
+
"glow",
|
|
17
|
+
"dark-theme",
|
|
18
|
+
"design-system",
|
|
19
|
+
"tailwind",
|
|
20
|
+
"bootstrap",
|
|
21
|
+
"css-variables",
|
|
22
|
+
"custom-properties",
|
|
23
|
+
"ui",
|
|
24
|
+
"theme"
|
|
25
|
+
],
|
|
26
|
+
"author": "Claude (Anthropic) & TokenFires",
|
|
27
|
+
"license": "MIT",
|
|
28
|
+
"repository": {
|
|
29
|
+
"type": "git",
|
|
30
|
+
"url": "https://github.com/tokenfires/neon_glow_npm.git"
|
|
31
|
+
},
|
|
32
|
+
"homepage": "https://github.com/tokenfires/neon_glow_npm",
|
|
33
|
+
"bugs": {
|
|
34
|
+
"url": "https://github.com/tokenfires/neon_glow_npm/issues"
|
|
35
|
+
}
|
|
36
|
+
}
|