refactor: Button - use css variable to control UI style

alibaba · Jan 30, 2025 · 2e81ae4 · 2e81ae4
1 parent 3ff3c3c
commit 2e81ae4
Show file tree

Hide file tree

Showing 23 changed files with 178 additions and 230 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -24,7 +24,7 @@ module.exports = {
   ],
   overrides: [
     {
-      files: ['**/*.test.{ts,tsx}', '**/demo/*'],
+      files: ['**/*.test.{ts,tsx}', '**/demo/*', '**/docs/**/*.{ts,tsx}'],
       rules: {
         'import/no-extraneous-dependencies': 0,
       },
@@ -118,6 +118,7 @@ module.exports = {
     'no-debugger': 'warn',
     'valid-typeof': ['warn', { requireStringLiterals: true }],
     'import/no-cycle': ['warn', { maxDepth: Infinity }],
+    'import/prefer-default-export': 'off',
     'no-extra-boolean-cast': 'warn',
     'no-unused-vars': [2, { vars: 'all', args: 'none' }],
     // 'no-unused-vars': 'warn',

diff --git a/docs/components/theme-designer/Color.tsx b/docs/components/theme-designer/Color.tsx
diff --git a/docs/components/theme-designer/Radius.tsx b/docs/components/theme-designer/Radius.tsx
diff --git a/docs/components/theme-designer/Spacing.tsx b/docs/components/theme-designer/Spacing.tsx
diff --git a/docs/components/theme-designer/Typography.less b/docs/components/theme-designer/Typography.less
@@ -0,0 +1,31 @@
+.title-1 {
+  font-size: var(--bui-title-size-1);
+}
+
+.title-2 {
+  font-size: var(--bui-title-size-2);
+}
+
+.title-3 {
+  font-size: var(--bui-title-size-3);
+}
+
+.title-4 {
+  font-size: var(--bui-title-size-4);
+}
+
+.text-1 {
+  font-size: var(--bui-text-size-1);
+}
+
+.text-2 {
+  font-size: var(--bui-text-size-2);
+}
+
+.text-3 {
+  font-size: var(--bui-text-size-3);
+}
+
+.text-4 {
+  font-size: var(--bui-text-size-4);
+}
diff --git a/docs/components/theme-designer/Typography.tsx b/docs/components/theme-designer/Typography.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import './Typography.less';
+
+export const Typography = () => {
+  return (
+    <>
+      <h2>文本</h2>
+      <h3>标题</h3>
+      <div className="title-1">BUI Title 1</div>
+      <div className="title-2">BUI Title 2</div>
+      <div className="title-3">BUI Title 3</div>
+      <div className="title-4">BUI Title 4</div>
+
+      <h3>正文</h3>
+      <div className="text-1">BUI Content 1</div>
+      <div className="text-2">BUI Content 2</div>
+      <div className="text-3">BUI Content 3</div>
+      <div className="text-4">BUI Content 4</div>
+    </>
+  );
+};
diff --git a/docs/components/theme-editor/constants.ts → docs/components/theme-designer/constants.ts b/docs/components/theme-editor/constants.ts → docs/components/theme-designer/constants.ts
@@ -1,8 +1,9 @@
 export const themes = [
   { text: '默认', value: 'default' },
   { text: '大麦', value: 'dm' },
-  { text: 'next', value: 'pioneer' },
+  { text: '荧光橙', value: 'pioneer' },
 ];
+
 export const tabList = [
   { title: '水果', index: 'fruits' },
   { title: '蔬菜', index: 'vegetables' },

diff --git a/docs/components/theme-designer/index.less b/docs/components/theme-designer/index.less
@@ -0,0 +1,3 @@
+.bui-theme-editor {
+  background: var(--bui-color-bg-default);
+}
diff --git a/docs/components/theme-editor/index.tsx → docs/components/theme-designer/index.tsx b/docs/components/theme-editor/index.tsx → docs/components/theme-designer/index.tsx
@@ -14,8 +14,9 @@ import {
 } from '@bifrostui/react';
 import { themes, tabList } from './constants';
 import './index.less';
+import { Typography } from './Typography';
 
-export default () => {
+const ThemeDesigner = () => {
   const [theme, setTheme] = useState('default');
   const [activeTab, setActiveTab] = useState('fruits');
 
@@ -36,6 +37,8 @@ export default () => {
         </RadioGroup>
       </div>
 
+      <Typography />
+
       <h2>主题预览</h2>
       <div className="editor-preview">
         <Stack className="editor-preview-column" direction="row" spacing="8px">
@@ -91,3 +94,5 @@ export default () => {
     </div>
   );
 };
+
+export default ThemeDesigner;
diff --git a/docs/components/theme-editor/index.less b/docs/components/theme-editor/index.less
diff --git a/docs/guide/theme-designer.md b/docs/guide/theme-designer.md
@@ -4,4 +4,4 @@ order: 1
 
 # 主题定制器
 
-<code src="../components/theme-editor/index.tsx" inline="true"></code>
+<code src="../components/theme-designer/index.tsx" inline="true"></code>
diff --git a/package.json b/package.json
@@ -42,6 +42,20 @@
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
     "@makotot/ghostui": "2.0.0",
+    "@tarojs/components": "^3.0.0",
+    "@tarojs/helper": "^3.0.0",
+    "@tarojs/plugin-platform-alipay": "^3.0.0",
+    "@tarojs/plugin-platform-jd": "^3.0.0",
+    "@tarojs/plugin-platform-qq": "^3.0.0",
+    "@tarojs/plugin-platform-swan": "^3.0.0",
+    "@tarojs/plugin-platform-tt": "^3.0.0",
+    "@tarojs/plugin-platform-weapp": "^3.0.0",
+    "@tarojs/react": "^3.0.0",
+    "@tarojs/router": "^3.0.0",
+    "@tarojs/runtime": "^3.0.0",
+    "@tarojs/shared": "^3.0.0",
+    "@tarojs/taro": "^3.0.0",
+    "@tarojs/taro-h5": "^3.0.0",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^15.0.6",
     "@testing-library/react-hooks": "^7.0.2",
@@ -95,7 +109,9 @@
     "qrcode.react": "^3.0.2",
     "rc-tabs": "12.15.0",
     "rc-tree": "5.9.0",
+    "react": "^18.3.1",
     "react-copy-to-clipboard": "5.1.0",
+    "react-dom": "^18.3.1",
     "react-test-renderer": "^18.0.0",
     "rimraf": "^3.0.0",
     "stylelint": "^15.6.1",
@@ -106,24 +122,6 @@
     "tslib": "^2.7.0",
     "typescript": "^4.3.5"
   },
-  "dependencies": {
-    "@tarojs/components": "^3.0.0",
-    "@tarojs/helper": "^3.0.0",
-    "@tarojs/plugin-platform-alipay": "^3.0.0",
-    "@tarojs/plugin-platform-jd": "^3.0.0",
-    "@tarojs/plugin-platform-qq": "^3.0.0",
-    "@tarojs/plugin-platform-swan": "^3.0.0",
-    "@tarojs/plugin-platform-tt": "^3.0.0",
-    "@tarojs/plugin-platform-weapp": "^3.0.0",
-    "@tarojs/react": "^3.0.0",
-    "@tarojs/router": "^3.0.0",
-    "@tarojs/runtime": "^3.0.0",
-    "@tarojs/shared": "^3.0.0",
-    "@tarojs/taro": "^3.0.0",
-    "@tarojs/taro-h5": "^3.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
-  },
   "lint-staged": {
     "!script/**/*": [],
     "./packages/**/*.{js,ts,jsx,tsx}": [

diff --git a/packages/bui-core/src/Button/Button.less b/packages/bui-core/src/Button/Button.less
@@ -18,7 +18,6 @@
 
 .btn-light(@color) {
   background-image: none;
-  border: var(--light-border);
   color: var(~'--bui-color-@{color}');
   background-color: var(~'--bui-color-@{color}-light');
 }
@@ -28,53 +27,36 @@
 }
 
 .bui-btn {
-  --border-radius: var(--bui-button-border-radius, 100px);
-  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
-  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
-  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
-  --height: var(--bui-button-height, 27px);
-  --font-weight: var(--bui-button-font-weight, var(--bui-font-weight-medium));
-  --icon-start-margin-right: var(
-    --bui-button-icon-start-margin-right,
-    var(--bui-spacing-xs)
-  );
-  --icon-start-margin-left: var(
-    --bui-button-icon-start-margin-left,
-    var(--bui-spacing-xs)
-  );
-  --default-border: var(--bui-button-default-border, 1px solid transparent);
-  --light-border: var(--bui-button-light-border, 1px solid transparent);
-  --outlined-default-border: var(
-    --bui-button-outlined-default-border,
-    1px solid var(--bui-color-neutral-4)
-  );
-  --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
-  --small-padding: var(--bui-button-small-padding, 0 11px);
-  --small-height: var(--bui-button-small-height, 24px);
-  --medium-padding: var(--bui-button-medium-padding, 0 14px);
-  --large-padding: var(--bui-button-large-padding, 0 14px);
-  --large-height: var(--bui-button-large-height, 33px);
-  --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
-  --full-height: var(--bui-button-full-height, 42px);
-  background-origin: border-box;
-  border: var(--default-border);
+  --bui-btn-font-size: var(--bui-text-size-3);
+  --bui-btn-font-weight: var(--bui-font-weight-medium);
+  --bui-btn-border-radius: 120px;
+  --bui-btn-height: 27px;
+  --bui-btn-color: var(--bui-color-fg-muted);
+  --bui-btn-bg: var(--bui-color-bg-view);
+  --bui-btn-opacity: 1;
+  --bui-btn-padding: 0 14px;
+  --bui-btn-border: 0;
+
   outline: 0;
-  background-color: transparent;
   cursor: pointer;
-  color: var(--text-color);
   box-sizing: border-box;
   position: relative;
   display: inline-flex;
   margin: 0;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  font-size: var(--bui-text-size-3);
-  font-weight: var(--font-weight);
-  border-radius: var(--border-radius);
-  height: var(--height);
+  color: var(--bui-btn-color);
+  background: var(--bui-btn-bg);
+  font-size: var(--bui-btn-font-size);
+  font-weight: var(--bui-btn-font-weight);
+  border: var(--bui-btn-border);
+  border-radius: var(--bui-btn-border-radius);
+  height: var(--bui-btn-height);
+  padding: var(--bui-btn-padding);
   line-height: var(--bui-line-height);
   font-family: var(--bui-font-family);
+  opacity: var(--bui-btn-opacity);
 
   @keyframes spin {
     from {
@@ -111,40 +93,35 @@
 
   &-icon-start {
     .btn-icon();
-    margin-right: var(--icon-start-margin-right);
+    margin-right: var(--bui-spacing-xs);
   }
 
   &-icon-end {
     .btn-icon();
-    margin-left: var(--icon-start-margin-left);
+    margin-left: var(--bui-spacing-xs);
   }
 
   &-disabled {
     pointer-events: none;
-    opacity: var(--disabled-opacity);
-  }
 
-  &-small {
-    font-size: var(--bui-text-size-4);
-    padding: var(--small-padding);
-    height: var(--small-height);
+    --bui-btn-opacity: 0.5;
   }
 
-  &-medium {
-    padding: var(--medium-padding);
-    height: var(--height);
+  &-small {
+    --bui-btn-height: 24px;
+    --bui-btn-font-size: var(--bui-text-size-4);
+    --bui-btn-padding: 0 11px;
   }
 
   &-large {
-    font-size: var(--bui-text-size-2);
-    padding: var(--large-padding);
-    height: var(--large-height);
+    --bui-btn-height: 33px;
+    --bui-btn-font-size: var(--bui-text-size-2);
   }
 
   &-full {
-    font-size: var(--full-font-size);
+    --bui-btn-height: 42px;
+    --bui-btn-font-size: var(--bui-title-size-4);
     width: 100%;
-    height: var(--full-height);
   }
 
   &-text {
@@ -174,8 +151,7 @@
   }
 
   &-contained {
-    background-color: var(--bg-color);
-    color: var(--text-color);
+    --bui-btn-bg: var(--bui-color-neutral-5);
 
     &.bui-btn-primary {
       .btn-contained(primary);
@@ -198,8 +174,8 @@
     }
 
     &.bui-btn-vip {
-      color: #582331;
-      background-image: linear-gradient(
+      --bui-btn-color: #582331;
+      --bui-btn-bg: linear-gradient(
         90deg,
         var(--bui-color-vip-start) 3%,
         var(--bui-color-vip-end) 100%
@@ -208,7 +184,7 @@
   }
 
   &-outlined {
-    border: var(--outlined-default-border);
+    --bui-btn-border: 1px solid var(--bui-color-neutral-4);
 
     &.bui-btn-primary {
       .btn-outline(primary);
@@ -236,9 +212,7 @@
   }
 
   &-light {
-    background-image: none;
-    background-color: var(--bui-color-gray-light);
-    border: var(--light-border);
+    --bui-btn-bg: var(--bui-color-gray-light);
 
     &.bui-btn-warning {
       .btn-light(warning);
@@ -261,9 +235,10 @@
     }
 
     &.bui-btn-vip {
-      color: var(--bui-color-vip);
       position: relative;
-      background-color: fade(#ff866e, 30%);
+
+      --bui-btn-color: var(--bui-color-vip);
+      --bui-btn-bg: fade(#ff866e, 30%);
     }
   }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@ order: 1

		# 主题定制器

		<code src="../components/theme-editor/index.tsx" inline="true"></code>
		<code src="../components/theme-designer/index.tsx" inline="true"></code>