@rovula/ui 0.1.40 → 0.1.42

package/src/components/AutoComplete/AutoComplete.tsx

@@ -0,0 +1,374 @@
+"use client";
+
+import React, {
+  KeyboardEvent,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import TextInput, { type InputProps } from "../TextInput/TextInput";
+import Loading from "../Loading/Loading";
+import Text from "../Text/Text";
+import Icon from "../Icon/Icon";
+import { cn } from "@/utils/cn";
+import { menuItemBaseStyles } from "../Dropdown/Dropdown";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type AutoCompleteOption = {
+  value: string;
+  label: string;
+};
+
+/**
+ * InputProps that AutoComplete manages internally.
+ * These are excluded from the public API so callers cannot accidentally
+ * override internal event wiring or ARIA attributes.
+ */
+type OmittedInputProps =
+  | "value"
+  | "onChange"
+  // | "onBlur"
+  // | "onFocus"
+  | "onKeyDown"
+  | "onSelect"
+  | "role"
+  | "aria-expanded"
+  | "aria-haspopup"
+  | "aria-autocomplete"
+  | "aria-activedescendant"
+  | "aria-controls"
+  | "autoComplete"
+  | "hasClearIcon";
+
+export type AutoCompleteProps<
+  T extends AutoCompleteOption = AutoCompleteOption,
+> = {
+  // ── AutoComplete-specific ─────────────────────────────────────────────────
+
+  /** Options provided by caller (already filtered/fetched externally) */
+  options: T[];
+
+  /** Controlled value — the current input text */
+  value?: string;
+
+  /**
+   * Called on every change: typing or clearing.
+   * Parent should update `value` from this.
+   */
+  onChange?: (value: string) => void;
+
+  /**
+   * Called only when user explicitly selects an option from the list.
+   * Receives the full option object (including any domain-specific fields).
+   */
+  onSelect?: (option: T) => void;
+
+  onBlur?: () => void;
+
+  /** Called with the current query when the user types */
+  onSearch?: (query: string) => void;
+
+  /** Show a loading spinner inside the dropdown */
+  loading?: boolean;
+
+  /** Text shown when options is empty and not loading */
+  noOptionsText?: string;
+
+  /**
+   * When true, show the noOptionsText message when options is empty.
+   * Defaults to false (popover stays closed when no options).
+   */
+  showNoOptions?: boolean;
+
+  /**
+   * Custom render for each option item.
+   * Receives the option and whether it is currently selected.
+   * The wrapper button (styles + click handler) is provided by AutoComplete.
+   */
+  renderOption?: (option: T, isSelected: boolean) => ReactNode;
+
+  /**
+   * Override client-side filtering.
+   * Pass `(x) => x` to disable filtering entirely (when results come from an API).
+   * Defaults to identity (no filtering).
+   */
+  filterOptions?: (options: T[]) => T[];
+
+  /**
+   * Render the options list via a React portal so it escapes containers
+   * with `overflow: hidden/auto`.
+   * Set to false when inside a Dialog — portal content is blocked by
+   * Radix Dialog's focus trap and aria-modal, making items unclickable.
+   * Defaults to true.
+   */
+  portal?: boolean;
+
+  /** Extra className applied to the options list container */
+  listboxClassName?: string;
+
+  /** Extra inline styles applied to the options list container */
+  listboxStyle?: React.CSSProperties;
+
+  /** Extra className applied to each option item */
+  optionClassName?: string;
+
+  /** Extra inline styles applied to each option item */
+  optionStyle?: React.CSSProperties;
+
+  "data-testid"?: string;
+
+  // ── TextInput passthrough ─────────────────────────────────────────────────
+  // All InputProps are supported except the ones AutoComplete manages itself.
+  // This includes: className, style, label, placeholder, error, errorMessage,
+  // helperText, warningMessage, required, disabled, fullwidth, size, rounded,
+  // variant, startIcon, endIcon, labelClassName, classes, etc.
+} & Omit<InputProps, OmittedInputProps>;
+
+// ---------------------------------------------------------------------------
+// AutoComplete
+// ---------------------------------------------------------------------------
+
+function AutoCompleteInner<T extends AutoCompleteOption = AutoCompleteOption>(
+  {
+    // AutoComplete-specific props
+    options,
+    value = "",
+    onChange,
+    onSelect,
+    onBlur,
+    onSearch,
+    loading = false,
+    noOptionsText = "No results",
+    showNoOptions = false,
+    renderOption,
+    filterOptions = (x) => x,
+    portal = true,
+    listboxClassName,
+    listboxStyle,
+    optionClassName,
+    optionStyle,
+    "data-testid": testId,
+    // InputProps with explicit defaults (rest passes everything else through)
+    id,
+    label,
+    fullwidth = true,
+    size = "md",
+    rounded = "normal",
+    variant = "outline",
+    disabled,
+    ...rest
+  }: AutoCompleteProps<T>,
+  ref: React.ForwardedRef<HTMLInputElement>,
+) {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filteredOptions = filterOptions(options);
+  const showPopover =
+    open && (loading || filteredOptions.length > 0 || showNoOptions);
+
+  const commitSelection = useCallback(
+    (option: T) => {
+      onChange?.(option.value);
+      onSelect?.(option);
+      setOpen(false);
+      setActiveIndex(-1);
+    },
+    [onChange, onSelect],
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const query = e.target.value;
+      onChange?.(query);
+      onSearch?.(query);
+      setOpen(true);
+      setActiveIndex(-1);
+    },
+    [onChange, onSearch],
+  );
+
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      setOpen(true);
+      rest?.onFocus?.(e);
+    },
+    [rest?.onFocus],
+  );
+
+  const handleBlur = useCallback(() => {
+    // Delay so option button onClick fires before popover closes
+    setTimeout(() => {
+      setOpen(false);
+      setActiveIndex(-1);
+      onBlur?.();
+    }, 150);
+  }, [onBlur]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") setOpen(true);
+        return;
+      }
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, filteredOptions.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+          commitSelection(filteredOptions[activeIndex]);
+        }
+      } else if (e.key === "Escape") {
+        setOpen(false);
+        setActiveIndex(-1);
+      }
+    },
+    [open, activeIndex, filteredOptions, commitSelection],
+  );
+
+  const listContent = (
+    <div
+      role="listbox"
+      style={{ boxShadow: "var(--dropdown-menu-shadow)", ...listboxStyle }}
+      className={cn(
+        "rounded-md border border-bg-stroke3 overflow-hidden",
+        "bg-modal-dropdown-surface text-text-g-contrast-high",
+        !portal && "absolute top-full left-0 w-full -mt-3 z-[51]",
+        portal && "z-[51]",
+        listboxClassName,
+      )}
+      data-testid={testId ? `${testId}-listbox` : undefined}
+    >
+      {loading ? (
+        <div className="flex items-center justify-center py-6">
+          <Loading size={20} />
+        </div>
+      ) : filteredOptions.length === 0 ? (
+        <div className="px-4 py-6 text-center">
+          <Text
+            variant="small1"
+            className="text-[var(--dropdown-menu-default-text)]"
+          >
+            {noOptionsText}
+          </Text>
+        </div>
+      ) : (
+        filteredOptions.map((option, index) => {
+          const isSelected = option.value === value;
+          const isActive = index === activeIndex;
+
+          return (
+            <button
+              key={option.value}
+              id={`autocomplete-option-${option.value}`}
+              type="button"
+              role="option"
+              aria-selected={isSelected}
+              style={optionStyle}
+              className={cn(
+                menuItemBaseStyles,
+                "w-full",
+                isSelected &&
+                  "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)]",
+                isActive &&
+                  !isSelected &&
+                  "bg-[var(--dropdown-menu-hover-bg)] text-[var(--dropdown-menu-hover-text)]",
+                optionClassName,
+              )}
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => commitSelection(option)}
+              data-testid={`autocomplete-option-${option.value}`}
+            >
+              <span className="shrink-0 size-4 flex items-center justify-center">
+                {isSelected && (
+                  <Icon
+                    type="heroicons"
+                    name="check"
+                    className="size-4 text-[var(--dropdown-menu-selected-text)]"
+                  />
+                )}
+              </span>
+              {renderOption ? renderOption(option, isSelected) : option.label}
+            </button>
+          );
+        })
+      )}
+    </div>
+  );
+
+  return (
+    <PopoverPrimitive.Root open={showPopover}>
+      <PopoverPrimitive.Anchor asChild>
+        <div className={cn("relative", fullwidth && "w-full")}>
+          <TextInput
+            {...rest}
+            ref={ref ?? inputRef}
+            id={id}
+            label={label}
+            value={value}
+            size={size}
+            rounded={rounded}
+            variant={variant}
+            disabled={disabled}
+            fullwidth={fullwidth}
+            autoComplete="off"
+            role="combobox"
+            aria-expanded={showPopover}
+            aria-autocomplete="list"
+            aria-activedescendant={
+              activeIndex >= 0
+                ? `autocomplete-option-${filteredOptions[activeIndex]?.value}`
+                : undefined
+            }
+            hasClearIcon
+            onChange={handleInputChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            data-testid={testId}
+          />
+          {showPopover && !portal && listContent}
+        </div>
+      </PopoverPrimitive.Anchor>
+
+      {portal && (
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            onInteractOutside={(e) => e.preventDefault()}
+            onFocusOutside={(e) => e.preventDefault()}
+            side="bottom"
+            align="start"
+            sideOffset={-12}
+            style={{ width: "var(--radix-popover-trigger-width)" }}
+          >
+            {listContent}
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      )}
+    </PopoverPrimitive.Root>
+  );
+}
+
+// forwardRef with generics requires a manual cast
+const AutoComplete = forwardRef(AutoCompleteInner) as <
+  T extends AutoCompleteOption = AutoCompleteOption,
+>(
+  props: AutoCompleteProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },
+) => ReturnType<typeof AutoCompleteInner>;
+
+(AutoComplete as { displayName?: string }).displayName = "AutoComplete";
+
+export default AutoComplete;

package/src/components/AutoComplete/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./AutoComplete";
+export type { AutoCompleteProps, AutoCompleteOption } from "./AutoComplete";

package/src/components/Dialog/Dialog.tsx

@@ -55,6 +55,10 @@ const DialogContent = React.forwardRef<
           className,
         )}
         {...props}
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          props?.onOpenAutoFocus?.(event);
+        }}
         onCloseAutoFocus={(event) => {
           event.preventDefault();
           document.body.style.pointerEvents = "auto";

package/src/components/TextInput/TextInput.tsx

@@ -7,6 +7,7 @@ import React, {
   FocusEvent,
   KeyboardEvent,
   ChangeEvent,
+  MouseEvent,
 } from "react";
 import { useStableMergedRef } from "@/utils/mergeRefs";
 import {
@@ -231,16 +232,20 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         ? format(props.value)
         : props.value;
 
-    const handleClearInput = useCallback(() => {
-      if (inputRef.current) {
-        inputRef.current.value = "";
+    const handleClearInput = useCallback(
+      (e: MouseEvent<SVGSVGElement>) => {
+        e.preventDefault();
+        if (inputRef.current) {
+          inputRef.current.value = "";
 
-        if (props.onChange) {
-          const event = new Event("input", { bubbles: true });
-          props.onChange({ target: { value: "" } } as any);
+          if (props.onChange) {
+            const event = new Event("input", { bubbles: true });
+            props.onChange({ target: { value: "" } } as any);
+          }
         }
-      }
-    }, [props.onChange]);
+      },
+      [props.onChange],
+    );
 
     const handleOnClickLeftSectionIcon = useCallback(() => {
       if (disabled) return;

package/src/index.ts

@@ -12,6 +12,9 @@ export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
+export { menuItemBaseStyles } from "./components/Dropdown/Dropdown";
+export { default as AutoComplete } from "./components/AutoComplete/AutoComplete";
+export type { AutoCompleteProps, AutoCompleteOption } from "./components/AutoComplete/AutoComplete";
 export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";

package/src/theme/themes/variable.css

@@ -50,13 +50,13 @@
   --state-primary-default-skyller: #2563eb;
   --state-primary-hover-xspector: #ddcd00;
   --state-primary-hover-report-xspector-light-mode: #35475b;
-  --state-primary-hover-skyller: #6692f1;
+  --state-primary-hover-skyller: #1e4fbc;
   --state-primary-stroke-xspector: rgba(177 164 0 / 0.48);
   --state-primary-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.64);
   --state-primary-stroke-skyller: rgba(189 189 189 / 0.64);
   --state-primary-hover-bg-xspector: rgba(221 205 0 / 0.08);
   --state-primary-hover-bg-report-xspector-light-mode: rgba(30 50 73 / 0.08);
-  --state-primary-hover-bg-skyller: rgba(102 146 241 / 0.08);
+  --state-primary-hover-bg-skyller: rgba(30 79 188 / 0.08);
   --state-primary-pressed-xspector: #6f6700;
   --state-primary-pressed-report-xspector-light-mode: #152333;
   --state-primary-pressed-skyller: #1e40af;
@@ -71,7 +71,7 @@
   --state-primary-text-outline-skyller: #2563eb;
   --state-primary-text-hover-xspector: #ddcd00;
   --state-primary-text-hover-report-xspector-light-mode: #35475b;
-  --state-primary-text-hover-skyller: #6692f1;
+  --state-primary-text-hover-skyller: #1e4fbc;
   --state-primary-text-pressed-xspector: #6f6700;
   --state-primary-text-pressed-report-xspector-light-mode: #152333;
   --state-primary-text-pressed-skyller: #1e40af;
@@ -80,13 +80,13 @@
   --state-secondary-default-skyller: #171717;
   --state-secondary-hover-xspector: #fafafa;
   --state-secondary-hover-report-xspector-light-mode: #b1a400;
-  --state-secondary-hover-skyller: #424242;
+  --state-secondary-hover-skyller: #000000;
   --state-secondary-stroke-xspector: rgba(236 236 236 / 0.48);
   --state-secondary-stroke-report-xspector-light-mode: rgba(155 143 0 / 0.64);
   --state-secondary-stroke-skyller: rgba(189 189 189 / 0.64);
   --state-secondary-hover-bg-xspector: rgba(250 250 250 / 0.08);
   --state-secondary-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
-  --state-secondary-hover-bg-skyller: rgba(66 66 66 / 0.08);
+  --state-secondary-hover-bg-skyller: rgba(0 0 0 / 0.08);
   --state-secondary-pressed-xspector: #bbbbbb;
   --state-secondary-pressed-report-xspector-light-mode: #6f6700;
   --state-secondary-pressed-skyller: #000000;
@@ -101,7 +101,7 @@
   --state-secondary-text-outline-skyller: #171717;
   --state-secondary-text-hover-xspector: #fafafa;
   --state-secondary-text-hover-report-xspector-light-mode: #b1a400;
-  --state-secondary-text-hover-skyller: #424242;
+  --state-secondary-text-hover-skyller: #000000;
   --state-secondary-text-pressed-xspector: #c5c5c5;
   --state-secondary-text-pressed-report-xspector-light-mode: #6f6700;
   --state-secondary-text-pressed-skyller: #000000;
@@ -110,13 +110,13 @@
   --state-tertiary-default-skyller: #60a5fa;
   --state-tertiary-hover-xspector: #adcad6;
   --state-tertiary-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-hover-skyller: #90c0fc;
+  --state-tertiary-hover-skyller: #4d84c8;
   --state-tertiary-stroke-xspector: rgba(138 162 171 / 0.48);
   --state-tertiary-stroke-report-xspector-light-mode: rgba(79 79 79 / 0.48);
   --state-tertiary-stroke-skyller: rgba(189 189 189 / 0.48);
   --state-tertiary-hover-bg-xspector: rgba(173 202 214 / 0.08);
   --state-tertiary-hover-bg-report-xspector-light-mode: rgba(158 158 158 / 0.08);
-  --state-tertiary-hover-bg-skyller: rgba(144 192 252 / 0.08);
+  --state-tertiary-hover-bg-skyller: rgba(77 132 200 / 0.08);
   --state-tertiary-pressed-xspector: #57656b;
   --state-tertiary-pressed-report-xspector-light-mode: #b1b1b1;
   --state-tertiary-pressed-skyller: #1e40af;
@@ -131,7 +131,7 @@
   --state-tertiary-text-outline-skyller: #60a5fa;
   --state-tertiary-text-hover-xspector: #adcad6;
   --state-tertiary-text-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-text-hover-skyller: #90c0fc;
+  --state-tertiary-text-hover-skyller: #4d84c8;
   --state-tertiary-text-pressed-xspector: #57656b;
   --state-tertiary-text-pressed-report-xspector-light-mode: #b1b1b1;
   --state-tertiary-text-pressed-skyller: #1e40af;
@@ -140,13 +140,13 @@
   --state-info-default-skyller: #2563eb;
   --state-info-hover-xspector: #2998ff;
   --state-info-hover-report-xspector-light-mode: #2998ff;
-  --state-info-hover-skyller: #6692f1;
+  --state-info-hover-skyller: #1d4ed8;
   --state-info-stroke-xspector: rgba(27 125 245 / 0.48);
   --state-info-stroke-report-xspector-light-mode: rgba(41 152 255 / 0.48);
   --state-info-stroke-skyller: rgba(37 99 235 / 0.48);
   --state-info-hover-bg-xspector: rgba(41 152 255 / 0.08);
   --state-info-hover-bg-report-xspector-light-mode: rgba(41 152 255 / 0.08);
-  --state-info-hover-bg-skyller: rgba(102 146 241 / 0.08);
+  --state-info-hover-bg-skyller: rgba(29 78 216 / 0.08);
   --state-info-pressed-xspector: #1752b6;
   --state-info-pressed-report-xspector-light-mode: #1752b6;
   --state-info-pressed-skyller: #1e40af;
@@ -161,7 +161,7 @@
   --state-info-text-outline-skyller: #2563eb;
   --state-info-text-hover-xspector: #2998ff;
   --state-info-text-hover-report-xspector-light-mode: #2998ff;
-  --state-info-text-hover-skyller: #6692f1;
+  --state-info-text-hover-skyller: #1d4ed8;
   --state-info-text-pressed-xspector: #1752b6;
   --state-info-text-pressed-report-xspector-light-mode: #1752b6;
   --state-info-text-pressed-skyller: #1e40af;
@@ -170,13 +170,13 @@
   --state-success-default-skyller: #16a34a;
   --state-success-hover-xspector: #54d62c;
   --state-success-hover-report-xspector-light-mode: #54d62c;
-  --state-success-hover-skyller: #4ade80;
+  --state-success-hover-skyller: #15803d;
   --state-success-stroke-xspector: rgba(49 153 23 / 0.48);
   --state-success-stroke-report-xspector-light-mode: rgba(68 192 34 / 0.48);
   --state-success-stroke-skyller: rgba(22 163 74 / 0.48);
   --state-success-hover-bg-xspector: rgba(84 214 44 / 0.08);
   --state-success-hover-bg-report-xspector-light-mode: rgba(84 214 44 / 0.08);
-  --state-success-hover-bg-skyller: rgba(74 222 128 / 0.08);
+  --state-success-hover-bg-skyller: rgba(21 128 61 / 0.08);
   --state-success-pressed-xspector: #235d17;
   --state-success-pressed-report-xspector-light-mode: #235d17;
   --state-success-pressed-skyller: #166534;
@@ -191,7 +191,7 @@
   --state-success-text-outline-skyller: #16a34a;
   --state-success-text-hover-xspector: #54d62c;
   --state-success-text-hover-report-xspector-light-mode: #54d62c;
-  --state-success-text-hover-skyller: #4ade80;
+  --state-success-text-hover-skyller: #15803d;
   --state-success-text-pressed-xspector: #235d17;
   --state-success-text-pressed-report-xspector-light-mode: #235d17;
   --state-success-text-pressed-skyller: #166534;
@@ -200,13 +200,13 @@
   --state-warning-default-skyller: #f59e0b;
   --state-warning-hover-xspector: #ffdf1b;
   --state-warning-hover-report-xspector-light-mode: #ffdf1b;
-  --state-warning-hover-skyller: #fbbf24;
+  --state-warning-hover-skyller: #d97706;
   --state-warning-stroke-xspector: rgba(255 193 7 / 0.48);
   --state-warning-stroke-report-xspector-light-mode: rgba(255 223 27 / 0.48);
   --state-warning-stroke-skyller: rgba(245 158 11 / 0.48);
   --state-warning-hover-bg-xspector: rgba(255 193 7 / 0.08);
   --state-warning-hover-bg-report-xspector-light-mode: rgba(255 193 7 / 0.08);
-  --state-warning-hover-bg-skyller: rgba(251 191 36 / 0.08);
+  --state-warning-hover-bg-skyller: rgba(217 119 6 / 0.08);
   --state-warning-pressed-xspector: #985108;
   --state-warning-pressed-report-xspector-light-mode: #985108;
   --state-warning-pressed-skyller: #d97706;
@@ -221,22 +221,22 @@
   --state-warning-text-outline-skyller: #f59e0b;
   --state-warning-text-hover-xspector: #ffdf1b;
   --state-warning-text-hover-report-xspector-light-mode: #ffdf1b;
-  --state-warning-text-hover-skyller: #fbbf24;
+  --state-warning-text-hover-skyller: #d97706;
   --state-warning-text-pressed-xspector: #985108;
   --state-warning-text-pressed-report-xspector-light-mode: #985108;
-  --state-warning-text-pressed-skyller: #d97706;
+  --state-warning-text-pressed-skyller: #92400e;
   --state-error-default-xspector: #ff4d35;
   --state-error-default-report-xspector-light-mode: #ed2f15;
   --state-error-default-skyller: #ef4444;
   --state-error-hover-xspector: #f87171;
   --state-error-hover-report-xspector-light-mode: #ff4d35;
-  --state-error-hover-skyller: #f87171;
+  --state-error-hover-skyller: #b91c1c;
   --state-error-stroke-xspector: rgba(255 77 53 / 0.48);
   --state-error-stroke-report-xspector-light-mode: rgba(237 47 21 / 0.64);
   --state-error-stroke-skyller: rgba(220 38 38 / 0.64);
   --state-error-hover-bg-xspector: rgba(248 113 113 / 0.08);
   --state-error-hover-bg-report-xspector-light-mode: rgba(255 77 53 / 0.08);
-  --state-error-hover-bg-skyller: rgba(248 113 113 / 0.08);
+  --state-error-hover-bg-skyller: rgba(185 28 28 / 0.08);
   --state-error-pressed-xspector: #a5210f;
   --state-error-pressed-report-xspector-light-mode: #a5210f;
   --state-error-pressed-skyller: #991b1b;
@@ -251,7 +251,7 @@
   --state-error-text-outline-skyller: #dc2626;
   --state-error-text-hover-xspector: #f87171;
   --state-error-text-hover-report-xspector-light-mode: #ff4d35;
-  --state-error-text-hover-skyller: #f87171;
+  --state-error-text-hover-skyller: #b91c1c;
   --state-error-text-pressed-xspector: #a5210f;
   --state-error-text-pressed-report-xspector-light-mode: #a5210f;
   --state-error-text-pressed-skyller: #991b1b;
@@ -872,13 +872,13 @@
   --function-default-solid-skyller: #171717;
   --function-default-hover-xspector: #fafafa;
   --function-default-hover-report-xspector-light-mode: #35475b;
-  --function-default-hover-skyller: #424242;
+  --function-default-hover-skyller: #000000;
   --function-default-hover-bg-xspector: rgba(250 250 250 / 0.08);
   --function-default-hover-bg-report-xspector-light-mode: rgba(30 50 73 / 0.08);
   --function-default-hover-bg-skyller: rgba(23 23 23 / 0.08);
   --function-default-stroke-xspector: rgba(158 158 158 / 0.24);
   --function-default-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.48);
-  --function-default-stroke-skyller: rgba(189 189 189 / 0.48);
+  --function-default-stroke-skyller: rgba(0 0 0 / 0.48);
   --function-default-icon-xspector: #212b36;
   --function-default-icon-report-xspector-light-mode: #ffffff;
   --function-default-icon-skyller: #ffffff;
@@ -890,13 +890,13 @@
   --function-active-solid-skyller: #2563eb;
   --function-active-hover-xspector: #ddcd00;
   --function-active-hover-report-xspector-light-mode: #b1a400;
-  --function-active-hover-skyller: #5182ef;
+  --function-active-hover-skyller: #1e4fbc;
   --function-active-hover-bg-xspector: rgba(221 205 0 / 0.08);
   --function-active-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
   --function-active-hover-bg-skyller: rgba(81 130 239 / 0.08);
   --function-active-stroke-xspector: rgba(177 164 0 / 0.48);
   --function-active-stroke-report-xspector-light-mode: rgba(177 164 0 / 0.48);
-  --function-active-stroke-skyller: rgba(37 99 235 / 0.48);
+  --function-active-stroke-skyller: rgba(30 79 188 / 0.48);
   --function-active-icon-xspector: #212b36;
   --function-active-icon-report-xspector-light-mode: #ffffff;
   --function-active-icon-skyller: #ffffff;
@@ -1055,7 +1055,7 @@
   --bg-stroke5-skyller: #000000;
   --table-bg-main-xspector: #091a2a;
   --table-bg-main-report-xspector-light-mode: #e5e5e5;
-  --table-bg-main-skyller: #d4d4d6;
+  --table-bg-main-skyller: #bfdbfd;
   --table-bg-line-xspector: #1c3955;
   --table-bg-line-report-xspector-light-mode: #d2d2d2;
   --table-bg-line-skyller: #ececec;
@@ -1064,13 +1064,13 @@
   --table-bg-a-skyller: #fdfdfd;
   --table-bg-b-xspector: #0f2f50;
   --table-bg-b-report-xspector-light-mode: #f3f3f3;
-  --table-bg-b-skyller: #f1f1f1;
+  --table-bg-b-skyller: #eff6ff;
   --table-panel-hover-xspector: #343638;
   --table-panel-hover-report-xspector-light-mode: #d4d4d4;
-  --table-panel-hover-skyller: #eff6fe;
+  --table-panel-hover-skyller: #dfedfe;
   --table-bg-hover-xspector: #103861;
   --table-bg-hover-report-xspector-light-mode: #ffffff;
-  --table-bg-hover-skyller: #eff6fe;
+  --table-bg-hover-skyller: #cfe4fd;
   --table-panel-sub-line-xspector: #393b3f;
   --table-panel-sub-line-report-xspector-light-mode: #d4d4d4;
   --table-panel-sub-line-skyller: #ececec;
@@ -1079,7 +1079,7 @@
   --table-panel-main-line-skyller: #d4d4d4;
   --table-panel-selected-xspector: #6f6700;
   --table-panel-selected-report-xspector-light-mode: #d4d4d4;
-  --table-panel-selected-skyller: #bfdbfd;
+  --table-panel-selected-skyller: #afd2fd;
   --modal-dropdown-surface-xspector: #252628;
   --modal-dropdown-surface-report-xspector-light-mode: #ffffff;
   --modal-dropdown-surface-skyller: #ffffff;