@univerjs/design 1.0.0-beta.0 → 1.0.0-beta.2

package/lib/cjs/index.js

@@ -38,13 +38,16 @@ function Accordion(props) {
 		"data-u-comp": "accordion",
 		className: clsx$1("univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200 dark:!univer-divide-gray-600", className),
 		children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-white",
+			className: "univer-box-border univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-gap-1.5 univer-border-none univer-bg-transparent univer-p-4 univer-text-left univer-text-gray-700 hover:univer-text-gray-900 focus:univer-outline-none dark:!univer-text-gray-200 dark:hover:!univer-text-gray-0",
 			type: "button",
 			onClick: () => toggleItem(index),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: clsx$1("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
-				"-univer-rotate-90": openIndex !== index,
-				"univer-rotate-0": openIndex === index
-			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, {
+				"aria-hidden": "true",
+				className: clsx$1("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
+					"-univer-rotate-90 rtl:univer-rotate-90": openIndex !== index,
+					"univer-rotate-0": openIndex === index
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "univer-font-medium",
 				children: item.label
 			})]
@@ -63,7 +66,7 @@ function Accordion(props) {
 
 //#endregion
 //#region src/components/avatar/Avatar.tsx
-const avatarVariants = (0, class_variance_authority.cva)("univer-relative univer-inline-block univer-overflow-hidden univer-whitespace-nowrap univer-bg-gray-200 univer-text-center univer-align-middle univer-text-white", {
+const avatarVariants = (0, class_variance_authority.cva)("univer-relative univer-inline-block univer-overflow-hidden univer-whitespace-nowrap univer-bg-gray-200 univer-text-center univer-align-middle univer-text-gray-0", {
 	variants: {
 		/**
 		* The shape of the avatar
@@ -187,12 +190,12 @@ function Badge(props) {
 const buttonVariants = (0, class_variance_authority.cva)("univer-box-border univer-inline-flex univer-cursor-pointer univer-select-none univer-items-center univer-justify-center univer-gap-2 univer-whitespace-nowrap univer-rounded-md univer-border univer-border-solid univer-text-sm univer-font-medium univer-transition-colors disabled:univer-pointer-events-none disabled:univer-cursor-not-allowed disabled:univer-opacity-50 [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0", {
 	variants: {
 		variant: {
-			default: "univer-border-gray-200 univer-bg-white univer-text-gray-700 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-border-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-white dark:hover:!univer-bg-gray-600 dark:active:!univer-bg-gray-700",
-			primary: "univer-border-primary-600 univer-bg-primary-600 univer-text-white hover:univer-bg-primary-500 active:univer-bg-primary-700",
-			danger: "univer-border-red-500 univer-bg-red-500 univer-text-white hover:univer-border-red-400 hover:univer-bg-red-400 active:univer-border-red-600 active:univer-bg-red-600",
-			text: "univer-border-transparent univer-bg-transparent univer-text-gray-900 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-white dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600",
+			default: "univer-border-gray-200 univer-bg-gray-0 univer-text-gray-700 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-border-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600 dark:active:!univer-bg-gray-700",
+			primary: "univer-border-primary-600 univer-bg-primary-600 univer-text-gray-0 hover:univer-bg-primary-500 active:univer-bg-primary-700",
+			danger: "univer-border-red-500 univer-bg-red-500 univer-text-gray-0 hover:univer-border-red-400 hover:univer-bg-red-400 active:univer-border-red-600 active:univer-bg-red-600",
+			text: "univer-border-transparent univer-bg-transparent univer-text-gray-900 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600",
 			link: "univer-underline-current univer-border-transparent univer-bg-transparent univer-text-primary-600 univer-underline-offset-4 hover:univer-text-primary-500 hover:univer-underline active:univer-text-primary-700",
-			ghost: "univer-border-transparent univer-bg-transparent univer-text-gray-900 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-white dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600"
+			ghost: "univer-border-transparent univer-bg-transparent univer-text-gray-900 hover:univer-bg-gray-100 active:univer-bg-gray-200 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700 dark:active:!univer-bg-gray-600"
 		},
 		size: {
 			icon: "univer-size-8 !univer-p-0",
@@ -323,7 +326,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 function DropdownMenuSubContent({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.SubContent, {
 		"data-slot": "dropdown-menu-sub-content",
-		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-gray-0 univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-gray-0", borderClassName, scrollbarClassName, className),
 		...props
 	});
 }
@@ -331,7 +334,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Content, {
 		"data-slot": "dropdown-menu-content",
 		sideOffset,
-		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-box-border univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-gray-0 univer-p-1.5 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-gray-0", borderClassName, scrollbarClassName, className),
 		...props
 	}) });
 }
@@ -485,7 +488,7 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
 		"data-slot": "popover-content",
 		align,
 		sideOffset,
-		className: clsx$1("univer-outline-hidden data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-900 dark:!univer-text-white dark:focus-visible:!univer-border-gray-600", borderClassName, scrollbarClassName, className),
+		className: clsx$1("univer-outline-hidden data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-max-h-[--radix-popper-available-height] univer-overflow-y-auto univer-rounded-md univer-bg-gray-0 univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-900 dark:!univer-text-gray-0 dark:focus-visible:!univer-border-gray-600", borderClassName, scrollbarClassName, className),
 		...props
 	}) });
 }
@@ -563,7 +566,7 @@ function TimeInput(props) {
 		"data-u-comp": "time-input",
 		className: "univer-relative univer-mx-auto univer-mt-1 univer-w-fit",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ClockIcon, { className: "univer-absolute univer-left-2 univer-top-1/2 -univer-translate-y-1/2 univer-text-gray-600 dark:!univer-text-gray-400" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-			className: clsx$1("univer-block univer-h-7 univer-w-fit univer-appearance-none univer-rounded-md univer-bg-transparent univer-pl-6 univer-pr-2 univer-text-center univer-text-gray-800 univer-shadow univer-outline-none univer-transition-all univer-duration-200 focus:univer-border-primary-600 dark:!univer-text-white dark:focus:!univer-border-primary-500 [&::-webkit-calendar-picker-indicator]:univer-hidden [&::-webkit-calendar-picker-indicator]:univer-appearance-none", borderClassName, className),
+			className: clsx$1("univer-block univer-h-7 univer-w-fit univer-appearance-none univer-rounded-md univer-bg-transparent univer-pl-6 univer-pr-2 univer-text-center univer-text-gray-800 univer-shadow univer-outline-none univer-transition-all univer-duration-200 focus:univer-border-primary-600 dark:!univer-text-gray-0 dark:focus:!univer-border-primary-500 [&::-webkit-calendar-picker-indicator]:univer-hidden [&::-webkit-calendar-picker-indicator]:univer-appearance-none", borderClassName, className),
 			type: "time",
 			step: "1",
 			value: formatDateWithPattern(value, "HH:mm:ss"),
@@ -743,7 +746,7 @@ function Calendar(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "calendar",
 		dir: direction,
-		className: clsx$1("univer-mx-auto univer-max-w-xs univer-select-none univer-rounded univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-white", className),
+		className: clsx$1("univer-mx-auto univer-max-w-xs univer-select-none univer-rounded univer-bg-gray-0 univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-gray-0", className),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
 				className: "univer-mb-4 univer-flex univer-items-center univer-justify-between",
@@ -768,7 +771,7 @@ function Calendar(props) {
 								itemHeight: YEAR_ITEM_HEIGHT,
 								itemKey: "year",
 								children: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									className: clsx$1("univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-center univer-rounded univer-border-none univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", { "univer-bg-gray-200 dark:!univer-bg-gray-500": item.year === currentYear }),
+									className: clsx$1("univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-center univer-rounded univer-border-none univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600", { "univer-bg-gray-200 dark:!univer-bg-gray-500": item.year === currentYear }),
 									type: "button",
 									onClick: () => handleChangeYear(item.year),
 									children: item.year
@@ -809,9 +812,9 @@ function Calendar(props) {
 				className: "univer-grid univer-grid-cols-7 univer-gap-1 univer-text-center",
 				children: days.map((day, idx) => day ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayButton, {
 					className: clsx$1({
-						"!univer-bg-primary-600 univer-font-bold univer-text-white": !isToday(day) && isSelected(day),
-						"dark:!univer-text-white": !isToday(day) && !isSelected(day),
-						"!univer-bg-primary-600 univer-text-white": isToday(day) && isSelected(day),
+						"!univer-bg-primary-600 univer-font-bold univer-text-gray-0": !isToday(day) && isSelected(day),
+						"dark:!univer-text-gray-0": !isToday(day) && !isSelected(day),
+						"!univer-bg-primary-600 univer-text-gray-0": isToday(day) && isSelected(day),
 						"univer-font-semibold univer-text-primary-600 dark:!univer-text-primary-500": isToday(day) && !isSelected(day),
 						"univer-cursor-not-allowed univer-opacity-40": isDisabled(day),
 						"univer-hover:bg-primary-100 univer-cursor-pointer univer-text-gray-800": !isSelected(day) && !isDisabled(day)
@@ -877,7 +880,7 @@ function CascaderList(props) {
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		"data-u-comp": "cascader-list",
-		className: clsx$1("univer-overflow-auto-y univer-grid univer-h-full univer-max-h-80 univer-grid-flow-col univer-rounded univer-py-2 univer-text-gray-900 dark:!univer-text-white [&>ul:not(:last-child)]:univer-border-0 [&>ul:not(:last-child)]:univer-border-r [&>ul:not(:last-child)]:univer-border-solid [&>ul:not(:last-child)]:univer-border-r-gray-200", borderClassName, scrollbarClassName, wrapperClassName),
+		className: clsx$1("univer-overflow-auto-y univer-grid univer-h-full univer-max-h-80 univer-grid-flow-col univer-rounded univer-py-2 univer-text-gray-900 dark:!univer-text-gray-0 [&>ul:not(:last-child)]:univer-border-0 [&>ul:not(:last-child)]:univer-border-r [&>ul:not(:last-child)]:univer-border-solid [&>ul:not(:last-child)]:univer-border-r-gray-200", borderClassName, scrollbarClassName, wrapperClassName),
 		children: [activeOptions.map((options, index) => options.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			className: clsx$1("univer-m-0 univer-h-full univer-max-h-full univer-list-none univer-overflow-auto univer-px-2", scrollbarClassName, contentClassName),
 			children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
@@ -944,7 +947,7 @@ function Checkbox(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		"data-u-comp": "checkbox",
 		className: clsx$1("univer-box-border univer-inline-flex univer-items-center univer-gap-2 univer-text-sm", {
-			"univer-cursor-pointer univer-text-gray-900 dark:!univer-text-white": !disabled,
+			"univer-cursor-pointer univer-text-gray-900 dark:!univer-text-gray-0": !disabled,
 			"univer-text-gray-400": disabled
 		}, className),
 		style,
@@ -963,7 +966,7 @@ function Checkbox(props) {
 					"univer-border-primary-600 univer-bg-primary-600": checked || indeterminate,
 					"univer-border-gray-300 univer-bg-gray-50 dark:!univer-border-gray-500 dark:!univer-bg-gray-600": !checked && !indeterminate
 				}),
-				children: [checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-size-3 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-text-white" }), indeterminate && !checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-h-0.5 univer-w-2.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded univer-bg-white" })]
+				children: [checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-size-3 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-text-gray-0" }), indeterminate && !checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-h-0.5 univer-w-2.5 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded univer-bg-gray-0" })]
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: clsx$1("univer-select-none", contentClassName),
@@ -982,11 +985,11 @@ const DialogOverlay = (0, react.forwardRef)(({ className, ...props }, ref) => /*
 	...props
 }));
 DialogOverlay.displayName = _radix_ui_react_dialog.Overlay.displayName;
-const DialogContent = (0, react.forwardRef)(({ className, children, closable = true, onClickClose, mountContainer, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, {
+const DialogContent = (0, react.forwardRef)(({ className, children, closable = true, onClickClose, mountContainer, overlayClassName, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, {
 	container: mountContainer ?? void 0,
-	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, { className: overlayClassName }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
 		ref,
-		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-white univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
+		className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=open]:univer-slide-in-from-left-1/2 data-[state=open]:univer-slide-in-from-top-[48%] data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[state=closed]:univer-slide-out-to-left-1/2 data-[state=closed]:univer-slide-out-to-top-[48%] univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1080] univer-box-border univer-grid univer-w-full univer-max-w-lg -univer-translate-x-1/2 -univer-translate-y-1/2 univer-gap-4 univer-bg-gray-0 univer-p-4 univer-text-gray-500 univer-shadow-md univer-duration-200 sm:!univer-rounded-lg dark:!univer-bg-gray-700 dark:!univer-text-gray-400", borderClassName, className),
 		...props,
 		children: [children, closable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Close, {
 			"data-slot": "close",
@@ -1013,7 +1016,7 @@ const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_
 DialogFooter.displayName = "DialogFooter";
 const DialogTitle = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
 	ref,
-	className: clsx$1("univer-my-0 univer-text-lg univer-font-semibold univer-leading-none univer-tracking-tight univer-text-gray-900 dark:!univer-text-white", className),
+	className: clsx$1("univer-my-0 univer-text-lg univer-font-semibold univer-leading-none univer-tracking-tight univer-text-gray-900 dark:!univer-text-gray-0", className),
 	...props
 }));
 DialogTitle.displayName = _radix_ui_react_dialog.Title.displayName;
@@ -1144,7 +1147,7 @@ function useDraggable(options = {}) {
 	};
 }
 function Dialog(props) {
-	const { className, children, style, open = false, title, width, draggable = false, defaultPosition, footer: propFooter, mask = true, keyboard = true, closable = true, maskClosable = true, showOk, showCancel, onOpenChange, onClose, onOk, onCancel } = props;
+	const { className, overlayClassName, children, style, open = false, title, width, draggable = false, defaultPosition, footer: propFooter, mask = true, keyboard = true, closable = true, maskClosable = true, showOk, showCancel, onOpenChange, onClose, onOk, onCancel } = props;
 	const { locale, mountContainer, direction } = (0, react.useContext)(ConfigContext);
 	const { position, isDragging, setElementRef, handleMouseDown } = useDraggable({
 		defaultPosition,
@@ -1196,6 +1199,7 @@ function Dialog(props) {
 			},
 			closable,
 			mountContainer,
+			overlayClassName,
 			dir: direction,
 			onClickClose: handleClickClose,
 			onEscapeKeyDown: (e) => {
@@ -1427,7 +1431,7 @@ function AlphaSlider({ hsv, alpha, onChange, onChanged }) {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: thumbRef,
 				"data-u-comp": "color-picker-alpha-slider-thumb",
-				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
+				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-gray-0 univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
 					transform: "translateY(-50%)",
@@ -1463,7 +1467,7 @@ function HexInput({ hsv, onChange }) {
 		if (!isValidHex(inputValue)) setInputValue(hexValue.replace(/^#/, ""));
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-		className: clsx$1("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none rtl:!univer-pl-2 rtl:!univer-pr-4 dark:!univer-text-white", borderClassName),
+		className: clsx$1("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none rtl:!univer-pl-2 rtl:!univer-pr-4 dark:!univer-text-gray-0", borderClassName),
 		value: inputValue,
 		onChange: handleChange,
 		onBlur: handleBlur,
@@ -1523,7 +1527,7 @@ function RgbInput({ hsv, alpha, format, onChange }) {
 		});
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11 [&>input]:univer-border-gray-200 [&>input]:focus:univer-border-primary-500 dark:[&>input]:!univer-border-gray-600 dark:[&>input]:!univer-text-white",
+		className: "univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11 [&>input]:univer-border-gray-200 [&>input]:focus:univer-border-primary-500 dark:[&>input]:!univer-border-gray-600 dark:[&>input]:!univer-text-gray-0",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				value: localValues.r,
@@ -1554,7 +1558,7 @@ function RgbInput({ hsv, alpha, format, onChange }) {
 }
 function ColorInput({ hsv, alpha, format, onChange }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "dark:![&_input]:univer-border-gray-600 dark:![&_input]:univer-text-white univer-flex univer-gap-2 [&_input]:univer-box-border [&_input]:univer-flex [&_input]:univer-h-7 [&_input]:univer-items-center [&_input]:univer-rounded [&_input]:univer-border [&_input]:univer-border-solid [&_input]:univer-border-gray-200 [&_input]:univer-bg-transparent [&_input]:univer-px-1.5 [&_input]:univer-text-sm [&_input]:univer-text-gray-700 [&_input]:univer-outline-none",
+		className: "dark:![&_input]:univer-border-gray-600 dark:![&_input]:univer-text-gray-0 univer-flex univer-gap-2 [&_input]:univer-box-border [&_input]:univer-flex [&_input]:univer-h-7 [&_input]:univer-items-center [&_input]:univer-rounded [&_input]:univer-border [&_input]:univer-border-solid [&_input]:univer-border-gray-200 [&_input]:univer-bg-transparent [&_input]:univer-px-1.5 [&_input]:univer-text-sm [&_input]:univer-text-gray-700 [&_input]:univer-outline-none",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-relative univer-flex univer-flex-1 univer-gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HexInput, {
@@ -1676,7 +1680,7 @@ function ColorPresets({ hsv, onChange }) {
 			children: row.map((color, j) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: clsx$1("univer-box-border univer-size-5 univer-cursor-pointer univer-rounded-full univer-border univer-border-solid univer-border-transparent univer-bg-gray-300 univer-transition-shadow", {
-					"univer-ring-2 univer-ring-offset-2 univer-ring-offset-white dark:!univer-ring-primary-600 dark:!univer-ring-offset-gray-600": color.toUpperCase() === currentColor.toUpperCase(),
+					"univer-ring-2 univer-ring-offset-2 univer-ring-offset-gray-0 dark:!univer-ring-primary-600 dark:!univer-ring-offset-gray-600": color.toUpperCase() === currentColor.toUpperCase(),
 					"!univer-border-gray-200": i === 0 && j === 0
 				}),
 				style: { backgroundColor: color },
@@ -1772,7 +1776,7 @@ function ColorSpectrum({ hsv, onChange, onChanged }) {
 			},
 			onPointerMove: (e) => isDragging && handlePointerEvent(e)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-pointer-events-none univer-absolute univer-left-0 univer-top-0 univer-size-4 univer-rounded-full univer-border-2 univer-border-white univer-shadow-md univer-ring-2 univer-ring-white univer-will-change-transform",
+			className: "univer-pointer-events-none univer-absolute univer-left-0 univer-top-0 univer-size-4 univer-rounded-full univer-border-2 univer-border-gray-0 univer-shadow-md univer-ring-2 univer-ring-gray-0 univer-will-change-transform",
 			style: getIndicatorStyles()
 		})]
 	});
@@ -1872,7 +1876,7 @@ function HueSlider({ hsv, onChange, onChanged }) {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: thumbRef,
 				"data-u-comp": "color-picker-hue-slider-thumb",
-				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-white univer-transition-transform univer-duration-75 univer-will-change-transform",
+				className: "univer-absolute univer-top-1/2 univer-box-border univer-size-2 univer-rounded-full univer-bg-transparent univer-shadow-md univer-ring-2 univer-ring-gray-0 univer-transition-transform univer-duration-75 univer-will-change-transform",
 				style: {
 					left: getThumbPosition(),
 					transform: "translateY(-50%)",
@@ -1991,13 +1995,14 @@ function ColorPicker({ format = "hex", value, onChange }) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-flex univer-h-7 univer-items-center",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-					className: "univer-cursor-pointer univer-gap-2 univer-text-sm univer-text-gray-900 univer-transition-opacity hover:univer-opacity-80 dark:!univer-text-white",
+					className: "univer-cursor-pointer univer-gap-2 univer-text-sm univer-text-gray-900 univer-transition-opacity hover:univer-opacity-80 dark:!univer-text-gray-0",
 					onClick: () => setVisible(true),
 					children: locale === null || locale === void 0 ? void 0 : locale.ColorPicker.more
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
 				className: "!univer-z-[1090] !univer-w-fit !univer-p-2.5",
+				overlayClassName: "!univer-z-[1090]",
 				closable: false,
 				maskClosable: false,
 				open: visible,
@@ -2058,7 +2063,7 @@ function ColorPicker({ format = "hex", value, onChange }) {
 function Command({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(cmdk.Command, {
 		"data-slot": "command",
-		className: clsx$1("univer-flex univer-h-full univer-w-full univer-flex-col univer-overflow-hidden univer-rounded-md univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-700 dark:!univer-text-white", className),
+		className: clsx$1("univer-flex univer-h-full univer-w-full univer-flex-col univer-overflow-hidden univer-rounded-md univer-bg-gray-0 univer-text-gray-900 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", className),
 		...props
 	});
 }
@@ -2190,7 +2195,7 @@ function DatePicker(props) {
 		open,
 		onOpenChange: setOpen,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			className: clsx$1("univer-flex univer-h-8 univer-items-center univer-justify-between univer-gap-2 univer-rounded-md univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-800 univer-transition-all hover:univer-border-primary-600 dark:!univer-text-white", borderClassName, className),
+			className: clsx$1("univer-flex univer-h-8 univer-items-center univer-justify-between univer-gap-2 univer-rounded-md univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-800 univer-transition-all hover:univer-border-primary-600 dark:!univer-text-gray-0", borderClassName, className),
 			type: "button",
 			children: [formatDateWithPattern(value, "YYYY-MM-DD"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CalendarIcon, { className: "univer-text-gray-600 dark:!univer-text-gray-400" })]
 		})
@@ -2244,7 +2249,7 @@ function DateRangePicker(props) {
 		open,
 		onOpenChange: setOpen,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			className: clsx$1("univer-flex univer-h-8 univer-items-center univer-justify-between univer-gap-2 univer-rounded-md univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-800 univer-transition-all hover:univer-border-primary-600 dark:!univer-text-white", borderClassName, className),
+			className: clsx$1("univer-flex univer-h-8 univer-items-center univer-justify-between univer-gap-2 univer-rounded-md univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-800 univer-transition-all hover:univer-border-primary-600 dark:!univer-text-gray-0", borderClassName, className),
 			type: "button",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "univer-flex univer-gap-1",
@@ -2421,7 +2426,7 @@ function DraggableList(props) {
 		})
 	}), canUsePortal && draggingItem && ghostPosition && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		dir: direction,
-		className: clsx$1("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-white univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
+		className: clsx$1("univer-pointer-events-none univer-fixed univer-rounded-md univer-border univer-border-gray-200 univer-bg-gray-0 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-800"),
 		style: {
 			zIndex: 2147483647,
 			left: `${ghostPosition.x}px`,
@@ -2447,7 +2452,7 @@ const FormLayout = (props) => {
 			className: clsx$1("univer-mb-3 univer-flex univer-flex-col", className),
 			style,
 			children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: clsx$1("univer-mb-2 univer-flex univer-min-h-3.5 univer-items-center univer-text-sm univer-text-gray-900 dark:!univer-text-white", { "univer-cursor-pointer": collapsable }),
+				className: clsx$1("univer-mb-2 univer-flex univer-min-h-3.5 univer-items-center univer-text-sm univer-text-gray-900 dark:!univer-text-gray-0", { "univer-cursor-pointer": collapsable }),
 				onClick: () => setCollapsed(!collapsed),
 				children: [label, collapsable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreUpIcon, { className: clsx$1("univer-ml-1 univer-transition-transform", { "univer-rotate-180": collapsed }) })]
 			}), collapsed && collapsable ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [desc && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2496,9 +2501,12 @@ const FormDualColumnLayout = (props) => {
 * limitations under the License.
 */
 function Pager(props) {
-	const { className, value: current = 0, total: count = 0, loop, text: propText, onChange } = props;
+	const { className, value: current = 0, total: count = 0, loop, text: propText, previousButtonAriaLabel, nextButtonAriaLabel, onChange } = props;
+	const { locale } = (0, react.useContext)(ConfigContext);
 	const text = propText ?? `${current}/${count}`;
 	const hasValue = count > 0;
+	const previousButtonDisabled = !loop && current <= 1;
+	const nextButtonDisabled = !loop && current >= count;
 	const onClickLeftArrow = () => {
 		if (current === 1) {
 			if (loop) onChange === null || onChange === void 0 || onChange(count);
@@ -2515,23 +2523,33 @@ function Pager(props) {
 		children: hasValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				"data-u-comp": "pager-left-arrow",
-				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
+				className: "univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-500 disabled:univer-cursor-default disabled:univer-opacity-40 dark:hover:!univer-bg-gray-600",
 				type: "button",
-				role: "button",
+				"aria-label": previousButtonAriaLabel ?? (locale === null || locale === void 0 ? void 0 : locale.Accessibility.previous) ?? "Previous",
+				disabled: previousButtonDisabled,
 				onClick: onClickLeftArrow,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, { className: "rtl:univer-rotate-180" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, {
+					className: "rtl:univer-rotate-180",
+					"aria-hidden": "true"
+				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "univer-mx-1",
+				"aria-live": "polite",
+				"aria-atomic": "true",
 				children: text
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				"data-u-comp": "pager-right-arrow",
-				className: "univer-inline-flex univer-size-4 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600",
+				className: "univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-rounded univer-border-none univer-bg-transparent univer-p-0 univer-text-current hover:univer-bg-gray-50 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-500 disabled:univer-cursor-default disabled:univer-opacity-40 dark:hover:!univer-bg-gray-600",
 				type: "button",
-				role: "button",
+				"aria-label": nextButtonAriaLabel ?? (locale === null || locale === void 0 ? void 0 : locale.Accessibility.next) ?? "Next",
+				disabled: nextButtonDisabled,
 				onClick: onClickRightArrow,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, { className: "rtl:univer-rotate-180" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {
+					className: "rtl:univer-rotate-180",
+					"aria-hidden": "true"
+				})
 			})
 		] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-mx-1",
@@ -2557,40 +2575,83 @@ function Pager(props) {
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-const buttonClassName = `
-    univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-border-none
-    univer-bg-transparent univer-p-0 univer-text-current
-    hover:univer-text-white
+const toolbarButtonClassName = `
+    !univer-border-transparent !univer-bg-transparent !univer-text-gray-300
+    hover:!univer-bg-gray-600 hover:!univer-text-gray-0
+    focus-visible:!univer-outline-none focus-visible:!univer-ring-2 focus-visible:!univer-ring-gray-0
+`;
+const focusableElementSelector = `
+    button:not([disabled]), [href], input:not([disabled]), select:not([disabled]),
+    textarea:not([disabled]), [tabindex]:not([tabindex="-1"])
 `;
 function Gallery(props) {
+	var _locale$Accessibility;
 	const { className, images, open, onOpenChange } = props;
-	const [isVisible, setIsVisible] = (0, react.useState)(false);
+	const [isVisible, setIsVisible] = (0, react.useState)(Boolean(open));
 	const [activeImageIndex, setActiveImageIndex] = (0, react.useState)(0);
 	const [zoomLevel, setZoomLevel] = (0, react.useState)(1);
 	const { direction, locale } = (0, react.useContext)(ConfigContext);
 	const dialogRef = (0, react.useRef)(null);
+	const closeButtonRef = (0, react.useRef)(null);
+	const previouslyFocusedElementRef = (0, react.useRef)(null);
 	const activeImage = images[activeImageIndex];
 	const hasPagination = images.length > 1;
+	const imageLabel = (locale === null || locale === void 0 || (_locale$Accessibility = locale.Accessibility.image) === null || _locale$Accessibility === void 0 ? void 0 : _locale$Accessibility.replace("{0}", String(activeImageIndex + 1)).replace("{1}", String(images.length))) ?? `Image ${activeImageIndex + 1} of ${images.length}`;
 	(0, react.useEffect)(() => {
-		if (open && dialogRef.current) dialogRef.current.focus();
+		const timer = setTimeout(() => {
+			var _previouslyFocusedEle;
+			setIsVisible(Boolean(open));
+			if (!open && ((_previouslyFocusedEle = previouslyFocusedElementRef.current) === null || _previouslyFocusedEle === void 0 ? void 0 : _previouslyFocusedEle.isConnected)) previouslyFocusedElementRef.current.focus();
+			if (!open) previouslyFocusedElementRef.current = null;
+		}, open ? 0 : 150);
+		return () => clearTimeout(timer);
 	}, [open]);
 	(0, react.useEffect)(() => {
+		var _closeButtonRef$curre;
 		if (!open) return;
-		const handler = (e) => {
-			if (e.key === "Escape") onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+		previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		(_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 || _closeButtonRef$curre.focus();
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open && !isVisible) return;
+		const handler = (event) => {
+			if (event.key === "Escape" && open) {
+				event.preventDefault();
+				event.stopPropagation();
+				onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
+				return;
+			}
+			if (event.key !== "Tab" || !dialogRef.current) return;
+			const focusableElements = Array.from(dialogRef.current.querySelectorAll(focusableElementSelector));
+			if (focusableElements.length === 0) {
+				event.preventDefault();
+				dialogRef.current.focus();
+				return;
+			}
+			const firstElement = focusableElements[0];
+			const lastElement = focusableElements[focusableElements.length - 1];
+			const activeElement = document.activeElement;
+			if (event.shiftKey && (activeElement === firstElement || !dialogRef.current.contains(activeElement))) {
+				event.preventDefault();
+				lastElement.focus();
+			} else if (!event.shiftKey && (activeElement === lastElement || !dialogRef.current.contains(activeElement))) {
+				event.preventDefault();
+				firstElement.focus();
+			}
 		};
 		window.addEventListener("keydown", handler);
 		return () => window.removeEventListener("keydown", handler);
-	}, [open, onOpenChange]);
+	}, [
+		isVisible,
+		onOpenChange,
+		open
+	]);
 	(0, react.useEffect)(() => {
-		if (open) setIsVisible(true);
-		else {
-			const timer = setTimeout(() => {
-				setIsVisible(false);
-			}, 150);
-			return () => clearTimeout(timer);
-		}
-	}, [open]);
+		return () => {
+			var _previouslyFocusedEle2;
+			if ((_previouslyFocusedEle2 = previouslyFocusedElementRef.current) === null || _previouslyFocusedEle2 === void 0 ? void 0 : _previouslyFocusedEle2.isConnected) previouslyFocusedElementRef.current.focus();
+		};
+	}, []);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const handleWheel = (e) => {
@@ -2609,17 +2670,17 @@ function Gallery(props) {
 			setZoomLevel(1);
 			return;
 		}
-		const newZoomLevel = zoomLevel + ratio;
-		if (newZoomLevel < .5) return;
-		if (newZoomLevel > 2) return;
-		setZoomLevel(newZoomLevel);
+		setZoomLevel((previousZoomLevel) => Math.min(Math.max(.5, previousZoomLevel + ratio), 2));
+	}
+	function handleClose() {
+		onOpenChange === null || onOpenChange === void 0 || onOpenChange(false);
 	}
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "gallery",
 		dir: direction,
 		role: "dialog",
 		"aria-modal": "true",
-		"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.imageGallery,
+		"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.imageGallery) ?? "Image gallery",
 		tabIndex: -1,
 		ref: dialogRef,
 		className: clsx$1("univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-h-screen univer-w-screen univer-select-none univer-items-center univer-justify-center", {
@@ -2630,7 +2691,18 @@ function Gallery(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-absolute univer-inset-0 univer-size-full univer-bg-gray-900 univer-opacity-80",
 				"aria-hidden": "true",
-				onClick: () => onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false)
+				onClick: handleClose
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				ref: closeButtonRef,
+				"data-u-comp": "gallery-close",
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.close) ?? "Close",
+				className: "univer-absolute univer-right-4 univer-top-4 univer-z-10 univer-size-10 univer-rounded-full !univer-border-gray-500 !univer-bg-gray-800 !univer-text-gray-0 hover:!univer-bg-gray-700 focus-visible:!univer-outline-none focus-visible:!univer-ring-2 focus-visible:!univer-ring-gray-0 rtl:univer-left-4 rtl:univer-right-auto",
+				onClick: handleClose,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { "aria-hidden": "true" })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-relative univer-flex univer-w-fit univer-items-center univer-justify-center",
@@ -2638,10 +2710,16 @@ function Gallery(props) {
 					className: "univer-h-full univer-w-full univer-object-contain univer-transition-transform univer-duration-300 univer-ease-out",
 					style: { transform: `scale(${zoomLevel})` },
 					src: activeImage,
-					alt: locale === null || locale === void 0 ? void 0 : locale.Accessibility.image.replace("{0}", String(activeImageIndex + 1)).replace("{1}", String(images.length)),
+					alt: imageLabel,
 					draggable: false
 				})
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "univer-sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: imageLabel
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
 				className: "univer-absolute univer-bottom-6 univer-left-1/2 univer-flex -univer-translate-x-1/2 univer-items-center univer-gap-3 univer-rounded-full univer-bg-gray-800 univer-px-6 univer-py-3 univer-text-gray-400 rtl:univer-flex-row-reverse",
 				children: [
@@ -2649,26 +2727,37 @@ function Gallery(props) {
 						className: "!univer-text-gray-400 [&_[data-u-comp=pager-left-arrow]:hover]:!univer-bg-gray-600 [&_[data-u-comp=pager-right-arrow]:hover]:!univer-bg-gray-600",
 						value: activeImageIndex + 1,
 						total: images.length,
+						previousButtonAriaLabel: (locale === null || locale === void 0 ? void 0 : locale.Accessibility.previous) ?? "Previous",
+						nextButtonAriaLabel: (locale === null || locale === void 0 ? void 0 : locale.Accessibility.next) ?? "Next",
 						onChange: (value) => setActiveImageIndex(value - 1)
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
-						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomIn,
-						className: buttonClassName,
+						variant: "ghost",
+						size: "icon",
+						"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomIn) ?? "Zoom in",
+						className: toolbarButtonClassName,
+						disabled: zoomLevel >= 2,
 						onClick: () => handleToggleZoom(.25),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ZoomInIcon, { "aria-hidden": "true" })
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
-						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomOut,
-						className: buttonClassName,
+						variant: "ghost",
+						size: "icon",
+						"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.zoomOut) ?? "Zoom out",
+						className: toolbarButtonClassName,
+						disabled: zoomLevel <= .5,
 						onClick: () => handleToggleZoom(-.25),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ZoomOutIcon, { "aria-hidden": "true" })
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
-						"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.resetZoom,
-						className: buttonClassName,
+						variant: "ghost",
+						size: "icon",
+						"aria-label": (locale === null || locale === void 0 ? void 0 : locale.Accessibility.resetZoom) ?? "Reset zoom",
+						className: toolbarButtonClassName,
+						disabled: zoomLevel === 1,
 						onClick: () => handleToggleZoom("reset"),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.OneToOneIcon, { "aria-hidden": "true" })
 					})
@@ -2680,7 +2769,7 @@ function Gallery(props) {
 
 //#endregion
 //#region src/components/input/Input.tsx
-const inputVariants = (0, class_variance_authority.cva)("univer-box-border univer-w-full univer-rounded-md univer-bg-white univer-transition-colors univer-duration-200 placeholder:univer-text-gray-400 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-50 dark:!univer-bg-gray-700 dark:!univer-text-white dark:focus:!univer-ring-primary-900", {
+const inputVariants = (0, class_variance_authority.cva)("univer-box-border univer-w-full univer-rounded-md univer-bg-gray-0 univer-text-gray-900 univer-transition-colors univer-duration-200 placeholder:univer-text-gray-400 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-50 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 dark:focus:!univer-ring-primary-900", {
 	variants: { size: {
 		mini: "univer-h-7 univer-px-1.5 univer-text-sm",
 		small: "univer-h-8 univer-px-2 univer-text-sm",
@@ -2921,7 +3010,7 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 			}), controls && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: clsx$1("univer-absolute univer-right-px univer-top-px univer-flex univer-h-[calc(100%-2px)] univer-flex-col univer-overflow-hidden univer-rounded-r-md before:univer-absolute before:univer-top-1/2 before:univer-block before:univer-h-px before:univer-w-full before:-univer-translate-y-1/2 before:univer-bg-gray-200 before:univer-content-[\"\"] rtl:univer-left-px rtl:univer-right-auto rtl:univer-rounded-l-md rtl:univer-rounded-r-none dark:before:!univer-bg-gray-600", borderLeftClassName, borderLeftRTLClassName, controlsClassName),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: clsx$1("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", incrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
+					className: clsx$1("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600", incrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
 					role: "button",
 					"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.increment,
 					"aria-disabled": incrementDisabled,
@@ -2933,7 +3022,7 @@ const InputNumber = (0, react.forwardRef)(({ value, defaultValue, size = "small"
 					},
 					children: "+"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: clsx$1("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", decrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
+					className: clsx$1("univer-box-border univer-flex univer-h-1/2 univer-w-5 univer-cursor-pointer univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600", decrementDisabled && "univer-cursor-not-allowed univer-opacity-60"),
 					role: "button",
 					"aria-label": locale === null || locale === void 0 ? void 0 : locale.Accessibility.decrement,
 					"aria-disabled": decrementDisabled,
@@ -3000,15 +3089,15 @@ function Segmented({ items, value, defaultValue, onChange, className = "" }) {
 		ref: containerRef,
 		className: clsx$1("univer-relative univer-box-border univer-flex univer-min-w-0 univer-gap-1 univer-rounded-lg univer-bg-gray-100 univer-p-1 dark:!univer-bg-gray-800", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-animate-univer-slide univer-absolute univer-h-6 univer-rounded-md univer-bg-white univer-shadow-sm univer-transition-all univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-gray-400",
+			className: "univer-animate-univer-slide univer-absolute univer-h-6 univer-rounded-md univer-bg-gray-0 univer-shadow-sm univer-transition-all univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-gray-400",
 			style: slideStyle
 		}), items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			ref: (el) => {
 				if (el) itemRefs.current.set(item.value, el);
 			},
 			className: clsx$1("univer-relative univer-box-border univer-min-w-0 univer-flex-1 univer-cursor-pointer univer-truncate univer-border-none univer-bg-transparent univer-px-3 univer-py-1 univer-text-xs univer-font-medium univer-transition-colors", {
-				"univer-text-gray-900 dark:!univer-text-white": selectedItem === item.value,
-				"univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-white": selectedItem !== item.value
+				"univer-text-gray-900 dark:!univer-text-gray-0": selectedItem === item.value,
+				"univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-gray-0": selectedItem !== item.value
 			}),
 			type: "button",
 			onClick: () => handleClick(item.value),
@@ -3164,7 +3253,7 @@ function Tooltip(props) {
 		ref: tooltipRef,
 		dir: direction,
 		role: "tooltip",
-		className: clsx$1("univer-animate-in univer-fade-in-0 univer-zoom-in-95 univer-pointer-events-auto univer-absolute univer-z-[1081] univer-box-border univer-w-fit univer-max-w-sm univer-text-balance univer-rounded-lg univer-bg-gray-700 univer-px-2.5 univer-py-2 univer-text-xs univer-font-medium univer-text-white univer-shadow-lg univer-drop-shadow-sm dark:!univer-bg-gray-100 dark:!univer-text-gray-900", className),
+		className: clsx$1("univer-animate-in univer-fade-in-0 univer-zoom-in-95 univer-pointer-events-auto univer-absolute univer-z-[1081] univer-box-border univer-w-fit univer-max-w-sm univer-text-balance univer-rounded-lg univer-bg-gray-700 univer-px-2.5 univer-py-2 univer-text-xs univer-font-medium univer-text-gray-0 univer-shadow-lg univer-drop-shadow-sm dark:!univer-bg-gray-100 dark:!univer-text-gray-900", className),
 		style: {
 			top: (coords === null || coords === void 0 ? void 0 : coords.top) ?? -9999,
 			left: (coords === null || coords === void 0 ? void 0 : coords.left) ?? -9999
@@ -3387,7 +3476,7 @@ function GradientColorPicker(props) {
 	}, [draftValue, stops]);
 	const showAngleEditor = draftValue.type === "linear" || draftValue.type === "angular";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: clsx$1(compact ? "univer-flex univer-w-full univer-min-w-0 univer-flex-col univer-gap-3 univer-rounded-md univer-bg-transparent univer-p-0 dark:!univer-bg-transparent" : "univer-flex univer-w-full univer-min-w-0 univer-max-w-80 univer-flex-col univer-gap-4 univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-bg-gray-800", className),
+		className: clsx$1(compact ? "univer-flex univer-w-full univer-min-w-0 univer-flex-col univer-gap-3 univer-rounded-md univer-bg-transparent univer-p-0 dark:!univer-bg-transparent" : "univer-flex univer-w-full univer-min-w-0 univer-max-w-80 univer-flex-col univer-gap-4 univer-rounded-lg univer-bg-gray-0 univer-p-4 univer-shadow-lg dark:!univer-bg-gray-800", className),
 		onClick: (e) => e.stopPropagation(),
 		onPointerDown: (e) => e.stopPropagation(),
 		children: [
@@ -3414,7 +3503,7 @@ function GradientColorPicker(props) {
 					const selected = draftValue.type === item.value;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
-						className: clsx$1("univer-relative univer-min-w-0 univer-flex-1 univer-cursor-pointer univer-truncate univer-border-none univer-bg-transparent univer-px-0 univer-pb-2 univer-pt-0 univer-text-xs univer-transition-colors", selected ? "univer-font-medium univer-text-primary-600 dark:!univer-text-primary-300" : "univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-white"),
+						className: clsx$1("univer-relative univer-min-w-0 univer-flex-1 univer-cursor-pointer univer-truncate univer-border-none univer-bg-transparent univer-px-0 univer-pb-2 univer-pt-0 univer-text-xs univer-transition-colors", selected ? "univer-font-medium univer-text-primary-600 dark:!univer-text-primary-300" : "univer-text-gray-500 hover:univer-text-gray-900 dark:hover:!univer-text-gray-0"),
 						onClick: () => handleTypeChange(item.value),
 						children: [item.label, selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "univer-absolute univer-inset-x-2 -univer-bottom-px univer-h-0.5 univer-rounded-full univer-bg-primary-600 dark:!univer-bg-primary-300" })]
 					}, item.value);
@@ -3472,7 +3561,7 @@ function GradientColorPicker(props) {
 				}), draftValue.stops.map((stop, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					"data-u-comp": "gradient-color-picker-stop",
 					"data-selected": selectedIndex === index,
-					className: clsx$1("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-white univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
+					className: clsx$1("univer-absolute univer-top-1/2 univer-size-4 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-cursor-pointer univer-rounded-full univer-border-2 univer-border-gray-0 univer-shadow-md", selectedIndex === index ? "univer-z-10 univer-ring-2 univer-ring-primary-500" : "univer-z-0"),
 					style: {
 						left: `${stop.offset}%`,
 						backgroundColor: getStopColor(stop)
@@ -3579,7 +3668,7 @@ const HoverCardContent = (0, react.forwardRef)(({ className, align = "center", s
 	ref,
 	align,
 	sideOffset,
-	className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-w-64 univer-origin-[--radix-hover-card-content-transform-origin] univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900 dark:!univer-text-white", borderClassName, className),
+	className: clsx$1("data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0 data-[state=closed]:univer-zoom-out-95 data-[side=bottom]:univer-slide-in-from-top-2 data-[side=left]:univer-slide-in-from-right-2 data-[side=right]:univer-slide-in-from-left-2 data-[side=top]:univer-slide-in-from-bottom-2 univer-z-[1080] univer-w-64 univer-origin-[--radix-hover-card-content-transform-origin] univer-rounded-md univer-bg-gray-0 univer-text-gray-900 univer-shadow-md univer-outline-none dark:!univer-bg-gray-900 dark:!univer-text-gray-0", borderClassName, className),
 	...props
 }));
 HoverCardContent.displayName = _radix_ui_react_hover_card.Content.displayName;
@@ -3631,7 +3720,7 @@ function KBD(props) {
 	const { keyboard, className } = props;
 	const keys = keyboard.split("+");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: clsx$1("univer-inline-block univer-h-6 univer-select-none univer-whitespace-nowrap univer-rounded-md univer-bg-gray-50 univer-px-2 univer-font-mono univer-text-xs/6 univer-font-medium univer-text-gray-700 dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName, className),
+		className: clsx$1("univer-inline-block univer-h-6 univer-select-none univer-whitespace-nowrap univer-rounded-md univer-bg-gray-50 univer-px-2 univer-font-mono univer-text-xs/6 univer-font-medium univer-text-gray-700 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", borderClassName, className),
 		children: keys.map((text, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("kbd", {
 			className: "univer-inline-block univer-h-full",
 			children: text
@@ -3693,7 +3782,7 @@ const Messager = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runt
 	expand: false,
 	icons: { loading: loadingIcon },
 	offset: { top: 16 },
-	className: clsx$1("[&_[data-sonner-toast]]:univer-bg-white/95 dark:[&_[data-sonner-toast]]:!univer-bg-gray-800/95 [&_[data-sonner-toast]]:univer-rounded-2xl [&_[data-sonner-toast]]:univer-border [&_[data-sonner-toast]]:univer-border-solid [&_[data-sonner-toast]]:univer-border-gray-200 [&_[data-sonner-toast]]:univer-shadow-[0_16px_40px_-20px_rgba(15,23,42,0.55)] [&_[data-sonner-toast]]:univer-backdrop-blur-sm dark:[&_[data-sonner-toast]]:!univer-border-gray-600", className),
+	className: clsx$1("[&_[data-sonner-toast]]:univer-bg-gray-0/95 dark:[&_[data-sonner-toast]]:!univer-bg-gray-800/95 [&_[data-sonner-toast]]:univer-rounded-2xl [&_[data-sonner-toast]]:univer-border [&_[data-sonner-toast]]:univer-border-solid [&_[data-sonner-toast]]:univer-border-gray-200 [&_[data-sonner-toast]]:univer-shadow-[0_16px_40px_-20px_rgba(15,23,42,0.55)] [&_[data-sonner-toast]]:univer-backdrop-blur-sm dark:[&_[data-sonner-toast]]:!univer-border-gray-600", className),
 	toastOptions: {
 		duration: DEFAULT_MESSAGE_DURATION,
 		classNames: {
@@ -3779,10 +3868,13 @@ function PanelSection(props) {
 				"univer-cursor-default": !collapsible
 			}),
 			onClick: () => collapsible && setExpanded((v) => !v),
-			children: [collapsible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: clsx$1("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
-				"-univer-rotate-90": !expanded,
-				"univer-rotate-0": expanded
-			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: title })]
+			children: [collapsible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, {
+				"aria-hidden": "true",
+				className: clsx$1("univer-size-2.5 univer-flex-shrink-0 univer-transition-transform", {
+					"-univer-rotate-90 rtl:univer-rotate-90": !expanded,
+					"univer-rotate-0": expanded
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: title })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			id: contentId,
 			role: "region",
@@ -3939,7 +4031,7 @@ function Radio(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		"data-u-comp": "radio",
 		className: clsx$1("univer-box-border univer-inline-flex univer-items-center univer-gap-2 univer-text-sm", {
-			"univer-cursor-pointer univer-text-gray-900 dark:!univer-text-white": !disabled,
+			"univer-cursor-pointer univer-text-gray-900 dark:!univer-text-gray-0": !disabled,
 			"univer-text-gray-400": disabled
 		}),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -3957,7 +4049,7 @@ function Radio(props) {
 					"univer-border-primary-600 univer-bg-primary-600 dark:!univer-bg-primary-600": checked,
 					"univer-border-gray-300 univer-bg-gray-50 dark:!univer-border-gray-500 dark:!univer-bg-gray-600": !checked
 				}),
-				children: checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-size-2 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded-full univer-bg-white" })
+				children: checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "univer-absolute univer-left-1/2 univer-top-1/2 univer-block univer-size-2 -univer-translate-x-1/2 -univer-translate-y-1/2 univer-rounded-full univer-bg-gray-0" })
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })]
 	});
@@ -3995,7 +4087,7 @@ function SelectList(props) {
 		children: options.map((option, index) => {
 			const checked = value.indexOf(option.value) > -1;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-				className: clsx$1("univer-relative univer-block univer-cursor-pointer univer-select-none univer-rounded univer-py-1.5 univer-pl-8 univer-pr-2 univer-text-sm univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-600", optionClassName, { "univer-bg-gray-200 dark:!univer-bg-gray-500": checked }),
+				className: clsx$1("univer-relative univer-block univer-cursor-pointer univer-select-none univer-rounded univer-py-1.5 univer-pl-8 univer-pr-2 univer-text-sm univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600", optionClassName, { "univer-bg-gray-200 dark:!univer-bg-gray-500": checked }),
 				onClick: () => handleSelect(option.value),
 				children: [!hideCheckMark && checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-absolute univer-left-0 univer-top-1/2 -univer-translate-y-1/2 univer-pl-2 univer-text-primary-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					style: { color: option.color },
@@ -4008,9 +4100,9 @@ function SelectList(props) {
 
 //#endregion
 //#region src/components/select/Select.tsx
-const selectClassName = clsx$1("univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-items-center univer-justify-between univer-gap-2 univer-rounded-lg univer-bg-white univer-px-2.5 univer-transition-colors univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-white", borderClassName);
+const selectClassName = clsx$1("univer-box-border univer-inline-flex univer-h-8 univer-min-w-36 univer-items-center univer-justify-between univer-gap-2 univer-rounded-lg univer-bg-gray-0 univer-px-2.5 univer-transition-colors univer-duration-200 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", borderClassName);
 function Select(props) {
-	const { className, value, disabled = false, options = [], borderless = false, onChange } = props;
+	const { className, value, disabled = false, options = [], borderless = false, side, avoidCollisions, onChange } = props;
 	const [open, setOpen] = (0, react.useState)(false);
 	function handleOpenChange(open) {
 		setOpen(open);
@@ -4060,6 +4152,8 @@ function Select(props) {
 		open,
 		items,
 		disabled,
+		side,
+		avoidCollisions,
 		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-u-comp": "select",
@@ -4071,9 +4165,9 @@ function Select(props) {
 				"univer-cursor-pointer": !disabled && !open
 			}, className),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-flex-1 univer-truncate univer-text-sm univer-text-gray-500 dark:!univer-text-white",
+				className: "univer-flex-1 univer-truncate univer-text-sm univer-text-gray-500 dark:!univer-text-gray-0",
 				children: displayValue
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-white" })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-gray-0" })]
 		})
 	});
 }
@@ -4136,7 +4230,7 @@ function MultipleSelect(props) {
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-box-border univer-flex univer-w-[calc(100%-16px)] univer-gap-2 univer-pr-2",
 				children: displayValue
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-white" })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-flex-shrink-0 dark:!univer-text-gray-0" })]
 		})
 	});
 }
@@ -4195,7 +4289,7 @@ const Switch = (props) => {
 					"univer-bg-primary-600": checked,
 					"univer-bg-gray-200 dark:!univer-bg-gray-600": !checked
 				}),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: clsx$1("univer-absolute univer-bottom-0.5 univer-left-0.5 univer-size-3 univer-rounded-full univer-bg-white univer-transition-transform univer-duration-200", { "univer-translate-x-3": checked }) })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: clsx$1("univer-absolute univer-bottom-0.5 univer-left-0.5 univer-size-3 univer-rounded-full univer-bg-gray-0 univer-transition-transform univer-duration-200", { "univer-translate-x-3": checked }) })
 			})]
 		})
 	});
@@ -4240,7 +4334,7 @@ const Textarea = (0, react.forwardRef)((props, ref) => {
 		ref: textareaRef,
 		"data-u-comp": "textarea",
 		"data-slot": "textarea",
-		className: clsx$1("univer-box-border univer-flex univer-w-full univer-resize univer-rounded-md univer-bg-transparent univer-p-2 univer-text-base univer-text-gray-900 univer-outline-none univer-transition-[color,box-shadow] placeholder:univer-text-gray-200 disabled:univer-cursor-not-allowed disabled:univer-opacity-50 dark:!univer-text-white", borderClassName, scrollbarClassName, className),
+		className: clsx$1("univer-box-border univer-flex univer-w-full univer-resize univer-rounded-md univer-bg-transparent univer-p-2 univer-text-base univer-text-gray-900 univer-outline-none univer-transition-[color,box-shadow] placeholder:univer-text-gray-200 disabled:univer-cursor-not-allowed disabled:univer-opacity-50 dark:!univer-text-gray-0", borderClassName, scrollbarClassName, className),
 		onChange: handleChange,
 		...restProps
 	});
@@ -4486,7 +4580,7 @@ function Tree(props) {
 		}, key);
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-		className: "univer-relative univer-select-none univer-text-gray-900 dark:!univer-text-white",
+		className: "univer-relative univer-select-none univer-text-gray-900 dark:!univer-text-gray-0",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-m-0 univer-h-full univer-list-none univer-p-0",
 			style,