@uzum-tech/ui 1.8.1 → 1.8.2

package/es/upload/src/Upload.js

@@ -287,12 +287,13 @@ export default defineComponent({
         }
         const cssVarsRef = computed(() => {
             const { value: size } = formItem.mergedSizeRef;
-            const { common: { cubicBezierEaseInOut }, self: { draggerColor, draggerBorder, draggerBorderHover, itemColorHover, itemColorHoverError, itemTextColorError, itemTextColorSuccess, itemTextColor, itemIconColor, itemDisabledOpacity, lineHeight, borderRadius, fontSize, itemBorderImageCardError, itemBorderImageCard, baseColor, draggerIconBgColor, draggerIconColor, draggerTextColor, draggerTitleColor, labelColor, containerSecondary, brandPrimary300, elementsQuaternary, [createKey('width', size)]: width } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { draggerColor, draggerBorder, draggerBorderHover, draggerShadowFocus, itemColorHover, itemColorHoverError, itemTextColorError, itemTextColorSuccess, itemTextColor, itemIconColor, itemDisabledOpacity, lineHeight, borderRadius, fontSize, itemBorderImageCardError, itemBorderImageCard, baseColor, draggerIconBgColor, draggerIconColor, draggerTextColor, draggerTitleColor, labelColor, containerSecondary, brandPrimary300, elementsQuaternary, [createKey('width', size)]: width } } = themeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-border-radius': borderRadius,
                 '--u-dragger-border': draggerBorder,
                 '--u-dragger-border-hover': draggerBorderHover,
+                '--u-dragger-shadow-focus': draggerShadowFocus,
                 '--u-dragger-color': draggerColor,
                 '--u-font-size': fontSize,
                 '--u-item-color-hover': itemColorHover,

package/es/upload/src/UploadFile.d.ts

@@ -24,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
             draggerColor: string;
             draggerBorder: string;
             draggerBorderHover: string;
+            draggerShadowFocus: string;
             itemColorHover: string;
             itemColorHoverError: string;
             itemTextColor: string;
@@ -67,16 +68,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/upload/src/UploadProgress.d.ts

@@ -20,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{
             draggerColor: string;
             draggerBorder: string;
             draggerBorderHover: string;
+            draggerShadowFocus: string;
             itemColorHover: string;
             itemColorHoverError: string;
             itemTextColor: string;
@@ -63,16 +64,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/upload/src/styles/index.cssr.js

@@ -5,6 +5,7 @@ export default c([cB('upload', 'width: var(--u-upload-width)', [cM('dragger-insi
  display: block;
  `)]), cM('drag-over', [cB('upload-dragger', `
  border: var(--u-dragger-border-hover);
+ box-shadow: var(--u-dragger-shadow-focus);
  `)]), cE('label', {
   marginBottom: '12px',
   marginTop: 0,

package/es/upload/src/useUploadActionsRender.js

@@ -4,8 +4,12 @@ import { UBaseIcon, UIconSwitchTransition } from '../../_internal';
 import { CancelIcon, EyeIcon, RetryIcon, TrashIcon, DownloadIcon } from '../../_internal/icons';
 export function useUploadActionsRender(opts) {
     const { clsPrefix, listType, file, showPreviewButton, showRemoveButton, showCancelButton, showRetryButton, showDownloadButton, disabled, buttonType, mergedTheme, buttonThemeOverrides, handlePreviewClick, handleRemoveOrCancelClick, handleRetryClick, handleDownloadClick, capitalizeFirstLetter } = opts;
+    const getExt = (name) => {
+        const i = name.lastIndexOf('.');
+        return i === -1 || i === name.length - 1 ? '' : name.slice(i + 1);
+    };
     const isImageType = ['image', 'image-card'].includes(listType);
-    const fileExt = file.name.split('.').at(-1) || '';
+    const fileExt = getExt(file.name);
     const capitalizedExt = capitalizeFirstLetter(fileExt);
     const icon = h('div', {
         class: [

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

@@ -7,6 +7,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     draggerColor: string;
     draggerBorder: string;
     draggerBorderHover: string;
+    draggerShadowFocus: string;
     itemColorHover: string;
     itemColorHoverError: string;
     itemTextColor: string;
@@ -37,6 +38,7 @@ declare const uploadLight: import("../../_mixins").Theme<"Upload", {
     draggerColor: string;
     draggerBorder: string;
     draggerBorderHover: string;
+    draggerShadowFocus: string;
     itemColorHover: string;
     itemColorHoverError: string;
     itemTextColor: string;
@@ -79,16 +81,24 @@ declare const uploadLight: import("../../_mixins").Theme<"Upload", {
         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/upload/styles/light.js

@@ -4,15 +4,16 @@ import { progressLight } from '../../progress/styles';
 import { commonLight } from '../../_styles/common';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
-    const { staticGreen, staticRed, elementsQuaternary, elementsTertiary, elementsPrimary, textPrimary, opacityDisabled, containerPrimary, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, elementsQuinary, containerSecondary, brandPrimary300 } = vars;
+    const { staticGreen, staticRed, elementsQuaternary, elementsTertiary, elementsPrimary, textPrimary, opacityDisabled, containerPrimary, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, containerSecondary, brandPrimary300, brandPrimary500 } = vars;
     return {
         baseColor: containerPrimary,
         fontSize: fontBodyMedium,
         lineHeight: lineHeightBodyMedium,
         borderRadius: borderRadiusLarge,
         draggerColor: elementsTertiary,
-        draggerBorder: `2px dashed ${elementsQuaternary}`,
-        draggerBorderHover: `2px dashed ${elementsQuinary}`,
+        draggerBorder: `1px dashed ${brandPrimary500}`,
+        draggerBorderHover: `1px solid ${brandPrimary500}`,
+        draggerShadowFocus: `0 0 0 4px ${brandPrimary500}1a`,
         itemColorHover: elementsTertiary,
         itemColorHoverError: changeColor(staticRed, {
             alpha: 0.05
@@ -22,8 +23,8 @@ export const self = (vars) => {
         itemTextColorSuccess: staticGreen,
         itemIconColor: elementsPrimary,
         itemDisabledOpacity: opacityDisabled,
-        itemBorderImageCardError: `2px solid ${staticRed}`,
-        itemBorderImageCard: `2px solid ${elementsQuaternary}`,
+        itemBorderImageCardError: `1px solid ${staticRed}`,
+        itemBorderImageCard: `1px solid ${elementsQuaternary}`,
         draggerIconBgColor: elementsTertiary,
         draggerIconColor: elementsPrimary,
         draggerTitleColor: textPrimary,

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.8.1";
+declare const _default: "1.8.2";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.8.1';
+export default '1.8.2';

package/lib/_internal/scrollbar/src/Scrollbar.js

@@ -195,7 +195,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             if (!props.scrollable)
                 return;
             if (typeof options === 'number') {
-                scrollToPosition(y !== null && y !== void 0 ? y : 0, options, 0, false, 'auto');
+                scrollToPosition(options, y !== null && y !== void 0 ? y : 0, 0, false, 'auto');
                 return;
             }
             const { left, top, index, elSize, position, behavior, el, debounce = true } = options;

package/lib/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/lib/button/src/Button.js

@@ -139,6 +139,7 @@ const Button = (0, vue_1.defineComponent)({
         const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Button', '-button', index_cssr_1.default, styles_1.buttonLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Button', mergedRtlRef, mergedClsPrefixRef);
+        // eslint-disable-next-line complexity
         const cssVarsRef = (0, vue_1.computed)(() => {
             const theme = themeRef.value;
             const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme;
@@ -187,7 +188,7 @@ const Button = (0, vue_1.defineComponent)({
                         : self[(0, _utils_1.createKey)('textColorTextPressed', mergedType)],
                     '--u-text-color-focus': propTextColor
                         ? (0, index_1.createHoverColor)(propTextColor)
-                        : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
+                        : self[(0, _utils_1.createKey)('textColorTextFocus', mergedType)],
                     '--u-text-color-disabled': propTextColor ||
                         self[(0, _utils_1.createKey)('textColorTextDisabled', mergedType)]
                 };
@@ -211,7 +212,7 @@ const Button = (0, vue_1.defineComponent)({
                         : self[(0, _utils_1.createKey)('textColorGhostPressed', mergedType)],
                     '--u-text-color-focus': mergedTextColor
                         ? (0, index_1.createHoverColor)(mergedTextColor)
-                        : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
+                        : self[(0, _utils_1.createKey)('textColorGhostFocus', mergedType)],
                     '--u-text-color-disabled': mergedTextColor ||
                         self[(0, _utils_1.createKey)('textColorGhostDisabled', mergedType)]
                 };
@@ -244,7 +245,7 @@ const Button = (0, vue_1.defineComponent)({
                         ? (0, seemly_1.changeColor)(mergedTextColor, {
                             alpha: Number(self.colorOpacitySecondaryHover)
                         })
-                        : self.colorSecondaryHover,
+                        : self.colorSecondaryFocus,
                     '--u-color-focus-visible': isColoredType
                         ? (0, seemly_1.changeColor)(mergedTextColor, {
                             alpha: +self.colorOpacitySecondaryFocus
@@ -256,7 +257,9 @@ const Button = (0, vue_1.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) {
@@ -266,7 +269,7 @@ const Button = (0, vue_1.defineComponent)({
                         ? self.textColorTertiary
                         : self[(0, _utils_1.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;
@@ -276,7 +279,7 @@ const Button = (0, vue_1.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;
@@ -285,13 +288,16 @@ const Button = (0, vue_1.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/lib/button/src/styles/index.cssr.js

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

package/lib/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/lib/button/styles/light.js

@@ -13,19 +13,19 @@ 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({}, _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: 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
@@ -33,7 +33,7 @@ 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 });
 };
 exports.self = self;