From 8844f44ecc2e1229f27b5237e991be50c1f4ee94 Mon Sep 17 00:00:00 2001
From: Paul Nasdalack <info@paul-nasdalack.com>
Date: Sat, 28 Oct 2023 22:02:35 +0200
Subject: [PATCH] support for vscode themes

---
 icons/copyLine.svg                     | 11 +---
 icons/newFile.svg                      |  4 +-
 icons/newGrid.svg                      |  2 +-
 icons/newLineLink.svg                  | 14 ++---
 icons/newList.svg                      | 25 +++++----
 src/svelte/App.svelte                  | 20 ++++---
 src/svelte/Depot/Depot.svelte          | 76 +++++++++++++++-----------
 src/svelte/Depot/DepotSheet.svelte     |  7 ++-
 src/svelte/Fields/LongTextField.svelte |  8 +--
 src/svelte/Fields/NumberField.svelte   |  8 +--
 src/svelte/Fields/TextField.svelte     |  8 +--
 11 files changed, 96 insertions(+), 87 deletions(-)

diff --git a/icons/copyLine.svg b/icons/copyLine.svg
index 57ae847..1af7437 100644
--- a/icons/copyLine.svg
+++ b/icons/copyLine.svg
@@ -1,11 +1,6 @@
 <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<rect x="2.5" y="2.5" width="8" height="8" stroke="white"/>
-<rect x="6.5" y="6.5" width="8" height="8" fill="#3A3A3A" stroke="white"/>
+<g>
+	<rect x="6.5" y="6.5" width="8" height="8" style="fill:none;stroke:white;stroke-width:1px;"/>
+	<path d="M10.5,6.5L6.5,6.5L6.5,10.5L2.5,10.5L2.5,2.5L10.5,2.5L10.5,6.5Z" style="fill:none;stroke:white;stroke-width:1px;"/>
 </g>
-<defs>
-<clipPath id="clip0">
-<rect width="17" height="17" fill="white"/>
-</clipPath>
-</defs>
 </svg>
diff --git a/icons/newFile.svg b/icons/newFile.svg
index 7984503..56d99d2 100644
--- a/icons/newFile.svg
+++ b/icons/newFile.svg
@@ -1,4 +1,4 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M34.5 26.5H10C9.44772 26.5 9 26.0523 9 25.5V10C9 9.44772 9.44772 9 10 9H16.5462C16.8346 9 17.1089 9.12448 17.2988 9.3415L20.2012 12.6585C20.3911 12.8755 20.6654 13 20.9538 13H34.5C35.0523 13 35.5 13.4477 35.5 14V25.5C35.5 26.0523 35.0523 26.5 34.5 26.5Z" fill="#3A3A3A" stroke="white"/>
-<path d="M29.5 31H5C4.44772 31 4 30.5523 4 30V14.5C4 13.9477 4.44772 13.5 5 13.5H11.5462C11.8346 13.5 12.1089 13.6245 12.2988 13.8415L15.2012 17.1585C15.3911 17.3755 15.6654 17.5 15.9538 17.5H29.5C30.0523 17.5 30.5 17.9477 30.5 18.5V30C30.5 30.5523 30.0523 31 29.5 31Z" fill="#3A3A3A" stroke="white"/>
+<path d="M9,13.5L9,10C9,9.448 9.448,9 10,9L16.546,9C16.835,9 17.109,9.124 17.299,9.342L20.201,12.659C20.391,12.876 20.665,13 20.954,13L34.5,13C35.052,13 35.5,13.448 35.5,14L35.5,25.5C35.5,26.052 35.052,26.5 34.5,26.5L30.5,26.5L30.5,18.5C30.5,17.948 30.052,17.5 29.5,17.5L15.954,17.5C15.665,17.5 15.391,17.376 15.201,17.159L12.299,13.842C12.109,13.625 11.835,13.5 11.546,13.5L9,13.5Z" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+<path d="M29.5,31L5,31C4.448,31 4,30.552 4,30L4,14.5C4,13.948 4.448,13.5 5,13.5L11.546,13.5C11.835,13.5 12.109,13.625 12.299,13.842L15.201,17.159C15.391,17.376 15.665,17.5 15.954,17.5L29.5,17.5C30.052,17.5 30.5,17.948 30.5,18.5L30.5,30C30.5,30.552 30.052,31 29.5,31Z" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
 </svg>
diff --git a/icons/newGrid.svg b/icons/newGrid.svg
index f4d2882..88f7482 100644
--- a/icons/newGrid.svg
+++ b/icons/newGrid.svg
@@ -1,5 +1,5 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="40" height="40" fill="#3A3A3A"/>
+<rect width="40" height="40"/>
 <rect x="25.5" y="25.5" width="6" height="6" stroke="white"/>
 <rect x="25.5" y="16.5" width="6" height="6" stroke="white"/>
 <rect x="25.5" y="7.5" width="6" height="6" stroke="white"/>
diff --git a/icons/newLineLink.svg b/icons/newLineLink.svg
index 0a09b52..ef3eb61 100644
--- a/icons/newLineLink.svg
+++ b/icons/newLineLink.svg
@@ -1,9 +1,9 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 31.5V8H28.5V25.5H22.5V31.5H10Z" stroke="white" stroke-linecap="square"/>
-<line x1="23" y1="31.2929" x2="28.2929" y2="26" stroke="white" stroke-linecap="square"/>
-<line x1="13.5" y1="13.5" x2="24.5" y2="13.5" stroke="white" stroke-linecap="square"/>
-<path d="M35.1476 26.3713C35.4989 26.7804 35.6153 27.3881 35.4384 28.0962C35.2619 28.8029 34.7993 29.5642 34.0718 30.1888C33.3443 30.8134 32.5217 31.1556 31.7964 31.2231C31.0697 31.2908 30.4866 31.0838 30.1353 30.6746C29.7841 30.2655 29.6677 29.6578 29.8446 28.9497C30.0211 28.243 30.4837 27.4817 31.2112 26.8571C31.9387 26.2324 32.7613 25.8903 33.4865 25.8228C34.2132 25.7551 34.7963 25.9621 35.1476 26.3713Z" stroke="white"/>
-<path d="M29.0766 32.016C29.4415 32.413 29.5783 33.0164 29.4255 33.7301C29.273 34.4424 28.8364 35.2189 28.1304 35.8677C27.4244 36.5165 26.6139 36.8863 25.8913 36.9783C25.1673 37.0704 24.5775 36.8833 24.2126 36.4862C23.8477 36.0892 23.7109 35.4858 23.8637 34.7721C24.0162 34.0599 24.4529 33.2833 25.1589 32.6345C25.8648 31.9857 26.6754 31.6159 27.3979 31.5239C28.1219 31.4318 28.7117 31.6189 29.0766 32.016Z" stroke="white"/>
-<line x1="26.4808" y1="34.422" x2="32.8597" y2="28.8264" stroke="white"/>
-<rect x="2.5" y="16.5" width="23" height="6" fill="#3A3A3A" stroke="white"/>
+<path d="M10,16.5L10,8L28.5,8L28.5,25.5L22.5,25.5L22.5,31.5L10,31.5L10,22.5L25.5,22.5L25.5,16.5L10,16.5Z" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+<path d="M23,31.293L28.293,26" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+<path d="M13.5,13.5L24.5,13.5" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+<path d="M35.148,26.371C35.499,26.78 35.615,27.388 35.438,28.096C35.262,28.803 34.799,29.564 34.072,30.189C33.344,30.813 32.522,31.156 31.796,31.223C31.07,31.291 30.487,31.084 30.135,30.675C29.784,30.266 29.668,29.658 29.845,28.95C30.021,28.243 30.484,27.482 31.211,26.857C31.939,26.232 32.761,25.89 33.487,25.823C34.213,25.755 34.796,25.962 35.148,26.371Z" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;stroke-linecap:butt;"/>
+<path d="M29.077,32.016C29.442,32.413 29.578,33.016 29.426,33.73C29.273,34.442 28.836,35.219 28.13,35.868C27.424,36.517 26.614,36.886 25.891,36.978C25.167,37.07 24.578,36.883 24.213,36.486C23.848,36.089 23.711,35.486 23.864,34.772C24.016,34.06 24.453,33.283 25.159,32.635C25.865,31.986 26.675,31.616 27.398,31.524C28.122,31.432 28.712,31.619 29.077,32.016Z" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;stroke-linecap:butt;"/>
+<path d="M26.481,34.422L32.86,28.826" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;stroke-linecap:butt;"/>
+<rect x="2.5" y="16.5" width="23" height="6" style="fill:none;stroke:white;stroke-width:1px;stroke-linecap:butt;"/>
 </svg>
diff --git a/icons/newList.svg b/icons/newList.svg
index a6afd4a..37ee6a8 100644
--- a/icons/newList.svg
+++ b/icons/newList.svg
@@ -1,12 +1,17 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 29.5V6H26.5V23.5H20.5V29.5H8Z" fill="#3A3A3A" stroke="white"/>
-<line x1="20.6464" y1="29.6464" x2="26.6464" y2="23.6464" stroke="white"/>
-<line x1="11" y1="11.5" x2="23" y2="11.5" stroke="white"/>
-<line x1="11" y1="14.5" x2="23" y2="14.5" stroke="white"/>
-<line x1="11" y1="17.5" x2="23" y2="17.5" stroke="white"/>
-<path d="M13 33.5V10H31.5V27.5H25.5V33.5H13Z" fill="#3A3A3A" stroke="white"/>
-<line x1="25.6464" y1="33.6464" x2="31.6464" y2="27.6464" stroke="white"/>
-<line x1="16" y1="15.5" x2="28" y2="15.5" stroke="white"/>
-<line x1="16" y1="18.5" x2="28" y2="18.5" stroke="white"/>
-<line x1="16" y1="21.5" x2="28" y2="21.5" stroke="white"/>
+<path d="M28.204,10L13,10L13,31.486L6.608,31.486L6.608,4.435L28.204,4.435L28.204,10Z" style="fill:none;"/>
+<clipPath id="_clip1">
+	<path d="M28.204,10L13,10L13,31.486L6.608,31.486L6.608,4.435L28.204,4.435L28.204,10Z"/>
+</clipPath>
+<g clip-path="url(#_clip1)">
+	<path d="M8,29.5L8,6L26.5,6L26.5,23.5L20.5,23.5L20.5,29.5L8,29.5Z" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+	<path d="M11,11.5L23,11.5" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+	<path d="M11,14.5L23,14.5" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+	<path d="M11,17.5L23,17.5" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+</g>
+<path d="M13,33.5L13,10L31.5,10L31.5,27.5L25.5,27.5L25.5,33.5L13,33.5Z" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+<path d="M25.646,33.646L31.646,27.646" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+<path d="M16,15.5L28,15.5" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+<path d="M16,18.5L28,18.5" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+<path d="M16,21.5L28,21.5" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
 </svg>
diff --git a/src/svelte/App.svelte b/src/svelte/App.svelte
index 7b56e31..01a735d 100644
--- a/src/svelte/App.svelte
+++ b/src/svelte/App.svelte
@@ -164,20 +164,20 @@ limitations under the License.
 
 	/* Table Stuff */
 	:global(table) {
-        /* border: 2px solid #252526; */
+				/* background-color: var(--vscode-tab-inactiveBackground); */
         width: 100%;
         text-align: left;
         border-collapse: collapse;
+        background: var(--vscode-editor-background);
     }
     :global(table td) {
-        border:3px solid #252526;
-        padding: 0px;
+        border-right: 1px solid var(--vscode-panel-border);
+        border-left:  1px solid var(--vscode-panel-border);
+        padding: 0px 3px;
         /* width: 50% */
     } 
-    :global(table td) {
-        border:3px solid #252526;
-        padding: 0px;
-        /* width: 50% */
+    :global(table tr:nth-child(even)) {
+        background-color: var(--vscode-tree-tableOddRowsBackground);
     } 
     :global(table tbody td) {
         font-size: 13px;
@@ -187,10 +187,14 @@ limitations under the License.
         padding: 5px;
     }
     :global(table th) {
-        background: #252526;
+        border-right: 1px solid var(--vscode-panel-border);
+        border-left:  1px solid var(--vscode-panel-border);
+        background: var(--vscode-editor-background);
         font-size: 13px;
         font-weight: bold;
         text-align: left;
+				position: sticky;
+				top: 0;
     }
 
 </style>
\ No newline at end of file
diff --git a/src/svelte/Depot/Depot.svelte b/src/svelte/Depot/Depot.svelte
index f954c37..8b81ea9 100644
--- a/src/svelte/Depot/Depot.svelte
+++ b/src/svelte/Depot/Depot.svelte
@@ -781,31 +781,33 @@ function selectedSheetEdit() {
                 {/if}
             {/each}
         {/if}
-        <div>
-        {#each data.sheets as sheet}
-            {#if !sheet.hidden}
-            <button class="sheetButton {data.sheets.indexOf(sheet) == selectedSheet ? "selected" : ""}" title="Select sheet" on:click={focusSheet(data.sheets.indexOf(sheet))} disabled={editorConfig.active}>{sheet.name}</button>
+        <div class="sheets">
+            <div>
+            {#each data.sheets as sheet}
+                {#if !sheet.hidden}
+                <button class="sheetButton {data.sheets.indexOf(sheet) == selectedSheet ? "selected" : ""}" title="Select sheet" on:click={focusSheet(data.sheets.indexOf(sheet))} disabled={editorConfig.active}>{sheet.name}</button>
+                {/if}
+            {/each}
+            </div>
+            <DepotConfigurator debug={debug} data={editorConfig.active ? editorData : {}} config={editorConfig} on:message={handleConfigUpdate}/>
+            {#if !editorConfig.active}
+                <!-- hide the table if editing a field to prevent sending the sheetupdate -->
+                <DepotSheet debug={debug} 
+                            showLineGUIDs={showLineGUIDs} 
+                            previewDisclosedFields={previewDisclosedFields}
+                            showNestedNames={showNestedNames}
+                            showNestedPaths={showNestedPaths}
+                            allowSchemaEditing={allowSchemaEditing}
+                            allowAddRemoveItems={allowAddRemoveItems}
+                            bind:fullData={data} 
+                            bind:sheetData={data.sheets[selectedSheet]} 
+                            bind:inputLineData={data.sheets[selectedSheet].lines} 
+                            depotInfo={depotFileInfo} 
+                            on:message={handleTableAction}
+                            bind:listVisibility={listVisibility}
+                            baseDataPath={data.sheets[selectedSheet].name}/>
             {/if}
-        {/each}
         </div>
-        <DepotConfigurator debug={debug} data={editorConfig.active ? editorData : {}} config={editorConfig} on:message={handleConfigUpdate}/>
-        {#if !editorConfig.active}
-            <!-- hide the table if editing a field to prevent sending the sheetupdate -->
-            <DepotSheet debug={debug} 
-                        showLineGUIDs={showLineGUIDs} 
-                        previewDisclosedFields={previewDisclosedFields}
-                        showNestedNames={showNestedNames}
-                        showNestedPaths={showNestedPaths}
-                        allowSchemaEditing={allowSchemaEditing}
-                        allowAddRemoveItems={allowAddRemoveItems}
-                        bind:fullData={data} 
-                        bind:sheetData={data.sheets[selectedSheet]} 
-                        bind:inputLineData={data.sheets[selectedSheet].lines} 
-                        depotInfo={depotFileInfo} 
-                        on:message={handleTableAction}
-                        bind:listVisibility={listVisibility}
-                        baseDataPath={data.sheets[selectedSheet].name}/>
-        {/if}
     {/if}
 {/if}
 
@@ -816,16 +818,20 @@ function selectedSheetEdit() {
 {/if}
 
 <style>
+    .sheets {
+        background-color: var(--vscode-sideBar-background);
+    }
+
     .buttonIcon {
-        background-color: #3A3A3A;
+        background-color: var(--vscode-button-background);
         border: none;
-        color: white;
+        color: var(--vscode-button-foreground);
         display: inline-block;
         cursor: pointer;
     }
 
     .buttonIcon:hover {
-        background-color: #2A2D2E;
+        background-color: var(--vscode-button-hoverBackground);
     }
 
     .buttonIcon:focus {
@@ -845,23 +851,27 @@ function selectedSheetEdit() {
         opacity: 40%;
     }
     .buttonIcon:disabled:hover {
-        background-color: #3A3A3A;
+        background-color: var(--vscode-button-background);
     }
 
     .sheetButton {
-        background-color: #3A3A3A;
-        border: none;
-        color: white;
+        background-color: var(--vscode-tab-inactiveBackground);
+        border: 0px;
+        border-right: 1px solid var(--vscode-tab-border);
+        color: var(--vscode-tab-inactiveForeground);
         display: inline-block;
         cursor: pointer;
-        margin: 0px 5px 0px 0px;
+        margin: 0px;
         padding: 8px 8px 8px 8px;
     }
+
     .sheetButton:hover {
-        background-color: #252526;
+        background-color: var(--vscode-tab-unfocusedHoverBackground);
+        color: var(--vscode-tab-unfocusedHoverForeground);
     }
     .sheetButton.selected {
-        background-color: #252526;
+        background-color: var(--vscode-tab-activeBackground);
+        color: var(--vscode-tab-activeForeground);
     }
     .sheetButton:focus {
         outline: none;
diff --git a/src/svelte/Depot/DepotSheet.svelte b/src/svelte/Depot/DepotSheet.svelte
index b347f39..4e01d7d 100644
--- a/src/svelte/Depot/DepotSheet.svelte
+++ b/src/svelte/Depot/DepotSheet.svelte
@@ -710,15 +710,16 @@ function validateID(event,line) {
 {/if}
 
 <style>
+
     .buttonIcon {
-        background-color: #3A3A3A;
+        background-color: var(--vscode-button-background);
         border: none;
-        color: white;
+        color: var(--vscode-button-foreground);
         display: inline-block;
         cursor: pointer;
     }
     .buttonIcon:hover {
-        background-color: #2A2D2E;
+      background-color: var(--vscode-button-hoverBackground);
     }
     .buttonIcon:focus {
         outline: none;
diff --git a/src/svelte/Fields/LongTextField.svelte b/src/svelte/Fields/LongTextField.svelte
index eb23bbe..61f5879 100644
--- a/src/svelte/Fields/LongTextField.svelte
+++ b/src/svelte/Fields/LongTextField.svelte
@@ -9,13 +9,11 @@ export let data;
         box-sizing: border-box;
         -webkit-box-sizing:border-box;
         -moz-box-sizing: border-box;
-        border: 0px;
         font-size: 13px;
-        border-width: 0px;
-        background-color: #3c3c3c;
-        color: #f0f0f0;
+				border: 1px solid var(--vscode-input-border);
+        background-color: var(--vscode-input-background);
+        color: var(--vscode-input-foreground);
         width: 100%;
         height: 100%;
-        box-sizing: border-box;
     }
 </style>
diff --git a/src/svelte/Fields/NumberField.svelte b/src/svelte/Fields/NumberField.svelte
index a9072c1..6fc4f81 100644
--- a/src/svelte/Fields/NumberField.svelte
+++ b/src/svelte/Fields/NumberField.svelte
@@ -12,13 +12,11 @@ export let max;
         box-sizing: border-box;
         -webkit-box-sizing:border-box;
         -moz-box-sizing: border-box;
-        border: 0px;
         font-size: 13px;
-        border-width: 0px;
-        background-color: #3c3c3c;
-        color: #f0f0f0;
+				border: 1px solid var(--vscode-input-border);
+        background-color: var(--vscode-input-background);
+        color: var(--vscode-input-foreground);
         width: 100%;
         height: 100%;
-        box-sizing: border-box;
     }
 </style>
\ No newline at end of file
diff --git a/src/svelte/Fields/TextField.svelte b/src/svelte/Fields/TextField.svelte
index 1b70279..7f282f7 100644
--- a/src/svelte/Fields/TextField.svelte
+++ b/src/svelte/Fields/TextField.svelte
@@ -22,13 +22,11 @@
         box-sizing: border-box;
         -webkit-box-sizing:border-box;
         -moz-box-sizing: border-box;
-        border: 0px;
         font-size: 13px;
-        border-width: 0px;
-        background-color: #3c3c3c;
-        color: #f0f0f0;
+				border: 1px solid var(--vscode-input-border);
+        background-color: var(--vscode-input-background);
+        color: var(--vscode-input-foreground);
         width: 100%;
         height: 100%;
-        box-sizing: border-box;
     }
 </style>
\ No newline at end of file