cameleer/cameleer-server
1
0
Fork 0
Code Issues 42 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: UI consistency — shared CSS, design system colors, no inline styles
All checks were successful
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Successful in 1m22s
Details
CI / docker (push) Successful in 1m9s
Details
CI / deploy-feature (push) Has been skipped
Details
CI / deploy (push) Successful in 36s
Details

Browse Source 
Phase 1: Extract 6 shared CSS modules (table-section, log-panel,
rate-colors, refresh-indicator, chart-card, section-card) eliminating
~135 duplicate class definitions across 11 files.

Phase 2: Replace all hardcoded hex colors in CSS modules with design
system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4
undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised).

Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG
components with var() CSS custom properties. Fix Dashboard.tsx color prop.

Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage,
OidcCallback (previously 100% inline). Extract shared PageLoader
component (replaces 3 copy-pasted spinner patterns). Move AppsTab
static inline styles to CSS classes. Extract LayoutShell StarredList styles.

58 files changed, net -219 lines.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 14:55:54 +02:00
parent bfed8174ca
commit ff62a34d89
58 changed files with 770 additions and 989 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ui/src/components/ProcessDiagram/CompoundNode.tsx
View File

@@ -79,8 +79,8 @@ export function CompoundNode({
// Color: own status first, then infer from descendants (for path containers like when/otherwise)
const effectiveColor = isGated ? 'var(--amber)'
: isFailed || descendantFailed ? '#C0392B'
: isCompleted || executedDescendant ? '#3D7C47'
: isFailed || descendantFailed ? 'var(--error)'
: isCompleted || executedDescendant ? 'var(--success)'
: color;
// Dim compound when overlay is active but neither the compound nor any
@@ -99,7 +99,7 @@ export function CompoundNode({
// _CB_FALLBACK: section styling with EIP purple
if (node.type === '_CB_FALLBACK') {
const fallbackColor = '#7C3AED'; // EIP purple
const fallbackColor = 'var(--purple)';
return (
<g data-node-id={node.id} transform={`translate(${x}, ${y})`} opacity={isSkipped ? 0.35 : undefined}>
<rect x={0} y={0} width={w} height={h} rx={CORNER_RADIUS}
@@ -140,7 +140,7 @@ export function CompoundNode({
}
// Default compound rendering (DO_TRY, EIP_CHOICE, EIP_FILTER, EIP_IDEMPOTENT_CONSUMER, etc.)
const containerFill = isGated ? 'var(--amber-bg)' : 'white';
const containerFill = isGated ? 'var(--amber-bg)' : 'var(--bg-surface)';
return (
<g data-node-id={node.id} transform={`translate(${x}, ${y})`} opacity={isSkipped ? 0.35 : undefined}>
{/* Container body */}
@@ -163,15 +163,15 @@ export function CompoundNode({
<g transform={`translate(6, ${HEADER_HEIGHT / 2 - 5}) scale(0.417)`}>
{iconForType(node.type).map((el: IconElement, i: number) =>
'd' in el
? <path key={i} d={el.d} fill="none" stroke="white" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
: <circle key={i} cx={el.cx} cy={el.cy} r={el.r} fill="none" stroke="white" strokeWidth={2} />
? <path key={i} d={el.d} fill="none" stroke="var(--text-inverse)" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
: <circle key={i} cx={el.cx} cy={el.cy} r={el.r} fill="none" stroke="var(--text-inverse)" strokeWidth={2} />
)}
</g>
{/* Header label (centered) */}
<text
x={w / 2}
y={HEADER_HEIGHT / 2 + 4}
fill="white"
fill="var(--text-inverse)"
fontSize={10}
fontWeight={600}
textAnchor="middle"

8
ui/src/components/ProcessDiagram/ConfigBadge.tsx
View File

@@ -3,8 +3,8 @@ import type { NodeConfig } from './types';
const BADGE_SIZE = 18;
const BADGE_GAP = 4;
const TRACE_COLOR = '#1A7F8E'; // teal
const TAP_COLOR = '#7C3AED'; // purple
const TRACE_COLOR = 'var(--running)';
const TAP_COLOR = 'var(--purple)';
interface ConfigBadgeProps {
nodeWidth: number;
@@ -42,7 +42,7 @@ export function ConfigBadge({ nodeWidth, config, hasTraceData }: ConfigBadgeProp
badges.push(
<g key="tap" transform={`translate(${xOffset}, ${-BADGE_SIZE - 4})`}>
<circle cx={cx} cy={cy} r={BADGE_SIZE / 2} fill={TAP_COLOR} />
<g transform="translate(4, 4)" stroke="white" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
<g transform="translate(4, 4)" stroke="var(--text-inverse)" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
<path d="M5 1 C5 1 2 4.5 2 6.5a3 3 0 006 0C8 4.5 5 1 5 1z" />
</g>
</g>,
@@ -70,7 +70,7 @@ export function ConfigBadge({ nodeWidth, config, hasTraceData }: ConfigBadgeProp
</circle>
<circle cx={cx} cy={cy} r={r} fill={TRACE_COLOR} />
<g transform={`translate(${(BADGE_SIZE - 14) / 2}, ${(BADGE_SIZE - 14) / 2})`}>
<FootprintsIcon color="white" size={14} />
<FootprintsIcon color="var(--text-inverse)" size={14} />
</g>
</g>,
);

4
ui/src/components/ProcessDiagram/DiagramEdge.tsx
View File

@@ -23,7 +23,7 @@ export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps)
<path
d={d}
fill="none"
stroke={traversed === true ? '#3D7C47' : '#9CA3AF'}
stroke={traversed === true ? 'var(--success)' : 'var(--text-muted)'}
strokeWidth={traversed === true ? 1.5 : traversed === false ? 1 : 1.5}
strokeDasharray={traversed === false ? '4,3' : undefined}
markerEnd={traversed === true ? 'url(#arrowhead-green)' : traversed === false ? undefined : 'url(#arrowhead)'}
@@ -32,7 +32,7 @@ export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps)
<text
x={(pts[0][0] + pts[pts.length - 1][0]) / 2}
y={(pts[0][1] + pts[pts.length - 1][1]) / 2 + offsetY - 6}
fill="#9C9184"
fill="var(--text-muted)"
fontSize={9}
textAnchor="middle"
>

62
ui/src/components/ProcessDiagram/DiagramNode.tsx
View File

@@ -61,23 +61,27 @@ export function DiagramNode({
const isSkipped = overlayActive && !executionState;
// Colors based on execution state (heatmap takes priority when no execution overlay)
let cardFill = isHovered ? '#F5F0EA' : 'white';
let borderStroke = isHovered || isSelected ? color : '#E4DFD8';
let cardFill = isHovered ? 'var(--bg-hover)' : 'var(--bg-surface)';
let borderStroke = isHovered || isSelected ? color : 'var(--border-subtle)';
let borderWidth = isHovered || isSelected ? 1.5 : 1;
let topBarColor = color;
let labelColor = '#1A1612';
let labelColor = 'var(--text-primary)';
if (isCompleted) {
cardFill = isHovered ? '#E4F5E6' : '#F0F9F1';
borderStroke = '#3D7C47';
cardFill = isHovered
? 'color-mix(in srgb, var(--success) 15%, var(--bg-surface))'
: 'color-mix(in srgb, var(--success) 10%, var(--bg-surface))';
borderStroke = 'var(--success)';
borderWidth = 1.5;
topBarColor = '#3D7C47';
topBarColor = 'var(--success)';
} else if (isFailed) {
cardFill = isHovered ? '#F9E4E1' : '#FDF2F0';
borderStroke = '#C0392B';
cardFill = isHovered
? 'color-mix(in srgb, var(--error) 15%, var(--bg-surface))'
: 'color-mix(in srgb, var(--error) 10%, var(--bg-surface))';
borderStroke = 'var(--error)';
borderWidth = 2;
topBarColor = '#C0392B';
labelColor = '#C0392B';
topBarColor = 'var(--error)';
labelColor = 'var(--error)';
} else if (heatmapEntry && !overlayActive) {
cardFill = heatmapColor(heatmapEntry.pctOfRoute);
borderStroke = heatmapBorderColor(heatmapEntry.pctOfRoute);
@@ -85,7 +89,7 @@ export function DiagramNode({
topBarColor = heatmapBorderColor(heatmapEntry.pctOfRoute);
}
const statusColor = isCompleted ? '#3D7C47' : isFailed ? '#C0392B' : undefined;
const statusColor = isCompleted ? 'var(--success)' : isFailed ? 'var(--error)' : undefined;
return (
<g
@@ -107,7 +111,7 @@ export function DiagramNode({
height={h + 4}
rx={CORNER_RADIUS + 2}
fill="none"
stroke="#C6820E"
stroke="var(--amber)"
strokeWidth={2.5}
/>
)}
@@ -150,11 +154,11 @@ export function DiagramNode({
{typeName}
</text>
{detail && detail !== typeName && (
<text x={TEXT_LEFT} y={TOP_BAR_HEIGHT + 24} fill={isFailed ? '#C0392B' : '#5C5347'} fontSize={10}>
<text x={TEXT_LEFT} y={TOP_BAR_HEIGHT + 24} fill={isFailed ? 'var(--error)' : 'var(--text-secondary)'} fontSize={10}>
{detail}
</text>
)}
<text x={TEXT_LEFT} y={TOP_BAR_HEIGHT + (detail && detail !== typeName ? 35 : 24)} fill="#1A7F8E" fontSize={9} fontStyle="italic">
<text x={TEXT_LEFT} y={TOP_BAR_HEIGHT + (detail && detail !== typeName ? 35 : 24)} fill="var(--running)" fontSize={9} fontStyle="italic">
→ {resolvedUri.split('?')[0]}
</text>
</>
@@ -164,7 +168,7 @@ export function DiagramNode({
{typeName}
</text>
{detail && detail !== typeName && (
<text x={TEXT_LEFT} y={h / 2 + 12} fill={isFailed ? '#C0392B' : '#5C5347'} fontSize={10}>
<text x={TEXT_LEFT} y={h / 2 + 12} fill={isFailed ? 'var(--error)' : 'var(--text-secondary)'} fontSize={10}>
{detail}
</text>
)}
@@ -189,24 +193,24 @@ export function DiagramNode({
if (isCompleted) {
badges.push(
<g key="status">
<circle cx={statusCx} cy={cy} r={BADGE_R} fill="#3D7C47" />
<path d={`M${statusCx - 3} ${cy} l2 2 4-4`} fill="none" stroke="white" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
<circle cx={statusCx} cy={cy} r={BADGE_R} fill="var(--success)" />
<path d={`M${statusCx - 3} ${cy} l2 2 4-4`} fill="none" stroke="var(--text-inverse)" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
</g>
);
slot++;
} else if (isFailed) {
badges.push(
<g key="status">
<circle cx={statusCx} cy={cy} r={BADGE_R} fill="none" stroke="#C0392B" strokeWidth={2} opacity={0.5}>
<circle cx={statusCx} cy={cy} r={BADGE_R} fill="none" stroke="var(--error)" strokeWidth={2} opacity={0.5}>
<animate attributeName="r" values="6;14" dur="1.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.5;0" dur="1.5s" repeatCount="indefinite" />
</circle>
<circle cx={statusCx} cy={cy} r={BADGE_R} fill="none" stroke="#C0392B" strokeWidth={2} opacity={0.5}>
<circle cx={statusCx} cy={cy} r={BADGE_R} fill="none" stroke="var(--error)" strokeWidth={2} opacity={0.5}>
<animate attributeName="r" values="6;14" dur="1.5s" begin="0.75s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.5;0" dur="1.5s" begin="0.75s" repeatCount="indefinite" />
</circle>
<circle cx={statusCx} cy={cy} r={BADGE_R} fill="#C0392B" />
<path d={`M${statusCx} ${cy - 3} v4 M${statusCx} ${cy + 2.5} v0.5`} fill="none" stroke="white" strokeWidth={1.5} strokeLinecap="round" />
<circle cx={statusCx} cy={cy} r={BADGE_R} fill="var(--error)" />
<path d={`M${statusCx} ${cy - 3} v4 M${statusCx} ${cy + 2.5} v0.5`} fill="none" stroke="var(--text-inverse)" strokeWidth={1.5} strokeLinecap="round" />
</g>
);
slot++;
@@ -217,8 +221,8 @@ export function DiagramNode({
const tapCx = statusCx - slot * (BADGE_D + BADGE_GAP);
badges.push(
<g key="tap">
<circle cx={tapCx} cy={cy} r={BADGE_R} fill="#7C3AED" />
<g transform={`translate(${tapCx - 5}, ${cy - 5})`} stroke="white" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
<circle cx={tapCx} cy={cy} r={BADGE_R} fill="var(--purple)" />
<g transform={`translate(${tapCx - 5}, ${cy - 5})`} stroke="var(--text-inverse)" strokeWidth={1.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
<path d="M5 1 C5 1 2 4.5 2 6.5a3 3 0 006 0C8 4.5 5 1 5 1z" />
</g>
</g>
@@ -235,18 +239,18 @@ export function DiagramNode({
<g key="trace">
{tracePulse && (
<>
<circle cx={traceCx} cy={cy} r={BADGE_R} fill="none" stroke="#1A7F8E" strokeWidth={2} opacity={0.5}>
<circle cx={traceCx} cy={cy} r={BADGE_R} fill="none" stroke="var(--running)" strokeWidth={2} opacity={0.5}>
<animate attributeName="r" values={`${BADGE_R};${BADGE_R + 8}`} dur="1.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.5;0" dur="1.5s" repeatCount="indefinite" />
</circle>
<circle cx={traceCx} cy={cy} r={BADGE_R} fill="none" stroke="#1A7F8E" strokeWidth={2} opacity={0.5}>
<circle cx={traceCx} cy={cy} r={BADGE_R} fill="none" stroke="var(--running)" strokeWidth={2} opacity={0.5}>
<animate attributeName="r" values={`${BADGE_R};${BADGE_R + 8}`} dur="1.5s" begin="0.75s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.5;0" dur="1.5s" begin="0.75s" repeatCount="indefinite" />
</circle>
</>
)}
<circle cx={traceCx} cy={cy} r={BADGE_R} fill={traceHasData ? '#1A7F8E' : '#1A7F8E'} opacity={traceHasData ? 1 : 0.2} />
<g transform={`translate(${traceCx - 5}, ${cy - 5}) scale(${10/24})`} stroke={traceHasData ? 'white' : '#1A7F8E'} strokeWidth={2.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
<circle cx={traceCx} cy={cy} r={BADGE_R} fill="var(--running)" opacity={traceHasData ? 1 : 0.2} />
<g transform={`translate(${traceCx - 5}, ${cy - 5}) scale(${10/24})`} stroke={traceHasData ? 'var(--text-inverse)' : 'var(--running)'} strokeWidth={2.4} fill="none" strokeLinecap="round" strokeLinejoin="round">
<path d="M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z" />
<path d="M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z" />
<path d="M16 17h4" />
@@ -292,9 +296,9 @@ export function DiagramNode({
<g transform={`translate(4, ${h - 14})`}>
<path
d="M2 2 v5 a3 3 0 003 3 h5"
fill="none" stroke="#C0392B" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"
fill="none" stroke="var(--error)" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"
/>
<path d="M8 8 l2 2 -2 2" fill="none" stroke="#C0392B" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
<path d="M8 8 l2 2 -2 2" fill="none" stroke="var(--error)" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
</g>
)}
</g>

4
ui/src/components/ProcessDiagram/ErrorSection.tsx
View File

@@ -32,8 +32,8 @@ interface ErrorSectionProps {
}
const VARIANT_COLORS: Record<string, string> = {
error: '#C0392B',
completion: '#1A7F8E',
error: 'var(--error)',
completion: 'var(--running)',
};
export function ErrorSection({

8
ui/src/components/ProcessDiagram/Minimap.tsx
View File

@@ -147,12 +147,12 @@ function nodeColor(
): { fill: string; opacity: number } {
if (!overlay) return { fill: colorForType(node.type), opacity: 0.7 };
const state = node.id ? overlay.get(node.id) : undefined;
if (state?.status === 'COMPLETED') return { fill: '#3D7C47', opacity: 0.85 };
if (state?.status === 'FAILED') return { fill: '#C0392B', opacity: 0.85 };
if (state?.status === 'COMPLETED') return { fill: 'var(--success)', opacity: 0.85 };
if (state?.status === 'FAILED') return { fill: 'var(--error)', opacity: 0.85 };
// ENDPOINT is always traversed when overlay is active (route entry point)
if (node.type === 'ENDPOINT' && overlay.size > 0) return { fill: '#3D7C47', opacity: 0.85 };
if (node.type === 'ENDPOINT' && overlay.size > 0) return { fill: 'var(--success)', opacity: 0.85 };
// Skipped (overlay active but node not executed)
return { fill: '#9CA3AF', opacity: 0.35 };
return { fill: 'var(--text-muted)', opacity: 0.35 };
}
function renderMinimapNodes(

4
ui/src/components/ProcessDiagram/NodeToolbar.tsx
View File

@@ -4,7 +4,7 @@ import type { NodeAction, NodeConfig } from './types';
import styles from './ProcessDiagram.module.css';
const HIDE_DELAY = 150;
const TRACE_ACTIVE_COLOR = '#1A7F8E';
const TRACE_ACTIVE_COLOR = 'var(--running)';
interface NodeToolbarProps {
nodeId: string;
@@ -50,7 +50,7 @@ export function NodeToolbar({
className={`${styles.nodeToolbarBtn} ${tapActive ? styles.nodeToolbarBtnActive : ''}`}
title={tapActive ? 'Edit tap' : 'Configure tap'}
onClick={(e) => { e.stopPropagation(); onAction(nodeId, 'configure-tap'); }}
style={tapActive ? { color: '#7C3AED' } : undefined}
style={tapActive ? { color: 'var(--purple)' } : undefined}
>
<Droplets size={14} />
</button>

72
ui/src/components/ProcessDiagram/ProcessDiagram.module.css
View File

@@ -4,9 +4,9 @@
height: 100%;
min-height: 300px;
overflow: hidden;
background: var(--bg-surface, #FFFFFF);
border: 1px solid var(--border, #E4DFD8);
border-radius: var(--radius-md, 8px);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.svg {
@@ -25,7 +25,7 @@
width: 100%;
height: 100%;
min-height: 300px;
color: var(--text-muted, #9C9184);
color: var(--text-muted);
font-size: 14px;
}
@@ -36,7 +36,7 @@
width: 100%;
height: 100%;
min-height: 300px;
color: var(--error, #C0392B);
color: var(--error);
font-size: 14px;
}
@@ -47,11 +47,11 @@
display: flex;
align-items: center;
gap: 4px;
background: var(--bg-surface, #FFFFFF);
border: 1px solid var(--border, #E4DFD8);
border-radius: var(--radius-sm, 5px);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px;
box-shadow: var(--shadow-md, 0 2px 8px rgba(44, 37, 32, 0.08));
box-shadow: var(--shadow-md);
}
.zoomBtn {
@@ -62,19 +62,19 @@
height: 28px;
border: none;
background: transparent;
color: var(--text-primary, #1A1612);
color: var(--text-primary);
font-size: 16px;
cursor: pointer;
border-radius: var(--radius-sm, 5px);
border-radius: var(--radius-sm);
}
.zoomBtn:hover {
background: var(--bg-hover, #F5F0EA);
background: var(--bg-hover);
}
.zoomLevel {
font-size: 12px;
color: var(--text-muted, #9C9184);
color: var(--text-muted);
min-width: 36px;
text-align: center;
font-variant-numeric: tabular-nums;
@@ -87,10 +87,10 @@
display: flex;
align-items: center;
padding: 4px 10px;
background: var(--bg-surface, #FFFFFF);
border: 1px solid var(--border, #E4DFD8);
border-radius: var(--radius-sm, 5px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(44, 37, 32, 0.06));
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
z-index: 10;
font-size: 12px;
}
@@ -102,13 +102,13 @@
.breadcrumbSep {
margin: 0 6px;
color: var(--text-muted, #9C9184);
color: var(--text-muted);
}
.breadcrumbLink {
background: none;
border: none;
color: var(--running, #1A7F8E);
color: var(--running);
cursor: pointer;
padding: 0;
font-size: 12px;
@@ -120,7 +120,7 @@
}
.breadcrumbCurrent {
color: var(--text-primary, #1A1612);
color: var(--text-primary);
font-weight: 600;
}
@@ -128,9 +128,9 @@
position: absolute;
bottom: 52px;
right: 12px;
border: 1px solid var(--border, #E4DFD8);
border-radius: var(--radius-sm, 5px);
box-shadow: var(--shadow-md, 0 2px 8px rgba(44, 37, 32, 0.08));
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
overflow: hidden;
z-index: 5;
}
@@ -141,10 +141,10 @@
align-items: center;
gap: 2px;
padding: 3px 4px;
background: var(--bg-surface, #FFFFFF);
border: 1px solid var(--border, #E4DFD8);
border-radius: var(--radius-sm, 5px);
box-shadow: var(--shadow-lg, 0 4px 16px rgba(44, 37, 32, 0.10));
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
transform: translate(-50%, -100%);
margin-top: -6px;
z-index: 10;
@@ -159,31 +159,31 @@
height: 26px;
border: none;
background: transparent;
color: var(--text-secondary, #5C5347);
color: var(--text-secondary);
font-size: 12px;
cursor: pointer;
border-radius: var(--radius-sm, 5px);
border-radius: var(--radius-sm);
padding: 0;
}
.nodeToolbarBtn:hover {
background: var(--bg-hover, #F5F0EA);
color: var(--text-primary, #1A1612);
background: var(--bg-hover);
color: var(--text-primary);
}
.nodeToolbarBtnActive {
background: var(--bg-hover, #F5F0EA);
background: var(--bg-hover);
}
.iterationStepper {
display: flex;
align-items: center;
gap: 2px;
background: rgba(255, 255, 255, 0.15);
background: color-mix(in srgb, var(--bg-surface) 15%, transparent);
border-radius: 3px;
padding: 1px 3px;
font-size: 12px;
color: white;
color: var(--text-primary);
font-family: inherit;
}
@@ -191,8 +191,8 @@
width: 16px;
height: 16px;
border: none;
background: rgba(255, 255, 255, 0.2);
color: white;
background: color-mix(in srgb, var(--bg-surface) 20%, transparent);
color: var(--text-primary);
border-radius: 2px;
cursor: pointer;
font-size: 12px;

4
ui/src/components/ProcessDiagram/ProcessDiagram.tsx
View File

@@ -294,7 +294,7 @@ export function ProcessDiagram({
refY="3"
orient="auto"
>
<polygon points="0 0, 8 3, 0 6" fill="#9CA3AF" />
<polygon points="0 0, 8 3, 0 6" fill="var(--text-muted)" />
</marker>
<marker
id="arrowhead-green"
@@ -304,7 +304,7 @@ export function ProcessDiagram({
refY="3"
orient="auto"
>
<polygon points="0 0, 8 3, 0 6" fill="#3D7C47" />
<polygon points="0 0, 8 3, 0 6" fill="var(--success)" />
</marker>
</defs>