atomsystem 0.1.48 → 0.1.50

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.
Files changed (69) hide show
  1. package/README.md +147 -55
  2. package/atom.design.md +155 -0
  3. package/atom.uxPattern.md +431 -0
  4. package/components/ui/Badge.tsx +20 -0
  5. package/components/ui/Button.tsx +33 -0
  6. package/components/ui/Card.tsx +20 -0
  7. package/components/ui/Input.tsx +35 -0
  8. package/components/ui/Modal.tsx +54 -0
  9. package/components/ui/index.ts +5 -0
  10. package/css/atom-ui.css +216 -0
  11. package/dist/cli.cjs +105 -0
  12. package/dist/cli.cjs.map +1 -0
  13. package/dist/cli.d.cts +1 -0
  14. package/dist/cli.d.ts +1 -0
  15. package/dist/cli.js +97 -0
  16. package/dist/cli.js.map +1 -0
  17. package/dist/index.cjs +7897 -0
  18. package/dist/index.cjs.map +1 -0
  19. package/dist/index.d.cts +218 -0
  20. package/dist/index.d.ts +218 -0
  21. package/dist/index.js +7845 -451
  22. package/dist/index.js.map +1 -0
  23. package/package.json +120 -81
  24. package/presets/default.design.md +155 -0
  25. package/presets/uxPattern.md +431 -0
  26. package/skills/atomsystem.skill.md +104 -0
  27. package/tokens/token.json +319 -0
  28. package/tokens/tokens.json +318 -976
  29. package/app/templates/Animations/Animation.tsx +0 -282
  30. package/app/templates/Badge/Badge.tsx +0 -28
  31. package/app/templates/Badge/badge.css +0 -28
  32. package/app/templates/Button/Button.tsx +0 -31
  33. package/app/templates/Button/button.css +0 -135
  34. package/app/templates/Card/Card.tsx +0 -50
  35. package/app/templates/Card/card.css +0 -17
  36. package/app/templates/Checkbox/Checkbox.tsx +0 -55
  37. package/app/templates/Checkbox/checkbox.css +0 -38
  38. package/app/templates/CodeBlock/CodeBlock.tsx +0 -68
  39. package/app/templates/Collapse/Collapse.tsx +0 -207
  40. package/app/templates/Collapse/collapse.css +0 -24
  41. package/app/templates/Dropdown/Dropdown.css +0 -112
  42. package/app/templates/Dropdown/Dropdown.tsx +0 -103
  43. package/app/templates/Input/Input.tsx +0 -29
  44. package/app/templates/Input/input.css +0 -24
  45. package/app/templates/Label/Label.tsx +0 -22
  46. package/app/templates/Modal/Modal.tsx +0 -71
  47. package/app/templates/Modal/modal.css +0 -98
  48. package/app/templates/Navigation/Navigation.tsx +0 -169
  49. package/app/templates/Navigation/navigation.css +0 -59
  50. package/app/templates/Pagination/Pagination.tsx +0 -104
  51. package/app/templates/Pagination/pagination.css +0 -66
  52. package/app/templates/Radio/Radio.tsx +0 -45
  53. package/app/templates/Radio/radio.css +0 -29
  54. package/app/templates/Select/Select.tsx +0 -143
  55. package/app/templates/Select/select.css +0 -47
  56. package/app/templates/Sidebar/Sidebar.tsx +0 -139
  57. package/app/templates/Sidebar/sidebar.css +0 -4
  58. package/app/templates/TOC/TOC.tsx +0 -165
  59. package/app/templates/Tab/Tab.tsx +0 -117
  60. package/app/templates/Tab/tab.css +0 -56
  61. package/app/templates/Table/Table.tsx +0 -54
  62. package/app/templates/Table/table.css +0 -58
  63. package/app/templates/Theme/Theme.tsx +0 -122
  64. package/app/templates/Toast/Toast.tsx +0 -106
  65. package/app/templates/Toast/toast.css +0 -69
  66. package/build/build-tokens.js +0 -223
  67. package/build/css/_variables.css +0 -251
  68. package/build/typescript/theme.ts +0 -6
  69. package/css/text.css +0 -18
package/build/css/_variables.css DELETED
@@ -1,251 +0,0 @@
1
- @theme {
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;
97
-
98
- --color-bg-card: var(--bg-card);
99
- --color-bg-wrapper: var(--bg-wrapper);
100
- --color-bg-hover: var(--bg-hover);
101
- --color-bg-input-standard: var(--bg-input-standard);
102
- --color-bg-input-hover: var(--bg-input-hover);
103
- --color-bg-input-disabled: var(--bg-input-disabled);
104
- --color-text-title: var(--text-title);
105
- --color-text-body: var(--text-body);
106
- --color-text-sub: var(--text-sub);
107
- --color-text-standard: var(--text-standard);
108
- --color-text-active: var(--text-active);
109
- --color-text-placeholder: var(--text-placeholder);
110
- --color-text-disabled: var(--text-disabled);
111
- --color-border-standard: var(--border-standard);
112
- --color-border-active: var(--border-active);
113
- --color-button-primary-bg-disabled: var(--button-primary-bg-disabled);
114
- --color-button-primary-text-disabled: var(--button-primary-text-disabled);
115
- --color-button-primary-border-disabled: var(--button-primary-border-disabled);
116
- --color-button-secondary-bg-disabled: var(--button-secondary-bg-disabled);
117
- --color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
118
- --color-button-secondary-border-disabled: var(--button-secondary-border-disabled);
119
- --color-button-success-bg-disabled: var(--button-success-bg-disabled);
120
- --color-button-success-text-disabled: var(--button-success-text-disabled);
121
- --color-button-success-border-disabled: var(--button-success-border-disabled);
122
- --color-button-danger-bg-disabled: var(--button-danger-bg-disabled);
123
- --color-button-danger-text-disabled: var(--button-danger-text-disabled);
124
- --color-button-danger-border-disabled: var(--button-danger-border-disabled);
125
- --color-button-warning-bg-disabled: var(--button-warning-bg-disabled);
126
- --color-button-warning-text-disabled: var(--button-warning-text-disabled);
127
- --color-button-warning-border-disabled: var(--button-warning-border-disabled);
128
- --color-button-gray-bg-disabled: var(--button-gray-bg-disabled);
129
- --color-button-gray-text-disabled: var(--button-gray-text-disabled);
130
- --color-button-gray-border-disabled: var(--button-gray-border-disabled);
131
- --color-table-header-bg: var(--table-header-bg);
132
- --color-table-header-text: var(--table-header-text);
133
- --color-table-header-border: var(--table-header-border);
134
- --color-table-body-bg: var(--table-body-bg);
135
- --color-table-body-bgEven: var(--table-body-bgEven);
136
- --color-table-body-text: var(--table-body-text);
137
- --color-table-body-border: var(--table-body-border);
138
- --color-pagination-bg-hover: var(--pagination-bg-hover);
139
- --color-callout-note-bg: var(--callout-note-bg);
140
- --color-callout-note-text: var(--callout-note-text);
141
- --color-callout-tip-bg: var(--callout-tip-bg);
142
- --color-callout-tip-text: var(--callout-tip-text);
143
- --color-callout-danger-bg: var(--callout-danger-bg);
144
- --color-callout-danger-text: var(--callout-danger-text);
145
- --color-callout-warning-bg: var(--callout-warning-bg);
146
- --color-callout-warning-text: var(--callout-warning-text);
147
- }
148
-
149
- .white {
150
- --bg-card: var(--color-white);
151
- --bg-wrapper: var(--color-gray-200);
152
- --bg-hover: var(--color-gray-200);
153
- --bg-input-standard: var(--color-gray-100);
154
- --bg-input-hover: var(--color-gray-200);
155
- --bg-input-disabled: var(--color-gray-500);
156
- --text-title: var(--color-dark-100);
157
- --text-body: var(--color-dark-400);
158
- --text-sub: var(--color-gray-950);
159
- --text-standard: var(--color-dark-300);
160
- --text-active: var(--color-gray-100);
161
- --text-placeholder: var(--color-gray-950);
162
- --text-disabled: var(--color-gray-950);
163
- --border-standard: var(--color-gray-500);
164
- --border-active: var(--color-dark-400);
165
- --button-primary-bg-disabled: var(--color-blue-200);
166
- --button-primary-text-disabled: var(--color-blue-400);
167
- --button-primary-border-disabled: var(--color-blue-200);
168
- --button-secondary-bg-disabled: var(--color-indigo-200);
169
- --button-secondary-text-disabled: var(--color-indigo-400);
170
- --button-secondary-border-disabled: var(--color-indigo-200);
171
- --button-success-bg-disabled: var(--color-green-200);
172
- --button-success-text-disabled: var(--color-green-400);
173
- --button-success-border-disabled: var(--color-green-200);
174
- --button-danger-bg-disabled: var(--color-red-200);
175
- --button-danger-text-disabled: var(--color-red-400);
176
- --button-danger-border-disabled: var(--color-red-200);
177
- --button-warning-bg-disabled: var(--color-yellow-200);
178
- --button-warning-text-disabled: var(--color-yellow-400);
179
- --button-warning-border-disabled: var(--color-yellow-200);
180
- --button-gray-bg-disabled: var(--color-gray-200);
181
- --button-gray-text-disabled: var(--color-gray-500);
182
- --button-gray-border-disabled: var(--color-gray-300);
183
- --table-header-bg: var(--color-gray-400);
184
- --table-header-text: var(--color-dark-500);
185
- --table-header-border: var(--color-gray-500);
186
- --table-body-bg: var(--color-white);
187
- --table-body-bgEven: var(--color-gray-100);
188
- --table-body-text: var(--color-dark-300);
189
- --table-body-border: var(--color-gray-300);
190
- --pagination-bg-hover: var(--color-gray-100);
191
- --callout-note-bg: var(--color-gray-100);
192
- --callout-note-text: var(--color-gray-900);
193
- --callout-tip-bg: var(--color-green-100);
194
- --callout-tip-text: var(--color-green-900);
195
- --callout-danger-bg: var(--color-red-100);
196
- --callout-danger-text: var(--color-red-900);
197
- --callout-warning-bg: var(--color-yellow-100);
198
- --callout-warning-text: var(--color-yellow-900);
199
- }
200
-
201
- .dark {
202
- --bg-card: var(--color-dark-200);
203
- --bg-wrapper: var(--color-black);
204
- --bg-hover: var(--color-dark-400);
205
- --bg-input-standard: var(--color-dark-300);
206
- --bg-input-hover: var(--color-dark-400);
207
- --bg-input-disabled: var(--color-dark-200);
208
- --text-title: var(--color-white);
209
- --text-body: var(--color-gray-200);
210
- --text-sub: var(--color-gray-600);
211
- --text-standard: var(--color-white);
212
- --text-active: var(--color-white);
213
- --text-placeholder: var(--color-gray-950);
214
- --text-disabled: var(--color-dark-400);
215
- --border-standard: var(--color-dark-400);
216
- --border-active: var(--color-gray-500);
217
- --button-primary-bg-disabled: var(--color-blue-900);
218
- --button-primary-text-disabled: var(--color-blue-700);
219
- --button-primary-border-disabled: var(--color-blue-800);
220
- --button-secondary-bg-disabled: var(--color-indigo-900);
221
- --button-secondary-text-disabled: var(--color-indigo-700);
222
- --button-secondary-border-disabled: var(--color-indigo-800);
223
- --button-success-bg-disabled: var(--color-green-900);
224
- --button-success-text-disabled: var(--color-green-700);
225
- --button-success-border-disabled: var(--color-green-800);
226
- --button-danger-bg-disabled: var(--color-red-900);
227
- --button-danger-text-disabled: var(--color-red-700);
228
- --button-danger-border-disabled: var(--color-red-800);
229
- --button-warning-bg-disabled: var(--color-yellow-900);
230
- --button-warning-text-disabled: var(--color-yellow-700);
231
- --button-warning-border-disabled: var(--color-yellow-800);
232
- --button-gray-bg-disabled: var(--color-gray-800);
233
- --button-gray-text-disabled: var(--color-gray-600);
234
- --button-gray-border-disabled: var(--color-gray-700);
235
- --table-header-bg: var(--color-dark-400);
236
- --table-header-text: var(--color-gray-200);
237
- --table-header-border: var(--color-dark-600);
238
- --table-body-bg: var(--color-dark-200);
239
- --table-body-bgEven: var(--color-dark-300);
240
- --table-body-text: var(--color-gray-200);
241
- --table-body-border: var(--color-dark-400);
242
- --pagination-bg-hover: var(--color-dark-300);
243
- --callout-note-bg: var(--color-dark-300);
244
- --callout-note-text: var(--color-white);
245
- --callout-tip-bg: var(--color-green-950);
246
- --callout-tip-text: var(--color-green-200);
247
- --callout-danger-bg: var(--color-red-950);
248
- --callout-danger-text: var(--color-red-200);
249
- --callout-warning-bg: var(--color-yellow-950);
250
- --callout-warning-text: var(--color-yellow-200);
251
- }
package/build/typescript/theme.ts DELETED
@@ -1,6 +0,0 @@
1
- export const themes: Record<string, string[]> = {
2
- "global": [
3
- "white",
4
- "dark"
5
- ]
6
- };
package/css/text.css DELETED
@@ -1,18 +0,0 @@
1
- body{
2
- @apply text-text-standard
3
- }
4
-
5
- h1, h2, h3, h4, h5, h6 {
6
- @apply text-text-title font-header
7
- }
8
-
9
- h1{ @apply text-h1 }
10
- h2{ @apply text-h2 }
11
- h3{ @apply text-h3 }
12
- h4{ @apply text-h4 }
13
- h5{ @apply text-h5 }
14
- h6{ @apply text-h6 }
15
-
16
- p{
17
- @apply text-text-body text-body
18
- }