@megafon/ui-core 2.2.0 → 3.0.0-beta.3

package/dist/es/components/Search/Search.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-search {
   font-family: inherit;
   font-size: 15px;
@@ -12,11 +5,11 @@ h5 {
   position: relative;
   z-index: auto;
   min-height: 40px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-search__require-mark {
   margin-left: 1px;
-  color: #F62434;
+  color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
@@ -31,8 +24,8 @@ h5 {
   width: 100%;
   height: 48px;
   padding: 0 16px 0 20px;
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
+  border: 1px solid var(--spbSky2);
+  background-color: var(--base);
   outline: none;
   cursor: pointer;
   -webkit-user-select: none;
@@ -41,7 +34,7 @@ h5 {
           user-select: none;
 }
 .mfui-search__control_error {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-search__search-field {
   position: relative;
@@ -56,6 +49,7 @@ h5 {
   border: none;
   border-radius: 0;
   overflow: auto;
+  color: var(--content);
   font-family: inherit;
   line-height: 25px;
   background-color: transparent;
@@ -79,7 +73,7 @@ h5 {
   left: -1px;
   z-index: 0;
   display: none;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
           box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
 }
@@ -91,7 +85,7 @@ h5 {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-search__icon-box {
   display: -webkit-box;
@@ -105,6 +99,7 @@ h5 {
           justify-content: center;
   height: 100%;
   text-align: center;
+  fill: var(--content);
 }
 .mfui-search__list-inner {
   -webkit-box-sizing: border-box;
@@ -116,11 +111,11 @@ h5 {
 .mfui-search__list-item {
   font-family: inherit;
   padding: 8px 32px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   cursor: pointer;
 }
 .mfui-search__list-item_active {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-search__item-title {
   position: relative;
@@ -137,23 +132,23 @@ h5 {
   right: 0;
   bottom: 0;
   width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
 .mfui-search__list-item_active .mfui-search__item-title:after {
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#F6F6F6));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #F6F6F6);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
 }
 .mfui-search_open .mfui-search__list {
   display: block;
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-search_open {
   z-index: 12;
 }
 .mfui-search_disabled .mfui-search__control {
-  border-color: #EDEDED;
-  background-color: #EDEDED;
+  border-color: var(--spbSky1);
+  background-color: var(--spbSky1);
   cursor: default;
   pointer-events: none;
 }
@@ -169,8 +164,8 @@ h5 {
   line-height: 16px;
 }
 .mfui-search__notice_error {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-search__notice_success {
-  color: #00B956;
+  color: var(--brandGreen);
 }

package/dist/es/components/Select/Select.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-select {
   font-family: inherit;
   font-size: 15px;
@@ -13,7 +6,7 @@ h5 {
   position: relative;
   z-index: 1;
   min-height: 40px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-select__inner {
   position: relative;
@@ -25,8 +18,8 @@ h5 {
           box-sizing: border-box;
   width: 100%;
   height: 48px;
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
+  border: 1px solid var(--spbSky2);
+  background-color: var(--base);
   outline: none;
   cursor: pointer;
 }
@@ -40,7 +33,7 @@ h5 {
   border-right: 5px solid transparent;
   border-bottom: none;
   border-left: 5px solid transparent;
-  color: #333333;
+  color: var(--content);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;
@@ -59,6 +52,7 @@ h5 {
   border: none;
   border-radius: 0;
   overflow: auto;
+  color: var(--content);
   background-color: transparent;
   outline: none;
   -webkit-box-shadow: none;
@@ -70,7 +64,7 @@ h5 {
           appearance: none;
 }
 .mfui-select_no-touch .mfui-select__control:hover {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-select__title {
   position: relative;
@@ -86,7 +80,7 @@ h5 {
   outline: none;
 }
 .mfui-select__title_placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select__title-inner {
   position: relative;
@@ -111,26 +105,26 @@ h5 {
   right: 0;
   bottom: 0;
   width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
 .mfui-select__require-mark {
   margin-left: 1px;
-  color: #F62434;
+  color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
 .mfui-select input::-webkit-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select input::-moz-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select input:-moz-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select input:-ms-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select__list {
   position: absolute;
@@ -139,7 +133,7 @@ h5 {
   left: 0;
   z-index: 10;
   display: none;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
           box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
 }
@@ -153,11 +147,11 @@ h5 {
 .mfui-select__list-item {
   font-family: inherit;
   padding: 8px 32px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   cursor: pointer;
 }
 .mfui-select__list-item_active {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-select__item-title {
   position: relative;
@@ -180,12 +174,12 @@ h5 {
   right: 0;
   bottom: 0;
   width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
 .mfui-select__list-item_active .mfui-select__item-title:after {
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#F6F6F6));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #F6F6F6);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
 }
 .mfui-select__not-found {
   padding: 8px 32px;
@@ -208,26 +202,26 @@ h5 {
 }
 .mfui-select_open .mfui-select__list {
   display: block;
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-select_open .mfui-select__control {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-select_valid .mfui-select__control {
-  border-color: #00B956 !important;
+  border-color: var(--brandGreen) !important;
 }
 .mfui-select_valid .mfui-select__text {
-  color: #00B956;
+  color: var(--brandGreen);
 }
 .mfui-select_error .mfui-select__control {
-  border-color: #F62434 !important;
+  border-color: var(--fury) !important;
 }
 .mfui-select_error .mfui-select__text {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-select_disabled .mfui-select__control {
-  border-color: #EDEDED;
-  background-color: #EDEDED;
+  border-color: var(--spbSky1);
+  background-color: var(--spbSky1);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;

package/dist/es/components/Select/Select.d.ts

@@ -132,7 +132,7 @@ declare class Select<T extends SelectItemValueType> extends React.Component<ISel
     handleClosed: () => void;
     handleClickOutside: (e: MouseEvent) => void;
     handleOpenDropdown: () => void;
-    handleSelectItem: (e: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
+    handleSelectItem: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     handleHoverItem: (index: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     handleComboboxFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     handleChangeCombobox: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/es/components/Switcher/Switcher.css

@@ -1,54 +1,44 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-switcher {
   top: 22px;
   right: 28px;
-  width: 48px;
-  height: 28px;
+  width: 40px;
+  height: 24px;
   border-radius: 15.5px;
-  background-color: #FFFFFF;
-  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
-          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  background-color: var(--spbSky1);
   cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 .mfui-switcher_no-touch:hover {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-switcher__pointer {
   position: relative;
-  top: 1px;
-  left: 0;
-  width: 24px;
-  height: 24px;
-  border: 1px solid #D8D8D8;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
-  background-color: #FFFFFF;
-  -webkit-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-          box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+  background-color: var(--base);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 .mfui-switcher_checked {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-switcher_checked .mfui-switcher__pointer {
-  left: 22px;
+  left: 18px;
 }
 .mfui-switcher_checked.mfui-switcher_no-touch:hover {
-  background-color: #10E272;
+  background-color: var(--buttonHoverGreen);
 }
 .mfui-switcher_disabled {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
 }
-.mfui-switcher_checked.mfui-switcher_disabled,
-.mfui-switcher_checked.mfui-switcher_disabled.mfui-switcher_no-touch:hover {
-  background-color: #D8D8D8;
+.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch.mfui-switcher:hover {
+  background-color: var(--spbSky1);
+}
+.mfui-switcher_disabled .mfui-switcher__pointer {
+  background-color: var(--spbSky2);
 }

package/dist/es/components/Tabs/Tabs.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-tabs__swiper {
   font-family: inherit;
   font-size: 15px;
@@ -28,13 +21,13 @@ h5 {
 }
 .mfui-tabs__swiper:before {
   left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, left top, right top, from(var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to right, var(--base), rgba(255, 255, 255, 0));
 }
 .mfui-tabs__swiper:after {
   right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, right top, left top, from(var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to left, var(--base), rgba(255, 255, 255, 0));
 }
 .mfui-tabs__swiper_beginning:before {
   display: none;
@@ -80,19 +73,19 @@ h5 {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   height: 32px;
-  color: #333333;
+  color: var(--content);
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-tabs__tab-inner:hover {
-  color: #00B956;
-  fill: #00B956;
+  color: var(--brandGreen);
+  fill: var(--brandGreen);
 }
 .mfui-tabs__tab-inner_current {
-  color: #00B956;
-  fill: #00B956;
+  color: var(--brandGreen);
+  fill: var(--brandGreen);
 }
 .mfui-tabs__tab-icon {
   width: 32px;
@@ -116,7 +109,7 @@ h5 {
   bottom: 0;
   left: 0;
   height: 2px;
-  background-color: #00B956;
+  background-color: var(--brandGreen);
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
 }
@@ -128,11 +121,11 @@ h5 {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: #333333;
+  background-color: var(--content);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;
-  fill: #FFFFFF;
+  fill: var(--base);
 }
 @media screen and (max-width: 1023px) {
   .mfui-tabs__arrow {
@@ -206,7 +199,7 @@ h5 {
           justify-content: center;
 }
 .mfui-tabs_h-align_center .mfui-tabs__tab {
-  border-bottom: 1px solid #D8D8D8;
+  border-bottom: 1px solid var(--stcWhite);
 }
 .mfui-tabs_h-align_left .mfui-tabs__swiper-wrapper {
   position: relative;
@@ -218,7 +211,7 @@ h5 {
   left: 0;
   width: 100%;
   height: 1px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-tabs_indents .mfui-tabs__swiper {
@@ -238,37 +231,37 @@ h5 {
   right: 0;
   left: 0;
   z-index: 100;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:before {
   left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(#00B956), to(transparent));
-  background: linear-gradient(to right, #00B956, transparent);
+  background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), to(transparent));
+  background: linear-gradient(to right, var(--brandGreen), transparent);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:after {
   right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(#00B956), to(transparent));
-  background: linear-gradient(to left, #00B956, transparent);
+  background: -webkit-gradient(linear, right top, left top, from(var(--brandGreen)), to(transparent));
+  background: linear-gradient(to left, var(--brandGreen), transparent);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab {
-  border-color: rgba(237, 237, 237, 0.5);
+  border-color: var(--stcBlack5);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner {
-  color: #FFFFFF80;
-  fill: #FFFFFF80;
+  color: var(--stcWhite50);
+  fill: var(--stcWhite50);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:hover {
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: var(--stcWhite);
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: var(--stcWhite);
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__underline {
-  background-color: #FFFFFF;
+  background-color: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow {
-  background-color: #FFFFFF;
-  fill: #00B956;
+  background-color: var(--stcWhite);
+  fill: var(--brandGreen);
 }

package/dist/es/components/TextField/TextField.css

@@ -1,15 +1,8 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-text-field {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-text-field__field {
   font-family: inherit;
@@ -45,13 +38,13 @@ h5 {
   overflow: auto;
 }
 .mfui-text-field input::-webkit-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-text-field input:-moz-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-text-field input:-ms-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-text-field input::-ms-clear,
 .mfui-text-field input::-ms-reveal {
@@ -62,7 +55,7 @@ h5 {
   -webkit-box-flex: 1;
       -ms-flex: 1 0 100px;
           flex: 1 0 100px;
-  background: #FFFFFF;
+  background: var(--base);
 }
 .mfui-text-field__icon-box {
   position: absolute;
@@ -83,6 +76,7 @@ h5 {
           box-sizing: border-box;
   padding-right: 16px;
   text-align: center;
+  fill: var(--content);
 }
 .mfui-text-field__icon-box_error,
 .mfui-text-field__icon-box_password,
@@ -105,7 +99,7 @@ h5 {
 }
 .mfui-text-field__require-mark {
   margin-left: 1px;
-  color: #F62434;
+  color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
@@ -123,64 +117,64 @@ h5 {
   opacity: 0.5;
 }
 .mfui-text-field__counter_error {
-  color: #F62434;
+  color: var(--fury);
   opacity: 1;
 }
 .mfui-text-field_theme_default .mfui-text-field__field {
-  border: 1px solid #D8D8D8;
-  color: #333333;
+  border: 1px solid var(--spbSky2);
+  color: var(--content);
   background-color: transparent;
 }
 .mfui-text-field_theme_default .mfui-text-field__field-wrapper_no-touch:hover .mfui-text-field__field,
 .mfui-text-field_theme_default .mfui-text-field__field:focus {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field-wrapper_no-touch:hover .mfui-text-field__field,
 .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__field {
-  border-color: #00B956;
+  border-color: var(--brandGreen);
 }
 .mfui-text-field_theme_default.mfui-text-field_valid .mfui-text-field__icon {
-  fill: #00B956;
+  fill: var(--brandGreen);
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__icon {
-  fill: #F62434;
+  fill: var(--fury);
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__text_error {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-text-field_theme_white .mfui-text-field__field {
-  border: 1px solid #FFFFFF;
-  color: #333333;
+  border: 1px solid var(--base);
+  color: var(--content);
 }
 .mfui-text-field_theme_white .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
 .mfui-text-field_theme_white .mfui-text-field__field:focus {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__field-wrapper:hover .mfui-text-field__field,
 .mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__field {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__icon {
-  fill: #F62434;
+  fill: var(--fury);
 }
 .mfui-text-field_theme_white.mfui-text-field_error .mfui-text-field__text_error {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-text-field__text_success {
-  color: #00B956;
+  color: var(--brandGreen);
 }
 .mfui-text-field_disabled .mfui-text-field__field-wrapper {
-  background-color: #EDEDED !important;
+  background-color: var(--spbSky1) !important;
 }
 .mfui-text-field_disabled .mfui-text-field__field {
-  border-color: #EDEDED !important;
-  color: #333333 !important;
+  border-color: var(--spbSky1) !important;
+  color: var(--content) !important;
   cursor: default !important;
-  -webkit-text-fill-color: #333333 !important;
+  -webkit-text-fill-color: var(--content) !important;
 }
 .mfui-text-field_disabled .mfui-text-field__icon-box {
   cursor: default !important;