atomsystem 0.1.21 → 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/Card/Card.tsx +3 -1
- package/app/templates/Collapse/Collapse.tsx +115 -0
- package/app/templates/Input/Input.tsx +4 -4
- package/app/templates/Pagination/Pagination.tsx +2 -2
- package/app/templates/TOC/TOC.tsx +5 -2
- package/cli/add.js +2 -0
- package/package.json +1 -1
- package/token.json +225 -22
|
@@ -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
|
+
};
|
|
@@ -37,10 +37,10 @@ export const Input = ({
|
|
|
37
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}
|
|
@@ -16,9 +16,9 @@ const Pagination = ({
|
|
|
16
16
|
pageViewRange: number;
|
|
17
17
|
/** 페이지네이션을 보여줄 최대 개수정보를 받습니다. */
|
|
18
18
|
pageRange: number;
|
|
19
|
-
/**
|
|
19
|
+
/** 데이터의 총 개수를 받아 페이지당 데이터 개수로 나누어 총 페이지네이션 정보를 계산합니다. */
|
|
20
20
|
totalCount?: number;
|
|
21
|
-
/**
|
|
21
|
+
/** 전체 페이지네이션의 토탈 정보를 받습니다. */
|
|
22
22
|
pageTotal?: number;
|
|
23
23
|
}) => {
|
|
24
24
|
const totalPages = pageTotal
|
|
@@ -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">
|
package/cli/add.js
CHANGED
|
@@ -18,6 +18,7 @@ const components = [
|
|
|
18
18
|
"Button",
|
|
19
19
|
"Badge",
|
|
20
20
|
"Card",
|
|
21
|
+
"Collapse",
|
|
21
22
|
"CodeBlock",
|
|
22
23
|
"GlobalNav",
|
|
23
24
|
"Input",
|
|
@@ -27,6 +28,7 @@ const components = [
|
|
|
27
28
|
"Pagination",
|
|
28
29
|
"Table",
|
|
29
30
|
"Modal",
|
|
31
|
+
"TOC",
|
|
30
32
|
]; // 여기 추가할 컴포넌트 목록
|
|
31
33
|
|
|
32
34
|
// 명령어에서 컴포넌트 이름 가져오기
|
package/package.json
CHANGED
package/token.json
CHANGED
|
@@ -4,6 +4,207 @@
|
|
|
4
4
|
"secondary": { "value": "#162c4e", "type": "color" },
|
|
5
5
|
"danger": { "value": "#ff4a4a", "type": "color" },
|
|
6
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
|
+
|
|
7
208
|
"border": {
|
|
8
209
|
"value": {
|
|
9
210
|
"light": "#ccc",
|
|
@@ -12,18 +213,20 @@
|
|
|
12
213
|
"type": "color"
|
|
13
214
|
}
|
|
14
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
|
+
},
|
|
15
226
|
"global": {
|
|
16
227
|
"rounded": {
|
|
17
228
|
"value": 4,
|
|
18
229
|
"type": "borderRadius"
|
|
19
|
-
},
|
|
20
|
-
"padding-x": {
|
|
21
|
-
"value": 12,
|
|
22
|
-
"type": "spacing"
|
|
23
|
-
},
|
|
24
|
-
"padding-y": {
|
|
25
|
-
"value": 8,
|
|
26
|
-
"type": "spacing"
|
|
27
230
|
}
|
|
28
231
|
},
|
|
29
232
|
"text": {
|
|
@@ -112,22 +315,22 @@
|
|
|
112
315
|
"background": {
|
|
113
316
|
"standard": {
|
|
114
317
|
"value": {
|
|
115
|
-
"light": "
|
|
116
|
-
"dark": "
|
|
318
|
+
"light": "{color.white}",
|
|
319
|
+
"dark": "{color.black-800}"
|
|
117
320
|
},
|
|
118
321
|
"type": "color"
|
|
119
322
|
},
|
|
120
323
|
"hover": {
|
|
121
324
|
"value": {
|
|
122
|
-
"light": "
|
|
123
|
-
"dark": "
|
|
325
|
+
"light": "{color.gray-200}",
|
|
326
|
+
"dark": "{color.black-700}"
|
|
124
327
|
},
|
|
125
328
|
"type": "color"
|
|
126
329
|
},
|
|
127
330
|
"disabled": {
|
|
128
331
|
"value": {
|
|
129
|
-
"light": "
|
|
130
|
-
"dark": "
|
|
332
|
+
"light": "{color.gray-500}",
|
|
333
|
+
"dark": "{color.black-600}"
|
|
131
334
|
},
|
|
132
335
|
"type": "color"
|
|
133
336
|
}
|
|
@@ -135,29 +338,29 @@
|
|
|
135
338
|
"text": {
|
|
136
339
|
"standard": {
|
|
137
340
|
"value": {
|
|
138
|
-
"light": "
|
|
139
|
-
"dark": "
|
|
341
|
+
"light": "{color.black-800}",
|
|
342
|
+
"dark": "{color.gray-500}"
|
|
140
343
|
}
|
|
141
344
|
},
|
|
142
345
|
"disabled": {
|
|
143
346
|
"value": {
|
|
144
|
-
"light": "
|
|
145
|
-
"dark": "
|
|
347
|
+
"light": "{color.black-300}",
|
|
348
|
+
"dark": "{color.black-500}"
|
|
146
349
|
}
|
|
147
350
|
}
|
|
148
351
|
},
|
|
149
352
|
"border": {
|
|
150
353
|
"standard": {
|
|
151
354
|
"value": {
|
|
152
|
-
"light": "
|
|
153
|
-
"dark": "
|
|
355
|
+
"light": "{color.gray-900}",
|
|
356
|
+
"dark": "{color.black-600}"
|
|
154
357
|
},
|
|
155
358
|
"type": "color"
|
|
156
359
|
},
|
|
157
360
|
"focus": {
|
|
158
361
|
"value": {
|
|
159
|
-
"light": "
|
|
160
|
-
"dark": "
|
|
362
|
+
"light": "{color.black-800}",
|
|
363
|
+
"dark": "{color.gray-900}"
|
|
161
364
|
},
|
|
162
365
|
"type": "color"
|
|
163
366
|
}
|