postcssの color() を生のCSSの記法に変更

Author: Raclamusi

css/browser.css

@@ -16,8 +16,8 @@ body.kunai {
 
             font-weight: bold;
             $c: rgb(240, 36, 54);
-            background: color($c alpha(0.2));
-            border: 3px dashed color($c alpha(0.6));
+            background: rgb(from $c r g b / 0.2);
+            border: 3px dashed rgb(from $c r g b / 0.6);
             box-sizing: border-box;
             color: rgba(20, 20, 20, 0.6);
             padding: .2em .4em;

css/kunai/site/article.css

@@ -285,7 +285,7 @@ div[itemtype="http://schema.org/Article"] {
 
     border-radius: 0;
     border: none;
-    border-top: 1px solid color($cl-shuri alpha(0.2));
+    border-top: 1px solid rgb(from $cl-shuri r g b / 0.2);
 
     margin: 0;
     box-sizing: border-box;

css/kunai/site/layout.css

@@ -21,7 +21,7 @@ body {
     background: $nav-bg;
 
     border: none;
-    border-bottom: 1px solid color($cl-shuri alpha(0.2));
+    border-bottom: 1px solid rgb(from $cl-shuri r g b / 0.2);
 
     position: relative;
     z-index: $navbar-z;
@@ -203,7 +203,7 @@ main {
     overflow: hidden;
 
     box-sizing: border-box;
-    border-right: 1px solid color($cl-shuri alpha(0.2));
+    border-right: 1px solid rgb(from $cl-shuri r g b / 0.2);
     box-shadow: -12px 0 12px 6px rgba(0, 0, 0, 0.8);
 
     z-index: $side-z;

css/kunai/site/sidebar.css

@@ -152,8 +152,8 @@ main[role="main"] .kunai-sidebar.force-legacy {
 .kunai-sidebar > .tree.v2 {
   $cl-text: #222;
   $cl-back: #fbfbfb;
-  $cl-link: color(#2a6496 tint(15%) saturation(+ 10%));
-  $cl-list-hover: color(#f0f0fd alpha(.9));
+  $cl-link: hsl(from color-mix(in srgb, #2a6496, white 15%) h calc(s + 10%) l);
+  $cl-list-hover: rgb(from #f0f0fd r g b / .9);
 
   display: flex;
   height: 100%;
@@ -247,7 +247,7 @@ main[role="main"] .kunai-sidebar.force-legacy {
             content: "";
             display: block;
             height: 2px;
-            border-bottom: 1px solid color($c alpha(0.7));
+            border-bottom: 1px solid rgb(from $c r g b / 0.7);
             flex-basis: 100%;
           }
         }
@@ -265,7 +265,7 @@ main[role="main"] .kunai-sidebar.force-legacy {
         > .expandbar > a {
           flex-basis: auto;
           margin-bottom: 0;
-          color: color($cl-link saturation(-20%));
+          color: hsl(from $cl-link h calc(s - 20%) l);
         }
 
         &:first-child, &:last-child {
@@ -408,7 +408,7 @@ main[role="main"] .kunai-sidebar.force-legacy {
 
 
         &:not([href]) {
-          color: color($cl-text tint(50%));
+          color: color-mix(in srgb, $cl-text, white 50%);
           text-decoration: none;
           // cursor: help;
           border-bottom: 1px solid transparent;
@@ -530,7 +530,7 @@ main[role="main"] .kunai-sidebar.force-legacy {
         // background-color: rgba(100, 100, 100, .03);
         font-size: .9em;
 
-        $c-b: 1px solid color($cl-link saturation(-5%) tint(65%) alpha(0.4));
+        $c-b: 1px solid rgb(from color-mix(in srgb, hsl(from $cl-link h calc(s - 5%) l), white 65%) r g b / 0.4);
         border-left: $c-b;
         border-bottom: $c-b;
         border-radius: 4px;
@@ -598,7 +598,7 @@ main[role="main"] .kunai-sidebar.force-legacy {
       > .self {
         $c: #87ceeb;
         border-left: 4px solid $c;
-        border-bottom: 1px dashed color($c alpha(0.7));
+        border-bottom: 1px dashed rgb(from $c r g b / 0.7);
         margin-bottom: .5em;
         // box-shadow: 0 3px 13px -6px rgba(20, 20, 20, 0.2);
 

css/kunai/site/tree.css

@@ -168,7 +168,7 @@
               border-bottom-width: 2px;
             }
             .treespan {
-              background: color(#fddfb3 tint(10%));
+              background: color-mix(in srgb, #fddfb3, white 10%);
               border: 1px solid #faa937;
               color: #000;
             }

css/kunai/yata.css

@@ -15,7 +15,7 @@ body.kunai {
 
   .yata-toolbar {
     display: flex;
-    // background: color($cl-shuri tint(25%));
+    // background: color-mix(in srgb, $cl-shuri, white 25%);
     background: #a9d4e2;
     border-radius: 2px 2px 0 0;