@oneuptime/common 11.3.28 → 11.4.1

package/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx

@@ -41,7 +41,8 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                 width: "48px",
                 height: "48px",
                 borderRadius: "50%",
-                backgroundColor: "#f0fdf4",
+                backgroundColor:
+                  "color-mix(in srgb, #22c55e 14%, var(--ou-surface-primary, #ffffff))",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
@@ -65,13 +66,18 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
               style={{
                 fontSize: "14px",
                 fontWeight: 600,
-                color: "#111827",
+                color: "var(--ou-text-primary, #111827)",
                 marginBottom: "4px",
               }}
             >
               No incidents
             </div>
-            <div style={{ fontSize: "13px", color: "#6b7280" }}>
+            <div
+              style={{
+                fontSize: "13px",
+                color: "var(--ou-text-muted, #6b7280)",
+              }}
+            >
               No incidents were reported on this day.
             </div>
           </div>
@@ -91,20 +97,20 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                   : undefined
               }
               style={{
-                border: "1px solid #e5e7eb",
+                border: "1px solid var(--ou-border-default, #e5e7eb)",
                 borderRadius: "10px",
                 padding: "14px 16px",
                 marginBottom: "10px",
                 cursor: isClickable ? "pointer" : "default",
                 transition: "all 0.15s ease",
-                backgroundColor: "#ffffff",
+                backgroundColor: "var(--ou-surface-primary, #ffffff)",
               }}
               onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
                 if (isClickable) {
                   (e.currentTarget as HTMLDivElement).style.backgroundColor =
-                    "#f9fafb";
+                    "var(--ou-surface-secondary, #f9fafb)";
                   (e.currentTarget as HTMLDivElement).style.borderColor =
-                    "#d1d5db";
+                    "var(--ou-border-strong, #d1d5db)";
                   (e.currentTarget as HTMLDivElement).style.boxShadow =
                     "0 1px 3px rgba(0,0,0,0.06)";
                 }
@@ -112,9 +118,9 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
               onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
                 if (isClickable) {
                   (e.currentTarget as HTMLDivElement).style.backgroundColor =
-                    "#ffffff";
+                    "var(--ou-surface-primary, #ffffff)";
                   (e.currentTarget as HTMLDivElement).style.borderColor =
-                    "#e5e7eb";
+                    "var(--ou-border-default, #e5e7eb)";
                   (e.currentTarget as HTMLDivElement).style.boxShadow = "none";
                 }
               }}
@@ -132,7 +138,9 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                     style={{
                       fontSize: "14px",
                       fontWeight: 600,
-                      color: isClickable ? "#2563eb" : "#111827",
+                      color: isClickable
+                        ? "var(--ou-link, #2563eb)"
+                        : "var(--ou-text-primary, #111827)",
                       lineHeight: "1.4",
                       marginBottom: "4px",
                     }}
@@ -142,7 +150,7 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                   <div
                     style={{
                       fontSize: "12px",
-                      color: "#6b7280",
+                      color: "var(--ou-text-muted, #6b7280)",
                     }}
                   >
                     Declared{" "}
@@ -162,7 +170,7 @@ const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
                   >
                     <path
                       d="M6 3l5 5-5 5"
-                      stroke="#9ca3af"
+                      stroke="var(--ou-text-subtle, #9ca3af)"
                       strokeWidth="1.5"
                       strokeLinecap="round"
                       strokeLinejoin="round"

package/UI/Components/Pill/Pill.tsx

@@ -1,4 +1,4 @@
-import { Black } from "../../../Types/BrandColors";
+import { Gray500 } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
 import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -26,22 +26,32 @@ export interface ComponentProps {
 const Pill: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const color: Color = props.color || Gray500;
+  const backgroundColor: string = color.toString();
+
   if (props.isMinimal) {
     return (
-      <span className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5 text-sm">
+      <span
+        className="relative inline-flex items-center rounded-full border px-3 py-0.5 text-sm"
+        style={{
+          borderColor: "var(--ou-border-strong, #d1d5db)",
+        }}
+      >
         <span className="absolute flex flex-shrink-0 items-center justify-center">
           <span
             className="h-1.5 w-1.5 rounded-full bg-rose-500"
             style={{
-              backgroundColor:
-                props.style?.backgroundColor || props.color
-                  ? props.color.toString()
-                  : Black.toString(),
+              backgroundColor: backgroundColor,
             }}
             aria-hidden="true"
           ></span>
         </span>
-        <span className="ml-3.5 font-medium text-gray-900">{props.text}</span>
+        <span
+          className="ml-3.5 font-medium"
+          style={{ color: "var(--ou-text-primary, #111827)" }}
+        >
+          {props.text}
+        </span>
       </span>
     );
   }
@@ -50,18 +60,16 @@ const Pill: FunctionComponent<ComponentProps> = (
     return (
       <span
         data-testid="pill"
-        className="inline-flex items-center rounded-full p-1 pl-3 pr-3"
+        className="inline-flex items-center rounded-full border p-1 pl-3 pr-3"
         style={{
           // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
 
           color:
-            props.style?.color || Color.shouldUseDarkText(props.color || Black)
+            props.style?.color || Color.shouldUseDarkText(color)
               ? "#000000"
               : "#ffffff",
-          backgroundColor:
-            props.style?.backgroundColor || props.color
-              ? props.color.toString()
-              : Black.toString(),
+          backgroundColor: backgroundColor,
+          borderColor: "var(--ou-border-strong, #d1d5db)",
           fontSize: props.size ? props.size.toString() : PillSize.Normal,
           ...props.style,
         }}

package/UI/Components/StatusBubble/StatusBubble.tsx

@@ -1,4 +1,3 @@
-import { Black } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
 import React, { CSSProperties, FunctionComponent, ReactElement } from "react";
 
@@ -14,7 +13,7 @@ const Statusbubble: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const backgroundColor: string = props.color
     ? props.color.toString()
-    : Black.toString();
+    : "var(--ou-text-subtle, #9ca3af)";
 
   return (
     <div
@@ -37,6 +36,7 @@ const Statusbubble: FunctionComponent<ComponentProps> = (
             className="relative inline-flex rounded-full h-3.5 w-3.5"
             style={{
               backgroundColor: backgroundColor,
+              boxShadow: "0 0 0 1px var(--ou-border-strong, #d1d5db)",
             }}
           ></span>
         </span>
@@ -44,7 +44,7 @@ const Statusbubble: FunctionComponent<ComponentProps> = (
       <div
         className="text-sm font-medium"
         style={{
-          color: props.color ? props.color.toString() : Black.toString(),
+          color: "var(--ou-text-secondary, #4b5563)",
         }}
       >
         {props.text}

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",
                       }}