STCOM-1164 Refactor away from color() function (#2176)

* refactor away from color function

* fix card styling (use permanent variable) and remove postcss-color-function dependency/usage

.storybook/stcom-webpack.config.js

@@ -43,7 +43,7 @@ module.exports = async (config) => {
               require('postcss-nesting'),
               require('postcss-custom-media'),
               require('postcss-media-minmax'),
-              require('postcss-color-function'),
+              require('@csstools/postcss-relative-color-syntax'),
             ],
           },
           sourceMap: true,

lib/Button/Button.css

@@ -168,7 +168,7 @@
         border-bottom: 4px solid var(--primary);
 
         &:focus {
-          border-bottom-color: color(var(--primary) shade(8%));
+          border-bottom-color: oklch(from var(--primary) calc(l - 0.03) c h);
         }
       }
 

lib/Callout/Callout.css

@@ -50,17 +50,17 @@
 
   &.error {
     border-color: var(--error);
-    background-color: color(var(--error, #600) tint(75%));
+    background-color: oklch(from var(--error) 90% 11% h);
   }
 
   &.success {
     border-color: var(--success);
-    background-color: color(var(--success, #060) tint(75%));
+    background-color: oklch(from var(--success) 90% 12% h);
   }
 
   &.warning {
     border-color: var(--warn);
-    background-color: color(var(--warn, #940) tint(75%));
+    background-color: oklch(from var(--warn) 90% 9% h);
   }
 
   &.info {

lib/Card/Card.css

@@ -2,7 +2,7 @@
 
 .card {
   width: 100%;
-  background-color: color(var(--bg) blend(var(--bg-hover) 20%));
+  background-color: color-mix(in oklch, var(--bg) 80%, var(--bg-hover) 20%);
   border: 1px solid var(--color-border-p2);
   margin-bottom: var(--gutter);
   overflow: hidden;

lib/Datepicker/Calendar.css

@@ -65,7 +65,7 @@
     }
 
     &.today {
-      background: color(#106c9e tint(80%));
+      background: color-mix(in oklch, var(--bg) 80%, var(--bg-hover-native) 20%);
     }
 
     &.excluded {

lib/sharedStyles/form.css

@@ -66,21 +66,21 @@
 
   &.hasWarning {
     border-color: var(--warn);
-    background-color: color(var(--warn) alpha(-95%));
+    background-color: oklch(from var(--warn) l c h / 5%);
   }
 
   &.hasError {
     border-color: var(--error);
-    background-color: color(var(--error) alpha(-95%));
+    background-color: oklch(from var(--error) l c h / 5%);
   }
 
   &.isValid {
     border-color: var(--success);
-    background-color: color(var(--success) alpha(-95%));
+    background-color: oklch(from var(--success) l c h / 5%);
   }
 
   &.isChanged {
-    background-color: color(var(--primary) alpha(-80%));
+    background-color: oklch(from var(--primary) l c h / 20%);
   }
 }
 

lib/variables.css

@@ -22,7 +22,7 @@
   --highlighter-fill: #fc0;
   --shadow: 0 4px 32px rgba(0, 0, 0, 0.175);
   --bg: #fff;
-  --bg-hover: color(var(--bg) contrast(100%) blend(var(--bg) 90%));
+  --bg-hover: color-mix(in oklch, oklch(from var(--bg) calc(l - 60) c h) 10%, var(--bg) 90%);
   --checkable-disabled-fill: #808080;
   --primary: #1960a4;
   --secondary: #999;

package.json

@@ -48,6 +48,7 @@
     "@babel/preset-react": "^7.7.4",
     "@babel/register": "^7.0.0",
     "@bigtest/interactor": "0.7.2",
+    "@csstools/postcss-relative-color-syntax": "^2.0.7",
     "@folio/eslint-config-stripes": "^7.0.0",
     "@folio/stripes-cli": "^3.0.0",
     "@folio/stripes-testing": "^4.7.0",
@@ -73,7 +74,6 @@
     "moment": "^2.29.0",
     "postcss": "^8.4.2",
     "postcss-calc": "^9.0.1",
-    "postcss-color-function": "folio-org/postcss-color-function",
     "postcss-custom-media": "^9.0.1",
     "postcss-custom-properties": "12.1.11",
     "postcss-import": "^15.0.1",