@oceanbase/design 1.0.0-alpha.1 → 1.0.0-alpha.3

package/lib/theme/style/compact.less

@@ -1,10 +1,10 @@
 @blue: #0d6cf2;
 @purple: #722ED1;
 @cyan: #13C2C2;
-@green: #14b781;
+@green: #16b882;
 @magenta: #EB2F96;
 @pink: #EB2F96;
-@red: #ef4343;
+@red: #eb4242;
 @orange: #FA8C16;
 @yellow: #f49f25;
 @volcano: #FA541C;
@@ -12,9 +12,9 @@
 @gold: #FAAD14;
 @lime: #A0D911;
 @colorPrimary: #0d6cf2;
-@colorSuccess: #14b781;
+@colorSuccess: #16b882;
 @colorWarning: #f49f25;
-@colorError: #ef4343;
+@colorError: #eb4242;
 @colorInfo: #0d6cf2;
 @colorLink: #0d6cf2;
 @colorTextBase: #000000;
@@ -104,22 +104,22 @@
 @cyan9: #00474f;
 @cyan-10: #002329;
 @cyan10: #002329;
-@green-1: #e1f7ec;
-@green1: #e1f7ec;
-@green-2: #b0ebcf;
-@green2: #b0ebcf;
-@green-3: #83deb6;
-@green3: #83deb6;
-@green-4: #5ad1a1;
-@green4: #5ad1a1;
-@green-5: #35c490;
-@green5: #35c490;
-@green-6: #14b781;
-@green6: #14b781;
-@green-7: #099168;
-@green7: #099168;
-@green-8: #016b4f;
-@green8: #016b4f;
+@green-1: #e4f7ed;
+@green1: #e4f7ed;
+@green-2: #b2ebd0;
+@green2: #b2ebd0;
+@green-3: #85deb7;
+@green3: #85deb7;
+@green-4: #5cd1a2;
+@green4: #5cd1a2;
+@green-5: #37c491;
+@green5: #37c491;
+@green-6: #16b882;
+@green6: #16b882;
+@green-7: #0a9169;
+@green7: #0a9169;
+@green-8: #026b4f;
+@green8: #026b4f;
 @green-9: #004535;
 @green9: #004535;
 @green-10: #001f18;
@@ -172,18 +172,18 @@
 @red3: #ffc8c2;
 @red-4: #ffa099;
 @red4: #ffa099;
-@red-5: #fc746f;
-@red5: #fc746f;
-@red-6: #ef4343;
-@red6: #ef4343;
-@red-7: #c92e34;
-@red7: #c92e34;
-@red-8: #a31d26;
-@red8: #a31d26;
-@red-9: #7d101b;
-@red9: #7d101b;
-@red-10: #570a15;
-@red10: #570a15;
+@red-5: #f7716d;
+@red5: #f7716d;
+@red-6: #eb4242;
+@red6: #eb4242;
+@red-7: #c42d32;
+@red7: #c42d32;
+@red-8: #9e1c25;
+@red8: #9e1c25;
+@red-9: #78101a;
+@red9: #78101a;
+@red-10: #520a13;
+@red10: #520a13;
 @orange-1: #fff7e6;
 @orange1: #fff7e6;
 @orange-2: #ffe7ba;
@@ -307,15 +307,15 @@
 @colorText: #132039;
 @colorTextSecondary: #5c6b8a;
 @colorTextTertiary: #8592ad;
-@colorTextQuaternary: #c1cbe0;
+@colorTextQuaternary: #b6c0d4;
 @colorFill: #cdd5e4;
 @colorFillSecondary: #e2e8f3;
-@colorFillTertiary: #f3f6fc;
-@colorFillQuaternary: #f8fafe;
+@colorFillTertiary: #eff3fa;
+@colorFillQuaternary: #f7f9fc;
 @colorBgSolid: rgb(0,0,0);
 @colorBgSolidHover: rgba(0,0,0,0.75);
 @colorBgSolidActive: rgba(0,0,0,0.95);
-@colorBgLayout: #f8fafe;
+@colorBgLayout: #f7f9fc;
 @colorBgContainer: #ffffff;
 @colorBgElevated: #ffffff;
 @colorBgSpotlight: #ffffff;
@@ -331,60 +331,60 @@
 @colorPrimaryTextHover: #3690ff;
 @colorPrimaryText: #0d6cf2;
 @colorPrimaryTextActive: #004ecc;
-@colorSuccessBg: #e8f8f3;
-@colorSuccessBgHover: #b0ebcf;
-@colorSuccessBorder: #7ed7ba;
-@colorSuccessBorderHover: #5ad1a1;
-@colorSuccessHover: #5ad1a1;
-@colorSuccessActive: #099168;
-@colorSuccessTextHover: #35c490;
-@colorSuccessText: #096547;
-@colorSuccessTextActive: #099168;
-@colorErrorBg: #fdecec;
+@colorSuccessBg: #f5faf8;
+@colorSuccessBgHover: #b2ebd0;
+@colorSuccessBorder: #79d1b4;
+@colorSuccessBorderHover: #5cd1a2;
+@colorSuccessHover: #5cd1a2;
+@colorSuccessActive: #0a9169;
+@colorSuccessTextHover: #37c491;
+@colorSuccessText: #09593f;
+@colorSuccessTextActive: #0a9169;
+@colorErrorBg: #fff2f2;
 @colorErrorBgHover: #ffedeb;
 @colorErrorBgFilledHover: #ffddd9;
 @colorErrorBgActive: #ffc8c2;
 @colorErrorBorder: #f69898;
 @colorErrorBorderHover: #ffa099;
-@colorErrorHover: #fc746f;
-@colorErrorActive: #c92e34;
-@colorErrorTextHover: #fc746f;
+@colorErrorHover: #f7716d;
+@colorErrorActive: #c42d32;
+@colorErrorTextHover: #f7716d;
 @colorErrorText: #8a1b1b;
-@colorErrorTextActive: #c92e34;
-@colorWarningBg: #fef6e9;
+@colorErrorTextActive: #c42d32;
+@colorWarningBg: #fff9ee;
 @colorWarningBgHover: #fff0c9;
-@colorWarningBorder: #f9cb87;
+@colorWarningBorder: #fac373;
 @colorWarningBorderHover: #ffd078;
 @colorWarningHover: #ffd078;
 @colorWarningActive: #cf7b15;
 @colorWarningTextHover: #ffbc4f;
-@colorWarningText: #5b3600;
+@colorWarningText: #6c4408;
 @colorWarningTextActive: #cf7b15;
-@colorInfoBg: #eaf1ff;
+@colorInfoBg: #f3f8fe;
 @colorInfoBgHover: #b0dbff;
-@colorInfoBorder: #598cf3;
+@colorInfoBorder: #619ef3;
 @colorInfoBorderHover: #5eacff;
-@colorInfoHover: #5eacff;
-@colorInfoActive: #004ecc;
+@colorInfoHover: #0852bb;
+@colorInfoActive: #0852bb;
 @colorInfoTextHover: #3690ff;
-@colorInfoText: #083e8b;
+@colorInfoText: #0d3c80;
 @colorInfoTextActive: #004ecc;
 @colorLinkHover: #5eacff;
 @colorLinkActive: #004ecc;
-@colorBgMask: rgba(19, 32, 57, 0.45);
+@colorBgMask: rgba(19, 32, 57, 0.6);
 @colorWhite: #fff;
 @fontSizeSM: 12px;
-@fontSizeLG: 12px;
+@fontSizeLG: 16px;
 @fontSizeXL: 14px;
-@fontSizeHeading1: 26px;
-@fontSizeHeading2: 22px;
+@fontSizeHeading1: 24px;
+@fontSizeHeading2: 20px;
 @fontSizeHeading3: 18px;
-@fontSizeHeading4: 14px;
-@fontSizeHeading5: 12px;
-@lineHeight: 1.8;
+@fontSizeHeading4: 16px;
+@fontSizeHeading5: 13px;
+@lineHeight: 1.5384615384615385;
 @lineHeightLG: 1.6666666666666667;
 @lineHeightSM: 2;
-@fontHeight: 18px;
+@fontHeight: 20px;
 @fontHeightLG: 20px;
 @fontHeightSM: 16px;
 @lineHeightHeading1: 1.3076923076923077;
@@ -401,50 +401,57 @@
 @sizeSM: 8px;
 @sizeXS: 4px;
 @sizeXXS: 4px;
-@controlHeightSM: 21px;
-@controlHeightXS: 14px;
-@controlHeightLG: 35px;
+@controlHeightSM: 24px;
+@controlHeightXS: 12px;
+@controlHeightLG: 30px;
 @motionDurationFast: 0.1s;
 @motionDurationMid: 0.2s;
 @motionDurationSlow: 0.3s;
 @lineWidthBold: 2px;
 @borderRadiusXS: 1px;
 @borderRadiusSM: 2px;
-@borderRadiusLG: 6px;
+@borderRadiusLG: 8px;
 @borderRadiusOuter: 4px;
+@fontWeightWeak: 400;
+@fontWeight: 400;
+@fontWeightStrong: 600;
+@borderRadiusMD: 6px;
+@colorFuchsia: #b04ec4;
+@colorFuchsiaBorder: #d88ee7;
+@colorFuchsiaBg: #faf0fc;
+@colorFuchsiaText: #580e67;
 @colorIcon: #8592ad;
+@colorBgContainerDisabled: #eff3fa;
 @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);
 @lineWidthFocus: 3px;
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
-@colorFillAlter: #f8fafe;
-@colorBgContainerDisabled: #f3f6fc;
+@colorFillAlter: #f7f9fc;
 @colorBorderBg: #ffffff;
 @colorSplit: rgba(13,63,155,0.12);
-@colorTextPlaceholder: #c1cbe0;
-@colorTextDisabled: #c1cbe0;
+@colorTextPlaceholder: #b6c0d4;
+@colorTextDisabled: #b6c0d4;
 @colorTextHeading: #132039;
 @colorTextLabel: #5c6b8a;
 @colorTextDescription: #8592ad;
 @colorTextLightSolid: #fff;
-@colorHighlight: #ef4343;
+@colorHighlight: #eb4242;
 @colorBgTextHover: #e2e8f3;
 @colorBgTextActive: #cdd5e4;
 @colorIconHover: #132039;
-@colorErrorOutline: rgba(230,17,17,0.08);
-@colorWarningOutline: rgba(244,155,11,0.09);
+@colorErrorOutline: rgba(255,38,38,0.06);
+@colorWarningOutline: rgba(255,169,12,0.07);
 @fontSizeIcon: 12px;
 @controlOutlineWidth: 2px;
 @controlInteractiveSize: 14px;
-@controlItemBgHover: #f3f6fc;
+@controlItemBgHover: #eff3fa;
 @controlItemBgActive: #e6f4ff;
 @controlItemBgActiveHover: #b0dbff;
 @controlItemBgActiveDisabled: #cdd5e4;
-@controlTmpOutline: #f8fafe;
+@controlTmpOutline: #f7f9fc;
 @controlOutline: rgba(5,145,255,0.1);
-@fontWeightStrong: 600;
 @opacityLoading: 0.65;
 @linkDecoration: none;
 @linkHoverDecoration: none;

package/lib/theme/style/dark.less

@@ -1,10 +1,10 @@
 @blue: #0e5fd1;
 @purple: #722ED1;
 @cyan: #13C2C2;
-@green: #149f71;
+@green: #169f72;
 @magenta: #EB2F96;
 @pink: #EB2F96;
-@red: #ce3c3c;
+@red: #cb3b3b;
 @orange: #FA8C16;
 @yellow: #d28a22;
 @volcano: #FA541C;
@@ -12,9 +12,9 @@
 @gold: #FAAD14;
 @lime: #A0D911;
 @colorPrimary: #0e5fd1;
-@colorSuccess: #149f71;
+@colorSuccess: #169f72;
 @colorWarning: #d28a22;
-@colorError: #ce3c3c;
+@colorError: #cb3b3b;
 @colorInfo: #0e5fd1;
 @colorLink: #0e5fd1;
 @colorTextBase: #fff;
@@ -38,7 +38,7 @@
 @sizeUnit: 4px;
 @sizeStep: 4px;
 @sizePopupArrow: 16px;
-@controlHeight: 32px;
+@controlHeight: 28px;
 @zIndexBase: 0;
 @zIndexPopupBase: 1000;
 @opacityImage: 1;
@@ -106,24 +106,24 @@
 @cyan10: #b2f1e8;
 @green-1: #11211d;
 @green1: #11211d;
-@green-2: #113329;
-@green2: #113329;
-@green-3: #144535;
-@green3: #144535;
-@green-4: #145d45;
-@green4: #145d45;
-@green-5: #147e5b;
-@green5: #147e5b;
-@green-6: #149f71;
-@green6: #149f71;
-@green-7: #32b284;
-@green7: #32b284;
-@green-8: #57c89a;
-@green8: #57c89a;
-@green-9: #80d8b1;
-@green9: #80d8b1;
-@green-10: #ade7cb;
-@green10: #ade7cb;
+@green-2: #123329;
+@green2: #123329;
+@green-3: #154535;
+@green3: #154535;
+@green-4: #155e46;
+@green4: #155e46;
+@green-5: #157f5c;
+@green5: #157f5c;
+@green-6: #169f72;
+@green6: #169f72;
+@green-7: #34b285;
+@green7: #34b285;
+@green-8: #58c89b;
+@green8: #58c89b;
+@green-9: #82d8b2;
+@green9: #82d8b2;
+@green-10: #afe7cc;
+@green10: #afe7cc;
 @magenta-1: #291321;
 @magenta1: #291321;
 @magenta-2: #40162f;
@@ -166,18 +166,18 @@
 @pink10: #fad2e3;
 @red-1: #291517;
 @red1: #291517;
-@red-2: #411b1c;
-@red2: #411b1c;
-@red-3: #562222;
-@red3: #562222;
-@red-4: #772929;
-@red4: #772929;
-@red-5: #a23333;
-@red5: #a23333;
-@red-6: #ce3c3c;
-@red6: #ce3c3c;
-@red-7: #e56a66;
-@red7: #e56a66;
+@red-2: #401a1c;
+@red2: #401a1c;
+@red-3: #552222;
+@red3: #552222;
+@red-4: #752929;
+@red4: #752929;
+@red-5: #a03232;
+@red5: #a03232;
+@red-6: #cb3b3b;
+@red6: #cb3b3b;
+@red-7: #e06864;
+@red7: #e06864;
 @red-8: #f39992;
 @red8: #f39992;
 @red-9: #f8c3bd;
@@ -332,25 +332,25 @@
 @colorPrimaryText: #0e5fd1;
 @colorPrimaryTextActive: #0f4da4;
 @colorSuccessBg: #11211d;
-@colorSuccessBgHover: #113329;
-@colorSuccessBorder: #144535;
-@colorSuccessBorderHover: #145d45;
-@colorSuccessHover: #145d45;
-@colorSuccessActive: #147e5b;
-@colorSuccessTextHover: #32b284;
-@colorSuccessText: #149f71;
-@colorSuccessTextActive: #147e5b;
+@colorSuccessBgHover: #123329;
+@colorSuccessBorder: #154535;
+@colorSuccessBorderHover: #155e46;
+@colorSuccessHover: #155e46;
+@colorSuccessActive: #157f5c;
+@colorSuccessTextHover: #34b285;
+@colorSuccessText: #169f72;
+@colorSuccessTextActive: #157f5c;
 @colorErrorBg: #291517;
-@colorErrorBgHover: #411b1c;
-@colorErrorBgFilledHover: #401c1d;
-@colorErrorBgActive: #562222;
-@colorErrorBorder: #562222;
-@colorErrorBorderHover: #772929;
-@colorErrorHover: #e56a66;
-@colorErrorActive: #a23333;
-@colorErrorTextHover: #e56a66;
-@colorErrorText: #ce3c3c;
-@colorErrorTextActive: #a23333;
+@colorErrorBgHover: #401a1c;
+@colorErrorBgFilledHover: #3f1c1d;
+@colorErrorBgActive: #552222;
+@colorErrorBorder: #552222;
+@colorErrorBorderHover: #752929;
+@colorErrorHover: #e06864;
+@colorErrorActive: #a03232;
+@colorErrorTextHover: #e06864;
+@colorErrorText: #cb3b3b;
+@colorErrorTextActive: #a03232;
 @colorWarningBg: #2a1f12;
 @colorWarningBgHover: #432e14;
 @colorWarningBorder: #573e19;
@@ -401,9 +401,9 @@
 @sizeSM: 12px;
 @sizeXS: 8px;
 @sizeXXS: 4px;
-@controlHeightSM: 24px;
-@controlHeightXS: 16px;
-@controlHeightLG: 40px;
+@controlHeightSM: 21px;
+@controlHeightXS: 14px;
+@controlHeightLG: 35px;
 @motionDurationFast: 0.1s;
 @motionDurationMid: 0.2s;
 @motionDurationSlow: 0.3s;
@@ -424,7 +424,7 @@
 @colorTextLabel: rgba(255,255,255,0.65);
 @colorTextDescription: rgba(255,255,255,0.45);
 @colorTextLightSolid: #fff;
-@colorHighlight: #ce3c3c;
+@colorHighlight: #cb3b3b;
 @colorBgTextHover: rgba(255,255,255,0.12);
 @colorBgTextActive: rgba(255,255,255,0.18);
 @colorIcon: rgba(255,255,255,0.45);
@@ -434,7 +434,7 @@
 @fontSizeIcon: 10px;
 @lineWidthFocus: 3px;
 @controlOutlineWidth: 2px;
-@controlInteractiveSize: 16px;
+@controlInteractiveSize: 14px;
 @controlItemBgHover: rgba(255,255,255,0.08);
 @controlItemBgActive: #122e57;
 @controlItemBgActiveHover: #113c78;