naive-ui 2.21.5 → 2.23.2

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

@@ -7,17 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const lineHeight = 1.25; // vars:
-// --bezier
-// --circle-border
-// --content-font-size
-// --content-text-color
-// --line-color
-// --meta-text-color
-// --title-font-size
-// --title-font-weight
-// --title-margin
-// --title-text-color
-// --icon-size
+// --n-bezier
+// --n-circle-border
+// --n-content-font-size
+// --n-content-text-color
+// --n-line-color
+// --n-meta-text-color
+// --n-title-font-size
+// --n-title-font-weight
+// --n-title-margin
+// --n-title-text-color
+// --n-icon-size
 
 exports.default = (0, cssr_1.cB)('timeline', `
  position: relative;
@@ -31,27 +31,27 @@ exports.default = (0, cssr_1.cB)('timeline', `
  flex-shrink: 0;
  padding-right: 40px;
  `, [(0, cssr_1.cB)('timeline-item-content', `
- margin-top: calc(var(--icon-size) + 12px);
+ margin-top: calc(var(--n-icon-size) + 12px);
  `, [(0, cssr_1.cE)('meta', `
  margin-top: 6px;
  margin-bottom: unset;
  `)]), (0, cssr_1.cB)('timeline-item-timeline', `
  width: 100%;
- height: calc(var(--icon-size) + 12px);
+ height: calc(var(--n-icon-size) + 12px);
  `, [(0, cssr_1.cE)('line', `
- left: var(--icon-size);
- top: calc(var(--icon-size) / 2 - 1px);
+ left: var(--n-icon-size);
+ top: calc(var(--n-icon-size) / 2 - 1px);
  right: 0px;
  width: unset;
  height: 2px;
  `)])])]), (0, cssr_1.cM)('right-placement', [(0, cssr_1.cB)('timeline-item', [(0, cssr_1.cB)('timeline-item-content', `
  text-align: right;
- margin-right: calc(var(--icon-size) + 12px);
+ margin-right: calc(var(--n-icon-size) + 12px);
  `), (0, cssr_1.cB)('timeline-item-timeline', `
- width: var(--icon-size);
+ width: var(--n-icon-size);
  right: 0;
  `)])]), (0, cssr_1.cM)('left-placement', [(0, cssr_1.cB)('timeline-item', [(0, cssr_1.cB)('timeline-item-content', `
- margin-left: calc(var(--icon-size) + 12px);
+ margin-left: calc(var(--n-icon-size) + 12px);
  `), (0, cssr_1.cB)('timeline-item-timeline', `
  left: 0;
  `)])]), (0, cssr_1.cB)('timeline-item', `
@@ -61,50 +61,50 @@ exports.default = (0, cssr_1.cB)('timeline', `
  `)]), (0, cssr_1.cB)('timeline-item-content', [(0, cssr_1.cE)('meta', `
  margin-bottom: 0;
  `)])]), (0, cssr_1.cB)('timeline-item-content', [(0, cssr_1.cE)('title', `
- margin: var(--title-margin);
- font-size: var(--title-font-size);
- transition: color .3s var(--bezier);
- font-weight: var(--title-font-weight);
+ margin: var(--n-title-margin);
+ font-size: var(--n-title-font-size);
+ transition: color .3s var(--n-bezier);
+ font-weight: var(--n-title-font-weight);
  margin-bottom: 6px;
- color: var(--title-text-color);
+ color: var(--n-title-text-color);
  `), (0, cssr_1.cE)('content', `
- transition: color .3s var(--bezier);
- font-size: var(--content-font-size);
- color: var(--content-text-color);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-content-font-size);
+ color: var(--n-content-text-color);
  `), (0, cssr_1.cE)('meta', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 20px;
- color: var(--meta-text-color);
+ color: var(--n-meta-text-color);
  `)]), (0, cssr_1.cB)('timeline-item-timeline', `
- width: calc(var(--icon-size) + 12px);
+ width: calc(var(--n-icon-size) + 12px);
  position: absolute;
- top: calc(var(--title-font-size) * ${lineHeight} / 2 - var(--icon-size) / 2);
+ top: calc(var(--n-title-font-size) * ${lineHeight} / 2 - var(--n-icon-size) / 2);
  height: 100%;
  `, [(0, cssr_1.cE)('circle', `
- border: var(--circle-border);
+ border: var(--n-circle-border);
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
- width: var(--icon-size);
- height: var(--icon-size);
- border-radius: var(--icon-size);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
+ width: var(--n-icon-size);
+ height: var(--n-icon-size);
+ border-radius: var(--n-icon-size);
  box-sizing: border-box;
  `), (0, cssr_1.cE)('icon', `
- color: var(--icon-color);
- font-size: var(--icon-size);
- height: var(--icon-size);
- width: var(--icon-size);
+ color: var(--n-icon-color);
+ font-size: var(--n-icon-size);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  `), (0, cssr_1.cE)('line', `
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  position: absolute;
- top: var(--icon-size);
- left: calc(var(--icon-size) / 2 - 1px);
+ top: var(--n-icon-size);
+ left: calc(var(--n-icon-size) / 2 - 1px);
  bottom: 0px;
  width: 2px;
- background-color: var(--line-color);
+ background-color: var(--n-line-color);
  `)])])]);

package/lib/transfer/src/Transfer.d.ts

@@ -2564,27 +2564,27 @@ declare const _default: import("vue").DefineComponent<{
     handleTgtFilterUpdateValue: (value: string | null) => void;
     handleSrcFilterUpdateValue: (value: string | null) => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--bezier-ease-in': string;
-        '--bezier-ease-out': string;
-        '--border-color': string;
-        '--border-radius': string;
-        '--extra-font-size': string;
-        '--filter-divider-color': string;
-        '--font-size': string;
-        '--header-color': string;
-        '--header-extra-text-color': string;
-        '--header-font-weight': string;
-        '--header-text-color': string;
-        '--header-text-color-disabled': string;
-        '--item-color-pending': string;
-        '--item-height': string;
-        '--item-text-color': string;
-        '--item-text-color-disabled': string;
-        '--list-color': string;
-        '--width': string;
-        '--icon-color': string;
-        '--icon-color-disabled': string;
+        '--n-bezier': string;
+        '--n-bezier-ease-in': string;
+        '--n-bezier-ease-out': string;
+        '--n-border-color': string;
+        '--n-border-radius': string;
+        '--n-extra-font-size': string;
+        '--n-filter-divider-color': string;
+        '--n-font-size': string;
+        '--n-header-color': string;
+        '--n-header-extra-text-color': string;
+        '--n-header-font-weight': string;
+        '--n-header-text-color': string;
+        '--n-header-text-color-disabled': string;
+        '--n-item-color-pending': string;
+        '--n-item-height': string;
+        '--n-item-text-color': string;
+        '--n-item-text-color-disabled': string;
+        '--n-list-color': string;
+        '--n-width': string;
+        '--n-icon-color': string;
+        '--n-icon-color-disabled': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly value?: unknown;

package/lib/transfer/src/Transfer.js

@@ -164,27 +164,27 @@ exports.default = (0, vue_1.defineComponent)({
                 const { value: size } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { width, borderRadius, borderColor, listColor, headerColor, titleTextColor, titleTextColorDisabled, extraTextColor, filterDividerColor, itemTextColor, itemColorPending, itemTextColorDisabled, extraFontSize, titleFontWeight, iconColor, iconColorDisabled, [(0, cssr_1.createKey)('fontSize', size)]: fontSize, [(0, cssr_1.createKey)('itemHeight', size)]: itemHeight } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--bezier-ease-in': cubicBezierEaseIn,
-                    '--bezier-ease-out': cubicBezierEaseOut,
-                    '--border-color': borderColor,
-                    '--border-radius': borderRadius,
-                    '--extra-font-size': extraFontSize,
-                    '--filter-divider-color': filterDividerColor,
-                    '--font-size': fontSize,
-                    '--header-color': headerColor,
-                    '--header-extra-text-color': extraTextColor,
-                    '--header-font-weight': titleFontWeight,
-                    '--header-text-color': titleTextColor,
-                    '--header-text-color-disabled': titleTextColorDisabled,
-                    '--item-color-pending': itemColorPending,
-                    '--item-height': itemHeight,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-disabled': itemTextColorDisabled,
-                    '--list-color': listColor,
-                    '--width': width,
-                    '--icon-color': iconColor,
-                    '--icon-color-disabled': iconColorDisabled
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-bezier-ease-in': cubicBezierEaseIn,
+                    '--n-bezier-ease-out': cubicBezierEaseOut,
+                    '--n-border-color': borderColor,
+                    '--n-border-radius': borderRadius,
+                    '--n-extra-font-size': extraFontSize,
+                    '--n-filter-divider-color': filterDividerColor,
+                    '--n-font-size': fontSize,
+                    '--n-header-color': headerColor,
+                    '--n-header-extra-text-color': extraTextColor,
+                    '--n-header-font-weight': titleFontWeight,
+                    '--n-header-text-color': titleTextColor,
+                    '--n-header-text-color-disabled': titleTextColorDisabled,
+                    '--n-item-color-pending': itemColorPending,
+                    '--n-item-height': itemHeight,
+                    '--n-item-text-color': itemTextColor,
+                    '--n-item-text-color-disabled': itemTextColorDisabled,
+                    '--n-list-color': listColor,
+                    '--n-width': width,
+                    '--n-icon-color': iconColor,
+                    '--n-icon-color-disabled': iconColorDisabled
                 };
             })
         };

package/lib/transfer/src/TransferList.js

@@ -75,24 +75,22 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedTheme, mergedClsPrefix, syncVLScroller } = this;
+        const { mergedTheme, mergedClsPrefix, virtualScroll, syncVLScroller } = this;
         return ((0, vue_1.h)(vue_1.Fragment, null,
-            this.virtualScroll ? ((0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollerInstRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: this.scrollContainer, content: this.scrollContent }, {
-                default: () => ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "srcVlInstRef", style: { height: '100%' }, class: `${mergedClsPrefix}-transfer-list-content`, items: this.options, itemSize: this.itemSize, showScrollbar: false, onResize: syncVLScroller, onScroll: syncVLScroller, keyField: "value" }, {
+            (0, vue_1.h)(_internal_1.NScrollbar, { ref: "scrollerInstRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: virtualScroll ? this.scrollContainer : undefined, content: virtualScroll ? this.scrollContent : undefined }, {
+                default: () => virtualScroll ? ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "vlInstRef", style: { height: '100%' }, class: `${mergedClsPrefix}-transfer-list-content`, items: this.options, itemSize: this.itemSize, showScrollbar: false, onResize: syncVLScroller, onScroll: syncVLScroller, keyField: "value" }, {
                     default: ({ item }) => {
                         const { source, disabled } = this;
                         return ((0, vue_1.h)(TransferListItem_1.default, { source: source, key: item.value, value: item.value, disabled: item.disabled || disabled, label: item.label }));
                     }
-                }))
-            })) : ((0, vue_1.h)(_internal_1.NScrollbar, { theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar }, {
-                default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-content` },
+                })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-transfer-list-content` },
                     (0, vue_1.h)(vue_1.TransitionGroup, { name: "item", appear: this.isMounted, css: !this.isInputing }, {
                         default: () => {
                             const { source, disabled } = this;
                             return this.options.map((option) => ((0, vue_1.h)(TransferListItem_1.default, { source: source, key: option.value, value: option.value, disabled: option.disabled || disabled, label: option.label })));
                         }
                     })))
-            })),
+            }),
             (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.isMounted, css: !this.isInputing }, {
                 default: () => this.options.length ? null : ((0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))
             })));

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

@@ -44,7 +44,7 @@ const animation = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes transfer-slide-in-fro
  }
  `), (0, cssr_1.c)('@keyframes transfer-height-collapse', `
  0% {
- max-height: var(--item-height);
+ max-height: var(--n-item-height);
  }
  100% {
  max-height: 0;
@@ -54,30 +54,34 @@ const animation = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes transfer-slide-in-fro
  max-height: 0;
  }
  100% {
- max-height: var(--item-height);
+ max-height: var(--n-item-height);
  }
  `)]);
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  display: flex;
- width: var(--width);
- font-size: var(--font-size);
- `, [(0, cssr_1.cM)('filterable', [(0, cssr_1.cB)('transfer-list', [(0, cssr_1.cB)('transfer-list-body', {
-  height: 'calc(var(--item-height) * 5.6 + 45px)'
-})])]), (0, cssr_1.cB)('transfer-icon', `
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ width: var(--n-width);
+ font-size: var(--n-font-size);
+ height: 240px;
+ display: flex;
+ flex-wrap: nowrap;
+ `, [(0, cssr_1.cB)('transfer-icon', `
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  `), (0, cssr_1.cM)('disabled', [(0, cssr_1.cB)('transfer-icon', {
-  color: 'var(--icon-color-disabled)'
+  color: 'var(--n-icon-color-disabled)'
 })]), (0, cssr_1.cB)('transfer-list', `
+ height: inherit;
+ display: flex;
+ flex-direction: column;
  background-clip: padding-box;
  width: calc(50% - 36px);
  position: relative;
- transition: background-color .3s var(--bezier);
- border-radius: var(--border-radius);
- background-color: var(--list-color);
+ transition: background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-list-color);
  `, [(0, cssr_1.cE)('border', `
- border: 1px solid var(--border-color);
- transition: border-color .3s var(--bezier);
+ border: 1px solid var(--n-border-color);
+ transition: border-color .3s var(--n-bezier);
  pointer-events: none;
  border-radius: inherit;
  position: absolute;
@@ -86,7 +90,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  top: 0;
  bottom: 0;
  `), (0, cssr_1.cB)('transfer-list-header', `
- height: calc(var(--item-height) + 4px);
+ height: calc(var(--n-item-height) + 4px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
@@ -94,10 +98,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
- background-color: var(--header-color);
+ background-color: var(--n-header-color);
  transition:
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [(0, cssr_1.cE)('checkbox', `
  display: flex;
  align-items: center;
@@ -106,20 +110,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  `), (0, cssr_1.cE)('header', `
  flex: 1;
  line-height: 1;
- font-weight: var(--header-font-weight);
- transition: color .3s var(--bezier);
- color: var(--header-text-color);
+ font-weight: var(--n-header-font-weight);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-header-text-color);
  `, [(0, cssr_1.cM)('disabled', {
-  color: 'var(--header-text-color-disabled)'
+  color: 'var(--n-header-text-color-disabled)'
 })]), (0, cssr_1.cE)('extra', `
- transition: color .3s var(--bezier);
- font-size: var(--extra-font-size);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-extra-font-size);
  justify-self: flex-end;
  margin-right: 14px;
  white-space: nowrap;
- color: var(--header-extra-text-color);
+ color: var(--n-header-extra-text-color);
  `)]), (0, cssr_1.cB)('transfer-list-body', `
- height: calc(var(--item-height) * 5.6);
+ flex-basis: 0;
+ flex-grow: 1;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
@@ -131,11 +136,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  `, [(0, cssr_1.cB)('transfer-filter', `
  padding: 0 8px 8px 8px;
  box-sizing: border-box;
- background-color: var(--header-color);
+ background-color: var(--n-header-color);
  transition:
- border-color .3s var(--bezier),
- background-color .3s var(--bezier);
- border-bottom: 1px solid var(--filter-divider-color);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-filter-divider-color);
  `), (0, cssr_1.cB)('transfer-list-flex-container', `
  flex: 1;
  position: relative;
@@ -160,18 +165,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  `, [(0, cssr_1.cM)('transition-disabled', [(0, cssr_1.cB)('transfer-list-item', {
   animation: 'none !important'
 })]), (0, cssr_1.cB)('transfer-list-item', `
- height: var(--item-height);
- max-height: var(--item-height);
+ height: var(--n-item-height);
+ max-height: var(--n-item-height);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
- color: var(--item-text-color);
+ color: var(--n-item-text-color);
  `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--item-color-pending)'
+  backgroundColor: 'var(--n-item-color-pending)'
 })]), (0, cssr_1.cE)('extra', `
  text-overflow: ellipsis;
  overflow: hidden;
@@ -185,19 +190,19 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
  `), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed
  background-color: #0000;
- color: var(--item-text-color-disabled);
+ color: var(--n-item-text-color-disabled);
  `), (0, cssr_1.cM)('source', {
   animationFillMode: 'forwards'
 }, [(0, cssr_1.c)('&.item-enter-active', `
  transform: translateX(150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-out);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
  animation-delay: 0s, .25s;
  animation-name: transfer-height-expand, transfer-slide-in-from-right;
  `), (0, cssr_1.c)('&.item-leave-active', `
  transform: translateX(-150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-in);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
  animation-delay: .25s, 0s;
  animation-name: transfer-height-collapse, transfer-slide-out-to-right;
  `)]), (0, cssr_1.cM)('target', {
@@ -205,13 +210,13 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('transfer', `
 }, [(0, cssr_1.c)('&.item-enter-active', `
  transform: translateX(-150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-out);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-out);
  animation-delay: 0s, .25s;
  animation-name: transfer-height-expand, transfer-slide-in-from-left;
  `), (0, cssr_1.c)('&.item-leave-active', `
  transform: translateX(150%);
  animation-duration: .25s, .25s;
- animation-timing-function: var(--bezier), var(--bezier-ease-in);
+ animation-timing-function: var(--n-bezier), var(--n-bezier-ease-in);
  animation-delay: .25s, 0s;
  animation-name: transfer-height-collapse, transfer-slide-out-to-left;
  `)])])])])])]), (0, cssr_1.cB)('transfer-gap', {

package/lib/tree/src/Tree.d.ts

@@ -961,17 +961,17 @@ declare const _default: import("vue").DefineComponent<{
     handleAfterEnter: () => void;
     handleResize: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--arrow-color': string;
-        '--loading-color': string;
-        '--bezier': string;
-        '--font-size': string;
-        '--node-border-radius': string;
-        '--node-color-active': string;
-        '--node-color-hover': string;
-        '--node-color-pressed': string;
-        '--node-text-color': string;
-        '--node-text-color-disabled': string;
-        '--drop-mark-color': string;
+        '--n-arrow-color': string;
+        '--n-loading-color': string;
+        '--n-bezier': string;
+        '--n-font-size': string;
+        '--n-node-border-radius': string;
+        '--n-node-color-active': string;
+        '--n-node-color-hover': string;
+        '--n-node-color-pressed': string;
+        '--n-node-text-color': string;
+        '--n-node-text-color-disabled': string;
+        '--n-drop-mark-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly internalScrollable?: unknown;

package/lib/tree/src/Tree.js

@@ -988,17 +988,17 @@ exports.default = (0, vue_1.defineComponent)({
             handleResize, cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor } } = themeRef.value;
                 return {
-                    '--arrow-color': arrowColor,
-                    '--loading-color': loadingColor,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--node-border-radius': nodeBorderRadius,
-                    '--node-color-active': nodeColorActive,
-                    '--node-color-hover': nodeColorHover,
-                    '--node-color-pressed': nodeColorPressed,
-                    '--node-text-color': nodeTextColor,
-                    '--node-text-color-disabled': nodeTextColorDisabled,
-                    '--drop-mark-color': dropMarkColor
+                    '--n-arrow-color': arrowColor,
+                    '--n-loading-color': loadingColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-node-border-radius': nodeBorderRadius,
+                    '--n-node-color-active': nodeColorActive,
+                    '--n-node-color-hover': nodeColorHover,
+                    '--n-node-color-pressed': nodeColorPressed,
+                    '--n-node-text-color': nodeTextColor,
+                    '--n-node-text-color-disabled': nodeTextColorDisabled,
+                    '--n-drop-mark-color': dropMarkColor
                 };
             }) }, exposedMethods);
     },

package/lib/tree/src/dnd.js

@@ -13,7 +13,7 @@ function renderDropMark({ position, offsetLevel, indent, el }) {
         style.top = 0;
         style.bottom = 0;
         style.borderRadius = 'inherit';
-        style.boxShadow = 'inset 0 0 0 2px var(--drop-mark-color)';
+        style.boxShadow = 'inset 0 0 0 2px var(--n-drop-mark-color)';
     }
     else {
         const cssPosition = position === 'before' ? 'top' : 'bottom';
@@ -22,7 +22,7 @@ function renderDropMark({ position, offsetLevel, indent, el }) {
         // Maybe it is possible to use content left
         style.left = `${el.offsetLeft + 6 - offsetLevel * indent}px`;
         style.height = '2px';
-        style.backgroundColor = 'var(--drop-mark-color)';
+        style.backgroundColor = 'var(--n-drop-mark-color)';
         style.transformOrigin = cssPosition;
         style.borderRadius = '1px';
         style.transform =