Merge pull request #22 from freddiefujiwara/match-tv-ze-gs-look-and-feel-868382404318427464

Author: freddiefujiwara

index.html

@@ -28,6 +28,9 @@
     }
   })();
 </script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
 <title>Markdown to Image</title>
 <meta property="og:type" content="website" />
 <meta property="og:title" content="Markdown to Image" />

src/components/MarkdownToolbar.vue

@@ -132,7 +132,7 @@ defineExpose(
 
 <template>
   <div
-    class="lg:hidden fixed inset-x-0 z-30 border-t border-slate-200 bg-white/95 backdrop-blur"
+    class="lg:hidden fixed inset-x-0 z-30 border-t border-[var(--border)] bg-[var(--bg)]/95 backdrop-blur"
     :style="{
       bottom: `calc(${toolbarOffset}px + env(safe-area-inset-bottom, 0px))`,
       paddingBottom: '0.5rem',
@@ -142,7 +142,7 @@ defineExpose(
       <div class="flex gap-2 min-w-max" role="toolbar" aria-label="Markdown toolbar">
         <button
           type="button"
-          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          class="px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface-elevated)] text-[var(--link)] font-bold shadow-sm active:scale-95 transition-all"
           data-action="heading"
           @mousedown.prevent
           @touchstart.prevent.stop="handleLineAction('heading')"
@@ -152,7 +152,7 @@ defineExpose(
         </button>
         <button
           type="button"
-          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          class="px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface-elevated)] text-[var(--link)] font-bold shadow-sm active:scale-95 transition-all"
           data-action="list"
           @mousedown.prevent
           @touchstart.prevent.stop="handleLineAction('list')"
@@ -162,7 +162,7 @@ defineExpose(
         </button>
         <button
           type="button"
-          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          class="px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface-elevated)] text-[var(--link)] font-bold shadow-sm active:scale-95 transition-all"
           data-action="quote"
           @mousedown.prevent
           @touchstart.prevent.stop="handleLineAction('quote')"
@@ -172,7 +172,7 @@ defineExpose(
         </button>
         <button
           type="button"
-          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          class="px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface-elevated)] text-[var(--link)] font-bold shadow-sm active:scale-95 transition-all"
           data-action="bold"
           @mousedown.prevent
           @touchstart.prevent.stop="handleSnippetAction('**', 1)"
@@ -182,7 +182,7 @@ defineExpose(
         </button>
         <button
           type="button"
-          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          class="px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface-elevated)] text-[var(--link)] font-bold shadow-sm active:scale-95 transition-all"
           data-action="strike"
           @mousedown.prevent
           @touchstart.prevent.stop="handleSnippetAction('~~~~', 2)"
@@ -192,7 +192,7 @@ defineExpose(
         </button>
         <button
           type="button"
-          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          class="px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface-elevated)] text-[var(--link)] font-bold shadow-sm active:scale-95 transition-all"
           data-action="code"
           @mousedown.prevent
           @touchstart.prevent.stop="handleSnippetAction('``', 1)"
@@ -202,7 +202,7 @@ defineExpose(
         </button>
         <button
           type="button"
-          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          class="px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface-elevated)] text-[var(--link)] font-bold shadow-sm active:scale-95 transition-all"
           data-action="table"
           @mousedown.prevent
           @touchstart.prevent.stop="handleSnippetAction('|', 1)"
@@ -212,7 +212,7 @@ defineExpose(
         </button>
         <button
           type="button"
-          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          class="px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface-elevated)] text-[var(--link)] font-bold shadow-sm active:scale-95 transition-all"
           data-action="table-divider"
           @mousedown.prevent
           @touchstart.prevent.stop="handleSnippetAction('|-', 2)"
@@ -222,7 +222,7 @@ defineExpose(
         </button>
         <button
           type="button"
-          class="px-3 py-2 rounded-lg border border-slate-200 bg-white text-sm font-semibold shadow-sm"
+          class="px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--surface-elevated)] text-[var(--link)] font-bold shadow-sm active:scale-95 transition-all"
           data-action="rule"
           @mousedown.prevent
           @touchstart.prevent.stop="handleLineAction('rule')"

src/style.css

@@ -1,10 +1,33 @@
 @import "tailwindcss";
 
+:root {
+  font-family: Inter, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
+  line-height: 1.5;
+
+  --bg: #0b1120;
+  --text: #e5e7eb;
+  --muted: #94a3b8;
+  --surface: #111827;
+  --surface-elevated: #1f2937;
+  --border: #334155;
+  --link: #93c5fd;
+  --link-active: #ffffff;
+  --error: #fca5a5;
+  --primary: #3b82f6;
+}
+
 html,
 body,
 #app {
   width: 100%;
   overflow-x: hidden;
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
 }
 
 /* Markdown styles (lightweight, for social posts) */

src/views/EditorView.vue

@@ -231,56 +231,66 @@ defineExpose(
 </script>
 
 <template>
-  <div class="min-h-dvh bg-slate-50 text-slate-900">
+  <div class="min-h-dvh bg-[var(--bg)] text-[var(--text)]">
     <header
-      class="z-10 bg-white/90 backdrop-blur border-b border-slate-200 transition-all lg:sticky lg:top-0"
+      class="z-10 bg-[var(--bg)]/90 backdrop-blur border-b border-[var(--border)] transition-all lg:sticky lg:top-0"
       :class="isFocused ? 'hidden lg:block' : 'sticky top-0'"
     >
-      <div class="max-w-6xl mx-auto px-3 py-2 flex flex-wrap gap-2 items-center">
+      <div class="max-w-6xl mx-auto px-3 py-4 flex flex-wrap gap-4 items-center">
+        <h1 class="text-xl font-bold tracking-tight">md2img</h1>
+
         <div class="flex gap-2 flex-wrap">
           <button
             v-for="(preset, key) in imagePresets"
             :key="key"
-            class="px-3 py-2 rounded-lg text-sm border transition-colors"
-            :class="presetKey === key ? 'bg-slate-900 text-white border-slate-900' : 'bg-white border-slate-200 hover:bg-slate-50'"
+            class="px-3 py-1.5 rounded-lg text-sm font-semibold border transition-all"
+            :class="presetKey === key ? 'bg-[var(--primary)] text-white border-[var(--primary)] shadow-sm' : 'bg-[var(--surface-elevated)] border-[var(--border)] text-[var(--link)] hover:border-[var(--link)] hover:text-[var(--link-active)]'"
             @click="presetKey = key"
           >
             {{ preset.label }}
           </button>
         </div>
 
-        <div class="flex items-center gap-2 ml-auto flex-wrap">
-          <label class="text-xs text-slate-600">{{ uiText.backgroundLabel }}</label>
-          <input
-            type="color"
-            v-model="backgroundColor"
-            class="h-9 w-10 rounded border border-slate-200 cursor-pointer"
-          />
-
-          <label class="text-xs text-slate-600 ml-2">{{ uiText.textColorLabel }}</label>
-          <div class="flex gap-1">
-            <button
-              v-for="option in textColorPresets"
-              :key="option.value"
-              class="h-9 px-2 rounded-lg text-xs border flex items-center gap-2 transition-colors"
-              :class="textColor === option.value ? 'border-slate-900 bg-slate-50' : 'border-slate-200 bg-white hover:bg-slate-50'"
-              @click="textColor = option.value"
-            >
-              <span class="inline-block h-4 w-4 rounded-full border border-slate-200" :style="{ background: option.value }"></span>
-              {{ option.label }}
-            </button>
+        <div class="flex items-center gap-3 ml-auto flex-wrap">
+          <div class="flex items-center gap-2">
+            <label class="text-xs text-[var(--muted)]">{{ uiText.backgroundLabel }}</label>
+            <input
+              type="color"
+              v-model="backgroundColor"
+              class="h-8 w-8 rounded border border-[var(--border)] cursor-pointer bg-transparent"
+            />
           </div>
 
-          <label class="text-xs text-slate-600 ml-2">{{ uiText.textSizeLabel }}</label>
-          <input type="range" min="16" max="30" step="1" v-model.number="fontSize" class="cursor-pointer" />
-          <span class="text-xs w-8 text-right font-mono">{{ fontSize }}px</span>
+          <div class="flex items-center gap-2">
+            <label class="text-xs text-[var(--muted)]">{{ uiText.textColorLabel }}</label>
+            <div class="flex gap-1">
+              <button
+                v-for="option in textColorPresets"
+                :key="option.value"
+                class="h-8 px-2 rounded-lg text-xs font-semibold border flex items-center gap-2 transition-all"
+                :class="textColor === option.value ? 'bg-[var(--primary)] text-white border-[var(--primary)]' : 'bg-[var(--surface-elevated)] border-[var(--border)] text-[var(--link)] hover:border-[var(--link)] hover:text-[var(--link-active)]'"
+                @click="textColor = option.value"
+              >
+                <span class="inline-block h-3 w-3 rounded-full border border-white/20" :style="{ background: option.value }"></span>
+                <span class="hidden sm:inline">{{ option.label }}</span>
+              </button>
+            </div>
+          </div>
 
-          <label class="text-xs text-slate-600 ml-2">{{ uiText.lineHeightLabel }}</label>
-          <input type="range" min="1.2" max="1.9" step="0.05" v-model.number="lineHeight" class="cursor-pointer" />
-          <span class="text-xs w-10 text-right font-mono">{{ lineHeight.toFixed(2) }}</span>
+          <div class="flex items-center gap-2">
+            <label class="text-xs text-[var(--muted)]">{{ uiText.textSizeLabel }}</label>
+            <input type="range" min="16" max="30" step="1" v-model.number="fontSize" class="cursor-pointer accent-[var(--primary)]" />
+            <span class="text-xs w-8 text-right font-mono text-[var(--muted)]">{{ fontSize }}px</span>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <label class="text-xs text-[var(--muted)]">{{ uiText.lineHeightLabel }}</label>
+            <input type="range" min="1.2" max="1.9" step="0.05" v-model.number="lineHeight" class="cursor-pointer accent-[var(--primary)]" />
+            <span class="text-xs w-10 text-right font-mono text-[var(--muted)]">{{ lineHeight.toFixed(2) }}</span>
+          </div>
 
           <button
-            class="ml-2 px-4 py-2 rounded-xl bg-emerald-600 text-white font-semibold shadow-sm hover:bg-emerald-700 disabled:opacity-60 disabled:cursor-not-allowed transition-all"
+            class="ml-2 px-4 py-2 rounded-lg bg-[var(--primary)] text-white font-bold shadow-lg hover:brightness-110 active:scale-95 disabled:opacity-50 disabled:scale-100 disabled:cursor-not-allowed transition-all"
             :disabled="exporting"
             @click="exportAllPng"
           >
@@ -292,11 +302,11 @@ defineExpose(
 
     <main class="max-w-6xl mx-auto p-3 grid grid-cols-1 lg:grid-cols-2 gap-4 min-w-0">
       <!-- Editor -->
-      <section class="bg-white rounded-2xl border border-slate-200 overflow-hidden min-w-0 shadow-sm">
-        <div class="px-4 py-2 border-b border-slate-200 bg-slate-50/50 text-sm font-semibold flex items-center justify-between">
+      <section class="bg-[var(--surface)] rounded-xl border border-[var(--border)] overflow-hidden min-w-0 shadow-sm">
+        <div class="px-4 py-2 border-b border-[var(--border)] bg-[var(--surface-elevated)] text-sm font-semibold flex items-center justify-between">
           <span>{{ uiText.markdownLabel }}</span>
           <button
-            class="text-xs px-2 py-1 rounded border border-slate-200 bg-white hover:bg-slate-50 transition-colors"
+            class="text-xs px-2 py-1 rounded border border-[var(--border)] bg-[var(--surface)] text-[var(--link)] hover:text-[var(--link-active)] hover:border-[var(--link)] transition-colors"
             @click="markdownInput = ''"
           >
             {{ uiText.clearMarkdownLabel }}
@@ -307,14 +317,14 @@ defineExpose(
           v-model="markdownInput"
           @focus="isFocused = true"
           @blur="isFocused = false"
-          class="w-full h-[45dvh] lg:h-[75dvh] p-4 font-mono text-sm outline-none resize-none bg-transparent transition-all"
+          class="w-full h-[45dvh] lg:h-[75dvh] p-4 font-mono text-sm outline-none resize-none bg-transparent transition-all caret-[var(--primary)]"
           :class="isFocused ? 'h-[80dvh] lg:h-[75dvh] pb-[40dvh] lg:pb-4' : ''"
         />
       </section>
 
       <!-- Preview -->
-      <section class="bg-white rounded-2xl border border-slate-200 overflow-hidden min-w-0 shadow-sm">
-        <div class="px-4 py-2 border-b border-slate-200 bg-slate-50/50 text-sm font-semibold">
+      <section class="bg-[var(--surface)] rounded-xl border border-[var(--border)] overflow-hidden min-w-0 shadow-sm">
+        <div class="px-4 py-2 border-b border-[var(--border)] bg-[var(--surface-elevated)] text-sm font-semibold">
           {{ uiText.previewLabel }} / {{ uiText.pageCountLabel(pagesHtml.length) }}
         </div>
 
@@ -329,7 +339,7 @@ defineExpose(
             </div>
           </div>
 
-          <p class="mt-4 text-xs text-slate-500 text-center">
+          <p class="mt-4 text-xs text-[var(--muted)] text-center">
             {{ uiText.splitHint }}
           </p>
         </div>
@@ -348,7 +358,7 @@ defineExpose(
     <!-- Mobile save button at the bottom. -->
     <div class="lg:hidden fixed bottom-24 left-4 right-4 z-20" v-if="!isFocused">
       <button
-        class="w-full py-4 rounded-2xl bg-emerald-600 text-white font-bold shadow-xl hover:bg-emerald-700 disabled:opacity-60 transition-all"
+        class="w-full py-4 rounded-xl bg-[var(--primary)] text-white font-bold shadow-2xl hover:brightness-110 active:scale-95 disabled:opacity-50 transition-all"
         :disabled="exporting"
         @click="exportAllPng"
       >