fix: add Stepper width (#274)

* fix: stepper style * fix: stepper style * fix: stepper style * fix: stepper style * fix: stepper style * fix: stepper style
arco-design · Jul 1, 2024 · b76f2ca · b76f2ca
1 parent 3b54886
commit b76f2ca
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 1 deletion.
diff --git a/packages/arcodesign/components/stepper/style/index.less b/packages/arcodesign/components/stepper/style/index.less
@@ -3,6 +3,7 @@
 .@{prefix}-stepper {
     display: flex;
     .use-var(font-size, stepper-font-size);
+    .use-var(width, stepper-width);
 
     &.@{prefix}-square {
         border-width: 1PX;

diff --git a/packages/arcodesign/tokens/app/arcodesign/default/css-variables.less b/packages/arcodesign/tokens/app/arcodesign/default/css-variables.less
@@ -963,6 +963,7 @@
     --index-bar-sidebar-toast-radius: ~`pxtorem(4)`;
     --index-bar-sidebar-toast-padding: 0 ~`pxtorem(8)`;
     --index-bar-sidebar-toast-font-size: ~`pxtorem(24)`;
+    --stepper-width: ~`pxtorem(98)`;
     --stepper-font-size: ~`pxtorem(14)`;
     --dark-stepper-square-border-color: var(--dark-lighter-line-color);
     --stepper-square-border-color: var(--lighter-line-color);

diff --git a/packages/arcodesign/tokens/app/arcodesign/default/index.d.ts b/packages/arcodesign/tokens/app/arcodesign/default/index.d.ts
@@ -962,6 +962,7 @@ export interface ArcodesignToken extends Record<string, string> {
     'index-bar-sidebar-toast-radius': string;
     'index-bar-sidebar-toast-padding': string;
     'index-bar-sidebar-toast-font-size': string;
+    'stepper-width': string;
     'stepper-font-size': string;
     'dark-stepper-square-border-color': string;
     'stepper-square-border-color': string;

diff --git a/packages/arcodesign/tokens/app/arcodesign/default/index.js b/packages/arcodesign/tokens/app/arcodesign/default/index.js
@@ -974,6 +974,7 @@ var tokens = {
   "index-bar-sidebar-toast-radius": "0.08rem",
   "index-bar-sidebar-toast-padding": "0 0.16rem",
   "index-bar-sidebar-toast-font-size": "0.48rem",
+  "stepper-width": "1.96rem",
   "stepper-font-size": "0.28rem",
   "dark-stepper-square-border-color": "var(--dark-lighter-line-color)",
   "stepper-square-border-color": "var(--lighter-line-color)",

diff --git a/packages/arcodesign/tokens/app/arcodesign/default/index.json b/packages/arcodesign/tokens/app/arcodesign/default/index.json
@@ -9411,6 +9411,18 @@
             "en": "Square border radius of Stepper"
         }
     },
+    "stepperWidth": {
+        "cssKey": "stepper-width",
+        "desc": "步进器整体宽度",
+        "override": "",
+        "value": "~`pxtorem(98)`",
+        "jsValue": "@getRem@98",
+        "staticValue": "1.96rem",
+        "localeDesc": {
+            "ch": "步进器整体宽度",
+            "en": "Width of Stepper"
+        }
+    },
     "stepsDescriptionColor": {
         "cssKey": "steps-description-color",
         "desc": "steps 步骤默认描述文字颜色",

diff --git a/packages/arcodesign/tokens/app/arcodesign/default/index.less b/packages/arcodesign/tokens/app/arcodesign/default/index.less
@@ -962,6 +962,7 @@
 @index-bar-sidebar-toast-radius: ~`pxtorem(4)`;
 @index-bar-sidebar-toast-padding: 0 ~`pxtorem(8)`;
 @index-bar-sidebar-toast-font-size: ~`pxtorem(24)`;
+@stepper-width: ~`pxtorem(98)`;
 @stepper-font-size: ~`pxtorem(14)`;
 @dark-stepper-square-border-color: @dark-lighter-line-color;
 @stepper-square-border-color: @lighter-line-color;

diff --git a/packages/arcodesign/tokens/src/arcodesign/default/index.js b/packages/arcodesign/tokens/src/arcodesign/default/index.js
@@ -3750,6 +3750,11 @@ function getCompTokens() {
          * @en IndexBar sidebar light prompt font size
          */
         indexBarSidebarToastFontSize: getRem(24),
+        /**
+         * 步进器整体宽度
+         * @en Width of Stepper
+         */
+        stepperWidth: getRem(98),
         /**
          * 步进器字体大小
          * @en Font size of Stepper
@@ -4224,7 +4229,6 @@ function getCompTokens() {
          * @en Error status color of the text in the uploader list
          */
         uploaderItemTextErrorColor: useGlobal('dangerColor'),
-
     };
 }