@oceanbase/design 0.4.16 → 1.0.0-alpha.0

package/es/theme/default.js

@@ -6,7 +6,14 @@ 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 colorFillSecondary = '#E2E8F3';
+var colorFillTertiary = '#F3F6FC';
+var colorFillQuaternary = '#F8FAFE';
+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,16 +21,13 @@ 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',
+    borderRadius: 4,
+    borderRadiusLG: 8,
+    borderRadiusSM: 2,
+    fontSize: 13,
+    fontSizeSM: 11,
+    colorPrimary: colorPrimary,
+    colorInfo: colorPrimary,
     colorSuccess: '#0ac185',
     colorSuccessBg: '#EEF8F5',
     colorSuccessBgHover: '#dbf0e9',
@@ -54,29 +58,19 @@ var defaultTheme = {
     colorErrorText: '#ff1a1a',
     colorErrorTextActive: '#CC0000',
     colorError: '#F93939',
-    colorInfo: '#006AFF',
-    colorInfoBg: '#EAF1FF',
-    colorInfoBgHover: '#EAF1FF',
-    colorInfoBorder: '#B3CCFF',
-    colorInfoBorderHover: '#5189FB',
-    colorInfoHover: '#5189FB',
-    colorInfoActive: '#004CE6',
-    colorInfoTextHover: '#5189FB',
-    colorInfoText: '#006AFF',
-    colorInfoTextActive: '#004CE6',
     colorTextBase: '#000000',
-    colorText: '#132039',
-    colorTextSecondary: '#5c6b8a',
+    colorText: colorText,
+    colorTextSecondary: colorTextSecondary,
     colorTextQuaternary: '#c1cbe0',
     colorTextTertiary: '#8592AD',
     colorBgBase: '#ffffff',
     colorBgContainer: '#ffffff',
-    colorBgLayout: '#f3f6fc',
+    colorBgLayout: colorFillQuaternary,
     colorBorder: '#CDD5E4',
-    colorBorderSecondary: '#E2E8F3',
-    colorFillQuaternary: '#F8FAFE',
-    colorFillTertiary: '#f3f6fc',
-    colorFillSecondary: '#e2e8f3',
+    colorBorderSecondary: colorBorderSecondary,
+    colorFillQuaternary: colorFillQuaternary,
+    colorFillTertiary: colorFillTertiary,
+    colorFillSecondary: colorFillSecondary,
     colorFill: '#cdd5e4',
     colorBgMask: 'rgba(19, 32, 57, 0.45)',
     colorBgElevated: '#ffffff',
@@ -84,58 +78,87 @@ var defaultTheme = {
     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
     },
     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
+    },
+    Card: {
+      borderRadiusLG: 8
+    },
+    Menu: {
+      paddingContentVertical: 0,
+      itemHeight: 30,
+      itemBorderRadius: 4,
+      // 80 means 50% opacity
+      itemSelectedBg: colorFillSecondary + '80',
+      itemHoverBg: colorFillSecondary + '80',
+      itemColor: colorTextSecondary,
+      itemSelectedColor: colorText,
+      itemMarginBlock: 6,
+      groupTitleFontSize: 11
     }
   }
 };

package/es/theme/style/aliyun.less

@@ -21,11 +21,11 @@
 @colorBgBase: #ffffff;
 @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;
-@fontSize: 12;
-@lineWidth: 1;
+@fontSize: 12px;
+@lineWidth: 1px;
 @lineType: solid;
-@motionUnit: 0.1;
-@motionBase: 0;
+@motionUnit: 0.1s;
+@motionBase: 0s;
 @motionEaseOutCirc: cubic-bezier(0.08, 0.82, 0.17, 1);
 @motionEaseInOutCirc: cubic-bezier(0.78, 0.14, 0.15, 0.86);
 @motionEaseOut: cubic-bezier(0.215, 0.61, 0.355, 1);
@@ -34,11 +34,11 @@
 @motionEaseInBack: cubic-bezier(0.71, -0.46, 0.88, 0.6);
 @motionEaseInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 @motionEaseOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
-@borderRadius: 0;
-@sizeUnit: 4;
-@sizeStep: 4;
-@sizePopupArrow: 16;
-@controlHeight: 32;
+@borderRadius: 0px;
+@sizeUnit: 4px;
+@sizeStep: 4px;
+@sizePopupArrow: 16px;
+@controlHeight: 32px;
 @zIndexBase: 0;
 @zIndexPopupBase: 1000;
 @opacityImage: 1;
@@ -46,24 +46,24 @@
 @motion: true;
 @blue-1: #e6f4ff;
 @blue1: #e6f4ff;
-@blue-2: #a3d6ff;
-@blue2: #a3d6ff;
-@blue-3: #7abfff;
-@blue3: #7abfff;
-@blue-4: #52a5ff;
-@blue4: #52a5ff;
-@blue-5: #2989ff;
-@blue5: #2989ff;
-@blue-6: #006aff;
-@blue6: #006aff;
-@blue-7: #0053d9;
-@blue7: #0053d9;
-@blue-8: #003eb3;
-@blue8: #003eb3;
-@blue-9: #002c8c;
-@blue9: #002c8c;
-@blue-10: #001d66;
-@blue10: #001d66;
+@blue-2: #b0dbff;
+@blue2: #b0dbff;
+@blue-3: #87c5ff;
+@blue3: #87c5ff;
+@blue-4: #5eacff;
+@blue4: #5eacff;
+@blue-5: #3690ff;
+@blue5: #3690ff;
+@blue-6: #0d6cf2;
+@blue6: #0d6cf2;
+@blue-7: #004ecc;
+@blue7: #004ecc;
+@blue-8: #003aa6;
+@blue8: #003aa6;
+@blue-9: #002880;
+@blue9: #002880;
+@blue-10: #001959;
+@blue10: #001959;
 @purple-1: #f9f0ff;
 @purple1: #f9f0ff;
 @purple-2: #efdbff;
@@ -323,14 +323,14 @@
 @colorBorder: #dedede;
 @colorBorderSecondary: #ebebeb;
 @colorPrimaryBg: #e6f4ff;
-@colorPrimaryBgHover: #a3d6ff;
-@colorPrimaryBorder: #7abfff;
-@colorPrimaryBorderHover: #52a5ff;
-@colorPrimaryHover: #2989ff;
-@colorPrimaryActive: #0053d9;
-@colorPrimaryTextHover: #2989ff;
-@colorPrimaryText: #006aff;
-@colorPrimaryTextActive: #0053d9;
+@colorPrimaryBgHover: #b0dbff;
+@colorPrimaryBorder: #87c5ff;
+@colorPrimaryBorderHover: #5eacff;
+@colorPrimaryHover: #3690ff;
+@colorPrimaryActive: #004ecc;
+@colorPrimaryTextHover: #3690ff;
+@colorPrimaryText: #0d6cf2;
+@colorPrimaryTextActive: #004ecc;
 @colorSuccessBg: #dff4e5;
 @colorSuccessBgHover: #a9f5d1;
 @colorSuccessBorder: #dff4e5;
@@ -361,59 +361,59 @@
 @colorWarningText: #ffa21a;
 @colorWarningTextActive: #d9800b;
 @colorInfoBg: #e6f4ff;
-@colorInfoBgHover: #a3d6ff;
-@colorInfoBorder: #7abfff;
-@colorInfoBorderHover: #52a5ff;
-@colorInfoHover: #52a5ff;
-@colorInfoActive: #0053d9;
-@colorInfoTextHover: #2989ff;
-@colorInfoText: #006aff;
-@colorInfoTextActive: #0053d9;
+@colorInfoBgHover: #b0dbff;
+@colorInfoBorder: #87c5ff;
+@colorInfoBorderHover: #5eacff;
+@colorInfoHover: #5eacff;
+@colorInfoActive: #004ecc;
+@colorInfoTextHover: #3690ff;
+@colorInfoText: #0d6cf2;
+@colorInfoTextActive: #004ecc;
 @colorLinkHover: #0064C8;
-@colorLinkActive: #0053d9;
+@colorLinkActive: #004ecc;
 @colorBgMask: rgba(0,0,0,0.45);
 @colorWhite: #fff;
-@fontSizeSM: 12;
-@fontSizeLG: 16;
-@fontSizeXL: 20;
-@fontSizeHeading1: 38;
-@fontSizeHeading2: 30;
-@fontSizeHeading3: 24;
-@fontSizeHeading4: 20;
-@fontSizeHeading5: 16;
-@lineHeight: 1.5714285714285714;
-@lineHeightLG: 1.5;
-@lineHeightSM: 1.6666666666666667;
-@fontHeight: 22;
-@fontHeightLG: 24;
-@fontHeightSM: 20;
-@lineHeightHeading1: 1.2105263157894737;
-@lineHeightHeading2: 1.2666666666666666;
-@lineHeightHeading3: 1.3333333333333333;
-@lineHeightHeading4: 1.4;
-@lineHeightHeading5: 1.5;
-@sizeXXL: 48;
-@sizeXL: 32;
-@sizeLG: 24;
-@sizeMD: 20;
-@sizeMS: 16;
-@size: 16;
-@sizeSM: 12;
-@sizeXS: 8;
-@sizeXXS: 4;
-@controlHeightSM: 24;
-@controlHeightXS: 16;
-@controlHeightLG: 36;
+@fontSizeSM: 12px;
+@fontSizeLG: 14px;
+@fontSizeXL: 18px;
+@fontSizeHeading1: 34px;
+@fontSizeHeading2: 28px;
+@fontSizeHeading3: 22px;
+@fontSizeHeading4: 18px;
+@fontSizeHeading5: 14px;
+@lineHeight: 1.6153846153846154;
+@lineHeightLG: 1.5714285714285714;
+@lineHeightSM: 1.8;
+@fontHeight: 21px;
+@fontHeightLG: 22px;
+@fontHeightSM: 18px;
+@lineHeightHeading1: 1.2352941176470589;
+@lineHeightHeading2: 1.2857142857142858;
+@lineHeightHeading3: 1.3636363636363635;
+@lineHeightHeading4: 1.4444444444444444;
+@lineHeightHeading5: 1.5714285714285714;
+@sizeXXL: 48px;
+@sizeXL: 32px;
+@sizeLG: 24px;
+@sizeMD: 20px;
+@sizeMS: 16px;
+@size: 16px;
+@sizeSM: 12px;
+@sizeXS: 8px;
+@sizeXXS: 4px;
+@controlHeightSM: 24px;
+@controlHeightXS: 16px;
+@controlHeightLG: 36px;
 @motionDurationFast: 0.1s;
 @motionDurationMid: 0.2s;
 @motionDurationSlow: 0.3s;
-@lineWidthBold: 2;
-@borderRadiusXS: 2;
-@borderRadiusSM: 0;
-@borderRadiusLG: 8;
-@borderRadiusOuter: 4;
+@lineWidthBold: 2px;
+@borderRadiusXS: 1px;
+@borderRadiusSM: 0px;
+@borderRadiusLG: 4px;
+@borderRadiusOuter: 4px;
 @colorTextHeading: rgba(0, 0, 0, 0.85);
-@controlOutlineWidth: 2;
+@controlOutlineWidth: 2px;
 @controlOutline: rgba(5,145,255,0.1);
 @colorFillContent: rgba(0,0,0,0.06);
 @colorFillContentHover: rgba(0,0,0,0.15);
@@ -433,12 +433,12 @@
 @colorIconHover: rgba(0, 0, 0, 0.85);
 @colorErrorOutline: rgba(255,38,5,0.06);
 @colorWarningOutline: rgba(255,195,5,0.1);
-@fontSizeIcon: 12;
-@lineWidthFocus: 3;
-@controlInteractiveSize: 16;
+@fontSizeIcon: 12px;
+@lineWidthFocus: 3px;
+@controlInteractiveSize: 16px;
 @controlItemBgHover: rgba(0,0,0,0.04);
 @controlItemBgActive: #e6f4ff;
-@controlItemBgActiveHover: #a3d6ff;
+@controlItemBgActiveHover: #b0dbff;
 @controlItemBgActiveDisabled: rgba(0,0,0,0.15);
 @controlTmpOutline: rgba(0,0,0,0.02);
 @fontWeightStrong: 600;
@@ -446,29 +446,29 @@
 @linkDecoration: none;
 @linkHoverDecoration: none;
 @linkFocusDecoration: none;
-@controlPaddingHorizontal: 12;
-@controlPaddingHorizontalSM: 8;
-@paddingXXS: 4;
-@paddingXS: 8;
-@paddingSM: 12;
-@padding: 16;
-@paddingMD: 20;
-@paddingLG: 24;
-@paddingXL: 32;
-@paddingContentHorizontalLG: 24;
-@paddingContentVerticalLG: 16;
-@paddingContentHorizontal: 16;
-@paddingContentVertical: 12;
-@paddingContentHorizontalSM: 16;
-@paddingContentVerticalSM: 8;
-@marginXXS: 4;
-@marginXS: 8;
-@marginSM: 12;
-@margin: 16;
-@marginMD: 20;
-@marginLG: 24;
-@marginXL: 32;
-@marginXXL: 48;
+@controlPaddingHorizontal: 12px;
+@controlPaddingHorizontalSM: 8px;
+@paddingXXS: 4px;
+@paddingXS: 8px;
+@paddingSM: 12px;
+@padding: 16px;
+@paddingMD: 20px;
+@paddingLG: 24px;
+@paddingXL: 32px;
+@paddingContentHorizontalLG: 24px;
+@paddingContentVerticalLG: 16px;
+@paddingContentHorizontal: 16px;
+@paddingContentVertical: 12px;
+@paddingContentHorizontalSM: 16px;
+@paddingContentVerticalSM: 8px;
+@marginXXS: 4px;
+@marginXS: 8px;
+@marginSM: 12px;
+@margin: 16px;
+@marginMD: 20px;
+@marginLG: 24px;
+@marginXL: 32px;
+@marginXXL: 48px;
 @boxShadow: 
       0 6px 16px 0 rgba(0, 0, 0, 0.08),
       0 3px 6px -4px rgba(0, 0, 0, 0.12),
@@ -484,23 +484,23 @@
       0 1px 6px -1px rgba(0, 0, 0, 0.02),
       0 2px 4px 0 rgba(0, 0, 0, 0.02)
     ;
-@screenXS: 480;
-@screenXSMin: 480;
-@screenXSMax: 575;
-@screenSM: 576;
-@screenSMMin: 576;
-@screenSMMax: 767;
-@screenMD: 768;
-@screenMDMin: 768;
-@screenMDMax: 991;
-@screenLG: 992;
-@screenLGMin: 992;
-@screenLGMax: 1199;
-@screenXL: 1200;
-@screenXLMin: 1200;
-@screenXLMax: 1599;
-@screenXXL: 1600;
-@screenXXLMin: 1600;
+@screenXS: 480px;
+@screenXSMin: 480px;
+@screenXSMax: 575px;
+@screenSM: 576px;
+@screenSMMin: 576px;
+@screenSMMax: 767px;
+@screenMD: 768px;
+@screenMDMin: 768px;
+@screenMDMax: 991px;
+@screenLG: 992px;
+@screenLGMin: 992px;
+@screenLGMax: 1199px;
+@screenXL: 1200px;
+@screenXLMin: 1200px;
+@screenXLMax: 1599px;
+@screenXXL: 1600px;
+@screenXXLMin: 1600px;
 @boxShadowPopoverArrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
 @boxShadowCard: 
       0 1px 2px -2px rgba(0,0,0,0.16),