atomsystem 0.1.37 → 0.1.39

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 (16) hide show
  1. package/app/templates/Button/Button.tsx +7 -3
  2. package/app/templates/Button/button.css +106 -46
  3. package/app/templates/Dropdown/Dropdown.css +112 -0
  4. package/app/templates/Dropdown/Dropdown.tsx +103 -0
  5. package/app/templates/Form/Form.tsx +1 -1
  6. package/app/templates/Navigation/Navigation.tsx +34 -287
  7. package/app/templates/Navigation/navigation.css +11 -64
  8. package/app/templates/Sidemenu/Sidemenu.tsx +55 -0
  9. package/app/templates/Sidemenu/sidemenu.css +4 -0
  10. package/build/css/_variables.css +250 -366
  11. package/build/typescript/theme.ts +5 -13
  12. package/cli/add.js +3 -0
  13. package/cli/init.js +1 -1
  14. package/css/text.css +11 -18
  15. package/package.json +5 -2
  16. package/tokens/tokens.json +266 -238
package/build/css/_variables.css CHANGED
@@ -1,367 +1,251 @@
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-input-standard: var(--bg-input-standard);
101
- --color-bg-input-hover: var(--bg-input-hover);
102
- --color-bg-input-disabled: var(--bg-input-disabled);
103
- --color-text-standard: var(--text-standard);
104
- --color-text-active: var(--text-active);
105
- --color-text-placeholder: var(--text-placeholder);
106
- --color-text-disabled: var(--text-disabled);
107
- --color-border-standard: var(--border-standard);
108
- --color-border-active: var(--border-active);
109
- --color-button-primary-bg-disabled: var(--button-primary-bg-disabled);
110
- --color-button-primary-text-disabled: var(--button-primary-text-disabled);
111
- --color-button-primary-border-disabled: var(--button-primary-border-disabled);
112
- --color-button-secondary-bg-disabled: var(--button-secondary-bg-disabled);
113
- --color-button-secondary-text-disabled: var(--button-secondary-text-disabled);
114
- --color-button-secondary-border-disabled: var(--button-secondary-border-disabled);
115
- --color-button-success-bg-disabled: var(--button-success-bg-disabled);
116
- --color-button-success-text-disabled: var(--button-success-text-disabled);
117
- --color-button-success-border-disabled: var(--button-success-border-disabled);
118
- --color-button-danger-bg-disabled: var(--button-danger-bg-disabled);
119
- --color-button-danger-text-disabled: var(--button-danger-text-disabled);
120
- --color-button-danger-border-disabled: var(--button-danger-border-disabled);
121
- --color-button-warning-bg-disabled: var(--button-warning-bg-disabled);
122
- --color-button-warning-text-disabled: var(--button-warning-text-disabled);
123
- --color-button-warning-border-disabled: var(--button-warning-border-disabled);
124
- --color-button-gray-bg-disabled: var(--button-gray-bg-disabled);
125
- --color-button-gray-text-disabled: var(--button-gray-text-disabled);
126
- --color-button-gray-border-disabled: var(--button-gray-border-disabled);
127
- --color-table-header-bg: var(--table-header-bg);
128
- --color-table-header-text: var(--table-header-text);
129
- --color-table-header-border: var(--table-header-border);
130
- --color-table-body-bg: var(--table-body-bg);
131
- --color-table-body-bgEven: var(--table-body-bgEven);
132
- --color-table-body-text: var(--table-body-text);
133
- --color-table-body-border: var(--table-body-border);
134
- --color-pagination-bg-hover: var(--pagination-bg-hover);
135
- --color-bg-topnav: var(--bg-topnav);
136
- --color-text-topnav-standard: var(--text-topnav-standard);
137
- --color-text-topnav-active: var(--text-topnav-active);
138
- --color-text-topnav-sub: var(--text-topnav-sub);
139
- --color-border-topnav: var(--border-topnav);
140
- --color-bg-sidenav: var(--bg-sidenav);
141
- --color-text-sidenav-standard: var(--text-sidenav-standard);
142
- --color-text-sidenav-active: var(--text-sidenav-active);
143
- --color-text-sidenav-sub: var(--text-sidenav-sub);
144
- --color-border-sidenav: var(--border-sidenav);
145
- }
146
-
147
- :root {
148
- --color-gray-100: #f5f5f5;
149
- --color-gray-200: #e6e6e6;
150
- --color-gray-300: #dbdbdb;
151
- --color-gray-400: #d4d4d4;
152
- --color-gray-500: #cccccc;
153
- --color-gray-600: #bfbfbf;
154
- --color-gray-700: #b3b3b3;
155
- --color-gray-800: #a6a6a6;
156
- --color-gray-900: #999999;
157
- --color-gray-950: #707070;
158
- --color-dark-100: #111111;
159
- --color-dark-200: #222222;
160
- --color-dark-300: #333333;
161
- --color-dark-400: #444444;
162
- --color-dark-500: #555555;
163
- --color-dark-600: #666666;
164
- --color-dark-700: #777777;
165
- --color-dark-800: #888888;
166
- --color-dark-900: #999999;
167
- --color-dark-950: #b2b2b2;
168
- --color-blue-100: #e3f2fd;
169
- --color-blue-200: #bbdefb;
170
- --color-blue-300: #90caf9;
171
- --color-blue-400: #64b5f6;
172
- --color-blue-500: #2196f3;
173
- --color-blue-600: #1e88e5;
174
- --color-blue-700: #1976d2;
175
- --color-blue-800: #1565c0;
176
- --color-blue-900: #0d47a1;
177
- --color-blue-950: #0a2f6b;
178
- --color-indigo-100: #e8eaf6;
179
- --color-indigo-200: #c5cae9;
180
- --color-indigo-300: #7986cb;
181
- --color-indigo-400: #3f51b5;
182
- --color-indigo-500: #162c4e;
183
- --color-indigo-600: #122542;
184
- --color-indigo-700: #0e1d35;
185
- --color-indigo-800: #0a1628;
186
- --color-indigo-900: #070f1b;
187
- --color-indigo-950: #04080e;
188
- --color-red-100: #ffebee;
189
- --color-red-200: #ffcdd2;
190
- --color-red-300: #ef9a9a;
191
- --color-red-400: #e57373;
192
- --color-red-500: #f44336;
193
- --color-red-600: #e53935;
194
- --color-red-700: #d32f2f;
195
- --color-red-800: #c62828;
196
- --color-red-900: #b71c1c;
197
- --color-red-950: #7f1212;
198
- --color-yellow-100: #fff8e1;
199
- --color-yellow-200: #ffecb3;
200
- --color-yellow-300: #ffe082;
201
- --color-yellow-400: #ffd54f;
202
- --color-yellow-500: #ffb300;
203
- --color-yellow-600: #ffa000;
204
- --color-yellow-700: #ff8f00;
205
- --color-yellow-800: #ff6f00;
206
- --color-yellow-900: #e65100;
207
- --color-yellow-950: #9e3600;
208
- --color-green-100: #e8f5e9;
209
- --color-green-200: #c8e6c9;
210
- --color-green-300: #a5d6a7;
211
- --color-green-400: #81c784;
212
- --color-green-500: #4caf50;
213
- --color-green-600: #43a047;
214
- --color-green-700: #388e3c;
215
- --color-green-800: #2e7d32;
216
- --color-green-900: #1b5e20;
217
- --color-green-950: #104015;
218
- --color-black: #111111;
219
- --color-white: #fafafa;
220
- --color-primary: var(--color-blue-500);
221
- --color-secondary: var(--color-indigo-500);
222
- --color-danger: var(--color-red-500);
223
- --color-warning: var(--color-yellow-500);
224
- --color-info: var(--color-gray-900);
225
- --color-success: var(--color-green-500);
226
- --text-h1: 40px;
227
- --text-h2: 36px;
228
- --text-h3: 28px;
229
- --text-h4: 24px;
230
- --text-h5: 20px;
231
- --text-h6: 16px;
232
- --text-body: 16px;
233
- --text-sm: 12px;
234
- --font-weight-header: 700;
235
- --radius-common: 4px;
236
- --radius-circle: 10000000px;
237
- --font-spoqaNeo: Spoqa Han Sans Neo;
238
- --spacing-common-y: 12px;
239
- --spacing-common-x: 16px;
240
- --spacing-gap-small: 4px;
241
- --spacing-sm-y: 8px;
242
- --spacing-small: 20px;
243
- }
244
-
245
- .white {
246
- --bg-card: var(--color-white);
247
- --bg-wrapper: var(--color-gray-200);
248
- --bg-input-standard: var(--color-gray-100);
249
- --bg-input-hover: var(--color-gray-200);
250
- --bg-input-disabled: var(--color-gray-500);
251
- --text-standard: var(--color-dark-300);
252
- --text-active: var(--color-gray-100);
253
- --text-placeholder: var(--color-gray-950);
254
- --text-disabled: var(--color-gray-950);
255
- --border-standard: var(--color-gray-500);
256
- --border-active: var(--color-dark-400);
257
- --button-primary-bg-disabled: var(--color-blue-200);
258
- --button-primary-text-disabled: var(--color-blue-400);
259
- --button-primary-border-disabled: var(--color-blue-200);
260
- --button-secondary-bg-disabled: var(--color-indigo-200);
261
- --button-secondary-text-disabled: var(--color-indigo-400);
262
- --button-secondary-border-disabled: var(--color-indigo-200);
263
- --button-success-bg-disabled: var(--color-green-200);
264
- --button-success-text-disabled: var(--color-green-400);
265
- --button-success-border-disabled: var(--color-green-200);
266
- --button-danger-bg-disabled: var(--color-red-200);
267
- --button-danger-text-disabled: var(--color-red-400);
268
- --button-danger-border-disabled: var(--color-red-200);
269
- --button-warning-bg-disabled: var(--color-yellow-200);
270
- --button-warning-text-disabled: var(--color-yellow-400);
271
- --button-warning-border-disabled: var(--color-yellow-200);
272
- --button-gray-bg-disabled: var(--color-gray-200);
273
- --button-gray-text-disabled: var(--color-gray-500);
274
- --button-gray-border-disabled: var(--color-gray-300);
275
- --table-header-bg: var(--color-gray-400);
276
- --table-header-text: var(--color-dark-500);
277
- --table-header-border: var(--color-gray-500);
278
- --table-body-bg: var(--color-white);
279
- --table-body-bgEven: var(--color-gray-100);
280
- --table-body-text: var(--color-dark-300);
281
- --table-body-border: var(--color-gray-300);
282
- --pagination-bg-hover: var(--color-gray-100);
283
- }
284
-
285
- .dark {
286
- --bg-card: var(--color-dark-200);
287
- --bg-wrapper: var(--color-black);
288
- --bg-input-standard: var(--color-dark-300);
289
- --bg-input-hover: var(--color-dark-400);
290
- --bg-input-disabled: var(--color-dark-200);
291
- --text-standard: var(--color-white);
292
- --text-active: var(--color-white);
293
- --text-placeholder: var(--color-gray-950);
294
- --text-disabled: var(--color-dark-400);
295
- --border-standard: var(--color-dark-400);
296
- --border-active: var(--color-gray-500);
297
- --button-primary-bg-disabled: var(--color-blue-900);
298
- --button-primary-text-disabled: var(--color-blue-700);
299
- --button-primary-border-disabled: var(--color-blue-800);
300
- --button-secondary-bg-disabled: var(--color-indigo-900);
301
- --button-secondary-text-disabled: var(--color-indigo-700);
302
- --button-secondary-border-disabled: var(--color-indigo-800);
303
- --button-success-bg-disabled: var(--color-green-900);
304
- --button-success-text-disabled: var(--color-green-700);
305
- --button-success-border-disabled: var(--color-green-800);
306
- --button-danger-bg-disabled: var(--color-red-900);
307
- --button-danger-text-disabled: var(--color-red-700);
308
- --button-danger-border-disabled: var(--color-red-800);
309
- --button-warning-bg-disabled: var(--color-yellow-900);
310
- --button-warning-text-disabled: var(--color-yellow-700);
311
- --button-warning-border-disabled: var(--color-yellow-800);
312
- --button-gray-bg-disabled: var(--color-gray-800);
313
- --button-gray-text-disabled: var(--color-gray-600);
314
- --button-gray-border-disabled: var(--color-gray-700);
315
- --table-header-bg: var(--color-dark-400);
316
- --table-header-text: var(--color-gray-200);
317
- --table-header-border: var(--color-dark-600);
318
- --table-body-bg: var(--color-dark-200);
319
- --table-body-bgEven: var(--color-dark-300);
320
- --table-body-text: var(--color-gray-200);
321
- --table-body-border: var(--color-dark-400);
322
- --pagination-bg-hover: var(--color-dark-300);
323
- }
324
-
325
- .topnav-standard {
326
- --bg-topnav: var(--color-white);
327
- --text-topnav-standard: var(--color-dark-300);
328
- --text-topnav-active: var(--color-blue-500);
329
- --text-topnav-sub: var(--color-gray-600);
330
- --border-topnav: var(--color-gray-300);
331
- --spacing-topnav-x: var(--spacing-common-x);
332
- --spacing-topnav-y: var(--spacing-common-y);
333
- --spacing-topnav-gap: var(--spacing-common-x);
334
- }
335
-
336
- .topnav-dark {
337
- --bg-topnav: var(--color-dark-200);
338
- --text-topnav-standard: var(--color-white);
339
- --text-topnav-active: var(--color-blue-400);
340
- --text-topnav-sub: var(--color-dark-600);
341
- --border-topnav: var(--color-dark-400);
342
- --spacing-topnav-x: var(--spacing-common-x);
343
- --spacing-topnav-y: var(--spacing-common-y);
344
- --spacing-topnav-gap: var(--spacing-common-x);
345
- }
346
-
347
- .sidenav-standard {
348
- --bg-sidenav: var(--color-white);
349
- --text-sidenav-standard: var(--color-dark-300);
350
- --text-sidenav-active: var(--color-blue-500);
351
- --text-sidenav-sub: var(--color-gray-600);
352
- --border-sidenav: var(--color-gray-300);
353
- --spacing-sidenav-x: var(--spacing-common-x);
354
- --spacing-sidenav-y: var(--spacing-common-y);
355
- --spacing-sidenav-gap: var(--spacing-common-x);
356
- }
357
-
358
- .sidenav-dark {
359
- --bg-sidenav: var(--color-dark-200);
360
- --text-sidenav-standard: var(--color-white);
361
- --text-sidenav-active: var(--color-blue-400);
362
- --text-sidenav-sub: var(--color-dark-600);
363
- --border-sidenav: var(--color-dark-400);
364
- --spacing-sidenav-x: var(--spacing-common-x);
365
- --spacing-sidenav-y: var(--spacing-common-y);
366
- --spacing-sidenav-gap: var(--spacing-common-x);
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);
367
251
  }
package/build/typescript/theme.ts CHANGED
@@ -1,14 +1,6 @@
1
- export const themes: Record<string, string[]> = {
2
- "global": [
3
- "white",
4
- "dark"
5
- ],
6
- "topnav": [
7
- "topnav-standard",
8
- "topnav-dark"
9
- ],
10
- "sidenav": [
11
- "sidenav-standard",
12
- "sidenav-dark"
13
- ]
1
+ export const themes: Record<string, string[]> = {
2
+ "global": [
3
+ "white",
4
+ "dark"
5
+ ]
14
6
  };