fix(#3672): WHCM/forced-colors support for column resizer (#3818)

Author: Michael Jordan

packages/@adobe/spectrum-css-temp/components/table/skin.css

@@ -13,6 +13,12 @@ governing permissions and limitations under the License.
 :root {
   --spectrum-table-header-sort-icon-color-hover: var(--spectrum-global-color-gray-700);
 }
+.spectrum-Table {
+  --spectrum-table-col-resize-indicator-background-color: var(--spectrum-global-color-blue-600);
+  --spectrum-table-col-resize-nubbin-background-color: var(--spectrum-global-color-blue-600);
+  --spectrum-table-col-resize-nubbin-icon-color: var(--spectrum-global-color-static-white);
+  --spectrum-table-body-resize-indicator-background-color: var(--spectrum-global-color-blue-600);
+}
 
 .spectrum-Table-headWrapper {
   border-inline-start-color: transparent;
@@ -304,10 +310,31 @@ tbody.spectrum-Table-body {
 
 .spectrum-Table-colResizeIndicator {
   &.spectrum-Table-colResizeIndicator--resizing {
-    background-color: var(--spectrum-global-color-blue-600);
+    background-color: var(--spectrum-table-col-resize-indicator-background-color);
+  }
+}
+.spectrum-Table-colResizeNubbin {
+  svg {
+    > g {
+      fill: var(--spectrum-table-col-resize-nubbin-background-color);
+      stroke: var(--spectrum-table-col-resize-nubbin-background-color);
+    }
+    > path {
+      fill: var(--spectrum-table-col-resize-nubbin-icon-color);
+      stroke: var(--spectrum-table-col-resize-nubbin-icon-color);
+    }
   }
 }
-.spectrum-Table-colResizeNubbin {}
 .spectrum-Table-bodyResizeIndicator {
-  background-color: var(--spectrum-global-color-blue-600);
+  background-color: var(--spectrum-table-body-resize-indicator-background-color);
+}
+
+@media (forced-colors: active) {
+  .spectrum-Table {
+    --spectrum-table-col-resize-indicator-background-color: Highlight;
+    --spectrum-table-col-resize-nubbin-background-color: Highlight;
+    --spectrum-table-col-resize-nubbin-icon-color: HighlightText;
+    --spectrum-table-body-resize-indicator-background-color: Highlight;
+    --spectrum-table-divider-border-color: CanvasText;
+  }
 }

packages/@react-spectrum/table/src/Nubbin.tsx

@@ -17,14 +17,12 @@ import React from 'react';
 export function Nubbin() {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-      <g id="Group_175838" data-name="Group 175838">
-        <g id="Ellipse_10104" data-name="Ellipse 10104" fill="var(--spectrum-global-color-blue-600)" stroke="var(--spectrum-global-color-blue-600)" strokeWidth="2">
-          <circle cx="8" cy="8" r="8" stroke="none" />
-          <circle cx="8" cy="8" r="7" fill="none" />
-        </g>
+      <g fill="var(--spectrum-global-color-blue-600)" stroke="var(--spectrum-global-color-blue-600)" strokeWidth="2">
+        <circle cx="8" cy="8" r="8" stroke="none" />
+        <circle cx="8" cy="8" r="7" fill="none" />
       </g>
-      <path id="Path_104166" data-name="Path 104166" d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(2116 7385.763)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
-      <path id="Path_104167" data-name="Path 104167" d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(-2100 -7369.763) rotate(180)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
+      <path d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(2116 7385.763)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
+      <path d="M-2106-7380.263v5l2.5-2.551Z" transform="translate(-2100 -7369.763) rotate(180)" fill="#fff" stroke="#fff" strokeLinejoin="round" strokeWidth="2" />
     </svg>
   );
 }