refactor: use legacy color for compatible with less math (umijs#1365)

Wxh16144-forks · Dec 8, 2022 · 9069c5c · 9069c5c
1 parent 441f959
commit 9069c5c
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 22 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,6 +1,7 @@
 {
   "extends": "@umijs/lint/dist/config/stylelint",
   "rules": {
-    "function-no-unknown": null
+    "function-no-unknown": null,
+    "color-function-notation": "legacy"
   }
 }
diff --git a/src/client/theme-default/builtins/Previewer/index.less b/src/client/theme-default/builtins/Previewer/index.less
@@ -94,9 +94,9 @@
       font-weight: 500;
       background: linear-gradient(
           to top,
-          rgb(255 255 255 / 100%),
-          rgb(255 255 255 / 100%) 50%,
-          rgb(255 255 255 / 0%)
+          rgba(255, 255, 255, 100%),
+          rgba(255, 255, 255, 100%) 50%,
+          rgba(255, 255, 255, 0%)
         )
         100%;
 

diff --git a/src/client/theme-default/builtins/Table/index.less b/src/client/theme-default/builtins/Table/index.less
@@ -23,15 +23,15 @@
       left: 0;
       background-image: linear-gradient(
         to right,
-        rgb(0 0 0 / 10%),
-        rgb(0 0 0 / 0%)
+        rgba(0, 0, 0, 10%),
+        rgba(0, 0, 0, 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to right,
-          rgb(0 0 0 / 50%),
-          rgb(0 0 0 / 0%)
+          rgba(0, 0, 0, 50%),
+          rgba(0, 0, 0, 0%)
         );
       }
     }
@@ -40,15 +40,15 @@
       right: 0;
       background-image: linear-gradient(
         to left,
-        rgb(0 0 0 / 10%),
-        rgb(0 0 0 / 0%)
+        rgba(0, 0, 0, 10%),
+        rgba(0, 0, 0, 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to left,
-          rgb(0 0 0 / 50%),
-          rgb(0 0 0 / 0%)
+          rgba(0, 0, 0, 50%),
+          rgba(0, 0, 0, 0%)
         );
       }
     }

diff --git a/src/client/theme-default/layouts/DocLayout/index.less b/src/client/theme-default/layouts/DocLayout/index.less
@@ -18,7 +18,7 @@ body {
       right: 0;
       left: 0;
       bottom: 0;
-      background-color: rgb(0 0 0 / 50%);
+      background-color: rgba(0, 0, 0, 50%);
       transition: all 0.1s;
     }
 

diff --git a/src/client/theme-default/slots/Content/index.less b/src/client/theme-default/slots/Content/index.less
@@ -110,7 +110,7 @@
     background-color: #fff;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
-    box-shadow: 0 8px 24px 0 rgb(0 0 0 / 5%);
+    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 5%);
 
     @media @mobile {
       max-width: initial;

diff --git a/src/client/theme-default/slots/HeroTitle/index.less b/src/client/theme-default/slots/HeroTitle/index.less
@@ -16,7 +16,7 @@
 
   > span {
     color: transparent;
-    text-shadow: 0 10px 20px rgb(22 119 255 / 15%);
+    text-shadow: 0 10px 20px rgba(22, 119, 255, 15%);
     background: linear-gradient(30deg, #91d6ff 30%, #66a6ff);
     background-clip: text;
   }

diff --git a/src/client/theme-default/slots/PreviewerActions/index.less b/src/client/theme-default/slots/PreviewerActions/index.less
@@ -75,11 +75,11 @@
       overflow: hidden;
 
       &&-ping-left {
-        box-shadow: 5px 0 5px -5px rgb(0 0 0 / 10%) inset;
+        box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 10%) inset;
       }
 
       &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
-        box-shadow: 0 0 5px rgb(0 0 0 / 10%);
+        box-shadow: 0 0 5px rgba(0, 0, 0, 10%);
       }
     }
 

diff --git a/src/client/theme-default/slots/SearchBar/index.less b/src/client/theme-default/slots/SearchBar/index.less
@@ -81,7 +81,7 @@
     margin-top: 18px;
     background-color: #fff;
     border-radius: 8px;
-    box-shadow: 0 4px 30px rgb(0 0 0 / 20%);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 20%);
 
     &::before {
       content: '';
@@ -116,7 +116,7 @@
     justify-content: center;
 
     &-mask {
-      background-color: rgb(0 0 0 / 45%);
+      background-color: rgba(0, 0, 0, 45%);
       width: 100%;
       height: 100%;
     }
@@ -128,7 +128,8 @@
       width: 500px;
       padding: 12px;
       box-sizing: border-box;
-      box-shadow: inset 1px 1px 0 0 hsl(0deg 0% 100% / 50%), 0 3px 8px 0 #555a64;
+      box-shadow: inset 1px 1px 0 0 hsla(0deg, 0%, 100%, 50%),
+        0 3px 8px 0 #555a64;
       border-radius: 8px;
       max-height: calc(100% - 120px);
       display: flex;

diff --git a/src/client/theme-default/slots/Sidebar/index.less b/src/client/theme-default/slots/Sidebar/index.less
@@ -22,7 +22,7 @@
     padding-inline-start: 32px;
     background-color: @c-site-bg;
     border-top: 1px solid @c-border-light;
-    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 10%);
     transition: 0.2s all;
 
     .@{prefix}-doc-layout:not([data-mobile-sidebar-active]) & {

diff --git a/src/client/theme-default/styles/utils.less b/src/client/theme-default/styles/utils.less
@@ -24,7 +24,7 @@
     white-space: nowrap;
     background-color: #000;
     border-radius: 2px;
-    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 10%);
     box-sizing: border-box;
   }