Mercurial

diff mrjunejune/src/tools/markdown_to_html/index.css @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 30c2196d03d4
children
line wrap: on
line diff
--- a/mrjunejune/src/tools/markdown_to_html/index.css	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/tools/markdown_to_html/index.css	Wed Aug 05 05:25:40 2026 -0700
@@ -6,7 +6,7 @@
 
 body {
   line-height: 1.6;
-  padding: 20px;
+  padding: var(--zenbu-sys-padding-lg);
   max-width: 1400px;
   margin: 0 auto;
 }
@@ -24,7 +24,7 @@
 .container {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
+  gap: var(--zenbu-sys-space-container);
   height: calc(100vh - 200px);
   min-height: 500px;
 }
@@ -33,9 +33,9 @@
   display: flex;
   flex-direction: column;
   background: var(--white);
-  border-radius: 8px;
+  border-radius: var(--zenbu-sys-radius-control);
   border: 1px solid rgba(var(--gray), 0.3);
-  padding: 15px;
+  padding: var(--zenbu-sys-padding-md);
   overflow: hidden;
 }
 
@@ -50,7 +50,7 @@
 .label {
   font-weight: 600;
   color: var(--gray-dark);
-  font-size: 14px;
+  font-size: var(--zenbu-sys-font-size-sm);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -59,10 +59,8 @@
   background: var(--accent);
   color: var(--white);
   border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
+  border-radius: var(--zenbu-sys-radius-control-small);
   cursor: pointer;
-  font-size: 14px;
   transition: background 0.2s;
 }
 
@@ -74,13 +72,14 @@
 textarea {
   flex: 1;
   width: 100%;
-  padding: 15px;
+  padding: var(--zenbu-sys-padding-md);
   background: var(--gray-light);
   color: var(--gray-dark);
   border: 1px solid rgba(var(--gray), 0.3);
-  border-radius: 4px;
+  border-radius: var(--zenbu-sys-radius-control-small);
   font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-  font-size: 14px;
+  font-size: var(--zenbu-sys-font-size-sm);
+  line-height: var(--zenbu-sys-line-height-sm);
   line-height: 1.5;
   resize: none;
 }
@@ -93,13 +92,14 @@
 /* Output panel */
 #output {
   flex: 1;
-  padding: 15px;
+  padding: var(--zenbu-sys-padding-md);
   border: 1px solid rgba(var(--gray), 0.3);
-  border-radius: 4px;
+  border-radius: var(--zenbu-sys-radius-control-small);
   background: var(--white);
   color: var(--gray-dark);
   overflow-y: auto;
-  font-size: 15px;
+  font-size: var(--zenbu-sys-font-size-sm);
+  line-height: var(--zenbu-sys-line-height-sm);
 }
 
 /* Markdown output styles */
@@ -134,7 +134,7 @@
 #output code {
   background: var(--gray-light);
   padding: 2px 6px;
-  border-radius: 3px;
+  border-radius: var(--zenbu-sys-radius-control-small);
   font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
   font-size: 0.9em;
   color: var(--accent);
@@ -144,7 +144,7 @@
   background: var(--black);
   color: var(--white);
   padding: 15px;
-  border-radius: 6px;
+  border-radius: var(--zenbu-sys-radius-control-small);
   overflow-x: auto;
   margin: 1em 0;
   line-height: 1.4;
@@ -183,7 +183,7 @@
 #output img {
   max-width: 100%;
   height: auto;
-  border-radius: 4px;
+  border-radius: var(--zenbu-sys-radius-control-small);
 }
 
 #output strong {