Skip to content

Commit 9805996

Browse files
NemikolhNemikolh
authored
feat: add @tutorialkit/theme package to use the theme without astro (#105)
1 parent d8a5a34 commit 9805996

File tree

17 files changed

+103
-311
lines changed

17 files changed

+103
-311
lines changed

‎docs/demo/package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,11 @@
2323
"@iconify-json/svg-spinners": "^1.1.2",
2424
"@tutorialkit/astro": "workspace:*",
2525
"@tutorialkit/types": "workspace:*",
26-
"@unocss/reset": "^0.60.4",
27-
"@unocss/transformer-directives": "^0.60.4",
26+
"@unocss/reset": "^0.59.4",
2827
"astro": "^4.10.3",
2928
"fast-glob": "^3.3.2",
3029
"prettier-plugin-astro": "^0.14.0",
3130
"typescript": "^5.4.5",
32-
"unocss": "^0.60.4"
31+
"unocss": "^0.59.4"
3332
}
3433
}

‎docs/demo/uno.config.ts

+3-19
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { theme } from '@tutorialkit/astro';
2-
import transformerDirectives from '@unocss/transformer-directives';
1+
import { unoCSSConfig } from '@tutorialkit/astro';
32
import { globSync, convertPathToPattern } from 'fast-glob';
43
import fs from 'node:fs/promises';
54
import { basename, dirname, join } from 'node:path';
6-
import { defineConfig, presetIcons, presetUno } from 'unocss';
5+
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
76

87
const iconPaths = globSync('./icons/languages/*.svg');
98

@@ -21,29 +20,14 @@ const customIconCollection = iconPaths.reduce(
2120
);
2221

2322
export default defineConfig({
24-
theme,
23+
...unoCSSConfig,
2524
content: {
2625
inline: globSync(
2726
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
2827
).map((filePath) => {
2928
return () => fs.readFile(filePath, { encoding: 'utf8' });
3029
}),
3130
},
32-
rules: [
33-
['scrollbar-transparent', { 'scrollbar-color': '#0000004d transparent' }],
34-
['nav-box-shadow', { 'box-shadow': '0 2px 4px -1px rgba(0, 0, 0, 0.1)' }],
35-
['transition-background', { 'transition-property': 'background' }],
36-
],
37-
shortcuts: {
38-
'panel-container': 'grid grid-rows-[min-content_1fr] h-full',
39-
'panel-header':
40-
'flex items-center px-4 py-2 bg-tk-elements-panel-header-backgroundColor min-h-[38px] overflow-x-hidden',
41-
'panel-tabs-header': 'flex bg-tk-elements-panel-header-backgroundColor h-[38px]',
42-
'panel-title': 'flex items-center gap-1.5 text-tk-elements-panel-header-textColor',
43-
'panel-icon': 'text-tk-elements-panel-header-iconColor',
44-
'panel-button':
45-
'flex items-center gap-1.5 whitespace-nowrap rounded-md text-sm 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',
46-
},
4731
transformers: [transformerDirectives()],
4832
presets: [
4933
presetUno({

‎packages/astro/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "@tutorialkit/astro",
33
"version": "0.0.1-alpha.23",
44
"description": "TutorialKit integration for Astro (https://astro.build)",
5+
"author": "StackBlitz Inc.",
56
"type": "module",
67
"bugs": "https://github.com/stackblitz/tutorialkit/issues",
78
"homepage": "https://github.com/stackblitz/tutorialkit",
@@ -28,6 +29,7 @@
2829
"@nanostores/react": "0.7.2",
2930
"@tutorialkit/components-react": "workspace:*",
3031
"@tutorialkit/runtime": "workspace:*",
32+
"@tutorialkit/theme": "workspace:*",
3133
"@tutorialkit/types": "workspace:*",
3234
"@types/react": "^18.3.3",
3335
"@webcontainer/api": "1.2.0",

‎packages/astro/src/index.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
import { rules, shortcuts, theme } from '@tutorialkit/theme';
12
import type { AstroConfig, AstroIntegration } from 'astro';
23
import { fileURLToPath } from 'node:url';
34
import { extraIntegrations } from './integrations.js';
45
import { updateMarkdownConfig } from './remark/index.js';
5-
import { WebContainerFiles } from './webcontainer-files/index.js';
6+
import { tutorialkitCore } from './vite-plugins/core.js';
67
import { userlandCSS, watchUserlandCSS } from './vite-plugins/css.js';
78
import { tutorialkitStore } from './vite-plugins/store.js';
8-
import { tutorialkitCore } from './vite-plugins/core.js';
9+
import { WebContainerFiles } from './webcontainer-files/index.js';
910

10-
export { theme } from './theme.js';
11+
export const unoCSSConfig = {
12+
theme,
13+
rules,
14+
shortcuts,
15+
};
1116

1217
export interface Options {
1318
/**

‎packages/astro/tsconfig.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,10 @@
88
"outDir": "dist"
99
},
1010
"include": ["src"],
11-
"references": [{ "path": "../runtime" }, { "path": "../types" }, { "path": "../components/react" }]
11+
"references": [
12+
{ "path": "../runtime" },
13+
{ "path": "../types" },
14+
{ "path": "../components/react" },
15+
{ "path": "../theme" }
16+
]
1217
}

‎packages/cli/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "tutorialkit",
33
"version": "0.0.1-alpha.23",
44
"description": "Interactive tutorials powered by WebContainer API",
5+
"author": "StackBlitz Inc.",
56
"type": "module",
67
"bugs": "https://github.com/stackblitz/tutorialkit/issues",
78
"homepage": "https://github.com/stackblitz/tutorialkit",

‎packages/components/react/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "@tutorialkit/components-react",
33
"version": "0.0.1-alpha.23",
44
"description": "TutorialKit's React components",
5+
"author": "StackBlitz Inc.",
56
"type": "module",
67
"bugs": "https://github.com/stackblitz/tutorialkit/issues",
78
"homepage": "https://github.com/stackblitz/tutorialkit",

‎packages/create-tutorial/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "create-tutorial",
33
"version": "0.0.1-alpha.23",
44
"description": "Interactive tutorials powered by WebContainer API",
5+
"author": "StackBlitz Inc.",
56
"type": "module",
67
"bugs": "https://github.com/stackblitz/tutorialkit/issues",
78
"homepage": "https://github.com/stackblitz/tutorialkit",

‎packages/runtime/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "@tutorialkit/runtime",
33
"version": "0.0.1-alpha.23",
44
"description": "TutorialKit runtime",
5+
"author": "StackBlitz Inc.",
56
"type": "module",
67
"bugs": "https://github.com/stackblitz/tutorialkit/issues",
78
"homepage": "https://github.com/stackblitz/tutorialkit",

‎packages/template/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
"@types/node": "^20.14.6",
2626
"@types/react": "^18.3.3",
2727
"@unocss/reset": "^0.59.4",
28-
"@unocss/transformer-directives": "^0.59.4",
2928
"astro": "4.10.3",
3029
"fast-glob": "^3.3.2",
3130
"prettier-plugin-astro": "^0.13.0",

‎packages/template/uno.config.ts

+3-19
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { theme } from '@tutorialkit/astro';
2-
import transformerDirectives from '@unocss/transformer-directives';
1+
import { unoCSSConfig } from '@tutorialkit/astro';
32
import { globSync, convertPathToPattern } from 'fast-glob';
43
import fs from 'node:fs/promises';
54
import { basename, dirname, join } from 'node:path';
6-
import { defineConfig, presetIcons, presetUno } from 'unocss';
5+
import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
76

87
const iconPaths = globSync('./icons/languages/*.svg');
98

@@ -21,29 +20,14 @@ const customIconCollection = iconPaths.reduce(
2120
);
2221

2322
export default defineConfig({
24-
theme,
23+
...unoCSSConfig,
2524
content: {
2625
inline: globSync(
2726
`${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
2827
).map((filePath) => {
2928
return () => fs.readFile(filePath, { encoding: 'utf8' });
3029
}),
3130
},
32-
rules: [
33-
['scrollbar-transparent', { 'scrollbar-color': '#0000004d transparent' }],
34-
['nav-box-shadow', { 'box-shadow': '0 2px 4px -1px rgba(0, 0, 0, 0.1)' }],
35-
['transition-background', { 'transition-property': 'background' }],
36-
],
37-
shortcuts: {
38-
'panel-container': 'grid grid-rows-[min-content_1fr] h-full',
39-
'panel-header':
40-
'flex items-center px-4 py-2 bg-tk-elements-panel-header-backgroundColor min-h-[38px] overflow-x-hidden',
41-
'panel-tabs-header': 'flex bg-tk-elements-panel-header-backgroundColor h-[38px]',
42-
'panel-title': 'flex items-center gap-1.5 text-tk-elements-panel-header-textColor',
43-
'panel-icon': 'text-tk-elements-panel-header-iconColor',
44-
'panel-button':
45-
'flex items-center gap-1.5 whitespace-nowrap rounded-md text-sm 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',
46-
},
4731
transformers: [transformerDirectives()],
4832
presets: [
4933
presetUno({

‎packages/theme/package.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "@tutorialkit/theme",
3+
"version": "0.0.1-alpha.23",
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+
"types": "./dist/index.d.ts",
11+
"exports": {
12+
".": "./dist/index.js"
13+
},
14+
"files": [
15+
"dist"
16+
],
17+
"scripts": {
18+
"build": "tsc -b"
19+
},
20+
"dependencies": {
21+
"unocss": "^0.59.4"
22+
},
23+
"devDependencies": {
24+
"typescript": "^5.4.5"
25+
}
26+
}

‎packages/theme/src/index.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type { ConfigBase } from 'unocss';
2+
3+
export { theme } from './theme.js';
4+
5+
export const rules: ConfigBase['rules'] = [
6+
['scrollbar-transparent', { 'scrollbar-color': '#0000004d transparent' }],
7+
['nav-box-shadow', { 'box-shadow': '0 2px 4px -1px rgba(0, 0, 0, 0.1)' }],
8+
['transition-background', { 'transition-property': 'background' }],
9+
];
10+
11+
export const shortcuts: ConfigBase['shortcuts'] = {
12+
'panel-container': 'grid grid-rows-[min-content_1fr] h-full',
13+
'panel-header':
14+
'flex items-center px-4 py-2 bg-tk-elements-panel-header-backgroundColor min-h-[38px] overflow-x-hidden',
15+
'panel-tabs-header': 'flex bg-tk-elements-panel-header-backgroundColor h-[38px]',
16+
'panel-title': 'flex items-center gap-1.5 text-tk-elements-panel-header-textColor',
17+
'panel-icon': 'text-tk-elements-panel-header-iconColor',
18+
'panel-button':
19+
'flex items-center gap-1.5 whitespace-nowrap rounded-md text-sm 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',
20+
};

‎packages/astro/src/theme.ts renamed to ‎packages/theme/src/theme.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const PRIMITIVES = {
9696
},
9797
};
9898

99-
export const theme: ConfigBase['theme'] = {
99+
export const theme = {
100100
colors: {
101101
...PRIMITIVES,
102102
tk: {
@@ -322,4 +322,4 @@ export const theme: ConfigBase['theme'] = {
322322
},
323323
},
324324
},
325-
};
325+
} satisfies ConfigBase['theme'];

‎packages/theme/tsconfig.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "dist",
5+
"rootDir": "src",
6+
"composite": true
7+
},
8+
"include": ["src"]
9+
}

‎packages/types/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "@tutorialkit/types",
33
"version": "0.0.1-alpha.23",
44
"description": "Types for TutorialKit",
5+
"author": "StackBlitz Inc.",
56
"type": "module",
67
"bugs": "https://github.com/stackblitz/tutorialkit/issues",
78
"homepage": "https://github.com/stackblitz/tutorialkit",

0 commit comments

Comments
 (0)