refactor: use tailwind custom colors for themes

Use tailwind v4 @theme block so we can use bg-layer-0 instead of
bg-[--layer-0] for theme colors.

packages/ui/src/lib/ShortCut.svelte

@@ -9,7 +9,7 @@
   let { ctrl = false, shift = false, alt = false, key }: Props = $props();
 </script>
 
-<div class="command">
+<div class="command bg-layer-2">
   {#if ctrl}
     <span>Ctrl</span>
   {/if}
@@ -24,8 +24,8 @@
 
 <style>
   .command {
-    background: var(--layer-2);
     padding: 0.4em;
+    padding-inline: 0.8em;
     font-size: 0.8em;
     border-radius: 0.3em;
     white-space: nowrap;