@uiw/react-json-view 2.0.0-alpha.11 → 2.0.0-alpha.12
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/README.md +18 -4
- package/cjs/theme/basic.js +2 -0
- package/esm/theme/basic.js +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -147,6 +147,7 @@ const object = {
|
|
|
147
147
|
const customTheme = {
|
|
148
148
|
'--w-rjv-font-family': 'monospace',
|
|
149
149
|
'--w-rjv-color': '#9cdcfe',
|
|
150
|
+
'--w-rjv-key-number': '#268bd2',
|
|
150
151
|
'--w-rjv-key-string': '#9cdcfe',
|
|
151
152
|
'--w-rjv-background-color': '#1e1e1e',
|
|
152
153
|
'--w-rjv-line-color': '#36334280',
|
|
@@ -160,6 +161,7 @@ const customTheme = {
|
|
|
160
161
|
'--w-rjv-curlybraces-color': '#d4d4d4',
|
|
161
162
|
'--w-rjv-colon-color': '#d4d4d4',
|
|
162
163
|
'--w-rjv-brackets-color': '#d4d4d4',
|
|
164
|
+
'--w-rjv-ellipsis-color': '#cb4b16',
|
|
163
165
|
'--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
|
|
164
166
|
'--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
|
|
165
167
|
|
|
@@ -217,6 +219,7 @@ const object = {
|
|
|
217
219
|
}
|
|
218
220
|
const customTheme = {
|
|
219
221
|
'--w-rjv-color': '#9cdcfe',
|
|
222
|
+
'--w-rjv-key-number': '#268bd2',
|
|
220
223
|
'--w-rjv-key-string': '#9cdcfe',
|
|
221
224
|
'--w-rjv-background-color': '#1e1e1e',
|
|
222
225
|
'--w-rjv-line-color': '#36334280',
|
|
@@ -230,6 +233,7 @@ const customTheme = {
|
|
|
230
233
|
'--w-rjv-curlybraces-color': '#d4d4d4',
|
|
231
234
|
'--w-rjv-colon-color': '#d4d4d4',
|
|
232
235
|
'--w-rjv-brackets-color': '#d4d4d4',
|
|
236
|
+
'--w-rjv-ellipsis-color': '#cb4b16',
|
|
233
237
|
'--w-rjv-quotes-color': '#9cdcfe',
|
|
234
238
|
'--w-rjv-quotes-string-color': '#ce9178',
|
|
235
239
|
|
|
@@ -279,21 +283,31 @@ export default function Demo() {
|
|
|
279
283
|
/>
|
|
280
284
|
<div>
|
|
281
285
|
<Colorful color={hex} onChange={onChange} />
|
|
282
|
-
<div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column' }}>
|
|
286
|
+
<div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column', ...customTheme }}>
|
|
283
287
|
{Object.keys(customTheme).map((varname, idx) => {
|
|
284
288
|
const click = () => {
|
|
285
289
|
setCssvar(varname);
|
|
286
290
|
setHex(customTheme[varname]);
|
|
287
291
|
};
|
|
288
292
|
const active = cssvar === varname ? '#a8a8a8' : '';
|
|
289
|
-
return
|
|
293
|
+
return (
|
|
294
|
+
<button key={idx}
|
|
295
|
+
style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000', display: 'flex', alignItems: 'center', gap: 5, padding: '1px 3px' }}
|
|
296
|
+
onClick={click}
|
|
297
|
+
>
|
|
298
|
+
<span style={{ display: 'inline-block', width: 12, height: 12, background: `var(${varname})` }}></span>
|
|
299
|
+
{varname}
|
|
300
|
+
</button>
|
|
301
|
+
)
|
|
290
302
|
})}
|
|
291
303
|
</div>
|
|
292
304
|
</div>
|
|
293
305
|
</div>
|
|
294
|
-
<
|
|
306
|
+
<div>
|
|
295
307
|
Copy the theme configuration below into your project.
|
|
296
|
-
|
|
308
|
+
</div>
|
|
309
|
+
<pre style={{ padding: 10 }}>
|
|
310
|
+
{JSON.stringify(theme, null, 2)}
|
|
297
311
|
</pre>
|
|
298
312
|
</React.Fragment>
|
|
299
313
|
);
|
package/cjs/theme/basic.js
CHANGED
|
@@ -7,6 +7,7 @@ exports.basicTheme = void 0;
|
|
|
7
7
|
var basicTheme = exports.basicTheme = {
|
|
8
8
|
'--w-rjv-font-family': 'monospace',
|
|
9
9
|
'--w-rjv-color': '#b5bd68',
|
|
10
|
+
'--w-rjv-key-number': '#002b36',
|
|
10
11
|
'--w-rjv-key-string': '#b5bd68',
|
|
11
12
|
'--w-rjv-background-color': '#2E3235',
|
|
12
13
|
'--w-rjv-line-color': '#292d30',
|
|
@@ -19,6 +20,7 @@ var basicTheme = exports.basicTheme = {
|
|
|
19
20
|
'--w-rjv-curlybraces-color': '#cc99cc',
|
|
20
21
|
'--w-rjv-colon-color': '#bababa',
|
|
21
22
|
'--w-rjv-brackets-color': '#808080',
|
|
23
|
+
'--w-rjv-ellipsis-color': '#cb4b16',
|
|
22
24
|
'--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
|
|
23
25
|
'--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
|
|
24
26
|
'--w-rjv-type-string-color': '#b5bd68',
|
package/esm/theme/basic.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export var basicTheme = {
|
|
2
2
|
'--w-rjv-font-family': 'monospace',
|
|
3
3
|
'--w-rjv-color': '#b5bd68',
|
|
4
|
+
'--w-rjv-key-number': '#002b36',
|
|
4
5
|
'--w-rjv-key-string': '#b5bd68',
|
|
5
6
|
'--w-rjv-background-color': '#2E3235',
|
|
6
7
|
'--w-rjv-line-color': '#292d30',
|
|
@@ -13,6 +14,7 @@ export var basicTheme = {
|
|
|
13
14
|
'--w-rjv-curlybraces-color': '#cc99cc',
|
|
14
15
|
'--w-rjv-colon-color': '#bababa',
|
|
15
16
|
'--w-rjv-brackets-color': '#808080',
|
|
17
|
+
'--w-rjv-ellipsis-color': '#cb4b16',
|
|
16
18
|
'--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
|
|
17
19
|
'--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
|
|
18
20
|
'--w-rjv-type-string-color': '#b5bd68',
|