{data.map((entry) => (
diff --git a/src/features/pipelines/components/LogViewer.tsx b/src/features/pipelines/components/LogViewer.tsx
index 74de1fc..92cc071 100644
--- a/src/features/pipelines/components/LogViewer.tsx
+++ b/src/features/pipelines/components/LogViewer.tsx
@@ -95,10 +95,10 @@ function decorate(chunk: LogChunk, showTimestamps: boolean): string {
/** Match highlighting in the shell's primary tint. */
const SEARCH_DECORATIONS = {
- matchBackground: '#5645d433',
- activeMatchBackground: '#5645d466',
- matchOverviewRuler: '#5645d4',
- activeMatchColorOverviewRuler: '#5645d4',
+ matchBackground: '#5645d455',
+ activeMatchBackground: '#5645d488',
+ matchOverviewRuler: '#6a59e8',
+ activeMatchColorOverviewRuler: '#6a59e8',
};
function formatBytesShort(bytes: number): string {
@@ -239,13 +239,13 @@ export function LogViewer({
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
scrollback: 10_000,
theme: {
- background: '#ffffff',
- foreground: '#37352f',
- cursor: '#ffffff',
- selectionBackground: '#5645d433',
- red: '#c62828',
- blue: '#0075de',
- magenta: '#5645d4',
+ background: '#000000',
+ foreground: '#e8e6e3',
+ cursor: '#e8e6e3',
+ selectionBackground: '#5645d455',
+ red: '#ef5350',
+ blue: '#4d9fff',
+ magenta: '#9d8cff',
},
});
const fit = new FitAddon();
diff --git a/src/features/pipelines/components/panels/PerformancePanel.tsx b/src/features/pipelines/components/panels/PerformancePanel.tsx
index 03db07a..3a2d69b 100644
--- a/src/features/pipelines/components/panels/PerformancePanel.tsx
+++ b/src/features/pipelines/components/panels/PerformancePanel.tsx
@@ -74,21 +74,23 @@ export function PerformancePanel({ jobs, events }: PerformancePanelProps) {
-
-
-
+
+
+
{/* Solid palette only: steel for waiting, primary for doing. */}
-
-
+
+
@@ -99,19 +101,21 @@ export function PerformancePanel({ jobs, events }: PerformancePanelProps) {
-
-
-
+
+
+
{/* 100% = one full core; multi-core jobs exceed it. */}
-
+
diff --git a/src/features/workflows/components/WorkflowEditor.tsx b/src/features/workflows/components/WorkflowEditor.tsx
index 6b42c73..8bfb9d9 100644
--- a/src/features/workflows/components/WorkflowEditor.tsx
+++ b/src/features/workflows/components/WorkflowEditor.tsx
@@ -14,27 +14,27 @@ interface WorkflowEditorProps {
const MARKER_OWNER = 'overup-validation';
-/** Editor colors from the shell palette — flat, light, no gradients. */
+/** Editor colors from the shell palette — flat, dark, no gradients. */
function defineTheme(monaco: Monaco) {
monaco.editor.defineTheme('overup', {
- base: 'vs',
+ base: 'vs-dark',
inherit: true,
rules: [
- { token: 'type', foreground: '5645d4' },
- { token: 'string.yaml', foreground: '0075de' },
- { token: 'number', foreground: '5645d4' },
- { token: 'comment', foreground: '787671' },
- { token: 'keyword', foreground: '5645d4' },
+ { token: 'type', foreground: '9d8cff' },
+ { token: 'string.yaml', foreground: '4d9fff' },
+ { token: 'number', foreground: '9d8cff' },
+ { token: 'comment', foreground: '8f8d88' },
+ { token: 'keyword', foreground: '9d8cff' },
],
colors: {
- 'editor.background': '#ffffff',
- 'editor.foreground': '#37352f',
- 'editor.lineHighlightBackground': '#f6f5f4',
- 'editorLineNumber.foreground': '#787671',
- 'editorLineNumber.activeForeground': '#37352f',
- 'editorIndentGuide.background': '#f6f5f4',
- 'editor.selectionBackground': '#5645d426',
- 'focusBorder': '#5645d4',
+ 'editor.background': '#000000',
+ 'editor.foreground': '#e8e6e3',
+ 'editor.lineHighlightBackground': '#161614',
+ 'editorLineNumber.foreground': '#8f8d88',
+ 'editorLineNumber.activeForeground': '#e8e6e3',
+ 'editorIndentGuide.background': '#26251f',
+ 'editor.selectionBackground': '#6a59e845',
+ 'focusBorder': '#6a59e8',
},
});
}
diff --git a/src/index.css b/src/index.css
index c1b1483..40ba8cc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,6 +3,10 @@
@tailwind utilities;
@layer base {
+ :root {
+ color-scheme: dark;
+ }
+
html,
body,
#root {
@@ -12,4 +16,15 @@
body {
@apply bg-canvas font-sans text-charcoal antialiased;
}
+
+ /* Focus rings offset against the black canvas, not preflight's white default. */
+ *,
+ ::before,
+ ::after {
+ --tw-ring-offset-color: theme('colors.canvas');
+ }
+
+ ::selection {
+ @apply bg-primary/40 text-charcoal;
+ }
}
diff --git a/tailwind.config.js b/tailwind.config.js
index c320382..904e9ec 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,15 +9,15 @@ module.exports = {
transparent: 'transparent',
current: 'currentColor',
white: '#ffffff',
- canvas: '#ffffff',
- surface: '#f6f5f4',
- primary: '#5645d4',
- purple: '#5645d4',
- navy: '#0a1530',
- link: '#0075de',
- charcoal: '#37352f',
- steel: '#787671',
- danger: '#c62828',
+ canvas: '#000000',
+ surface: '#161614',
+ primary: '#6a59e8',
+ purple: '#6a59e8',
+ navy: '#000000',
+ link: '#4d9fff',
+ charcoal: '#e8e6e3',
+ steel: '#8f8d88',
+ danger: '#e5484d',
},
// Strict design rule: every corner is 6px. `full` is reserved for avatars.
borderRadius: {