@oneuptime/common 11.3.28 → 11.4.1

package/UI/Components/EntityDropdown/EntityDropdown.tsx

@@ -10,6 +10,7 @@ import ObjectID from "../../../Types/ObjectID";
 import ModelAPI, { ListResult } from "../../Utils/ModelAPI/ModelAPI";
 import Icon from "../Icon/Icon";
 import {
+  DROPDOWN_MENU_Z_INDEX,
   DropdownOption,
   DropdownOptionGroup,
   DropdownOptionLabel,
@@ -20,6 +21,7 @@ import React, {
   ReactElement,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -107,6 +109,18 @@ export interface EntityDropdownProps {
 const SEARCH_DEBOUNCE_MS: number = 250;
 const SEARCH_PAGE_SIZE: number = 50;
 const LABEL_PREVIEW_LIMIT: number = 50;
+const MENU_GAP_PX: number = 4;
+const MENU_MAX_HEIGHT_PX: number = 384;
+const MENU_MIN_USEFUL_HEIGHT_PX: number = 160;
+const MENU_VIEWPORT_PADDING_PX: number = 8;
+
+interface EntityDropdownMenuPosition {
+  bottom?: number | undefined;
+  left: number;
+  maxHeight: number;
+  top?: number | undefined;
+  width: number;
+}
 
 const flattenOptions: (
   options: Array<DropdownOption | DropdownOptionGroup> | undefined,
@@ -441,12 +455,91 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
 
   const containerRef: React.MutableRefObject<HTMLDivElement | null> =
     useRef<HTMLDivElement | null>(null);
+  const controlRef: React.MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
   const inputRef: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
   const debounceRef: React.MutableRefObject<number | null> = useRef<
     number | null
   >(null);
   const searchSeqRef: React.MutableRefObject<number> = useRef<number>(0);
+  const [menuPosition, setMenuPosition] =
+    useState<EntityDropdownMenuPosition | null>(null);
+
+  const updateMenuPosition: () => void = useCallback((): void => {
+    if (!controlRef.current || typeof window === "undefined") {
+      return;
+    }
+
+    const controlRect: DOMRect = controlRef.current.getBoundingClientRect();
+    const availableWidth: number = Math.max(
+      0,
+      window.innerWidth - MENU_VIEWPORT_PADDING_PX * 2,
+    );
+    const width: number = Math.min(controlRect.width, availableWidth);
+    const maximumLeft: number = Math.max(
+      MENU_VIEWPORT_PADDING_PX,
+      window.innerWidth - MENU_VIEWPORT_PADDING_PX - width,
+    );
+    const left: number = Math.min(
+      Math.max(controlRect.left, MENU_VIEWPORT_PADDING_PX),
+      maximumLeft,
+    );
+    const spaceBelow: number = Math.max(
+      0,
+      window.innerHeight -
+        controlRect.bottom -
+        MENU_GAP_PX -
+        MENU_VIEWPORT_PADDING_PX,
+    );
+    const spaceAbove: number = Math.max(
+      0,
+      controlRect.top - MENU_GAP_PX - MENU_VIEWPORT_PADDING_PX,
+    );
+    const shouldOpenAbove: boolean =
+      spaceBelow < MENU_MIN_USEFUL_HEIGHT_PX && spaceAbove > spaceBelow;
+    const availableHeight: number = shouldOpenAbove ? spaceAbove : spaceBelow;
+
+    setMenuPosition({
+      bottom: shouldOpenAbove
+        ? window.innerHeight - controlRect.top + MENU_GAP_PX
+        : undefined,
+      left,
+      maxHeight: Math.min(MENU_MAX_HEIGHT_PX, availableHeight),
+      top: shouldOpenAbove ? undefined : controlRect.bottom + MENU_GAP_PX,
+      width,
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      setMenuPosition(null);
+      return;
+    }
+
+    let animationFrame: number | null = null;
+    const schedulePositionUpdate: () => void = (): void => {
+      if (animationFrame !== null) {
+        return;
+      }
+      animationFrame = window.requestAnimationFrame((): void => {
+        animationFrame = null;
+        updateMenuPosition();
+      });
+    };
+
+    updateMenuPosition();
+    window.addEventListener("resize", schedulePositionUpdate);
+    document.addEventListener("scroll", schedulePositionUpdate, true);
+
+    return () => {
+      window.removeEventListener("resize", schedulePositionUpdate);
+      document.removeEventListener("scroll", schedulePositionUpdate, true);
+      if (animationFrame !== null) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+    };
+  }, [isOpen, selectedKeys, updateMenuPosition]);
 
   // Click-outside closes the popover.
   useEffect(() => {
@@ -1106,7 +1199,7 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
         </div>
       )}
 
-      <div className="relative">
+      <div ref={controlRef} className="relative">
         {/*
          * Single-select shows the resolved label in-place when closed so the
          * chrome looks like a static value field. Click anywhere on the
@@ -1281,6 +1374,11 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
                   return;
                 }
                 if (event.key === "Escape") {
+                  /*
+                   * The modal also listens for Escape. Consume it here so the
+                   * first press closes the menu without dismissing the form.
+                   */
+                  event.preventDefault();
                   setIsOpen(false);
                   setHighlightedIndex(-1);
                   return;
@@ -1329,8 +1427,18 @@ const EntityDropdown: FunctionComponent<EntityDropdownProps> = (
 
       {isOpen && !props.disabled && (
         <div
-          className="absolute z-20 mt-1 flex max-h-96 w-full flex-col overflow-hidden rounded-md border border-gray-200 bg-white text-sm shadow-lg"
+          className="fixed flex flex-col overflow-hidden rounded-md border border-gray-200 bg-white text-sm shadow-lg"
+          data-testid="entity-dropdown-menu"
           role="listbox"
+          style={{
+            bottom: menuPosition?.bottom,
+            left: menuPosition?.left ?? 0,
+            maxHeight: menuPosition?.maxHeight,
+            top: menuPosition?.top,
+            visibility: menuPosition ? "visible" : "hidden",
+            width: menuPosition?.width ?? 0,
+            zIndex: DROPDOWN_MENU_Z_INDEX,
+          }}
         >
           {labelsTabEnabled && (
             <div className="flex flex-shrink-0 items-center gap-1 border-b border-gray-100 bg-gray-50 px-1.5 py-1">

package/UI/Components/ErrorBoundary.tsx

@@ -15,7 +15,8 @@ const Fallback: FunctionComponent = () => {
         bottom: "0",
         left: "0",
         right: "0",
-        backgroundColor: "#fdfdfd",
+        backgroundColor: "var(--ou-background-primary, #fdfdfd)",
+        color: "var(--ou-text-primary, #111827)",
         zIndex: "999",
         display: "flex",
         justifyContent: "center",

package/UI/Components/EventItem/EventItem.tsx

@@ -168,8 +168,8 @@ const EventItem: FunctionComponent<ComponentProps> = (
                     text={item}
                     color={VeryLightGray}
                     style={{
-                      backgroundColor: "#f3f4f6",
-                      color: "#9ca3af",
+                      backgroundColor: "var(--ou-surface-tertiary, #f3f4f6)",
+                      color: "var(--ou-text-subtle, #9ca3af)",
                     }}
                   />
                 );

package/UI/Components/GanttChart/Bar/Index.tsx

@@ -137,7 +137,7 @@ const Bar: FunctionComponent<ComponentProps> = (
           marginLeft: `${barWidth + 15}px`,
           opacity: barOpacity,
           fontWeight: props.isHighlighted ? 600 : undefined,
-          color: props.isHighlighted ? "#4338ca" : undefined,
+          color: props.isHighlighted ? "var(--ou-link, #4338ca)" : undefined,
         }}
       >
         <BarLabel label={props.bar.label} />

package/UI/Components/Graphs/UptimeBarTooltip.tsx

@@ -72,7 +72,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           gap: "8px",
           paddingBottom: "10px",
           marginBottom: "10px",
-          borderBottom: "1px solid #f0f0f0",
+          borderBottom: "1px solid var(--ou-border-subtle, #f0f0f0)",
         }}
       >
         <svg
@@ -80,7 +80,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           height="14"
           viewBox="0 0 24 24"
           fill="none"
-          stroke="#9ca3af"
+          stroke="var(--ou-text-subtle, #9ca3af)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -95,7 +95,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           style={{
             fontWeight: 600,
             fontSize: "13px",
-            color: "#111827",
+            color: "var(--ou-text-primary, #111827)",
             letterSpacing: "-0.01em",
           }}
         >
@@ -121,7 +121,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             <span
               style={{
                 fontSize: "11px",
-                color: "#6b7280",
+                color: "var(--ou-text-muted, #6b7280)",
                 fontWeight: 500,
               }}
             >
@@ -165,7 +165,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                 overflow: "hidden",
                 display: "flex",
                 gap: "1px",
-                backgroundColor: "#e5e7eb",
+                backgroundColor: "var(--ou-border-default, #e5e7eb)",
               }}
             >
               {sortedDurations.map((status: StatusDuration, index: number) => {
@@ -191,7 +191,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
               style={{
                 width: "100%",
                 height: "4px",
-                backgroundColor: "#e5e7eb",
+                backgroundColor: "var(--ou-border-default, #e5e7eb)",
                 borderRadius: "100px",
                 overflow: "hidden",
               }}
@@ -213,7 +213,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
       {!props.hasEvents && (
         <div
           style={{
-            backgroundColor: "#f9fafb",
+            backgroundColor: "var(--ou-surface-secondary, #f9fafb)",
             borderRadius: "8px",
             padding: "16px",
             textAlign: "center",
@@ -224,7 +224,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             height="18"
             viewBox="0 0 24 24"
             fill="none"
-            stroke="#d1d5db"
+            stroke="var(--ou-border-strong, #d1d5db)"
             strokeWidth="1.5"
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -237,7 +237,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           <div
             style={{
               fontSize: "12px",
-              color: "#9ca3af",
+              color: "var(--ou-text-subtle, #9ca3af)",
               fontWeight: 500,
             }}
           >
@@ -252,7 +252,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
           style={{
             paddingBottom: hasIncidents ? "10px" : "0",
             marginBottom: hasIncidents ? "10px" : "0",
-            borderBottom: hasIncidents ? "1px solid #f0f0f0" : "none",
+            borderBottom: hasIncidents
+              ? "1px solid var(--ou-border-subtle, #f0f0f0)"
+              : "none",
           }}
         >
           {sortedDurations.map((status: StatusDuration, index: number) => {
@@ -291,7 +293,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                   <span
                     style={{
                       fontSize: "12px",
-                      color: "#374151",
+                      color: "var(--ou-text-secondary, #374151)",
                       fontWeight: 500,
                       whiteSpace: "nowrap",
                       overflow: "hidden",
@@ -306,7 +308,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                   style={{
                     flex: 1,
                     height: "4px",
-                    backgroundColor: "#f3f4f6",
+                    backgroundColor: "var(--ou-surface-tertiary, #f3f4f6)",
                     borderRadius: "100px",
                     overflow: "hidden",
                   }}
@@ -325,7 +327,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                 <span
                   style={{
                     fontSize: "11px",
-                    color: status.isDowntime ? "#dc2626" : "#6b7280",
+                    color: status.isDowntime
+                      ? "var(--ou-danger-text, #b91c1c)"
+                      : "var(--ou-text-muted, #6b7280)",
                     fontWeight: status.isDowntime ? 600 : 400,
                     fontVariantNumeric: "tabular-nums",
                     whiteSpace: "nowrap",
@@ -356,7 +360,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             <span
               style={{
                 fontSize: "11px",
-                color: "#6b7280",
+                color: "var(--ou-text-muted, #6b7280)",
                 fontWeight: 500,
                 flex: 1,
               }}
@@ -367,8 +371,9 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
               style={{
                 fontSize: "10px",
                 fontWeight: 600,
-                color: "#dc2626",
-                backgroundColor: "#fef2f2",
+                color: "var(--ou-danger-text, #b91c1c)",
+                backgroundColor:
+                  "color-mix(in srgb, #ef4444 14%, var(--ou-surface-primary, #ffffff))",
                 padding: "1px 7px",
                 borderRadius: "9999px",
                 lineHeight: "1.6",
@@ -400,21 +405,23 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                     marginBottom: "6px",
                     cursor: isClickable ? "pointer" : "default",
                     transition: "background-color 0.12s ease",
-                    backgroundColor: "#fafafa",
+                    backgroundColor: "var(--ou-surface-secondary, #fafafa)",
                     borderRadius: "0 6px 6px 0",
                   }}
                   onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
                     if (isClickable) {
                       (
                         e.currentTarget as HTMLDivElement
-                      ).style.backgroundColor = "#f3f4f6";
+                      ).style.backgroundColor =
+                        "var(--ou-surface-tertiary, #f3f4f6)";
                     }
                   }}
                   onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
                     if (isClickable) {
                       (
                         e.currentTarget as HTMLDivElement
-                      ).style.backgroundColor = "#fafafa";
+                      ).style.backgroundColor =
+                        "var(--ou-surface-secondary, #fafafa)";
                     }
                   }}
                 >
@@ -431,7 +438,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                         flex: 1,
                         minWidth: 0,
                         fontSize: "12px",
-                        color: "#111827",
+                        color: "var(--ou-text-primary, #111827)",
                         fontWeight: 600,
                         lineHeight: "1.3",
                         overflow: "hidden",
@@ -451,7 +458,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                       >
                         <path
                           d="M6 3l5 5-5 5"
-                          stroke="#6b7280"
+                          stroke="var(--ou-text-muted, #6b7280)"
                           strokeWidth="1.5"
                           strokeLinecap="round"
                           strokeLinejoin="round"
@@ -509,7 +516,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
                     <span
                       style={{
                         fontSize: "10px",
-                        color: "#b0b0b0",
+                        color: "var(--ou-text-subtle, #b0b0b0)",
                         marginLeft: "auto",
                         whiteSpace: "nowrap",
                       }}
@@ -528,7 +535,7 @@ const UptimeBarTooltip: FunctionComponent<ComponentProps> = (
             <div
               style={{
                 fontSize: "11px",
-                color: "#9ca3af",
+                color: "var(--ou-text-subtle, #9ca3af)",
                 textAlign: "center",
                 padding: "4px 0 0",
                 fontWeight: 500,

package/UI/Components/Header/Header.tsx

@@ -3,6 +3,7 @@ import React, { FunctionComponent, ReactElement } from "react";
 export interface ComponentProps {
   leftComponents?: undefined | Array<ReactElement> | ReactElement;
   rightComponents?: undefined | Array<ReactElement> | ReactElement;
+  mobileRightComponents?: undefined | Array<ReactElement> | ReactElement;
   centerComponents?: undefined | Array<ReactElement> | ReactElement;
   className?: string | undefined;
 }
@@ -28,6 +29,12 @@ const Header: FunctionComponent<ComponentProps> = (
           </div>
         )}
 
+        {props.mobileRightComponents && (
+          <div className="relative z-20 flex items-center lg:hidden">
+            {props.mobileRightComponents}
+          </div>
+        )}
+
         <div className="hidden lg:relative lg:z-10 lg:ml-4 lg:flex lg:items-center lg:gap-2">
           {props.rightComponents}
         </div>

package/UI/Components/Header/HeaderIconDropdownButton.tsx

@@ -19,6 +19,7 @@ export interface ComponentProps {
   onClick?: (() => void) | undefined;
   name: string;
   showDropdown: boolean;
+  isPressed?: boolean | undefined;
 }
 
 const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
@@ -53,6 +54,7 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
           id={hasDropdown ? "user-menu-button" : undefined}
           aria-expanded={hasDropdown ? isDropdownVisible : undefined}
           aria-haspopup={hasDropdown ? "true" : undefined}
+          aria-pressed={props.isPressed}
           onClick={() => {
             props.onClick?.();
             setIsComponentVisible(!isDropdownVisible);

package/UI/Components/Label/Label.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties, FunctionComponent, ReactElement } from "react";
 import LabelModel from "../../../Models/DatabaseModels/Label";
 import Pill, { ComponentProps as PillProps, PillSize } from "../Pill/Pill";
-import { Black } from "../../../Types/BrandColors";
+import { Gray500 } from "../../../Types/BrandColors";
 import Color from "../../../Types/Color";
 import IconProp from "../../../Types/Icon/IconProp";
 
@@ -19,7 +19,7 @@ const LabelElement: FunctionComponent<ComponentProps> = (
 
   const resolveColor: Color = (() => {
     if (!label.color) {
-      return Black;
+      return Gray500;
     }
 
     if (typeof label.color === "string") {

package/UI/Components/LogsViewer/components/LogsAnalyticsView.tsx

@@ -654,21 +654,27 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                 </defs>
                 <CartesianGrid
                   strokeDasharray="none"
-                  stroke="#f1f5f9"
+                  stroke="var(--ou-chart-grid, #f1f5f9)"
                   vertical={false}
                 />
                 <XAxis
                   dataKey="time"
                   tickFormatter={formatTickTime}
-                  tick={{ fontSize: 11, fill: "#94a3b8" }}
-                  axisLine={{ stroke: "#e2e8f0" }}
+                  tick={{
+                    fontSize: 11,
+                    fill: "var(--ou-chart-tick, #94a3b8)",
+                  }}
+                  axisLine={{ stroke: "var(--ou-chart-grid, #e2e8f0)" }}
                   tickLine={false}
                   minTickGap={50}
                   interval="preserveStartEnd"
                   dy={8}
                 />
                 <YAxis
-                  tick={{ fontSize: 11, fill: "#94a3b8" }}
+                  tick={{
+                    fontSize: 11,
+                    fill: "var(--ou-chart-tick, #94a3b8)",
+                  }}
                   axisLine={false}
                   tickLine={false}
                   width={52}
@@ -678,7 +684,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                 <Tooltip
                   content={<AnalyticsTooltip />}
                   cursor={{
-                    stroke: "#c7d2fe",
+                    stroke: "var(--ou-accent-muted, #c7d2fe)",
                     strokeWidth: 1,
                     strokeDasharray: "4 4",
                   }}
@@ -692,7 +698,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                   activeDot={{
                     r: 4,
                     fill: CHART_COLORS[0]!,
-                    stroke: "#fff",
+                    stroke: "var(--ou-chart-marker-ring, #ffffff)",
                     strokeWidth: 2,
                   }}
                   isAnimationActive={false}
@@ -707,21 +713,27 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
               >
                 <CartesianGrid
                   strokeDasharray="none"
-                  stroke="#f1f5f9"
+                  stroke="var(--ou-chart-grid, #f1f5f9)"
                   vertical={false}
                 />
                 <XAxis
                   dataKey="time"
                   tickFormatter={formatTickTime}
-                  tick={{ fontSize: 11, fill: "#94a3b8" }}
-                  axisLine={{ stroke: "#e2e8f0" }}
+                  tick={{
+                    fontSize: 11,
+                    fill: "var(--ou-chart-tick, #94a3b8)",
+                  }}
+                  axisLine={{ stroke: "var(--ou-chart-grid, #e2e8f0)" }}
                   tickLine={false}
                   minTickGap={50}
                   interval="preserveStartEnd"
                   dy={8}
                 />
                 <YAxis
-                  tick={{ fontSize: 11, fill: "#94a3b8" }}
+                  tick={{
+                    fontSize: 11,
+                    fill: "var(--ou-chart-tick, #94a3b8)",
+                  }}
                   axisLine={false}
                   tickLine={false}
                   width={52}

package/UI/Components/LogsViewer/components/LogsHistogram.tsx

@@ -216,15 +216,21 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
             <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/Markdown.tsx/MarkdownEditor.tsx

@@ -901,17 +901,17 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
         .oneuptime-wysiwyg ol { list-style-type: decimal; }
         .oneuptime-wysiwyg ul.task-list, .oneuptime-wysiwyg ul.task-list li { list-style: none; margin-left: 0; }
         .oneuptime-wysiwyg ul.task-list li { padding-left: 0; }
-        .oneuptime-wysiwyg blockquote { border-left: 3px solid #d1d5db; padding-left: 0.75rem; color: #4b5563; margin: 0.5rem 0; }
-        .oneuptime-wysiwyg pre { background: #f3f4f6; border-radius: 0.375rem; padding: 0.75rem; overflow-x: auto; margin: 0.5rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85rem; }
-        .oneuptime-wysiwyg code { background: #f3f4f6; padding: 0 0.25rem; border-radius: 0.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85em; }
+        .oneuptime-wysiwyg blockquote { border-left: 3px solid var(--ou-border-strong, #d1d5db); padding-left: 0.75rem; color: var(--ou-text-secondary, #4b5563); margin: 0.5rem 0; }
+        .oneuptime-wysiwyg pre { background: var(--ou-surface-tertiary, #f3f4f6); border-radius: 0.375rem; padding: 0.75rem; overflow-x: auto; margin: 0.5rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85rem; }
+        .oneuptime-wysiwyg code { background: var(--ou-surface-tertiary, #f3f4f6); padding: 0 0.25rem; border-radius: 0.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85em; }
         .oneuptime-wysiwyg pre code { background: transparent; padding: 0; }
-        .oneuptime-wysiwyg a { color: #4f46e5; text-decoration: underline; }
-        .oneuptime-wysiwyg hr { margin: 1rem 0; border: 0; border-top: 1px solid #e5e7eb; }
+        .oneuptime-wysiwyg a { color: var(--ou-link, #4f46e5); text-decoration: underline; }
+        .oneuptime-wysiwyg hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--ou-border-default, #e5e7eb); }
         .oneuptime-wysiwyg table { border-collapse: collapse; margin: 0.5rem 0; }
-        .oneuptime-wysiwyg th, .oneuptime-wysiwyg td { border: 1px solid #e5e7eb; padding: 0.25rem 0.5rem; }
-        .oneuptime-wysiwyg th { background: #f9fafb; font-weight: 600; }
+        .oneuptime-wysiwyg th, .oneuptime-wysiwyg td { border: 1px solid var(--ou-border-default, #e5e7eb); padding: 0.25rem 0.5rem; }
+        .oneuptime-wysiwyg th { background: var(--ou-surface-secondary, #f9fafb); font-weight: 600; }
         .oneuptime-wysiwyg img { max-width: 100%; height: auto; }
-        .oneuptime-wysiwyg:empty::before { content: attr(data-placeholder); color: #9ca3af; pointer-events: none; }
+        .oneuptime-wysiwyg:empty::before { content: attr(data-placeholder); color: var(--ou-text-subtle, #9ca3af); pointer-events: none; }
       `}</style>
 
       {/* Toolbar */}