@oceanbase/design 0.4.16 → 1.0.0-alpha.1

package/es/theme/default.js

@@ -6,7 +6,19 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { formatTheme } from "./util/format";
-
+var colorPrimary = '#0D6CF2';
+var colorPrimarySecondary = '#598CF3';
+var colorText = '#132039';
+var colorTextSecondary = '#5C6B8A';
+var colorTextTertiary = '#8592AD';
+var colorTextQuaternary = '#C1CBE0';
+var colorFill = '#CDD5E4';
+var colorFillSecondary = '#E2E8F3';
+var colorFillTertiary = '#F3F6FC';
+var colorFillQuaternary = '#F8FAFE';
+var colorFillHover = '#EFF3FA';
+var colorFillSelected = '#E2E8F3';
+var colorBorderSecondary = colorFillSecondary;
 // Calculated by colorBorder and getWeakenBorderColor()
 var tagColorBorder = '#cdd5e466';
 export var fontFamilyEn = "Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'";
@@ -14,128 +26,132 @@ var defaultTheme = {
   token: {
     fontFamily: "-apple-system, 'Noto Sans', BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
     fontFamilyCode: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
-    colorPrimaryBg: '#EAF1FF',
-    colorPrimary: '#006AFF',
-    colorPrimaryBgHover: '#EAF1FF',
-    colorPrimaryBorder: '#b3ccff',
-    colorPrimaryBorderHover: '#5189FB',
-    colorPrimaryHover: '#5189fb',
-    colorPrimaryActive: '#004CE6',
-    colorPrimaryTextHover: '#5189FB',
-    colorPrimaryText: '#006AFF',
-    colorPrimaryTextActive: '#004CE6',
-    colorSuccess: '#0ac185',
-    colorSuccessBg: '#EEF8F5',
-    colorSuccessBgHover: '#dbf0e9',
-    colorSuccessBorder: '#B3E6D5',
-    colorSuccessBorderHover: '#4DCCA2',
-    colorSuccessHover: '#4DCCA2',
-    colorSuccessActive: '#00B378',
-    colorSuccessTextHover: '#4DCCA2',
-    colorSuccessText: '#0AC185',
-    colorSuccessTextActive: '#00B378',
-    colorWarning: '#FFA21A',
-    colorWarningBg: '#FFF5E5',
-    colorWarningBgHover: '#ffe7c2',
-    colorWarningBorder: '#FFD699',
-    colorWarningBorderHover: '#FFC166',
-    colorWarningHover: '#FFC166',
-    colorWarningActive: '#FF9700',
-    colorWarningTextHover: '#FFC166',
-    colorWarningText: '#FFA21A',
-    colorWarningTextActive: '#FF9700',
-    colorErrorBg: '#ffebeb',
-    colorErrorBgHover: '#ffd6d6',
-    colorErrorBorder: '#FFB3B3',
-    colorErrorBorderHover: '#ff7575',
-    colorErrorHover: '#ff7575',
-    colorErrorActive: '#CC0000',
-    colorErrorTextHover: '#ff7575',
-    colorErrorText: '#ff1a1a',
-    colorErrorTextActive: '#CC0000',
-    colorError: '#F93939',
-    colorInfo: '#006AFF',
+    borderRadius: 4,
+    borderRadiusLG: 6,
+    borderRadiusSM: 2,
+    fontSize: 13,
+    fontSizeSM: 12,
+    colorPrimary: colorPrimary,
+    colorInfo: colorPrimary,
+    colorInfoBorder: '#598CF3',
     colorInfoBg: '#EAF1FF',
-    colorInfoBgHover: '#EAF1FF',
-    colorInfoBorder: '#B3CCFF',
-    colorInfoBorderHover: '#5189FB',
-    colorInfoHover: '#5189FB',
-    colorInfoActive: '#004CE6',
-    colorInfoTextHover: '#5189FB',
-    colorInfoText: '#006AFF',
-    colorInfoTextActive: '#004CE6',
+    colorInfoText: '#083E8B',
+    colorSuccess: '#14B781',
+    colorSuccessBorder: '#7ED7BA',
+    colorSuccessBg: '#E8F8F3',
+    colorSuccessText: '#096547',
+    colorWarning: '#F49F25',
+    colorWarningBorder: '#F9CB87',
+    colorWarningBg: '#FEF6E9',
+    colorWarningText: '#5B3600',
+    colorError: '#EF4343',
+    colorErrorBorder: '#F69898',
+    colorErrorBg: '#FDECEC',
+    colorErrorText: '#8A1B1B',
     colorTextBase: '#000000',
-    colorText: '#132039',
-    colorTextSecondary: '#5c6b8a',
-    colorTextQuaternary: '#c1cbe0',
-    colorTextTertiary: '#8592AD',
+    colorText: colorText,
+    colorTextSecondary: colorTextSecondary,
+    colorTextTertiary: colorTextTertiary,
+    colorTextQuaternary: colorTextQuaternary,
+    colorIcon: colorTextSecondary,
     colorBgBase: '#ffffff',
     colorBgContainer: '#ffffff',
-    colorBgLayout: '#f3f6fc',
-    colorBorder: '#CDD5E4',
-    colorBorderSecondary: '#E2E8F3',
-    colorFillQuaternary: '#F8FAFE',
-    colorFillTertiary: '#f3f6fc',
-    colorFillSecondary: '#e2e8f3',
-    colorFill: '#cdd5e4',
+    colorBgLayout: colorFillQuaternary,
+    colorBorder: colorFill,
+    colorBorderSecondary: colorBorderSecondary,
+    colorFill: colorFill,
+    colorFillSecondary: colorFillSecondary,
+    colorFillTertiary: colorFillTertiary,
+    colorFillQuaternary: colorFillQuaternary,
     colorBgMask: 'rgba(19, 32, 57, 0.45)',
     colorBgElevated: '#ffffff',
     colorBgSpotlight: '#ffffff',
     boxShadow: '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)',
     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)',
     boxShadowTertiary: '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,
     // Remove focus outline
     lineWidthFocus: 0
   },
   components: {
+    Badge: {
+      colorInfo: colorPrimarySecondary
+    },
     Breadcrumb: {
       fontSize: 12,
       // @ts-ignore
       // fontHeight is internal token
       fontHeight: 20,
-      lastItemColor: '#5c6b8a'
+      lastItemColor: colorTextSecondary
+    },
+    Card: {
+      headerFontSize: 16,
+      borderRadiusLG: 8
     },
     Collapse: {
-      colorBorder: '#E2E8F3'
+      colorBorder: colorBorderSecondary
     },
     InputNumber: {
       handleVisible: true
     },
+    Progress: {
+      defaultColor: colorPrimarySecondary
+    },
     Radio: {
       // temporarily fix style for checked disabled Radio.Button
-      controlItemBgActiveDisabled: '#e2e8f3'
+      controlItemBgActiveDisabled: colorFillSecondary
     },
     Select: {
       // work for all multiple select component, including Select, TreeSelect and Cascader and so on
-      multipleItemBg: '#F8FAFE',
+      multipleItemBg: colorFillQuaternary,
       multipleItemBorderColor: tagColorBorder,
       multipleItemBorderColorDisabled: tagColorBorder
     },
     Slider: {
-      trackBg: '#006AFF',
+      trackBg: colorPrimary,
       trackHoverBg: '#5189fb',
       trackBgDisabled: '#b3ccff',
-      handleColor: '#006AFF',
+      handleColor: colorPrimary,
       handleActiveColor: '#5189fb',
       handleColorDisabled: '#b3ccff'
     },
     Tabs: {
-      horizontalItemGutter: 24
+      horizontalItemGutter: 24,
+      itemActiveColor: colorText,
+      itemSelectedColor: colorText,
+      itemHoverColor: colorText
     },
     Tag: {
-      defaultColor: '#5c6b8a',
+      defaultColor: colorTextSecondary,
       colorBorder: tagColorBorder
     },
     Table: {
+      cellFontSize: 12,
+      headerSplitColor: 'transparent',
       cellPaddingBlock: 12,
+      cellPaddingInline: 16,
       cellPaddingBlockMD: 8,
-      cellPaddingBlockSM: 4
+      cellPaddingBlockSM: 4,
+      rowHoverBg: colorFillQuaternary,
+      rowSelectedBg: colorFillQuaternary,
+      rowSelectedHoverBg: colorFillTertiary
     },
     Tooltip: {
       colorBgSpotlight: '#ffffff',
-      colorTextLightSolid: '#132039'
+      colorTextLightSolid: colorText
+    },
+    Menu: {
+      paddingContentVertical: 0,
+      itemHeight: 30,
+      itemBorderRadius: 4,
+      // 80 means 50% opacity
+      itemHoverBg: colorFillSecondary + '80',
+      itemActiveBg: colorFillSecondary + '80',
+      itemSelectedBg: colorFillSecondary + '80',
+      itemColor: '#36496F',
+      itemSelectedColor: colorText,
+      itemMarginBlock: 6,
+      groupTitleFontSize: 11
     }
   }
 };