ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(app): refine session UI styling (#33860)

Browse source 
Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
This commit is contained in:
usrnk1 2026-06-26 10:04:56 +02:00 • committed by GitHub
commit 78a5a030ce
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 711 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

49
packages/session-ui/src/components/basic-tool.css
View file

@ -43,7 +43,7 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text-weak);
color: var(--v2-text-text-faint);
[data-component="spinner"] {
width: 16px;
@ -89,14 +89,14 @@
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal);
color: var(--text-strong);
color: var(--v2-text-text-base);
&.capitalize {
text-transform: capitalize;
}
&.agent-title {
color: var(--text-strong);
color: var(--v2-text-text-base);
font-weight: var(--font-weight-medium);
}
}
@ -114,7 +114,7 @@
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal);
color: var(--text-base);
color: var(--v2-text-text-muted);
&.clickable {
cursor: pointer;
@ -122,7 +122,7 @@
transition: color 0.15s ease;
&:hover {
color: var(--text-base);
color: var(--v2-text-text-muted);
}
}
@ -160,7 +160,7 @@
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal);
color: var(--text-base);
color: var(--v2-text-text-muted);
}
[data-slot="basic-tool-tool-action"] {
@ -178,7 +178,7 @@
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
border: 1px solid var(--border-weak-base, rgba(255, 255, 255, 0.08));
border: 0.5px solid var(--border-weak-base, rgba(255, 255, 255, 0.08));
background: color-mix(in srgb, var(--background-base) 92%, transparent);
transition:
border-color 0.15s ease,
@ -213,7 +213,7 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--icon-weak);
color: var(--v2-text-text-faint);
margin-left: auto;
opacity: 0;
transition:
@ -233,7 +233,7 @@
}
[data-slot="basic-tool-tool-subtitle"] {
color: var(--text-strong);
color: var(--v2-text-text-base);
}
&:hover,
@ -246,3 +246,34 @@
}
}
}
body:not([data-new-layout]) {
[data-component="tool-trigger"] {
[data-slot="basic-tool-tool-spinner"] {
color: var(--text-weak);
}
[data-slot="basic-tool-tool-title"],
[data-slot="basic-tool-tool-title"].agent-title {
color: var(--text-strong);
}
[data-slot="basic-tool-tool-subtitle"],
[data-slot="basic-tool-tool-subtitle"].clickable:hover,
[data-slot="basic-tool-tool-arg"] {
color: var(--text-base);
}
}
[data-component="task-tool-card"] {
border-width: 1px;
[data-component="task-tool-action"] {
color: var(--icon-weak);
}
[data-slot="basic-tool-tool-subtitle"] {
color: var(--text-strong);
}
}
}