@opencode-ai/ui 0.0.0-dev-19005 → 0.0.0-dev-19010

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/styles/tokens/colors.css +8 -8
  3. package/src/styles/tokens/theme.css +6 -6
  4. package/src/theme/themes/oc-2.json +45 -18
  5. package/src/theme/v2/default-primitives.ts +8 -8
  6. package/src/theme/v2/mapping.ts +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opencode-ai/ui",
3
- "version": "0.0.0-dev-19005",
3
+ "version": "0.0.0-dev-19010",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/styles/tokens/colors.css CHANGED
@@ -128,18 +128,18 @@
128
128
  --v2-cyan-1200: #00353fff;
129
129
 
130
130
  /* ── Blue ── */
131
- --v2-blue-100: #ecf1feff;
132
- --v2-blue-200: #d7e2fcff;
131
+ --v2-blue-100: #f5f8ffff;
132
+ --v2-blue-200: #ecf1feff;
133
133
  --v2-blue-300: #c3d4fdff;
134
134
  --v2-blue-400: #a2bcffff;
135
135
  --v2-blue-500: #7698fdff;
136
136
  --v2-blue-600: #3b5cf6ff;
137
- --v2-blue-700: #3250dfff;
138
- --v2-blue-800: #2c47c8ff;
139
- --v2-blue-900: #263fa9ff;
140
- --v2-blue-1000: #22388fff;
141
- --v2-blue-1100: #1c2e70ff;
142
- --v2-blue-1200: #1b2852ff;
137
+ --v2-blue-700: #0b34f4ff;
138
+ --v2-blue-800: #3250dfff;
139
+ --v2-blue-900: #2c47c8ff;
140
+ --v2-blue-1000: #263fa9ff;
141
+ --v2-blue-1100: #22388fff;
142
+ --v2-blue-1200: #021945ff;
143
143
 
144
144
  /* ── Purple ── */
145
145
  --v2-purple-100: #ebecfeff;
package/src/styles/tokens/theme.css CHANGED
@@ -24,7 +24,7 @@
24
24
  --v2-text-text-accent: var(--v2-blue-600);
25
25
  --v2-text-text-accent-hover: var(--v2-blue-700);
26
26
  --v2-text-text-code-accent: var(--v2-blue-900);
27
- --v2-text-text-code-path: var(--v2-cyan-900);
27
+ --v2-text-text-code-path: var(--v2-blue-900);
28
28
 
29
29
  /* ── Icon ── */
30
30
  --v2-icon-icon-base: var(--v2-grey-800);
@@ -64,7 +64,7 @@
64
64
  --v2-state-bg-danger: var(--v2-red-100);
65
65
  --v2-state-fg-danger: var(--v2-red-800);
66
66
  --v2-state-border-danger: var(--v2-red-300);
67
- --v2-state-bg-info: var(--v2-blue-100);
67
+ --v2-state-bg-info: var(--v2-blue-200);
68
68
  --v2-state-fg-info: var(--v2-blue-800);
69
69
  --v2-state-border-info: var(--v2-blue-300);
70
70
 
@@ -163,7 +163,7 @@
163
163
  --v2-text-text-accent: var(--v2-blue-400);
164
164
  --v2-text-text-accent-hover: var(--v2-blue-300);
165
165
  --v2-text-text-code-accent: var(--v2-blue-400);
166
- --v2-text-text-code-path: var(--v2-cyan-400);
166
+ --v2-text-text-code-path: var(--v2-blue-300);
167
167
 
168
168
  --v2-icon-icon-base: var(--v2-grey-400);
169
169
  --v2-icon-icon-muted: var(--v2-grey-600);
@@ -279,7 +279,7 @@
279
279
  --v2-text-text-accent: var(--v2-blue-600);
280
280
  --v2-text-text-accent-hover: var(--v2-blue-700);
281
281
  --v2-text-text-code-accent: var(--v2-blue-900);
282
- --v2-text-text-code-path: var(--v2-cyan-900);
282
+ --v2-text-text-code-path: var(--v2-blue-900);
283
283
 
284
284
  --v2-icon-icon-base: var(--v2-grey-800);
285
285
  --v2-icon-icon-muted: var(--v2-grey-600);
@@ -315,7 +315,7 @@
315
315
  --v2-state-bg-danger: var(--v2-red-100);
316
316
  --v2-state-fg-danger: var(--v2-red-800);
317
317
  --v2-state-border-danger: var(--v2-red-300);
318
- --v2-state-bg-info: var(--v2-blue-100);
318
+ --v2-state-bg-info: var(--v2-blue-200);
319
319
  --v2-state-fg-info: var(--v2-blue-800);
320
320
  --v2-state-border-info: var(--v2-blue-300);
321
321
 
@@ -404,7 +404,7 @@
404
404
  --v2-text-text-accent: var(--v2-blue-400);
405
405
  --v2-text-text-accent-hover: var(--v2-blue-300);
406
406
  --v2-text-text-code-accent: var(--v2-blue-400);
407
- --v2-text-text-code-path: var(--v2-cyan-400);
407
+ --v2-text-text-code-path: var(--v2-blue-300);
408
408
 
409
409
  --v2-icon-icon-base: var(--v2-grey-400);
410
410
  --v2-icon-icon-muted: var(--v2-grey-600);
package/src/theme/themes/oc-2.json CHANGED
@@ -120,18 +120,18 @@
120
120
  "v2-cyan-1000": "#005a6eff",
121
121
  "v2-cyan-1100": "#004756ff",
122
122
  "v2-cyan-1200": "#00353fff",
123
- "v2-blue-100": "#ecf1feff",
124
- "v2-blue-200": "#d7e2fcff",
123
+ "v2-blue-100": "#f5f8ffff",
124
+ "v2-blue-200": "#ecf1feff",
125
125
  "v2-blue-300": "#c3d4fdff",
126
126
  "v2-blue-400": "#a2bcffff",
127
127
  "v2-blue-500": "#7698fdff",
128
128
  "v2-blue-600": "#3b5cf6ff",
129
- "v2-blue-700": "#3250dfff",
130
- "v2-blue-800": "#2c47c8ff",
131
- "v2-blue-900": "#263fa9ff",
132
- "v2-blue-1000": "#22388fff",
133
- "v2-blue-1100": "#1c2e70ff",
134
- "v2-blue-1200": "#1b2852ff",
129
+ "v2-blue-700": "#0b34f4ff",
130
+ "v2-blue-800": "#3250dfff",
131
+ "v2-blue-900": "#2c47c8ff",
132
+ "v2-blue-1000": "#263fa9ff",
133
+ "v2-blue-1100": "#22388fff",
134
+ "v2-blue-1200": "#021945ff",
135
135
  "v2-purple-100": "#ebecfeff",
136
136
  "v2-purple-200": "#d5d5fcff",
137
137
  "v2-purple-300": "#b9b8f5ff",
@@ -166,6 +166,7 @@
166
166
  "v2-background-bg-contrast": "var(--v2-grey-1000)",
167
167
  "v2-background-bg-button-neutral": "var(--v2-grey-50)",
168
168
  "v2-background-bg-accent": "var(--v2-blue-600)",
169
+ "v2-background-bg-code-path": "var(--v2-cyan-100)",
169
170
  "v2-text-text-base": "var(--v2-grey-1100)",
170
171
  "v2-text-text-muted": "var(--v2-grey-700)",
171
172
  "v2-text-text-faint": "var(--v2-grey-600)",
@@ -174,6 +175,7 @@
174
175
  "v2-text-text-accent": "var(--v2-blue-600)",
175
176
  "v2-text-text-accent-hover": "var(--v2-blue-700)",
176
177
  "v2-text-text-code-accent": "var(--v2-blue-900)",
178
+ "v2-text-text-code-path": "var(--v2-blue-900)",
177
179
  "v2-icon-icon-base": "var(--v2-grey-800)",
178
180
  "v2-icon-icon-muted": "var(--v2-grey-600)",
179
181
  "v2-icon-icon-faint": "var(--v2-grey-500)",
@@ -205,9 +207,20 @@
205
207
  "v2-state-bg-danger": "var(--v2-red-100)",
206
208
  "v2-state-fg-danger": "var(--v2-red-800)",
207
209
  "v2-state-border-danger": "var(--v2-red-300)",
208
- "v2-state-bg-info": "var(--v2-blue-100)",
210
+ "v2-state-bg-info": "var(--v2-blue-200)",
209
211
  "v2-state-fg-info": "var(--v2-blue-800)",
210
212
  "v2-state-border-info": "var(--v2-blue-300)",
213
+ "v2-agent-plan-solid": "var(--v2-pink-800)",
214
+ "v2-agent-plan-border": "rgba(200, 61, 139, 0.2)",
215
+ "v2-agent-plan-background": "rgba(253, 236, 243, 0.1)",
216
+ "v2-agent-build-solid": "var(--v2-blue-800)",
217
+ "v2-agent-build-border": "rgba(44, 71, 200, 0.1)",
218
+ "v2-agent-build-background": "rgba(236, 241, 254, 0.1)",
219
+ "v2-agent-explore-solid": "var(--v2-yellow-900)",
220
+ "v2-agent-explore-border": "rgba(203, 159, 52, 0.2)",
221
+ "v2-agent-explore-background": "rgba(254, 250, 236, 0.1)",
222
+ "v2-agent-review-solid": "var(--v2-green-800)",
223
+ "v2-agent-writer-solid": "var(--v2-purple-700)",
211
224
  "v2-avatar-bg-orange": "#ee7330ff",
212
225
  "v2-avatar-border-orange": "#d16427ff",
213
226
  "v2-avatar-bg-yellow": "#e7af36ff",
@@ -236,7 +249,8 @@
236
249
  "v2-elevation-switch-on": "inset 0px 2px 2px 0px var(--v2-alpha-dark-10), inset 0px 1px 1px 0px var(--v2-alpha-dark-10), inset 0px 0px 0px 0.5px var(--v2-alpha-dark-20)",
237
250
  "v2-illustration-illustration-layer-01": "var(--v2-grey-300)",
238
251
  "v2-illustration-illustration-layer-02": "var(--v2-grey-400)",
239
- "v2-illustration-illustration-layer-03": "var(--v2-grey-500)"
252
+ "v2-illustration-illustration-layer-03": "var(--v2-grey-500)",
253
+ "v2-font-family-code": "var(--font-family-mono)"
240
254
  }
241
255
  },
242
256
  "dark": {
@@ -356,18 +370,18 @@
356
370
  "v2-cyan-1000": "#005a6eff",
357
371
  "v2-cyan-1100": "#004756ff",
358
372
  "v2-cyan-1200": "#00353fff",
359
- "v2-blue-100": "#ecf1feff",
360
- "v2-blue-200": "#d7e2fcff",
373
+ "v2-blue-100": "#f5f8ffff",
374
+ "v2-blue-200": "#ecf1feff",
361
375
  "v2-blue-300": "#c3d4fdff",
362
376
  "v2-blue-400": "#a2bcffff",
363
377
  "v2-blue-500": "#7698fdff",
364
378
  "v2-blue-600": "#3b5cf6ff",
365
- "v2-blue-700": "#3250dfff",
366
- "v2-blue-800": "#2c47c8ff",
367
- "v2-blue-900": "#263fa9ff",
368
- "v2-blue-1000": "#22388fff",
369
- "v2-blue-1100": "#1c2e70ff",
370
- "v2-blue-1200": "#1b2852ff",
379
+ "v2-blue-700": "#0b34f4ff",
380
+ "v2-blue-800": "#3250dfff",
381
+ "v2-blue-900": "#2c47c8ff",
382
+ "v2-blue-1000": "#263fa9ff",
383
+ "v2-blue-1100": "#22388fff",
384
+ "v2-blue-1200": "#021945ff",
371
385
  "v2-purple-100": "#ebecfeff",
372
386
  "v2-purple-200": "#d5d5fcff",
373
387
  "v2-purple-300": "#b9b8f5ff",
@@ -402,6 +416,7 @@
402
416
  "v2-background-bg-contrast": "var(--v2-grey-700)",
403
417
  "v2-background-bg-button-neutral": "var(--v2-alpha-light-6)",
404
418
  "v2-background-bg-accent": "var(--v2-blue-600)",
419
+ "v2-background-bg-code-path": "var(--v2-cyan-1200)",
405
420
  "v2-text-text-base": "var(--v2-grey-100)",
406
421
  "v2-text-text-muted": "var(--v2-grey-500)",
407
422
  "v2-text-text-faint": "var(--v2-grey-600)",
@@ -410,6 +425,7 @@
410
425
  "v2-text-text-accent": "var(--v2-blue-400)",
411
426
  "v2-text-text-accent-hover": "var(--v2-blue-300)",
412
427
  "v2-text-text-code-accent": "var(--v2-blue-400)",
428
+ "v2-text-text-code-path": "var(--v2-blue-300)",
413
429
  "v2-icon-icon-base": "var(--v2-grey-400)",
414
430
  "v2-icon-icon-muted": "var(--v2-grey-600)",
415
431
  "v2-icon-icon-faint": "var(--v2-grey-500)",
@@ -444,6 +460,17 @@
444
460
  "v2-state-bg-info": "var(--v2-blue-1200)",
445
461
  "v2-state-fg-info": "var(--v2-blue-500)",
446
462
  "v2-state-border-info": "var(--v2-blue-900)",
463
+ "v2-agent-plan-solid": "var(--v2-pink-400)",
464
+ "v2-agent-plan-border": "rgba(247, 153, 198, 0.2)",
465
+ "v2-agent-plan-background": "rgba(170, 53, 118, 0.05)",
466
+ "v2-agent-build-solid": "var(--v2-blue-300)",
467
+ "v2-agent-build-border": "rgba(162, 188, 255, 0.2)",
468
+ "v2-agent-build-background": "rgba(38, 63, 169, 0.05)",
469
+ "v2-agent-explore-solid": "var(--v2-yellow-300)",
470
+ "v2-agent-explore-border": "rgba(243, 218, 155, 0.2)",
471
+ "v2-agent-explore-background": "rgba(172, 136, 51, 0.05)",
472
+ "v2-agent-review-solid": "var(--v2-green-300)",
473
+ "v2-agent-writer-solid": "var(--v2-purple-400)",
447
474
  "v2-avatar-bg-orange": "#723d22ff",
448
475
  "v2-avatar-border-orange": "#ff8648ff",
449
476
  "v2-avatar-bg-yellow": "#68552bff",
package/src/theme/v2/default-primitives.ts CHANGED
@@ -75,18 +75,18 @@ export const V2_PRIMITIVES_DEFAULT: Record<string, V2ColorValue> = {
75
75
  "v2-cyan-1000": "#005a6eff",
76
76
  "v2-cyan-1100": "#004756ff",
77
77
  "v2-cyan-1200": "#00353fff",
78
- "v2-blue-100": "#ecf1feff",
79
- "v2-blue-200": "#d7e2fcff",
78
+ "v2-blue-100": "#f5f8ffff",
79
+ "v2-blue-200": "#ecf1feff",
80
80
  "v2-blue-300": "#c3d4fdff",
81
81
  "v2-blue-400": "#a2bcffff",
82
82
  "v2-blue-500": "#7698fdff",
83
83
  "v2-blue-600": "#3b5cf6ff",
84
- "v2-blue-700": "#3250dfff",
85
- "v2-blue-800": "#2c47c8ff",
86
- "v2-blue-900": "#263fa9ff",
87
- "v2-blue-1000": "#22388fff",
88
- "v2-blue-1100": "#1c2e70ff",
89
- "v2-blue-1200": "#1b2852ff",
84
+ "v2-blue-700": "#0b34f4ff",
85
+ "v2-blue-800": "#3250dfff",
86
+ "v2-blue-900": "#2c47c8ff",
87
+ "v2-blue-1000": "#263fa9ff",
88
+ "v2-blue-1100": "#22388fff",
89
+ "v2-blue-1200": "#021945ff",
90
90
  "v2-purple-100": "#ebecfeff",
91
91
  "v2-purple-200": "#d5d5fcff",
92
92
  "v2-purple-300": "#b9b8f5ff",
package/src/theme/v2/mapping.ts CHANGED
@@ -48,7 +48,7 @@ const light: Record<string, V2ColorValue> = {
48
48
  "v2-text-text-accent": ref("v2-blue-600"),
49
49
  "v2-text-text-accent-hover": ref("v2-blue-700"),
50
50
  "v2-text-text-code-accent": ref("v2-blue-900"),
51
- "v2-text-text-code-path": ref("v2-cyan-900"),
51
+ "v2-text-text-code-path": ref("v2-blue-900"),
52
52
  "v2-border-border-muted": ref("v2-alpha-dark-8"),
53
53
  "v2-border-border-base": ref("v2-alpha-dark-10"),
54
54
  "v2-border-border-strong": ref("v2-alpha-dark-20"),
@@ -73,7 +73,7 @@ const light: Record<string, V2ColorValue> = {
73
73
  "v2-state-bg-danger": ref("v2-red-100"),
74
74
  "v2-state-fg-danger": ref("v2-red-800"),
75
75
  "v2-state-border-danger": ref("v2-red-300"),
76
- "v2-state-bg-info": ref("v2-blue-100"),
76
+ "v2-state-bg-info": ref("v2-blue-200"),
77
77
  "v2-state-fg-info": ref("v2-blue-800"),
78
78
  "v2-state-border-info": ref("v2-blue-300"),
79
79
  ...lightAgentTokens,
@@ -115,7 +115,7 @@ const dark: Record<string, V2ColorValue> = {
115
115
  "v2-text-text-accent": ref("v2-blue-400"),
116
116
  "v2-text-text-accent-hover": ref("v2-blue-300"),
117
117
  "v2-text-text-code-accent": ref("v2-blue-400"),
118
- "v2-text-text-code-path": ref("v2-cyan-400"),
118
+ "v2-text-text-code-path": ref("v2-blue-300"),
119
119
  "v2-border-border-muted": ref("v2-alpha-light-8"),
120
120
  "v2-border-border-base": ref("v2-alpha-light-10"),
121
121
  "v2-border-border-strong": ref("v2-alpha-light-20"),