feat: 新增prefixMobile，解决变量名与pc冲突问题

arco-design · Dec 23, 2024 · 2a83c60 · 2a83c60
1 parent 4a5c0f8
commit 2a83c60
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 18 deletions.
diff --git a/packages/arcodesign/tokens/app/arcodesign/default/css-variables.less b/packages/arcodesign/tokens/app/arcodesign/default/css-variables.less
@@ -1,7 +1,8 @@
 @import '../../../mixin/index.less';
 
 :root when (@use-css-vars = 1) {
-    --prefix: arco;
+    --prefix: var(--prefix-mobile);
+    --prefix-mobile: arco;
     --base-font-size: 50;
     --arco-dark-mode-selector: .arco-theme-dark;
     --background-color: #FFFFFF;

diff --git a/packages/arcodesign/tokens/app/arcodesign/default/index.d.ts b/packages/arcodesign/tokens/app/arcodesign/default/index.d.ts
@@ -1,6 +1,7 @@
 export declare function getRem(px: number, baseFontSize: number): string;
 export interface ArcodesignToken extends Record<string, string> {
     'prefix': string;
+    'prefix-mobile': string;
     'base-font-size': string;
     'arco-dark-mode-selector': string;
     'background-color': string;

diff --git a/packages/arcodesign/tokens/app/arcodesign/default/index.js b/packages/arcodesign/tokens/app/arcodesign/default/index.js
@@ -12,7 +12,8 @@ function getRem(px, baseFontSize) {
 }
 
 var tokens = {
-  "prefix": "arco",
+  "prefix": "var(--prefix-mobile)",
+  "prefix-mobile": "arco",
   "base-font-size": "50",
   "arco-dark-mode-selector": ".arco-theme-dark",
   "background-color": "#FFFFFF",

diff --git a/packages/arcodesign/tokens/app/arcodesign/default/index.json b/packages/arcodesign/tokens/app/arcodesign/default/index.json
@@ -8049,14 +8049,27 @@
         "cssKey": "prefix",
         "desc": "类前缀，需配合 context-provider 中的 prefixCls 使用",
         "override": "",
-        "value": "arco",
-        "jsValue": "arco",
+        "value": "@prefix-mobile",
+        "jsValue": "@global@prefixMobile",
         "staticValue": "arco",
         "localeDesc": {
             "ch": "类前缀，需配合 context-provider 中的 prefixCls 使用",
+            "default": "'arco'",
             "en": "Classname prefix, it needs to be used with prefixCls in context-provider"
         }
     },
+    "prefixMobile": {
+        "cssKey": "prefix-mobile",
+        "desc": "功能同 prefix，与 PC 版同用时可使用该变量修改类前缀解决冲突",
+        "override": "",
+        "value": "arco",
+        "jsValue": "arco",
+        "staticValue": "arco",
+        "localeDesc": {
+            "ch": "功能同 prefix，与 PC 版同用时可使用该变量修改类前缀解决冲突",
+            "en": "Same as `prefix`, it can avoid conflicts when used with arco pc"
+        }
+    },
     "primaryColor": {
         "cssKey": "primary-color",
         "desc": "基础主题色",

diff --git a/packages/arcodesign/tokens/app/arcodesign/default/index.less b/packages/arcodesign/tokens/app/arcodesign/default/index.less
@@ -1,6 +1,7 @@
 @import '../../../mixin/pxtorem.less';
 
-@prefix: arco;
+@prefix: @prefix-mobile;
+@prefix-mobile: arco;
 @base-font-size: 50;
 @arco-dark-mode-selector: .arco-theme-dark;
 @background-color: #FFFFFF;

diff --git a/packages/arcodesign/tokens/src/arcodesign/default/index.js b/packages/arcodesign/tokens/src/arcodesign/default/index.js
@@ -2,13 +2,23 @@
 const extend = require('./extend');
 const { theme } = require('./theme');
 
+const getRem = px => `@getRem@${px}`;
+const useGlobal = token => `@global@${token}`;
+const globalTokens = getGlobalTokens();
+
 function getGlobalTokens() {
     return {
         /**
          * 类前缀，需配合 context-provider 中的 prefixCls 使用
+         * @default 'arco'
          * @en Classname prefix, it needs to be used with prefixCls in context-provider
          */
-        prefix: 'arco',
+        prefix: useGlobal('prefixMobile'),
+        /**
+         * 功能同 prefix，与 PC 版同用时可使用该变量修改类前缀解决冲突
+         * @en Same as `prefix`, it can avoid conflicts when used with arco pc
+         */
+        prefixMobile: 'arco',
         /**
          * rem 转换使用的基础字号
          * @en Base font size used for rem conversion
@@ -127,10 +137,6 @@ function getGlobalTokens() {
     };
 }
 
-const globalTokens = getGlobalTokens();
-const getRem = px => `@getRem@${px}`;
-const useGlobal = token => `@global@${token}`;
-
 function getCompTokens() {
     return {
         /**
@@ -422,8 +428,7 @@ function getCompTokens() {
          * 轮播图滑块文字背景色
          * @en Background color of the carousel sliders
          */
-        carouselItemTextBackground:
-            'linear-gradient(180deg, rgba(0, 0, 0, 0) 5.18%, rgba(0, 0, 0, 0.15) 100%)',
+        carouselItemTextBackground: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 5.18%, rgba(0, 0, 0, 0.15) 100%)',
         /**
          * 轮播图滑块文字高度
          * @en Font height of the carousel sliders
@@ -1017,10 +1022,8 @@ function getCompTokens() {
          * 文字缩略组件浮动模式下的缩略符背景色
          * @en Background of floating ellipsis node
          */
-        ellipsisFloatEllipsisNodeBackground:
-            'linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff)',
-        darkEllipsisFloatEllipsisNodeBackground:
-            'linear-gradient(90deg, rgba(35, 35, 36, 0), #232324 20PX, #232324)',
+        ellipsisFloatEllipsisNodeBackground: 'linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff)',
+        darkEllipsisFloatEllipsisNodeBackground: 'linear-gradient(90deg, rgba(35, 35, 36, 0), #232324 20PX, #232324)',
         /**
          * 文字缩略组件浮动模式下的缩略符左边距
          * @en Padding left of floating ellipsis node
@@ -2166,8 +2169,7 @@ function getCompTokens() {
          * 图片预览指示器背景色
          *  @en ImagePreview indicator background color
          */
-        imagePreviewIndicatorBackground:
-            'linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3))',
+        imagePreviewIndicatorBackground: 'linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3))',
         /**
          * 图片预览小图放大时的动画曲线
          * @en Animation curve when ImagePreview thumbnail is enlarged