diff --git a/packages-experimental/uni-formula-ui/package.json b/packages-experimental/uni-formula-ui/package.json index 7c7f3d748c..a5f6195026 100644 --- a/packages-experimental/uni-formula-ui/package.json +++ b/packages-experimental/uni-formula-ui/package.json @@ -67,6 +67,7 @@ }, "dependencies": { "@univerjs/core": "workspace:*", + "@univerjs/design": "workspace:*", "@univerjs/docs": "workspace:*", "@univerjs/docs-ui": "workspace:*", "@univerjs/engine-render": "workspace:*", diff --git a/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx b/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx index d07e7c990e..9b6d1e5e8c 100644 --- a/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx +++ b/packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx @@ -28,10 +28,11 @@ import { VerticalAlign, WrapStrategy, } from '@univerjs/core'; +import { borderClassName, clsx } from '@univerjs/design'; import { CheckMarkSingle, CloseSingle } from '@univerjs/icons'; import { useDependency, useObservable } from '@univerjs/ui'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef, useState } from 'react'; import { CloseFormulaPopupOperation, ConfirmFormulaPopupCommand } from '../../commands/operations/operation'; import { DOC_FORMULA_POPUP_KEY, UniFormulaPopupService } from '../../services/formula-popup.service'; @@ -131,12 +132,12 @@ function DocFormula(props: { popupInfo: IUniFormulaPopupInfo }) { return (
onHovered(true)} onMouseLeave={() => onHovered(false)} > diff --git a/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx b/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx index 8343a6084b..01791be166 100644 --- a/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx +++ b/packages-experimental/uni-slides-ui/src/views/UniSlideSideBar.tsx @@ -16,7 +16,7 @@ import type { SlideDataModel } from '@univerjs/core'; import { ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core'; -import { clsx, scrollbarClassName } from '@univerjs/design'; +import { borderClassName, clsx, scrollbarClassName } from '@univerjs/design'; import { IRenderManagerService } from '@univerjs/engine-render'; import { IncreaseSingle } from '@univerjs/icons'; import { ActivateSlidePageOperation, AppendSlideOperation, SetSlidePageThumbOperation } from '@univerjs/slides-ui'; @@ -107,10 +107,9 @@ export function UniSlideSideBar() { key={item.id} className={clsx(` univer-relative univer-my-4 univer-box-border univer-flex univer-w-[160px] - univer-overflow-hidden univer-rounded-lg univer-border univer-border-solid - univer-border-gray-200 - hover:univer-border-primary-500 - `, item.id === activatePageId && 'univer-border-primary-500')} + univer-overflow-hidden univer-rounded-lg + hover:univer-border-primary-600 + `, borderClassName, item.id === activatePageId && 'univer-border-primary-600')} onClick={() => activatePage(item.id)} > @@ -140,13 +139,10 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?: {shortcuts?.map((item) => (
{ showClose && (
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 - `, scrollbarClassName, wrapperClassName)} + `, borderClassName, scrollbarClassName, wrapperClassName)} > {activeOptions.map((options, index) => options.length diff --git a/packages/design/src/components/dialog/DialogPrimitive.tsx b/packages/design/src/components/dialog/DialogPrimitive.tsx index 31be884166..ba1242cc35 100644 --- a/packages/design/src/components/dialog/DialogPrimitive.tsx +++ b/packages/design/src/components/dialog/DialogPrimitive.tsx @@ -18,6 +18,7 @@ import type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from 'react import { Close, Content, Description, Overlay, Portal, Root, Title, Trigger } from '@radix-ui/react-dialog'; import { CloseSingle } from '@univerjs/icons'; import { forwardRef } from 'react'; +import { borderClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; const Dialog = Root; @@ -63,9 +64,8 @@ const DialogContent = forwardRef< ` univer-fixed univer-left-1/2 univer-top-1/2 univer-z-[1050] 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-border univer-border-solid univer-border-gray-200 univer-bg-white univer-px-6 univer-py-4 - univer-text-gray-500 univer-shadow-md univer-duration-200 - dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-gray-400 + univer-bg-white univer-px-6 univer-py-4 univer-text-gray-500 univer-shadow-md univer-duration-200 + dark:univer-bg-gray-700 dark:univer-text-gray-400 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%] @@ -74,6 +74,7 @@ const DialogContent = forwardRef< data-[state=open]:univer-slide-in-from-top-[48%] sm:univer-rounded-lg `, + borderClassName, className )} {...props} diff --git a/packages/design/src/components/dropdown-menu/DropdownMenu.tsx b/packages/design/src/components/dropdown-menu/DropdownMenu.tsx index 2a9d55235e..5dadab4928 100644 --- a/packages/design/src/components/dropdown-menu/DropdownMenu.tsx +++ b/packages/design/src/components/dropdown-menu/DropdownMenu.tsx @@ -172,7 +172,7 @@ export function DropdownMenu(props: IDropdownMenuProps) { {children} - e.stopPropagation()}> + e.stopPropagation()}> {items.map((item, index) => renderMenuItem(item, index))} diff --git a/packages/design/src/components/dropdown-menu/DropdownMenuPrimitive.tsx b/packages/design/src/components/dropdown-menu/DropdownMenuPrimitive.tsx index 973f9e28db..7c3cf7687a 100644 --- a/packages/design/src/components/dropdown-menu/DropdownMenuPrimitive.tsx +++ b/packages/design/src/components/dropdown-menu/DropdownMenuPrimitive.tsx @@ -33,8 +33,8 @@ import { Trigger, } from '@radix-ui/react-dropdown-menu'; import { CheckMarkSingle, MoreRightSingle } from '@univerjs/icons'; +import { borderClassName, scrollbarClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; -import { scrollbarClassName } from '../../helper/scrollbar-cls'; function DropdownMenuPrimitive({ ...props @@ -127,9 +127,9 @@ function DropdownMenuSubContent({ className={clsx( ` univer-z-[1080] univer-box-border univer-max-h-[var(--radix-popper-available-height)] - univer-overflow-y-auto univer-rounded-md univer-border univer-border-solid univer-border-gray-200 - univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md - dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white + 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 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 @@ -139,6 +139,7 @@ function DropdownMenuSubContent({ data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 `, + borderClassName, scrollbarClassName, className )} @@ -160,9 +161,9 @@ function DropdownMenuContent({ className={clsx( ` univer-z-[1080] univer-box-border univer-max-h-[var(--radix-popper-available-height)] - univer-overflow-y-auto univer-rounded-md univer-border univer-border-solid univer-border-gray-200 - univer-bg-white univer-p-1.5 univer-text-gray-900 univer-shadow-md - dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white + 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 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 @@ -172,6 +173,7 @@ function DropdownMenuContent({ data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 `, + borderClassName, scrollbarClassName, className )} diff --git a/packages/design/src/components/dropdown/Dropdown.stories.tsx b/packages/design/src/components/dropdown/Dropdown.stories.tsx index 1521352fe3..57535b9b0f 100644 --- a/packages/design/src/components/dropdown/Dropdown.stories.tsx +++ b/packages/design/src/components/dropdown/Dropdown.stories.tsx @@ -16,6 +16,8 @@ import type { Meta } from '@storybook/react'; +import { borderClassName } from '../../helper/class-utilities'; +import { clsx } from '../../helper/clsx'; import { Dropdown } from './Dropdown'; const meta: Meta = { @@ -53,11 +55,10 @@ export const Playground = { )} > Click me diff --git a/packages/design/src/components/dropdown/PopoverPrimitive.tsx b/packages/design/src/components/dropdown/PopoverPrimitive.tsx index e76c91dae6..82fcd9dd48 100644 --- a/packages/design/src/components/dropdown/PopoverPrimitive.tsx +++ b/packages/design/src/components/dropdown/PopoverPrimitive.tsx @@ -16,8 +16,8 @@ import type { ComponentProps } from 'react'; import { Anchor, Content, Portal, Root, Trigger } from '@radix-ui/react-popover'; +import { borderClassName, scrollbarClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; -import { scrollbarClassName } from '../../helper/scrollbar-cls'; function PopoverPrimitive({ ...props @@ -46,9 +46,8 @@ function PopoverContent({ className={clsx( ` univer-z-[1080] univer-max-h-[var(--radix-popper-available-height)] univer-overflow-y-auto - univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-white - univer-text-gray-900 univer-shadow-md univer-outline-hidden - dark:univer-border-gray-600 dark:univer-bg-gray-900 + univer-rounded-md univer-bg-white univer-text-gray-900 univer-shadow-md univer-outline-hidden + dark:univer-bg-gray-900 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 @@ -58,6 +57,7 @@ function PopoverContent({ data-[state=open]:univer-animate-in data-[state=open]:univer-fade-in-0 data-[state=open]:univer-zoom-in-95 `, + borderClassName, scrollbarClassName, className )} diff --git a/packages/design/src/components/input-number/InputNumber.tsx b/packages/design/src/components/input-number/InputNumber.tsx index 8add45ffaf..ee921312b8 100644 --- a/packages/design/src/components/input-number/InputNumber.tsx +++ b/packages/design/src/components/input-number/InputNumber.tsx @@ -331,6 +331,7 @@ export const InputNumber = forwardRef( univer-h-[calc(100%-2px)] univer-w-6 univer-flex-col univer-border univer-border-y-0 univer-border-l univer-border-r-0 univer-border-solid univer-border-gray-200 univer-border-l-gray-200 + dark:univer-border-gray-600 `, controlsClassName )} @@ -341,6 +342,7 @@ export const InputNumber = forwardRef( univer-border-none !univer-bg-transparent univer-text-xs after:univer-absolute after:-univer-bottom-px after:univer-block after:univer-h-px after:univer-w-full after:univer-bg-gray-200 after:univer-content-[''] + dark:after:univer-bg-gray-600 `} tabIndex={-1} disabled={disabled || (max !== undefined && internalValue !== null && internalValue >= max)} diff --git a/packages/design/src/components/input/Input.tsx b/packages/design/src/components/input/Input.tsx index d29d77e1ee..c3a0dfda78 100644 --- a/packages/design/src/components/input/Input.tsx +++ b/packages/design/src/components/input/Input.tsx @@ -18,15 +18,15 @@ import type { VariantProps } from 'class-variance-authority'; import { CloseSingle } from '@univerjs/icons'; import { cva } from 'class-variance-authority'; import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react'; +import { borderClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; type InputProps = React.InputHTMLAttributes; export const inputVariants = cva( ` - univer-box-border univer-w-full univer-rounded-md univer-border univer-border-solid univer-border-gray-200 - univer-bg-white univer-transition-colors univer-duration-200 - dark:univer-border-gray-600 dark:univer-bg-gray-700 dark:univer-text-white + univer-box-border univer-w-full univer-rounded-md univer-bg-white univer-transition-colors univer-duration-200 + dark:univer-bg-gray-700 dark:univer-text-white focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-600/20 placeholder:univer-text-gray-400 `, @@ -131,6 +131,7 @@ export const Input = forwardRef( type={type} className={clsx( inputVariants({ size }), + borderClassName, disabled && ` univer-cursor-not-allowed univer-bg-gray-50 univer-text-gray-400 dark:univer-text-gray-500 diff --git a/packages/design/src/components/kbd/Kbd.tsx b/packages/design/src/components/kbd/Kbd.tsx index 51727543ee..0e57fe3459 100644 --- a/packages/design/src/components/kbd/Kbd.tsx +++ b/packages/design/src/components/kbd/Kbd.tsx @@ -15,6 +15,7 @@ */ import { Fragment } from 'react/jsx-runtime'; +import { borderClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; export interface IKBDProps { @@ -30,11 +31,10 @@ export function KBD(props: IKBDProps) { return ( {keys.map((text, index) => ( diff --git a/packages/design/src/components/menu/Menu.tsx b/packages/design/src/components/menu/Menu.tsx index 0eec727d89..c46976f725 100644 --- a/packages/design/src/components/menu/Menu.tsx +++ b/packages/design/src/components/menu/Menu.tsx @@ -76,13 +76,14 @@ export function TinyMenuGroup({ items }: ITinyMenuGroupProps) { const ele = (
item.onClick()} > diff --git a/packages/design/src/components/message/Message.tsx b/packages/design/src/components/message/Message.tsx index 168e2f12b7..3b3b37c65c 100644 --- a/packages/design/src/components/message/Message.tsx +++ b/packages/design/src/components/message/Message.tsx @@ -61,7 +61,7 @@ const Message = ({ content, type = MessageType.Info }: IMessageProps) => { univer-min-w-[320px] univer-max-w-[480px] univer-rounded-xl univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-4 univer-font-sans univer-shadow-md univer-transition-all univer-duration-300 univer-animate-in univer-fade-in univer-slide-in-from-top-4 - dark:univer-border-gray-700 dark:univer-bg-gray-700 + dark:univer-border-gray-600 dark:univer-bg-gray-700 ` )} > diff --git a/packages/design/src/components/select-list/SelectList.tsx b/packages/design/src/components/select-list/SelectList.tsx index ff9ca1911f..f12859187f 100644 --- a/packages/design/src/components/select-list/SelectList.tsx +++ b/packages/design/src/components/select-list/SelectList.tsx @@ -15,8 +15,8 @@ */ import { CheckMarkSingle } from '@univerjs/icons'; +import { borderClassName, scrollbarClassName } from '../../helper/class-utilities'; import { clsx } from '../../helper/clsx'; -import { scrollbarClassName } from '../../helper/scrollbar-cls'; export interface ISelectListProps { /** @@ -85,8 +85,8 @@ export function SelectList(props: ISelectListProps) {