@opencode/ui 0.0.0-dev-19338 → 0.0.0-dev-19342

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 (10) hide show
  1. package/dist/actions/button/button.d.ts +1 -1
  2. package/dist/actions/icon-button/icon-button.d.ts +1 -1
  3. package/dist/i18n/en.d.ts +2 -1
  4. package/package.json +1 -1
  5. package/src/actions/button/button.css +2 -0
  6. package/src/actions/button/button.tsx +1 -0
  7. package/src/actions/icon-button/icon-button.css +2 -55
  8. package/src/actions/icon-button/icon-button.tsx +1 -1
  9. package/src/actions/submit.css +74 -0
  10. package/src/i18n/en.ts +4 -3
package/dist/actions/button/button.d.ts CHANGED
@@ -4,7 +4,7 @@ import { type IconProps } from "@opencode/ui/icon";
4
4
  import "./button.css";
5
5
  export interface ButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
6
6
  size?: "small" | "normal" | "large";
7
- variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "ghost-faint" | "loading";
7
+ variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "submit" | "ghost" | "ghost-muted" | "ghost-faint" | "loading";
8
8
  icon?: IconProps["name"];
9
9
  }
10
10
  export declare function Button(props: ButtonProps): import("solid-js").JSX.Element;
package/dist/actions/icon-button/icon-button.d.ts CHANGED
@@ -5,7 +5,7 @@ import "./icon-button.css";
5
5
  export interface IconButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList"> {
6
6
  icon?: JSX.Element;
7
7
  size?: "small" | "normal" | "large";
8
- variant?: "neutral" | "contrast" | "ghost" | "ghost-muted";
8
+ variant?: "neutral" | "contrast" | "submit" | "ghost" | "ghost-muted";
9
9
  state?: "rest" | "hover" | "pressed";
10
10
  }
11
11
  export declare function IconButton(props: ComponentProps<"button"> & IconButtonProps): JSX.Element;
package/dist/i18n/en.d.ts CHANGED
@@ -108,7 +108,8 @@ declare const source: {
108
108
  "ui.messagePart.context.thought.other": string;
109
109
  "ui.messagePart.context.match.one": string;
110
110
  "ui.messagePart.context.match.other": string;
111
- "ui.messagePart.tools.used": string;
111
+ "ui.messagePart.tools.used.one": string;
112
+ "ui.messagePart.tools.used.other": string;
112
113
  "ui.list.loading": string;
113
114
  "ui.list.empty": string;
114
115
  "ui.list.clearFilter": string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opencode/ui",
3
- "version": "0.0.0-dev-19338",
3
+ "version": "0.0.0-dev-19342",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/actions/button/button.css CHANGED
@@ -1,3 +1,5 @@
1
+ @import "../submit.css";
2
+
1
3
  * {
2
4
  -webkit-font-smoothing: antialiased;
3
5
  -moz-osx-font-smoothing: grayscale;
package/src/actions/button/button.tsx CHANGED
@@ -13,6 +13,7 @@ export interface ButtonProps
13
13
  | "warning"
14
14
  | "outline"
15
15
  | "contrast"
16
+ | "submit"
16
17
  | "ghost"
17
18
  | "ghost-muted"
18
19
  | "ghost-faint"
package/src/actions/icon-button/icon-button.css CHANGED
@@ -1,3 +1,5 @@
1
+ @import "../submit.css";
2
+
1
3
  * {
2
4
  -webkit-font-smoothing: antialiased;
3
5
  -moz-osx-font-smoothing: grayscale;
@@ -69,61 +71,6 @@
69
71
  cursor: not-allowed;
70
72
  }
71
73
 
72
- /* Contrast */
73
- [data-component="icon-button-v2"][data-variant="contrast"] {
74
- --icon-button-contrast-highlight: var(--v2-alpha-light-20);
75
- --icon-button-contrast-hover: var(--v2-overlay-simple-overlay-contrast-hover);
76
-
77
- background-image:
78
- linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
79
- linear-gradient(
80
- 90deg,
81
- var(--v2-background-bg-icon-button-contrast) 0%,
82
- var(--v2-background-bg-icon-button-contrast) 100%
83
- );
84
- color: var(--v2-text-text-contrast);
85
- text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
86
- box-shadow: var(--v2-elevation-button-contrast);
87
- }
88
-
89
- [data-color-scheme="dark"] [data-component="icon-button-v2"][data-variant="contrast"] {
90
- --icon-button-contrast-highlight: var(--v2-alpha-light-60);
91
- --icon-button-contrast-hover: var(--v2-alpha-dark-8);
92
-
93
- color: var(--v2-icon-icon-inverse);
94
- }
95
-
96
- [data-component="icon-button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
97
- background-image:
98
- linear-gradient(90deg, var(--icon-button-contrast-hover) 0%, var(--icon-button-contrast-hover) 100%),
99
- linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
100
- linear-gradient(
101
- 90deg,
102
- var(--v2-background-bg-icon-button-contrast) 0%,
103
- var(--v2-background-bg-icon-button-contrast) 100%
104
- );
105
- }
106
-
107
- [data-component="icon-button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
108
- background-image:
109
- linear-gradient(
110
- 90deg,
111
- var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
112
- var(--v2-overlay-simple-overlay-contrast-pressed) 100%
113
- ),
114
- linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
115
- linear-gradient(
116
- 90deg,
117
- var(--v2-background-bg-icon-button-contrast) 0%,
118
- var(--v2-background-bg-icon-button-contrast) 100%
119
- );
120
- }
121
-
122
- [data-component="icon-button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
123
- opacity: 0.4;
124
- cursor: not-allowed;
125
- }
126
-
127
74
  /* Ghost */
128
75
  [data-component="icon-button-v2"][data-variant="ghost"] {
129
76
  background-color: transparent;
package/src/actions/icon-button/icon-button.tsx CHANGED
@@ -8,7 +8,7 @@ export interface IconButtonProps
8
8
  Pick<ComponentProps<"button">, "class" | "classList"> {
9
9
  icon?: JSX.Element
10
10
  size?: "small" | "normal" | "large"
11
- variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
11
+ variant?: "neutral" | "contrast" | "submit" | "ghost" | "ghost-muted"
12
12
  state?: "rest" | "hover" | "pressed"
13
13
  }
14
14
 
package/src/actions/submit.css ADDED
@@ -0,0 +1,74 @@
1
+ /* Shared by Composer submit actions and contrast icon buttons. */
2
+ :is(
3
+ [data-component="button-v2"][data-variant="submit"],
4
+ [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
5
+ ) {
6
+ --submit-highlight: var(--v2-alpha-light-20);
7
+ --submit-hover: var(--v2-overlay-simple-overlay-contrast-hover);
8
+
9
+ background-image:
10
+ linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
11
+ linear-gradient(
12
+ 90deg,
13
+ var(--v2-background-bg-icon-button-contrast) 0%,
14
+ var(--v2-background-bg-icon-button-contrast) 100%
15
+ );
16
+ color: var(--v2-text-text-contrast);
17
+ text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
18
+ box-shadow: var(--v2-elevation-button-contrast);
19
+ }
20
+
21
+ [data-color-scheme="dark"]
22
+ :is(
23
+ [data-component="button-v2"][data-variant="submit"],
24
+ [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
25
+ ) {
26
+ --submit-highlight: var(--v2-alpha-light-60);
27
+ --submit-hover: var(--v2-alpha-dark-8);
28
+
29
+ color: var(--v2-text-text-inverse);
30
+ }
31
+
32
+ [data-color-scheme="dark"] [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"]) {
33
+ color: var(--v2-icon-icon-inverse);
34
+ }
35
+
36
+ :is(
37
+ [data-component="button-v2"][data-variant="submit"],
38
+ [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
39
+ ):is(:hover, [data-state="hover"]):not(:disabled) {
40
+ background-image:
41
+ linear-gradient(90deg, var(--submit-hover) 0%, var(--submit-hover) 100%),
42
+ linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
43
+ linear-gradient(
44
+ 90deg,
45
+ var(--v2-background-bg-icon-button-contrast) 0%,
46
+ var(--v2-background-bg-icon-button-contrast) 100%
47
+ );
48
+ }
49
+
50
+ :is(
51
+ [data-component="button-v2"][data-variant="submit"],
52
+ [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
53
+ ):is(:active, [data-state="pressed"]):not(:disabled) {
54
+ background-image:
55
+ linear-gradient(
56
+ 90deg,
57
+ var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
58
+ var(--v2-overlay-simple-overlay-contrast-pressed) 100%
59
+ ),
60
+ linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
61
+ linear-gradient(
62
+ 90deg,
63
+ var(--v2-background-bg-icon-button-contrast) 0%,
64
+ var(--v2-background-bg-icon-button-contrast) 100%
65
+ );
66
+ }
67
+
68
+ :is(
69
+ [data-component="button-v2"][data-variant="submit"],
70
+ [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
71
+ ):is(:disabled, [data-state="disabled"]) {
72
+ opacity: 0.4;
73
+ cursor: not-allowed;
74
+ }
package/src/i18n/en.ts CHANGED
@@ -114,11 +114,12 @@ const source = {
114
114
  "ui.messagePart.context.list.other": "{{count}} lists",
115
115
  "ui.messagePart.context.notice.one": "{{count}} Notice",
116
116
  "ui.messagePart.context.notice.other": "{{count}} Notices",
117
- "ui.messagePart.context.thought.one": "{{count}} Thought",
118
- "ui.messagePart.context.thought.other": "{{count}} Thoughts",
117
+ "ui.messagePart.context.thought.one": "Thought",
118
+ "ui.messagePart.context.thought.other": "Thoughts",
119
119
  "ui.messagePart.context.match.one": "({{count}} match)",
120
120
  "ui.messagePart.context.match.other": "({{count}} matches)",
121
- "ui.messagePart.tools.used": "Used {{tools}}",
121
+ "ui.messagePart.tools.used.one": "{{count}} used {{tools}}",
122
+ "ui.messagePart.tools.used.other": "{{count}} used {{tools}}",
122
123
 
123
124
  "ui.list.loading": "Loading",
124
125
  "ui.list.empty": "No results",