STSMACOM-791 use native blending for addressEdit/addressView (#1418)

* use native blending for addressEdit/addressView * change fill style of adress edit icon
folio-org · Dec 12, 2023 · 8e46f3e · 8e46f3e
1 parent 520eb6b
commit 8e46f3e
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * Added `indexRef` and `inputRef` props to `<SearchAndSort>`. Refs STSMACOM-788.
 * Extend NotesAccordion and NotesSmartAccodion components to accept a prop  hideNewButton. Refs STSMACOM-789.
 * Extend `Tags` component to accept `mutateEntity` prop. Refs STSMACOM-792.
+* Refactor CSS away from postcss-color-function. Refs STSMACOM-791.
 
 ## [9.0.0](https://github.com/folio-org/stripes-smart-components/tree/v9.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v8.0.0...v9.0.0)

diff --git a/lib/AddressFieldGroup/AddressEdit/AddressEdit.css b/lib/AddressFieldGroup/AddressEdit/AddressEdit.css
@@ -45,8 +45,7 @@
 
   &:hover {
     & :global .stripes__icon {
-      /* stylelint-disable-next-line function-no-unknown */
-      fill: color(#900 blend(#aaa 50%));
+      fill: color-mix(in oklch, #900, #aaa);
     }
   }
 }
@@ -87,8 +86,7 @@
 
 .addressFormBody {
   padding: 14px;
-  /* stylelint-disable-next-line function-no-unknown */
-  background-color: color(var(--bg) blend(var(--bg-hover) 20%));
+  background-color: color-mix(in oklch, var(--bg), var(--bg-hover) 20%);
   width: 100%;
 }
 

diff --git a/lib/AddressFieldGroup/AddressView/AddressView.css b/lib/AddressFieldGroup/AddressView/AddressView.css
@@ -14,7 +14,6 @@
 
 .addressItemContent {
   padding: 14px;
-  /* stylelint-disable-next-line function-no-unknown */
-  background-color: color(var(--bg) blend(var(--bg-hover) 20%));
+  background-color: color-mix(in oklch, var(--bg), var(--bg-hover) 20%);
   width: 100%;
 }