enhance: replace missing colors with css variables. fix ant-design#6319…

… (ant-design#6320) * enhance: replace missing colors with css variables. fix ant-design#6319 * enhance: replace black color with css variable * chore: update tag snapshots for css var
miracles1919 · Aug 15, 2023 · 8a3f426 · 8a3f426
1 parent 6b21558
commit 8a3f426
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 16 deletions.
diff --git a/src/components/action-sheet/action-sheet.less b/src/components/action-sheet/action-sheet.less
@@ -31,7 +31,7 @@
     background-color: var(--adm-color-background);
     padding: 16px;
     &:active {
-      background-color: #eeeeee;
+      background-color: var(--adm-color-border);
     }
     &-disabled {
       cursor: not-allowed;

diff --git a/src/components/button/button.less b/src/components/button/button.less
@@ -42,8 +42,9 @@
     );
     width: 100%;
     height: 100%;
-    background-color: #000;
-    border: var(--border-width) var(--border-style) #000;
+    background-color: var(--adm-color-text-dark-solid);
+    border: var(--border-width) var(--border-style)
+      var(--adm-color-text-dark-solid);
     border-radius: var(--border-radius);
     opacity: 0;
     content: ' ';

diff --git a/src/components/error-block/error-block.less b/src/components/error-block/error-block.less
@@ -26,7 +26,7 @@
 
   &-description {
     font-size: var(--adm-font-size-4);
-    color: #999;
+    color: var(--adm-color-weak);
     line-height: 1.4;
     margin-top: 12px;
     &-title {

diff --git a/src/components/form/form.less b/src/components/form/form.less
@@ -29,5 +29,5 @@
 
 .adm-form-list-operation {
   text-align: center;
-  color: #1677ff;
+  color: var(--adm-color-primary);
 }
diff --git a/src/components/image-uploader/image-uploader.less b/src/components/image-uploader/image-uploader.less
@@ -86,7 +86,7 @@
       display: block;
 
       &-icon {
-        color: #999999;
+        color: var(--adm-color-weak);
         font-size: 32px;
       }
     }

diff --git a/src/components/notice-bar/notice-bar.less b/src/components/notice-bar/notice-bar.less
@@ -2,7 +2,7 @@
 
 .@{class-prefix-notice-bar} {
   --background-color: #ababab;
-  --border-color: #999999;
+  --border-color: var(--adm-color-weak);
   --text-color: var(--adm-color-text-light-solid);
   --font-size: var(--adm-font-size-7);
   --icon-font-size: var(--adm-font-size-10);
@@ -38,7 +38,7 @@
   &.@{class-prefix-notice-bar}-info {
     --background-color: #d0e4ff;
     --border-color: #bcd8ff;
-    --text-color: #1677ff;
+    --text-color: var(--adm-color-primary);
   }
 
   & .@{class-prefix-notice-bar}-left {

diff --git a/src/components/number-keyboard/number-keyboard.less b/src/components/number-keyboard/number-keyboard.less
@@ -83,9 +83,9 @@
       left: 50%;
       width: 100%;
       height: 100%;
-      background-color: #000;
+      background-color: var(--adm-color-text-dark-solid);
       border: inherit;
-      border-color: #000;
+      border-color: var(--adm-color-text-dark-solid);
       border-radius: inherit;
       transform: translate(-50%, -50%);
       opacity: 0;

diff --git a/src/components/popover/popover-menu.less b/src/components/popover/popover-menu.less
@@ -1,5 +1,5 @@
 .adm-popover-menu {
-  --border-color: #eeeeee;
+  --border-color: var(--adm-color-border);
 
   &.adm-popover {
     --content-padding: 0;
@@ -52,7 +52,7 @@
 
 .adm-popover.adm-popover-dark {
   &.adm-popover-menu {
-    --border-color: #333333;
+    --border-color: var(--adm-color-text);
     --background: rgba(0, 0, 0, 0.9);
   }
 }
diff --git a/src/components/progress-bar/progress-bar.less b/src/components/progress-bar/progress-bar.less
@@ -23,7 +23,7 @@
     flex: none;
     width: calc(var(--text-width) + 8px);
     padding-left: 8px;
-    color: #999999;
+    color: var(--adm-color-weak);
   }
 }
 

diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames'
 const classPrefix = `adm-tag`
 
 const colorRecord: Record<string, string> = {
-  default: '#666666',
+  default: 'var(--adm-color-text-secondary, #666666)',
   primary: 'var(--adm-color-primary, #1677ff)',
   success: 'var(--adm-color-success, #00b578)',
   warning: 'var(--adm-color-warning, #ff8f1f)',

diff --git a/src/components/tag/tests/__snapshots__/tag.test.tsx.snap b/src/components/tag/tests/__snapshots__/tag.test.tsx.snap
@@ -21,13 +21,13 @@ exports[`Tag renders with fill 1`] = `
 <div>
   <span
     class="adm-tag"
-    style="--border-color: #666666; --text-color: #666666; --background-color: transparent;"
+    style="--border-color: var(--adm-color-text-secondary, #666666); --text-color: var(--adm-color-text-secondary, #666666); --background-color: transparent;"
   >
     outline
   </span>
   <span
     class="adm-tag"
-    style="--border-color: #666666; --text-color: #ffffff; --background-color: #666666;"
+    style="--border-color: var(--adm-color-text-secondary, #666666); --text-color: #ffffff; --background-color: var(--adm-color-text-secondary, #666666);"
   >
     solid
   </span>