From 372871127620a769cd059d271c21ba4c59f22e4e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 9 Jan 2026 16:04:52 +0000
Subject: [PATCH 1/6] Make the checkerboard black for dark mode

---
 resources/css/core/utilities.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index ed22063bb5..1825af0c69 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -318,7 +318,7 @@
 =================================================== */
 @utility bg-checkerboard {
     --checkerboard-light: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v12H0zm12 12h12v12H12z' fill='%23f3f4f6'/%3E%3C/svg%3E");
-    --checkerboard-dark: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v12H0zm12 12h12v12H12z' fill='%231f2937'/%3E%3C/svg%3E");
+    --checkerboard-dark: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v12H0zm12 12h12v12H12z' fill='%23000000'/%3E%3C/svg%3E");
 
     position: relative;
     background-color: #fff;

From 46a8f7676d81b99cec2b9728039aad26f95813e4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 9 Jan 2026 16:08:41 +0000
Subject: [PATCH 2/6] Add checkerboard inset option as a var. This is used for
 the grid where the border meant that previously the checkerbox would overlap
 it by 1px

---
 resources/css/core/utilities.css                | 2 +-
 resources/js/components/assets/Browser/Grid.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 1825af0c69..eac73ea53e 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -328,7 +328,7 @@
         border-radius: inherit;
         content: '';
         position: absolute;
-        inset: 0;
+        inset: var(--checkerboard-inset, 0);
         background-image: var(--checkerboard-light);
         opacity: 0;
         transition: opacity 0.2s ease-in-out;
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index a110de652b..dc057d45c1 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -103,6 +103,7 @@
                                     'bg-checkerboard!': asset.can_be_transparent,
                                     'opacity-50!': draggingAsset === asset.id,
                                 }"
+                                :style="asset.can_be_transparent ? { '--checkerboard-inset': '1px' } : {}"
                             >
                                 <button
                                     class="size-full"

From 09b9ab67eabecce7e9d38865fa3da55c5dd755a7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 9 Jan 2026 16:14:40 +0000
Subject: [PATCH 3/6] Add checkerboard focus-within inset option as a var
 instead, since it looks rubbish if it's the default inset

---
 resources/css/core/utilities.css                | 6 +++++-
 resources/js/components/assets/Browser/Grid.vue | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index eac73ea53e..81ae815d31 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -328,7 +328,7 @@
         border-radius: inherit;
         content: '';
         position: absolute;
-        inset: var(--checkerboard-inset, 0);
+        inset: 0;
         background-image: var(--checkerboard-light);
         opacity: 0;
         transition: opacity 0.2s ease-in-out;
@@ -339,6 +339,10 @@
         opacity: 1;
     }
 
+    &:focus-within::before {
+        inset: var(--checkerboard-focus-within-inset, 0);
+    }
+
     .dark & {
         background-color: var(--color-gray-850);
 
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index dc057d45c1..7c4949d9f3 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -103,7 +103,7 @@
                                     'bg-checkerboard!': asset.can_be_transparent,
                                     'opacity-50!': draggingAsset === asset.id,
                                 }"
-                                :style="asset.can_be_transparent ? { '--checkerboard-inset': '1px' } : {}"
+                                :style="asset.can_be_transparent ? { '--checkerboard-focus-within-inset': '1px' } : {}"
                             >
                                 <button
                                     class="size-full"

From 419d4833014c1913a3bb89decb3503e134b21656 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Sat, 10 Jan 2026 10:40:45 +0000
Subject: [PATCH 4/6] Reset to try a different approach, since offsetting the
 checkerboard causes a visual shift.

---
 resources/css/core/utilities.css                | 4 ----
 resources/js/components/assets/Browser/Grid.vue | 1 -
 2 files changed, 5 deletions(-)

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 81ae815d31..1825af0c69 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -339,10 +339,6 @@
         opacity: 1;
     }
 
-    &:focus-within::before {
-        inset: var(--checkerboard-focus-within-inset, 0);
-    }
-
     .dark & {
         background-color: var(--color-gray-850);
 
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 7c4949d9f3..a110de652b 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -103,7 +103,6 @@
                                     'bg-checkerboard!': asset.can_be_transparent,
                                     'opacity-50!': draggingAsset === asset.id,
                                 }"
-                                :style="asset.can_be_transparent ? { '--checkerboard-focus-within-inset': '1px' } : {}"
                             >
                                 <button
                                     class="size-full"

From 99d0c2d4444007ab99d132af2de8182412dc5976 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Sat, 10 Jan 2026 10:50:36 +0000
Subject: [PATCH 5/6] Remove overflow:hidden from asset tiles since it prevents
 us from offsetting the focus outline and I don't think it's needed anyway

---
 resources/css/components/assets.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index f1b900472c..9739ea333f 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -117,7 +117,7 @@
    ========================================================================== */
 
 .asset-tile {
-    @apply relative flex min-w-0 cursor-pointer flex-col items-center justify-between rounded-lg outline outline-gray-300 dark:outline-gray-700 overflow-hidden;
+    @apply relative flex min-w-0 cursor-pointer flex-col items-center justify-between rounded-lg outline outline-gray-300 dark:outline-gray-700;
 
     .selected & {
         @apply outline-3 outline-blue-500;

From 4b78ee6937b154067566192579721a330b60b7c7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Sat, 10 Jan 2026 11:21:06 +0000
Subject: [PATCH 6/6] Shift the focus outline offset slightly to account for a
 couple of things

---
 resources/css/components/assets.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index 9739ea333f..3f140c917e 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -119,6 +119,16 @@
 .asset-tile {
     @apply relative flex min-w-0 cursor-pointer flex-col items-center justify-between rounded-lg outline outline-gray-300 dark:outline-gray-700;
 
+    > button {
+        /* Shift the focus outline offset slightly to account for the grey border. Target direct descendents so we don't target inner buttons like the three-dot menu. */
+        --focus-outline-offset: 1px;
+        .selected & {
+            /* Shift the focous outline even more to account for the "selected" border */
+            --focus-outline-offset: 1px;
+            --focus-outline-width: 3px;
+        }
+    }
+
     .selected & {
         @apply outline-3 outline-blue-500;
     }