improve(design): Custom colorTextQuaternary token for icon of ColorPi…

…cker, Input, Select and Mentions
oceanbase · Jul 24, 2024 · 2e74b3f · 2e74b3f
1 parent 69f6889
commit 2e74b3f
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/packages/design/src/theme/default.ts b/packages/design/src/theme/default.ts
@@ -4,6 +4,8 @@ import { formatTheme } from './util/format';
 // Calculated by colorBorder and getWeakenBorderColor()
 const tagColorBorder = '#cdd5e466';
 
+const colorIcon = '#5c6b8a';
+
 const defaultTheme: ThemeConfig = {
   token: {
     colorPrimaryBg: '#EAF1FF',
@@ -70,7 +72,7 @@ const defaultTheme: ThemeConfig = {
     colorFillTertiary: '#f3f6fc',
     colorFillSecondary: '#e2e8f3',
     colorFill: '#cdd5e4',
-    colorIcon: '#5c6b8a',
+    colorIcon,
     colorBgMask: 'rgba(19, 32, 57, 0.45)',
     colorBgElevated: '#ffffff',
     colorBgSpotlight: '#ffffff',
@@ -88,9 +90,21 @@ const defaultTheme: ThemeConfig = {
       // fontHeight is internal token
       fontHeight: 20,
     },
+    ColorPicker: {
+      // customize icon color
+      colorTextQuaternary: colorIcon,
+    },
+    Input: {
+      // customize icon color
+      colorTextQuaternary: colorIcon,
+    },
     InputNumber: {
       handleVisible: true,
     },
+    Mentions: {
+      // customize icon color
+      colorTextQuaternary: colorIcon,
+    },
     Radio: {
       // temporarily fix style for checked disabled Radio.Button
       controlItemBgActiveDisabled: '#e2e8f3',
@@ -100,6 +114,8 @@ const defaultTheme: ThemeConfig = {
       multipleItemBg: '#F8FAFE',
       multipleItemBorderColor: tagColorBorder,
       multipleItemBorderColorDisabled: tagColorBorder,
+      // customize icon color
+      colorTextQuaternary: colorIcon,
     },
     Tag: {
       colorBorder: tagColorBorder,