@nonoun/native-tokens 0.4.0 → 0.4.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/dist/index.d.ts +9 -9
- package/dist/index.d.ts.map +1 -1
- package/dist/{nui-tokens.css → native-tokens.css} +35 -33
- package/dist/{nui-tokens.js → native-tokens.js} +58 -58
- package/dist/{nui-tokens-color-swatch-element.d.ts → tokens-color-swatch-element.d.ts} +3 -3
- package/dist/tokens-color-swatch-element.d.ts.map +1 -0
- package/dist/{nui-tokens-colors-element.d.ts → tokens-colors-element.d.ts} +4 -4
- package/dist/tokens-colors-element.d.ts.map +1 -0
- package/dist/tokens-element.d.ts +15 -0
- package/dist/tokens-element.d.ts.map +1 -0
- package/dist/{nui-tokens-themes-element.d.ts → tokens-themes-element.d.ts} +4 -4
- package/dist/tokens-themes-element.d.ts.map +1 -0
- package/dist/{nui-tokens-variable-element.d.ts → tokens-variable-element.d.ts} +4 -4
- package/dist/tokens-variable-element.d.ts.map +1 -0
- package/package.json +2 -2
- package/dist/nui-tokens-color-swatch-element.d.ts.map +0 -1
- package/dist/nui-tokens-colors-element.d.ts.map +0 -1
- package/dist/nui-tokens-element.d.ts +0 -15
- package/dist/nui-tokens-element.d.ts.map +0 -1
- package/dist/nui-tokens-themes-element.d.ts.map +0 -1
- package/dist/nui-tokens-variable-element.d.ts.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
import { NTokensVariable } from './tokens-variable-element.ts';
|
|
2
|
+
import { NTokensColors } from './tokens-colors-element.ts';
|
|
3
|
+
import { NTokensColorSwatch } from './tokens-color-swatch-element.ts';
|
|
4
|
+
import { NTokensThemes } from './tokens-themes-element.ts';
|
|
5
|
+
import { NTokens } from './tokens-element.ts';
|
|
6
6
|
import { buildTokens } from './build-tokens.ts';
|
|
7
|
-
export {
|
|
8
|
-
export type {
|
|
9
|
-
export type {
|
|
10
|
-
export type {
|
|
7
|
+
export { NTokens, NTokensVariable, NTokensColors, NTokensColorSwatch, NTokensThemes, buildTokens, };
|
|
8
|
+
export type { NTokensVariableData } from './tokens-variable-element.ts';
|
|
9
|
+
export type { NTokensColorEntry } from './tokens-colors-element.ts';
|
|
10
|
+
export type { NTokensThemeEntry } from './tokens-themes-element.ts';
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAsBhD,OAAO,EACL,OAAO,EACP,eAAe,EACf,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,WAAW,GACZ,CAAC;AACF,YAAY,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
/* ──────────────────────────────────────────────────────────────────────────────
|
|
2
|
-
|
|
3
|
-
Opt-in via: @import '@nonoun/
|
|
2
|
+
native-tokens — Design system token inspector styles.
|
|
3
|
+
Opt-in via: @import '@nonoun/native-tokens/css';
|
|
4
4
|
────────────────────────────────────────────────────────────────────────────── */
|
|
5
5
|
|
|
6
6
|
@layer ui {
|
|
7
7
|
|
|
8
8
|
/* ── Toolbar ── */
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.native-tokens-toolbar {
|
|
11
|
+
--n-ground: var(--n-panel);
|
|
12
|
+
|
|
11
13
|
position: sticky;
|
|
12
14
|
top: 0;
|
|
13
15
|
z-index: 1;
|
|
@@ -15,30 +17,30 @@
|
|
|
15
17
|
gap: 0.5rem;
|
|
16
18
|
padding-block: 0.5rem;
|
|
17
19
|
margin-block-end: 0.5rem;
|
|
18
|
-
background: var(--n-ground
|
|
20
|
+
background: var(--n-ground);
|
|
19
21
|
}
|
|
20
22
|
|
|
21
|
-
.
|
|
23
|
+
.native-tokens-toolbar > * {
|
|
22
24
|
flex: 1;
|
|
23
25
|
min-width: 0;
|
|
24
26
|
}
|
|
25
27
|
|
|
26
28
|
/* ── Section Structure ── */
|
|
27
29
|
|
|
28
|
-
.
|
|
30
|
+
.native-tokens-section {
|
|
29
31
|
margin-block-end: 1rem;
|
|
30
32
|
}
|
|
31
33
|
|
|
32
|
-
.
|
|
34
|
+
.native-tokens-section[hidden] {
|
|
33
35
|
display: none;
|
|
34
36
|
}
|
|
35
37
|
|
|
36
|
-
.
|
|
38
|
+
.native-tokens-section + .native-tokens-section:not([hidden]) {
|
|
37
39
|
padding-block-start: 0.5rem;
|
|
38
40
|
border-block-start: 1px solid var(--n-border-muted-neutral);
|
|
39
41
|
}
|
|
40
42
|
|
|
41
|
-
.
|
|
43
|
+
.native-tokens-heading {
|
|
42
44
|
font-size: 0.6875rem;
|
|
43
45
|
font-weight: 600;
|
|
44
46
|
text-transform: uppercase;
|
|
@@ -47,20 +49,20 @@
|
|
|
47
49
|
margin: 0 0 0.5rem;
|
|
48
50
|
}
|
|
49
51
|
|
|
50
|
-
.
|
|
52
|
+
.native-tokens-subheading {
|
|
51
53
|
font-size: 0.625rem;
|
|
52
54
|
font-weight: 500;
|
|
53
55
|
color: var(--n-ink-placeholder-neutral);
|
|
54
56
|
margin: 0.5rem 0 0.25rem;
|
|
55
57
|
}
|
|
56
58
|
|
|
57
|
-
/* ──
|
|
59
|
+
/* ── native-tokens-variable ── */
|
|
58
60
|
|
|
59
|
-
:where(
|
|
61
|
+
:where(native-tokens-variable) {
|
|
60
62
|
display: block;
|
|
61
63
|
}
|
|
62
64
|
|
|
63
|
-
.
|
|
65
|
+
.native-tokens-variable-row {
|
|
64
66
|
display: grid;
|
|
65
67
|
grid-template-columns: auto 1fr auto;
|
|
66
68
|
align-items: center;
|
|
@@ -68,7 +70,7 @@
|
|
|
68
70
|
padding-block: 0.125rem;
|
|
69
71
|
}
|
|
70
72
|
|
|
71
|
-
.
|
|
73
|
+
.native-tokens-variable-label {
|
|
72
74
|
font-size: 0.6875rem;
|
|
73
75
|
color: var(--n-ink-neutral);
|
|
74
76
|
white-space: nowrap;
|
|
@@ -78,7 +80,7 @@
|
|
|
78
80
|
max-width: 5rem;
|
|
79
81
|
}
|
|
80
82
|
|
|
81
|
-
.
|
|
83
|
+
.native-tokens-variable-value {
|
|
82
84
|
font-size: 0.625rem;
|
|
83
85
|
font-family: ui-monospace, monospace;
|
|
84
86
|
color: var(--n-ink-muted-neutral);
|
|
@@ -90,22 +92,22 @@
|
|
|
90
92
|
max-width: 5rem;
|
|
91
93
|
}
|
|
92
94
|
|
|
93
|
-
/* ──
|
|
95
|
+
/* ── native-tokens-colors ── */
|
|
94
96
|
|
|
95
|
-
:where(
|
|
97
|
+
:where(native-tokens-colors) {
|
|
96
98
|
display: block;
|
|
97
99
|
}
|
|
98
100
|
|
|
99
|
-
.
|
|
101
|
+
.native-tokens-colors-strip {
|
|
100
102
|
display: flex;
|
|
101
103
|
gap: 2px;
|
|
102
104
|
border-radius: 0.375rem;
|
|
103
105
|
overflow: hidden;
|
|
104
106
|
}
|
|
105
107
|
|
|
106
|
-
/* ──
|
|
108
|
+
/* ── native-tokens-color-swatch ── */
|
|
107
109
|
|
|
108
|
-
:where(
|
|
110
|
+
:where(native-tokens-color-swatch) {
|
|
109
111
|
flex: 1;
|
|
110
112
|
aspect-ratio: 1;
|
|
111
113
|
min-width: 0;
|
|
@@ -116,7 +118,7 @@
|
|
|
116
118
|
cursor: pointer;
|
|
117
119
|
}
|
|
118
120
|
|
|
119
|
-
.
|
|
121
|
+
.native-tokens-swatch-label {
|
|
120
122
|
font-size: 0.5rem;
|
|
121
123
|
line-height: 1;
|
|
122
124
|
text-align: center;
|
|
@@ -130,7 +132,7 @@
|
|
|
130
132
|
|
|
131
133
|
/* ── Swatch Popover ── */
|
|
132
134
|
|
|
133
|
-
.
|
|
135
|
+
.native-tokens-swatch-popover {
|
|
134
136
|
position: fixed;
|
|
135
137
|
position-area: block-end;
|
|
136
138
|
position-try-fallbacks: flip-block;
|
|
@@ -144,7 +146,7 @@
|
|
|
144
146
|
background: var(--n-modal-neutral);
|
|
145
147
|
border: 1px solid var(--n-border-muted-neutral);
|
|
146
148
|
border-radius: 0.375rem;
|
|
147
|
-
box-shadow: var(--
|
|
149
|
+
box-shadow: var(--n-shadow-md);
|
|
148
150
|
|
|
149
151
|
/* Override UA popover styles */
|
|
150
152
|
inset: unset;
|
|
@@ -159,23 +161,23 @@
|
|
|
159
161
|
overlay 150ms ease allow-discrete;
|
|
160
162
|
}
|
|
161
163
|
|
|
162
|
-
.
|
|
164
|
+
.native-tokens-swatch-popover:popover-open {
|
|
163
165
|
opacity: 1;
|
|
164
166
|
transform: scale(1);
|
|
165
167
|
}
|
|
166
168
|
|
|
167
169
|
@starting-style {
|
|
168
|
-
.
|
|
170
|
+
.native-tokens-swatch-popover:popover-open {
|
|
169
171
|
opacity: 0;
|
|
170
172
|
transform: scale(0.96);
|
|
171
173
|
}
|
|
172
174
|
}
|
|
173
175
|
|
|
174
|
-
.
|
|
176
|
+
.native-tokens-swatch-popover[popover]:not(:popover-open) {
|
|
175
177
|
display: none;
|
|
176
178
|
}
|
|
177
179
|
|
|
178
|
-
.
|
|
180
|
+
.native-tokens-swatch-popover-header {
|
|
179
181
|
font-size: 0.5625rem;
|
|
180
182
|
font-family: ui-monospace, monospace;
|
|
181
183
|
color: var(--n-ink-muted-neutral);
|
|
@@ -187,7 +189,7 @@
|
|
|
187
189
|
text-overflow: ellipsis;
|
|
188
190
|
}
|
|
189
191
|
|
|
190
|
-
.
|
|
192
|
+
.native-tokens-swatch-popover-row {
|
|
191
193
|
display: flex;
|
|
192
194
|
align-items: center;
|
|
193
195
|
gap: 0.5rem;
|
|
@@ -202,18 +204,18 @@
|
|
|
202
204
|
text-align: left;
|
|
203
205
|
}
|
|
204
206
|
|
|
205
|
-
.
|
|
207
|
+
.native-tokens-swatch-popover-row:hover {
|
|
206
208
|
background: var(--n-control-neutral);
|
|
207
209
|
}
|
|
208
210
|
|
|
209
|
-
.
|
|
211
|
+
.native-tokens-swatch-popover-label {
|
|
210
212
|
font-size: 0.5625rem;
|
|
211
213
|
font-weight: 600;
|
|
212
214
|
color: var(--n-ink-muted-neutral);
|
|
213
215
|
min-width: 2.5rem;
|
|
214
216
|
}
|
|
215
217
|
|
|
216
|
-
.
|
|
218
|
+
.native-tokens-swatch-popover-value {
|
|
217
219
|
font-size: 0.5625rem;
|
|
218
220
|
font-family: ui-monospace, monospace;
|
|
219
221
|
color: var(--n-ink-neutral);
|
|
@@ -222,9 +224,9 @@
|
|
|
222
224
|
text-overflow: ellipsis;
|
|
223
225
|
}
|
|
224
226
|
|
|
225
|
-
/* ──
|
|
227
|
+
/* ── native-tokens-themes ── */
|
|
226
228
|
|
|
227
|
-
:where(
|
|
229
|
+
:where(native-tokens-themes) {
|
|
228
230
|
display: contents;
|
|
229
231
|
}
|
|
230
232
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
var l = class extends
|
|
1
|
+
import { NButton as e, NIcon as t, NListbox as n, NOption as r, NRange as i, NSelect as a, NativeElement as o, define as s, uid as c } from "@nonoun/native-ui";
|
|
2
|
+
var l = class extends o {
|
|
3
3
|
static observedAttributes = ["data"];
|
|
4
4
|
#e = null;
|
|
5
5
|
#t = null;
|
|
@@ -18,10 +18,10 @@ var l = class extends t {
|
|
|
18
18
|
if (e) try {
|
|
19
19
|
this.#e = JSON.parse(e);
|
|
20
20
|
} catch {}
|
|
21
|
-
this.#a(), this.addEventListener("
|
|
21
|
+
this.#a(), this.addEventListener("native-tokens-theme-change", this.#r);
|
|
22
22
|
}
|
|
23
23
|
teardown() {
|
|
24
|
-
this.removeEventListener("
|
|
24
|
+
this.removeEventListener("native-tokens-theme-change", this.#r), this.innerHTML = "", this.#t = null, this.#n = null, super.teardown();
|
|
25
25
|
}
|
|
26
26
|
#r = () => {
|
|
27
27
|
requestAnimationFrame(() => this.#i());
|
|
@@ -43,17 +43,17 @@ var l = class extends t {
|
|
|
43
43
|
let e = this.#e;
|
|
44
44
|
this.innerHTML = "";
|
|
45
45
|
let t = document.createElement("div");
|
|
46
|
-
t.className = "
|
|
46
|
+
t.className = "native-tokens-variable-row";
|
|
47
47
|
let n = document.createElement("label");
|
|
48
|
-
n.className = "
|
|
49
|
-
let r = document.createElement("
|
|
48
|
+
n.className = "native-tokens-variable-label", n.textContent = e.name;
|
|
49
|
+
let r = document.createElement("n-range");
|
|
50
50
|
r.setAttribute("min", String(e.min ?? 0)), r.setAttribute("max", String(e.max ?? 1)), r.setAttribute("step", String(e.step ?? .01)), r.setAttribute("size", "xs");
|
|
51
51
|
let i = getComputedStyle(document.documentElement).getPropertyValue(e.token).trim(), a = i ? parseFloat(i) : e.value;
|
|
52
52
|
r.setAttribute("value", String(a));
|
|
53
53
|
let o = e.step ?? .01, s = document.createElement("span");
|
|
54
|
-
s.className = "
|
|
54
|
+
s.className = "native-tokens-variable-value", s.textContent = a.toFixed(o < .01 ? 3 : 2), r.addEventListener("native:input", ((t) => {
|
|
55
55
|
let n = t.detail.value;
|
|
56
|
-
document.documentElement.style.setProperty(e.token, String(n)), s.textContent = n.toFixed(o < .01 ? 3 : 2), this.dispatchEvent(new CustomEvent("
|
|
56
|
+
document.documentElement.style.setProperty(e.token, String(n)), s.textContent = n.toFixed(o < .01 ? 3 : 2), this.dispatchEvent(new CustomEvent("native-tokens-change", {
|
|
57
57
|
bubbles: !0,
|
|
58
58
|
detail: {
|
|
59
59
|
token: e.token,
|
|
@@ -62,7 +62,7 @@ var l = class extends t {
|
|
|
62
62
|
}));
|
|
63
63
|
})), this.#t = r, this.#n = s, t.append(n, r, s), this.appendChild(t);
|
|
64
64
|
}
|
|
65
|
-
}, u = class extends
|
|
65
|
+
}, u = class extends o {
|
|
66
66
|
static observedAttributes = ["data"];
|
|
67
67
|
#e = [];
|
|
68
68
|
attributeChangedCallback(e, t, n) {
|
|
@@ -79,10 +79,10 @@ var l = class extends t {
|
|
|
79
79
|
if (e) try {
|
|
80
80
|
this.#e = JSON.parse(e);
|
|
81
81
|
} catch {}
|
|
82
|
-
this.#n(), this.addEventListener("
|
|
82
|
+
this.#n(), this.addEventListener("native-tokens-change", this.#t), this.addEventListener("native-tokens-theme-change", this.#t);
|
|
83
83
|
}
|
|
84
84
|
teardown() {
|
|
85
|
-
this.removeEventListener("
|
|
85
|
+
this.removeEventListener("native-tokens-change", this.#t), this.removeEventListener("native-tokens-theme-change", this.#t), this.innerHTML = "", super.teardown();
|
|
86
86
|
}
|
|
87
87
|
#t = () => {
|
|
88
88
|
requestAnimationFrame(() => this.#r());
|
|
@@ -93,15 +93,15 @@ var l = class extends t {
|
|
|
93
93
|
#n() {
|
|
94
94
|
this.innerHTML = "";
|
|
95
95
|
let e = document.createElement("div");
|
|
96
|
-
e.className = "
|
|
96
|
+
e.className = "native-tokens-colors-strip";
|
|
97
97
|
for (let t of this.#e) {
|
|
98
|
-
let n = document.createElement("
|
|
98
|
+
let n = document.createElement("native-tokens-color-swatch");
|
|
99
99
|
n.setAttribute("token", t.token), n.setAttribute("name", t.name), e.appendChild(n);
|
|
100
100
|
}
|
|
101
101
|
this.appendChild(e);
|
|
102
102
|
}
|
|
103
103
|
#r() {
|
|
104
|
-
this.querySelectorAll("
|
|
104
|
+
this.querySelectorAll("native-tokens-color-swatch").forEach((e) => e.refresh());
|
|
105
105
|
}
|
|
106
106
|
};
|
|
107
107
|
/** Parse a computed `rgb(...)` / `rgba(...)` string into [r, g, b, a] (0–255, 0–1). */
|
|
@@ -217,7 +217,7 @@ var C = [
|
|
|
217
217
|
label: "HSB",
|
|
218
218
|
fn: S
|
|
219
219
|
}
|
|
220
|
-
], w = class extends
|
|
220
|
+
], w = class extends o {
|
|
221
221
|
static observedAttributes = ["token", "name"];
|
|
222
222
|
#e = null;
|
|
223
223
|
#t = null;
|
|
@@ -240,12 +240,12 @@ var C = [
|
|
|
240
240
|
setup() {
|
|
241
241
|
super.setup(), this.token && (this.style.background = `var(${this.token})`, this.title = `${this.name}\n${this.token}`);
|
|
242
242
|
let e = document.createElement("span");
|
|
243
|
-
e.className = "
|
|
243
|
+
e.className = "native-tokens-swatch-label", e.textContent = this.name, this.#t = e, this.appendChild(e), this.#n = c("swatch"), this.style.setProperty("anchor-name", `--${this.#n}`);
|
|
244
244
|
let t = document.createElement("div");
|
|
245
|
-
t.className = "
|
|
245
|
+
t.className = "native-tokens-swatch-popover", t.setAttribute("popover", "auto"), t.style.setProperty("position-anchor", `--${this.#n}`), this.#e = t, this.appendChild(t), this.addEventListener("click", this.#i), this.addEventListener("native-tokens-change", this.#r), this.addEventListener("native-tokens-theme-change", this.#r), requestAnimationFrame(() => this.#a());
|
|
246
246
|
}
|
|
247
247
|
teardown() {
|
|
248
|
-
this.removeEventListener("click", this.#i), this.removeEventListener("
|
|
248
|
+
this.removeEventListener("click", this.#i), this.removeEventListener("native-tokens-change", this.#r), this.removeEventListener("native-tokens-theme-change", this.#r), this.#e = null, this.#t = null, this.innerHTML = "", super.teardown();
|
|
249
249
|
}
|
|
250
250
|
/** Refresh background and contrast from current token value. */
|
|
251
251
|
refresh() {
|
|
@@ -255,7 +255,7 @@ var C = [
|
|
|
255
255
|
requestAnimationFrame(() => this.refresh());
|
|
256
256
|
};
|
|
257
257
|
#i = (e) => {
|
|
258
|
-
if (!(this.#e && e.target.closest(".
|
|
258
|
+
if (!(this.#e && e.target.closest(".native-tokens-swatch-popover")) && this.#e) {
|
|
259
259
|
this.#o();
|
|
260
260
|
try {
|
|
261
261
|
this.#e.showPopover();
|
|
@@ -270,14 +270,14 @@ var C = [
|
|
|
270
270
|
if (!this.#e) return;
|
|
271
271
|
this.#e.innerHTML = "";
|
|
272
272
|
let e = getComputedStyle(this).backgroundColor, [t, n, r, i] = d(e), a = document.createElement("div");
|
|
273
|
-
a.className = "
|
|
273
|
+
a.className = "native-tokens-swatch-popover-header", a.textContent = this.token, this.#e.appendChild(a);
|
|
274
274
|
for (let e of C) {
|
|
275
275
|
let a = e.fn(t, n, r, i), o = document.createElement("button");
|
|
276
|
-
o.className = "
|
|
276
|
+
o.className = "native-tokens-swatch-popover-row", o.type = "button";
|
|
277
277
|
let s = document.createElement("span");
|
|
278
|
-
s.className = "
|
|
278
|
+
s.className = "native-tokens-swatch-popover-label", s.textContent = e.label;
|
|
279
279
|
let c = document.createElement("span");
|
|
280
|
-
c.className = "
|
|
280
|
+
c.className = "native-tokens-swatch-popover-value", c.textContent = a, o.append(s, c), o.addEventListener("click", (e) => {
|
|
281
281
|
e.stopPropagation(), navigator.clipboard.writeText(a).then(() => {
|
|
282
282
|
c.textContent = "Copied!", setTimeout(() => {
|
|
283
283
|
c.textContent = a;
|
|
@@ -286,7 +286,7 @@ var C = [
|
|
|
286
286
|
}), this.#e.appendChild(o);
|
|
287
287
|
}
|
|
288
288
|
}
|
|
289
|
-
}, T = /* @__PURE__ */ "
|
|
289
|
+
}, T = /* @__PURE__ */ "n-env-lightness-min.n-env-lightness-max.n-env-lightness-delta.n-env-chroma.n-env-chroma-k-muted.n-env-chroma-k-vivid.n-env-chroma-k-edge.n-env-alpha.n-env-alpha-delta.n-env-hue-neutral.n-env-chroma-neutral.n-env-lightness-neutral.n-env-hue-accent.n-env-chroma-accent.n-env-lightness-accent.n-env-hue-info.n-env-chroma-info.n-env-lightness-info.n-env-hue-success.n-env-chroma-success.n-env-lightness-success.n-env-hue-warning.n-env-chroma-warning.n-env-lightness-warning.n-env-hue-danger.n-env-chroma-danger.n-env-lightness-danger".split("."), E = class extends o {
|
|
290
290
|
static observedAttributes = ["data"];
|
|
291
291
|
#e = [];
|
|
292
292
|
attributeChangedCallback(e, t, n) {
|
|
@@ -310,18 +310,18 @@ var C = [
|
|
|
310
310
|
}
|
|
311
311
|
#t() {
|
|
312
312
|
this.innerHTML = "";
|
|
313
|
-
let e = document.documentElement.getAttribute("theme") ?? "", t = document.createElement("
|
|
313
|
+
let e = document.documentElement.getAttribute("theme") ?? "", t = document.createElement("n-select");
|
|
314
314
|
t.setAttribute("size", "xs"), t.setAttribute("placeholder", "Theme..."), t.setAttribute("options", JSON.stringify(this.#e.map((e) => ({
|
|
315
315
|
value: e.value,
|
|
316
316
|
label: e.name
|
|
317
|
-
})))), t.setAttribute("value", e), t.addEventListener("
|
|
317
|
+
})))), t.setAttribute("value", e), t.addEventListener("native:change", ((e) => {
|
|
318
318
|
this.#n(e.detail.value);
|
|
319
319
|
})), this.appendChild(t);
|
|
320
320
|
}
|
|
321
321
|
#n(e) {
|
|
322
322
|
let t = document.documentElement;
|
|
323
323
|
for (let e of T) t.style.removeProperty("--" + e);
|
|
324
|
-
e ? t.setAttribute("theme", e) : t.removeAttribute("theme"), this.dispatchEvent(new CustomEvent("
|
|
324
|
+
e ? t.setAttribute("theme", e) : t.removeAttribute("theme"), this.dispatchEvent(new CustomEvent("native-tokens-theme-change", {
|
|
325
325
|
bubbles: !0,
|
|
326
326
|
detail: { theme: e }
|
|
327
327
|
}));
|
|
@@ -346,7 +346,7 @@ var C = [
|
|
|
346
346
|
], O = [
|
|
347
347
|
{
|
|
348
348
|
name: "L min",
|
|
349
|
-
token: "--
|
|
349
|
+
token: "--n-env-lightness-min",
|
|
350
350
|
value: .15,
|
|
351
351
|
step: .01,
|
|
352
352
|
min: 0,
|
|
@@ -355,7 +355,7 @@ var C = [
|
|
|
355
355
|
},
|
|
356
356
|
{
|
|
357
357
|
name: "L max",
|
|
358
|
-
token: "--
|
|
358
|
+
token: "--n-env-lightness-max",
|
|
359
359
|
value: 1,
|
|
360
360
|
step: .01,
|
|
361
361
|
min: 0,
|
|
@@ -364,7 +364,7 @@ var C = [
|
|
|
364
364
|
},
|
|
365
365
|
{
|
|
366
366
|
name: "L delta",
|
|
367
|
-
token: "--
|
|
367
|
+
token: "--n-env-lightness-delta",
|
|
368
368
|
value: .015,
|
|
369
369
|
step: .005,
|
|
370
370
|
min: 0,
|
|
@@ -373,7 +373,7 @@ var C = [
|
|
|
373
373
|
},
|
|
374
374
|
{
|
|
375
375
|
name: "Chroma",
|
|
376
|
-
token: "--
|
|
376
|
+
token: "--n-env-chroma",
|
|
377
377
|
value: .2,
|
|
378
378
|
step: .005,
|
|
379
379
|
min: 0,
|
|
@@ -382,7 +382,7 @@ var C = [
|
|
|
382
382
|
},
|
|
383
383
|
{
|
|
384
384
|
name: "C muted",
|
|
385
|
-
token: "--
|
|
385
|
+
token: "--n-env-chroma-k-muted",
|
|
386
386
|
value: .125,
|
|
387
387
|
step: .01,
|
|
388
388
|
min: 0,
|
|
@@ -391,7 +391,7 @@ var C = [
|
|
|
391
391
|
},
|
|
392
392
|
{
|
|
393
393
|
name: "C vivid",
|
|
394
|
-
token: "--
|
|
394
|
+
token: "--n-env-chroma-k-vivid",
|
|
395
395
|
value: 1,
|
|
396
396
|
step: .01,
|
|
397
397
|
min: 0,
|
|
@@ -400,7 +400,7 @@ var C = [
|
|
|
400
400
|
},
|
|
401
401
|
{
|
|
402
402
|
name: "C edge",
|
|
403
|
-
token: "--
|
|
403
|
+
token: "--n-env-chroma-k-edge",
|
|
404
404
|
value: .05,
|
|
405
405
|
step: .01,
|
|
406
406
|
min: 0,
|
|
@@ -409,7 +409,7 @@ var C = [
|
|
|
409
409
|
},
|
|
410
410
|
{
|
|
411
411
|
name: "Alpha",
|
|
412
|
-
token: "--
|
|
412
|
+
token: "--n-env-alpha",
|
|
413
413
|
value: .85,
|
|
414
414
|
step: .01,
|
|
415
415
|
min: 0,
|
|
@@ -418,7 +418,7 @@ var C = [
|
|
|
418
418
|
},
|
|
419
419
|
{
|
|
420
420
|
name: "A delta",
|
|
421
|
-
token: "--
|
|
421
|
+
token: "--n-env-alpha-delta",
|
|
422
422
|
value: .02,
|
|
423
423
|
step: .005,
|
|
424
424
|
min: 0,
|
|
@@ -483,20 +483,20 @@ var C = [
|
|
|
483
483
|
];
|
|
484
484
|
function F(e, t) {
|
|
485
485
|
let n = document.createElement("div");
|
|
486
|
-
n.className = "
|
|
486
|
+
n.className = "native-tokens-section", t && (n.dataset.family = t);
|
|
487
487
|
let r = document.createElement("h3");
|
|
488
|
-
return r.className = "
|
|
488
|
+
return r.className = "native-tokens-heading", r.textContent = e, n.appendChild(r), n;
|
|
489
489
|
}
|
|
490
490
|
function I(e) {
|
|
491
491
|
let t = document.createElement("h4");
|
|
492
|
-
return t.className = "
|
|
492
|
+
return t.className = "native-tokens-subheading", t.textContent = e, t;
|
|
493
493
|
}
|
|
494
494
|
function L(e) {
|
|
495
|
-
let t = document.createElement("
|
|
495
|
+
let t = document.createElement("native-tokens-colors");
|
|
496
496
|
return t.setAttribute("data", JSON.stringify(e)), t;
|
|
497
497
|
}
|
|
498
498
|
function R(e) {
|
|
499
|
-
let t = document.createElement("
|
|
499
|
+
let t = document.createElement("native-tokens-variable");
|
|
500
500
|
return t.setAttribute("data", JSON.stringify({
|
|
501
501
|
name: e.name,
|
|
502
502
|
type: "number",
|
|
@@ -509,8 +509,8 @@ function R(e) {
|
|
|
509
509
|
}
|
|
510
510
|
function z(e) {
|
|
511
511
|
let t = document.createElement("div");
|
|
512
|
-
t.className = "
|
|
513
|
-
let n = document.createElement("
|
|
512
|
+
t.className = "native-tokens-toolbar";
|
|
513
|
+
let n = document.createElement("native-tokens-themes");
|
|
514
514
|
n.setAttribute("data", JSON.stringify(D)), t.appendChild(n);
|
|
515
515
|
let r = [{
|
|
516
516
|
value: "all",
|
|
@@ -518,7 +518,7 @@ function z(e) {
|
|
|
518
518
|
}, ...k.map((e) => ({
|
|
519
519
|
value: e,
|
|
520
520
|
label: e.charAt(0).toUpperCase() + e.slice(1)
|
|
521
|
-
}))], i = document.createElement("
|
|
521
|
+
}))], i = document.createElement("n-select");
|
|
522
522
|
i.setAttribute("size", "xs"), i.setAttribute("placeholder", "Family..."), i.setAttribute("options", JSON.stringify(r)), i.setAttribute("value", "all"), t.appendChild(i), e.appendChild(t);
|
|
523
523
|
let a = "", o = null;
|
|
524
524
|
for (let t of O) t.group !== a && (a = t.group, o = F(t.group, "env"), e.appendChild(o)), o.appendChild(R(t));
|
|
@@ -526,21 +526,21 @@ function z(e) {
|
|
|
526
526
|
let n = F(t.charAt(0).toUpperCase() + t.slice(1), t);
|
|
527
527
|
n.appendChild(R({
|
|
528
528
|
name: "Hue",
|
|
529
|
-
token: `--
|
|
529
|
+
token: `--n-env-hue-${t}`,
|
|
530
530
|
value: 230,
|
|
531
531
|
step: 1,
|
|
532
532
|
min: 0,
|
|
533
533
|
max: 360
|
|
534
534
|
})), n.appendChild(R({
|
|
535
535
|
name: "Chroma",
|
|
536
|
-
token: `--
|
|
536
|
+
token: `--n-env-chroma-${t}`,
|
|
537
537
|
value: .5,
|
|
538
538
|
step: .01,
|
|
539
539
|
min: 0,
|
|
540
540
|
max: 1
|
|
541
541
|
})), n.appendChild(R({
|
|
542
542
|
name: "Lightness",
|
|
543
|
-
token: `--
|
|
543
|
+
token: `--n-env-lightness-${t}`,
|
|
544
544
|
value: .5,
|
|
545
545
|
step: .01,
|
|
546
546
|
min: 0,
|
|
@@ -571,18 +571,18 @@ function z(e) {
|
|
|
571
571
|
token: `--${t}-scrim-shade-${e}`
|
|
572
572
|
})))), e.appendChild(n);
|
|
573
573
|
}
|
|
574
|
-
i.addEventListener("
|
|
575
|
-
let n = t.detail.value, r = e.querySelectorAll(".
|
|
574
|
+
i.addEventListener("native:change", ((t) => {
|
|
575
|
+
let n = t.detail.value, r = e.querySelectorAll(".native-tokens-section[data-family]");
|
|
576
576
|
for (let e of r) {
|
|
577
577
|
let t = e.dataset.family;
|
|
578
578
|
n === "all" || t === "env" ? e.hidden = !1 : e.hidden = t !== n;
|
|
579
579
|
}
|
|
580
580
|
requestAnimationFrame(() => {
|
|
581
|
-
e.querySelectorAll("
|
|
581
|
+
e.querySelectorAll("native-tokens-colors").forEach((e) => e.refresh());
|
|
582
582
|
});
|
|
583
|
-
})), e.addEventListener("
|
|
583
|
+
})), e.addEventListener("native-tokens-theme-change", () => {
|
|
584
584
|
requestAnimationFrame(() => {
|
|
585
|
-
e.querySelectorAll("
|
|
585
|
+
e.querySelectorAll("native-tokens-variable").forEach((e) => e.sync());
|
|
586
586
|
});
|
|
587
587
|
});
|
|
588
588
|
}
|
|
@@ -590,12 +590,12 @@ function z(e) {
|
|
|
590
590
|
* Self-contained design system token inspector.
|
|
591
591
|
*
|
|
592
592
|
* Stamps the full color/variable inspector UI on connection.
|
|
593
|
-
* Consumer usage: `<
|
|
593
|
+
* Consumer usage: `<native-tokens></native-tokens>`.
|
|
594
594
|
*
|
|
595
|
-
* All `
|
|
595
|
+
* All `native-tokens-*` sub-elements are registered by the `@nonoun/native-tokens`
|
|
596
596
|
* entry point as a side effect of import.
|
|
597
597
|
*/
|
|
598
|
-
var B = class extends
|
|
598
|
+
var B = class extends o {
|
|
599
599
|
setup() {
|
|
600
600
|
super.setup(), z(this);
|
|
601
601
|
}
|
|
@@ -603,5 +603,5 @@ var B = class extends t {
|
|
|
603
603
|
this.innerHTML = "", super.teardown();
|
|
604
604
|
}
|
|
605
605
|
};
|
|
606
|
-
s("
|
|
607
|
-
export { B as
|
|
606
|
+
s("native-tokens", B), s("native-tokens-variable", l), s("native-tokens-colors", u), s("native-tokens-color-swatch", w), s("native-tokens-themes", E), s("n-range", i), s("n-select", a), s("n-button", e), s("n-icon", t), s("n-listbox", n), s("n-option", r);
|
|
607
|
+
export { B as NTokens, w as NTokensColorSwatch, u as NTokensColors, E as NTokensThemes, l as NTokensVariable, z as buildTokens };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare class
|
|
1
|
+
import { NativeElement } from '@nonoun/native-ui';
|
|
2
|
+
export declare class NTokensColorSwatch extends NativeElement {
|
|
3
3
|
#private;
|
|
4
4
|
static observedAttributes: string[];
|
|
5
5
|
get token(): string;
|
|
@@ -12,4 +12,4 @@ export declare class NuiTokensColorSwatch extends UIElement {
|
|
|
12
12
|
/** Refresh background and contrast from current token value. */
|
|
13
13
|
refresh(): void;
|
|
14
14
|
}
|
|
15
|
-
//# sourceMappingURL=
|
|
15
|
+
//# sourceMappingURL=tokens-color-swatch-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-color-swatch-element.d.ts","sourceRoot":"","sources":["../src/tokens-color-swatch-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAO,MAAM,mBAAmB,CAAC;AA8IvD,qBAAa,kBAAmB,SAAQ,aAAa;;IACnD,MAAM,CAAC,kBAAkB,WAAqB;IAM9C,IAAI,KAAK,IAAI,MAAM,CAA6C;IAChE,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAAsC;IAE3D,IAAI,IAAI,IAAI,MAAM,CAA4C;IAC9D,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAAqC;IAEzD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAapF,KAAK,IAAI,IAAI;IAqCb,QAAQ,IAAI,IAAI;IAUhB,gEAAgE;IAChE,OAAO,IAAI,IAAI;CAsEhB"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface
|
|
1
|
+
import { NativeElement } from '@nonoun/native-ui';
|
|
2
|
+
export interface NTokensColorEntry {
|
|
3
3
|
name: string;
|
|
4
4
|
token: string;
|
|
5
5
|
}
|
|
6
|
-
export declare class
|
|
6
|
+
export declare class NTokensColors extends NativeElement {
|
|
7
7
|
#private;
|
|
8
8
|
static observedAttributes: string[];
|
|
9
9
|
attributeChangedCallback(name: string, old: string | null, val: string | null): void;
|
|
@@ -11,4 +11,4 @@ export declare class NuiTokensColors extends UIElement {
|
|
|
11
11
|
teardown(): void;
|
|
12
12
|
refresh(): void;
|
|
13
13
|
}
|
|
14
|
-
//# sourceMappingURL=
|
|
14
|
+
//# sourceMappingURL=tokens-colors-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-colors-element.d.ts","sourceRoot":"","sources":["../src/tokens-colors-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,aAAc,SAAQ,aAAa;;IAC9C,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAab,QAAQ,IAAI,IAAI;IAWhB,OAAO,IAAI,IAAI;CAuBhB"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { NativeElement } from '@nonoun/native-ui';
|
|
2
|
+
/**
|
|
3
|
+
* Self-contained design system token inspector.
|
|
4
|
+
*
|
|
5
|
+
* Stamps the full color/variable inspector UI on connection.
|
|
6
|
+
* Consumer usage: `<native-tokens></native-tokens>`.
|
|
7
|
+
*
|
|
8
|
+
* All `native-tokens-*` sub-elements are registered by the `@nonoun/native-tokens`
|
|
9
|
+
* entry point as a side effect of import.
|
|
10
|
+
*/
|
|
11
|
+
export declare class NTokens extends NativeElement {
|
|
12
|
+
setup(): void;
|
|
13
|
+
teardown(): void;
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=tokens-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-element.d.ts","sourceRoot":"","sources":["../src/tokens-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD;;;;;;;;GAQG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,KAAK,IAAI,IAAI;IAKb,QAAQ,IAAI,IAAI;CAIjB"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface
|
|
1
|
+
import { NativeElement } from '@nonoun/native-ui';
|
|
2
|
+
export interface NTokensThemeEntry {
|
|
3
3
|
name: string;
|
|
4
4
|
value: string;
|
|
5
5
|
}
|
|
6
|
-
export declare class
|
|
6
|
+
export declare class NTokensThemes extends NativeElement {
|
|
7
7
|
#private;
|
|
8
8
|
static observedAttributes: string[];
|
|
9
9
|
attributeChangedCallback(name: string, old: string | null, val: string | null): void;
|
|
10
10
|
setup(): void;
|
|
11
11
|
teardown(): void;
|
|
12
12
|
}
|
|
13
|
-
//# sourceMappingURL=
|
|
13
|
+
//# sourceMappingURL=tokens-themes-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-themes-element.d.ts","sourceRoot":"","sources":["../src/tokens-themes-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAeD,qBAAa,aAAc,SAAQ,aAAa;;IAC9C,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;CA8CjB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface
|
|
1
|
+
import { NativeElement } from '@nonoun/native-ui';
|
|
2
|
+
export interface NTokensVariableData {
|
|
3
3
|
name: string;
|
|
4
4
|
type: 'number';
|
|
5
5
|
token: string;
|
|
@@ -8,7 +8,7 @@ export interface NuiTokensVariableData {
|
|
|
8
8
|
min?: number;
|
|
9
9
|
max?: number;
|
|
10
10
|
}
|
|
11
|
-
export declare class
|
|
11
|
+
export declare class NTokensVariable extends NativeElement {
|
|
12
12
|
#private;
|
|
13
13
|
static observedAttributes: string[];
|
|
14
14
|
attributeChangedCallback(name: string, old: string | null, val: string | null): void;
|
|
@@ -16,4 +16,4 @@ export declare class NuiTokensVariable extends UIElement {
|
|
|
16
16
|
teardown(): void;
|
|
17
17
|
sync(): void;
|
|
18
18
|
}
|
|
19
|
-
//# sourceMappingURL=
|
|
19
|
+
//# sourceMappingURL=tokens-variable-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens-variable-element.d.ts","sourceRoot":"","sources":["../src/tokens-variable-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,eAAgB,SAAQ,aAAa;;IAChD,MAAM,CAAC,kBAAkB,WAAY;IAMrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAWb,QAAQ,IAAI,IAAI;IAYhB,IAAI,IAAI,IAAI;CA8Db"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nonoun/native-tokens",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "OKLCH color token inspector for @nonoun/native-ui",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"scripts": {
|
|
27
27
|
"build": "npm run build:js && npm run build:css && npm run build:types",
|
|
28
28
|
"build:js": "vite build",
|
|
29
|
-
"build:css": "cp src/
|
|
29
|
+
"build:css": "cp src/tokens.css dist/native-tokens.css",
|
|
30
30
|
"build:types": "tsc -p tsconfig.build.json"
|
|
31
31
|
},
|
|
32
32
|
"publishConfig": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"nui-tokens-color-swatch-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-color-swatch-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAO,MAAM,mBAAmB,CAAC;AA8InD,qBAAa,oBAAqB,SAAQ,SAAS;;IACjD,MAAM,CAAC,kBAAkB,WAAqB;IAM9C,IAAI,KAAK,IAAI,MAAM,CAA6C;IAChE,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAAsC;IAE3D,IAAI,IAAI,IAAI,MAAM,CAA4C;IAC9D,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAAqC;IAEzD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAapF,KAAK,IAAI,IAAI;IAqCb,QAAQ,IAAI,IAAI;IAUhB,gEAAgE;IAChE,OAAO,IAAI,IAAI;CAsEhB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"nui-tokens-colors-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-colors-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,eAAgB,SAAQ,SAAS;;IAC5C,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAab,QAAQ,IAAI,IAAI;IAWhB,OAAO,IAAI,IAAI;CAuBhB"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { UIElement } from '@nonoun/native-ui';
|
|
2
|
-
/**
|
|
3
|
-
* Self-contained design system token inspector.
|
|
4
|
-
*
|
|
5
|
-
* Stamps the full color/variable inspector UI on connection.
|
|
6
|
-
* Consumer usage: `<nui-tokens></nui-tokens>`.
|
|
7
|
-
*
|
|
8
|
-
* All `nui-tokens-*` sub-elements are registered by the `@nonoun/native-tokens`
|
|
9
|
-
* entry point as a side effect of import.
|
|
10
|
-
*/
|
|
11
|
-
export declare class NuiTokens extends UIElement {
|
|
12
|
-
setup(): void;
|
|
13
|
-
teardown(): void;
|
|
14
|
-
}
|
|
15
|
-
//# sourceMappingURL=nui-tokens-element.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"nui-tokens-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAG9C;;;;;;;;GAQG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,KAAK,IAAI,IAAI;IAKb,QAAQ,IAAI,IAAI;CAIjB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"nui-tokens-themes-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-themes-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAeD,qBAAa,eAAgB,SAAQ,SAAS;;IAC5C,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;CA8CjB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"nui-tokens-variable-element.d.ts","sourceRoot":"","sources":["../src/nui-tokens-variable-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,iBAAkB,SAAQ,SAAS;;IAC9C,MAAM,CAAC,kBAAkB,WAAY;IAMrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAWb,QAAQ,IAAI,IAAI;IAYhB,IAAI,IAAI,IAAI;CA8Db"}
|