@hsu-react/ui 0.0.13 → 0.0.14

package/src/components/FormItem/index.tsx

@@ -38,14 +38,14 @@ import React from "react";
 export { ItemContainer as FormItemContainer };
 export type { ItemContainerProps as FormItemContainerProps };
 
-// 公共基础类型
+// Common base type
 interface BaseFormItem {
   visible?: boolean;
 }
 
-// 核心映射（按分组排序）
+// Core mapping (sorted by group)
 type FormItemMap = {
-  // 输入类
+  // Input types
   AUTO: FormAutoProps;
   INPUT: FormInputProps;
   TEXTAREA: FormTextAreaInputProps;
@@ -58,7 +58,7 @@ type FormItemMap = {
   CODEMIRROR: FormCodeMirrorProps;
   TEXT: FormTextProps;
 
-  // 选择类
+  // Selection types
   SELECT: FormSelectProps;
   TREESELECT: FormTreeSelectProps;
   AUTOCOMPLETESELECT: FormAutoCompleteSelectProps;
@@ -73,22 +73,22 @@ type FormItemMap = {
   TREE: FormTreeProps;
   ICONSELECT: FormIconSelectProps;
 
-  // 上传类
+  // Upload types
   FILE: FormUploadProps;
   IMAGEFILE: FormImageProps;
 };
 
-// 派生类型
+// Derived type
 export type FormItemType = keyof FormItemMap;
 
-// 表单项属性
+// Form item props
 export type FormItemProps = {
   [K in keyof FormItemMap]: { type: K } & BaseFormItem & FormItemMap[K];
 }[keyof FormItemMap];
 
-// 中文字典
+// Chinese dictionary
 export const PlaceholderDict: Record<FormItemType, string> = {
-  // 输入类
+  // Input types
   AUTO: "",
   INPUT: "请输入",
   TEXTAREA: "请输入",
@@ -101,7 +101,7 @@ export const PlaceholderDict: Record<FormItemType, string> = {
   CODEMIRROR: "请输入",
   TEXT: "请输入",
 
-  // 选择类
+  // Selection types
   SELECT: "请选择",
   TREESELECT: "请选择",
   AUTOCOMPLETESELECT: "请选择",
@@ -116,14 +116,14 @@ export const PlaceholderDict: Record<FormItemType, string> = {
   TREE: "请选择",
   ICONSELECT: "请选择",
 
-  // 上传类
+  // Upload types
   FILE: "请上传",
   IMAGEFILE: "请上传",
 };
 
-// 英文字典
+// English dictionary
 export const PlaceholderDictEn: Record<FormItemType, string> = {
-  // 输入类
+  // Input types
   AUTO: "",
   INPUT: "Please enter",
   TEXTAREA: "Please enter",
@@ -136,7 +136,7 @@ export const PlaceholderDictEn: Record<FormItemType, string> = {
   CODEMIRROR: "Please enter",
   TEXT: "Please enter",
 
-  // 选择类
+  // Selection types
   SELECT: "Please select",
   TREESELECT: "Please select",
   AUTOCOMPLETESELECT: "Please select",
@@ -151,7 +151,7 @@ export const PlaceholderDictEn: Record<FormItemType, string> = {
   TREE: "Please select",
   ICONSELECT: "Please select",
 
-  // 上传类
+  // Upload types
   FILE: "Please upload",
   IMAGEFILE: "Please upload",
 };

package/src/components/Icon/index.tsx

@@ -16,7 +16,7 @@ type AntdNamedIconComponent = React.ForwardRefExoticComponent<
   } & React.RefAttributes<HTMLSpanElement>
 >;
 
-/** 判断是否为 AntD 图标组件名（如 "SettingOutlined"），并返回对应组件 */
+/** Check whether it is an AntD icon component name (e.g. "SettingOutlined") and return the corresponding component */
 const getAntdIcon = (
   icon: unknown
 ): AntdNamedIconComponent | undefined => {
@@ -61,7 +61,7 @@ const Icon: React.FC<IconProps> = (props) => {
     ...style,
   };
 
-  // 兼容 AntD 图标名（如 "SettingOutlined"），直接渲染对应 AntD 图标组件
+  // Support AntD icon names (e.g. "SettingOutlined") by rendering the corresponding AntD icon component directly
   const AntdNamedIcon = getAntdIcon(icon);
   if (AntdNamedIcon) {
     return (
@@ -74,8 +74,8 @@ const Icon: React.FC<IconProps> = (props) => {
     );
   }
 
-  // iconify 图标：直接用 span 承载 Iconify 自带的 svg，避免把它嵌套进 antd Icon
-  // 的 svg（其 viewBox 会把内层 svg 缩放成极小值导致图标不可见）。
+  // Iconify icons: host Iconify's own svg directly in a span, instead of nesting it inside
+  // the antd Icon's svg (whose viewBox would scale the inner svg down so much the icon becomes invisible).
   return (
     <span
       {...iconConfig}

package/src/components/Input/Number/index.module.scss

@@ -65,11 +65,11 @@
     }
   }
 
-  // 当存在 addonAfter 时，调整清除图标位置
-  // Ant Design 的 addonAfter 会生成 :global(.ant-input-number-group-addon)
-  // 清除图标需要向左偏移，避免与 addon 重叠
-  // 使用 CSS 变量来动态设置 addon 宽度，默认值 60px 是合理的估算
-  // 通过 JS 动态计算实际宽度并设置 CSS 变量来覆盖
+  // Adjust the clear icon position when addonAfter is present
+  // Ant Design's addonAfter generates :global(.ant-input-number-group-addon)
+  // The clear icon needs to shift left to avoid overlapping the addon
+  // Use a CSS variable to set the addon width dynamically; the default 60px is a reasonable estimate
+  // JS computes the actual width and sets the CSS variable to override it
   &.hasAddonAfter {
     .clearIcon {
       right: calc(11px + var(--addon-after-width, 60px));

package/src/components/Input/Number/index.tsx

@@ -36,7 +36,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
   const ref = useRef<HTMLInputElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
     value !== undefined
       ? typeof value === "number"
@@ -67,7 +67,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
   );
 
   useEffect(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
 
@@ -77,7 +77,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         setValue(newValue);
         setLastValue(newValue);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -88,7 +88,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
     getRef?.(ref.current);
   }, [getRef]);
 
-  // 动态计算 addonAfter 的宽度，并设置 CSS 变量
+  // Dynamically compute the width of addonAfter and set the CSS variable
   useEffect(() => {
     if (addonAfter && wrapperRef.current) {
       const updateAddonWidth = () => {
@@ -103,12 +103,12 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         }
       };
 
-      // 使用 requestAnimationFrame 确保 DOM 渲染完成后再计算
+      // Use requestAnimationFrame to ensure the DOM has rendered before computing
       const rafId = requestAnimationFrame(() => {
         updateAddonWidth();
       });
 
-      // 监听窗口大小变化和元素大小变化，重新计算
+      // Observe window and element size changes to recompute
       const resizeObserver = new ResizeObserver(() => {
         updateAddonWidth();
       });

package/src/components/Input/Password/index.tsx

@@ -22,7 +22,7 @@ const Password: React.FC<PasswordProps> = (props) => {
   const [isComposing, setComposing] = useState<boolean>(false);
   const ref = useRef<InputRef>(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
     value !== undefined
       ? value?.toString() ?? ""
@@ -44,7 +44,7 @@ const Password: React.FC<PasswordProps> = (props) => {
   }, [_value, isComposing, lastValue, onChange]);
 
   useEffect(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
 
@@ -52,7 +52,7 @@ const Password: React.FC<PasswordProps> = (props) => {
         setValue(value?.toString());
         setLastValue(value?.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }

package/src/components/Input/Range/index.module.scss

@@ -56,9 +56,9 @@
 
       &.focused,
       &:hover {
-        border-color: #1677ff;
+        border-color: var(--primary-color);
 
-        box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 10%, transparent);
       }
     }
 

package/src/components/Input/Range/index.tsx

@@ -61,7 +61,7 @@ const RangeInput: React.FC<RangeInputProps> = (props) => {
     disabled,
   } = props;
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value : defaultValue;
 
   const [_value, setValue] = useState<Value | undefined>(initialValue);
@@ -70,7 +70,7 @@ const RangeInput: React.FC<RangeInputProps> = (props) => {
   const prevValueRef = React.useRef<Value | undefined>(undefined);
 
   useEffect(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (!Equal.ObjEqual(prevValueRef.current, value)) {
       prevValueRef.current = value;
 
@@ -78,7 +78,7 @@ const RangeInput: React.FC<RangeInputProps> = (props) => {
         setValue(value);
         setLastValue(value);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue(undefined);
         setLastValue(undefined);
       }

package/src/components/Input/Search/index.tsx

@@ -20,7 +20,7 @@ const Search: React.FC<SearchProps> = (props) => {
   const [isComposing, setComposing] = useState<boolean>(false);
   const ref = useRef<InputRef>(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
     value !== undefined
       ? value?.toString() ?? ""
@@ -42,7 +42,7 @@ const Search: React.FC<SearchProps> = (props) => {
   }, [_value, isComposing, lastValue, onChange]);
 
   useEffect(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
 
@@ -50,7 +50,7 @@ const Search: React.FC<SearchProps> = (props) => {
         setValue(value?.toString());
         setLastValue(value?.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }

package/src/components/Input/TextArea/index.module.scss

@@ -9,7 +9,7 @@
   min-width: 0;
   height: max-content;
 
-  // CF 风格：随外观切换的描边输入控件
+  // CF style: outlined input control that follows the appearance theme
   background: var(--cf-surface);
 
   border-width: 1px;
@@ -86,7 +86,7 @@
           position: relative;
           bottom: auto;
 
-          color: #909399;
+          color: var(--cf-text-2);
           font-size: 14px;
         }
 
@@ -113,13 +113,13 @@
   &:not(.hasError).focused {
     border-color: var(--primary-color);
 
-    box-shadow: 0 0 0 2px rgba(19, 194, 194, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
   }
 
   &.hasError {
-    border-color: #ff4d4f;
+    border-color: var(--cf-error);
 
-    box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-error) 6%, transparent);
 
     :global(.ant-input-status-error) {
       border: none !important;

package/src/components/Input/TextArea/index.tsx

@@ -47,7 +47,7 @@ const TextArea: React.FC<TextAreaProps> = (props) => {
   const ref = useRef<TextAreaRef>(null);
   const [focused, setFocused] = useState<boolean>(false);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue =
     value !== undefined
       ? value?.toString() ?? ""
@@ -70,7 +70,7 @@ const TextArea: React.FC<TextAreaProps> = (props) => {
   }, [isComposing, onChange, _value, lastValue]);
 
   useEffect(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
 
@@ -78,7 +78,7 @@ const TextArea: React.FC<TextAreaProps> = (props) => {
         setValue(value?.toString());
         setLastValue(value?.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -90,7 +90,7 @@ const TextArea: React.FC<TextAreaProps> = (props) => {
   }, [getRef]);
 
   useEffect(() => {
-    // 使用 MutationObserver 监听错误状态变化
+    // Use a MutationObserver to watch for error state changes
     const checkError = () => {
       if (ref.current?.resizableTextArea?.textArea) {
         const textAreaElement = ref.current.resizableTextArea.textArea;
@@ -101,10 +101,10 @@ const TextArea: React.FC<TextAreaProps> = (props) => {
       }
     };
 
-    // 初始检查
+    // Initial check
     checkError();
 
-    // 监听 DOM 变化
+    // Observe DOM changes
     if (ref.current?.resizableTextArea?.textArea) {
       const textAreaElement = ref.current.resizableTextArea.textArea;
       const observer = new MutationObserver(checkError);

package/src/components/Input/index.module.scss

@@ -1,8 +1,8 @@
 .antdInput {
   width: 100%;
   height: 100%;
-  // 父级未给定高度时（height:100% 解析为 auto），保证最小高度，避免输入框被压扁；
-  // 内部 .ant-input-wrapper / .ant-input 通过 min-height: inherit 继承该值。
+  // When the parent has no set height (height:100% resolves to auto), ensure a minimum height so the input is not squashed;
+  // the inner .ant-input-wrapper / .ant-input inherit this value via min-height: inherit.
   min-height: 32px;
 
   :global(.ant-input-clear-icon) {

package/src/components/Input/index.tsx

@@ -55,7 +55,7 @@ const Input: InputFC = (props) => {
   const [isComposing, setComposing] = useState<boolean>(false);
   const ref = useRef<InputRef>(null);
 
-  // 处理转义：如果值中包含 escapeCharacters 中的字符，则在前面加上转义
+  // Handle escaping: if the value contains characters listed in escapeCharacters, prefix them with an escape
   const escapeValue = useCallback(
     (val: string): string => {
       if (!escapeCharacters || escapeCharacters.length === 0) {
@@ -66,19 +66,19 @@ const Input: InputFC = (props) => {
       let i = 0;
       while (i < val.length) {
         const char = val[i];
-        // 检查是否是转义字符，且下一个字符是需要转义的字符
+        // Check if this is an escape character and the next character is one that needs escaping
         if (char === "\\" && i + 1 < val.length) {
           const nextChar = val[i + 1];
-          // 如果下一个字符是需要转义的字符，说明已经转义过了，直接添加
+          // If the next character is one that needs escaping, it is already escaped; append as is
           if (escapeCharacters.includes(nextChar)) {
             result += char + nextChar;
             i += 2;
             continue;
           }
         }
-        // 如果当前字符是需要转义的字符，且前面没有转义符，则添加转义符
+        // If the current character needs escaping and is not already preceded by an escape, add the escape character
         if (escapeCharacters.includes(char)) {
-          // 检查前面是否已经有转义符（避免重复转义）
+          // Check whether an escape character already precedes it (avoid double escaping)
           if (i === 0 || val[i - 1] !== "\\") {
             result += "\\" + char;
           } else {
@@ -94,7 +94,7 @@ const Input: InputFC = (props) => {
     [escapeCharacters],
   );
 
-  // 处理去转义：如果值中包含转义格式，则去除转义
+  // Handle unescaping: if the value contains escaped sequences, remove the escapes
   const unescapeValue = useCallback(
     (val: string): string => {
       if (!escapeCharacters || escapeCharacters.length === 0) {
@@ -105,11 +105,11 @@ const Input: InputFC = (props) => {
       let i = 0;
       while (i < val.length) {
         const char = val[i];
-        // 如果当前字符是反斜杠，且下一个字符是需要转义的字符
+        // If the current character is a backslash and the next character is one that needs escaping
         if (char === "\\" && i + 1 < val.length) {
           const nextChar = val[i + 1];
           if (escapeCharacters.includes(nextChar)) {
-            // 跳过反斜杠，只添加需要转义的字符
+            // Skip the backslash and append only the escaped character
             result += nextChar;
             i += 2;
             continue;
@@ -123,7 +123,7 @@ const Input: InputFC = (props) => {
     [escapeCharacters],
   );
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const getInitialValue = () => {
     const rawValue =
       value !== undefined
@@ -150,7 +150,7 @@ const Input: InputFC = (props) => {
         const trimmedValue = _value.trim();
         const finalValue = trimmedValue === "" ? "" : _value;
         setLastValue(finalValue);
-        // 如果设置了 escapeCharacters 且值匹配，则返回转义后的值
+        // If escapeCharacters is set and the value matches, return the escaped value
         const escapedValue = escapeValue(finalValue);
         onChange?.(escapedValue);
       }
@@ -162,19 +162,19 @@ const Input: InputFC = (props) => {
   );
 
   useEffect(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
 
       if (value !== undefined) {
         const rawValue =
           typeof value === "number" ? `${value}` : value?.toString();
-        // 去除转义后再显示
+        // Unescape before displaying
         const newValue = unescapeValue(rawValue);
         setValue(newValue);
         setLastValue(newValue);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -199,7 +199,7 @@ const Input: InputFC = (props) => {
         }}
         value={_value}
         onChange={(e) => {
-          // 用户输入时，先去除转义，然后再设置到状态中
+          // On user input, unescape first, then set into state
           const inputValue = e.target.value;
           const unescapedInput = unescapeValue(inputValue);
           setValue(unescapedInput);

package/src/components/Markdown/Editor/index.module.scss

@@ -6,7 +6,7 @@
   width: 100%;
   height: 100%;
 
-  background: #fff;
+  background: var(--cf-surface);
 
   border-radius: 10px;
 
@@ -31,7 +31,7 @@
     overflow: hidden;
 
     &.disabled {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: var(--cf-subtle);
 
       cursor: no-drop;
 
@@ -46,7 +46,7 @@
           .section {
             textarea,
             .section-container {
-              background: rgba(0, 0, 0, 0.04);
+              background: var(--cf-subtle);
             }
           }
         }

package/src/components/Markdown/Views/ArtifactBlock.tsx

@@ -4,17 +4,17 @@ import classNames from "classnames";
 import styles from "./blocks.module.scss";
 
 export interface ArtifactBlockProps {
-  /** 原始代码（html/svg） */
+  /** Raw source code (html/svg) */
   code: string;
-  /** 语言标记（html / svg） */
+  /** Language tag (html / svg) */
   lang: string;
-  /** 代码视图（沿用外层的高亮代码块渲染） */
+  /** Code view (reuses the outer highlighted code block rendering) */
   codeView: React.ReactNode;
 }
 
 /**
- * HTML/SVG Artifacts 预览块（对标 Claude Artifacts）：代码 / 预览两个页签，
- * 预览在 sandbox iframe（仅 allow-scripts，无同源权限）里渲染模型产出的页面。
+ * HTML/SVG Artifacts preview block (modeled after Claude Artifacts): code / preview tabs;
+ * the preview renders the model-generated page in a sandbox iframe (allow-scripts only, no same-origin access).
  */
 const ArtifactBlock: React.FC<ArtifactBlockProps> = ({ code, lang, codeView }) => {
   const [tab, setTab] = useState<"preview" | "code">("preview");

package/src/components/Markdown/Views/MermaidBlock.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { generateRandomStr } from "hsu-utils";
 import styles from "./blocks.module.scss";
 
-// mermaid 体积大，懒加载并全局只初始化一次
+// mermaid is large; lazy-load it and initialize globally only once
 let mermaidPromise: Promise<typeof import("mermaid")["default"]> | null = null;
 const loadMermaid = () => {
   if (!mermaidPromise) {
@@ -24,8 +24,8 @@ export interface MermaidBlockProps {
 }
 
 /**
- * Mermaid 图渲染块（对标 Claude/Kimi 等的流程图渲染）：
- * 渲染成功显示 SVG；语法不完整（如流式生成中）静默回退为代码展示。
+ * Mermaid diagram rendering block (modeled after the flowchart rendering in Claude/Kimi etc.):
+ * shows SVG on successful render; silently falls back to code display when the syntax is incomplete (e.g. during streaming).
  */
 const MermaidBlock: React.FC<MermaidBlockProps> = ({ code }) => {
   const [svg, setSvg] = useState<string | null>(null);
@@ -40,9 +40,9 @@ const MermaidBlock: React.FC<MermaidBlockProps> = ({ code }) => {
           if (!cancelled) setSvg(rendered);
         })
         .catch(() => {
-          // 流式生成中代码不完整属正常态，回退为代码展示
+          // Incomplete code during streaming is normal; fall back to code display
           if (!cancelled) setSvg(null);
-          // mermaid.render 失败会在 DOM 残留错误占位节点，清理掉
+          // A failed mermaid.render leaves an error placeholder node in the DOM; clean it up
           document.getElementById(`d${id}`)?.remove();
         });
     }, 300);

package/src/components/Markdown/Views/blocks.module.scss

@@ -4,7 +4,7 @@
   padding: 12px;
   margin: 8px 0;
   background: #fff;
-  border: 1px solid #ececee;
+  border: 1px solid var(--cf-border-weak);
   border-radius: 8px;
   overflow-x: auto;
 
@@ -17,7 +17,7 @@
 .mermaidFallback {
   margin: 8px 0;
   padding: 12px;
-  background: #f7f7f8;
+  background: var(--cf-subtle);
   border-radius: 8px;
   overflow-x: auto;
 
@@ -28,7 +28,7 @@
 
 .artifact {
   margin: 8px 0;
-  border: 1px solid #ececee;
+  border: 1px solid var(--cf-border-weak);
   border-radius: 10px;
   overflow: hidden;
 
@@ -37,14 +37,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 6px 12px;
-    background: #f7f7f8;
-    border-bottom: 1px solid #ececee;
+    background: var(--cf-subtle);
+    border-bottom: 1px solid var(--cf-border-weak);
   }
 
   .artifactLang {
     font-size: 12px;
     font-weight: 600;
-    color: #6b6e76;
+    color: var(--cf-text-2);
   }
 
   .artifactTabs {
@@ -58,21 +58,21 @@
     border: none;
     border-radius: 999px;
     background: transparent;
-    color: #6b6e76;
+    color: var(--cf-text-2);
     cursor: pointer;
 
     &:hover {
-      background: #ececee;
+      background: var(--cf-row-hover);
     }
   }
 
   .artifactTabActive {
-    background: #fff;
+    background: var(--cf-surface);
     color: #4f46e5;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--cf-shadow-1);
 
     &:hover {
-      background: #fff;
+      background: var(--cf-surface);
     }
   }
 

package/src/components/Markdown/Views/index.module.scss

@@ -31,7 +31,7 @@
     td {
       padding: 4px 8px;
 
-      border: 1px solid #868686;
+      border: 1px solid var(--cf-border);
     }
   }