Merge pull request #1703 from folio-org/UIEH-1402

UIEH-1402 Refactor css away from color() function
folio-org · Dec 11, 2023 · c92b8dd · c92b8dd
2 parents 0066dae + b1398d5
commit c92b8dd
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Remove eslint deps that are already listed in eslint-config-stripes. (UIEH-1389)
 * Improve HTML page titles for Assigned Users and Usage Consolidation Settings pages. (UIEH-1387)
 * Edit eholdings record (provider/package/title) > Cancel button does not work in same way as other apps Cancel button. (UIEH-1360)
+* Refactor CSS away from `color()` function. (UIEH-1402)
 
 ## [9.0.2] (https://github.com/folio-org/ui-eholdings/tree/v9.0.2) (2023-11-09)
 

diff --git a/src/components/provider-list-item/provider-list-item.css b/src/components/provider-list-item/provider-list-item.css
@@ -66,7 +66,7 @@
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right, color(white a(0)), color(white a(30%)) 50%, color(white a(0)));
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.3) 50%, rgba(255, 255, 255,0));
     background-size: 10em 100%;
     background-position: -10em 0;
     animation: shimmer 3s infinite;

diff --git a/src/components/search-package-list-item/search-package-list-item.css b/src/components/search-package-list-item/search-package-list-item.css
@@ -95,7 +95,7 @@
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right, color(white a(0)), color(white a(30%)) 50%, color(white a(0)));
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.3) 50%, rgba(255, 255, 255,0));
     background-size: 10em 100%;
     background-position: -10em 0;
     animation: shimmer 3s infinite;

diff --git a/src/components/title-list-item/title-list-item.css b/src/components/title-list-item/title-list-item.css
@@ -86,7 +86,7 @@
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right, color(white a(0)), color(white a(30%)) 50%, color(white a(0)));
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.3) 50%, rgba(255, 255, 255,0));
     background-size: 10em 100%;
     background-position: -10em 0;
     animation: shimmer 3s infinite;

diff --git a/src/components/toaster/style.css b/src/components/toaster/style.css
@@ -73,7 +73,7 @@
 
 .error {
   border-color: var(--error);
-  background-color: color(var(--error, #600) tint(75%));
+  background-color: oklch(from var(--error) 85% calc(c - 0.12) h);
 }
 
 .warn {
@@ -82,7 +82,7 @@
 
 .success {
   border-color: var(--success);
-  background-color: color(var(--success, #060) tint(75%));
+  background-color: oklch(from var(--success) 87% calc(c - 0.12) h);
 }
 
 .closeIcon {