naive-ui 2.22.0 → 2.24.0

package/es/progress/src/Line.d.ts

@@ -54,10 +54,10 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     clsPrefix: string;
     processing: boolean;
+    unit: string;
     percentage: number;
     status: Status;
     indicatorPlacement: "inside" | "outside";
-    unit: string;
     showIndicator: boolean;
 } & {
     height?: string | number | undefined;
@@ -68,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     fillBorderRadius?: string | number | undefined;
     railStyle?: string | CSSProperties | undefined;
 }>, {
-    percentage: number;
     unit: string;
+    percentage: number;
 }>;
 export default _default;

package/es/progress/src/Line.js

@@ -98,8 +98,11 @@ export default defineComponent({
                                     maxWidth: `${props.percentage}%`,
                                     backgroundColor: fillColor,
                                     height: styleHeightRef.value,
+                                    lineHeight: styleHeightRef.value,
                                     borderRadius: styleFillBorderRadiusRef.value
-                                } }, indicatorPlacement === 'inside' ? (h("div", { class: `${clsPrefix}-progress-graph-line-indicator` }, `${percentage}${unit}`)) : null)))),
+                                } }, indicatorPlacement === 'inside' ? (h("div", { class: `${clsPrefix}-progress-graph-line-indicator` },
+                                percentage,
+                                unit)) : null)))),
                 showIndicator && indicatorPlacement === 'outside' ? (h("div", null, slots.default ? (h("div", { class: `${clsPrefix}-progress-custom-content`, style: {
                         color: indicatorTextColor
                     }, role: "none" }, slots.default())) : status === 'default' ? (h("div", { role: "none", class: `${clsPrefix}-progress-icon ${clsPrefix}-progress-icon--as-text`, style: {

package/es/progress/src/Progress.d.ts

@@ -47,6 +47,7 @@ declare const progressProps: {
     readonly height: NumberConstructor;
     readonly borderRadius: PropType<string | number>;
     readonly fillBorderRadius: PropType<string | number>;
+    readonly offsetDegree: NumberConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Progress", {
         fontSize: string;
         fontSizeCircle: string;
@@ -164,6 +165,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly height: NumberConstructor;
     readonly borderRadius: PropType<string | number>;
     readonly fillBorderRadius: PropType<string | number>;
+    readonly offsetDegree: NumberConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Progress", {
         fontSize: string;
         fontSizeCircle: string;
@@ -237,20 +239,20 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedIndicatorPlacement: import("vue").ComputedRef<"inside" | "outside">;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--fill-color': string;
-        '--font-size': string;
-        '--font-size-circle': string;
-        '--font-weight-circle': string;
-        '--icon-color': string;
-        '--icon-size-circle': string;
-        '--icon-size-line': string;
-        '--line-bg-processing': string;
-        '--rail-color': string;
-        '--rail-height': string;
-        '--text-color-circle': string;
-        '--text-color-line-inner': string;
-        '--text-color-line-outer': string;
+        '--n-bezier': string;
+        '--n-fill-color': string;
+        '--n-font-size': string;
+        '--n-font-size-circle': string;
+        '--n-font-weight-circle': string;
+        '--n-icon-color': string;
+        '--n-icon-size-circle': string;
+        '--n-icon-size-line': string;
+        '--n-line-bg-processing': string;
+        '--n-rail-color': string;
+        '--n-rail-height': string;
+        '--n-text-color-circle': string;
+        '--n-text-color-line-inner': string;
+        '--n-text-color-line-outer': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly processing?: unknown;
@@ -271,6 +273,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly height?: unknown;
     readonly borderRadius?: unknown;
     readonly fillBorderRadius?: unknown;
+    readonly offsetDegree?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -278,9 +281,9 @@ declare const _default: import("vue").DefineComponent<{
     type: "circle" | "line" | "multiple-circle";
     strokeWidth: number;
     processing: boolean;
+    unit: string;
     status: Status;
     indicatorPlacement: "inside" | "outside";
-    unit: string;
     showIndicator: boolean;
     viewBoxWidth: number;
     circleGap: number;
@@ -363,13 +366,14 @@ declare const _default: import("vue").DefineComponent<{
     percentage?: number | number[] | undefined;
     fillBorderRadius?: string | number | undefined;
     railStyle?: string | CSSProperties | (string | CSSProperties)[] | undefined;
+    offsetDegree?: number | undefined;
 }>, {
     type: "circle" | "line" | "multiple-circle";
     strokeWidth: number;
     processing: boolean;
+    unit: string;
     status: Status;
     indicatorPlacement: "inside" | "outside";
-    unit: string;
     showIndicator: boolean;
     viewBoxWidth: number;
     circleGap: number;

package/es/progress/src/Progress.js

@@ -33,7 +33,7 @@ const progressProps = Object.assign(Object.assign({}, useTheme.props), { process
     }, indicatorTextColor: String, circleGap: {
         type: Number,
         default: 1
-    }, height: Number, borderRadius: [String, Number], fillBorderRadius: [String, Number] });
+    }, height: Number, borderRadius: [String, Number], fillBorderRadius: [String, Number], offsetDegree: Number });
 export default defineComponent({
     name: 'Progress',
     props: progressProps,
@@ -50,20 +50,20 @@ export default defineComponent({
                 const { status } = props;
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, fontSizeCircle, railColor, railHeight, iconSizeCircle, iconSizeLine, textColorCircle, textColorLineInner, textColorLineOuter, lineBgProcessing, fontWeightCircle, [createKey('iconColor', status)]: iconColor, [createKey('fillColor', status)]: fillColor } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--fill-color': fillColor,
-                    '--font-size': fontSize,
-                    '--font-size-circle': fontSizeCircle,
-                    '--font-weight-circle': fontWeightCircle,
-                    '--icon-color': iconColor,
-                    '--icon-size-circle': iconSizeCircle,
-                    '--icon-size-line': iconSizeLine,
-                    '--line-bg-processing': lineBgProcessing,
-                    '--rail-color': railColor,
-                    '--rail-height': railHeight,
-                    '--text-color-circle': textColorCircle,
-                    '--text-color-line-inner': textColorLineInner,
-                    '--text-color-line-outer': textColorLineOuter
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-fill-color': fillColor,
+                    '--n-font-size': fontSize,
+                    '--n-font-size-circle': fontSizeCircle,
+                    '--n-font-weight-circle': fontWeightCircle,
+                    '--n-icon-color': iconColor,
+                    '--n-icon-size-circle': iconSizeCircle,
+                    '--n-icon-size-line': iconSizeLine,
+                    '--n-line-bg-processing': lineBgProcessing,
+                    '--n-rail-color': railColor,
+                    '--n-rail-height': railHeight,
+                    '--n-text-color-circle': textColorCircle,
+                    '--n-text-color-line-inner': textColorLineInner,
+                    '--n-text-color-line-outer': textColorLineOuter
                 };
             })
         };
@@ -75,6 +75,6 @@ export default defineComponent({
                 `${mergedClsPrefix}-progress`,
                 `${mergedClsPrefix}-progress--${type}`,
                 `${mergedClsPrefix}-progress--${status}`
-            ], style: cssVars, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percentage, role: type === 'circle' || type === 'line' ? 'progressbar' : 'none' }, type === 'circle' ? (h(Circle, { clsPrefix: mergedClsPrefix, status: status, showIndicator: showIndicator, indicatorTextColor: indicatorTextColor, railColor: railColor, fillColor: color, railStyle: railStyle, percentage: percentage, viewBoxWidth: viewBoxWidth, strokeWidth: strokeWidth, unit: unit }, $slots)) : type === 'line' ? (h(Line, { clsPrefix: mergedClsPrefix, status: status, showIndicator: showIndicator, indicatorTextColor: indicatorTextColor, railColor: railColor, fillColor: color, railStyle: railStyle, percentage: percentage, processing: processing, indicatorPlacement: mergedIndicatorPlacement, unit: unit, fillBorderRadius: fillBorderRadius, railBorderRadius: borderRadius, height: height }, $slots)) : type === 'multiple-circle' ? (h(MultipleCircle, { clsPrefix: mergedClsPrefix, strokeWidth: strokeWidth, railColor: railColor, fillColor: color, railStyle: railStyle, viewBoxWidth: viewBoxWidth, percentage: percentage, showIndicator: showIndicator, circleGap: circleGap }, $slots)) : null));
+            ], style: cssVars, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": percentage, role: type === 'circle' || type === 'line' ? 'progressbar' : 'none' }, type === 'circle' ? (h(Circle, { clsPrefix: mergedClsPrefix, status: status, showIndicator: showIndicator, indicatorTextColor: indicatorTextColor, railColor: railColor, fillColor: color, railStyle: railStyle, offsetDegree: this.offsetDegree, percentage: percentage, viewBoxWidth: viewBoxWidth, strokeWidth: strokeWidth, unit: unit }, $slots)) : type === 'line' ? (h(Line, { clsPrefix: mergedClsPrefix, status: status, showIndicator: showIndicator, indicatorTextColor: indicatorTextColor, railColor: railColor, fillColor: color, railStyle: railStyle, percentage: percentage, processing: processing, indicatorPlacement: mergedIndicatorPlacement, unit: unit, fillBorderRadius: fillBorderRadius, railBorderRadius: borderRadius, height: height }, $slots)) : type === 'multiple-circle' ? (h(MultipleCircle, { clsPrefix: mergedClsPrefix, strokeWidth: strokeWidth, railColor: railColor, fillColor: color, railStyle: railStyle, viewBoxWidth: viewBoxWidth, percentage: percentage, showIndicator: showIndicator, circleGap: circleGap }, $slots)) : null));
     }
 });

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

@@ -1,24 +1,24 @@
 import { c, cB, cM } from '../../../_utils/cssr'; // vars
-// --bezier
-// --fill-color
-// --font-size
-// --font-size-circle
-// --font-weight-circle
-// --icon-color
-// --icon-size-circle
-// --icon-size-line
-// --line-bg-processing
-// --rail-color
-// --rail-height
-// --text-color-circle
-// --text-color-line-inner
-// --text-color-line-outer
+// --n-bezier
+// --n-fill-color
+// --n-font-size
+// --n-font-size-circle
+// --n-font-weight-circle
+// --n-icon-color
+// --n-icon-size-circle
+// --n-icon-size-line
+// --n-line-bg-processing
+// --n-rail-color
+// --n-rail-height
+// --n-text-color-circle
+// --n-text-color-line-inner
+// --n-text-color-line-outer
 
 export default c([cB('progress', {
   display: 'inline-block'
 }, [cB('progress-icon', `
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  `), cM('line', `
  width: 100%;
  display: block;
@@ -32,16 +32,16 @@ export default c([cB('progress', {
 }), cB('progress-icon', `
  width: 30px;
  padding-left: 14px;
- height: var(--icon-size-line);
- line-height: var(--icon-size-line);
- font-size: var(--icon-size-line);
+ height: var(--n-icon-size-line);
+ line-height: var(--n-icon-size-line);
+ font-size: var(--n-icon-size-line);
  `, [cM('as-text', `
- color: var(--text-color-line-outer);
+ color: var(--n-text-color-line-outer);
  text-align: center;
  width: 40px;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  padding-left: 4px;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `)])]), cM('circle', {
   width: '120px'
 }, [cB('progress-custom-content', `
@@ -60,10 +60,10 @@ export default c([cB('progress', {
  display: flex;
  align-items: center;
  color: inherit;
- font-size: var(--font-size-circle);
- color: var(--text-color-circle);
- font-weight: var(--font-weight-circle);
- transition: color .3s var(--bezier);
+ font-size: var(--n-font-size-circle);
+ color: var(--n-text-color-circle);
+ font-weight: var(--n-font-weight-circle);
+ transition: color .3s var(--n-bezier);
  white-space: nowrap;
  `), cB('progress-icon', `
  position: absolute;
@@ -72,14 +72,14 @@ export default c([cB('progress', {
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  align-items: center;
- color: var(--icon-color);
- font-size: var(--icon-size-circle);
- `)]), cM('multiple-circle', {
-  width: '200px',
-  color: 'inherit'
-}, [cB('progress-text', `
- font-weight: var(--font-weight-circle);
- color: var(--text-color-circle);
+ color: var(--n-icon-color);
+ font-size: var(--n-icon-size-circle);
+ `)]), cM('multiple-circle', `
+ width: 200px;
+ color: inherit;
+ `, [cB('progress-text', `
+ font-weight: var(--n-font-weight-circle);
+ color: var(--n-text-color-circle);
  position: absolute;
  left: 50%;
  top: 50%;
@@ -87,7 +87,7 @@ export default c([cB('progress', {
  display: flex;
  align-items: center;
  justify-content: center;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `)]), cB('progress-content', {
   position: 'relative'
 }), cB('progress-graph', {
@@ -95,43 +95,43 @@ export default c([cB('progress', {
 }, [cB('progress-graph-circle', [c('svg', {
   verticalAlign: 'bottom'
 }), cB('progress-graph-circle-fill', `
- stroke: var(--fill-color);
+ stroke: var(--n-fill-color);
  transition:
- opacity .3s var(--bezier),
- stroke .3s var(--bezier),
- stroke-dasharray .3s var(--bezier);
+ opacity .3s var(--n-bezier),
+ stroke .3s var(--n-bezier),
+ stroke-dasharray .3s var(--n-bezier);
  `, [cM('empty', {
   opacity: 0
 })]), cB('progress-graph-circle-rail', `
- transition: stroke .3s var(--bezier);
+ transition: stroke .3s var(--n-bezier);
  overflow: hidden;
- stroke: var(--rail-color);
- `)]), cB('progress-graph-line', [cM('indicator-inside', [cB('progress-graph-line-rail', {
-  height: '16px',
-  borderRadius: '10px'
-}, [cB('progress-graph-line-fill', {
-  height: 'inherit',
-  borderRadius: '10px'
-}), cB('progress-graph-line-indicator', `
+ stroke: var(--n-rail-color);
+ `)]), cB('progress-graph-line', [cM('indicator-inside', [cB('progress-graph-line-rail', `
+ height: 16px;
+ line-height: 16px;
+ border-radius: 10px;
+ `, [cB('progress-graph-line-fill', `
+ height: inherit;
+ border-radius: 10px;
+ `), cB('progress-graph-line-indicator', `
  background: #0000;
  white-space: nowrap;
  text-align: right;
  margin-left: 14px;
  margin-right: 14px;
  height: inherit;
- line-height: 16px;
  font-size: 12px;
- color: var(--text-color-line-inner);
- transition: color .3s var(--bezier);
+ color: var(--n-text-color-line-inner);
+ transition: color .3s var(--n-bezier);
  `)])]), cM('indicator-inside-label', `
  height: 16px;
  display: flex;
  align-items: center;
- `, [cB('progress-graph-line-rail', {
-  flex: 1,
-  transition: 'background-color .3s var(--bezier)'
-}), cB('progress-graph-line-indicator', `
- background: var(--fill-color);
+ `, [cB('progress-graph-line-rail', `
+ flex: 1;
+ transition: background-color .3s var(--n-bezier);
+ `), cB('progress-graph-line-indicator', `
+ background: var(--n-fill-color);
  font-size: 12px;
  transform: translateZ(0);
  display: flex;
@@ -142,32 +142,32 @@ export default c([cB('progress', {
  border-radius: 10px;
  position: absolute;
  white-space: nowrap;
- color: var(--text-color-line-inner);
+ color: var(--n-text-color-line-inner);
  transition:
- right .2s var(--bezier),
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ right .2s var(--n-bezier),
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `)]), cB('progress-graph-line-rail', `
  position: relative;
  overflow: hidden;
- height: var(--rail-height);
+ height: var(--n-rail-height);
  border-radius: 5px;
- background-color: var(--rail-color);
- transition: background-color .3s var(--bezier);
+ background-color: var(--n-rail-color);
+ transition: background-color .3s var(--n-bezier);
  `, [cB('progress-graph-line-fill', `
- background: var(--fill-color);
+ background: var(--n-fill-color);
  position: relative;
  border-radius: 5px;
  height: inherit;
  width: 100%;
  max-width: 0%;
  transition:
- background-color .3s var(--bezier),
- max-width .2s var(--bezier);
+ background-color .3s var(--n-bezier),
+ max-width .2s var(--n-bezier);
  `, [cM('processing', [c('&::after', `
  content: "";
- background-image: var(--line-bg-processing);
- animation: progress-processing-animation 2s var(--bezier) infinite;
+ background-image: var(--n-line-bg-processing);
+ animation: progress-processing-animation 2s var(--n-bezier) infinite;
  `)])])])])])]), c('@keyframes progress-processing-animation', `
  0% {
  position: absolute;

package/es/radio/src/Radio.d.ts

@@ -134,21 +134,21 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, import("./use-radio").UseRadio & {
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--box-shadow': string;
-        '--box-shadow-active': string;
-        '--box-shadow-disabled': string;
-        '--box-shadow-focus': string;
-        '--box-shadow-hover': string;
-        '--color': string;
-        '--color-disabled': string;
-        '--dot-color-active': string;
-        '--dot-color-disabled': string;
-        '--font-size': string;
-        '--radio-size': string;
-        '--text-color': string;
-        '--text-color-disabled': string;
-        '--label-padding': string;
+        '--n-bezier': string;
+        '--n-box-shadow': string;
+        '--n-box-shadow-active': string;
+        '--n-box-shadow-disabled': string;
+        '--n-box-shadow-focus': string;
+        '--n-box-shadow-hover': string;
+        '--n-color': string;
+        '--n-color-disabled': string;
+        '--n-dot-color-active': string;
+        '--n-dot-color-disabled': string;
+        '--n-font-size': string;
+        '--n-radio-size': string;
+        '--n-text-color': string;
+        '--n-text-color-disabled': string;
+        '--n-label-padding': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     name?: unknown;

package/es/radio/src/Radio.js

@@ -15,21 +15,21 @@ export default defineComponent({
                 const { mergedSize: { value: size } } = radio;
                 const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, [createKey('fontSize', size)]: fontSize, [createKey('radioSize', size)]: radioSize } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--box-shadow': boxShadow,
-                    '--box-shadow-active': boxShadowActive,
-                    '--box-shadow-disabled': boxShadowDisabled,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--box-shadow-hover': boxShadowHover,
-                    '--color': color,
-                    '--color-disabled': colorDisabled,
-                    '--dot-color-active': dotColorActive,
-                    '--dot-color-disabled': dotColorDisabled,
-                    '--font-size': fontSize,
-                    '--radio-size': radioSize,
-                    '--text-color': textColor,
-                    '--text-color-disabled': textColorDisabled,
-                    '--label-padding': labelPadding
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-box-shadow': boxShadow,
+                    '--n-box-shadow-active': boxShadowActive,
+                    '--n-box-shadow-disabled': boxShadowDisabled,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-box-shadow-hover': boxShadowHover,
+                    '--n-color': color,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-dot-color-active': dotColorActive,
+                    '--n-dot-color-disabled': dotColorDisabled,
+                    '--n-font-size': fontSize,
+                    '--n-radio-size': radioSize,
+                    '--n-text-color': textColor,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-label-padding': labelPadding
                 };
             })
         });

package/es/radio/src/RadioGroup.d.ts

@@ -254,20 +254,20 @@ declare const _default: import("vue").DefineComponent<{
     handleFocusout: (e: FocusEvent) => void;
     handleFocusin: (e: FocusEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--bezier': string;
-        '--button-border-color': string;
-        '--button-border-color-active': string;
-        '--button-border-radius': string;
-        '--button-box-shadow': string;
-        '--button-box-shadow-focus': string;
-        '--button-box-shadow-hover': string;
-        '--button-color-active': string;
-        '--button-text-color': string;
-        '--button-text-color-hover': string;
-        '--button-text-color-active': string;
-        '--height': string;
-        '--opacity-disabled': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-button-border-color': string;
+        '--n-button-border-color-active': string;
+        '--n-button-border-radius': string;
+        '--n-button-box-shadow': string;
+        '--n-button-box-shadow-focus': string;
+        '--n-button-box-shadow-hover': string;
+        '--n-button-color-active': string;
+        '--n-button-text-color': string;
+        '--n-button-text-color-hover': string;
+        '--n-button-text-color-active': string;
+        '--n-height': string;
+        '--n-opacity-disabled': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly name?: unknown;

package/es/radio/src/RadioGroup.js

@@ -126,20 +126,20 @@ export default defineComponent({
                 const { value: size } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut }, self: { buttonBorderColor, buttonBorderColorActive, buttonBorderRadius, buttonBoxShadow, buttonBoxShadowFocus, buttonBoxShadowHover, buttonColorActive, buttonTextColor, buttonTextColorActive, buttonTextColorHover, opacityDisabled, [createKey('buttonHeight', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--button-border-color': buttonBorderColor,
-                    '--button-border-color-active': buttonBorderColorActive,
-                    '--button-border-radius': buttonBorderRadius,
-                    '--button-box-shadow': buttonBoxShadow,
-                    '--button-box-shadow-focus': buttonBoxShadowFocus,
-                    '--button-box-shadow-hover': buttonBoxShadowHover,
-                    '--button-color-active': buttonColorActive,
-                    '--button-text-color': buttonTextColor,
-                    '--button-text-color-hover': buttonTextColorHover,
-                    '--button-text-color-active': buttonTextColorActive,
-                    '--height': height,
-                    '--opacity-disabled': opacityDisabled
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-button-border-color': buttonBorderColor,
+                    '--n-button-border-color-active': buttonBorderColorActive,
+                    '--n-button-border-radius': buttonBorderRadius,
+                    '--n-button-box-shadow': buttonBoxShadow,
+                    '--n-button-box-shadow-focus': buttonBoxShadowFocus,
+                    '--n-button-box-shadow-hover': buttonBoxShadowHover,
+                    '--n-button-color-active': buttonColorActive,
+                    '--n-button-text-color': buttonTextColor,
+                    '--n-button-text-color-hover': buttonTextColorHover,
+                    '--n-button-text-color-active': buttonTextColorActive,
+                    '--n-height': height,
+                    '--n-opacity-disabled': opacityDisabled
                 };
             })
         };