@uzum-tech/ui 0.1.1 → 1.0.0

package/lib/breadcrumb/styles/light.js

@@ -1,14 +1,19 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
-const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { fontSize, textColor3, textColor2, borderRadius, buttonColor2Hover, buttonColor2Pressed } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { fontSize, itemLineHeight: '1.25', itemTextColor: textColor3, itemTextColorHover: textColor2, itemTextColorPressed: textColor2, itemTextColorActive: textColor2, itemBorderRadius: borderRadius, itemColorHover: buttonColor2Hover, itemColorPressed: buttonColor2Pressed, separatorColor: textColor3 });
+    const { fontWeightStrong, fontBodyMedium, lineHeightBodyMedium, textSecondary, textTertiary, textPrimary } = vars;
+    return {
+        fontWeight: fontWeightStrong,
+        fontSize: fontBodyMedium,
+        itemLineHeight: lineHeightBodyMedium,
+        itemTextColor: textPrimary,
+        itemTextColorHover: textTertiary,
+        itemTextColorPressed: textSecondary,
+        itemTextColorActive: textSecondary,
+        separatorColor: textPrimary
+    };
 };
 exports.self = self;
 const breadcrumbLight = {

package/lib/button/src/Button.d.ts

@@ -78,7 +78,7 @@ export declare const buttonProps: {
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -289,7 +289,7 @@ export declare const buttonProps: {
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -500,7 +500,7 @@ export declare const buttonProps: {
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -764,7 +764,7 @@ declare const Button: import("vue").DefineComponent<{
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -975,7 +975,7 @@ declare const Button: import("vue").DefineComponent<{
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -1186,7 +1186,7 @@ declare const Button: import("vue").DefineComponent<{
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -1399,7 +1399,7 @@ declare const Button: import("vue").DefineComponent<{
         'text-underline-offset': string;
         'line-height': string;
         '--u-font-size': string;
-        'font-weight': string;
+        '--u-font-weight': string;
         '--u-color': string;
         '--u-color-hover': string;
         '--u-color-pressed': string;
@@ -1508,7 +1508,7 @@ declare const Button: import("vue").DefineComponent<{
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -1719,7 +1719,7 @@ declare const Button: import("vue").DefineComponent<{
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -1930,7 +1930,7 @@ declare const Button: import("vue").DefineComponent<{
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
         colorTertiaryDisalbed: string;
-        waveColorTerniary: string;
+        waveColorTertiary: string;
         textColorTextTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
@@ -2130,9 +2130,9 @@ declare const Button: import("vue").DefineComponent<{
     readonly bordered: boolean;
     readonly tertiary: boolean;
     readonly ghost: boolean;
+    readonly secondary: boolean;
     readonly loadingSkeleton: boolean;
     readonly keyboard: boolean;
-    readonly secondary: boolean;
     readonly quaternary: boolean;
     readonly iconPlacement: "left" | "right";
     readonly attrType: "button" | "reset" | "submit";

package/lib/button/src/Button.js

@@ -147,7 +147,7 @@ const Button = (0, vue_1.defineComponent)({
             const { dashed, type, ghost, text, color, round, circle, textColor, secondary, tertiary, quaternary, strong } = props;
             // font
             const fontProps = {
-                'font-weight': strong ? fontWeightStrong : fontWeight
+                '--u-font-weight': strong ? fontWeightStrong : fontWeight
             };
             // color
             let colorProps = {
@@ -284,7 +284,7 @@ const Button = (0, vue_1.defineComponent)({
                     colorProps['--u-text-color-pressed'] = self.textColorTextTertiary;
                     colorProps['--u-text-color-focus'] = self.textColorTextTertiary;
                     colorProps['--u-text-color-disabled'] = self.textColorTextTertiary;
-                    colorProps['--u-color-focus-visible'] = self.waveColorTerniary;
+                    colorProps['--u-color-focus-visible'] = self.waveColorTertiary;
                 }
                 else {
                     colorProps['--u-color'] = self.colorQuaternary;
@@ -336,9 +336,9 @@ const Button = (0, vue_1.defineComponent)({
                 };
             }
             // Tag / Link
-            let decorationProps = Object.assign(Object.assign({}, colorProps), { 'text-decoration-line': 'none', 'text-underline-offset': 'none', 'line-height': '1', '--u-font-size': '14px', 'font-weight': fontWeightStrong });
+            let decorationProps = Object.assign(Object.assign({}, colorProps), { 'text-decoration-line': 'none', 'text-underline-offset': 'none', 'line-height': '1', '--u-font-size': '14px', '--u-font-weight': fontWeightStrong });
             if (props.tag === 'a') {
-                decorationProps = Object.assign(Object.assign({}, colorProps), { 'text-decoration-line': 'underline', 'text-underline-offset': '6px', '--u-font-size': '16px', 'line-height': '24px', 'font-weight': fontWeightStrong, '--u-text-color': typeIsTertiary ? '#101010' : self.colorPrimary, '--u-text-color-hover': typeIsTertiary
+                decorationProps = Object.assign(Object.assign({}, colorProps), { 'text-decoration-line': 'underline', 'text-underline-offset': '6px', '--u-font-size': '16px', 'line-height': '24px', '--u-font-weight': fontWeightStrong, '--u-text-color': typeIsTertiary ? '#101010' : self.colorPrimary, '--u-text-color-hover': typeIsTertiary
                         ? '#808080'
                         : self.colorHoverPrimary, '--u-text-color-pressed': typeIsTertiary
                         ? self.textTertiary

package/lib/button/src/styles/index.cssr.js

@@ -1,10 +1,5 @@
 "use strict";
 
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,7 +7,6 @@ const cssr_1 = require("../../../_utils/cssr");
 const fade_in_width_expand_cssr_1 = require("../../../_styles/transitions/fade-in-width-expand.cssr");
 const icon_switch_cssr_1 = require("../../../_styles/transitions/icon-switch.cssr");
 const _utils_1 = require("../../../_utils");
-const _common_1 = __importDefault(require("../../../_styles/common/_common"));
 // vars:
 // --u-bezier
 // --u-bezier-ease-out
@@ -122,10 +116,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
 }, [(0, cssr_1.cE)('state-border', {
   border: 'var(--u-border-pressed)'
 })])]), (0, cssr_1.cM)('loading', 'cursor: wait;'), (0, cssr_1.cE)('loading', null, [(0, cssr_1.cM)('skeleton', {
-  width: `calc(100% + ${_common_1.default.borderWidth * 2}px)`,
-  height: `calc(100% + ${_common_1.default.borderWidth * 2}px)`,
-  left: `-${_common_1.default.borderWidth}px`,
-  top: `-${_common_1.default.borderWidth}px`,
+  width: 'calc(100% + 2px)',
+  height: 'calc(100% + 2px)',
+  left: '-1px',
+  top: '-1px',
   position: 'absolute',
   zIndex: 2,
   borderRadius: 'var(--u-border-radius)'

package/lib/button/styles/dark.js

@@ -5,13 +5,6 @@ const light_1 = require("./light");
 const buttonDark = {
     name: 'Button',
     common: common_1.commonDark,
-    self(vars) {
-        const commonSelf = (0, light_1.self)(vars);
-        commonSelf.waveOpacity = '0.8';
-        commonSelf.colorOpacitySecondary = '0.16';
-        commonSelf.colorOpacitySecondaryHover = '0.2';
-        commonSelf.colorOpacitySecondaryPressed = '0.12';
-        return commonSelf;
-    }
+    self: light_1.self
 };
 exports.default = buttonDark;

package/lib/button/styles/light.d.ts

@@ -26,7 +26,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     colorTertiaryHover: string;
     colorTertiaryPressed: string;
     colorTertiaryDisalbed: string;
-    waveColorTerniary: string;
+    waveColorTertiary: string;
     textColorTextTertiary: string;
     colorQuaternary: string;
     colorQuaternaryHover: string;

package/lib/button/styles/light.js

@@ -7,33 +7,33 @@ exports.self = void 0;
 const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { heightTiny, heightSmall, heightMedium, heightLarge, borderRadius, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, opacityDisabled, textColor2, textColor3, primaryColorHover, primaryColorPressed, borderColor, primaryColor, baseColor, infoColor, infoColorHover, infoColorPressed, successColor, successColorHover, successColorPressed, warningColor, warningColorHover, warningColorPressed, errorColor, errorColorHover, errorColorPressed, fontWeight, buttonColor2, buttonColor2Hover, buttonColor2Pressed, fontWeightStrong, textTertiary } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { heightTiny,
-        heightSmall,
-        heightMedium,
-        heightLarge, borderRadiusTiny: borderRadius, borderRadiusSmall: borderRadius, borderRadiusMedium: borderRadius, borderRadiusLarge: borderRadius, fontSizeTiny,
-        fontSizeSmall,
-        fontSizeMedium,
-        fontSizeLarge,
-        opacityDisabled, 
+    const { heightMini, heightTiny, heightSmall, heightMedium, borderRadius, opacityDisabled, fontWeight, fontWeightStrong, textTertiary, borderRadiusMedium, fontBodyMedium, fontBodyLarge, elementsQuinary, elementsPrimary, elementsSenary, elementsTertiary, textQuaternary, elementsQuaternary, textPrimary, brandPrimary400, brandPrimary500, brandPrimary600, brandPrimary300, staticWhite, brandQuaternary300, brandQuaternary500, staticBlack, brandQuaternary600, staticGreen, staticOrange, staticRed } = vars;
+    // todo Добавить возможность заменить глобально
+    const successHover = '#11d559';
+    const successPress = '#0f9b42';
+    const warningHover = '#f79942';
+    const warningPress = '#df7a1d';
+    const errorHover = '#f75e4d';
+    const errorPress = '#e53a27';
+    return Object.assign(Object.assign({}, _common_1.default), { heightTiny: heightMini, heightSmall: heightTiny, heightMedium: heightSmall, heightLarge: heightMedium, borderRadiusTiny: borderRadiusMedium, borderRadiusSmall: borderRadiusMedium, borderRadiusMedium: borderRadius, borderRadiusLarge: borderRadius, fontSizeTiny: fontBodyMedium, fontSizeSmall: fontBodyMedium, fontSizeMedium: fontBodyMedium, fontSizeLarge: fontBodyLarge, opacityDisabled, 
         // secondary
-        colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.22', colorOpacitySecondaryPressed: '0.28', colorOpacitySecondaryFocus: '0.27', colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, waveColorSecondary: '#C5C7CA', 
+        colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.22', colorOpacitySecondaryPressed: '0.28', colorOpacitySecondaryFocus: '0.27', colorSecondary: elementsTertiary, colorSecondaryHover: elementsTertiary, colorSecondaryPressed: elementsTertiary, waveColorSecondary: elementsQuinary, 
         // tertiary
-        colorTertiary: '#101010', colorTertiaryHover: '#4E4D4D', colorTertiaryPressed: '#101010', colorTertiaryDisalbed: '#C5C7CA', waveColorTerniary: '#C5C7CA', textColorTextTertiary: '#FFFFFF', 
+        colorTertiary: elementsPrimary, colorTertiaryHover: elementsSenary, colorTertiaryPressed: elementsPrimary, colorTertiaryDisalbed: elementsTertiary, waveColorTertiary: elementsTertiary, textColorTextTertiary: textQuaternary, 
         // quaternary
-        colorQuaternary: '#0000', colorQuaternaryHover: buttonColor2Hover, colorQuaternaryPressed: buttonColor2Pressed, 
+        colorQuaternary: '#0000', colorQuaternaryHover: elementsTertiary, colorQuaternaryPressed: elementsQuaternary, 
         // default type
-        color: '#0000', colorHover: '#0000', colorPressed: '#0000', colorFocus: '#0000', colorDisabled: '#0000', textColor: textColor2, textTertiary, textColorTertiary: textColor3, textColorHover: primaryColorHover, textColorPressed: primaryColorPressed, textColorFocus: primaryColorHover, textColorDisabled: textColor2, textColorText: textColor2, textColorTextHover: primaryColorHover, textColorTextPressed: primaryColorPressed, textColorTextFocus: primaryColorHover, textColorTextDisabled: textColor2, textColorGhost: textColor2, textColorGhostHover: primaryColorHover, textColorGhostPressed: primaryColorPressed, textColorGhostFocus: primaryColorHover, textColorGhostDisabled: textColor2, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderPressed: `1px solid ${primaryColorPressed}`, borderFocus: `1px solid ${primaryColorHover}`, borderDisabled: `1px solid ${borderColor}`, rippleColor: primaryColor, 
+        color: '#0000', colorHover: '#0000', colorPressed: '#0000', colorFocus: '#0000', colorDisabled: '#0000', textColor: textPrimary, textTertiary, textColorTertiary: textTertiary, textColorHover: brandPrimary400, textColorPressed: brandPrimary500, textColorFocus: brandPrimary400, textColorDisabled: textTertiary, textColorText: textPrimary, textColorTextHover: brandPrimary400, textColorTextPressed: brandPrimary500, textColorTextFocus: brandPrimary400, textColorTextDisabled: textTertiary, textColorGhost: textTertiary, textColorGhostHover: brandPrimary400, textColorGhostPressed: brandPrimary500, textColorGhostFocus: brandPrimary400, textColorGhostDisabled: textTertiary, border: `2px solid ${elementsQuaternary}`, borderHover: `2px solid ${brandPrimary400}`, borderPressed: `2px solid ${brandPrimary500}`, borderFocus: `2px solid ${brandPrimary400}`, borderDisabled: `2px solid ${elementsQuaternary}`, rippleColor: brandPrimary500, 
         // primary
-        colorPrimary: primaryColor, colorHoverPrimary: primaryColorHover, colorPressedPrimary: primaryColorPressed, colorFocusPrimary: primaryColorHover, colorDisabledPrimary: primaryColor, waveColorPrimary: '#BBA2FD', textColorPrimary: baseColor, textColorHoverPrimary: baseColor, textColorPressedPrimary: baseColor, textColorFocusPrimary: baseColor, textColorDisabledPrimary: baseColor, textColorTextPrimary: primaryColor, textColorTextHoverPrimary: primaryColorHover, textColorTextPressedPrimary: primaryColorPressed, textColorTextFocusPrimary: primaryColorHover, textColorTextDisabledPrimary: textColor2, textColorGhostPrimary: primaryColor, textColorGhostHoverPrimary: primaryColorHover, textColorGhostPressedPrimary: primaryColorPressed, textColorGhostFocusPrimary: primaryColorHover, textColorGhostDisabledPrimary: primaryColor, borderPrimary: `1px solid ${primaryColor}`, borderHoverPrimary: `1px solid ${primaryColorHover}`, borderPressedPrimary: `1px solid ${primaryColorPressed}`, borderFocusPrimary: `1px solid ${primaryColorHover}`, borderDisabledPrimary: `1px solid ${primaryColor}`, rippleColorPrimary: primaryColor, 
+        colorPrimary: brandPrimary500, colorHoverPrimary: brandPrimary400, colorPressedPrimary: brandPrimary600, colorFocusPrimary: brandPrimary400, colorDisabledPrimary: brandPrimary500, waveColorPrimary: brandPrimary300, textColorPrimary: staticWhite, textColorHoverPrimary: staticWhite, textColorPressedPrimary: staticWhite, textColorFocusPrimary: staticWhite, textColorDisabledPrimary: staticWhite, textColorTextPrimary: brandPrimary500, textColorTextHoverPrimary: brandPrimary400, textColorTextPressedPrimary: brandPrimary600, textColorTextFocusPrimary: brandPrimary400, textColorTextDisabledPrimary: textTertiary, textColorGhostPrimary: brandPrimary500, textColorGhostHoverPrimary: brandPrimary400, textColorGhostPressedPrimary: brandPrimary600, textColorGhostFocusPrimary: brandPrimary400, textColorGhostDisabledPrimary: brandPrimary500, borderPrimary: `2px solid ${brandPrimary500}`, borderHoverPrimary: `2px solid ${brandPrimary400}`, borderPressedPrimary: `2px solid ${brandPrimary600}`, borderFocusPrimary: `2px solid ${brandPrimary400}`, borderDisabledPrimary: `2px solid ${brandPrimary500}`, rippleColorPrimary: brandPrimary500, 
         // info
-        colorInfo: infoColor, colorHoverInfo: infoColorHover, colorPressedInfo: infoColorPressed, colorFocusInfo: infoColorHover, colorDisabledInfo: infoColor, textColorInfo: baseColor, textColorHoverInfo: baseColor, textColorPressedInfo: baseColor, textColorFocusInfo: baseColor, textColorDisabledInfo: baseColor, textColorTextInfo: infoColor, textColorTextHoverInfo: infoColorHover, textColorTextPressedInfo: infoColorPressed, textColorTextFocusInfo: infoColorHover, textColorTextDisabledInfo: textColor2, textColorGhostInfo: infoColor, textColorGhostHoverInfo: infoColorHover, textColorGhostPressedInfo: infoColorPressed, textColorGhostFocusInfo: infoColorHover, textColorGhostDisabledInfo: infoColor, borderInfo: `1px solid ${infoColor}`, borderHoverInfo: `1px solid ${infoColorHover}`, borderPressedInfo: `1px solid ${infoColorPressed}`, borderFocusInfo: `1px solid ${infoColorHover}`, borderDisabledInfo: `1px solid ${infoColor}`, rippleColorInfo: infoColor, 
+        colorInfo: brandQuaternary500, colorHoverInfo: brandQuaternary300, colorPressedInfo: brandQuaternary600, colorFocusInfo: brandQuaternary300, colorDisabledInfo: brandQuaternary500, textColorInfo: staticBlack, textColorHoverInfo: staticBlack, textColorPressedInfo: staticBlack, textColorFocusInfo: staticBlack, textColorDisabledInfo: staticBlack, textColorTextInfo: brandQuaternary500, textColorTextHoverInfo: brandQuaternary300, textColorTextPressedInfo: brandQuaternary600, textColorTextFocusInfo: brandQuaternary300, textColorTextDisabledInfo: textTertiary, textColorGhostInfo: brandQuaternary500, textColorGhostHoverInfo: brandQuaternary300, textColorGhostPressedInfo: brandQuaternary600, textColorGhostFocusInfo: brandQuaternary300, textColorGhostDisabledInfo: brandQuaternary500, borderInfo: `2px solid ${brandQuaternary500}`, borderHoverInfo: `2px solid ${brandQuaternary300}`, borderPressedInfo: `2px solid ${brandQuaternary600}`, borderFocusInfo: `2px solid ${brandQuaternary300}`, borderDisabledInfo: `2px solid ${brandQuaternary500}`, rippleColorInfo: brandQuaternary500, 
         // success
-        colorSuccess: successColor, colorHoverSuccess: successColorHover, colorPressedSuccess: successColorPressed, colorFocusSuccess: successColorHover, colorDisabledSuccess: successColor, textColorSuccess: baseColor, textColorHoverSuccess: baseColor, textColorPressedSuccess: baseColor, textColorFocusSuccess: baseColor, textColorDisabledSuccess: baseColor, textColorTextSuccess: successColor, textColorTextHoverSuccess: successColorHover, textColorTextPressedSuccess: successColorPressed, textColorTextFocusSuccess: successColorHover, textColorTextDisabledSuccess: textColor2, textColorGhostSuccess: successColor, textColorGhostHoverSuccess: successColorHover, textColorGhostPressedSuccess: successColorPressed, textColorGhostFocusSuccess: successColorHover, textColorGhostDisabledSuccess: successColor, borderSuccess: `1px solid ${successColor}`, borderHoverSuccess: `1px solid ${successColorHover}`, borderPressedSuccess: `1px solid ${successColorPressed}`, borderFocusSuccess: `1px solid ${successColorHover}`, borderDisabledSuccess: `1px solid ${successColor}`, rippleColorSuccess: successColor, 
+        colorSuccess: staticGreen, colorHoverSuccess: successHover, colorPressedSuccess: successPress, colorFocusSuccess: successHover, colorDisabledSuccess: staticGreen, textColorSuccess: staticWhite, textColorHoverSuccess: staticWhite, textColorPressedSuccess: staticWhite, textColorFocusSuccess: staticWhite, textColorDisabledSuccess: staticWhite, textColorTextSuccess: staticGreen, textColorTextHoverSuccess: successHover, textColorTextPressedSuccess: successPress, textColorTextFocusSuccess: successHover, textColorTextDisabledSuccess: textTertiary, textColorGhostSuccess: staticGreen, textColorGhostHoverSuccess: successHover, textColorGhostPressedSuccess: successPress, textColorGhostFocusSuccess: successHover, textColorGhostDisabledSuccess: staticGreen, borderSuccess: `2px solid ${staticGreen}`, borderHoverSuccess: `2px solid ${successHover}`, borderPressedSuccess: `2px solid ${successPress}`, borderFocusSuccess: `2px solid ${successHover}`, borderDisabledSuccess: `2px solid ${staticGreen}`, rippleColorSuccess: staticGreen, 
         // warning
-        colorWarning: warningColor, colorHoverWarning: warningColorHover, colorPressedWarning: warningColorPressed, colorFocusWarning: warningColorHover, colorDisabledWarning: warningColor, textColorWarning: baseColor, textColorHoverWarning: baseColor, textColorPressedWarning: baseColor, textColorFocusWarning: baseColor, textColorDisabledWarning: baseColor, textColorTextWarning: warningColor, textColorTextHoverWarning: warningColorHover, textColorTextPressedWarning: warningColorPressed, textColorTextFocusWarning: warningColorHover, textColorTextDisabledWarning: textColor2, textColorGhostWarning: warningColor, textColorGhostHoverWarning: warningColorHover, textColorGhostPressedWarning: warningColorPressed, textColorGhostFocusWarning: warningColorHover, textColorGhostDisabledWarning: warningColor, borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderPressedWarning: `1px solid ${warningColorPressed}`, borderFocusWarning: `1px solid ${warningColorHover}`, borderDisabledWarning: `1px solid ${warningColor}`, rippleColorWarning: warningColor, 
+        colorWarning: staticOrange, colorHoverWarning: warningHover, colorPressedWarning: warningPress, colorFocusWarning: warningHover, colorDisabledWarning: staticOrange, textColorWarning: staticWhite, textColorHoverWarning: staticWhite, textColorPressedWarning: staticWhite, textColorFocusWarning: staticWhite, textColorDisabledWarning: staticWhite, textColorTextWarning: staticOrange, textColorTextHoverWarning: warningHover, textColorTextPressedWarning: warningPress, textColorTextFocusWarning: warningHover, textColorTextDisabledWarning: textTertiary, textColorGhostWarning: staticOrange, textColorGhostHoverWarning: warningHover, textColorGhostPressedWarning: warningPress, textColorGhostFocusWarning: warningHover, textColorGhostDisabledWarning: staticOrange, borderWarning: `2px solid ${staticOrange}`, borderHoverWarning: `2px solid ${warningHover}`, borderPressedWarning: `2px solid ${warningPress}`, borderFocusWarning: `2px solid ${warningHover}`, borderDisabledWarning: `2px solid ${staticOrange}`, rippleColorWarning: staticOrange, 
         // error
-        colorError: errorColor, colorHoverError: errorColorHover, colorPressedError: errorColorPressed, colorFocusError: errorColorHover, colorDisabledError: errorColor, textColorError: baseColor, textColorHoverError: baseColor, textColorPressedError: baseColor, textColorFocusError: baseColor, textColorDisabledError: baseColor, textColorTextError: errorColor, textColorTextHoverError: errorColorHover, textColorTextPressedError: errorColorPressed, textColorTextFocusError: errorColorHover, textColorTextDisabledError: textColor2, textColorGhostError: errorColor, textColorGhostHoverError: errorColorHover, textColorGhostPressedError: errorColorPressed, textColorGhostFocusError: errorColorHover, textColorGhostDisabledError: errorColor, borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderPressedError: `1px solid ${errorColorPressed}`, borderFocusError: `1px solid ${errorColorHover}`, borderDisabledError: `1px solid ${errorColor}`, rippleColorError: errorColor, waveOpacity: '0.6', fontWeight,
+        colorError: staticRed, colorHoverError: errorHover, colorPressedError: errorPress, colorFocusError: errorHover, colorDisabledError: staticRed, textColorError: staticWhite, textColorHoverError: staticWhite, textColorPressedError: staticWhite, textColorFocusError: staticWhite, textColorDisabledError: staticWhite, textColorTextError: staticRed, textColorTextHoverError: errorHover, textColorTextPressedError: errorPress, textColorTextFocusError: errorHover, textColorTextDisabledError: textTertiary, textColorGhostError: staticRed, textColorGhostHoverError: errorHover, textColorGhostPressedError: errorPress, textColorGhostFocusError: errorHover, textColorGhostDisabledError: staticRed, borderError: `2px solid ${staticRed}`, borderHoverError: `2px solid ${errorHover}`, borderPressedError: `2px solid ${errorPress}`, borderFocusError: `2px solid ${errorHover}`, borderDisabledError: `2px solid ${staticRed}`, rippleColorError: staticRed, waveOpacity: '0.6', fontWeight,
         fontWeightStrong });
 };
 exports.self = self;