From ec4b788e493b3ea0acc787687a63b4ff4b987024 Mon Sep 17 00:00:00 2001 From: Sam Date: Wed, 6 Dec 2023 14:21:21 +0100 Subject: [PATCH] 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`. --- src/lib/components/JSONEditor.scss | 5 +- .../__snapshots__/JSONEditor.test.ts.snap | 20 +- .../components/controls/ColorPickerPopup.scss | 14 +- .../components/controls/DropdownButton.scss | 18 +- src/lib/components/controls/EditableDiv.scss | 6 +- .../controls/EditableDivShared.scss | 14 +- src/lib/components/controls/JSONPreview.scss | 12 +- src/lib/components/controls/Menu.scss | 26 +-- src/lib/components/controls/Message.scss | 24 +- .../controls/ValidationErrorsOverview.scss | 8 +- .../controls/contextmenu/ContextMenu.scss | 20 +- .../contextmenu/ContextMenuPointer.scss | 16 +- .../controls/navigationBar/NavigationBar.scss | 22 +- .../navigationBar/NavigationBarDropdown.scss | 16 +- .../navigationBar/NavigationBarItem.scss | 8 +- .../NavigationBarPathEditor.scss | 22 +- .../SelectQueryLanguage.scss | 8 +- .../components/controls/tooltip/Tooltip.scss | 10 +- src/lib/components/modals/CopyPasteModal.scss | 2 +- src/lib/components/modals/Header.scss | 4 +- .../components/modals/JSONEditorModal.scss | 8 +- src/lib/components/modals/Modal.scss | 23 +- src/lib/components/modals/SortModal.scss | 8 +- src/lib/components/modals/TransformModal.scss | 20 +- .../components/modals/TransformWizard.scss | 8 +- .../modals/repair/JSONRepairComponent.scss | 17 +- .../components/modes/tablemode/TableMode.scss | 40 ++-- .../modes/tablemode/TableModeWelcome.scss | 12 +- .../modes/tablemode/tag/InlineValue.scss | 10 +- .../components/modes/textmode/StatusBar.scss | 18 +- .../components/modes/textmode/TextMode.scss | 111 ++++----- .../textmode/codemirror/codemirror-theme.ts | 10 +- .../modes/treemode/CollapsedItems.scss | 13 +- .../modes/treemode/CollapsedItems.svelte | 7 +- .../components/modes/treemode/JSONKey.scss | 12 +- .../components/modes/treemode/JSONNode.scss | 69 +++--- .../components/modes/treemode/JSONNode.svelte | 22 +- .../components/modes/treemode/TreeMode.scss | 26 +-- .../modes/treemode/ValidationErrorIcon.scss | 2 +- .../components/modes/treemode/Welcome.scss | 12 +- .../highlight/SearchResultHighlighter.scss | 8 +- .../modes/treemode/menu/SearchBox.scss | 28 +-- .../value/components/BooleanToggle.scss | 2 +- .../plugins/value/components/ColorPicker.scss | 8 +- .../plugins/value/components/EnumValue.scss | 6 +- .../value/components/ReadonlyValue.scss | 8 +- .../value/components/TimestampTag.scss | 2 +- src/lib/styles.scss | 57 ++--- src/lib/themes/defaults.scss | 211 ++++++++++++++++++ src/lib/themes/jse-theme-dark.css | 5 +- src/lib/themes/jse-theme-default.css | 161 ------------- src/routes/development/+page.svelte | 2 +- src/routes/themes/jse-theme-big.css | 2 +- 53 files changed, 640 insertions(+), 583 deletions(-) create mode 100644 src/lib/themes/defaults.scss delete mode 100644 src/lib/themes/jse-theme-default.css diff --git a/src/lib/components/JSONEditor.scss b/src/lib/components/JSONEditor.scss index b5be93ef..8fe5e3fe 100644 --- a/src/lib/components/JSONEditor.scss +++ b/src/lib/components/JSONEditor.scss @@ -1,4 +1,3 @@ -@import '../themes/jse-theme-default'; // do not put the .css extension here, else the file will not be bundled @import '../styles'; .jse-main { @@ -6,8 +5,8 @@ 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 index da7ee1f2..78d05f50 100644 --- 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" >
render tree mode 1`] = ` class="jse-json-node jse-expanded s-BfIc3EpAoT-Y" data-path="%2F0" role="treeitem" + style="--level: 1;" tabindex="-1" >
render tree mode 1`] = ` class="jse-json-node s-BfIc3EpAoT-Y" data-path="%2F0%2Fid" role="treeitem" + style="--level: 2;" tabindex="-1" >
render tree mode 1`] = `
render tree mode 1`] = ` class="jse-json-node jse-expanded s-BfIc3EpAoT-Y" data-path="%2F1" role="treeitem" + style="--level: 1;" tabindex="-1" >
render tree mode 1`] = ` class="jse-json-node s-BfIc3EpAoT-Y" data-path="%2F1%2Fid" role="treeitem" + style="--level: 2;" tabindex="-1" >
render tree mode 1`] = ` class="jse-json-node s-BfIc3EpAoT-Y" data-path="%2F1%2Fname" role="treeitem" + style="--level: 2;" tabindex="-1" >
render tree mode 1`] = `
render tree mode 1`] = ` class="jse-json-node jse-expanded s-BfIc3EpAoT-Y" data-path="%2F2" role="treeitem" + style="--level: 1;" tabindex="-1" >
render tree mode 1`] = ` class="jse-json-node s-BfIc3EpAoT-Y" data-path="%2F2%2Fid" role="treeitem" + style="--level: 2;" tabindex="-1" >
render tree mode 1`] = `
render tree mode 1`] = `
:global(.jse-value) { - background: var(--jse-selection-background-color); + background: $selection-background-color; } :global(div) { @@ -137,10 +137,10 @@ .jse-loading { flex: 2; text-align: center; - color: var(--jse-panel-color-readonly); + color: $panel-color-readonly; box-sizing: border-box; - font-family: var(--jse-font-family); - font-size: var(--jse-font-size); + font-family: $font-family; + font-size: $font-size; } } } diff --git a/src/lib/components/modes/tablemode/TableModeWelcome.scss b/src/lib/components/modes/tablemode/TableModeWelcome.scss index 8977440b..9892b0f4 100644 --- a/src/lib/components/modes/tablemode/TableModeWelcome.scss +++ b/src/lib/components/modes/tablemode/TableModeWelcome.scss @@ -7,11 +7,11 @@ overflow: auto; align-items: center; - border-left: var(--jse-main-border); - border-right: var(--jse-main-border); + border-left: $main-border; + border-right: $main-border; &:last-child { - border-bottom: var(--jse-main-border); + border-bottom: $main-border; } .jse-space.jse-before { @@ -25,14 +25,14 @@ max-width: 300px; margin: 2em $padding; - font-family: var(--jse-font-family); - font-size: var(--jse-font-size); + font-family: $font-family; + font-size: $font-size; .jse-nested-arrays-title { } .jse-nested-arrays-info { - color: var(--jse-panel-color-readonly); + color: $panel-color-readonly; } button.jse-nested-array-action { diff --git a/src/lib/components/modes/tablemode/tag/InlineValue.scss b/src/lib/components/modes/tablemode/tag/InlineValue.scss index dd1324a8..e092983b 100644 --- a/src/lib/components/modes/tablemode/tag/InlineValue.scss +++ b/src/lib/components/modes/tablemode/tag/InlineValue.scss @@ -1,9 +1,9 @@ @import '../../../../styles'; .jse-inline-value { - font-family: var(--jse-font-family-mono); - font-size: var(--jse-font-size-mono); - line-height: var(--jse-line-height); + font-family: $font-family-mono; + font-size: $font-size-mono; + line-height: $line-height; border: none; padding: 0 $padding-half; background: transparent; @@ -11,10 +11,10 @@ cursor: pointer; &:hover { - background: var(--jse-hover-background-color); + background: $hover-background-color; } &.jse-selected { - background: var(--jse-selection-background-color); + background: $selection-background-color; } } diff --git a/src/lib/components/modes/textmode/StatusBar.scss b/src/lib/components/modes/textmode/StatusBar.scss index 98f6a986..3ad6c8b1 100644 --- a/src/lib/components/modes/textmode/StatusBar.scss +++ b/src/lib/components/modes/textmode/StatusBar.scss @@ -1,22 +1,22 @@ @import '../../../styles'; .jse-status-bar { - background: var(--jse-panel-background); - color: var(--jse-panel-color-readonly); - font-family: var(--jse-font-family-mono); - font-size: var(--jse-font-size-mono); + background: $panel-background; + color: $panel-color-readonly; + font-family: $font-family-mono; + font-size: $font-size-mono; margin: 0; - border-top: var(--jse-panel-border); - border-left: var(--jse-main-border); - border-right: var(--jse-main-border); + border-top: $panel-border; + border-left: $main-border; + border-right: $main-border; &:last-child { - border-bottom: var(--jse-main-border); + border-bottom: $main-border; } display: flex; - gap: var(--jse-padding); + gap: $padding; .jse-status-bar-info { padding: 2px; diff --git a/src/lib/components/modes/textmode/TextMode.scss b/src/lib/components/modes/textmode/TextMode.scss index ff912915..eeb8cf93 100644 --- a/src/lib/components/modes/textmode/TextMode.scss +++ b/src/lib/components/modes/textmode/TextMode.scss @@ -1,14 +1,19 @@ @import '../../../styles'; .jse-text-mode { + --internal-key-color: #{$key-color}; + --internal-value-color-number: #{$value-color-number}; + --internal-value-color-boolean: #{$value-color-boolean}; + --internal-value-color-string: #{$value-color-string}; + --internal-value-color-null: #{$value-color-null}; flex: 1; box-sizing: border-box; display: flex; flex-direction: column; - background: var(--jse-background-color); + background: $background-color; &.no-main-menu { - border-top: var(--jse-main-border); + border-top: $main-border; } .jse-contents { @@ -20,11 +25,11 @@ min-width: 0; min-height: 0; - border-left: var(--jse-main-border); - border-right: var(--jse-main-border); + border-left: $main-border; + border-right: $main-border; &:last-child { - border-bottom: var(--jse-main-border); + border-bottom: $main-border; } &.jse-hidden { @@ -42,87 +47,87 @@ overflow: hidden; :global(.cm-scroller) { - font-family: var(--jse-font-family-mono); - font-size: var(--jse-font-size-mono); - line-height: var(--jse-line-height); - color: var(--jse-delimiter-color); + font-family: $font-family-mono; + font-size: $font-size-mono; + line-height: $line-height; + color: $delimiter-color; } :global(.cm-gutters) { - background: var(--jse-panel-background); - color: var(--jse-panel-color-readonly); - border-right: var(--jse-panel-border); + background: $panel-background; + color: $panel-color-readonly; + border-right: $panel-border; } :global(.cm-activeLine), :global(.cm-activeLineGutter) { - background: var(--jse-active-line-background-color); + background: $active-line-background-color; } :global(.cm-selectionBackground) { - background: var(--jse-selection-background-color); + background: $selection-background-color; } :global(.cm-searchMatch) { - background-color: var(--jse-search-match-color); - outline: var(--jse-search-match-outline); + background-color: $search-match-color; + outline: $search-match-outline; } :global(.cm-searchMatch.cm-searchMatch-selected) { - background-color: var(--jse-search-match-active-color); - outline: var(--jse-search-match-active-outline); + background-color: $search-match-active-color; + outline: $search-match-active-outline; } :global(.cm-selectionMatch) { - background-color: var(--jse-search-match-background-color); + background-color: $search-match-background-color; } :global(.cm-foldPlaceholder) { - background: var(--jse-tag-background); - color: var(--jse-tag-color); + background: $tag-background; + color: $tag-color; border: none; padding: 0 $padding; } :global(.cm-tooltip) { - font-size: var(--jse-font-size); - font-family: var(--jse-font-family); - color: var(--jse-tooltip-color); - background: var(--jse-tooltip-background); - border: var(--jse-tooltip-border); + font-size: $font-size; + font-family: $font-family; + color: $tooltip-color; + background: $tooltip-background; + border: $tooltip-border; } :global(.cm-diagnosticAction) { - background: var(--jse-tooltip-action-button-color); - background: var(--jse-tooltip-action-button-background); + background: $tooltip-action-button-color; + background: $tooltip-action-button-background; } :global(.cm-panels) { - border-bottom: var(--jse-panel-border); + border-bottom: $panel-border; } :global(.cm-search) { - background: var(--jse-panel-background); - color: var(--jse-panel-color); - font-family: var(--jse-font-family); - font-size: var(--jse-font-size); + background: $panel-background; + color: $panel-color; + font-family: $font-family; + font-size: $font-size; } :global(.cm-search input) { - font-family: var(--jse-font-family); - font-size: var(--jse-font-size-text-mode-search); - color: var(--jse-input-color); - border: var(--jse-input-border); - background: var(--jse-input-background); + font-family: $font-family; + font-size: $font-size-text-mode-search; + color: $input-color; + border: $input-border; + background: $input-background; margin-right: 2px; } :global(.cm-search button) { - font-family: var(--jse-font-family); - font-size: var(--jse-font-size-text-mode-search); + font-family: $font-family; + font-size: $font-size-text-mode-search; - color: var(--jse-panel-button-color); - background: var(--jse-panel-button-background); + color: $panel-button-color; + background: $panel-button-background; border: none; cursor: pointer; @@ -131,14 +136,14 @@ margin: 0; &:hover { - color: var(--jse-panel-button-color-highlight); - background: var(--jse-panel-button-background-highlight); + color: $panel-button-color-highlight; + background: $panel-button-background-highlight; } } :global(.cm-search label) { - font-family: var(--jse-font-family); - font-size: var(--jse-font-size-text-mode-search); + font-family: $font-family; + font-size: $font-size-text-mode-search; padding-left: $padding; } @@ -157,7 +162,7 @@ } :global(.cm-cursor-primary) { - border-color: var(--jse-text-color); + border-color: $text-color; } } @@ -168,17 +173,17 @@ .jse-loading { flex: 2; text-align: center; - color: var(--jse-panel-color-readonly); + color: $panel-color-readonly; box-sizing: border-box; - font-family: var(--jse-font-family); - font-size: var(--jse-font-size); + font-family: $font-family; + font-size: $font-size; } &.jse-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; word-break: break-word; diff --git a/src/lib/components/modes/textmode/codemirror/codemirror-theme.ts b/src/lib/components/modes/textmode/codemirror/codemirror-theme.ts index 78a280d5..eff33539 100644 --- a/src/lib/components/modes/textmode/codemirror/codemirror-theme.ts +++ b/src/lib/components/modes/textmode/codemirror/codemirror-theme.ts @@ -2,11 +2,11 @@ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language' import { tags } from '@lezer/highlight' const highlightStyle = HighlightStyle.define([ - { tag: tags.propertyName, color: 'var(--jse-key-color)' }, // keys - { tag: tags.number, color: 'var(--jse-value-color-number)' }, - { tag: tags.bool, color: 'var(--jse-value-color-boolean)' }, - { tag: tags.string, color: 'var(--jse-value-color-string)' }, - { tag: tags.keyword, color: 'var(--jse-value-color-null)' } // null + { tag: tags.propertyName, color: 'var(--internal-key-color)' }, // keys + { tag: tags.number, color: 'var(--internal-value-color-number)' }, + { tag: tags.bool, color: 'var(--internal-value-color-boolean)' }, + { tag: tags.string, color: 'var(--internal-value-color-string)' }, + { tag: tags.keyword, color: 'var(--internal-value-color-null)' } // null ]) export const highlighter = syntaxHighlighting(highlightStyle) diff --git a/src/lib/components/modes/treemode/CollapsedItems.scss b/src/lib/components/modes/treemode/CollapsedItems.scss index 02fd1d77..eef165f4 100644 --- a/src/lib/components/modes/treemode/CollapsedItems.scss +++ b/src/lib/components/modes/treemode/CollapsedItems.scss @@ -1,12 +1,13 @@ @import '../../../styles'; div.jse-collapsed-items { + margin-left: calc(var(--level) * $indent-size); $transparent-color: transparent; - $background-color: var(--jse-collapsed-items-background-color); - $color: var(--jse-collapsed-items-link-color); + $background-color: $collapsed-items-background-color; + $color: $collapsed-items-link-color; - font-family: var(--jse-font-family); - font-size: var(--jse-font-size); + font-family: $font-family; + font-size: $font-size; color: $color; // https://sharkcoder.com/visual/borders @@ -14,7 +15,7 @@ div.jse-collapsed-items { padding: $padding-half; border: $size solid transparent; border-width: $size 0; - background-color: var(--jse-contents-background-color); + background-color: $contents-background-color; background-image: linear-gradient($background-color, $background-color), linear-gradient(to bottom right, $transparent-color 50.5%, $background-color 50.5%), linear-gradient(to bottom left, $transparent-color 50.5%, $background-color 50.5%), @@ -60,7 +61,7 @@ div.jse-collapsed-items { &:hover, &:focus { - color: var(--jse-collapsed-items-link-color-highlight); + color: $collapsed-items-link-color-highlight; } } } diff --git a/src/lib/components/modes/treemode/CollapsedItems.svelte b/src/lib/components/modes/treemode/CollapsedItems.svelte index 10ff2036..16426ae2 100644 --- a/src/lib/components/modes/treemode/CollapsedItems.svelte +++ b/src/lib/components/modes/treemode/CollapsedItems.svelte @@ -23,11 +23,6 @@ $: expandItemsSections = getExpandItemsSections(startIndex, endIndex) - // TODO: this is duplicated from the same function in JSONNode - function getIndentationStyle(level) { - return `margin-left: calc(${level} * var(--jse-indent-size))` - } - function handleMouseMove(event) { // prevent the whole array from being selected whilst dragging over // a section with collapsed items @@ -40,7 +35,7 @@ class="jse-collapsed-items" class:jse-selected={selected} on:mousemove={handleMouseMove} - style={getIndentationStyle(path.length + 2)} + style:--level={path.length + 2} >
Items {startIndex}-{endIndex}
diff --git a/src/lib/components/modes/treemode/JSONKey.scss b/src/lib/components/modes/treemode/JSONKey.scss index 3cb0bf7c..33f7a9c9 100644 --- a/src/lib/components/modes/treemode/JSONKey.scss +++ b/src/lib/components/modes/treemode/JSONKey.scss @@ -8,29 +8,29 @@ outline: none; border-radius: 1px; vertical-align: top; - color: var(--jse-key-color); - cursor: var(--jse-contents-cursor); + color: $key-color; + cursor: $contents-cursor; word-break: normal; overflow-wrap: normal; // not anywhere as for JSONValue white-space: pre-wrap; // important for rendering multiple consecutive spaces &:hover { - background: var(--jse-hover-background-color); + background: $hover-background-color; } &:hover { - background: var(--jse-hover-background-color); + background: $hover-background-color; } &.jse-empty { min-width: 3em; - 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; content: 'key'; } } diff --git a/src/lib/components/modes/treemode/JSONNode.scss b/src/lib/components/modes/treemode/JSONNode.scss index a8646dd3..675fbbb7 100644 --- a/src/lib/components/modes/treemode/JSONNode.scss +++ b/src/lib/components/modes/treemode/JSONNode.scss @@ -2,7 +2,7 @@ .jse-json-node { position: relative; - color: var(--jse-text-color); + color: $text-color; &.jse-root { min-height: 100%; @@ -12,7 +12,7 @@ > .jse-header-outer :global(.jse-context-menu-pointer), > .jse-contents-outer > .jse-contents :global(.jse-context-menu-pointer) { top: 0; - right: calc(-2px - var(--jse-context-menu-pointer-size)); + right: calc(-2px - $context-menu-pointer-size); } > .jse-contents-outer > .jse-contents { @@ -30,6 +30,7 @@ .jse-header-outer, .jse-footer-outer { display: flex; + margin-left: calc(var(--level) * $indent-size); } .jse-header { @@ -45,6 +46,7 @@ .jse-contents-outer { display: flex; + margin-left: calc(var(--level) * $indent-size); } .jse-header, @@ -55,18 +57,18 @@ } .jse-contents { - padding-left: var(--jse-indent-size); + padding-left: $indent-size; } .jse-footer { display: inline-flex; - padding-left: calc(var(--jse-indent-size) + $input-padding); + padding-left: calc($indent-size + $input-padding); } .jse-header, .jse-contents, .jse-footer { - background: var(--jse-contents-background-color); + background: $contents-background-color; } .jse-insert-selection-area { @@ -96,6 +98,7 @@ display: flex; position: relative; z-index: 1; // prevent the next line half-overlapping the pointer + margin-left: calc(var(--level) * $indent-size); max-width: 250px; min-width: 100px; @@ -105,11 +108,11 @@ :global(.jse-context-menu-pointer) { right: -$height-half; - background: var(--jse-context-menu-pointer-hover-background); + background: $context-menu-pointer-hover-background; } &.jse-hovered { - outline-color: var(--jse-context-menu-pointer-hover-background); + outline-color: $context-menu-pointer-hover-background; } } @@ -126,7 +129,7 @@ .jse-props .jse-contents, .jse-items .jse-contents, .jse-footer { - background: var(--jse-hover-background-color); + background: $hover-background-color; } } @@ -144,12 +147,12 @@ .jse-footer, :global(.jse-key), :global(.jse-value) { - background: var(--jse-selection-background-color); - cursor: var(--jse-contents-selected-cursor); + background: $selection-background-color; + cursor: $contents-selected-cursor; } .jse-expand { - background: var(--jse-selection-background-color); + background: $selection-background-color; } } @@ -157,22 +160,22 @@ &.jse-selected-key { > .jse-contents-outer > .jse-contents > :global(.jse-identifier) > :global(.jse-key), > .jse-header-outer > .jse-header > :global(.jse-identifier) > :global(.jse-key) { - background: var(--jse-selection-background-color); - cursor: var(--jse-contents-selected-cursor); + background: $selection-background-color; + cursor: $contents-selected-cursor; } } // value selected (part 1) &.jse-selected-value > .jse-contents-outer > .jse-contents > :global(.jse-value) { - background: var(--jse-selection-background-color); - cursor: var(--jse-contents-selected-cursor); + background: $selection-background-color; + cursor: $contents-selected-cursor; } :global(.jse-collapsed-items.jse-selected), &.jse-selected :global(.jse-collapsed-items), &.jse-selected-value :global(.jse-collapsed-items) { - background-color: var(--jse-selection-background-color); - --jse-collapsed-items-background-color: var(--jse-collapsed-items-selected-background-color); + background-color: $selection-background-color; + --jse-collapsed-items-background-color: #{$collapsed-items-selected-background-color}; } // value selected (part 2) @@ -188,12 +191,12 @@ .jse-items .jse-header, .jse-items .jse-footer, .jse-items .jse-expand { - background: var(--jse-selection-background-color); + background: $selection-background-color; :global(.jse-key), :global(.jse-value) { - background: var(--jse-selection-background-color); - cursor: var(--jse-contents-selected-cursor); + background: $selection-background-color; + cursor: $contents-selected-cursor; } } } @@ -204,17 +207,17 @@ .jse-insert-area { &.jse-selected { - outline-color: var(--jse-context-menu-pointer-background); + outline-color: $context-menu-pointer-background; } } .jse-insert-area { &.jse-selected { :global(.jse-context-menu-pointer) { - background: var(--jse-context-menu-pointer-background); + background: $context-menu-pointer-background; &:hover { - background: var(--jse-context-menu-pointer-background-highlight); + background: $context-menu-pointer-background-highlight; } } } @@ -224,21 +227,21 @@ // lighter selection color when the editor doesn't have focus :global(.jse-main:not(.jse-focus)) { .jse-json-node { - --jse-selection-background-color: var(--jse-selection-background-inactive-color); - --jse-context-menu-pointer-background: var(--jse-context-menu-pointer-hover-background); + --jse-selection-background-color: #{$selection-background-inactive-color}; + --jse-context-menu-pointer-background: #{$context-menu-pointer-hover-background}; } } .jse-expand { - width: var(--jse-indent-size); + width: $indent-size; padding: 0; margin: 0; border: none; cursor: pointer; background: transparent; - color: var(--jse-delimiter-color); - font-size: var(--jse-font-size-mono); - height: var(--jse-line-height); + color: $delimiter-color; + font-size: $font-size-mono; + height: $line-height; &:hover { opacity: 0.8; @@ -250,7 +253,7 @@ .jse-index, .jse-bracket { vertical-align: top; - color: var(--jse-delimiter-color); + color: $delimiter-color; } .jse-index { @@ -268,9 +271,9 @@ .jse-tag { border: none; font-size: 80%; - font-family: var(--jse-font-family); - color: var(--jse-tag-color); - background: var(--jse-tag-background); + font-family: $font-family; + color: $tag-color; + background: $tag-background; border-radius: 2px; cursor: pointer; //position: relative; diff --git a/src/lib/components/modes/treemode/JSONNode.svelte b/src/lib/components/modes/treemode/JSONNode.svelte index 80d2d1bc..bedb7152 100644 --- a/src/lib/components/modes/treemode/JSONNode.svelte +++ b/src/lib/components/modes/treemode/JSONNode.svelte @@ -120,12 +120,6 @@ $: root = path.length === 0 - function getIndentationStyle(level) { - return `margin-left: calc(${level} * var(--jse-indent-size))` - } - - $: indentationStyle = getIndentationStyle(path.length) - // TODO: extract getProps into a separate function function getProps( path: JSONPath, @@ -614,6 +608,7 @@ )} data-path={encodeDataPath(path)} aria-selected={isNodeSelected} + style:--level={path.length} class:jse-root={root} class:jse-selected={isNodeSelected && isMultiSelection(selection)} class:jse-selected-key={isNodeSelected && isKeySelection(selection)} @@ -628,7 +623,7 @@ on:blur={undefined} > {#if Array.isArray(value)} -
+
-
+
}
@@ -869,7 +864,7 @@
{/if} {:else} -
+
{#if !root} @@ -908,7 +903,6 @@ class:jse-hovered={hover === HOVER_INSERT_AFTER} class:jse-selected={isNodeSelected && isAfterSelection(selection)} data-type="insert-selection-area-after" - style={indentationStyle} title={INSERT_EXPLANATION} >