@nazuraki/styles 0.2.1
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/neon-butterfly/assets/butterfly-circuit.png +0 -0
- package/neon-butterfly/base.css +36 -0
- package/neon-butterfly/components/alert.css +26 -0
- package/neon-butterfly/components/badge.css +17 -0
- package/neon-butterfly/components/button.css +54 -0
- package/neon-butterfly/components/card.css +11 -0
- package/neon-butterfly/components/dialog.css +29 -0
- package/neon-butterfly/components/form.css +124 -0
- package/neon-butterfly/components/link.css +55 -0
- package/neon-butterfly/components/progress.css +41 -0
- package/neon-butterfly/components/table.css +27 -0
- package/neon-butterfly/components/tabs.css +33 -0
- package/neon-butterfly/design.md +62 -0
- package/neon-butterfly/index.css +13 -0
- package/neon-butterfly/tokens.css +45 -0
- package/package.json +23 -0
|
Binary file
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/* neon-butterfly — base styles
|
|
2
|
+
* Global defaults. Requires tokens.css. Apps that need the JetBrains Mono
|
|
3
|
+
* webfont should include the Google Fonts <link> (weights 450 + 700) or
|
|
4
|
+
* self-host; the token stack falls back to ui-monospace.
|
|
5
|
+
*/
|
|
6
|
+
*,
|
|
7
|
+
*::before,
|
|
8
|
+
*::after {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
body {
|
|
13
|
+
margin: 0;
|
|
14
|
+
min-height: 100vh;
|
|
15
|
+
background-color: var(--nb-bg);
|
|
16
|
+
color: var(--nb-on-surface);
|
|
17
|
+
font-family: var(--nb-font-mono);
|
|
18
|
+
font-weight: var(--nb-font-weight);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* Opt-in page background: the butterfly circuit artwork blended into the navy.
|
|
22
|
+
* Matches the switchboard landing page. Apply to <body>. */
|
|
23
|
+
.nb-bg {
|
|
24
|
+
background: var(--nb-bg) url("./assets/butterfly-circuit.png") center / cover fixed;
|
|
25
|
+
background-blend-mode: luminosity;
|
|
26
|
+
background-color: var(--nb-bg-blend);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
a {
|
|
30
|
+
color: var(--nb-primary);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
::selection {
|
|
34
|
+
background: var(--nb-primary);
|
|
35
|
+
color: var(--nb-bg);
|
|
36
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* neon-butterfly — alert / callout */
|
|
2
|
+
.nb-alert {
|
|
3
|
+
padding: var(--nb-space-3) var(--nb-space-4);
|
|
4
|
+
background: var(--nb-surface-glass);
|
|
5
|
+
border: 1px solid var(--nb-border);
|
|
6
|
+
border-left-width: 3px;
|
|
7
|
+
border-radius: var(--nb-radius);
|
|
8
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
9
|
+
color: var(--nb-on-surface);
|
|
10
|
+
font-size: var(--nb-text-sm);
|
|
11
|
+
}
|
|
12
|
+
.nb-alert--info { border-left-color: var(--nb-info); }
|
|
13
|
+
.nb-alert--success { border-left-color: var(--nb-success); }
|
|
14
|
+
.nb-alert--warning { border-left-color: var(--nb-warning); }
|
|
15
|
+
.nb-alert--danger { border-left-color: var(--nb-danger); }
|
|
16
|
+
.nb-alert__title {
|
|
17
|
+
display: block;
|
|
18
|
+
margin-bottom: var(--nb-space-1);
|
|
19
|
+
text-transform: uppercase;
|
|
20
|
+
font-weight: var(--nb-font-weight-bold);
|
|
21
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
22
|
+
}
|
|
23
|
+
.nb-alert--info .nb-alert__title { color: var(--nb-info); }
|
|
24
|
+
.nb-alert--success .nb-alert__title { color: var(--nb-success); }
|
|
25
|
+
.nb-alert--warning .nb-alert__title { color: var(--nb-warning); }
|
|
26
|
+
.nb-alert--danger .nb-alert__title { color: var(--nb-danger); }
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/* neon-butterfly — badge */
|
|
2
|
+
.nb-badge {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
padding: 0.15rem var(--nb-space-2);
|
|
5
|
+
border: 1px solid var(--nb-border);
|
|
6
|
+
border-radius: var(--nb-radius);
|
|
7
|
+
color: var(--nb-faint);
|
|
8
|
+
text-transform: uppercase;
|
|
9
|
+
font-size: 11px;
|
|
10
|
+
font-weight: var(--nb-font-weight-bold);
|
|
11
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
12
|
+
}
|
|
13
|
+
.nb-badge--primary { border-color: var(--nb-primary-border); color: var(--nb-primary); }
|
|
14
|
+
.nb-badge--info { border-color: var(--nb-info); color: var(--nb-info); }
|
|
15
|
+
.nb-badge--success { border-color: var(--nb-success); color: var(--nb-success); }
|
|
16
|
+
.nb-badge--warning { border-color: var(--nb-warning); color: var(--nb-warning); }
|
|
17
|
+
.nb-badge--danger { border-color: var(--nb-danger); color: var(--nb-danger); }
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/* neon-butterfly — button */
|
|
2
|
+
.nb-btn {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
gap: var(--nb-space-2);
|
|
6
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
7
|
+
background: var(--nb-surface-glass);
|
|
8
|
+
border: 1px solid var(--nb-border);
|
|
9
|
+
border-radius: var(--nb-radius);
|
|
10
|
+
color: var(--nb-on-surface);
|
|
11
|
+
text-transform: uppercase;
|
|
12
|
+
font-family: var(--nb-font-mono);
|
|
13
|
+
font-weight: var(--nb-font-weight-bold);
|
|
14
|
+
font-size: var(--nb-text-sm);
|
|
15
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
transition:
|
|
18
|
+
border-color var(--nb-transition),
|
|
19
|
+
color var(--nb-transition);
|
|
20
|
+
}
|
|
21
|
+
.nb-btn:hover,
|
|
22
|
+
.nb-btn:focus-visible {
|
|
23
|
+
border-color: var(--nb-primary-border);
|
|
24
|
+
color: var(--nb-primary);
|
|
25
|
+
animation: nb-pulse-glow 2s infinite;
|
|
26
|
+
outline: none;
|
|
27
|
+
}
|
|
28
|
+
.nb-btn--primary {
|
|
29
|
+
border-color: var(--nb-primary-border);
|
|
30
|
+
color: var(--nb-primary);
|
|
31
|
+
}
|
|
32
|
+
.nb-btn--accent {
|
|
33
|
+
border-color: var(--nb-accent);
|
|
34
|
+
color: var(--nb-accent);
|
|
35
|
+
}
|
|
36
|
+
.nb-btn--danger {
|
|
37
|
+
border-color: var(--nb-danger);
|
|
38
|
+
color: var(--nb-danger);
|
|
39
|
+
}
|
|
40
|
+
.nb-btn:disabled {
|
|
41
|
+
opacity: 0.5;
|
|
42
|
+
cursor: not-allowed;
|
|
43
|
+
animation: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@media (prefers-reduced-motion: reduce) {
|
|
47
|
+
.nb-btn {
|
|
48
|
+
transition: none;
|
|
49
|
+
}
|
|
50
|
+
.nb-btn:hover,
|
|
51
|
+
.nb-btn:focus-visible {
|
|
52
|
+
animation: none;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* neon-butterfly — card */
|
|
2
|
+
.nb-card {
|
|
3
|
+
padding: var(--nb-space-4);
|
|
4
|
+
background: var(--nb-surface-glass);
|
|
5
|
+
border: 1px solid var(--nb-border);
|
|
6
|
+
border-radius: var(--nb-radius);
|
|
7
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
8
|
+
color: var(--nb-on-surface);
|
|
9
|
+
}
|
|
10
|
+
.nb-card > :first-child { margin-top: 0; }
|
|
11
|
+
.nb-card > :last-child { margin-bottom: 0; }
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/* neon-butterfly — dialog (native <dialog>) */
|
|
2
|
+
.nb-dialog {
|
|
3
|
+
padding: var(--nb-space-4);
|
|
4
|
+
max-width: 32rem;
|
|
5
|
+
width: calc(100vw - 2rem);
|
|
6
|
+
background: var(--nb-surface);
|
|
7
|
+
border: 1px solid var(--nb-primary-border);
|
|
8
|
+
border-radius: var(--nb-radius);
|
|
9
|
+
color: var(--nb-on-surface);
|
|
10
|
+
font-family: var(--nb-font-mono);
|
|
11
|
+
box-shadow: 0 0 30px rgba(210, 187, 255, 0.25);
|
|
12
|
+
}
|
|
13
|
+
.nb-dialog::backdrop {
|
|
14
|
+
background: rgba(11, 19, 38, 0.7);
|
|
15
|
+
backdrop-filter: blur(4px);
|
|
16
|
+
}
|
|
17
|
+
.nb-dialog__title {
|
|
18
|
+
margin: 0 0 var(--nb-space-3);
|
|
19
|
+
color: var(--nb-primary);
|
|
20
|
+
text-transform: uppercase;
|
|
21
|
+
font-size: 1rem;
|
|
22
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
23
|
+
}
|
|
24
|
+
.nb-dialog__actions {
|
|
25
|
+
display: flex;
|
|
26
|
+
justify-content: flex-end;
|
|
27
|
+
gap: var(--nb-space-2);
|
|
28
|
+
margin-top: var(--nb-space-4);
|
|
29
|
+
}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/* neon-butterfly — form controls: input, textarea, select, checkbox, radio, switch */
|
|
2
|
+
.nb-input,
|
|
3
|
+
.nb-select,
|
|
4
|
+
.nb-textarea {
|
|
5
|
+
display: block;
|
|
6
|
+
width: 100%;
|
|
7
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
8
|
+
background: var(--nb-surface);
|
|
9
|
+
border: 1px solid var(--nb-border);
|
|
10
|
+
border-radius: var(--nb-radius);
|
|
11
|
+
color: var(--nb-on-surface);
|
|
12
|
+
font-family: var(--nb-font-mono);
|
|
13
|
+
font-weight: var(--nb-font-weight);
|
|
14
|
+
font-size: var(--nb-text-sm);
|
|
15
|
+
transition: border-color var(--nb-transition), box-shadow var(--nb-transition);
|
|
16
|
+
}
|
|
17
|
+
.nb-select {
|
|
18
|
+
appearance: none;
|
|
19
|
+
padding-right: 2.25rem;
|
|
20
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23958da1' stroke-width='1.5'/%3E%3C/svg%3E");
|
|
21
|
+
background-repeat: no-repeat;
|
|
22
|
+
background-position: right 0.75rem center;
|
|
23
|
+
}
|
|
24
|
+
.nb-input::placeholder,
|
|
25
|
+
.nb-textarea::placeholder {
|
|
26
|
+
color: var(--nb-faint);
|
|
27
|
+
}
|
|
28
|
+
.nb-input:focus,
|
|
29
|
+
.nb-select:focus,
|
|
30
|
+
.nb-textarea:focus {
|
|
31
|
+
outline: none;
|
|
32
|
+
border-color: var(--nb-primary-border);
|
|
33
|
+
box-shadow: 0 0 8px rgba(210, 187, 255, 0.3);
|
|
34
|
+
}
|
|
35
|
+
.nb-input[aria-invalid="true"],
|
|
36
|
+
.nb-textarea[aria-invalid="true"] {
|
|
37
|
+
border-color: var(--nb-danger);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.nb-label {
|
|
41
|
+
display: block;
|
|
42
|
+
margin-bottom: var(--nb-space-1);
|
|
43
|
+
color: var(--nb-faint);
|
|
44
|
+
text-transform: uppercase;
|
|
45
|
+
font-size: 12px;
|
|
46
|
+
font-weight: var(--nb-font-weight-bold);
|
|
47
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.nb-field {
|
|
51
|
+
margin-bottom: var(--nb-space-3);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* checkbox & radio */
|
|
55
|
+
.nb-checkbox,
|
|
56
|
+
.nb-radio {
|
|
57
|
+
appearance: none;
|
|
58
|
+
width: 1.1rem;
|
|
59
|
+
height: 1.1rem;
|
|
60
|
+
margin: 0;
|
|
61
|
+
vertical-align: text-bottom;
|
|
62
|
+
background: var(--nb-surface);
|
|
63
|
+
border: 1px solid var(--nb-border);
|
|
64
|
+
border-radius: 0.25rem;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
transition: border-color var(--nb-transition), box-shadow var(--nb-transition);
|
|
67
|
+
}
|
|
68
|
+
.nb-radio {
|
|
69
|
+
border-radius: 50%;
|
|
70
|
+
}
|
|
71
|
+
.nb-checkbox:checked,
|
|
72
|
+
.nb-radio:checked {
|
|
73
|
+
border-color: var(--nb-accent);
|
|
74
|
+
box-shadow: inset 0 0 0 3px var(--nb-surface), inset 0 0 0 1rem var(--nb-accent),
|
|
75
|
+
0 0 6px var(--nb-accent-glow);
|
|
76
|
+
}
|
|
77
|
+
.nb-checkbox:focus-visible,
|
|
78
|
+
.nb-radio:focus-visible,
|
|
79
|
+
.nb-switch:focus-visible {
|
|
80
|
+
outline: none;
|
|
81
|
+
border-color: var(--nb-primary-border);
|
|
82
|
+
}
|
|
83
|
+
.nb-choice {
|
|
84
|
+
display: inline-flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
gap: var(--nb-space-2);
|
|
87
|
+
color: var(--nb-on-surface);
|
|
88
|
+
font-size: var(--nb-text-sm);
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* switch */
|
|
93
|
+
.nb-switch {
|
|
94
|
+
appearance: none;
|
|
95
|
+
width: 2.4rem;
|
|
96
|
+
height: 1.3rem;
|
|
97
|
+
margin: 0;
|
|
98
|
+
vertical-align: text-bottom;
|
|
99
|
+
background: var(--nb-surface);
|
|
100
|
+
border: 1px solid var(--nb-border);
|
|
101
|
+
border-radius: 1rem;
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
position: relative;
|
|
104
|
+
transition: border-color var(--nb-transition);
|
|
105
|
+
}
|
|
106
|
+
.nb-switch::after {
|
|
107
|
+
content: "";
|
|
108
|
+
position: absolute;
|
|
109
|
+
top: 2px;
|
|
110
|
+
left: 2px;
|
|
111
|
+
width: calc(1.3rem - 6px);
|
|
112
|
+
height: calc(1.3rem - 6px);
|
|
113
|
+
border-radius: 50%;
|
|
114
|
+
background: var(--nb-faint);
|
|
115
|
+
transition: transform var(--nb-transition), background var(--nb-transition);
|
|
116
|
+
}
|
|
117
|
+
.nb-switch:checked {
|
|
118
|
+
border-color: var(--nb-accent);
|
|
119
|
+
}
|
|
120
|
+
.nb-switch:checked::after {
|
|
121
|
+
transform: translateX(1.1rem);
|
|
122
|
+
background: var(--nb-accent);
|
|
123
|
+
box-shadow: 0 0 6px var(--nb-accent-glow);
|
|
124
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/* neon-butterfly — nav link: uppercase mono link with ">" chevron and glow hover */
|
|
2
|
+
.nb-link {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: baseline;
|
|
5
|
+
gap: var(--nb-space-3);
|
|
6
|
+
padding: 1.25rem var(--nb-space-4);
|
|
7
|
+
background: var(--nb-surface-glass);
|
|
8
|
+
border: 1px solid var(--nb-border);
|
|
9
|
+
border-radius: var(--nb-radius);
|
|
10
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
11
|
+
color: var(--nb-on-surface);
|
|
12
|
+
text-decoration: none;
|
|
13
|
+
text-transform: uppercase;
|
|
14
|
+
font-weight: var(--nb-font-weight-bold);
|
|
15
|
+
font-size: var(--nb-text-sm);
|
|
16
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
17
|
+
transition:
|
|
18
|
+
border-color var(--nb-transition),
|
|
19
|
+
color var(--nb-transition),
|
|
20
|
+
transform var(--nb-transition);
|
|
21
|
+
}
|
|
22
|
+
.nb-link::before {
|
|
23
|
+
content: ">";
|
|
24
|
+
color: var(--nb-faint);
|
|
25
|
+
transition: color var(--nb-transition);
|
|
26
|
+
}
|
|
27
|
+
.nb-link:hover {
|
|
28
|
+
border-color: var(--nb-primary-border);
|
|
29
|
+
color: var(--nb-primary);
|
|
30
|
+
transform: translateX(4px);
|
|
31
|
+
animation: nb-pulse-glow 2s infinite;
|
|
32
|
+
}
|
|
33
|
+
.nb-link:hover::before {
|
|
34
|
+
color: var(--nb-accent);
|
|
35
|
+
text-shadow: 0 0 5px var(--nb-accent-glow);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@keyframes nb-pulse-glow {
|
|
39
|
+
0%,
|
|
40
|
+
100% {
|
|
41
|
+
box-shadow: 0 0 5px rgba(210, 187, 255, 0.2);
|
|
42
|
+
}
|
|
43
|
+
50% {
|
|
44
|
+
box-shadow: 0 0 20px var(--nb-primary-glow);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@media (prefers-reduced-motion: reduce) {
|
|
49
|
+
.nb-link {
|
|
50
|
+
transition: none;
|
|
51
|
+
}
|
|
52
|
+
.nb-link:hover {
|
|
53
|
+
animation: none;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* neon-butterfly — progress bar & spinner */
|
|
2
|
+
.nb-progress {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 0.5rem;
|
|
6
|
+
background: var(--nb-surface);
|
|
7
|
+
border: 1px solid var(--nb-border);
|
|
8
|
+
border-radius: 1rem;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
}
|
|
11
|
+
.nb-progress__bar {
|
|
12
|
+
height: 100%;
|
|
13
|
+
background: var(--nb-primary);
|
|
14
|
+
box-shadow: 0 0 8px var(--nb-primary-glow);
|
|
15
|
+
border-radius: 1rem;
|
|
16
|
+
transition: width var(--nb-transition);
|
|
17
|
+
}
|
|
18
|
+
.nb-progress__bar--accent {
|
|
19
|
+
background: var(--nb-accent);
|
|
20
|
+
box-shadow: 0 0 8px var(--nb-accent-glow);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.nb-spinner {
|
|
24
|
+
display: inline-block;
|
|
25
|
+
width: 1.5rem;
|
|
26
|
+
height: 1.5rem;
|
|
27
|
+
border: 2px solid var(--nb-border);
|
|
28
|
+
border-top-color: var(--nb-primary);
|
|
29
|
+
border-radius: 50%;
|
|
30
|
+
animation: nb-spin 0.8s linear infinite;
|
|
31
|
+
}
|
|
32
|
+
@keyframes nb-spin {
|
|
33
|
+
to {
|
|
34
|
+
transform: rotate(360deg);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
@media (prefers-reduced-motion: reduce) {
|
|
38
|
+
.nb-spinner {
|
|
39
|
+
animation-duration: 2s;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/* neon-butterfly — table */
|
|
2
|
+
.nb-table {
|
|
3
|
+
width: 100%;
|
|
4
|
+
border-collapse: collapse;
|
|
5
|
+
font-size: var(--nb-text-sm);
|
|
6
|
+
color: var(--nb-on-surface);
|
|
7
|
+
}
|
|
8
|
+
.nb-table th {
|
|
9
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
10
|
+
border-bottom: 1px solid var(--nb-primary-border);
|
|
11
|
+
color: var(--nb-faint);
|
|
12
|
+
text-align: left;
|
|
13
|
+
text-transform: uppercase;
|
|
14
|
+
font-size: 12px;
|
|
15
|
+
font-weight: var(--nb-font-weight-bold);
|
|
16
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
17
|
+
}
|
|
18
|
+
.nb-table td {
|
|
19
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
20
|
+
border-bottom: 1px solid var(--nb-border);
|
|
21
|
+
}
|
|
22
|
+
.nb-table tbody tr {
|
|
23
|
+
transition: background var(--nb-transition);
|
|
24
|
+
}
|
|
25
|
+
.nb-table tbody tr:hover {
|
|
26
|
+
background: var(--nb-surface-glass);
|
|
27
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* neon-butterfly — tabs */
|
|
2
|
+
.nb-tabs {
|
|
3
|
+
display: flex;
|
|
4
|
+
gap: var(--nb-space-2);
|
|
5
|
+
border-bottom: 1px solid var(--nb-border);
|
|
6
|
+
}
|
|
7
|
+
.nb-tab {
|
|
8
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
9
|
+
margin-bottom: -1px;
|
|
10
|
+
background: none;
|
|
11
|
+
border: none;
|
|
12
|
+
border-bottom: 2px solid transparent;
|
|
13
|
+
color: var(--nb-faint);
|
|
14
|
+
text-transform: uppercase;
|
|
15
|
+
font-family: var(--nb-font-mono);
|
|
16
|
+
font-weight: var(--nb-font-weight-bold);
|
|
17
|
+
font-size: var(--nb-text-sm);
|
|
18
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
transition: color var(--nb-transition), border-color var(--nb-transition);
|
|
21
|
+
}
|
|
22
|
+
.nb-tab:hover {
|
|
23
|
+
color: var(--nb-on-surface);
|
|
24
|
+
}
|
|
25
|
+
.nb-tab--active,
|
|
26
|
+
.nb-tab[aria-selected="true"] {
|
|
27
|
+
color: var(--nb-primary);
|
|
28
|
+
border-bottom-color: var(--nb-primary);
|
|
29
|
+
text-shadow: 0 0 8px var(--nb-primary-glow);
|
|
30
|
+
}
|
|
31
|
+
.nb-tabpanel {
|
|
32
|
+
padding: var(--nb-space-3) 0;
|
|
33
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# neon-butterfly
|
|
2
|
+
|
|
3
|
+
Dark, mono-spaced, neon-accented terminal aesthetic. Deep navy backgrounds with
|
|
4
|
+
frosted-glass surfaces; lilac is the primary voice, neon lime the accent that
|
|
5
|
+
signals activity. Everything is uppercase, tracked-out JetBrains Mono — the UI
|
|
6
|
+
should feel like a beautiful command console, not a document.
|
|
7
|
+
|
|
8
|
+
## Color
|
|
9
|
+
|
|
10
|
+
| Role | Value | Usage |
|
|
11
|
+
| --- | --- | --- |
|
|
12
|
+
| Background | `#0b1326` | Page background (often blended over imagery with `luminosity`) |
|
|
13
|
+
| Surface | `#171f33` | Solid panels, inputs, dialogs |
|
|
14
|
+
| Surface glass | `rgba(23,31,51,0.75)` + 12px blur | Cards, nav links, alerts |
|
|
15
|
+
| On-surface | `#dae2fd` | Body text |
|
|
16
|
+
| Faint | `#958da1` | Secondary text, labels, idle chevrons |
|
|
17
|
+
| Primary | `#d2bbff` (lilac) | Emphasis, hover states, active tabs, glow |
|
|
18
|
+
| Accent | `#39ff14` (neon lime) | Activity signals: checked states, chevrons on hover, success |
|
|
19
|
+
| Info | `#4dc9ff` | Informational callouts and badges |
|
|
20
|
+
| Success | `#39ff14` | Shares the accent — success *is* the neon signal |
|
|
21
|
+
| Warning | `#ffd23f` | Caution states |
|
|
22
|
+
| Danger | `#ff2d78` | Destructive actions, errors |
|
|
23
|
+
| Border | `rgba(255,255,255,0.1)` | All resting borders |
|
|
24
|
+
|
|
25
|
+
The signature page background is the butterfly-circuit artwork
|
|
26
|
+
(`assets/butterfly-circuit.png`) blended into the navy with `luminosity` —
|
|
27
|
+
apply via `.nb-bg` on `<body>`. Optional; plain `--nb-bg` navy is also correct.
|
|
28
|
+
|
|
29
|
+
Rules: color is communication — resting UI stays in navy/faint; lilac and lime
|
|
30
|
+
appear only on interaction or state. Never use pure white or pure black.
|
|
31
|
+
|
|
32
|
+
## Typography
|
|
33
|
+
|
|
34
|
+
- **Family:** JetBrains Mono (weights 450 regular, 700 bold); fallback `ui-monospace`.
|
|
35
|
+
- **Interactive text** (buttons, links, tabs, labels, table headers): uppercase,
|
|
36
|
+
700, 14px (labels/headers 11–12px), letter-spacing `0.1em`.
|
|
37
|
+
- **Body text:** sentence case, 450.
|
|
38
|
+
|
|
39
|
+
## Shape & effects
|
|
40
|
+
|
|
41
|
+
- Radius `0.5rem` everywhere (pills for switches/progress).
|
|
42
|
+
- Borders are 1px hairlines; emphasis comes from border *color*, not weight.
|
|
43
|
+
- Glow, not shadow: elevation is expressed with colored `box-shadow` glows
|
|
44
|
+
(`nb-pulse-glow` on hover) rather than dark drop shadows.
|
|
45
|
+
- Transitions 0.3s; hover motion is a 4px `translateX` slide on links.
|
|
46
|
+
- Respect `prefers-reduced-motion`.
|
|
47
|
+
|
|
48
|
+
## Components
|
|
49
|
+
|
|
50
|
+
Class prefix `nb-`. Variants use BEM-ish modifiers (`nb-btn--accent`).
|
|
51
|
+
|
|
52
|
+
- **Card** `.nb-card` — frosted glass panel.
|
|
53
|
+
- **NavLink** `.nb-link` — the switchboard link: `>` chevron turns lime on hover.
|
|
54
|
+
- **Button** `.nb-btn` — `--primary`, `--accent`, `--danger` variants.
|
|
55
|
+
- **Form** `.nb-input`, `.nb-textarea`, `.nb-select`, `.nb-label`, `.nb-field`,
|
|
56
|
+
`.nb-checkbox`, `.nb-radio`, `.nb-switch`, `.nb-choice` — checked states glow lime.
|
|
57
|
+
- **Badge** `.nb-badge` + semantic modifiers.
|
|
58
|
+
- **Alert** `.nb-alert` — left accent bar carries the semantic color.
|
|
59
|
+
- **Dialog** `.nb-dialog` — native `<dialog>`, lilac border + glow, blurred backdrop.
|
|
60
|
+
- **Tabs** `.nb-tabs`/`.nb-tab`/`.nb-tabpanel` — active tab underlined in lilac with text glow.
|
|
61
|
+
- **Table** `.nb-table` — lilac header rule, glass row hover.
|
|
62
|
+
- **Progress** `.nb-progress`, **Spinner** `.nb-spinner` — glowing lilac indicators.
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* neon-butterfly — full theme entry point */
|
|
2
|
+
@import "./tokens.css";
|
|
3
|
+
@import "./base.css";
|
|
4
|
+
@import "./components/card.css";
|
|
5
|
+
@import "./components/link.css";
|
|
6
|
+
@import "./components/button.css";
|
|
7
|
+
@import "./components/form.css";
|
|
8
|
+
@import "./components/badge.css";
|
|
9
|
+
@import "./components/alert.css";
|
|
10
|
+
@import "./components/dialog.css";
|
|
11
|
+
@import "./components/tabs.css";
|
|
12
|
+
@import "./components/table.css";
|
|
13
|
+
@import "./components/progress.css";
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/* neon-butterfly — design tokens
|
|
2
|
+
* Source of truth for the neon-butterfly theme. Consume via:
|
|
3
|
+
* @import "@nazuraki/styles/neon-butterfly/tokens";
|
|
4
|
+
* or pull the whole theme with ./index.css.
|
|
5
|
+
*/
|
|
6
|
+
:root {
|
|
7
|
+
/* color */
|
|
8
|
+
--nb-bg: #0b1326;
|
|
9
|
+
--nb-bg-blend: #1a1f2e;
|
|
10
|
+
--nb-surface: #171f33;
|
|
11
|
+
--nb-surface-glass: rgba(23, 31, 51, 0.55);
|
|
12
|
+
--nb-on-surface: #dae2fd;
|
|
13
|
+
--nb-faint: #958da1;
|
|
14
|
+
--nb-primary: #d2bbff;
|
|
15
|
+
--nb-primary-glow: rgba(210, 187, 255, 0.6);
|
|
16
|
+
--nb-primary-border: rgba(210, 187, 255, 0.8);
|
|
17
|
+
--nb-accent: #39ff14;
|
|
18
|
+
--nb-accent-glow: rgba(57, 255, 20, 0.5);
|
|
19
|
+
--nb-border: rgba(255, 255, 255, 0.1);
|
|
20
|
+
|
|
21
|
+
/* semantic color */
|
|
22
|
+
--nb-info: #4dc9ff;
|
|
23
|
+
--nb-success: #39ff14;
|
|
24
|
+
--nb-warning: #ffd23f;
|
|
25
|
+
--nb-danger: #ff2d78;
|
|
26
|
+
|
|
27
|
+
/* typography */
|
|
28
|
+
--nb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
29
|
+
--nb-font-weight: 450;
|
|
30
|
+
--nb-font-weight-bold: 700;
|
|
31
|
+
--nb-text-sm: 14px;
|
|
32
|
+
--nb-tracking-wide: 0.1em;
|
|
33
|
+
|
|
34
|
+
/* shape & effects */
|
|
35
|
+
--nb-radius: 0.5rem;
|
|
36
|
+
--nb-blur: 12px;
|
|
37
|
+
--nb-transition: 0.3s;
|
|
38
|
+
|
|
39
|
+
/* spacing */
|
|
40
|
+
--nb-space-1: 0.25rem;
|
|
41
|
+
--nb-space-2: 0.5rem;
|
|
42
|
+
--nb-space-3: 1rem;
|
|
43
|
+
--nb-space-4: 1.5rem;
|
|
44
|
+
--nb-space-5: 2rem;
|
|
45
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nazuraki/styles",
|
|
3
|
+
"version": "0.2.1",
|
|
4
|
+
"description": "Shared design-system styles: tokens, base styles, and component classes per theme.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/nazuraki/ui-std-lib.git",
|
|
9
|
+
"directory": "styles"
|
|
10
|
+
},
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "public"
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"neon-butterfly"
|
|
16
|
+
],
|
|
17
|
+
"exports": {
|
|
18
|
+
"./neon-butterfly": "./neon-butterfly/index.css",
|
|
19
|
+
"./neon-butterfly/tokens": "./neon-butterfly/tokens.css",
|
|
20
|
+
"./neon-butterfly/base": "./neon-butterfly/base.css",
|
|
21
|
+
"./neon-butterfly/components/*": "./neon-butterfly/components/*.css"
|
|
22
|
+
}
|
|
23
|
+
}
|