@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.
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Font stacks — `next/font` only injects `--font-inter`; glyphs & canvas should match body.
3
+ *
4
+ * `@tailwindcss/typography`: not wired here on purpose — this repo uses PostHog-style
5
+ * component-level sizes (`.ph-btn`, `.ph-table`, `.ph-h2-rule`) instead of prose blocks.
6
+ */
7
+
8
+ :root {
9
+ /* Code / CSV / token chips — monospace with clear ASCII */
10
+ --ph-font-monospace-stack:
11
+ ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
12
+ monospace;
13
+ /**
14
+ * Modifier keys ⌘ ⌥ ⇧ etc. Need system UI glyphs (Apple Symbols on macOS, Segoe on Windows).
15
+ * Inter latin subset lacks many symbol codepoints; monospace stacks worsen tofu.
16
+ */
17
+ --ph-font-shortcut-stack: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
18
+ Helvetica, Arial, sans-serif;
19
+ }
@@ -0,0 +1,70 @@
1
+ import type { Config } from "tailwindcss";
2
+
3
+ /**
4
+ * PostHog-theme **Tailwind preset** — `ph.*` colours, Lemon radii/shadows, font stack.
5
+ * Use in a consuming Next.js app: import this preset and set `presets: [posthogTheme]` in
6
+ * `tailwind.config.ts`, plus a `content` glob that matches your `ts` and `tsx` files under `src` (or `app`).
7
+ */
8
+ const posthogThemePreset: Partial<Config> = {
9
+ theme: {
10
+ extend: {
11
+ fontFamily: {
12
+ sans: [
13
+ '"Open Runde"',
14
+ "ui-sans-serif",
15
+ "system-ui",
16
+ "-apple-system",
17
+ "BlinkMacSystemFont",
18
+ "Segoe UI",
19
+ "Roboto",
20
+ "Helvetica Neue",
21
+ "Arial",
22
+ "sans-serif",
23
+ ],
24
+ mono: ["var(--ph-font-monospace-stack)"],
25
+ shortcut: ["var(--ph-font-shortcut-stack)"],
26
+ },
27
+ borderRadius: {
28
+ lemon: "var(--ph-radius-app)",
29
+ },
30
+ boxShadow: {
31
+ "lemon-ridge-primary": "0 0.1875rem 0 -1px var(--ph-primary-frame-bg)",
32
+ "lemon-ridge-secondary": "0 0.1875rem 0 -1px var(--ph-secondary-frame-bg)",
33
+ "elevation-3000": "0 3px 0 var(--ph-border-3000)",
34
+ ph: "0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06)",
35
+ "ph-md": "0 2px 4px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.08)",
36
+ },
37
+ colors: {
38
+ ph: {
39
+ canvas: "var(--ph-canvas)",
40
+ surface: "var(--ph-surface)",
41
+ muted: "var(--ph-muted)",
42
+ toolbar: "var(--ph-toolbar)",
43
+ border: "var(--ph-border)",
44
+ strong: "var(--ph-border-strong)",
45
+ ink: "var(--ph-text-primary)",
46
+ subtle: "var(--ph-text-secondary)",
47
+ mutedtext: "var(--ph-text-tertiary)",
48
+ brand: "var(--ph-accent)",
49
+ "brand-hover": "var(--ph-accent-hover)",
50
+ blue: "var(--ph-blue)",
51
+ violet: "var(--ph-violet)",
52
+ purple: "var(--ph-purple)",
53
+ success: "var(--ph-success)",
54
+ warning: "var(--ph-warning)",
55
+ danger: "var(--ph-danger)",
56
+ info: "var(--ph-info)",
57
+ "btn-primary-face": "var(--ph-primary-button-face)",
58
+ "btn-primary-border": "var(--ph-primary-button-border)",
59
+ "btn-primary-frame": "var(--ph-primary-frame-bg)",
60
+ "btn-secondary-face": "var(--ph-secondary-button-bg)",
61
+ "btn-secondary-border": "var(--ph-secondary-button-border)",
62
+ "btn-secondary-frame": "var(--ph-secondary-frame-bg)",
63
+ },
64
+ },
65
+ },
66
+ },
67
+ plugins: [],
68
+ };
69
+
70
+ export default posthogThemePreset;