atomsystem 0.1.27 → 0.1.29
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 +46 -6
- package/app/templates/Card/Card.tsx +0 -8
- package/app/templates/Form/Form.tsx +0 -2
- package/app/templates/Navigation/Navigation.tsx +1 -1
- package/app/templates/Theme/Theme.tsx +0 -4
- package/build/css/_variables.css +219 -265
- package/cli/init.js +13 -6
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,15 +1,55 @@
|
|
|
1
|
-
#
|
|
1
|
+
# AtomSystem Design Token
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
AtomSystem은 **디자인 토큰(Design Tokens)**을 중심으로 UI 컴포넌트와 문서를 관리하는 현대적인 디자인 시스템 프레임워크입니다. `tokens.json`을 단일 진실 공급원(Single Source of Truth)으로 하여 CSS 변수와 TypeScript 타입을 자동으로 생성하고, 이를 기반으로 React 컴포넌트와 MDX 가이드를 구축합니다.
|
|
4
4
|
|
|
5
|
+
## ✨ 핵심 가치
|
|
6
|
+
|
|
7
|
+
- **Token-Driven Design**: 모든 스타일 값(색상, 간격, 타이포그래피 등)은 토큰으로 관리되어 디자인과 코드 간의 일관성을 유지합니다.
|
|
8
|
+
- **Automated Workflow**: Style Dictionary를 통해 토큰 변경 시 즉시 CSS 및 TS 파일이 업데이트됩니다.
|
|
9
|
+
- **Component-First Documentation**: 컴포넌트 생성과 동시에 MDX 문서가 연동되어 실시간 라이브러리 가이드를 제공합니다.
|
|
10
|
+
- **Multi-Theme Support**: 테마별 토큰 분리 관리를 통해 화이트/다크 모드 및 커스텀 테마를 손쉽게 지원합니다.
|
|
11
|
+
|
|
12
|
+
## 🛠 기술 스택
|
|
13
|
+
|
|
14
|
+
- **Core**: Next.js 15, React 18, TypeScript
|
|
15
|
+
- **Styling**: Tailwind CSS 4, CSS Modules
|
|
16
|
+
- **Design Token**: Style Dictionary 4, Tokens Studio
|
|
17
|
+
- **Animation**: GSAP, @gsap/react
|
|
18
|
+
- **Documentation**: MDX
|
|
19
|
+
|
|
20
|
+
## 📂 프로젝트 구조
|
|
21
|
+
|
|
22
|
+
- `/tokens`: 디자인 토큰의 원천 데이터 (`tokens.json`)
|
|
23
|
+
- `/build`: 빌드된 토큰 결과물 (CSS Variables, TS Objects)
|
|
24
|
+
- `/app/templates`: 디자인 시스템의 핵심 React 컴포넌트
|
|
25
|
+
- `/css`: 각 컴포넌트의 스타일 시트
|
|
26
|
+
- `/markdown`: 컴포넌트 가이드 및 예시를 담은 MDX 파일
|
|
27
|
+
- `/cli`: 디자인 시스템 관리를 위한 CLI 도구
|
|
28
|
+
|
|
29
|
+
## 🚀 시작하기
|
|
30
|
+
|
|
31
|
+
### 1. 의존성 설치
|
|
5
32
|
```bash
|
|
6
|
-
|
|
33
|
+
npm install
|
|
7
34
|
```
|
|
8
35
|
|
|
9
|
-
|
|
36
|
+
### 2. 토큰 빌드 및 개발 서버 실행
|
|
37
|
+
`npm run dev`는 토큰을 먼저 빌드한 후 Next.js 개발 서버를 실행합니다.
|
|
38
|
+
```bash
|
|
39
|
+
npm run dev
|
|
40
|
+
```
|
|
10
41
|
|
|
42
|
+
### 3. 토큰만 빌드하기
|
|
11
43
|
```bash
|
|
12
|
-
npm
|
|
44
|
+
npm run token-build
|
|
13
45
|
```
|
|
14
46
|
|
|
15
|
-
|
|
47
|
+
## 🔄 워크플로우
|
|
48
|
+
|
|
49
|
+
1. **토큰 정의**: `tokens/tokens.json`에서 새로운 스타일 값이나 컴포넌트 토큰을 정의합니다.
|
|
50
|
+
2. **토큰 빌드**: `npm run token-build`를 통해 `build/` 경로의 자산들을 업데이트합니다.
|
|
51
|
+
3. **컴포넌트 구현**: `app/templates/`에서 빌드된 TS 타입을 참조하여 컴포넌트를 작성합니다.
|
|
52
|
+
4. **문서화**: `markdown/`에서 MDX를 작성하여 컴포넌트 사용법을 기록합니다.
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
© 2026 [AtomGround](https://system.atomground.com). All rights reserved.
|
|
@@ -10,14 +10,6 @@ export const Card = ({
|
|
|
10
10
|
type?: "standard" | "group";
|
|
11
11
|
overflow?: "overflow-auto" | "overflow-hidden" | "overflow-none";
|
|
12
12
|
}) => {
|
|
13
|
-
// CardHeader와 CardContent의 존재 여부 확인
|
|
14
|
-
const hasCardContent = React.Children.toArray(children).some(
|
|
15
|
-
(child) =>
|
|
16
|
-
React.isValidElement(child) &&
|
|
17
|
-
(child.type === CardHeader ||
|
|
18
|
-
child.type === CardContent ||
|
|
19
|
-
child.type === CardFooter)
|
|
20
|
-
);
|
|
21
13
|
return (
|
|
22
14
|
<div
|
|
23
15
|
className={`card ${className} ${overflow}`}
|
|
@@ -96,21 +96,17 @@ export const ThemeSelector = () => {
|
|
|
96
96
|
};
|
|
97
97
|
|
|
98
98
|
export const ThemeProvider = () => {
|
|
99
|
-
const [theme, setTheme] = useState<Record<string, string>>({});
|
|
100
99
|
const [isThemeLoading, setThemeLoading] = useState(false);
|
|
101
100
|
|
|
102
101
|
useEffect(() => {
|
|
103
102
|
const listenStorageChange = () => {
|
|
104
|
-
const newThemes: Record<string, string> = {};
|
|
105
103
|
Object.entries(themes).forEach(([group, groupThemes]) => {
|
|
106
104
|
const storedKey = group === "global" ? "theme" : `theme-${group}`;
|
|
107
105
|
const currentTheme = localStorage.getItem(storedKey) || groupThemes[0];
|
|
108
|
-
newThemes[group] = currentTheme;
|
|
109
106
|
|
|
110
107
|
document.documentElement.classList.remove(...groupThemes);
|
|
111
108
|
document.documentElement.classList.add(currentTheme);
|
|
112
109
|
});
|
|
113
|
-
setTheme(newThemes);
|
|
114
110
|
};
|
|
115
111
|
|
|
116
112
|
listenStorageChange();
|
package/build/css/_variables.css
CHANGED
|
@@ -1,315 +1,269 @@
|
|
|
1
1
|
@theme {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
2
|
+
--color-gray-100: #f5f5f5;
|
|
3
|
+
--color-gray-200: #e6e6e6;
|
|
4
|
+
--color-gray-300: #dbdbdb;
|
|
5
|
+
--color-gray-400: #d4d4d4;
|
|
6
|
+
--color-gray-500: #cccccc;
|
|
7
|
+
--color-gray-600: #bfbfbf;
|
|
8
|
+
--color-gray-700: #b3b3b3;
|
|
9
|
+
--color-gray-800: #a6a6a6;
|
|
10
|
+
--color-gray-900: #999999;
|
|
11
|
+
--color-gray-950: #707070;
|
|
12
|
+
--color-dark-100: #111111;
|
|
13
|
+
--color-dark-200: #222222;
|
|
14
|
+
--color-dark-300: #333333;
|
|
15
|
+
--color-dark-400: #444444;
|
|
16
|
+
--color-dark-500: #555555;
|
|
17
|
+
--color-dark-600: #666666;
|
|
18
|
+
--color-dark-700: #777777;
|
|
19
|
+
--color-dark-800: #888888;
|
|
20
|
+
--color-dark-900: #999999;
|
|
21
|
+
--color-dark-950: #b2b2b2;
|
|
22
|
+
--color-blue-100: #e3f2fd;
|
|
23
|
+
--color-blue-200: #bbdefb;
|
|
24
|
+
--color-blue-300: #90caf9;
|
|
25
|
+
--color-blue-400: #64b5f6;
|
|
26
|
+
--color-blue-500: #2196f3;
|
|
27
|
+
--color-blue-600: #1e88e5;
|
|
28
|
+
--color-blue-700: #1976d2;
|
|
29
|
+
--color-blue-800: #1565c0;
|
|
30
|
+
--color-blue-900: #0d47a1;
|
|
31
|
+
--color-blue-950: #0a2f6b;
|
|
32
|
+
--color-indigo-100: #e8eaf6;
|
|
33
|
+
--color-indigo-200: #c5cae9;
|
|
34
|
+
--color-indigo-300: #7986cb;
|
|
35
|
+
--color-indigo-400: #3f51b5;
|
|
36
|
+
--color-indigo-500: #162c4e;
|
|
37
|
+
--color-indigo-600: #122542;
|
|
38
|
+
--color-indigo-700: #0e1d35;
|
|
39
|
+
--color-indigo-800: #0a1628;
|
|
40
|
+
--color-indigo-900: #070f1b;
|
|
41
|
+
--color-indigo-950: #04080e;
|
|
42
|
+
--color-red-100: #ffebee;
|
|
43
|
+
--color-red-200: #ffcdd2;
|
|
44
|
+
--color-red-300: #ef9a9a;
|
|
45
|
+
--color-red-400: #e57373;
|
|
46
|
+
--color-red-500: #f44336;
|
|
47
|
+
--color-red-600: #e53935;
|
|
48
|
+
--color-red-700: #d32f2f;
|
|
49
|
+
--color-red-800: #c62828;
|
|
50
|
+
--color-red-900: #b71c1c;
|
|
51
|
+
--color-red-950: #7f1212;
|
|
52
|
+
--color-yellow-100: #fff8e1;
|
|
53
|
+
--color-yellow-200: #ffecb3;
|
|
54
|
+
--color-yellow-300: #ffe082;
|
|
55
|
+
--color-yellow-400: #ffd54f;
|
|
56
|
+
--color-yellow-500: #ffb300;
|
|
57
|
+
--color-yellow-600: #ffa000;
|
|
58
|
+
--color-yellow-700: #ff8f00;
|
|
59
|
+
--color-yellow-800: #ff6f00;
|
|
60
|
+
--color-yellow-900: #e65100;
|
|
61
|
+
--color-yellow-950: #9e3600;
|
|
62
|
+
--color-green-100: #e8f5e9;
|
|
63
|
+
--color-green-200: #c8e6c9;
|
|
64
|
+
--color-green-300: #a5d6a7;
|
|
65
|
+
--color-green-400: #81c784;
|
|
66
|
+
--color-green-500: #4caf50;
|
|
67
|
+
--color-green-600: #43a047;
|
|
68
|
+
--color-green-700: #388e3c;
|
|
69
|
+
--color-green-800: #2e7d32;
|
|
70
|
+
--color-green-900: #1b5e20;
|
|
71
|
+
--color-green-950: #104015;
|
|
72
|
+
--color-black: #111111;
|
|
73
|
+
--color-white: #fafafa;
|
|
74
|
+
--color-primary: var(--color-blue-500);
|
|
75
|
+
--color-secondary: var(--color-indigo-500);
|
|
76
|
+
--color-danger: var(--color-red-500);
|
|
77
|
+
--color-warning: var(--color-yellow-500);
|
|
78
|
+
--color-info: var(--color-gray-900);
|
|
79
|
+
--color-success: var(--color-green-500);
|
|
80
|
+
--text-h1: 40px;
|
|
81
|
+
--text-h2: 36px;
|
|
82
|
+
--text-h3: 28px;
|
|
83
|
+
--text-h4: 24px;
|
|
84
|
+
--text-h5: 20px;
|
|
85
|
+
--text-h6: 16px;
|
|
86
|
+
--text-body: 16px;
|
|
87
|
+
--text-sm: 12px;
|
|
88
|
+
--font-weight-header: 700;
|
|
89
|
+
--radius-common: 4px;
|
|
90
|
+
--radius-circle: 10000000px;
|
|
91
|
+
--font-spoqaNeo: Spoqa Han Sans Neo;
|
|
92
|
+
--spacing-common-y: 12px;
|
|
93
|
+
--spacing-common-x: 16px;
|
|
94
|
+
--spacing-gap-small: 4px;
|
|
95
|
+
--spacing-sm-y: 8px;
|
|
96
|
+
--spacing-small: 20px;
|
|
98
97
|
|
|
99
|
-
@theme {
|
|
100
|
-
--bg-card: var(--color-white);
|
|
101
98
|
--color-bg-card: var(--bg-card);
|
|
102
|
-
--bg-wrapper: var(--color-gray-200);
|
|
103
99
|
--color-bg-wrapper: var(--bg-wrapper);
|
|
104
|
-
--bg-input-standard: var(--color-gray-100);
|
|
105
100
|
--color-bg-input-standard: var(--bg-input-standard);
|
|
106
|
-
--bg-input-hover: var(--color-gray-200);
|
|
107
101
|
--color-bg-input-hover: var(--bg-input-hover);
|
|
108
|
-
--bg-input-disabled: var(--color-gray-500);
|
|
109
102
|
--color-bg-input-disabled: var(--bg-input-disabled);
|
|
110
|
-
--text-standard: var(--color-dark-300);
|
|
111
103
|
--color-text-standard: var(--text-standard);
|
|
112
|
-
--text-active: var(--color-gray-100);
|
|
113
104
|
--color-text-active: var(--text-active);
|
|
114
|
-
--text-placeholder: var(--color-gray-950);
|
|
115
105
|
--color-text-placeholder: var(--text-placeholder);
|
|
116
|
-
--text-disabled: var(--color-gray-950);
|
|
117
106
|
--color-text-disabled: var(--text-disabled);
|
|
118
|
-
--border-standard: var(--color-gray-500);
|
|
119
107
|
--color-border-standard: var(--border-standard);
|
|
120
|
-
--border-active: var(--color-dark-400);
|
|
121
108
|
--color-border-active: var(--border-active);
|
|
122
|
-
--button-primary-bg-disabled: var(--color-blue-200);
|
|
123
109
|
--color-button-primary-bg-disabled: var(--button-primary-bg-disabled);
|
|
124
|
-
--button-primary-text-disabled: var(--color-blue-400);
|
|
125
110
|
--color-button-primary-text-disabled: var(--button-primary-text-disabled);
|
|
126
|
-
--button-primary-border-disabled: var(--color-blue-200);
|
|
127
111
|
--color-button-primary-border-disabled: var(--button-primary-border-disabled);
|
|
128
|
-
--button-secondary-bg-disabled: var(--color-indigo-200);
|
|
129
112
|
--color-button-secondary-bg-disabled: var(--button-secondary-bg-disabled);
|
|
130
|
-
--button-secondary-text-disabled: var(--color-indigo-400);
|
|
131
113
|
--color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
|
|
132
|
-
--button-secondary-border-disabled: var(--color-indigo-200);
|
|
133
114
|
--color-button-secondary-border-disabled: var(--button-secondary-border-disabled);
|
|
134
|
-
--button-success-bg-disabled: var(--color-green-200);
|
|
135
115
|
--color-button-success-bg-disabled: var(--button-success-bg-disabled);
|
|
136
|
-
--button-success-text-disabled: var(--color-green-400);
|
|
137
116
|
--color-button-success-text-disabled: var(--button-success-text-disabled);
|
|
138
|
-
--button-success-border-disabled: var(--color-green-200);
|
|
139
117
|
--color-button-success-border-disabled: var(--button-success-border-disabled);
|
|
140
|
-
--button-danger-bg-disabled: var(--color-red-200);
|
|
141
118
|
--color-button-danger-bg-disabled: var(--button-danger-bg-disabled);
|
|
142
|
-
--button-danger-text-disabled: var(--color-red-400);
|
|
143
119
|
--color-button-danger-text-disabled: var(--button-danger-text-disabled);
|
|
144
|
-
--button-danger-border-disabled: var(--color-red-200);
|
|
145
120
|
--color-button-danger-border-disabled: var(--button-danger-border-disabled);
|
|
146
|
-
--button-warning-bg-disabled: var(--color-yellow-200);
|
|
147
121
|
--color-button-warning-bg-disabled: var(--button-warning-bg-disabled);
|
|
148
|
-
--button-warning-text-disabled: var(--color-yellow-400);
|
|
149
122
|
--color-button-warning-text-disabled: var(--button-warning-text-disabled);
|
|
150
|
-
--button-warning-border-disabled: var(--color-yellow-200);
|
|
151
123
|
--color-button-warning-border-disabled: var(--button-warning-border-disabled);
|
|
152
|
-
--button-gray-bg-disabled: var(--color-gray-200);
|
|
153
124
|
--color-button-gray-bg-disabled: var(--button-gray-bg-disabled);
|
|
154
|
-
--button-gray-text-disabled: var(--color-gray-500);
|
|
155
125
|
--color-button-gray-text-disabled: var(--button-gray-text-disabled);
|
|
156
|
-
--button-gray-border-disabled: var(--color-gray-300);
|
|
157
126
|
--color-button-gray-border-disabled: var(--button-gray-border-disabled);
|
|
158
|
-
--table-header-bg: var(--color-gray-400);
|
|
159
127
|
--color-table-header-bg: var(--table-header-bg);
|
|
160
|
-
--table-header-text: var(--color-dark-500);
|
|
161
128
|
--color-table-header-text: var(--table-header-text);
|
|
162
|
-
--table-header-border: var(--color-gray-500);
|
|
163
129
|
--color-table-header-border: var(--table-header-border);
|
|
164
|
-
--table-body-bg: var(--color-white);
|
|
165
130
|
--color-table-body-bg: var(--table-body-bg);
|
|
166
|
-
--table-body-bgEven: var(--color-gray-100);
|
|
167
131
|
--color-table-body-bgEven: var(--table-body-bgEven);
|
|
168
|
-
--table-body-text: var(--color-dark-300);
|
|
169
132
|
--color-table-body-text: var(--table-body-text);
|
|
170
|
-
--table-body-border: var(--color-gray-300);
|
|
171
133
|
--color-table-body-border: var(--table-body-border);
|
|
172
|
-
--pagination-bg-hover: var(--color-gray-100);
|
|
173
134
|
--color-pagination-bg-hover: var(--pagination-bg-hover);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
@theme .dark {
|
|
177
|
-
--bg-card: var(--color-dark-200);
|
|
178
|
-
--color-bg-card: var(--bg-card);
|
|
179
|
-
--bg-wrapper: var(--color-black);
|
|
180
|
-
--color-bg-wrapper: var(--bg-wrapper);
|
|
181
|
-
--bg-input-standard: var(--color-dark-300);
|
|
182
|
-
--color-bg-input-standard: var(--bg-input-standard);
|
|
183
|
-
--bg-input-hover: var(--color-dark-400);
|
|
184
|
-
--color-bg-input-hover: var(--bg-input-hover);
|
|
185
|
-
--bg-input-disabled: var(--color-dark-200);
|
|
186
|
-
--color-bg-input-disabled: var(--bg-input-disabled);
|
|
187
|
-
--text-standard: var(--color-white);
|
|
188
|
-
--color-text-standard: var(--text-standard);
|
|
189
|
-
--text-active: var(--color-white);
|
|
190
|
-
--color-text-active: var(--text-active);
|
|
191
|
-
--text-placeholder: var(--color-gray-950);
|
|
192
|
-
--color-text-placeholder: var(--text-placeholder);
|
|
193
|
-
--text-disabled: var(--color-dark-400);
|
|
194
|
-
--color-text-disabled: var(--text-disabled);
|
|
195
|
-
--border-standard: var(--color-dark-400);
|
|
196
|
-
--color-border-standard: var(--border-standard);
|
|
197
|
-
--border-active: var(--color-gray-500);
|
|
198
|
-
--color-border-active: var(--border-active);
|
|
199
|
-
--button-primary-bg-disabled: var(--color-blue-900);
|
|
200
|
-
--color-button-primary-bg-disabled: var(--button-primary-bg-disabled);
|
|
201
|
-
--button-primary-text-disabled: var(--color-blue-700);
|
|
202
|
-
--color-button-primary-text-disabled: var(--button-primary-text-disabled);
|
|
203
|
-
--button-primary-border-disabled: var(--color-blue-800);
|
|
204
|
-
--color-button-primary-border-disabled: var(--button-primary-border-disabled);
|
|
205
|
-
--button-secondary-bg-disabled: var(--color-indigo-900);
|
|
206
|
-
--color-button-secondary-bg-disabled: var(--button-secondary-bg-disabled);
|
|
207
|
-
--button-secondary-text-disabled: var(--color-indigo-700);
|
|
208
|
-
--color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
|
|
209
|
-
--button-secondary-border-disabled: var(--color-indigo-800);
|
|
210
|
-
--color-button-secondary-border-disabled: var(--button-secondary-border-disabled);
|
|
211
|
-
--button-success-bg-disabled: var(--color-green-900);
|
|
212
|
-
--color-button-success-bg-disabled: var(--button-success-bg-disabled);
|
|
213
|
-
--button-success-text-disabled: var(--color-green-700);
|
|
214
|
-
--color-button-success-text-disabled: var(--button-success-text-disabled);
|
|
215
|
-
--button-success-border-disabled: var(--color-green-800);
|
|
216
|
-
--color-button-success-border-disabled: var(--button-success-border-disabled);
|
|
217
|
-
--button-danger-bg-disabled: var(--color-red-900);
|
|
218
|
-
--color-button-danger-bg-disabled: var(--button-danger-bg-disabled);
|
|
219
|
-
--button-danger-text-disabled: var(--color-red-700);
|
|
220
|
-
--color-button-danger-text-disabled: var(--button-danger-text-disabled);
|
|
221
|
-
--button-danger-border-disabled: var(--color-red-800);
|
|
222
|
-
--color-button-danger-border-disabled: var(--button-danger-border-disabled);
|
|
223
|
-
--button-warning-bg-disabled: var(--color-yellow-900);
|
|
224
|
-
--color-button-warning-bg-disabled: var(--button-warning-bg-disabled);
|
|
225
|
-
--button-warning-text-disabled: var(--color-yellow-700);
|
|
226
|
-
--color-button-warning-text-disabled: var(--button-warning-text-disabled);
|
|
227
|
-
--button-warning-border-disabled: var(--color-yellow-800);
|
|
228
|
-
--color-button-warning-border-disabled: var(--button-warning-border-disabled);
|
|
229
|
-
--button-gray-bg-disabled: var(--color-gray-800);
|
|
230
|
-
--color-button-gray-bg-disabled: var(--button-gray-bg-disabled);
|
|
231
|
-
--button-gray-text-disabled: var(--color-gray-600);
|
|
232
|
-
--color-button-gray-text-disabled: var(--button-gray-text-disabled);
|
|
233
|
-
--button-gray-border-disabled: var(--color-gray-700);
|
|
234
|
-
--color-button-gray-border-disabled: var(--button-gray-border-disabled);
|
|
235
|
-
--table-header-bg: var(--color-dark-400);
|
|
236
|
-
--color-table-header-bg: var(--table-header-bg);
|
|
237
|
-
--table-header-text: var(--color-gray-200);
|
|
238
|
-
--color-table-header-text: var(--table-header-text);
|
|
239
|
-
--table-header-border: var(--color-dark-600);
|
|
240
|
-
--color-table-header-border: var(--table-header-border);
|
|
241
|
-
--table-body-bg: var(--color-dark-200);
|
|
242
|
-
--color-table-body-bg: var(--table-body-bg);
|
|
243
|
-
--table-body-bgEven: var(--color-dark-300);
|
|
244
|
-
--color-table-body-bgEven: var(--table-body-bgEven);
|
|
245
|
-
--table-body-text: var(--color-gray-200);
|
|
246
|
-
--color-table-body-text: var(--table-body-text);
|
|
247
|
-
--table-body-border: var(--color-dark-400);
|
|
248
|
-
--color-table-body-border: var(--table-body-border);
|
|
249
|
-
--pagination-bg-hover: var(--color-dark-300);
|
|
250
|
-
--color-pagination-bg-hover: var(--pagination-bg-hover);
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
@theme .topnav-standard {
|
|
254
|
-
--bg-topnav: var(--color-white);
|
|
255
|
-
--color-bg-topnav: var(--bg-topnav);
|
|
256
|
-
--text-topnav-standard: var(--color-dark-300);
|
|
257
|
-
--color-text-topnav-standard: var(--text-topnav-standard);
|
|
258
|
-
--text-topnav-active: var(--color-blue-500);
|
|
259
|
-
--color-text-topnav-active: var(--text-topnav-active);
|
|
260
|
-
--text-topnav-sub: var(--color-gray-600);
|
|
261
|
-
--color-text-topnav-sub: var(--text-topnav-sub);
|
|
262
|
-
--border-topnav: var(--color-gray-300);
|
|
263
|
-
--color-border-topnav: var(--border-topnav);
|
|
264
|
-
--spacing-topnav-x: var(--spacing-common-x);
|
|
265
|
-
--spacing-topnav-y: var(--spacing-common-y);
|
|
266
|
-
--spacing-topnav-gap: var(--spacing-common-x);
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
@theme .topnav-dark {
|
|
270
|
-
--bg-topnav: var(--color-dark-200);
|
|
271
135
|
--color-bg-topnav: var(--bg-topnav);
|
|
272
|
-
--text-topnav-standard: var(--color-white);
|
|
273
136
|
--color-text-topnav-standard: var(--text-topnav-standard);
|
|
274
|
-
--text-topnav-active: var(--color-blue-400);
|
|
275
137
|
--color-text-topnav-active: var(--text-topnav-active);
|
|
276
|
-
--text-topnav-sub: var(--color-dark-600);
|
|
277
138
|
--color-text-topnav-sub: var(--text-topnav-sub);
|
|
278
|
-
--border-topnav: var(--color-dark-400);
|
|
279
139
|
--color-border-topnav: var(--border-topnav);
|
|
280
|
-
--spacing-topnav-x: var(--spacing-common-x);
|
|
281
|
-
--spacing-topnav-y: var(--spacing-common-y);
|
|
282
|
-
--spacing-topnav-gap: var(--spacing-common-x);
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
@theme .sidenav-standard {
|
|
286
|
-
--bg-sidenav: var(--color-white);
|
|
287
140
|
--color-bg-sidenav: var(--bg-sidenav);
|
|
288
|
-
--text-sidenav-standard: var(--color-dark-300);
|
|
289
141
|
--color-text-sidenav-standard: var(--text-sidenav-standard);
|
|
290
|
-
--text-sidenav-active: var(--color-blue-500);
|
|
291
142
|
--color-text-sidenav-active: var(--text-sidenav-active);
|
|
292
|
-
--text-sidenav-sub: var(--color-gray-600);
|
|
293
143
|
--color-text-sidenav-sub: var(--text-sidenav-sub);
|
|
294
|
-
--border-sidenav: var(--color-gray-300);
|
|
295
144
|
--color-border-sidenav: var(--border-sidenav);
|
|
296
|
-
|
|
297
|
-
--spacing-sidenav-y: var(--spacing-common-y);
|
|
298
|
-
--spacing-sidenav-gap: var(--spacing-common-x);
|
|
299
|
-
}
|
|
145
|
+
}
|
|
300
146
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
147
|
+
.white {
|
|
148
|
+
--bg-card: var(--color-white);
|
|
149
|
+
--bg-wrapper: var(--color-gray-200);
|
|
150
|
+
--bg-input-standard: var(--color-gray-100);
|
|
151
|
+
--bg-input-hover: var(--color-gray-200);
|
|
152
|
+
--bg-input-disabled: var(--color-gray-500);
|
|
153
|
+
--text-standard: var(--color-dark-300);
|
|
154
|
+
--text-active: var(--color-gray-100);
|
|
155
|
+
--text-placeholder: var(--color-gray-950);
|
|
156
|
+
--text-disabled: var(--color-gray-950);
|
|
157
|
+
--border-standard: var(--color-gray-500);
|
|
158
|
+
--border-active: var(--color-dark-400);
|
|
159
|
+
--button-primary-bg-disabled: var(--color-blue-200);
|
|
160
|
+
--button-primary-text-disabled: var(--color-blue-400);
|
|
161
|
+
--button-primary-border-disabled: var(--color-blue-200);
|
|
162
|
+
--button-secondary-bg-disabled: var(--color-indigo-200);
|
|
163
|
+
--button-secondary-text-disabled: var(--color-indigo-400);
|
|
164
|
+
--button-secondary-border-disabled: var(--color-indigo-200);
|
|
165
|
+
--button-success-bg-disabled: var(--color-green-200);
|
|
166
|
+
--button-success-text-disabled: var(--color-green-400);
|
|
167
|
+
--button-success-border-disabled: var(--color-green-200);
|
|
168
|
+
--button-danger-bg-disabled: var(--color-red-200);
|
|
169
|
+
--button-danger-text-disabled: var(--color-red-400);
|
|
170
|
+
--button-danger-border-disabled: var(--color-red-200);
|
|
171
|
+
--button-warning-bg-disabled: var(--color-yellow-200);
|
|
172
|
+
--button-warning-text-disabled: var(--color-yellow-400);
|
|
173
|
+
--button-warning-border-disabled: var(--color-yellow-200);
|
|
174
|
+
--button-gray-bg-disabled: var(--color-gray-200);
|
|
175
|
+
--button-gray-text-disabled: var(--color-gray-500);
|
|
176
|
+
--button-gray-border-disabled: var(--color-gray-300);
|
|
177
|
+
--table-header-bg: var(--color-gray-400);
|
|
178
|
+
--table-header-text: var(--color-dark-500);
|
|
179
|
+
--table-header-border: var(--color-gray-500);
|
|
180
|
+
--table-body-bg: var(--color-white);
|
|
181
|
+
--table-body-bgEven: var(--color-gray-100);
|
|
182
|
+
--table-body-text: var(--color-dark-300);
|
|
183
|
+
--table-body-border: var(--color-gray-300);
|
|
184
|
+
--pagination-bg-hover: var(--color-gray-100);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.dark {
|
|
188
|
+
--bg-card: var(--color-dark-200);
|
|
189
|
+
--bg-wrapper: var(--color-black);
|
|
190
|
+
--bg-input-standard: var(--color-dark-300);
|
|
191
|
+
--bg-input-hover: var(--color-dark-400);
|
|
192
|
+
--bg-input-disabled: var(--color-dark-200);
|
|
193
|
+
--text-standard: var(--color-white);
|
|
194
|
+
--text-active: var(--color-white);
|
|
195
|
+
--text-placeholder: var(--color-gray-950);
|
|
196
|
+
--text-disabled: var(--color-dark-400);
|
|
197
|
+
--border-standard: var(--color-dark-400);
|
|
198
|
+
--border-active: var(--color-gray-500);
|
|
199
|
+
--button-primary-bg-disabled: var(--color-blue-900);
|
|
200
|
+
--button-primary-text-disabled: var(--color-blue-700);
|
|
201
|
+
--button-primary-border-disabled: var(--color-blue-800);
|
|
202
|
+
--button-secondary-bg-disabled: var(--color-indigo-900);
|
|
203
|
+
--button-secondary-text-disabled: var(--color-indigo-700);
|
|
204
|
+
--button-secondary-border-disabled: var(--color-indigo-800);
|
|
205
|
+
--button-success-bg-disabled: var(--color-green-900);
|
|
206
|
+
--button-success-text-disabled: var(--color-green-700);
|
|
207
|
+
--button-success-border-disabled: var(--color-green-800);
|
|
208
|
+
--button-danger-bg-disabled: var(--color-red-900);
|
|
209
|
+
--button-danger-text-disabled: var(--color-red-700);
|
|
210
|
+
--button-danger-border-disabled: var(--color-red-800);
|
|
211
|
+
--button-warning-bg-disabled: var(--color-yellow-900);
|
|
212
|
+
--button-warning-text-disabled: var(--color-yellow-700);
|
|
213
|
+
--button-warning-border-disabled: var(--color-yellow-800);
|
|
214
|
+
--button-gray-bg-disabled: var(--color-gray-800);
|
|
215
|
+
--button-gray-text-disabled: var(--color-gray-600);
|
|
216
|
+
--button-gray-border-disabled: var(--color-gray-700);
|
|
217
|
+
--table-header-bg: var(--color-dark-400);
|
|
218
|
+
--table-header-text: var(--color-gray-200);
|
|
219
|
+
--table-header-border: var(--color-dark-600);
|
|
220
|
+
--table-body-bg: var(--color-dark-200);
|
|
221
|
+
--table-body-bgEven: var(--color-dark-300);
|
|
222
|
+
--table-body-text: var(--color-gray-200);
|
|
223
|
+
--table-body-border: var(--color-dark-400);
|
|
224
|
+
--pagination-bg-hover: var(--color-dark-300);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.topnav-standard {
|
|
228
|
+
--bg-topnav: var(--color-white);
|
|
229
|
+
--text-topnav-standard: var(--color-dark-300);
|
|
230
|
+
--text-topnav-active: var(--color-blue-500);
|
|
231
|
+
--text-topnav-sub: var(--color-gray-600);
|
|
232
|
+
--border-topnav: var(--color-gray-300);
|
|
233
|
+
--spacing-topnav-x: var(--spacing-common-x);
|
|
234
|
+
--spacing-topnav-y: var(--spacing-common-y);
|
|
235
|
+
--spacing-topnav-gap: var(--spacing-common-x);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.topnav-dark {
|
|
239
|
+
--bg-topnav: var(--color-dark-200);
|
|
240
|
+
--text-topnav-standard: var(--color-white);
|
|
241
|
+
--text-topnav-active: var(--color-blue-400);
|
|
242
|
+
--text-topnav-sub: var(--color-dark-600);
|
|
243
|
+
--border-topnav: var(--color-dark-400);
|
|
244
|
+
--spacing-topnav-x: var(--spacing-common-x);
|
|
245
|
+
--spacing-topnav-y: var(--spacing-common-y);
|
|
246
|
+
--spacing-topnav-gap: var(--spacing-common-x);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.sidenav-standard {
|
|
250
|
+
--bg-sidenav: var(--color-white);
|
|
251
|
+
--text-sidenav-standard: var(--color-dark-300);
|
|
252
|
+
--text-sidenav-active: var(--color-blue-500);
|
|
253
|
+
--text-sidenav-sub: var(--color-gray-600);
|
|
254
|
+
--border-sidenav: var(--color-gray-300);
|
|
255
|
+
--spacing-sidenav-x: var(--spacing-common-x);
|
|
256
|
+
--spacing-sidenav-y: var(--spacing-common-y);
|
|
257
|
+
--spacing-sidenav-gap: var(--spacing-common-x);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.sidenav-dark {
|
|
261
|
+
--bg-sidenav: var(--color-dark-200);
|
|
262
|
+
--text-sidenav-standard: var(--color-white);
|
|
263
|
+
--text-sidenav-active: var(--color-blue-400);
|
|
264
|
+
--text-sidenav-sub: var(--color-dark-600);
|
|
265
|
+
--border-sidenav: var(--color-dark-400);
|
|
266
|
+
--spacing-sidenav-x: var(--spacing-common-x);
|
|
267
|
+
--spacing-sidenav-y: var(--spacing-common-y);
|
|
268
|
+
--spacing-sidenav-gap: var(--spacing-common-x);
|
|
269
|
+
}
|
package/cli/init.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
import inquirer from "inquirer";
|
|
3
|
+
import ora from "ora";
|
|
3
4
|
import { exec } from "child_process";
|
|
4
5
|
import fs, { copyFileSync, mkdirSync, readdirSync } from "fs";
|
|
5
6
|
import path from "path";
|
|
@@ -44,24 +45,26 @@ inquirer
|
|
|
44
45
|
])
|
|
45
46
|
.then(async (answers) => {
|
|
46
47
|
if (answers.installPackages) {
|
|
47
|
-
|
|
48
|
+
const pkgSpinner = ora("Installing Next.js and React...").start();
|
|
48
49
|
|
|
49
50
|
try {
|
|
50
51
|
await execPromise(
|
|
51
52
|
"npm install next@latest react@latest react-dom@latest tailwindcss"
|
|
52
53
|
);
|
|
53
|
-
|
|
54
|
+
pkgSpinner.succeed("Next.js and React installation complete!");
|
|
54
55
|
} catch (err) {
|
|
55
|
-
|
|
56
|
+
pkgSpinner.fail("Error during Next.js/React installation");
|
|
57
|
+
console.error(err);
|
|
56
58
|
return;
|
|
57
59
|
}
|
|
58
60
|
|
|
59
|
-
|
|
61
|
+
const sdSpinner = ora("Installing style-dictionary for atom design tokens...").start();
|
|
60
62
|
try {
|
|
61
63
|
await execPromise("npm install style-dictionary -D");
|
|
62
|
-
|
|
64
|
+
sdSpinner.succeed("style-dictionary installation complete!");
|
|
63
65
|
} catch (err) {
|
|
64
|
-
|
|
66
|
+
sdSpinner.fail("Error during style-dictionary installation");
|
|
67
|
+
console.error(err);
|
|
65
68
|
return;
|
|
66
69
|
}
|
|
67
70
|
|
|
@@ -75,6 +78,10 @@ inquirer
|
|
|
75
78
|
packageJson.type = "module";
|
|
76
79
|
packageJson.scripts = {
|
|
77
80
|
...packageJson.scripts,
|
|
81
|
+
"dev": "node build/build-tokens.js && next dev",
|
|
82
|
+
"build": "next build",
|
|
83
|
+
"start": "next start",
|
|
84
|
+
"lint": "next lint",
|
|
78
85
|
"token-build": "node build/build-tokens.js",
|
|
79
86
|
};
|
|
80
87
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "atomsystem",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.29",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"homepage": "https://system.atomground.com",
|
|
6
6
|
"bin": {
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
"highlight.js": "^11.11.1",
|
|
42
42
|
"inquirer": "^12.4.2",
|
|
43
43
|
"next": "15.2.8",
|
|
44
|
+
"ora": "^9.3.0",
|
|
44
45
|
"react": "^18.0.0",
|
|
45
46
|
"react-dom": "^18.0.0",
|
|
46
47
|
"react-modal": "^3.16.3",
|