@oneuptime/common 11.4.0 → 11.4.1

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -45,8 +45,13 @@ export interface TelemetryViewerProps<T> {
   searchAttributeSuggestions?: Array<string> | undefined;
   searchValueSuggestions?: Record<string, Array<string>> | undefined;
   searchFieldAliasMap?: Record<string, string> | undefined;
+  /*
+   * Return `false` when the field is filtered via the raw search string
+   * rather than a chip — the search bar then keeps the token in the input
+   * and submits the search instead of clearing the token.
+   */
   onSearchFieldValueSelect?:
-    | ((fieldKey: string, value: string) => void)
+    | ((fieldKey: string, value: string) => boolean | void)
     | undefined;
   searchHelpRows?: Array<SearchHelpRow> | undefined;
   searchHelpCombinedExample?: string | undefined;
@@ -147,6 +152,7 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
             helpCombinedExample={props.searchHelpCombinedExample}
             isAttributesLoading={props.searchAttributesLoading}
             isValuesLoading={props.searchValuesLoading}
+            isLoading={props.isLoading}
           />
         </div>
 

package/UI/Components/TelemetryViewer/components/TelemetryHistogram.tsx

@@ -242,15 +242,21 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
               <XAxis
                 dataKey="time"
                 tickFormatter={formatTickTime}
-                tick={{ fontSize: 10, fill: "#9ca3af" }}
-                axisLine={{ stroke: "#e5e7eb" }}
+                tick={{
+                  fontSize: 10,
+                  fill: "var(--ou-chart-tick, #9ca3af)",
+                }}
+                axisLine={{ stroke: "var(--ou-chart-grid, #e5e7eb)" }}
                 tickLine={false}
                 minTickGap={40}
                 dy={4}
                 interval="preserveStartEnd"
               />
               <YAxis
-                tick={{ fontSize: 10, fill: "#9ca3af" }}
+                tick={{
+                  fontSize: 10,
+                  fill: "var(--ou-chart-tick, #9ca3af)",
+                }}
                 axisLine={false}
                 tickLine={false}
                 width={48}

package/UI/Components/TelemetryViewer/components/TelemetrySearchBar.tsx

@@ -31,8 +31,16 @@ export interface TelemetrySearchBarProps {
   attributeSuggestions?: Array<string> | undefined;
   // field → allowed value completions (resolved field keys).
   valueSuggestions?: Record<string, Array<string>> | undefined;
-  // Called when the user picks a concrete field:value chip from the dropdown.
-  onFieldValueSelect?: ((fieldKey: string, value: string) => void) | undefined;
+  /*
+   * Called when the user picks a concrete field:value chip from the dropdown.
+   * Return `false` when the field is NOT consumed as a chip (the parent
+   * filters it through the raw search string instead, e.g. `name:` in the
+   * metrics viewer) — the bar then keeps the token in the input and submits
+   * the search as-is rather than clearing the token.
+   */
+  onFieldValueSelect?:
+    | ((fieldKey: string, value: string) => boolean | void)
+    | undefined;
   // User-facing alias → backing field key (e.g. "service" -> "serviceId").
   fieldAliasMap?: Record<string, string> | undefined;
   placeholder?: string | undefined;
@@ -43,6 +51,8 @@ export interface TelemetrySearchBarProps {
   isAttributesLoading?: boolean | undefined;
   // Loading state for `@attribute:value` autocomplete (per-key value fetch).
   isValuesLoading?: boolean | undefined;
+  // Loading state for the telemetry results shown by the parent viewer.
+  isLoading?: boolean | undefined;
 }
 
 export interface TelemetrySearchBarRef {
@@ -198,7 +208,24 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
                   ? filteredSuggestions[0]!
                   : partialValue);
 
-              props.onFieldValueSelect(fieldPrefix, resolvedMatch);
+              const consumed: boolean | void = props.onFieldValueSelect(
+                fieldPrefix,
+                resolvedMatch,
+              );
+
+              if (consumed === false) {
+                /*
+                 * The parent filters this field through the raw search
+                 * string. Keep the token in the input and submit — clearing
+                 * it here would erase the filter the user just typed.
+                 */
+                props.onSubmit();
+                setShowSuggestions(false);
+                setShowHelp(false);
+                e.preventDefault();
+                return;
+              }
+
               const parts: Array<string> = props.value.split(/\s+/);
               parts.pop();
               const remaining: string = parts.join(" ");
@@ -256,12 +283,32 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
     const applySuggestion: (suggestion: string) => void = useCallback(
       (suggestion: string): void => {
         if (isValueMode) {
+          let consumed: boolean | void = undefined;
           if (props.onFieldValueSelect) {
-            props.onFieldValueSelect(fieldPrefix, suggestion);
+            consumed = props.onFieldValueSelect(fieldPrefix, suggestion);
           }
 
           const parts: Array<string> = props.value.split(/\s+/);
           parts.pop();
+
+          if (consumed === false) {
+            /*
+             * Not consumed as a chip — the parent filters this field via
+             * the raw search string, so complete the token in place
+             * instead of clearing it.
+             */
+            const completedToken: string = `${hasAtPrefix ? "@" : ""}${fieldPrefix}:${suggestion}`;
+            props.onChange(
+              parts.length > 0
+                ? `${parts.join(" ")} ${completedToken}`
+                : completedToken,
+            );
+            setShowSuggestions(false);
+            setShowHelp(false);
+            inputRef.current?.focus();
+            return;
+          }
+
           const remaining: string = parts.join(" ");
           props.onChange(remaining ? remaining + " " : "");
           setShowSuggestions(false);
@@ -337,6 +384,7 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
               ? "border-indigo-400 ring-2 ring-indigo-100"
               : "border-gray-200 hover:border-gray-300"
           }`}
+          aria-busy={props.isLoading || false}
         >
           <Icon
             icon={IconProp.Search}
@@ -367,6 +415,16 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
             spellCheck={false}
             autoComplete="off"
           />
+          {props.isLoading && (
+            <div
+              className="flex-none text-indigo-500"
+              role="status"
+              aria-label="Loading results"
+              title="Loading results..."
+            >
+              <Icon icon={IconProp.Spinner} className="h-4 w-4 animate-spin" />
+            </div>
+          )}
           {props.value.length > 0 && (
             <button
               type="button"

package/UI/Components/Workflow/Component.tsx

@@ -36,8 +36,9 @@ const getCategoryColors: (
 ): CategoryColorScheme => {
   if (componentType === ComponentType.Trigger) {
     return {
-      bg: "#fefce8",
-      border: "#fde68a",
+      bg: "color-mix(in srgb, #f59e0b 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #f59e0b 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #f59e0b, #d97706)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -52,8 +53,9 @@ const getCategoryColors: (
 
   if (lowerCategory.includes("condition") || lowerCategory.includes("logic")) {
     return {
-      bg: "#faf5ff",
-      border: "#e9d5ff",
+      bg: "color-mix(in srgb, #a855f7 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #a855f7 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #a855f7, #7c3aed)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -66,8 +68,9 @@ const getCategoryColors: (
 
   if (lowerCategory.includes("api") || lowerCategory.includes("webhook")) {
     return {
-      bg: "#eff6ff",
-      border: "#bfdbfe",
+      bg: "color-mix(in srgb, #3b82f6 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #3b82f6 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #3b82f6, #2563eb)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -87,8 +90,9 @@ const getCategoryColors: (
     lowerCategory.includes("notification")
   ) {
     return {
-      bg: "#ecfdf5",
-      border: "#a7f3d0",
+      bg: "color-mix(in srgb, #10b981 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #10b981 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #10b981, #059669)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -105,8 +109,9 @@ const getCategoryColors: (
     lowerCategory.includes("custom")
   ) {
     return {
-      bg: "#fef2f2",
-      border: "#fecaca",
+      bg: "color-mix(in srgb, #ef4444 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #ef4444 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #ef4444, #dc2626)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -119,8 +124,9 @@ const getCategoryColors: (
 
   if (lowerCategory.includes("json") || lowerCategory.includes("util")) {
     return {
-      bg: "#f0fdf4",
-      border: "#bbf7d0",
+      bg: "color-mix(in srgb, #22c55e 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #22c55e 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #22c55e, #16a34a)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -137,8 +143,9 @@ const getCategoryColors: (
     lowerCategory.includes("timer")
   ) {
     return {
-      bg: "#fff7ed",
-      border: "#fed7aa",
+      bg: "color-mix(in srgb, #f97316 12%, var(--ou-surface-primary, #ffffff))",
+      border:
+        "color-mix(in srgb, #f97316 38%, var(--ou-border-default, #e5e7eb))",
       headerBg: "linear-gradient(135deg, #f97316, #ea580c)",
       headerText: "#ffffff",
       iconColor: "#ffffff",
@@ -151,8 +158,8 @@ const getCategoryColors: (
 
   // Default / database models
   return {
-    bg: "#f8fafc",
-    border: "#e2e8f0",
+    bg: "var(--ou-surface-secondary, #f8fafc)",
+    border: "var(--ou-border-default, #e2e8f0)",
     headerBg: "linear-gradient(135deg, #6366f1, #4f46e5)",
     headerText: "#ffffff",
     iconColor: "#ffffff",
@@ -223,8 +230,14 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         style={{
           width: "16rem",
           borderRadius: "12px",
-          border: `2px dashed ${isHovering ? "#94a3b8" : "#cbd5e1"}`,
-          backgroundColor: isHovering ? "#f8fafc" : "#ffffff",
+          border: `2px dashed ${
+            isHovering
+              ? "var(--ou-text-subtle, #94a3b8)"
+              : "var(--ou-border-strong, #cbd5e1)"
+          }`,
+          backgroundColor: isHovering
+            ? "var(--ou-surface-secondary, #f8fafc)"
+            : "var(--ou-surface-primary, #ffffff)",
           padding: "1.5rem",
           display: "flex",
           flexDirection: "column",
@@ -245,7 +258,9 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             width: "2.5rem",
             height: "2.5rem",
             borderRadius: "50%",
-            backgroundColor: isHovering ? "#e2e8f0" : "#f1f5f9",
+            backgroundColor: isHovering
+              ? "var(--ou-border-default, #e2e8f0)"
+              : "var(--ou-surface-tertiary, #f1f5f9)",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
@@ -255,7 +270,9 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           <Icon
             icon={IconProp.Add}
             style={{
-              color: isHovering ? "#64748b" : "#94a3b8",
+              color: isHovering
+                ? "var(--ou-text-muted, #64748b)"
+                : "var(--ou-text-subtle, #94a3b8)",
               width: "1.25rem",
               height: "1.25rem",
               transition: "all 0.2s ease",
@@ -264,7 +281,9 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         </div>
         <p
           style={{
-            color: isHovering ? "#64748b" : "#94a3b8",
+            color: isHovering
+              ? "var(--ou-text-muted, #64748b)"
+              : "var(--ou-text-subtle, #94a3b8)",
             fontSize: "0.8125rem",
             fontWeight: 500,
             textAlign: "center",
@@ -302,13 +321,13 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                 ? colors.selectedBorder
                 : colors.border
         }`,
-        backgroundColor: "#ffffff",
+        backgroundColor: "var(--ou-surface-primary, #ffffff)",
         overflow: "visible",
         boxShadow: props.selected
-          ? colors.selectedShadow
+          ? `var(--ou-card-shadow-selected, ${colors.selectedShadow})`
           : isHovering
-            ? `0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -6px rgba(0, 0, 0, 0.05)`
-            : `0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05)`,
+            ? "var(--ou-card-shadow-hover, 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -6px rgba(0, 0, 0, 0.05))"
+            : "var(--ou-card-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05))",
         transition: "all 0.2s ease",
         transform: isHovering ? "translateY(-1px)" : "none",
         position: "relative",
@@ -364,11 +383,12 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             width: "22px",
             height: "22px",
             borderRadius: "50%",
-            backgroundColor: "#fef2f2",
+            backgroundColor:
+              "color-mix(in srgb, #ef4444 15%, var(--ou-surface-primary, #ffffff))",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            border: "1px solid #fecaca",
+            border: "1px solid rgb(248 113 113 / 45%)",
           }}
         >
           <Icon
@@ -451,8 +471,8 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             style={{
               display: "inline-flex",
               alignItems: "center",
-              backgroundColor: "#ffffff",
-              border: "1px solid #e2e8f0",
+              backgroundColor: "var(--ou-surface-primary, #ffffff)",
+              border: "1px solid var(--ou-border-default, #e2e8f0)",
               borderRadius: "6px",
               padding: "0.125rem 0.5rem",
               marginBottom: "0.5rem",
@@ -460,7 +480,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           >
             <span
               style={{
-                color: "#64748b",
+                color: "var(--ou-text-muted, #64748b)",
                 fontSize: "0.6875rem",
                 fontWeight: 500,
                 fontFamily:
@@ -475,7 +495,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         {/* Description */}
         <p
           style={{
-            color: "#64748b",
+            color: "var(--ou-text-muted, #64748b)",
             fontSize: "0.75rem",
             lineHeight: "1.125rem",
             margin: 0,
@@ -504,7 +524,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                   props.data.metadata.outPorts.length === 1
                     ? "center"
                     : "space-between",
-                backgroundColor: "#ffffff",
+                backgroundColor: "var(--ou-surface-primary, #ffffff)",
                 borderRadius: "0 0 10px 10px",
               }}
             >
@@ -513,7 +533,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                   <Tooltip key={i} text={port.description || ""}>
                     <span
                       style={{
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         fontSize: "0.6875rem",
                         fontWeight: 500,
                       }}

package/UI/Components/Workflow/ComponentPortViewer.tsx

@@ -34,8 +34,8 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                   gap: "0.625rem",
                   padding: "0.5rem 0.75rem",
                   borderRadius: "8px",
-                  backgroundColor: "#f8fafc",
-                  border: "1px solid #f1f5f9",
+                  backgroundColor: "var(--ou-surface-secondary, #f8fafc)",
+                  border: "1px solid var(--ou-border-subtle, #f1f5f9)",
                   marginBottom: "0.375rem",
                 }}
               >
@@ -44,7 +44,7 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                     width: "8px",
                     height: "8px",
                     borderRadius: "50%",
-                    backgroundColor: "#94a3b8",
+                    backgroundColor: "var(--ou-text-subtle, #94a3b8)",
                     flexShrink: 0,
                   }}
                 />
@@ -53,7 +53,7 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                     style={{
                       fontSize: "0.8125rem",
                       fontWeight: 500,
-                      color: "#334155",
+                      color: "var(--ou-text-secondary, #334155)",
                       margin: 0,
                       lineHeight: "1.25rem",
                     }}
@@ -61,7 +61,7 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                     {port.title}
                     <span
                       style={{
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         fontWeight: 400,
                         fontSize: "0.6875rem",
                         marginLeft: "0.375rem",
@@ -76,7 +76,7 @@ const ComponentPortViewer: FunctionComponent<ComponentProps> = (
                     <p
                       style={{
                         fontSize: "0.75rem",
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         margin: 0,
                         lineHeight: "1rem",
                       }}

package/UI/Components/Workflow/ComponentReturnValueViewer.tsx

@@ -37,8 +37,8 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                   gap: "0.625rem",
                   padding: "0.5rem 0.75rem",
                   borderRadius: "8px",
-                  backgroundColor: "#f8fafc",
-                  border: "1px solid #f1f5f9",
+                  backgroundColor: "var(--ou-surface-secondary, #f8fafc)",
+                  border: "1px solid var(--ou-border-subtle, #f1f5f9)",
                   marginBottom: "0.375rem",
                 }}
               >
@@ -47,7 +47,7 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                     style={{
                       fontSize: "0.8125rem",
                       fontWeight: 500,
-                      color: "#334155",
+                      color: "var(--ou-text-secondary, #334155)",
                       margin: 0,
                       lineHeight: "1.25rem",
                     }}
@@ -55,7 +55,7 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                     {returnValue.name}
                     <span
                       style={{
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         fontWeight: 400,
                         fontSize: "0.6875rem",
                         marginLeft: "0.375rem",
@@ -70,7 +70,7 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                     <p
                       style={{
                         fontSize: "0.75rem",
-                        color: "#94a3b8",
+                        color: "var(--ou-text-subtle, #94a3b8)",
                         margin: 0,
                         lineHeight: "1rem",
                       }}
@@ -83,12 +83,12 @@ const ComponentReturnValueViewer: FunctionComponent<ComponentProps> = (
                   style={{
                     fontSize: "0.6875rem",
                     fontWeight: 500,
-                    color: "#6366f1",
-                    backgroundColor: "#eef2ff",
+                    color: "var(--ou-link, #6366f1)",
+                    backgroundColor: "var(--ou-accent-soft, #eef2ff)",
                     padding: "0.125rem 0.5rem",
                     borderRadius: "100px",
                     whiteSpace: "nowrap",
-                    border: "1px solid #e0e7ff",
+                    border: "1px solid var(--ou-accent-muted, #e0e7ff)",
                   }}
                 >
                   {returnValue.type}

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -404,7 +404,8 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                         style={{
                           width: "28px",
                           height: "28px",
-                          backgroundColor: "#f1f5f9",
+                          backgroundColor:
+                            "var(--ou-surface-tertiary, #f1f5f9)",
                         }}
                       >
                         <Icon
@@ -443,16 +444,16 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                 borderRadius: "10px",
                                 border: isSelected
                                   ? "2px solid #6366f1"
-                                  : "1px solid #e2e8f0",
+                                  : "1px solid var(--ou-border-default, #e2e8f0)",
                                 backgroundColor: isSelected
-                                  ? "#eef2ff"
-                                  : "#ffffff",
+                                  ? "var(--ou-accent-soft, #eef2ff)"
+                                  : "var(--ou-surface-primary, #ffffff)",
                                 display: "flex",
                                 alignItems: "flex-start",
                                 gap: "0.75rem",
                                 boxShadow: isSelected
                                   ? "0 0 0 3px rgba(99, 102, 241, 0.1)"
-                                  : "0 1px 2px 0 rgba(0, 0, 0, 0.03)",
+                                  : "var(--ou-card-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.03))",
                               }}
                             >
                               {/* Icon */}
@@ -463,7 +464,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                   borderRadius: "8px",
                                   backgroundColor: isSelected
                                     ? "#6366f1"
-                                    : "#f1f5f9",
+                                    : "var(--ou-surface-tertiary, #f1f5f9)",
                                   display: "flex",
                                   alignItems: "center",
                                   justifyContent: "center",
@@ -474,7 +475,9 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                 <Icon
                                   icon={componentMetadata.iconProp}
                                   style={{
-                                    color: isSelected ? "#ffffff" : "#64748b",
+                                    color: isSelected
+                                      ? "#ffffff"
+                                      : "var(--ou-text-muted, #64748b)",
                                     width: "1rem",
                                     height: "1rem",
                                   }}
@@ -488,7 +491,9 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                     style={{
                                       fontSize: "0.8125rem",
                                       fontWeight: 600,
-                                      color: isSelected ? "#4338ca" : "#1e293b",
+                                      color: isSelected
+                                        ? "var(--ou-accent-text, #4338ca)"
+                                        : "var(--ou-text-primary, #1e293b)",
                                       margin: 0,
                                       lineHeight: "1.25rem",
                                     }}
@@ -521,7 +526,9 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                 <p
                                   style={{
                                     fontSize: "0.75rem",
-                                    color: isSelected ? "#6366f1" : "#94a3b8",
+                                    color: isSelected
+                                      ? "var(--ou-link, #6366f1)"
+                                      : "var(--ou-text-subtle, #94a3b8)",
                                     margin: 0,
                                     marginTop: "2px",
                                     lineHeight: "1rem",

package/UI/Components/Workflow/Workflow.tsx

@@ -71,8 +71,8 @@ const nodeTypes: NodeTypes = {
 
 const edgeStyle: React.CSSProperties = {
   strokeWidth: "2px",
-  stroke: "#94a3b8",
-  color: "#94a3b8",
+  stroke: "var(--ou-chart-tick, #94a3b8)",
+  color: "var(--ou-chart-tick, #94a3b8)",
 };
 
 const selectedEdgeStyle: React.CSSProperties = {
@@ -411,31 +411,33 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         minHeight: "600px",
         borderRadius: "8px",
         overflow: "hidden",
-        border: "1px solid #e2e8f0",
+        border: "1px solid var(--ou-border-default, #e2e8f0)",
       }}
     >
       <style>
         {`
           .react-flow__minimap {
             border-radius: 8px !important;
-            border: 1px solid #e2e8f0 !important;
+            border: 1px solid var(--ou-border-default, #e2e8f0) !important;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
             overflow: hidden !important;
-            background: #ffffff !important;
+            background: var(--ou-surface-primary, #ffffff) !important;
           }
           .react-flow__controls {
             border-radius: 8px !important;
-            border: 1px solid #e2e8f0 !important;
+            border: 1px solid var(--ou-border-default, #e2e8f0) !important;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
             overflow: hidden !important;
           }
           .react-flow__controls-button {
-            border-bottom: 1px solid #f1f5f9 !important;
+            border-bottom: 1px solid var(--ou-border-subtle, #f1f5f9) !important;
+            background: var(--ou-surface-primary, #ffffff) !important;
+            color: var(--ou-text-secondary, #475569) !important;
             width: 32px !important;
             height: 32px !important;
           }
           .react-flow__controls-button:hover {
-            background: #f8fafc !important;
+            background: var(--ou-surface-secondary, #f8fafc) !important;
           }
           .react-flow__controls-button svg {
             max-width: 14px !important;
@@ -507,9 +509,9 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             }
             return "#6366f1";
           }}
-          maskColor="rgba(241, 245, 249, 0.7)"
+          maskColor="var(--ou-flow-mask, rgba(241, 245, 249, 0.7))"
           style={{
-            backgroundColor: "#ffffff",
+            backgroundColor: "var(--ou-surface-primary, #ffffff)",
           }}
         />
         <Controls />
@@ -517,7 +519,7 @@ const Workflow: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           variant={BackgroundVariant.Dots}
           gap={20}
           size={1}
-          color="#cbd5e1"
+          color="var(--ou-chart-grid, #cbd5e1)"
         />
       </ReactFlow>