@danieldeusing/design 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 (18) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +168 -0
  3. package/dist/danieldeusing-design.css +554 -0
  4. package/dist/danieldeusing-design.min.css +2 -0
  5. package/package.json +65 -0
  6. package/runtime/dropdown.js +44 -0
  7. package/runtime/index.js +16 -0
  8. package/runtime/terminal.js +120 -0
  9. package/runtime/theme.js +107 -0
  10. package/runtime/zoom.js +25 -0
  11. package/src/base.css +68 -0
  12. package/src/components.css +288 -0
  13. package/src/fonts.css +40 -0
  14. package/src/index.css +19 -0
  15. package/src/reset.css +74 -0
  16. package/src/tailwind.css +48 -0
  17. package/src/tokens.css +116 -0
  18. package/tokens/tokens.json +100 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Daniel Deusing
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,168 @@
1
+ # danieldeusing-design
2
+
3
+ The shared **terminal design system** behind [danieldeusing.de](https://danieldeusing.de),
4
+ [seedr](https://seedr.danieldeusing.de), and [briefs](https://briefs.danieldeusing.de):
5
+ CRT phosphor on JetBrains Mono, `$`-prompts, ASCII rules, a scanline overlay, and four
6
+ switchable themes — `warm` (default), `green`, `mono`, `paper`.
7
+
8
+ It is **framework-agnostic and build-free at its core**: plain CSS custom properties plus a
9
+ small component layer, with an optional Tailwind v4 mapping and a dependency-free vanilla-JS
10
+ runtime. The same files dress an Astro site, a React/Vite app, an Angular app, a Tauri
11
+ webview, or a single static HTML file served straight off a CDN.
12
+
13
+ ```
14
+ warm ▓ #f5efe2 on #43352a the default — warm paper, sepia ink
15
+ green ▓ #020604 on #4fdd7d CRT phosphor green
16
+ mono ▓ #050505 on #d4d4d4 white-phosphor terminal
17
+ paper ▓ #fafafa on #1f1f1f black-on-white (e-ink / printout)
18
+ ```
19
+
20
+ ## Quick start
21
+
22
+ ### 1. A single HTML file (no build step)
23
+
24
+ Link the built bundle from jsDelivr and you have the whole look. **Pin a release tag** — never
25
+ `@latest` or `@main` in production (mutable refs cache for days on the CDN).
26
+
27
+ ```html
28
+ <!doctype html>
29
+ <html lang="en">
30
+ <head>
31
+ <meta charset="utf-8" />
32
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
33
+ <meta name="theme-color" content="#f5efe2" />
34
+
35
+ <!-- pre-paint: apply the saved theme before first paint to avoid a flash -->
36
+ <script>
37
+ (() => {
38
+ const bg = { warm: "#f5efe2", green: "#020604", mono: "#050505", paper: "#fafafa" };
39
+ let t = "warm";
40
+ try { const s = localStorage.getItem("theme"); if (s && s in bg) t = s; } catch {}
41
+ document.documentElement.dataset.theme = t;
42
+ document.querySelector('meta[name=theme-color]')?.setAttribute("content", bg[t]);
43
+ })();
44
+ </script>
45
+
46
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/danieldeusing/danieldeusing-design@v0.1.0/dist/danieldeusing-design.min.css" />
47
+ <!-- optional: the real JetBrains Mono webfont (otherwise falls back to Menlo) -->
48
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/danieldeusing/danieldeusing-design@v0.1.0/src/fonts.css" />
49
+ </head>
50
+ <body>
51
+ <p class="prompt">cat hello.txt</p>
52
+ <h1 class="glow">It works.</h1>
53
+ <a class="btn-terminal" href="#">run</a>
54
+
55
+ <script type="module">
56
+ import { initThemeSwitcher, initDropdowns, initTerminal } from
57
+ "https://cdn.jsdelivr.net/gh/danieldeusing/danieldeusing-design@v0.1.0/runtime/index.js";
58
+ initThemeSwitcher();
59
+ initDropdowns();
60
+ initTerminal();
61
+ </script>
62
+ </body>
63
+ </html>
64
+ ```
65
+
66
+ Need a starting point? Copy [`examples/style-guide.html`](examples/style-guide.html) or the
67
+ documentation template at [`templates/documentation.html`](templates/documentation.html).
68
+
69
+ ### 2. A Tailwind v4 app (Astro, Vite, …)
70
+
71
+ Install, then import the Tailwind entry **after** Tailwind itself in your main CSS:
72
+
73
+ ```css
74
+ @import "tailwindcss";
75
+ @import "@danieldeusing/design/tailwind.css";
76
+
77
+ /* REQUIRED so Tailwind sees the core component classes (.prompt, .btn-terminal, …)
78
+ in this package and doesn't tree-shake them away. Adjust the relative depth so it
79
+ resolves to node_modules from this file's location. */
80
+ @source "../node_modules/@danieldeusing/design";
81
+ ```
82
+
83
+ You now get the tokens, base layer, components, **and** Tailwind utilities wired to the live
84
+ theme — `bg-background`, `text-foreground`, `border-border`, `font-mono`, etc. all follow
85
+ `html[data-theme]` at runtime.
86
+
87
+ ### 3. Plain CSS — React, Angular, Vue, Tauri (no Tailwind)
88
+
89
+ Import the build-free bundle once, anywhere your bundler handles CSS:
90
+
91
+ ```js
92
+ import "@danieldeusing/design"; // the "." export = the full bundle (reset + tokens + base + components)
93
+ ```
94
+
95
+ Individual layers are exported too: `@danieldeusing/design/tokens.css`, `…/base.css`,
96
+ `…/components.css`, `…/reset.css`, `…/fonts.css`.
97
+
98
+ ## Runtime (optional)
99
+
100
+ Four dependency-free ES modules, tree-shakeable from `@danieldeusing/design/runtime`:
101
+
102
+ | Import | Purpose |
103
+ | --- | --- |
104
+ | `applyStoredTheme()` | Apply the saved theme. **Call inline in `<head>` pre-paint** to avoid a flash. |
105
+ | `setTheme(name)` / `initThemeSwitcher()` | Switch themes and wire `[data-theme-value]` buttons + `[data-theme-label]`. |
106
+ | `initTerminal()` | The `$ command` typing animation. No-ops under reduced motion / `html.anim-off`. |
107
+ | `initDropdowns()` | `<details class="dropdown">` behaviour: one-open, click-away, Escape. |
108
+ | `initResolutionZoom(1920)` | Scale the whole layout up on screens wider than the reference width. |
109
+
110
+ ```js
111
+ import { applyStoredTheme, initThemeSwitcher, initDropdowns, initTerminal } from "@danieldeusing/design/runtime";
112
+ applyStoredTheme(); // ideally inline, pre-paint
113
+ initThemeSwitcher();
114
+ initDropdowns();
115
+ initTerminal();
116
+ ```
117
+
118
+ The runtime is **progressive enhancement**: with JS disabled, or `prefers-reduced-motion`, all
119
+ content is visible and the theme defaults to `warm`. A per-theme favicon swap is opt-in via
120
+ `applyStoredTheme({ faviconHref: (t) => \`/favicon-\${t}.svg\` })`.
121
+
122
+ ## Tokens
123
+
124
+ The source of truth is [`src/tokens.css`](src/tokens.css) — 18 semantic palette tokens (shadcn
125
+ naming), three CRT-atmosphere tokens (`--glow`, `--glow-soft`, `--scanline-opacity`), `--radius`
126
+ (0 everywhere), and `--font-mono`, each declared for all four themes.
127
+
128
+ For native / Tauri / Figma consumers, the build derives a machine-readable
129
+ [`tokens/tokens.json`](tokens/tokens.json) (values grouped by theme) from `tokens.css`.
130
+
131
+ ## Components
132
+
133
+ Plain-CSS primitives in [`src/components.css`](src/components.css), usable anywhere:
134
+
135
+ `.glow` / `.glow-lg` · `.prompt` (`$ ` prefix) · `.comment` (`# ` prefix) · `.cursor-block`
136
+ (blinking caret) · `.btn-terminal` (`> ` CTA) · `.link-quiet` · `.card-terminal` · `.ascii-rule`
137
+ · `.dropdown` / `.dropdown-panel` / `.dropdown-item` · `.eli5` / `.eli5-term` (callout) ·
138
+ the `[data-term]` / `[data-term-out]` typing-animation contract · the `html.anim-off`
139
+ kill-switch.
140
+
141
+ ## Repo layout
142
+
143
+ ```
144
+ src/ tokens.css · reset.css · base.css · components.css · index.css · tailwind.css · fonts.css
145
+ runtime/ theme.js · terminal.js · dropdown.js · zoom.js · index.js (dependency-free ESM)
146
+ dist/ danieldeusing-design.css + .min.css (committed — jsDelivr serves these)
147
+ tokens/ tokens.json (committed — generated from tokens.css)
148
+ examples/ style-guide.html (living showcase of every token + component)
149
+ templates/ documentation.html (one-page doc template)
150
+ docs/ migrations/ (plans for adopting this in the apps)
151
+ scripts/ build.mjs (zero-dependency build)
152
+ ```
153
+
154
+ ## Build
155
+
156
+ Zero dependencies. The build inlines `index.css`'s imports into the `dist/` bundle, minifies it,
157
+ and regenerates `tokens.json`:
158
+
159
+ ```sh
160
+ npm run build
161
+ ```
162
+
163
+ `dist/` and `tokens/tokens.json` are **committed on purpose** — jsDelivr serves the committed
164
+ bundle straight from GitHub, so rebuild and commit them before tagging a release.
165
+
166
+ ## License
167
+
168
+ MIT © Daniel Deusing