refactor: semantic font size variables

ant-design · Mar 3, 2024 · b63cdce · b63cdce
1 parent 784eff5
commit b63cdce
Show file tree

Hide file tree

Showing 45 changed files with 91 additions and 77 deletions.
diff --git a/src/components/action-sheet/action-sheet.less b/src/components/action-sheet/action-sheet.less
@@ -12,7 +12,7 @@
     display: flex;
     justify-content: center;
     color: var(--adm-color-weak);
-    font-size: var(--adm-font-size-7);
+    font-size: var(--adm-font-size-large);
     padding: 18px 12px;
     border-bottom: 1px solid var(--adm-color-border);
   }
@@ -40,10 +40,10 @@
     }
     &-name {
       color: var(--adm-color-text);
-      font-size: var(--adm-font-size-10);
+      font-size: var(--adm-font-size-huge);
     }
     &-description {
-      font-size: var(--adm-font-size-6);
+      font-size: var(--adm-font-size-main);
       color: var(--adm-color-weak);
       padding-top: 4px;
     }

diff --git a/src/components/badge/badge.less b/src/components/badge/badge.less
@@ -20,7 +20,7 @@
     box-sizing: border-box;
     min-width: 8px;
     padding: 1px 4px;
-    font-size: var(--adm-font-size-1);
+    font-size: var(--adm-font-size-tiny);
     line-height: 12px;
     white-space: nowrap;
     font-weight: normal;

diff --git a/src/components/button/button.less b/src/components/button/button.less
@@ -21,7 +21,7 @@
   height: auto;
   padding: 7px 12px;
   margin: 0;
-  font-size: var(--adm-font-size-9);
+  font-size: var(--adm-font-size-huge);
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);
@@ -117,12 +117,12 @@
   &&-small {
     padding-top: 3px;
     padding-bottom: 3px;
-    font-size: var(--adm-font-size-7);
+    font-size: var(--adm-font-size-large);
   }
   &&-large {
     padding-top: 11px;
     padding-bottom: 11px;
-    font-size: var(--adm-font-size-10);
+    font-size: var(--adm-font-size-huge);
   }
   &&-shape-rounded {
     --border-radius: 1000px;

diff --git a/src/components/calendar-picker-view/calendar-picker-view.less b/src/components/calendar-picker-view/calendar-picker-view.less
@@ -3,7 +3,7 @@
 .adm-calendar-picker-popup {
   & &-title {
     flex: auto;
-    font-size: var(--adm-font-size-10);
+    font-size: var(--adm-font-size-huge);
   }
 
   & &-header {
@@ -115,13 +115,13 @@
     & &-date {
       flex: none;
       line-height: 22px;
-      font-size: var(--adm-font-size-8);
+      font-size: var(--adm-font-size-large);
     }
 
     & &-top,
     & &-bottom {
       flex: none;
-      font-size: var(--adm-font-size-1);
+      font-size: var(--adm-font-size-tiny);
       height: 14px;
       line-height: 14px;
       color: var(--adm-color-weak);
@@ -136,7 +136,7 @@
     border-bottom: solid 1px var(--adm-color-border);
     height: 45px;
     box-sizing: border-box;
-    font-size: var(--adm-font-size-6);
+    font-size: var(--adm-font-size-main);
     padding: 0 8px;
 
     & &-cell {

diff --git a/src/components/calendar/calendar.less b/src/components/calendar/calendar.less
@@ -19,7 +19,7 @@
       }
     }
     .adm-calendar-title {
-      font-size: var(--adm-font-size-10);
+      font-size: var(--adm-font-size-huge);
       flex: auto;
       text-align: center;
     }
@@ -82,11 +82,11 @@
     justify-content: flex-end;
     & &-top {
       flex: none;
-      font-size: var(--adm-font-size-10);
+      font-size: var(--adm-font-size-huge);
     }
     & &-bottom {
       flex: none;
-      font-size: var(--adm-font-size-4);
+      font-size: var(--adm-font-size-small);
       height: 12px;
       line-height: 12px;
       color: var(--adm-color-weak);
@@ -101,7 +101,7 @@
     border-bottom: solid 1px var(--adm-color-border);
     height: 45px;
     box-sizing: border-box;
-    font-size: var(--adm-font-size-7);
+    font-size: var(--adm-font-size-large);
     padding: 0 8px;
     & &-cell {
       flex: 1;

diff --git a/src/components/capsule-tabs/capsule-tabs.less b/src/components/capsule-tabs/capsule-tabs.less
@@ -33,7 +33,7 @@
     margin: 0 auto;
     border-radius: 20px;
     cursor: pointer;
-    font-size: var(--adm-font-size-7);
+    font-size: var(--adm-font-size-large);
     text-align: center;
     white-space: nowrap;
     background-color: var(--adm-color-fill-content);

diff --git a/src/components/card/card.less b/src/components/card/card.less
@@ -15,7 +15,7 @@
       border-bottom: solid 0.5px var(--adm-color-border);
     }
     &-title {
-      font-size: var(--adm-font-size-7);
+      font-size: var(--adm-font-size-large);
       line-height: 1.4;
       font-weight: bold;
     }

diff --git a/src/components/cascader-view/cascader-view.less b/src/components/cascader-view/cascader-view.less
@@ -3,7 +3,7 @@
 
   &-tabs {
     &.adm-tabs {
-      --title-font-size: var(--adm-font-size-6);
+      --title-font-size: var(--adm-font-size-main);
       --content-padding: none;
     }
   }
@@ -28,7 +28,7 @@
   }
 
   &-item {
-    font-size: var(--adm-font-size-6);
+    font-size: var(--adm-font-size-main);
 
     &-active {
       color: var(--adm-color-primary);

diff --git a/src/components/cascader/cascader.less b/src/components/cascader/cascader.less
@@ -15,13 +15,13 @@
   align-items: center;
   padding: 6px 8px;
   &-button {
-    font-size: var(--adm-font-size-7);
+    font-size: var(--adm-font-size-large);
     display: inline-block;
     padding: 4px 4px;
   }
   &-title {
     padding: 4px 4px;
-    font-size: var(--adm-font-size-7);
+    font-size: var(--adm-font-size-large);
     color: var(--adm-color-text);
     text-align: center;
     flex: 1;

diff --git a/src/components/check-list/check-list.less b/src/components/check-list/check-list.less
@@ -1,6 +1,6 @@
 .adm-check-list-item {
   &-extra {
-    font-size: var(--adm-font-size-10);
+    font-size: var(--adm-font-size-huge);
     line-height: 1;
     color: var(--adm-color-primary);
   }

diff --git a/src/components/checkbox/checkbox.less b/src/components/checkbox/checkbox.less
@@ -2,7 +2,7 @@
 
 .@{class-prefix-checkbox} {
   --icon-size: 22px;
-  --font-size: var(--adm-font-size-9);
+  --font-size: var(--adm-font-size-huge);
   --gap: 8px;
   display: inline-flex;
   vertical-align: text-bottom;

diff --git a/src/components/dialog/dialog.less b/src/components/dialog/dialog.less
@@ -12,7 +12,7 @@
 .@{class-prefix-dialog}-body {
   width: 100%;
   max-height: 70vh;
-  font-size: var(--adm-font-size-6);
+  font-size: var(--adm-font-size-main);
   overflow: hidden;
 
   display: flex;
@@ -41,7 +41,7 @@
   margin-bottom: 8px;
   padding: 0 12px;
   font-weight: bold;
-  font-size: var(--adm-font-size-10);
+  font-size: var(--adm-font-size-huge);
   line-height: 25px;
   text-align: center;
 }
@@ -50,7 +50,7 @@
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: var(--adm-font-size-7);
+  font-size: var(--adm-font-size-large);
   line-height: 1.4;
   color: var(--adm-color-text);
   &-empty {
@@ -69,7 +69,7 @@
     }
     > .adm-dialog-button {
       padding: 10px;
-      font-size: var(--adm-font-size-10);
+      font-size: var(--adm-font-size-huge);
       line-height: 25px;
       border-radius: 0;
       &-bold {

diff --git a/src/components/empty/empty.less b/src/components/empty/empty.less
@@ -19,7 +19,7 @@
 
   &-description {
     margin-top: 8px;
-    font-size: var(--adm-font-size-6);
+    font-size: var(--adm-font-size-main);
     color: var(--adm-color-light);
   }
 }
diff --git a/src/components/error-block/error-block.less b/src/components/error-block/error-block.less
@@ -25,12 +25,12 @@
   }
 
   &-description {
-    font-size: var(--adm-font-size-4);
+    font-size: var(--adm-font-size-small);
     color: var(--adm-color-weak);
     line-height: 1.4;
     margin-top: 12px;
     &-title {
-      font-size: var(--adm-font-size-7);
+      font-size: var(--adm-font-size-large);
     }
     &-subtitle {
       margin-top: 8px;

diff --git a/src/components/error-block/error-block.patch.less b/src/components/error-block/error-block.patch.less
@@ -7,9 +7,9 @@
   }
 
   &-description {
-    font-size: var(--adm-font-size-4);
+    font-size: var(--adm-font-size-small);
     &-title {
-      font-size: var(--adm-font-size-7);
+      font-size: var(--adm-font-size-large);
     }
   }
 

diff --git a/src/components/form/form-item.less b/src/components/form/form-item.less
@@ -76,7 +76,7 @@
 
   &&-vertical {
     .adm-form-item-label {
-      font-size: var(--adm-font-size-7);
+      font-size: var(--adm-font-size-large);
       margin-bottom: 4px;
     }
   }

diff --git a/src/components/image-uploader/image-uploader.less b/src/components/image-uploader/image-uploader.less
@@ -67,7 +67,7 @@
     &-mask-message {
       display: inline-block;
       padding: 6px 4px;
-      font-size: var(--adm-font-size-4);
+      font-size: var(--adm-font-size-small);
     }
 
     &-image {

diff --git a/src/components/image-viewer/image-viewer.less b/src/components/image-viewer/image-viewer.less
@@ -62,6 +62,6 @@
     top: 12px;
     transform: translateX(-50%);
     color: var(--adm-color-border);
-    font-size: var(--adm-font-size-6);
+    font-size: var(--adm-font-size-main);
   }
 }
diff --git a/src/components/index-bar/index-bar.less b/src/components/index-bar/index-bar.less
@@ -39,7 +39,7 @@
     z-index: 910;
     overflow: visible;
     color: var(--adm-color-weak);
-    font-size: var(--adm-font-size-4);
+    font-size: var(--adm-font-size-small);
     user-select: none;
     touch-action: none;
 

diff --git a/src/components/input/input.less b/src/components/input/input.less
@@ -1,7 +1,7 @@
 @class-prefix-input: ~'adm-input';
 
 .@{class-prefix-input} {
-  --font-size: var(--adm-font-size-9);
+  --font-size: var(--adm-font-size-huge);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --text-align: left;
@@ -105,6 +105,6 @@
   cursor: pointer;
   .antd-mobile-icon {
     display: block;
-    font-size: var(--adm-font-size-7);
+    font-size: var(--adm-font-size-large);
   }
 }
diff --git a/src/components/jumbo-tabs/jumbo-tabs.less b/src/components/jumbo-tabs/jumbo-tabs.less
@@ -38,7 +38,7 @@
     margin: 0 auto;
     padding: 12px 0;
     cursor: pointer;
-    font-size: var(--adm-font-size-9);
+    font-size: var(--adm-font-size-huge);
     white-space: nowrap;
     &-title {
       line-height: 24px;

diff --git a/src/components/list/list.less b/src/components/list/list.less
@@ -1,5 +1,5 @@
 .adm-list {
-  --header-font-size: var(--adm-font-size-7);
+  --header-font-size: var(--adm-font-size-large);
   --prefix-width: 'auto';
   --prefix-padding-right: 12px;
   --align-items: center;
@@ -9,7 +9,7 @@
   --border-bottom: solid 1px var(--adm-color-border);
   --padding-left: 12px;
   --padding-right: 12px;
-  --font-size: var(--adm-font-size-9);
+  --font-size: var(--adm-font-size-huge);
   --extra-max-width: 70%;
 
   &-header {
@@ -71,7 +71,7 @@
     &-extra {
       flex: none;
       padding-left: 12px;
-      font-size: var(--adm-font-size-7);
+      font-size: var(--adm-font-size-large);
       color: var(--adm-color-weak);
       max-width: var(--extra-max-width);
     }

diff --git a/src/components/modal/modal.less b/src/components/modal/modal.less
@@ -12,7 +12,7 @@
 .@{class-prefix-modal}-body {
   width: 100%;
   max-height: 70vh;
-  font-size: var(--adm-font-size-6);
+  font-size: var(--adm-font-size-main);
   overflow: hidden;
 
   display: flex;
@@ -42,7 +42,7 @@
   margin-bottom: 8px;
   padding: 0 12px;
   font-weight: bold;
-  font-size: var(--adm-font-size-10);
+  font-size: var(--adm-font-size-huge);
   line-height: 25px;
   text-align: center;
 }
@@ -51,7 +51,7 @@
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: var(--adm-font-size-7);
+  font-size: var(--adm-font-size-large);
   line-height: 1.4;
   color: var(--adm-color-text);
 }
@@ -67,7 +67,7 @@
     --gap-vertical: 20px;
   }
   .adm-modal-button {
-    font-size: var(--adm-font-size-10);
+    font-size: var(--adm-font-size-huge);
     line-height: 25px;
     &:not(.adm-modal-button-primary) {
       padding-top: 0;