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

[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 4f2b50bc78e7
children
line wrap: on
line diff
--- a/mrjunejune/src/tools/latex_editor/index.css	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/tools/latex_editor/index.css	Wed Aug 05 05:25:40 2026 -0700
@@ -25,12 +25,14 @@
   gap: 0.65rem;
 }
 
+.latex-actions zen-button {
+  display: inline-flex;
+}
+
 .latex-actions button,
 .button-link {
-  min-height: 42px;
-  padding: 0.65rem 1rem;
   border: 2px solid var(--black);
-  border-radius: 8px;
+  border-radius: var(--zenbu-sys-radius-control);
   background: var(--awesome);
   color: var(--black);
   font: inherit;
@@ -86,7 +88,7 @@
   min-width: 0;
   overflow: hidden;
   border: 2px solid var(--black);
-  border-radius: 12px;
+  border-radius: var(--zenbu-sys-radius-panel);
   background: var(--white);
   box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
 }
@@ -100,9 +102,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  min-height: 48px;
-  padding: 0.55rem 0.8rem;
+  gap: var(--zenbu-sys-control-gap-md);
+  min-height: var(--zenbu-sys-control-height-lg);
+  padding:
+    var(--zenbu-sys-control-padding-block-sm)
+    var(--zenbu-sys-control-padding-inline-md);
   border-bottom: 2px solid var(--black);
   background: var(--gray-gradient);
 }
@@ -110,7 +114,7 @@
 .panel-heading h2,
 .panel-heading span {
   margin: 0;
-  font-size: 0.95rem;
+  font-size: var(--zenbu-sys-font-size-sm);
 }
 
 #latexSource {
@@ -120,13 +124,15 @@
   min-height: 540px;
   resize: vertical;
   box-sizing: border-box;
-  padding: 1rem;
+  padding: var(--zenbu-sys-padding-md);
   border: 0;
   outline: 0;
   background: #111318;
   color: #f4f4f5;
   caret-color: #f4f4f5;
-  font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: var(--zenbu-sys-font-size-sm);
+  line-height: var(--zenbu-sys-line-height-md);
   tab-size: 2;
 }
 
@@ -198,4 +204,12 @@
     flex: 1 1 45%;
     text-align: center;
   }
+
+  .latex-actions zen-button {
+    flex: 1 1 45%;
+  }
+
+  .latex-actions zen-button > :where(button, a) {
+    width: 100%;
+  }
 }