chore: use rgba

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;

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',

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,

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',

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',

packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenPreview.tsx

@@ -193,7 +193,7 @@ const TokenPreview: FC<TokenPreviewProps> = ({ 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],
           }}
         />