[pull] main from TryGhost:main

.changeset/tidy-mangos-repeat.md

@@ -0,0 +1,6 @@
+---
+"@tryghost/kg-unsplash-selector": patch
+"@tryghost/koenig-lexical": patch
+---
+
+Fixed the Unsplash selector not following dark mode

apps/ember-admin/app/components/gh-unsplash.hbs

@@ -2,7 +2,7 @@
     {{!-- TODO: why does this modal background not cover the PSM without style override? --}}
     <div class="fullscreen-modal-background" role="button" {{on "click" @close}} style="z-index: 999"></div>
     <div
-        class="absolute top-8 right-8 bottom-8 left-8 br4 overflow-hidden bg-white z-9999"
+        class="absolute top-8 right-8 bottom-8 left-8 br4 overflow-hidden gh-unsplash-modal z-9999"
         {{on-resize this.handleResize}}
         {{on-key "Escape" this.handleEscape}}
     >
@@ -82,7 +82,7 @@
 
                 {{!-- zoomed image overlay --}}
                 {{#if this.zoomedPhoto}}
-                    <a href="#" class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 bg-white overflow-hidden" {{on "click" this.closeZoom}}>
+                    <a href="#" class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 gh-unsplash-modal overflow-hidden" {{on "click" this.closeZoom}}>
                         <GhUnsplashPhoto
                             @photo={{this.zoomedPhoto}}
                             @zoomed={{true}}

apps/ember-admin/app/styles/components/unsplash.css

@@ -5,6 +5,10 @@
 /* The parent container + layout
 /* ---------------------------------------------------------- */
 
+.gh-unsplash-modal {
+    background: var(--white);
+}
+
 .gh-unsplash-window {
     padding: 25px;
     background: #fff;
@@ -45,21 +49,34 @@
     margin: 50px auto;
 }
 
-.gh-unsplash-search {
+.gh-unsplash-modal .gh-unsplash-search {
     width: 100%;
     height: 40px;
     margin: 0;
-    padding: 0 30px 1px 50px;
+    padding: 0 32px 1px 40px;
     outline: none;
     border: 1px solid color-mod(var(--lightgrey) l(-2%));
     color: var(--darkgrey);
+    font-family: var(--font-family);
     font-size: 14px;
-    background-color: #fff;
+    background-color: var(--white);
     border-radius: 20px;
     appearance: none;
 }
 
-.gh-unsplash-search:focus {
+.gh-unsplash-modal .gh-input-icon svg {
+    left: 16px;
+    width: 16px;
+    height: 16px;
+    fill: var(--midgrey);
+    transform: translateY(-8px);
+}
+
+.dark .gh-unsplash-modal .gh-input-icon svg {
+    fill: #9DA0A3;
+}
+
+.gh-unsplash-modal .gh-unsplash-search:focus {
     border-color: color-mod(var(--lightgrey) l(-10%) s(+6%));
 }
 
@@ -170,14 +187,14 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    margin-left: 10px;
+    margin-left: 12px;
     padding: 8px 12px;
-    color: #777;
-    font-size: 1.4rem;
+    color: #7C8B9A;
+    font-size: 1.2rem;
     line-height: 1.1em;
     font-weight: 500;
     background: #fff;
-    border-radius: 5px;
+    border-radius: 6px;
     opacity: 0.9;
     transition: all 0.15s ease-in-out;
 }
@@ -201,18 +218,18 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     letter-spacing: 0;
     line-height: 1.15em;
 }
 
 .gh-unsplash-photo-author-img {
     flex-shrink: 0;
     display: block;
-    width: 30px;
-    height: 30px;
+    width: 32px;
+    height: 32px;
     overflow: hidden;
-    margin-right: 10px;
+    margin-right: 8px;
     border-radius: 100%;
 }
 

koenig/kg-unsplash-selector/src/ui/UnsplashButton.tsx

@@ -27,7 +27,7 @@ const UnsplashButton: React.FC<UnsplashButtonProps> = ({ icon, label, ...props }
 
   return (
     <a
-      className="text-grey-700 flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white px-3 py-2 font-sans text-sm font-medium leading-6 opacity-90 transition-all ease-in-out hover:opacity-100"
+      className="text-grey-700 flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white px-3 py-2 font-sans text-[1.2rem] font-medium leading-[2.4rem] opacity-90 transition-all ease-in-out hover:opacity-100"
       onClick={(e) => e.stopPropagation()}
       {...props}
     >

koenig/kg-unsplash-selector/src/ui/UnsplashGallery.tsx

@@ -34,7 +34,7 @@ const UnsplashGalleryLoading: React.FC = () => {
       className="absolute inset-y-0 left-0 flex w-full items-center justify-center overflow-hidden pb-[8vh]"
       data-kg-loader
     >
-      <div className="animate-spin before:bg-grey-800 relative inline-block size-[50px] rounded-full border border-black/10 before:z-10 before:mt-[7px] before:block before:size-[7px] before:rounded-full"></div>
+      <div className="animate-spin before:bg-grey-800 dark:before:bg-grey-400 relative inline-block size-[50px] rounded-full border border-black/10 before:z-10 before:mt-[7px] before:block before:size-[7px] before:rounded-full dark:border-white/10"></div>
     </div>
   );
 };
@@ -123,9 +123,9 @@ const UnsplashGallery: React.FC<UnsplashGalleryProps> = ({
   if (error) {
     return (
       <GalleryLayout galleryRef={galleryRef} zoomed={zoomed}>
-        <div className="flex h-full flex-col items-center justify-center">
-          <h1 className="mb-4 text-2xl font-bold">Error</h1>
-          <p className="text-lg font-medium">{error}</p>
+        <div className="text-foreground flex h-full flex-col items-center justify-center">
+          <h1 className="mb-4 text-[2.2rem] font-bold">Error</h1>
+          <p className="text-[1.5rem] font-medium">{error}</p>
         </div>
       </GalleryLayout>
     );

koenig/kg-unsplash-selector/src/ui/UnsplashImage.tsx

@@ -75,7 +75,7 @@ const UnsplashImage: FC<UnsplashImageProps> = ({
               className="mr-2 size-8 rounded-full"
               src={user.profile_image.medium}
             />
-            <div className="mr-2 truncate font-sans text-sm font-medium text-white">
+            <div className="mr-2 truncate font-sans text-[1.2rem] font-medium text-white">
               {user.name}
             </div>
           </div>

koenig/kg-unsplash-selector/src/ui/UnsplashSelector.tsx

@@ -18,26 +18,26 @@ const UnsplashSelector: FunctionComponent<UnsplashSelectorProps> = ({
     <>
       <div className="fixed inset-0 z-40 h-[100vh] bg-black opacity-60"></div>
       <div
-        className="not-kg-prose fixed inset-8 z-50 overflow-hidden rounded bg-white shadow-xl"
+        className="not-kg-prose bg-surface-panel fixed inset-8 z-50 overflow-hidden rounded shadow-xl"
         data-kg-modal="unsplash"
       >
         <button className="absolute right-6 top-6 cursor-pointer" type="button">
           <CloseIcon
-            className="text-grey-400 size-4 stroke-2"
+            className="text-muted-foreground size-4 stroke-2"
             data-kg-modal-close-button
             onClick={() => closeModal()}
           />
         </button>
         <div className="flex h-full flex-col">
           <header className="flex shrink-0 items-center justify-between px-20 py-10">
-            <h1 className="flex items-center gap-2 font-sans text-3xl font-bold text-black">
+            <h1 className="text-foreground flex items-center gap-2 font-sans text-[2.8rem] font-bold">
               <UnsplashIcon className="mb-1" />
               Unsplash
             </h1>
             <div className="relative w-full max-w-sm">
-              <SearchIcon className="text-grey-700 absolute left-4 top-1/2 size-4 -translate-y-2" />
+              <SearchIcon className="text-muted-foreground absolute left-4 top-1/2 size-4 -translate-y-2" />
               <input
-                className="border-grey-300 focus:border-grey-400 h-10 w-full rounded-full border border-solid pl-10 pr-8 font-sans text-md font-normal text-black focus-visible:outline-none"
+                className="border-border focus:border-muted-foreground placeholder:text-muted-foreground text-foreground h-10 w-full rounded-full border border-solid bg-transparent pl-10 pr-8 font-sans text-[1.4rem] font-normal focus-visible:outline-none"
                 placeholder="Search free high-resolution photos"
                 autoFocus
                 data-kg-unsplash-search

koenig/koenig-lexical/tailwind.config.cjs

@@ -5,12 +5,17 @@ module.exports = {
     important: '.koenig-lexical',
     content: [
         './src/**/*.{js,jsx,ts,tsx}',
-        './demo/**/*.{js,jsx,ts,tsx}'
+        './demo/**/*.{js,jsx,ts,tsx}',
+        '../kg-unsplash-selector/src/**/*.{js,jsx,ts,tsx}'
     ],
     darkMode: 'class',
     theme: {
         colors: {
             accent: 'var(--kg-accent-color, #ff0095)',
+            'surface-panel': 'var(--surface-panel, #FFF)',
+            foreground: 'var(--foreground, #15171A)',
+            'muted-foreground': 'var(--muted-foreground, #7C8B9A)',
+            border: 'var(--border, #DDE1E5)',
             transparent: 'transparent',
             current: 'currentColor',
             white: '#FFF',