Skip to content

Commit cb752c8

Browse files
bloveblove
authored
feat(cockpit): add design tokens CSS, Tailwind v4 to Angular apps, fix sidebar and code overflow (#16)
- Add tokens.css to @cacheplane/design-tokens with all 29 --ds-* CSS custom properties - Replace hardcoded dark theme in all 14 Angular example apps with design-token-based light theme - Add Tailwind v4 to all Angular apps via @import "tailwindcss" + @theme block - Remove overview entries from cockpit sidebar navigation - Fix code block horizontal overflow in docs mode with overflow-x: auto
1 parent 4f4d2a1 commit cb752c8

20 files changed

Lines changed: 1002 additions & 101 deletions

File tree

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ pre.shiki {
131131
border-radius: 0.5rem;
132132
overflow: hidden;
133133
margin: 0.75rem 0;
134+
max-width: 100%;
134135
}
135136
.doc-codeblock__header {
136137
display: flex;
@@ -160,8 +161,8 @@ pre.shiki {
160161
cursor: pointer;
161162
}
162163
.doc-codeblock__copy:hover { color: #e0e0e0; }
163-
.doc-codeblock pre.shiki { margin: 0; border-radius: 0; border: none; }
164-
.code-mode-block pre.shiki { margin: 0; border-radius: 0; border: none; }
164+
.doc-codeblock pre.shiki { margin: 0; border-radius: 0; border: none; overflow-x: auto; }
165+
.code-mode-block pre.shiki { margin: 0; border-radius: 0; border: none; overflow-x: auto; }
165166

166167
.doc-prompt {
167168
background: rgba(168, 85, 247, 0.04);

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,9 @@ function ProductGroup({
7575
{open && (
7676
<nav style={{ display: 'flex', flexDirection: 'column', marginTop: 4 }}>
7777
{product.sections.flatMap((section) =>
78-
section.entries.map((entry) => {
78+
section.entries
79+
.filter((entry) => entry.topic !== 'overview')
80+
.map((entry) => {
7981
const isActive =
8082
entry.product === currentEntry.product &&
8183
entry.section === currentEntry.section &&

‎cockpit/deep-agents/filesystem/angular/src/styles.css‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
1-
*,
2-
*::before,
3-
*::after {
4-
box-sizing: border-box;
1+
@import "../../../../../libs/design-tokens/src/lib/tokens.css";
2+
@import "tailwindcss";
3+
4+
@theme {
5+
--color-bg: var(--ds-bg);
6+
--color-surface: #ffffff;
7+
--color-accent: var(--ds-accent);
8+
--color-accent-light: var(--ds-accent-light);
9+
--color-text-primary: var(--ds-text-primary);
10+
--color-text-secondary: var(--ds-text-secondary);
11+
--color-text-muted: var(--ds-text-muted);
12+
--color-border: var(--ds-accent-border);
13+
--color-error: #ef4444;
14+
--color-success: #22c55e;
15+
--font-sans: var(--ds-font-sans);
16+
--font-serif: var(--ds-font-serif);
17+
--font-mono: var(--ds-font-mono);
518
}
619

20+
*, *::before, *::after { box-sizing: border-box; }
21+
722
body {
823
margin: 0;
9-
font-family: system-ui, -apple-system, sans-serif;
10-
background: #08111f;
11-
color: #edf3ff;
24+
font-family: var(--ds-font-sans);
25+
background: var(--ds-bg);
26+
color: var(--ds-text-primary);
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
1229
}

‎cockpit/deep-agents/memory/angular/src/styles.css‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
1-
*,
2-
*::before,
3-
*::after {
4-
box-sizing: border-box;
1+
@import "../../../../../libs/design-tokens/src/lib/tokens.css";
2+
@import "tailwindcss";
3+
4+
@theme {
5+
--color-bg: var(--ds-bg);
6+
--color-surface: #ffffff;
7+
--color-accent: var(--ds-accent);
8+
--color-accent-light: var(--ds-accent-light);
9+
--color-text-primary: var(--ds-text-primary);
10+
--color-text-secondary: var(--ds-text-secondary);
11+
--color-text-muted: var(--ds-text-muted);
12+
--color-border: var(--ds-accent-border);
13+
--color-error: #ef4444;
14+
--color-success: #22c55e;
15+
--font-sans: var(--ds-font-sans);
16+
--font-serif: var(--ds-font-serif);
17+
--font-mono: var(--ds-font-mono);
518
}
619

20+
*, *::before, *::after { box-sizing: border-box; }
21+
722
body {
823
margin: 0;
9-
font-family: system-ui, -apple-system, sans-serif;
10-
background: #08111f;
11-
color: #edf3ff;
24+
font-family: var(--ds-font-sans);
25+
background: var(--ds-bg);
26+
color: var(--ds-text-primary);
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
1229
}

‎cockpit/deep-agents/planning/angular/src/styles.css‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
1-
*,
2-
*::before,
3-
*::after {
4-
box-sizing: border-box;
1+
@import "../../../../../libs/design-tokens/src/lib/tokens.css";
2+
@import "tailwindcss";
3+
4+
@theme {
5+
--color-bg: var(--ds-bg);
6+
--color-surface: #ffffff;
7+
--color-accent: var(--ds-accent);
8+
--color-accent-light: var(--ds-accent-light);
9+
--color-text-primary: var(--ds-text-primary);
10+
--color-text-secondary: var(--ds-text-secondary);
11+
--color-text-muted: var(--ds-text-muted);
12+
--color-border: var(--ds-accent-border);
13+
--color-error: #ef4444;
14+
--color-success: #22c55e;
15+
--font-sans: var(--ds-font-sans);
16+
--font-serif: var(--ds-font-serif);
17+
--font-mono: var(--ds-font-mono);
518
}
619

20+
*, *::before, *::after { box-sizing: border-box; }
21+
722
body {
823
margin: 0;
9-
font-family: system-ui, -apple-system, sans-serif;
10-
background: #08111f;
11-
color: #edf3ff;
24+
font-family: var(--ds-font-sans);
25+
background: var(--ds-bg);
26+
color: var(--ds-text-primary);
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
1229
}

‎cockpit/deep-agents/sandboxes/angular/src/styles.css‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
1-
*,
2-
*::before,
3-
*::after {
4-
box-sizing: border-box;
1+
@import "../../../../../libs/design-tokens/src/lib/tokens.css";
2+
@import "tailwindcss";
3+
4+
@theme {
5+
--color-bg: var(--ds-bg);
6+
--color-surface: #ffffff;
7+
--color-accent: var(--ds-accent);
8+
--color-accent-light: var(--ds-accent-light);
9+
--color-text-primary: var(--ds-text-primary);
10+
--color-text-secondary: var(--ds-text-secondary);
11+
--color-text-muted: var(--ds-text-muted);
12+
--color-border: var(--ds-accent-border);
13+
--color-error: #ef4444;
14+
--color-success: #22c55e;
15+
--font-sans: var(--ds-font-sans);
16+
--font-serif: var(--ds-font-serif);
17+
--font-mono: var(--ds-font-mono);
518
}
619

20+
*, *::before, *::after { box-sizing: border-box; }
21+
722
body {
823
margin: 0;
9-
font-family: system-ui, -apple-system, sans-serif;
10-
background: #08111f;
11-
color: #edf3ff;
24+
font-family: var(--ds-font-sans);
25+
background: var(--ds-bg);
26+
color: var(--ds-text-primary);
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
1229
}

‎cockpit/deep-agents/skills/angular/src/styles.css‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
1-
*,
2-
*::before,
3-
*::after {
4-
box-sizing: border-box;
1+
@import "../../../../../libs/design-tokens/src/lib/tokens.css";
2+
@import "tailwindcss";
3+
4+
@theme {
5+
--color-bg: var(--ds-bg);
6+
--color-surface: #ffffff;
7+
--color-accent: var(--ds-accent);
8+
--color-accent-light: var(--ds-accent-light);
9+
--color-text-primary: var(--ds-text-primary);
10+
--color-text-secondary: var(--ds-text-secondary);
11+
--color-text-muted: var(--ds-text-muted);
12+
--color-border: var(--ds-accent-border);
13+
--color-error: #ef4444;
14+
--color-success: #22c55e;
15+
--font-sans: var(--ds-font-sans);
16+
--font-serif: var(--ds-font-serif);
17+
--font-mono: var(--ds-font-mono);
518
}
619

20+
*, *::before, *::after { box-sizing: border-box; }
21+
722
body {
823
margin: 0;
9-
font-family: system-ui, -apple-system, sans-serif;
10-
background: #08111f;
11-
color: #edf3ff;
24+
font-family: var(--ds-font-sans);
25+
background: var(--ds-bg);
26+
color: var(--ds-text-primary);
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
1229
}

‎cockpit/deep-agents/subagents/angular/src/styles.css‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
1-
*,
2-
*::before,
3-
*::after {
4-
box-sizing: border-box;
1+
@import "../../../../../libs/design-tokens/src/lib/tokens.css";
2+
@import "tailwindcss";
3+
4+
@theme {
5+
--color-bg: var(--ds-bg);
6+
--color-surface: #ffffff;
7+
--color-accent: var(--ds-accent);
8+
--color-accent-light: var(--ds-accent-light);
9+
--color-text-primary: var(--ds-text-primary);
10+
--color-text-secondary: var(--ds-text-secondary);
11+
--color-text-muted: var(--ds-text-muted);
12+
--color-border: var(--ds-accent-border);
13+
--color-error: #ef4444;
14+
--color-success: #22c55e;
15+
--font-sans: var(--ds-font-sans);
16+
--font-serif: var(--ds-font-serif);
17+
--font-mono: var(--ds-font-mono);
518
}
619

20+
*, *::before, *::after { box-sizing: border-box; }
21+
722
body {
823
margin: 0;
9-
font-family: system-ui, -apple-system, sans-serif;
10-
background: #08111f;
11-
color: #edf3ff;
24+
font-family: var(--ds-font-sans);
25+
background: var(--ds-bg);
26+
color: var(--ds-text-primary);
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
1229
}

‎cockpit/langgraph/deployment-runtime/angular/src/styles.css‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
1-
*,
2-
*::before,
3-
*::after {
4-
box-sizing: border-box;
1+
@import "../../../../../libs/design-tokens/src/lib/tokens.css";
2+
@import "tailwindcss";
3+
4+
@theme {
5+
--color-bg: var(--ds-bg);
6+
--color-surface: #ffffff;
7+
--color-accent: var(--ds-accent);
8+
--color-accent-light: var(--ds-accent-light);
9+
--color-text-primary: var(--ds-text-primary);
10+
--color-text-secondary: var(--ds-text-secondary);
11+
--color-text-muted: var(--ds-text-muted);
12+
--color-border: var(--ds-accent-border);
13+
--color-error: #ef4444;
14+
--color-success: #22c55e;
15+
--font-sans: var(--ds-font-sans);
16+
--font-serif: var(--ds-font-serif);
17+
--font-mono: var(--ds-font-mono);
518
}
619

20+
*, *::before, *::after { box-sizing: border-box; }
21+
722
body {
823
margin: 0;
9-
font-family: system-ui, -apple-system, sans-serif;
10-
background: #08111f;
11-
color: #edf3ff;
24+
font-family: var(--ds-font-sans);
25+
background: var(--ds-bg);
26+
color: var(--ds-text-primary);
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
1229
}

‎cockpit/langgraph/durable-execution/angular/src/styles.css‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
1-
*,
2-
*::before,
3-
*::after {
4-
box-sizing: border-box;
1+
@import "../../../../../libs/design-tokens/src/lib/tokens.css";
2+
@import "tailwindcss";
3+
4+
@theme {
5+
--color-bg: var(--ds-bg);
6+
--color-surface: #ffffff;
7+
--color-accent: var(--ds-accent);
8+
--color-accent-light: var(--ds-accent-light);
9+
--color-text-primary: var(--ds-text-primary);
10+
--color-text-secondary: var(--ds-text-secondary);
11+
--color-text-muted: var(--ds-text-muted);
12+
--color-border: var(--ds-accent-border);
13+
--color-error: #ef4444;
14+
--color-success: #22c55e;
15+
--font-sans: var(--ds-font-sans);
16+
--font-serif: var(--ds-font-serif);
17+
--font-mono: var(--ds-font-mono);
518
}
619

20+
*, *::before, *::after { box-sizing: border-box; }
21+
722
body {
823
margin: 0;
9-
font-family: system-ui, -apple-system, sans-serif;
10-
background: #08111f;
11-
color: #edf3ff;
24+
font-family: var(--ds-font-sans);
25+
background: var(--ds-bg);
26+
color: var(--ds-text-primary);
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
1229
}

0 commit comments

Comments
 (0)