Skip to content

Commit 60492c7

Browse files
bloveclaude
blove
and
claude
authored
refactor(cockpit): polish — chat lib data-theme, token migration, border standardization (#307)
* docs: cockpit polish design (PR 1 of 3-PR sequence) First in a three-PR sequence (cockpit polish → chat lib polish → cockpit vs website style alignment). Renames @ngaf/chat theme attribute from data-ngaf-chat-theme to data-theme for consistency. Replaces hardcoded rgba color literals in cockpit.css with --ds-* tokens. Standardizes cockpit border styling on Tailwind arbitrary values. Drops shadcn-style alias vars in cockpit.css in favor of direct --ds-* consumption. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * docs: cockpit polish implementation plan 6 tasks: chat lib data-theme rename, installEmbeddedTheme cleanup, cockpit.css token migration + dead-code drop, inline border → Tailwind arbitrary values across 6 component files, version bumps, PR ship. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(chat): rename theme attribute data-ngaf-chat-theme → data-theme * refactor(example-layouts): drop redundant data-ngaf-chat-theme set * refactor(chat): rename data-ngaf-chat-theme → data-theme in chat.css (missed in Task 1) * refactor(cockpit): drop dead shadcn aliases, migrate hardcoded rgba to --ds-* tokens * refactor(cockpit): migrate inline border styles to Tailwind arbitrary-value classes * chore: bump chat and example-layouts patch versions Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 6845262 commit 60492c7

14 files changed

Lines changed: 631 additions & 64 deletions

File tree

‎apps/cockpit/src/app/cockpit.css‎

Lines changed: 10 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,5 @@
11
@import "tailwindcss";
22

3-
@theme inline {
4-
--color-background: var(--background);
5-
--color-foreground: var(--foreground);
6-
--color-primary: var(--primary);
7-
--color-primary-foreground: var(--primary-foreground);
8-
--color-card: var(--card);
9-
--color-card-foreground: var(--card-foreground);
10-
--color-muted: var(--muted);
11-
--color-muted-foreground: var(--muted-foreground);
12-
--color-border: var(--border);
13-
--color-input: var(--input);
14-
--color-ring: var(--ring);
15-
}
16-
17-
:root {
18-
/* shadcn semantic vars — light palette */
19-
--background: #f8f9fc;
20-
--foreground: #1a1a2e;
21-
--primary: #004090;
22-
--primary-foreground: #ffffff;
23-
--card: rgba(255, 255, 255, 0.45);
24-
--card-foreground: #1a1a2e;
25-
--muted: rgba(0, 64, 144, 0.06);
26-
--muted-foreground: #555770;
27-
--border: rgba(0, 64, 144, 0.15);
28-
--input: rgba(0, 64, 144, 0.15);
29-
--ring: #004090;
30-
}
31-
323
/* Shiki code blocks — preserve dark background from theme */
334
pre.shiki {
345
padding: 1rem;
@@ -41,8 +12,8 @@ pre.shiki {
4112
/* ── Doc components ────────────────────────────────────────── */
4213

4314
.doc-summary {
44-
background: rgba(0, 64, 144, 0.04);
45-
border: 1px solid rgba(0, 64, 144, 0.12);
15+
background: var(--ds-accent-surface);
16+
border: 1px solid var(--ds-accent-border);
4617
border-radius: 0.5rem;
4718
padding: 0.75rem 1rem;
4819
margin-bottom: 1.5rem;
@@ -67,8 +38,8 @@ pre.shiki {
6738
}
6839
.doc-callout__content { color: var(--ds-text-secondary); }
6940
.doc-callout--tip {
70-
background: rgba(0, 64, 144, 0.04);
71-
border: 1px solid rgba(0, 64, 144, 0.12);
41+
background: var(--ds-accent-surface);
42+
border: 1px solid var(--ds-accent-border);
7243
}
7344
.doc-callout--tip .doc-callout__label { color: var(--ds-accent); }
7445
.doc-callout--note {
@@ -105,7 +76,7 @@ pre.shiki {
10576
.doc-step__line {
10677
width: 2px;
10778
flex: 1;
108-
background: rgba(0, 64, 144, 0.15);
79+
background: var(--ds-accent-border);
10980
margin: 0.375rem 0;
11081
min-height: 1rem;
11182
}
@@ -127,7 +98,7 @@ pre.shiki {
12798
.doc-step__content pre.shiki { margin: 0.5rem 0; border-radius: 0.5rem; }
12899

129100
.doc-codeblock {
130-
border: 1px solid rgba(0, 64, 144, 0.12);
101+
border: 1px solid var(--ds-accent-border);
131102
border-radius: 0.5rem;
132103
overflow: hidden;
133104
margin: 0.75rem 0;
@@ -139,14 +110,14 @@ pre.shiki {
139110
gap: 0.5rem;
140111
padding: 0.4rem 0.75rem;
141112
border-bottom: 1px solid rgba(138, 170, 214, 0.12);
142-
background: rgba(26, 27, 38, 0.95);
113+
background: var(--ds-surface);
143114
font-size: 0.7rem;
144115
}
145116
.doc-codeblock__file { color: #a9b1d6; font-family: var(--font-mono); }
146117
.doc-codeblock__lang {
147118
padding: 0.1rem 0.35rem;
148119
border-radius: 0.2rem;
149-
background: rgba(0, 64, 144, 0.15);
120+
background: var(--ds-accent-border);
150121
color: var(--ds-accent-light);
151122
font-size: 0.6rem;
152123
}
@@ -220,11 +191,11 @@ pre.shiki {
220191
font-size: 0.65rem;
221192
text-transform: uppercase;
222193
letter-spacing: 0.06em;
223-
border-bottom: 1px solid var(--border);
194+
border-bottom: 1px solid var(--ds-border);
224195
}
225196
.doc-api-table td {
226197
padding: 0.5rem 0.75rem;
227-
border-bottom: 1px solid rgba(0, 64, 144, 0.08);
198+
border-bottom: 1px solid var(--ds-accent-border);
228199
color: var(--ds-text-secondary);
229200
}
230201
.doc-api-table code {

‎apps/cockpit/src/components/api-mode/api-mode.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,9 @@ function DocArticle({ section }: { section: DocSection }) {
3737
}}
3838
>
3939
<div
40-
className="px-4 py-3 border-b"
40+
className="px-4 py-3 border-b border-[var(--ds-accent-border)]"
4141
style={{
4242
background: 'var(--ds-accent-surface)',
43-
borderBottomColor: 'var(--ds-accent-border)',
4443
}}
4544
>
4645
<div className="flex items-baseline gap-2">

‎apps/cockpit/src/components/cockpit-shell.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,9 @@ export function CockpitShell({
7979
onClose={() => setIsSidebarOpen(false)}
8080
/>
8181

82-
<section className="grid grid-rows-[auto_1fr] gap-2 p-4 overflow-hidden bg-[var(--ds-surface)]">
82+
<section className="grid grid-rows-[auto_1fr] overflow-hidden bg-[var(--ds-surface)]">
8383
<header
84-
className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between pb-3"
85-
style={{ borderBottom: '1px solid var(--ds-border)' }}
84+
className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between px-4 py-3 border-b border-[var(--ds-border)]"
8685
>
8786
<div className="flex items-center gap-3">
8887
<button

‎apps/cockpit/src/components/code-mode/code-mode.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,14 @@ function CodeFileContent({ path, content }: { path: string; content: string | un
2525
boxShadow: 'var(--ds-shadow-sm)',
2626
overflow: 'hidden',
2727
}}>
28-
<div style={{
28+
<div
29+
className="border-b border-[var(--ds-border)]"
30+
style={{
2931
display: 'flex',
3032
justifyContent: 'space-between',
3133
alignItems: 'center',
3234
padding: '6px 12px',
3335
background: 'rgba(26, 27, 38, 0.95)',
34-
borderBottom: '1px solid rgba(255,255,255,0.06)',
3536
}}>
3637
<span style={{ fontFamily: 'var(--ds-font-mono)', fontSize: '0.7rem', color: '#a9b1d6' }}>{path}</span>
3738
<button

‎apps/cockpit/src/components/mobile-nav-overlay.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,7 @@ export function MobileNavOverlay({
7575
>
7676
{/* Header */}
7777
<header
78-
className="flex items-center justify-between px-4 py-3"
79-
style={{ borderBottom: '1px solid var(--ds-border)' }}
78+
className="flex items-center justify-between px-4 py-3 border-b border-[var(--ds-border)]"
8079
>
8180
<p
8281
className="font-mono text-xs font-semibold uppercase tracking-wide"

‎apps/cockpit/src/components/sidebar/cockpit-sidebar.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,11 @@ export function CockpitSidebar({
2121
return (
2222
<aside
2323
aria-label="Cockpit sidebar"
24-
className="flex flex-col gap-4 py-6 px-0 border-r bg-[var(--ds-surface-tinted)] overflow-y-auto"
24+
className="flex flex-col gap-4 py-6 px-0 border-r border-[var(--ds-border-strong)] bg-[var(--ds-surface-tinted)] overflow-y-auto"
2525
style={{
2626
position: 'sticky',
2727
top: 0,
2828
minHeight: '100vh',
29-
borderRightColor: 'var(--ds-border-strong)',
3029
}}
3130
>
3231
<header className="flex items-center justify-between px-4">

‎apps/cockpit/src/components/sidebar/navigation-groups.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,15 +76,15 @@ function ProductGroup({
7676
key={`${entry.product}-${entry.topic}`}
7777
href={toCockpitPath(entry)}
7878
aria-current={isActive ? 'page' : undefined}
79+
className={isActive ? 'border-l-2 border-[var(--ds-accent)]' : 'border-l-2 border-transparent'}
7980
style={{
8081
display: 'block',
81-
padding: isActive ? '5px 16px 5px 14px' : '5px 16px',
82+
padding: '5px 16px 5px 14px',
8283
margin: '0 8px',
8384
borderRadius: 6,
8485
fontSize: '0.825rem',
8586
color: isActive ? 'var(--ds-accent)' : 'var(--ds-text-secondary)',
8687
background: isActive ? 'var(--ds-accent-surface)' : 'transparent',
87-
borderLeft: isActive ? '2px solid var(--ds-accent)' : 'none',
8888
textDecoration: 'none',
8989
transition: 'all 0.15s',
9090
}}

0 commit comments

Comments
 (0)