Skip to content

Commit 3ea6f07

Browse files
redgoose-devredgoose-dev
committed
#30 스타일시트 조정
1 parent 2fa7efd commit 3ea6f07

File tree

10 files changed

+135
-110
lines changed

10 files changed

+135
-110
lines changed

‎docs/assets/index-46cb0c70.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

docs/assets/index-973cb9cc.js renamed to docs/assets/index-4a1f885e.js

File renamed without changes.

‎docs/assets/index-6eab775a.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
<link rel="shortcut icon" href="./favicon.ico">
1919
<link rel="icon" type="image/x-icon" href="./images/json-editor-icon.png">
2020

21-
<script type="module" crossorigin src="./assets/index-973cb9cc.js"></script>
22-
<link rel="stylesheet" href="./assets/index-46cb0c70.css">
21+
<script type="module" crossorigin src="./assets/index-4a1f885e.js"></script>
22+
<link rel="stylesheet" href="./assets/index-6eab775a.css">
2323
</head>
2424
<body ontouchstart="">
2525
<main id="app"></main>

‎lib/json-editor.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@redgoose/json-editor",
33
"description": "Easy editing JSON data",
44
"author": "redgoose <[email protected]>",
5-
"version": "1.0.3",
5+
"version": "1.0.4",
66
"keywords": [ "json", "editor", "library", "tool" ],
77
"license": "MIT",
88
"main": "./lib/json-editor.js",

‎src/dev/main.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
--dev-editor-color-bg: #fff;
7575
background: var(--dev-editor-color-bg);
7676
@media (prefers-color-scheme: dark) {
77-
--dev-editor-color-bg: #333;
77+
--dev-editor-color-bg: #222;
7878
}
7979
&--light {
8080
--dev-editor-color-bg: #fff;
@@ -87,7 +87,7 @@
8787
}
8888
&__body {
8989
min-height: 120px;
90-
padding: 16px;
90+
padding: 24px;
9191
box-sizing: border-box;
9292
}
9393
}
@@ -99,7 +99,7 @@
9999
}
100100
&__body {
101101
min-height: 120px;
102-
padding: 16px;
102+
padding: 24px;
103103
box-sizing: border-box;
104104
margin: 0;
105105
font-size: 12px;

‎src/json-editor/assets/context.scss‎

Lines changed: 17 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
1-
// context
2-
31
@use 'mixins';
42

3+
// context
54
.context {
6-
--context-border-radius: 4px;
7-
--context-color-line: hsl(0 0% 88%);
8-
--context-color-item-active: hsl(0 0% 92%);
9-
--context-color-bg: hsl(0 0% 100%);
10-
--context-shadow:
11-
0 4px 36px 0 hsla(0 0% 0% / 12%),
12-
0 2px 12px 0 hsla(0 0% 0% / 20%),
13-
0 0 0 1px hsla(0 0% 0% / 8%);
145
position: absolute;
156
top: -8px;
16-
right: -8px;
7+
right: -6px;
178
z-index: 2;
189
&.is-root {
1910
left: 28px;
@@ -24,8 +15,8 @@
2415
margin: 0;
2516
padding: 0;
2617
list-style: none;
27-
background: var(--context-color-line);
28-
border-radius: var(--context-border-radius);
18+
background: var(--context-color-inner);
19+
border-radius: var(--context-radius);
2920
box-shadow: var(--context-shadow);
3021
}
3122
li {
@@ -34,12 +25,12 @@
3425
margin-top: 1px;
3526
}
3627
&:first-child > button {
37-
border-top-left-radius: var(--context-border-radius);
38-
border-top-right-radius: var(--context-border-radius);
28+
border-top-left-radius: var(--context-radius);
29+
border-top-right-radius: var(--context-radius);
3930
}
4031
&:last-child > button {
41-
border-bottom-left-radius: var(--context-border-radius);
42-
border-bottom-right-radius: var(--context-border-radius);
32+
border-bottom-left-radius: var(--context-radius);
33+
border-bottom-right-radius: var(--context-radius);
4334
}
4435
> div {
4536
> ol {}
@@ -59,7 +50,7 @@
5950
&:hover,
6051
&:focus-within {
6152
> button {
62-
background-color: var(--context-color-item-active);
53+
background-color: var(--context-color-active);
6354
}
6455
> .children {
6556
opacity: 1;
@@ -72,7 +63,7 @@
7263
}
7364
&.remove {
7465
.label {
75-
color: var(--json-editor-color-error);
66+
color: var(--context-color-remove);
7667
}
7768
}
7869
}
@@ -89,18 +80,19 @@
8980
cursor: pointer;
9081
border-radius: 0;
9182
transition: background-color 120ms ease-out;
92-
font-family: var(--json-editor-font-base);
9383
font-size: 12px;
9484
letter-spacing: -.25px;
9585
outline: none;
96-
color: var(--json-editor-color-base);
86+
color: var(--context-color-text);
9787
-webkit-tap-highlight-color: transparent;
9888
&:hover,
9989
&:active {
100-
background-color: var(--context-color-item-active);
90+
&:not(:disabled) {
91+
background-color: var(--context-color-active);
92+
}
10193
}
10294
&:not(.parent):focus-visible {
103-
outline: 2px solid var(--json-editor-color-focus);
95+
outline: 2px solid var(--color-focus);
10496
outline-offset: -2px;
10597
}
10698
&:disabled {
@@ -124,6 +116,8 @@
124116
svg {
125117
display: block;
126118
width: 16px;
119+
color: var(--color-bullet);
120+
stroke-width: 1.5;
127121
}
128122
}
129123
.children {
@@ -140,16 +134,3 @@
140134
}
141135
}
142136
}
143-
144-
// dark mode
145-
@include mixins.dark-mode() {
146-
.context {
147-
--context-color-line: hsl(0 0% 0%);
148-
--context-color-bg: hsl(0 0% 16%);
149-
--context-color-item-active: hsl(0 0% 24%);
150-
--context-shadow:
151-
0 4px 36px 0 hsla(0 0% 0% / 24%),
152-
0 2px 8px 0 hsla(0 0% 0% / 32%),
153-
0 0 0 1px hsla(0 0% 0% / 20%);
154-
}
155-
}

‎src/json-editor/assets/main.scss‎

Lines changed: 74 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,54 @@
11
@use 'mixins';
22

33
.json-editor {
4-
--json-editor-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
5-
--json-editor-color-base: hsl(0 0% 13%);
6-
--json-editor-color-blur: hsl(0 0% 67%);
7-
--json-editor-color-object: hsl(168 73% 43%);
8-
--json-editor-color-array: hsl(191 75% 53%);
9-
--json-editor-color-string: hsl(5 87% 59%);
10-
--json-editor-color-number: hsl(33 89% 55%);
11-
--json-editor-color-boolean: hsl(45 89% 54%);
12-
--json-editor-color-null: hsl(0 0% 58%);
13-
--json-editor-color-active: hsla(0 0% 0% / 6%);
14-
--json-editor-color-focus: hsl(10, 95%, 54%);
15-
--json-editor-color-error: hsl(0 96% 52%);
16-
17-
font-family: var(--json-editor-font-base);
18-
color: var(--json-editor-color-base);
4+
--font-base: var(--json-editor-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
5+
--font-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
6+
7+
// basic colors
8+
--color-base: var(--json-editor-color-base, hsl(0 0% 13%));
9+
--color-input-empty: var(--json-editor-color-input-empty, hsl(0 0% 78%));
10+
--color-input-hover: var(--json-editor-color-input-active, hsla(0 0% 0% / 6%));
11+
--color-focus: var(--json-editor-color-focus, hsl(10, 95%, 54%));
12+
--color-count: var(--json-editor-color-count, hsl(0 0% 67%));
13+
--color-bullet: var(--json-editor-color-bullet, hsl(0 0% 13%));
14+
--color-tree: var(--json-editor-color-tree, hsl(0 0% 67%));
15+
--color-null: var(--json-editor-color-null, hsl(0 0% 72%));
16+
17+
// types
18+
--object: var(--json-editor-object, hsl(168 73% 43%));
19+
--array: var(--json-editor-array, hsl(191 75% 53%));
20+
--string: var(--json-editor-string, hsl(5 87% 59%));
21+
--number: var(--json-editor-number, hsl(33 89% 55%));
22+
--boolean: var(--json-editor-boolean, hsl(45 89% 54%));
23+
--null: var(--json-editor-null, hsl(0 0% 58%));
24+
25+
// drag
26+
--color-drag-target-bg: var(--json-editor-color-drag-target-bg, hsla(0 0% 0% / 6%));
27+
--color-drag-line: var(--json-editor-color-drag-line, hsl(0 0% 65%));
28+
29+
// switch
30+
--switch-bg: var(--json-editor-switch-bg, hsla(0 0% 100% / 0%));
31+
--switch-outline: var(--json-editor-switch-outline, hsl(0 0% 67%));
32+
--switch-outline-active: var(--json-editor-switch-outline-active, hsla(0 0% 67% / 50%));
33+
--switch-ball: var(--json-editor-switch-ball, hsl(0 0% 56%));
34+
--switch-ball-active: var(--json-editor-switch-ball-active, hsl(0 0% 13%));
35+
36+
// context
37+
--context-color-bg: var(--json-editor-context-color-bg, hsl(0 0% 100%));
38+
--context-color-inner: var(--json-editor-context-color-inner, hsl(0 0% 88%));
39+
--context-color-active: var(--json-editor-context-color-active, hsl(0 0% 92%));
40+
--context-color-remove: var(--json-editor-context-color-remove, hsl(0 96% 52%));
41+
--context-color-text: var(--json-editor-context-color-text, hsl(0 0% 13%));
42+
--context-color-bullet: var(--json-editor-context-color-bullet, hsl(0 0% 13%));
43+
--context-shadow: var(--json-editor-context-shadow, 0 4px 36px 0 hsla(0 0% 0% / 12%), 0 2px 12px 0 hsla(0 0% 0% / 20%), 0 0 0 1px hsla(0 0% 0% / 8%));
44+
--context-radius: var(--json-editor-radius, 2px);
45+
46+
color: var(--color-base);
1947
font-size: 16px;
2048
line-height: 1.15;
49+
&, button, input, select {
50+
font-family: var(--font-base);
51+
}
2152
> ul {
2253
position: relative;
2354
margin: -4px 0;
@@ -33,11 +64,34 @@
3364
}
3465
}
3566
@include mixins.dark-mode(true) {
36-
--json-editor-color-base: hsl(0 0% 95%);
37-
--json-editor-color-blur: hsl(0 0% 72%);
38-
--json-editor-color-active: hsla(0 0% 100% / 15%);
39-
--json-editor-color-error: hsl(0, 100%, 60%);
40-
--json-editor-color-focus: hsl(161, 94%, 55%);
67+
// basic colors
68+
--color-base: var(--json-editor-color-base, hsl(0 0% 92%));
69+
--color-input-empty: var(--json-editor-color-input-empty, hsl(0 0% 48%));
70+
--color-input-hover: var(--json-editor-color-input-active, hsla(0 0% 100% / 12%));
71+
--color-count: var(--json-editor-color-count, hsl(0 0% 56%));
72+
--color-bullet: var(--json-editor-color-bullet, hsl(0 0% 92%));
73+
--color-tree: var(--json-editor-color-tree, hsl(0 0% 42%));
74+
--color-null: var(--json-editor-color-null, hsl(0 0% 48%));
75+
76+
// drag
77+
--color-drag-target-bg: var(--json-editor-color-drag-target-bg, hsla(0 0% 100% / 8%));
78+
--color-drag-line: var(--json-editor-color-drag-line, hsl(0 0% 75%));
79+
80+
// switch
81+
--switch-bg: var(--json-editor-switch-bg, hsla(0 0% 0% / 0%));
82+
--switch-outline: var(--json-editor-switch-outline, hsl(0 0% 78%));
83+
--switch-outline-active: var(--json-editor-switch-outline-active, hsla(0 0% 62% / 50%));
84+
--switch-ball: var(--json-editor-switch-ball, hsl(0 0% 54%));
85+
--switch-ball-active: var(--json-editor-switch-ball-active, hsl(0 0% 100%));
86+
87+
// context
88+
--context-color-bg: var(--json-editor-context-color-bg, hsl(0 0% 24%));
89+
--context-color-inner: var(--json-editor-context-color-inner, hsl(0 0% 16%));
90+
--context-color-active: var(--json-editor-context-color-active, hsl(0 0% 36%));
91+
--context-color-remove: var(--json-editor-context-color-remove, hsl(0 98% 60%));
92+
--context-color-text: var(--json-editor-context-color-text, hsl(0 0% 92%));
93+
--context-color-bullet: var(--json-editor-context-color-bullet, hsl(0 0% 92%));
94+
--context-shadow: var(--json-editor-context-shadow, 0 4px 36px 0 hsla(0 0% 0% / 32%), 0 2px 8px 0 hsla(0 0% 0% / 52%), 0 0 0 1px hsla(0 0% 0% / 75%));
4195
}
4296

4397
@import 'node';

0 commit comments

Comments
 (0)