feat: use SCSS variables internally (#344)

BREAKING CHANGE: CSS variables are no longer defined globally, and the file `themes/jse-theme-default.css` is now removed (replaced by an internal `defaults.scss`). The provided dark theme still works as-is. The CSS variable `--jse-modal-theme-color` has been renamed to `--jse-modal-editor-theme-color`, and `--jse-modal-theme-color-highlight` has been renamed to `--jse-modal-editor-theme-color-highlight`.
josdejong · Dec 6, 2023 · ec4b788 · ec4b788
1 parent 3b0bdb7
commit ec4b788
Show file tree

Hide file tree

Showing 53 changed files with 640 additions and 583 deletions.
diff --git a/src/lib/components/JSONEditor.scss b/src/lib/components/JSONEditor.scss
@@ -1,13 +1,12 @@
-@import '../themes/jse-theme-default'; // do not put the .css extension here, else the file will not be bundled
 @import '../styles';
 
 .jse-main {
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: $contents-min-height;
-  font-family: var(--jse-font-family);
-  font-size: var(--jse-font-size);
+  font-family: $font-family;
+  font-size: $font-size;
   line-height: normal;
   position: relative;
   display: flex;

diff --git a/src/lib/components/__snapshots__/JSONEditor.test.ts.snap b/src/lib/components/__snapshots__/JSONEditor.test.ts.snap
@@ -1482,11 +1482,11 @@ exports[`JSONEditor > render tree mode 1`] = `
             class="jse-json-node jse-expanded s-BfIc3EpAoT-Y jse-root"
             data-path=""
             role="treeitem"
+            style="--level: 0;"
             tabindex="-1"
           >
             <div
               class="jse-header-outer s-BfIc3EpAoT-Y"
-              style="margin-left: calc(0 * var(--jse-indent-size))"
             >
               <div
                 class="jse-header s-BfIc3EpAoT-Y"
@@ -1567,11 +1567,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                 class="jse-json-node jse-expanded s-BfIc3EpAoT-Y"
                 data-path="%2F0"
                 role="treeitem"
+                style="--level: 1;"
                 tabindex="-1"
               >
                 <div
                   class="jse-header-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-header s-BfIc3EpAoT-Y"
@@ -1655,11 +1655,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                     class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F0%2Fid"
                     role="treeitem"
+                    style="--level: 2;"
                     tabindex="-1"
                   >
                     <div
                       class="jse-contents-outer s-BfIc3EpAoT-Y"
-                      style="margin-left: calc(2 * var(--jse-indent-size))"
                     >
                       <div
                         class="jse-contents s-BfIc3EpAoT-Y"
@@ -1717,7 +1717,6 @@ exports[`JSONEditor > render tree mode 1`] = `
                  
                 <div
                   class="jse-footer-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-footer s-BfIc3EpAoT-Y"
@@ -1746,11 +1745,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                 class="jse-json-node jse-expanded s-BfIc3EpAoT-Y"
                 data-path="%2F1"
                 role="treeitem"
+                style="--level: 1;"
                 tabindex="-1"
               >
                 <div
                   class="jse-header-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-header s-BfIc3EpAoT-Y"
@@ -1834,11 +1833,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                     class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F1%2Fid"
                     role="treeitem"
+                    style="--level: 2;"
                     tabindex="-1"
                   >
                     <div
                       class="jse-contents-outer s-BfIc3EpAoT-Y"
-                      style="margin-left: calc(2 * var(--jse-indent-size))"
                     >
                       <div
                         class="jse-contents s-BfIc3EpAoT-Y"
@@ -1897,11 +1896,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                     class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F1%2Fname"
                     role="treeitem"
+                    style="--level: 2;"
                     tabindex="-1"
                   >
                     <div
                       class="jse-contents-outer s-BfIc3EpAoT-Y"
-                      style="margin-left: calc(2 * var(--jse-indent-size))"
                     >
                       <div
                         class="jse-contents s-BfIc3EpAoT-Y"
@@ -1959,7 +1958,6 @@ exports[`JSONEditor > render tree mode 1`] = `
                  
                 <div
                   class="jse-footer-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-footer s-BfIc3EpAoT-Y"
@@ -1988,11 +1986,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                 class="jse-json-node jse-expanded s-BfIc3EpAoT-Y"
                 data-path="%2F2"
                 role="treeitem"
+                style="--level: 1;"
                 tabindex="-1"
               >
                 <div
                   class="jse-header-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-header s-BfIc3EpAoT-Y"
@@ -2076,11 +2074,11 @@ exports[`JSONEditor > render tree mode 1`] = `
                     class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F2%2Fid"
                     role="treeitem"
+                    style="--level: 2;"
                     tabindex="-1"
                   >
                     <div
                       class="jse-contents-outer s-BfIc3EpAoT-Y"
-                      style="margin-left: calc(2 * var(--jse-indent-size))"
                     >
                       <div
                         class="jse-contents s-BfIc3EpAoT-Y"
@@ -2138,7 +2136,6 @@ exports[`JSONEditor > render tree mode 1`] = `
                  
                 <div
                   class="jse-footer-outer s-BfIc3EpAoT-Y"
-                  style="margin-left: calc(1 * var(--jse-indent-size))"
                 >
                   <div
                     class="jse-footer s-BfIc3EpAoT-Y"
@@ -2167,7 +2164,6 @@ exports[`JSONEditor > render tree mode 1`] = `
              
             <div
               class="jse-footer-outer s-BfIc3EpAoT-Y"
-              style="margin-left: calc(0 * var(--jse-indent-size))"
             >
               <div
                 class="jse-footer s-BfIc3EpAoT-Y"

diff --git a/src/lib/components/controls/ColorPickerPopup.scss b/src/lib/components/controls/ColorPickerPopup.scss
@@ -4,7 +4,7 @@
   :global(.picker_wrapper.popup),
   :global(.picker_wrapper.popup .picker_arrow::before),
   :global(.picker_wrapper.popup .picker_arrow::after) {
-    background: var(--jse-color-picker-background);
+    background: $color-picker-background;
     line-height: normal;
   }
 
@@ -13,20 +13,20 @@
   :global(.picker_editor input),
   :global(.picker_sample),
   :global(.picker_done button) {
-    box-shadow: var(--jse-color-picker-border-box-shadow);
+    box-shadow: $color-picker-border-box-shadow;
   }
 
   :global(.picker_editor input) {
-    background: var(--jse-background-color);
-    color: var(--jse-text-color);
+    background: $background-color;
+    color: $text-color;
   }
 
   :global(.picker_done button) {
-    background: var(--jse-button-background);
-    color: var(--jse-button-color);
+    background: $button-background;
+    color: $button-color;
   }
 
   :global(.picker_done button:hover) {
-    background: var(--jse-button-background-highlight);
+    background: $button-background-highlight;
   }
 }
diff --git a/src/lib/components/controls/DropdownButton.scss b/src/lib/components/controls/DropdownButton.scss
@@ -4,8 +4,8 @@
   flex: 1;
   line-height: normal;
 
-  $background: var(--jse-context-menu-background);
-  $background-highlight: var(--jse-context-menu-background-highlight);
+  $background: $context-menu-background;
+  $background-highlight: $context-menu-background-highlight;
 
   @include jsoneditor-button;
   position: relative;
@@ -27,23 +27,23 @@
     @include jsoneditor-button;
 
     width: 2em;
-    background: var(--jse-context-menu-background);
-    color: var(--jse-context-menu-color);
+    background: $context-menu-background;
+    color: $context-menu-color;
 
     &.jse-visible {
       background: $background;
     }
 
     &:hover {
-      background: var(--jse-context-menu-background-highlight);
+      background: $context-menu-background-highlight;
     }
 
     &:focus {
       z-index: 1;
     }
 
     &:disabled {
-      color: var(--jse-context-menu-color-disabled);
+      color: $context-menu-color-disabled;
       background: unset;
     }
 
@@ -57,8 +57,8 @@
     left: 0;
     z-index: 1;
     background: $background;
-    color: var(--jse-context-menu-color);
-    box-shadow: var(--jse-controls-box-shadow);
+    color: $context-menu-color;
+    box-shadow: $controls-box-shadow;
 
     &.jse-visible {
       display: block;
@@ -77,7 +77,7 @@
       }
 
       &:disabled {
-        color: var(--jse-context-menu-color-disabled);
+        color: $context-menu-color-disabled;
         background: unset;
       }
     }

diff --git a/src/lib/components/controls/EditableDiv.scss b/src/lib/components/controls/EditableDiv.scss
@@ -20,7 +20,7 @@ div.jse-editable-div {
   }
 
   &[contenteditable='true'] {
-    outline: var(--jse-edit-outline);
+    outline: $edit-outline;
     background: inherit !important;
     position: relative;
     border-radius: 0;
@@ -29,13 +29,13 @@ div.jse-editable-div {
 
   &.jse-empty {
     &:not(:focus) {
-      outline: 1px dotted var(--jse-tag-background);
+      outline: 1px dotted $tag-background;
       -moz-outline-radius: 2px;
     }
 
     &::after {
       pointer-events: none;
-      color: var(--jse-tag-background);
+      color: $tag-background;
     }
   }
 }
diff --git a/src/lib/components/controls/EditableDivShared.scss b/src/lib/components/controls/EditableDivShared.scss
@@ -2,33 +2,33 @@
 
 .jse-value {
   &.jse-string {
-    color: var(--jse-value-color-string);
+    color: $value-color-string;
   }
 
   &.jse-object,
   &.jse-array {
     min-width: 16px;
-    color: var(--jse-delimiter-color);
+    color: $delimiter-color;
   }
 
   &.jse-number {
-    color: var(--jse-value-color-number);
+    color: $value-color-number;
   }
 
   &.jse-boolean {
-    color: var(--jse-value-color-boolean);
+    color: $value-color-boolean;
   }
 
   &.jse-null {
-    color: var(--jse-value-color-null);
+    color: $value-color-null;
   }
 
   &.jse-invalid {
-    color: var(--jse-text-color);
+    color: $text-color;
   }
 
   &.jse-url {
-    color: var(--jse-value-color-url);
+    color: $value-color-url;
     text-decoration: underline;
   }
 }
diff --git a/src/lib/components/controls/JSONPreview.scss b/src/lib/components/controls/JSONPreview.scss
@@ -2,15 +2,15 @@
 
 .jse-json-preview {
   flex: 1;
-  font-family: var(--jse-font-family-mono);
-  font-size: var(--jse-font-size-mono);
-  color: var(--jse-panel-color-readonly);
+  font-family: $font-family-mono;
+  font-size: $font-size-mono;
+  color: $panel-color-readonly;
   overflow: auto;
   white-space: pre-wrap;
   padding: 2px;
 
   // TODO: JSONPreview shouldn't add borders I think
-  border-left: var(--jse-main-border);
-  border-right: var(--jse-main-border);
-  border-bottom: var(--jse-main-border);
+  border-left: $main-border;
+  border-right: $main-border;
+  border-bottom: $main-border;
 }