@opencode-ai/ui 0.0.0-dev-19172 → 0.0.0-dev-19173

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/actions/icon-button/icon-button.css +27 -9
  3. package/src/styles/tailwind/colors.css +1 -0
  4. package/src/styles/tokens/theme.css +3 -0
  5. package/src/theme/themes/oc-2.json +2 -0
  6. package/src/theme/v2/mapping.ts +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opencode-ai/ui",
3
- "version": "0.0.0-dev-19172",
3
+ "version": "0.0.0-dev-19173",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/actions/icon-button/icon-button.css CHANGED
@@ -71,23 +71,37 @@
71
71
 
72
72
  /* Contrast */
73
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
+
74
77
  background-image:
75
- linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
76
- linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
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
+ );
77
84
  color: var(--v2-text-text-contrast);
78
85
  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
79
86
  box-shadow: var(--v2-elevation-button-contrast);
80
87
  }
81
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
+
82
96
  [data-component="icon-button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
83
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%),
84
100
  linear-gradient(
85
101
  90deg,
86
- var(--v2-overlay-simple-overlay-contrast-hover) 0%,
87
- var(--v2-overlay-simple-overlay-contrast-hover) 100%
88
- ),
89
- linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
90
- linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
102
+ var(--v2-background-bg-icon-button-contrast) 0%,
103
+ var(--v2-background-bg-icon-button-contrast) 100%
104
+ );
91
105
  }
92
106
 
93
107
  [data-component="icon-button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
@@ -97,8 +111,12 @@
97
111
  var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
98
112
  var(--v2-overlay-simple-overlay-contrast-pressed) 100%
99
113
  ),
100
- linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
101
- linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
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
+ );
102
120
  }
103
121
 
104
122
  [data-component="icon-button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
package/src/styles/tailwind/colors.css CHANGED
@@ -240,6 +240,7 @@
240
240
  --color-v2-background-bg-layer-04: var(--v2-background-bg-layer-04);
241
241
  --color-v2-background-bg-inverse: var(--v2-background-bg-inverse);
242
242
  --color-v2-background-bg-contrast: var(--v2-background-bg-contrast);
243
+ --color-v2-background-bg-icon-button-contrast: var(--v2-background-bg-icon-button-contrast);
243
244
  --color-v2-background-bg-button-neutral: var(--v2-background-bg-button-neutral);
244
245
  --color-v2-background-bg-accent: var(--v2-background-bg-accent);
245
246
  --color-v2-text-text-base: var(--v2-text-text-base);
package/src/styles/tokens/theme.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --v2-background-bg-layer-04: var(--v2-grey-400);
12
12
  --v2-background-bg-inverse: var(--v2-grey-1100);
13
13
  --v2-background-bg-contrast: var(--v2-grey-1000);
14
+ --v2-background-bg-icon-button-contrast: var(--v2-background-bg-contrast);
14
15
  --v2-background-bg-button-neutral: var(--v2-grey-50);
15
16
  --v2-background-bg-accent: var(--v2-blue-600);
16
17
  --v2-background-bg-code-path: var(--v2-cyan-100);
@@ -267,6 +268,7 @@
267
268
  --v2-background-bg-layer-04: var(--v2-grey-400);
268
269
  --v2-background-bg-inverse: var(--v2-grey-1100);
269
270
  --v2-background-bg-contrast: var(--v2-grey-1000);
271
+ --v2-background-bg-icon-button-contrast: var(--v2-background-bg-contrast);
270
272
  --v2-background-bg-button-neutral: var(--v2-grey-50);
271
273
  --v2-background-bg-accent: var(--v2-blue-600);
272
274
  --v2-background-bg-code-path: var(--v2-cyan-100);
@@ -392,6 +394,7 @@
392
394
  --v2-background-bg-layer-04: var(--v2-grey-700);
393
395
  --v2-background-bg-inverse: var(--v2-grey-50);
394
396
  --v2-background-bg-contrast: var(--v2-grey-700);
397
+ --v2-background-bg-icon-button-contrast: var(--v2-grey-400);
395
398
  --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
396
399
  --v2-background-bg-accent: var(--v2-blue-600);
397
400
  --v2-background-bg-code-path: var(--v2-cyan-1200);
package/src/theme/themes/oc-2.json CHANGED
@@ -164,6 +164,7 @@
164
164
  "v2-background-bg-layer-04": "var(--v2-grey-400)",
165
165
  "v2-background-bg-inverse": "var(--v2-grey-1100)",
166
166
  "v2-background-bg-contrast": "var(--v2-grey-1000)",
167
+ "v2-background-bg-icon-button-contrast": "var(--v2-background-bg-contrast)",
167
168
  "v2-background-bg-button-neutral": "var(--v2-grey-50)",
168
169
  "v2-background-bg-accent": "var(--v2-blue-600)",
169
170
  "v2-background-bg-code-path": "var(--v2-cyan-100)",
@@ -414,6 +415,7 @@
414
415
  "v2-background-bg-layer-04": "var(--v2-grey-700)",
415
416
  "v2-background-bg-inverse": "var(--v2-grey-50)",
416
417
  "v2-background-bg-contrast": "var(--v2-grey-700)",
418
+ "v2-background-bg-icon-button-contrast": "var(--v2-grey-400)",
417
419
  "v2-background-bg-button-neutral": "var(--v2-alpha-light-6)",
418
420
  "v2-background-bg-accent": "var(--v2-blue-600)",
419
421
  "v2-background-bg-code-path": "var(--v2-cyan-1200)",
package/src/theme/v2/mapping.ts CHANGED
@@ -40,6 +40,7 @@ const light: Record<string, V2ColorValue> = {
40
40
  "v2-background-bg-layer-04": ref("v2-grey-600"),
41
41
  "v2-background-bg-inverse": ref("v2-grey-1000"),
42
42
  "v2-background-bg-contrast": ref("v2-grey-900"),
43
+ "v2-background-bg-icon-button-contrast": ref("v2-background-bg-contrast"),
43
44
  "v2-background-bg-button-neutral": ref("v2-grey-100"),
44
45
  "v2-background-bg-accent": ref("v2-blue-600"),
45
46
  "v2-background-bg-code-path": ref("v2-cyan-100"),
@@ -107,6 +108,7 @@ const dark: Record<string, V2ColorValue> = {
107
108
  "v2-background-bg-layer-04": ref("v2-grey-400"),
108
109
  "v2-background-bg-inverse": ref("v2-grey-100"),
109
110
  "v2-background-bg-contrast": ref("v2-grey-700"),
111
+ "v2-background-bg-icon-button-contrast": ref("v2-grey-400"),
110
112
  "v2-background-bg-button-neutral": ref("v2-alpha-light-6"),
111
113
  "v2-background-bg-accent": ref("v2-blue-600"),
112
114
  "v2-background-bg-code-path": ref("v2-cyan-1200"),