@opencode-ai/ui 0.0.0-dev-202607030601 → 0.0.0-dev-202607030811

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 (7) hide show
  1. package/dist/v2/components/project-avatar-v2.d.ts +2 -1
  2. package/package.json +1 -1
  3. package/src/styles/theme.css +18 -0
  4. package/src/theme/v2/mapping.ts +26 -0
  5. package/src/v2/components/project-avatar-v2.css +7 -0
  6. package/src/v2/components/project-avatar-v2.tsx +4 -1
  7. package/src/v2/styles/theme.css +40 -0
package/dist/v2/components/project-avatar-v2.d.ts CHANGED
@@ -2,10 +2,11 @@ import { type ComponentProps } from "solid-js";
2
2
  import "./project-avatar-v2.css";
3
3
  export declare const PROJECT_AVATAR_VARIANTS: readonly ["orange", "yellow", "cyan", "green", "red", "pink", "blue", "purple", "gray"];
4
4
  export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number];
5
+ export type ProjectAvatarStyle = ProjectAvatarVariant | "outline";
5
6
  export interface ProjectAvatarProps extends ComponentProps<"div"> {
6
7
  fallback: string;
7
8
  src?: string;
8
- variant?: ProjectAvatarVariant;
9
+ variant?: ProjectAvatarStyle;
9
10
  unread?: boolean;
10
11
  }
11
12
  export declare function ProjectAvatar(props: ProjectAvatarProps): import("solid-js").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opencode-ai/ui",
3
- "version": "0.0.0-dev-202607030601",
3
+ "version": "0.0.0-dev-202607030811",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/styles/theme.css CHANGED
@@ -281,6 +281,15 @@
281
281
  --icon-agent-docs-base: #fcb239;
282
282
  --icon-agent-ask-base: #2090f5;
283
283
  --icon-agent-build-base: #034cff;
284
+ --v2-agent-plan-solid: var(--v2-pink-900);
285
+ --v2-agent-plan-border: rgba(200, 61, 139, 0.5);
286
+ --v2-agent-plan-background: rgba(253, 236, 243, 0.33);
287
+ --v2-agent-build-solid: var(--v2-blue-900);
288
+ --v2-agent-build-border: rgba(59, 92, 246, 0.5);
289
+ --v2-agent-build-background: rgba(236, 241, 254, 0.33);
290
+ --v2-agent-explore-solid: var(--v2-yellow-900);
291
+ --v2-agent-explore-border: rgba(142, 114, 49, 0.5);
292
+ --v2-agent-explore-background: rgba(254, 250, 236, 0.33);
284
293
  --icon-on-success-base: rgba(18, 201, 5, 0.9);
285
294
  --icon-on-success-hover: rgba(45, 186, 38, 0.9);
286
295
  --icon-on-success-selected: rgba(7, 137, 1, 0.9);
@@ -541,6 +550,15 @@
541
550
  --icon-agent-docs-base: #fbb73c;
542
551
  --icon-agent-ask-base: #2090f5;
543
552
  --icon-agent-build-base: #9dbefe;
553
+ --v2-agent-plan-solid: var(--v2-pink-400);
554
+ --v2-agent-plan-border: rgba(250, 188, 216, 0.5);
555
+ --v2-agent-plan-background: rgba(247, 213, 228, 0.1);
556
+ --v2-agent-build-solid: var(--v2-blue-400);
557
+ --v2-agent-build-border: rgba(215, 226, 252, 0.5);
558
+ --v2-agent-build-background: rgba(215, 226, 252, 0.1);
559
+ --v2-agent-explore-solid: var(--v2-yellow-400);
560
+ --v2-agent-explore-border: rgba(247, 229, 181, 0.5);
561
+ --v2-agent-explore-background: rgba(252, 239, 208, 0.1);
544
562
  --icon-on-success-base: rgba(18, 201, 5, 0.9);
545
563
  --icon-on-success-hover: rgba(53, 192, 45, 0.9);
546
564
  --icon-on-success-selected: rgba(77, 225, 68, 0.9);
package/src/theme/v2/mapping.ts CHANGED
@@ -3,6 +3,30 @@ import { V2_AVATAR_DARK, V2_AVATAR_LIGHT } from "./avatar"
3
3
 
4
4
  const ref = (name: string): V2ColorValue => `var(--${name})`
5
5
 
6
+ const lightAgentTokens: Record<string, V2ColorValue> = {
7
+ "v2-agent-plan-solid": ref("v2-pink-900"),
8
+ "v2-agent-plan-border": "rgba(200, 61, 139, 0.5)",
9
+ "v2-agent-plan-background": "rgba(253, 236, 243, 0.33)",
10
+ "v2-agent-build-solid": ref("v2-blue-900"),
11
+ "v2-agent-build-border": "rgba(59, 92, 246, 0.5)",
12
+ "v2-agent-build-background": "rgba(236, 241, 254, 0.33)",
13
+ "v2-agent-explore-solid": ref("v2-yellow-900"),
14
+ "v2-agent-explore-border": "rgba(142, 114, 49, 0.5)",
15
+ "v2-agent-explore-background": "rgba(254, 250, 236, 0.33)",
16
+ }
17
+
18
+ const darkAgentTokens: Record<string, V2ColorValue> = {
19
+ "v2-agent-plan-solid": ref("v2-pink-400"),
20
+ "v2-agent-plan-border": "rgba(250, 188, 216, 0.5)",
21
+ "v2-agent-plan-background": "rgba(247, 213, 228, 0.1)",
22
+ "v2-agent-build-solid": ref("v2-blue-400"),
23
+ "v2-agent-build-border": "rgba(215, 226, 252, 0.5)",
24
+ "v2-agent-build-background": "rgba(215, 226, 252, 0.1)",
25
+ "v2-agent-explore-solid": ref("v2-yellow-400"),
26
+ "v2-agent-explore-border": "rgba(247, 229, 181, 0.5)",
27
+ "v2-agent-explore-background": "rgba(252, 239, 208, 0.1)",
28
+ }
29
+
6
30
  const light: Record<string, V2ColorValue> = {
7
31
  "v2-background-bg-base": ref("v2-grey-100"),
8
32
  "v2-background-bg-deep": ref("v2-grey-200"),
@@ -46,6 +70,7 @@ const light: Record<string, V2ColorValue> = {
46
70
  "v2-state-bg-info": ref("v2-blue-100"),
47
71
  "v2-state-fg-info": ref("v2-blue-800"),
48
72
  "v2-state-border-info": ref("v2-blue-300"),
73
+ ...lightAgentTokens,
49
74
  ...V2_AVATAR_LIGHT,
50
75
  "v2-elevation-raised":
51
76
  "0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
@@ -110,6 +135,7 @@ const dark: Record<string, V2ColorValue> = {
110
135
  "v2-state-bg-info": ref("v2-blue-1200"),
111
136
  "v2-state-fg-info": ref("v2-blue-500"),
112
137
  "v2-state-border-info": ref("v2-blue-900"),
138
+ ...darkAgentTokens,
113
139
  ...V2_AVATAR_DARK,
114
140
  "v2-elevation-raised":
115
141
  "0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
package/src/v2/components/project-avatar-v2.css CHANGED
@@ -81,6 +81,13 @@
81
81
  --project-avatar-border: var(--v2-avatar-border-gray);
82
82
  }
83
83
 
84
+ [data-slot="project-avatar-surface"][data-variant="outline"] {
85
+ --project-avatar-bg: var(--v2-background-bg-base);
86
+ --project-avatar-border: var(--v2-border-border-strong);
87
+ color: var(--v2-text-text-muted);
88
+ text-shadow: none;
89
+ }
90
+
84
91
  [data-slot="project-avatar-surface"][data-has-image] {
85
92
  background: var(--project-avatar-bg);
86
93
  }
package/src/v2/components/project-avatar-v2.tsx CHANGED
@@ -26,10 +26,13 @@ export const PROJECT_AVATAR_VARIANTS = [
26
26
 
27
27
  export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
28
28
 
29
+ // "outline" is a neutral, muted style (e.g. recently closed projects) and is not part of the color rotation.
30
+ export type ProjectAvatarStyle = ProjectAvatarVariant | "outline"
31
+
29
32
  export interface ProjectAvatarProps extends ComponentProps<"div"> {
30
33
  fallback: string
31
34
  src?: string
32
- variant?: ProjectAvatarVariant
35
+ variant?: ProjectAvatarStyle
33
36
  unread?: boolean
34
37
  }
35
38
 
package/src/v2/styles/theme.css CHANGED
@@ -77,6 +77,16 @@
77
77
  --v2-state-fg-info: var(--v2-blue-800);
78
78
  --v2-state-border-info: var(--v2-blue-300);
79
79
 
80
+ --v2-agent-plan-solid: var(--v2-pink-900);
81
+ --v2-agent-plan-border: rgba(200, 61, 139, 0.5);
82
+ --v2-agent-plan-background: rgba(253, 236, 243, 0.33);
83
+ --v2-agent-build-solid: var(--v2-blue-900);
84
+ --v2-agent-build-border: rgba(59, 92, 246, 0.5);
85
+ --v2-agent-build-background: rgba(236, 241, 254, 0.33);
86
+ --v2-agent-explore-solid: var(--v2-yellow-900);
87
+ --v2-agent-explore-border: rgba(142, 114, 49, 0.5);
88
+ --v2-agent-explore-background: rgba(254, 250, 236, 0.33);
89
+
80
90
  /* ── Project avatar (fixed; theme-independent) ── */
81
91
  --v2-avatar-fg: #ffffffff;
82
92
  --v2-avatar-bg-orange: #ee7330ff;
@@ -193,6 +203,16 @@
193
203
  --v2-state-fg-info: var(--v2-blue-500);
194
204
  --v2-state-border-info: var(--v2-blue-900);
195
205
 
206
+ --v2-agent-plan-solid: var(--v2-pink-400);
207
+ --v2-agent-plan-border: rgba(250, 188, 216, 0.5);
208
+ --v2-agent-plan-background: rgba(247, 213, 228, 0.1);
209
+ --v2-agent-build-solid: var(--v2-blue-400);
210
+ --v2-agent-build-border: rgba(215, 226, 252, 0.5);
211
+ --v2-agent-build-background: rgba(215, 226, 252, 0.1);
212
+ --v2-agent-explore-solid: var(--v2-yellow-400);
213
+ --v2-agent-explore-border: rgba(247, 229, 181, 0.5);
214
+ --v2-agent-explore-background: rgba(252, 239, 208, 0.1);
215
+
196
216
  --v2-elevation-raised:
197
217
  0px 2px 4px 0px var(--v2-alpha-dark-30),
198
218
  0px 1px 2px 0px var(--v2-alpha-dark-30),
@@ -296,6 +316,16 @@
296
316
  --v2-state-fg-info: var(--v2-blue-800);
297
317
  --v2-state-border-info: var(--v2-blue-300);
298
318
 
319
+ --v2-agent-plan-solid: var(--v2-pink-900);
320
+ --v2-agent-plan-border: rgba(200, 61, 139, 0.5);
321
+ --v2-agent-plan-background: rgba(253, 236, 243, 0.33);
322
+ --v2-agent-build-solid: var(--v2-blue-900);
323
+ --v2-agent-build-border: rgba(59, 92, 246, 0.5);
324
+ --v2-agent-build-background: rgba(236, 241, 254, 0.33);
325
+ --v2-agent-explore-solid: var(--v2-yellow-900);
326
+ --v2-agent-explore-border: rgba(142, 114, 49, 0.5);
327
+ --v2-agent-explore-background: rgba(254, 250, 236, 0.33);
328
+
299
329
  --v2-elevation-raised:
300
330
  0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
301
331
  0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
@@ -406,6 +436,16 @@
406
436
  --v2-state-fg-info: var(--v2-blue-500);
407
437
  --v2-state-border-info: var(--v2-blue-900);
408
438
 
439
+ --v2-agent-plan-solid: var(--v2-pink-400);
440
+ --v2-agent-plan-border: rgba(250, 188, 216, 0.5);
441
+ --v2-agent-plan-background: rgba(247, 213, 228, 0.1);
442
+ --v2-agent-build-solid: var(--v2-blue-400);
443
+ --v2-agent-build-border: rgba(215, 226, 252, 0.5);
444
+ --v2-agent-build-background: rgba(215, 226, 252, 0.1);
445
+ --v2-agent-explore-solid: var(--v2-yellow-400);
446
+ --v2-agent-explore-border: rgba(247, 229, 181, 0.5);
447
+ --v2-agent-explore-background: rgba(252, 239, 208, 0.1);
448
+
409
449
  --v2-avatar-fg: #ffffffff;
410
450
  --v2-avatar-bg-orange: #723d22ff;
411
451
  --v2-avatar-border-orange: #ff8648ff;