atomsystem 0.1.20 → 0.1.22
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/app/templates/Badge/Badge.tsx +30 -0
- package/app/templates/Card/Card.tsx +3 -1
- package/app/templates/Collapse/Collapse.tsx +115 -0
- package/app/templates/GlobalNav/GlobalNav.tsx +80 -61
- package/app/templates/Input/Input.tsx +5 -5
- package/app/templates/Modal/Modal.tsx +71 -0
- package/app/templates/Pagination/Pagination.tsx +8 -8
- package/app/templates/TOC/TOC.tsx +5 -2
- package/app/templates/Theme/Theme.tsx +1 -1
- package/app/templates/Toast/Toast.tsx +1 -1
- package/cli/add.js +4 -0
- package/package.json +3 -1
- package/token.json +264 -26
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export const Badge = ({
|
|
2
|
+
children,
|
|
3
|
+
color,
|
|
4
|
+
type,
|
|
5
|
+
className,
|
|
6
|
+
}: {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
color: "primary" | "secondary" | "warning" | "danger";
|
|
9
|
+
type?: "default" | "tint";
|
|
10
|
+
className?: string;
|
|
11
|
+
}) => {
|
|
12
|
+
switch (type) {
|
|
13
|
+
case "tint":
|
|
14
|
+
return (
|
|
15
|
+
<span
|
|
16
|
+
className={`text-sm px-1.5 rounded ${color === "primary" ? "bg-primary/20 !text-primary" : color === "secondary" ? "bg-secondary/20 !text-secondary" : color === "warning" ? "bg-warning/20 !text-warning" : color === "danger" ? "bg-danger/20 !text-danger" : null} ${className}`}
|
|
17
|
+
>
|
|
18
|
+
{children}
|
|
19
|
+
</span>
|
|
20
|
+
);
|
|
21
|
+
default:
|
|
22
|
+
return (
|
|
23
|
+
<span
|
|
24
|
+
className={`text-sm px-1.5 rounded ${color === "primary" ? "bg-primary !text-white" : color === "secondary" ? "bg-secondary !text-white" : color === "warning" ? "bg-warning !text-white" : color === "danger" ? "bg-danger !text-white" : null} ${className}`}
|
|
25
|
+
>
|
|
26
|
+
{children}
|
|
27
|
+
</span>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
@@ -4,10 +4,12 @@ export const Card = ({
|
|
|
4
4
|
children,
|
|
5
5
|
type = "standard",
|
|
6
6
|
className = "",
|
|
7
|
+
overflow = "overflow-auto",
|
|
7
8
|
}: {
|
|
8
9
|
children: React.ReactNode;
|
|
9
10
|
className?: string;
|
|
10
11
|
type?: "standard" | "group";
|
|
12
|
+
overflow?: "overflow-auto" | "overflow-hidden" | "overflow-none";
|
|
11
13
|
}) => {
|
|
12
14
|
// CardHeader와 CardContent의 존재 여부 확인
|
|
13
15
|
const hasCardContent = React.Children.toArray(children).some(
|
|
@@ -19,7 +21,7 @@ export const Card = ({
|
|
|
19
21
|
);
|
|
20
22
|
return (
|
|
21
23
|
<div
|
|
22
|
-
className={`${type == "standard" ? "bg-[var(--background-card)] border-[var(--color-border)]" : type == "group" ? "bg-[var(--background-wrapper)] border-none" : ""} ${!hasCardContent ? "p-4" : ""} rounded border ${className} overflow-auto`}
|
|
24
|
+
className={`${type == "standard" ? "bg-[var(--background-card)] border-[var(--color-border)]" : type == "group" ? "bg-[var(--background-wrapper)] border-none" : ""} ${!hasCardContent ? "p-4" : ""} rounded border ${className} ${overflow === "overflow-auto" ? `overflow-auto` : overflow === "overflow-hidden" ? "overflow-hidden" : overflow === "overflow-none" ? "" : ""}`}
|
|
23
25
|
>
|
|
24
26
|
{children}
|
|
25
27
|
</div>
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
|
|
5
|
+
export const Collapse = ({
|
|
6
|
+
type = "collapse",
|
|
7
|
+
collapses,
|
|
8
|
+
}: {
|
|
9
|
+
type?: "accordion" | "collapse";
|
|
10
|
+
collapses: { title: string; content: string }[];
|
|
11
|
+
}) => {
|
|
12
|
+
const [activeIndex, setActiveIndex] = useState<number | number[] | null>(
|
|
13
|
+
type === "collapse" ? [] : null
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
const toggleContent = (idx: number) => {
|
|
17
|
+
if (type === "accordion") {
|
|
18
|
+
setActiveIndex((prev) => (prev === idx ? null : idx));
|
|
19
|
+
} else {
|
|
20
|
+
setActiveIndex((prev) => {
|
|
21
|
+
const current = prev as number[];
|
|
22
|
+
return current.includes(idx)
|
|
23
|
+
? current.filter((i) => i !== idx) // 닫기
|
|
24
|
+
: [...current, idx]; // 열기
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const isActive = (idx: number) => {
|
|
30
|
+
return type === "accordion"
|
|
31
|
+
? activeIndex === idx
|
|
32
|
+
: (activeIndex as number[]).includes(idx);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<>
|
|
37
|
+
{collapses.map((collapse, idx) => (
|
|
38
|
+
<div key={idx}>
|
|
39
|
+
<label className="flex justify-between cursor-pointer p-4 border-t border-[var(--color-border)]">
|
|
40
|
+
{collapse.title}
|
|
41
|
+
<button
|
|
42
|
+
onClick={() => toggleContent(idx)}
|
|
43
|
+
className={`material-symbols-outlined cursor-pointer transition-all duration-300 ${
|
|
44
|
+
isActive(idx) ? "rotate-90" : "rotate-0"
|
|
45
|
+
}`}
|
|
46
|
+
>
|
|
47
|
+
keyboard_arrow_right
|
|
48
|
+
</button>
|
|
49
|
+
</label>
|
|
50
|
+
{isActive(idx) && (
|
|
51
|
+
<div className="p-4 bg-[var(--background-wrapper)] border-rounded">
|
|
52
|
+
{collapse.content}
|
|
53
|
+
</div>
|
|
54
|
+
)}
|
|
55
|
+
</div>
|
|
56
|
+
))}
|
|
57
|
+
</>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export const NodeCollapse = ({
|
|
62
|
+
type = "collapse",
|
|
63
|
+
collapses,
|
|
64
|
+
}: {
|
|
65
|
+
type?: "accordion" | "collapse";
|
|
66
|
+
collapses: { title: React.ReactNode; content: React.ReactNode }[];
|
|
67
|
+
}) => {
|
|
68
|
+
const [activeIndex, setActiveIndex] = useState<number | number[] | null>(
|
|
69
|
+
type === "collapse" ? [] : null
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
const toggleContent = (idx: number) => {
|
|
73
|
+
if (type === "accordion") {
|
|
74
|
+
setActiveIndex((prev) => (prev === idx ? null : idx));
|
|
75
|
+
} else {
|
|
76
|
+
setActiveIndex((prev) => {
|
|
77
|
+
const current = prev as number[];
|
|
78
|
+
return current.includes(idx)
|
|
79
|
+
? current.filter((i) => i !== idx) // 닫기
|
|
80
|
+
: [...current, idx]; // 열기
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const isActive = (idx: number) => {
|
|
86
|
+
return type === "accordion"
|
|
87
|
+
? activeIndex === idx
|
|
88
|
+
: (activeIndex as number[]).includes(idx);
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<>
|
|
93
|
+
{collapses.map((collapse, idx) => (
|
|
94
|
+
<div key={idx}>
|
|
95
|
+
<label className="flex justify-between cursor-pointer p-4 border-t border-[var(--color-border)]">
|
|
96
|
+
{collapse.title}
|
|
97
|
+
<button
|
|
98
|
+
onClick={() => toggleContent(idx)}
|
|
99
|
+
className={`material-symbols-outlined cursor-pointer transition-all duration-300 ${
|
|
100
|
+
isActive(idx) ? "rotate-90" : "rotate-0"
|
|
101
|
+
}`}
|
|
102
|
+
>
|
|
103
|
+
keyboard_arrow_right
|
|
104
|
+
</button>
|
|
105
|
+
</label>
|
|
106
|
+
{isActive(idx) && (
|
|
107
|
+
<div className="p-4 bg-[var(--background-wrapper)] border-rounded">
|
|
108
|
+
{collapse.content}
|
|
109
|
+
</div>
|
|
110
|
+
)}
|
|
111
|
+
</div>
|
|
112
|
+
))}
|
|
113
|
+
</>
|
|
114
|
+
);
|
|
115
|
+
};
|
|
@@ -12,8 +12,9 @@ const GlobalNav = ({
|
|
|
12
12
|
type?: "sidebar" | "topmenu" | "mobile";
|
|
13
13
|
navMenu: {
|
|
14
14
|
name: string;
|
|
15
|
-
path
|
|
15
|
+
path?: string;
|
|
16
16
|
subItems?: { name: string; path: string }[];
|
|
17
|
+
label?: boolean;
|
|
17
18
|
}[];
|
|
18
19
|
}) => {
|
|
19
20
|
const [windowSize, setWindowSize] = useState<number>(); // 초기값 설정
|
|
@@ -52,7 +53,7 @@ const GlobalNav = ({
|
|
|
52
53
|
<nav
|
|
53
54
|
className={clsx(
|
|
54
55
|
`fixed top-0 md:relative w-full bg-[var(--background-card)] text-text-standard z-20 left-0 ${toggleMenu ? "block" : "hidden"}`,
|
|
55
|
-
{ "h-full max-w-80": type == "sidebar" },
|
|
56
|
+
{ "h-full max-w-80 overflow-auto": type == "sidebar" },
|
|
56
57
|
{ "h-auto flex flex-row items-center": type == "topmenu" }
|
|
57
58
|
)}
|
|
58
59
|
>
|
|
@@ -88,77 +89,95 @@ const GlobalNav = ({
|
|
|
88
89
|
"flex flex-row": type == "topmenu",
|
|
89
90
|
})}
|
|
90
91
|
>
|
|
91
|
-
{navMenu.map((menu) => {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
className=
|
|
98
|
-
"px-4 py-2 block text-[var(--text-standard)]",
|
|
99
|
-
{
|
|
100
|
-
"text-primary":
|
|
101
|
-
menu.path == pathname ||
|
|
102
|
-
menu.subItems?.some((sub) => sub.path === pathname),
|
|
103
|
-
}
|
|
104
|
-
)}
|
|
92
|
+
{navMenu.map((menu, idx) => {
|
|
93
|
+
switch (true) {
|
|
94
|
+
case menu.label === true && type == "sidebar":
|
|
95
|
+
return (
|
|
96
|
+
<p
|
|
97
|
+
key={menu.name + idx}
|
|
98
|
+
className="px-4 text-sm text-sub mt-2 mb-0"
|
|
105
99
|
>
|
|
106
100
|
{menu.name}
|
|
107
|
-
</
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
101
|
+
</p>
|
|
102
|
+
);
|
|
103
|
+
default:
|
|
104
|
+
if (!menu.path) return null;
|
|
105
|
+
return (
|
|
106
|
+
<li className="relative group" key={menu.name}>
|
|
107
|
+
<div
|
|
108
|
+
className={clsx("flex justify-between items-center pr-4")}
|
|
112
109
|
>
|
|
113
|
-
<
|
|
110
|
+
<Link
|
|
111
|
+
href={menu.path}
|
|
114
112
|
className={clsx(
|
|
115
|
-
"
|
|
113
|
+
"px-4 py-2 block text-[var(--text-standard)]",
|
|
116
114
|
{
|
|
117
|
-
"
|
|
115
|
+
"text-primary":
|
|
116
|
+
menu.path == pathname ||
|
|
117
|
+
menu.subItems?.some(
|
|
118
|
+
(sub) => sub.path === pathname
|
|
119
|
+
),
|
|
118
120
|
}
|
|
119
121
|
)}
|
|
120
|
-
style={{ fontSize: "16px" }}
|
|
121
122
|
>
|
|
122
|
-
|
|
123
|
-
</
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
"block",
|
|
131
|
-
{
|
|
132
|
-
"hidden absolute top-[42px] group-hover:block hover:block bg-[var(--background-card)]":
|
|
133
|
-
type == "topmenu",
|
|
134
|
-
},
|
|
135
|
-
{
|
|
136
|
-
hidden: !openSubMenu[menu.name] && type == "sidebar",
|
|
137
|
-
}
|
|
138
|
-
)}
|
|
139
|
-
>
|
|
140
|
-
{menu.subItems.map((submenu) => {
|
|
141
|
-
return (
|
|
142
|
-
<li key={submenu.name}>
|
|
143
|
-
<Link
|
|
123
|
+
{menu.name}
|
|
124
|
+
</Link>
|
|
125
|
+
{menu.subItems && type == "sidebar" ? (
|
|
126
|
+
<button
|
|
127
|
+
className="cursor-pointer"
|
|
128
|
+
onClick={() => toggleSubMenu(menu.name)}
|
|
129
|
+
>
|
|
130
|
+
<span
|
|
144
131
|
className={clsx(
|
|
145
|
-
"
|
|
132
|
+
"material-symbols-outlined text-[var(--text-sub)] transition-transform",
|
|
146
133
|
{
|
|
147
|
-
"
|
|
148
|
-
}
|
|
149
|
-
{ "pl-12 ": type == "sidebar" }
|
|
134
|
+
"rotate-90": openSubMenu[menu.name],
|
|
135
|
+
}
|
|
150
136
|
)}
|
|
151
|
-
|
|
137
|
+
style={{ fontSize: "16px" }}
|
|
152
138
|
>
|
|
153
|
-
|
|
154
|
-
</
|
|
155
|
-
</
|
|
156
|
-
)
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
139
|
+
keyboard_arrow_right
|
|
140
|
+
</span>
|
|
141
|
+
</button>
|
|
142
|
+
) : null}
|
|
143
|
+
</div>
|
|
144
|
+
{menu.subItems ? (
|
|
145
|
+
<ul
|
|
146
|
+
className={clsx(
|
|
147
|
+
"block",
|
|
148
|
+
{
|
|
149
|
+
"hidden absolute top-[42px] group-hover:block hover:block bg-[var(--background-card)]":
|
|
150
|
+
type == "topmenu",
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
hidden:
|
|
154
|
+
!openSubMenu[menu.name] && type == "sidebar",
|
|
155
|
+
}
|
|
156
|
+
)}
|
|
157
|
+
>
|
|
158
|
+
{menu.subItems.map((submenu) => {
|
|
159
|
+
return (
|
|
160
|
+
<li key={submenu.name}>
|
|
161
|
+
<Link
|
|
162
|
+
className={clsx(
|
|
163
|
+
"px-4 py-2 block text-[var(--text-standard)]",
|
|
164
|
+
{
|
|
165
|
+
"text-primary": submenu.path == pathname,
|
|
166
|
+
},
|
|
167
|
+
{ "pl-12 ": type == "sidebar" }
|
|
168
|
+
)}
|
|
169
|
+
href={submenu.path}
|
|
170
|
+
>
|
|
171
|
+
{submenu.name}
|
|
172
|
+
</Link>
|
|
173
|
+
</li>
|
|
174
|
+
);
|
|
175
|
+
})}
|
|
176
|
+
</ul>
|
|
177
|
+
) : null}
|
|
178
|
+
</li>
|
|
179
|
+
);
|
|
180
|
+
}
|
|
162
181
|
})}
|
|
163
182
|
</ul>
|
|
164
183
|
</nav>
|
|
@@ -34,13 +34,13 @@ export const Input = ({
|
|
|
34
34
|
) : null}
|
|
35
35
|
<input
|
|
36
36
|
type={type}
|
|
37
|
-
className="border rounded focus:outline-none focus:ring-0 bg-[var(--input-background-standard)] disabled:bg-[var(--input-background-disabled)] disabled:cursor-not-allowed border-[var(--input-border-standard)] focus:border-[var(--input-border-focus)] "
|
|
37
|
+
className="border rounded focus:outline-none focus:ring-0 bg-[var(--input-background-standard)] disabled:bg-[var(--input-background-disabled)] disabled:cursor-not-allowed border-[var(--input-border-standard)] focus:border-[var(--input-border-focus)] w-full"
|
|
38
38
|
style={{
|
|
39
39
|
color: "var(--input-text-standard)",
|
|
40
|
-
paddingLeft: "var(--global-
|
|
41
|
-
paddingRight: "var(--global-
|
|
42
|
-
paddingTop: "var(--global-
|
|
43
|
-
paddingBottom: "var(--global-
|
|
40
|
+
paddingLeft: "var(--spacing-global-x)",
|
|
41
|
+
paddingRight: "var(--spacing-global-x)",
|
|
42
|
+
paddingTop: "var(--spacing-global-y)",
|
|
43
|
+
paddingBottom: "var(--spacing-global-y)",
|
|
44
44
|
borderRadius: "var(--input-rounded)",
|
|
45
45
|
}}
|
|
46
46
|
placeholder={placeholder}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import ReactModal from "react-modal";
|
|
4
|
+
import React, { useEffect } from "react";
|
|
5
|
+
|
|
6
|
+
type ModalProps = {
|
|
7
|
+
isOpen: boolean;
|
|
8
|
+
onRequestClose: () => void;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
modalTitle: string;
|
|
11
|
+
modalFooter: React.ReactNode;
|
|
12
|
+
size?: "normal" | "middle" | "large" | "xl" | "full" | "full-screen";
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const ModalContent = ({
|
|
16
|
+
isOpen,
|
|
17
|
+
onRequestClose,
|
|
18
|
+
children,
|
|
19
|
+
modalTitle,
|
|
20
|
+
modalFooter,
|
|
21
|
+
size = "normal",
|
|
22
|
+
}: ModalProps) => {
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
ReactModal.setAppElement("#modal-root"); // 접근성 설정
|
|
25
|
+
}, []);
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<ReactModal
|
|
29
|
+
isOpen={isOpen}
|
|
30
|
+
onRequestClose={onRequestClose}
|
|
31
|
+
shouldCloseOnEsc={true}
|
|
32
|
+
overlayClassName="fixed inset-0 bg-black/40 flex justify-center items-center z-50"
|
|
33
|
+
className={`bg-[var(--modal-background)] p-0 rounded shadow-md w-full flex flex-col ${size === "normal" ? "max-w-md" : size === "middle" ? "max-w-xl" : size === "large" ? "max-w-5xl" : size === "xl" ? "max-w-6xl" : size === "full" ? "max-w-screen" : size === "full-screen" ? "w-screen h-screen" : null}`}
|
|
34
|
+
>
|
|
35
|
+
<ModalTitle onRequestClose={onRequestClose} title={modalTitle} />
|
|
36
|
+
<div className="p-4 w-full h-full">{children}</div>
|
|
37
|
+
<ModalFooter modalFooter={modalFooter} />
|
|
38
|
+
</ReactModal>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export const Modal = () => {
|
|
43
|
+
return <div id="modal-root"></div>;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
type ModalTitleProps = {
|
|
47
|
+
title: string;
|
|
48
|
+
onRequestClose: () => void;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export const ModalTitle = ({ title, onRequestClose }: ModalTitleProps) => {
|
|
52
|
+
return (
|
|
53
|
+
<div className="flex justify-between py-3 px-4">
|
|
54
|
+
<h6>{title}</h6>
|
|
55
|
+
<button
|
|
56
|
+
onClick={onRequestClose}
|
|
57
|
+
className="material-symbols-outlined cursor-pointer"
|
|
58
|
+
>
|
|
59
|
+
close
|
|
60
|
+
</button>
|
|
61
|
+
</div>
|
|
62
|
+
);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export const ModalFooter = ({
|
|
66
|
+
modalFooter,
|
|
67
|
+
}: {
|
|
68
|
+
modalFooter: React.ReactNode;
|
|
69
|
+
}) => {
|
|
70
|
+
return <div className="flex justify-end py-3 px-4">{modalFooter}</div>;
|
|
71
|
+
};
|
|
@@ -16,16 +16,16 @@ const Pagination = ({
|
|
|
16
16
|
pageViewRange: number;
|
|
17
17
|
/** 페이지네이션을 보여줄 최대 개수정보를 받습니다. */
|
|
18
18
|
pageRange: number;
|
|
19
|
-
/**
|
|
20
|
-
totalCount
|
|
21
|
-
/**
|
|
19
|
+
/** 데이터의 총 개수를 받아 페이지당 데이터 개수로 나누어 총 페이지네이션 정보를 계산합니다. */
|
|
20
|
+
totalCount?: number;
|
|
21
|
+
/** 전체 페이지네이션의 토탈 정보를 받습니다. */
|
|
22
22
|
pageTotal?: number;
|
|
23
23
|
}) => {
|
|
24
24
|
const totalPages = pageTotal
|
|
25
25
|
? pageTotal
|
|
26
26
|
: totalCount
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
? Math.ceil(totalCount / pageViewRange)
|
|
28
|
+
: 0;
|
|
29
29
|
const [pageStart, setPageStart] = useState(1);
|
|
30
30
|
const scrollTop = () => {
|
|
31
31
|
setTimeout(() => {
|
|
@@ -34,7 +34,7 @@ const Pagination = ({
|
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
return (
|
|
37
|
-
<div className="text-[#999] flex
|
|
37
|
+
<div className="text-[#999] flex">
|
|
38
38
|
<button
|
|
39
39
|
disabled={pageStart === 1}
|
|
40
40
|
onClick={() => {
|
|
@@ -47,7 +47,7 @@ const Pagination = ({
|
|
|
47
47
|
>
|
|
48
48
|
<span className="material-symbols-outlined">keyboard_arrow_left</span>
|
|
49
49
|
</button>
|
|
50
|
-
<ul className="
|
|
50
|
+
<ul className="flex w-full">
|
|
51
51
|
{[...Array(pageRange)].map((_, i) => {
|
|
52
52
|
const page = pageStart + i;
|
|
53
53
|
|
|
@@ -74,7 +74,7 @@ const Pagination = ({
|
|
|
74
74
|
}
|
|
75
75
|
scrollTop();
|
|
76
76
|
}}
|
|
77
|
-
className={` w-full text-center py-8 cursor-pointer ${
|
|
77
|
+
className={` w-full text-center py-8 cursor-pointer px-2 ${
|
|
78
78
|
currentPage === page ? "text-primary" : ""
|
|
79
79
|
}`}
|
|
80
80
|
>
|
|
@@ -15,6 +15,9 @@ export default function TOC() {
|
|
|
15
15
|
|
|
16
16
|
useEffect(() => {
|
|
17
17
|
const timer = setTimeout(() => {
|
|
18
|
+
/**
|
|
19
|
+
* Document에서 읽히는 h1, h2, h3 태그를 array 형태로 정의
|
|
20
|
+
* */
|
|
18
21
|
const headingElements = Array.from(
|
|
19
22
|
document.querySelectorAll("h1, h2, h3")
|
|
20
23
|
) as HTMLHeadingElement[];
|
|
@@ -26,7 +29,7 @@ export default function TOC() {
|
|
|
26
29
|
heading.textContent
|
|
27
30
|
?.toLowerCase()
|
|
28
31
|
.replace(/\s+/g, "-")
|
|
29
|
-
.replace(/[^\w
|
|
32
|
+
.replace(/[^\w\-가-힣]+/g, "") ?? "";
|
|
30
33
|
}
|
|
31
34
|
|
|
32
35
|
return {
|
|
@@ -40,7 +43,7 @@ export default function TOC() {
|
|
|
40
43
|
}, 50);
|
|
41
44
|
|
|
42
45
|
return () => clearTimeout(timer);
|
|
43
|
-
}, [pathname]);
|
|
46
|
+
}, [pathname]); // 페이지 변경사항이 있다면 목차 재정의
|
|
44
47
|
|
|
45
48
|
return (
|
|
46
49
|
<nav className="space-y-2 flex flex-col">
|
|
@@ -9,7 +9,7 @@ export const ThemeSelector = ({
|
|
|
9
9
|
type: "all" | "theme" | "input";
|
|
10
10
|
}) => {
|
|
11
11
|
const themes = ["light", "dark"];
|
|
12
|
-
const [selectedTheme, setSelectedTheme] = useState<string | null>(
|
|
12
|
+
const [selectedTheme, setSelectedTheme] = useState<string | null>("light");
|
|
13
13
|
// const inputThemes = ["inputStandard", "inputCircle"];
|
|
14
14
|
// const [selectedInputTheme, setSelectedInputTheme] = useState<string | null>(
|
|
15
15
|
// null
|
|
@@ -19,7 +19,7 @@ let messages: ToastMessage[] = [];
|
|
|
19
19
|
let listener: ((messages: ToastMessage[]) => void) | null = null;
|
|
20
20
|
|
|
21
21
|
export const addToast = (msg: Omit<ToastMessage, "id">) => {
|
|
22
|
-
const id =
|
|
22
|
+
const id = Math.random().toString(36).substring(2) + Date.now().toString(36);
|
|
23
23
|
messages = [...messages, { id, ...msg }];
|
|
24
24
|
// messages 값 listener에 반영
|
|
25
25
|
listener?.(messages);
|
package/cli/add.js
CHANGED
|
@@ -16,7 +16,9 @@ const templateDir = path.join(__dirname, "..", "app", "templates");
|
|
|
16
16
|
// 사용할 수 있는 컴포넌트 목록
|
|
17
17
|
const components = [
|
|
18
18
|
"Button",
|
|
19
|
+
"Badge",
|
|
19
20
|
"Card",
|
|
21
|
+
"Collapse",
|
|
20
22
|
"CodeBlock",
|
|
21
23
|
"GlobalNav",
|
|
22
24
|
"Input",
|
|
@@ -25,6 +27,8 @@ const components = [
|
|
|
25
27
|
"Toast",
|
|
26
28
|
"Pagination",
|
|
27
29
|
"Table",
|
|
30
|
+
"Modal",
|
|
31
|
+
"TOC",
|
|
28
32
|
]; // 여기 추가할 컴포넌트 목록
|
|
29
33
|
|
|
30
34
|
// 명령어에서 컴포넌트 이름 가져오기
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "atomsystem",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.22",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"homepage": "https://system.atomground.com",
|
|
6
6
|
"bin": {
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
"next": "^15.2.4",
|
|
40
40
|
"react": "^18.0.0",
|
|
41
41
|
"react-dom": "^18.0.0",
|
|
42
|
+
"react-modal": "^3.16.3",
|
|
42
43
|
"sd-tailwindcss-transformer": "^2.0.0",
|
|
43
44
|
"style-dictionary": "^4.2.0"
|
|
44
45
|
},
|
|
@@ -46,6 +47,7 @@
|
|
|
46
47
|
"@types/node": "^20",
|
|
47
48
|
"@types/react": "^18",
|
|
48
49
|
"@types/react-dom": "^18",
|
|
50
|
+
"@types/react-modal": "^3.16.3",
|
|
49
51
|
"@vitest/browser": "^3.1.1",
|
|
50
52
|
"@vitest/coverage-v8": "^3.1.1",
|
|
51
53
|
"eslint": "^8",
|
package/token.json
CHANGED
|
@@ -1,6 +1,210 @@
|
|
|
1
1
|
{
|
|
2
2
|
"color": {
|
|
3
3
|
"primary": { "value": "#2196f3", "type": "color" },
|
|
4
|
+
"secondary": { "value": "#162c4e", "type": "color" },
|
|
5
|
+
"danger": { "value": "#ff4a4a", "type": "color" },
|
|
6
|
+
"warning": { "value": "#ffa300", "type": "color" },
|
|
7
|
+
"white": { "value": "#fafafa", "type": "color" },
|
|
8
|
+
"black": { "value": "#111111", "type": "color" },
|
|
9
|
+
|
|
10
|
+
"black-900": { "value": "#222222", "type": "color" },
|
|
11
|
+
"black-800": { "value": "#333333", "type": "color" },
|
|
12
|
+
"black-700": { "value": "#444444", "type": "color" },
|
|
13
|
+
"black-600": { "value": "#555555", "type": "color" },
|
|
14
|
+
"black-500": { "value": "#666666", "type": "color" },
|
|
15
|
+
"black-400": { "value": "#777777", "type": "color" },
|
|
16
|
+
"black-300": { "value": "#888888", "type": "color" },
|
|
17
|
+
"black-200": { "value": "#999999", "type": "color" },
|
|
18
|
+
"black-100": { "value": "#aaaaaa", "type": "color" },
|
|
19
|
+
"black-50": { "value": "#bbbbbb", "type": "color" },
|
|
20
|
+
|
|
21
|
+
"gray-900": { "value": "#cccccc", "type": "color" },
|
|
22
|
+
"gray-800": { "value": "#d4d4d4", "type": "color" },
|
|
23
|
+
"gray-700": { "value": "#dbdbdb", "type": "color" },
|
|
24
|
+
"gray-600": { "value": "#e2e2e2", "type": "color" },
|
|
25
|
+
"gray-500": { "value": "#e8e8e8", "type": "color" },
|
|
26
|
+
"gray-400": { "value": "#eeeeee", "type": "color" },
|
|
27
|
+
"gray-300": { "value": "#f2f2f2", "type": "color" },
|
|
28
|
+
"gray-200": { "value": "#f5f5f5", "type": "color" },
|
|
29
|
+
"gray-100": { "value": "#f8f8f8", "type": "color" },
|
|
30
|
+
"gray-50": { "value": "#fbfbfb", "type": "color" },
|
|
31
|
+
|
|
32
|
+
"red-900": { "value": "#b71c1c", "type": "color" },
|
|
33
|
+
"red-800": { "value": "#c62828", "type": "color" },
|
|
34
|
+
"red-700": { "value": "#d32f2f", "type": "color" },
|
|
35
|
+
"red-600": { "value": "#e53935", "type": "color" },
|
|
36
|
+
"red-500": { "value": "#f44336", "type": "color" },
|
|
37
|
+
"red-400": { "value": "#ef5350", "type": "color" },
|
|
38
|
+
"red-300": { "value": "#e57373", "type": "color" },
|
|
39
|
+
"red-200": { "value": "#ef9a9a", "type": "color" },
|
|
40
|
+
"red-100": { "value": "#ffcdd2", "type": "color" },
|
|
41
|
+
"red-50": { "value": "#ffebee", "type": "color" },
|
|
42
|
+
|
|
43
|
+
"magenta-900": { "value": "#880e4f", "type": "color" },
|
|
44
|
+
"magenta-800": { "value": "#ad1457", "type": "color" },
|
|
45
|
+
"magenta-700": { "value": "#c2185b", "type": "color" },
|
|
46
|
+
"magenta-600": { "value": "#d81b60", "type": "color" },
|
|
47
|
+
"magenta-500": { "value": "#e91e63", "type": "color" },
|
|
48
|
+
"magenta-400": { "value": "#ec407a", "type": "color" },
|
|
49
|
+
"magenta-300": { "value": "#f06292", "type": "color" },
|
|
50
|
+
"magenta-200": { "value": "#f48fb1", "type": "color" },
|
|
51
|
+
"magenta-100": { "value": "#f8bbd0", "type": "color" },
|
|
52
|
+
"magenta-50": { "value": "#fce4ec", "type": "color" },
|
|
53
|
+
|
|
54
|
+
"purple-900": { "value": "#4a148c ", "type": "color" },
|
|
55
|
+
"purple-800": { "value": "#6a1b9a", "type": "color" },
|
|
56
|
+
"purple-700": { "value": "#761fa2", "type": "color" },
|
|
57
|
+
"purple-600": { "value": "#8e24aa", "type": "color" },
|
|
58
|
+
"purple-500": { "value": "#9c27b0", "type": "color" },
|
|
59
|
+
"purple-400": { "value": "#ab47bc", "type": "color" },
|
|
60
|
+
"purple-300": { "value": "#ba68c8", "type": "color" },
|
|
61
|
+
"purple-200": { "value": "#ce93d8", "type": "color" },
|
|
62
|
+
"purple-100": { "value": "#e1bee7", "type": "color" },
|
|
63
|
+
"purple-50": { "value": "#f3e5f5", "type": "color" },
|
|
64
|
+
|
|
65
|
+
"violet-900": { "value": "#311b92", "type": "color" },
|
|
66
|
+
"violet-800": { "value": "#4527a0", "type": "color" },
|
|
67
|
+
"violet-700": { "value": "#512da8", "type": "color" },
|
|
68
|
+
"violet-600": { "value": "#5e35b1", "type": "color" },
|
|
69
|
+
"violet-500": { "value": "#673ab7", "type": "color" },
|
|
70
|
+
"violet-400": { "value": "#7e57c2 ", "type": "color" },
|
|
71
|
+
"violet-300": { "value": "#9575cd", "type": "color" },
|
|
72
|
+
"violet-200": { "value": "#b39ddb", "type": "color" },
|
|
73
|
+
"violet-100": { "value": "#d1c4e9", "type": "color" },
|
|
74
|
+
"violet-50": { "value": "#ede7f6", "type": "color" },
|
|
75
|
+
|
|
76
|
+
"deepblue-900": { "value": "#1a237e ", "type": "color" },
|
|
77
|
+
"deepblue-800": { "value": "#283593", "type": "color" },
|
|
78
|
+
"deepblue-700": { "value": "#303f9f", "type": "color" },
|
|
79
|
+
"deepblue-600": { "value": "#3949ab", "type": "color" },
|
|
80
|
+
"deepblue-500": { "value": "#3f51b5", "type": "color" },
|
|
81
|
+
"deepblue-400": { "value": "#5c6bc0", "type": "color" },
|
|
82
|
+
"deepblue-300": { "value": "#7986cb", "type": "color" },
|
|
83
|
+
"deepblue-200": { "value": "#9fa8da", "type": "color" },
|
|
84
|
+
"deepblue-100": { "value": "#c5cae9", "type": "color" },
|
|
85
|
+
"deepblue-50": { "value": "#e8eaf6", "type": "color" },
|
|
86
|
+
|
|
87
|
+
"blue-900": { "value": "#0d47a1", "type": "color" },
|
|
88
|
+
"blue-800": { "value": "#1565c0", "type": "color" },
|
|
89
|
+
"blue-700": { "value": "#1976d2", "type": "color" },
|
|
90
|
+
"blue-600": { "value": "#1e88e5", "type": "color" },
|
|
91
|
+
"blue-500": { "value": "#2196f3", "type": "color" },
|
|
92
|
+
"blue-400": { "value": "#42a5f5", "type": "color" },
|
|
93
|
+
"blue-300": { "value": "#64b5f6", "type": "color" },
|
|
94
|
+
"blue-200": { "value": "#90caf9", "type": "color" },
|
|
95
|
+
"blue-100": { "value": "#bbdefb", "type": "color" },
|
|
96
|
+
"blue-50": { "value": "#e3f2fd", "type": "color" },
|
|
97
|
+
|
|
98
|
+
"sky-900": { "value": "#01579b", "type": "color" },
|
|
99
|
+
"sky-800": { "value": "#0277bd", "type": "color" },
|
|
100
|
+
"sky-700": { "value": "#0288d1", "type": "color" },
|
|
101
|
+
"sky-600": { "value": "#039be5", "type": "color" },
|
|
102
|
+
"sky-500": { "value": "#03a9f4", "type": "color" },
|
|
103
|
+
"sky-400": { "value": "#29b6f6", "type": "color" },
|
|
104
|
+
"sky-300": { "value": "#4fc3f7", "type": "color" },
|
|
105
|
+
"sky-200": { "value": "#81d4fa", "type": "color" },
|
|
106
|
+
"sky-100": { "value": "#b3e5fc", "type": "color" },
|
|
107
|
+
"sky-50": { "value": "#e1f5fe", "type": "color" },
|
|
108
|
+
|
|
109
|
+
"teal-900": { "value": "#006064", "type": "color" },
|
|
110
|
+
"teal-800": { "value": "#00838f", "type": "color" },
|
|
111
|
+
"teal-700": { "value": "#0097a7", "type": "color" },
|
|
112
|
+
"teal-600": { "value": "#00acc1", "type": "color" },
|
|
113
|
+
"teal-500": { "value": "#00bcd4", "type": "color" },
|
|
114
|
+
"teal-400": { "value": "#26c6da", "type": "color" },
|
|
115
|
+
"teal-300": { "value": "#4dd0e1", "type": "color" },
|
|
116
|
+
"teal-200": { "value": "#80deea", "type": "color" },
|
|
117
|
+
"teal-100": { "value": "#b2ebf2", "type": "color" },
|
|
118
|
+
"teal-50": { "value": "#e0f7fa", "type": "color" },
|
|
119
|
+
|
|
120
|
+
"deepgreen-900": { "value": "#004d40", "type": "color" },
|
|
121
|
+
"deepgreen-800": { "value": "#00695c", "type": "color" },
|
|
122
|
+
"deepgreen-700": { "value": "#00796b", "type": "color" },
|
|
123
|
+
"deepgreen-600": { "value": "#00897b", "type": "color" },
|
|
124
|
+
"deepgreen-500": { "value": "#009688", "type": "color" },
|
|
125
|
+
"deepgreen-400": { "value": "#26a69a", "type": "color" },
|
|
126
|
+
"deepgreen-300": { "value": "#4db6ac", "type": "color" },
|
|
127
|
+
"deepgreen-200": { "value": "#80cbc4", "type": "color" },
|
|
128
|
+
"deepgreen-100": { "value": "#b2dfdb", "type": "color" },
|
|
129
|
+
"deepgreen-50": { "value": "#e0f2f1", "type": "color" },
|
|
130
|
+
|
|
131
|
+
"green-900": { "value": "#1b5e20", "type": "color" },
|
|
132
|
+
"green-800": { "value": "#2e7d32", "type": "color" },
|
|
133
|
+
"green-700": { "value": "#388e3c", "type": "color" },
|
|
134
|
+
"green-600": { "value": "#43a047", "type": "color" },
|
|
135
|
+
"green-500": { "value": "#4caf50", "type": "color" },
|
|
136
|
+
"green-400": { "value": "#66bb6a", "type": "color" },
|
|
137
|
+
"green-300": { "value": "#81c784", "type": "color" },
|
|
138
|
+
"green-200": { "value": "#a5d6a7", "type": "color" },
|
|
139
|
+
"green-100": { "value": "#c8e6c9", "type": "color" },
|
|
140
|
+
"green-50": { "value": "#e8f5e9", "type": "color" },
|
|
141
|
+
|
|
142
|
+
"lightgreen-900": { "value": "#33691e", "type": "color" },
|
|
143
|
+
"lightgreen-800": { "value": "#558b2f", "type": "color" },
|
|
144
|
+
"lightgreen-700": { "value": "#689f38", "type": "color" },
|
|
145
|
+
"lightgreen-600": { "value": "#7cb342", "type": "color" },
|
|
146
|
+
"lightgreen-500": { "value": "#8bc34a", "type": "color" },
|
|
147
|
+
"lightgreen-400": { "value": "#9ccc65", "type": "color" },
|
|
148
|
+
"lightgreen-300": { "value": "#aed581", "type": "color" },
|
|
149
|
+
"lightgreen-200": { "value": "#c5e1a5", "type": "color" },
|
|
150
|
+
"lightgreen-100": { "value": "#dcedc8", "type": "color" },
|
|
151
|
+
"lightgreen-50": { "value": "#f1f8e9", "type": "color" },
|
|
152
|
+
|
|
153
|
+
"yellow-900": { "value": "#827717", "type": "color" },
|
|
154
|
+
"yellow-800": { "value": "#9e9d24", "type": "color" },
|
|
155
|
+
"yellow-700": { "value": "#afb42b", "type": "color" },
|
|
156
|
+
"yellow-600": { "value": "#c0ca33", "type": "color" },
|
|
157
|
+
"yellow-500": { "value": "#cddc39", "type": "color" },
|
|
158
|
+
"yellow-400": { "value": "#d4e157", "type": "color" },
|
|
159
|
+
"yellow-300": { "value": "#dce775", "type": "color" },
|
|
160
|
+
"yellow-200": { "value": "#e6ee9c", "type": "color" },
|
|
161
|
+
"yellow-100": { "value": "#f0f4c3", "type": "color" },
|
|
162
|
+
"yellow-50": { "value": "#f9fbe7", "type": "color" },
|
|
163
|
+
|
|
164
|
+
"amber-900": { "value": "#f57f17", "type": "color" },
|
|
165
|
+
"amber-800": { "value": "#f9a825", "type": "color" },
|
|
166
|
+
"amber-700": { "value": "#fbc02d", "type": "color" },
|
|
167
|
+
"amber-600": { "value": "#fdd835", "type": "color" },
|
|
168
|
+
"amber-500": { "value": "#ffeb3b", "type": "color" },
|
|
169
|
+
"amber-400": { "value": "#ffee58", "type": "color" },
|
|
170
|
+
"amber-300": { "value": "#fff176", "type": "color" },
|
|
171
|
+
"amber-200": { "value": "#fff59d", "type": "color" },
|
|
172
|
+
"amber-100": { "value": "#fff9c4", "type": "color" },
|
|
173
|
+
"amber-50": { "value": "#fffde7", "type": "color" },
|
|
174
|
+
|
|
175
|
+
"orange-900": { "value": "#ff6f00", "type": "color" },
|
|
176
|
+
"orange-800": { "value": "#ff8f00", "type": "color" },
|
|
177
|
+
"orange-700": { "value": "#ffa000", "type": "color" },
|
|
178
|
+
"orange-600": { "value": "#ffb300", "type": "color" },
|
|
179
|
+
"orange-500": { "value": "#ffc107", "type": "color" },
|
|
180
|
+
"orange-400": { "value": "#ffca28", "type": "color" },
|
|
181
|
+
"orange-300": { "value": "#ffd54f", "type": "color" },
|
|
182
|
+
"orange-200": { "value": "#ffe082", "type": "color" },
|
|
183
|
+
"orange-100": { "value": "#ffecb3", "type": "color" },
|
|
184
|
+
"orange-50": { "value": "#fff8e1", "type": "color" },
|
|
185
|
+
|
|
186
|
+
"deeporange-900": { "value": "#e65100", "type": "color" },
|
|
187
|
+
"deeporange-800": { "value": "#ef6c00", "type": "color" },
|
|
188
|
+
"deeporange-700": { "value": "#f57c00", "type": "color" },
|
|
189
|
+
"deeporange-600": { "value": "#fb8c00", "type": "color" },
|
|
190
|
+
"deeporange-500": { "value": "#ff9800", "type": "color" },
|
|
191
|
+
"deeporange-400": { "value": "#ffa726", "type": "color" },
|
|
192
|
+
"deeporange-300": { "value": "#ffb74d", "type": "color" },
|
|
193
|
+
"deeporange-200": { "value": "#ffcc80", "type": "color" },
|
|
194
|
+
"deeporange-100": { "value": "#ffe0b2", "type": "color" },
|
|
195
|
+
"deeporange-50": { "value": "#fff320", "type": "color" },
|
|
196
|
+
|
|
197
|
+
"brown-900": { "value": "#3e2723", "type": "color" },
|
|
198
|
+
"brown-800": { "value": "#4e342e", "type": "color" },
|
|
199
|
+
"brown-700": { "value": "#5d4037", "type": "color" },
|
|
200
|
+
"brown-600": { "value": "#6d4c41", "type": "color" },
|
|
201
|
+
"brown-500": { "value": "#795548", "type": "color" },
|
|
202
|
+
"brown-400": { "value": "#8d6e63", "type": "color" },
|
|
203
|
+
"brown-300": { "value": "#a1887f", "type": "color" },
|
|
204
|
+
"brown-200": { "value": "#bcaaa4", "type": "color" },
|
|
205
|
+
"brown-100": { "value": "#d7ccc8", "type": "color" },
|
|
206
|
+
"brown-50": { "value": "#efebe9", "type": "color" },
|
|
207
|
+
|
|
4
208
|
"border": {
|
|
5
209
|
"value": {
|
|
6
210
|
"light": "#ccc",
|
|
@@ -9,23 +213,25 @@
|
|
|
9
213
|
"type": "color"
|
|
10
214
|
}
|
|
11
215
|
},
|
|
216
|
+
"spacing": {
|
|
217
|
+
"desktop-x": { "value": 48, "type": "spacing" },
|
|
218
|
+
"desktop-y": { "value": 48, "type": "spacing" },
|
|
219
|
+
"table-x": { "value": 24, "type": "spacing" },
|
|
220
|
+
"table-y": { "value": 24, "type": "spacing" },
|
|
221
|
+
"mobile-x": { "value": 12, "type": "spacing" },
|
|
222
|
+
"mobile-y": { "value": 12, "type": "spacing" },
|
|
223
|
+
"global-x": { "value": 16, "type": "spacing" },
|
|
224
|
+
"global-y": { "value": 12, "type": "spacing" }
|
|
225
|
+
},
|
|
12
226
|
"global": {
|
|
13
227
|
"rounded": {
|
|
14
228
|
"value": 4,
|
|
15
229
|
"type": "borderRadius"
|
|
16
|
-
},
|
|
17
|
-
"padding-x": {
|
|
18
|
-
"value": 12,
|
|
19
|
-
"type": "spacing"
|
|
20
|
-
},
|
|
21
|
-
"padding-y": {
|
|
22
|
-
"value": 8,
|
|
23
|
-
"type": "spacing"
|
|
24
230
|
}
|
|
25
231
|
},
|
|
26
232
|
"text": {
|
|
27
233
|
"h1": {
|
|
28
|
-
"value":
|
|
234
|
+
"value": 38,
|
|
29
235
|
"type": "typography"
|
|
30
236
|
},
|
|
31
237
|
"h1-line-height": {
|
|
@@ -37,18 +243,42 @@
|
|
|
37
243
|
"type": "typography"
|
|
38
244
|
},
|
|
39
245
|
"h2": {
|
|
40
|
-
"value":
|
|
246
|
+
"value": 32,
|
|
41
247
|
"type": "typography"
|
|
42
248
|
},
|
|
43
249
|
"h2-line-height": {
|
|
44
|
-
"value":
|
|
250
|
+
"value": 42,
|
|
45
251
|
"type": "typography"
|
|
46
252
|
},
|
|
47
253
|
"h3": {
|
|
48
|
-
"value":
|
|
254
|
+
"value": 30,
|
|
49
255
|
"type": "typography"
|
|
50
256
|
},
|
|
51
257
|
"h3-line-height": {
|
|
258
|
+
"value": 38,
|
|
259
|
+
"type": "typography"
|
|
260
|
+
},
|
|
261
|
+
"h4": {
|
|
262
|
+
"value": 24,
|
|
263
|
+
"type": "typography"
|
|
264
|
+
},
|
|
265
|
+
"h4-line-height": {
|
|
266
|
+
"value": 38,
|
|
267
|
+
"type": "typography"
|
|
268
|
+
},
|
|
269
|
+
"h5": {
|
|
270
|
+
"value": 20,
|
|
271
|
+
"type": "typography"
|
|
272
|
+
},
|
|
273
|
+
"h5-line-height": {
|
|
274
|
+
"value": 32,
|
|
275
|
+
"type": "typography"
|
|
276
|
+
},
|
|
277
|
+
"h6": {
|
|
278
|
+
"value": 16,
|
|
279
|
+
"type": "typography"
|
|
280
|
+
},
|
|
281
|
+
"h6-line-height": {
|
|
52
282
|
"value": 24,
|
|
53
283
|
"type": "typography"
|
|
54
284
|
},
|
|
@@ -85,22 +315,22 @@
|
|
|
85
315
|
"background": {
|
|
86
316
|
"standard": {
|
|
87
317
|
"value": {
|
|
88
|
-
"light": "
|
|
89
|
-
"dark": "
|
|
318
|
+
"light": "{color.white}",
|
|
319
|
+
"dark": "{color.black-800}"
|
|
90
320
|
},
|
|
91
321
|
"type": "color"
|
|
92
322
|
},
|
|
93
323
|
"hover": {
|
|
94
324
|
"value": {
|
|
95
|
-
"light": "
|
|
96
|
-
"dark": "
|
|
325
|
+
"light": "{color.gray-200}",
|
|
326
|
+
"dark": "{color.black-700}"
|
|
97
327
|
},
|
|
98
328
|
"type": "color"
|
|
99
329
|
},
|
|
100
330
|
"disabled": {
|
|
101
331
|
"value": {
|
|
102
|
-
"light": "
|
|
103
|
-
"dark": "
|
|
332
|
+
"light": "{color.gray-500}",
|
|
333
|
+
"dark": "{color.black-600}"
|
|
104
334
|
},
|
|
105
335
|
"type": "color"
|
|
106
336
|
}
|
|
@@ -108,29 +338,29 @@
|
|
|
108
338
|
"text": {
|
|
109
339
|
"standard": {
|
|
110
340
|
"value": {
|
|
111
|
-
"light": "
|
|
112
|
-
"dark": "
|
|
341
|
+
"light": "{color.black-800}",
|
|
342
|
+
"dark": "{color.gray-500}"
|
|
113
343
|
}
|
|
114
344
|
},
|
|
115
345
|
"disabled": {
|
|
116
346
|
"value": {
|
|
117
|
-
"light": "
|
|
118
|
-
"dark": "
|
|
347
|
+
"light": "{color.black-300}",
|
|
348
|
+
"dark": "{color.black-500}"
|
|
119
349
|
}
|
|
120
350
|
}
|
|
121
351
|
},
|
|
122
352
|
"border": {
|
|
123
353
|
"standard": {
|
|
124
354
|
"value": {
|
|
125
|
-
"light": "
|
|
126
|
-
"dark": "
|
|
355
|
+
"light": "{color.gray-900}",
|
|
356
|
+
"dark": "{color.black-600}"
|
|
127
357
|
},
|
|
128
358
|
"type": "color"
|
|
129
359
|
},
|
|
130
360
|
"focus": {
|
|
131
361
|
"value": {
|
|
132
|
-
"light": "
|
|
133
|
-
"dark": "
|
|
362
|
+
"light": "{color.black-800}",
|
|
363
|
+
"dark": "{color.gray-900}"
|
|
134
364
|
},
|
|
135
365
|
"type": "color"
|
|
136
366
|
}
|
|
@@ -250,5 +480,13 @@
|
|
|
250
480
|
}
|
|
251
481
|
}
|
|
252
482
|
}
|
|
483
|
+
},
|
|
484
|
+
"modal": {
|
|
485
|
+
"background": {
|
|
486
|
+
"value": {
|
|
487
|
+
"light": "#fafafa",
|
|
488
|
+
"dark": "#333333"
|
|
489
|
+
}
|
|
490
|
+
}
|
|
253
491
|
}
|
|
254
492
|
}
|