Fix copy button styles on CodeBlock (#2303)

* Fix copy button styles on CodeBlock * Use data-theme dark
temporalio · Sep 3, 2024 · 4eb321e · 4eb321e
1 parent cde49cd
commit 4eb321e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
@@ -191,7 +191,8 @@
     <CopyButton
       {copyIconTitle}
       {copySuccessIconTitle}
-      class="absolute right-1 top-1 text-white hover:bg-slate-800"
+      class="absolute right-1 top-1 text-secondary"
+      data-theme="dark"
       on:click={handleCopy}
       copied={$copied}
     />

diff --git a/src/lib/holocene/copyable/button.svelte b/src/lib/holocene/copyable/button.svelte
@@ -10,6 +10,7 @@
     copySuccessIconTitle: string;
     copied: boolean;
     'data-testid'?: string;
+    'data-theme'?: string;
   }
 
   export let copyIconTitle: string;
@@ -20,15 +21,16 @@
   export { className as class };
 </script>
 
-<button class={merge('copy-button', className)} on:click {...$$restProps}>
+<button
+  class={merge(
+    'surface-interactive-secondary m-1 rounded-md border-2 border-[transparent] bg-transparent p-1 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/70',
+    className,
+  )}
+  on:click
+  {...$$restProps}
+>
   <Icon
     title={copied ? copySuccessIconTitle : copyIconTitle}
     name={copied ? 'checkmark' : 'copy'}
   />
 </button>
-
-<style lang="postcss">
-  .copy-button {
-    @apply surface-interactive-secondary m-1 rounded-md border-2 border-[transparent] bg-transparent p-1 focus-visible:border-indigo-600 focus-visible:outline-none;
-  }
-</style>