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

299
packages/session-ui/src/components/message-part.css
View file

@ -14,7 +14,7 @@
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal);
color: var(--text-strong);
color: var(--v2-text-text-base);
display: flex;
flex-direction: column;
align-items: flex-end;
@ -41,15 +41,15 @@
min-width: 0;
border-radius: 6px;
overflow: hidden;
background: var(--surface-weak);
border: 1px solid var(--border-weak-base);
background: var(--v2-background-bg-layer-02);
border: 0.5px solid var(--v2-border-border-base);
cursor: default;
transition:
border-color 0.15s ease,
opacity 0.3s ease;
&:hover {
border-color: var(--border-strong-base);
border-color: var(--v2-border-border-strong);
}
&[data-clickable] {
@ -107,7 +107,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-base);
color: var(--v2-text-text-muted);
font-size: var(--font-size-small);
line-height: var(--line-height-large);
}
@ -130,10 +130,10 @@
white-space: pre-wrap;
word-break: break-word;
overflow: hidden;
background: var(--surface-base);
border: 1px solid var(--border-weak-base);
background: var(--v2-background-bg-layer-02);
border: none;
padding: 8px 12px;
border-radius: 6px;
border-radius: 10px;
[data-highlight="file"] {
color: var(--syntax-property);
@ -199,7 +199,7 @@
}
.text-text-strong {
color: var(--text-strong);
color: var(--v2-text-text-base);
}
.font-medium {
@ -267,7 +267,7 @@
[data-slot="compaction-part-line"] {
flex: 1 1 auto;
height: 1px;
background: var(--border-weak-base);
background: var(--v2-border-border-base);
}
[data-slot="compaction-part-label"] {
@ -279,18 +279,18 @@
[data-component="reasoning-part"] {
width: 100%;
color: var(--text-base);
color: var(--v2-text-text-muted);
line-height: var(--line-height-normal);
[data-component="markdown"] {
margin-top: 16px;
font-style: normal;
font-size: 13px;
color: var(--text-weak);
color: var(--v2-text-text-muted);
strong,
b {
color: var(--text-weak);
color: var(--v2-text-text-muted);
}
p:has(strong) {
@ -357,7 +357,7 @@
[data-component="bash-output"] {
width: 100%;
border: 1px solid var(--border-weak-base);
border: 0.5px solid var(--v2-border-border-base);
border-radius: 6px;
background: transparent;
position: relative;
@ -380,7 +380,7 @@
[data-slot="bash-copy"] [data-component="icon-button"][data-variant="secondary"] {
box-shadow: none;
border: 1px solid var(--border-weak-base);
border: 0.5px solid var(--v2-border-border-base);
}
[data-slot="bash-copy"] [data-component="icon-button"][data-variant="secondary"] [data-slot="icon-svg"] {
@ -442,7 +442,7 @@
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal);
color: var(--text-base);
color: var(--v2-text-text-muted);
}
[data-slot="message-part-title-spinner"] {
@ -453,7 +453,7 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text-weak);
color: var(--v2-text-text-muted);
[data-component="spinner"] {
width: 16px;
@ -464,7 +464,7 @@
[data-slot="message-part-title-text"] {
flex-shrink: 0;
text-transform: capitalize;
color: var(--text-strong);
color: var(--v2-text-text-base);
}
[data-slot="message-part-title-filename"] {
@ -484,7 +484,7 @@
}
[data-slot="message-part-directory"] {
color: var(--text-weak);
color: var(--v2-text-text-muted);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -493,7 +493,7 @@
}
[data-slot="message-part-filename"] {
color: var(--text-strong);
color: var(--v2-text-text-base);
flex-shrink: 0;
}
@ -508,7 +508,7 @@
[data-component="edit-content"] {
border-radius: inherit;
border-top: 1px solid var(--border-weaker-base);
border-top: 0.5px solid var(--v2-border-border-muted);
overflow-x: hidden;
overflow-y: visible;
@ -527,7 +527,7 @@
[data-component="write-content"] {
border-radius: inherit;
border-top: 1px solid var(--border-weaker-base);
border-top: 0.5px solid var(--v2-border-border-muted);
overflow-x: hidden;
overflow-y: visible;
@ -561,7 +561,7 @@
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-large);
color: var(--text-base);
color: var(--v2-text-text-muted);
}
[data-slot="basic-tool-tool-subtitle"].exa-tool-query {
@ -583,7 +583,7 @@
max-width: 100%;
font: inherit;
line-height: inherit;
color: var(--text-interactive-base);
color: var(--v2-text-text-accent);
text-decoration: underline;
text-underline-offset: 2px;
overflow: hidden;
@ -591,11 +591,11 @@
white-space: nowrap;
&:hover {
color: var(--text-interactive-base);
color: var(--v2-text-text-accent);
}
&:visited {
color: var(--text-interactive-base);
color: var(--v2-text-text-accent);
}
}
@ -615,7 +615,7 @@
&[data-completed="completed"] {
text-decoration: line-through;
color: var(--text-weaker);
color: var(--v2-text-text-faint);
}
}
}
@ -660,8 +660,8 @@
flex-direction: column;
gap: 4px;
padding: 8px 12px;
background-color: var(--surface-critical-weak);
border-top: 1px solid var(--border-critical-base);
background-color: var(--v2-state-bg-danger);
border-top: 0.5px solid var(--v2-state-border-danger);
[data-slot="diagnostic"] {
display: flex;
@ -673,7 +673,7 @@
}
[data-slot="diagnostic-label"] {
color: var(--text-on-critical-base);
color: var(--v2-state-fg-danger);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: -0.5px;
@ -681,12 +681,12 @@
}
[data-slot="diagnostic-location"] {
color: var(--text-on-critical-weak);
color: var(--v2-state-fg-danger);
flex-shrink: 0;
}
[data-slot="diagnostic-message"] {
color: var(--text-on-critical-base);
color: var(--v2-state-fg-danger);
word-break: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
@ -761,7 +761,7 @@
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large);
color: var(--text-strong);
color: var(--v2-text-text-base);
min-width: 0;
}
@ -778,7 +778,7 @@
font-size: 14px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large);
color: var(--text-weak);
color: var(--v2-text-text-muted);
padding: 0;
}
@ -856,7 +856,7 @@
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large);
color: var(--text-strong);
color: var(--v2-text-text-base);
min-width: 0;
}
@ -916,7 +916,7 @@
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large);
color: var(--text-strong);
color: var(--v2-text-text-base);
padding: 0 10px;
-webkit-user-select: text;
user-select: text;
@ -927,7 +927,7 @@
font-size: 13px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large);
color: var(--text-weak);
color: var(--v2-text-text-muted);
padding: 0 10px;
}
@ -953,8 +953,8 @@
align-items: flex-start;
gap: 12px;
padding: 8px 8px 8px 10px;
background-color: var(--surface-raised-stronger-non-alpha);
border: 1px solid var(--border-weak-base);
background-color: var(--v2-background-bg-layer-01);
border: 0.5px solid var(--v2-border-border-base);
border-radius: 6px;
box-shadow: none;
text-align: left;
@ -966,11 +966,11 @@
box-shadow 0.15s ease;
&:hover:not([data-picked="true"]) {
background-color: var(--background-base);
background-color: var(--v2-background-bg-base);
}
&[data-picked="true"] {
background-color: var(--surface-interactive-weak);
background-color: var(--v2-state-bg-info);
border-color: transparent;
box-shadow: var(--shadow-xs-border-hover);
}
@ -991,7 +991,7 @@
height: 16px;
padding: 2px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-weak-base);
border: 0.5px solid var(--v2-border-border-base);
display: inline-flex;
align-items: center;
justify-content: center;
@ -1014,7 +1014,7 @@
width: 6px;
height: 6px;
border-radius: 999px;
background-color: var(--background-stronger);
background-color: var(--v2-background-bg-layer-01);
opacity: 0;
}
@ -1052,7 +1052,7 @@
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large);
color: var(--text-strong);
color: var(--v2-text-text-base);
}
[data-slot="option-description"] {
@ -1060,7 +1060,7 @@
font-size: 14px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large);
color: var(--text-base);
color: var(--v2-text-text-muted);
min-width: 0;
overflow-wrap: anywhere;
white-space: normal;
@ -1088,7 +1088,7 @@
font-size: 14px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large);
color: var(--text-base);
color: var(--v2-text-text-muted);
min-width: 0;
cursor: text;
resize: none;
@ -1096,11 +1096,11 @@
overflow-wrap: anywhere;
&::placeholder {
color: var(--text-weak);
color: var(--v2-text-text-muted);
}
&:focus-visible {
outline: 1px solid var(--border-interactive-base);
outline: 0.5px solid var(--v2-border-border-focus);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
@ -1139,11 +1139,11 @@
font-size: 13px;
[data-slot="question-text"] {
color: var(--text-weak);
color: var(--v2-text-text-muted);
}
[data-slot="answer-text"] {
color: var(--text-strong);
color: var(--v2-text-text-base);
}
}
}
@ -1166,13 +1166,13 @@
z-index: 20;
height: calc(32px + var(--tool-content-gap));
padding-bottom: var(--tool-content-gap);
background-color: var(--background-stronger);
background-color: var(--v2-background-bg-base);
}
}
[data-component="accordion"][data-scope="apply-patch"] {
[data-slot="accordion-trigger"] {
background-color: var(--background-stronger) !important;
background-color: var(--v2-background-bg-base) !important;
}
[data-slot="apply-patch-trigger-content"] {
@ -1199,7 +1199,7 @@
}
[data-slot="apply-patch-directory"] {
color: var(--text-base);
color: var(--v2-text-text-muted);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -1208,7 +1208,7 @@
}
[data-slot="apply-patch-filename"] {
color: var(--text-strong);
color: var(--v2-text-text-base);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
@ -1268,10 +1268,199 @@
font-size: var(--font-size-small);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-large);
color: var(--text-weak);
color: var(--v2-text-text-muted);
[data-component="icon"] {
flex-shrink: 0;
color: var(--icon-weak);
}
}
body:not([data-new-layout]) {
[data-component="user-message"] {
color: var(--text-strong);
[data-slot="user-message-attachment"] {
background: var(--surface-weak);
border: 1px solid var(--border-weak-base);
&:hover {
border-color: var(--border-strong-base);
}
}
[data-slot="user-message-attachment-name"] {
color: var(--text-base);
}
[data-slot="user-message-text"] {
background: var(--surface-base);
border: 1px solid var(--border-weak-base);
border-radius: 6px;
}
.text-text-strong {
color: var(--text-strong);
}
}
[data-slot="compaction-part-line"] {
background: var(--border-weak-base);
}
[data-component="reasoning-part"] {
color: var(--text-base);
[data-component="markdown"],
[data-component="markdown"] :is(strong, b) {
color: var(--text-weak);
}
}
[data-component="bash-output"] {
border: 1px solid var(--border-weak-base);
[data-slot="bash-copy"] [data-component="icon-button"][data-variant="secondary"] {
border: 1px solid var(--border-weak-base);
}
}
[data-component="edit-trigger"],
[data-component="write-trigger"] {
[data-slot="message-part-title"] {
color: var(--text-base);
}
[data-slot="message-part-title-spinner"],
[data-slot="message-part-directory"] {
color: var(--text-weak);
}
[data-slot="message-part-title-text"],
[data-slot="message-part-filename"] {
color: var(--text-strong);
}
}
[data-component="edit-content"],
[data-component="write-content"] {
border-top: 1px solid var(--border-weaker-base);
}
[data-component="exa-tool-output"] {
color: var(--text-base);
}
[data-slot="exa-tool-link"],
[data-slot="exa-tool-link"]:hover,
[data-slot="exa-tool-link"]:visited {
color: var(--text-interactive-base);
}
[data-slot="message-part-todo-content"][data-completed="completed"] {
color: var(--text-weaker);
}
[data-component="diagnostics"] {
background-color: var(--surface-critical-weak);
border-top: 1px solid var(--border-critical-base);
[data-slot="diagnostic-label"],
[data-slot="diagnostic-message"] {
color: var(--text-on-critical-base);
}
[data-slot="diagnostic-location"] {
color: var(--text-on-critical-weak);
}
}
[data-component="dock-prompt"][data-kind="permission"] {
[data-slot="permission-header-title"] {
color: var(--text-strong);
}
[data-slot="permission-hint"] {
color: var(--text-weak);
}
}
[data-component="dock-prompt"][data-kind="question"] {
[data-slot="question-header-title"],
[data-slot="question-text"],
[data-slot="option-label"] {
color: var(--text-strong);
}
[data-slot="question-hint"] {
color: var(--text-weak);
}
[data-slot="question-option"] {
background-color: var(--surface-raised-stronger-non-alpha);
border: 1px solid var(--border-weak-base);
&:hover:not([data-picked="true"]) {
background-color: var(--background-base);
}
&[data-picked="true"] {
background-color: var(--surface-interactive-weak);
}
}
[data-slot="question-option-box"] {
border: 1px solid var(--border-weak-base);
[data-slot="question-option-radio-dot"] {
background-color: var(--background-stronger);
}
}
[data-slot="option-description"],
[data-slot="question-custom-input"] {
color: var(--text-base);
}
[data-slot="question-custom-input"] {
&::placeholder {
color: var(--text-weak);
}
&:focus-visible {
outline: 1px solid var(--border-interactive-base);
}
}
}
[data-component="question-answers"] {
[data-slot="question-text"] {
color: var(--text-weak);
}
[data-slot="answer-text"] {
color: var(--text-strong);
}
}
:is([data-component="edit-tool"], [data-component="write-tool"], [data-component="apply-patch-tool"])
> [data-component="collapsible"]
> [data-slot="collapsible-trigger"][aria-expanded="true"],
[data-component="accordion"][data-scope="apply-patch"] [data-slot="accordion-trigger"] {
background-color: var(--background-stronger) !important;
}
[data-component="accordion"][data-scope="apply-patch"] {
[data-slot="apply-patch-directory"] {
color: var(--text-base);
}
[data-slot="apply-patch-filename"] {
color: var(--text-strong);
}
}
[data-component="tool-loaded-file"] {
color: var(--text-weak);
}
}