oxy-uni-ui 2.1.4 → 2.1.5

package/components/oxy-action-sheet/index.scss

@@ -3,45 +3,49 @@
 
 .oxy-theme-dark {
   @include b(action-sheet) {
-    background-color: $-dark-background2;
-    color: $-dark-color;
+    @include edeep(popup) {
+      --oxy-popup-bg: #{$-action-sheet-bg-dark};
+    }
+
+    background-color: $-action-sheet-bg-dark;
+    color: $-action-sheet-color-dark;
 
     @include e(action) {
-      color: $-dark-color;
-      background: $-dark-background2;
+      color: $-action-sheet-color-dark;
+      background: $-action-sheet-bg-dark;
 
       &:not(.oxy-action-sheet__action--disabled):not(.oxy-action-sheet__action--loading):active {
-        background: $-dark-background4;
+        background: $-action-sheet-active-color-dark;
       }
 
       @include m(disabled) {
-        color: $-dark-color-gray;
+        color: $-action-sheet-disabled-color-dark;
       }
     }
 
     @include e(subname) {
-      color: $-dark-color3;
+      color: $-action-sheet-subname-color-dark;
     }
 
     @include e(cancel) {
-      color: $-dark-color;
-      background: $-dark-background4;
+      color: $-action-sheet-cancel-color-dark;
+      background: $-action-sheet-cancel-bg-dark;
 
       &:active {
-        background: $-dark-background5;
+        background: $-action-sheet-active-color-dark;
       }
     }
 
     :deep(.oxy-action-sheet__close) {
-      color: $-dark-color3;
+      color: $-action-sheet-close-color-dark;
     }
 
     @include e(panel-title) {
-      color: $-dark-color;
+      color: $-action-sheet-color-dark;
     }
 
     @include e(header) {
-      color: $-dark-color;
+      color: $-action-sheet-color-dark;
     }
   }
 }
@@ -57,6 +61,10 @@
 }
 
 @include b(action-sheet) {
+  @include edeep(popup) {
+    --oxy-popup-bg: #{$-action-sheet-bg};
+  }
+
   background-color: $-action-sheet-bg;
   padding-bottom: 2rpx;
   margin-bottom: var(--window-bottom);

package/components/oxy-backtop/index.scss

@@ -9,7 +9,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: $-color-gray-8;
+  color: $-backtop-color;
 
   @include edeep(backicon) {
     font-size: $-backtop-icon-size;

package/components/oxy-badge/index.scss

@@ -4,7 +4,7 @@
 .oxy-theme-dark {
   @include b(badge) {
     @include e(content) {
-      border-color: $-dark-background2;
+      border-color: $-badge-border-dark;
     }
   }
 }

package/components/oxy-button/index.scss

@@ -4,35 +4,38 @@
 
 .oxy-theme-dark {
   @include b(button) {
+    color: $-button-normal-color-dark;
+
     @include when(info) {
-      background: $-dark-background4;
-      color: $-dark-color3;
+      background: $-button-info-bg-color-dark;
+      color: $-button-info-color-dark;
     }
 
     @include when(plain) {
       background: transparent;
 
       @include when(info) {
-        color: $-dark-color;
+        color: $-button-info-plain-normal-color-dark;
+        border-color: $-button-info-plain-border-color-dark;
 
         &::after {
-          border-color: $-dark-background5;
+          border-color: $-button-info-plain-border-color-dark;
         }
       }
     }
 
     @include when(text) {
       @include when(disabled) {
-        color: $-dark-color-gray;
+        color: $-button-normal-disabled-color-dark;
         background: transparent;
       }
     }
 
     @include when(icon) {
-      color: $-dark-color;
+      color: $-button-icon-color-dark;
 
       @include when(disabled) {
-        color: $-dark-color-gray;
+        color: $-button-icon-disabled-color-dark;
         background: transparent;
       }
 
@@ -47,7 +50,7 @@
   display: inline-block;
   outline: none;
   -webkit-appearance: none;
-  background: transparent;
+  background: $-button-normal-bg;
   box-sizing: border-box;
   border: none;
   border-radius: 0;
@@ -63,9 +66,9 @@
     left: 50%;
     width: 100%;
     height: 100%;
-    background: $-color-black;
+    background: $-button-active-overlay-color;
     border: inherit;
-    border-color: $-color-black;
+    border-color: $-button-active-overlay-color;
     border-radius: inherit;
     transform: translate(-50%, -50%);
     opacity: 0;

package/components/oxy-calendar/index.scss

@@ -3,38 +3,62 @@
 
 .oxy-theme-dark {
   @include b(calendar) {
+    background-color: $-calendar-bg-dark;
+    --oxy-picker-bg: #{$-calendar-picker-bg-dark};
+    --oxy-picker-column-color: #{$-calendar-picker-color-dark};
+    --oxy-picker-column-disabled-color: #{$-calendar-picker-disabled-color-dark};
+    --oxy-picker-column-select-bg: #{$-calendar-picker-select-bg-dark};
+    --oxy-picker-loading-bg: #{$-picker-loading-bg-dark};
+
+    :deep(.oxy-popup),
+    :deep(.oxy-action-sheet) {
+      background-color: $-calendar-bg-dark;
+    }
 
     @include e(title) {
-      color: $-dark-color;
+      color: $-calendar-title-color-dark;
     }
 
     :deep(.oxy-calendar__arrow),
     :deep(.oxy-calendar__close),
     :deep(.oxy-calendar__clear) {
-      color: $-dark-color;
+      color: $-calendar-close-color-dark;
     }
 
     @include e(range-label-item) {
-      color: $-dark-color;
+      color: $-calendar-range-label-color-dark;
 
       @include when(placeholder) {
-        color: $-dark-color-gray;
+        color: $-calendar-range-placeholder-color-dark;
       }
     }
 
     @include e(range-sperator) {
-      color: $-dark-color-gray;
+      color: $-calendar-range-sperator-color-dark;
     }
 
     :deep(.oxy-calendar__cell--placeholder) {
       .oxy-cell__value {
-        color: $-dark-color-gray;
+        color: $-calendar-range-placeholder-color-dark;
       }
     }
   }
 }
 
 @include b(calendar) {
+  background-color: $-calendar-bg;
+  --oxy-action-sheet-bg: #{$-calendar-bg};
+  --oxy-popup-bg: #{$-calendar-bg};
+  --oxy-picker-bg: #{$-calendar-picker-bg};
+  --oxy-picker-column-color: #{$-calendar-picker-color};
+  --oxy-picker-column-disabled-color: #{$-calendar-disabled-color};
+  --oxy-picker-column-select-bg: #{$-calendar-picker-select-bg};
+  --oxy-picker-loading-bg: #{$-calendar-picker-loading-bg};
+
+  :deep(.oxy-popup),
+  :deep(.oxy-action-sheet) {
+    background-color: $-calendar-bg;
+  }
 
   @include e(header) {
     position: relative;
@@ -101,7 +125,7 @@
     color: $-calendar-day-color;
 
     @include when(placeholder) {
-      color: $-calendar-disabled-color;
+      color: $-calendar-range-placeholder-color;
     }
   }
 
@@ -137,7 +161,7 @@
 
     @include m(placeholder) {
       .oxy-cell__value {
-        color: $-input-placeholder-color;
+        color: $-calendar-range-placeholder-color;
       }
     }
   }

package/components/oxy-calendar-view/month/index.scss

@@ -4,17 +4,17 @@
 .oxy-theme-dark {
   @include b(month) {
     @include e(title) {
-      color: $-dark-color;
+      color: $-calendar-panel-title-color-dark;
     }
 
     @include e(days) {
-      color: $-dark-color;
+      color: $-calendar-day-color-dark;
     }
 
     @include e(day) {
       @include when(disabled) {
         .oxy-month__day-text {
-          color: $-dark-color-gray;
+          color: $-calendar-disabled-color-dark;
         }
       }
     }

package/components/oxy-calendar-view/monthPanel/index.scss

@@ -4,18 +4,18 @@
 .oxy-theme-dark {
   @include b(month-panel) {
     @include e(title) {
-      color: $-dark-color;
+      color: $-calendar-panel-title-color-dark;
     }
 
     @include e(weeks) {
       box-shadow: $-calendar-panel-shadow-dark;
-      color: $-dark-color;
+      color: $-calendar-week-color-dark;
     }
 
     @include e(time-label) {
-      color: $-dark-color;
+      color: $-calendar-picker-color-dark;
       &::after{
-        background: $-dark-background4;
+        background: $-calendar-picker-select-bg-dark;
       }
     }
   }

package/components/oxy-calendar-view/year/index.scss

@@ -4,18 +4,18 @@
 .oxy-theme-dark {
   @include b(year) {
     @include e(title) {
-      color: $-dark-color;
+      color: $-calendar-panel-title-color-dark;
     }
 
     @include e(months) {
-      color: $-dark-color;
+      color: $-calendar-day-color-dark;
     }
 
     @include e(month) {
 
       @include when(disabled) {
         .oxy-year__month-text {
-          color: $-dark-color-gray;
+          color: $-calendar-disabled-color-dark;
         }
       }
     }

package/components/oxy-calendar-view/yearPanel/index.scss

@@ -4,7 +4,7 @@
 .oxy-theme-dark {
   @include b(year-panel) {
     @include e(title) {
-      color: $-dark-color;
+      color: $-calendar-panel-title-color-dark;
       box-shadow: $-calendar-panel-shadow-dark;
     }
   }

package/components/oxy-card/index.scss

@@ -2,23 +2,23 @@
 @import "../common/abstracts/_mixin.scss";
 .oxy-theme-dark {
   @include b(card) {
-    background-color: $-dark-background2;
+    background-color: $-card-bg-dark;
 
     @include when(rectangle) {
 
       .oxy-card__content {
-        @include halfPixelBorder('top', 0, $-dark-border-color);
+        @include halfPixelBorder('top', 0, $-card-content-border-color-dark);
       }
       .oxy-card__footer {
-        @include halfPixelBorder('top', 0, $-dark-border-color);
+        @include halfPixelBorder('top', 0, $-card-content-border-color-dark);
       }
     }
 
     @include e(title-content) {
-      color: $-dark-color;
+      color: $-card-title-color-dark;
     }
     @include e(content) {
-      color: $-dark-color3;
+      color: $-card-content-color-dark;
     }
   }
 }

package/components/oxy-cell/index.scss

@@ -3,29 +3,29 @@
 
 .oxy-theme-dark {
   @include b(cell) {
-    background-color: $-dark-background2;
-    color: $-dark-color;
+    background-color: $-cell-bg-dark;
+    color: $-cell-title-color-dark;
 
     @include e(value) {
-      color: $-dark-color;
+      color: $-cell-value-color-dark;
     }
 
     @include e(label) {
-      color: $-dark-color3;
+      color: $-cell-label-color-dark;
     }
 
     @include when(hover) {
-      background-color: $-dark-background4;
+      background-color: $-cell-tap-bg-dark;
     }
 
     @include when(border) {
       .oxy-cell__wrapper {
-        @include halfPixelBorder('top', 0, $-dark-border-color);
+        @include halfPixelBorder('top', 0, $-cell-border-color-dark);
       }
     }
 
     :deep(.oxy-cell__arrow-right) {
-      color: $-dark-color;
+      color: $-cell-arrow-color-dark;
     }
   }
 }
@@ -33,7 +33,7 @@
 @include b(cell) {
   position: relative;
   padding-left: $-cell-padding;
-  background-color: $-color-white;
+  background-color: $-cell-bg;
   text-decoration: none;
   color: $-cell-title-color;
   line-height: $-cell-line-height;
@@ -44,7 +44,7 @@
 
   @include when(border) {
     .oxy-cell__wrapper {
-      @include halfPixelBorder('top');
+      @include halfPixelBorder('top', 0, $-cell-border-color);
     }
   }
 

package/components/oxy-cell-group/index.scss

@@ -3,36 +3,36 @@
 
 .oxy-theme-dark {
   @include b(cell-group) {
-    background-color: $-dark-background2;
+    background-color: $-cell-group-bg-dark;
 
     @include when(border) {
       .oxy-cell-group__title {
-        @include halfPixelBorder('bottom', 0, $-dark-border-color);
+        @include halfPixelBorder('bottom', 0, $-cell-border-color-dark);
       }
     }
 
     @include e(title) {
-      background: $-dark-background2;
-      color: $-dark-color;
+      background: $-cell-group-bg-dark;
+      color: $-cell-group-title-color-dark;
     }
 
     @include e(right) {
-      color: $-dark-color3;
+      color: $-cell-group-value-color-dark;
     }
 
     @include e(body) {
-      background: $-dark-background2;
+      background: $-cell-group-bg-dark;
     }
 
   }
 }
 
 @include b(cell-group) {
-  background-color: $-color-white;
+  background-color: $-cell-group-bg;
 
   @include when(border) {
     .oxy-cell-group__title {
-      @include halfPixelBorder;
+      @include halfPixelBorder('bottom', 0, $-cell-border-color);
     }
   }
   @include e(title) {
@@ -40,7 +40,7 @@
     display: flex;
     justify-content: space-between;
     padding: $-cell-group-padding;
-    background: $-color-white;
+    background: $-cell-group-bg;
     font-size: $-cell-group-title-fs;
     color: $-cell-group-title-color;
     font-weight: $-fw-medium;
@@ -51,6 +51,6 @@
     font-size: $-cell-group-value-fs;
   }
   @include e(body) {
-    background: $-color-white;
+    background: $-cell-group-bg;
   }
 }

package/components/oxy-checkbox/index.scss

@@ -3,14 +3,55 @@
 .oxy-theme-dark {
   @include b(checkbox) {
     @include e(shape) {
-      background-color: $-dark-background;
-      border-color: $-color-gray-6;
+      background-color: $-checkbox-bg-dark;
+      border-color: $-checkbox-border-color-dark;
     }
     @include e(txt) {
-      color: $-dark-color;
+      color: $-checkbox-text-color-dark;
     }
     @include e(label) {
-      color: $-dark-color3;
+      color: $-checkbox-label-color-dark;
+    }
+    @include e(icon) {
+      background: $-checkbox-icon-bg-dark;
+    }
+
+    @include when(button) {
+      .oxy-checkbox__label {
+        background: $-checkbox-button-bg-dark;
+        border-color: $-checkbox-button-border-dark;
+      }
+      @include when(checked) {
+        .oxy-checkbox__label {
+          background: $-checkbox-checked-btn-bg-dark;
+        }
+      }
+      @include when(disabled) {
+        .oxy-checkbox__label {
+          border-color: $-checkbox-button-disabled-border-dark;
+          color: $-checkbox-disabled-label-color-dark;
+        }
+      }
+      @include when(checked) {
+        @include when(disabled) {
+          .oxy-checkbox__label {
+            border-color: $-checkbox-disabled-check-bg-dark;
+            background: $-checkbox-disabled-check-bg-dark;
+            color: $-checkbox-disabled-check-color-dark;
+          }
+        }
+      }
+    }
+
+    @include when(disabled) {
+      .oxy-checkbox__shape {
+        border-color: $-checkbox-disabled-check-bg-dark;
+        background: $-checkbox-disabled-color-dark;
+        color: $-checkbox-disabled-check-color-dark;
+      }
+      .oxy-checkbox__label {
+        color: $-checkbox-disabled-label-color-dark;
+      }
     }
   }
 }
@@ -72,7 +113,7 @@
     color: $-checkbox-label-color;
   }
   @include e(icon) {
-    background: $-color-white;
+    background: $-checkbox-icon-bg;
     border-radius: $-checkbox-square-radius;
     @include when(icon-checked) {
       background: $-checkbox-checked-color;
@@ -115,7 +156,7 @@
     @include when(checked) {
       .oxy-checkbox__label {
         border-color: $-checkbox-checked-color;
-        background: $-color-white;
+        background: $-checkbox-checked-btn-bg;
         color: $-checkbox-checked-color;
       }
     }

package/components/oxy-checkbox-group/index.scss

@@ -3,7 +3,7 @@
 
 .oxy-theme-dark {
   @include b(checkbox-group) {
-    background-color: $-dark-background2;
+    background-color: $-checkbox-bg-dark;
   }
 }
 @include b(checkbox-group) {

package/components/oxy-col-picker/index.scss

@@ -5,29 +5,29 @@
   @include b(col-picker) {
     @include e(list-item) {
       @include when(disabled) {
-        color: $-dark-color3;
+        color: $-col-picker-list-color-disabled-dark;
       }
     }
 
     @include e(list-item-tip) {
-      color: $-dark-color-gray;
+      color: $-col-picker-list-color-tip-dark;
     }
 
     :deep(.oxy-col-picker__arrow) {
-      color: $-dark-color;
+      color: $-col-picker-arrow-color-dark;
     }
 
     @include e(list) {
-      color: $-dark-color;
+      color: $-col-picker-list-color-dark;
     }
 
     @include e(selected) {
-      color: $-dark-color;
+      color: $-col-picker-selected-color-dark;
     }
 
     :deep(.oxy-col-picker__cell--placeholder) {
       .oxy-cell__value {
-        color: $-dark-color-gray;
+        color: $-col-picker-placeholder-color-dark;
       }
     }
   }
@@ -57,7 +57,7 @@
 
     @include m(placeholder) {
       .oxy-cell__value {
-        color: $-input-placeholder-color;
+        color: $-col-picker-placeholder-color;
       }
     }
   }

package/components/oxy-collapse/index.scss

@@ -3,16 +3,20 @@
 
 .oxy-theme-dark {
   @include b(collapse) {
-    background: $-dark-background2;
+    background: $-collapse-bg-dark;
 
     @include e(content) {
-      color: $-dark-color3;
+      color: $-collapse-body-color-dark;
+    }
+
+    @include e(more) {
+      color: $-collapse-more-color;
     }
   }
 }
 
 @include b(collapse) {
-  background: $-color-white;
+  background: $-collapse-bg;
 
   @include when(viewmore) {
     padding: $-collapse-side-padding;

package/components/oxy-collapse-item/index.scss

@@ -3,23 +3,27 @@
 
 .oxy-theme-dark {
   @include b(collapse-item) {
-    @include halfPixelBorder('top', 0, $-dark-border-color);
+    @include halfPixelBorder('top', 0, $-collapse-border-color-dark);
 
 
     @include e(title) {
-      color: $-dark-color;
+      color: $-collapse-title-color-dark;
     }
 
     @include e(body) {
-      color: $-dark-color3;
+      color: $-collapse-body-color-dark;
+    }
+
+    @include edeep(arrow) {
+      color: $-collapse-arrow-color-dark;
     }
 
     @include when(disabled) {
       .oxy-collapse-item__title {
-        color: $-dark-color-gray;
+        color: $-collapse-disabled-color-dark;
       }
       .oxy-collapse-item__arrow {
-        color: $-dark-color-gray;
+        color: $-collapse-disabled-color-dark;
       }
     }
   }