@stevejtrettel/shader-sandbox 0.1.3 → 0.1.4

package/src/editor/editor-panel.css

@@ -6,8 +6,8 @@
 .editor-toolbar {
   display: flex;
   align-items: center;
-  background: #f8f8f8;
-  border-bottom: 1px solid #e0e0e0;
+  background: var(--tab-bg);
+  border-bottom: 1px solid var(--border-primary);
   padding-right: 8px;
 }
 
@@ -21,7 +21,7 @@
 .editor-tab-button {
   background: transparent;
   border: none;
-  color: #666;
+  color: var(--tab-text);
   padding: 10px 16px;
   cursor: pointer;
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
@@ -32,21 +32,37 @@
 }
 
 .editor-tab-button:hover {
-  color: #333;
+  color: var(--tab-text-hover);
 }
 
 .editor-tab-button.active {
-  color: #000;
-  border-bottom-color: #4a9eff;
+  color: var(--tab-text-active);
+  border-bottom-color: var(--tab-border-active);
 }
 
 .editor-tab-button.image-tab {
-  color: #7c4dff;
+  color: var(--accent-secondary);
 }
 
 .editor-tab-button.image-tab.active {
-  color: #7c4dff;
-  border-bottom-color: #7c4dff;
+  color: var(--accent-secondary);
+  border-bottom-color: var(--accent-secondary);
+}
+
+.editor-tab-button.uniforms-tab {
+  color: var(--accent-tertiary, var(--accent-primary));
+  padding: 8px 12px;
+}
+
+.editor-tab-button.uniforms-tab.active {
+  color: var(--accent-tertiary, var(--accent-primary));
+  border-bottom-color: var(--accent-tertiary, var(--accent-primary));
+}
+
+.editor-tab-button .uniforms-icon {
+  width: 18px;
+  height: 18px;
+  display: block;
 }
 
 /* Copy button (icon only) */
@@ -54,9 +70,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparent;
-  border: 1px solid #ccc;
-  color: #666;
+  background: var(--button-bg);
+  border: 1px solid var(--button-border);
+  color: var(--button-text);
   width: 32px;
   height: 32px;
   border-radius: 4px;
@@ -67,19 +83,19 @@
 }
 
 .editor-copy-button:hover {
-  background: #f0f0f0;
-  border-color: #999;
-  color: #333;
+  background: var(--button-bg-hover);
+  border-color: var(--button-border-hover);
+  color: var(--button-text-hover);
 }
 
 .editor-copy-button:active {
-  background: #e0e0e0;
+  background: var(--button-bg-hover);
 }
 
 .editor-copy-button.copied {
-  background: #e8f5e9;
-  border-color: #4caf50;
-  color: #4caf50;
+  background: var(--success-bg);
+  border-color: var(--success-border);
+  color: var(--success-text);
 }
 
 .editor-copy-button svg {
@@ -91,25 +107,25 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  background: #4a9eff;
+  background: var(--recompile-bg);
   border: none;
-  color: #fff;
+  color: var(--recompile-text);
   padding: 6px 12px;
   border-radius: 4px;
   cursor: pointer;
   font-family: inherit;
   font-size: 12px;
   font-weight: 500;
-  transition: background 0.15s;
+  transition: background 0.15s, color 0.15s;
   flex-shrink: 0;
 }
 
 .editor-recompile-button:hover {
-  background: #3a8eef;
+  background: var(--recompile-bg-hover);
 }
 
 .editor-recompile-button:active {
-  background: #2a7edf;
+  background: var(--recompile-bg-active);
 }
 
 .editor-recompile-button svg {
@@ -121,7 +137,7 @@
   flex: 1;
   overflow: hidden;
   position: relative;
-  background: #ffffff;
+  background: var(--code-bg);
 }
 
 .editor-prism-container {
@@ -133,8 +149,8 @@
 .editor-fallback-textarea {
   width: 100%;
   height: 100%;
-  background: #ffffff;
-  color: #000;
+  background: var(--code-bg);
+  color: var(--code-text);
   border: none;
   padding: 12px;
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
@@ -149,27 +165,34 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  background: #f5f5f5;
+  background: var(--image-viewer-bg);
   padding: 20px;
 }
 
+/* Uniforms container */
+.editor-uniforms-container {
+  height: 100%;
+  overflow-y: auto;
+  background: var(--bg-secondary);
+}
+
 .editor-image-viewer img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-sm);
 }
 
 /* Error display */
 .editor-error-display {
-  background: #fff0f0;
-  color: #c00;
+  background: var(--error-bg);
+  color: var(--error-text);
   padding: 10px 14px;
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
   font-size: 12px;
   white-space: pre-wrap;
   overflow: auto;
   max-height: 120px;
-  border-top: 1px solid #fcc;
+  border-top: 1px solid var(--error-border);
 }

package/src/editor/prism-editor.css

@@ -6,7 +6,7 @@
 .prism-editor-wrapper {
   display: flex;
   height: 100%;
-  background: #ffffff;
+  background: var(--code-bg);
   font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
   font-size: 13px;
   line-height: 1.6;
@@ -17,8 +17,8 @@
   flex-shrink: 0;
   padding: 16px 12px 16px 16px;
   text-align: right;
-  color: #999;
-  border-right: 1px solid #e0e0e0;
+  color: var(--code-line-number);
+  border-right: 1px solid var(--code-line-border);
   user-select: none;
   overflow: hidden;
 }
@@ -59,24 +59,24 @@
 .prism-editor-textarea {
   background: transparent;
   color: transparent;
-  caret-color: #000;
+  caret-color: var(--code-text);
   resize: none;
   z-index: 1;
   -webkit-text-fill-color: transparent;
 }
 
 .prism-editor-textarea::selection {
-  background: rgba(173, 214, 255, 0.4);
+  background: var(--code-selection);
 }
 
 .prism-editor-textarea::-moz-selection {
-  background: rgba(173, 214, 255, 0.4);
+  background: var(--code-selection);
 }
 
 /* Highlighted code overlay */
 .prism-editor-highlight {
-  background: #ffffff;
-  color: #000;
+  background: var(--code-bg);
+  color: var(--code-text);
   pointer-events: none;
   z-index: 0;
 }
@@ -89,11 +89,11 @@
 }
 
 /* Prism syntax highlighting colors */
-.prism-editor-highlight .token.comment { color: #6a9955; }
-.prism-editor-highlight .token.keyword { color: #0000ff; }
-.prism-editor-highlight .token.string { color: #a31515; }
-.prism-editor-highlight .token.number { color: #098658; }
-.prism-editor-highlight .token.operator { color: #000000; }
-.prism-editor-highlight .token.function { color: #795e26; }
-.prism-editor-highlight .token.class-name { color: #267f99; }
-.prism-editor-highlight .token.punctuation { color: #000000; }
+.prism-editor-highlight .token.comment { color: var(--syntax-comment); }
+.prism-editor-highlight .token.keyword { color: var(--syntax-keyword); }
+.prism-editor-highlight .token.string { color: var(--syntax-string); }
+.prism-editor-highlight .token.number { color: var(--syntax-number); }
+.prism-editor-highlight .token.operator { color: var(--syntax-operator); }
+.prism-editor-highlight .token.function { color: var(--syntax-function); }
+.prism-editor-highlight .token.class-name { color: var(--syntax-class); }
+.prism-editor-highlight .token.punctuation { color: var(--syntax-punctuation); }

package/src/embed.ts

@@ -47,7 +47,7 @@ export async function embed(options: EmbedOptions): Promise<EmbedResult> {
   return {
     app,
     destroy: () => {
-      app.stop?.();
+      app.dispose();
     },
   };
 }