@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.
- package/LICENSE +21 -0
- package/README.md +168 -0
- package/dist/danieldeusing-design.css +554 -0
- package/dist/danieldeusing-design.min.css +2 -0
- package/package.json +65 -0
- package/runtime/dropdown.js +44 -0
- package/runtime/index.js +16 -0
- package/runtime/terminal.js +120 -0
- package/runtime/theme.js +107 -0
- package/runtime/zoom.js +25 -0
- package/src/base.css +68 -0
- package/src/components.css +288 -0
- package/src/fonts.css +40 -0
- package/src/index.css +19 -0
- package/src/reset.css +74 -0
- package/src/tailwind.css +48 -0
- package/src/tokens.css +116 -0
- package/tokens/tokens.json +100 -0
package/src/reset.css
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* danieldeusing-design — minimal reset.
|
|
3
|
+
*
|
|
4
|
+
* Only loaded on the build-free path (index.css / the dist bundle / CDN), where
|
|
5
|
+
* there is no Tailwind Preflight to normalize the document. Tailwind v4 apps must
|
|
6
|
+
* NOT import this — they already get an equivalent reset from Preflight, and
|
|
7
|
+
* importing it twice would be redundant. Deliberately tiny: it normalizes the box
|
|
8
|
+
* model and strips default margins so the terminal layout is predictable, and
|
|
9
|
+
* stops short of a full normalize.css.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
*,
|
|
13
|
+
*::before,
|
|
14
|
+
*::after {
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
* {
|
|
19
|
+
margin: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
html {
|
|
23
|
+
-webkit-text-size-adjust: 100%;
|
|
24
|
+
text-size-adjust: 100%;
|
|
25
|
+
tab-size: 4;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
body {
|
|
29
|
+
min-height: 100vh;
|
|
30
|
+
min-height: 100dvh;
|
|
31
|
+
line-height: 1.5;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
img,
|
|
35
|
+
picture,
|
|
36
|
+
video,
|
|
37
|
+
canvas,
|
|
38
|
+
svg {
|
|
39
|
+
display: block;
|
|
40
|
+
max-width: 100%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
input,
|
|
44
|
+
button,
|
|
45
|
+
textarea,
|
|
46
|
+
select {
|
|
47
|
+
font: inherit;
|
|
48
|
+
color: inherit;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
p,
|
|
52
|
+
h1,
|
|
53
|
+
h2,
|
|
54
|
+
h3,
|
|
55
|
+
h4,
|
|
56
|
+
h5,
|
|
57
|
+
h6 {
|
|
58
|
+
overflow-wrap: break-word;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
ul,
|
|
62
|
+
ol {
|
|
63
|
+
list-style: none;
|
|
64
|
+
padding: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
a {
|
|
68
|
+
color: inherit;
|
|
69
|
+
text-decoration: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
table {
|
|
73
|
+
border-collapse: collapse;
|
|
74
|
+
}
|
package/src/tailwind.css
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* danieldeusing-design — Tailwind v4 entry point.
|
|
3
|
+
*
|
|
4
|
+
* For apps that use Tailwind v4. Import AFTER Tailwind itself so this wins over
|
|
5
|
+
* Preflight:
|
|
6
|
+
*
|
|
7
|
+
* @import "tailwindcss";
|
|
8
|
+
* @import "@danieldeusing/design/tailwind.css";
|
|
9
|
+
*
|
|
10
|
+
* This brings the tokens, base layer, and component primitives, then maps the
|
|
11
|
+
* tokens into Tailwind's theme via `@theme inline` — so `bg-background`,
|
|
12
|
+
* `text-foreground`, `border-border`, `font-mono`, etc. resolve to the live CSS
|
|
13
|
+
* variables and follow html[data-theme] at runtime. No reset is imported here:
|
|
14
|
+
* Tailwind's Preflight already normalizes the document.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
@import "./tokens.css";
|
|
18
|
+
@import "./base.css";
|
|
19
|
+
@import "./components.css";
|
|
20
|
+
|
|
21
|
+
@theme inline {
|
|
22
|
+
--color-background: var(--background);
|
|
23
|
+
--color-foreground: var(--foreground);
|
|
24
|
+
--color-card: var(--card);
|
|
25
|
+
--color-card-foreground: var(--card-foreground);
|
|
26
|
+
--color-popover: var(--popover);
|
|
27
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
28
|
+
--color-primary: var(--primary);
|
|
29
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
30
|
+
--color-secondary: var(--secondary);
|
|
31
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
32
|
+
--color-muted: var(--muted);
|
|
33
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
34
|
+
--color-accent: var(--accent);
|
|
35
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
36
|
+
--color-destructive: var(--destructive);
|
|
37
|
+
--color-border: var(--border);
|
|
38
|
+
--color-input: var(--input);
|
|
39
|
+
--color-ring: var(--ring);
|
|
40
|
+
|
|
41
|
+
--font-sans: var(--font-mono);
|
|
42
|
+
--font-mono: var(--font-mono);
|
|
43
|
+
|
|
44
|
+
--radius-sm: var(--radius);
|
|
45
|
+
--radius-md: var(--radius);
|
|
46
|
+
--radius-lg: var(--radius);
|
|
47
|
+
--radius-xl: var(--radius);
|
|
48
|
+
}
|
package/src/tokens.css
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* danieldeusing-design — design tokens.
|
|
3
|
+
*
|
|
4
|
+
* The single source of truth for the "terminal" theme: CRT phosphor on
|
|
5
|
+
* JetBrains Mono, $-prompts, ASCII rules, scanline overlay. Four variants
|
|
6
|
+
* selected via html[data-theme]: warm (default), green, mono, paper.
|
|
7
|
+
* :root holds the warm defaults so the theme works with no attribute set.
|
|
8
|
+
*
|
|
9
|
+
* These are plain CSS custom properties — they work in any framework, any
|
|
10
|
+
* browser, with or without a build step. Load this file first; base.css and
|
|
11
|
+
* components.css resolve against the variables declared here.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
:root {
|
|
15
|
+
--background: #f5efe2;
|
|
16
|
+
--foreground: #43352a;
|
|
17
|
+
--card: #efe7d4;
|
|
18
|
+
--card-foreground: #43352a;
|
|
19
|
+
--popover: #efe7d4;
|
|
20
|
+
--popover-foreground: #43352a;
|
|
21
|
+
--primary: #8a4516;
|
|
22
|
+
--primary-foreground: #f8f3e8;
|
|
23
|
+
--secondary: #ece3cf;
|
|
24
|
+
--secondary-foreground: #43352a;
|
|
25
|
+
--muted: #ece3cf;
|
|
26
|
+
--muted-foreground: #71614e;
|
|
27
|
+
--accent: #8a4516;
|
|
28
|
+
--accent-foreground: #f8f3e8;
|
|
29
|
+
--destructive: #a02c2c;
|
|
30
|
+
--border: #d9cdb6;
|
|
31
|
+
--input: #d9cdb6;
|
|
32
|
+
--ring: #8a4516;
|
|
33
|
+
|
|
34
|
+
--glow: rgba(160, 82, 45, 0.1);
|
|
35
|
+
--glow-soft: rgba(160, 82, 45, 0.05);
|
|
36
|
+
--scanline-opacity: 0.15;
|
|
37
|
+
|
|
38
|
+
--radius: 0rem;
|
|
39
|
+
|
|
40
|
+
--font-mono: "JetBrains Mono Variable", "JetBrains Mono", "Menlo", monospace;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* CRT phosphor green */
|
|
44
|
+
html[data-theme="green"] {
|
|
45
|
+
--background: #020604;
|
|
46
|
+
--foreground: #4fdd7d;
|
|
47
|
+
--card: #04110a;
|
|
48
|
+
--card-foreground: #4fdd7d;
|
|
49
|
+
--popover: #04110a;
|
|
50
|
+
--popover-foreground: #4fdd7d;
|
|
51
|
+
--primary: #33ff66;
|
|
52
|
+
--primary-foreground: #02160a;
|
|
53
|
+
--secondary: #071509;
|
|
54
|
+
--secondary-foreground: #4fdd7d;
|
|
55
|
+
--muted: #071509;
|
|
56
|
+
--muted-foreground: #3da45e;
|
|
57
|
+
--accent: #33ff66;
|
|
58
|
+
--accent-foreground: #02160a;
|
|
59
|
+
--destructive: #ff5c5c;
|
|
60
|
+
--border: #1c4a2c;
|
|
61
|
+
--input: #1c4a2c;
|
|
62
|
+
--ring: #33ff66;
|
|
63
|
+
--glow: rgba(51, 255, 102, 0.35);
|
|
64
|
+
--glow-soft: rgba(51, 255, 102, 0.12);
|
|
65
|
+
--scanline-opacity: 0.5;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* white-phosphor terminal */
|
|
69
|
+
html[data-theme="mono"] {
|
|
70
|
+
--background: #050505;
|
|
71
|
+
--foreground: #d4d4d4;
|
|
72
|
+
--card: #0d0d0d;
|
|
73
|
+
--card-foreground: #d4d4d4;
|
|
74
|
+
--popover: #0d0d0d;
|
|
75
|
+
--popover-foreground: #d4d4d4;
|
|
76
|
+
--primary: #ffffff;
|
|
77
|
+
--primary-foreground: #050505;
|
|
78
|
+
--secondary: #111111;
|
|
79
|
+
--secondary-foreground: #d4d4d4;
|
|
80
|
+
--muted: #111111;
|
|
81
|
+
--muted-foreground: #8a8a8a;
|
|
82
|
+
--accent: #ffffff;
|
|
83
|
+
--accent-foreground: #050505;
|
|
84
|
+
--destructive: #ff5c5c;
|
|
85
|
+
--border: #333333;
|
|
86
|
+
--input: #333333;
|
|
87
|
+
--ring: #ffffff;
|
|
88
|
+
--glow: rgba(255, 255, 255, 0.25);
|
|
89
|
+
--glow-soft: rgba(255, 255, 255, 0.08);
|
|
90
|
+
--scanline-opacity: 0.45;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* black-on-white terminal (e-ink / printout) */
|
|
94
|
+
html[data-theme="paper"] {
|
|
95
|
+
--background: #fafafa;
|
|
96
|
+
--foreground: #1f1f1f;
|
|
97
|
+
--card: #f1f1f1;
|
|
98
|
+
--card-foreground: #1f1f1f;
|
|
99
|
+
--popover: #f1f1f1;
|
|
100
|
+
--popover-foreground: #1f1f1f;
|
|
101
|
+
--primary: #000000;
|
|
102
|
+
--primary-foreground: #fafafa;
|
|
103
|
+
--secondary: #efefef;
|
|
104
|
+
--secondary-foreground: #1f1f1f;
|
|
105
|
+
--muted: #efefef;
|
|
106
|
+
--muted-foreground: #595959;
|
|
107
|
+
--accent: #000000;
|
|
108
|
+
--accent-foreground: #fafafa;
|
|
109
|
+
--destructive: #b3261e;
|
|
110
|
+
--border: #d4d4d4;
|
|
111
|
+
--input: #d4d4d4;
|
|
112
|
+
--ring: #000000;
|
|
113
|
+
--glow: rgba(0, 0, 0, 0.06);
|
|
114
|
+
--glow-soft: rgba(0, 0, 0, 0.04);
|
|
115
|
+
--scanline-opacity: 0.12;
|
|
116
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://danieldeusing.de/schemas/design-tokens.json",
|
|
3
|
+
"description": "danieldeusing terminal design tokens, by theme. Generated from src/tokens.css — do not edit by hand.",
|
|
4
|
+
"themes": {
|
|
5
|
+
"warm": {
|
|
6
|
+
"background": "#f5efe2",
|
|
7
|
+
"foreground": "#43352a",
|
|
8
|
+
"card": "#efe7d4",
|
|
9
|
+
"card-foreground": "#43352a",
|
|
10
|
+
"popover": "#efe7d4",
|
|
11
|
+
"popover-foreground": "#43352a",
|
|
12
|
+
"primary": "#8a4516",
|
|
13
|
+
"primary-foreground": "#f8f3e8",
|
|
14
|
+
"secondary": "#ece3cf",
|
|
15
|
+
"secondary-foreground": "#43352a",
|
|
16
|
+
"muted": "#ece3cf",
|
|
17
|
+
"muted-foreground": "#71614e",
|
|
18
|
+
"accent": "#8a4516",
|
|
19
|
+
"accent-foreground": "#f8f3e8",
|
|
20
|
+
"destructive": "#a02c2c",
|
|
21
|
+
"border": "#d9cdb6",
|
|
22
|
+
"input": "#d9cdb6",
|
|
23
|
+
"ring": "#8a4516",
|
|
24
|
+
"glow": "rgba(160, 82, 45, 0.1)",
|
|
25
|
+
"glow-soft": "rgba(160, 82, 45, 0.05)",
|
|
26
|
+
"scanline-opacity": "0.15",
|
|
27
|
+
"radius": "0rem",
|
|
28
|
+
"font-mono": "\"JetBrains Mono Variable\", \"JetBrains Mono\", \"Menlo\", monospace"
|
|
29
|
+
},
|
|
30
|
+
"green": {
|
|
31
|
+
"background": "#020604",
|
|
32
|
+
"foreground": "#4fdd7d",
|
|
33
|
+
"card": "#04110a",
|
|
34
|
+
"card-foreground": "#4fdd7d",
|
|
35
|
+
"popover": "#04110a",
|
|
36
|
+
"popover-foreground": "#4fdd7d",
|
|
37
|
+
"primary": "#33ff66",
|
|
38
|
+
"primary-foreground": "#02160a",
|
|
39
|
+
"secondary": "#071509",
|
|
40
|
+
"secondary-foreground": "#4fdd7d",
|
|
41
|
+
"muted": "#071509",
|
|
42
|
+
"muted-foreground": "#3da45e",
|
|
43
|
+
"accent": "#33ff66",
|
|
44
|
+
"accent-foreground": "#02160a",
|
|
45
|
+
"destructive": "#ff5c5c",
|
|
46
|
+
"border": "#1c4a2c",
|
|
47
|
+
"input": "#1c4a2c",
|
|
48
|
+
"ring": "#33ff66",
|
|
49
|
+
"glow": "rgba(51, 255, 102, 0.35)",
|
|
50
|
+
"glow-soft": "rgba(51, 255, 102, 0.12)",
|
|
51
|
+
"scanline-opacity": "0.5"
|
|
52
|
+
},
|
|
53
|
+
"mono": {
|
|
54
|
+
"background": "#050505",
|
|
55
|
+
"foreground": "#d4d4d4",
|
|
56
|
+
"card": "#0d0d0d",
|
|
57
|
+
"card-foreground": "#d4d4d4",
|
|
58
|
+
"popover": "#0d0d0d",
|
|
59
|
+
"popover-foreground": "#d4d4d4",
|
|
60
|
+
"primary": "#ffffff",
|
|
61
|
+
"primary-foreground": "#050505",
|
|
62
|
+
"secondary": "#111111",
|
|
63
|
+
"secondary-foreground": "#d4d4d4",
|
|
64
|
+
"muted": "#111111",
|
|
65
|
+
"muted-foreground": "#8a8a8a",
|
|
66
|
+
"accent": "#ffffff",
|
|
67
|
+
"accent-foreground": "#050505",
|
|
68
|
+
"destructive": "#ff5c5c",
|
|
69
|
+
"border": "#333333",
|
|
70
|
+
"input": "#333333",
|
|
71
|
+
"ring": "#ffffff",
|
|
72
|
+
"glow": "rgba(255, 255, 255, 0.25)",
|
|
73
|
+
"glow-soft": "rgba(255, 255, 255, 0.08)",
|
|
74
|
+
"scanline-opacity": "0.45"
|
|
75
|
+
},
|
|
76
|
+
"paper": {
|
|
77
|
+
"background": "#fafafa",
|
|
78
|
+
"foreground": "#1f1f1f",
|
|
79
|
+
"card": "#f1f1f1",
|
|
80
|
+
"card-foreground": "#1f1f1f",
|
|
81
|
+
"popover": "#f1f1f1",
|
|
82
|
+
"popover-foreground": "#1f1f1f",
|
|
83
|
+
"primary": "#000000",
|
|
84
|
+
"primary-foreground": "#fafafa",
|
|
85
|
+
"secondary": "#efefef",
|
|
86
|
+
"secondary-foreground": "#1f1f1f",
|
|
87
|
+
"muted": "#efefef",
|
|
88
|
+
"muted-foreground": "#595959",
|
|
89
|
+
"accent": "#000000",
|
|
90
|
+
"accent-foreground": "#fafafa",
|
|
91
|
+
"destructive": "#b3261e",
|
|
92
|
+
"border": "#d4d4d4",
|
|
93
|
+
"input": "#d4d4d4",
|
|
94
|
+
"ring": "#000000",
|
|
95
|
+
"glow": "rgba(0, 0, 0, 0.06)",
|
|
96
|
+
"glow-soft": "rgba(0, 0, 0, 0.04)",
|
|
97
|
+
"scanline-opacity": "0.12"
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|