style: compact size

ColeWang · Jul 29, 2024 · 742a9d2 · 742a9d2
1 parent 079e029
commit 742a9d2
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 70 deletions.
diff --git a/packages/descriptions/Descriptions.jsx b/packages/descriptions/Descriptions.jsx
@@ -122,7 +122,7 @@ export default defineComponent({
 
         return () => {
             const { columns, emptyText } = props
-            const { sizeXS } = unref(token)
+            const { sizeMS } = unref(token)
 
             const nodes = filterEmptyElement(slots.default ? slots.default() : [])
 
@@ -149,7 +149,7 @@ export default defineComponent({
                                             {titleDom}
                                         </div>
                                         <div class={`${prefixCls.value}-extra`}>
-                                            <Space size={sizeXS}>{extraDom}</Space>
+                                            <Space size={sizeMS / 2}>{extraDom}</Space>
                                         </div>
                                     </div>
                                 )}

diff --git a/packages/form/base-form/Submitter.jsx b/packages/form/base-form/Submitter.jsx
@@ -59,7 +59,7 @@ export default defineComponent({
 
         return () => {
             const { size: propsSize, loading, submitText, resetText, submitButtonProps, resetButtonProps } = props
-            const { sizeXS } = unref(token)
+            const { sizeMS } = unref(token)
 
             const needSubmitButtonProps = {
                 ...submitButtonProps,
@@ -78,7 +78,7 @@ export default defineComponent({
                 </Button>
             )
             return (
-                <Space size={propsSize || sizeXS} {...attrs}>
+                <Space size={propsSize || sizeMS / 2} {...attrs}>
                     {[resetButtonDom, submitButtonDom]}
                 </Space>
             )

diff --git a/packages/form/layouts/query-filter/Actions.jsx b/packages/form/layouts/query-filter/Actions.jsx
@@ -52,7 +52,7 @@ export default defineComponent({
 
         return () => {
             const { collapsed, showCollapse, submitter } = props
-            const { sizeXS } = unref(token)
+            const { sizeMS } = unref(token)
 
             const collapseDom = showCollapse && (
                 <Button class={`${prefixCls.value}-collapse-button`} type={'link'} onClick={onCollapse}>
@@ -67,7 +67,7 @@ export default defineComponent({
             }
             return wrapSSR(
                 <div class={[prefixCls.value, hashId.value]} {...attrs}>
-                    <Space size={sizeXS}>
+                    <Space size={sizeMS / 2}>
                         <Submitter {...submitterProps}/>
                         {collapseDom}
                     </Space>

diff --git a/packages/table/compatible/alert/index.jsx b/packages/table/compatible/alert/index.jsx
@@ -48,11 +48,11 @@ export default defineComponent({
             if (props.selectedRowKeys.length < 1) return null
             // ----
             const { selectedRowKeys, selectedRows } = props
-            const { sizeXS } = unref(token)
+            const { sizeMS } = unref(token)
 
             const contentText = `${t('selected')} ${selectedRowKeys.length} ${t('item')}`
             const defaultContent = (
-                <Space size={sizeXS}>
+                <Space size={sizeMS / 2}>
                     <Fragment>{contentText}</Fragment>
                     <Action onClick={onCleanSelected}>
                         {t('clear')}
@@ -79,7 +79,7 @@ export default defineComponent({
                                         {customContent || defaultContent}
                                     </div>
                                     <div class={`${prefixCls.value}-options`}>
-                                        <Space size={sizeXS}>{optionsDom}</Space>
+                                        <Space size={sizeMS / 2}>{optionsDom}</Space>
                                     </div>
                                 </div>
                             </div>

diff --git a/packages/table/compatible/toolbar/index.jsx b/packages/table/compatible/toolbar/index.jsx
@@ -67,7 +67,7 @@ export default defineComponent({
 
         return () => {
             const { options: propsOptions } = props
-            const { sizeXS } = unref(token)
+            const { sizeMS } = unref(token)
 
             const slotScope = {
                 loading: requestProps.loading,
@@ -125,7 +125,7 @@ export default defineComponent({
                 const customSettings = getSlotVNode(slots, props, 'settings', slotScope)
 
                 return (
-                    <Space.Compact style={{ marginInlineStart: `${sizeXS}px` }}>
+                    <Space.Compact style={{ marginInlineStart: `${sizeMS / 2}px` }}>
                         {customSettings || defaultSettings}
                     </Space.Compact>
                 )
@@ -138,7 +138,7 @@ export default defineComponent({
                             <div class={`${prefixCls.value}-container`}>
                                 <div class={`${prefixCls.value}-title`}>{titleDom}</div>
                                 <div class={`${prefixCls.value}-actions`}>
-                                    <Space size={sizeXS}>{actionsDom}</Space>
+                                    <Space size={sizeMS / 2}>{actionsDom}</Space>
                                     {propsOptions !== false && renderSettings()}
                                 </div>
                             </div>

diff --git a/packages/table/compatible/toolbar/style/index.js b/packages/table/compatible/toolbar/style/index.js
@@ -1,10 +1,10 @@
 import { genComponentStyleHook, mergeToken } from '../../../../_utils/extend'
 
 function genBaseStyle (token) {
-    const { componentCls, antCls, toolbarPadding } = token
+    const { componentCls, antCls, toolbarTitlePadding } = token
     return {
         [componentCls]: {
-            paddingBlock: toolbarPadding,
+            paddingBlock: token.sizeMS,
             [`${componentCls}-popup-container`]: {
                 position: 'relative',
                 [`${antCls}-popover`]: {
@@ -29,21 +29,21 @@ function genBaseStyle (token) {
                     lineHeight: token.lineHeightLG,
                     fontWeight: token.fontWeightStrong,
                     whiteSpace: 'nowrap',
-                    paddingInlineEnd: token.sizeXS,
+                    paddingInlineEnd: toolbarTitlePadding
                 },
                 [`${componentCls}-actions`]: {
                     whiteSpace: 'nowrap'
-                },
+                }
             }
         }
     }
 }
 
 export default genComponentStyleHook('ProTableToolbar', (token) => {
-    const toolbarPadding = token.sizeMS
+    const toolbarTitlePadding = token.sizeMS / 2
 
     const toolbarToken = mergeToken(token, {
-        toolbarPadding
+        toolbarTitlePadding
     })
     return [genBaseStyle(toolbarToken)]
 })
diff --git a/packages/table/components/action/Group.jsx b/packages/table/components/action/Group.jsx
@@ -20,10 +20,10 @@ export default defineComponent({
         const { token } = theme.useToken()
         return () => {
             const { max, size: propsSize } = props
-            const { sizeXS } = unref(token)
+            const { sizeMS } = unref(token)
 
             const nodes = filterEmptyElement(slots.default ? slots.default() : [])
-            const spaceProps = { size: propsSize || sizeXS, ...attrs }
+            const spaceProps = { size: propsSize || sizeMS / 2, ...attrs }
 
             if (nodes.length && nodes.length > max) {
                 /* v8 ignore next 9 */

diff --git a/packages/table/components/setting/style/tree-node.js b/packages/table/components/setting/style/tree-node.js
@@ -1,7 +1,7 @@
 import { genComponentStyleHook, mergeToken } from '../../../../_utils/extend'
 
 function genBaseStyle (token) {
-    const { componentCls, iconCls, nodeTitleMaxWidth, nodeOptionWidth } = token
+    const { componentCls, iconCls, nodeTitleMaxWidth, nodeOptionWidth, nodeOptionPaddingInline } = token
     return {
         [componentCls]: {
             display: 'flex',
@@ -19,7 +19,7 @@ function genBaseStyle (token) {
             [`${componentCls}-option`]: {
                 width: nodeOptionWidth,
                 [`${componentCls}-option-icon`]: {
-                    paddingInline: token.sizeXS,
+                    paddingInline: nodeOptionPaddingInline,
                     display: 'none',
                     [`${iconCls}`]: {
                         width: token.fontSize,
@@ -38,11 +38,13 @@ function genBaseStyle (token) {
 
 export default genComponentStyleHook('ProTableSettingNode', (token) => {
     const nodeTitleMaxWidth = token.controlHeightSM * 7
-    const nodeOptionWidth = token.fontSize * 2 + token.sizeXS * 2 + token.sizeXXS
+    const nodeOptionWidth = token.fontSize * 2 + token.sizeMS + token.sizeXXS
+    const nodeOptionPaddingInline = token.sizeMS / 2
 
     const treeNodeToken = mergeToken(token, {
         nodeTitleMaxWidth,
-        nodeOptionWidth
+        nodeOptionWidth,
+        nodeOptionPaddingInline
     })
     return [genBaseStyle(treeNodeToken)]
 })
diff --git a/src/components/loading/style/index.js b/src/components/loading/style/index.js
@@ -0,0 +1,15 @@
+import { genComponentStyleHook } from '@utils/extend'
+
+function genBaseStyle (token) {
+    const { componentCls } = token
+    return {
+        [componentCls]: {
+
+        }
+    }
+}
+
+export default genComponentStyleHook('ProLoading', (token) => {
+
+    return [genBaseStyle(token)]
+})
diff --git a/src/css/mixin.scss b/src/css/mixin.scss
@@ -1,42 +1,3 @@
-// 主题色
-$primary: #1677FF;
-$primary-hover: #4096FF;
-$primary-active: #0958D9;
-// warning
-$warning: #FAAD14;
-$warning-hover: #FFC53D;
-$warning-active: #D48806;
-// Error
-$error: #FF4D4F;
-$error-hover: #FF7875;
-$error-active: #D9363E;
-// 主文本色
-$text: rgba(0, 0, 0, 0.88);
-// 次文本色
-$text-secondary: rgba(0, 0, 0, 0.65);
-// 三级文本色
-$text-tertiary: rgba(0, 0, 0, 0.45);
-// 四级文本色
-$text-quaternary: rgba(0, 0, 0, 0.25);
-// 图标
-$icon: rgba(0, 0, 0, 0.65);
-// 背景
-$background: #F5F5F5;
-// 边框
-$border: #D9D9D9;
-// 失效 Disabled
-$disabled: #C1C2C5;
-// White
-$white: #FFF;
-// Black
-$black: #000;
-// 浮层阴影
-$box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-// 主字号
-$font-size: 14px;
-// 圆角
-$border-radius: 4px;
-
 // 设置宽高 $width $height:$width
 @mixin size($width, $height: $width) {
     width: $width;
@@ -57,11 +18,6 @@ $border-radius: 4px;
     }
 }
 
-// 设置字体粗细 $font-weight: null
-@mixin text-weight($font-weight: bold) {
-    font-weight: $font-weight;
-}
-
 // flex $justify-content: null, $align-items: null
 @mixin flex($align-items: null, $justify-content: null) {
     display: flex;

diff --git a/src/css/theme.scss b/src/css/theme.scss
@@ -0,0 +1,27 @@
+// 主题色
+$primary: #1677ff;
+
+$primary-text: #1677ff;
+$primary-text-hover: #4096ff;
+$primary-text-active: #0958d9;
+// 成功色
+$success-text: #52c41a;
+$success-text-hover: #73d13d;
+$success-text-active: #389e0d;
+// 警戒色
+$warning-text: #faad14;
+$warning-text-hover: #ffc53d;
+$warning-text-active: #d48806;
+// 错误色
+$error-text: #ff4d4f;
+$error-text-hover: #ff7875;
+$error-text-active: #d9363e;
+// 主文本色
+$text: rgba(0, 0, 0, 0.88);
+// 次文本色
+$text-secondary: rgba(0, 0, 0, 0.65);
+// 三级文本色
+$text-tertiary: rgba(0, 0, 0, 0.45);
+// 四级文本色
+$text-quaternary: rgba(0, 0, 0, 0.25);
+
diff --git a/vite.config.js b/vite.config.js
@@ -53,7 +53,7 @@ export default defineConfig((config) => {
         css: {
             preprocessorOptions: {
                 scss: {
-                    additionalData: '@import \'@/css/mixin.scss\';'
+                    additionalData: '@import \'@/css/mixin.scss\';@import \'@/css/theme.scss\';'
                 }
             }
         },

diff --git a/vite.packages.config.js b/vite.packages.config.js
@@ -41,7 +41,7 @@ export default defineConfig({
     css: {
         preprocessorOptions: {
             scss: {
-                additionalData: '@import \'@/css/mixin.scss\';'
+                additionalData: '@import \'@/css/mixin.scss\';@import \'@/css/theme.scss\';'
             }
         }
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,7 +53,7 @@ export default defineConfig((config) => { @@
             css: {
                 preprocessorOptions: {
                     scss: {
-                        additionalData: '@import \'@/css/mixin.scss\';'
+                        additionalData: '@import \'@/css/mixin.scss\';@import \'@/css/theme.scss\';'
                     }
                 }
             },
@@ Expand Down @@