@nutui/nutui-react 3.0.0-beta.7 → 3.0.0-beta.9

package/dist/cjs/packages/dialog/style/style.css

@@ -5,6 +5,7 @@
 .nut-button {
   position: relative;
   display: flex;
+  display: inline-block;
   /* #ifdef rn harmony*/
   width: 80px;
   /* #endif */
@@ -19,7 +20,7 @@
   margin: 0;
   padding: 0;
   height: var(--nutui-button-default-height, 32px);
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
   text-align: center;
   cursor: pointer;
@@ -28,7 +29,7 @@
   touch-action: manipulation;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-button-default-color, var(--nutui-gray-7));
   background: var(--nutui-button-default-background-color, transparent);
   border-width: var(--nutui-button-border-width, 1px);
 }
@@ -49,9 +50,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  background-color: var(--nutui-black-10);
   border: inherit;
-  border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7));
+  border-color: var(--nutui-black-10);
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -75,9 +76,9 @@
   /* #endif */
 }
 .nut-button-wrap .nut-icon {
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
-  width: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
@@ -91,34 +92,37 @@
   padding: 0;
 }
 .nut-button-round {
-  border-radius: var(--nutui-button-border-radius, 8px);
+  border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6px));
 }
-.nut-button-round-xlarge, .nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, 12px);
+.nut-button-round-xlarge {
+  border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8px));
+}
+.nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-s, 6px));
 }
 .nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, 8px);
+  border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, 6px);
+  border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4px));
 }
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
-  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text, #505259));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-gray-6));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
 }
 .nut-button-default-none-disabled {
-  color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94));
+  color: var(--nutui-button-default-disabled-color, var(--nutui-gray-5));
 }
 .nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
   background: transparent;
-  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-gray-4));
 }
 .nut-button-normal {
   padding: var(--nutui-button-normal-padding, 0px 12px);
@@ -148,9 +152,9 @@
 .nut-button-large {
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
-  border-radius: var(--nutui-radius-base, 8px);
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -159,19 +163,19 @@
   margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-large .nut-icon {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
-  width: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
-  height: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-button-large-children {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-button-small {
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-radius-xs, 4px);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -185,7 +189,7 @@
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
-  border-radius: var(--nutui-radius-s, 6px);
+  border-radius: var(--nutui-radius-xs, 4px);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
@@ -196,80 +200,87 @@
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-primary {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-primary-children {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
 }
 .nut-button-primary-solid {
   background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-primary-color, #ffffff);
   border-color: transparent;
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
+.nut-button-primary-solid.nut-button-small, .nut-button-primary-solid.nut-button-mini {
+  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-primary-disabled, .nut-button-primary-solid-disabled {
-  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-color, #ffffff);
+  background: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-primary-none {
-  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
 }
 .nut-button-primary-none-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-primary-outline {
-  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
 }
 .nut-button-primary-outline-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-primary-dashed {
-  color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
-  border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
+  border-color: var(--nutui-button-primary-border-color, var(--nutui-brand-6));
 }
 .nut-button-primary-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+}
+.nut-button-primary.nut-button-solid.nut-button-normal {
+  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-success {
-  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900));
+  color: var(--nutui-button-success-color, #ffffff);
+  background: var(--nutui-button-success-background-color, var(--nutui-green-2));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-success-children {
-  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-success-color, #ffffff);
 }
 .nut-button-success-solid-disabled {
   background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
   border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
 .nut-button-success-outline, .nut-button-success-dashed {
-  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
-  border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
+  border-color: var(--nutui-button-success-border-color, var(--nutui-green-2));
 }
 .nut-button-success-outline-disabled, .nut-button-success-dashed-disabled {
-  color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
-  border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe));
+  color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
+  border-color: var(--nutui-button-primary-disabled, var(--nutui-brand-3));
 }
 .nut-button-success-none {
-  color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900));
+  color: var(--nutui-button-success-border-color, var(--nutui-green-2));
 }
 .nut-button-success-none-disabled {
   color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
 .nut-button-info {
-  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-info-color, #ffffff);
   background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-info-children {
-  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-info-color, #ffffff);
 }
 .nut-button-info-solid-disabled {
   background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
@@ -290,56 +301,56 @@
   color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
 }
 .nut-button-danger {
-  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
+  color: var(--nutui-button-danger-color, #ffffff);
+  background: var(--nutui-button-danger-background-color, var(--nutui-red-2));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-danger-children {
-  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-danger-color, #ffffff);
 }
 .nut-button-danger-solid-disabled {
-  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
 }
 .nut-button-danger-outline, .nut-button-danger-dashed {
-  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
-  border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
+  border-color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
 }
 .nut-button-danger-outline-disabled, .nut-button-danger-dashed-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
-  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
+  border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
 }
 .nut-button-danger-none {
-  color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23));
+  color: var(--nutui-button-danger-border-color, var(--nutui-red-2));
 }
 .nut-button-danger-none-disabled {
-  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)));
+  color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-brand-3)));
 }
 .nut-button-warning {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
-  background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00));
+  color: var(--nutui-button-warning-color, #ffffff);
+  background: var(--nutui-button-warning-background-color, var(--nutui-yellow-2));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-warning-children {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-warning-color, #ffffff);
 }
 .nut-button-warning-disabled, .nut-button-warning-solid-disabled {
-  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-button-warning-color, #ffffff);
   background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-outline, .nut-button-warning-dashed {
-  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
-  border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
+  border-color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
 }
 .nut-button-warning-outline-disabled, .nut-button-warning-dashed-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }
 .nut-button-warning-none {
-  color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00));
+  color: var(--nutui-button-warning-border-color, var(--nutui-yellow-2));
 }
 .nut-button-warning-none-disabled {
   color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
@@ -397,16 +408,10 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -444,6 +449,12 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-dialog {
   display: flex;
   flex-direction: column;
@@ -510,7 +521,7 @@
   text-align: center;
   font-size: var(--nutui-dialog-header-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-dialog-header-font-weight, normal);
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-7);
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -522,7 +533,7 @@
   max-height: var(--nutui-dialog-content-max-height, 268px);
   line-height: var(--nutui-dialog-content-line-height, 20px);
   font-size: var(--nutui-font-size-base, 14px);
-  color: var(--nutui-color-text, #505259);
+  color: var(--nutui-gray-6);
   word-wrap: break-word;
   word-break: break-all;
   white-space: pre-wrap;
@@ -547,7 +558,7 @@
 }
 .nut-dialog-footer.vertical .nut-button.nut-dialog-footer-cancel {
   border: 0;
-  color: var(--nutui-color-text, #505259);
+  color: var(--nutui-gray-6);
   order: 2;
   display: flex;
   align-items: flex-end;

package/dist/cjs/packages/divider/style/style.css

@@ -7,15 +7,15 @@
   align-items: center;
   flex-direction: row;
   font-size: var(--nutui-divider-text-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-divider-text-color, var(--nutui-color-text, #505259));
+  color: var(--nutui-divider-text-color, var(--nutui-gray-6));
   margin: var(--nutui-divider-margin, 16px 0);
   width: 100%;
-  border: 0 solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border: 0 solid var(--nutui-divider-border-color, var(--nutui-black-3));
 }
 .nut-divider-before, .nut-divider-after {
   display: flex;
   border-style: solid;
-  border-color: var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-color: var(--nutui-divider-border-color, var(--nutui-black-3));
   border-width: var(--nutui-divider-line-height, 1px) 0 0;
   height: var(--nutui-divider-line-height, 1px);
   flex: 1;
@@ -38,7 +38,7 @@
   display: inline-flex;
   width: 0px;
   height: var(--nutui-divider-vertical-height, 12px);
-  border-left: 1px solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 1px solid var(--nutui-divider-border-color, var(--nutui-black-3));
   margin: var(--nutui-divider-vertical-margin, 0 8px);
   vertical-align: middle;
 }

package/dist/cjs/packages/elevator/style/style.css

@@ -14,7 +14,7 @@
   top: 0;
   overflow: hidden;
   font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-s, 12px));
-  color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-elevator-list-color, var(--nutui-gray-7));
 }
 .nut-elevator-list-inner {
   height: 100%;
@@ -32,11 +32,11 @@
   height: var(--nutui-elevator-list-item-code-height, 35px);
   line-height: var(--nutui-elevator-list-item-code-line-height, 35px);
   font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-elevator-list-item-code-color, var(--nutui-gray-7));
   padding: var(--nutui-elevator-list-item-padding, 0 20px);
   font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
   box-sizing: border-box;
-  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-black-3));
   background-color: var(--nutui-elevator-list-item-code-background-color, inherit);
 }
 .nut-elevator-list-item-name {
@@ -47,7 +47,7 @@
   line-height: var(--nutui-elevator-list-item-name-line-height, 30px);
 }
 .nut-elevator-list-item-name-highcolor {
-  color: var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-brand-6);
 }
 .nut-elevator-list-fixed {
   display: flex;
@@ -65,7 +65,7 @@
 }
 .nut-elevator-list-fixed-title {
   font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-elevator-list-fixed-color, var(--nutui-brand-6));
   font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-elevator-code-current {
@@ -85,11 +85,11 @@
   position: absolute;
   right: var(--nutui-elevator-bars-right, 10px);
   top: var(--nutui-elevator-bars-top, 50%);
-  color: var(--nutui-color-text-help, #888b94);
+  color: var(--nutui-gray-5);
   font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-s, 12px));
   transform: var(--nutui-elevator-bars-transform, translateY(-50%));
   padding: var(--nutui-elevator-bars-padding, 15px 0);
-  background-color: var(--nutui-elevator-bars-background-color, var(--nutui-color-background, #f5f6fa));
+  background-color: var(--nutui-elevator-bars-background-color, var(--nutui-gray-3));
   border-radius: var(--nutui-elevator-bars-border-radius, 6px);
   text-align: center;
   z-index: var(--nutui-elevator-bars-z-index, 1);
@@ -101,7 +101,7 @@
 }
 .nut-elevator-bars-inner-item-active {
   font-weight: var(--nutui-font-weight-bold, 600);
-  color: var(--nutui-elevator-bars-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-elevator-bars-active-color, var(--nutui-brand-6));
 }
 
 [dir=rtl] .nut-elevator-list-fixed,

package/dist/cjs/packages/empty/style/style.css

@@ -10,7 +10,7 @@
   flex-direction: column;
   justify-content: center;
   padding: var(--nutui-empty-padding, 32px 40px);
-  background-color: var(--nutui-empty-background-color, #fff);
+  background-color: var(--nutui-empty-background-color, var(--nutui-gray-1));
 }
 .nut-empty-base {
   width: var(--nutui-empty-image-size, 160px);
@@ -34,12 +34,12 @@
   margin-top: var(--nutui-empty-title-margin-top, 0px);
   font-weight: var(--nutui-font-weight-bold, 600);
   margin-bottom: var(--nutui-empty-title-margin-bottom, 12px);
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-7);
   font-size: var(--nutui-font-size-l, 16px);
   line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, 16px));
 }
 .nut-empty-description {
-  color: var(--nutui-color-text, #505259);
+  color: var(--nutui-gray-6);
   font-size: var(--nutui-font-size-s, 12px);
   line-height: var(--nutui-empty-description-line-height, 1);
 }

package/dist/cjs/packages/fixednav/style/style.css

@@ -15,16 +15,10 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -62,6 +56,12 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-fixednav {
   position: fixed;
   z-index: var(--nutui-fixednav-index, 900);
@@ -85,7 +85,7 @@
   z-index: var(--nutui-fixednav-index, 900);
   width: 70px;
   height: 100%;
-  background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-fixednav-button-background, var(--nutui-brand-6));
   border-radius: 45px 0px 0px 45px;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
   display: flex;
@@ -150,7 +150,7 @@
   font-size: 10px;
   padding: 0 3px;
   color: white;
-  background: var(--nutui-color-primary, #ff0f23);
+  background: var(--nutui-brand-6);
   border-radius: 7px;
   text-align: center;
   min-width: 12px;