oxy-uni-ui 2.1.4 → 2.1.5

package/components/oxy-corner/index.scss

@@ -258,7 +258,7 @@ $-corner-embedded-side-padding: $-spacing-20;
         bottom: 0;
         width: $-corner-embedded-notch-width;
         height: $-corner-ribbon-height;
-        background-color: $-color-white;
+        background-color: $-corner-notch-bg;
         transform: skewX(30deg);
       }
       .oxy-corner__text {

package/components/oxy-count-down/index.scss

@@ -3,7 +3,7 @@
 
 .oxy-theme-dark {
   @include b(count-down) {
-    color: $-dark-color;
+    color: $-count-down-text-color-dark;
   }
 }
 
@@ -12,4 +12,4 @@
   color: $-count-down-text-color;
   font-size: $-count-down-font-size;
   line-height: $-count-down-line-height;
-}
+}

package/components/oxy-curtain/index.scss

@@ -18,7 +18,7 @@
   @include e(content) {
     position: relative;
     display: inline-block;
-    background: transparent;
+    background: $-curtain-content-bg;
     border-radius: $-curtain-content-radius;
   }
   @include e(content-link) {

package/components/oxy-date-strip-item/index.scss

@@ -82,7 +82,7 @@
 			background-color: $-date-strip-active-color;
 		}
 		&--active-text {
-			color: $-color-white;
+			color: $-date-strip-active-text-color;
 			&-none {
 				color:  $-date-strip-active-color;
 			}

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

@@ -5,26 +5,29 @@
   @include b(datetime-picker) {
 
     @include e(placeholder) {
-      color: $-dark-color-gray;
+      color: $-datetime-picker-placeholder-color-dark;
+    }
+
+    :deep(.oxy-datetime-picker__arrow) {
+      color: $-datetime-picker-arrow-color-dark;
     }
 
-    :deep(.oxy-datetime-picker__arrow),
     :deep(.oxy-datetime-picker__clear) {
-      color: $-dark-color;
+      color: $-datetime-picker-clear-color-dark;
     }
 
     @include e(action) {
       @include m(cancel) {
-        color: $-dark-color;
+        color: $-picker-toolbar-cancel-color-dark;
       }
     }
 
     @include e(region) {
-      color: $-dark-color;
+      color: $-picker-region-color-dark;
 
       @include when(active) {
         background: $-picker-region-bg-active-color;
-        color: $-dark-color;
+        color: $-picker-region-active-color;
       }
     }
   }
@@ -67,7 +70,7 @@
   }
 
   @include e(placeholder) {
-    color: $-input-placeholder-color;
+    color: $-datetime-picker-placeholder-color;
   }
 
   @include edeep(arrow) {
@@ -86,6 +89,7 @@
 
   @include edeep(popup) {
     border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
+    --oxy-popup-bg: #{$-picker-bg};
   }
 
   @include e(wraper) {
@@ -142,7 +146,7 @@
 
     @include when(active) {
       background: $-picker-region-bg-active-color;
-      color: $-color-white;
+      color: $-picker-region-active-color;
     }
   }
 

package/components/oxy-divider/index.scss

@@ -3,10 +3,10 @@
 
 .oxy-theme-dark {
   @include b(divider) {
-    color: $-dark-color3;
+    color: $-divider-color-dark;
 
     @include e(line) {
-      background: $-dark-color-gray;
+      background: $-divider-line-color-dark;
     }
   }
 }
@@ -97,4 +97,4 @@
     }
   }
 
-}
+}

package/components/oxy-drop-menu/index.scss

@@ -3,15 +3,15 @@
 
 .oxy-theme-dark {
   @include b(drop-menu) {
-    color: $-dark-color;
+    color: $-drop-menu-color-dark;
 
     @include e(list) {
-      background-color: $-dark-background2;
+      background-color: $-drop-menu-bg-dark;
     }
 
     @include e(item) {
       @include when(disabled) {
-        color: $-dark-color-gray;
+        color: $-drop-menu-disabled-color-dark;
       }
     }
   }

package/components/oxy-drop-menu-item/index.scss

@@ -3,10 +3,14 @@
 
 .oxy-theme-dark {
   @include b(drop-item) {
-    color: $-dark-color;
+    @include edeep(popup) {
+      --oxy-popup-bg: #{$-drop-menu-bg-dark};
+    }
+
+    color: $-drop-menu-item-color-dark;
 
     @include e(tip) {
-      color: $-dark-color3;
+      color: $-drop-menu-item-color-tip-dark;
     }
   }
 }
@@ -21,6 +25,10 @@
   width: 100%;
   z-index: 101;
 
+  @include edeep(popup) {
+    --oxy-popup-bg: #{$-drop-menu-bg};
+  }
+
   @include e(popup) {
     position: absolute;
     max-height: 80%;

package/components/oxy-drop-menu-item/oxy-drop-menu-item.vue

@@ -11,7 +11,7 @@
       :position="position"
       :max-width="popupMaxWidth"
       :custom-style="`position: absolute; pointer-events: auto; max-height: ${popupHeight ? popupHeight : '80%'}; ${customPopupStyle}`"
-      :custom-class="customPopupClass"
+      :custom-class="`oxy-drop-item__popup ${customPopupClass}`"
       :modal="false"
       :close-on-click-modal="false"
       :root-portal="rootPortal"

package/components/oxy-fab/index.scss

@@ -11,6 +11,31 @@
     width: $-fab-trigger-width !important;
     height: $-fab-trigger-height !important;
     border-radius: calc($-fab-trigger-height / 2) !important;
+
+    &.is-primary {
+      background: $-fab-trigger-primary-bg !important;
+      color: $-fab-trigger-primary-color !important;
+    }
+
+    &.is-success {
+      background: $-fab-trigger-success-bg !important;
+      color: $-fab-trigger-success-color !important;
+    }
+
+    &.is-info {
+      background: $-fab-trigger-info-bg !important;
+      color: $-fab-trigger-info-color !important;
+    }
+
+    &.is-warning {
+      background: $-fab-trigger-warning-bg !important;
+      color: $-fab-trigger-warning-color !important;
+    }
+
+    &.is-error {
+      background: $-fab-trigger-error-bg !important;
+      color: $-fab-trigger-error-color !important;
+    }
   }
 
   :deep() {

package/components/oxy-file-list/index.scss

@@ -19,7 +19,7 @@
     align-items: center;
     width: 100%;
     height: 100%;
-    border: #{$-border-width-base} solid $-color-border;
+    border: #{$-border-width-base} solid $-file-list-card-border-color;
     border-radius: $-file-list-card-radius;
     position: relative;
   }
@@ -101,10 +101,10 @@
     display: flex;
   }
   .oxy-file-list__download {
-    color: $-color-white;
+    color: $-file-list-action-text-color;
   }
   .oxy-file-list__delete {
-    color: $-color-white;
+    color: $-file-list-action-text-color;
     margin-left: $-spacing-12;
   }
 }

package/components/oxy-floating-panel/index.scss

@@ -3,10 +3,17 @@
 
 .oxy-theme-dark {
   @include b(floating-panel) {
-    background: $-dark-background2;
+    background: $-floating-panel-bg-dark;
+    color: $-floating-panel-color-dark;
+
+    @include e(header) {
+      &-bar {
+        background-color: $-floating-panel-bar-bg-dark;
+      }
+    }
 
     @include e(content) {
-      background: $-dark-background2;
+      background: $-floating-panel-content-bg-dark;
     }
   }
 }
@@ -23,6 +30,7 @@
   border-top-left-radius: $-floating-panel-radius;
   border-top-right-radius: $-floating-panel-radius;
   background-color: $-floating-panel-bg;
+  color: $-floating-panel-color;
   touch-action: none;
   will-change: transform;
   @include when(safe) {

package/components/oxy-footer/index.scss

@@ -12,6 +12,12 @@
   overflow: visible;
   padding: 0;
   background-color: $-footer-bg;
+  color: $-footer-color;
+
+  .oxy-theme-dark & {
+    background-color: $-footer-bg-dark;
+    color: $-footer-color-dark;
+  }
 
   @include when(safe) {
     box-sizing: content-box;

package/components/oxy-gap/index.scss

@@ -2,8 +2,10 @@
 @import "../common/abstracts/mixin";
 
 @include b(gap) {
+  background-color: $-gap-bg;
+
   @include m(safe) {
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }
-}
+}

package/components/oxy-gap/oxy-gap.vue

@@ -24,8 +24,8 @@ const props = defineProps(gapProps)
 
 const rootStyle = computed(() => {
   const rootStyle: CSSProperties = {}
-  if (isDef(props.bgColor)) {
-    rootStyle['background'] = props.bgColor
+  if (props.bgColor) {
+    rootStyle['--oxy-gap-bg'] = props.bgColor
   }
   if (isDef(props.height)) {
     rootStyle['height'] = withDefaultUnit(props.height)

package/components/oxy-gap/types.ts

@@ -5,7 +5,7 @@ export const gapProps = {
   /**
    * 背景颜色
    */
-  bgColor: makeStringProp('transparent'),
+  bgColor: makeStringProp(''),
   /**
    * 是否开启底部安全区
    */

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

@@ -3,26 +3,27 @@
 
 .oxy-theme-dark {
   @include b(grid-item) {
+    color: $-grid-item-color-dark;
 
     @include when(border) {
       &::before {
-        background-color: $-dark-border-color;
+        background-color: $-grid-item-border-color-dark;
       }
       &::after {
-        background-color: $-dark-border-color;
+        background-color: $-grid-item-border-color-dark;
       }
     }
 
       // 第一行元素
   @include when(first) {
     &::after {
-      background-color: $-dark-border-color;
+      background-color: $-grid-item-border-color-dark;
     }
   }
 
 
     @include e(content) {
-      background-color: $-dark-background2;
+      background-color: $-grid-item-bg-dark;
 
       @include m(hover) {
         background-color: $-grid-item-hover-bg-dark !important;
@@ -34,6 +35,7 @@
 @include b(grid-item) {
   height: 100%;
   font-size: $-grid-item-fs;
+  color: $-grid-item-color;
   box-sizing: border-box;
 
   position: relative;
@@ -143,6 +145,7 @@
     margin-top: $-spacing-16;
     font-size: $-grid-item-fs;
     line-height: $-grid-item-fs;
+    color: inherit;
     @include lineEllipsis;
   }
 }

package/components/oxy-grid-item/oxy-grid-item.vue

@@ -105,15 +105,16 @@ function init() {
   const children = grid.value.children
   const width = grid.value.props.column ? 100 / grid.value.props.column + '%' : 100 / children.length + '%'
   const gutterSize = grid.value.props.gutter ? withDefaultUnit(grid.value.props.gutter) : ''
+  const contentBgStyle = grid.value.props.bgColor
+    ? `--oxy-grid-item-bg:${grid.value.props.bgColor};--oxy-grid-item-bg-dark:${grid.value.props.bgColor};`
+    : ''
   // 单独定义间隔
   const gutterStyle = gutterSize ? `padding:${gutterSize} ${gutterSize} 0 0; background-color: transparent;` : ''
   // 单独定义正方形
   const squareStyle = grid.value.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
   // 间隔+正方形
   gutterContentStyle.value =
-    gutterSize && grid.value.props.square
-      ? `right: ${gutterSize}; bottom:${gutterSize};height: auto; background-color: ${grid.value.props.bgColor}`
-      : `background-color: ${grid.value.props.bgColor}`
+    gutterSize && grid.value.props.square ? `right: ${gutterSize}; bottom:${gutterSize};height: auto;${contentBgStyle}` : contentBgStyle
 
   border.value = Boolean(grid.value.props.border)
   square.value = Boolean(grid.value.props.square)

package/components/oxy-index-anchor/index.scss

@@ -3,8 +3,8 @@
 
 .oxy-theme-dark {
   @include b(index-anchor) {
-    background-color: $-color-gray-8;
-    color: $-color-white;
+    background-color: $-index-anchor-bg-dark;
+    color: $-index-anchor-color-dark;
   }
 }
 
@@ -21,10 +21,10 @@
 // #endif
 
 @include b(index-anchor) {
-  background-color: $-color-gray-2;
+  background-color: $-index-anchor-bg;
   padding: $-spacing-24;
   font-size: $-fs-content;
-  color: $-color-title;
+  color: $-index-anchor-color;
 
   @include when(sticky){
     position: sticky;

package/components/oxy-index-bar/index.scss

@@ -3,8 +3,12 @@
 
 .oxy-theme-dark {
   @include b(index-bar) {
+    @include e(sidebar) {
+      background: $-index-bar-sidebar-bg;
+    }
+
     @include e(index) {
-      color: $-color-white;
+      color: $-index-bar-index-color-dark;
     }
   }
 }
@@ -24,16 +28,17 @@
     top: 50%;
     right: 12rpx;
     transform: translateY(-50%);
+    background: $-index-bar-sidebar-bg;
   }
 
   @include e(index) {
     font-size: $-index-bar-index-font-size;
     font-weight: $-fw-medium;
-    color: $-color-title;
+    color: $-index-bar-index-color;
     padding: $-spacing-12 $-spacing-16;
 
     @include when(active) {
-      color: $-color-theme;
+      color: $-index-bar-index-active-color;
     }
   }
 }

package/components/oxy-index-bar/oxy-index-bar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="oxy-index-bar" :id="indexBarId">
+  <view :class="['oxy-index-bar', customClass]" :style="customStyle" :id="indexBarId">
     <!-- #ifdef MP-DINGTALK -->
     <view class="oxy-index-bar" :id="indexBarId">
       <!-- #endif -->
@@ -23,6 +23,19 @@
   </view>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'oxy-index-bar',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
 <script setup lang="ts">
 import type { AnchorIndex } from './types'
 import { indexBarInjectionKey, indexBarProps } from './types'

package/components/oxy-index-bar/types.ts

@@ -1,10 +1,11 @@
 import type { InjectionKey } from 'vue'
 import type { ExtractPropTypes } from 'vue'
-import { makeBooleanProp } from '../common/props'
+import { baseProps, makeBooleanProp } from '../common/props'
 
 export type AnchorIndex = number | string
 
 export const indexBarProps = {
+  ...baseProps,
   /**
    * 索引栏是否启用吸顶效果
    */

package/components/oxy-input/index.scss

@@ -3,64 +3,64 @@
 
 .oxy-theme-dark {
   @include b(input) {
-    background: $-dark-background2;
+    background: $-input-bg-dark;
 
     &::after {
-      background: $-dark-color-gray;
+      background: $-input-border-color-dark;
     }
 
     @include when(not-empty) {
       &:not(.is-disabled) {
         &::after {
-          background-color: $-dark-color;
+          background-color: $-input-not-empty-border-color-dark;
         }
       }
     }
 
 
     @include e(inner) {
-      color: $-dark-color;
+      color: $-input-color-dark;
 
       &::-webkit-input-placeholder {
-        color: $-dark-color3;
+        color: $-input-placeholder-color-dark;
       }
     }
 
     @include e(count) {
-      color: $-dark-color3;
+      color: $-input-count-color-dark;
       background: transparent;
     }
 
     @include e(count-current) {
-      color: $-dark-color;
+      color: $-input-count-current-color-dark;
     }
 
     :deep(.oxy-input__icon),
     :deep(.oxy-input__clear) {
-      color: $-dark-color;
+      color: $-input-icon-color-dark;
       background: transparent;
     }
 
     @include when(cell) {
-      background-color: $-dark-background2;
+      background-color: $-input-cell-bg-dark;
       line-height: $-cell-line-height;
 
       @include when(border) {
-        @include halfPixelBorder("top", $-input-cell-padding, $-dark-border-color);
+        @include halfPixelBorder("top", $-input-cell-padding, $-input-cell-border-color-dark);
       }
     }
 
     @include when(disabled) {
 
       .oxy-input__inner {
-        color: $-dark-color-gray;
+        color: $-input-disabled-color-dark;
         background: transparent;
       }
     }
 
 
     @include e(label) {
-      color: $-dark-color;
+      color: $-input-label-color-dark;
     }
   }
 }
@@ -95,7 +95,7 @@
     position: relative;
     display: flex;
     width: $-input-cell-label-width;
-    color: $-cell-title-color;
+    color: $-input-label-color;
     margin-right: $-cell-padding;
     box-sizing: border-box;
     font-size: $-input-fs;
@@ -223,7 +223,7 @@
     }
 
     @include when(border) {
-      @include halfPixelBorder("top", $-input-cell-padding);
+      @include halfPixelBorder("top", $-input-cell-padding, $-input-cell-border-color);
     }
   }
 

package/components/oxy-input/placeholder.scss

@@ -4,7 +4,7 @@
 .oxy-theme-dark {
   @include b(input) {
     @include e(placeholder) {
-      color: $-dark-color3;
+      color: $-input-placeholder-color-dark;
     }
   }
 }

package/components/oxy-input-number/index.scss

@@ -4,23 +4,33 @@
 .oxy-theme-dark {
   @include b(input-number) {
     @include e(action) {
-      color: $-dark-color;
+      color: $-input-number-color-dark;
+
+      &::after {
+        border-color: $-input-number-border-color-dark;
+      }
+
       @include when(disabled) {
-        color: $-dark-color-gray;
+        color: $-input-number-disabled-color-dark;
       }
     }
 
     @include e(input) {
-      color: $-dark-color;
+      color: $-input-number-color-dark;
+    }
+
+    @include e(input-border) {
+      border-top-color: $-input-number-border-color-dark;
+      border-bottom-color: $-input-number-border-color-dark;
     }
 
     @include when(disabled) {
       .oxy-input-number__input {
-        color: $-dark-color-gray;
+        color: $-input-number-disabled-color-dark;
       }
       .oxy-input-number__sub,
       .oxy-input-number__add {
-        color: $-dark-color-gray;
+        color: $-input-number-disabled-color-dark;
       }
     }
   }
@@ -65,7 +75,7 @@
     }
 
     &:not(.is-disabled):active {
-      background-color: $-color-bg;
+      background-color: $-input-number-active-bg;
     }
 
     @include when(disabled) {

package/components/oxy-keyboard/index.scss

@@ -3,18 +3,26 @@
 
 .oxy-theme-dark {
   @include b(keyboard) {
-    background: $-dark-background5;
+    @include edeep(popup) {
+      --oxy-popup-bg: #{$-keyboard-background-dark};
+    }
+
+    background: $-keyboard-background-dark;
 
     @include e(header) {
-      color: $-dark-color;
+      color: $-keyboard-title-color-dark;
     }
   }
 }
 
 @include b(keyboard) {
+  @include edeep(popup) {
+    --oxy-popup-bg: #{$-keyboard-background};
+  }
+
   width: 100%;
   background: $-keyboard-background;
-  color: $-color-black;
+  color: $-keyboard-color;
   user-select: none;
 
   @include m(with-title) {