perf(theme-mobile): remove css vars from :root to root class of component (#1579)

packages/theme-mobile/src/action-sheet/index.less

@@ -17,6 +17,8 @@
 @action-sheet-prefix-cls: ~'@{css-prefix}mobile-action-sheet';
 
 .@{action-sheet-prefix-cls} {
+  .component-css-vars-action-sheet();
+
   position: relative;
   height: 100%;
   &__mask {

packages/theme-mobile/src/action-sheet/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-action-sheet() {
   --ti-mobile-action-sheet-content-bg-color: #fff;
   --ti-mobile-action-sheet-menu-bg-color: var(--ti-mobile-base-color-light, #fff);
   --ti-mobile-action-sheet-item-text-color: var(--ti-mobile-base-color-info-normal, #333);

packages/theme-mobile/src/alert/index.less

@@ -18,6 +18,8 @@
 @alert-prefix-cls: ~'@{css-prefix}mobile-alert';
 
 .@{alert-prefix-cls} {
+  .component-css-vars-alert();
+
   display: flex;
   align-items: flex-start;
   clear: both;

packages/theme-mobile/src/alert/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-alert() {
   // 警告类型提示图标色
   --ti-mobile-alert-warning-icon-color: var(--ti-mobile-color-warning, #ff8800);
   // 警告类型提示链接字体色

packages/theme-mobile/src/avatar/index.less

@@ -17,6 +17,8 @@
 @avatar-prefix-cls: ~'@{css-prefix}mobile-avatar';
 
 .@{avatar-prefix-cls} {
+  .component-css-vars-avatar();
+
   display: inline-block;
   box-sizing: border-box;
   text-align: center;

packages/theme-mobile/src/avatar/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-avatar() {
   --ti-mobile-avatar-color: var(--ti-mobile-base-color-light, #fff);
   --ti-mobile-avatar-bgcolor: #c0c4cc;
   --ti-mobile-avatar-size: 40px;

packages/theme-mobile/src/badge/index.less

@@ -16,6 +16,8 @@
 @badge-prefix-cls: ~'@{css-prefix}mobile-badge';
 
 .@{badge-prefix-cls} {
+  .component-css-vars-badge();
+
   position: relative;
   vertical-align: middle;
   display: inline-block;

packages/theme-mobile/src/badge/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-badge() {
   --ti-mobile-badge-size: 18px;
   --ti-mobile-badge-font-size: 13px;
   --ti-mobile-badge-color: var(--ti-mobile-base-color-light, #fff);

packages/theme-mobile/src/button/index.less

@@ -20,6 +20,8 @@
 @button-prefix-cls: ~'@{css-prefix}mobile-button';
 
 .@{button-prefix-cls} {
+  .component-css-vars-button();
+
   position: relative;
   margin: 0;
 

packages/theme-mobile/src/button/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-button() {
   // 按钮高度-大
   --ti-mobile-button-height-large: 40px;
   // 按钮文字大小-大

packages/theme-mobile/src/checkbox/index.less

@@ -19,6 +19,8 @@
 @checkbox-prefix-cls: ~'@{css-prefix}mobile-checkbox';
 
 .@{checkbox-prefix-cls} {
+  .component-css-vars-checkbox();
+
   position: relative;
   display: inline-block;
   white-space: nowrap;

packages/theme-mobile/src/checkbox/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-checkbox() {
   // 复选框图标宽度
   --ti-mobile-checkbox-width: var(--ti-mobile-space-6x, 24px);
   // 复选框图标高度

packages/theme-mobile/src/container/index.less

@@ -16,6 +16,8 @@
 @container-prefix-cls: ~'@{css-prefix}mobile-container';
 
 .@{container-prefix-cls} {
+  .component-css-vars-container();
+
   display: flex;
   align-items: center;
   justify-content: flex-start;

packages/theme-mobile/src/container/vars.less

@@ -1,3 +1,3 @@
-:root {
+.component-css-vars-container() {
   --ti-mobile-container-common-padding: var(--ti-mobile-space-3x, 12px);
 }

packages/theme-mobile/src/dialog-box/index.less

@@ -17,6 +17,8 @@
 @dialog-box-prefix-cls: ~'@{css-prefix}mobile-dialog-box';
 
 .@{dialog-box-prefix-cls} {
+  .component-css-vars-dialog-box();
+
   position: absolute;
   left: 50%;
   top: 50%;

packages/theme-mobile/src/dialog-box/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-dialog-box() {
   --ti-mobile-dialogbox-background: var(--ti-mobile-base-color-light, #fff);
   --ti-mobile-dialogbox-width: 270px;
   --ti-mobile-dialogbox-border-color: #ccc;

packages/theme-mobile/src/error-page/index.less

@@ -11,6 +11,8 @@
 */
 
 .tiny-popup__wrapper {
+  .component-css-vars-error-page();
+
   z-index: 2147483647 !important;
   background: rgba(0, 0, 0, 0.5);
   position: fixed;

packages/theme-mobile/src/error-page/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-error-page {
   --ti-errortips-box-background: var(--ti-mobile-base-color-light, #fff);
   --ti-errortips-body-color: #5a5e66;
   --ti-errortips-body-font-size: 14px;

packages/theme-mobile/src/exception/index.less

@@ -16,6 +16,8 @@
 @exception-prefix-cls: ~'@{css-prefix}mobile-exception';
 
 .@{exception-prefix-cls} {
+  .component-css-vars-exception();
+
   display: flex;
   justify-content: center;
   align-items: center;

packages/theme-mobile/src/exception/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-exception {
   --ti-mobile-exception-main-message-color: var(--ti-mobile-common-color-text-weaken-dark, #999);
   --ti-mobile-exception-main-message-font-size: 13px;
   --ti-mobile-exception-sub-message-color: var(--ti-mobile-common-color-text-weaken-dark, #999);

packages/theme-mobile/src/file-upload/index.less

@@ -20,6 +20,8 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{file-upload-prefix-cls} {
+  .component-css-vars-file-upload();
+
   &__header {
     display: flex;
     align-items: center;

packages/theme-mobile/src/file-upload/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-file-upload() {
   --ti-mobile-file-upload-hairline-color: #ddd;
   --ti-mobile-file-upload-title-color: var(--ti-mobile-base-color-info-normal, #333333);
   --ti-mobile-file-upload-font-size: 16px;

packages/theme-mobile/src/form-item/index.less

@@ -22,9 +22,11 @@
 @numeric-prefix-cls: ~'@{css-prefix}mobile-numeric';
 
 .@{form-item-prefix-cls} {
-  margin-bottom: 12px;
+  .component-css-vars-form-item();
   .clearfix();
 
+  margin-bottom: 12px;
+
   & & {
     margin-bottom: 0;
   }

packages/theme-mobile/src/form-item/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-form-item() {
   --ti-form-item-small-line-height: 28px;
   --ti-form-item-medium-line-height: 36px;
   --ti-form-item-mini-line-height: 24px;

packages/theme-mobile/src/image-viewer/index.less

@@ -17,6 +17,8 @@
 @image-viewer-prefix-cls: ~'@{css-prefix}mobile-image-viewer';
 
 .@{image-viewer-prefix-cls} {
+  .component-css-vars-image-viewer();
+
   &__wrapper {
     position: fixed;
     top: 0;

packages/theme-mobile/src/image-viewer/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-image-viewer() {
   --ti-mobile-image-viewer-color: var(--ti-mobile-base-color-light, #fff);
   --ti-mobile-image-viewer-close-bgcolor: #606266;
   --ti-mobile-image-viewer-arrow-disabled-bgcolor: var(--ti-mobile-base-color-info-disabled, #bfbfbf);

packages/theme-mobile/src/index-bar-anchor/index.less

@@ -16,7 +16,10 @@
 @index-bar-prefix-cls: ~'@{css-prefix}mobile-index-bar-anchor';
 
 .@{index-bar-prefix-cls} {
+  .component-css-vars-index-bar-anchor();
+
   background: var(--ti-mobile-index-bar-anchor-bg-color);
+
   &__label {
     margin-left: 16px;
     line-height: 32px;

packages/theme-mobile/src/index-bar-anchor/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-index-bar-anchor() {
   --ti-mobile-index-bar-anchor-bg-color: var(--ti-mobile-common-bg-color-dark-gray, #f5f5f5);
   --ti-mobile-index-bar-anchor-text-color: var(--ti-mobile-common-color-text-weaken-dark, #999);
 }

packages/theme-mobile/src/index-bar/index.less

@@ -17,6 +17,8 @@
 @index-bar-prefix-cls: ~'@{css-prefix}mobile-index-bar';
 
 .@{index-bar-prefix-cls} {
+  .component-css-vars-index-bar();
+
   &__side {
     position: fixed;
     right: 0;

packages/theme-mobile/src/index-bar/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-index-bar() {
   --ti-mobile-index-bar-bg-color-active: var(--ti-mobile-common-bg-color-main, #4a79fe);
   --ti-mobile-index-bar-text-color: var(--ti-mobile-common-color-text-secondary, #595959);
   --ti-mobile-index-bar-text-color-active: var(--ti-mobile-common-color-text-white, #fff);

packages/theme-mobile/src/input/index.less

@@ -21,6 +21,8 @@
 @input-group-prefix-cls: ~'@{css-prefix}mobile-input-group';
 
 .@{textarea-prefix-cls} {
+  .component-css-vars-input();
+
   position: relative;
   display: inline-block;
 
@@ -93,6 +95,8 @@
 }
 
 .@{input-prefix-cls} {
+  .component-css-vars-input();
+
   position: relative;
   width: 100%;
   line-height: var(--ti-mobile-input-line-height);

packages/theme-mobile/src/input/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-input() {
   // 高度
   --ti-mobile-input-height: 40px;
   // 水平内边距

packages/theme-mobile/src/label/index.less

@@ -16,6 +16,8 @@
 @label-prefix-cls: ~'@{css-prefix}mobile-label';
 
 .@{label-prefix-cls} {
+  .component-css-vars-label();
+
   display: inline-block;
   word-break: break-word;
   hyphens: auto;

packages/theme-mobile/src/label/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-label() {
   // 主要文本色、灰色标签文本色
   --ti-mobile-label-text-color-primary: var(--ti-mobile-color-text-primary, #191919);
   // 次要文本色

packages/theme-mobile/src/list/index.less

@@ -17,6 +17,8 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{list-prefix-cls} {
+  .component-css-vars-list();
+
   width: 100%;
   min-height: 48px;
   display: flex;

packages/theme-mobile/src/list/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-list() {
   --ti-mobile-list-bgcolor: var(--ti-mobile-base-color-light, #fff);
   --ti-mobile-list-active-bgcolor: #ddd;
   --ti-mobile-list-border-color: #ddd;

packages/theme-mobile/src/mask/index.less

@@ -17,6 +17,8 @@
 @mask-prefix-cls: ~'@{css-prefix}mobile-mask';
 
 .@{mask-prefix-cls} {
+  .component-css-vars-mask();
+
   position: fixed;
   top: 0;
   bottom: 0;

packages/theme-mobile/src/mask/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-mask() {
   // 遮罩层背景色
   --tiny-mobile-mask-bg-color: var(--ti-mobile-color-bg-mask, #0000004b);
 }

packages/theme-mobile/src/mini-picker/index.less

@@ -17,6 +17,8 @@
 @mini-picker-prefix-cls: ~'@{css-prefix}mobile-mini-picker';
 
 .@{mini-picker-prefix-cls} {
+  .component-css-vars-mini-picker();
+
   &__mask {
     position: fixed;
     top: 0;

packages/theme-mobile/src/mini-picker/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-mini-picker() {
   --ti-mobile-mini-picker-mask-background: rgba(0, 0, 0, 0.6);
   --ti-mobile-mini-picker-content-bgcolor: #ddd;
   --ti-mobile-mini-picker-toolbar-height: 44px;

packages/theme-mobile/src/multi-select-item/index.less

@@ -18,6 +18,8 @@
 @multi-select-item-prefix-cls: ~'@{css-prefix}mobile-multi-select-item';
 
 .@{multi-select-item-prefix-cls} {
+  .component-css-vars-multi-select-item();
+
   width: 100%;
   height: var(--ti-mobile-multi-select-item-height);
   padding: 0 var(--ti-mobile-multi-select-item-padding-horizontal);

packages/theme-mobile/src/multi-select-item/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-multi-select-item() {
   // 选项高度
   --ti-mobile-multi-select-item-height: 48px;
   // 选项水平内边距

packages/theme-mobile/src/multi-select/index.less

@@ -18,6 +18,8 @@
 @multi-select-prefix-cls: ~'@{css-prefix}mobile-multi-select';
 
 .@{multi-select-prefix-cls} {
+  .component-css-vars-multi-select();
+
   position: relative;
   background: var(--ti-mobile-multi-select-bg, #fff);
   width: 100%;

packages/theme-mobile/src/multi-select/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-multi-select() {
   // 背景色
   --ti-mobile-multi-select-bg:  var(--ti-mobile-color-bg-container-1, #fff);
   // 头部高度

packages/theme-mobile/src/nav-bar/index.less

@@ -18,6 +18,8 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{mobile-nav-bar-prefix-cls} {
+  .component-css-vars-nav-bar();
+
   position: relative;
   z-index: 1;
   height: var(--ti-mobile-nav-bar-height, 44px);

packages/theme-mobile/src/nav-bar/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-nav-bar() {
   --ti-mobile-nav-bar-height: 44px;
   --ti-mobile-nav-bar-bgcolor: #343745;
   --ti-mobile-nav-bar-icon-color: var(--ti-mobile-base-color-light, #fff);

packages/theme-mobile/src/numeric/index.less

@@ -19,6 +19,8 @@
 @input-prefix-cls: ~'@{css-prefix}mobile-input';
 
 .@{numeric-prefix-cls} {
+  .component-css-vars-numeric();
+
   position: relative;
   display: inline-block;
   width: var(--ti-mobile-numeric-width);

packages/theme-mobile/src/numeric/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-numeric() {
   // 宽度
   --ti-mobile-numeric-width: 108px;
   // 高度

packages/theme-mobile/src/picker-column/index.less

@@ -17,6 +17,8 @@
 @picker-column-prefix-cls: ~'@{css-prefix}mobile-picker-column';
 
 .@{picker-column-prefix-cls} {
+  .component-css-vars-picker-column();
+
   position: relative;
   flex: 1;
   height: 100%;

packages/theme-mobile/src/picker-column/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-picker-column() {
   --ti-mobile-picker-column-item-height: 34px;
   --ti-mobile-picker-column-item-color: #333;
   --ti-mobile-picker-column-item-font-size: 17px;

packages/theme-mobile/src/pull-refresh/index.less

@@ -16,6 +16,8 @@
 @pull-refresh-prefix-cls: ~'@{css-prefix}mobile-pull-refresh';
 
 .@{pull-refresh-prefix-cls} {
+  .component-css-vars-pull-refresh();
+
   height: 100%;
   user-select: none;
   overflow: hidden;

packages/theme-mobile/src/pull-refresh/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-pull-refresh() {
   // 文字颜色
   --ti-mobile-pull-refresh-text-color: var(--ti-mobile-color-text-placeholder, #808080);
   // 文字尺寸

packages/theme-mobile/src/radio/index.less

@@ -17,6 +17,8 @@
 @radio-prefix-cls: ~'@{css-prefix}mobile-radio';
 
 .@{radio-prefix-cls} {
+  .component-css-vars-radio();
+
   margin-right: 30px;
   outline: 0;
   white-space: nowrap;

packages/theme-mobile/src/radio/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-radio() {
   // 组件尺寸
   --ti-mobile-radio-size: 24px;
   // 外圈尺寸

packages/theme-mobile/src/search/index.less

@@ -19,6 +19,8 @@
 @search-prefix-cls: ~'@{css-prefix}mobile-search';
 
 .@{search-prefix-cls} {
+  .component-css-vars-search();
+
   display: flex;
   align-items: center;
   box-sizing: border-box;

packages/theme-mobile/src/search/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-search() {
   // 搜索框高度
   --ti-mobile-search-height: 56px;
   // 输入框高度

packages/theme-mobile/src/slider/index.less

@@ -17,6 +17,8 @@
 @slider-prefix-cls: ~'@{css-prefix}mobile-slider';
 
 .@{slider-prefix-cls} {
+  .component-css-vars-slider();
+
   position: relative;
   height: var(--ti-mobile-slider-track-size, 2px);
   margin: 15px 0;

packages/theme-mobile/src/slider/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-slider() {
   --ti-mobile-slider-track-size: 2px;
   --ti-mobile-slider-track-bgcolor: #ccc;
   --ti-mobile-slider-range-bgcolor: #00c696;

packages/theme-mobile/src/switch/index.less

@@ -29,6 +29,8 @@
 @loading-left-mini: calc(calc(@btn-size-half-mini - @loading-size-half-mini) + @btn-padding-mini);
 
 .@{switch-prefix-cls} {
+  .component-css-vars-switch();
+
   width: var(--ti-mobile-switch-width-normal, 40px);
   height: var(--ti-mobile-switch-height-mormal, 24px);
   border-radius: 999px;

packages/theme-mobile/src/switch/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-switch() {
   // 默认尺寸宽度
   --ti-mobile-switch-width-normal: calc(var(--ti-mobile-base-size-width-small) + 4px);
   // 默认尺寸高度

packages/theme-mobile/src/tabbar-item/index.less

@@ -18,6 +18,8 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{tabbar-item-prefix-cls} {
+  .component-css-vars-tabbar-item();
+
   display: flex;
   flex: 1;
   flex-direction: column;

packages/theme-mobile/src/tabbar-item/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-tabbar-item() {
   --ti-mobile-tabbar-item-color: var(--ti-mobile-base-color-secondary, #666);
   --ti-mobile-tabbar-item-active-color: #f04b3d;
   --ti-mobile-tabbar-item-icon-size: 18px;

packages/theme-mobile/src/tabbar/index.less

@@ -17,6 +17,8 @@
 @tabbar-prefix-cls: ~'@{css-prefix}mobile-tabbar';
 
 .@{tabbar-prefix-cls} {
+  .component-css-vars-tabbar();
+
   z-index: 1;
   display: flex;
   box-sizing: content-box;

packages/theme-mobile/src/tabbar/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-tabbar() {
   --ti-mobile-tabbar-height: 48px;
   --ti-mobile-tabbar-bgcolor: #f0f0f0;
   --ti-mobile-tabbar-border-color: #ccc;

packages/theme-mobile/src/tabs/index.less

@@ -18,6 +18,8 @@
 @tabs-prefix-cls: ~'@{css-prefix}mobile-tabs';
 
 .@{tabs-prefix-cls} {
+  .component-css-vars-tabs();
+
   position: relative;
 
   &-small {

packages/theme-mobile/src/tabs/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-tabs() {
   // 页签内容字体色
   --ti-mobile-tabs-text-color: var(--ti-mobile-color-text-secondary, #595959);
   // 页签栏背景色

packages/theme-mobile/src/tall-storage/index.less

@@ -19,6 +19,8 @@
 @storage-item-prefix-cls: ~'@{css-prefix}storage-item';
 
 .@{tall-storage-prefix-cls} {
+  .component-css-vars-tall-storage();
+
   position: relative;
   margin-top: var(--ti-tall-storage-margin-top, 2px);
 

packages/theme-mobile/src/tall-storage/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-tall-storage() {
   --ti-tall-storage-margin-top: 2px;
   --ti-tall-storage-bgcolor: #fff;
   --ti-tall-storage-border-radius: 2px;

packages/theme-mobile/src/time-line/index.less

@@ -17,6 +17,8 @@
 @timeline-prefix-cls: ~'@{css-prefix}mobile-timeline';
 
 .@{timeline-prefix-cls} {
+  .component-css-vars-timeline();
+
   overflow: hidden;
   font-size: var(--ti-mobile-timeline-font-size, 14px);
 

packages/theme-mobile/src/time-line/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-timeline() {
   --ti-mobile-timeline-font-size: 14px;
   --ti-mobile-timeline-color: #333;
   --ti-mobile-timeline-hairline-color: #ddd;

packages/theme-mobile/src/upload-list/index.less

@@ -19,6 +19,8 @@
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{upload-list-prefix-cls} {
+  .component-css-vars-upload-list();
+
   & &__item {
     position: relative;
     display: flex;

packages/theme-mobile/src/upload-list/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-upload-list() {
   --ti-mobile-upload-list-item-border-radius: 2px;
   --ti-mobile-upload-list-item-bgcolor: #f9f9f9;
   --ti-mobile-upload-list-icon-close-color: #606266;

packages/theme-mobile/src/wheel/index.less

@@ -17,6 +17,8 @@
 @wheel-prefix-cls: ~'@{css-prefix}mobile-wheel';
 
 .@{wheel-prefix-cls} {
+  .component-css-vars-wheel();
+
   width: 100%;
 
   ul {

packages/theme-mobile/src/wheel/vars.less

@@ -1,4 +1,4 @@
-:root {
+.component-css-vars-wheel() {
   --ti-mobile-wheel-content-font-size: 14px;
   --ti-mobile-wheel-wrapper-height: 224px;
   --ti-mobile-wheel-wrapper-font-size: 14px;