From 2a83c609cd23a08f631d8e5367b7e98b394f553b Mon Sep 17 00:00:00 2001 From: "xiaziqi.sia" Date: Mon, 9 Dec 2024 14:36:52 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EprefixMobile=EF=BC=8C?= =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=8F=98=E9=87=8F=E5=90=8D=E4=B8=8Epc?= =?UTF-8?q?=E5=86=B2=E7=AA=81=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/arcodesign/default/css-variables.less | 3 +- .../tokens/app/arcodesign/default/index.d.ts | 1 + .../tokens/app/arcodesign/default/index.js | 3 +- .../tokens/app/arcodesign/default/index.json | 17 +++++++++-- .../tokens/app/arcodesign/default/index.less | 3 +- .../tokens/src/arcodesign/default/index.js | 28 ++++++++++--------- 6 files changed, 37 insertions(+), 18 deletions(-) diff --git a/packages/arcodesign/tokens/app/arcodesign/default/css-variables.less b/packages/arcodesign/tokens/app/arcodesign/default/css-variables.less index 0aed3273..33d7d72b 100644 --- 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 index a5691c3d..f7635576 100644 --- 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 { '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 index 33aab071..69024823 100644 --- 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 index 342886a3..ca928368 100644 --- 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 index e3417c08..2cf050e5 100644 --- 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 index 868d27a0..9b93d3fe 100644 --- 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