@oceanbase/design 0.4.16 → 1.0.0-alpha.1

package/lib/theme/default.js

@@ -24,134 +24,149 @@ __export(default_exports, {
 });
 module.exports = __toCommonJS(default_exports);
 var import_format = require("./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 colorBorderSecondary = colorFillSecondary;
 var tagColorBorder = "#cdd5e466";
 var fontFamilyEn = `Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'`;
 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,
+    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,
+    colorTextSecondary,
+    colorTextTertiary,
+    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,
+    colorFill,
+    colorFillSecondary,
+    colorFillTertiary,
+    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
     }
   }
 };