fix(theme): focusable theme card

CyanSalt · Nov 18, 2024 · 259ed90 · 259ed90
1 parent 942c628
commit 259ed90
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 34 deletions.
diff --git a/addons/theme/src/renderer/ThemeCard.vue b/addons/theme/src/renderer/ThemeCard.vue
@@ -7,41 +7,50 @@ const { theme } = defineProps<{
 </script>
 
 <template>
-  <figure
+  <button
+    type="button"
+    data-commas-alt
     :class="['theme-card', { skeleton: !theme }]"
-    :style="{ 'background-color': theme?.background, color: theme?.foreground }"
   >
-    <figcaption class="card-header">
-      <span class="theme-name">{{ theme?.name }}</span>
-    </figcaption>
-    <div class="theme-preview">
-      <div class="preview-line" :style="{ color: theme?.brightRed }">
-        <div class="preview-line" :style="{ color: theme?.red }"></div>
+    <figure
+      class="card-content"
+      :style="{ 'background-color': theme?.background, color: theme?.foreground }"
+    >
+      <figcaption class="card-header">
+        <span class="theme-name">{{ theme?.name }}</span>
+      </figcaption>
+      <div class="theme-preview">
+        <div class="preview-line" :style="{ color: theme?.brightRed }">
+          <div class="preview-line" :style="{ color: theme?.red }"></div>
+        </div>
+        <div class="preview-line" :style="{ color: theme?.brightGreen }">
+          <div class="preview-line" :style="{ color: theme?.green }"></div>
+        </div>
+        <div class="preview-line" :style="{ color: theme?.brightYellow }">
+          <div class="preview-line" :style="{ color: theme?.yellow }"></div>
+        </div>
+        <div class="preview-line" :style="{ color: theme?.brightBlue }">
+          <div class="preview-line" :style="{ color: theme?.blue }"></div>
+        </div>
+        <div class="preview-line" :style="{ color: theme?.brightMagenta ?? theme?.brightPurple }">
+          <div class="preview-line" :style="{ color: theme?.magenta ?? theme?.purple }"></div>
+        </div>
+        <div class="preview-line" :style="{ color: theme?.brightCyan }">
+          <div class="preview-line" :style="{ color: theme?.cyan }"></div>
+        </div>
+        <div class="preview-line" :style="{ color: theme?.meta.isDark ? theme.white : theme?.black }">
+          <div
+            class="preview-line"
+            :style="{ color: theme?.meta.isDark ? theme.brightWhite : theme?.brightBlack }"
+          ></div>
+        </div>
+        <!-- Invert brightWhite and white for light themes -->
+        <div class="preview-line" :style="{ color: theme?.meta.isDark ? theme.black : theme?.brightWhite }">
+          <div class="preview-line" :style="{ color: theme?.meta.isDark ? theme.brightBlack : theme?.white }"></div>
+        </div>
       </div>
-      <div class="preview-line" :style="{ color: theme?.brightGreen }">
-        <div class="preview-line" :style="{ color: theme?.green }"></div>
-      </div>
-      <div class="preview-line" :style="{ color: theme?.brightYellow }">
-        <div class="preview-line" :style="{ color: theme?.yellow }"></div>
-      </div>
-      <div class="preview-line" :style="{ color: theme?.brightBlue }">
-        <div class="preview-line" :style="{ color: theme?.blue }"></div>
-      </div>
-      <div class="preview-line" :style="{ color: theme?.brightMagenta ?? theme?.brightPurple }">
-        <div class="preview-line" :style="{ color: theme?.magenta ?? theme?.purple }"></div>
-      </div>
-      <div class="preview-line" :style="{ color: theme?.brightCyan }">
-        <div class="preview-line" :style="{ color: theme?.cyan }"></div>
-      </div>
-      <div class="preview-line" :style="{ color: theme?.meta.isDark ? theme.white : theme?.black }">
-        <div class="preview-line" :style="{ color: theme?.meta.isDark ? theme.brightWhite : theme?.brightBlack }"></div>
-      </div>
-      <!-- Invert brightWhite and white for light themes -->
-      <div class="preview-line" :style="{ color: theme?.meta.isDark ? theme.black : theme?.brightWhite }">
-        <div class="preview-line" :style="{ color: theme?.meta.isDark ? theme.brightBlack : theme?.white }"></div>
-      </div>
-    </div>
-  </figure>
+    </figure>
+  </button>
 </template>
 
 <style lang="scss" scoped>
@@ -54,12 +63,15 @@ const { theme } = defineProps<{
 }
 
 .theme-card {
+  border-radius: 4px;
+}
+.card-content {
   display: flex;
   flex-direction: column;
   margin: 0;
   overflow: hidden;
   background: var(--design-highlight-background);
-  border-radius: 4px;
+  border-radius: inherit;
   box-shadow: var(--design-element-shadow);
 }
 .card-header {

diff --git a/addons/theme/src/renderer/ThemePane.vue b/addons/theme/src/renderer/ThemePane.vue
@@ -117,6 +117,7 @@ async function applyTheme(item: RemoteTheme) {
           <ThemeCard
             v-for="i in 10"
             :key="i"
+            disabled
           />
         </template>
         <template v-else>
@@ -164,7 +165,6 @@ async function applyTheme(item: RemoteTheme) {
   grid-gap: 24px;
   width: 100%;
   :deep(.theme-card):not(.skeleton) {
-    cursor: pointer;
     &.active {
       outline: 2px solid rgb(var(--system-accent));
     }

diff --git a/src/renderer/assets/layers.scss b/src/renderer/assets/layers.scss
@@ -34,6 +34,23 @@
       cursor: not-allowed;
     }
   }
+  button[data-commas-alt] {
+    appearance: none;
+    padding: 0;
+    border: none;
+    color: inherit;
+    font: inherit;
+    font-size: inherit;
+    background: transparent;
+    cursor: pointer;
+    &:focus-visible {
+      outline: 1px solid rgb(var(--system-accent));
+    }
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
   a[data-commas] {
     appearance: none;
     padding: 0;
@@ -113,6 +130,16 @@
     line-height: inherit;
     background: transparent;
     outline: none;
+    &::placeholder {
+      color: rgb(var(--theme-foreground));
+      opacity: 0.25;
+    }
+    &:focus-visible {
+      outline: 1px solid rgb(var(--system-accent));
+    }
+    &:read-only {
+      opacity: 0.5;
+    }
   }
   h2[data-commas] {
     margin: 8px 0;