From dac660f6936ab795d52561ce79d0e6a7a721cc71 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Mon, 22 Apr 2024 18:24:21 +0800 Subject: [PATCH] chore: use rgba --- .../client/src/css-variable/CSSVariableProvider.tsx | 11 +++-------- .../actions/submit/createSubmitActionSettings.tsx | 12 ++++++------ .../antd/action/Action.Drawer.style.ts | 4 ++-- .../DataTemplates/FormDataTemplates.tsx | 4 ++-- .../src/client/DuplicateAction.Settings.tsx | 10 +++++----- .../token-panel-pro/TokenPreview.tsx | 2 +- 6 files changed, 19 insertions(+), 24 deletions(-) diff --git a/packages/core/client/src/css-variable/CSSVariableProvider.tsx b/packages/core/client/src/css-variable/CSSVariableProvider.tsx index ad9dd732d71..31acda40c80 100644 --- a/packages/core/client/src/css-variable/CSSVariableProvider.tsx +++ b/packages/core/client/src/css-variable/CSSVariableProvider.tsx @@ -1,5 +1,5 @@ import { TinyColor } from '@ctrl/tinycolor'; -import { useEffect, useMemo } from 'react'; +import { useEffect } from 'react'; import { defaultTheme } from '../global-theme'; import { useToken } from '../style'; @@ -14,11 +14,6 @@ export const CSSVariableProvider = ({ children }) => { .onBackground(token.colorFill) .toHexShortString(); - const colorBgDrawer = useMemo(() => { - const colorBgElevated = new TinyColor(token.colorBgElevated); - return colorBgElevated.isDark() ? token.colorBgElevated : colorBgElevated.darken(4).toHexString(); - }, [token.colorBgElevated]); - useEffect(() => { document.body.style.setProperty('--nb-spacing', `${token.marginLG}px`); document.body.style.setProperty('--nb-designer-offset', `${token.marginXS}px`); @@ -40,7 +35,6 @@ export const CSSVariableProvider = ({ children }) => { document.body.style.setProperty('--colorBgScrollBar', colorBgScrollBar); document.body.style.setProperty('--colorBgScrollBarHover', colorBgScrollBarHover); document.body.style.setProperty('--colorBgScrollBarActive', colorBgScrollBarActive); - document.body.style.setProperty('--colorBgDrawer', colorBgDrawer); document.body.style.setProperty('--colorSettings', token.colorSettings || defaultTheme.token.colorSettings); document.body.style.setProperty('--colorBgSettingsHover', token.colorBgSettingsHover); document.body.style.setProperty('--colorBorderSettingsHover', token.colorBorderSettingsHover); @@ -67,13 +61,14 @@ export const CSSVariableProvider = ({ children }) => { colorBgScrollBar, colorBgScrollBarHover, colorBgScrollBarActive, - colorBgDrawer, token.colorPrimaryText, token.colorPrimaryTextActive, token.colorPrimaryTextHover, token.colorSettings, token.colorBgSettingsHover, token.colorBorderSettingsHover, + token.colorWarningBg, + token.colorWarningBorder, ]); return children; diff --git a/packages/core/client/src/modules/actions/submit/createSubmitActionSettings.tsx b/packages/core/client/src/modules/actions/submit/createSubmitActionSettings.tsx index a7ec64efbd2..e5818d2dfd0 100644 --- a/packages/core/client/src/modules/actions/submit/createSubmitActionSettings.tsx +++ b/packages/core/client/src/modules/actions/submit/createSubmitActionSettings.tsx @@ -1,19 +1,19 @@ -import { useFieldSchema, useField, connect, mapProps, ISchema } from '@formily/react'; +import { ISchema, connect, mapProps, useField, useFieldSchema } from '@formily/react'; import { isValid } from '@formily/shared'; -import React, { useEffect, useState } from 'react'; import { Tree as AntdTree } from 'antd'; +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useSchemaToolbar } from '../../../application'; import { SchemaSettings } from '../../../application/schema-settings/SchemaSettings'; +import { useCollection_deprecated } from '../../../collection-manager'; +import { useDesignable } from '../../../schema-component'; import { ButtonEditor, RemoveButton, SecondConFirm, WorkflowConfig, } from '../../../schema-component/antd/action/Action.Designer'; -import { useTranslation } from 'react-i18next'; -import { useDesignable } from '../../../schema-component'; import { useCollectionState } from '../../../schema-settings/DataTemplates/hooks/useCollectionState'; -import { useCollection_deprecated } from '../../../collection-manager'; import { SchemaSettingsModalItem } from '../../../schema-settings/SchemaSettings'; const Tree = connect( @@ -80,7 +80,7 @@ export function SaveMode() { defaultCheckedKeys: field.componentProps.filterKeys, rootStyle: { padding: '8px 0', - border: '1px solid #d9d9d9', + border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', maxHeight: '30vh', overflow: 'auto', diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts b/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts index 7e6ebea7fba..763ef1f394f 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts +++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts @@ -9,11 +9,11 @@ export const useStyles = genStyleHook('nb-action-drawer', (token) => { '&.reset': { '&.nb-action-popup': { '.ant-drawer-header': { display: 'none' }, - '.ant-drawer-body': { paddingTop: token.paddingContentVerticalLG, backgroundColor: 'var(--colorBgDrawer)' }, + '.ant-drawer-body': { paddingTop: token.paddingContentVerticalLG, backgroundColor: token.colorBgElevated }, }, '&.nb-record-picker-selector': { '.ant-drawer-wrapper-body': { - backgroundColor: 'var(--colorBgDrawer)', + backgroundColor: token.colorBgElevated, }, '.nb-block-item': { marginBottom: token.marginLG, diff --git a/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx b/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx index 053c8bd3337..e04ae37717e 100644 --- a/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx +++ b/packages/core/client/src/schema-settings/DataTemplates/FormDataTemplates.tsx @@ -5,6 +5,7 @@ import { Tree as AntdTree } from 'antd'; import _ from 'lodash'; import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; +import { withDynamicSchemaProps } from '../../application/hoc/withDynamicSchemaProps'; import { useCollectionManager_deprecated } from '../../collection-manager'; import { mergeFilter } from '../../filter-provider/utils'; import { SchemaComponent, SchemaComponentContext, removeNullCondition, useProps } from '../../schema-component'; @@ -15,7 +16,6 @@ import { ArrayCollapse } from './components/DataTemplateTitle'; import { getSelectedIdFilter } from './components/Designer'; import { useCollectionState } from './hooks/useCollectionState'; import { useSyncFromForm } from './utils'; -import { withDynamicSchemaProps } from '../../application/hoc/withDynamicSchemaProps'; const Tree = connect( AntdTree, @@ -203,7 +203,7 @@ export const FormDataTemplates = withDynamicSchemaProps( onCheck: '{{ getOnCheck($self) }}', rootStyle: { padding: '8px 0', - border: '1px solid #d9d9d9', + border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', maxHeight: '30vh', overflow: 'auto', diff --git a/packages/plugins/@nocobase/plugin-action-duplicate/src/client/DuplicateAction.Settings.tsx b/packages/plugins/@nocobase/plugin-action-duplicate/src/client/DuplicateAction.Settings.tsx index fdf871072c2..bff1f6b0e2c 100644 --- a/packages/plugins/@nocobase/plugin-action-duplicate/src/client/DuplicateAction.Settings.tsx +++ b/packages/plugins/@nocobase/plugin-action-duplicate/src/client/DuplicateAction.Settings.tsx @@ -3,16 +3,16 @@ import { ISchema, connect, mapProps, useField, useFieldSchema, useForm } from '@ import { ActionDesigner, SchemaSettingOpenModeSchemaItems, - useCollection_deprecated, - useRecord, - SchemaSettingsModalItem, + SchemaSettings, SchemaSettingsItemType, SchemaSettingsLinkageRules, + SchemaSettingsModalItem, useCollectionState, + useCollection_deprecated, useDesignable, + useRecord, useSchemaToolbar, useSyncFromForm, - SchemaSettings, } from '@nocobase/client'; import { Tree as AntdTree } from 'antd'; import { cloneDeep } from 'lodash'; @@ -261,7 +261,7 @@ function DuplicationMode() { onCheck: '{{ getOnCheck($self) }}', rootStyle: { padding: '8px 0', - border: '1px solid #d9d9d9', + border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', maxHeight: '30vh', overflow: 'auto', diff --git a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenPreview.tsx b/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenPreview.tsx index 6c813515e58..3ad271ab09e 100644 --- a/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenPreview.tsx +++ b/packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenPreview.tsx @@ -193,7 +193,7 @@ const TokenPreview: FC = ({ theme, tokenName, type }) => { height: '50%', borderRadius: 6, background: '#fff', - border: '1px solid #d9d9d9', + border: '1px solid rgba(0, 0, 0, 0.1)', boxShadow: (getDesignToken(theme) as any)[tokenName], }} />