@tutorialkit-rb/theme 1.5.2-rb.0.1.0

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 (11) hide show
  1. package/dist/index.d.ts +7 -0
  2. package/dist/index.js +76 -0
  3. package/dist/index.spec.d.ts +1 -0
  4. package/dist/index.spec.js +12 -0
  5. package/dist/theme.d.ts +339 -0
  6. package/dist/theme.js +342 -0
  7. package/dist/transition-theme.d.ts +5 -0
  8. package/dist/transition-theme.js +6 -0
  9. package/dist/utils.d.ts +3 -0
  10. package/dist/utils.js +3 -0
  11. package/package.json +50 -0
package/dist/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { type UserConfig } from 'unocss';
2
+ export declare function defineConfig(config: UserConfig): UserConfig<object>;
3
+ export declare function getInlineContentForPackage({ name, pattern, root }: {
4
+ name: string;
5
+ pattern: string;
6
+ root: string;
7
+ }): (() => Promise<string>)[];
package/dist/index.js ADDED
@@ -0,0 +1,76 @@
1
+ import fs from 'node:fs/promises';
2
+ import { createRequire } from 'node:module';
3
+ import { basename, dirname, resolve } from 'node:path';
4
+ import * as fastGlob from 'fast-glob';
5
+ import { mergeConfigs, presetIcons, presetUno, transformerDirectives } from 'unocss';
6
+ import { theme } from './theme.js';
7
+ import { transitionTheme } from './transition-theme.js';
8
+ import { toCSSRules } from './utils.js';
9
+ const { globSync, convertPathToPattern } = fastGlob.default;
10
+ const require = createRequire(import.meta.url);
11
+ export function defineConfig(config) {
12
+ return mergeConfigs([
13
+ {
14
+ theme,
15
+ shortcuts,
16
+ rules,
17
+ transformers: [transformerDirectives()],
18
+ content: {
19
+ inline: getInlineContentForPackage({
20
+ name: '@tutorialkit-rb/react',
21
+ pattern: '/dist/**/*.js',
22
+ root: process.cwd(),
23
+ }),
24
+ },
25
+ presets: [
26
+ presetUno({
27
+ dark: {
28
+ dark: '[data-theme="dark"]',
29
+ },
30
+ }),
31
+ presetIcons({
32
+ collections: {
33
+ ...readCustomIcons(),
34
+ ph: () => import('@iconify-json/ph').then((i) => i.icons),
35
+ 'svg-spinners': () => import('@iconify-json/svg-spinners').then((i) => i.icons),
36
+ },
37
+ }),
38
+ ],
39
+ },
40
+ config,
41
+ ]);
42
+ }
43
+ export function getInlineContentForPackage({ name, pattern, root }) {
44
+ try {
45
+ const packageRoot = resolve(require.resolve(`${name}/package.json`, { paths: [root] }), '..');
46
+ // work-around for https://github.com/mrmlnc/fast-glob/issues/452
47
+ const packagePattern = convertPathToPattern(packageRoot.replaceAll('\\@', '/@'));
48
+ return globSync(`${packagePattern}${pattern}`).map((filePath) => () => fs.readFile(filePath, { encoding: 'utf8' }));
49
+ }
50
+ catch {
51
+ return [];
52
+ }
53
+ }
54
+ function readCustomIcons() {
55
+ const iconPaths = globSync('./icons/**/*.svg');
56
+ return iconPaths.reduce((acc, iconPath) => {
57
+ const collectionName = basename(dirname(iconPath));
58
+ const [iconName] = basename(iconPath).split('.');
59
+ acc[collectionName] ??= {};
60
+ acc[collectionName][iconName] = async () => fs.readFile(iconPath, 'utf8');
61
+ return acc;
62
+ }, {});
63
+ }
64
+ const rules = [
65
+ ['scrollbar-transparent', { 'scrollbar-color': '#0000004d transparent' }],
66
+ ['nav-box-shadow', { 'box-shadow': '0 2px 4px -1px rgba(0, 0, 0, 0.1)' }],
67
+ ['transition-theme', toCSSRules(transitionTheme)],
68
+ ];
69
+ const shortcuts = {
70
+ 'panel-container': 'grid grid-rows-[min-content_1fr] h-full',
71
+ 'panel-header': 'flex items-center px-4 py-2 transition-theme bg-tk-elements-panel-header-backgroundColor min-h-[38px] overflow-x-hidden',
72
+ 'panel-tabs-header': 'flex transition-theme bg-tk-elements-panel-header-backgroundColor h-[38px]',
73
+ 'panel-title': 'flex items-center gap-1.5 text-tk-elements-panel-header-textColor',
74
+ 'panel-icon': 'text-tk-elements-panel-header-iconColor',
75
+ 'panel-button': 'flex items-center gap-1.5 whitespace-nowrap rounded-md text-sm transition-theme bg-tk-elements-panel-headerButton-backgroundColor hover:bg-tk-elements-panel-headerButton-backgroundColorHover text-tk-elements-panel-headerButton-textColor hover:text-tk-elements-panel-headerButton-textColorHover',
76
+ };
package/dist/index.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/index.spec.js ADDED
@@ -0,0 +1,12 @@
1
+ import { fileURLToPath, URL } from 'node:url';
2
+ import { expect, test } from 'vitest';
3
+ import { getInlineContentForPackage } from './index.js';
4
+ const root = fileURLToPath(new URL('../../template', import.meta.url));
5
+ test('getInlineContentForPackage finds files from @tutorialkit-rb/astro', () => {
6
+ const content = getInlineContentForPackage({
7
+ name: '@tutorialkit-rb/astro',
8
+ pattern: '/dist/default/**/*.astro',
9
+ root,
10
+ });
11
+ expect(content.length).toBeGreaterThan(0);
12
+ });
package/dist/theme.d.ts ADDED
@@ -0,0 +1,339 @@
1
+ export declare const theme: {
2
+ colors: {
3
+ tk: {
4
+ background: {
5
+ primary: string;
6
+ secondary: string;
7
+ active: string;
8
+ brighter: string;
9
+ accent: string;
10
+ positive: string;
11
+ warning: string;
12
+ negative: string;
13
+ info: string;
14
+ tip: string;
15
+ };
16
+ border: {
17
+ primary: string;
18
+ secondary: string;
19
+ brighter: string;
20
+ accent: string;
21
+ poisitve: string;
22
+ warning: string;
23
+ negative: string;
24
+ info: string;
25
+ tip: string;
26
+ };
27
+ text: {
28
+ primary: string;
29
+ secondary: string;
30
+ disabled: string;
31
+ body: string;
32
+ heading: string;
33
+ active: string;
34
+ accent: string;
35
+ positive: string;
36
+ warning: string;
37
+ negative: string;
38
+ info: string;
39
+ tip: string;
40
+ };
41
+ elements: {
42
+ app: {
43
+ backgroundColor: string;
44
+ borderColor: string;
45
+ textColor: string;
46
+ linkColor: string;
47
+ };
48
+ link: {
49
+ primaryColor: string;
50
+ primaryColorHover: string;
51
+ secondaryColor: string;
52
+ secondaryColorHover: string;
53
+ };
54
+ primaryButton: {
55
+ backgroundColor: string;
56
+ backgroundColorHover: string;
57
+ textColor: string;
58
+ textColorHover: string;
59
+ iconColor: string;
60
+ iconColorHover: string;
61
+ };
62
+ secondaryButton: {
63
+ backgroundColor: string;
64
+ backgroundColorHover: string;
65
+ textColor: string;
66
+ textColorHover: string;
67
+ iconColor: string;
68
+ iconColorHover: string;
69
+ };
70
+ content: {
71
+ textColor: string;
72
+ headingTextColor: string;
73
+ };
74
+ pageLoadingIndicator: {
75
+ backgroundColor: string;
76
+ shadowColor: string;
77
+ };
78
+ topBar: {
79
+ backgroundColor: string;
80
+ iconButton: {
81
+ backgroundColor: string;
82
+ backgroundColorHover: string;
83
+ iconColor: string;
84
+ iconColorHover: string;
85
+ };
86
+ logo: {
87
+ color: string;
88
+ colorHover: string;
89
+ };
90
+ };
91
+ panel: {
92
+ backgroundColor: string;
93
+ textColor: string;
94
+ header: {
95
+ backgroundColor: string;
96
+ textColor: string;
97
+ iconColor: string;
98
+ };
99
+ headerButton: {
100
+ backgroundColor: string;
101
+ backgroundColorHover: string;
102
+ textColor: string;
103
+ textColorHover: string;
104
+ iconColor: string;
105
+ iconColorHover: string;
106
+ };
107
+ headerTab: {
108
+ backgroundColor: string;
109
+ backgroundColorHover: string;
110
+ backgroundColorActive: string;
111
+ borderColor: string;
112
+ borderColorHover: string;
113
+ borderColorActive: string;
114
+ textColor: string;
115
+ textColorHover: string;
116
+ textColorActive: string;
117
+ iconColor: string;
118
+ iconColorHover: string;
119
+ iconColorActive: string;
120
+ };
121
+ };
122
+ previews: {
123
+ borderColor: string;
124
+ };
125
+ fileTree: {
126
+ backgroundColor: string;
127
+ backgroundColorHover: string;
128
+ textColor: string;
129
+ textColorHover: string;
130
+ iconColor: string;
131
+ iconColorHover: string;
132
+ file: {
133
+ backgroundColor: string;
134
+ backgroundColorHover: string;
135
+ backgroundColorSelected: string;
136
+ textColor: string;
137
+ textColorHover: string;
138
+ textColorSelected: string;
139
+ iconColor: string;
140
+ iconColorHover: string;
141
+ iconColorSelected: string;
142
+ };
143
+ folder: {
144
+ backgroundColor: string;
145
+ backgroundColorHover: string;
146
+ textColor: string;
147
+ textColorHover: string;
148
+ iconColor: string;
149
+ iconColorHover: string;
150
+ };
151
+ };
152
+ navCard: {
153
+ backgroundColor: string;
154
+ backgroundColorHover: string;
155
+ borderColor: string;
156
+ borderColorHover: string;
157
+ textColor: string;
158
+ textColorHover: string;
159
+ iconColor: string;
160
+ iconColorHover: string;
161
+ };
162
+ breadcrumbs: {
163
+ navButton: {
164
+ iconColor: string;
165
+ iconColorHover: string;
166
+ };
167
+ toggleButton: {
168
+ backgroundColor: string;
169
+ backgroundColorHover: string;
170
+ backgroundColorSelected: string;
171
+ borderColor: string;
172
+ borderColorHover: string;
173
+ borderColorSelected: string;
174
+ textColor: string;
175
+ textColorHover: string;
176
+ textColorSelected: string;
177
+ textDividerColor: string;
178
+ textDividerColorHover: string;
179
+ textDividerColorSelected: string;
180
+ iconColor: string;
181
+ iconColorHover: string;
182
+ iconColorSelected: string;
183
+ };
184
+ dropdown: {
185
+ backgroundColor: string;
186
+ borderColor: string;
187
+ textColor: string;
188
+ textColorHover: string;
189
+ accordionTextColor: string;
190
+ accordionTextColorSelected: string;
191
+ accordionTextColorHover: string;
192
+ accordionIconColor: string;
193
+ accordionIconColorSelected: string;
194
+ accordionIconColorHover: string;
195
+ lessonBackgroundColor: string;
196
+ lessonBackgroundColorSelected: string;
197
+ lessonTextColor: string;
198
+ lessonTextColorSelected: string;
199
+ lessonTextColorHover: string;
200
+ };
201
+ };
202
+ bootScreen: {
203
+ primaryButton: {
204
+ backgroundColor: string;
205
+ backgroundColorHover: string;
206
+ textColor: string;
207
+ textColorHover: string;
208
+ iconColor: string;
209
+ iconColorHover: string;
210
+ };
211
+ };
212
+ status: {
213
+ positive: {
214
+ textColor: string;
215
+ iconColor: string;
216
+ };
217
+ negative: {
218
+ textColor: string;
219
+ iconColor: string;
220
+ };
221
+ skipped: {
222
+ textColor: string;
223
+ iconColor: string;
224
+ };
225
+ disabled: {
226
+ textColor: string;
227
+ iconColor: string;
228
+ };
229
+ active: {
230
+ textColor: string;
231
+ iconColor: string;
232
+ };
233
+ };
234
+ markdown: {
235
+ callouts: {
236
+ backgroundColor: string;
237
+ textColor: string;
238
+ borderColor: string;
239
+ titleTextColor: string;
240
+ iconColor: string;
241
+ };
242
+ };
243
+ };
244
+ };
245
+ accent: {
246
+ 50: string;
247
+ 100: string;
248
+ 200: string;
249
+ 300: string;
250
+ 400: string;
251
+ 500: string;
252
+ 600: string;
253
+ 700: string;
254
+ 800: string;
255
+ 900: string;
256
+ 950: string;
257
+ };
258
+ gray: {
259
+ 0: string;
260
+ 50: string;
261
+ 100: string;
262
+ 200: string;
263
+ 300: string;
264
+ 400: string;
265
+ 500: string;
266
+ 600: string;
267
+ 700: string;
268
+ 800: string;
269
+ 900: string;
270
+ 950: string;
271
+ 1000: string;
272
+ };
273
+ positive: {
274
+ 50: string;
275
+ 100: string;
276
+ 200: string;
277
+ 300: string;
278
+ 400: string;
279
+ 500: string;
280
+ 600: string;
281
+ 700: string;
282
+ 800: string;
283
+ 900: string;
284
+ 950: string;
285
+ };
286
+ negative: {
287
+ 50: string;
288
+ 100: string;
289
+ 200: string;
290
+ 300: string;
291
+ 400: string;
292
+ 500: string;
293
+ 600: string;
294
+ 700: string;
295
+ 800: string;
296
+ 900: string;
297
+ 950: string;
298
+ };
299
+ tip: {
300
+ 50: string;
301
+ 100: string;
302
+ 200: string;
303
+ 300: string;
304
+ 400: string;
305
+ 500: string;
306
+ 600: string;
307
+ 700: string;
308
+ 800: string;
309
+ 900: string;
310
+ 950: string;
311
+ };
312
+ info: {
313
+ 50: string;
314
+ 100: string;
315
+ 200: string;
316
+ 300: string;
317
+ 400: string;
318
+ 500: string;
319
+ 600: string;
320
+ 700: string;
321
+ 800: string;
322
+ 900: string;
323
+ 950: string;
324
+ };
325
+ warning: {
326
+ 50: string;
327
+ 100: string;
328
+ 200: string;
329
+ 300: string;
330
+ 400: string;
331
+ 500: string;
332
+ 600: string;
333
+ 700: string;
334
+ 800: string;
335
+ 900: string;
336
+ 950: string;
337
+ };
338
+ };
339
+ };
package/dist/theme.js ADDED
@@ -0,0 +1,342 @@
1
+ const PRIMITIVES = {
2
+ accent: {
3
+ 50: '#EFF9FF',
4
+ 100: '#E5F6FF',
5
+ 200: '#B6E9FF',
6
+ 300: '#75DAFF',
7
+ 400: '#2CC8FF',
8
+ 500: '#00AEF2',
9
+ 600: '#008ED4',
10
+ 700: '#0071AB',
11
+ 800: '#005F8D',
12
+ 900: '#064F74',
13
+ 950: '#17374A',
14
+ },
15
+ gray: {
16
+ 0: '#FFFFFF',
17
+ 50: '#F6F8F9',
18
+ 100: '#EEF0F1',
19
+ 200: '#E4E6E9',
20
+ 300: '#D2D5D9',
21
+ 400: '#AAAFB6',
22
+ 500: '#7C8085',
23
+ 600: '#565A64',
24
+ 700: '#414349',
25
+ 800: '#31343B',
26
+ 900: '#2B2D35',
27
+ 950: '#232429',
28
+ 1000: '#16181D',
29
+ },
30
+ positive: {
31
+ 50: '#EDFCF6',
32
+ 100: '#CEFDEB',
33
+ 200: '#A1F9DC',
34
+ 300: '#64F1CB',
35
+ 400: '#24E0B3',
36
+ 500: '#02C79F',
37
+ 600: '#00A282',
38
+ 700: '#00826B',
39
+ 800: '#006656',
40
+ 900: '#005449',
41
+ 950: '#223533',
42
+ },
43
+ negative: {
44
+ 50: '#FEF2F3',
45
+ 100: '#FDE6E7',
46
+ 200: '#FBD0D4',
47
+ 300: '#F7AAB1',
48
+ 400: '#F06A78',
49
+ 500: '#E84B60',
50
+ 600: '#D42A48',
51
+ 700: '#B21E3C',
52
+ 800: '#951C38',
53
+ 900: '#801B36',
54
+ 950: '#45212A',
55
+ },
56
+ tip: {
57
+ 50: '#FCF5FF',
58
+ 100: '#F8ECFE',
59
+ 200: '#F0D3FD',
60
+ 300: '#E7BBFC',
61
+ 400: '#DD9EFA',
62
+ 500: '#D17CF8',
63
+ 600: '#BB3DF5',
64
+ 700: '#AA0CF3',
65
+ 800: '#8B0AC7',
66
+ 900: '#660792',
67
+ 950: '#3F254B',
68
+ },
69
+ info: {
70
+ 50: '#EFF9FF',
71
+ 100: '#E5F6FF',
72
+ 200: '#B6E9FF',
73
+ 300: '#75DAFF',
74
+ 400: '#2CC8FF',
75
+ 500: '#00AEF2',
76
+ 600: '#008ED4',
77
+ 700: '#0071AB',
78
+ 800: '#005F8D',
79
+ 900: '#064F74',
80
+ 950: '#17374A',
81
+ },
82
+ warning: {
83
+ 50: '#FEFAEC',
84
+ 100: '#FCF4D9',
85
+ 200: '#F9E08E',
86
+ 300: '#F6CA53',
87
+ 400: '#ED9413',
88
+ 500: '#D2700D',
89
+ 600: '#AE4E0F',
90
+ 700: '#AE4E0F',
91
+ 800: '#8E3D12',
92
+ 900: '#753212',
93
+ 950: '#402C22',
94
+ },
95
+ };
96
+ export const theme = {
97
+ colors: {
98
+ ...PRIMITIVES,
99
+ tk: {
100
+ background: {
101
+ primary: 'var(--tk-background-primary)',
102
+ secondary: 'var(--tk-background-secondary)',
103
+ active: 'var(--tk-background-active)',
104
+ brighter: 'var(--tk-background-brighter)',
105
+ accent: 'var(--tk-background-accent)',
106
+ positive: 'var(--tk-background-positive)',
107
+ warning: 'var(--tk-background-warning)',
108
+ negative: 'var(--tk-background-negative)',
109
+ info: 'var(--tk-background-info)',
110
+ tip: 'var(--tk-background-tip)',
111
+ },
112
+ border: {
113
+ primary: 'var(--tk-border-primary)',
114
+ secondary: 'var(--tk-border-secondary)',
115
+ brighter: 'var(--tk-border-brighter)',
116
+ accent: 'var(--tk-border-accent)',
117
+ poisitve: 'var(--tk-border-poisitve)',
118
+ warning: 'var(--tk-border-warning)',
119
+ negative: 'var(--tk-border-negative)',
120
+ info: 'var(--tk-border-info)',
121
+ tip: 'var(--tk-border-tip)',
122
+ },
123
+ text: {
124
+ primary: 'var(--tk-text-primary)',
125
+ secondary: 'var(--tk-text-secondary)',
126
+ disabled: 'var(--tk-text-disabled)',
127
+ body: 'var(--tk-text-body)',
128
+ heading: 'var(--tk-text-heading)',
129
+ active: 'var(--tk-text-active)',
130
+ accent: 'var(--tk-text-accent)',
131
+ positive: 'var(--tk-text-positive)',
132
+ warning: 'var(--tk-text-warning)',
133
+ negative: 'var(--tk-text-negative)',
134
+ info: 'var(--tk-text-info)',
135
+ tip: 'var(--tk-text-tip)',
136
+ },
137
+ elements: {
138
+ app: {
139
+ backgroundColor: 'var(--tk-elements-app-backgroundColor)',
140
+ borderColor: 'var(--tk-elements-app-borderColor)',
141
+ textColor: 'var(--tk-elements-app-textColor)',
142
+ linkColor: 'var(--tk-elements-app-linkColor)',
143
+ },
144
+ link: {
145
+ primaryColor: 'var(--tk-elements-link-primaryColor)',
146
+ primaryColorHover: 'var(--tk-elements-link-primaryColorHover)',
147
+ secondaryColor: 'var(--tk-elements-link-secondaryColor)',
148
+ secondaryColorHover: 'var(--tk-elements-link-secondaryColorHover)',
149
+ },
150
+ primaryButton: {
151
+ backgroundColor: 'var(--tk-elements-primaryButton-backgroundColor)',
152
+ backgroundColorHover: 'var(--tk-elements-primaryButton-backgroundColorHover)',
153
+ textColor: 'var(--tk-elements-primaryButton-textColor)',
154
+ textColorHover: 'var(--tk-elements-primaryButton-textColorHover)',
155
+ iconColor: 'var(--tk-elements-primaryButton-iconColor)',
156
+ iconColorHover: 'var(--tk-elements-primaryButton-iconColorHover)',
157
+ },
158
+ secondaryButton: {
159
+ backgroundColor: 'var(--tk-elements-secondaryButton-backgroundColor)',
160
+ backgroundColorHover: 'var(--tk-elements-secondaryButton-backgroundColorHover)',
161
+ textColor: 'var(--tk-elements-secondaryButton-textColor)',
162
+ textColorHover: 'var(--tk-elements-secondaryButton-textColorHover)',
163
+ iconColor: 'var(--tk-elements-secondaryButton-iconColor)',
164
+ iconColorHover: 'var(--tk-elements-secondaryButton-iconColorHover)',
165
+ },
166
+ content: {
167
+ textColor: 'var(--tk-elements-content-textColor)',
168
+ headingTextColor: 'var(--tk-elements-content-headingTextColor)',
169
+ },
170
+ pageLoadingIndicator: {
171
+ backgroundColor: 'var(--tk-elements-pageLoadingIndicator-backgroundColor)',
172
+ shadowColor: 'var(--tk-elements-pageLoadingIndicator-shadowColor)',
173
+ },
174
+ topBar: {
175
+ backgroundColor: 'var(--tk-elements-topBar-backgroundColor)',
176
+ iconButton: {
177
+ backgroundColor: 'var(--tk-elements-topBar-iconButton-backgroundColor)',
178
+ backgroundColorHover: 'var(--tk-elements-topBar-iconButton-backgroundColorHover)',
179
+ iconColor: 'var(--tk-elements-topBar-iconButton-iconColor)',
180
+ iconColorHover: 'var(--tk-elements-topBar-iconButton-iconColorHover)',
181
+ },
182
+ logo: {
183
+ color: 'var(--tk-elements-topBar-logo-color)',
184
+ colorHover: 'var(--tk-elements-topBar-logo-colorHover)',
185
+ },
186
+ },
187
+ panel: {
188
+ backgroundColor: 'var(--tk-elements-panel-backgroundColor)',
189
+ textColor: 'var(--tk-elements-panel-textColor)',
190
+ header: {
191
+ backgroundColor: 'var(--tk-elements-panel-header-backgroundColor)',
192
+ textColor: 'var(--tk-elements-panel-header-textColor)',
193
+ iconColor: 'var(--tk-elements-panel-header-iconColor)',
194
+ },
195
+ headerButton: {
196
+ backgroundColor: 'var(--tk-elements-panel-headerButton-backgroundColor)',
197
+ backgroundColorHover: 'var(--tk-elements-panel-headerButton-backgroundColorHover)',
198
+ textColor: 'var(--tk-elements-panel-headerButton-textColor)',
199
+ textColorHover: 'var(--tk-elements-panel-headerButton-textColorHover)',
200
+ iconColor: 'var(--tk-elements-panel-headerButton-iconColor)',
201
+ iconColorHover: 'var(--tk-elements-panel-headerButton-iconColorHover)',
202
+ },
203
+ headerTab: {
204
+ backgroundColor: 'var(--tk-elements-panel-headerTab-backgroundColor)',
205
+ backgroundColorHover: 'var(--tk-elements-panel-headerTab-backgroundColorHover)',
206
+ backgroundColorActive: 'var(--tk-elements-panel-headerTab-backgroundColorActive)',
207
+ borderColor: 'var(--tk-elements-panel-headerTab-borderColor)',
208
+ borderColorHover: 'var(--tk-elements-panel-headerTab-borderColorHover)',
209
+ borderColorActive: 'var(--tk-elements-panel-headerTab-borderColorActive)',
210
+ textColor: 'var(--tk-elements-panel-headerTab-textColor)',
211
+ textColorHover: 'var(--tk-elements-panel-headerTab-textColorHover)',
212
+ textColorActive: 'var(--tk-elements-panel-headerTab-textColorActive)',
213
+ iconColor: 'var(--tk-elements-panel-headerTab-iconColor)',
214
+ iconColorHover: 'var(--tk-elements-panel-headerTab-iconColorHover)',
215
+ iconColorActive: 'var(--tk-elements-panel-headerTab-iconColorActive)',
216
+ },
217
+ },
218
+ previews: {
219
+ borderColor: 'var(--tk-elements-previews-borderColor)',
220
+ },
221
+ fileTree: {
222
+ backgroundColor: 'var(--tk-elements-fileTree-backgroundColor)',
223
+ backgroundColorHover: 'var(--tk-elements-fileTree-backgroundColorHover)',
224
+ textColor: 'var(--tk-elements-fileTree-textColor)',
225
+ textColorHover: 'var(--tk-elements-fileTree-textColorHover)',
226
+ iconColor: 'var(--tk-elements-fileTree-iconColor)',
227
+ iconColorHover: 'var(--tk-elements-fileTree-iconColorHover)',
228
+ file: {
229
+ backgroundColor: 'var(--tk-elements-fileTree-file-backgroundColor)',
230
+ backgroundColorHover: 'var(--tk-elements-fileTree-file-backgroundColorHover)',
231
+ backgroundColorSelected: 'var(--tk-elements-fileTree-file-backgroundColorSelected)',
232
+ textColor: 'var(--tk-elements-fileTree-file-textColor)',
233
+ textColorHover: 'var(--tk-elements-fileTree-file-textColorHover)',
234
+ textColorSelected: 'var(--tk-elements-fileTree-file-textColorSelected)',
235
+ iconColor: 'var(--tk-elements-fileTree-file-iconColor)',
236
+ iconColorHover: 'var(--tk-elements-fileTree-file-iconColorHover)',
237
+ iconColorSelected: 'var(--tk-elements-fileTree-file-iconColorSelected)',
238
+ },
239
+ folder: {
240
+ backgroundColor: 'var(--tk-elements-fileTree-folder-backgroundColor)',
241
+ backgroundColorHover: 'var(--tk-elements-fileTree-folder-backgroundColorHover)',
242
+ textColor: 'var(--tk-elements-fileTree-folder-textColor)',
243
+ textColorHover: 'var(--tk-elements-fileTree-folder-textColorHover)',
244
+ iconColor: 'var(--tk-elements-fileTree-folder-iconColor)',
245
+ iconColorHover: 'var(--tk-elements-fileTree-folder-iconColorHover)',
246
+ },
247
+ },
248
+ navCard: {
249
+ backgroundColor: 'var(--tk-elements-navCard-backgroundColor)',
250
+ backgroundColorHover: 'var(--tk-elements-navCard-backgroundColorHover)',
251
+ borderColor: 'var(--tk-elements-navCard-borderColor)',
252
+ borderColorHover: 'var(--tk-elements-navCard-borderColorHover)',
253
+ textColor: 'var(--tk-elements-navCard-textColor)',
254
+ textColorHover: 'var(--tk-elements-navCard-textColorHover)',
255
+ iconColor: 'var(--tk-elements-navCard-iconColor)',
256
+ iconColorHover: 'var(--tk-elements-navCard-iconColorHover)',
257
+ },
258
+ breadcrumbs: {
259
+ navButton: {
260
+ iconColor: 'var(--tk-elements-breadcrumbs-navButton-iconColor)',
261
+ iconColorHover: 'var(--tk-elements-breadcrumbs-navButton-iconColorHover)',
262
+ },
263
+ toggleButton: {
264
+ backgroundColor: 'var(--tk-elements-breadcrumbs-toggleButton-backgroundColor)',
265
+ backgroundColorHover: 'var(--tk-elements-breadcrumbs-toggleButton-backgroundColorHover)',
266
+ backgroundColorSelected: 'var(--tk-elements-breadcrumbs-toggleButton-backgroundColorSelected)',
267
+ borderColor: 'var(--tk-elements-breadcrumbs-toggleButton-borderColor)',
268
+ borderColorHover: 'var(--tk-elements-breadcrumbs-toggleButton-borderColorHover)',
269
+ borderColorSelected: 'var(--tk-elements-breadcrumbs-toggleButton-borderColorSelected)',
270
+ textColor: 'var(--tk-elements-breadcrumbs-toggleButton-textColor)',
271
+ textColorHover: 'var(--tk-elements-breadcrumbs-toggleButton-textColorHover)',
272
+ textColorSelected: 'var(--tk-elements-breadcrumbs-toggleButton-textColorSelected)',
273
+ textDividerColor: 'var(--tk-elements-breadcrumbs-toggleButton-textDividerColor)',
274
+ textDividerColorHover: 'var(--tk-elements-breadcrumbs-toggleButton-textDividerColorHover)',
275
+ textDividerColorSelected: 'var(--tk-elements-breadcrumbs-toggleButton-textDividerColorSelected)',
276
+ iconColor: 'var(--tk-elements-breadcrumbs-toggleButton-iconColor)',
277
+ iconColorHover: 'var(--tk-elements-breadcrumbs-toggleButton-iconColorHover)',
278
+ iconColorSelected: 'var(--tk-elements-breadcrumbs-toggleButton-iconColorSelected)',
279
+ },
280
+ dropdown: {
281
+ backgroundColor: 'var(--tk-elements-breadcrumbs-dropdown-backgroundColor)',
282
+ borderColor: 'var(--tk-elements-breadcrumbs-dropdown-borderColor)',
283
+ textColor: 'var(--tk-elements-breadcrumbs-dropdown-textColor)',
284
+ textColorHover: 'var(--tk-elements-breadcrumbs-dropdown-textColorHover)',
285
+ accordionTextColor: 'var(--tk-elements-breadcrumbs-dropdown-accordionTextColor)',
286
+ accordionTextColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-accordionTextColorSelected)',
287
+ accordionTextColorHover: 'var(--tk-elements-breadcrumbs-dropdown-accordionTextColorHover)',
288
+ accordionIconColor: 'var(--tk-elements-breadcrumbs-dropdown-accordionIconColor)',
289
+ accordionIconColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-accordionIconColorSelected)',
290
+ accordionIconColorHover: 'var(--tk-elements-breadcrumbs-dropdown-accordionIconColorHover)',
291
+ lessonBackgroundColor: 'var(--tk-elements-breadcrumbs-dropdown-lessonBackgroundColor)',
292
+ lessonBackgroundColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected)',
293
+ lessonTextColor: 'var(--tk-elements-breadcrumbs-dropdown-lessonTextColor)',
294
+ lessonTextColorSelected: 'var(--tk-elements-breadcrumbs-dropdown-lessonTextColorSelected)',
295
+ lessonTextColorHover: 'var(--tk-elements-breadcrumbs-dropdown-lessonTextColorHover)',
296
+ },
297
+ },
298
+ bootScreen: {
299
+ primaryButton: {
300
+ backgroundColor: 'var(--tk-elements-bootScreen-primaryButton-backgroundColor)',
301
+ backgroundColorHover: 'var(--tk-elements-bootScreen-primaryButton-backgroundColorHover)',
302
+ textColor: 'var(--tk-elements-bootScreen-primaryButton-textColor)',
303
+ textColorHover: 'var(--tk-elements-bootScreen-primaryButton-textColorHover)',
304
+ iconColor: 'var(--tk-elements-bootScreen-primaryButton-iconColor)',
305
+ iconColorHover: 'var(--tk-elements-bootScreen-primaryButton-iconColorHover)',
306
+ },
307
+ },
308
+ status: {
309
+ positive: {
310
+ textColor: 'var(--tk-elements-status-positive-textColor)',
311
+ iconColor: 'var(--tk-elements-status-positive-iconColor)',
312
+ },
313
+ negative: {
314
+ textColor: 'var(--tk-elements-status-negative-textColor)',
315
+ iconColor: 'var(--tk-elements-status-negative-iconColor)',
316
+ },
317
+ skipped: {
318
+ textColor: 'var(--tk-elements-status-skipped-textColor)',
319
+ iconColor: 'var(--tk-elements-status-skipped-iconColor)',
320
+ },
321
+ disabled: {
322
+ textColor: 'var(--tk-elements-status-disabled-textColor)',
323
+ iconColor: 'var(--tk-elements-status-disabled-iconColor)',
324
+ },
325
+ active: {
326
+ textColor: 'var(--tk-elements-status-active-textColor)',
327
+ iconColor: 'var(--tk-elements-status-active-iconColor)',
328
+ },
329
+ },
330
+ markdown: {
331
+ callouts: {
332
+ backgroundColor: 'var(--tk-elements-markdown-callouts-backgroundColor)',
333
+ textColor: 'var(--tk-elements-markdown-callouts-textColor)',
334
+ borderColor: 'var(--tk-elements-markdown-callouts-borderColor)',
335
+ titleTextColor: 'var(--tk-elements-markdown-callouts-titleTextColor)',
336
+ iconColor: 'var(--tk-elements-markdown-callouts-iconColor)',
337
+ },
338
+ },
339
+ },
340
+ },
341
+ },
342
+ };
package/dist/transition-theme.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const transitionTheme: {
2
+ transitionProperty: string;
3
+ transitionTimingFunction: string;
4
+ transitionDuration: string;
5
+ };
package/dist/transition-theme.js ADDED
@@ -0,0 +1,6 @@
1
+ // this is a separate module with its own entrypoint so that it can be used in non-Node environment
2
+ export const transitionTheme = {
3
+ transitionProperty: 'background-color, border-color, box-shadow',
4
+ transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
5
+ transitionDuration: '150ms',
6
+ };
package/dist/utils.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare function toCSSRules(camelCase: Record<string, string | number>): {
2
+ [k: string]: string | number;
3
+ };
package/dist/utils.js ADDED
@@ -0,0 +1,3 @@
1
+ export function toCSSRules(camelCase) {
2
+ return Object.fromEntries(Object.entries(camelCase).map(([key, value]) => [key.replace(/([A-Z])/g, '-$1').toLowerCase(), value]));
3
+ }
package/package.json ADDED
@@ -0,0 +1,50 @@
1
+ {
2
+ "name": "@tutorialkit-rb/theme",
3
+ "version": "1.5.2-rb.0.1.0",
4
+ "description": "TutorialKit theme configuration",
5
+ "author": "StackBlitz Inc.",
6
+ "type": "module",
7
+ "bugs": "https://github.com/stackblitz/tutorialkit/issues",
8
+ "homepage": "https://github.com/stackblitz/tutorialkit",
9
+ "license": "MIT",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "https://github.com/Bakaface/tutorialkit.rb",
13
+ "directory": "packages/theme"
14
+ },
15
+ "types": "./dist/index.d.ts",
16
+ "exports": {
17
+ ".": {
18
+ "import": "./dist/index.js",
19
+ "types": "./dist/index.d.ts"
20
+ },
21
+ "./transition-theme": {
22
+ "import": "./dist/transition-theme.js",
23
+ "types": "./dist/transition-theme.d.ts"
24
+ }
25
+ },
26
+ "files": [
27
+ "dist"
28
+ ],
29
+ "scripts": {
30
+ "build": "tsc -b",
31
+ "dev": "pnpm run build --watch --preserveWatchOutput",
32
+ "test": "vitest"
33
+ },
34
+ "dependencies": {
35
+ "@iconify-json/ph": "^1.1.13",
36
+ "@iconify-json/svg-spinners": "^1.1.2",
37
+ "fast-glob": "^3.3.2",
38
+ "unocss": "^0.59.4"
39
+ },
40
+ "devDependencies": {
41
+ "@types/node": "^22.4.1",
42
+ "typescript": "^5.4.5",
43
+ "vitest": "^3.0.5"
44
+ },
45
+ "keywords": [
46
+ "ruby",
47
+ "rails",
48
+ "wasm"
49
+ ]
50
+ }