anentrypoint-design 0.0.108 → 0.0.110
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/README.md +0 -4
- package/app-shell.css +24 -0
- package/colors_and_type.css +36 -2
- package/dist/247420.css +60 -2
- package/dist/247420.js +12 -12
- package/package.json +1 -1
- package/src/components/theme-toggle.js +70 -0
- package/src/components.js +2 -0
- package/src/index.js +7 -2
- package/src/theme.js +99 -0
package/README.md
CHANGED
|
@@ -6,10 +6,6 @@ friendly rounded sans body, monospace only on real code, tonal surfaces over bor
|
|
|
6
6
|
|
|
7
7
|
we fart in its general direction. ◰
|
|
8
8
|
|
|
9
|
-
## demos
|
|
10
|
-
|
|
11
|
-
- **OS-GUI exemplar** — [`/os-gui-demo.html`](https://anentrypoint.github.io/Design/os-gui-demo.html) — UI-only showcase of every hoisted desktop surface (`createDesktopShell`, `renderWindow`, `renderDock`, `renderFilesApp`, `renderMonitorApp`, `createFreddieDashboard`, `<freddie-chat>`) wired against mock data. This is the upstream reference any host (e.g. thebird) consumes via npm.
|
|
12
|
-
|
|
13
9
|
## install (the only step)
|
|
14
10
|
|
|
15
11
|
You have two choices. Both are one line.
|
package/app-shell.css
CHANGED
|
@@ -568,3 +568,27 @@ table tr.clickable:hover td { background: var(--bg-2); }
|
|
|
568
568
|
.ds-file-row .name { font-weight: 500; }
|
|
569
569
|
.ds-file-row .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
|
|
570
570
|
.ds-file-row .time { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
|
|
571
|
+
|
|
572
|
+
/* ============================================================
|
|
573
|
+
Theme toggle (segmented + compact) — bound to src/theme.js
|
|
574
|
+
============================================================ */
|
|
575
|
+
.ds-segmented {
|
|
576
|
+
display: inline-flex; gap: 0; padding: 2px;
|
|
577
|
+
background: var(--bg-2); border-radius: var(--r-pill);
|
|
578
|
+
font-family: var(--ff-mono); font-size: var(--fs-xs);
|
|
579
|
+
}
|
|
580
|
+
.ds-segmented .ds-seg-btn {
|
|
581
|
+
background: transparent; border: 0; color: var(--fg-3);
|
|
582
|
+
padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer;
|
|
583
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
584
|
+
transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
|
|
585
|
+
}
|
|
586
|
+
.ds-segmented .ds-seg-btn:hover { color: var(--fg); }
|
|
587
|
+
.ds-segmented .ds-seg-btn.is-on {
|
|
588
|
+
background: var(--bg); color: var(--fg);
|
|
589
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
|
590
|
+
}
|
|
591
|
+
.ds-theme-toggle.btn {
|
|
592
|
+
font-family: var(--ff-mono); font-size: var(--fs-xs);
|
|
593
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
594
|
+
}
|
package/colors_and_type.css
CHANGED
|
@@ -47,9 +47,17 @@
|
|
|
47
47
|
--accent-fg: var(--paper);
|
|
48
48
|
--accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg));
|
|
49
49
|
|
|
50
|
-
--panel-bg:
|
|
51
|
-
--panel-bg-2:
|
|
50
|
+
--panel-bg: var(--bg);
|
|
51
|
+
--panel-bg-2: var(--bg-2);
|
|
52
52
|
--panel-accent: var(--accent);
|
|
53
|
+
--panel-1: var(--bg-2);
|
|
54
|
+
--panel-2: var(--bg-3);
|
|
55
|
+
--panel-3: color-mix(in oklab, var(--fg) 12%, transparent);
|
|
56
|
+
--panel-text: var(--fg);
|
|
57
|
+
--panel-text-2: var(--fg-2);
|
|
58
|
+
--panel-text-3: var(--fg-3);
|
|
59
|
+
--panel-accent-2: var(--accent-bright, var(--accent));
|
|
60
|
+
--panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent);
|
|
53
61
|
|
|
54
62
|
/* Type — one family, used purposefully. Space Grotesk for everything
|
|
55
63
|
non-mono. The display/narrow aliases stay so consumers that reference
|
|
@@ -154,6 +162,32 @@
|
|
|
154
162
|
}
|
|
155
163
|
}
|
|
156
164
|
|
|
165
|
+
/* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g.
|
|
166
|
+
mount() added the class to an inner element while the ancestor html
|
|
167
|
+
already had it), the inner element would otherwise re-trigger the root
|
|
168
|
+
light defaults and detach from the ancestor's data-theme override. Force
|
|
169
|
+
the inner element to inherit the ancestor's resolved tokens. */
|
|
170
|
+
.ds-247420 .ds-247420 {
|
|
171
|
+
--bg: inherit;
|
|
172
|
+
--bg-2: inherit;
|
|
173
|
+
--bg-3: inherit;
|
|
174
|
+
--fg: inherit;
|
|
175
|
+
--fg-2: inherit;
|
|
176
|
+
--fg-3: inherit;
|
|
177
|
+
--panel-bg: inherit;
|
|
178
|
+
--panel-bg-2: inherit;
|
|
179
|
+
--accent: inherit;
|
|
180
|
+
--accent-fg: inherit;
|
|
181
|
+
--panel-1: inherit;
|
|
182
|
+
--panel-2: inherit;
|
|
183
|
+
--panel-3: inherit;
|
|
184
|
+
--panel-text: inherit;
|
|
185
|
+
--panel-text-2: inherit;
|
|
186
|
+
--panel-text-3: inherit;
|
|
187
|
+
--panel-accent-2: inherit;
|
|
188
|
+
--panel-shadow: inherit;
|
|
189
|
+
}
|
|
190
|
+
|
|
157
191
|
[data-density="compact"] { --density: 0.75; }
|
|
158
192
|
[data-density="comfortable"] { --density: 1; }
|
|
159
193
|
[data-density="spacious"] { --density: 1.35; }
|
package/dist/247420.css
CHANGED
|
@@ -51,9 +51,17 @@
|
|
|
51
51
|
--accent-fg: var(--paper);
|
|
52
52
|
--accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg));
|
|
53
53
|
|
|
54
|
-
--panel-bg:
|
|
55
|
-
--panel-bg-2:
|
|
54
|
+
--panel-bg: var(--bg);
|
|
55
|
+
--panel-bg-2: var(--bg-2);
|
|
56
56
|
--panel-accent: var(--accent);
|
|
57
|
+
--panel-1: var(--bg-2);
|
|
58
|
+
--panel-2: var(--bg-3);
|
|
59
|
+
--panel-3: color-mix(in oklab, var(--fg) 12%, transparent);
|
|
60
|
+
--panel-text: var(--fg);
|
|
61
|
+
--panel-text-2: var(--fg-2);
|
|
62
|
+
--panel-text-3: var(--fg-3);
|
|
63
|
+
--panel-accent-2: var(--accent-bright, var(--accent));
|
|
64
|
+
--panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent);
|
|
57
65
|
|
|
58
66
|
/* Type — one family, used purposefully. Space Grotesk for everything
|
|
59
67
|
non-mono. The display/narrow aliases stay so consumers that reference
|
|
@@ -158,6 +166,32 @@
|
|
|
158
166
|
}
|
|
159
167
|
}
|
|
160
168
|
|
|
169
|
+
/* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g.
|
|
170
|
+
mount() added the class to an inner element while the ancestor html
|
|
171
|
+
already had it), the inner element would otherwise re-trigger the root
|
|
172
|
+
light defaults and detach from the ancestor's data-theme override. Force
|
|
173
|
+
the inner element to inherit the ancestor's resolved tokens. */
|
|
174
|
+
.ds-247420 .ds-247420 .ds-247420 {
|
|
175
|
+
--bg: inherit;
|
|
176
|
+
--bg-2: inherit;
|
|
177
|
+
--bg-3: inherit;
|
|
178
|
+
--fg: inherit;
|
|
179
|
+
--fg-2: inherit;
|
|
180
|
+
--fg-3: inherit;
|
|
181
|
+
--panel-bg: inherit;
|
|
182
|
+
--panel-bg-2: inherit;
|
|
183
|
+
--accent: inherit;
|
|
184
|
+
--accent-fg: inherit;
|
|
185
|
+
--panel-1: inherit;
|
|
186
|
+
--panel-2: inherit;
|
|
187
|
+
--panel-3: inherit;
|
|
188
|
+
--panel-text: inherit;
|
|
189
|
+
--panel-text-2: inherit;
|
|
190
|
+
--panel-text-3: inherit;
|
|
191
|
+
--panel-accent-2: inherit;
|
|
192
|
+
--panel-shadow: inherit;
|
|
193
|
+
}
|
|
194
|
+
|
|
161
195
|
.ds-247420[data-density="compact"] { --density: 0.75; }
|
|
162
196
|
.ds-247420[data-density="comfortable"] { --density: 1; }
|
|
163
197
|
.ds-247420[data-density="spacious"] { --density: 1.35; }
|
|
@@ -737,3 +771,27 @@
|
|
|
737
771
|
.ds-247420 .ds-file-row .name { font-weight: 500; }
|
|
738
772
|
.ds-247420 .ds-file-row .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
|
|
739
773
|
.ds-247420 .ds-file-row .time { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
|
|
774
|
+
|
|
775
|
+
/* ============================================================
|
|
776
|
+
Theme toggle (segmented + compact) — bound to src/theme.js
|
|
777
|
+
============================================================ */
|
|
778
|
+
.ds-247420 .ds-segmented {
|
|
779
|
+
display: inline-flex; gap: 0; padding: 2px;
|
|
780
|
+
background: var(--bg-2); border-radius: var(--r-pill);
|
|
781
|
+
font-family: var(--ff-mono); font-size: var(--fs-xs);
|
|
782
|
+
}
|
|
783
|
+
.ds-247420 .ds-segmented .ds-seg-btn {
|
|
784
|
+
background: transparent; border: 0; color: var(--fg-3);
|
|
785
|
+
padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer;
|
|
786
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
787
|
+
transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
|
|
788
|
+
}
|
|
789
|
+
.ds-247420 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
|
|
790
|
+
.ds-247420 .ds-segmented .ds-seg-btn.is-on {
|
|
791
|
+
background: var(--bg); color: var(--fg);
|
|
792
|
+
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
|
793
|
+
}
|
|
794
|
+
.ds-247420 .ds-theme-toggle.btn {
|
|
795
|
+
font-family: var(--ff-mono); font-size: var(--fs-xs);
|
|
796
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
797
|
+
}
|