@nazuraki/styles 0.2.2 → 0.2.3
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/luminous-precision/base.css +50 -0
- package/luminous-precision/components/alert.css +26 -0
- package/luminous-precision/components/badge.css +19 -0
- package/luminous-precision/components/button.css +88 -0
- package/luminous-precision/components/card.css +12 -0
- package/luminous-precision/components/dialog.css +31 -0
- package/luminous-precision/components/form.css +126 -0
- package/luminous-precision/components/link.css +46 -0
- package/luminous-precision/components/progress.css +41 -0
- package/luminous-precision/components/table.css +28 -0
- package/luminous-precision/components/tabs.css +33 -0
- package/luminous-precision/design.md +76 -0
- package/luminous-precision/index.css +13 -0
- package/luminous-precision/tokens.css +55 -0
- package/package.json +8 -3
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/* luminous-precision — base styles
|
|
2
|
+
* Global defaults. Requires tokens.css. Apps that need webfonts should
|
|
3
|
+
* include the Google Fonts <link>s for Sora (500, 600, 700) and
|
|
4
|
+
* JetBrains Mono (400, 600, 700) or self-host; the token stacks fall back
|
|
5
|
+
* to system families.
|
|
6
|
+
*/
|
|
7
|
+
*,
|
|
8
|
+
*::before,
|
|
9
|
+
*::after {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
body {
|
|
14
|
+
margin: 0;
|
|
15
|
+
min-height: 100vh;
|
|
16
|
+
background-color: var(--nb-bg);
|
|
17
|
+
color: var(--nb-on-surface);
|
|
18
|
+
font-family: var(--nb-font-mono);
|
|
19
|
+
font-weight: var(--nb-font-weight);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Opt-in page background: soft out-of-focus orchid/teal underlays over the
|
|
23
|
+
* obsidian base — the "luminous underlay" treatment. Apply to <body>. */
|
|
24
|
+
.nb-bg {
|
|
25
|
+
background:
|
|
26
|
+
radial-gradient(50rem 30rem at 12% -5%, rgba(198, 165, 255, 0.08), transparent 70%),
|
|
27
|
+
radial-gradient(55rem 35rem at 90% 105%, rgba(0, 245, 255, 0.05), transparent 70%),
|
|
28
|
+
var(--nb-bg);
|
|
29
|
+
background-attachment: fixed;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
h1,
|
|
33
|
+
h2,
|
|
34
|
+
h3,
|
|
35
|
+
h4,
|
|
36
|
+
h5,
|
|
37
|
+
h6 {
|
|
38
|
+
font-family: var(--nb-font-display);
|
|
39
|
+
font-weight: var(--nb-font-weight-medium);
|
|
40
|
+
letter-spacing: -0.01em;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
a {
|
|
44
|
+
color: var(--nb-primary);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
::selection {
|
|
48
|
+
background: var(--nb-primary);
|
|
49
|
+
color: var(--nb-bg);
|
|
50
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* luminous-precision — 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-medium);
|
|
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,19 @@
|
|
|
1
|
+
/* luminous-precision — badge: pill chip, 15% tint of its hue behind
|
|
2
|
+
* full-saturation text */
|
|
3
|
+
.nb-badge {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
padding: 0.15rem var(--nb-space-2);
|
|
6
|
+
background: rgba(255, 255, 255, 0.08);
|
|
7
|
+
border: none;
|
|
8
|
+
border-radius: 9999px;
|
|
9
|
+
color: var(--nb-faint);
|
|
10
|
+
text-transform: uppercase;
|
|
11
|
+
font-size: 11px;
|
|
12
|
+
font-weight: var(--nb-font-weight-medium);
|
|
13
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
14
|
+
}
|
|
15
|
+
.nb-badge--primary { background: rgba(198, 165, 255, 0.15); color: var(--nb-primary); }
|
|
16
|
+
.nb-badge--info { background: rgba(131, 183, 255, 0.15); color: var(--nb-info); }
|
|
17
|
+
.nb-badge--success { background: rgba(71, 227, 78, 0.15); color: var(--nb-success); }
|
|
18
|
+
.nb-badge--warning { background: rgba(255, 184, 108, 0.15); color: var(--nb-warning); }
|
|
19
|
+
.nb-badge--danger { background: rgba(255, 77, 109, 0.15); color: var(--nb-danger); }
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/* luminous-precision — 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: transparent;
|
|
8
|
+
border: 1px solid var(--nb-border-lit);
|
|
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-medium);
|
|
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
|
+
box-shadow var(--nb-transition);
|
|
21
|
+
}
|
|
22
|
+
.nb-btn:hover,
|
|
23
|
+
.nb-btn:focus-visible {
|
|
24
|
+
border-color: var(--nb-primary-border);
|
|
25
|
+
color: var(--nb-primary);
|
|
26
|
+
animation: nb-pulse-glow 2s infinite;
|
|
27
|
+
outline: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* primary: solid orchid fill, dark text, glow pulse on hover */
|
|
31
|
+
.nb-btn--primary {
|
|
32
|
+
background: var(--nb-primary);
|
|
33
|
+
border-color: var(--nb-primary);
|
|
34
|
+
color: var(--nb-on-primary);
|
|
35
|
+
}
|
|
36
|
+
.nb-btn--primary:hover,
|
|
37
|
+
.nb-btn--primary:focus-visible {
|
|
38
|
+
border-color: var(--nb-primary);
|
|
39
|
+
color: var(--nb-on-primary);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* accent: teal ghost — critical navigation paths */
|
|
43
|
+
.nb-btn--accent {
|
|
44
|
+
border-color: var(--nb-accent);
|
|
45
|
+
color: var(--nb-accent);
|
|
46
|
+
}
|
|
47
|
+
.nb-btn--accent:hover,
|
|
48
|
+
.nb-btn--accent:focus-visible {
|
|
49
|
+
border-color: var(--nb-accent);
|
|
50
|
+
color: var(--nb-accent);
|
|
51
|
+
animation-name: nb-pulse-glow-accent;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.nb-btn--danger {
|
|
55
|
+
border-color: var(--nb-danger);
|
|
56
|
+
color: var(--nb-danger);
|
|
57
|
+
}
|
|
58
|
+
.nb-btn--danger:hover,
|
|
59
|
+
.nb-btn--danger:focus-visible {
|
|
60
|
+
border-color: var(--nb-danger);
|
|
61
|
+
color: var(--nb-danger);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.nb-btn:disabled {
|
|
65
|
+
opacity: 0.5;
|
|
66
|
+
cursor: not-allowed;
|
|
67
|
+
animation: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@keyframes nb-pulse-glow-accent {
|
|
71
|
+
0%,
|
|
72
|
+
100% {
|
|
73
|
+
box-shadow: 0 0 5px rgba(0, 245, 255, 0.15);
|
|
74
|
+
}
|
|
75
|
+
50% {
|
|
76
|
+
box-shadow: 0 0 20px var(--nb-accent-glow);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@media (prefers-reduced-motion: reduce) {
|
|
81
|
+
.nb-btn {
|
|
82
|
+
transition: none;
|
|
83
|
+
}
|
|
84
|
+
.nb-btn:hover,
|
|
85
|
+
.nb-btn:focus-visible {
|
|
86
|
+
animation: none;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* luminous-precision — card: glass pane with a lit top edge */
|
|
2
|
+
.nb-card {
|
|
3
|
+
padding: var(--nb-space-4);
|
|
4
|
+
background: var(--nb-surface-glass);
|
|
5
|
+
border: 1px solid var(--nb-border);
|
|
6
|
+
border-top-color: var(--nb-border-lit);
|
|
7
|
+
border-radius: var(--nb-radius-lg);
|
|
8
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
9
|
+
color: var(--nb-on-surface);
|
|
10
|
+
}
|
|
11
|
+
.nb-card > :first-child { margin-top: 0; }
|
|
12
|
+
.nb-card > :last-child { margin-bottom: 0; }
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* luminous-precision — 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-border);
|
|
8
|
+
border-top-color: var(--nb-border-lit);
|
|
9
|
+
border-radius: var(--nb-radius-lg);
|
|
10
|
+
color: var(--nb-on-surface);
|
|
11
|
+
font-family: var(--nb-font-mono);
|
|
12
|
+
box-shadow: 0 0 40px var(--nb-primary-glow);
|
|
13
|
+
}
|
|
14
|
+
.nb-dialog::backdrop {
|
|
15
|
+
background: rgba(10, 12, 16, 0.6);
|
|
16
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
17
|
+
}
|
|
18
|
+
.nb-dialog__title {
|
|
19
|
+
margin: 0 0 var(--nb-space-3);
|
|
20
|
+
color: var(--nb-primary);
|
|
21
|
+
font-family: var(--nb-font-display);
|
|
22
|
+
font-size: 1.25rem;
|
|
23
|
+
font-weight: var(--nb-font-weight-medium);
|
|
24
|
+
letter-spacing: -0.01em;
|
|
25
|
+
}
|
|
26
|
+
.nb-dialog__actions {
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: flex-end;
|
|
29
|
+
gap: var(--nb-space-2);
|
|
30
|
+
margin-top: var(--nb-space-4);
|
|
31
|
+
}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
/* luminous-precision — form controls: input, textarea, select, checkbox,
|
|
2
|
+
* radio, switch. Focus drops the resting border for an electric-teal line
|
|
3
|
+
* with a soft outer glow. */
|
|
4
|
+
.nb-input,
|
|
5
|
+
.nb-select,
|
|
6
|
+
.nb-textarea {
|
|
7
|
+
display: block;
|
|
8
|
+
width: 100%;
|
|
9
|
+
padding: var(--nb-space-2) var(--nb-space-3);
|
|
10
|
+
background: rgba(26, 29, 41, 0.6);
|
|
11
|
+
border: 1px solid var(--nb-border);
|
|
12
|
+
border-radius: var(--nb-radius);
|
|
13
|
+
color: var(--nb-on-surface);
|
|
14
|
+
font-family: var(--nb-font-mono);
|
|
15
|
+
font-weight: var(--nb-font-weight);
|
|
16
|
+
font-size: var(--nb-text-sm);
|
|
17
|
+
transition: border-color var(--nb-transition), box-shadow var(--nb-transition);
|
|
18
|
+
}
|
|
19
|
+
.nb-select {
|
|
20
|
+
appearance: none;
|
|
21
|
+
padding-right: 2.25rem;
|
|
22
|
+
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='%23958e9b' stroke-width='1.5'/%3E%3C/svg%3E");
|
|
23
|
+
background-repeat: no-repeat;
|
|
24
|
+
background-position: right 0.75rem center;
|
|
25
|
+
}
|
|
26
|
+
.nb-input::placeholder,
|
|
27
|
+
.nb-textarea::placeholder {
|
|
28
|
+
color: var(--nb-faint);
|
|
29
|
+
}
|
|
30
|
+
.nb-input:focus,
|
|
31
|
+
.nb-select:focus,
|
|
32
|
+
.nb-textarea:focus {
|
|
33
|
+
outline: none;
|
|
34
|
+
border-color: var(--nb-accent);
|
|
35
|
+
box-shadow: 0 0 8px var(--nb-accent-glow);
|
|
36
|
+
}
|
|
37
|
+
.nb-input[aria-invalid="true"],
|
|
38
|
+
.nb-textarea[aria-invalid="true"] {
|
|
39
|
+
border-color: var(--nb-danger);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.nb-label {
|
|
43
|
+
display: block;
|
|
44
|
+
margin-bottom: var(--nb-space-1);
|
|
45
|
+
color: var(--nb-faint);
|
|
46
|
+
text-transform: uppercase;
|
|
47
|
+
font-size: 12px;
|
|
48
|
+
font-weight: var(--nb-font-weight-medium);
|
|
49
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.nb-field {
|
|
53
|
+
margin-bottom: var(--nb-space-3);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* checkbox & radio */
|
|
57
|
+
.nb-checkbox,
|
|
58
|
+
.nb-radio {
|
|
59
|
+
appearance: none;
|
|
60
|
+
width: 1.1rem;
|
|
61
|
+
height: 1.1rem;
|
|
62
|
+
margin: 0;
|
|
63
|
+
vertical-align: text-bottom;
|
|
64
|
+
background: var(--nb-surface);
|
|
65
|
+
border: 1px solid var(--nb-border-lit);
|
|
66
|
+
border-radius: 0.25rem;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
transition: border-color var(--nb-transition), box-shadow var(--nb-transition);
|
|
69
|
+
}
|
|
70
|
+
.nb-radio {
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
}
|
|
73
|
+
.nb-checkbox:checked,
|
|
74
|
+
.nb-radio:checked {
|
|
75
|
+
border-color: var(--nb-accent);
|
|
76
|
+
box-shadow: inset 0 0 0 3px var(--nb-surface), inset 0 0 0 1rem var(--nb-accent),
|
|
77
|
+
0 0 6px var(--nb-accent-glow);
|
|
78
|
+
}
|
|
79
|
+
.nb-checkbox:focus-visible,
|
|
80
|
+
.nb-radio:focus-visible,
|
|
81
|
+
.nb-switch:focus-visible {
|
|
82
|
+
outline: none;
|
|
83
|
+
border-color: var(--nb-primary-border);
|
|
84
|
+
}
|
|
85
|
+
.nb-choice {
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: var(--nb-space-2);
|
|
89
|
+
color: var(--nb-on-surface);
|
|
90
|
+
font-size: var(--nb-text-sm);
|
|
91
|
+
cursor: pointer;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* switch */
|
|
95
|
+
.nb-switch {
|
|
96
|
+
appearance: none;
|
|
97
|
+
width: 2.4rem;
|
|
98
|
+
height: 1.3rem;
|
|
99
|
+
margin: 0;
|
|
100
|
+
vertical-align: text-bottom;
|
|
101
|
+
background: var(--nb-surface);
|
|
102
|
+
border: 1px solid var(--nb-border-lit);
|
|
103
|
+
border-radius: 1rem;
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
position: relative;
|
|
106
|
+
transition: border-color var(--nb-transition);
|
|
107
|
+
}
|
|
108
|
+
.nb-switch::after {
|
|
109
|
+
content: "";
|
|
110
|
+
position: absolute;
|
|
111
|
+
top: 2px;
|
|
112
|
+
left: 2px;
|
|
113
|
+
width: calc(1.3rem - 6px);
|
|
114
|
+
height: calc(1.3rem - 6px);
|
|
115
|
+
border-radius: 50%;
|
|
116
|
+
background: var(--nb-faint);
|
|
117
|
+
transition: transform var(--nb-transition), background var(--nb-transition);
|
|
118
|
+
}
|
|
119
|
+
.nb-switch:checked {
|
|
120
|
+
border-color: var(--nb-accent);
|
|
121
|
+
}
|
|
122
|
+
.nb-switch:checked::after {
|
|
123
|
+
transform: translateX(1.1rem);
|
|
124
|
+
background: var(--nb-accent);
|
|
125
|
+
box-shadow: 0 0 6px var(--nb-accent-glow);
|
|
126
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* luminous-precision — nav link: glass list row; hover shifts the indigo and
|
|
2
|
+
* lights a 2px electric-teal bar on the left edge */
|
|
3
|
+
.nb-link {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: baseline;
|
|
6
|
+
gap: var(--nb-space-3);
|
|
7
|
+
padding: 1rem var(--nb-space-4);
|
|
8
|
+
background: var(--nb-surface-glass);
|
|
9
|
+
border: 1px solid var(--nb-border);
|
|
10
|
+
border-radius: var(--nb-radius);
|
|
11
|
+
backdrop-filter: blur(var(--nb-blur));
|
|
12
|
+
color: var(--nb-on-surface);
|
|
13
|
+
text-decoration: none;
|
|
14
|
+
text-transform: uppercase;
|
|
15
|
+
font-weight: var(--nb-font-weight-medium);
|
|
16
|
+
font-size: var(--nb-text-sm);
|
|
17
|
+
letter-spacing: var(--nb-tracking-wide);
|
|
18
|
+
box-shadow: inset 0 0 0 0 var(--nb-accent);
|
|
19
|
+
transition:
|
|
20
|
+
background var(--nb-transition),
|
|
21
|
+
color var(--nb-transition),
|
|
22
|
+
box-shadow var(--nb-transition);
|
|
23
|
+
}
|
|
24
|
+
.nb-link:hover {
|
|
25
|
+
background: var(--nb-surface);
|
|
26
|
+
color: var(--nb-accent);
|
|
27
|
+
box-shadow:
|
|
28
|
+
inset 2px 0 0 0 var(--nb-accent),
|
|
29
|
+
0 0 12px var(--nb-accent-glow);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@keyframes nb-pulse-glow {
|
|
33
|
+
0%,
|
|
34
|
+
100% {
|
|
35
|
+
box-shadow: 0 0 5px rgba(198, 165, 255, 0.15);
|
|
36
|
+
}
|
|
37
|
+
50% {
|
|
38
|
+
box-shadow: 0 0 20px var(--nb-primary-glow);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media (prefers-reduced-motion: reduce) {
|
|
43
|
+
.nb-link {
|
|
44
|
+
transition: none;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* luminous-precision — progress bar & spinner */
|
|
2
|
+
.nb-progress {
|
|
3
|
+
display: block;
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 0.5rem;
|
|
6
|
+
background: var(--nb-surface-sunken);
|
|
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,28 @@
|
|
|
1
|
+
/* luminous-precision — 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-border-lit);
|
|
11
|
+
color: var(--nb-faint);
|
|
12
|
+
text-align: left;
|
|
13
|
+
text-transform: uppercase;
|
|
14
|
+
font-size: 12px;
|
|
15
|
+
font-weight: var(--nb-font-weight-medium);
|
|
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), box-shadow var(--nb-transition);
|
|
24
|
+
}
|
|
25
|
+
.nb-table tbody tr:hover {
|
|
26
|
+
background: var(--nb-surface-glass);
|
|
27
|
+
box-shadow: inset 2px 0 0 0 var(--nb-accent);
|
|
28
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/* luminous-precision — tabs: active tab carries the electric-teal path */
|
|
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-medium);
|
|
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-accent);
|
|
28
|
+
border-bottom-color: var(--nb-accent);
|
|
29
|
+
text-shadow: 0 0 8px var(--nb-accent-glow);
|
|
30
|
+
}
|
|
31
|
+
.nb-tabpanel {
|
|
32
|
+
padding: var(--nb-space-3) 0;
|
|
33
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# luminous-precision
|
|
2
|
+
|
|
3
|
+
Professional, nocturnal evolution of neon-butterfly — "Luminous Precision".
|
|
4
|
+
Deep obsidian foundation, glassmorphic indigo surfaces, and light used as the
|
|
5
|
+
interaction language: instead of heavy borders, elements glow. Vibrant orchid
|
|
6
|
+
is the primary voice; electric teal marks active paths and critical signals.
|
|
7
|
+
Sora headlines over JetBrains Mono body give it a commanding, high-tech,
|
|
8
|
+
developer-console feel without going full terminal. Derived from the
|
|
9
|
+
InfraPulse Stitch mockups (Stitch project 18185577263375001507).
|
|
10
|
+
|
|
11
|
+
## Color
|
|
12
|
+
|
|
13
|
+
| Role | Value | Usage |
|
|
14
|
+
| --- | --- | --- |
|
|
15
|
+
| Background | `#0a0c10` (deep obsidian) | Page background; `.nb-bg` adds soft orchid/teal radial underlays |
|
|
16
|
+
| Surface | `#1a1d29` (indigo) | Solid panels, dialogs |
|
|
17
|
+
| Surface sunken | `#0c0e14` | Inset fields, log wells, progress troughs |
|
|
18
|
+
| Surface glass | `rgba(26,29,41,0.4)` + 12px blur | Cards, nav links, alerts |
|
|
19
|
+
| On-surface | `#e2e2eb` | Body text |
|
|
20
|
+
| Faint | `#958e9b` | Secondary text, labels, idle tabs |
|
|
21
|
+
| Primary | `#c6a5ff` (vibrant orchid) | Primary buttons (solid fill), emphasis, glow |
|
|
22
|
+
| Accent | `#00f5ff` (electric teal) | Active states, focus rings, success paths, list-edge bars |
|
|
23
|
+
| Info | `#83b7ff` | Informational callouts and chips |
|
|
24
|
+
| Success | `#47e34e` | Live/healthy status |
|
|
25
|
+
| Warning | `#ffb86c` (amber) | Caution states |
|
|
26
|
+
| Danger | `#ff4d6d` (rose) | Destructive actions, errors |
|
|
27
|
+
| Border | `rgba(255,255,255,0.08)` | Resting borders |
|
|
28
|
+
| Border lit | `rgba(255,255,255,0.2)` | Top edge of glass panes — simulates overhead light |
|
|
29
|
+
|
|
30
|
+
Rules: color is functional, never decorative. Resting UI stays obsidian/faint;
|
|
31
|
+
orchid and teal appear on interaction, focus, and state. Depth comes from
|
|
32
|
+
tonal layers and glow, not drop shadows. Never pure white or pure black.
|
|
33
|
+
|
|
34
|
+
## Typography
|
|
35
|
+
|
|
36
|
+
- **Headlines:** Sora (500 md / 600 lg / 700 xl), tight letter-spacing
|
|
37
|
+
(−0.01 to −0.02em); fallback `ui-sans-serif`.
|
|
38
|
+
- **Body & UI:** JetBrains Mono 400; fallback `ui-monospace`.
|
|
39
|
+
- **Labels & interactive text** (buttons, tabs, table headers): uppercase,
|
|
40
|
+
600, 12–14px, letter-spacing `0.05em`.
|
|
41
|
+
|
|
42
|
+
## Shape & effects
|
|
43
|
+
|
|
44
|
+
- Radius `0.5rem` for buttons and inputs; `1rem` for cards, dialogs, and large
|
|
45
|
+
containers. Pills reserved strictly for chips/badges and switches.
|
|
46
|
+
- Glass panes: 1px hairline borders with a lighter top edge
|
|
47
|
+
(`--nb-border-lit`) to simulate overhead lighting; `backdrop-filter` 12px.
|
|
48
|
+
- Focus is electric teal: inputs drop the resting border for a teal line plus
|
|
49
|
+
soft teal outer glow.
|
|
50
|
+
- Elevation = glow (`nb-pulse-glow` orchid, `nb-pulse-glow-accent` teal), not
|
|
51
|
+
dark shadows. Transitions 0.3s. Respect `prefers-reduced-motion`.
|
|
52
|
+
- 8px spacing rhythm; generous negative space so glows can breathe.
|
|
53
|
+
|
|
54
|
+
## Components
|
|
55
|
+
|
|
56
|
+
Class prefix `nb-` (shared token/class contract with the other themes).
|
|
57
|
+
|
|
58
|
+
- **Card** `.nb-card` — glass pane, 1rem radius, lit top edge.
|
|
59
|
+
- **NavLink** `.nb-link` — glass list row; hover shifts to solid indigo and
|
|
60
|
+
lights a 2px teal bar on the left edge.
|
|
61
|
+
- **Button** `.nb-btn` — ghost by default; `--primary` is the one solid fill
|
|
62
|
+
(orchid, dark text), `--accent` teal ghost, `--danger` rose ghost.
|
|
63
|
+
- **Form** `.nb-input`, `.nb-textarea`, `.nb-select`, `.nb-label`,
|
|
64
|
+
`.nb-field`, `.nb-checkbox`, `.nb-radio`, `.nb-switch`, `.nb-choice` —
|
|
65
|
+
checked/focus states glow teal.
|
|
66
|
+
- **Badge** `.nb-badge` — pill chip: 15% tint of its hue behind
|
|
67
|
+
full-saturation text (+ semantic modifiers).
|
|
68
|
+
- **Alert** `.nb-alert` — glass, 3px left bar carries the semantic color.
|
|
69
|
+
- **Dialog** `.nb-dialog` — native `<dialog>`, indigo pane with orchid glow,
|
|
70
|
+
Sora title, blurred obsidian backdrop.
|
|
71
|
+
- **Tabs** `.nb-tabs`/`.nb-tab`/`.nb-tabpanel` — active tab underlined in
|
|
72
|
+
teal with text glow.
|
|
73
|
+
- **Table** `.nb-table` — lit header rule; row hover shifts glass and lights
|
|
74
|
+
the teal left bar.
|
|
75
|
+
- **Progress** `.nb-progress`, **Spinner** `.nb-spinner` — glowing orchid
|
|
76
|
+
indicators (`--accent` bar variant in teal).
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* luminous-precision — 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,55 @@
|
|
|
1
|
+
/* luminous-precision — design tokens
|
|
2
|
+
* Source of truth for the luminous-precision theme. Consume via:
|
|
3
|
+
* @import "@nazuraki/styles/luminous-precision/tokens";
|
|
4
|
+
* or pull the whole theme with ./index.css.
|
|
5
|
+
*
|
|
6
|
+
* Token names mirror neon-butterfly's --nb-* contract so themes stay
|
|
7
|
+
* swappable; names marked (extra) are additions this theme needs and that
|
|
8
|
+
* neon-butterfly does not define.
|
|
9
|
+
*/
|
|
10
|
+
:root {
|
|
11
|
+
/* color */
|
|
12
|
+
--nb-bg: #0a0c10;
|
|
13
|
+
--nb-bg-blend: #111319;
|
|
14
|
+
--nb-surface: #1a1d29;
|
|
15
|
+
--nb-surface-sunken: #0c0e14; /* (extra) inset fields, log wells */
|
|
16
|
+
--nb-surface-glass: rgba(26, 29, 41, 0.4);
|
|
17
|
+
--nb-on-surface: #e2e2eb;
|
|
18
|
+
--nb-faint: #958e9b;
|
|
19
|
+
--nb-primary: #c6a5ff;
|
|
20
|
+
--nb-primary-glow: rgba(198, 165, 255, 0.35);
|
|
21
|
+
--nb-primary-border: rgba(198, 165, 255, 0.6);
|
|
22
|
+
--nb-on-primary: #16101f; /* (extra) text on solid orchid fills */
|
|
23
|
+
--nb-accent: #00f5ff;
|
|
24
|
+
--nb-accent-glow: rgba(0, 245, 255, 0.3);
|
|
25
|
+
--nb-border: rgba(255, 255, 255, 0.08);
|
|
26
|
+
--nb-border-lit: rgba(255, 255, 255, 0.2); /* (extra) lit top edge of glass panes */
|
|
27
|
+
|
|
28
|
+
/* semantic color */
|
|
29
|
+
--nb-info: #83b7ff;
|
|
30
|
+
--nb-success: #47e34e;
|
|
31
|
+
--nb-warning: #ffb86c;
|
|
32
|
+
--nb-danger: #ff4d6d;
|
|
33
|
+
|
|
34
|
+
/* typography */
|
|
35
|
+
--nb-font-display: "Sora", ui-sans-serif, system-ui, sans-serif; /* (extra) headlines */
|
|
36
|
+
--nb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
37
|
+
--nb-font-weight: 400;
|
|
38
|
+
--nb-font-weight-medium: 600; /* (extra) labels, interactive text */
|
|
39
|
+
--nb-font-weight-bold: 700;
|
|
40
|
+
--nb-text-sm: 14px;
|
|
41
|
+
--nb-tracking-wide: 0.05em;
|
|
42
|
+
|
|
43
|
+
/* shape & effects */
|
|
44
|
+
--nb-radius: 0.5rem;
|
|
45
|
+
--nb-radius-lg: 1rem; /* (extra) cards and large containers */
|
|
46
|
+
--nb-blur: 12px;
|
|
47
|
+
--nb-transition: 0.3s;
|
|
48
|
+
|
|
49
|
+
/* spacing (8px rhythm) */
|
|
50
|
+
--nb-space-1: 0.25rem;
|
|
51
|
+
--nb-space-2: 0.5rem;
|
|
52
|
+
--nb-space-3: 1rem;
|
|
53
|
+
--nb-space-4: 1.5rem;
|
|
54
|
+
--nb-space-5: 2rem;
|
|
55
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nazuraki/styles",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Shared design-system styles: tokens, base styles, and component classes per theme.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
15
|
"neon-butterfly",
|
|
16
|
-
"summer-cloud"
|
|
16
|
+
"summer-cloud",
|
|
17
|
+
"luminous-precision"
|
|
17
18
|
],
|
|
18
19
|
"exports": {
|
|
19
20
|
"./neon-butterfly": "./neon-butterfly/index.css",
|
|
@@ -23,6 +24,10 @@
|
|
|
23
24
|
"./summer-cloud": "./summer-cloud/index.css",
|
|
24
25
|
"./summer-cloud/tokens": "./summer-cloud/tokens.css",
|
|
25
26
|
"./summer-cloud/base": "./summer-cloud/base.css",
|
|
26
|
-
"./summer-cloud/components/*": "./summer-cloud/components/*.css"
|
|
27
|
+
"./summer-cloud/components/*": "./summer-cloud/components/*.css",
|
|
28
|
+
"./luminous-precision": "./luminous-precision/index.css",
|
|
29
|
+
"./luminous-precision/tokens": "./luminous-precision/tokens.css",
|
|
30
|
+
"./luminous-precision/base": "./luminous-precision/base.css",
|
|
31
|
+
"./luminous-precision/components/*": "./luminous-precision/components/*.css"
|
|
27
32
|
}
|
|
28
33
|
}
|