fix(ASSETS-17260): State of active component lacks 3 to 1 contrast ra…

…tio (#290) Co-authored-by: ens13533 <ens13533@adobe.com>
adobe · May 4, 2023 · f6596a6 · f6596a6
1 parent c205932
commit f6596a6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/coral-component-table/src/styles/light.styl b/coral-component-table/src/styles/light.styl
@@ -19,6 +19,9 @@ $table-background-color = var(--spectrum-light-table-background-color);
 $table-background-color-hover = rgb(243, 243, 243);
 $table-background-color-selected = rgb(232, 241, 252);
 $table-background-color-selected-hover = rgb(210, 228, 249);
+$table-background-color-selected-members = rgba(2, 101, 220, .1);
+$table-background-color-selected-members-hover = rgba(2, 101, 220, .07);
+$table-foreground-color-selected-members-hover = #000000;
 
 $table-quiet-background-color-hover = var(--spectrum-light-table-quiet-row-background-color-hover);
 $table-quiet-background-color-selected = var(--spectrum-light-table-quiet-row-background-color-selected);
@@ -34,6 +37,7 @@ $table-header-cell-icon-color = rgb(110, 110, 110);
 $table-header-cell-icon-color-hover = rgb(44, 44, 44);
 
 $table-cell-color = var(--spectrum-light-table-cell-text-color);
+$table-cell-color-members = var(--spectrum-light-table-cell-text-color-members);
 
 .coral--light {
   @import 'skin.styl'

diff --git a/coral-component-table/src/styles/skin.styl b/coral-component-table/src/styles/skin.styl
@@ -31,7 +31,7 @@
 
 ._coral-Table-cell {
   background-color: $table-background-color;
-  color: $table-cell-color;
+  color: $table-cell-color-members;
 }
 
 ._coral-Table-head {
@@ -231,12 +231,13 @@
 
     &.is-selected {
       ._coral-Table-cell {
-        background-color: $table-background-color-selected;
+        background-color: $table-background-color-selected-members;
       }
 
       &:hover {
         ._coral-Table-cell {
-          background-color: $table-background-color-selected-hover;
+          background-color: $table-background-color-selected-members-hover;
+          color: $table-foreground-color-selected-members-hover;
         }
       }
     }

diff --git a/coral-theme-spectrum/src/styles/vars.css b/coral-theme-spectrum/src/styles/vars.css
@@ -12593,6 +12593,7 @@
   --spectrum-light-table-header-sort-icon-color: rgb(142, 142, 142);
   --spectrum-light-table-header-background-color: rgba(0, 0, 0, 0);
   --spectrum-light-table-cell-text-color: rgb(75, 75, 75);
+  --spectrum-light-table-cell-text-color-members: rgb(34, 34, 34);
   --spectrum-light-table-cell-background-color: rgba(0, 0, 0, 0);
   --spectrum-light-table-cell-border-color: rgb(225, 225, 225);
   --spectrum-light-table-row-background-color-hover: rgba(44,44,44,0.06);