@oceanbase/design 1.0.0-alpha.0 → 1.0.0-alpha.2

package/es/badge/style/index.js

@@ -5,15 +5,11 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genBadgeStyle = function genBadgeStyle(token) {
   var componentCls = token.componentCls;
-  // dot size is larger than antd
-  var dotSize = token.fontSizeLG / 2;
   return _defineProperty(_defineProperty({}, "".concat(componentCls), {
-    // inherit color from parent instead of fixed colorText
-    color: 'inherit'
-  }), "".concat(componentCls).concat(componentCls, "-status"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-status-dot"), _defineProperty({
-    width: dotSize,
-    height: dotSize
-  }, "&".concat(componentCls, "-status-default"), {
+    // make status text inherit parent style
+    color: 'inherit',
+    fontSize: 'inherit'
+  }), "".concat(componentCls).concat(componentCls, "-status"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-status-dot"), _defineProperty({}, "&".concat(componentCls, "-status-default"), {
     backgroundColor: token.colorFill
   })), "".concat(componentCls, "-status-icon"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     // remove dot style
@@ -32,8 +28,9 @@ export var genBadgeStyle = function genBadgeStyle(token) {
     color: token.colorWarning
   })), "".concat(componentCls, "-status-text"), {
     marginInlineStart: token.marginXS,
-    // inherit color from parent instead of fixed colorText
-    color: 'inherit'
+    // inherit style from parent
+    color: 'inherit',
+    fontSize: 'inherit'
   }));
 };
 export default (function (prefixCls) {

package/es/card/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "size", "title", "tabList", "divided", "prefixCls", "bodyStyle", "styles", "className"];
+var _excluded = ["children", "size", "title", "tabList", "tabProps", "divided", "prefixCls", "bodyStyle", "styles", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -24,6 +24,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     title = _ref.title,
     tabList = _ref.tabList,
+    tabProps = _ref.tabProps,
     outerDivided = _ref.divided,
     customizePrefixCls = _ref.prefixCls,
     bodyStyle = _ref.bodyStyle,
@@ -62,6 +63,9 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: size,
     title: title,
     tabList: newTabList,
+    tabProps: _objectSpread({
+      size: 'middle'
+    }, tabProps),
     prefixCls: customizePrefixCls,
     bodyStyle: bodyStyle,
     styles: styles,

package/es/card/style/index.js

@@ -28,9 +28,15 @@ export var genCardStyle = function genCardStyle(token) {
     paddingSM = token.paddingSM,
     paddingLG = token.paddingLG;
   var tableComponentCls = "".concat(antCls, "-table");
-  return _ref2 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref2, "".concat(componentCls), _defineProperty({}, "".concat(componentCls, ":not(").concat(componentCls, "-bordered):not(").concat(componentCls, "-type-inner)"), {
+  return _ref2 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref2, "".concat(componentCls), _defineProperty(_defineProperty({}, "".concat(componentCls, ":not(").concat(componentCls, "-bordered):not(").concat(componentCls, "-type-inner)"), {
     boxShadow: 'none'
-  })), "".concat(componentCls).concat(componentCls, "-no-divider"), _defineProperty({}, "".concat(componentCls, "-head"), _defineProperty({
+  }), "".concat(componentCls), _defineProperty({
+    borderRadius: token.borderRadiusLG - 2
+  }, "".concat(componentCls), _defineProperty({
+    borderRadius: token.borderRadius
+  }, "".concat(componentCls), {
+    borderRadius: token.borderRadiusSM
+  })))), "".concat(componentCls).concat(componentCls, "-no-divider"), _defineProperty({}, "".concat(componentCls, "-head"), _defineProperty({
     // should not remove border-bottom to avoid tabs inkbar display correctly
     borderBottomColor: 'transparent'
   }, tabsComponentCls, _defineProperty({}, "&".concat(tabsComponentCls, "-top, &").concat(tabsComponentCls, "-bottom"), _defineProperty({}, "".concat(tabsComponentCls, "-nav::before"), {

package/es/descriptions/style/index.js

@@ -9,7 +9,7 @@ export var genVerticalStyle = function genVerticalStyle(size, token) {
   var componentCls = token.componentCls;
   var paddingMap = {
     default: {
-      paddingIn: token.paddingXS,
+      paddingIn: token.paddingXXS,
       paddingOut: token.paddingLG
     },
     middle: {
@@ -22,10 +22,12 @@ export var genVerticalStyle = function genVerticalStyle(size, token) {
     }
   };
   var paddingConfig = paddingMap[size];
-  return _defineProperty({}, "&".concat(componentCls).concat(componentCls, "-vertical:not(").concat(componentCls, "-bordered)"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-row:nth-child(2n + 1)"), _defineProperty({}, "& > th, & > td", {
+  return _defineProperty({}, "&".concat(componentCls).concat(componentCls, "-vertical:not(").concat(componentCls, "-bordered)"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-row:nth-child(2n + 1)"), _defineProperty({}, "& > th, & > td", {
     paddingBottom: paddingConfig.paddingIn
   })), "".concat(componentCls, "-row:nth-child(2n)"), _defineProperty({}, "& > th, & > td", {
     paddingBottom: paddingConfig.paddingOut
+  })), "".concat(componentCls, "-item"), _defineProperty({}, "".concat(componentCls, "-item-label"), {
+    fontSize: token.fontSizeSM
   })));
 };
 export var genDescriptionsStyle = function genDescriptionsStyle(token) {

package/es/form/FormItem.d.ts

@@ -4,7 +4,7 @@ import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
 import type { TooltipProps } from '../tooltip';
 declare const AntFormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
     useStatus: () => {
-        status?: "" | "warning" | "error" | "success" | "validating";
+        status?: "" | "error" | "warning" | "success" | "validating";
         errors: React.ReactNode[];
         warnings: React.ReactNode[];
     };

package/es/table/style/index.js

@@ -46,9 +46,7 @@ export var genTableStyle = function genTableStyle(token) {
     borderBottom: 'none'
   })), "tr > td", {
     transition: "background ".concat(token.motionDurationMid)
-  }), "".concat(componentCls, "-placeholder td"), {
-    borderBottom: 'none'
-  }), "".concat(componentCls, "-empty-wrapper"), {
+  }), "".concat(componentCls, "-placeholder td"), {}), "".concat(componentCls, "-empty-wrapper"), {
     minHeight: 360 - token.paddingSM * 2,
     display: 'flex',
     justifyContent: 'center',

package/es/tabs/style/index.js

@@ -14,11 +14,10 @@ export var genTabsStyle = function genTabsStyle(token) {
     border: 'none'
   }))), "".concat(componentCls, "-tab"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-tab-tag"), {
     color: colorTextSecondary,
-    fontFamily: 'PingFangSC',
     fontSize: 12,
     borderRadius: 12,
     marginInlineEnd: 0,
-    height: 20
+    height: token.controlHeightSM
   }), "".concat(componentCls, "-tab-badge"), _defineProperty(_defineProperty({}, ">".concat(antCls, "-badge-count"), {
     color: colorTextSecondary,
     backgroundColor: colorFillQuaternary

package/es/theme/default.js

@@ -9,11 +9,17 @@ import { formatTheme } from "./util/format";
 var colorPrimary = '#0D6CF2';
 var colorPrimarySecondary = '#598CF3';
 var colorText = '#132039';
-var colorTextSecondary = '#5c6b8a';
+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;
+var fontSizeSM = 12;
 // 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'";
@@ -25,53 +31,46 @@ var defaultTheme = {
     borderRadiusLG: 8,
     borderRadiusSM: 2,
     fontSize: 13,
-    fontSizeSM: 11,
+    fontSizeSM: fontSizeSM,
+    fontSizeLG: 16,
+    fontSizeHeading1: 24,
+    fontSizeHeading2: 20,
+    fontSizeHeading3: 18,
+    fontSizeHeading4: 16,
+    fontSizeHeading5: 13,
+    controlHeight: 28,
     colorPrimary: colorPrimary,
     colorInfo: colorPrimary,
-    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',
+    colorInfoBorder: colorPrimarySecondary,
+    colorInfoBg: '#EAF1FF',
+    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: colorText,
     colorTextSecondary: colorTextSecondary,
-    colorTextQuaternary: '#c1cbe0',
-    colorTextTertiary: '#8592AD',
+    colorTextTertiary: colorTextTertiary,
+    colorTextQuaternary: colorTextQuaternary,
+    colorIcon: colorTextSecondary,
     colorBgBase: '#ffffff',
     colorBgContainer: '#ffffff',
     colorBgLayout: colorFillQuaternary,
-    colorBorder: '#CDD5E4',
+    colorBorder: colorFill,
     colorBorderSecondary: colorBorderSecondary,
-    colorFillQuaternary: colorFillQuaternary,
-    colorFillTertiary: colorFillTertiary,
+    colorFill: colorFill,
     colorFillSecondary: colorFillSecondary,
-    colorFill: '#cdd5e4',
+    colorFillTertiary: colorFillTertiary,
+    colorFillQuaternary: colorFillQuaternary,
     colorBgMask: 'rgba(19, 32, 57, 0.45)',
     colorBgElevated: '#ffffff',
     colorBgSpotlight: '#ffffff',
@@ -83,19 +82,23 @@ var defaultTheme = {
     lineWidthFocus: 0
   },
   components: {
-    Badge: {
-      colorInfo: colorPrimarySecondary
-    },
     Breadcrumb: {
-      fontSize: 12,
+      fontSize: fontSizeSM,
       // @ts-ignore
       // fontHeight is internal token
       fontHeight: 20,
       lastItemColor: colorTextSecondary
     },
+    Card: {
+      headerFontSize: 16,
+      borderRadiusLG: 8
+    },
     Collapse: {
       colorBorder: colorBorderSecondary
     },
+    Descriptions: {
+      labelColor: colorTextSecondary
+    },
     InputNumber: {
       handleVisible: true
     },
@@ -120,6 +123,9 @@ var defaultTheme = {
       handleActiveColor: '#5189fb',
       handleColorDisabled: '#b3ccff'
     },
+    Skeleton: {
+      blockRadius: 4
+    },
     Tabs: {
       horizontalItemGutter: 24,
       itemActiveColor: colorText,
@@ -131,11 +137,11 @@ var defaultTheme = {
       colorBorder: tagColorBorder
     },
     Table: {
-      cellFontSize: 12,
+      cellFontSize: fontSizeSM,
       headerSplitColor: 'transparent',
-      cellPaddingBlock: 12,
+      cellPaddingBlock: 8,
       cellPaddingInline: 16,
-      cellPaddingBlockMD: 8,
+      cellPaddingBlockMD: 6,
       cellPaddingBlockSM: 4,
       rowHoverBg: colorFillQuaternary,
       rowSelectedBg: colorFillQuaternary,
@@ -145,17 +151,15 @@ var defaultTheme = {
       colorBgSpotlight: '#ffffff',
       colorTextLightSolid: colorText
     },
-    Card: {
-      borderRadiusLG: 8
-    },
     Menu: {
       paddingContentVertical: 0,
       itemHeight: 30,
       itemBorderRadius: 4,
       // 80 means 50% opacity
-      itemSelectedBg: colorFillSecondary + '80',
       itemHoverBg: colorFillSecondary + '80',
-      itemColor: colorTextSecondary,
+      itemActiveBg: colorFillSecondary + '80',
+      itemSelectedBg: colorFillSecondary + '80',
+      itemColor: '#36496F',
       itemSelectedColor: colorText,
       itemMarginBlock: 6,
       groupTitleFontSize: 11

package/es/theme/style/aliyun.less

@@ -104,26 +104,26 @@
 @cyan9: #00474f;
 @cyan-10: #002329;
 @cyan10: #002329;
-@green-1: #e6fff2;
-@green1: #e6fff2;
-@green-2: #a9f5d1;
-@green2: #a9f5d1;
-@green-3: #7be8b9;
-@green3: #7be8b9;
-@green-4: #51dba4;
-@green4: #51dba4;
-@green-5: #2bcf93;
-@green5: #2bcf93;
-@green-6: #0ac185;
-@green6: #0ac185;
-@green-7: #009c6d;
-@green7: #009c6d;
-@green-8: #007556;
-@green8: #007556;
-@green-9: #004f3d;
-@green9: #004f3d;
-@green-10: #002921;
-@green10: #002921;
+@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-9: #004535;
+@green9: #004535;
+@green-10: #001f18;
+@green10: #001f18;
 @magenta-1: #fff0f6;
 @magenta1: #fff0f6;
 @magenta-2: #ffd6e7;
@@ -166,24 +166,24 @@
 @pink10: #520339;
 @red-1: #fff2f0;
 @red1: #fff2f0;
-@red-2: #ffe2de;
-@red2: #ffe2de;
-@red-3: #ffbcb5;
-@red3: #ffbcb5;
-@red-4: #ff948c;
-@red4: #ff948c;
-@red-5: #ff6963;
-@red5: #ff6963;
-@red-6: #f93939;
-@red6: #f93939;
-@red-7: #d4262c;
-@red7: #d4262c;
-@red-8: #ad1721;
-@red8: #ad1721;
-@red-9: #870b17;
-@red9: #870b17;
-@red-10: #610713;
-@red10: #610713;
+@red-2: #ffedeb;
+@red2: #ffedeb;
+@red-3: #ffc8c2;
+@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;
 @orange-1: #fff7e6;
 @orange1: #fff7e6;
 @orange-2: #ffe7ba;
@@ -204,26 +204,26 @@
 @orange9: #873800;
 @orange-10: #612500;
 @orange10: #612500;
-@yellow-1: #fff9e6;
-@yellow1: #fff9e6;
-@yellow-2: #ffedbd;
-@yellow2: #ffedbd;
-@yellow-3: #ffdf94;
-@yellow3: #ffdf94;
-@yellow-4: #ffce6b;
-@yellow4: #ffce6b;
-@yellow-5: #ffba42;
-@yellow5: #ffba42;
-@yellow-6: #ffa21a;
-@yellow6: #ffa21a;
-@yellow-7: #d9800b;
-@yellow7: #d9800b;
-@yellow-8: #b35f00;
-@yellow8: #b35f00;
-@yellow-9: #8c4600;
-@yellow9: #8c4600;
-@yellow-10: #663000;
-@yellow10: #663000;
+@yellow-1: #fffbf0;
+@yellow1: #fffbf0;
+@yellow-2: #fff0c9;
+@yellow2: #fff0c9;
+@yellow-3: #ffe1a1;
+@yellow3: #ffe1a1;
+@yellow-4: #ffd078;
+@yellow4: #ffd078;
+@yellow-5: #ffbc4f;
+@yellow5: #ffbc4f;
+@yellow-6: #f49f25;
+@yellow6: #f49f25;
+@yellow-7: #cf7b15;
+@yellow7: #cf7b15;
+@yellow-8: #a85b08;
+@yellow8: #a85b08;
+@yellow-9: #823f00;
+@yellow9: #823f00;
+@yellow-10: #5c2900;
+@yellow10: #5c2900;
 @volcano-1: #fff2e8;
 @volcano1: #fff2e8;
 @volcano-2: #ffd8bf;
@@ -332,34 +332,34 @@
 @colorPrimaryText: #0d6cf2;
 @colorPrimaryTextActive: #004ecc;
 @colorSuccessBg: #dff4e5;
-@colorSuccessBgHover: #a9f5d1;
+@colorSuccessBgHover: #b0ebcf;
 @colorSuccessBorder: #dff4e5;
-@colorSuccessBorderHover: #51dba4;
-@colorSuccessHover: #51dba4;
-@colorSuccessActive: #009c6d;
-@colorSuccessTextHover: #2bcf93;
-@colorSuccessText: #0ac185;
-@colorSuccessTextActive: #009c6d;
+@colorSuccessBorderHover: #5ad1a1;
+@colorSuccessHover: #5ad1a1;
+@colorSuccessActive: #099168;
+@colorSuccessTextHover: #35c490;
+@colorSuccessText: #14b781;
+@colorSuccessTextActive: #099168;
 @colorErrorBg: #fff2f0;
-@colorErrorBgHover: #ffe2de;
-@colorErrorBgFilledHover: #ffd7d3;
-@colorErrorBgActive: #ffbcb5;
-@colorErrorBorder: #ffbcb5;
-@colorErrorBorderHover: #ff948c;
-@colorErrorHover: #ff6963;
-@colorErrorActive: #d4262c;
-@colorErrorTextHover: #ff6963;
-@colorErrorText: #f93939;
-@colorErrorTextActive: #d4262c;
-@colorWarningBg: #fff9e6;
-@colorWarningBgHover: #ffedbd;
-@colorWarningBorder: #ffdf94;
-@colorWarningBorderHover: #ffce6b;
-@colorWarningHover: #ffce6b;
-@colorWarningActive: #d9800b;
-@colorWarningTextHover: #ffba42;
-@colorWarningText: #ffa21a;
-@colorWarningTextActive: #d9800b;
+@colorErrorBgHover: #ffedeb;
+@colorErrorBgFilledHover: #ffddd9;
+@colorErrorBgActive: #ffc8c2;
+@colorErrorBorder: #ffc8c2;
+@colorErrorBorderHover: #ffa099;
+@colorErrorHover: #fc746f;
+@colorErrorActive: #c92e34;
+@colorErrorTextHover: #fc746f;
+@colorErrorText: #ef4343;
+@colorErrorTextActive: #c92e34;
+@colorWarningBg: #fffbf0;
+@colorWarningBgHover: #fff0c9;
+@colorWarningBorder: #ffe1a1;
+@colorWarningBorderHover: #ffd078;
+@colorWarningHover: #ffd078;
+@colorWarningActive: #cf7b15;
+@colorWarningTextHover: #ffbc4f;
+@colorWarningText: #f49f25;
+@colorWarningTextActive: #cf7b15;
 @colorInfoBg: #e6f4ff;
 @colorInfoBgHover: #b0dbff;
 @colorInfoBorder: #87c5ff;
@@ -402,7 +402,7 @@
 @sizeXS: 8px;
 @sizeXXS: 4px;
 @controlHeightSM: 24px;
-@controlHeightXS: 16px;
+@controlHeightXS: 14px;
 @controlHeightLG: 36px;
 @motionDurationFast: 0.1s;
 @motionDurationMid: 0.2s;
@@ -432,7 +432,7 @@
 @colorIcon: rgba(0,0,0,0.45);
 @colorIconHover: rgba(0, 0, 0, 0.85);
 @colorErrorOutline: rgba(255,38,5,0.06);
-@colorWarningOutline: rgba(255,195,5,0.1);
+@colorWarningOutline: rgba(255,188,5,0.06);
 @fontSizeIcon: 12px;
 @lineWidthFocus: 3px;
 @controlInteractiveSize: 16px;