@xenide-io/the-old-ui-theme 0.2.3

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/README.md +252 -0
  2. package/dist/src/index.d.mts +893 -0
  3. package/dist/src/index.d.ts +893 -0
  4. package/dist/src/index.js +3913 -0
  5. package/dist/src/index.mjs +3728 -0
  6. package/dist/tailwind-preset.d.mts +10 -0
  7. package/dist/tailwind-preset.d.ts +10 -0
  8. package/dist/tailwind-preset.js +87 -0
  9. package/dist/tailwind-preset.mjs +66 -0
  10. package/package.json +104 -0
  11. package/src/app/globals.css +1214 -0
  12. package/src/styles/excel-themes.css +110 -0
  13. package/src/styles/lemon-primitives.css +550 -0
  14. package/src/styles/themes.css +1334 -0
  15. package/src/styles/typography.css +19 -0
  16. package/tailwind-preset.ts +70 -0
package/README.md ADDED
@@ -0,0 +1,252 @@
1
+ # The Old UI
2
+
3
+ Props-driven React components and theme tokens in the spirit of PostHog’s dashboard chrome — optimized for Next.js demos and small internal tools.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @xenide-io/the-old-ui-theme
9
+ # or
10
+ bun add @xenide-io/the-old-ui-theme
11
+ ```
12
+
13
+ For full setup instructions, see [`INSTALL.md`](./INSTALL.md).
14
+
15
+ For AI-readable usage docs, see [`docs/`](./docs/README.md).
16
+
17
+ ## Setup In Your App
18
+
19
+ Import the library CSS once at your app root. This gives you the theme variables, typography, and component classes.
20
+
21
+ ```tsx
22
+ // app/layout.tsx or pages/_app.tsx
23
+ import "@xenide-io/the-old-ui-theme/styles.css";
24
+
25
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
26
+ return (
27
+ <html data-theme="hedgehog-light">
28
+ <body>{children}</body>
29
+ </html>
30
+ );
31
+ }
32
+ ```
33
+
34
+ Add the Tailwind preset so `bg-ph-*`, `text-ph-*`, Lemon radii, and shadows resolve correctly.
35
+
36
+ ```ts
37
+ // tailwind.config.ts
38
+ import theOldUiPreset from "@xenide-io/the-old-ui-theme/tailwind-preset";
39
+
40
+ export default {
41
+ presets: [theOldUiPreset],
42
+ content: [
43
+ "./src/**/*.{ts,tsx}",
44
+ "./app/**/*.{ts,tsx}",
45
+ "./node_modules/@xenide-io/the-old-ui-theme/dist/**/*.{js,mjs}",
46
+ ],
47
+ };
48
+ ```
49
+
50
+ Use components from the package root.
51
+
52
+ ```tsx
53
+ import { Button, Card, H1, P } from "@xenide-io/the-old-ui-theme";
54
+
55
+ export function Example() {
56
+ return (
57
+ <Card
58
+ title={<H1>Dashboard</H1>}
59
+ description={<P tone="subtle">Your workspace overview.</P>}
60
+ actions={<Button variant="primary">Create insight</Button>}
61
+ />
62
+ );
63
+ }
64
+ ```
65
+
66
+ ## Component API
67
+
68
+ Use components through props first. `className` is only an escape hatch for layout or one-off overrides.
69
+
70
+ ```tsx
71
+ import { Alert, Badge, Button, Card, Input, H1, H2, P } from "@xenide-io/the-old-ui-theme";
72
+
73
+ <H1>Dashboard</H1>
74
+ <H2 tone="subtle">Overview</H2>
75
+ <Button variant="primary" size="sm">Save</Button>
76
+ <Badge variant="success">Live</Badge>
77
+ <Alert status="warning" title="Approaching quota" />
78
+ <Input label="Email" error="Required" />
79
+ <Card title="Insight saved" description="Dashboard tile copy." />
80
+ ```
81
+
82
+ ### Exported React Components
83
+
84
+ | Area | Components |
85
+ | ---- | ---------- |
86
+ | Actions | `Button`, `DropdownButton`, `DropdownMenu`, `DropdownItem` |
87
+ | Feedback | `Alert`, `Badge`, `Toast`, `ToastStack`, `EmptyState`, `Progress` demos |
88
+ | Inputs | `Input`, `Select`, `Textarea`, `Checkbox`, `Radio`, `Toggle`, `Range`, `Rating`, `FileUpload`, `SearchInput`, `SearchGroup` |
89
+ | Layout | `Card`, `Modal`, `Drawer`, `Panel`, `Accordion`, `HoverCard` |
90
+ | Navigation | `Tabs`, `Breadcrumbs`, `Pagination`, `SegmentedControl`, `Stepper`, `CommandPalette`, `FilterChips` |
91
+ | Data | `Table`, `Stat`, chart components, dashboard shell components |
92
+ | Typography | `H1`, `H2`, `H3`, `H4`, `H5`, `P`, `Small`, `Caption`, `Lead`, `Mono`, `Overline`, `Display` |
93
+ | Foundation | icons, theme switcher, code block, color tokens |
94
+
95
+ Some showcase sections are foundation or pattern demos rather than standalone components, such as color tokens, icon inventory, terminal capture, diff slider, and chart/dashboard compositions.
96
+
97
+ ## Layers (take what you need)
98
+
99
+ | Tier | What you get | Dependencies |
100
+ | ---- | ------------ | ------------ |
101
+ | **CSS tokens** | `src/styles/themes.css` — `[data-theme]` variables (`--ph-*`) | None |
102
+ | **Tailwind preset** | `tailwind-preset.ts` — `ph.*` colours, Lemon radii, shadows | `tailwindcss` |
103
+ | **App shell** | `src/app/globals.css` — typography, primitives, layouts | Tokens + Tailwind |
104
+ | **Charts (optional)** | Token-driven Chart.js demos (`register-chartjs` only registers controllers you use); hog-charts-**lite** canvas trend reads the same `--ph-data-*` palette | `chart.js`, `react-chartjs-2`; trend line also `d3-scale` |
105
+
106
+ Chart.js supports doughnut, polar area, pie, radar, bubble, etc. — this repo registers **Bar · Doughnut · Polar area** only to keep bundles small; add controllers in `src/lib/chart/register-chartjs.ts` when you need more types.
107
+
108
+ ## Themes
109
+
110
+ Themes are CSS-variable based. Set `html[data-theme]` to switch palettes — no JS re-render needed.
111
+
112
+ All theme colors live in `src/styles/themes.css`. The master registry of IDs, display names, and groups lives in `src/themes/registry.ts`.
113
+
114
+ ### Built-in themes
115
+
116
+ | Group | Light | Dark |
117
+ | ----- | ----- | ---- |
118
+ | **HedgeHog** | `hedgehog-light` | `hedgehog-dark` |
119
+ | **Productivity** | `sheets` | `sheets-dark` |
120
+ | **Productivity** | `note` | `note-dark` |
121
+ | **Productivity** | `presentation` | `presentation-dark` |
122
+ | **Social** | `socials` | `socials-dark` |
123
+ | **Chats** | `chats-light` | `chats-dark` |
124
+ | **Catppuccin** | `catppuccin-light` | `catppuccin-dark` |
125
+ | **Xenide** | `xenide-light` | `xenide-dark` |
126
+ | **GitHub** | `github-light` | `github-dark` |
127
+ | **Rosé Pine** | `rosepine-light` | `rosepine-dark` |
128
+ | **Fun** | `turtletime` | `turtletime-dark` |
129
+ | **Fun** | `bikini-bottom` | `bikini-bottom-dark` |
130
+
131
+ ### Programmatic usage
132
+
133
+ ```tsx
134
+ import { persistTheme, readStoredTheme } from "@xenide-io/the-old-ui-theme";
135
+
136
+ // Switch theme — persists to localStorage and updates html[data-theme]
137
+ persistTheme("sheets");
138
+
139
+ // Read current theme
140
+ const themeId = readStoredTheme(); // "hedgehog-light" | "sheets" | ...
141
+ ```
142
+
143
+ ### Theme switcher setup
144
+
145
+ Use the built-in theme switcher when you want users to change themes. `ThemeDomSync` reapplies the stored theme after hydration.
146
+
147
+ ```tsx
148
+ import { ThemeDomSync, ThemeSwitcher } from "@xenide-io/the-old-ui-theme";
149
+
150
+ export function AppShell({ children }: { children: React.ReactNode }) {
151
+ return (
152
+ <>
153
+ <ThemeDomSync />
154
+ <header>
155
+ <ThemeSwitcher />
156
+ </header>
157
+ {children}
158
+ </>
159
+ );
160
+ }
161
+ ```
162
+
163
+ ### Manual theme switching
164
+
165
+ If you do not want the built-in switcher, you can set the attribute directly.
166
+
167
+ ```tsx
168
+ document.documentElement.setAttribute("data-theme", "chats-dark");
169
+ ```
170
+
171
+ For persisted switching, use the helper.
172
+
173
+ ```tsx
174
+ import { persistTheme } from "@xenide-io/the-old-ui-theme";
175
+
176
+ persistTheme("presentation");
177
+ ```
178
+
179
+ ### Custom themes
180
+
181
+ Custom themes work like DaisyUI: create a new `data-theme` block and override the semantic `--ph-*` tokens. Components should not need changes.
182
+
183
+ ```css
184
+ /* app/globals.css */
185
+ @import "@xenide-io/the-old-ui-theme/styles.css";
186
+
187
+ [data-theme="my-theme"] {
188
+ color-scheme: light;
189
+
190
+ --ph-canvas: #f8f5ef;
191
+ --ph-surface: #ffffff;
192
+ --ph-muted: #eee8dd;
193
+ --ph-toolbar: #e5dccd;
194
+ --ph-border: #d7cbb8;
195
+ --ph-border-strong: #a99b87;
196
+
197
+ --ph-text-primary: #15110c;
198
+ --ph-text-secondary: #4d4337;
199
+ --ph-text-tertiary: #796f63;
200
+
201
+ --ph-accent: #f97316;
202
+ --ph-accent-hover: #ea580c;
203
+ --ph-blue: #2563eb;
204
+ --ph-purple: #7c3aed;
205
+
206
+ --ph-success: #15803d;
207
+ --ph-warning: #b45309;
208
+ --ph-danger: #dc2626;
209
+ --ph-info: #2563eb;
210
+ }
211
+ ```
212
+
213
+ Then activate it with:
214
+
215
+ ```tsx
216
+ document.documentElement.setAttribute("data-theme", "my-theme");
217
+ ```
218
+
219
+ If you want it to appear inside `ThemeSwitcher`, add it to `src/themes/registry.ts` in this repo before building the package.
220
+
221
+ ```ts
222
+ {
223
+ id: "my-theme",
224
+ name: "My Theme",
225
+ description: "Custom warm workspace palette.",
226
+ colorScheme: "light",
227
+ group: "Custom",
228
+ }
229
+ ```
230
+
231
+ ### In another Next.js app
232
+
233
+ 1. Install `@xenide-io/the-old-ui-theme`.
234
+ 2. Import `@xenide-io/the-old-ui-theme/styles.css` once in your app root.
235
+ 3. Set `<html data-theme="hedgehog-light">` or use `persistTheme()` / `ThemeSwitcher`.
236
+ 4. Add `@xenide-io/the-old-ui-theme/tailwind-preset` to `tailwind.config.ts`.
237
+ 5. If you consume this repo through `file:`, add `@xenide-io/the-old-ui-theme` to `transpilePackages` in `next.config.mjs`.
238
+
239
+ Optional chart usage: peer‑install `chart.js` and `react-chartjs-2`, import `@/lib/chart/register-chartjs` once near your chart trees, and pass options built from `usePhChartTokens` / `build*Demo` helpers (or copy the pattern).
240
+
241
+ ## Develop
242
+
243
+ ```bash
244
+ bun install # creates node_modules/ from package.json — do not commit this folder
245
+ bun run dev
246
+ ```
247
+
248
+ ```bash
249
+ bunx tsc --noEmit
250
+ bun run build
251
+ bun run clean # drops .next/ and TS cache; run before a fresh build if needed
252
+ ```