vendor/opencode
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(app): ui improvements (#32438)

Browse Source 
Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>
This commit is contained in:
Aarav Sareen
2026-06-25 10:56:37 +05:30
committed by GitHub
parent 4c0af7cf2d
commit 1bcb9d7cb9
29 changed files with 415 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/components/dialog.css
View File

@@ -130,8 +130,8 @@
}
&[data-size="x-large"] [data-slot="dialog-container"] {
width: min(calc(100vw - 32px), 960px);
height: min(calc(100vh - 32px), 600px);
width: min(calc(100vw - 32px), 980px);
height: min(calc(100vh - 92px), 600px);
}
}

6
packages/ui/src/components/scroll-view.css
View File

@@ -1,10 +1,14 @@
.scroll-view {
position: relative;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.scroll-view__viewport {
height: 100%;
flex: 1 1 auto;
min-height: 0;
width: 100%;
overflow-y: auto;
scrollbar-width: none;

2
packages/ui/src/theme/themes/oc-2.json
View File

@@ -416,7 +416,7 @@
"v2-overlay-simple-overlay-pressed": "var(--v2-alpha-light-10)",
"v2-overlay-simple-overlay-contrast-hover": "var(--v2-alpha-dark-24)",
"v2-overlay-simple-overlay-contrast-pressed": "var(--v2-alpha-dark-40)",
"v2-overlay-simple-overlay-scrim": "var(--v2-alpha-light-30)",
"v2-overlay-simple-overlay-scrim": "var(--v2-alpha-dark-60)",
"v2-overlay-gradient-depth-overlay-depth-top": "var(--v2-alpha-light-100)",
"v2-overlay-gradient-depth-overlay-depth-bot": "var(--v2-alpha-light-0)",
"v2-overlay-simple-tab-active-scrim": "#24242400",

2
packages/ui/src/theme/v2/mapping.ts
View File

@@ -90,7 +90,7 @@ const dark: Record<string, V2ColorValue> = {
"v2-overlay-simple-overlay-pressed": ref("v2-alpha-light-10"),
"v2-overlay-simple-overlay-contrast-hover": ref("v2-alpha-dark-24"),
"v2-overlay-simple-overlay-contrast-pressed": ref("v2-alpha-dark-40"),
"v2-overlay-simple-overlay-scrim": ref("v2-alpha-light-30"),
"v2-overlay-simple-overlay-scrim": ref("v2-alpha-dark-60"),
"v2-overlay-gradient-depth-overlay-depth-top": ref("v2-alpha-light-100"),
"v2-overlay-gradient-depth-overlay-depth-bot": ref("v2-alpha-light-0"),
"v2-overlay-simple-tab-active-scrim": "#24242400",

4
packages/ui/src/v2/components/dialog-v2.css
View File

@@ -144,7 +144,7 @@
}
&[data-size="x-large"] [data-slot="dialog-container"] {
width: 800px;
height: 560px;
width: min(calc(100vw - 32px), 980px);
height: min(calc(100vh - 92px), 600px);
}
}

8
packages/ui/src/v2/components/icon-button-v2.css
View File

@@ -112,9 +112,7 @@
color: var(--v2-text-text-base);
}
[data-component="icon-button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"]):not(:disabled):not(
[data-expanded]
) {
[data-component="icon-button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"], [data-expanded]):not(:disabled) {
background-color: var(--v2-overlay-simple-overlay-hover);
}
@@ -133,9 +131,7 @@
color: var(--v2-icon-icon-muted);
}
[data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not(
[data-expanded]
) {
[data-component="icon-button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"], [data-expanded]):not(:disabled) {
background-color: var(--v2-overlay-simple-overlay-hover);
}

4
packages/ui/src/v2/components/icon.tsx
View File

@@ -65,6 +65,10 @@ const icons = {
viewBox: "0 0 16 16",
body: `<path d="M2.5 7.5H3.5V8.5H2.5V7.5Z" stroke="currentColor"/><path d="M7.5 7.5H8.5V8.5H7.5V7.5Z" stroke="currentColor"/><path d="M12.5 7.5H13.5V8.5H12.5V7.5Z" stroke="currentColor"/>`,
},
archive: {
viewBox: "0 0 16 16",
body: `<path d="M13.1112 13.5555V14.0555H13.6112V13.5555H13.1112ZM2.889 13.5555H2.389L2.389 14.0555H2.889V13.5555ZM3.38901 5.55546L3.38901 5.05546L2.38901 5.05546L2.38901 5.55546L2.88901 5.55546L3.38901 5.55546ZM14.4446 2.44434H14.9446V1.94434L14.4446 1.94434L14.4446 2.44434ZM14.4446 5.55545L14.4446 6.05545L14.9446 6.05545V5.55545H14.4446ZM1.55566 5.55546L1.05566 5.55545L1.05566 6.05546L1.55566 6.05546L1.55566 5.55546ZM1.5557 2.44436L1.5557 1.94436L1.05571 1.94436L1.0557 2.44435L1.5557 2.44436ZM13.1112 5.55546H12.6112V13.5555H13.1112H13.6112V5.55546H13.1112ZM2.889 13.5555H3.389L3.38901 5.55546L2.88901 5.55546L2.38901 5.55546L2.389 13.5555H2.889ZM14.4446 2.44434H13.9446V5.55545H14.4446H14.9446V2.44434H14.4446ZM1.55566 5.55546L2.05566 5.55547L2.0557 2.44436L1.5557 2.44436L1.0557 2.44435L1.05566 5.55545L1.55566 5.55546ZM6.22234 8.22213V8.72213H9.7779V8.22213V7.72213H6.22234V8.22213ZM13.1112 13.5555V13.0555H2.889V13.5555V14.0555H13.1112V13.5555ZM1.5557 2.44436L1.5557 2.94436L14.4446 2.94434L14.4446 2.44434L14.4446 1.94434L1.5557 1.94436L1.5557 2.44436ZM14.4446 5.55545L14.4446 5.05545L1.55566 5.05546L1.55566 5.55546L1.55566 6.05546L14.4446 6.05545L14.4446 5.55545Z" fill="currentColor"/>`,
},
}
const spriteID = "opencode-v2-icon-sprite"

4
packages/ui/src/v2/components/project-avatar-v2.css
View File

@@ -120,7 +120,7 @@
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
width: 16px;
height: 16px;
overflow: visible;
}

2
packages/ui/src/v2/components/select-v2.css
View File

@@ -134,7 +134,7 @@
font-style: normal;
font-weight: 440;
font-size: 13px;
line-height: 1;
line-height: 16px;
letter-spacing: -0.04px;
color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0;

4
packages/ui/src/v2/components/tabs-v2.css
View File

@@ -45,6 +45,7 @@
align-items: center;
flex-shrink: 0;
white-space: nowrap;
user-select: none;
}
[data-component="tabs-v2"] [data-slot="tabs-v2-trigger"] {
@@ -54,6 +55,7 @@
overflow: hidden;
text-overflow: ellipsis;
outline: none;
user-select: none;
font-size: 13px;
font-weight: 440;
@@ -61,7 +63,7 @@
letter-spacing: -0.04px;
}
[data-component="tabs-v2"] [data-slot="tabs-v2-trigger"]:focus-visible {
[data-component="tabs-v2"] [data-slot="tabs-v2-trigger"]:is(:focus, :focus-visible) {
outline: none;
box-shadow: none;
}

2
packages/ui/src/v2/styles/theme.css
View File

@@ -370,7 +370,7 @@
--v2-overlay-simple-overlay-pressed: var(--v2-alpha-light-10);
--v2-overlay-simple-overlay-contrast-hover: var(--v2-alpha-dark-24);
--v2-overlay-simple-overlay-contrast-pressed: var(--v2-alpha-dark-40);
--v2-overlay-simple-overlay-scrim: var(--v2-alpha-light-30);
--v2-overlay-simple-overlay-scrim: var(--v2-alpha-dark-60);
--v2-overlay-gradient-depth-overlay-depth-top: var(--v2-alpha-light-100);
--v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-alpha-light-0);
--v2-overlay-simple-tab-active-scrim: #24242400;