fix: fix style(close #2530)

arco-design · Jul 3, 2023 · d2ef0f1 · d2ef0f1
1 parent 67a801b
commit d2ef0f1
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 12 deletions.
diff --git a/packages/web-vue/components/button/style/index.less b/packages/web-vue/components/button/style/index.less
@@ -297,7 +297,7 @@
   }
 }
 
-body[arco-theme='dark'] {
+@{arco-theme-tag}@{acro-theme-dark} {
   .@{btn-prefix-cls}-primary.@{btn-prefix-cls}-disabled {
     color: rgba(255, 255, 255, 0.3);
   }

diff --git a/packages/web-vue/components/card/style/index.less b/packages/web-vue/components/card/style/index.less
@@ -211,7 +211,7 @@
 }
 
 // dark mode
-@{arco-theme-tag}[arco-theme='dark'] {
+@{arco-theme-tag}@{acro-theme-dark} {
   .@{card-prefix-cls}-grid-hoverable:hover::before,
   .@{card-prefix-cls}-hoverable:hover {
     box-shadow: 0 4px 10px @card-color-box-shadow_dark;

diff --git a/packages/web-vue/components/carousel/style/index.less b/packages/web-vue/components/carousel/style/index.less
@@ -373,7 +373,7 @@
   }
 }
 
-@{arco-theme-tag}[arco-theme='dark'] {
+@{arco-theme-tag}@{acro-theme-dark} {
   .@{carousel-prefix-cls}-arrow > div {
     background-color: rgba(@dark-gray-1, 0.3);
 

diff --git a/packages/web-vue/components/radio/style/index.less b/packages/web-vue/components/radio/style/index.less
@@ -254,7 +254,7 @@
 
 // dark mode
 
-@{arco-theme-tag}[arco-theme='dark'] {
+@{arco-theme-tag}@{acro-theme-dark} {
   .@{radio-prefix-cls}-button.@{radio-prefix-cls}-checked,
   .@{radio-prefix-cls}-button:not(.@{radio-prefix-cls}-disabled):hover {
     background-color: var(~'@{arco-cssvars-prefix}-color-fill-3');

diff --git a/packages/web-vue/components/style/color/css-variables.less b/packages/web-vue/components/style/color/css-variables.less
@@ -195,7 +195,7 @@
   @{arco-cssvars-prefix}-link-10: get-var-str(~'@{link-10}');
 }
 
-@{arco-theme-tag}[arco-theme='dark'] {
+@{arco-theme-tag}@{acro-theme-dark} {
   @{arco-cssvars-prefix}-red-1: get-rgb-str(@dark-red-1);
   @{arco-cssvars-prefix}-red-2: get-rgb-str(@dark-red-2);
   @{arco-cssvars-prefix}-red-3: get-rgb-str(@dark-red-3);

diff --git a/packages/web-vue/components/style/theme/css-variables.less b/packages/web-vue/components/style/theme/css-variables.less
@@ -94,7 +94,7 @@
   @{arco-cssvars-prefix}-color-mask-bg: @mask-color-bg;
 }
 
-@{arco-theme-tag}[arco-theme='dark'] {
+@{arco-theme-tag}@{acro-theme-dark} {
   @{arco-cssvars-prefix}-color-white: @dark-color-white;
   @{arco-cssvars-prefix}-color-black: @dark-color-black;
   @{arco-cssvars-prefix}-color-border: @dark-color-border;

diff --git a/packages/web-vue/components/style/theme/global.less b/packages/web-vue/components/style/theme/global.less
@@ -1,7 +1,7 @@
 @import '../color/colors.less';
 
 @arco-theme-tag: body; // css 变量定义的选择器
-
+@acro-theme-dark: ~"[@{prefix}-theme='dark']";
 @arco-vars-prefix: ~''; // css 变量的前缀
 
 // --arco-color-white or --color-white

diff --git a/packages/web-vue/components/style/theme/index.less b/packages/web-vue/components/style/theme/index.less
@@ -1,9 +1,9 @@
 @import './global.less';
 @import './component.less';
 
-@prefix: arco;
-
-@font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family: Inter, '-apple-system', BlinkMacSystemFont, 'PingFang SC',
+  'Hiragino Sans GB', 'noto sans', 'Microsoft YaHei', 'Helvetica Neue',
+  Helvetica, Arial, sans-serif;
 
 @code-family: Consolas, Menlo;
 

diff --git a/packages/web-vue/components/tabs/style/index.less b/packages/web-vue/components/tabs/style/index.less
@@ -713,7 +713,7 @@
 
 @import './vertical.less';
 
-@{arco-theme-tag}[arco-theme='dark'] {
+@{arco-theme-tag}@{acro-theme-dark} {
   .@{tabs-prefix-cls}-nav-type-capsule {
     .@{tabs-prefix-cls}-tab {
       &-active {

diff --git a/packages/web-vue/components/tag/style/index.less b/packages/web-vue/components/tag/style/index.less
@@ -129,7 +129,7 @@
   }
 }
 
-@{arco-theme-tag}[arco-theme='dark'] {
+@{arco-theme-tag}@{acro-theme-dark} {
   .@{tag-prefix-cls}-checked {
     color: rgba(255, 255, 255, 0.9);
   }