anentrypoint-design 0.0.50 → 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 +60 -52
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "anentrypoint-design",
3
- "version": "0.0.50",
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,21 +65,22 @@ 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
 
@@ -116,11 +120,12 @@ html, body {
116
120
  .os-task {
117
121
  border: none;
118
122
  background: var(--os-bg-2);
119
- color: var(--os-fg);
120
- border-radius: var(--os-radius-sm);
121
- padding: 6px 10px;
123
+ color: var(--os-fg-2);
124
+ border-radius: 999px;
125
+ padding: 6px 14px;
122
126
  font-size: 12px;
123
- transition: background 100ms ease, color 100ms ease;
127
+ font-family: var(--os-font);
128
+ transition: background 80ms ease, color 80ms ease;
124
129
  max-width: 200px;
125
130
  cursor: pointer;
126
131
  outline: none;
@@ -128,10 +133,11 @@ html, body {
128
133
  overflow: hidden;
129
134
  text-overflow: ellipsis;
130
135
  }
131
- .os-task:hover { background: var(--os-bg-3); }
136
+ .os-task:hover { background: var(--panel-hover, var(--os-bg-3)); color: var(--os-fg); }
132
137
  .os-task.focused {
133
- background: var(--os-accent-soft);
134
- color: var(--os-accent-2);
138
+ background: var(--os-accent);
139
+ color: var(--panel-accent-fg, #fff);
140
+ font-weight: 500;
135
141
  }
136
142
 
137
143
  .wm-win {
@@ -153,10 +159,11 @@ html, body {
153
159
  gap: 10px !important;
154
160
  }
155
161
  .wm-title {
156
- font: 12px var(--os-font) !important;
162
+ font: 13px var(--os-font) !important;
157
163
  color: var(--os-fg-2) !important;
158
- letter-spacing: 0.02em;
164
+ letter-spacing: 0.005em;
159
165
  text-align: center;
166
+ font-weight: 500;
160
167
  }
161
168
  .wm-btns { gap: 6px !important; order: -1; }
162
169
  .wm-btn {
@@ -235,7 +242,7 @@ html, body {
235
242
  height: 56px;
236
243
  box-sizing: border-box;
237
244
  }
238
- .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; }
239
246
  .os-drawer-close {
240
247
  width: 44px; height: 44px;
241
248
  border: none; background: transparent;
@@ -258,18 +265,19 @@ html, body {
258
265
  }
259
266
  .os-drawer-tile {
260
267
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
261
- padding: 16px 8px;
268
+ padding: 18px 8px;
262
269
  background: var(--os-bg-1);
263
270
  border: none;
264
271
  color: var(--os-fg);
265
272
  font: 13px var(--os-font);
266
- min-height: 96px;
273
+ min-height: 100px;
267
274
  cursor: pointer;
268
- transition: background 100ms ease;
275
+ transition: background 80ms ease;
269
276
  outline: none;
270
- border-radius: var(--os-radius);
277
+ border-radius: var(--r-3, 18px);
271
278
  }
272
- .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)); }
273
281
  .os-drawer-tile .ic { color: var(--os-accent); display: inline-flex; }
274
282
  .os-drawer-tile .ic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; }
275
283
  .os-drawer-tile .lbl { color: var(--os-fg); font-weight: 500; }
@@ -283,20 +291,20 @@ html, body {
283
291
  .os-taskbar { margin-top: auto; }
284
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; }
285
293
 
286
- .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; }
287
- .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; }
288
296
  .app-pane p { margin: 0 0 10px 0; color: var(--os-fg-2); }
289
297
  .app-pane ul { padding-left: 18px; margin: 6px 0 12px; color: var(--os-fg-2); }
290
298
  .app-pane li { padding: 2px 0; }
291
- .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); }
292
300
  .app-pane a { color: var(--os-accent); text-decoration: none; }
293
- .app-pane a:hover { color: var(--os-accent-2); }
301
+ .app-pane a:hover { text-decoration: underline; text-underline-offset: 2px; }
294
302
  .app-pane .meta { color: var(--os-fg-3); font-size: 12px; }
295
- .app-pane.mono { font: 12px var(--os-mono); padding: 10px; }
296
- .app-pane.mono .row { padding: 4px 6px; cursor: pointer; border-radius: 3px; }
297
- .app-pane.mono .row:hover { background: var(--os-bg-2); }
298
- .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; }
299
- .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; }
300
308
  .app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); }
301
309
  .app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
302
310
  @media (max-width: 1023px) and (min-width: 768px) {