refactor(theme): [scroll-text] refactor scroll-text、scrollbar、tall-st…

…orage、top-box theme vars (#2292)
opentiny · Oct 18, 2024 · 5ccd986 · 5ccd986
1 parent 831d4cd
commit 5ccd986
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 68 deletions.
diff --git a/packages/theme/src/scroll-text/index.less b/packages/theme/src/scroll-text/index.less
@@ -17,14 +17,14 @@
 
 .@{scroll-text-prefix-cls} {
   &__wrapper {
-    .component-css-vars-scroll-text();
+    .inject-ScrollText-vars();
   }
 
   width: 300px;
-  height: var(--ti-scroll-text-height);
-  line-height: var(--ti-scroll-text-height);
-  background: var(--ti-scroll-text-bg-color);
-  margin: var(--ti-scroll-text-margin-vertical) var(--ti-scroll-text-margin-horizontal);
+  height: var(--tv-ScrollText-height);
+  line-height: var(--tv-ScrollText-height);
+  background: var(--tv-ScrollText-bg-color);
+  margin: 0 auto;
   overflow: hidden;
 
   & &__content {
@@ -50,16 +50,6 @@
       animation-timing-function: linear;
       justify-content: center;
 
-      // 兼容ie10-ie11
-      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-        display: inline-block;
-      }
-
-      // 兼容edge
-      @supports (-ms-ime-align: auto) {
-        display: inline-block;
-      }
-
       &.left {
         animation-name: moveLeft;
       }
@@ -106,12 +96,12 @@
       width: fit-content;
       min-width: 100%;
 
-      >div.left {
+      > div.left {
         min-width: 100%;
         animation-name: moveLeftWidthAdapt;
       }
 
-      >div.right {
+      > div.right {
         min-width: 100%;
         animation-name: moveRightWidthAdapt;
       }
@@ -163,25 +153,25 @@
   0% {
     transform: translateX(100%);
   }
- 
+
   50% {
     transform: translateX(0);
   }
- 
+
   100% {
     transform: translateX(-100%);
   }
 }
- 
+
 @keyframes moveRightWidthAdapt {
   0% {
     transform: translateX(-100%);
   }
- 
+
   50% {
     transform: translateX(0);
   }
- 
+
   100% {
     transform: translateX(100%);
   }

diff --git a/packages/theme/src/scroll-text/vars.less b/packages/theme/src/scroll-text/vars.less
@@ -10,9 +10,7 @@
 *
 */
 
-.component-css-vars-scroll-text() {
-  --ti-scroll-text-height: var(--ti-common-size-height-small, 24px);
-  --ti-scroll-text-bg-color: #f1f1f1;
-  --ti-scroll-text-margin-vertical: 0;
-  --ti-scroll-text-margin-horizontal: auto;
+.inject-ScrollText-vars() {
+  --tv-ScrollText-height: var(--tv-size-height-xs);
+  --tv-ScrollText-bg-color: var(--tv-color-bg);
 }
diff --git a/packages/theme/src/scrollbar/index.less b/packages/theme/src/scrollbar/index.less
@@ -16,7 +16,7 @@
 @scrollbar-prefix-cls: ~'@{css-prefix}scrollbar';
 
 .@{scrollbar-prefix-cls} {
-  .component-css-vars-scrollbar();
+  .inject-Scrollbar-vars();
 
   overflow: hidden;
   position: relative;
@@ -45,12 +45,12 @@
     width: 0;
     height: 0;
     cursor: pointer;
-    border-radius: var(--ti-scrollbar-thumb-border-radius);
-    background-color: var(--ti-scrollbar-thumb-bg-color);
+    border-radius: var(--tv-Scrollbar-thumb-border-radius);
+    background-color: var(--tv-Scrollbar-thumb-bg-color);
     transition: 0.3s background-color;
 
     &:hover {
-      background-color: var(--ti-scrollbar-thumb-hover-bg-color);
+      background-color: var(--tv-Scrollbar-thumb-hover-bg-color);
     }
   }
 
@@ -63,9 +63,9 @@
     transition: opacity 120ms ease-out;
 
     &.is-vertical {
-      width: var(--ti-scrollbar-vertical-width);
+      width: var(--tv-Scrollbar-vertical-width);
       top: 2px;
-      right: var(--ti-scrollbar-vertical-right);
+      right: var(--tv-Scrollbar-vertical-right);
 
       & > div {
         width: 100%;

diff --git a/packages/theme/src/scrollbar/vars.less b/packages/theme/src/scrollbar/vars.less
@@ -22,15 +22,15 @@
 *
 */
 
-.component-css-vars-scrollbar() {
+.inject-Scrollbar-vars() {
   // 垂直滚动条距离右侧距离
-  --ti-scrollbar-vertical-right: 4px;
+  --tv-Scrollbar-vertical-right: var(--tv-space-sm);
   // 垂直滚动条宽度
-  --ti-scrollbar-vertical-width: 8px;
+  --tv-Scrollbar-vertical-width: var(--tv-space-md);
   // 垂直滚动条滑块背景色
-  --ti-scrollbar-thumb-bg-color: var(--ti-common-scrollbar-thumb-bg-color, #dbdbdb);
+  --tv-Scrollbar-thumb-bg-color: var(--tv-color-bg-scrollbar-thumb);
   // 垂直滚动条滑块悬浮时背景色
-  --ti-scrollbar-thumb-hover-bg-color: var(--ti-common-scrollbar-thumb-bg-color, #dbdbdb);
+  --tv-Scrollbar-thumb-hover-bg-color: var(--tv-color-bg-scrollbar-thumb-hover);
   // 垂直滚动条滑块圆角
-  --ti-scrollbar-thumb-border-radius: var(--ti-common-scrollbar-thumb-border-radius, 4px);
+  --tv-Scrollbar-thumb-border-radius: var(--tv-border-radius-scrollbar-thumb);
 }
diff --git a/packages/theme/src/tall-storage/index.less b/packages/theme/src/tall-storage/index.less
@@ -19,15 +19,15 @@
 @storage-item-prefix-cls: ~'@{css-prefix}storage-item';
 
 .@{tall-storage-prefix-cls} {
-  .component-css-vars-tall-storage();
+  .inject-TallStorage-vars();
 
   position: relative;
 
   .@{storage-list-style-prefix-cls} {
     position: absolute;
-    background-color: var(--ti-tall-storage-bg-color);
-    box-shadow: var(--ti-common-shadow-2-down);
-    border-radius: var(--ti-tall-storage-border-radius);
+    background-color: var(--tv-TallStorage-bg-color);
+    box-shadow: var(--tv-TallStorage-box-shadow);
+    border-radius: var(--tv-TallStorage-border-radius);
     width: 100%;
     box-sizing: border-box;
     z-index: 10;
@@ -36,18 +36,18 @@
       padding: 0;
       list-style: none;
       overflow-y: auto;
-      max-height: calc(var(--ti-tall-storage-item-height) * 5);
+      max-height: calc(var(--tv-TallStorage-item-height) * 5);
 
       .@{storage-item-prefix-cls} {
-        height: var(--ti-tall-storage-item-height);
-        line-height: var(--ti-tall-storage-item-height);
+        height: var(--tv-TallStorage-item-height);
+        line-height: var(--tv-TallStorage-item-height);
         padding: 0 8px;
         white-space: nowrap;
 
         &:hover,
         &.item-hover {
           cursor: pointer;
-          background-color: var(--ti-tall-storage-item-bg-color);
+          background-color: var(--tv-TallStorage-item-bg-color);
         }
       }
     }

diff --git a/packages/theme/src/tall-storage/vars.less b/packages/theme/src/tall-storage/vars.less
@@ -10,9 +10,15 @@
 *
 */
 
-.component-css-vars-tall-storage() {
-  --ti-tall-storage-bg-color: var(--ti-common-color-light, #ffffff);
-  --ti-tall-storage-border-radius: var(--ti-common-border-radius-normal, 6px);
-  --ti-tall-storage-item-height: var(--ti-common-size-height-normal, 32px);
-  --ti-tall-storage-item-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
+.inject-TallStorage-vars() {
+  // 背景颜色
+  --tv-TallStorage-bg-color: var(--tv-color-bg-secondary);
+  // 圆角
+  --tv-TallStorage-border-radius: var(--tv-border-radius-md);
+  // 选项高度
+  --tv-TallStorage-item-height: var(--tv-size-height-md);
+  // 选项背景颜色
+  --tv-TallStorage-item-bg-color: var(--tv-color-bg);
+  // 阴影
+  --tv-TallStorage-box-shadow: var(--tv-shadow-2-down);
 }
diff --git a/packages/theme/src/top-box/index.less b/packages/theme/src/top-box/index.less
@@ -18,15 +18,15 @@
 @top-box-prefix-cls: ~'@{css-prefix}top-box';
 
 .@{top-box-prefix-cls} {
-  .component-css-vars-top-box();
+  .inject-TopBox-vars();
 
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   width: 400px;
   max-height: 600px;
-  background: var(--ti-top-box-bg-color);
+  background: var(--tv-TopBox-bg-color);
   padding: 24px;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
   transition:
@@ -35,7 +35,7 @@
     top 0.4s;
 
   & &__icon {
-    font-size: var(--ti-top-box-icon-font-size, 24px);
+    font-size: var(--tv-TopBox-icon-font-size);
     vertical-align: middle;
   }
 
@@ -74,23 +74,23 @@
   }
 
   &--success &__icon {
-    fill: var(--ti-top-box-success-icon-color);
+    fill: var(--tv-TopBox-success-icon-color);
   }
 
   &--error &__icon {
-    fill: var(--ti-top-box-error-icon-color);
+    fill: var(--tv-TopBox-error-icon-color);
   }
 
   &--warning &__icon {
-    fill: var(--ti-top-box-warning-icon-color);
+    fill: var(--tv-TopBox-warning-icon-color);
   }
 
   &--help &__icon {
-    fill: var(--ti-top-box-help-icon-color);
+    fill: var(--tv-TopBox-help-icon-color);
   }
 
   &--info &__icon {
-    fill: var(--ti-top-box-info-icon-color);
+    fill: var(--tv-TopBox-info-icon-color);
   }
 
   &-fade-enter,

diff --git a/packages/theme/src/top-box/vars.less b/packages/theme/src/top-box/vars.less
@@ -10,12 +10,12 @@
 *
 */
 
-.component-css-vars-top-box() {
-  --ti-top-box-bg-color: var(--ti-common-color-light, #ffffff);
-  --ti-top-box-icon-font-size: var(--ti-common-font-size-5, 24px);
-  --ti-top-box-success-icon-color: var(--ti-common-color-success-normal, #5cb300);
-  --ti-top-box-error-icon-color: var(--ti-base-color-bg-8, #c7000b);
-  --ti-top-box-warning-icon-color: var(--ti-common-color-warning-normal, #ff8800);
-  --ti-top-box-help-icon-color: var(--ti-base-color-brand-6, #191919);
-  --ti-top-box-info-icon-color: var(--ti-common-color-info-normal, #191919);
+.inject-TopBox-vars() {
+  --tv-TopBox-bg-color: var(--tv-color-bg-secondary);
+  --tv-TopBox-icon-font-size: 24px;
+  --tv-TopBox-success-icon-color: var(--tv-color-success-icon);
+  --tv-TopBox-error-icon-color: var(--tv-color-error-icon);
+  --tv-TopBox-warning-icon-color: var(--tv-color-warn-icon);
+  --tv-TopBox-help-icon-color: var(--tv-color-icon-control);
+  --tv-TopBox-info-icon-color: var(--tv-color-info-icon);
 }