@univerjs/ui 1.1.0 → 1.2.0

package/lib/cjs/index.js

@@ -1835,17 +1835,23 @@ function useObservableRef(observable, defaultValue) {
 
 //#endregion
 //#region src/views/components/feature-search/FeatureSearch.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 const FEATURE_SEARCH_COMPONENT = "FeatureSearch";
 const FEATURE_SEARCH_DIALOG_ID = "FEATURE_SEARCH_DIALOG";
-function resolveParams(item, value) {
-	return (typeof item.params === "function" ? item.params() : item.params) ?? (value === void 0 ? void 0 : { value });
-}
-function resolveOptionParams(option) {
-	return (typeof option.params === "function" ? option.params(option.value) : option.params) ?? (option.value === void 0 ? void 0 : { value: option.value });
-}
-function deduplicate(items) {
-	return items.filter((item, index) => items.findIndex((candidate) => candidate.commandId === item.commandId && _univerjs_core.Tools.diffValue(candidate.params, item.params)) === index);
-}
 function FeatureSearch() {
 	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
@@ -1854,6 +1860,15 @@ function FeatureSearch() {
 	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
 	const ribbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
 	const items$ = (0, react.useMemo)(() => {
+		function resolveParams(item, value) {
+			return (typeof item.params === "function" ? item.params() : item.params) ?? (value === void 0 ? void 0 : { value });
+		}
+		function resolveOptionParams(option) {
+			return (typeof option.params === "function" ? option.params(option.value) : option.params) ?? (option.value === void 0 ? void 0 : { value: option.value });
+		}
+		function deduplicate(items) {
+			return items.filter((item, index) => items.findIndex((candidate) => candidate.commandId === item.commandId && _univerjs_core.Tools.diffValue(candidate.params, item.params)) === index);
+		}
 		function getItemTitle(item) {
 			const titleKey = item.title ?? item.tooltip ?? item.description;
 			return titleKey ? localeService.t(titleKey) : "";
@@ -1978,7 +1993,7 @@ function FeatureSearch() {
 					children: item.title
 				})]
 			}), item.path && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "univer-max-w-1/2 univer-truncate univer-text-xs univer-text-gray-400",
+				className: "univer-max-w-[50%] univer-truncate univer-text-xs univer-text-gray-400",
 				children: item.path
 			})]
 		}, item.key)) })] })]
@@ -3221,6 +3236,21 @@ function useComponentsOfPart(part, injector) {
 
 //#endregion
 //#region src/views/components/ribbon/ribbon-menu/ClassicMenu.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3234,7 +3264,7 @@ function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
 				"aria-selected": isActive,
 				title: localeService.t(group.title || group.key),
 				onClick: () => onSelectTab(group),
-				className: (0, _univerjs_design.clsx)("univer-focus:outline-none univer-focus:ring-2 univer-focus:ring-primary-500 dark:!univer-focus:ring-primary-300 univer-flex univer-cursor-pointer univer-appearance-none univer-items-center univer-gap-1 univer-rounded-sm univer-border-none univer-px-2 univer-py-1 univer-text-sm univer-transition-colors", isActive ? "univer-bg-primary-50 univer-font-semibold univer-text-primary-600 univer-shadow-sm dark:!univer-bg-primary-900 dark:!univer-text-primary-300" : "univer-hover:bg-gray-100 dark:!univer-hover:bg-gray-700 univer-bg-transparent univer-text-gray-700 dark:!univer-text-gray-200"),
+				className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-appearance-none univer-items-center univer-gap-1 univer-rounded-sm univer-border-none univer-px-2 univer-py-1 univer-text-sm univer-transition-colors focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-500 dark:focus:!univer-ring-primary-300", isActive ? "univer-bg-primary-50 univer-font-semibold univer-text-primary-600 univer-shadow-sm dark:!univer-bg-primary-900 dark:!univer-text-primary-300" : "univer-bg-transparent univer-text-gray-700 hover:univer-bg-gray-100 dark:!univer-text-gray-200 dark:hover:!univer-bg-gray-700"),
 				children: localeService.t(group.title || group.key)
 			}, group.key);
 		})
@@ -4929,6 +4959,21 @@ function DesignTinyMenuGroup({ items, columns, sizeVariant = "default", layoutVa
 
 //#endregion
 //#region src/views/menu/desktop/TinyMenuGroup.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 const EMPTY_HIDDEN_ITEM_IDS = [];
 const EMPTY_TINY_MENU_CHILDREN = [];
 const quickTileMenuButtonVariants = (0, _univerjs_design.cva)("univer-relative univer-box-border univer-flex univer-size-12 univer-w-full univer-appearance-none univer-flex-col univer-items-center univer-justify-center univer-gap-0.5 univer-rounded-lg univer-border-none univer-bg-gray-0 univer-p-0 univer-font-medium univer-text-gray-700 univer-outline-none univer-transition-all focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600 focus-visible:univer-ring-offset-0 dark:!univer-bg-gray-700 dark:!univer-text-gray-100", {
@@ -5055,7 +5100,7 @@ function UIQuickTileMenuGroup(props) {
 	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, onOptionSelect } = props;
 	if (!((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-item-center univer-grid univer-grid-cols-3 univer-gap-1.5 univer-py-1",
+		className: "univer-grid univer-grid-cols-3 univer-items-center univer-gap-1.5 univer-py-1",
 		children: getVisibleTinyMenuChildren(item.children, hiddenItemIds).map((menuSchema) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickTileMenuItem, {
 			menuSchema,
 			activeItemIds,
@@ -6370,7 +6415,7 @@ function Sidebar() {
 		}),
 		style: { width: isDragging ? void 0 : width },
 		children: [(options === null || options === void 0 ? void 0 : options.visible) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "hover:univer-bg-primary-500/30 active:univer-bg-primary-500/50 univer-absolute univer-left-0 univer-top-0 univer-z-20 univer-h-full univer-w-1 univer-cursor-col-resize univer-transition-colors",
+			className: "univer-absolute univer-left-0 univer-top-0 univer-z-20 univer-h-full univer-w-1 univer-cursor-col-resize univer-transition-colors hover:univer-bg-primary-500 active:univer-bg-primary-500",
 			onMouseDown: handleResizeMouseDown,
 			role: "separator",
 			"aria-orientation": "vertical",
@@ -6401,7 +6446,7 @@ function Sidebar() {
 					children: [options === null || options === void 0 ? void 0 : options.header, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						ref: closeButtonRef,
 						type: "button",
-						className: "focus:univer-ring-primary-500/50 univer-flex univer-size-6 univer-cursor-pointer univer-appearance-none univer-items-center univer-justify-center univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-text-gray-500 focus:univer-outline-none focus:univer-ring-2 dark:!univer-text-gray-300",
+						className: "univer-flex univer-size-6 univer-cursor-pointer univer-appearance-none univer-items-center univer-justify-center univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-text-gray-500 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-500 dark:!univer-text-gray-300",
 						onClick: handleClose,
 						"aria-label": localeService.t("ui.sidebar.close"),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, {})
@@ -6630,16 +6675,8 @@ function useLatest(value) {
 	ref.current = value;
 	return ref;
 }
-const useVirtualList = (list, options) => {
-	const { containerTarget, itemHeight, overscan = 5 } = options;
+function useVirtualListMetrics(list, itemHeight) {
 	const itemHeightRef = useLatest(itemHeight);
-	const [size, setSize] = (0, react.useState)(null);
-	const scrollTriggerByScrollToFunc = (0, react.useRef)(false);
-	const [targetList, setTargetList] = (0, react.useState)([]);
-	const [wrapperStyle, setWrapperStyle] = (0, react.useState)({
-		height: void 0,
-		marginTop: void 0
-	});
 	const getVisibleCount = (containerHeight, fromIndex) => {
 		if (typeof itemHeightRef.current === "number") return Math.ceil(containerHeight / itemHeightRef.current);
 		let sum = 0;
@@ -6670,29 +6707,18 @@ const useVirtualList = (list, options) => {
 		if (typeof itemHeightRef.current === "number") return index * itemHeightRef.current;
 		return list.slice(0, index).reduce((sum, _, i) => sum + itemHeightRef.current(i, list[i]), 0);
 	};
-	const totalHeight = (0, react.useMemo)(() => {
-		if (isNumber(itemHeightRef.current)) return list.length * itemHeightRef.current;
-		return list.reduce((sum, _, index) => sum + itemHeightRef.current(index, list[index]), 0);
-	}, [list]);
-	const calculateRange = () => {
-		const container = containerTarget.current;
-		if (container) {
-			const { scrollTop, clientHeight } = container;
-			const offset = getOffset(scrollTop);
-			const visibleCount = getVisibleCount(clientHeight, offset);
-			const start = Math.max(0, offset - overscan);
-			const end = Math.min(list.length, offset + visibleCount + overscan);
-			const offsetTop = getDistanceTop(start);
-			setWrapperStyle({
-				height: `${totalHeight - offsetTop}px`,
-				marginTop: `${offsetTop}px`
-			});
-			setTargetList(list.slice(start, end).map((ele, index) => ({
-				data: ele,
-				index: index + start
-			})));
-		}
+	return {
+		getVisibleCount,
+		getOffset,
+		getDistanceTop,
+		totalHeight: (0, react.useMemo)(() => {
+			if (isNumber(itemHeightRef.current)) return list.length * itemHeightRef.current;
+			return list.reduce((sum, _, index) => sum + itemHeightRef.current(index, list[index]), 0);
+		}, [list])
 	};
+}
+function useContainerSize(containerTarget) {
+	const [size, setSize] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
 		if (containerTarget.current) {
 			const getSize = () => {
@@ -6711,6 +6737,37 @@ const useVirtualList = (list, options) => {
 			};
 		}
 	}, []);
+	return size;
+}
+const useVirtualList = (list, options) => {
+	const { containerTarget, itemHeight, overscan = 5 } = options;
+	const { getVisibleCount, getOffset, getDistanceTop, totalHeight } = useVirtualListMetrics(list, itemHeight);
+	const size = useContainerSize(containerTarget);
+	const scrollTriggerByScrollToFunc = (0, react.useRef)(false);
+	const [targetList, setTargetList] = (0, react.useState)([]);
+	const [wrapperStyle, setWrapperStyle] = (0, react.useState)({
+		height: void 0,
+		marginTop: void 0
+	});
+	const calculateRange = () => {
+		const container = containerTarget.current;
+		if (container) {
+			const { scrollTop, clientHeight } = container;
+			const offset = getOffset(scrollTop);
+			const visibleCount = getVisibleCount(clientHeight, offset);
+			const start = Math.max(0, offset - overscan);
+			const end = Math.min(list.length, offset + visibleCount + overscan);
+			const offsetTop = getDistanceTop(start);
+			setWrapperStyle({
+				height: `${totalHeight - offsetTop}px`,
+				marginTop: `${offsetTop}px`
+			});
+			setTargetList(list.slice(start, end).map((ele, index) => ({
+				data: ele,
+				index: index + start
+			})));
+		}
+	};
 	(0, react.useEffect)(() => {
 		if (!(size === null || size === void 0 ? void 0 : size.width) || !(size === null || size === void 0 ? void 0 : size.height)) return;
 		calculateRange();
@@ -7036,7 +7093,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.1.0";
+var version = "1.2.0";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -22708,6 +22765,37 @@ function EmojiPicker(props) {
 	const recentStorageKey = (extraProps === null || extraProps === void 0 ? void 0 : extraProps.recentStorageKey) ?? RECENTS_STORAGE_KEY;
 	const isSearching = deferredQuery.trim().length > 0;
 	const { rows, sectionPositions } = (0, react.useMemo)(() => {
+		function createEmojiVirtualRows(sections, locale) {
+			const rows = [];
+			const sectionPositions = [];
+			let top = 0;
+			sections.forEach((section) => {
+				if (!section.emojis.length) return;
+				sectionPositions.push({
+					key: section.key,
+					rowIndex: rows.length,
+					top
+				});
+				rows.push({
+					key: `${locale}-${section.key}-header`,
+					title: section.title,
+					type: "header"
+				});
+				top += EMOJI_SECTION_HEADER_HEIGHT;
+				for (let start = 0; start < section.emojis.length; start += EMOJI_COLUMN_COUNT) {
+					rows.push({
+						items: section.emojis.slice(start, start + EMOJI_COLUMN_COUNT),
+						key: `${locale}-${section.key}-${start / EMOJI_COLUMN_COUNT}`,
+						type: "emojis"
+					});
+					top += EMOJI_ROW_HEIGHT;
+				}
+			});
+			return {
+				rows,
+				sectionPositions
+			};
+		}
 		const normalSections = [{
 			key: "recent",
 			title: localeService.t("ui.emojiPicker.recents"),
@@ -22732,7 +22820,7 @@ function EmojiPicker(props) {
 	]);
 	const [virtualRows, { containerProps, scrollTo, wrapperStyle }] = useVirtualList(rows, {
 		containerTarget: scrollRef,
-		itemHeight: getEmojiVirtualRowHeight,
+		itemHeight: (_index, row) => row.type === "header" ? EMOJI_SECTION_HEADER_HEIGHT : EMOJI_ROW_HEIGHT,
 		overscan: EMOJI_VIRTUAL_OVERSCAN
 	});
 	(0, react.useEffect)(() => {
@@ -22764,6 +22852,16 @@ function EmojiPicker(props) {
 		scrollTo,
 		sectionPositions
 	]);
+	function writeStorageItem(localStorageService, storageKey, value) {
+		localStorageService.setItem(storageKey, value).catch(() => void 0);
+	}
+	function getActiveSectionByScrollTop(sectionPositions, scrollTop) {
+		let active = "recent";
+		sectionPositions.forEach((position) => {
+			if (position.top <= scrollTop + ACTIVE_SECTION_SCROLL_OFFSET) active = position.key;
+		});
+		return active;
+	}
 	const handleSelect = (item, options) => {
 		var _props$onChange, _extraProps$onSelect;
 		const nextRecents = promoteRecentEmoji(recents, item);
@@ -22928,7 +23026,7 @@ function EmojiButton(props) {
 				type: "button",
 				"aria-label": `${title}, ${props.moreTitle}`,
 				title: `${title}, ${props.moreTitle}`,
-				className: "univer-bg-gray-0/90 dark:!univer-bg-gray-800/90 univer-absolute univer-bottom-0 univer-right-0 univer-flex univer-size-3 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-border-0 univer-p-0 univer-text-gray-500 hover:univer-bg-gray-100 hover:univer-text-gray-700 focus-visible:univer-outline-none focus-visible:univer-ring-1 focus-visible:univer-ring-primary-600 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-700",
+				className: "univer-absolute univer-bottom-0 univer-right-0 univer-flex univer-size-3 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-border-0 univer-bg-gray-0 univer-p-0 univer-text-gray-500 hover:univer-bg-gray-100 hover:univer-text-gray-700 focus-visible:univer-outline-none focus-visible:univer-ring-1 focus-visible:univer-ring-primary-600 dark:!univer-bg-gray-800 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-700",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "!univer-size-2.5" })
 			})
 		})]
@@ -23016,50 +23114,6 @@ function CategoryButton(props) {
 		children: props.children
 	});
 }
-function writeStorageItem(localStorageService, storageKey, value) {
-	localStorageService.setItem(storageKey, value).catch(() => void 0);
-}
-function createEmojiVirtualRows(sections, locale) {
-	const rows = [];
-	const sectionPositions = [];
-	let top = 0;
-	sections.forEach((section) => {
-		if (!section.emojis.length) return;
-		sectionPositions.push({
-			key: section.key,
-			rowIndex: rows.length,
-			top
-		});
-		rows.push({
-			key: `${locale}-${section.key}-header`,
-			title: section.title,
-			type: "header"
-		});
-		top += EMOJI_SECTION_HEADER_HEIGHT;
-		for (let start = 0; start < section.emojis.length; start += EMOJI_COLUMN_COUNT) {
-			rows.push({
-				items: section.emojis.slice(start, start + EMOJI_COLUMN_COUNT),
-				key: `${locale}-${section.key}-${start / EMOJI_COLUMN_COUNT}`,
-				type: "emojis"
-			});
-			top += EMOJI_ROW_HEIGHT;
-		}
-	});
-	return {
-		rows,
-		sectionPositions
-	};
-}
-function getEmojiVirtualRowHeight(_index, row) {
-	return row.type === "header" ? EMOJI_SECTION_HEADER_HEIGHT : EMOJI_ROW_HEIGHT;
-}
-function getActiveSectionByScrollTop(sectionPositions, scrollTop) {
-	let active = "recent";
-	sectionPositions.forEach((position) => {
-		if (position.top <= scrollTop + ACTIVE_SECTION_SCROLL_OFFSET) active = position.key;
-	});
-	return active;
-}
 function CategoryIcon(props) {
 	switch (props.category) {
 		case "activity": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ActivityIcon, {});
@@ -24123,7 +24177,7 @@ function MobileRibbonToolbar(props) {
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: (0, _univerjs_design.clsx)("univer-flex univer-shrink-0 univer-items-center univer-gap-0.5 univer-pr-1.5 rtl:univer-pl-1.5 rtl:univer-pr-0", { [_univerjs_design.borderRightClassName]: groupIndex !== activeGroups.length - 1 }),
 							children: groupItems.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: (0, _univerjs_design.clsx)("[&_button]:!univer-font-inherit univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-rounded-md [&_*]:univer-box-border [&_.univer-custom-label]:univer-text-sm [&_.univer-custom-label]:univer-leading-none [&_.univer-toolbar-button-selector-main]:!univer-h-8 [&_.univer-toolbar-button-selector-main]:!univer-rounded-none [&_.univer-toolbar-button-selector-main]:!univer-rounded-l-md [&_.univer-toolbar-button-selector-main]:!univer-px-1.5 [&_.univer-toolbar-button-selector-root]:!univer-h-8 [&_.univer-toolbar-button-selector-root]:univer-overflow-hidden [&_.univer-toolbar-button-selector-root]:!univer-rounded-md [&_.univer-toolbar-button-selector-root]:!univer-pr-0 [&_.univer-toolbar-button-selector-trigger]:!univer-static [&_.univer-toolbar-button-selector-trigger]:!univer-h-8 [&_.univer-toolbar-button-selector-trigger]:!univer-w-6 [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-none [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-r-md [&_.univer-toolbar-selector-root]:!univer-h-8 [&_.univer-toolbar-selector-root]:!univer-gap-1 [&_.univer-toolbar-selector-root]:!univer-rounded-md [&_.univer-toolbar-selector-root]:!univer-px-1.5 [&_.univer-toolbar-selector-trigger]:!univer-pl-0.5 [&_.univer-tooltip]:univer-inline-flex [&_.univer-tooltip]:univer-h-full [&_.univer-tooltip]:univer-items-center [&_[data-u-command]]:!univer-h-8 [&_[data-u-command]]:!univer-min-h-8 [&_[data-u-command]]:!univer-rounded-md [&_[data-u-command]]:!univer-px-1.5 [&_button]:!univer-m-0 [&_button]:!univer-h-8 [&_button]:!univer-min-w-8 [&_button]:!univer-appearance-none [&_button]:!univer-rounded-md [&_button]:!univer-border-0 [&_button]:!univer-bg-transparent [&_button]:!univer-p-0 [&_button]:!univer-px-1.5 [&_button]:!univer-leading-none [&_button]:!univer-outline-none [&_input]:!univer-m-0 [&_input]:!univer-appearance-none [&_input]:!univer-border-0 [&_input]:!univer-bg-transparent [&_input]:!univer-p-0 [&_input]:!univer-leading-none [&_input]:!univer-outline-none"),
+								className: (0, _univerjs_design.clsx)("univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-rounded-md [&_*]:univer-box-border [&_.univer-custom-label]:univer-text-sm [&_.univer-custom-label]:univer-leading-none [&_.univer-toolbar-button-selector-main]:!univer-h-8 [&_.univer-toolbar-button-selector-main]:!univer-rounded-none [&_.univer-toolbar-button-selector-main]:!univer-rounded-l-md [&_.univer-toolbar-button-selector-main]:!univer-px-1.5 [&_.univer-toolbar-button-selector-root]:!univer-h-8 [&_.univer-toolbar-button-selector-root]:univer-overflow-hidden [&_.univer-toolbar-button-selector-root]:!univer-rounded-md [&_.univer-toolbar-button-selector-root]:!univer-pr-0 [&_.univer-toolbar-button-selector-trigger]:!univer-static [&_.univer-toolbar-button-selector-trigger]:!univer-h-8 [&_.univer-toolbar-button-selector-trigger]:!univer-w-6 [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-none [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-r-md [&_.univer-toolbar-selector-root]:!univer-h-8 [&_.univer-toolbar-selector-root]:!univer-gap-1 [&_.univer-toolbar-selector-root]:!univer-rounded-md [&_.univer-toolbar-selector-root]:!univer-px-1.5 [&_.univer-toolbar-selector-trigger]:!univer-pl-0.5 [&_.univer-tooltip]:univer-inline-flex [&_.univer-tooltip]:univer-h-full [&_.univer-tooltip]:univer-items-center [&_[data-u-command]]:!univer-h-8 [&_[data-u-command]]:!univer-min-h-8 [&_[data-u-command]]:!univer-rounded-md [&_[data-u-command]]:!univer-px-1.5 [&_button]:!univer-m-0 [&_button]:!univer-h-8 [&_button]:!univer-min-w-8 [&_button]:!univer-appearance-none [&_button]:!univer-rounded-md [&_button]:!univer-border-0 [&_button]:!univer-bg-transparent [&_button]:!univer-p-0 [&_button]:!univer-px-1.5 [&_button]:!univer-leading-none [&_button]:!univer-outline-none [&_button]:![font-family:inherit] [&_input]:!univer-m-0 [&_input]:!univer-appearance-none [&_input]:!univer-border-0 [&_input]:!univer-bg-transparent [&_input]:!univer-p-0 [&_input]:!univer-leading-none [&_input]:!univer-outline-none"),
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileToolbarItem, {
 									...child.item,
 									preserveStrokeWidth: true
@@ -27798,7 +27852,7 @@ function Slider(props) {
 						onPointerDown: handlePointerDown,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: (0, _univerjs_design.clsx)("univer-bg-primary-500/60 univer-absolute univer-top-0 univer-h-full univer-rounded-full", isRtl ? "univer-right-0" : "univer-left-0"),
+								className: (0, _univerjs_design.clsx)("univer-absolute univer-top-0 univer-h-full univer-rounded-full univer-bg-primary-500", isRtl ? "univer-right-0" : "univer-left-0"),
 								style: { width: `${sliderOffset}%` }
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {