naive-ui 2.23.0 → 2.23.1

package/es/form/styles/_common.js

@@ -1,7 +1,4 @@
 export default {
-    blankHeightSmall: '28px',
-    blankHeightMedium: '34px',
-    blankHeightLarge: '40px',
     feedbackPadding: '4px 0 0 2px',
     feedbackHeightSmall: '24px',
     feedbackHeightMedium: '24px',

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

@@ -1,15 +1,15 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    blankHeightSmall: string;
+    blankHeightMedium: string;
+    blankHeightLarge: string;
     lineHeight: string;
     labelTextColor: string;
     asteriskColor: string;
     feedbackTextColorError: string;
     feedbackTextColorWarning: string;
     feedbackTextColor: string;
-    blankHeightSmall: string;
-    blankHeightMedium: string;
-    blankHeightLarge: string;
     feedbackPadding: string;
     feedbackHeightSmall: string;
     feedbackHeightMedium: string;

package/es/form/styles/light.js

@@ -1,8 +1,8 @@
 import { commonLight } from '../../_styles/common';
 import commonVariables from './_common';
 export const self = (vars) => {
-    const { textColor1, errorColor, warningColor, lineHeight, textColor3 } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { lineHeight, labelTextColor: textColor1, asteriskColor: errorColor, feedbackTextColorError: errorColor, feedbackTextColorWarning: warningColor, feedbackTextColor: textColor3 });
+    const { heightSmall, heightMedium, heightLarge, textColor1, errorColor, warningColor, lineHeight, textColor3 } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { blankHeightSmall: heightSmall, blankHeightMedium: heightMedium, blankHeightLarge: heightLarge, lineHeight, labelTextColor: textColor1, asteriskColor: errorColor, feedbackTextColorError: errorColor, feedbackTextColorWarning: warningColor, feedbackTextColor: textColor3 });
 };
 const formLight = {
     name: 'Form',

package/es/log/src/Log.d.ts

@@ -403,12 +403,12 @@ declare const _default: import("vue").DefineComponent<{
     handleWheel: import("lodash").DebouncedFunc<(e: WheelEvent) => void>;
     handleScroll: (e: Event) => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--loader-font-size': string;
-        '--loader-border': string;
-        '--loader-color': string;
-        '--loader-text-color': string;
-        '--loading-color': string;
+        '--n-bezier': string;
+        '--n-loader-font-size': string;
+        '--n-loader-border': string;
+        '--n-loader-color': string;
+        '--n-loader-text-color': string;
+        '--n-loading-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly loading?: unknown;

package/es/log/src/Log.js

@@ -159,12 +159,12 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { loaderFontSize, loaderTextColor, loaderColor, loaderBorder, loadingColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--loader-font-size': loaderFontSize,
-                    '--loader-border': loaderBorder,
-                    '--loader-color': loaderColor,
-                    '--loader-text-color': loaderTextColor,
-                    '--loading-color': loadingColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-loader-font-size': loaderFontSize,
+                    '--n-loader-border': loaderBorder,
+                    '--n-loader-color': loaderColor,
+                    '--n-loader-text-color': loaderTextColor,
+                    '--n-loading-color': loadingColor
                 };
             })
         };

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

@@ -1,19 +1,17 @@
 import { c, cB, cE } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --bezier
-// --loading-color
-// --loader-border
-// --loader-color
-// --loader-text-color
-// --loader-font-size
-// --loading-color
+// --n-bezier
+// --n-loading-color
+// --n-loader-border
+// --n-loader-color
+// --n-loader-text-color
+// --n-loader-font-size
+// --n-loading-color
 
 export default cB('log', `
  position: relative;
  box-sizing: border-box;
- transition:
- border-color .3s var(--bezier),
- color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
 `, [cE('lines', `
  margin: 0;
  white-space: pre-wrap;
@@ -21,9 +19,9 @@ export default cB('log', `
  margin: 0;
  `), cB('log-loader', `
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  box-sizing: border-box;
  position: absolute;
  right: 16px;
@@ -33,10 +31,10 @@ export default cB('log', `
  line-height: 34px;
  white-space: nowrap;
  overflow: hidden;
- border: var(--loader-border);
- color: var(--loader-text-color);
- background-color: var(--loader-color);
- font-size: var(--loader-font-size);
+ border: var(--n-loader-border);
+ color: var(--n-loader-text-color);
+ background-color: var(--n-loader-color);
+ font-size: var(--n-loader-font-size);
  `, [fadeInScaleUpTransition(), cE('content', `
  display: inline-block;
  vertical-align: bottom;
@@ -45,7 +43,7 @@ export default cB('log', `
  padding-right: 20px;
  white-space: nowrap;
  `), cB('base-loading', `
- color: var(--loading-color);
+ color: var(--n-loading-color);
  position: absolute;
  left: 12px;
  top: calc(50% - 10px);

package/es/steps/src/Step.d.ts

@@ -26,18 +26,18 @@ declare const _default: import("vue").DefineComponent<{
     vertical: import("vue").ComputedRef<boolean>;
     mergedStatus: import("vue").ComputedRef<"wait" | "error" | "finish" | "process">;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--description-text-color': string;
-        '--header-text-color': string;
-        '--indicator-border-color': string;
-        '--indicator-color': string;
-        '--indicator-icon-size': string;
-        '--indicator-index-font-size': string;
-        '--indicator-size': string;
-        '--indicator-text-color': string;
-        '--splitor-color': string;
-        '--step-header-font-size': string;
-        '--step-header-font-weight': string;
+        '--n-bezier': string;
+        '--n-description-text-color': string;
+        '--n-header-text-color': string;
+        '--n-indicator-border-color': string;
+        '--n-indicator-color': string;
+        '--n-indicator-icon-size': string;
+        '--n-indicator-index-font-size': string;
+        '--n-indicator-size': string;
+        '--n-indicator-text-color': string;
+        '--n-splitor-color': string;
+        '--n-step-header-font-size': string;
+        '--n-step-header-font-weight': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly status?: unknown;

package/es/steps/src/Step.js

@@ -56,18 +56,18 @@ export default defineComponent({
                 const { size } = stepsProps;
                 const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [createKey('stepHeaderFontSize', size)]: stepHeaderFontSize, [createKey('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [createKey('indicatorSize', size)]: indicatorSize, [createKey('indicatorIconSize', size)]: indicatorIconSize, [createKey('indicatorTextColor', status)]: indicatorTextColor, [createKey('indicatorBorderColor', status)]: indicatorBorderColor, [createKey('headerTextColor', status)]: headerTextColor, [createKey('splitorColor', status)]: splitorColor, [createKey('indicatorColor', status)]: indicatorColor, [createKey('descriptionTextColor', status)]: descriptionTextColor } } = mergedThemeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--description-text-color': descriptionTextColor,
-                    '--header-text-color': headerTextColor,
-                    '--indicator-border-color': indicatorBorderColor,
-                    '--indicator-color': indicatorColor,
-                    '--indicator-icon-size': indicatorIconSize,
-                    '--indicator-index-font-size': indicatorIndexFontSize,
-                    '--indicator-size': indicatorSize,
-                    '--indicator-text-color': indicatorTextColor,
-                    '--splitor-color': splitorColor,
-                    '--step-header-font-size': stepHeaderFontSize,
-                    '--step-header-font-weight': stepHeaderFontWeight
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-description-text-color': descriptionTextColor,
+                    '--n-header-text-color': headerTextColor,
+                    '--n-indicator-border-color': indicatorBorderColor,
+                    '--n-indicator-color': indicatorColor,
+                    '--n-indicator-icon-size': indicatorIconSize,
+                    '--n-indicator-index-font-size': indicatorIndexFontSize,
+                    '--n-indicator-size': indicatorSize,
+                    '--n-indicator-text-color': indicatorTextColor,
+                    '--n-splitor-color': splitorColor,
+                    '--n-step-header-font-size': stepHeaderFontSize,
+                    '--n-step-header-font-weight': stepHeaderFontWeight
                 };
             })
         };

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

@@ -1,17 +1,17 @@
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr';
 import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'; // vars:
-// --bezier
-// --description-text-color
-// --header-text-color
-// --indicator-border-color
-// --indicator-color
-// --indicator-icon-size
-// --indicator-index-font-size
-// --indicator-size
-// --indicator-text-color
-// --splitor-color
-// --step-header-font-size
-// --step-header-font-weight
+// --n-bezier
+// --n-description-text-color
+// --n-header-text-color
+// --n-indicator-border-color
+// --n-indicator-color
+// --n-indicator-icon-size
+// --n-indicator-index-font-size
+// --n-indicator-size
+// --n-indicator-text-color
+// --n-splitor-color
+// --n-step-header-font-size
+// --n-step-header-font-weight
 
 export default cB('steps', `
  width: 100%;
@@ -23,73 +23,73 @@ export default cB('steps', `
  `, [c('&:last-child', [cB('step-splitor', {
   display: 'none'
 })])]), cB('step-splitor', `
- background-color: var(--splitor-color);
- margin-top: calc(var(--step-header-font-size) / 2);
+ background-color: var(--n-splitor-color);
+ margin-top: calc(var(--n-step-header-font-size) / 2);
  height: 1px;
  flex: 1;
  align-self: flex-start;
  margin-left: 12px;
  margin-right: 12px;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `), cB('step-content', {
   flex: 1
 }, [cB('step-content-header', `
- color: var(--header-text-color);
- margin-top: calc(var(--indicator-size) / 2 - var(--step-header-font-size) / 2);
- line-height: var(--step-header-font-size);
- font-size: var(--step-header-font-size);
+ color: var(--n-header-text-color);
+ margin-top: calc(var(--n-indicator-size) / 2 - var(--n-step-header-font-size) / 2);
+ line-height: var(--n-step-header-font-size);
+ font-size: var(--n-step-header-font-size);
  position: relative;
  display: flex;
- font-weight: var(--step-header-font-weight);
+ font-weight: var(--n-step-header-font-weight);
  margin-left: 9px;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [cE('title', `
  white-space: nowrap;
  flex: 0;
  `)]), cE('description', `
- color: var(--description-text-color);
+ color: var(--n-description-text-color);
  margin-top: 12px;
  margin-left: 9px;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `)]), cB('step-indicator', `
- background-color: var(--indicator-color);
- box-shadow: 0 0 0 1px var(--indicator-border-color);
- height: var(--indicator-size);
- width: var(--indicator-size);
+ background-color: var(--n-indicator-color);
+ box-shadow: 0 0 0 1px var(--n-indicator-border-color);
+ height: var(--n-indicator-size);
+ width: var(--n-indicator-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  `, [cB('step-indicator-slot', `
  position: relative;
- width: var(--indicator-icon-size);
- height: var(--indicator-icon-size);
- font-size: var(--indicator-icon-size);
- line-height: var(--indicator-icon-size);
+ width: var(--n-indicator-icon-size);
+ height: var(--n-indicator-icon-size);
+ font-size: var(--n-indicator-icon-size);
+ line-height: var(--n-indicator-icon-size);
  `, [cE('index', `
  display: inline-block;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
- font-size: var(--indicator-index-font-size);
- width: var(--indicator-icon-size);
- height: var(--indicator-icon-size);
- line-height: var(--indicator-icon-size);
- color: var(--indicator-text-color);
- transition: color .3s var(--bezier);
+ font-size: var(--n-indicator-index-font-size);
+ width: var(--n-indicator-icon-size);
+ height: var(--n-indicator-icon-size);
+ line-height: var(--n-indicator-icon-size);
+ color: var(--n-indicator-text-color);
+ transition: color .3s var(--n-bezier);
  `, [iconSwitchTransition()]), cB('base-icon', `
- color: var(--indicator-text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-indicator-text-color);
+ transition: color .3s var(--n-bezier);
  `, [iconSwitchTransition()])])]), cM('vertical', {
   flexDirection: 'column'
 }, [cNotM('show-description', [cB('step', {
@@ -99,8 +99,8 @@ export default cB('steps', `
 }, [c('&:last-child', {
   marginBottom: 0
 })]), cB('step-splitor', `
- left: calc(var(--indicator-size) / 2);
- height: calc(100% - var(--indicator-size));
+ left: calc(var(--n-indicator-size) / 2);
+ height: calc(100% - var(--n-indicator-size));
  `), cB('step-indicator', [cB('step-splitor', `
  position: absolute;
  bottom: -8px;

package/es/switch/src/Switch.d.ts

@@ -278,25 +278,25 @@ declare const _default: import("vue").DefineComponent<{
     checked: import("vue").ComputedRef<boolean>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--button-border-radius': string;
-        '--button-box-shadow': string;
-        '--button-color': string;
-        '--button-width': string;
-        '--button-width-pressed': string;
-        '--button-height': string;
-        '--height': string;
-        '--offset': string;
-        '--opacity-disabled': string;
-        '--rail-border-radius': string;
-        '--rail-color': string;
-        '--rail-color-active': string;
-        '--rail-height': string;
-        '--rail-width': string;
-        '--width': string;
-        '--box-shadow-focus': string;
-        '--loading-color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-button-border-radius': string;
+        '--n-button-box-shadow': string;
+        '--n-button-color': string;
+        '--n-button-width': string;
+        '--n-button-width-pressed': string;
+        '--n-button-height': string;
+        '--n-height': string;
+        '--n-offset': string;
+        '--n-opacity-disabled': string;
+        '--n-rail-border-radius': string;
+        '--n-rail-color': string;
+        '--n-rail-color-active': string;
+        '--n-rail-height': string;
+        '--n-rail-width': string;
+        '--n-width': string;
+        '--n-box-shadow-focus': string;
+        '--n-loading-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly size?: unknown;

package/es/switch/src/Switch.js

@@ -138,25 +138,25 @@ export default defineComponent({
                     ? railWidth
                     : pxfy(depx(railWidth) + depx(buttonHeight) - depx(railHeight));
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--button-border-radius': buttonBorderRadius,
-                    '--button-box-shadow': buttonBoxShadow,
-                    '--button-color': buttonColor,
-                    '--button-width': buttonWidth,
-                    '--button-width-pressed': buttonWidthPressed,
-                    '--button-height': buttonHeight,
-                    '--height': height,
-                    '--offset': offset,
-                    '--opacity-disabled': opacityDisabled,
-                    '--rail-border-radius': railBorderRadius,
-                    '--rail-color': railColor,
-                    '--rail-color-active': railColorActive,
-                    '--rail-height': railHeight,
-                    '--rail-width': railWidth,
-                    '--width': width,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--loading-color': loadingColor,
-                    '--text-color': textColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-button-border-radius': buttonBorderRadius,
+                    '--n-button-box-shadow': buttonBoxShadow,
+                    '--n-button-color': buttonColor,
+                    '--n-button-width': buttonWidth,
+                    '--n-button-width-pressed': buttonWidthPressed,
+                    '--n-button-height': buttonHeight,
+                    '--n-height': height,
+                    '--n-offset': offset,
+                    '--n-opacity-disabled': opacityDisabled,
+                    '--n-rail-border-radius': railBorderRadius,
+                    '--n-rail-color': railColor,
+                    '--n-rail-color-active': railColorActive,
+                    '--n-rail-height': railHeight,
+                    '--n-rail-width': railWidth,
+                    '--n-width': width,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-loading-color': loadingColor,
+                    '--n-text-color': textColor
                 };
             })
         };

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

@@ -1,26 +1,26 @@
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr';
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --button-border-radius
-// --button-box-shadow
-// --button-color
-// --button-width
-// --button-width-pressed
-// --height
-// --offset
-// --rail-border-radius
-// --rail-color
-// --rail-color-active
-// --rail-height
-// --rail-width
-// --width
-// --box-shadow-focus
-// --loading-color
-// --text-color
+// --n-bezier
+// --n-button-border-radius
+// --n-button-box-shadow
+// --n-button-color
+// --n-button-width
+// --n-button-width-pressed
+// --n-height
+// --n-offset
+// --n-rail-border-radius
+// --n-rail-color
+// --n-rail-color-active
+// --n-rail-height
+// --n-rail-width
+// --n-width
+// --n-box-shadow-focus
+// --n-loading-color
+// --n-text-color
 
 export default cB('switch', `
- height: var(--height);
- min-width: var(--width);
+ height: var(--n-height);
+ min-width: var(--n-width);
  vertical-align: middle;
  user-select: none;
  display: inline-flex;
@@ -28,7 +28,7 @@ export default cB('switch', `
  justify-content: center;
  align-items: center;
 `, [cE('children-placeholder', `
- height: var(--rail-height);
+ height: var(--n-rail-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
@@ -38,21 +38,21 @@ export default cB('switch', `
  display: flex;
  flex-wrap: none;
  `), cE('button-placeholder', `
- width: calc(1.75 * var(--rail-height));
- height: var(--rail-height);
+ width: calc(1.75 * var(--n-rail-height));
+ height: var(--n-rail-height);
  `), cB('base-loading', `
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
- font-size: calc(var(--button-width) - 4px);
- color: var(--loading-color);
- transition: color .3s var(--bezier);
+ font-size: calc(var(--n-button-width) - 4px);
+ color: var(--n-loading-color);
+ transition: color .3s var(--n-bezier);
  `, [fadeInScaleUpTransition({
   originalTransform: 'translateX(-50%) translateY(-50%)'
 })]), cE('checked, unchecked', `
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  box-sizing: border-box;
  position: absolute;
  white-space: nowrap;
@@ -63,59 +63,59 @@ export default cB('switch', `
  line-height: 1;
  `), cE('checked', `
  right: 0;
- padding-right: calc(1.25 * var(--rail-height) - var(--offset));
+ padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
  `), cE('unchecked', `
  left: 0;
  justify-content: flex-end;
- padding-left: calc(1.25 * var(--rail-height) - var(--offset));
+ padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
  `), c('&:focus', [cE('rail', `
- box-shadow: var(--box-shadow-focus);
+ box-shadow: var(--n-box-shadow-focus);
  `)]), cM('round', [cE('rail', {
-  borderRadius: 'calc(var(--rail-height) / 2)'
+  borderRadius: 'calc(var(--n-rail-height) / 2)'
 }, [cE('button', {
-  borderRadius: 'calc(var(--button-height) / 2)'
+  borderRadius: 'calc(var(--n-button-height) / 2)'
 })])]), cNotM('disabled', [cM('pressed', [cE('rail', [cE('button', {
-  maxWidth: 'var(--button-width-pressed)'
+  maxWidth: 'var(--n-button-width-pressed)'
 })])]), cE('rail', [c('&:active', [cE('button', {
-  maxWidth: 'var(--button-width-pressed)'
+  maxWidth: 'var(--n-button-width-pressed)'
 })])]), cM('active', [cM('pressed', [cE('rail', [cE('button', {
-  left: 'calc(100% - var(--offset) - var(--button-width-pressed))'
+  left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
 })])]), cE('rail', [c('&:active', [cE('button', {
-  left: 'calc(100% - var(--offset) - var(--button-width-pressed))'
+  left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
 })])])])]), cM('active', [cE('rail', [cE('button', {
-  left: 'calc(100% - (var(--rail-height) + var(--button-width)) / 2)'
+  left: 'calc(100% - (var(--n-rail-height) + var(--n-button-width)) / 2)'
 })])]), cE('rail', `
  overflow: hidden;
- height: var(--rail-height);
- min-width: var(--rail-width);
- border-radius: var(--rail-border-radius);
+ height: var(--n-rail-height);
+ min-width: var(--n-rail-width);
+ border-radius: var(--n-rail-border-radius);
  cursor: pointer;
  position: relative;
  transition:
- background .3s var(--bezier),
- box-shadow .3s var(--bezier);
- background-color: var(--rail-color);
+ background .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
+ background-color: var(--n-rail-color);
  `, [cE('button', `
- top: var(--offset);
- left: var(--offset);
- height: var(--button-width);
- width: var(--button-width-pressed);
- max-width: var(--button-width);
- border-radius: var(--button-border-radius);
- background-color: var(--button-color);
- box-shadow: var(--button-box-shadow);
+ top: var(--n-offset);
+ left: var(--n-offset);
+ height: var(--n-button-width);
+ width: var(--n-button-width-pressed);
+ max-width: var(--n-button-width);
+ border-radius: var(--n-button-border-radius);
+ background-color: var(--n-button-color);
+ box-shadow: var(--n-button-box-shadow);
  box-sizing: border-box;
  cursor: inherit;
  content: "";
  position: absolute;
  transition:
- background-color .3s var(--bezier),
- left .3s var(--bezier),
- opacity .3s var(--bezier),
- max-width .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ left .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ max-width .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  `)]), cM('active', [cE('rail', {
-  backgroundColor: 'var(--rail-color-active)'
+  backgroundColor: 'var(--n-rail-color-active)'
 })]), cM('disabled', [cE('rail', `
  cursor: not-allowed;
  opacity: .5;