feat: use box shadow instead of border for buttons and text boxes

This ensures that the borders are always 1px thick. At different display scales, 1px in css may be less than 1 display pixel and will not render. Conversely, on devices with display scaling at non-integer scales (e.g. 1.5), a border will be decreased from 1.5px to 1px because CSS borders cannot handle subpixel rendering. Box-shadow can render in subpixels (works for high dpi screens), ensuring that the border is actually the correct size.

src/lib/common/Select/SelectedOption.svelte

@@ -75,7 +75,7 @@
     align-items: stretch;
     margin-top: 6px;
     background-color: var(--fds-card-background-default);
-    border: 1px solid var(--fds-card-stroke-default);
+    box-shadow: inset 0 0 0 1px var(--fds-control-stroke-default);
     border-radius: var(--fds-control-corner-radius);
   }
 

src/routes/(standard)/[tenant]/cms/collection/[collection]/BulkActions.svelte

@@ -137,6 +137,7 @@
   div.actions :global(.button) {
     border-radius: 0px;
     white-space: nowrap;
+    box-shadow: none;
   }
   div.actions :global(.button:first-child) {
     border-top-left-radius: var(--fds-control-corner-radius);

src/routes/+layout.svelte

@@ -201,4 +201,43 @@
   :global(:root .content-dialog-smoke .content-dialog footer) {
     grid-auto-columns: 1fr;
   }
+
+  /* use box shadow instead of border so that the pixel size is always correct */
+  /* darker underline */
+  :global(:root .button.style-standard) {
+    border: none !important;
+    --fds-control-stroke-secondary-overlay: hsla(0, 0%, 0%, 10.44%);
+    box-shadow: inset 0 0 0 1px var(--fds-control-stroke-default),
+      inset 0 -1px 0 0 var(--fds-control-stroke-secondary-overlay);
+    padding: 5px 12px 6.5px 12px;
+  }
+  @media (prefers-color-scheme: dark) {
+    :global(:root .button.style-standard) {
+      --fds-control-stroke-secondary-overlay: hsla(0, 0%, 0%, 2.32%);
+    }
+  }
+  /* uniform underline */
+  :global(:root .button.style-standard):active,
+  :global(:root .text-box-container) {
+    border: none !important;
+    box-shadow: inset 0 0 0 1px var(--fds-control-stroke-default);
+  }
+  :global(:root .checkbox[type='checkbox']:not(:checked)) {
+    border: none !important;
+    box-shadow: inset 0 0 0 1px var(--fds-control-strong-stroke-default);
+  }
+  :global(:root .text-box-underline) {
+    block-size: calc(100% + 0px) !important;
+    inline-size: calc(100% + 0px) !important;
+    inset-block-start: 0px !important;
+    inset-inline-start: 0px !important;
+  }
+  :global(:root .text-box-underline)::after {
+    border: none !important;
+    box-shadow: inset 0 -1px 0 0 var(--fds-control-strong-stroke-default);
+  }
+  :global(:root .text-box-container:focus-within .text-box-underline):after {
+    border: none !important;
+    box-shadow: inset 0 -2px 0 0 var(--fds-accent-default);
+  }
 </style>