naive-ui 2.23.1 → 2.23.2

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

@@ -5,72 +5,72 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --item-font-size
-// --select-width
-// --input-width
-// --input-margin
-// --item-size
-// --item-text-color
-// --item-text-color-disabled
-// --item-text-color-hover
-// --item-text-color-active
-// --item-color
-// --item-color-hover
-// --item-color-disabled
-// --item-color-active
-// --item-color-active-hover
-// --item-border
-// --item-border-hover
-// --item-border-disabled
-// --item-border-active
-// --item-padding
-// --item-font-size
-// --item-border-radius
-// --bezier
-// --jumper-font-size
-// --jumper-text-color
-// --jumper-text-color-disabled
-// --item-margin
-// --button-icon-size
-// --button-icon-color
-// --button-icon-color-hover
-// --button-icon-color-pressed
-// --prefix-margin
-// --suffix-margin
-// --button-color
-// --button-color-hover
-// --button-color-pressed
+// --n-item-font-size
+// --n-select-width
+// --n-input-width
+// --n-input-margin
+// --n-item-size
+// --n-item-text-color
+// --n-item-text-color-disabled
+// --n-item-text-color-hover
+// --n-item-text-color-active
+// --n-item-color
+// --n-item-color-hover
+// --n-item-color-disabled
+// --n-item-color-active
+// --n-item-color-active-hover
+// --n-item-border
+// --n-item-border-hover
+// --n-item-border-disabled
+// --n-item-border-active
+// --n-item-padding
+// --n-item-font-size
+// --n-item-border-radius
+// --n-bezier
+// --n-jumper-font-size
+// --n-jumper-text-color
+// --n-jumper-text-color-disabled
+// --n-item-margin
+// --n-button-icon-size
+// --n-button-icon-color
+// --n-button-icon-color-hover
+// --n-button-icon-color-pressed
+// --n-prefix-margin
+// --n-suffix-margin
+// --n-button-color
+// --n-button-color-hover
+// --n-button-color-pressed
 
 
 exports.default = (0, cssr_1.cB)('pagination', `
  display: flex;
  vertical-align: middle;
- font-size: var(--item-font-size);
+ font-size: var(--n-item-font-size);
  flex-wrap: nowrap;
 `, [(0, cssr_1.cB)('pagination-prefix', `
  display: flex;
  align-items: center;
- margin: var(--prefix-margin);
+ margin: var(--n-prefix-margin);
  `), (0, cssr_1.cB)('pagination-suffix', `
  display: flex;
  align-items: center;
- margin: var(--suffix-margin);
+ margin: var(--n-suffix-margin);
  `), (0, cssr_1.c)('> *:not(:first-child)', {
-  margin: 'var(--item-margin)'
+  margin: 'var(--n-item-margin)'
 }), (0, cssr_1.cB)('select', {
-  width: 'var(--select-width)'
+  width: 'var(--n-select-width)'
 }), (0, cssr_1.c)('&.transition-disabled', [(0, cssr_1.cB)('pagination-item', {
   transition: 'none!important'
 })]), (0, cssr_1.cB)('pagination-quick-jumper', `
  white-space: nowrap;
  display: flex;
- color: var(--jumper-text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-jumper-text-color);
+ transition: color .3s var(--n-bezier);
  align-items: center;
- font-size: var(--jumter-font-size);
+ font-size: var(--n-jumter-font-size);
  `, [(0, cssr_1.cB)('input', `
- margin: var(--input-margin);
- width: var(--input-width);
+ margin: var(--n-input-margin);
+ width: var(--n-input-width);
  `)]), (0, cssr_1.cB)('pagination-item', `
  position: relative;
  cursor: pointer;
@@ -79,55 +79,55 @@ exports.default = (0, cssr_1.cB)('pagination', `
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
- min-width: var(--item-size);
- height: var(--item-size);
- padding: var(--item-padding);
- background-color: var(--item-color);
- color: var(--item-text-color);
- border-radius: var(--item-border-radius);
- border: var(--item-border);
- fill: var(--button-icon-color);
+ min-width: var(--n-item-size);
+ height: var(--n-item-size);
+ padding: var(--n-item-padding);
+ background-color: var(--n-item-color);
+ color: var(--n-item-text-color);
+ border-radius: var(--n-item-border-radius);
+ border: var(--n-item-border);
+ fill: var(--n-button-icon-color);
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier),
- background-color .3s var(--bezier),
- fill .3s var(--bezier);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ fill .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('button', `
- background: var(--button-color);
- color: var(--button-icon-color);
- border: var(--button-border);
+ background: var(--n-button-color);
+ color: var(--n-button-icon-color);
+ border: var(--n-button-border);
  `, [(0, cssr_1.cB)('base-icon', `
- font-size: var(--button-icon-size);
+ font-size: var(--n-button-icon-size);
  `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  background: 'var(--item-color-hover)',
-  color: 'var(--item-text-color-hover)',
-  border: 'var(--item-border-hover)'
+  background: 'var(--n-item-color-hover)',
+  color: 'var(--n-item-text-color-hover)',
+  border: 'var(--n-item-border-hover)'
 }, [(0, cssr_1.cM)('button', {
-  background: 'var(--button-color-hover)',
-  border: 'var(--button-border-hover)',
-  color: 'var(--button-icon-color-hover)'
+  background: 'var(--n-button-color-hover)',
+  border: 'var(--n-button-border-hover)',
+  color: 'var(--n-button-icon-color-hover)'
 })]), (0, cssr_1.c)('&:active', {
-  background: 'var(--item-color-pressed)',
-  color: 'var(--item-text-color-pressed)',
-  border: 'var(--item-border-pressed)'
+  background: 'var(--n-item-color-pressed)',
+  color: 'var(--n-item-text-color-pressed)',
+  border: 'var(--n-item-border-pressed)'
 }, [(0, cssr_1.cM)('button', {
-  background: 'var(--button-color-pressed)',
-  border: 'var(--button-border-pressed)',
-  color: 'var(--button-icon-color-pressed)'
+  background: 'var(--n-button-color-pressed)',
+  border: 'var(--n-button-border-pressed)',
+  color: 'var(--n-button-icon-color-pressed)'
 })]), (0, cssr_1.cM)('active', {
-  background: 'var(--item-color-active)',
-  color: 'var(--item-text-color-active)',
-  border: 'var(--item-border-active)'
+  background: 'var(--n-item-color-active)',
+  color: 'var(--n-item-text-color-active)',
+  border: 'var(--n-item-border-active)'
 }, [(0, cssr_1.c)('&:hover', {
-  background: 'var(--item-color-active-hover)'
+  background: 'var(--n-item-color-active-hover)'
 })])]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
- color: var(--item-text-color-disabled);
+ color: var(--n-item-text-color-disabled);
  `, [(0, cssr_1.cM)('active, button', {
-  backgroundColor: 'var(--item-color-disabled)',
-  border: 'var(--item-border-disabled)'
+  backgroundColor: 'var(--n-item-color-disabled)',
+  border: 'var(--n-item-border-disabled)'
 })])]), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed'
 }, [(0, cssr_1.cB)('pagination-quick-jumper', {
-  color: 'var(--jumper-text-color-disabled)'
+  color: 'var(--n-jumper-text-color-disabled)'
 })])]);

package/lib/popconfirm/src/Popconfirm.d.ts

@@ -1907,6 +1907,7 @@ declare const _default: import("vue").DefineComponent<{
     raw: boolean;
     placement: import("vueuc").FollowerPlacement;
     overlap: boolean;
+    showIcon: boolean;
     trigger: PopoverTrigger;
     showArrow: boolean;
     delay: number;
@@ -1916,7 +1917,6 @@ declare const _default: import("vue").DefineComponent<{
     internalExtraClass: string[];
     internalSyncTargetWithParent: boolean;
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
-    showIcon: boolean;
 } & {
     show?: boolean | undefined;
     x?: number | undefined;
@@ -2620,6 +2620,7 @@ declare const _default: import("vue").DefineComponent<{
     raw: boolean;
     placement: import("vueuc").FollowerPlacement;
     overlap: boolean;
+    showIcon: boolean;
     trigger: PopoverTrigger;
     showArrow: boolean;
     delay: number;
@@ -2630,6 +2631,5 @@ declare const _default: import("vue").DefineComponent<{
     internalSyncTargetWithParent: boolean;
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
     arrow: boolean | undefined;
-    showIcon: boolean;
 }>;
 export default _default;

package/lib/popconfirm/src/PopconfirmPanel.d.ts

@@ -34,10 +34,10 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--font-size': string;
-        '--icon-size': string;
-        '--icon-color': string;
+        '--n-bezier': string;
+        '--n-font-size': string;
+        '--n-icon-size': string;
+        '--n-icon-color': string;
     }>;
     localizedPositiveText: import("vue").ComputedRef<string>;
     localizedNegativeText: import("vue").ComputedRef<string>;

package/lib/popconfirm/src/PopconfirmPanel.js

@@ -35,10 +35,10 @@ exports.default = (0, vue_1.defineComponent)({
         return Object.assign(Object.assign({}, (0, _mixins_1.useLocale)('Popconfirm')), { mergedClsPrefix: mergedClsPrefixRef, cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, iconSize, iconColor } } = mergedThemeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--icon-size': iconSize,
-                    '--icon-color': iconColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-icon-size': iconSize,
+                    '--n-icon-color': iconColor
                 };
             }), localizedPositiveText: (0, vue_1.computed)(() => {
                 return props.positiveText || localeRef.value.positiveText;

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

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --font-size
-// --icon-size
-// --bezier
-// --icon-color
+// --n-font-size
+// --n-icon-size
+// --n-bezier
+// --n-icon-color
 
 
 exports.default = (0, cssr_1.cB)('popconfirm', [(0, cssr_1.cE)('body', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  `, [(0, cssr_1.cE)('icon', `
  display: flex;
- font-size: var(--icon-size);
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ font-size: var(--n-icon-size);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  margin: 0 8px 0 0;
  `)]), (0, cssr_1.cE)('action', `
  margin-top: 8px;

package/lib/popover/src/PopoverBody.js

@@ -68,21 +68,21 @@ exports.default = (0, vue_1.defineComponent)({
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { space, spaceArrow, padding, fontSize, textColor, dividerColor, color, boxShadow, borderRadius, arrowHeight, arrowOffset, arrowOffsetVertical } } = themeRef.value;
             return {
-                '--box-shadow': boxShadow,
-                '--bezier': cubicBezierEaseInOut,
-                '--bezier-ease-in': cubicBezierEaseIn,
-                '--bezier-ease-out': cubicBezierEaseOut,
-                '--font-size': fontSize,
-                '--text-color': textColor,
-                '--color': color,
-                '--divider-color': dividerColor,
-                '--border-radius': borderRadius,
-                '--arrow-height': arrowHeight,
-                '--arrow-offset': arrowOffset,
-                '--arrow-offset-vertical': arrowOffsetVertical,
-                '--padding': padding,
-                '--space': space,
-                '--space-arrow': spaceArrow
+                '--n-box-shadow': boxShadow,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-bezier-ease-in': cubicBezierEaseIn,
+                '--n-bezier-ease-out': cubicBezierEaseOut,
+                '--n-font-size': fontSize,
+                '--n-text-color': textColor,
+                '--n-color': color,
+                '--n-divider-color': dividerColor,
+                '--n-border-radius': borderRadius,
+                '--n-arrow-height': arrowHeight,
+                '--n-arrow-offset': arrowOffset,
+                '--n-arrow-offset-vertical': arrowOffsetVertical,
+                '--n-padding': padding,
+                '--n-space': space,
+                '--n-space-arrow': spaceArrow
             };
         });
         NPopover.setBodyInstance({

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

@@ -12,31 +12,31 @@ const oppositePlacement = {
   left: 'right',
   right: 'left'
 }; // vars:
-// --bezier
-// --bezier-ease-in
-// --bezier-ease-out
-// --font-size
-// --text-color
-// --color
-// --border-radius
-// --arrow-height
-// --arrow-offset
-// --arrow-offset-vertical
-// --padding
-// --space
-// --space-arrow
-// --divider-color
+// --n-bezier
+// --n-bezier-ease-in
+// --n-bezier-ease-out
+// --n-font-size
+// --n-text-color
+// --n-color
+// --n-border-radius
+// --n-arrow-height
+// --n-arrow-offset
+// --n-arrow-offset-vertical
+// --n-padding
+// --n-space
+// --n-space-arrow
+// --n-divider-color
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('popover', `
  transition:
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  transform-origin: inherit;
  position: relative;
- font-size: var(--font-size);
- color: var(--text-color);
- box-shadow: var(--box-shadow);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
+ box-shadow: var(--n-box-shadow);
  `, [// body transition
 (0, cssr_1.c)('&.popover-transition-enter-from, &.popover-transition-leave-to', `
  opacity: 0;
@@ -46,84 +46,84 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('popover', `
  opacity: 1;
  `), (0, cssr_1.c)('&.popover-transition-enter-active', `
  transition:
- opacity .15s var(--bezier-ease-out),
- transform .15s var(--bezier-ease-out);
+ opacity .15s var(--n-bezier-ease-out),
+ transform .15s var(--n-bezier-ease-out);
  `), (0, cssr_1.c)('&.popover-transition-leave-active', `
  transition:
- opacity .15s var(--bezier-ease-in),
- transform .15s var(--bezier-ease-in);
+ opacity .15s var(--n-bezier-ease-in),
+ transform .15s var(--n-bezier-ease-in);
  `), (0, cssr_1.cNotM)('raw', `
- background-color: var(--color);
- border-radius: var(--border-radius);
- `, [(0, cssr_1.cNotM)('show-header', 'padding: var(--padding);')]), (0, cssr_1.cE)('header', `
- padding: var(--padding);
- border-bottom: 1px solid var(--divider-color);
- transition: border-color .3s var(--bezier);
+ background-color: var(--n-color);
+ border-radius: var(--n-border-radius);
+ `, [(0, cssr_1.cNotM)('show-header', 'padding: var(--n-padding);')]), (0, cssr_1.cE)('header', `
+ padding: var(--n-padding);
+ border-bottom: 1px solid var(--n-divider-color);
+ transition: border-color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('content', `
- padding: var(--padding);
+ padding: var(--n-padding);
  `), (0, cssr_1.cB)('popover-arrow-wrapper', `
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  `, [(0, cssr_1.cB)('popover-arrow', `
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  position: absolute;
  display: block;
- width: calc(var(--arrow-height) * 1.414);
- height: calc(var(--arrow-height) * 1.414);
+ width: calc(var(--n-arrow-height) * 1.414);
+ height: calc(var(--n-arrow-height) * 1.414);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
  transform: rotate(45deg);
- background-color: var(--color);
+ background-color: var(--n-color);
  pointer-events: all;
  `)])]), placementStyle('top-start', `
- top: calc(-0.707 * var(--arrow-height));
- left: var(--arrow-offset);
+ top: calc(-0.707 * var(--n-arrow-height));
+ left: var(--n-arrow-offset);
  `), placementStyle('top', `
- top: calc(-0.707 * var(--arrow-height));
- transform: translateX(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ top: calc(-0.707 * var(--n-arrow-height));
+ transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  left: 50%;
  `), placementStyle('top-end', `
- top: calc(-0.707 * var(--arrow-height));
- right: var(--arrow-offset);
+ top: calc(-0.707 * var(--n-arrow-height));
+ right: var(--n-arrow-offset);
  `), placementStyle('bottom-start', `
- bottom: calc(-0.707 * var(--arrow-height));
- left: var(--arrow-offset);
+ bottom: calc(-0.707 * var(--n-arrow-height));
+ left: var(--n-arrow-offset);
  `), placementStyle('bottom', `
- bottom: calc(-0.707 * var(--arrow-height));
- transform: translateX(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ bottom: calc(-0.707 * var(--n-arrow-height));
+ transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  left: 50%;
  `), placementStyle('bottom-end', `
- bottom: calc(-0.707 * var(--arrow-height));
- right: var(--arrow-offset);
+ bottom: calc(-0.707 * var(--n-arrow-height));
+ right: var(--n-arrow-offset);
  `), placementStyle('left-start', `
- left: calc(-0.707 * var(--arrow-height));
- top: var(--arrow-offset-vertical);
+ left: calc(-0.707 * var(--n-arrow-height));
+ top: var(--n-arrow-offset-vertical);
  `), placementStyle('left', `
- left: calc(-0.707 * var(--arrow-height));
- transform: translateY(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ left: calc(-0.707 * var(--n-arrow-height));
+ transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  top: 50%;
  `), placementStyle('left-end', `
- left: calc(-0.707 * var(--arrow-height));
- bottom: var(--arrow-offset-vertical);
+ left: calc(-0.707 * var(--n-arrow-height));
+ bottom: var(--n-arrow-offset-vertical);
  `), placementStyle('right-start', `
- right: calc(-0.707 * var(--arrow-height));
- top: var(--arrow-offset-vertical);
+ right: calc(-0.707 * var(--n-arrow-height));
+ top: var(--n-arrow-offset-vertical);
  `), placementStyle('right', `
- right: calc(-0.707 * var(--arrow-height));
- transform: translateY(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ right: calc(-0.707 * var(--n-arrow-height));
+ transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  top: 50%;
  `), placementStyle('right-end', `
- right: calc(-0.707 * var(--arrow-height));
- bottom: var(--arrow-offset-vertical);
+ right: calc(-0.707 * var(--n-arrow-height));
+ bottom: var(--n-arrow-offset-vertical);
  `)]);
 
 function placementStyle(placement, arrowStyleLiteral) {
   const position = placement.split('-')[0];
-  const sizeStyle = ['top', 'bottom'].includes(position) ? 'height: var(--space-arrow);' : 'width: var(--space-arrow);';
+  const sizeStyle = ['top', 'bottom'].includes(position) ? 'height: var(--n-space-arrow);' : 'width: var(--n-space-arrow);';
   return (0, cssr_1.c)(`[v-placement="${placement}"] >`, [(0, cssr_1.cB)('popover', `
- margin-${oppositePlacement[position]}: var(--space);
+ margin-${oppositePlacement[position]}: var(--n-space);
  `, [(0, cssr_1.cM)('show-arrow', `
- margin-${oppositePlacement[position]}: var(--space-arrow);
+ margin-${oppositePlacement[position]}: var(--n-space-arrow);
  `), (0, cssr_1.cM)('overlap', `
  margin: 0;
  `), (0, cssr_1.cCB)('popover-arrow-wrapper', `

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

@@ -237,20 +237,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;

package/lib/progress/src/Progress.js

@@ -55,20 +55,20 @@ exports.default = (0, vue_1.defineComponent)({
                 const { status } = props;
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, fontSizeCircle, railColor, railHeight, iconSizeCircle, iconSizeLine, textColorCircle, textColorLineInner, textColorLineOuter, lineBgProcessing, fontWeightCircle, [(0, _utils_1.createKey)('iconColor', status)]: iconColor, [(0, _utils_1.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
                 };
             })
         };