Merge pull request #20693 from calixteman/bug2016321

Fix the style of the thumbnails in HCM (bug 2016491, bug 2016321, bug 2016323, bug 2016827)

Author: timvandermeij

web/views_manager.css

@@ -94,8 +94,13 @@
   --image-current-focused-outline-color: var(--image-hover-border-color);
   --image-page-number-bg: light-dark(#f0f0f4, #23222b);
   --image-page-number-fg: var(--text-color);
+  --image-page-number-border-color: transparent;
+  --image-hover-page-number-bg: var(--image-page-number-bg);
+  --image-hover-page-number-fg: var(--image-page-number-fg);
   --image-current-page-number-bg: var(--image-current-border-color);
   --image-current-page-number-fg: light-dark(#fff, #15141a);
+  --image-current-hover-page-number-bg: var(--image-current-page-number-bg);
+  --image-current-hover-page-number-fg: var(--image-current-page-number-fg);
   --image-shadow:
     0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
     0 0 0 1px var(--image-border-color),
@@ -122,6 +127,7 @@
       calc(3 * var(--image-border-width) / 2) var(--image-current-border-color);
   --image-dragging-shadow: 0 0 0 var(--image-border-width)
     var(--image-current-border-color);
+  --multiple-dragging-indicator-bg: var(--indicator-color);
   --multiple-dragging-text-color: light-dark(#fbfbfe, #15141a);
 
   @media screen and (forced-colors: active) {
@@ -145,15 +151,24 @@
     --status-warning-bg: none;
     --indicator-warning-color: CanvasText;
     --header-shadow: none;
-    --image-shadow: 0 0 0 1px CanvasText;
-    --image-outline: 1px solid CanvasText;
-    --image-border-color: CanvasText;
+    --image-shadow: none;
+    --image-outline: 1px solid ButtonText;
+    --image-focus-outline-color: CanvasText;
     --image-hover-border-color: SelectedItem;
-    --image-current-border-color: ButtonBorder;
+    --image-hover-page-number-bg: SelectedItemText;
+    --image-hover-page-number-fg: SelectedItem;
+    --image-current-page-number-bg: ButtonText;
+    --image-current-page-number-fg: ButtonFace;
+    --image-current-border-color: ButtonText;
     --image-current-focused-outline-color: var(--image-hover-border-color);
+    --image-current-hover-page-number-bg: SelectedItem;
+    --image-current-hover-page-number-fg: SelectedItemText;
     --image-page-number-bg: ButtonFace;
-    --image-page-number-fg: CanvasText;
+    --image-page-number-fg: ButtonText;
+    --image-page-number-border-color: var(--image-page-number-fg);
     --multiple-dragging-bg: Canvas;
+    --multiple-dragging-indicator-bg: ButtonBorder;
+    --multiple-dragging-text-color: Canvas;
   }
 
   display: flex;
@@ -607,6 +622,7 @@
         &:not(.isDragging) > .thumbnailImageContainer::after {
           content: attr(page-number);
           border-radius: 8px;
+          border: 1px solid var(--image-page-number-border-color);
           background-color: var(--image-page-number-bg);
           color: var(--image-page-number-fg);
           position: absolute;
@@ -615,10 +631,11 @@
           min-width: 32px;
           height: 16px;
           text-align: center;
+          box-sizing: content-box;
           translate: calc(var(--dir-factor) * 50%);
 
           font: menu;
-          font-size: 13px;
+          font-size: 12px;
           font-style: normal;
           font-weight: 400;
           line-height: normal;
@@ -631,6 +648,7 @@
           > .thumbnailImageContainer::after {
           background-color: var(--image-current-page-number-bg);
           color: var(--image-current-page-number-fg);
+          outline: 1px solid var(--image-current-border-color);
         }
 
         &.isDragging > input {
@@ -656,8 +674,8 @@
           img {
             width: 100%;
             height: 100%;
-            border: inherit;
-            border-radius: inherit;
+            border: none;
+            border-radius: 8px;
             outline: none;
             user-select: none;
             pointer-events: none;
@@ -670,23 +688,87 @@
           &:hover {
             cursor: pointer;
             box-shadow: var(--image-hover-shadow);
+
+            &::after {
+              background-color: var(--image-hover-page-number-bg);
+              color: var(--image-hover-page-number-fg);
+            }
+
+            @media screen and (forced-colors: active) {
+              /* box-shadow isn't rendered in HCM */
+              box-shadow: none;
+              outline: var(--image-border-width) var(--image-hover-border-color)
+                solid;
+            }
           }
 
           &:focus-visible {
             &:not([aria-current="page"]) {
               box-shadow: var(--image-hover-shadow);
               outline: none;
+
+              @media screen and (forced-colors: active) {
+                /* box-shadow isn't rendered in HCM */
+                box-shadow: none;
+                outline: var(--image-border-width)
+                  var(--image-focus-outline-color) solid;
+              }
             }
 
             &[aria-current="page"] {
               outline: var(--image-border-width) solid
                 var(--image-current-focused-outline-color);
               outline-offset: var(--image-border-width);
+
+              @media screen and (forced-colors: active) {
+                /* box-shadow isn't rendered in HCM */
+                box-shadow: none;
+                outline: var(--image-border-width)
+                  var(--image-current-border-color) solid;
+                outline-offset: 0;
+
+                > img {
+                  outline: var(--image-border-width)
+                    var(--image-focus-outline-color) solid;
+                  outline-offset: var(--image-border-width);
+                }
+              }
+            }
+
+            @media screen and (forced-colors: active) {
+              /* box-shadow isn't rendered in HCM */
+              box-shadow: none;
+              outline: var(--image-border-width)
+                var(--image-current-border-color) solid;
+
+              &:hover > img {
+                outline: var(--image-border-width)
+                  var(--image-hover-border-color) solid;
+                outline-offset: var(--image-border-width);
+              }
             }
           }
 
           &[aria-current="page"] {
             box-shadow: var(--image-current-shadow);
+
+            &:hover::after {
+              background-color: var(--image-current-hover-page-number-bg);
+              color: var(--image-current-hover-page-number-fg);
+            }
+
+            @media screen and (forced-colors: active) {
+              /* box-shadow isn't rendered in HCM */
+              box-shadow: none;
+              outline: var(--image-border-width)
+                var(--image-current-border-color) solid;
+
+              &:hover > img {
+                outline: var(--image-border-width)
+                  var(--image-hover-border-color) solid;
+                outline-offset: var(--image-border-width);
+              }
+            }
           }
 
           &.placeholder {
@@ -707,6 +789,11 @@
             &.multiple {
               box-shadow: var(--image-multiple-dragging-shadow);
 
+              @media screen and (forced-colors: active) {
+                forced-color-adjust: none;
+                box-shadow: var(--image-multiple-dragging-shadow);
+              }
+
               > .thumbnailImageContainer {
                 position: absolute;
                 top: 0;
@@ -723,7 +810,7 @@
               &::after {
                 content: attr(data-multiple-count);
                 border-radius: calc(8px * var(--thumbnail-dragging-scale));
-                background-color: var(--indicator-color);
+                background-color: var(--multiple-dragging-indicator-bg);
                 color: var(--multiple-dragging-text-color);
                 position: absolute;
                 inset-block-end: calc(4px * var(--thumbnail-dragging-scale));