EnterpriseAI/ClosedCode
1
0
Fork 0
Code Issues Pull Requests Actions 29 Packages Projects Releases Wiki Activity

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 08:04:56 +00:00
committed by GitHub
co-authored by Brendan Allan
parent 219ba24d90
commit 78a5a030ce
21 changed files with 711 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/session-ui/src/components/markdown.css
+137 -24
View File
@@ -1,9 +1,17 @@
[data-component="markdown"] {
--markdown-inline-code-path-color: var(--v2-text-text-code-accent);
--markdown-inline-code-color: var(--v2-text-text-code-accent);
--markdown-inline-code-bg-mix: 8%;
--markdown-shell-code-background: var(--v2-background-bg-layer-02);
--markdown-shell-code-border: var(--v2-border-border-muted);
--markdown-shell-code-color: var(--v2-text-text-base);
--markdown-shell-code-token-color: currentColor;
/* Reset & Base Typography */
min-width: 0;
max-width: 100%;
overflow-wrap: break-word;
color: var(--text-strong);
color: var(--v2-text-text-base);
font-family: var(--font-family-sans);
font-size: var(--font-size-base); /* 14px */
line-height: 160%;
@@ -22,15 +30,31 @@
margin-bottom: 0;
}
/* Headings: Same size, distinguished by color and spacing */
h1,
h2,
/* Headings: Sized by level, distinguished by color and spacing */
h1 {
font-size: 17px;
color: var(--v2-text-text-base);
font-weight: 600;
margin-top: 0px;
margin-bottom: 24px;
line-height: var(--line-height-large);
}
h2 {
font-size: 15px;
color: var(--v2-text-text-base);
font-weight: 600;
margin-top: 0px;
margin-bottom: 24px;
line-height: var(--line-height-large);
}
h3,
h4,
h5,
h6 {
font-size: 14px;
color: var(--text-strong);
font-size: 13px;
color: var(--v2-text-text-base);
font-weight: var(--font-weight-medium);
margin-top: 0px;
margin-bottom: 24px;
@@ -40,7 +64,7 @@
/* Emphasis & Strong: Neutral strong color */
strong,
b {
color: var(--text-strong);
color: var(--v2-text-text-base);
font-weight: var(--font-weight-medium);
}
@@ -95,7 +119,7 @@
}
li::marker {
color: var(--text-weak);
color: var(--v2-text-text-muted);
}
/* Nested lists spacing */
@@ -112,10 +136,10 @@
/* Blockquotes */
blockquote {
border-left: 2px solid var(--border-weak-base);
border-left: 0.5px solid var(--v2-border-border-base);
margin: 1.5rem 0;
padding-left: 0.5rem;
color: var(--text-weak);
color: var(--v2-text-text-muted);
font-style: normal;
}
@@ -132,13 +156,27 @@
font-size: 13px;
padding: 12px;
border-radius: 6px;
border: 0.5px solid var(--border-weak-base);
border: 0.5px solid var(--v2-border-border-base);
}
[data-component="markdown-code"] {
position: relative;
}
[data-component="markdown-code"][data-code-kind="shell"] .shiki {
background: var(--markdown-shell-code-background);
border-color: var(--markdown-shell-code-border);
color: var(--markdown-shell-code-color);
}
[data-component="markdown-code"][data-code-kind="shell"] code {
color: var(--markdown-shell-code-color);
}
[data-component="markdown-code"][data-code-kind="shell"] code span {
color: var(--markdown-shell-code-token-color) !important;
}
[data-slot="markdown-copy-button"] {
position: absolute;
top: 4px;
@@ -160,7 +198,7 @@
background: var(--surface-float-base);
color: var(--text-invert-strong);
padding: 2px 8px;
border: 1px solid var(--border-weak-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;
@@ -185,11 +223,11 @@
[data-slot="markdown-copy-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="markdown-copy-button"][data-variant="secondary"] [data-slot="icon-svg"] {
color: var(--icon-base);
color: var(--v2-icon-icon-base);
}
[data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] {
@@ -222,15 +260,28 @@
:not(pre) > code {
font-family: var(--font-family-mono);
font-feature-settings: var(--font-family-mono--font-feature-settings);
color: var(--syntax-string);
color: var(--v2-text-text-base);
font-weight: var(--font-weight-medium);
/* font-size: 13px; */
padding: 2px 4px;
border-radius: 4px;
background: color-mix(in oklch, var(--v2-text-text-base) var(--markdown-inline-code-bg-mix), transparent);
}
/* padding: 2px 2px; */
/* margin: 0 1.5px; */
/* border-radius: 2px; */
/* background: var(--surface-base); */
/* box-shadow: 0 0 0 0.5px var(--border-weak-base); */
:not(pre) > code[data-inline-code-kind="path"] {
color: var(--markdown-inline-code-path-color);
background: color-mix(
in oklch,
var(--markdown-inline-code-path-color) var(--markdown-inline-code-bg-mix),
transparent
);
}
a.external-link > code[data-inline-code-kind="url"] {
color: var(--markdown-inline-code-color);
background: none;
text-decoration: underline;
text-decoration-color: color-mix(in oklch, var(--markdown-inline-code-color) 25%, transparent);
text-underline-offset: 2px;
}
/* Tables */
@@ -246,16 +297,16 @@
th,
td {
/* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
border-bottom: 1px solid var(--border-weaker-base);
border-bottom: 0.5px solid var(--v2-border-border-muted);
padding: 12px;
text-align: left;
vertical-align: top;
}
th {
color: var(--text-strong);
color: var(--v2-text-text-base);
font-weight: var(--font-weight-medium);
border-bottom: 1px solid var(--border-weak-base);
border-bottom: 0.5px solid var(--v2-border-border-base);
}
/* Images */
@@ -268,6 +319,68 @@
}
}
body:not([data-new-layout]) [data-component="markdown"] {
color: var(--text-strong);
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 14px;
color: var(--text-strong);
font-weight: var(--font-weight-medium);
}
strong,
b {
color: var(--text-strong);
}
li::marker {
color: var(--text-weak);
}
blockquote {
border-left: 2px solid var(--border-weak-base);
color: var(--text-weak);
}
.shiki {
border-color: var(--border-weak-base);
}
:not(pre) > code {
color: var(--syntax-string);
padding: 0;
border-radius: 0;
background: none;
}
[data-slot="markdown-copy-button"]::after {
border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
}
[data-slot="markdown-copy-button"][data-variant="secondary"] {
border: 1px solid var(--border-weak-base);
}
[data-slot="markdown-copy-button"][data-variant="secondary"] [data-slot="icon-svg"] {
color: var(--icon-base);
}
th,
td {
border-bottom: 1px solid var(--border-weaker-base);
}
th {
color: var(--text-strong);
border-bottom-color: var(--border-weak-base);
}
}
[data-component="markdown"] a.external-link:hover > code {
text-decoration: underline;
text-underline-offset: 2px;