@univerjs/sheets-formula-ui 1.0.0-beta.0 → 1.0.0-beta.2

package/lib/cjs/index.js

@@ -717,7 +717,7 @@ function genFormulaRefSelectionStyle(themeService, refColor, id) {
 		},
 		widgetSize: 6,
 		widgetStrokeWidth: 1,
-		widgetStroke: themeService.getColorFromTheme("white")
+		widgetStroke: themeService.getColorFromTheme("gray.0")
 	};
 }
 
@@ -994,7 +994,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-formula-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -1375,7 +1375,7 @@ const useFormulaDescribe = (isNeed, formulaText, editor) => {
 */
 const HelpHiddenTip = ({ onClick }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-z-[15] univer-box-border univer-h-[18px] univer-cursor-pointer univer-overflow-visible univer-whitespace-nowrap univer-rounded-l univer-border univer-border-r-0 univer-border-gray-600 univer-bg-primary-600 univer-p-0.5 univer-text-xs univer-font-bold univer-leading-[13px] univer-text-white",
+		className: "univer-z-[15] univer-box-border univer-h-[18px] univer-cursor-pointer univer-overflow-visible univer-whitespace-nowrap univer-rounded-l univer-border univer-border-r-0 univer-border-gray-600 univer-bg-primary-600 univer-p-0.5 univer-text-xs univer-font-bold univer-leading-[13px] univer-text-gray-0",
 		onClick,
 		children: "?"
 	});
@@ -1387,7 +1387,7 @@ function Params({ className, title, value }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "univer-my-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, _univerjs_design.clsx)("univer-mb-2 univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-white", className),
+			className: (0, _univerjs_design.clsx)("univer-mb-2 univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0", className),
 			children: title
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-whitespace-pre-wrap univer-break-words univer-text-xs univer-text-gray-500",
@@ -1438,9 +1438,9 @@ function HelpFunction(props) {
 		anchorRect$: position$,
 		direction: "vertical",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-m-0 univer-box-border univer-w-[250px] univer-select-none univer-list-none univer-rounded-lg univer-bg-white univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
+			className: (0, _univerjs_design.clsx)("univer-m-0 univer-box-border univer-w-[250px] univer-select-none univer-list-none univer-rounded-lg univer-bg-gray-0 univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-items-center univer-justify-between univer-px-4 univer-py-3 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-white", _univerjs_design.borderTopClassName),
+				className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-items-center univer-justify-between univer-px-4 univer-py-3 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0", _univerjs_design.borderTopClassName),
 				style: { overflowWrap: "anywhere" },
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Help, {
 					prefix: functionInfo.functionName,
@@ -1881,7 +1881,7 @@ function getDefaultRefSelectionStyle(themeService) {
 //#region src/views/formula-editor/hooks/use-formula-selection.ts
 function resolveFormulaSelectionDataStream(accssor, editor, editorId) {
 	var _editor$getDocumentDa, _documentModel$getBod;
-	const editorDataStream = editor === null || editor === void 0 || (_editor$getDocumentDa = editor.getDocumentData().body) === null || _editor$getDocumentDa === void 0 ? void 0 : _editor$getDocumentDa.dataStream;
+	const editorDataStream = editor === null || editor === void 0 || (_editor$getDocumentDa = editor.getDocumentDataModel()) === null || _editor$getDocumentDa === void 0 || (_editor$getDocumentDa = _editor$getDocumentDa.getBody()) === null || _editor$getDocumentDa === void 0 ? void 0 : _editor$getDocumentDa.dataStream;
 	if (editorDataStream != null) return {
 		dataStream: editorDataStream,
 		offset: 0
@@ -2281,7 +2281,7 @@ function useColor() {
 			].map((color) => themeService.isValidThemeColor(color) ? themeService.getColorFromTheme(color) : color),
 			numberColor: themeService.getColorFromTheme("blue.700"),
 			stringColor: themeService.getColorFromTheme("jiqing.800"),
-			plainTextColor: themeService.getColorFromTheme("black")
+			plainTextColor: themeService.getColorFromTheme("gray.1000")
 		};
 	}, [themeService.getCurrentTheme()]);
 }
@@ -3262,9 +3262,9 @@ function SearchFunctionFactory(props, ref) {
 				if (ref) ref.current = v;
 			},
 			"data-u-comp": "sheets-formula-editor",
-			className: (0, _univerjs_design.clsx)("univer-m-0 univer-box-border univer-max-h-[400px] univer-w-[250px] univer-list-none univer-overflow-y-auto univer-rounded-lg univer-bg-white univer-p-2 univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", _univerjs_design.borderClassName, _univerjs_design.scrollbarClassName),
+			className: (0, _univerjs_design.clsx)("univer-m-0 univer-box-border univer-max-h-[400px] univer-w-[250px] univer-list-none univer-overflow-y-auto univer-rounded-lg univer-bg-gray-0 univer-p-2 univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", _univerjs_design.borderClassName, _univerjs_design.scrollbarClassName),
 			children: searchList.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: (0, _univerjs_design.clsx)("univer-box-border univer-cursor-pointer univer-rounded univer-px-2 univer-py-1 univer-text-gray-900 univer-transition-colors dark:!univer-text-white", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
+				className: (0, _univerjs_design.clsx)("univer-box-border univer-cursor-pointer univer-rounded univer-px-2 univer-py-1 univer-text-gray-900 univer-transition-colors dark:!univer-text-gray-0", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
 				onMouseEnter: () => handleLiMouseEnter(index),
 				onMouseLeave: handleLiMouseLeave,
 				onMouseMove: debounceResetMouseState,
@@ -3688,7 +3688,7 @@ function FunctionParams(props) {
 			className: (0, _univerjs_design.clsx)("univer-mb-2 univer-font-medium univer-text-gray-500 dark:!univer-text-gray-300", className),
 			children: title
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-break-all univer-text-gray-900 dark:!univer-text-white",
+			className: "univer-break-all univer-text-gray-900 dark:!univer-text-gray-0",
 			children: value
 		})]
 	});
@@ -3841,7 +3841,7 @@ function SelectFunction(props) {
 			onKeyDown: handleSelectListKeyDown,
 			tabIndex: -1,
 			children: selectList.map(({ name }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7 univer-py-1 univer-text-sm univer-text-gray-900 univer-transition-colors dark:!univer-text-white", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
+				className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7 univer-py-1 univer-text-sm univer-text-gray-900 univer-transition-colors dark:!univer-text-gray-0", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
 				onMouseEnter: () => handleLiMouseEnter(index),
 				onMouseLeave: handleLiMouseLeave,
 				onClick: () => setCurrentFunctionInfo(index),
@@ -3858,7 +3858,7 @@ function SelectFunction(props) {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "univer-rounded-lg univer-bg-gray-50 univer-p-3 dark:!univer-bg-gray-800",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-white",
+						className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-0",
 						children: functionInfo.functionName
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "univer-mt-1 univer-text-xs univer-leading-5 univer-text-gray-600 dark:!univer-text-gray-300",
@@ -3872,7 +3872,7 @@ function SelectFunction(props) {
 						children: localeService.t("sheets-formula-ui.moreFunctions.syntax")
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						"data-u-comp": "formula-function-syntax",
-						className: (0, _univerjs_design.clsx)("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", _univerjs_design.borderClassName),
+						className: (0, _univerjs_design.clsx)("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-gray-0", _univerjs_design.borderClassName),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FunctionHelp, {
 							prefix: functionInfo.functionName,
 							value: functionInfo.functionParameter
@@ -3882,7 +3882,7 @@ function SelectFunction(props) {
 						children: localeService.t("sheets-formula-ui.prompt.helpExample")
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						"data-u-comp": "formula-function-example",
-						className: (0, _univerjs_design.clsx)("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", _univerjs_design.borderClassName),
+						className: (0, _univerjs_design.clsx)("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-gray-0", _univerjs_design.borderClassName),
 						children: `${functionInfo.functionName}(${functionInfo.functionParameter.map((item) => item.example).join(",")})`
 					})] })]
 				}),
@@ -3894,7 +3894,7 @@ function SelectFunction(props) {
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "univer-flex univer-items-center univer-gap-2",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-white",
+								className: "univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0",
 								children: item.name
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: (0, _univerjs_design.clsx)("univer-rounded-full univer-px-2 univer-py-0.5 univer-text-xs univer-leading-4", item.require ? "univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-200" : "univer-bg-gray-100 univer-text-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-200"),
@@ -4193,7 +4193,7 @@ function RangeSelectorDialog(props) {
 		mask: false,
 		maskClosable: false,
 		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
-			className: "univer-flex univer-gap-2 rtl:univer-flex-row-reverse",
+			className: "univer-flex univer-gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
 				onClick: onClose,
 				children: localeService.t("sheets-formula-ui.rangeSelector.cancel")
@@ -4216,7 +4216,7 @@ function RangeSelectorDialog(props) {
 			ref: scrollbarRef,
 			className: (0, _univerjs_design.clsx)("-univer-mx-6 univer-max-h-60 univer-overflow-y-auto univer-px-6", _univerjs_design.scrollbarClassName),
 			children: [ranges.map((text, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-mb-2 univer-flex univer-items-center univer-gap-4 rtl:univer-flex-row-reverse",
+				className: "univer-mb-2 univer-flex univer-items-center univer-gap-4",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 					className: (0, _univerjs_design.clsx)("univer-w-full", { "univer-border-primary-600": focusIndex === index }),
 					placeholder: localeService.t("sheets-formula-ui.rangeSelector.placeHolder"),
@@ -4315,6 +4315,7 @@ function RangeSelector(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!hideEditor ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_docs_ui.RichTextEditor, {
 		isSingle: true,
 		...props,
+		className: (0, _univerjs_design.clsx)(props.className, "rtl:[&>div]:univer-flex-row-reverse"),
 		preserveHostFocus: true,
 		onFocusChange: (focusing, newValue) => {
 			setFocusing(focusing);
@@ -4330,7 +4331,7 @@ function RangeSelector(props) {
 			title: localeService.t("sheets-formula-ui.rangeSelector.buttonTooltip"),
 			placement: "bottom",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SelectRangeIcon, {
-				className: "univer-cursor-pointer dark:!univer-text-gray-300",
+				className: "-univer-translate-y-0.5 univer-cursor-pointer dark:!univer-text-gray-300",
 				onClick: handleOpenModal
 			})
 		})
@@ -4985,7 +4986,7 @@ let FormulaEditorShowController = class FormulaEditorShowController extends _uni
 			style: {
 				strokeWidth: 1,
 				stroke: this._themeService.getColorFromTheme("primary.600"),
-				fill: new _univerjs_core.ColorKit(this._themeService.getColorFromTheme("white")).setAlpha(0).toString(),
+				fill: new _univerjs_core.ColorKit(this._themeService.getColorFromTheme("gray.0")).setAlpha(0).toString(),
 				widgets: {}
 			}
 		}, skeleton);

package/lib/cjs/locale/ru-RU.js

@@ -44,7 +44,7 @@ const locale = { "sheets-formula-ui": {
 		array: "Массив",
 		univer: "Универсальные",
 		user: "Пользовательские",
-		definedname: "Defined Name"
+		definedname: "Определенное имя"
 	},
 	moreFunctions: {
 		confirm: "Подтвердить",

package/lib/es/index.js

@@ -716,7 +716,7 @@ function genFormulaRefSelectionStyle(themeService, refColor, id) {
 		},
 		widgetSize: 6,
 		widgetStrokeWidth: 1,
-		widgetStroke: themeService.getColorFromTheme("white")
+		widgetStroke: themeService.getColorFromTheme("gray.0")
 	};
 }
 
@@ -993,7 +993,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-formula-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -1374,7 +1374,7 @@ const useFormulaDescribe = (isNeed, formulaText, editor) => {
 */
 const HelpHiddenTip = ({ onClick }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: "univer-z-[15] univer-box-border univer-h-[18px] univer-cursor-pointer univer-overflow-visible univer-whitespace-nowrap univer-rounded-l univer-border univer-border-r-0 univer-border-gray-600 univer-bg-primary-600 univer-p-0.5 univer-text-xs univer-font-bold univer-leading-[13px] univer-text-white",
+		className: "univer-z-[15] univer-box-border univer-h-[18px] univer-cursor-pointer univer-overflow-visible univer-whitespace-nowrap univer-rounded-l univer-border univer-border-r-0 univer-border-gray-600 univer-bg-primary-600 univer-p-0.5 univer-text-xs univer-font-bold univer-leading-[13px] univer-text-gray-0",
 		onClick,
 		children: "?"
 	});
@@ -1386,7 +1386,7 @@ function Params({ className, title, value }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "univer-my-2",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: clsx("univer-mb-2 univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-white", className),
+			className: clsx("univer-mb-2 univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0", className),
 			children: title
 		}), /* @__PURE__ */ jsx("div", {
 			className: "univer-whitespace-pre-wrap univer-break-words univer-text-xs univer-text-gray-500",
@@ -1437,9 +1437,9 @@ function HelpFunction(props) {
 		anchorRect$: position$,
 		direction: "vertical",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: clsx("univer-m-0 univer-box-border univer-w-[250px] univer-select-none univer-list-none univer-rounded-lg univer-bg-white univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", borderClassName),
+			className: clsx("univer-m-0 univer-box-border univer-w-[250px] univer-select-none univer-list-none univer-rounded-lg univer-bg-gray-0 univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", borderClassName),
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: clsx("univer-box-border univer-flex univer-items-center univer-justify-between univer-px-4 univer-py-3 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-white", borderTopClassName),
+				className: clsx("univer-box-border univer-flex univer-items-center univer-justify-between univer-px-4 univer-py-3 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0", borderTopClassName),
 				style: { overflowWrap: "anywhere" },
 				children: [/* @__PURE__ */ jsx(Help, {
 					prefix: functionInfo.functionName,
@@ -1880,7 +1880,7 @@ function getDefaultRefSelectionStyle(themeService) {
 //#region src/views/formula-editor/hooks/use-formula-selection.ts
 function resolveFormulaSelectionDataStream(accssor, editor, editorId) {
 	var _editor$getDocumentDa, _documentModel$getBod;
-	const editorDataStream = editor === null || editor === void 0 || (_editor$getDocumentDa = editor.getDocumentData().body) === null || _editor$getDocumentDa === void 0 ? void 0 : _editor$getDocumentDa.dataStream;
+	const editorDataStream = editor === null || editor === void 0 || (_editor$getDocumentDa = editor.getDocumentDataModel()) === null || _editor$getDocumentDa === void 0 || (_editor$getDocumentDa = _editor$getDocumentDa.getBody()) === null || _editor$getDocumentDa === void 0 ? void 0 : _editor$getDocumentDa.dataStream;
 	if (editorDataStream != null) return {
 		dataStream: editorDataStream,
 		offset: 0
@@ -2280,7 +2280,7 @@ function useColor() {
 			].map((color) => themeService.isValidThemeColor(color) ? themeService.getColorFromTheme(color) : color),
 			numberColor: themeService.getColorFromTheme("blue.700"),
 			stringColor: themeService.getColorFromTheme("jiqing.800"),
-			plainTextColor: themeService.getColorFromTheme("black")
+			plainTextColor: themeService.getColorFromTheme("gray.1000")
 		};
 	}, [themeService.getCurrentTheme()]);
 }
@@ -3261,9 +3261,9 @@ function SearchFunctionFactory(props, ref) {
 				if (ref) ref.current = v;
 			},
 			"data-u-comp": "sheets-formula-editor",
-			className: clsx("univer-m-0 univer-box-border univer-max-h-[400px] univer-w-[250px] univer-list-none univer-overflow-y-auto univer-rounded-lg univer-bg-white univer-p-2 univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", borderClassName, scrollbarClassName),
+			className: clsx("univer-m-0 univer-box-border univer-max-h-[400px] univer-w-[250px] univer-list-none univer-overflow-y-auto univer-rounded-lg univer-bg-gray-0 univer-p-2 univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", borderClassName, scrollbarClassName),
 			children: searchList.map((item, index) => /* @__PURE__ */ jsxs("li", {
-				className: clsx("univer-box-border univer-cursor-pointer univer-rounded univer-px-2 univer-py-1 univer-text-gray-900 univer-transition-colors dark:!univer-text-white", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
+				className: clsx("univer-box-border univer-cursor-pointer univer-rounded univer-px-2 univer-py-1 univer-text-gray-900 univer-transition-colors dark:!univer-text-gray-0", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
 				onMouseEnter: () => handleLiMouseEnter(index),
 				onMouseLeave: handleLiMouseLeave,
 				onMouseMove: debounceResetMouseState,
@@ -3687,7 +3687,7 @@ function FunctionParams(props) {
 			className: clsx("univer-mb-2 univer-font-medium univer-text-gray-500 dark:!univer-text-gray-300", className),
 			children: title
 		}), /* @__PURE__ */ jsx("div", {
-			className: "univer-break-all univer-text-gray-900 dark:!univer-text-white",
+			className: "univer-break-all univer-text-gray-900 dark:!univer-text-gray-0",
 			children: value
 		})]
 	});
@@ -3840,7 +3840,7 @@ function SelectFunction(props) {
 			onKeyDown: handleSelectListKeyDown,
 			tabIndex: -1,
 			children: selectList.map(({ name }, index) => /* @__PURE__ */ jsxs("li", {
-				className: clsx("univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7 univer-py-1 univer-text-sm univer-text-gray-900 univer-transition-colors dark:!univer-text-white", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
+				className: clsx("univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7 univer-py-1 univer-text-sm univer-text-gray-900 univer-transition-colors dark:!univer-text-gray-0", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
 				onMouseEnter: () => handleLiMouseEnter(index),
 				onMouseLeave: handleLiMouseLeave,
 				onClick: () => setCurrentFunctionInfo(index),
@@ -3857,7 +3857,7 @@ function SelectFunction(props) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "univer-rounded-lg univer-bg-gray-50 univer-p-3 dark:!univer-bg-gray-800",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-white",
+						className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-0",
 						children: functionInfo.functionName
 					}), /* @__PURE__ */ jsx("div", {
 						className: "univer-mt-1 univer-text-xs univer-leading-5 univer-text-gray-600 dark:!univer-text-gray-300",
@@ -3871,7 +3871,7 @@ function SelectFunction(props) {
 						children: localeService.t("sheets-formula-ui.moreFunctions.syntax")
 					}), /* @__PURE__ */ jsx("div", {
 						"data-u-comp": "formula-function-syntax",
-						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", borderClassName),
+						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-gray-0", borderClassName),
 						children: /* @__PURE__ */ jsx(FunctionHelp, {
 							prefix: functionInfo.functionName,
 							value: functionInfo.functionParameter
@@ -3881,7 +3881,7 @@ function SelectFunction(props) {
 						children: localeService.t("sheets-formula-ui.prompt.helpExample")
 					}), /* @__PURE__ */ jsx("div", {
 						"data-u-comp": "formula-function-example",
-						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", borderClassName),
+						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-gray-0", borderClassName),
 						children: `${functionInfo.functionName}(${functionInfo.functionParameter.map((item) => item.example).join(",")})`
 					})] })]
 				}),
@@ -3893,7 +3893,7 @@ function SelectFunction(props) {
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "univer-flex univer-items-center univer-gap-2",
 							children: [/* @__PURE__ */ jsx("span", {
-								className: "univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-white",
+								className: "univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0",
 								children: item.name
 							}), /* @__PURE__ */ jsx("span", {
 								className: clsx("univer-rounded-full univer-px-2 univer-py-0.5 univer-text-xs univer-leading-4", item.require ? "univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-200" : "univer-bg-gray-100 univer-text-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-200"),
@@ -4192,7 +4192,7 @@ function RangeSelectorDialog(props) {
 		mask: false,
 		maskClosable: false,
 		footer: /* @__PURE__ */ jsxs("footer", {
-			className: "univer-flex univer-gap-2 rtl:univer-flex-row-reverse",
+			className: "univer-flex univer-gap-2",
 			children: [/* @__PURE__ */ jsx(Button, {
 				onClick: onClose,
 				children: localeService.t("sheets-formula-ui.rangeSelector.cancel")
@@ -4215,7 +4215,7 @@ function RangeSelectorDialog(props) {
 			ref: scrollbarRef,
 			className: clsx("-univer-mx-6 univer-max-h-60 univer-overflow-y-auto univer-px-6", scrollbarClassName),
 			children: [ranges.map((text, index) => /* @__PURE__ */ jsxs("div", {
-				className: "univer-mb-2 univer-flex univer-items-center univer-gap-4 rtl:univer-flex-row-reverse",
+				className: "univer-mb-2 univer-flex univer-items-center univer-gap-4",
 				children: [/* @__PURE__ */ jsx(Input, {
 					className: clsx("univer-w-full", { "univer-border-primary-600": focusIndex === index }),
 					placeholder: localeService.t("sheets-formula-ui.rangeSelector.placeHolder"),
@@ -4314,6 +4314,7 @@ function RangeSelector(props) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [!hideEditor ? /* @__PURE__ */ jsx(RichTextEditor, {
 		isSingle: true,
 		...props,
+		className: clsx(props.className, "rtl:[&>div]:univer-flex-row-reverse"),
 		preserveHostFocus: true,
 		onFocusChange: (focusing, newValue) => {
 			setFocusing(focusing);
@@ -4329,7 +4330,7 @@ function RangeSelector(props) {
 			title: localeService.t("sheets-formula-ui.rangeSelector.buttonTooltip"),
 			placement: "bottom",
 			children: /* @__PURE__ */ jsx(SelectRangeIcon, {
-				className: "univer-cursor-pointer dark:!univer-text-gray-300",
+				className: "-univer-translate-y-0.5 univer-cursor-pointer dark:!univer-text-gray-300",
 				onClick: handleOpenModal
 			})
 		})
@@ -4984,7 +4985,7 @@ let FormulaEditorShowController = class FormulaEditorShowController extends Disp
 			style: {
 				strokeWidth: 1,
 				stroke: this._themeService.getColorFromTheme("primary.600"),
-				fill: new ColorKit(this._themeService.getColorFromTheme("white")).setAlpha(0).toString(),
+				fill: new ColorKit(this._themeService.getColorFromTheme("gray.0")).setAlpha(0).toString(),
 				widgets: {}
 			}
 		}, skeleton);

package/lib/es/locale/ru-RU.js

@@ -43,7 +43,7 @@ const locale = { "sheets-formula-ui": {
 		array: "Массив",
 		univer: "Универсальные",
 		user: "Пользовательские",
-		definedname: "Defined Name"
+		definedname: "Определенное имя"
 	},
 	moreFunctions: {
 		confirm: "Подтвердить",

package/lib/index.css

@@ -161,6 +161,12 @@
   flex: 1;
 }
 
+.-univer-translate-y-0\.5 {
+  --univer-tw-translate-y: -.125rem;
+  transform: translate(var(--univer-tw-translate-x), -.125rem) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
 .-univer-translate-y-1\/2 {
   --univer-tw-translate-y: -50%;
   transform: translate(var(--univer-tw-translate-x), -50%) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
@@ -290,6 +296,10 @@
   background-color: var(--univer-gray-600) !important;
 }
 
+.univer-bg-gray-0 {
+  background-color: var(--univer-gray-0);
+}
+
 .univer-bg-gray-100 {
   background-color: var(--univer-gray-100);
 }
@@ -314,10 +324,6 @@
   background-color: #0000;
 }
 
-.univer-bg-white {
-  background-color: var(--univer-white);
-}
-
 .univer-p-0 {
   padding: 0;
 }
@@ -430,6 +436,10 @@
   line-height: 13px;
 }
 
+.univer-text-gray-0 {
+  color: var(--univer-gray-0);
+}
+
 .univer-text-gray-400 {
   color: var(--univer-gray-400);
 }
@@ -458,10 +468,6 @@
   color: var(--univer-red-500);
 }
 
-.univer-text-white {
-  color: var(--univer-white);
-}
-
 .univer-shadow-md {
   --univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;
   --univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);
@@ -503,10 +509,6 @@
   background-color: var(--univer-gray-300);
 }
 
-.rtl\:univer-flex-row-reverse:where([dir="rtl"], [dir="rtl"] *) {
-  flex-direction: row-reverse;
-}
-
 .dark\:\!univer-bg-gray-600:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-600) !important;
 }
@@ -527,6 +529,10 @@
   background-color: var(--univer-primary-900) !important;
 }
 
+.dark\:\!univer-text-gray-0:where(.univer-dark, .univer-dark *) {
+  color: var(--univer-gray-0) !important;
+}
+
 .dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
   color: var(--univer-gray-200) !important;
 }
@@ -539,10 +545,10 @@
   color: var(--univer-primary-200) !important;
 }
 
-.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
-  color: var(--univer-white) !important;
-}
-
 .dark\:hover\:\!univer-bg-gray-600:hover:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-600) !important;
 }
+
+.rtl\:\[\&\>div\]\:univer-flex-row-reverse > div:where([dir="rtl"], [dir="rtl"] *) {
+  flex-direction: row-reverse;
+}

package/lib/index.js

@@ -716,7 +716,7 @@ function genFormulaRefSelectionStyle(themeService, refColor, id) {
 		},
 		widgetSize: 6,
 		widgetStrokeWidth: 1,
-		widgetStroke: themeService.getColorFromTheme("white")
+		widgetStroke: themeService.getColorFromTheme("gray.0")
 	};
 }
 
@@ -993,7 +993,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-formula-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -1374,7 +1374,7 @@ const useFormulaDescribe = (isNeed, formulaText, editor) => {
 */
 const HelpHiddenTip = ({ onClick }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: "univer-z-[15] univer-box-border univer-h-[18px] univer-cursor-pointer univer-overflow-visible univer-whitespace-nowrap univer-rounded-l univer-border univer-border-r-0 univer-border-gray-600 univer-bg-primary-600 univer-p-0.5 univer-text-xs univer-font-bold univer-leading-[13px] univer-text-white",
+		className: "univer-z-[15] univer-box-border univer-h-[18px] univer-cursor-pointer univer-overflow-visible univer-whitespace-nowrap univer-rounded-l univer-border univer-border-r-0 univer-border-gray-600 univer-bg-primary-600 univer-p-0.5 univer-text-xs univer-font-bold univer-leading-[13px] univer-text-gray-0",
 		onClick,
 		children: "?"
 	});
@@ -1386,7 +1386,7 @@ function Params({ className, title, value }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "univer-my-2",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: clsx("univer-mb-2 univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-white", className),
+			className: clsx("univer-mb-2 univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0", className),
 			children: title
 		}), /* @__PURE__ */ jsx("div", {
 			className: "univer-whitespace-pre-wrap univer-break-words univer-text-xs univer-text-gray-500",
@@ -1437,9 +1437,9 @@ function HelpFunction(props) {
 		anchorRect$: position$,
 		direction: "vertical",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: clsx("univer-m-0 univer-box-border univer-w-[250px] univer-select-none univer-list-none univer-rounded-lg univer-bg-white univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", borderClassName),
+			className: clsx("univer-m-0 univer-box-border univer-w-[250px] univer-select-none univer-list-none univer-rounded-lg univer-bg-gray-0 univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", borderClassName),
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: clsx("univer-box-border univer-flex univer-items-center univer-justify-between univer-px-4 univer-py-3 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-white", borderTopClassName),
+				className: clsx("univer-box-border univer-flex univer-items-center univer-justify-between univer-px-4 univer-py-3 univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0", borderTopClassName),
 				style: { overflowWrap: "anywhere" },
 				children: [/* @__PURE__ */ jsx(Help, {
 					prefix: functionInfo.functionName,
@@ -1880,7 +1880,7 @@ function getDefaultRefSelectionStyle(themeService) {
 //#region src/views/formula-editor/hooks/use-formula-selection.ts
 function resolveFormulaSelectionDataStream(accssor, editor, editorId) {
 	var _editor$getDocumentDa, _documentModel$getBod;
-	const editorDataStream = editor === null || editor === void 0 || (_editor$getDocumentDa = editor.getDocumentData().body) === null || _editor$getDocumentDa === void 0 ? void 0 : _editor$getDocumentDa.dataStream;
+	const editorDataStream = editor === null || editor === void 0 || (_editor$getDocumentDa = editor.getDocumentDataModel()) === null || _editor$getDocumentDa === void 0 || (_editor$getDocumentDa = _editor$getDocumentDa.getBody()) === null || _editor$getDocumentDa === void 0 ? void 0 : _editor$getDocumentDa.dataStream;
 	if (editorDataStream != null) return {
 		dataStream: editorDataStream,
 		offset: 0
@@ -2280,7 +2280,7 @@ function useColor() {
 			].map((color) => themeService.isValidThemeColor(color) ? themeService.getColorFromTheme(color) : color),
 			numberColor: themeService.getColorFromTheme("blue.700"),
 			stringColor: themeService.getColorFromTheme("jiqing.800"),
-			plainTextColor: themeService.getColorFromTheme("black")
+			plainTextColor: themeService.getColorFromTheme("gray.1000")
 		};
 	}, [themeService.getCurrentTheme()]);
 }
@@ -3261,9 +3261,9 @@ function SearchFunctionFactory(props, ref) {
 				if (ref) ref.current = v;
 			},
 			"data-u-comp": "sheets-formula-editor",
-			className: clsx("univer-m-0 univer-box-border univer-max-h-[400px] univer-w-[250px] univer-list-none univer-overflow-y-auto univer-rounded-lg univer-bg-white univer-p-2 univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", borderClassName, scrollbarClassName),
+			className: clsx("univer-m-0 univer-box-border univer-max-h-[400px] univer-w-[250px] univer-list-none univer-overflow-y-auto univer-rounded-lg univer-bg-gray-0 univer-p-2 univer-leading-5 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900", borderClassName, scrollbarClassName),
 			children: searchList.map((item, index) => /* @__PURE__ */ jsxs("li", {
-				className: clsx("univer-box-border univer-cursor-pointer univer-rounded univer-px-2 univer-py-1 univer-text-gray-900 univer-transition-colors dark:!univer-text-white", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
+				className: clsx("univer-box-border univer-cursor-pointer univer-rounded univer-px-2 univer-py-1 univer-text-gray-900 univer-transition-colors dark:!univer-text-gray-0", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
 				onMouseEnter: () => handleLiMouseEnter(index),
 				onMouseLeave: handleLiMouseLeave,
 				onMouseMove: debounceResetMouseState,
@@ -3687,7 +3687,7 @@ function FunctionParams(props) {
 			className: clsx("univer-mb-2 univer-font-medium univer-text-gray-500 dark:!univer-text-gray-300", className),
 			children: title
 		}), /* @__PURE__ */ jsx("div", {
-			className: "univer-break-all univer-text-gray-900 dark:!univer-text-white",
+			className: "univer-break-all univer-text-gray-900 dark:!univer-text-gray-0",
 			children: value
 		})]
 	});
@@ -3840,7 +3840,7 @@ function SelectFunction(props) {
 			onKeyDown: handleSelectListKeyDown,
 			tabIndex: -1,
 			children: selectList.map(({ name }, index) => /* @__PURE__ */ jsxs("li", {
-				className: clsx("univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7 univer-py-1 univer-text-sm univer-text-gray-900 univer-transition-colors dark:!univer-text-white", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
+				className: clsx("univer-relative univer-box-border univer-cursor-pointer univer-rounded univer-px-7 univer-py-1 univer-text-sm univer-text-gray-900 univer-transition-colors dark:!univer-text-gray-0", { "univer-bg-gray-200 dark:!univer-bg-gray-600": active === index }),
 				onMouseEnter: () => handleLiMouseEnter(index),
 				onMouseLeave: handleLiMouseLeave,
 				onClick: () => setCurrentFunctionInfo(index),
@@ -3857,7 +3857,7 @@ function SelectFunction(props) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "univer-rounded-lg univer-bg-gray-50 univer-p-3 dark:!univer-bg-gray-800",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-white",
+						className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-gray-0",
 						children: functionInfo.functionName
 					}), /* @__PURE__ */ jsx("div", {
 						className: "univer-mt-1 univer-text-xs univer-leading-5 univer-text-gray-600 dark:!univer-text-gray-300",
@@ -3871,7 +3871,7 @@ function SelectFunction(props) {
 						children: localeService.t("sheets-formula-ui.moreFunctions.syntax")
 					}), /* @__PURE__ */ jsx("div", {
 						"data-u-comp": "formula-function-syntax",
-						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", borderClassName),
+						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-gray-0", borderClassName),
 						children: /* @__PURE__ */ jsx(FunctionHelp, {
 							prefix: functionInfo.functionName,
 							value: functionInfo.functionParameter
@@ -3881,7 +3881,7 @@ function SelectFunction(props) {
 						children: localeService.t("sheets-formula-ui.prompt.helpExample")
 					}), /* @__PURE__ */ jsx("div", {
 						"data-u-comp": "formula-function-example",
-						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", borderClassName),
+						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-gray-0", borderClassName),
 						children: `${functionInfo.functionName}(${functionInfo.functionParameter.map((item) => item.example).join(",")})`
 					})] })]
 				}),
@@ -3893,7 +3893,7 @@ function SelectFunction(props) {
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "univer-flex univer-items-center univer-gap-2",
 							children: [/* @__PURE__ */ jsx("span", {
-								className: "univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-white",
+								className: "univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-gray-0",
 								children: item.name
 							}), /* @__PURE__ */ jsx("span", {
 								className: clsx("univer-rounded-full univer-px-2 univer-py-0.5 univer-text-xs univer-leading-4", item.require ? "univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-200" : "univer-bg-gray-100 univer-text-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-200"),
@@ -4192,7 +4192,7 @@ function RangeSelectorDialog(props) {
 		mask: false,
 		maskClosable: false,
 		footer: /* @__PURE__ */ jsxs("footer", {
-			className: "univer-flex univer-gap-2 rtl:univer-flex-row-reverse",
+			className: "univer-flex univer-gap-2",
 			children: [/* @__PURE__ */ jsx(Button, {
 				onClick: onClose,
 				children: localeService.t("sheets-formula-ui.rangeSelector.cancel")
@@ -4215,7 +4215,7 @@ function RangeSelectorDialog(props) {
 			ref: scrollbarRef,
 			className: clsx("-univer-mx-6 univer-max-h-60 univer-overflow-y-auto univer-px-6", scrollbarClassName),
 			children: [ranges.map((text, index) => /* @__PURE__ */ jsxs("div", {
-				className: "univer-mb-2 univer-flex univer-items-center univer-gap-4 rtl:univer-flex-row-reverse",
+				className: "univer-mb-2 univer-flex univer-items-center univer-gap-4",
 				children: [/* @__PURE__ */ jsx(Input, {
 					className: clsx("univer-w-full", { "univer-border-primary-600": focusIndex === index }),
 					placeholder: localeService.t("sheets-formula-ui.rangeSelector.placeHolder"),
@@ -4314,6 +4314,7 @@ function RangeSelector(props) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [!hideEditor ? /* @__PURE__ */ jsx(RichTextEditor, {
 		isSingle: true,
 		...props,
+		className: clsx(props.className, "rtl:[&>div]:univer-flex-row-reverse"),
 		preserveHostFocus: true,
 		onFocusChange: (focusing, newValue) => {
 			setFocusing(focusing);
@@ -4329,7 +4330,7 @@ function RangeSelector(props) {
 			title: localeService.t("sheets-formula-ui.rangeSelector.buttonTooltip"),
 			placement: "bottom",
 			children: /* @__PURE__ */ jsx(SelectRangeIcon, {
-				className: "univer-cursor-pointer dark:!univer-text-gray-300",
+				className: "-univer-translate-y-0.5 univer-cursor-pointer dark:!univer-text-gray-300",
 				onClick: handleOpenModal
 			})
 		})
@@ -4984,7 +4985,7 @@ let FormulaEditorShowController = class FormulaEditorShowController extends Disp
 			style: {
 				strokeWidth: 1,
 				stroke: this._themeService.getColorFromTheme("primary.600"),
-				fill: new ColorKit(this._themeService.getColorFromTheme("white")).setAlpha(0).toString(),
+				fill: new ColorKit(this._themeService.getColorFromTheme("gray.0")).setAlpha(0).toString(),
 				widgets: {}
 			}
 		}, skeleton);