naive-ui 2.21.2 → 2.22.0

package/lib/button/src/Button.js

@@ -92,7 +92,7 @@ const Button = (0, vue_1.defineComponent)({
             }
         };
         const handleClick = (e) => {
-            if (!props.disabled) {
+            if (!props.disabled && !props.loading) {
                 const { onClick } = props;
                 if (onClick)
                     (0, _utils_1.call)(onClick, e);
@@ -118,7 +118,7 @@ const Button = (0, vue_1.defineComponent)({
             switch (e.code) {
                 case 'Enter':
                 case 'NumpadEnter':
-                    if (!props.keyboard) {
+                    if (!props.keyboard || props.loading) {
                         e.preventDefault();
                         return;
                     }
@@ -151,11 +151,11 @@ const Button = (0, vue_1.defineComponent)({
                     return null;
                 const hoverColor = (0, index_1.createHoverColor)(color);
                 return {
-                    '--border-color': color,
-                    '--border-color-hover': hoverColor,
-                    '--border-color-pressed': (0, index_1.createPressedColor)(color),
-                    '--border-color-focus': hoverColor,
-                    '--border-color-disabled': color
+                    '--n-border-color': color,
+                    '--n-border-color-hover': hoverColor,
+                    '--n-border-color-pressed': (0, index_1.createPressedColor)(color),
+                    '--n-border-color-focus': hoverColor,
+                    '--n-border-color-disabled': color
                 };
             }),
             cssVars: (0, vue_1.computed)(() => {
@@ -170,17 +170,17 @@ const Button = (0, vue_1.defineComponent)({
                 };
                 // color
                 let colorProps = {
-                    '--color': 'initial',
-                    '--color-hover': 'initial',
-                    '--color-pressed': 'initial',
-                    '--color-focus': 'initial',
-                    '--color-disabled': 'initial',
-                    '--ripple-color': 'initial',
-                    '--text-color': 'initial',
-                    '--text-color-hover': 'initial',
-                    '--text-color-pressed': 'initial',
-                    '--text-color-focus': 'initial',
-                    '--text-color-disabled': 'initial'
+                    '--n-color': 'initial',
+                    '--n-color-hover': 'initial',
+                    '--n-color-pressed': 'initial',
+                    '--n-color-focus': 'initial',
+                    '--n-color-disabled': 'initial',
+                    '--n-ripple-color': 'initial',
+                    '--n-text-color': 'initial',
+                    '--n-text-color-hover': 'initial',
+                    '--n-text-color-pressed': 'initial',
+                    '--n-text-color-focus': 'initial',
+                    '--n-text-color-disabled': 'initial'
                 };
                 const typeIsTertiary = type === 'tertiary';
                 const typeIsDefault = type === 'default';
@@ -189,46 +189,46 @@ const Button = (0, vue_1.defineComponent)({
                     const propTextColor = textColor || color;
                     const mergedTextColor = propTextColor || self[(0, _utils_1.createKey)('textColorText', mergedType)];
                     colorProps = {
-                        '--color': '#0000',
-                        '--color-hover': '#0000',
-                        '--color-pressed': '#0000',
-                        '--color-focus': '#0000',
-                        '--color-disabled': '#0000',
-                        '--ripple-color': '#0000',
-                        '--text-color': mergedTextColor,
-                        '--text-color-hover': propTextColor
+                        '--n-color': '#0000',
+                        '--n-color-hover': '#0000',
+                        '--n-color-pressed': '#0000',
+                        '--n-color-focus': '#0000',
+                        '--n-color-disabled': '#0000',
+                        '--n-ripple-color': '#0000',
+                        '--n-text-color': mergedTextColor,
+                        '--n-text-color-hover': propTextColor
                             ? (0, index_1.createHoverColor)(propTextColor)
                             : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
-                        '--text-color-pressed': propTextColor
+                        '--n-text-color-pressed': propTextColor
                             ? (0, index_1.createPressedColor)(propTextColor)
                             : self[(0, _utils_1.createKey)('textColorTextPressed', mergedType)],
-                        '--text-color-focus': propTextColor
+                        '--n-text-color-focus': propTextColor
                             ? (0, index_1.createHoverColor)(propTextColor)
                             : self[(0, _utils_1.createKey)('textColorTextHover', mergedType)],
-                        '--text-color-disabled': propTextColor ||
+                        '--n-text-color-disabled': propTextColor ||
                             self[(0, _utils_1.createKey)('textColorTextDisabled', mergedType)]
                     };
                 }
                 else if (ghost || dashed) {
                     const mergedTextColor = textColor || color;
                     colorProps = {
-                        '--color': '#0000',
-                        '--color-hover': '#0000',
-                        '--color-pressed': '#0000',
-                        '--color-focus': '#0000',
-                        '--color-disabled': '#0000',
-                        '--ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
-                        '--text-color': mergedTextColor || self[(0, _utils_1.createKey)('textColorGhost', mergedType)],
-                        '--text-color-hover': mergedTextColor
+                        '--n-color': '#0000',
+                        '--n-color-hover': '#0000',
+                        '--n-color-pressed': '#0000',
+                        '--n-color-focus': '#0000',
+                        '--n-color-disabled': '#0000',
+                        '--n-ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
+                        '--n-text-color': mergedTextColor || self[(0, _utils_1.createKey)('textColorGhost', mergedType)],
+                        '--n-text-color-hover': mergedTextColor
                             ? (0, index_1.createHoverColor)(mergedTextColor)
                             : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
-                        '--text-color-pressed': mergedTextColor
+                        '--n-text-color-pressed': mergedTextColor
                             ? (0, index_1.createPressedColor)(mergedTextColor)
                             : self[(0, _utils_1.createKey)('textColorGhostPressed', mergedType)],
-                        '--text-color-focus': mergedTextColor
+                        '--n-text-color-focus': mergedTextColor
                             ? (0, index_1.createHoverColor)(mergedTextColor)
                             : self[(0, _utils_1.createKey)('textColorGhostHover', mergedType)],
-                        '--text-color-disabled': mergedTextColor ||
+                        '--n-text-color-disabled': mergedTextColor ||
                             self[(0, _utils_1.createKey)('textColorGhostDisabled', mergedType)]
                     };
                 }
@@ -241,33 +241,33 @@ const Button = (0, vue_1.defineComponent)({
                     const mergedTextColor = color || typeTextColor;
                     const isColoredType = type !== 'default' && type !== 'tertiary';
                     colorProps = {
-                        '--color': isColoredType
+                        '--n-color': isColoredType
                             ? (0, seemly_1.changeColor)(mergedTextColor, {
-                                alpha: self.colorOpacitySecondary
+                                alpha: Number(self.colorOpacitySecondary)
                             })
                             : self.colorSecondary,
-                        '--color-hover': isColoredType
+                        '--n-color-hover': isColoredType
                             ? (0, seemly_1.changeColor)(mergedTextColor, {
-                                alpha: self.colorOpacitySecondaryHover
+                                alpha: Number(self.colorOpacitySecondaryHover)
                             })
                             : self.colorSecondaryHover,
-                        '--color-pressed': isColoredType
+                        '--n-color-pressed': isColoredType
                             ? (0, seemly_1.changeColor)(mergedTextColor, {
-                                alpha: self.colorOpacitySecondaryPressed
+                                alpha: Number(self.colorOpacitySecondaryPressed)
                             })
                             : self.colorSecondaryPressed,
-                        '--color-focus': isColoredType
+                        '--n-color-focus': isColoredType
                             ? (0, seemly_1.changeColor)(mergedTextColor, {
-                                alpha: self.colorOpacitySecondaryHover
+                                alpha: Number(self.colorOpacitySecondaryHover)
                             })
                             : self.colorSecondaryHover,
-                        '--color-disabled': self.colorSecondary,
-                        '--ripple-color': '#0000',
-                        '--text-color': mergedTextColor,
-                        '--text-color-hover': mergedTextColor,
-                        '--text-color-pressed': mergedTextColor,
-                        '--text-color-focus': mergedTextColor,
-                        '--text-color-disabled': mergedTextColor
+                        '--n-color-disabled': self.colorSecondary,
+                        '--n-ripple-color': '#0000',
+                        '--n-text-color': mergedTextColor,
+                        '--n-text-color-hover': mergedTextColor,
+                        '--n-text-color-pressed': mergedTextColor,
+                        '--n-text-color-focus': mergedTextColor,
+                        '--n-text-color-disabled': mergedTextColor
                     };
                 }
                 else if (tertiary || quaternary) {
@@ -278,59 +278,59 @@ const Button = (0, vue_1.defineComponent)({
                             : self[(0, _utils_1.createKey)('color', mergedType)];
                     const mergedColor = color || typeColor;
                     if (tertiary) {
-                        colorProps['--color'] = self.colorTertiary;
-                        colorProps['--color-hover'] = self.colorTertiaryHover;
-                        colorProps['--color-pressed'] = self.colorTertiaryPressed;
-                        colorProps['--color-focus'] = self.colorSecondaryHover;
-                        colorProps['--color-disabled'] = self.colorTertiary;
+                        colorProps['--n-color'] = self.colorTertiary;
+                        colorProps['--n-color-hover'] = self.colorTertiaryHover;
+                        colorProps['--n-color-pressed'] = self.colorTertiaryPressed;
+                        colorProps['--n-color-focus'] = self.colorSecondaryHover;
+                        colorProps['--n-color-disabled'] = self.colorTertiary;
                     }
                     else {
-                        colorProps['--color'] = self.colorQuaternary;
-                        colorProps['--color-hover'] = self.colorQuaternaryHover;
-                        colorProps['--color-pressed'] = self.colorQuaternaryPressed;
-                        colorProps['--color-focus'] = self.colorQuaternaryHover;
-                        colorProps['--color-disabled'] = self.colorQuaternary;
+                        colorProps['--n-color'] = self.colorQuaternary;
+                        colorProps['--n-color-hover'] = self.colorQuaternaryHover;
+                        colorProps['--n-color-pressed'] = self.colorQuaternaryPressed;
+                        colorProps['--n-color-focus'] = self.colorQuaternaryHover;
+                        colorProps['--n-color-disabled'] = self.colorQuaternary;
                     }
-                    colorProps['--ripple-color'] = '#0000';
-                    colorProps['--text-color'] = mergedColor;
-                    colorProps['--text-color-hover'] = mergedColor;
-                    colorProps['--text-color-pressed'] = mergedColor;
-                    colorProps['--text-color-focus'] = mergedColor;
-                    colorProps['--text-color-disabled'] = mergedColor;
+                    colorProps['--n-ripple-color'] = '#0000';
+                    colorProps['--n-text-color'] = mergedColor;
+                    colorProps['--n-text-color-hover'] = mergedColor;
+                    colorProps['--n-text-color-pressed'] = mergedColor;
+                    colorProps['--n-text-color-focus'] = mergedColor;
+                    colorProps['--n-text-color-disabled'] = mergedColor;
                 }
                 else {
                     colorProps = {
-                        '--color': color || self[(0, _utils_1.createKey)('color', mergedType)],
-                        '--color-hover': color
+                        '--n-color': color || self[(0, _utils_1.createKey)('color', mergedType)],
+                        '--n-color-hover': color
                             ? (0, index_1.createHoverColor)(color)
                             : self[(0, _utils_1.createKey)('colorHover', mergedType)],
-                        '--color-pressed': color
+                        '--n-color-pressed': color
                             ? (0, index_1.createPressedColor)(color)
                             : self[(0, _utils_1.createKey)('colorPressed', mergedType)],
-                        '--color-focus': color
+                        '--n-color-focus': color
                             ? (0, index_1.createHoverColor)(color)
                             : self[(0, _utils_1.createKey)('colorFocus', mergedType)],
-                        '--color-disabled': color || self[(0, _utils_1.createKey)('colorDisabled', mergedType)],
-                        '--ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
-                        '--text-color': textColor ||
+                        '--n-color-disabled': color || self[(0, _utils_1.createKey)('colorDisabled', mergedType)],
+                        '--n-ripple-color': color || self[(0, _utils_1.createKey)('rippleColor', mergedType)],
+                        '--n-text-color': textColor ||
                             (color
                                 ? self.textColorPrimary
                                 : typeIsTertiary
                                     ? self.textColorTertiary
                                     : self[(0, _utils_1.createKey)('textColor', mergedType)]),
-                        '--text-color-hover': textColor ||
+                        '--n-text-color-hover': textColor ||
                             (color
                                 ? self.textColorHoverPrimary
                                 : self[(0, _utils_1.createKey)('textColorHover', mergedType)]),
-                        '--text-color-pressed': textColor ||
+                        '--n-text-color-pressed': textColor ||
                             (color
                                 ? self.textColorPressedPrimary
                                 : self[(0, _utils_1.createKey)('textColorPressed', mergedType)]),
-                        '--text-color-focus': textColor ||
+                        '--n-text-color-focus': textColor ||
                             (color
                                 ? self.textColorFocusPrimary
                                 : self[(0, _utils_1.createKey)('textColorFocus', mergedType)]),
-                        '--text-color-disabled': textColor ||
+                        '--n-text-color-disabled': textColor ||
                             (color
                                 ? self.textColorDisabledPrimary
                                 : self[(0, _utils_1.createKey)('textColorDisabled', mergedType)])
@@ -338,52 +338,52 @@ const Button = (0, vue_1.defineComponent)({
                 }
                 // border
                 let borderProps = {
-                    '--border': 'initial',
-                    '--border-hover': 'initial',
-                    '--border-pressed': 'initial',
-                    '--border-focus': 'initial',
-                    '--border-disabled': 'initial'
+                    '--n-border': 'initial',
+                    '--n-border-hover': 'initial',
+                    '--n-border-pressed': 'initial',
+                    '--n-border-focus': 'initial',
+                    '--n-border-disabled': 'initial'
                 };
                 if (text) {
                     borderProps = {
-                        '--border': 'none',
-                        '--border-hover': 'none',
-                        '--border-pressed': 'none',
-                        '--border-focus': 'none',
-                        '--border-disabled': 'none'
+                        '--n-border': 'none',
+                        '--n-border-hover': 'none',
+                        '--n-border-pressed': 'none',
+                        '--n-border-focus': 'none',
+                        '--n-border-disabled': 'none'
                     };
                 }
                 else {
                     borderProps = {
-                        '--border': self[(0, _utils_1.createKey)('border', mergedType)],
-                        '--border-hover': self[(0, _utils_1.createKey)('borderHover', mergedType)],
-                        '--border-pressed': self[(0, _utils_1.createKey)('borderPressed', mergedType)],
-                        '--border-focus': self[(0, _utils_1.createKey)('borderFocus', mergedType)],
-                        '--border-disabled': self[(0, _utils_1.createKey)('borderDisabled', mergedType)]
+                        '--n-border': self[(0, _utils_1.createKey)('border', mergedType)],
+                        '--n-border-hover': self[(0, _utils_1.createKey)('borderHover', mergedType)],
+                        '--n-border-pressed': self[(0, _utils_1.createKey)('borderPressed', mergedType)],
+                        '--n-border-focus': self[(0, _utils_1.createKey)('borderFocus', mergedType)],
+                        '--n-border-disabled': self[(0, _utils_1.createKey)('borderDisabled', mergedType)]
                     };
                 }
                 // size
                 const { [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('paddingRound', size)]: paddingRound, [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('borderRadius', size)]: borderRadius, [(0, _utils_1.createKey)('iconMargin', size)]: iconMargin, waveOpacity } = self;
                 const sizeProps = {
-                    '--width': circle && !text ? height : 'initial',
-                    '--height': text ? 'initial' : height,
-                    '--font-size': fontSize,
-                    '--padding': circle
+                    '--n-width': circle && !text ? height : 'initial',
+                    '--n-height': text ? 'initial' : height,
+                    '--n-font-size': fontSize,
+                    '--n-padding': circle
                         ? 'initial'
                         : text
                             ? 'initial'
                             : round
                                 ? paddingRound
                                 : padding,
-                    '--icon-size': iconSize,
-                    '--icon-margin': iconMargin,
-                    '--border-radius': text
+                    '--n-icon-size': iconSize,
+                    '--n-icon-margin': iconMargin,
+                    '--n-border-radius': text
                         ? 'initial'
                         : circle || round
                             ? height
                             : borderRadius
                 };
-                return Object.assign(Object.assign(Object.assign(Object.assign({ '--bezier': cubicBezierEaseInOut, '--bezier-ease-out': cubicBezierEaseOut, '--ripple-duration': rippleDuration, '--opacity-disabled': opacityDisabled, '--wave-opacity': waveOpacity }, fontProps), colorProps), borderProps), sizeProps);
+                return Object.assign(Object.assign(Object.assign(Object.assign({ '--n-bezier': cubicBezierEaseInOut, '--n-bezier-ease-out': cubicBezierEaseOut, '--n-ripple-duration': rippleDuration, '--n-opacity-disabled': opacityDisabled, '--n-wave-opacity': waveOpacity }, fontProps), colorProps), borderProps), sizeProps);
             })
         };
     },
@@ -400,9 +400,10 @@ const Button = (0, vue_1.defineComponent)({
                 !this.text && this.dashed && `${mergedClsPrefix}-button--dashed`,
                 this.color && `${mergedClsPrefix}-button--color`,
                 this.secondary && `${mergedClsPrefix}-button--secondary`,
+                this.loading && `${mergedClsPrefix}-button--loading`,
                 this.ghost && `${mergedClsPrefix}-button--ghost` // required for button group border collapse
             ], tabindex: this.mergedFocusable ? 0 : -1, type: this.attrType, style: this.cssVars, disabled: this.disabled, onClick: this.handleClick, onBlur: this.handleBlur, onMousedown: this.handleMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown },
-            $slots.default && this.iconPlacement === 'right' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
+            $slots.default && this.iconPlacement === 'right' ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
             (0, vue_1.h)(_internal_1.NFadeInExpandTransition, { width: true }, {
                 default: () => $slots.icon || this.loading ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-button__icon`, style: {
                         margin: !$slots.default ? 0 : ''

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

@@ -15,50 +15,51 @@ const cssr_1 = require("../../../_utils/cssr");
 const fade_in_width_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-width-expand.cssr"));
 
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr")); // vars:
-// --bezier
-// --ripple-duration
-// --opacity-disabled
-// --text-color
-// --text-color-hover
-// --text-color-pressed
-// --text-color-focus
-// --text-color-disabled
-// --color
-// --color-hover
-// --color-pressed
-// --color-focus
-// --color-disabled
-// --border
-// --border-hover
-// --border-pressed
-// --border-focus
-// --border-disabled
-// --ripple-color
-// --border-radius
-// --height
-// --width
-// --font-size
-// --padding
-// --icon-size
-// --icon-margin
-// --wave-opacity
-// --font-weight
+// --n-bezier
+// --n-bezier-ease-out
+// --n-ripple-duration
+// --n-opacity-disabled
+// --n-text-color
+// --n-text-color-hover
+// --n-text-color-pressed
+// --n-text-color-focus
+// --n-text-color-disabled
+// --n-color
+// --n-color-hover
+// --n-color-pressed
+// --n-color-focus
+// --n-color-disabled
+// --n-border
+// --n-border-hover
+// --n-border-pressed
+// --n-border-focus
+// --n-border-disabled
+// --n-ripple-color
+// --n-border-radius
+// --n-height
+// --n-width
+// --n-font-size
+// --n-padding
+// --n-icon-size
+// --n-icon-margin
+// --n-wave-opacity
+// --n-font-weight
 //
 // private-vars:
-// --border-color-xxx, used for custom color
+// --n-border-color-xxx, used for custom color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
- font-weight: var(--font-weight);
+ font-weight: var(--n-font-weight);
  line-height: 1;
  font-family: inherit;
- padding: var(--padding);
- height: var(--height);
- font-size: var(--font-size);
- border-radius: var(--border-radius);
- color: var(--text-color);
- background-color: var(--color);
- width: var(--width);
+ padding: var(--n-padding);
+ height: var(--n-height);
+ font-size: var(--n-font-size);
+ border-radius: var(--n-border-radius);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
+ width: var(--n-width);
  white-space: nowrap;
  outline: none;
  position: relative;
@@ -74,56 +75,58 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  cursor: pointer;
  text-decoration: none;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- opacity .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('color', [(0, cssr_1.cE)('border', {
-  borderColor: 'var(--border-color)'
+  borderColor: 'var(--n-border-color)'
 }), (0, cssr_1.cM)('disabled', [(0, cssr_1.cE)('border', {
-  borderColor: 'var(--border-color-disabled)'
+  borderColor: 'var(--n-border-color-disabled)'
 })]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:focus', [(0, cssr_1.cE)('state-border', {
-  borderColor: 'var(--border-color-focus)'
+  borderColor: 'var(--n-border-color-focus)'
 })]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', {
-  borderColor: 'var(--border-color-hover)'
+  borderColor: 'var(--n-border-color-hover)'
 })]), (0, cssr_1.c)('&:active', [(0, cssr_1.cE)('state-border', {
-  borderColor: 'var(--border-color-pressed)'
+  borderColor: 'var(--n-border-color-pressed)'
 })]), (0, cssr_1.cM)('pressed', [(0, cssr_1.cE)('state-border', {
-  borderColor: 'var(--border-color-pressed)'
+  borderColor: 'var(--n-border-color-pressed)'
 })])])]), (0, cssr_1.cM)('disabled', {
-  backgroundColor: 'var(--color-disabled)',
-  color: 'var(--text-color-disabled)'
+  backgroundColor: 'var(--n-color-disabled)',
+  color: 'var(--n-text-color-disabled)'
 }, [(0, cssr_1.cE)('border', {
-  border: 'var(--border-disabled)'
+  border: 'var(--n-border-disabled)'
 })]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:focus', {
-  backgroundColor: 'var(--color-focus)',
-  color: 'var(--text-color-focus)'
+  backgroundColor: 'var(--n-color-focus)',
+  color: 'var(--n-text-color-focus)'
 }, [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-focus)'
+  border: 'var(--n-border-focus)'
 })]), (0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--color-hover)',
-  color: 'var(--text-color-hover)'
+  backgroundColor: 'var(--n-color-hover)',
+  color: 'var(--n-text-color-hover)'
 }, [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-hover)'
+  border: 'var(--n-border-hover)'
 })]), (0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--color-pressed)',
-  color: 'var(--text-color-pressed)'
+  backgroundColor: 'var(--n-color-pressed)',
+  color: 'var(--n-text-color-pressed)'
 }, [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-pressed)'
+  border: 'var(--n-border-pressed)'
 })]), (0, cssr_1.cM)('pressed', {
-  backgroundColor: 'var(--color-pressed)',
-  color: 'var(--text-color-pressed)'
+  backgroundColor: 'var(--n-color-pressed)',
+  color: 'var(--n-text-color-pressed)'
 }, [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-pressed)'
-})])]), (0, cssr_1.cB)('base-wave', `
+  border: 'var(--n-border-pressed)'
+})])]), (0, cssr_1.cM)('loading', {
+  'pointer-events': 'none'
+}), (0, cssr_1.cB)('base-wave', `
  pointer-events: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation-iteration-count: 1;
- animation-duration: var(--ripple-duration);
- animation-timing-function: var(--bezier-ease-out), var(--bezier-ease-out);
+ animation-duration: var(--n-ripple-duration);
+ animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out);
  `, [(0, cssr_1.cM)('active', {
   zIndex: 1,
   animationName: 'button-wave-spread, button-wave-opacity'
@@ -136,26 +139,26 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  right: 0;
  bottom: 0;
  border-radius: inherit;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  pointer-events: none;
  `), (0, cssr_1.cE)('border', {
-  border: 'var(--border)'
+  border: 'var(--n-border)'
 }), (0, cssr_1.cE)('state-border', {
-  border: 'var(--border)',
+  border: 'var(--n-border)',
   borderColor: '#0000',
   zIndex: 1
 }), (0, cssr_1.cE)('icon', `
- margin: var(--icon-margin);
+ margin: var(--n-icon-margin);
  margin-left: 0;
- height: var(--icon-size);
- width: var(--icon-size);
- max-width: var(--icon-size);
- font-size: var(--icon-size);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
+ max-width: var(--n-icon-size);
+ font-size: var(--n-icon-size);
  position: relative;
  flex-shrink: 0;
  `, [(0, cssr_1.cB)('icon-slot', `
- height: var(--icon-size);
- width: var(--icon-size);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
  position: absolute;
  left: 0;
  top: 50%;
@@ -169,7 +172,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  align-items: center;
  flex-wrap: nowrap;
  `, [(0, cssr_1.c)('~', [(0, cssr_1.cE)('icon', {
-  margin: 'var(--icon-margin)',
+  margin: 'var(--n-icon-margin)',
   marginRight: 0
 })])]), (0, cssr_1.cM)('block', `
  display: flex;
@@ -178,18 +181,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
   borderStyle: 'dashed !important'
 })]), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed',
-  opacity: 'var(--opacity-disabled)'
+  opacity: 'var(--n-opacity-disabled)'
 })]), (0, cssr_1.c)('@keyframes button-wave-spread', {
   from: {
-    boxShadow: '0 0 0.5px 0 var(--ripple-color)'
+    boxShadow: '0 0 0.5px 0 var(--n-ripple-color)'
   },
   to: {
     // don't use exact 5px since chrome will display the animation with glitches
-    boxShadow: '0 0 0.5px 4.5px var(--ripple-color)'
+    boxShadow: '0 0 0.5px 4.5px var(--n-ripple-color)'
   }
 }), (0, cssr_1.c)('@keyframes button-wave-opacity', {
   from: {
-    opacity: 'var(--wave-opacity)'
+    opacity: 'var(--n-wave-opacity)'
   },
   to: {
     opacity: 0

package/lib/button/styles/dark.js

@@ -8,9 +8,9 @@ const buttonDark = {
     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;
+        commonSelf.colorOpacitySecondary = '0.16';
+        commonSelf.colorOpacitySecondaryHover = '0.2';
+        commonSelf.colorOpacitySecondaryPressed = '0.12';
         return commonSelf;
     }
 };

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

@@ -14,9 +14,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     fontSizeMedium: string;
     fontSizeLarge: string;
     opacityDisabled: string;
-    colorOpacitySecondary: number;
-    colorOpacitySecondaryHover: number;
-    colorOpacitySecondaryPressed: number;
+    colorOpacitySecondary: string;
+    colorOpacitySecondaryHover: string;
+    colorOpacitySecondaryPressed: string;
     colorSecondary: string;
     colorSecondaryHover: string;
     colorSecondaryPressed: string;

package/lib/button/styles/light.js

@@ -13,7 +13,7 @@ const self = (vars) => {
         heightMedium,
         heightLarge, borderRadiusTiny: borderRadius, borderRadiusSmall: borderRadius, borderRadiusMedium: borderRadius, borderRadiusLarge: borderRadius, fontSizeTiny: fontSizeTiny, fontSizeSmall: fontSizeSmall, fontSizeMedium: fontSizeMedium, fontSizeLarge: fontSizeLarge, opacityDisabled: opacityDisabled, 
         // secondary
-        colorOpacitySecondary: 0.16, colorOpacitySecondaryHover: 0.2, colorOpacitySecondaryPressed: 0.24, colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, 
+        colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.22', colorOpacitySecondaryPressed: '0.28', colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, 
         // tertiary
         colorTertiary: buttonColor2, colorTertiaryHover: buttonColor2Hover, colorTertiaryPressed: buttonColor2Pressed, 
         // quaternary