anentrypoint-design 0.0.49 → 0.0.51

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/desktop/theme.css +70 -53
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "anentrypoint-design",
3
- "version": "0.0.49",
3
+ "version": "0.0.51",
4
4
  "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
5
5
  "type": "module",
6
6
  "main": "./dist/247420.js",
package/src/desktop/theme.css CHANGED
@@ -1,25 +1,26 @@
1
1
  :root {
2
- --os-accent: #3FA93A;
3
- --os-accent-2: #79e872;
4
- --os-accent-soft: rgba(63, 169, 58, 0.16);
5
- --os-bg-0: #0b0d10;
6
- --os-bg-1: #14181d;
7
- --os-bg-2: #1a1f26;
8
- --os-bg-3: #222831;
9
- --os-fg: #e7ecf2;
10
- --os-fg-2: #93a0ad;
11
- --os-fg-3: #5a6571;
12
- --os-red: #d04444;
13
- --os-amber: #c0a02f;
14
- --os-green: #3FA93A;
15
- --os-radius: 6px;
16
- --os-radius-sm: 4px;
17
- --os-bar-h: 40px;
18
- --os-bar-h-mobile: 48px;
2
+ --os-accent: var(--panel-accent, #3F8A4A);
3
+ --os-accent-2: var(--panel-accent-2, #2B6B36);
4
+ --os-accent-soft: var(--panel-select, #D8ECCB);
5
+ --os-bg-0: var(--panel-0, #F5F0E4);
6
+ --os-bg-1: var(--panel-1, #FBF6EB);
7
+ --os-bg-2: var(--panel-2, #F0E9DA);
8
+ --os-bg-3: var(--panel-3, #E3DAC7);
9
+ --os-fg: var(--panel-text, #1F1B16);
10
+ --os-fg-2: var(--panel-text-2, #5A5246);
11
+ --os-fg-3: var(--panel-text-3, #857B6C);
12
+ --os-red: var(--warn, #FF6B4A);
13
+ --os-amber: var(--sun, #FFD86B);
14
+ --os-green: var(--green, #3F8A4A);
15
+ --os-radius: var(--r-2, 10px);
16
+ --os-radius-sm: var(--r-1, 6px);
17
+ --os-bar-h: 44px;
18
+ --os-bar-h-mobile: 52px;
19
19
  --os-rail-w: 64px;
20
20
  --os-tap: 44px;
21
- --os-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
22
- --os-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
21
+ --os-font: var(--ff-ui, 'Nunito', 'Inter', system-ui, sans-serif);
22
+ --os-display: var(--ff-display, 'Archivo Black', 'Archivo', 'Nunito', system-ui, sans-serif);
23
+ --os-mono: var(--ff-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
23
24
  }
24
25
 
25
26
  html, body {
@@ -45,8 +46,10 @@ html, body {
45
46
 
46
47
  .os-brand {
47
48
  color: var(--os-fg);
48
- font-weight: 600;
49
- letter-spacing: 0.01em;
49
+ font-family: var(--os-display);
50
+ font-weight: 700;
51
+ letter-spacing: -0.01em;
52
+ font-size: 15px;
50
53
  margin-right: 14px;
51
54
  display: inline-flex;
52
55
  align-items: center;
@@ -62,35 +65,41 @@ html, body {
62
65
 
63
66
  .os-btn {
64
67
  background: transparent;
65
- color: var(--os-fg);
68
+ color: var(--os-fg-2);
66
69
  border: none;
67
- padding: 6px 12px;
70
+ padding: 7px 14px;
68
71
  cursor: pointer;
69
72
  font: inherit;
70
- border-radius: var(--os-radius-sm);
71
- transition: background 100ms ease, color 100ms ease;
73
+ font-size: 13px;
74
+ border-radius: 999px;
75
+ transition: background 80ms ease, color 80ms ease;
72
76
  display: inline-flex;
73
77
  align-items: center;
74
78
  gap: 6px;
75
79
  outline: none;
76
80
  }
77
- .os-btn:hover { background: var(--os-bg-2); color: var(--os-accent-2); }
78
- .os-btn.active, .os-btn[aria-pressed="true"] { background: var(--os-accent-soft); color: var(--os-accent-2); }
79
- .os-btn:focus-visible { background: var(--os-bg-2); }
81
+ .os-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
82
+ .os-btn.active, .os-btn[aria-pressed="true"] { background: var(--os-accent); color: var(--panel-accent-fg, #fff); }
83
+ .os-btn:focus-visible { background: var(--panel-hover, var(--os-bg-2)); }
80
84
  .os-btn .ic { color: var(--os-accent); display: inline-flex; width: 16px; height: 16px; }
81
85
  .os-btn .ic svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; }
82
86
 
83
87
  .os-menu {
88
+ position: absolute;
84
89
  background: var(--os-bg-1);
85
90
  border: 1px solid var(--os-bg-3);
86
91
  border-radius: var(--os-radius);
87
- box-shadow: none;
88
92
  padding: 6px;
89
93
  min-width: 220px;
90
94
  top: calc(var(--os-bar-h) + 4px);
91
95
  left: 8px;
92
96
  z-index: 9500;
97
+ display: none;
98
+ flex-direction: column;
99
+ gap: 2px;
100
+ pointer-events: auto;
93
101
  }
102
+ .os-menu.open { display: flex; }
94
103
  .os-menu .os-btn {
95
104
  width: 100%;
96
105
  text-align: left;
@@ -111,19 +120,24 @@ html, body {
111
120
  .os-task {
112
121
  border: none;
113
122
  background: var(--os-bg-2);
114
- color: var(--os-fg);
115
- border-radius: var(--os-radius-sm);
116
- padding: 6px 10px;
123
+ color: var(--os-fg-2);
124
+ border-radius: 999px;
125
+ padding: 6px 14px;
117
126
  font-size: 12px;
118
- transition: background 100ms ease, color 100ms ease;
127
+ font-family: var(--os-font);
128
+ transition: background 80ms ease, color 80ms ease;
119
129
  max-width: 200px;
120
130
  cursor: pointer;
121
131
  outline: none;
132
+ white-space: nowrap;
133
+ overflow: hidden;
134
+ text-overflow: ellipsis;
122
135
  }
123
- .os-task:hover { background: var(--os-bg-3); }
136
+ .os-task:hover { background: var(--panel-hover, var(--os-bg-3)); color: var(--os-fg); }
124
137
  .os-task.focused {
125
- background: var(--os-accent-soft);
126
- color: var(--os-accent-2);
138
+ background: var(--os-accent);
139
+ color: var(--panel-accent-fg, #fff);
140
+ font-weight: 500;
127
141
  }
128
142
 
129
143
  .wm-win {
@@ -145,10 +159,11 @@ html, body {
145
159
  gap: 10px !important;
146
160
  }
147
161
  .wm-title {
148
- font: 12px var(--os-font) !important;
162
+ font: 13px var(--os-font) !important;
149
163
  color: var(--os-fg-2) !important;
150
- letter-spacing: 0.02em;
164
+ letter-spacing: 0.005em;
151
165
  text-align: center;
166
+ font-weight: 500;
152
167
  }
153
168
  .wm-btns { gap: 6px !important; order: -1; }
154
169
  .wm-btn {
@@ -227,7 +242,7 @@ html, body {
227
242
  height: 56px;
228
243
  box-sizing: border-box;
229
244
  }
230
- .os-drawer-title { color: var(--os-fg); font: 17px var(--os-font); font-weight: 600; }
245
+ .os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
231
246
  .os-drawer-close {
232
247
  width: 44px; height: 44px;
233
248
  border: none; background: transparent;
@@ -250,18 +265,19 @@ html, body {
250
265
  }
251
266
  .os-drawer-tile {
252
267
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
253
- padding: 16px 8px;
268
+ padding: 18px 8px;
254
269
  background: var(--os-bg-1);
255
270
  border: none;
256
271
  color: var(--os-fg);
257
272
  font: 13px var(--os-font);
258
- min-height: 96px;
273
+ min-height: 100px;
259
274
  cursor: pointer;
260
- transition: background 100ms ease;
275
+ transition: background 80ms ease;
261
276
  outline: none;
262
- border-radius: var(--os-radius);
277
+ border-radius: var(--r-3, 18px);
263
278
  }
264
- .os-drawer-tile:active { background: var(--os-accent-soft); }
279
+ .os-drawer-tile:hover { background: var(--panel-hover, var(--os-bg-2)); }
280
+ .os-drawer-tile:active { background: var(--panel-select, var(--os-bg-3)); }
265
281
  .os-drawer-tile .ic { color: var(--os-accent); display: inline-flex; }
266
282
  .os-drawer-tile .ic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; }
267
283
  .os-drawer-tile .lbl { color: var(--os-fg); font-weight: 500; }
@@ -272,22 +288,23 @@ html, body {
272
288
  .os-menubar [data-role="home"] { display: none; }
273
289
  .os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: 8000; }
274
290
  .os-menubar, .os-taskbar { pointer-events: auto; flex: 0 0 auto; }
291
+ .os-taskbar { margin-top: auto; }
275
292
  .wm-root { top: var(--os-bar-h) !important; bottom: var(--os-bar-h) !important; inset: var(--os-bar-h) 0 var(--os-bar-h) 0 !important; }
276
293
 
277
- .app-pane { padding: 14px; font: 13px var(--os-font); color: var(--os-fg); line-height: 1.55; overflow: auto; height: 100%; box-sizing: border-box; }
278
- .app-pane h2 { margin: 0 0 10px 0; color: var(--os-fg); font-size: 16px; font-weight: 600; }
294
+ .app-pane { padding: 16px 18px; font: 14px var(--os-font); color: var(--os-fg); line-height: 1.55; overflow: auto; height: 100%; box-sizing: border-box; background: var(--os-bg-1); }
295
+ .app-pane h2 { margin: 0 0 10px 0; color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
279
296
  .app-pane p { margin: 0 0 10px 0; color: var(--os-fg-2); }
280
297
  .app-pane ul { padding-left: 18px; margin: 6px 0 12px; color: var(--os-fg-2); }
281
298
  .app-pane li { padding: 2px 0; }
282
- .app-pane code { font: 12px var(--os-mono); background: var(--os-bg-2); padding: 1px 5px; border-radius: 3px; color: var(--os-fg); }
299
+ .app-pane code { font: 12px var(--os-mono); background: var(--os-bg-2); padding: 1px 6px; border-radius: var(--r-1, 6px); color: var(--os-fg); }
283
300
  .app-pane a { color: var(--os-accent); text-decoration: none; }
284
- .app-pane a:hover { color: var(--os-accent-2); }
301
+ .app-pane a:hover { text-decoration: underline; text-underline-offset: 2px; }
285
302
  .app-pane .meta { color: var(--os-fg-3); font-size: 12px; }
286
- .app-pane.mono { font: 12px var(--os-mono); padding: 10px; }
287
- .app-pane.mono .row { padding: 4px 6px; cursor: pointer; border-radius: 3px; }
288
- .app-pane.mono .row:hover { background: var(--os-bg-2); }
289
- .app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--os-bg-3); font-weight: 600; }
290
- .app-pane.mono pre { background: var(--os-bg-2); padding: 8px; margin: 8px 0 0 0; max-height: 200px; overflow: auto; white-space: pre-wrap; font: 11px var(--os-mono); border-radius: 3px; color: var(--os-fg); border: none; }
303
+ .app-pane.mono { font: 12.5px var(--os-mono); padding: 12px; background: var(--os-bg-1); }
304
+ .app-pane.mono .row { padding: 5px 8px; cursor: pointer; border-radius: var(--r-1, 6px); }
305
+ .app-pane.mono .row:hover { background: var(--panel-hover, var(--os-bg-2)); }
306
+ .app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 6px; font-weight: 600; letter-spacing: 0.02em; }
307
+ .app-pane.mono pre { background: var(--os-bg-2); padding: 10px 12px; margin: 8px 0 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: 11.5px var(--os-mono); border-radius: var(--r-1, 6px); color: var(--os-fg); border: none; }
291
308
  .app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); }
292
309
  .app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
293
310
  @media (max-width: 1023px) and (min-width: 768px) {