@uzum-tech/ui 1.8.1 → 1.9.0

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

@@ -73,16 +73,24 @@ export declare const buttonProps: {
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -284,16 +292,24 @@ export declare const buttonProps: {
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -495,16 +511,24 @@ export declare const buttonProps: {
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -759,16 +783,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -970,16 +1002,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -1181,16 +1221,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -1503,16 +1551,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -1714,16 +1770,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;
@@ -1925,16 +1989,24 @@ declare const Button: import("vue").DefineComponent<{
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;

package/es/button/src/Button.js

@@ -133,6 +133,7 @@ const Button = defineComponent({
         const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('Button', '-button', style, buttonLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('Button', mergedRtlRef, mergedClsPrefixRef);
+        // eslint-disable-next-line complexity
         const cssVarsRef = computed(() => {
             const theme = themeRef.value;
             const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme;
@@ -181,7 +182,7 @@ const Button = defineComponent({
                         : self[createKey('textColorTextPressed', mergedType)],
                     '--u-text-color-focus': propTextColor
                         ? createHoverColor(propTextColor)
-                        : self[createKey('textColorTextHover', mergedType)],
+                        : self[createKey('textColorTextFocus', mergedType)],
                     '--u-text-color-disabled': propTextColor ||
                         self[createKey('textColorTextDisabled', mergedType)]
                 };
@@ -205,7 +206,7 @@ const Button = defineComponent({
                         : self[createKey('textColorGhostPressed', mergedType)],
                     '--u-text-color-focus': mergedTextColor
                         ? createHoverColor(mergedTextColor)
-                        : self[createKey('textColorGhostHover', mergedType)],
+                        : self[createKey('textColorGhostFocus', mergedType)],
                     '--u-text-color-disabled': mergedTextColor ||
                         self[createKey('textColorGhostDisabled', mergedType)]
                 };
@@ -238,7 +239,7 @@ const Button = defineComponent({
                         ? changeColor(mergedTextColor, {
                             alpha: Number(self.colorOpacitySecondaryHover)
                         })
-                        : self.colorSecondaryHover,
+                        : self.colorSecondaryFocus,
                     '--u-color-focus-visible': isColoredType
                         ? changeColor(mergedTextColor, {
                             alpha: +self.colorOpacitySecondaryFocus
@@ -250,7 +251,9 @@ const Button = defineComponent({
                     '--u-text-color-hover': mergedTextColor,
                     '--u-text-color-pressed': mergedTextColor,
                     '--u-text-color-focus': mergedTextColor,
-                    '--u-text-color-disabled': mergedTextColor
+                    '--u-text-color-disabled': isColoredType
+                        ? mergedTextColor
+                        : self.textColorSecondaryDisabled
                 };
             }
             else if (tertiary || quaternary) {
@@ -260,7 +263,7 @@ const Button = defineComponent({
                         ? self.textColorTertiary
                         : self[createKey('color', mergedType)];
                 const mergedColor = color || typeColor;
-                colorProps['--u-ripple-color'] = '#0000';
+                colorProps['--u-text-color'] = mergedColor;
                 colorProps['--u-text-color'] = mergedColor;
                 colorProps['--u-text-color-hover'] = mergedColor;
                 colorProps['--u-text-color-pressed'] = mergedColor;
@@ -270,7 +273,7 @@ const Button = defineComponent({
                     colorProps['--u-color'] = self.colorTertiary;
                     colorProps['--u-color-hover'] = self.colorTertiaryHover;
                     colorProps['--u-color-pressed'] = self.colorTertiaryPressed;
-                    colorProps['--u-color-focus'] = self.colorTertiaryPressed;
+                    colorProps['--u-color-focus'] = self.colorTertiaryFocus;
                     colorProps['--u-color-disabled'] = self.colorTertiaryDisalbed;
                     colorProps['--u-ripple-color'] = self.colorTertiary;
                     colorProps['--u-text-color'] = self.textColorTextTertiary;
@@ -279,13 +282,16 @@ const Button = defineComponent({
                     colorProps['--u-text-color-focus'] = self.textColorTextTertiary;
                     colorProps['--u-text-color-disabled'] = self.textColorTextTertiary;
                     colorProps['--u-color-focus-visible'] = self.waveColorTertiary;
+                    colorProps['--u-ripple-color'] = self.rippleColorTertiary;
                 }
                 else {
                     colorProps['--u-color'] = self.colorQuaternary;
                     colorProps['--u-color-hover'] = self.colorQuaternaryHover;
                     colorProps['--u-color-pressed'] = self.colorQuaternaryPressed;
-                    colorProps['--u-color-focus'] = self.colorQuaternaryHover;
+                    colorProps['--u-color-focus'] = self.colorQuaternaryFocus;
                     colorProps['--u-color-disabled'] = self.colorQuaternary;
+                    colorProps['--u-ripple-color'] = self.rippleColorQuaternary;
+                    colorProps['--u-color-focus-visible'] = self.waveColorQuaternary;
                 }
             }
             else {

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

@@ -183,8 +183,7 @@ export default c([cB('button', `
  `), cM('dashed', [cE('border, state-border', {
   borderStyle: 'dashed !important'
 })]), cM('disabled', {
-  cursor: 'not-allowed',
-  opacity: 'var(--u-opacity-disabled)'
+  cursor: 'not-allowed'
 })]), c('@keyframes button-wave-spread', {
   from: {
     boxShadow: '0 0 0.5px 0 var(--u-ripple-color)'

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

@@ -21,16 +21,24 @@ export declare const self: (vars: ThemeCommonVars) => {
     colorSecondary: string;
     colorSecondaryHover: string;
     colorSecondaryPressed: string;
+    colorSecondaryFocus: string;
+    colorSecondaryDisabled: string;
+    textColorSecondaryDisabled: string;
     waveColorSecondary: string;
     colorTertiary: string;
     colorTertiaryHover: string;
     colorTertiaryPressed: string;
+    colorTertiaryFocus: string;
     colorTertiaryDisalbed: string;
     waveColorTertiary: string;
     textColorTextTertiary: string;
+    rippleColorTertiary: string;
     colorQuaternary: string;
     colorQuaternaryHover: string;
     colorQuaternaryPressed: string;
+    colorQuaternaryFocus: string;
+    rippleColorQuaternary: string;
+    waveColorQuaternary: string;
     color: string;
     colorHover: string;
     colorPressed: string;

package/es/button/styles/light.js

@@ -7,19 +7,19 @@ export const self = (vars) => {
     const successPress = '#0f9b42';
     const warningHover = '#f79942';
     const warningPress = '#df7a1d';
-    const errorHover = '#f75e4d';
-    const errorPress = '#e53a27';
+    const errorHover = '#cb0000';
+    const errorDisable = '#f8a39a';
     return Object.assign(Object.assign({}, commonVariables), { 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: elementsTertiary, colorSecondaryHover: elementsTertiary, colorSecondaryPressed: elementsTertiary, waveColorSecondary: elementsQuinary, 
+        colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.22', colorOpacitySecondaryPressed: '0.28', colorOpacitySecondaryFocus: '0.27', colorSecondary: elementsTertiary, colorSecondaryHover: elementsQuaternary, colorSecondaryPressed: elementsTertiary, colorSecondaryFocus: elementsTertiary, colorSecondaryDisabled: elementsTertiary, textColorSecondaryDisabled: elementsQuinary, waveColorSecondary: elementsQuinary, 
         // tertiary
-        colorTertiary: elementsPrimary, colorTertiaryHover: elementsSenary, colorTertiaryPressed: elementsPrimary, colorTertiaryDisalbed: elementsTertiary, waveColorTertiary: elementsTertiary, textColorTextTertiary: textQuaternary, 
+        colorTertiary: elementsPrimary, colorTertiaryHover: elementsSenary, colorTertiaryPressed: elementsPrimary, colorTertiaryFocus: elementsPrimary, colorTertiaryDisalbed: elementsQuinary, waveColorTertiary: elementsQuinary, textColorTextTertiary: textQuaternary, rippleColorTertiary: elementsQuinary, 
         // quaternary
-        colorQuaternary: '#0000', colorQuaternaryHover: elementsTertiary, colorQuaternaryPressed: elementsQuaternary, 
+        colorQuaternary: '#0000', colorQuaternaryHover: elementsQuaternary, colorQuaternaryPressed: '#0000', colorQuaternaryFocus: '#0000', rippleColorQuaternary: elementsQuinary, waveColorQuaternary: elementsQuinary, 
         // default type
         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: 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, 
+        colorPrimary: brandPrimary500, colorHoverPrimary: brandPrimary600, colorPressedPrimary: brandPrimary500, colorFocusPrimary: brandPrimary500, colorDisabledPrimary: brandPrimary300, waveColorPrimary: brandPrimary300, textColorPrimary: staticWhite, textColorHoverPrimary: staticWhite, textColorPressedPrimary: staticWhite, textColorFocusPrimary: staticWhite, textColorDisabledPrimary: staticWhite, textColorTextPrimary: brandPrimary500, textColorTextHoverPrimary: brandPrimary600, textColorTextPressedPrimary: brandPrimary300, textColorTextFocusPrimary: brandPrimary300, textColorTextDisabledPrimary: brandPrimary300, textColorGhostPrimary: brandPrimary500, textColorGhostHoverPrimary: brandPrimary600, textColorGhostPressedPrimary: brandPrimary500, textColorGhostFocusPrimary: brandPrimary500, textColorGhostDisabledPrimary: brandPrimary300, borderPrimary: `2px solid ${brandPrimary500}`, borderHoverPrimary: `2px solid ${brandPrimary600}`, borderPressedPrimary: `2px solid ${brandPrimary500}`, borderFocusPrimary: `2px solid ${brandPrimary500}`, borderDisabledPrimary: `2px solid ${brandPrimary300}`, rippleColorPrimary: brandPrimary300, 
         // info
         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
@@ -27,7 +27,7 @@ export const self = (vars) => {
         // warning
         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: 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,
+        colorError: staticRed, colorHoverError: errorHover, colorPressedError: staticRed, colorFocusError: staticRed, colorDisabledError: errorDisable, textColorError: staticWhite, textColorHoverError: staticWhite, textColorPressedError: staticWhite, textColorFocusError: staticWhite, textColorDisabledError: staticWhite, textColorTextError: staticRed, textColorTextHoverError: errorHover, textColorTextPressedError: staticRed, textColorTextFocusError: staticRed, textColorTextDisabledError: errorDisable, textColorGhostError: staticRed, textColorGhostHoverError: errorHover, textColorGhostPressedError: staticRed, textColorGhostFocusError: staticRed, textColorGhostDisabledError: errorDisable, borderError: `2px solid ${staticRed}`, borderHoverError: `2px solid ${errorHover}`, borderPressedError: `2px solid ${staticRed}`, borderFocusError: `2px solid ${staticRed}`, borderDisabledError: `2px solid ${errorDisable}`, rippleColorError: errorDisable, waveOpacity: '0.6', fontWeight,
         fontWeightStrong });
 };
 const buttonLight = {

package/es/calendar/src/Calendar.d.ts

@@ -54,16 +54,24 @@ export declare const calendarProps: {
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -288,16 +296,24 @@ export declare const calendarProps: {
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -522,16 +538,24 @@ export declare const calendarProps: {
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -768,16 +792,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -1002,16 +1034,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -1236,16 +1276,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -1513,16 +1561,24 @@ declare const _default: import("vue").DefineComponent<{
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
+                colorSecondaryFocus: string;
+                colorSecondaryDisabled: string;
+                textColorSecondaryDisabled: string;
                 waveColorSecondary: string;
                 colorTertiary: string;
                 colorTertiaryHover: string;
                 colorTertiaryPressed: string;
+                colorTertiaryFocus: string;
                 colorTertiaryDisalbed: string;
                 waveColorTertiary: string;
                 textColorTextTertiary: string;
+                rippleColorTertiary: string;
                 colorQuaternary: string;
                 colorQuaternaryHover: string;
                 colorQuaternaryPressed: string;
+                colorQuaternaryFocus: string;
+                rippleColorQuaternary: string;
+                waveColorQuaternary: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
@@ -1790,16 +1846,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -2024,16 +2088,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;
@@ -2258,16 +2330,24 @@ declare const _default: import("vue").DefineComponent<{
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
+            colorSecondaryFocus: string;
+            colorSecondaryDisabled: string;
+            textColorSecondaryDisabled: string;
             waveColorSecondary: string;
             colorTertiary: string;
             colorTertiaryHover: string;
             colorTertiaryPressed: string;
+            colorTertiaryFocus: string;
             colorTertiaryDisalbed: string;
             waveColorTertiary: string;
             textColorTextTertiary: string;
+            rippleColorTertiary: string;
             colorQuaternary: string;
             colorQuaternaryHover: string;
             colorQuaternaryPressed: string;
+            colorQuaternaryFocus: string;
+            rippleColorQuaternary: string;
+            waveColorQuaternary: string;
             color: string;
             colorHover: string;
             colorPressed: string;

package/es/calendar/styles/light.d.ts

@@ -65,16 +65,24 @@ declare const calendarLight: import("../../_mixins").Theme<"Calendar", {
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
+        colorSecondaryFocus: string;
+        colorSecondaryDisabled: string;
+        textColorSecondaryDisabled: string;
         waveColorSecondary: string;
         colorTertiary: string;
         colorTertiaryHover: string;
         colorTertiaryPressed: string;
+        colorTertiaryFocus: string;
         colorTertiaryDisalbed: string;
         waveColorTertiary: string;
         textColorTextTertiary: string;
+        rippleColorTertiary: string;
         colorQuaternary: string;
         colorQuaternaryHover: string;
         colorQuaternaryPressed: string;
+        colorQuaternaryFocus: string;
+        rippleColorQuaternary: string;
+        waveColorQuaternary: string;
         color: string;
         colorHover: string;
         colorPressed: string;