@tinyrack/themes 0.0.0 → 0.1.1

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 (4) hide show
  1. package/README.md +179 -179
  2. package/docs/npm-publishing.md +4 -3
  3. package/docs/storybook-deployment.md +1 -2
  4. package/package.json +5 -1
package/README.md CHANGED
@@ -1,179 +1,179 @@
1
- # @tinyrack/themes
2
-
3
- Tinyrack design-system themes for Mantine, daisyUI, and Astro Starlight.
4
-
5
- This package is intentionally theme-first. It exports shared design tokens and thin adapters for UI libraries used across Tinyrack products. It is not a general component library.
6
-
7
- ## Install
8
-
9
- ```bash
10
- pnpm add @tinyrack/themes
11
- ```
12
-
13
- Install the peer libraries needed by the surface you are using.
14
-
15
- For environment-specific setup recipes, see [docs/setup-guide.md](docs/setup-guide.md). It covers Tailwind-only, Tailwind+daisyUI, Mantine-only, Tailwind+Mantine, Tailwind+daisyUI+Mantine, and Astro Starlight integration.
16
-
17
- For npm release automation, see [docs/npm-publishing.md](docs/npm-publishing.md).
18
-
19
- ## Shared tokens
20
-
21
- ```ts
22
- import { tinyrackTokens, tinyrackSemanticColors } from '@tinyrack/themes/tokens';
23
- ```
24
-
25
- Shared tokens are library-agnostic. Mantine, daisyUI, and Starlight adapters map these tokens into each library's native theme shape.
26
-
27
- ## Tailwind CSS 4
28
-
29
- For shared Tinyrack Tailwind tokens without a component library:
30
-
31
- ```css
32
- @import "tailwindcss";
33
- @import "@tinyrack/themes/tailwind.css";
34
- ```
35
-
36
- This exposes utilities such as `bg-tinyrack-surface`, `text-tinyrack-text`, `text-tinyrack-primary`, `font-tinyrack-body`, and `rounded-tinyrack-box`.
37
-
38
- ## Mantine
39
-
40
- ```tsx
41
- import '@mantine/core/styles.css';
42
- import '@tinyrack/themes/mantine.css';
43
- import { MantineProvider } from '@mantine/core';
44
- import { tinyrackMantineTheme } from '@tinyrack/themes/mantine';
45
-
46
- export function App({ children }: { children: React.ReactNode }) {
47
- return <MantineProvider theme={tinyrackMantineTheme}>{children}</MantineProvider>;
48
- }
49
- ```
50
-
51
- For extension/content-script roots that need scoped Mantine CSS variables:
52
-
53
- ```tsx
54
- import { TinyrackMantineProvider } from '@tinyrack/themes/mantine';
55
-
56
- <TinyrackMantineProvider cssVariablesSelector="#tiny-translate-root">
57
- <App />
58
- </TinyrackMantineProvider>;
59
- ```
60
-
61
- ## daisyUI / Tailwind CSS 4
62
-
63
- Use the combined preset when you want Tailwind utilities and Tinyrack daisyUI themes together:
64
-
65
- ```css
66
- @import "tailwindcss";
67
- @import "@tinyrack/themes/tailwind/daisyui.css";
68
- ```
69
-
70
- Equivalent explicit composition:
71
-
72
- ```css
73
- @import "tailwindcss";
74
- @import "@tinyrack/themes/tailwind.css";
75
- @import "@tinyrack/themes/daisyui.css";
76
- @plugin "daisyui" {
77
- themes: tinyrack-light --default, tinyrack-dark --prefersdark;
78
- }
79
- ```
80
-
81
- For Tailwind plus Mantine, combine the Tailwind preset with Mantine's CSS and provider:
82
-
83
- ```css
84
- @import "tailwindcss";
85
- @import "@tinyrack/themes/tailwind/mantine.css";
86
- ```
87
-
88
- ```tsx
89
- import '@mantine/core/styles.css';
90
- import { TinyrackMantineProvider } from '@tinyrack/themes/mantine';
91
- ```
92
-
93
- The package also exports JS metadata for tests and tooling:
94
-
95
- ```ts
96
- import { tinyrackDaisyUiThemes } from '@tinyrack/themes/daisyui';
97
- ```
98
-
99
- ## Astro Starlight
100
-
101
- ```js
102
- import starlight from '@astrojs/starlight';
103
- import { defineConfig } from 'astro/config';
104
- import { withTinyrackStarlightTheme } from '@tinyrack/themes/astro/starlight';
105
-
106
- export default defineConfig({
107
- integrations: [
108
- starlight(
109
- withTinyrackStarlightTheme({
110
- title: 'Docs',
111
- customCss: ['./src/styles/global.css'],
112
- }),
113
- ),
114
- ],
115
- });
116
- ```
117
-
118
- If your Starlight/Astro version does not resolve package subpath CSS inside `customCss`, import it from your local global CSS instead:
119
-
120
- ```css
121
- @import "@tinyrack/themes/astro/starlight.css";
122
- ```
123
-
124
-
125
- ## Storybook component galleries
126
-
127
- Storybook includes full-theme review galleries for both UI systems. Cloudflare deployment setup is documented in [docs/storybook-deployment.md](docs/storybook-deployment.md):
128
-
129
- - `Mantine/Components/*`: one Storybook story per Mantine Core component selected for Tinyrack theme review.
130
- - `daisyUI/Components/*`: one Storybook story per component directory shipped by daisyUI 5.5.
131
-
132
- The same registries are covered by browser-mode Vitest so missing/broken previews and missing per-component story files fail CI:
133
-
134
- ```bash
135
- pnpm test:showcase
136
- ```
137
-
138
- ## Development
139
-
140
- ```bash
141
- pnpm install
142
- pnpm test
143
- pnpm build
144
- pnpm storybook
145
- pnpm storybook:build
146
- pnpm biome
147
- ```
148
-
149
- On this Windows workstation, if mise shims are present but `mise` itself is not on `PATH`, run pnpm through Corepack with the mise shim path removed:
150
-
151
- ```bash
152
- PATH_CLEAN=$(printf '%s' "$PATH" | tr ':' '\n' | grep -v '/mise/shims' | paste -sd: -)
153
- PATH="$PATH_CLEAN" '/c/Program Files/nodejs/corepack.cmd' pnpm test
154
- ```
155
-
156
- ## Compatibility target
157
-
158
- | Adapter | Target |
159
- | --- | --- |
160
- | Mantine | 9.x |
161
- | daisyUI | 5.x |
162
- | Tailwind CSS | 4.x |
163
- | Astro | 6.x |
164
- | Starlight | 0.40.x |
165
- | Vitest | 4.x browser mode with Playwright |
166
-
167
- ## Export map
168
-
169
- - `@tinyrack/themes`
170
- - `@tinyrack/themes/tokens`
171
- - `@tinyrack/themes/tailwind.css`
172
- - `@tinyrack/themes/tailwind/daisyui.css`
173
- - `@tinyrack/themes/tailwind/mantine.css`
174
- - `@tinyrack/themes/mantine`
175
- - `@tinyrack/themes/mantine.css`
176
- - `@tinyrack/themes/daisyui`
177
- - `@tinyrack/themes/daisyui.css`
178
- - `@tinyrack/themes/astro/starlight`
179
- - `@tinyrack/themes/astro/starlight.css`
1
+ # @tinyrack/themes
2
+
3
+ Tinyrack design-system themes for Mantine, daisyUI, and Astro Starlight.
4
+
5
+ This package is intentionally theme-first. It exports shared design tokens and thin adapters for UI libraries used across Tinyrack products. It is not a general component library.
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ pnpm add @tinyrack/themes
11
+ ```
12
+
13
+ Install the peer libraries needed by the surface you are using.
14
+
15
+ For environment-specific setup recipes, see [docs/setup-guide.md](docs/setup-guide.md). It covers Tailwind-only, Tailwind+daisyUI, Mantine-only, Tailwind+Mantine, Tailwind+daisyUI+Mantine, and Astro Starlight integration.
16
+
17
+ For npm release automation, see [docs/npm-publishing.md](docs/npm-publishing.md).
18
+
19
+ ## Shared tokens
20
+
21
+ ```ts
22
+ import { tinyrackTokens, tinyrackSemanticColors } from '@tinyrack/themes/tokens';
23
+ ```
24
+
25
+ Shared tokens are library-agnostic. Mantine, daisyUI, and Starlight adapters map these tokens into each library's native theme shape.
26
+
27
+ ## Tailwind CSS 4
28
+
29
+ For shared Tinyrack Tailwind tokens without a component library:
30
+
31
+ ```css
32
+ @import "tailwindcss";
33
+ @import "@tinyrack/themes/tailwind.css";
34
+ ```
35
+
36
+ This exposes utilities such as `bg-tinyrack-surface`, `text-tinyrack-text`, `text-tinyrack-primary`, `font-tinyrack-body`, and `rounded-tinyrack-box`.
37
+
38
+ ## Mantine
39
+
40
+ ```tsx
41
+ import '@mantine/core/styles.css';
42
+ import '@tinyrack/themes/mantine.css';
43
+ import { MantineProvider } from '@mantine/core';
44
+ import { tinyrackMantineTheme } from '@tinyrack/themes/mantine';
45
+
46
+ export function App({ children }: { children: React.ReactNode }) {
47
+ return <MantineProvider theme={tinyrackMantineTheme}>{children}</MantineProvider>;
48
+ }
49
+ ```
50
+
51
+ For extension/content-script roots that need scoped Mantine CSS variables:
52
+
53
+ ```tsx
54
+ import { TinyrackMantineProvider } from '@tinyrack/themes/mantine';
55
+
56
+ <TinyrackMantineProvider cssVariablesSelector="#tiny-translate-root">
57
+ <App />
58
+ </TinyrackMantineProvider>;
59
+ ```
60
+
61
+ ## daisyUI / Tailwind CSS 4
62
+
63
+ Use the combined preset when you want Tailwind utilities and Tinyrack daisyUI themes together:
64
+
65
+ ```css
66
+ @import "tailwindcss";
67
+ @import "@tinyrack/themes/tailwind/daisyui.css";
68
+ ```
69
+
70
+ Equivalent explicit composition:
71
+
72
+ ```css
73
+ @import "tailwindcss";
74
+ @import "@tinyrack/themes/tailwind.css";
75
+ @import "@tinyrack/themes/daisyui.css";
76
+ @plugin "daisyui" {
77
+ themes: tinyrack-light --default, tinyrack-dark --prefersdark;
78
+ }
79
+ ```
80
+
81
+ For Tailwind plus Mantine, combine the Tailwind preset with Mantine's CSS and provider:
82
+
83
+ ```css
84
+ @import "tailwindcss";
85
+ @import "@tinyrack/themes/tailwind/mantine.css";
86
+ ```
87
+
88
+ ```tsx
89
+ import '@mantine/core/styles.css';
90
+ import { TinyrackMantineProvider } from '@tinyrack/themes/mantine';
91
+ ```
92
+
93
+ The package also exports JS metadata for tests and tooling:
94
+
95
+ ```ts
96
+ import { tinyrackDaisyUiThemes } from '@tinyrack/themes/daisyui';
97
+ ```
98
+
99
+ ## Astro Starlight
100
+
101
+ ```js
102
+ import starlight from '@astrojs/starlight';
103
+ import { defineConfig } from 'astro/config';
104
+ import { withTinyrackStarlightTheme } from '@tinyrack/themes/astro/starlight';
105
+
106
+ export default defineConfig({
107
+ integrations: [
108
+ starlight(
109
+ withTinyrackStarlightTheme({
110
+ title: 'Docs',
111
+ customCss: ['./src/styles/global.css'],
112
+ }),
113
+ ),
114
+ ],
115
+ });
116
+ ```
117
+
118
+ If your Starlight/Astro version does not resolve package subpath CSS inside `customCss`, import it from your local global CSS instead:
119
+
120
+ ```css
121
+ @import "@tinyrack/themes/astro/starlight.css";
122
+ ```
123
+
124
+
125
+ ## Storybook component galleries
126
+
127
+ Storybook includes full-theme review galleries for both UI systems. Cloudflare deployment setup is documented in [docs/storybook-deployment.md](docs/storybook-deployment.md):
128
+
129
+ - `Mantine/Components/*`: one Storybook story per Mantine Core component selected for Tinyrack theme review.
130
+ - `daisyUI/Components/*`: one Storybook story per component directory shipped by daisyUI 5.5.
131
+
132
+ The same registries are covered by browser-mode Vitest so missing/broken previews and missing per-component story files fail CI:
133
+
134
+ ```bash
135
+ pnpm test:showcase
136
+ ```
137
+
138
+ ## Development
139
+
140
+ ```bash
141
+ pnpm install
142
+ pnpm test
143
+ pnpm build
144
+ pnpm storybook
145
+ pnpm storybook:build
146
+ pnpm biome
147
+ ```
148
+
149
+ On this Windows workstation, if mise shims are present but `mise` itself is not on `PATH`, run pnpm through Corepack with the mise shim path removed:
150
+
151
+ ```bash
152
+ PATH_CLEAN=$(printf '%s' "$PATH" | tr ':' '\n' | grep -v '/mise/shims' | paste -sd: -)
153
+ PATH="$PATH_CLEAN" '/c/Program Files/nodejs/corepack.cmd' pnpm test
154
+ ```
155
+
156
+ ## Compatibility target
157
+
158
+ | Adapter | Target |
159
+ | --- | --- |
160
+ | Mantine | 9.x |
161
+ | daisyUI | 5.x |
162
+ | Tailwind CSS | 4.x |
163
+ | Astro | 6.x |
164
+ | Starlight | 0.40.x |
165
+ | Vitest | 4.x browser mode with Playwright |
166
+
167
+ ## Export map
168
+
169
+ - `@tinyrack/themes`
170
+ - `@tinyrack/themes/tokens`
171
+ - `@tinyrack/themes/tailwind.css`
172
+ - `@tinyrack/themes/tailwind/daisyui.css`
173
+ - `@tinyrack/themes/tailwind/mantine.css`
174
+ - `@tinyrack/themes/mantine`
175
+ - `@tinyrack/themes/mantine.css`
176
+ - `@tinyrack/themes/daisyui`
177
+ - `@tinyrack/themes/daisyui.css`
178
+ - `@tinyrack/themes/astro/starlight`
179
+ - `@tinyrack/themes/astro/starlight.css`
package/docs/npm-publishing.md CHANGED
@@ -5,7 +5,7 @@
5
5
  This follows the release workflow shape used by sibling Tinyrack packages:
6
6
 
7
7
  - `tinyrack/tinyauth`: publishes from `refs/tags/v*` with npm registry setup.
8
- - `tinyrack/dotweave` and `tinyrack/proxer`: verify package contents with `pack --dry-run` and publish with npm provenance.
8
+ - `tinyrack/dotweave` and `tinyrack/proxer`: publish with npm provenance from release tags.
9
9
 
10
10
  ## Workflow
11
11
 
@@ -40,6 +40,8 @@ Configure the package on npm with this trusted publisher:
40
40
 
41
41
  Because the workflow uses OIDC trusted publishing, do not add or commit an npm token. The workflow intentionally does not reference `NPM_TOKEN`.
42
42
 
43
+ The package metadata must also keep `repository.url` set to `https://github.com/tinyrack-net/themes`; npm validates this against the GitHub provenance bundle during publish.
44
+
43
45
  ## What the workflow checks
44
46
 
45
47
  Before publishing, CI does the following:
@@ -53,8 +55,7 @@ Before publishing, CI does the following:
53
55
  7. Run `pnpm run test`.
54
56
  8. Run `pnpm run biome`.
55
57
  9. Run `pnpm run build`.
56
- 10. Verify package contents with `pnpm pack --dry-run`.
57
- 11. Publish with `pnpm publish --provenance --access public --no-git-checks`.
58
+ 10. Publish with `pnpm publish --provenance --access public --no-git-checks`.
58
59
 
59
60
  ## Local validation
60
61
 
package/docs/storybook-deployment.md CHANGED
@@ -54,8 +54,7 @@ The workflow does the following:
54
54
  6. Run `pnpm run biome`.
55
55
  7. Run `pnpm run build`.
56
56
  8. Run `pnpm run storybook:build`.
57
- 9. Validate Wrangler packaging with `pnpm run deploy:storybook:dry-run`.
58
- 10. Deploy `storybook-static` with `pnpm run deploy:storybook`.
57
+ 9. Deploy `storybook-static` with `pnpm run deploy:storybook`.
59
58
 
60
59
  ## Local validation
61
60
 
package/package.json CHANGED
@@ -1,10 +1,14 @@
1
1
  {
2
2
  "name": "@tinyrack/themes",
3
- "version": "0.0.0",
3
+ "version": "0.1.1",
4
4
  "description": "Tinyrack design system themes for Mantine, daisyUI, and Astro Starlight.",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "author": "Tinyrack",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/tinyrack-net/themes"
11
+ },
8
12
  "files": [
9
13
  "dist",
10
14
  "README.md",