Mirror_Repos/anomalyco_opencode
2
0
Fork 0
Code Issues Pull Requests Actions 75 Packages Projects Releases Wiki Activity

more color tweaks

Browse Source
This commit is contained in:
usrnk1
2026-06-22 14:43:12 +02:00
parent cafd9b2d4b
commit abdab5d4e7
5 changed files with 90 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/pages/session/timeline/message-timeline.tsx
+2 -2
View File
@@ -1019,7 +1019,7 @@ export function MessageTimeline(props: {
<div class="flex w-max min-w-full justify-end gap-2">
<Index each={comments()}>
{(comment) => (
<div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
<div class="shrink-0 max-w-[260px] rounded-[6px] border-[0.5px] border-border-weak-base bg-background-stronger px-2.5 py-2">
<div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
<FileIcon node={{ path: comment().path, type: "file" }} class="size-3.5 shrink-0" />
<span class="truncate">{getFilename(comment().path)}</span>
@@ -1509,7 +1509,7 @@ export function MessageTimeline(props: {
<Button
size="large"
variant="secondary"
class="w-full shadow-none border border-border-weak-base"
class="w-full shadow-none border-[0.5px] border-border-weak-base"
onClick={unshareSession}
disabled={unshareMutation.isPending}
>
packages/session-ui/src/components/basic-tool.css
+9 -9
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,
packages/session-ui/src/components/markdown.css
+17 -11
View File
@@ -1,5 +1,6 @@
[data-component="markdown"] {
--markdown-inline-code-color: var(--v2-blue-800);
--markdown-inline-code-path-color: var(--v2-blue-600);
--markdown-inline-code-bg-mix: 5%;
/* Reset & Base Typography */
min-width: 0;
@@ -114,7 +115,7 @@
/* Blockquotes */
blockquote {
border-left: 2px solid var(--v2-border-border-base);
border-left: 0.5px solid var(--v2-border-border-base);
margin: 1.5rem 0;
padding-left: 0.5rem;
color: var(--v2-text-text-muted);
@@ -162,7 +163,7 @@
background: var(--surface-float-base);
color: var(--text-invert-strong);
padding: 2px 8px;
border: 1px solid var(--v2-border-border-base, rgba(0, 0, 0, 0.07));
border: 0.5px solid var(--v2-border-border-base, rgba(0, 0, 0, 0.07));
box-shadow: var(--shadow-md);
pointer-events: none;
@@ -187,7 +188,7 @@
[data-slot="markdown-copy-button"][data-variant="secondary"] {
box-shadow: none;
border: 1px solid var(--v2-border-border-base);
border: 0.5px solid var(--v2-border-border-base);
}
[data-slot="markdown-copy-button"][data-variant="secondary"] [data-slot="icon-svg"] {
@@ -224,14 +225,18 @@
:where(p, li, blockquote, a) > code {
font-family: var(--font-family-mono);
font-feature-settings: var(--font-family-mono--font-feature-settings);
color: var(--markdown-inline-code-color);
color: var(--v2-text-text-base);
font-weight: var(--font-weight-medium);
}
:where(p, li, blockquote, a) > code:not([data-inline-code-kind="path"]) {
padding: 2px 4px;
border-radius: 6px;
background: color-mix(in oklch, var(--markdown-inline-code-color) 5%, transparent);
padding: 1px 4px;
border-radius: 4px;
background: color-mix(in oklch, var(--v2-text-text-base) var(--markdown-inline-code-bg-mix), transparent);
}
:where(p, li, blockquote, a) > code[data-inline-code-kind="path"] {
color: var(--markdown-inline-code-path-color);
}
/* Tables */
@@ -247,7 +252,7 @@
th,
td {
/* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
border-bottom: 1px solid var(--v2-border-border-muted);
border-bottom: 0.5px solid var(--v2-border-border-muted);
padding: 12px;
text-align: left;
vertical-align: top;
@@ -256,7 +261,7 @@
th {
color: var(--v2-text-text-base);
font-weight: var(--font-weight-medium);
border-bottom: 1px solid var(--v2-border-border-base);
border-bottom: 0.5px solid var(--v2-border-border-base);
}
/* Images */
@@ -270,7 +275,8 @@
}
:root[data-color-scheme="dark"] [data-component="markdown"] {
--markdown-inline-code-color: var(--v2-blue-400);
--markdown-inline-code-path-color: var(--v2-blue-400);
--markdown-inline-code-bg-mix: 10%;
}
[data-component="markdown"] a.external-link:hover > code {
packages/session-ui/src/components/message-part.css
+55 -55
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;
}
@@ -925,7 +925,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;
}
@@ -951,8 +951,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;
@@ -964,11 +964,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);
}
@@ -989,7 +989,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;
@@ -1012,7 +1012,7 @@
width: 6px;
height: 6px;
border-radius: 999px;
background-color: var(--background-stronger);
background-color: var(--v2-background-bg-layer-01);
opacity: 0;
}
@@ -1050,7 +1050,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"] {
@@ -1058,7 +1058,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;
@@ -1086,7 +1086,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;
@@ -1094,11 +1094,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);
}
@@ -1137,11 +1137,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);
}
}
}
@@ -1164,13 +1164,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-layer-01);
}
}
[data-component="accordion"][data-scope="apply-patch"] {
[data-slot="accordion-trigger"] {
background-color: var(--background-stronger) !important;
background-color: var(--v2-background-bg-layer-01) !important;
}
[data-slot="apply-patch-trigger-content"] {
@@ -1197,7 +1197,7 @@
}
[data-slot="apply-patch-directory"] {
color: var(--text-base);
color: var(--v2-text-text-muted);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -1206,7 +1206,7 @@
}
[data-slot="apply-patch-filename"] {
color: var(--text-strong);
color: var(--v2-text-text-base);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
@@ -1266,7 +1266,7 @@
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;
packages/ui/src/components/accordion.css
+7 -7
View File
@@ -35,12 +35,12 @@
cursor: default;
user-select: none;
background-color: var(--background-stronger);
border: 1px solid var(--border-weak-base);
background-color: var(--v2-background-bg-layer-base);
border: 0.5px solid var(--v2-border-border-base);
border-radius: 0;
box-shadow: none;
overflow: clip;
color: var(--text-strong);
color: var(--v2-text-text-base);
transition: background-color 0.15s ease;
/* text-12-regular */
@@ -52,10 +52,10 @@
letter-spacing: var(--letter-spacing-normal);
&:hover:not([data-disabled]) {
background-color: var(--surface-base-hover);
background-color: var(--v2-overlay-simple-overlay-hover);
}
&:active:not([data-disabled]) {
background-color: var(--surface-base-active);
background-color: var(--v2-overlay-simple-overlay-pressed);
}
&:focus-visible {
outline: none;
@@ -82,9 +82,9 @@
&[data-expanded] {
[data-slot="accordion-content"] {
border: 1px solid var(--border-weak-base);
border: 0.5px solid var(--v2-border-border-base);
border-top: 0;
background-color: var(--background-stronger);
background-color: var(--v2-background-bg-layer-01);
}
}