Merge pull request #484 from oceanbase/dengfuping-feature-design

[Feature Branch] 🌈 improve(design): Update neutral color palette
oceanbase · Feb 23, 2024 · 51f7cf5 · 51f7cf5
2 parents 0e62128 + e14d72b
commit 51f7cf5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 51 deletions.
diff --git a/packages/design/src/theme/default.ts b/packages/design/src/theme/default.ts
@@ -9,6 +9,7 @@ const defaultTheme: ThemeConfig = {
     colorPrimaryBorder: '#b3ccff',
     colorPrimaryBorderHover: '#5189FB',
     colorPrimaryHover: '#5189fb',
+    colorPrimaryActive: '#004CE6',
     colorPrimaryTextHover: '#5189FB',
     colorPrimaryText: '#006AFF',
     colorPrimaryTextActive: '#004CE6',
@@ -53,39 +54,30 @@ const defaultTheme: ThemeConfig = {
     colorInfoText: '#006AFF',
     colorInfoTextActive: '#004CE6',
     colorTextBase: '#132039',
-    colorBgBase: '#ffffff',
     colorText: '#132039',
-    colorTextSecondary: '#5C6B8A',
-    colorTextQuaternary: '#ABB7CF',
+    colorTextSecondary: '#5c6b8a',
+    colorTextQuaternary: '#c1cbe0',
     colorTextTertiary: '#8592AD',
+    colorBgBase: '#ffffff',
     colorBgContainer: '#ffffff',
-    colorBgLayout: '#F8FAFE',
-    colorBgSpotlight: 'rgba(19, 32, 57, 0.8)',
-    colorBgMask: 'rgba(19, 32, 57,  0.6)',
+    colorBgLayout: '#f3f6fc',
+    colorBgSpotlight: '#132039',
     colorBorder: '#CDD5E4',
     colorBorderSecondary: '#E2E8F3',
     colorFillQuaternary: '#F8FAFE',
-    colorFillTertiary: '#F8FAFE',
-    colorFillSecondary: '#F3F6FC',
-    colorFill: '#E2E8F3',
+    colorFillTertiary: '#f3f6fc',
+    colorFillSecondary: '#e2e8f3',
+    colorFill: '#cdd5e4',
+    colorBgMask: 'rgba(19, 32, 57, 0.45)',
+    colorBgElevated: '#ffffff',
     boxShadowSecondary:
       '0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05)',
     boxShadow:
       '0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02)',
     borderRadius: 6,
     wireframe: false,
-    colorPrimaryActive: '#004CE6',
   },
   components: {
-    Segmented: {
-      itemColor: '#5C6B8A',
-      itemHoverColor: '#132039',
-      itemHoverBg: '#ffffff',
-    },
-    Rate: {
-      colorFillContent: '#E2E8F3',
-      colorText: '#F20000',
-    },
     InputNumber: {
       handleVisible: true,
     },

diff --git a/packages/design/src/theme/style/compact.less b/packages/design/src/theme/style/compact.less
@@ -309,15 +309,15 @@
 @colorText: #132039;
 @colorTextSecondary: #5c6b8a;
 @colorTextTertiary: #8592ad;
-@colorTextQuaternary: #abb7cf;
-@colorFill: #e2e8f3;
-@colorFillSecondary: #f3f6fc;
-@colorFillTertiary: #f8fafe;
+@colorTextQuaternary: #c1cbe0;
+@colorFill: #cdd5e4;
+@colorFillSecondary: #e2e8f3;
+@colorFillTertiary: #f3f6fc;
 @colorFillQuaternary: #f8fafe;
-@colorBgLayout: #f8fafe;
+@colorBgLayout: #f3f6fc;
 @colorBgContainer: #ffffff;
 @colorBgElevated: #ffffff;
-@colorBgSpotlight: rgba(19, 32, 57, 0.8);
+@colorBgSpotlight: #132039;
 @colorBgBlur: transparent;
 @colorBorder: #cdd5e4;
 @colorBorderSecondary: #e2e8f3;
@@ -368,7 +368,7 @@
 @colorInfoTextActive: #004ce6;
 @colorLinkHover: #52a5ff;
 @colorLinkActive: #0053d9;
-@colorBgMask: rgba(19, 32, 57,  0.6);
+@colorBgMask: rgba(19, 32, 57, 0.45);
 @colorWhite: #fff;
 @fontSizeSM: 10;
 @fontSizeLG: 14;
@@ -419,21 +419,21 @@
       0 3px 6px -4px rgba(0, 0, 0, 0.12),
       0 9px 28px 8px rgba(0, 0, 0, 0.05)
     ;
-@colorFillContent: #f3f6fc;
-@colorFillContentHover: #e2e8f3;
+@colorFillContent: #e2e8f3;
+@colorFillContentHover: #cdd5e4;
 @colorFillAlter: #f8fafe;
-@colorBgContainerDisabled: #f8fafe;
+@colorBgContainerDisabled: #f3f6fc;
 @colorBorderBg: #ffffff;
 @colorSplit: rgba(13, 63, 155, 0.12);
-@colorTextPlaceholder: #abb7cf;
-@colorTextDisabled: #abb7cf;
+@colorTextPlaceholder: #c1cbe0;
+@colorTextDisabled: #c1cbe0;
 @colorTextHeading: #132039;
 @colorTextLabel: #5c6b8a;
 @colorTextDescription: #8592ad;
 @colorTextLightSolid: #fff;
 @colorHighlight: #f93939;
-@colorBgTextHover: #f3f6fc;
-@colorBgTextActive: #e2e8f3;
+@colorBgTextHover: #e2e8f3;
+@colorBgTextActive: #cdd5e4;
 @colorIcon: #8592ad;
 @colorIconHover: #132039;
 @colorErrorOutline: rgba(255, 5, 5, 0.08);
@@ -442,10 +442,10 @@
 @lineWidthFocus: 4;
 @controlOutlineWidth: 2;
 @controlInteractiveSize: 14;
-@controlItemBgHover: #f8fafe;
+@controlItemBgHover: #f3f6fc;
 @controlItemBgActive: #eaf1ff;
 @controlItemBgActiveHover: #eaf1ff;
-@controlItemBgActiveDisabled: #e2e8f3;
+@controlItemBgActiveDisabled: #cdd5e4;
 @controlTmpOutline: #f8fafe;
 @controlOutline: rgba(22, 99, 255, 0.09);
 @fontWeightStrong: 600;

diff --git a/packages/design/src/theme/style/default.less b/packages/design/src/theme/style/default.less
@@ -309,15 +309,15 @@
 @colorText: #132039;
 @colorTextSecondary: #5c6b8a;
 @colorTextTertiary: #8592ad;
-@colorTextQuaternary: #abb7cf;
-@colorFill: #e2e8f3;
-@colorFillSecondary: #f3f6fc;
-@colorFillTertiary: #f8fafe;
+@colorTextQuaternary: #c1cbe0;
+@colorFill: #cdd5e4;
+@colorFillSecondary: #e2e8f3;
+@colorFillTertiary: #f3f6fc;
 @colorFillQuaternary: #f8fafe;
-@colorBgLayout: #f8fafe;
+@colorBgLayout: #f3f6fc;
 @colorBgContainer: #ffffff;
 @colorBgElevated: #ffffff;
-@colorBgSpotlight: rgba(19, 32, 57, 0.8);
+@colorBgSpotlight: #132039;
 @colorBgBlur: transparent;
 @colorBorder: #cdd5e4;
 @colorBorderSecondary: #e2e8f3;
@@ -368,7 +368,7 @@
 @colorInfoTextActive: #004ce6;
 @colorLinkHover: #52a5ff;
 @colorLinkActive: #0053d9;
-@colorBgMask: rgba(19, 32, 57,  0.6);
+@colorBgMask: rgba(19, 32, 57, 0.45);
 @colorWhite: #fff;
 @fontSizeSM: 12;
 @fontSizeLG: 16;
@@ -419,21 +419,21 @@
       0 3px 6px -4px rgba(0, 0, 0, 0.12),
       0 9px 28px 8px rgba(0, 0, 0, 0.05)
     ;
-@colorFillContent: #f3f6fc;
-@colorFillContentHover: #e2e8f3;
+@colorFillContent: #e2e8f3;
+@colorFillContentHover: #cdd5e4;
 @colorFillAlter: #f8fafe;
-@colorBgContainerDisabled: #f8fafe;
+@colorBgContainerDisabled: #f3f6fc;
 @colorBorderBg: #ffffff;
 @colorSplit: rgba(13, 63, 155, 0.12);
-@colorTextPlaceholder: #abb7cf;
-@colorTextDisabled: #abb7cf;
+@colorTextPlaceholder: #c1cbe0;
+@colorTextDisabled: #c1cbe0;
 @colorTextHeading: #132039;
 @colorTextLabel: #5c6b8a;
 @colorTextDescription: #8592ad;
 @colorTextLightSolid: #fff;
 @colorHighlight: #f93939;
-@colorBgTextHover: #f3f6fc;
-@colorBgTextActive: #e2e8f3;
+@colorBgTextHover: #e2e8f3;
+@colorBgTextActive: #cdd5e4;
 @colorIcon: #8592ad;
 @colorIconHover: #132039;
 @colorErrorOutline: rgba(255, 5, 5, 0.08);
@@ -442,10 +442,10 @@
 @lineWidthFocus: 4;
 @controlOutlineWidth: 2;
 @controlInteractiveSize: 16;
-@controlItemBgHover: #f8fafe;
+@controlItemBgHover: #f3f6fc;
 @controlItemBgActive: #eaf1ff;
 @controlItemBgActiveHover: #eaf1ff;
-@controlItemBgActiveDisabled: #e2e8f3;
+@controlItemBgActiveDisabled: #cdd5e4;
 @controlTmpOutline: #f8fafe;
 @controlOutline: rgba(22, 99, 255, 0.09);
 @fontWeightStrong: 600;