STCOM-1301 Color contrast in focus styles, Callout styles. (#2302)

* adjust focus styles for contrast with background.

* adjust callout styles for firefox compatibility

* bump the color-fill-focus variable for a bit more contrast with white bg

* Switch callout colors to oklab for oklch fix.

CHANGELOG.md

@@ -16,6 +16,8 @@
 * Support Optimistic Locking in Tags - allow disable and show loading indicator in MultiSelect. Refs STCOM-1299.
 * Update `downshift` dependency. Refactor `<Selection>`, `<MultiSelection>`, `<AutoSuggest>` to functional components. Refs STCOM-1091.
 * Implement option grouping feature in `<Selection>`. Refs STCOM-1278.
+* Refactor `<Callout>` styles for Firefox compatibility.
+* Adjust focus styling for color contrast in main navigation. Refs STCOM-1301.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

lib/Callout/Callout.css

@@ -50,21 +50,22 @@
 
   &.error {
     border-color: var(--error);
-    background-color: oklch(from var(--error) 90% 11% h);
+    background-color: color-mix(in oklab, var(--error) 25%, var(--bg));
   }
 
   &.success {
     border-color: var(--success);
-    background-color: oklch(from var(--success) 90% 12% h);
+    background-color: color-mix(in oklab, var(--success) 25%, var(--bg));
   }
 
   &.warning {
     border-color: var(--warn);
-    background-color: oklch(from var(--warn) 90% 9% h);
+    background-color: color-mix(in oklab, var(--warn) 20%, var(--bg));
   }
 
   &.info {
     border-color: #4c8eca;
+    background-color: var(--bg);
   }
 
   &.slide-entering {

lib/sharedStyles/interactionStyles.css

@@ -164,7 +164,7 @@
 .interactionStyles:focus::before {
   background: var(--color-fill-focus);
   border: 1px solid var(--color-border);
-  box-shadow: 0 0 0 3px var(--color-fill-focus);
+  box-shadow: 0 0 0 2px var(--color-focus-shadow);
   z-index: 3;
 }
 

lib/variables.css

@@ -2,8 +2,8 @@
   --color-text: #000;
   --color-text-p2: rgba(0 0 0 / 62%);
   --color-border-form: rgba(0 0 0 / 42%);
-  --color-border: rgba(0 0 0 / 20%);
-  --color-border-p2: rgba(0 0 0 / 10%);
+  --color-border: color-mix(in oklch, currentcolor 50%, transparent);
+  --color-border-p2: color-mix(in oklch, currentcolor 15%, transparent);
   --color-icon: rgba(0 0 0 / 62%);
   --color-link: #2f609f;
   --color-link-current: #fff;
@@ -16,7 +16,8 @@
   --color-fill-current: rgba(0 0 0 / 62%);
   --color-fill-disabled: rgba(0 0 0 / 15%);
   --color-fill-hover: rgba(37 118 195 / 20%);
-  --color-fill-focus: rgba(37 118 195 / 30%);
+  --color-fill-focus: rgba(37 118 195 / 20%);
+  --color-focus-shadow:  rgba(166 212 255 / 65%);
   --color-fill-focus-current: rgb(116 173 191);
   --color-fill-active: var(--primary);
   --highlighter-fill: #fc0;