From 3a2fa4073a4275f5b18a134c685ec82bf7e2423a Mon Sep 17 00:00:00 2001 From: Mauricio Bonani Date: Sat, 18 Jun 2022 16:05:25 -0400 Subject: [PATCH] Move all colours to CSS variables --- .../@node-red/editor-client/src/sass/ace.scss | 34 +-- .../editor-client/src/sass/base.scss | 44 ++-- .../editor-client/src/sass/colors.scss | 4 + .../editor-client/src/sass/debug.scss | 68 +++--- .../editor-client/src/sass/diff.scss | 188 +++++++-------- .../editor-client/src/sass/dragdrop.scss | 4 +- .../editor-client/src/sass/dropdownMenu.scss | 46 ++-- .../editor-client/src/sass/editor.scss | 178 +++++++------- .../editor-client/src/sass/flow.scss | 136 +++++------ .../editor-client/src/sass/forms.scss | 50 ++-- .../editor-client/src/sass/header.scss | 68 +++--- .../editor-client/src/sass/jquery.scss | 62 ++--- .../editor-client/src/sass/keyboard.scss | 22 +- .../editor-client/src/sass/library.scss | 36 +-- .../editor-client/src/sass/mixins.scss | 56 ++--- .../editor-client/src/sass/notifications.scss | 14 +- .../src/sass/palette-editor.scss | 54 ++--- .../editor-client/src/sass/palette.scss | 46 ++-- .../editor-client/src/sass/panels.scss | 18 +- .../editor-client/src/sass/popover.scss | 24 +- .../editor-client/src/sass/projects.scss | 206 ++++++++-------- .../editor-client/src/sass/radialMenu.scss | 20 +- .../editor-client/src/sass/search.scss | 64 ++--- .../editor-client/src/sass/sidebar.scss | 20 +- .../src/sass/style-custom-theme.scss | 18 ++ .../editor-client/src/sass/tab-config.scss | 32 +-- .../editor-client/src/sass/tab-context.scss | 4 +- .../editor-client/src/sass/tab-help.scss | 2 +- .../editor-client/src/sass/tab-info.scss | 88 +++---- .../editor-client/src/sass/tabs.scss | 96 ++++---- .../editor-client/src/sass/tourGuide.scss | 2 +- .../src/sass/ui/common/checkboxSet.scss | 4 +- .../src/sass/ui/common/editableList.scss | 16 +- .../src/sass/ui/common/nodeList.scss | 10 +- .../src/sass/ui/common/searchBox.scss | 14 +- .../src/sass/ui/common/stack.scss | 4 +- .../src/sass/ui/common/treeList.scss | 30 +-- .../src/sass/ui/common/typedInput.scss | 50 ++-- .../editor-client/src/sass/userSettings.scss | 4 +- .../editor-client/src/sass/variables.scss | 221 +++++++++++++++++- .../editor-client/src/sass/workspace.scss | 28 +-- .../src/sass/workspaceToolbar.scss | 16 +- scripts/build-custom-theme.js | 2 +- 43 files changed, 1162 insertions(+), 941 deletions(-) create mode 100644 packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss index 4e913942e..5aad96b4d 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ace.scss @@ -2,48 +2,48 @@ .ace_read-only { .ace_scroller { - background: $text-editor-background-disabled; - color: $text-editor-color-disabled; + background: var(--red-ui-text-editor-background-disabled); + color: var(--red-ui-text-editor-color-disabled); } .ace_cursor { color: transparent !important; } } .ace_gutter { - background: $text-editor-gutter-background; + background: var(--red-ui-text-editor-gutter-background); border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .ace_scroller { - background: $text-editor-background; + background: var(--red-ui-text-editor-background); border-top-right-radius: 4px; border-bottom-right-radius: 4px; - color: $text-editor-color; + color: var(--red-ui-text-editor-color); } .ace_marker-layer .ace_active-line { - background: $text-editor-active-line-background; + background: var(--red-ui-text-editor-active-line-background); } .ace_marker-layer .ace_selection { - background: $text-editor-selection-background; + background: var(--red-ui-text-editor-selection-background); border-radius: 1px; } .ace_gutter-cell { - color: $text-editor-gutter-color; + color: var(--red-ui-text-editor-gutter-color); } .ace_gutter-active-line { - background: $text-editor-gutter-active-line-background; + background: var(--red-ui-text-editor-gutter-active-line-background); } .ace_tooltip { - font-family: $primary-font; + font-family: var(--red-ui-primary-font); line-height: 1.4em; max-width: 400px; white-space: normal; background-image: none; - background: $popover-background; - color: $popover-color; + background: var(--red-ui-popover-background); + color: var(--red-ui-popover-color); border-radius: 4px; @include component-shadow; - border-color: $popover-background; + border-color: var(--red-ui-popover-background); } .ace_content { line-height: 1; @@ -55,14 +55,14 @@ #red-ui-event-log-editor { .ace_scroller { - background: $event-log-background; - color: $event-log-color; + background: var(--red-ui-event-log-background); + color: var(--red-ui-event-log-color); } .ace_marker-layer .ace_active-line { - background: $event-log-active-line-background; + background: var(--red-ui-event-log-active-line-background); } .ace_marker-layer .ace_selection { - background: $event-log-selection-background; + background: var(--red-ui-event-log-selection-background); } } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss index a08e752d4..92a98913f 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss @@ -20,12 +20,12 @@ body { } .red-ui-editor { - font-size: $primary-font-size; - font-family: $primary-font; + font-size: var(--red-ui-primary-font-size); + font-family: var(--red-ui-primary-font); padding: 0; margin: 0; - background: $primary-background; - color: $primary-text-color; + background: var(--red-ui-primary-background); + color: var(--red-ui-primary-text-color); line-height: 20px; } @@ -63,15 +63,15 @@ body { .red-ui-icon-picker { a { text-decoration: none; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); } a:hover, a:focus { text-decoration: none; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); } a:focus { - outline: 1px solid $form-input-focus-color; + outline: 1px solid var(--red-ui-form-input-focus-color); } p { @@ -130,7 +130,7 @@ body { hr { margin: 20px 0; border: 0; - border-top: 1px solid $tertiary-border-color; + border-top: 1px solid var(--red-ui-tertiary-border-color); } @@ -150,22 +150,22 @@ body { mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - background-color: $spinner-color; + background-color: var(--red-ui-spinner-color); } .red-ui-font-code { - font-family: $monospace-font; - font-size: $primary-font-size; - color: $text-color-code; + font-family: var(--red-ui-monospace-font); + font-size: var(--red-ui-primary-font-size); + color: var(--red-ui-text-color-code); white-space: nowrap; } code { - font-family: $monospace-font; - font-size: $primary-font-size; + font-family: var(--red-ui-monospace-font); + font-size: var(--red-ui-primary-font-size); padding: 0px; margin: 1px; - color: $text-color-code; + color: var(--red-ui-text-color-code); white-space: nowrap; } @@ -177,8 +177,8 @@ body { word-break: break-all; word-wrap: break-word; white-space: pre-wrap; - background-color:$tertiary-background; - border: 1px solid $tertiary-border-color; + background-color:var(--red-ui-tertiary-background); + border: 1px solid var(--red-ui-tertiary-border-color); border-radius: 2px; } @@ -217,8 +217,8 @@ body { blockquote { padding: 0 0 0 15px; margin: 0 0 20px; - border-left: 4px solid $secondary-border-color; - color: $secondary-text-color; + border-left: 4px solid var(--red-ui-secondary-border-color); + color: var(--red-ui-secondary-text-color); p { font-size: 14px; @@ -244,7 +244,7 @@ body { right: 1px; text-align: center; padding: 40px; - background: $secondary-background; + background: var(--red-ui-secondary-background); &:before { content: ''; display: inline-block; @@ -258,14 +258,14 @@ body { width: 80px; } &.red-ui-component-spinner-sidebar { - background: $secondary-background; + background: var(--red-ui-secondary-background); padding:0; img { width: 40px; } } &.projects-version-control-spinner-sidebar { - background: $secondary-background; + background: var(--red-ui-secondary-background); padding:0; img { width: 20px; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index d8b4fb175..66b3bd48e 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss @@ -112,9 +112,13 @@ $tab-text-color-disabled-inactive: $secondary-text-color-disabled-inactive; $tab-badge-color: $tertiary-text-color; $tab-background: $secondary-background; $tab-background-active: $secondary-background; +$tab-background-active-alpha: rgba($secondary-background, 0.001); $tab-background-selected: $secondary-background-selected; +$tab-background-selected-alpha: rgba($secondary-background-selected, 0.001); $tab-background-inactive: $secondary-background-inactive; +$tab-background-inactive-alpha: rgba($secondary-background-inactive, 0.001); $tab-background-hover: $secondary-background-hover; +$tab-background-hover-alpha: rgba($secondary-background-hover, 0.001); $palette-header-background: $primary-background; $palette-header-color: $header-text-color; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss index 0c810c03f..58099877f 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/debug.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/debug.scss @@ -17,7 +17,7 @@ .red-ui-debug-window { padding:0; margin:0; - background: $secondary-background; + background: var(--red-ui-secondary-background); line-height: 20px; .red-ui-debug-msg-payload { font-size: 14px; @@ -38,15 +38,15 @@ left: 0px; right: 0px; z-index: 20; - background: $tertiary-background; + background: var(--red-ui-tertiary-background); padding: 10px; - border-bottom: 1px solid $secondary-border-color; - box-shadow: 0 2px 6px $shadow; + border-bottom: 1px solid var(--red-ui-secondary-border-color); + box-shadow: 0 2px 6px var(--red-ui-shadow); } #red-ui-sidebar-debug-filter-node-list-row { .red-ui-treeList-label.disabled { font-style: italic; - color: $secondary-text-color-disabled; + color: var(--red-ui-secondary-text-color-disabled); } .red-ui-treeList-label { @@ -57,22 +57,22 @@ background: inherit; } &.focus, &.focus .red-ui-treeList-sublabel-text { - background: $list-item-background-hover !important; + background: var(--red-ui-list-item-background-hover) !important; } } } .red-ui-debug-msg { position: relative; - border-bottom: 1px solid $debug-message-border; - border-left: 8px solid $debug-message-border; - border-right: 8px solid $debug-message-border; + border-bottom: 1px solid var(--red-ui-debug-message-border); + border-left: 8px solid var(--red-ui-debug-message-border); + border-right: 8px solid var(--red-ui-debug-message-border); padding: 2px; &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools { display: none; } &.red-ui-debug-msg-hover { - border-right-color: $debug-message-border-hover; + border-right-color: var(--red-ui-debug-message-border-hover); &>.red-ui-debug-msg-meta .red-ui-debug-msg-tools { display: inline-block; } @@ -86,7 +86,7 @@ display: inline-block; } &:hover { - background: $debug-message-background-hover; + background: var(--red-ui-debug-message-background-hover); &>.red-ui-debug-msg-tools { .red-ui-debug-msg-tools-copy { display: inline-block; @@ -120,9 +120,9 @@ } .red-ui-debug-msg-meta { - background: $debug-message-background; + background: var(--red-ui-debug-message-background); font-size: 11px; - color: $secondary-text-color-inactive; + color: var(--red-ui-secondary-text-color-inactive); overflow-wrap: anywhere; } .red-ui-debug-msg-date { @@ -131,11 +131,11 @@ } .red-ui-debug-msg-topic { display: block; - color: $debug-message-text-color-meta; + color: var(--red-ui-debug-message-text-color-meta); } .red-ui-debug-msg-name { padding: 1px 0px; - color: $secondary-text-color-inactive; + color: var(--red-ui-secondary-text-color-inactive); white-space: nowrap; } .red-ui-debug-msg-tools { @@ -152,39 +152,39 @@ .red-ui-debug-msg-payload { display: block; padding: 2px; - background: $debug-message-background; - font-family: $monospace-font; + background: var(--red-ui-debug-message-background); + font-family: var(--red-ui-monospace-font); font-size: 13px !important; } .red-ui-debug-msg-level-log { - border-left-color: $debug-message-border; - border-right-color: $debug-message-border; + border-left-color: var(--red-ui-debug-message-border); + border-right-color: var(--red-ui-debug-message-border); } .red-ui-debug-msg-level-30 { - border-left-color: $debug-message-border-warning; - border-right-color: $debug-message-border-warning; + border-left-color: var(--red-ui-debug-message-border-warning); + border-right-color: var(--red-ui-debug-message-border-warning); } .red-ui-debug-msg-level-20 { - border-left-color: $debug-message-border-error; - border-right-color: $debug-message-border-error; + border-left-color: var(--red-ui-debug-message-border-error); + border-right-color: var(--red-ui-debug-message-border-error); } .red-ui-debug-msg-object-entry { position: relative; padding-left: 15px; } .red-ui-debug-msg-element { - color: $debug-message-text-color; + color: var(--red-ui-debug-message-text-color); line-height: 1.3em; overflow-wrap: break-word; } .red-ui-debug-msg-object-key { - color: $debug-message-text-color-object-key; + color: var(--red-ui-debug-message-text-color-object-key); } .red-ui-debug-msg-object-value { } .red-ui-debug-msg-object-handle { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); font-size: 1em; width: 1em; text-align: center; @@ -219,17 +219,17 @@ display:none; } .red-ui-debug-msg-object-entry pre { - font-family: $monospace-font; + font-family: var(--red-ui-monospace-font); font-size: 13px; line-height: 1.2em; margin: 0 0 0 -1em; } -.red-ui-debug-msg-type-other { color: $debug-message-text-color-msg-type-other; } -.red-ui-debug-msg-type-string { color: $debug-message-text-color-msg-type-string; } -.red-ui-debug-msg-type-null { color: $debug-message-text-color-msg-type-null; font-style: italic;} -.red-ui-debug-msg-type-meta { color: $debug-message-text-color-msg-type-meta; font-style: italic;} -.red-ui-debug-msg-type-number { color: $debug-message-text-color-msg-type-number; }; +.red-ui-debug-msg-type-other { color: var(--red-ui-debug-message-text-color-msg-type-other); } +.red-ui-debug-msg-type-string { color: var(--red-ui-debug-message-text-color-msg-type-string); } +.red-ui-debug-msg-type-null { color: var(--red-ui-debug-message-text-color-msg-type-null); font-style: italic;} +.red-ui-debug-msg-type-meta { color: var(--red-ui-debug-message-text-color-msg-type-meta); font-style: italic;} +.red-ui-debug-msg-type-number { color: var(--red-ui-debug-message-text-color-msg-type-number); } .red-ui-debug-msg-type-number-toggle { cursor: pointer;} .red-ui-debug-msg-type-string { @@ -241,14 +241,14 @@ padding: 4px 2px 2px; position: relative; &.red-ui-debug-msg-row-pinned { - background: $secondary-background-selected; + background: var(--red-ui-secondary-background-selected); } } .red-ui-debug-msg-expandable { cursor: pointer; } .red-ui-debug-msg-expandable:hover .red-ui-debug-msg-object-handle { - color:$secondary-text-color-hover; + color:var(--red-ui-secondary-text-color-hover); } .red-ui-debug-msg-buffer-opts { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss index 38fd36252..a7b3d4dc8 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/diff.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/diff.scss @@ -23,11 +23,11 @@ .red-ui-editableList-container { border-radius:1px; padding:0; - background: $tertiary-background; + background: var(--red-ui-tertiary-background); } .red-ui-diff-list { li { - background: $tertiary-background; + background: var(--red-ui-tertiary-background); padding: 0px; border: none; min-height: 0; @@ -62,29 +62,29 @@ white-space: nowrap; text-overflow: ellipsis; width: 50%; - background: $tertiary-background; + background: var(--red-ui-tertiary-background); text-align: center; - border-top: 1px solid $secondary-border-color; - border-color:$secondary-border-color; - border-left: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); + border-color:var(--red-ui-secondary-border-color); + border-left: 1px solid var(--red-ui-secondary-border-color); } div:last-child { - border-right: 1px solid $secondary-border-color; + border-right: 1px solid var(--red-ui-secondary-border-color); } } .red-ui-diff-dialog-toolbar { box-sizing: border-box; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); text-align: right; padding: 8px 10px; - background: $primary-background; - border-bottom: 1px solid $secondary-border-color; + background: var(--red-ui-primary-background); + border-bottom: 1px solid var(--red-ui-secondary-border-color); white-space: nowrap; } .red-ui-diff-list-flow { - background: $secondary-background; - border: 1px solid $secondary-border-color; + background: var(--red-ui-secondary-background); + border: 1px solid var(--red-ui-secondary-border-color); border-radius: 1px; overflow: hidden; @@ -114,10 +114,10 @@ font-size: 0.9em; &:first-child { - border-top: 1px solid $tertiary-border-color; + border-top: 1px solid var(--red-ui-tertiary-border-color); } &:not(:last-child) { - border-bottom: 1px solid $tertiary-border-color; + border-bottom: 1px solid var(--red-ui-tertiary-border-color); } &.collapsed { @@ -150,8 +150,8 @@ width: 100%; } td, th { - border-top: 1px solid $secondary-border-color; - border-left: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); + border-left: 1px solid var(--red-ui-secondary-border-color); &:first-child { border-left: none; } @@ -166,7 +166,7 @@ overflow:hidden; } &:hover { - background: $secondary-background-selected; + background: var(--red-ui-secondary-background-selected); } } @@ -212,7 +212,7 @@ cursor: pointer; padding: 0; &:hover { - background: $secondary-background-selected; + background: var(--red-ui-secondary-background-selected); } } .red-ui-diff-list-flow-title-meta { @@ -223,7 +223,7 @@ .red-ui-diff-list-node-header { cursor: pointer; &:hover { - background: $secondary-background-selected; + background: var(--red-ui-secondary-background-selected); } } .red-ui-diff-list-node-icon { @@ -232,9 +232,9 @@ margin: 5px; width: 18px; height: 15px; - background: $form-input-background; + background: var(--red-ui-form-input-background); border-radius: 2px; - border: 1px solid $node-border; + border: 1px solid var(--red-ui-node-border); background-position: 5% 50%; background-repeat: no-repeat; background-size: contain; @@ -267,7 +267,7 @@ .red-ui-diff-status-deleted { cursor: default !important; .red-ui-diff-status { - color: $diff-state-deleted; + color: var(--red-ui-diff-state-deleted); } .red-ui-diff-list-node-node { opacity: 0.5; @@ -280,28 +280,28 @@ .red-ui-diff-status-added { cursor: default !important; .red-ui-diff-status { - color: $diff-state-added; + color: var(--red-ui-diff-state-added); } } .red-ui-diff-status-moved { .red-ui-diff-status { - color: $diff-state-moved; + color: var(--red-ui-diff-state-moved); } } .red-ui-diff-status-changed { .red-ui-diff-status { - color: $diff-state-changed; + color: var(--red-ui-diff-state-changed); } } .red-ui-diff-status-unchanged { .red-ui-diff-status { - color: $diff-state-unchanged; + color: var(--red-ui-diff-state-unchanged); } } .red-ui-diff-status-conflict { .red-ui-diff-status { - color: $diff-state-conflict; + color: var(--red-ui-diff-state-conflict); } } .red-ui-diff-list-node-title { @@ -312,7 +312,7 @@ } .red-ui-diff-list-node-properties { margin: 0; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); } .red-ui-diff-status { display: inline-block; @@ -329,7 +329,7 @@ } .red-ui-diff-list-node-description { - color: $form-text-color; + color: var(--red-ui-form-text-color); margin-right: 5px; padding-top: 5px; display: inline-block; @@ -340,11 +340,11 @@ } } -.red-ui-diff-state-added { color: $diff-state-added; } -.red-ui-diff-state-deleted { color: $diff-state-deleted; } -.red-ui-diff-state-changed { color: $diff-state-changed; } -.red-ui-diff-state-unchanged { color: $diff-state-unchanged; } -.red-ui-diff-state-conflicted { color: $diff-state-conflicted; } +.red-ui-diff-state-added { color: var(--red-ui-diff-state-added); } +.red-ui-diff-state-deleted { color: var(--red-ui-diff-state-deleted); } +.red-ui-diff-state-changed { color: var(--red-ui-diff-state-changed); } +.red-ui-diff-state-unchanged { color: var(--red-ui-diff-state-unchanged); } +.red-ui-diff-state-conflicted { color: var(--red-ui-diff-state-conflicted); } .red-ui-diff-list-node-cell { @@ -353,19 +353,19 @@ box-sizing: border-box; width: calc( (100% - 20px) / 2); height: 32px; - border-left: 1px solid $secondary-border-color; + border-left: 1px solid var(--red-ui-secondary-border-color); padding-top: 2px; white-space: nowrap; overflow: hidden; position: relative; } .red-ui-diff-empty { - background: $secondary-background-disabled; + background: var(--red-ui-secondary-background-disabled); background: repeating-linear-gradient( 20deg, - $secondary-background, $secondary-background 5px, - $secondary-background-disabled 5px, - $secondary-background-disabled 10px + var(--red-ui-secondary-background), var(--red-ui-secondary-background) 5px, + var(--red-ui-secondary-background-disabled) 5px, + var(--red-ui-secondary-background-disabled) 10px ); } .red-ui-diff-list-node-cell:first-child { @@ -425,10 +425,10 @@ background: none; } &.red-ui-diff-status-changed { - background: $diff-state-changed-background; + background: var(--red-ui-diff-state-changed-background); } &.red-ui-diff-status-conflict { - background: $diff-state-conflict-background; + background: var(--red-ui-diff-state-conflict-background); } } @@ -439,42 +439,42 @@ label.red-ui-diff-selectbox { bottom:0; width: 35px; text-align: center; - border-left: 1px solid $secondary-border-color; + border-left: 1px solid var(--red-ui-secondary-border-color); margin:0; input[type="radio"] { margin-top: 8px; } &:hover { - background: $secondary-background-hover; + background: var(--red-ui-secondary-background-hover); } } .red-ui-diff-list-node-conflict.red-ui-diff-select-remote { .red-ui-diff-list-node-remote { - background: $diff-state-added-background; + background: var(--red-ui-diff-state-added-background); label { - border-left-color: $diff-state-added-border; + border-left-color: var(--red-ui-diff-state-added-border); } } .red-ui-diff-list-node-local { - background: $diff-state-deleted-background; + background: var(--red-ui-diff-state-deleted-background); label { - border-left-color: $diff-state-deleted-border; + border-left-color: var(--red-ui-diff-state-deleted-border); } } } .red-ui-diff-list-node-conflict.red-ui-diff-select-local { .red-ui-diff-list-node-local { - background: $diff-state-added-background; + background: var(--red-ui-diff-state-added-background); label { - border-left-color: $diff-state-added-border; + border-left-color: var(--red-ui-diff-state-added-border); } } .red-ui-diff-list-node-remote { - background: $diff-state-deleted-background; + background: var(--red-ui-diff-state-deleted-background); label { - border-left-color: $diff-state-deleted-border; + border-left-color: var(--red-ui-diff-state-deleted-border); } } } @@ -500,10 +500,10 @@ ul.red-ui-deploy-dialog-confirm-list { width: 30px; margin-right: 10px; &.fa-check { - color: $text-color-success; + color: var(--red-ui-text-color-success); } &.fa-exclamation { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } } div { @@ -529,7 +529,7 @@ ul.red-ui-deploy-dialog-confirm-list { table.red-ui-diff-text-content { margin: 10px; - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); border-radius: 3px; table-layout: fixed; width: calc(100% - 20px); @@ -538,88 +538,88 @@ ul.red-ui-deploy-dialog-confirm-list { word-wrap: break-word; } td.lineno { - font-family: $monospace-font; + font-family: var(--red-ui-monospace-font); text-align: right; - color: $tertiary-text-color; - background: $tertiary-background; + color: var(--red-ui-tertiary-text-color); + background: var(--red-ui-tertiary-background); padding: 1px 5px; &.added { - background: $diff-state-added-header-background; + background: var(--red-ui-diff-state-added-header-background); } &.removed { - background: $diff-state-deleted-header-background; + background: var(--red-ui-diff-state-deleted-header-background); } } td.lineno:nth-child(3) { - border-left: 1px solid $secondary-border-color; + border-left: 1px solid var(--red-ui-secondary-border-color); } td.linetext { - font-family: $monospace-font; + font-family: var(--red-ui-monospace-font); white-space: pre-wrap; padding: 1px 5px; - border-left: 1px solid $tertiary-border-color; + border-left: 1px solid var(--red-ui-tertiary-border-color); span.prefix { width: 30px; display: inline-block; text-align: center; - color: $diff-state-prefix-color; + color: var(--red-ui-diff-state-prefix-color); } &.added { - border-left-color: $diff-state-added-header-border; + border-left-color: var(--red-ui-diff-state-added-header-border); } &.removed { - border-left-color: $diff-state-deleted-header-border; + border-left-color: var(--red-ui-diff-state-deleted-header-border); } } td.blank { - background: $tertiary-background; + background: var(--red-ui-tertiary-background); } td.added { - background: $diff-state-added-background; - color: $diff-state-color; + background: var(--red-ui-diff-state-added-background); + color: var(--red-ui-diff-state-color); } td.removed { - background: $diff-state-deleted-background; - color: $diff-state-color; + background: var(--red-ui-diff-state-deleted-background); + color: var(--red-ui-diff-state-color); } tr.mergeHeader td { - color: $diff-merge-header-color; - background: $diff-merge-header-background; + color: var(--red-ui-diff-merge-header-color); + background: var(--red-ui-diff-merge-header-background); height: 26px; vertical-align: middle; } tr.mergeHeader-separator td { - color: $diff-merge-header-color; - background: $diff-merge-header-border-color; + color: var(--red-ui-diff-merge-header-color); + background: var(--red-ui-diff-merge-header-border-color); height: 0px; } tr.mergeHeader-ours td { - border-top: 2px solid $diff-merge-header-border-color; + border-top: 2px solid var(--red-ui-diff-merge-header-border-color); } tr.mergeHeader-theirs td { - border-bottom: 2px solid $diff-merge-header-border-color; + border-bottom: 2px solid var(--red-ui-diff-merge-header-border-color); } td.unchanged { - background: $diff-state-unchanged-background; - color: $diff-state-unchanged; + background: var(--red-ui-diff-state-unchanged-background); + color: var(--red-ui-diff-state-unchanged); } tr.unchanged { - background: $diff-state-unchanged-background; + background: var(--red-ui-diff-state-unchanged-background); } tr.start-block { - border-top: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); } tr.end-block { - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); } tr.red-ui-diff-text-file-header td { .filename { - font-family: $monospace-font; + font-family: var(--red-ui-monospace-font); } - background: $primary-background; + background: var(--red-ui-primary-background); padding: 5px 10px 5px 0; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); cursor: pointer; i.red-ui-diff-list-chevron { width: 30px; @@ -631,17 +631,17 @@ ul.red-ui-deploy-dialog-confirm-list { } } tr.red-ui-diff-text-commit-header td { - background: $primary-background; + background: var(--red-ui-primary-background); padding: 5px 10px; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); h3 { font-size: 1.4em; margin: 0; } .commit-summary { - border-top: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); padding-top: 5px; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } .commit-body { margin-bottom:15px; @@ -651,20 +651,20 @@ ul.red-ui-deploy-dialog-confirm-list { } tr.red-ui-diff-text-header > td:not(.red-ui-diff-flow-diff) { - font-family: $monospace-font; + font-family: var(--red-ui-monospace-font); padding: 5px 10px; text-align: left; - color: $diff-text-header-color; - background: $diff-text-header-background; + color: var(--red-ui-diff-text-header-color); + background: var(--red-ui-diff-text-header-background); height: 30px; vertical-align: middle; - border-top: 1px solid $secondary-border-color; - border-bottom: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); + border-bottom: 1px solid var(--red-ui-secondary-border-color); } tr.red-ui-diff-text-expand td { cursor: pointer; &:hover { - background: $diff-text-header-background; + background: var(--red-ui-diff-text-header-background); } } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss index 1476cf890..78646e0e7 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/dragdrop.scss @@ -18,7 +18,7 @@ position: absolute; top: 0; bottom: 0; left: 0; right: 0; - background: $dnd-background; + background: var(--red-ui-dnd-background); display:table; width: 100%; height: 100%; @@ -30,7 +30,7 @@ vertical-align: middle; text-align: center; font-size: 40px; - color: $dnd-color; + color: var(--red-ui-dnd-color); i { pointer-events: none; font-size: 80px; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss index 4cfc1884e..4323e9342 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss @@ -15,8 +15,8 @@ **/ .red-ui-menu-dropdown { - font-family: $primary-font; - font-size: $primary-font-size; + font-family: var(--red-ui-primary-font); + font-size: var(--red-ui-primary-font-size); position: absolute; top: 100%; width: 230px; @@ -28,9 +28,9 @@ margin-left: 0px !important; padding: 5px 0; list-style: none; - background: $menuBackground; - border: 1px solid $secondary-border-color; - box-shadow: 0 5px 10px $shadow; + background: var(--red-ui-menuBackground); + border: 1px solid var(--red-ui-secondary-border-color); + box-shadow: 0 5px 10px var(--red-ui-shadow); &.pull-right { right: 0; @@ -41,7 +41,7 @@ height: 1px; margin: 9px 1px; overflow: hidden; - background-color: $menuDivider; + background-color: var(--red-ui-menuDivider); } & > li > a, & > li > a:focus { @@ -50,7 +50,7 @@ clear: both; font-weight: normal; line-height: 20px; - color: $menuColor; + color: var(--red-ui-menuColor); white-space: normal !important; outline: none; } @@ -73,19 +73,19 @@ & > .active > a, & > .active > a:hover, & > .active > a:focus { - color: $menuActiveColor; + color: var(--red-ui-menuActiveColor); text-decoration: none; - background-color: $menuActiveBackground; + background-color: var(--red-ui-menuActiveBackground); outline: 0; } & > .disabled > a, & > .disabled > a:hover, & > .disabled > a:focus { - color: $menuDisabledColor; + color: var(--red-ui-menuDisabledColor); .red-ui-popover-key { - color: $menuDisabledColor; - border-color: $menuDisabledColor; + color: var(--red-ui-menuDisabledColor); + border-color: var(--red-ui-menuDisabledColor); } } @@ -133,8 +133,8 @@ padding: 0; font-size: 13px; // float: right; - color: $menuColor; - border-color: $menuColor; + color: var(--red-ui-menuColor); + border-color: var(--red-ui-menuColor); } } @@ -151,9 +151,9 @@ .red-ui-menu-dropdown > li > a:focus, .red-ui-menu-dropdown-submenu:hover > a, .red-ui-menu-dropdown-submenu:focus > a { - color: $menuHoverColor; + color: var(--red-ui-menuHoverColor); text-decoration: none; - background-color: $menuHoverBackground; + background-color: var(--red-ui-menuHoverBackground); } .red-ui-menu-dropdown-submenu { @@ -176,7 +176,7 @@ margin-top: 5px; margin-right: -10px; border-color: transparent; - border-left-color: $menuCaret; + border-left-color: var(--red-ui-menuCaret); border-style: solid; border-width: 5px 0 5px 5px; content: " "; @@ -202,7 +202,7 @@ margin-left: -30px; /* Caret Arrow */ border-color: transparent; - border-right-color: $menuCaret; + border-right-color: var(--red-ui-menuCaret); border-style: solid; border-width: 5px 5px 5px 0; content: " "; @@ -227,13 +227,13 @@ } } .red-ui-menu-dropdown-submenu.disabled > a:before { - border-right-color: $menuCaret; + border-right-color: var(--red-ui-menuCaret); } // Menu NG ul.red-ui-menu:not(.red-ui-menu-dropdown) { - font-family: $primary-font; + font-family: var(--red-ui-primary-font); font-size: 12px; list-style-type: none; padding: 0; @@ -244,14 +244,14 @@ ul.red-ui-menu:not(.red-ui-menu-dropdown) { clear: both; font-weight: normal; line-height: 20px; - color: $menuColor; + color: var(--red-ui-menuColor); white-space: nowrap; text-decoration: none; &:hover,&:focus { - color: $menuHoverColor; + color: var(--red-ui-menuHoverColor); text-decoration: none; - background-color: $menuHoverBackground; + background-color: var(--red-ui-menuHoverBackground); border: none; outline: none; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index 75133df8a..1730b9e35 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss @@ -32,9 +32,9 @@ width: auto; right: -1000px; bottom: 0; - background: $secondary-background; - border-left: 1px solid $secondary-border-color; - border-bottom: 1px solid $primary-border-color; + background: var(--red-ui-secondary-background); + border-left: 1px solid var(--red-ui-secondary-border-color); + border-bottom: 1px solid var(--red-ui-primary-border-color); box-sizing: content-box; } .red-ui-tray.open { @@ -67,8 +67,8 @@ position: relative; box-sizing: border-box; font-weight: bold; - border-bottom: 1px solid $secondary-border-color; - background: $palette-header-background; + border-bottom: 1px solid var(--red-ui-secondary-border-color); + background: var(--red-ui-palette-header-background); &:after { content: ""; display: table; @@ -88,8 +88,8 @@ height: 26px; line-height: 26px; &.toggle:not(.selected) { - color: $workspace-button-color-selected !important; - background: $workspace-button-background-active; + color: var(--red-ui-workspace-button-color-selected) !important; + background: var(--red-ui-workspace-button-background-active); } } @@ -116,8 +116,8 @@ } .red-ui-tray-titlebar { - color: $header-text-color; - border-bottom: 1px solid $secondary-border-color; + color: var(--red-ui-header-text-color); + border-bottom: 1px solid var(--red-ui-secondary-border-color); padding: 8px; } .red-ui-editor ul.red-ui-tray-breadcrumbs { @@ -131,7 +131,7 @@ margin:0; &:not(:last-child) { - color: $workspace-button-color; + color: var(--red-ui-workspace-button-color); font-weight: normal; &:after { @@ -149,10 +149,10 @@ bottom: 0px; width: 7px; left: -9px; - background-color: $primary-background; + background-color: var(--red-ui-primary-background); cursor: col-resize; - border-left: 1px solid $primary-border-color; - box-shadow: -1px 0 6px $shadow; + border-left: 1px solid var(--red-ui-primary-border-color); + box-shadow: -1px 0 6px var(--red-ui-shadow); &:before { content: ''; @@ -167,11 +167,11 @@ mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - background-color: $grip-color; + background-color: var(--red-ui-grip-color); } &.red-ui-tray-resize-maximised { - background: $primary-background; + background: var(--red-ui-primary-background); cursor: default; } } @@ -182,10 +182,10 @@ button.red-ui-tray-resize-button { height: 37px; line-height: 35px; border: none; - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); margin: 0; - background: $primary-background; - color: $workspace-button-color; + background: var(--red-ui-primary-background); + color: var(--red-ui-workspace-button-color); } .red-ui-editor .red-ui-tray { @@ -203,16 +203,16 @@ button.red-ui-tray-resize-button { } .input-error { - border-color: $form-input-border-error-color !important; + border-color: var(--red-ui-form-input-border-error-color) !important; } .input-updated { - border-color: $node-selected-color !important; + border-color: var(--red-ui-node-selected-color) !important; } .form-row { clear: both; - color: $form-text-color; + color: var(--red-ui-form-text-color); margin-bottom:12px; } .form-row label { @@ -223,10 +223,10 @@ button.red-ui-tray-resize-button { width:70%; } .form-tips { - background: $form-tips-background; + background: var(--red-ui-form-tips-background); padding: 8px; border-radius: 2px; - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); max-width: 450px; } .form-tips code { @@ -238,7 +238,7 @@ button.red-ui-tray-resize-button { } .form-warning { - border-color: $text-color-error; + border-color: var(--red-ui-text-color-error); } } @@ -255,11 +255,11 @@ button.red-ui-tray-resize-button { } } .red-ui-editor-text-container { - border:1px solid $tertiary-border-color; + border:1px solid var(--red-ui-tertiary-border-color); border-radius:5px; overflow: hidden; - font-size: $primary-font-size !important; - font-family: $monospace-font !important; + font-size: var(--red-ui-primary-font-size !important); + font-family: var(--red-ui-monospace-font !important); height: 100%; &.red-ui-editor-text-container-toolbar { @@ -302,7 +302,7 @@ button.red-ui-button-small #red-ui-editor-config-scope-warning { display: inline-block; margin-right: 5px; - color: $text-color-warning; + color: var(--red-ui-text-color-warning); vertical-align: middle; } #red-ui-editor-config-scope { @@ -358,18 +358,18 @@ button.red-ui-button-small padding: 20px 20px 10px; &:last-child { padding-top: 60px; - background: $primary-background; + background: var(--red-ui-primary-background); } } } .red-ui-editor-type-markdown-panel-preview { padding: 10px; - border:1px solid $secondary-border-color; + border:1px solid var(--red-ui-secondary-border-color); border-radius:5px; height: calc(100% - 21px); overflow-y: scroll; - background: $secondary-background; + background: var(--red-ui-secondary-background); } #red-ui-clipboard-hidden { @@ -402,7 +402,7 @@ button.red-ui-button-small span { padding-left: 50px; width: 100px; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } } @@ -427,14 +427,14 @@ button.red-ui-button.red-ui-editor-node-appearance-button { .red-ui-group-layout-picker { padding: 5px; - background: $secondary-background; + background: var(--red-ui-secondary-background); } .red-ui-group-layout-picker-cell-text { position: absolute; width: 14px; height: 2px; - border-top: 2px solid $secondary-text-color; - border-bottom: 2px solid $secondary-text-color; + border-top: 2px solid var(--red-ui-secondary-text-color); + border-bottom: 2px solid var(--red-ui-secondary-text-color); margin: 2px; &.red-ui-group-layout-text-pos-nw { top: 0; left: 0; } @@ -451,7 +451,7 @@ button.red-ui-button.red-ui-editor-node-appearance-button { background-color: #FFF; background-size: 100% 100%; background-position: 0 0, 50% 50%; - background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent); + background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent); border: none; } } @@ -475,17 +475,17 @@ button.red-ui-group-layout-picker-none { width: 100%; margin-bottom: 0; border: none; - border-bottom: 1px solid $form-input-border-color; + border-bottom: 1px solid var(--red-ui-form-input-border-color); } small { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); margin-left: 5px; margin-right: 4px; display: inline-block; min-width: 35px; text-align: right; } - background: $primary-background; + background: var(--red-ui-primary-background); } .red-ui-editor-node-appearance-button { .red-ui-search-result-node { @@ -496,7 +496,7 @@ button.red-ui-group-layout-picker-none { padding: 0; border-style: solid; border-width: 1px; - border-color: $secondary-border-color; + border-color: var(--red-ui-secondary-border-color); } .red-ui-color-picker-swatch { position: absolute; @@ -509,7 +509,7 @@ button.red-ui-group-layout-picker-none { background-color: #FFF; background-size: 100% 100%; background-position: 0 0, 50% 50%; - background-image: linear-gradient(45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, $secondary-border-color 45%, $secondary-border-color 55%, transparent 55%, transparent) + background-image: linear-gradient(45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent),linear-gradient(-45deg, transparent 45%, var(--red-ui-secondary-border-color) 45%, var(--red-ui-secondary-border-color) 55%, transparent 55%, transparent) } .red-ui-search-result-node .red-ui-color-picker-cell-none { border-radius: 4px; @@ -536,7 +536,7 @@ button.red-ui-group-layout-picker-none { top:0;right:0;left:0;bottom:0; background-image:linear-gradient(90deg, transparent 0%, #f00 100%); background-size: 100% 100%; - border: 1px solid $primary-border-color; + border: 1px solid var(--red-ui-primary-border-color); } div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { @@ -547,9 +547,9 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { width: 10px; height: 22px; padding: 0; - border: 1px solid $primary-border-color; + border: 1px solid var(--red-ui-primary-border-color); border-radius: 1px; - background: $secondary-background; + background: var(--red-ui-secondary-background); box-sizing: border-box; } .red-ui-icon-picker { @@ -567,10 +567,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { position: relative; &.red-ui-icon-list-dark { .red-ui-palette-icon-fa { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } .red-ui-palette-icon-container { - background: $secondary-background; + background: var(--red-ui-secondary-background); border-radius: 4px; } } @@ -583,10 +583,10 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { border-radius: 4px; &:hover { - background: $list-item-background-hover; + background: var(--red-ui-list-item-background-hover); } &.selected { - background: $list-item-background-selected; + background: var(--red-ui-list-item-background-selected); .red-ui-search-result-node { // border-color: white; } @@ -597,22 +597,22 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { } } .red-ui-icon-list-module { - background: $palette-header-background; + background: var(--red-ui-palette-header-background); font-size: 0.9em; padding: 3px; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); clear: both; i { margin-right: 5px; } } .red-ui-icon-meta { - border-top: 1px solid $secondary-border-color; - background: $tertiary-background; + border-top: 1px solid var(--red-ui-secondary-border-color); + background: var(--red-ui-tertiary-background); height: 24px; span { padding: 4px; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); font-size: 0.9em; line-height: 24px; } @@ -630,7 +630,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { .red-ui-editor-type-json-editor { height: calc(100% - 10px); .red-ui-treeList-container { - background: $secondary-background; + background: var(--red-ui-secondary-background); } .red-ui-treeList-label { padding-top: 0; @@ -647,7 +647,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { vertical-align: middle; } &:hover, &:hover .red-ui-treeList-sublabel-text { - background: $secondary-background-disabled; + background: var(--red-ui-secondary-background-disabled); .red-ui-editor-type-json-editor-item-gutter { > span, > button { display: inline-block; @@ -656,11 +656,11 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { } &.selected { .red-ui-editor-type-json-editor-item-gutter { - background: $secondary-background-hover; + background: var(--red-ui-secondary-background-hover); } &:hover { .red-ui-editor-type-json-editor-item-gutter { - background: $secondary-background-selected; + background: var(--red-ui-secondary-background-selected); } } } @@ -698,7 +698,7 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { border: 2px solid rgba(0,0,0,0); border-radius: 3px; &:not(.red-ui-editor-type-json-editor-label-array-key):hover { - border-color: $list-item-background-hover; + border-color: var(--red-ui-list-item-background-hover); border-style: dashed; } &.readonly { @@ -712,8 +712,8 @@ div.red-ui-button-small.red-ui-color-picker-opacity-slider-handle { height: 100%; line-height: 35px; - color: $tertiary-text-color; - background: $secondary-background-disabled; + color: var(--red-ui-tertiary-text-color); + background: var(--red-ui-secondary-background-disabled); > span { display: inline-block; height: 35px; @@ -755,7 +755,7 @@ button.red-ui-toggleButton.toggle { } >div:first-child { font-size: 0.9em; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); margin: 3px 0 -4px; >div { padding-left: 3px; @@ -767,15 +767,15 @@ button.red-ui-toggleButton.toggle { line-height: 30px; display: inline-block; box-sizing: border-box; - // border-left: 2px dashed $secondary-border-color; - // border-bottom: 2px dashed $secondary-border-color; - // border: 1px dashed $secondary-border-color; + // border-left: 2px dashed var(--red-ui-secondary-border-color); + // border-bottom: 2px dashed var(--red-ui-secondary-border-color); + // border: 1px dashed var(--red-ui-secondary-border-color); border-right: none; &:not(:first-child) { padding: 3px; } // &:last-child { - // border-right: 1px dashed $secondary-border-color; + // border-right: 1px dashed var(--red-ui-secondary-border-color); // } .placeholder-input { position: relative; @@ -800,8 +800,8 @@ button.red-ui-toggleButton.toggle { height: 100%; width: 20px; text-align:center; - border-right: 1px solid $secondary-border-color; - background: $tertiary-background; + border-right: 1px solid var(--red-ui-secondary-border-color); + background: var(--red-ui-tertiary-background); } } input[type="checkbox"] { @@ -817,13 +817,13 @@ button.red-ui-toggleButton.toggle { .red-ui-editableList-item-handle { position:relative; top: 0px; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } } >div:nth-child(2) { margin: 4px; height: 32px; - border: 1px dashed $secondary-border-color; + border: 1px dashed var(--red-ui-secondary-border-color); text-align: center; a { display: block; @@ -831,7 +831,7 @@ button.red-ui-toggleButton.toggle { height: 100%; line-height: 32px; &:hover { - background: $secondary-background-hover; + background: var(--red-ui-secondary-background-hover); } i { height: 100%; @@ -851,7 +851,7 @@ button.red-ui-toggleButton.toggle { span.red-ui-editor-subflow-env-lang-icon { position: absolute; display: inline-block; - background: $secondary-background; + background: var(--red-ui-secondary-background); opacity: 0.8; width: 20px; line-height: 32px; @@ -864,12 +864,12 @@ span.red-ui-editor-subflow-env-lang-icon { } .red-ui-editor-subflow-env-input-type { - background: $secondary-background; + background: var(--red-ui-secondary-background); height: 100%; box-sizing: border-box; } .red-ui-editor-subflow-env-input-type-placeholder { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); padding-left: 4px; } @@ -886,7 +886,7 @@ span.red-ui-editor-subflow-env-lang-icon { // border-top: none; // } // &.ui-sortable-helper { -// border: 2px dashed $secondary-border-color; +// border: 2px dashed var(--red-ui-secondary-border-color); // .red-ui-editableList-item-content { // >div { // border: none; @@ -901,15 +901,15 @@ span.red-ui-editor-subflow-env-lang-icon { // >div>div { // display: inline-block; // box-sizing: border-box; -// border-left: 1px dashed $secondary-border-color; -// border-bottom: 1px dashed $secondary-border-color; +// border-left: 1px dashed var(--red-ui-secondary-border-color); +// border-bottom: 1px dashed var(--red-ui-secondary-border-color); // } // >div:first-child { // font-size: 0.9em; // display: grid; // grid-template-columns: 25px auto 20px; // >div { -// border-top: 1px dashed $secondary-border-color; +// border-top: 1px dashed var(--red-ui-secondary-border-color); // padding: 1px; // } // >div:nth-child(3) { @@ -929,9 +929,9 @@ span.red-ui-editor-subflow-env-lang-icon { // // line-height: 30px; // // box-sizing: border-box; // // -// // border-left: 2px dashed $secondary-border-color; +// // border-left: 2px dashed var(--red-ui-secondary-border-color); // border-top: none; -// // border-bottom: 2px dashed $secondary-border-color; +// // border-bottom: 2px dashed var(--red-ui-secondary-border-color); // &:not(:first-child) { // padding: 6px 3px; // } @@ -963,7 +963,7 @@ span.red-ui-editor-subflow-env-lang-icon { // height: 100%; // line-height: 45px; // &:hover { -// background: $secondary-background-hover; +// background: var(--red-ui-secondary-background-hover); // } // } // } @@ -993,11 +993,11 @@ span.red-ui-editor-subflow-env-lang-icon { // } .red-ui-editor-subflow-ui-edit-panel { padding-bottom: 3px; - background: $primary-background; + background: var(--red-ui-primary-background); .red-ui-editableList-border { border: none; border-radius: 0; - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); } .red-ui-editableList-container { } @@ -1005,10 +1005,10 @@ span.red-ui-editor-subflow-env-lang-icon { margin-left: 2px; } .red-ui-editableList-header { - background: $primary-background; + background: var(--red-ui-primary-background); display: grid; grid-template-columns: 50% 50%; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); div:first-child { padding-left: 23px; } @@ -1019,7 +1019,7 @@ span.red-ui-editor-subflow-env-lang-icon { .red-ui-editableList-container { padding: 0 1px; li { - background: $secondary-background; + background: var(--red-ui-secondary-background); // border-bottom: none; padding: 0; .red-ui-editableList-item-content { @@ -1034,14 +1034,14 @@ span.red-ui-editor-subflow-env-lang-icon { margin-bottom: 0; border:none; width: 100%; - border-right: 1px solid $secondary-border-color; + border-right: 1px solid var(--red-ui-secondary-border-color); border-radius: 0; &:focus { - box-shadow: 0 0 0 1px inset $form-input-focus-color; + box-shadow: 0 0 0 1px inset var(--red-ui-form-input-focus-color); } &:first-child { - border-left: 1px solid $secondary-border-color; + border-left: 1px solid var(--red-ui-secondary-border-color); } } button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger { @@ -1131,7 +1131,7 @@ span.red-ui-editor-subflow-env-lang-icon { border-top-left-radius: 4px; border-top-right-radius: 4px; - background: $tertiary-background; + background: var(--red-ui-tertiary-background); padding: 0; >div { display: grid; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss index 2e6de1932..2d4877896 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss @@ -16,14 +16,14 @@ .nr-ui-view-lasso { stroke-width: 1px; - stroke: $view-lasso-stroke; - fill: $view-lasso-fill; + stroke: var(--red-ui-view-lasso-stroke); + fill: var(--red-ui-view-lasso-fill); stroke-dasharray: 10 5; } .nr-ui-view-slice { stroke-width: 1px; - stroke: $view-lasso-stroke; + stroke: var(--red-ui-view-lasso-stroke); fill: none; stroke-dasharray: 10 5; } @@ -33,11 +33,11 @@ font-style: italic; } .red-ui-flow-node-label-white { - fill: $view-background !important; + fill: var(--red-ui-view-background) !important; } .red-ui-flow-node-label { stroke-width: 0; - fill: $node-label-color; + fill: var(--red-ui-node-label-color); font-size: 14px; pointer-events: none; -webkit-touch-callout: none; @@ -54,7 +54,7 @@ .red-ui-flow-port-label { stroke-width: 0; - fill: $node-port-label-color; + fill: var(--red-ui-node-port-label-color); font-size: 16px; dominant-baseline: middle; text-anchor: middle; @@ -65,7 +65,7 @@ .red-ui-flow-node { - stroke: $node-border; + stroke: var(--red-ui-node-border); cursor: move; stroke-width: 1; } @@ -80,7 +80,7 @@ opacity: 0.9; .red-ui-flow-node { stroke-width: 2; - stroke: $node-selected-color !important; + stroke: var(--red-ui-node-selected-color) !important; stroke-dasharray: 10, 4; } } @@ -95,53 +95,53 @@ } &.red-ui-flow-group-active-hovered:not(.red-ui-flow-group-hovered) { .red-ui-flow-group-outline-select { - stroke: $link-link-color; + stroke: var(--red-ui-link-link-color); } } } .red-ui-flow-group-outline { fill: none; - stroke: $node-selected-color; + stroke: var(--red-ui-node-selected-color); stroke-opacity: 0; stroke-width: 12; pointer-events: stroke; } .red-ui-flow-group-outline-select { fill: none; - stroke: $node-selected-color; + stroke: var(--red-ui-node-selected-color); pointer-events: stroke; stroke-opacity: 0; stroke-width: 3; &.red-ui-flow-group-outline-select-background { - stroke: $view-background; + stroke: var(--red-ui-view-background); stroke-width: 6; } } .red-ui-flow-group-body { pointer-events: none; - fill: $group-default-fill; - fill-opacity: $group-default-fill-opacity; + fill: var(--red-ui-group-default-fill); + fill-opacity: var(--red-ui-group-default-fill-opacity); stroke-width: 2; - stroke: $group-default-stroke; - stroke-opacity: $group-default-stroke-opacity; + stroke: var(--red-ui-group-default-stroke); + stroke-opacity: var(--red-ui-group-default-stroke-opacity); } .red-ui-flow-group-label { @include disable-selection; - fill: $group-default-label-color; + fill: var(--red-ui-group-default-label-color); } .red-ui-flow-node-unknown { stroke-dasharray:10,4; - stroke: $node-border-unknown; + stroke: var(--red-ui-node-border-unknown); } .red-ui-flow-node-placeholder { stroke-dasharray:10,4; - stroke: $node-border-placeholder; - fill: $node-background-placeholder; + stroke: var(--red-ui-node-border-placeholder); + fill: var(--red-ui-node-background-placeholder); opacity: 0.5; stroke-width: 2; } @@ -152,19 +152,19 @@ .fa-lg { @include disable-selection; stroke: none; - fill: $node-icon-color; + fill: var(--red-ui-node-icon-color); text-anchor: middle; font-family: FontAwesome; } } .red-ui-flow-node-icon-shade { stroke: none; - fill: $node-icon-background-color-fill; - fill-opacity: $node-icon-background-color-opacity; + fill: var(--red-ui-node-icon-background-color-fill); + fill-opacity: var(--red-ui-node-icon-background-color-opacity); } .red-ui-flow-node-icon-shade-border { - stroke-opacity: $node-icon-border-color-opacity; - stroke: $node-icon-border-color; + stroke-opacity: var(--red-ui-node-icon-border-color-opacity); + stroke: var(--red-ui-node-icon-border-color); stroke-width: 1; } @@ -181,27 +181,27 @@ cursor: pointer; } .red-ui-flow-node-button-background { - fill: $node-background-placeholder; + fill: var(--red-ui-node-background-placeholder); } .red-ui-flow-port { - stroke: $node-border; + stroke: var(--red-ui-node-border); stroke-width: 1; - fill: $node-port-background; + fill: var(--red-ui-node-port-background); cursor: crosshair; } .red-ui-flow-node-error { - fill: $node-status-error-background; - stroke: $node-status-error-border; + fill: var(--red-ui-node-status-error-background); + stroke: var(--red-ui-node-status-error-border); stroke-width:1px; cursor: default; stroke-linejoin: round; stroke-linecap: round; } .red-ui-flow-node-changed { - fill: $node-status-changed-background; - stroke: $node-status-changed-border; + fill: var(--red-ui-node-status-changed-background); + stroke: var(--red-ui-node-status-changed-border); cursor: default; stroke-width:1px; stroke-linejoin: round; @@ -214,13 +214,13 @@ g.red-ui-flow-node-selected { } .red-ui-flow-node,.red-ui-flow-subflow-port { stroke-width: 2; - stroke: $node-selected-color !important; + stroke: var(--red-ui-node-selected-color) !important; } } .red-ui-flow-node-highlighted { - border-color: $node-selected-color !important; + border-color: var(--red-ui-node-selected-color) !important; border-style: dashed !important; - stroke: $node-selected-color; + stroke: var(--red-ui-node-selected-color); stroke-width: 3; stroke-dasharray: 8, 4; } @@ -236,7 +236,7 @@ g.red-ui-flow-node-selected { .red-ui-flow-link-line { stroke-dasharray: 10,8 !important; stroke-width: 2 !important; - stroke: $link-disabled-color; + stroke: var(--red-ui-link-disabled-color); } .red-ui-flow-port { fill-opacity: 1; @@ -254,7 +254,7 @@ g.red-ui-flow-node-selected { &.red-ui-flow-link-line { stroke-dasharray: 10,8 !important; stroke-width: 2 !important; - stroke: $link-disabled-color; + stroke: var(--red-ui-link-disabled-color); } .red-ui-flow-port { fill-opacity: 1; @@ -263,49 +263,49 @@ g.red-ui-flow-node-selected { } @each $current-color in red green yellow blue grey gray { .red-ui-flow-node-status-dot-#{""+$current-color} { - fill: map-get($node-status-colors,$current-color); - stroke: map-get($node-status-colors,$current-color); + fill: var(--red-ui-node-status-colors-#{"" + $current-color}); + stroke: var(--red-ui-node-status-colors-#{"" + $current-color}); } .red-ui-flow-node-status-ring-#{""+$current-color} { - fill: $view-background; - stroke: map-get($node-status-colors,$current-color); + fill: var(--red-ui-view-background); + stroke: var(--red-ui-node-status-colors-#{"" + $current-color}); } } .red-ui-flow-node-status-label { @include disable-selection; stroke-width: 0; - fill: $secondary-text-color; + fill: var(--red-ui-secondary-text-color); font-size:9pt; text-anchor:start; } .red-ui-flow-port-hovered { - stroke: $port-selected-color; - fill: $port-selected-color; + stroke: var(--red-ui-port-selected-color); + fill: var(--red-ui-port-selected-color); } .red-ui-flow-subflow-port { - fill: $node-background-placeholder; - stroke: $node-border; + fill: var(--red-ui-node-background-placeholder); + stroke: var(--red-ui-node-border); } .red-ui-flow-drag-line { - stroke: $node-selected-color !important; + stroke: var(--red-ui-node-selected-color) !important; stroke-width: 3; fill: none; pointer-events: none; } .red-ui-flow-link-line { - stroke: $link-color; + stroke: var(--red-ui-link-color); stroke-width: 3; fill: none; pointer-events: none; } .red-ui-flow-link-link { stroke-width: 2; - stroke: $link-link-color; + stroke: var(--red-ui-link-link-color); fill: none; stroke-dasharray: 25,4; } @@ -314,19 +314,19 @@ g.red-ui-flow-node-selected { } .red-ui-flow-link-port { - fill: $node-link-port-background; - stroke: $link-link-color; + fill: var(--red-ui-node-link-port-background); + stroke: var(--red-ui-link-link-color); stroke-width: 1; } .red-ui-flow-link-group-active .red-ui-flow-link-port { - stroke: $link-link-active-color; + stroke: var(--red-ui-link-link-active-color); } .red-ui-flow-link-group:hover { cursor: pointer; } .red-ui-flow-link-outline { - stroke: $view-background; + stroke: var(--red-ui-view-background); stroke-opacity: 0.4; stroke-width: 5; cursor: crosshair; @@ -334,7 +334,7 @@ g.red-ui-flow-node-selected { pointer-events: none; } .red-ui-flow-link-background { - stroke: $view-background; + stroke: var(--red-ui-view-background); opacity: 0; stroke-width: 20; cursor: crosshair; @@ -345,10 +345,10 @@ g.red-ui-flow-node-selected { } g.red-ui-flow-link-selected path.red-ui-flow-link-line { - stroke: $node-selected-color; + stroke: var(--red-ui-node-selected-color); } g.red-ui-flow-link-unknown path.red-ui-flow-link-line { - stroke: $link-unknown-color; + stroke: var(--red-ui-link-unknown-color); stroke-width: 2; stroke-dasharray: 10, 4; } @@ -364,15 +364,15 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line { pointer-events: none; path:first-child { - fill: $popover-background; - stroke: $popover-background; + fill: var(--red-ui-popover-background); + stroke: var(--red-ui-popover-background); stroke-width: 1; } } .red-ui-flow-port-tooltip-label { stroke-width: 0; - fill: $popover-color; - font-family: $primary-font; + fill: var(--red-ui-popover-color); + font-family: var(--red-ui-primary-font); font-size: 12px; pointer-events: none; -webkit-touch-callout: none; @@ -401,18 +401,18 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line { } } .red-ui-flow-junction-port { - stroke: $node-border; + stroke: var(--red-ui-node-border); stroke-width: 1; - fill: $node-port-background; + fill: var(--red-ui-node-port-background); cursor: crosshair; transition: transform 0.1s; opacity: 0; pointer-events: none; } .red-ui-flow-junction-background { - stroke: $node-border; + stroke: var(--red-ui-node-border); stroke-width: 1; - fill: $node-port-background; + fill: var(--red-ui-node-port-background); cursor: crosshair; transform: scale(1); transition: transform 0.1s; @@ -421,10 +421,10 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line { } } .red-ui-flow-junction-hovered { - stroke: $port-selected-color; - fill: $port-selected-color; + stroke: var(--red-ui-port-selected-color); + fill: var(--red-ui-port-selected-color); } .red-ui-flow-junction.selected .red-ui-flow-junction-background { - stroke: $port-selected-color; - // fill: $port-selected-color; + stroke: var(--red-ui-port-selected-color); + // fill: var(--red-ui-port-selected-color); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss index 022579b27..a281b9265 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/forms.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/forms.scss @@ -99,13 +99,13 @@ margin-bottom: 20px; font-size: 21px; line-height: 40px; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); border: 0; - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); } legend small { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } @@ -125,7 +125,7 @@ button, select, textarea { - font-family: $primary-font; + font-family: var(--red-ui-primary-font); } label { @@ -159,7 +159,7 @@ margin-bottom: 10px; font-size: 14px; line-height: 20px; - color: $form-text-color; + color: var(--red-ui-form-text-color); vertical-align: middle; border-radius: 4px; } @@ -193,8 +193,8 @@ div[contenteditable="true"], .uneditable-input, .placeholder-input { - background-color: $form-input-background; - border: 1px solid $form-input-border-color; + background-color: var(--red-ui-form-input-background); + border: 1px solid var(--red-ui-form-input-border-color); } textarea:focus, @@ -214,7 +214,7 @@ input[type="color"]:focus, div[contenteditable="true"]:focus, .uneditable-input:focus { - border-color: $form-input-focus-color; + border-color: var(--red-ui-form-input-focus-color); outline: 0; outline: thin dotted \9; } @@ -245,8 +245,8 @@ select { width: 220px; - background-color: $form-input-background; - border: 1px solid $form-input-border-color; + background-color: var(--red-ui-form-input-background); + border: 1px solid var(--red-ui-form-input-border-color); } select[multiple], @@ -258,16 +258,16 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { - outline: 2px auto $form-input-focus-color; + outline: 2px auto var(--red-ui-form-input-focus-color); outline-offset: -3px; } .uneditable-input, .uneditable-textarea { - color: $form-text-color-disabled; + color: var(--red-ui-form-text-color-disabled); cursor: not-allowed; - background-color: $form-input-background-disabled; - border-color: $form-input-border-color; + background-color: var(--red-ui-form-input-background-disabled); + border-color: var(--red-ui-form-input-border-color); } .uneditable-input { @@ -282,19 +282,19 @@ input:-moz-placeholder, textarea:-moz-placeholder { - color: $form-placeholder-color; + color: var(--red-ui-form-placeholder-color); } input:-ms-input-placeholder, div[contenteditable="true"]:-ms-input-placeholder, textarea:-ms-input-placeholder { - color: $form-placeholder-color; + color: var(--red-ui-form-placeholder-color); } input::-webkit-input-placeholder, div[contenteditable="true"]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { - color: $form-placeholder-color; + color: var(--red-ui-form-placeholder-color); } .radio, @@ -384,7 +384,7 @@ } label.disabled { - color: $form-text-color-disabled; + color: var(--red-ui-form-text-color-disabled); cursor: default; } @@ -395,8 +395,8 @@ select[readonly], textarea[readonly] { cursor: not-allowed; - color: $form-text-color-disabled; - background-color: $form-input-background-disabled; + color: var(--red-ui-form-text-color-disabled); + background-color: var(--red-ui-form-input-background-disabled); } input[type="radio"][disabled], @@ -410,21 +410,21 @@ div[contenteditable="true"]:invalid, textarea:invalid, select:invalid { - border-color: $form-input-border-error-color; + border-color: var(--red-ui-form-input-border-error-color); } input:focus:invalid, div[contenteditable="true"]:focus:invalid, textarea:focus:invalid, select:focus:invalid { - border-color: $form-input-border-error-color; + border-color: var(--red-ui-form-input-border-error-color); } input:focus:invalid:focus, div[contenteditable="true"]:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { - border-color: $form-input-border-error-color; + border-color: var(--red-ui-form-input-border-error-color); } .input-append, @@ -488,8 +488,8 @@ font-weight: normal; line-height: 20px; text-align: center; - background-color: $form-button-background; - border: 1px solid $form-input-border-color; + background-color: var(--red-ui-form-button-background); + border: 1px solid var(--red-ui-form-input-border-color); } .input-append .add-on, diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss index 697a90729..19c15b015 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss @@ -24,10 +24,10 @@ left: 0; width: 100%; height: 40px; - background: $header-background; + background: var(--red-ui-header-background); box-sizing: border-box; padding: 0px 0px 0px 20px; - color: $header-menu-color; + color: var(--red-ui-header-menu-color); font-size: 14px; span.red-ui-header-logo { @@ -81,17 +81,17 @@ font-size: 20px; padding: 0px 12px; text-decoration: none; - color: $header-menu-color; + color: var(--red-ui-header-menu-color); margin: auto 5px; vertical-align: middle; - border-left: 2px solid $header-background; - border-right: 2px solid $header-background; + border-left: 2px solid var(--red-ui-header-background); + border-right: 2px solid var(--red-ui-header-background); &:hover { - border-color: $header-menu-item-hover; + border-color: var(--red-ui-header-menu-item-hover); } &:active, &.active { - background: $header-button-background-active; + background: var(--red-ui-header-button-background-active); } &:focus { outline: none; @@ -116,18 +116,18 @@ } .red-ui-deploy-button { - background: $deploy-button-background; - color: $deploy-button-color; + background: var(--red-ui-deploy-button-background); + color: var(--red-ui-deploy-button-color); &:hover { - background: $deploy-button-background-hover; + background: var(--red-ui-deploy-button-background-hover); } &:focus { outline: none; } &:active { - background: $deploy-button-background-active; - color: $deploy-button-color-active; + background: var(--red-ui-deploy-button-background-active); + color: var(--red-ui-deploy-button-color-active); } } @@ -149,21 +149,21 @@ padding: 4px 12px; &.disabled { cursor: default; - background: $deploy-button-background-disabled; - color: $deploy-button-color-disabled; + background: var(--red-ui-deploy-button-background-disabled); + color: var(--red-ui-deploy-button-color-disabled); .red-ui-deploy-button-content>img { opacity: 0.3; } &+ #red-ui-header-button-deploy-options { - background: $deploy-button-background-disabled; - color: $deploy-button-color-active; + background: var(--red-ui-deploy-button-background-disabled); + color: var(--red-ui-deploy-button-color-active); } &+ #red-ui-header-button-deploy-options:hover { - background: $deploy-button-background-disabled-hover; + background: var(--red-ui-deploy-button-background-disabled-hover); } &+ #red-ui-header-button-deploy-options:active { - background: $deploy-button-background-disabled; + background: var(--red-ui-deploy-button-background-disabled); } } @@ -174,23 +174,23 @@ .red-ui-deploy-button-group.open { #red-ui-header-button-deploy-options { - background: $header-button-background-active !important; + background: var(--red-ui-header-button-background-active) !important; } } li.open .button { - background: $header-button-background-active; - border-color: $header-button-background-active; + background: var(--red-ui-header-button-background-active); + border-color: var(--red-ui-header-button-background-active); } ul.red-ui-menu-dropdown { - background: $header-menu-background; - border: 1px solid $header-menu-background; + background: var(--red-ui-header-menu-background); + border: 1px solid var(--red-ui-header-menu-background); width: 260px !important; margin-top: 0; li a { - color: $header-menu-color; + color: var(--red-ui-header-menu-color); padding: 3px 10px 3px 40px; img { max-width: 100%; @@ -199,11 +199,11 @@ border: 3px solid transparent; } .red-ui-popover-key { - color: $header-menu-color-disabled !important; - border-color: $header-menu-color-disabled !important; + color: var(--red-ui-header-menu-color-disabled) !important; + border-color: var(--red-ui-header-menu-color-disabled) !important; } &.active img { - border: 3px solid $header-menu-item-border-active; + border: 3px solid var(--red-ui-header-menu-item-border-active); } span.red-ui-menu-label-container { @@ -217,7 +217,7 @@ text-indent: 0px; } span.red-ui-menu-sublabel { - color: $header-menu-sublabel-color; + color: var(--red-ui-header-menu-sublabel-color); font-size: 13px; display: inline-block; text-indent: 0px; @@ -228,13 +228,13 @@ > li > a:focus, > li:hover > a, > li:focus > a { - background: $header-menu-item-hover !important; + background: var(--red-ui-header-menu-item-hover) !important; } li.red-ui-menu-divider { - background: $headerMenuItemDivider; + background: var(--red-ui-headerMenuItemDivider); } li.disabled a { - color: $header-menu-color-disabled; + color: var(--red-ui-header-menu-color-disabled); } > li.disabled > a:hover, > li.disabled > a:focus { @@ -242,7 +242,7 @@ } } .red-ui-menu-dropdown-submenu>a:before { - border-right-color: $headerMenuCaret; + border-right-color: var(--red-ui-headerMenuCaret); } /* Deploy menu customisations */ @@ -250,7 +250,7 @@ width: 300px !important; li a { padding: 10px 30px; - color: $header-menu-heading-color; + color: var(--red-ui-header-menu-heading-color); span.red-ui-menu-label { font-size: 16px; display: inline-block; @@ -263,7 +263,7 @@ } /* User menu customisations */ #usermenu-item-username > .red-ui-menu-label { - color: $header-menu-heading-color; + color: var(--red-ui-header-menu-heading-color); } #red-ui-header-button-user .user-profile { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss index b7278b332..27661c459 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/jquery.scss @@ -16,25 +16,25 @@ .ui-widget { font-size: 14px !important; - font-family: $primary-font; + font-family: var(--red-ui-primary-font); } .ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button { font-size: 14px !important; - font-family: $primary-font; + font-family: var(--red-ui-primary-font); } .ui-widget input, .ui-widget div[contenteditable="true"] { box-shadow: none; } .ui-widget.ui-widget-content { - border: 1px solid $tertiary-border-color; + border: 1px solid var(--red-ui-tertiary-border-color); } .ui-widget-content { - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); } .ui-widget-header { - color: $header-text-color; + color: var(--red-ui-header-text-color); } /* jQuery Theme overrides */ @@ -50,7 +50,7 @@ .ui-dialog { border-radius: 1px; - background: $secondary-background; + background: var(--red-ui-secondary-background); padding: 0; @include component-shadow; } @@ -62,20 +62,20 @@ } .ui-dialog .ui-dialog-titlebar { padding: 10px; - background: $primary-background; + background: var(--red-ui-primary-background); border: none; - border-bottom: 1px solid $primary-border-color; + border-bottom: 1px solid var(--red-ui-primary-border-color); border-radius: 0; } .ui-dialog .ui-dialog-buttonpane.ui-widget-content { - background: $tertiary-background; + background: var(--red-ui-tertiary-background); } .ui-corner-all { border-radius: 1px; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { - background: $primary-background; + background: var(--red-ui-primary-background); } .ui-dialog-no-close .ui-dialog-titlebar-close { display: none; @@ -95,8 +95,8 @@ padding: 6px 14px; margin-right: 8px; border-radius: 2px; - color: $workspace-button-color; - background: $workspace-button-background; + color: var(--red-ui-workspace-button-color); + background: var(--red-ui-workspace-button-background); &.leftButton { float: left; @@ -107,18 +107,18 @@ } &.primary { - border-color: $workspace-button-background-primary; - color: $workspace-button-color-primary !important; - background: $workspace-button-background-primary; + border-color: var(--red-ui-workspace-button-background-primary); + color: var(--red-ui-workspace-button-color-primary) !important; + background: var(--red-ui-workspace-button-background-primary); &:not(.disabled):hover { - border-color: $workspace-button-background-primary-hover; - background: $workspace-button-background-primary-hover; - color: $workspace-button-color-primary !important; + border-color: var(--red-ui-workspace-button-background-primary-hover); + background: var(--red-ui-workspace-button-background-primary-hover); + color: var(--red-ui-workspace-button-color-primary) !important; } &.disabled { - border-color: $form-input-border-color; - color: $workspace-button-color-disabled !important; - background: $workspace-button-background; + border-color: var(--red-ui-form-input-border-color); + color: var(--red-ui-workspace-button-color-disabled) !important; + background: var(--red-ui-workspace-button-background); } } &.disabled { @@ -142,10 +142,10 @@ .ui-spinner { border-radius: 4px; padding: 0; - border: 1px solid $form-input-border-color; + border: 1px solid var(--red-ui-form-input-border-color); } .ui-spinner input { - background: $form-input-background; + background: var(--red-ui-form-input-background); margin: 0 17px 0 0; padding: 6px; border: none; @@ -169,8 +169,8 @@ .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { - border: 1px solid $secondary-border-color; - background: $form-button-background; + border: 1px solid var(--red-ui-secondary-border-color); + background: var(--red-ui-form-button-background); } .ui-state-hover, @@ -180,9 +180,9 @@ html .ui-button.ui-state-disabled:active { .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { - border: 1px solid $secondary-border-color; - background: $workspace-button-background-hover; - color: $workspace-button-color-hover; + border: 1px solid var(--red-ui-secondary-border-color); + background: var(--red-ui-workspace-button-background-hover); + color: var(--red-ui-workspace-button-color-hover); } .ui-state-active, @@ -191,10 +191,10 @@ html .ui-button.ui-state-disabled:active { a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { - border: 1px solid $secondary-border-color; - background: $workspace-button-background-active; + border: 1px solid var(--red-ui-secondary-border-color); + background: var(--red-ui-workspace-button-background-active); font-weight: normal; - color: $workspace-button-color-active; + color: var(--red-ui-workspace-button-color-active); } .ui-state-active .ui-icon, .ui-button:active .ui-icon { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss index 8c4e5a3a8..c11aa0592 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/keyboard.scss @@ -23,9 +23,9 @@ } .keyboard-shortcut-list-header { padding:0 5px 0 5px; - border-bottom: 1px solid $primary-border-color; + border-bottom: 1px solid var(--red-ui-primary-border-color); div { - color: $header-text-color !important; + color: var(--red-ui-header-text-color) !important; } .red-ui-searchBox-container { width: calc(100% - 20px); @@ -49,7 +49,7 @@ } } li:hover { - background: $list-item-background-hover; + background: var(--red-ui-list-item-background-hover); } } .keyboard-shortcut-entry { @@ -78,13 +78,13 @@ width: calc(100% - 160px - 100px - 10px); overflow: hidden; i { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); margin-right: 5px; } } .keyboard-shortcut-entry-scope { width:100px; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); vertical-align: middle; text-align: right; } @@ -94,13 +94,13 @@ } } .keyboard-shortcut-entry-unassigned { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); .keyboard-shortcut-entry-key { font-style: italic; } } .keyboard-shortcut-entry-expanded { - background: $list-item-background-selected; + background: var(--red-ui-list-item-background-selected); .keyboard-shortcut-entry-key { width: 150px; } @@ -115,12 +115,12 @@ } } .help-key { - border: 1px solid $tertiary-border-color; + border: 1px solid var(--red-ui-tertiary-border-color); padding: 4px; border-radius: 3px; - background: $tertiary-background; - font-family: $monospace-font; - box-shadow: $shade-color 1px 1px 1px; + background: var(--red-ui-tertiary-background); + font-family: var(--red-ui-monospace-font); + box-shadow: var(--red-ui-shade-color 1px 1px 1px); } .help-key-block { white-space: nowrap; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/library.scss b/packages/node_modules/@node-red/editor-client/src/sass/library.scss index 0d284ffce..bb651e4ea 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/library.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/library.scss @@ -18,13 +18,13 @@ pre { margin: 10px 0; border: none; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); span { padding: 5px 0; } span.error { padding: 5px; - border: 1px solid $form-input-border-error-color; + border: 1px solid var(--red-ui-form-input-border-error-color); margin: 0 1px; } } @@ -52,16 +52,16 @@ .red-ui-clipboard-dialog-tab-clipboard { textarea { - color: $secondary-text-color-active !important; + color: var(--red-ui-secondary-text-color-active) !important; resize: none; width: 100%; border-radius: 4px; - font-family: $monospace-font !important; + font-family: var(--red-ui-monospace-font !important); font-size: 13px !important; height: 100%; line-height: 1.3em; padding: 6px 10px; - background: $clipboard-textarea-background; + background: var(--red-ui-clipboard-textarea-background); } } @@ -80,7 +80,7 @@ right: 0; bottom: 0; padding: 0; - background: $form-input-background; + background: var(--red-ui-form-input-background); &>div { height: 100%; box-sizing: border-box; @@ -89,7 +89,7 @@ .red-ui-clipboard-dialog-box { height: 400px; position:relative; - border:1px solid $primary-border-color; + border:1px solid var(--red-ui-primary-border-color); } #red-ui-clipboard-dialog-export-tab-library-filename { @@ -111,7 +111,7 @@ .red-ui-clipboard-dialog-tabs-content>div.red-ui-clipboard-dialog-export-tab-library-browser { height: calc(100% - 60px); margin-bottom: 13px; - border-bottom: 1px solid $primary-border-color; + border-bottom: 1px solid var(--red-ui-primary-border-color); box-sizing: border-box; } #red-ui-clipboard-dialog-import-tab-library-browser { @@ -124,7 +124,7 @@ position: relative; height: 100%; .red-ui-treeList-container { - background: $secondary-background; + background: var(--red-ui-secondary-background); border: none; border-radius: 0; li { @@ -149,14 +149,14 @@ #red-ui-library-dialog-save-browser { height: calc(100% - 60px); - border: 1px solid $primary-border-color; + border: 1px solid var(--red-ui-primary-border-color); margin-bottom: 10px; } #red-ui-library-dialog-load-browser { - // border: 1px solid $primary-border-color; + // border: 1px solid var(--red-ui-primary-border-color); } #red-ui-library-dialog-load-panes { - border: 1px solid $primary-border-color; + border: 1px solid var(--red-ui-primary-border-color); } @@ -180,15 +180,15 @@ position: relative; li:not(:first-child) .red-ui-clipboard-dialog-import-conflicts-item-header { - // border-top: 1px solid $secondary-border-color; + // border-top: 1px solid var(--red-ui-secondary-border-color); } } .red-ui-clipboard-dialog-import-conflicts-item-header { - background: $tertiary-background; + background: var(--red-ui-tertiary-background); & > span:first-child { - color: $header-text-color; + color: var(--red-ui-header-text-color); padding-left: 4px; font-size: 12px; } @@ -199,7 +199,7 @@ bottom: 0; right: 0px; text-align: center; - color: $form-text-color; + color: var(--red-ui-form-text-color); .form-row & label { padding: 2px 0; line-height: 23px; @@ -210,7 +210,7 @@ height: 100%; width: 80px; text-align: center; - border-left: 1px solid $secondary-border-color; + border-left: 1px solid var(--red-ui-secondary-border-color); } input[type="checkbox"] { display: inline-block; @@ -265,7 +265,7 @@ span:nth-child(3), span:nth-child(4) { flex-grow: 0; padding-right: 5px; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); font-size: 0.9em; } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss index 9214ea37b..6262597a1 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss @@ -31,33 +31,33 @@ } @mixin component-border { - border: 1px solid $primary-border-color; + border: 1px solid var(--red-ui-primary-border-color); box-sizing: border-box; } @mixin reset-a-style { - color: $workspace-button-color !important; - background: $workspace-button-background; + color: var(--red-ui-workspace-button-color) !important; + background: var(--red-ui-workspace-button-background); text-decoration: none; &.disabled, &:disabled { cursor: default; - color: $workspace-button-color-disabled !important; + color: var(--red-ui-workspace-button-color-disabled) !important; } &:hover, &:focus { text-decoration: none; } - &:not(.disabled):not(:disabled):hover, { - color: $workspace-button-color-hover !important; - background: $workspace-button-background-hover; + &:not(.disabled):not(:disabled):hover { + color: var(--red-ui-workspace-button-color-hover) !important; + background: var(--red-ui-workspace-button-background-hover); } &:not(.disabled):not(:disabled):focus { - color: $workspace-button-color-focus !important; + color: var(--red-ui-workspace-button-color-focus) !important; } &:not(.disabled):not(:disabled):active { - color: $workspace-button-color-active !important; - background: $workspace-button-background-active; + color: var(--red-ui-workspace-button-color-active) !important; + background: var(--red-ui-workspace-button-background-active); text-decoration: none; } } @@ -68,14 +68,14 @@ box-sizing: border-box; display: inline-block; - border: 1px solid $form-input-border-color; + border: 1px solid var(--red-ui-form-input-border-color); text-align: center; margin:0; cursor:pointer; &.selected:not(.disabled):not(:disabled) { - color: $workspace-button-color-selected !important; - background: $workspace-button-background-active; + color: var(--red-ui-workspace-button-color-selected) !important; + background: var(--red-ui-workspace-button-background-active); } .button-group &:not(:first-child) { border-left: none; @@ -108,23 +108,23 @@ } &:focus { - outline: 1px solid $workspace-button-color-focus-outline; + outline: 1px solid var(--red-ui-workspace-button-color-focus-outline); outline-offset: 1px; } &.primary { - border-color: $workspace-button-background-primary; - color: $workspace-button-color-primary !important; - background: $workspace-button-background-primary; + border-color: var(--red-ui-workspace-button-background-primary); + color: var(--red-ui-workspace-button-color-primary) !important; + background: var(--red-ui-workspace-button-background-primary); &.disabled, &.ui-state-disabled { background: none; - color: $workspace-button-color !important; - border-color: $form-input-border-color; + color: var(--red-ui-workspace-button-color) !important; + border-color: var(--red-ui-form-input-border-color); } &:not(.disabled):not(.ui-button-disabled):hover { - border-color: $workspace-button-background-primary-hover; - background: $workspace-button-background-primary-hover; - color: $workspace-button-color-primary !important; + border-color: var(--red-ui-workspace-button-background-primary-hover); + background: var(--red-ui-workspace-button-background-primary-hover); + color: var(--red-ui-workspace-button-color-primary) !important; } } &.secondary { @@ -151,7 +151,7 @@ margin-bottom: 1px; &.selected:not(.disabled):not(:disabled) { border-bottom-width: 2px; - border-bottom-color: $form-input-border-selected-color; + border-bottom-color: var(--red-ui-form-input-border-selected-color); margin-bottom: 0; cursor: default; } @@ -166,7 +166,7 @@ padding: 6px 14px; margin-right: 8px; &:not(.disabled):hover { - //color: $workspace-button-color; + //color: var(--red-ui-workspace-button-color); } &.disabled { background: none; @@ -187,8 +187,8 @@ } @mixin component-footer { - border-top: 1px solid $primary-border-color; - background: $primary-background; + border-top: 1px solid var(--red-ui-primary-border-color); + background: var(--red-ui-primary-background); text-align: right; position: absolute; bottom: 0; @@ -231,7 +231,7 @@ } @mixin component-shadow { - box-shadow: 1px 1px 4px $shadow; + box-shadow: 1px 1px 4px var(--red-ui-shadow); } @@ -241,7 +241,7 @@ left: 0; bottom: 0; right: 0; - background: $shade-color; + background: var(--red-ui-shade-color); z-index: 5; } .red-ui-shade { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss index 52e8509b3..efae432b2 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/notifications.scss @@ -27,10 +27,10 @@ position: relative; padding: 8px 18px 0px; margin-bottom: 4px; - box-shadow: 0 1px 1px 1px $shadow; - background-color: $secondary-background; - color: $primary-text-color; - border: 1px solid $notification-border-default; + box-shadow: 0 1px 1px 1px var(--red-ui-shadow); + background-color: var(--red-ui-secondary-background); + color: var(--red-ui-primary-text-color); + border: 1px solid var(--red-ui-notification-border-default); border-left-width: 16px; overflow: hidden; .ui-dialog-buttonset { @@ -50,13 +50,13 @@ } .red-ui-notification-success { - border-color: $notification-border-success; + border-color: var(--red-ui-notification-border-success); } .red-ui-notification-warning { - border-color: $notification-border-warning; + border-color: var(--red-ui-notification-border-warning); } .red-ui-notification-error { - border-color: $notification-border-error; + border-color: var(--red-ui-notification-border-error); } .red-ui-notification-compact { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss index 34fbd3e07..ca387782b 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss @@ -27,7 +27,7 @@ left:0; padding: 0; box-sizing:border-box; - background: $secondary-background; + background: var(--red-ui-secondary-background); .red-ui-editableList-container { border: none; @@ -37,27 +37,27 @@ li { // border: none; - // border-top: 1px solid $primary-border-color; + // border-top: 1px solid var(--red-ui-primary-border-color); padding: 0px; .red-ui-button { min-width: 60px; } .disabled { - // background: $secondary-background-inactive;//f3f3f3; + // background: var(--red-ui-secondary-background-inactive;//f3f3f3); .red-ui-palette-module-name { font-style: italic; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } .red-ui-palette-module-version { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } .red-ui-palette-module-errors .fa-warning { opacity: 0.5; } ul.red-ui-palette-module-error-list li { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } @@ -66,7 +66,7 @@ padding: 12px 16px; } &:last-child { - // border-bottom: 1px solid $primary-border-color; + // border-bottom: 1px solid var(--red-ui-primary-border-color); } } @@ -79,14 +79,14 @@ bottom:0 } .red-ui-palette-editor-toolbar { - background: $primary-background; + background: var(--red-ui-primary-background); box-sizing: border-box; padding: 8px 10px; - border-bottom: 1px solid $primary-border-color; + border-bottom: 1px solid var(--red-ui-primary-border-color); text-align: right; } .red-ui-palette-module-shade-status { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } .red-ui-palette-module-updated { margin-left: 10px; @@ -98,7 +98,7 @@ .red-ui-palette-module-description { margin-left: 20px; font-size: 0.9em; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } .red-ui-palette-module-link { } @@ -120,7 +120,7 @@ } } .red-ui-palette-module-set { - border:1px solid $secondary-border-color; + border:1px solid var(--red-ui-secondary-border-color); border-radius: 0; padding: 5px; position: relative; @@ -138,7 +138,7 @@ } .red-ui-palette-module-type { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); padding-left: 5px; font-size: 0.9em; @include enable-selection; @@ -150,8 +150,8 @@ border-radius: 3px; vertical-align: middle; margin-right: 5px; - background: $primary-background; - border: 1px dashed $secondary-border-color; + background: var(--red-ui-primary-background); + border: 1px dashed var(--red-ui-secondary-border-color); } .red-ui-palette-module-set-button-group { position: absolute; @@ -160,35 +160,35 @@ } .red-ui-palette-module-set-disabled { - background: $list-item-background-disabled; + background: var(--red-ui-list-item-background-disabled); .red-ui-palette-module-type { - color: $secondary-text-color-disabled-active; + color: var(--red-ui-secondary-text-color-disabled-active); } } .red-ui-palette-module-more { padding: 0 !important; margin-top: 10px; margin-bottom: 10px; - background: $tab-background-inactive; + background: var(--red-ui-tab-background-inactive); a { display: block; text-align: center; padding: 12px 8px; - color: $text-color-code; + color: var(--red-ui-text-color-code); &:hover { text-decoration: none; - background: $tab-background-hover; + background: var(--red-ui-tab-background-hover); } } } } .red-ui-palette-module-meta { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); position: relative; &.disabled { - color: $secondary-text-color-disabled; + color: var(--red-ui-secondary-text-color-disabled); } .fa { @@ -198,7 +198,7 @@ } } .red-ui-palette-module-name { - color: $primary-text-color; + color: var(--red-ui-primary-text-color); white-space: nowrap; @include enable-selection; } @@ -216,7 +216,7 @@ } } .red-ui-palette-module-meta .fa-warning { - color: $text-color-warning; + color: var(--red-ui-text-color-warning); } ul.red-ui-palette-module-error-list { display: inline-block; @@ -264,9 +264,9 @@ button.red-ui-palette-editor-upload-button { right: 0; top: 44px; padding: 20px; - background: $secondary-background; - border-bottom: 1px $secondary-border-color solid; - box-shadow: 1px 1px 4px $shadow; + background: var(--red-ui-secondary-background); + border-bottom: 1px var(--red-ui-secondary-border-color solid); + box-shadow: 1px 1px 4px var(--red-ui-shadow); .placeholder-input { width: calc(100% - 180px); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index 800f34079..0d123918a 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -20,7 +20,7 @@ top: 0px; bottom: 0px; left:0px; - background: $primary-background; + background: var(--red-ui-primary-background); width: 180px; text-align: center; @include disable-selection; @@ -55,26 +55,26 @@ .red-ui-palette-search { position: relative; overflow: hidden; - background: $secondary-background; + background: var(--red-ui-secondary-background); text-align: center; height: 35px; padding: 3px; - border-bottom: 1px solid $primary-border-color; + border-bottom: 1px solid var(--red-ui-primary-border-color); box-sizing:border-box; } .red-ui-palette-category { - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); } .red-ui-palette-content { - background: $palette-content-background; + background: var(--red-ui-palette-content-background); padding: 3px; } .red-ui-palette-header { position: relative; - background: $palette-header-background; - color: $palette-header-color; + background: var(--red-ui-palette-header-background); + color: var(--red-ui-palette-header-color); cursor: pointer; text-align: left; padding: 9px; @@ -83,7 +83,7 @@ overflow: hidden; user-select: none; &:hover { - background: $palette-header-background !important; + background: var(--red-ui-palette-header-background) !important; } } .red-ui-palette-header > i { @@ -106,7 +106,7 @@ clear: both; } .red-ui-palette-label { - color: $node-label-color; + color: var(--red-ui-node-label-color); font-size: 13px; margin: 4px 0 4px 32px; line-height: 20px; @@ -121,11 +121,11 @@ .red-ui-palette-node { // display: inline-block; cursor: move; - background: $secondary-background; + background: var(--red-ui-secondary-background); margin: 10px auto; height: 25px; border-radius: 5px; - border: 1px solid $node-border; + border: 1px solid var(--red-ui-node-border); background-position: 5% 50%; background-repeat: no-repeat; width: 120px; @@ -141,7 +141,7 @@ } .red-ui-palette-node:hover { border-color: transparent; - box-shadow: 0 0 0 2px $node-selected-color; + box-shadow: 0 0 0 2px var(--red-ui-node-selected-color); } .red-ui-palette-port { position: absolute; @@ -149,11 +149,11 @@ left: -5px; box-sizing: border-box; -moz-box-sizing: border-box; - background: $node-port-background; + background: var(--red-ui-node-port-background); border-radius: 3px; width: 10px; height: 10px; - border: 1px solid $node-border; + border: 1px solid var(--red-ui-node-border); } .red-ui-palette-port-output { left:auto; @@ -161,7 +161,7 @@ } .red-ui-palette-node:hover .red-ui-palette-port { - background-color: $node-port-background-hover; + background-color: var(--red-ui-node-port-background-hover); } .red-ui-palette-icon-container { position: absolute; @@ -170,14 +170,14 @@ bottom:0; left:0; width: 30px; - border-right: 1px solid $node-icon-background-color; - background-color: $node-icon-background-color; + border-right: 1px solid var(--red-ui-node-icon-background-color); + background-color: var(--red-ui-node-icon-background-color); } .red-ui-palette-icon-container-right { left: auto; right: 0; border-right: none; - border-left: 1px solid $node-icon-background-color; + border-left: 1px solid var(--red-ui-node-icon-background-color); } .red-ui-palette-icon { display: inline-block; @@ -198,7 +198,7 @@ background: none; } .red-ui-palette-icon-fa { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); font-size: 18px; } } @@ -249,12 +249,12 @@ // width: 30px; // height: 25px; border-radius: 3px; - border: 1px solid $node-border; + border: 1px solid var(--red-ui-node-border); background-position: 5% 50%; background-repeat: no-repeat; background-size: contain; position: relative; - background-color: $node-icon-background-color; + background-color: var(--red-ui-node-icon-background-color); text-align: center; .red-ui-palette-icon { @@ -278,7 +278,7 @@ background: none; } .red-ui-palette-icon-fa { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); font-size: 16px; } } @@ -318,5 +318,5 @@ .red-ui-node-label { white-space: nowrap; margin-left: 4px; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss index e820992b4..c782b341b 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/panels.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/panels.scss @@ -35,12 +35,12 @@ .red-ui-panels-separator { flex: 0 0 auto; - border-top: 1px solid $secondary-border-color; - border-bottom: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); + border-bottom: 1px solid var(--red-ui-secondary-border-color); height: 7px; box-sizing: border-box; cursor: ns-resize; - background-color: $primary-background; + background-color: var(--red-ui-primary-background); &:before { content: ''; @@ -55,7 +55,7 @@ mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - background-color: $grip-color; + background-color: var(--red-ui-grip-color); } } @@ -80,14 +80,14 @@ vertical-align: top; border-top: none; border-bottom: none; - border-left: 1px solid $secondary-border-color; - border-right: 1px solid $secondary-border-color; + border-left: 1px solid var(--red-ui-secondary-border-color); + border-right: 1px solid var(--red-ui-secondary-border-color); height: 100%; width: 7px; display: inline-block; cursor: ew-resize; - background-color: $primary-background; - + background-color: var(--red-ui-primary-background); + &:before { content: ''; display: block; @@ -101,7 +101,7 @@ mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - background-color: $grip-color; + background-color: var(--red-ui-grip-color); } } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss index 2eb167ef4..7e504b59b 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss @@ -25,7 +25,7 @@ color: var(--red-ui-popover-color); border-radius: 4px; z-index: 1000; - font-family: $primary-font; + font-family: var(--red-ui-primary-font); font-size: 14px; line-height: 1.4em; @include component-shadow; @@ -146,7 +146,7 @@ .red-ui-popover-key { font-size: 11px; - font-family: $monospace-font; + font-family: var(--red-ui-monospace-font); margin-left: 3px; border: 1px solid var(--red-ui-popover-color); border-radius:3px; @@ -163,42 +163,42 @@ color: var(--red-ui-popover-color) !important; } a:focus { - outline: 1px solid $form-input-focus-color; + outline: 1px solid var(--red-ui-form-input-focus-color); } } .red-ui-popover a.red-ui-button, .red-ui-popover button.red-ui-button { &:not(.primary) { - border-color: $popover-button-border-color; + border-color: var(--red-ui-popover-button-border-color); background: var(--red-ui-popover-background); color: var(--red-ui-popover-color) !important; } &:not(.primary):not(.disabled):not(.ui-button-disabled):hover { - border-color: $popover-button-border-color-hover; + border-color: var(--red-ui-popover-button-border-color-hover); } &.primary { - border-color: $popover-button-border-color; + border-color: var(--red-ui-popover-button-border-color); } &.primary:not(.disabled):not(.ui-button-disabled):hover { - border-color: $popover-button-border-color-hover; + border-color: var(--red-ui-popover-button-border-color-hover); } } .red-ui-popover code { border: none; background: none; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } .red-ui-popover-panel { @include component-shadow; - font-family: $primary-font; - font-size: $primary-font-size; + font-family: var(--red-ui-primary-font); + font-size: var(--red-ui-primary-font-size); position: absolute; box-sizing: border-box; - border: 1px solid $primary-border-color; - background: $secondary-background; + border: 1px solid var(--red-ui-primary-border-color); + background: var(--red-ui-secondary-background); z-index: 2000; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss index 681e7b3f9..0019ba516 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss @@ -29,7 +29,7 @@ overflow-y: scroll; } .red-ui-sidebar-vc-shade { - background: $primary-background; + background: var(--red-ui-primary-background); } .red-ui-projects-edit-form form { @@ -37,7 +37,7 @@ .form-row { margin-bottom: 15px; label { - color: $primary-text-color; + color: var(--red-ui-primary-text-color); width: 100%; display: block; &.red-ui-projects-edit-form-inline-label { @@ -57,7 +57,7 @@ } .red-ui-projects-edit-form-sublabel { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); text-align: right; margin-bottom: -15px; font-weight: normal; @@ -76,7 +76,7 @@ font-size: 1.4em; padding: 10px; min-height: 40px; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); } .red-ui-projects-dialog-screen-start-body { min-height: 300px; @@ -132,21 +132,21 @@ margin-left: -1px; padding: 15px; margin-top: -15px; - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); border-radius: 3px; } .red-ui-projects-dialog-credentials-box-left { width: 220px; > div { padding: 7px 8px 3px 8px; - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; - border-right-color: $form-background; + border-right-color: var(--red-ui-form-background); &.disabled { - border-color: $form-background; - border-right-color:$secondary-border-color; + border-color: var(--red-ui-form-background); + border-right-color:var(--red-ui-secondary-border-color); } i { font-size: 1.4em; @@ -173,7 +173,7 @@ } .red-ui-projects-dialog-project-list-container { - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); border-radius: 2px; display: flex; flex-direction: column; @@ -197,43 +197,43 @@ .red-ui-projects-dialog-project-list-entry { padding: 12px 0; - color: $list-item-color; - background: $list-item-background; - border-left: 3px solid $list-item-background; - border-right: 3px solid $list-item-background; + color: var(--red-ui-list-item-color); + background: var(--red-ui-list-item-background); + border-left: 3px solid var(--red-ui-list-item-background); + border-right: 3px solid var(--red-ui-list-item-background); &.projects-list-entry-current { &:not(.selectable) { - color: $form-text-color; - background: $list-item-background-selected; - border-left-color:$list-item-border-selected; - border-right-color:$list-item-border-selected; + color: var(--red-ui-form-text-color); + background: var(--red-ui-list-item-background-selected); + border-left-color:var(--red-ui-list-item-border-selected); + border-right-color:var(--red-ui-list-item-border-selected); } i { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } } &.selectable { cursor: pointer; &:hover:not(.selected) { - color: $form-text-color; - background: $list-item-background-hover; - border-left-color:$list-item-background-hover; - border-right-color:$list-item-background-hover; + color: var(--red-ui-form-text-color); + background: var(--red-ui-list-item-background-hover); + border-left-color:var(--red-ui-list-item-background-hover); + border-right-color:var(--red-ui-list-item-background-hover); } } .red-ui-projects-dialog-project-list-entry-icon { i { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); font-size: 2em; } } &.selected { - color: $form-text-color; - background: $list-item-background-selected; - border-left-color:$list-item-border-selected; - border-right-color:$list-item-border-selected; + color: var(--red-ui-form-text-color); + background: var(--red-ui-list-item-background-selected); + border-left-color:var(--red-ui-list-item-border-selected); + border-right-color:var(--red-ui-list-item-border-selected); } span { display: inline-block; @@ -249,7 +249,7 @@ float: right; margin-right: 20px; font-size: 0.9em; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); padding-top: 4px; } .red-ui-projects-dialog-project-list-entry-tools { @@ -257,7 +257,7 @@ top: 16px; right: 30px; display: none; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } &:hover { .red-ui-projects-dialog-project-list-entry-tools { @@ -274,7 +274,7 @@ width: 1000px; overflow: hidden; padding: 5px 20px; - background: $secondary-background; + background: var(--red-ui-secondary-background); transition: left 0.4s; white-space: nowrap; > span { @@ -289,7 +289,7 @@ position: relative; } .red-ui-projects-dialog-screen-create-type.red-ui-button.toggle.selected:not(.disabled):not(:disabled) { - color: $secondary-text-color-active !important; + color: var(--red-ui-secondary-text-color-active) !important; } .red-ui-projects-dialog-screen-input-status { text-align: right; @@ -298,7 +298,7 @@ right: 8px; width: 70px; height: 30px; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } .red-ui-sidebar-vc { @@ -338,17 +338,17 @@ } .red-ui-palette-module-unused { & > * { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } } .red-ui-palette-module-unknown { - border: 1px dashed $secondary-border-color; - background: $secondary-background-inactive; + border: 1px dashed var(--red-ui-secondary-border-color); + background: var(--red-ui-secondary-background-inactive); } .red-ui-palette-module-not-installed { - border: 1px dashed $text-color-warning; + border: 1px dashed var(--red-ui-text-color-warning); i.fa-warning { - color: $text-color-warning; + color: var(--red-ui-text-color-warning); } } } @@ -365,11 +365,11 @@ } .red-ui-sidebar-vc { .red-ui-editableList-container { - background: $tertiary-background; + background: var(--red-ui-tertiary-background); padding: 0; li { padding:0; - background: $secondary-background; + background: var(--red-ui-secondary-background); } } .red-ui-editableList-border { @@ -384,7 +384,7 @@ box-sizing: border-box; transition: height 0.2s ease-in-out; &:first-child { - // border-bottom: 1px solid $primary-border-color; + // border-bottom: 1px solid var(--red-ui-primary-border-color); } } .red-ui-sidebar-vc-merging { @@ -399,7 +399,7 @@ right:0; height:0; transition: height 0.2s ease-in-out; - background: $tertiary-background; + background: var(--red-ui-tertiary-background); box-sizing: border-box; overflow: hidden; &.red-ui-sidebar-vc-slide-box-top { @@ -408,20 +408,20 @@ left: auto; width: 100%; max-width: 280px; - border-left: 1px solid $primary-border-color; - border-right: 1px solid $primary-border-color; - border-bottom: 1px solid $primary-border-color; - box-shadow: 1px 1px 4px $shadow; + border-left: 1px solid var(--red-ui-primary-border-color); + border-right: 1px solid var(--red-ui-primary-border-color); + border-bottom: 1px solid var(--red-ui-primary-border-color); + box-shadow: 1px 1px 4px var(--red-ui-shadow); - color: $primary-text-color; - background: $tertiary-background; + color: var(--red-ui-primary-text-color); + background: var(--red-ui-tertiary-background); padding: 10px; box-sizing: border-box; } &.red-ui-sidebar-vc-slide-box-bottom { bottom: 0px; - border-top: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); } textarea { @@ -437,15 +437,15 @@ .red-ui-projects-branch-list { position: relative; .red-ui-searchBox-container { - border-top: 1px solid $secondary-border-color; - border-left: 1px solid $secondary-border-color; - border-right: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); + border-left: 1px solid var(--red-ui-secondary-border-color); + border-right: 1px solid var(--red-ui-secondary-border-color); border-top-left-radius: 2px; border-top-right-radius: 2px; overflow: hidden; } .red-ui-editableList { - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; & > .red-ui-editableList-border { @@ -456,7 +456,7 @@ padding: 0; li { padding: 0; - background: $secondary-background; + background: var(--red-ui-secondary-background); } } } @@ -483,23 +483,23 @@ .red-ui-sidebar-vc-branch-list-entry { padding: 5px 8px; margin: 0 1px; - color: $list-item-color; - background: $list-item-background; - border-left: 2px solid $list-item-background; - border-right: 2px solid $list-item-background; + color: var(--red-ui-list-item-color); + background: var(--red-ui-list-item-background); + border-left: 2px solid var(--red-ui-list-item-background); + border-right: 2px solid var(--red-ui-list-item-background); cursor: pointer; &.selected { - border-left-color:$list-item-border-selected; - border-right-color:$list-item-border-selected; + border-left-color:var(--red-ui-list-item-border-selected); + border-right-color:var(--red-ui-list-item-border-selected); } i { width: 16px; text-align: center} &.input-error { cursor: default; } &:not(.input-error):hover { - background: $list-item-background-hover; - border-left-color:$list-item-border-selected; - border-right-color:$list-item-border-selected; + background: var(--red-ui-list-item-background-hover); + border-left-color:var(--red-ui-list-item-border-selected); + border-right-color:var(--red-ui-list-item-border-selected); } span { margin-left: 5px; @@ -507,7 +507,7 @@ span.current { float: right; font-size: 0.8em; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } } @@ -542,7 +542,7 @@ } &.red-ui-help-info-node { text-align: center; - background: $list-item-background; + background: var(--red-ui-list-item-background); white-space: normal; height: auto; } @@ -556,63 +556,63 @@ overflow: hidden; cursor: pointer; &:hover { - background: $secondary-background-hover; + background: var(--red-ui-secondary-background-hover); } } .red-ui-sidebar-vc-commit-more { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); text-align: center; padding: 10px; font-style: italic; } .red-ui-sidebar-vc-commit-sha { float: right; - font-family: $monospace-font; - color: $vcCommitShaColor; + font-family: var(--red-ui-monospace-font); + color: var(--red-ui-vcCommitShaColor); display: inline-block; font-size: 0.85em; margin-left: 5px; } .red-ui-sidebar-vc-commit-subject { - color: $primary-text-color; + color: var(--red-ui-primary-text-color); } .red-ui-sidebar-vc-commit-refs { min-height: 22px; } .red-ui-sidebar-vc-commit-ref { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); font-size: 0.7em; - border: 1px solid $tertiary-border-color; + border: 1px solid var(--red-ui-tertiary-border-color); border-radius: 10px; padding: 2px 5px; margin-right: 5px; } .red-ui-sidebar-vc-commit-date { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); font-size: 0.85em; } .red-ui-sidebar-vc-commit-user { float: right; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); font-size: 0.85em; } .red-ui-sidebar-vc-commit-head { } .red-ui-sidebar-vc-change-header { - color: $primary-text-color; - background: $tertiary-background; + color: var(--red-ui-primary-text-color); + background: var(--red-ui-tertiary-background); padding: 4px 10px; height: 30px; box-sizing: border-box; - border-top: 1px solid $secondary-border-color; - border-bottom: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); + border-bottom: 1px solid var(--red-ui-secondary-border-color); i { transition: all 0.2s ease-in-out; } } .red-ui-sidebar-vc-repo-toolbar { - color: $primary-text-color; - background: $tertiary-background; + color: var(--red-ui-primary-text-color); + background: var(--red-ui-tertiary-background); padding: 10px; box-sizing: border-box; } @@ -637,7 +637,7 @@ .red-ui-projects-file-listing-container > .red-ui-editableList > .red-ui-editableList-border { border-radius: 0; border: none; - border-top: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); } .red-ui-editableList-container .red-ui-projects-dialog-file-list { @@ -654,39 +654,39 @@ } .red-ui-projects-dialog-file-list-entry { padding: 3px 0; - border-left: 2px solid $list-item-background; - border-right: 2px solid $list-item-background; - background: $list-item-background; + border-left: 2px solid var(--red-ui-list-item-background); + border-right: 2px solid var(--red-ui-list-item-background); + background: var(--red-ui-list-item-background); &.projects-list-entry-current { &:not(.selectable) { - background: $list-item-background-selected; + background: var(--red-ui-list-item-background-selected); } i { - color: $secondary-text-color-selected; + color: var(--red-ui-secondary-text-color-selected); } } &.selectable { cursor: pointer; &:hover { - background: $list-item-background-hover; - border-left-color:$list-item-border-selected; - border-right-color:$list-item-border-selected; + background: var(--red-ui-list-item-background-hover); + border-left-color:var(--red-ui-list-item-border-selected); + border-right-color:var(--red-ui-list-item-border-selected); } } &.unselectable { - color: $secondary-text-color-disabled; + color: var(--red-ui-secondary-text-color-disabled); } i { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); width: 16px; text-align: center; } &.selected { - background: $list-item-background-selected; - border-left-color:$list-item-border-selected; - border-right-color:$list-item-border-selected; + background: var(--red-ui-list-item-background-selected); + border-left-color:var(--red-ui-list-item-border-selected); + border-right-color:var(--red-ui-list-item-border-selected); } span { display: inline-block; @@ -696,7 +696,7 @@ margin: 0 10px 0 0px; .fa-angle-right { - color: $primary-text-color; + color: var(--red-ui-primary-text-color); transition: all 0.2s ease-in-out; } @@ -747,7 +747,7 @@ div.red-ui-projects-dialog-ssh-public-key { padding: 10px 5px; cursor: pointer; &:hover { - background: $list-item-background-hover; + background: var(--red-ui-list-item-background-hover); } } } @@ -756,7 +756,7 @@ div.red-ui-projects-dialog-ssh-public-key { position: relative; .red-ui-editableList-container { padding: 1px; - background: $tertiary-background; + background: var(--red-ui-tertiary-background); li:last-child { border-bottom: none; } @@ -775,7 +775,7 @@ div.red-ui-projects-dialog-ssh-public-key { text-align: center; min-width: 30px; vertical-align: top; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } .entry-name { min-width: 250px; @@ -784,7 +784,7 @@ div.red-ui-projects-dialog-ssh-public-key { font-weight: bold; } .entry-detail { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); font-size: 0.9em; } @@ -802,9 +802,9 @@ div.red-ui-projects-dialog-ssh-public-key { position: relative; margin-top: 10px; margin-bottom: 20px; - background: $secondary-background; + background: var(--red-ui-secondary-background); border-radius: 4px; - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); .red-ui-projects-edit-form-sublabel { margin-top: -8px !important; margin-right: 50px; @@ -819,7 +819,7 @@ div.red-ui-projects-dialog-ssh-public-key { .red-ui-projects-dialog-list-dialog-header { font-weight: bold; - background: $primary-background; + background: var(--red-ui-primary-background); margin-top: 0 !important; padding: 5px 10px; margin-bottom: 10px; @@ -830,5 +830,5 @@ div.red-ui-projects-dialog-ssh-public-key { padding: 8px 20px 20px; } .red-ui-settings-section-description { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss index deeabc4fc..3348e945a 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss @@ -15,8 +15,8 @@ **/ .red-ui-editor-radial-menu { - font-size: $primary-font-size; - font-family: $primary-font; + font-size: var(--red-ui-primary-font-size); + font-family: var(--red-ui-primary-font); position: absolute; top: 0; left:0; @@ -29,8 +29,8 @@ border-radius: 80px; width: 160px; height: 160px; - background: $shadow; - border: 1px solid $primary-border-color; + background: var(--red-ui-shadow); + border: 1px solid var(--red-ui-primary-border-color); } } @@ -39,20 +39,20 @@ border-radius: 20px; width: 50px; height: 50px; - background: $secondary-background; - border: 2px solid $primary-border-color; + background: var(--red-ui-secondary-background); + border: 2px solid var(--red-ui-primary-border-color); text-align: center; line-height:50px; &.selected { - background: $workspace-button-background-hover; + background: var(--red-ui-workspace-button-background-hover); } } .red-ui-editor-radial-menu-opt-disabled { - border-color: $tertiary-border-color; - color: $tertiary-border-color; + border-color: var(--red-ui-tertiary-border-color); + color: var(--red-ui-tertiary-border-color); } .red-ui-editor-radial-menu-opt-active { - background: $secondary-background-hover; + background: var(--red-ui-secondary-background-hover); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/search.scss b/packages/node_modules/@node-red/editor-client/src/sass/search.scss index cce1e69e4..ed4eee8cb 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/search.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/search.scss @@ -22,9 +22,9 @@ left: 50%; margin-left: -250px; top: 0px; - border: 1px solid $primary-border-color; - box-shadow: 0 0 10px $shadow; - background: $secondary-background; + border: 1px solid var(--red-ui-primary-border-color); + box-shadow: 0 0 10px var(--red-ui-shadow); + background: var(--red-ui-secondary-background); .red-ui-searchBox-container { display: inline-block; @@ -47,7 +47,7 @@ .red-ui-search-container { border-top-left-radius: 5px; border-top-right-radius: 5px; - border: 1px dashed $primary-border-color; + border: 1px dashed var(--red-ui-primary-border-color); border-bottom: none; padding: 0; width: 100%; @@ -56,8 +56,8 @@ display: none; height: 150px; .red-ui-editableList-container { - border: 1px dashed $primary-border-color; - border-top: 1px solid $secondary-border-color; + border: 1px dashed var(--red-ui-primary-border-color); + border-top: 1px solid var(--red-ui-secondary-border-color); } } .red-ui-search-result { @@ -73,7 +73,7 @@ } } .red-ui-search-result-separator { - border-bottom: 3px solid $secondary-border-color; + border-bottom: 3px solid var(--red-ui-secondary-border-color); } .red-ui-search-result-node { position: relative; @@ -89,7 +89,7 @@ height: 7px; top:4px; left:-4px; - background: $node-port-background; + background: var(--red-ui-node-port-background); box-sizing: border-box; } .red-ui-search-result-node-output{ @@ -107,26 +107,26 @@ margin-left:8px; } .red-ui-search-result-node-label { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } } .red-ui-search-container { padding: 3px; - background: $form-input-background; - border-bottom: 1px solid $secondary-border-color; + background: var(--red-ui-form-input-background); + border-bottom: 1px solid var(--red-ui-secondary-border-color); } .red-ui-search-results-container { position:relative; height: 300px; padding: 5px; - background: $primary-background; + background: var(--red-ui-primary-background); .red-ui-search-results-list { } .red-ui-editableList-container { padding: 0; - background: $primary-background; + background: var(--red-ui-primary-background); li { padding: 0; } @@ -137,21 +137,21 @@ display: flex; align-items: start; cursor: pointer; - color: $list-item-color; - background: $list-item-background; - border-left: 3px solid $list-item-background; - border-right: 3px solid $list-item-background; + color: var(--red-ui-list-item-color); + background: var(--red-ui-list-item-background); + border-left: 3px solid var(--red-ui-list-item-background); + border-right: 3px solid var(--red-ui-list-item-background); li.selected & { - background: $list-item-background-selected; - border-left-color: $list-item-border-selected; - border-right-color: $list-item-border-selected; + background: var(--red-ui-list-item-background-selected); + border-left-color: var(--red-ui-list-item-border-selected); + border-right-color: var(--red-ui-list-item-border-selected); } &:hover { text-decoration: none; - color: $form-text-color; - background: $list-item-background-hover; - border-left-color:$list-item-background-hover; - border-right-color:$list-item-background-hover; + color: var(--red-ui-form-text-color); + background: var(--red-ui-list-item-background-hover); + border-left-color:var(--red-ui-list-item-background-hover); + border-right-color:var(--red-ui-list-item-background-hover); } &:after { content: ""; @@ -165,7 +165,7 @@ float:left; height: 25px; border-radius: 3px; - border: 1px solid $node-border; + border: 1px solid var(--red-ui-node-border); background-position: 5% 50%; background-repeat: no-repeat; background-size: contain; @@ -182,28 +182,28 @@ flex-grow: 1; } .red-ui-search-result-node-label { - color: $primary-text-color; + color: var(--red-ui-primary-text-color); } .red-ui-search-result-node-type { font-style: italic; font-size: 0.9em; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } .red-ui-search-result-node-flow { float:right; font-size: 0.8em; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } .red-ui-search-result-node-id { display:none; font-size: 0.8em; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } .red-ui-search-empty { padding: 10px; text-align: center; font-style: italic; - color: $form-placeholder-color; + color: var(--red-ui-form-placeholder-color); } .red-ui-search-history { button { @@ -229,12 +229,12 @@ } .red-ui-search-result-action { - color: $primary-text-color; + color: var(--red-ui-primary-text-color); } .red-ui-search-result-action-key { position: absolute; top: 9px; right: 0; margin-right: 10px; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 18b186bad..21a57d29d 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -20,7 +20,7 @@ right: 0px; bottom: 0px; width: 315px; - background: $primary-background; + background: var(--red-ui-primary-background); box-sizing: border-box; z-index: 10; @include component-border; @@ -32,7 +32,7 @@ #red-ui-sidebar-content { position: absolute; - background: $secondary-background; + background: var(--red-ui-secondary-background); top: 35px; right: 0; bottom: 25px; @@ -47,7 +47,7 @@ bottom:10px; width: 7px; // z-index: 11; - background-color: $primary-background; + background-color: var(--red-ui-primary-background); cursor: col-resize; &:before { @@ -63,7 +63,7 @@ mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - background-color: $grip-color; + background-color: var(--red-ui-grip-color); } } @@ -82,11 +82,11 @@ .sidebar-header, /* Deprecated -> red-ui-sidebar-header */ .red-ui-sidebar-header { - color: $primary-text-color; + color: var(--red-ui-primary-text-color); text-align: right; padding: 8px 10px; - background: $primary-background; - border-bottom: 1px solid $secondary-border-color; + background: var(--red-ui-primary-background); + border-bottom: 1px solid var(--red-ui-secondary-border-color); white-space: nowrap; } @@ -138,9 +138,9 @@ button.red-ui-sidebar-header-button-toggle { top: calc(50% - 26px); padding:15px 8px; - border:1px solid $primary-border-color; - background:$primary-background; - color: $secondary-text-color; + border:1px solid var(--red-ui-primary-border-color); + background:var(--red-ui-primary-background); + color: var(--red-ui-secondary-text-color); text-align: center; cursor: pointer; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss b/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss new file mode 100644 index 000000000..1202d9fb7 --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss @@ -0,0 +1,18 @@ +/** +* Copyright JS Foundation and other contributors, http://js.foundation +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +**/ + +@import "colors"; +@import "variables"; \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss index 5c8d0ba94..c8e44e26e 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss @@ -16,7 +16,7 @@ .red-ui-sidebar-node-config { position: relative; - background: $secondary-background; + background: var(--red-ui-secondary-background); height: 100%; overflow-y:auto; @include disable-selection; @@ -40,11 +40,11 @@ ul.red-ui-sidebar-node-config-list { &.selected { border-color: transparent; - box-shadow: 0 0 0 2px $node-selected-color; + box-shadow: 0 0 0 2px var(--red-ui-node-selected-color); } &.highlighted { border-color: transparent; - outline: dashed $node-selected-color 4px; + outline: dashed var(--red-ui-node-selected-color 4px); } } .red-ui-palette-label { @@ -58,7 +58,7 @@ ul.red-ui-sidebar-node-config-list { .red-ui-palette-icon-container { font-size: 12px; line-height: 30px; - background-color: $node-icon-background-color; + background-color: var(--red-ui-node-icon-background-color); border-top-right-radius: 4px; border-bottom-right-radius: 4px; a { @@ -67,10 +67,10 @@ ul.red-ui-sidebar-node-config-list { bottom: 0; left: 0; right: 0; - color: $node-port-label-color; + color: var(--red-ui-node-port-label-color); &:hover { text-decoration: none; - background: $node-port-background-hover; + background: var(--red-ui-node-port-background-hover); } } } @@ -78,12 +78,12 @@ ul.red-ui-sidebar-node-config-list { .red-ui-palette-node-config { width: 160px; height: 30px; - background: $node-config-background; - color: $primary-text-color; + background: var(--red-ui-node-config-background); + color: var(--red-ui-primary-text-color); cursor: pointer; } ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); text-align: right; padding-right: 3px; &:not(:first-child) { @@ -91,21 +91,21 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { } } .red-ui-palette-node-config-none { - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); text-align:right; padding-right: 3px; } .red-ui-palette-node-config-unused,.red-ui-palette-node-config-disabled { - border-color: $primary-border-color; - background: $secondary-background-inactive; + border-color: var(--red-ui-primary-border-color); + background: var(--red-ui-secondary-background-inactive); border-style: dashed; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } .red-ui-palette-node-config-disabled { opacity: 0.6; font-style: italic; i { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); margin-right: 5px; } } @@ -116,8 +116,8 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type { height: 38px; line-height: 38px; padding: 0 8px; - background: $palette-header-background; + background: var(--red-ui-palette-header-background); font-size: 0.8em; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); font-weight: normal; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss index b98d452c1..fc4c78afb 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss @@ -63,12 +63,12 @@ .red-ui-sidebar-context-updated { text-align: right; font-size: 11px; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); padding: 1px 3px; } .red-ui-sidebar-context-property-storename { display: block; font-size: 0.8em; font-style: italic; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss index fe4f9fb84..f82b97116 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-help.scss @@ -2,7 +2,7 @@ // height: calc(100% - 39px); } .red-ui-help-search { - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); } .red-ui-sidebar-help-toc { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss index 9c63f2119..57dc7d6e3 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss @@ -32,7 +32,7 @@ display: inline-block; margin-left: 5px; } - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); } table.red-ui-info-table { font-size: 14px; @@ -40,8 +40,8 @@ table.red-ui-info-table { width: 100%; } table.red-ui-info-table tr:not(.blank) { - border-top: 1px solid $secondary-border-color; - border-bottom: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); + border-bottom: 1px solid var(--red-ui-secondary-border-color); } .red-ui-help-property-expand { font-size: 0.8em; @@ -57,7 +57,7 @@ table.red-ui-info-table tr.blank { th { text-align: left; font-weight: 500; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); padding: 6px 3px 3px; } >* { @@ -69,9 +69,9 @@ table.red-ui-info-table tr.blank { a { display: block; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); &:hover,&:focus { - color: $primary-text-color; + color: var(--red-ui-primary-text-color); text-decoration: none; } &:not(.expanded) { @@ -103,36 +103,36 @@ table.red-ui-info-table tr.blank { } .red-ui-help-info-none { font-style: italic; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); } table.red-ui-info-table tr:not(.blank) td:first-child{ - color: $header-text-color; + color: var(--red-ui-header-text-color); vertical-align: top; width: 90px; padding: 3px 3px 3px 6px; - background:$tertiary-background; - border-right: 1px solid $secondary-border-color; + background:var(--red-ui-tertiary-background); + border-right: 1px solid var(--red-ui-secondary-border-color); } table.red-ui-info-table tr:not(.blank) td:last-child{ padding: 3px 3px 3px 6px; - color: $primary-text-color; + color: var(--red-ui-primary-text-color); overflow-y: hidden; } div.red-ui-info-table { margin: 5px; } .red-ui-help { - font-size: $primary-font-size; + font-size: var(--red-ui-primary-font-size); line-height: 1.5em; a { - color: $text-color-link; + color: var(--red-ui-text-color-link); text-decoration: none; } a:hover, a:focus { - color: $text-color-link; + color: var(--red-ui-text-color-link); text-decoration: underline; } @@ -143,7 +143,7 @@ div.red-ui-info-table { line-height: 1.3em; margin: 8px auto; &.red-ui-help-title { - border-bottom: 1px solid $tertiary-border-color; + border-bottom: 1px solid var(--red-ui-tertiary-border-color); } } h2 { @@ -168,24 +168,24 @@ div.red-ui-info-table { & > span > p:first-child { } dl.message-properties { - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); border-radius: 2px; margin: 5px auto 10px; &>dt { padding: 0px 3px 2px 3px; - font-family: $monospace-font; + font-family: var(--red-ui-monospace-font); font-weight: normal; margin: 5px 3px 1px; - color: $text-color-code; + color: var(--red-ui-text-color-code); white-space: nowrap; &.optional { font-style: italic; } .property-type { - font-family: $primary-font; - color: $primary-text-color; + font-family: var(--red-ui-primary-font); + color: var(--red-ui-primary-text-color); font-style: italic; font-size: 11px; float: right; @@ -204,7 +204,7 @@ div.red-ui-info-table { ol.node-ports { margin: 0; li { - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); border-radius: 2px; list-style-position: inside; padding: 3px; @@ -224,7 +224,7 @@ div.red-ui-info-table { transition: transform 0.2s ease-in-out; margin-right: 4px; } - color: $header-text-color; + color: var(--red-ui-header-text-color); &:hover, &:focus { text-decoration: none; } @@ -242,7 +242,7 @@ div.red-ui-info-table { overflow : hidden; } table thead tr { - background-color: var(--red-ui-primary-background); //$primary-text-color; + background-color: var(--red-ui-primary-background); //var(--red-ui-primary-text-color); border-bottom: 1px solid var(--red-ui-secondary-border-color); color: var(--red-ui-header-text-color); text-align: left; @@ -252,7 +252,7 @@ div.red-ui-info-table { padding: 6px 8px; } table tbody tr:nth-of-type(even) { - background-color: var(--red-ui-tertiary-background); //$primary-background; + background-color: var(--red-ui-tertiary-background); //var(--red-ui-primary-background); } } .red-ui-sidebar-info-stack { @@ -273,10 +273,10 @@ div.red-ui-info-table { height: 0; transition: height 0.2s, padding 0.2s; box-sizing: border-box; - border-top: 1px solid $secondary-border-color; - background-color: $secondary-background; + border-top: 1px solid var(--red-ui-secondary-border-color); + background-color: var(--red-ui-secondary-background); padding: 0; - box-shadow: 0 5px 20px 0px $shadow; + box-shadow: 0 5px 20px 0px var(--red-ui-shadow); overflow-y: auto; } .red-ui-sidebar-info.show-tips { @@ -305,7 +305,7 @@ div.red-ui-info-table { font-size: 16px; text-align: center; line-height: 1.9em; - color : $tertiary-text-color; + color : var(--red-ui-tertiary-text-color); @include disable-selection; cursor: default; } @@ -314,14 +314,14 @@ div.red-ui-info-table { top: 4px; right: 6px; a { - color: $secondary-text-color; - border-color: $secondary-border-color !important; + color: var(--red-ui-secondary-text-color); + border-color: var(--red-ui-secondary-border-color) !important; margin-left: 4px; } } .node-info-property-config-node { - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); border-radius: 4px; padding: 2px 4px 2px; } @@ -346,7 +346,7 @@ div.red-ui-info-table { } .red-ui-info-outline-project { - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); } } .red-ui-info-outline, @@ -380,13 +380,13 @@ div.red-ui-info-table { background: none; } .red-ui-palette-icon-fa { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); font-size: 18px; } } &.red-ui-info-outline-item-empty { font-style: italic; - color: $form-placeholder-color; + color: var(--red-ui-form-placeholder-color); } } @@ -414,7 +414,7 @@ div.red-ui-info-table { white-space: nowrap; } .red-ui-search-result-node-label { - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } } @@ -439,16 +439,16 @@ div.red-ui-info-table { right: 1px; padding: 1px 2px 0 1px; text-align: right; - background: $list-item-background; + background: var(--red-ui-list-item-background); .red-ui-treeList-label:hover & { - background: $list-item-background-hover; + background: var(--red-ui-list-item-background-hover); } .red-ui-treeList-label.focus & { - background: $list-item-background-hover; + background: var(--red-ui-list-item-background-hover); } .red-ui-treeList-label.selected & { - background: $list-item-background-selected; + background: var(--red-ui-list-item-background-selected); } @@ -510,7 +510,7 @@ div.red-ui-info-table { } .red-ui-info-outline-item-label { font-style: italic; - color: $secondary-text-color-disabled; + color: var(--red-ui-secondary-text-color-disabled); } .red-ui-icons-flow { opacity: 0.4; @@ -538,7 +538,7 @@ div.red-ui-info-table { -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; - background-color: $icons-flow-color; + background-color: var(--red-ui-icons-flow-color); // filter: brightness(2.5); } @@ -549,8 +549,8 @@ div.red-ui-info-table { text-align: left; // padding-left: 9px; // box-sizing: border-box; - // background: $palette-header-background; - // border-bottom: 1px solid $secondary-border-color; + // background: var(--red-ui-palette-header-background); + // border-bottom: 1px solid var(--red-ui-secondary-border-color); .red-ui-searchBox-container { position: absolute; @@ -558,7 +558,7 @@ div.red-ui-info-table { right: 8px; width: calc(100% - 130px); max-width: 250px; - background: $palette-header-background; + background: var(--red-ui-palette-header-background); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss index a5d3003ae..595423888 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss @@ -16,7 +16,7 @@ .red-ui-tabs { position: relative; - background: $tab-background; + background: var(--red-ui-tab-background); overflow: hidden; height: 35px; box-sizing: border-box; @@ -39,18 +39,18 @@ display: block; height: 35px; box-sizing:border-box; - border-bottom: 1px solid $primary-border-color; + border-bottom: 1px solid var(--red-ui-primary-border-color); white-space: nowrap; @include disable-selection; li { box-sizing: border-box; display: inline-block; - border-left: 1px solid $primary-border-color; - border-top: 1px solid $primary-border-color; - border-right: 1px solid $primary-border-color; - border-bottom: 1px solid $primary-border-color; - background: $tab-background-inactive; + border-left: 1px solid var(--red-ui-primary-border-color); + border-top: 1px solid var(--red-ui-primary-border-color); + border-right: 1px solid var(--red-ui-primary-border-color); + border-bottom: 1px solid var(--red-ui-primary-border-color); + background: var(--red-ui-tab-background-inactive); margin: 3px 3px 0 3px; height: 32px; line-height: 29px; @@ -73,7 +73,7 @@ padding-left: 12px; width: 100%; height: 100%; - color: $tab-text-color-inactive; + color: var(--red-ui-tab-text-color-inactive); } a:hover { text-decoration: none; @@ -83,27 +83,27 @@ } &:not(.active) a:hover+a.red-ui-tab-close { - background: $tab-background-hover; + background: var(--red-ui-tab-background-hover); } &.highlighted { - box-shadow: 0px 0px 4px 2px $node-selected-color; - border: dashed 1px $node-selected-color; + box-shadow: 0px 0px 4px 2px var(--red-ui-node-selected-color); + border: dashed 1px var(--red-ui-node-selected-color); } &.active { - background: $tab-background-active; + background: var(--red-ui-tab-background-active); font-weight: bold; - border-bottom: 1px solid $tab-background-active; + border-bottom: 1px solid var(--red-ui-tab-background-active); z-index: 2; a { - color: $tab-text-color-active; + color: var(--red-ui-tab-text-color-active); } a.red-ui-tab-close { - color: $workspace-button-color; - background: $tab-background-active; + color: var(--red-ui-workspace-button-color); + background: var(--red-ui-tab-background-active); &:hover { - background: $workspace-button-background-hover !important; - color: $workspace-button-color-hover; + background: var(--red-ui-workspace-button-background-hover) !important; + color: var(--red-ui-workspace-button-color-hover); } } img.red-ui-tab-icon { @@ -111,24 +111,24 @@ } .red-ui-tabs-fade { - background-image: linear-gradient(to right, change-color($tab-background-active, $alpha: 0.001), $tab-background-active); + background-image: linear-gradient(to right, var(--red-ui-tab-background-active-alpha), var(--red-ui-tab-background-active)); } } &.selected { &:not(.active) { - background: $tab-background-selected; + background: var(--red-ui-tab-background-selected); .red-ui-tabs-fade { - background-image: linear-gradient(to right, change-color($tab-background-selected, $alpha: 0.001), $tab-background-selected); + background-image: linear-gradient(to right, var(--red-ui-tab-background-selected-alpha), var(--red-ui-tab-background-selected)); } .red-ui-tabs-badge-selected { - background: $tab-background-selected; + background: var(--red-ui-tab-background-selected); } } font-weight: bold; .red-ui-tabs-badge-selected { display: inline; - background: $tab-background; + background: var(--red-ui-tab-background); } .red-ui-tabs-badge-changed { display: none; @@ -136,10 +136,10 @@ } &:not(.active) a:hover { - color: $workspace-button-color-hover; - background: $tab-background-hover; + color: var(--red-ui-workspace-button-color-hover); + background: var(--red-ui-tab-background-hover); &+.red-ui-tabs-fade { - background-image: linear-gradient(to right, change-color($tab-background-hover, $alpha: 0.001), $tab-background-hover); + background-image: linear-gradient(to right, var(--red-ui-tab-background-hover-alpha), var(--red-ui-tab-background-hover)); } } } @@ -182,9 +182,9 @@ &.red-ui-tabs-vertical { box-sizing: border-box; height: 100%; - border-right: 1px solid $primary-border-color; + border-right: 1px solid var(--red-ui-primary-border-color); margin: 0; - background: $tertiary-background; + background: var(--red-ui-tertiary-background); overflow: visible; .red-ui-tabs-scroll-container { @@ -203,13 +203,13 @@ display: block; margin: 0; border: none; - border-right: 1px solid $primary-border-color; + border-right: 1px solid var(--red-ui-primary-border-color); height: auto; &:not(:first-child) { - border-top: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); } &:last-child { - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); } a.red-ui-tab-label { @@ -217,7 +217,7 @@ } &.active { - border-right: 1px solid $tab-background-active; + border-right: 1px solid var(--red-ui-tab-background-active); } } } @@ -238,8 +238,8 @@ top: 0; right: 0; height: 35px; - background: $tab-background; - border-bottom: 1px solid $primary-border-color; + background: var(--red-ui-tab-background); + border-bottom: 1px solid var(--red-ui-primary-border-color); z-index: 2; a { @@ -261,8 +261,8 @@ top: 0; right: 0; height: 35px; - background: $tab-background; - border-bottom: 1px solid $primary-border-color; + background: var(--red-ui-tab-background); + border-bottom: 1px solid var(--red-ui-primary-border-color); z-index: 2; a { @include workspace-button-toggle; @@ -272,7 +272,7 @@ margin: 4px 3px 3px; z-index: 2; &.red-ui-tab-link-button-menu { - border-color: $tab-background; + border-color: var(--red-ui-tab-background); } &:not(.single):not(.selected) { margin-top: 4px; @@ -286,27 +286,27 @@ height: 35px; width: 21px; display: block; - color: $workspace-button-color; + color: var(--red-ui-workspace-button-color); font-size: 22px; text-align: center; margin:0; border-left: none; border-right: none; border-top: none; - border-bottom: 1px solid $primary-border-color; + border-bottom: 1px solid var(--red-ui-primary-border-color); line-height: 34px; } } .red-ui-tab-scroll-left { left:0; a { - border-right: 1px solid $primary-border-color; + border-right: 1px solid var(--red-ui-primary-border-color); } } .red-ui-tab-scroll-right { right: 0px; a { - border-left: 1px solid $primary-border-color; + border-left: 1px solid var(--red-ui-primary-border-color); } } @@ -341,7 +341,7 @@ top: 0; right: 0; width: 15px; - background-image: linear-gradient(to right, change-color($tab-background-inactive, $alpha: 0.001), $tab-background-inactive); + background-image: linear-gradient(to right, var(--red-ui-tab-background-inactive-alpha), var(--red-ui-tab-background-inactive)); pointer-events: none; } @@ -365,7 +365,7 @@ i.red-ui-tab-icon { mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - background-color: $tab-icon-color; + background-color: var(--red-ui-tab-icon-color); } } .red-ui-tabs-badges { @@ -379,7 +379,7 @@ i.red-ui-tab-icon { line-height: 28px; text-align: center; padding:0px; - color: $tab-badge-color; + color: var(--red-ui-tab-badge-color); } .red-ui-tabs-badges i { @@ -415,7 +415,7 @@ i.red-ui-tab-icon { } .red-ui-tab-close { display: none; - background: $tab-background-inactive; + background: var(--red-ui-tab-background-inactive); opacity: 0.8; position: absolute; right: 0px; @@ -425,10 +425,10 @@ i.red-ui-tab-icon { line-height: 28px; text-align: center; padding: 0px; - color: $workspace-button-color; + color: var(--red-ui-workspace-button-color); &:hover { - background: $workspace-button-background-hover !important; - color: $workspace-button-color-hover; + background: var(--red-ui-workspace-button-background-hover) !important; + color: var(--red-ui-workspace-button-color-hover); opacity: 1; } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss b/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss index f8d175d44..a22c07f7f 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tourGuide.scss @@ -97,7 +97,7 @@ color: var(--red-ui-primary-text-color) !important; } &:not(.primary):not(.disabled):not(.ui-button-disabled):hover { - border-color: $popover-button-border-color-hover; + border-color: var(--red-ui-popover-button-border-color-hover); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss index a606bba8c..47929378b 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/checkboxSet.scss @@ -16,7 +16,7 @@ .red-ui-checkboxSet { width: 15px; display: inline-block; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); cursor: pointer; input { display:none !important; @@ -24,6 +24,6 @@ &.disabled { pointer-events: none; - color: $secondary-text-color-disabled; + color: var(--red-ui-secondary-text-color-disabled); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss index a5873f684..00b79b54a 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/editableList.scss @@ -14,10 +14,10 @@ * limitations under the License. **/ .red-ui-editableList-border { - border: 1px solid $form-input-border-color; + border: 1px solid var(--red-ui-form-input-border-color); border-radius: 4px; .red-ui-editableList-header { - border-bottom: 1px solid $form-input-border-color; + border-bottom: 1px solid var(--red-ui-form-input-border-color); padding: 2px 16px 2px 4px; font-size: 0.9em; } @@ -32,22 +32,22 @@ margin: 0; } .red-ui-editabelList-item-placeholder { - border: 2px dashed $secondary-border-color !important; + border: 2px dashed var(--red-ui-secondary-border-color) !important; } li { box-sizing: border-box; position: relative; - background: $secondary-background; + background: var(--red-ui-secondary-background); margin:0; padding:8px 0px; - border-bottom: 1px solid $secondary-border-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); min-height: 20px; .red-ui-editableList-item-handle { position: absolute; top: 50%; left: 2px; margin-top: -7px; - color: $tertiary-text-color; + color: var(--red-ui-tertiary-text-color); cursor: move; } .red-ui-editableList-item-remove { @@ -57,7 +57,7 @@ margin-top: -9px; } &.ui-sortable-helper { - border-top: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); } //.red-ui-editableList-item-content { outline: 1px solid red} @@ -68,7 +68,7 @@ margin-right: 28px; } &.red-ui-editableList-item-deleting { - background: $secondary-background-inactive; + background: var(--red-ui-secondary-background-inactive); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss index 01a7a4802..44745e87c 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/nodeList.scss @@ -21,9 +21,9 @@ margin: 0; white-space: nowrap; border: none; - background: $secondary-background; + background: var(--red-ui-secondary-background); &:hover { - background: $secondary-background-hover; + background: var(--red-ui-secondary-background-hover); } i.fa-angle-right { @@ -44,12 +44,12 @@ } } .red-ui-editableList-item-content.disabled { - color: $secondary-text-color-disabled; + color: var(--red-ui-secondary-text-color-disabled); } &.red-ui-editableList-section-header { - background: $primary-background; + background: var(--red-ui-primary-background); .red-ui-editableList-item-content.disabled { - color: $secondary-text-color-disabled; + color: var(--red-ui-secondary-text-color-disabled); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss index b925e5212..8788ed6a7 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/searchBox.scss @@ -21,7 +21,7 @@ position: absolute; top: 9px; font-size: 10px; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } i.fa-search { pointer-events: none; @@ -41,8 +41,8 @@ margin: 0; } a.red-ui-searchBox-opts:hover { - color: $workspace-button-color-hover; - background: $workspace-button-background-hover; + color: var(--red-ui-workspace-button-color-hover); + background: var(--red-ui-workspace-button-background-hover); } input.red-ui-searchBox-input { border-radius: 0; @@ -76,8 +76,8 @@ position: absolute; right: 18px; top: 4px; - background: $primary-background; - color: $secondary-text-color; + background: var(--red-ui-primary-background); + color: var(--red-ui-secondary-text-color); padding: 1px 8px; font-size: 9px; border-radius: 4px; @@ -97,12 +97,12 @@ .red-ui-searchBox-compact { input:focus.red-ui-searchBox-input { - outline: 1px solid $form-input-focus-color; + outline: 1px solid var(--red-ui-form-input-focus-color); } input.red-ui-searchBox-input,input:focus.red-ui-searchBox-input { - border: 1px solid $secondary-border-color; + border: 1px solid var(--red-ui-secondary-border-color); border-radius: 3px; font-size: 12px; height: 26px; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss index a32bfad70..82d697b33 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/stack.scss @@ -15,9 +15,9 @@ **/ .red-ui-stack { - background: $secondary-background; + background: var(--red-ui-secondary-background); .red-ui-palette-category { - background: $secondary-background; + background: var(--red-ui-secondary-background); &:last-child { border-bottom: none; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss index 5f1d27037..f076a533e 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss @@ -24,9 +24,9 @@ width: 100%; height: 100%; position: relative; - background: $tertiary-background; + background: var(--red-ui-tertiary-background); - border: 1px solid $form-input-border-color; + border: 1px solid var(--red-ui-form-input-border-color); border-radius: 4px; box-sizing: border-box; @@ -71,7 +71,7 @@ padding: 6px 0; display: flex; align-items: center; - color: $list-item-color; + color: var(--red-ui-list-item-color); text-decoration: none; cursor: pointer; vertical-align: middle; @@ -79,26 +79,26 @@ position: relative; &:hover, &:hover .red-ui-treeList-sublabel-text { - background: $list-item-background-hover; - color: $list-item-color; + background: var(--red-ui-list-item-background-hover); + color: var(--red-ui-list-item-color); text-decoration: none; } &:focus, &:focus .red-ui-treeList-sublabel-text { - background: $list-item-background-hover; + background: var(--red-ui-list-item-background-hover); outline: none; - color: $list-item-color; + color: var(--red-ui-list-item-color); text-decoration: none; } &.focus, &.focus .red-ui-treeList-sublabel-text { - background: $list-item-background-hover; - outline: 1px solid $form-input-focus-color !important; + background: var(--red-ui-list-item-background-hover); + outline: 1px solid var(--red-ui-form-input-focus-color) !important; outline-offset: -1px; - color: $list-item-color; + color: var(--red-ui-list-item-color); } &.selected, &.selected .red-ui-treeList-sublabel-text { - background: $list-item-background-selected; + background: var(--red-ui-list-item-background-selected); outline: none; - color: $list-item-color; + color: var(--red-ui-list-item-color); } input.red-ui-treeList-checkbox, @@ -121,9 +121,9 @@ padding: 0 10px 0 5px; line-height: 32px; font-size: 0.9em; - color: $list-item-secondary-color; + color: var(--red-ui-list-item-secondary-color); position: absolute; - background: $list-item-background; + background: var(--red-ui-list-item-background); } @@ -143,5 +143,5 @@ mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - background-color: $spinner-color; + background-color: var(--red-ui-spinner-color); } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss index 76345e980..1a421fac5 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss @@ -15,7 +15,7 @@ **/ .red-ui-typedInput-container { - border: 1px solid $form-input-border-color; + border: 1px solid var(--red-ui-form-input-border-color); border-radius: 5px; height: 34px; line-height: 14px; @@ -28,7 +28,7 @@ position: relative; &[disabled] { input, button { - background: $secondary-background-inactive; + background: var(--red-ui-secondary-background-inactive); pointer-events: none; cursor: not-allowed; } @@ -50,7 +50,7 @@ } &.red-ui-typedInput-focus:not(.input-error) { - border-color: $form-input-focus-color !important; + border-color: var(--red-ui-form-input-focus-color) !important; } .red-ui-typedInput-value-label { flex-grow: 1; @@ -61,42 +61,42 @@ overflow: hidden; text-overflow: ellipsis; .red-ui-typedInput-value-label-inactive { - background: $secondary-background-disabled; - color: $secondary-text-color-disabled; + background: var(--red-ui-secondary-background-disabled); + color: var(--red-ui-secondary-text-color-disabled); } } } .red-ui-typedInput-options { @include component-shadow; - font-family: $primary-font; - font-size: $primary-font-size; + font-family: var(--red-ui-primary-font); + font-size: var(--red-ui-primary-font-size); position: absolute; max-height: 350px; overflow-y: auto; - border: 1px solid $primary-border-color; + border: 1px solid var(--red-ui-primary-border-color); box-sizing: border-box; - background: $secondary-background; + background: var(--red-ui-secondary-background); white-space: nowrap; z-index: 2000; a { padding: 6px 18px 6px 6px; display: flex; align-items: center; - border-bottom: 1px solid $secondary-border-color; - color: $form-text-color; + border-bottom: 1px solid var(--red-ui-secondary-border-color); + color: var(--red-ui-form-text-color); &:hover { text-decoration: none; - background: $workspace-button-background-hover; + background: var(--red-ui-workspace-button-background-hover); } &:focus { text-decoration: none; - background: $workspace-button-background-active; + background: var(--red-ui-workspace-button-background-active); outline: none; } &:active { text-decoration: none; - background: $workspace-button-background-active; + background: var(--red-ui-workspace-button-background-active); } input[type="checkbox"] { margin: 0 6px 0 0; @@ -111,7 +111,7 @@ mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - background-color: $primary-text-color; + background-color: var(--red-ui-primary-text-color); height: 14px; width: 12px; } @@ -128,11 +128,11 @@ button.red-ui-typedInput-option-trigger border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 0 1px 0 5px; - background: $form-button-background; + background: var(--red-ui-form-button-background); height: 32px; line-height: 30px; vertical-align: middle; - color: $form-text-color; + color: var(--red-ui-form-text-color); white-space: nowrap; i.red-ui-typedInput-icon { margin-left: 1px; @@ -142,7 +142,7 @@ button.red-ui-typedInput-option-trigger &.disabled { cursor: default; > i.red-ui-typedInput-icon { - color: $secondary-text-color-disabled; + color: var(--red-ui-secondary-text-color-disabled); } } .red-ui-typedInput-type-label,.red-ui-typedInput-option-label { @@ -161,21 +161,21 @@ button.red-ui-typedInput-option-trigger mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; - background-color: $primary-text-color; + background-color: var(--red-ui-primary-text-color); } } &:not(.disabled):hover { text-decoration: none; - background: $workspace-button-background-hover; + background: var(--red-ui-workspace-button-background-hover); } &:focus { text-decoration: none; outline: none; - box-shadow: inset 0 0 0 1px $form-input-focus-color; + box-shadow: inset 0 0 0 1px var(--red-ui-form-input-focus-color); } &:not(.disabled):active { - background: $workspace-button-background-active; + background: var(--red-ui-workspace-button-background-active); text-decoration: none; } &.red-ui-typedInput-full-width { @@ -208,8 +208,8 @@ button.red-ui-typedInput-option-trigger { line-height: 32px; display: inline-flex; .red-ui-typedInput-option-label { - background:$form-button-background; - color: $form-text-color; + background:var(--red-ui-form-button-background); + color: var(--red-ui-form-text-color); flex-grow: 1; padding: 0 0 0 8px; display:inline-block; @@ -231,6 +231,6 @@ button.red-ui-typedInput-option-trigger { box-shadow: none; } &:focus .red-ui-typedInput-option-caret { - box-shadow: inset 0 0 0 1px $form-input-focus-color; + box-shadow: inset 0 0 0 1px var(--red-ui-form-input-focus-color); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss b/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss index 5cf0570c2..36ab67e3f 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/userSettings.scss @@ -20,7 +20,7 @@ left: 0; bottom: 0; width: 120px; - background: $tertiary-background; + background: var(--red-ui-tertiary-background); } .red-ui-settings-tabs-content { position: absolute; @@ -30,7 +30,7 @@ bottom: 0; padding: 0; h3:not(:first-child) { - border-top: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); margin-top: 15px; margin-bottom: 10px; padding-top: 20px; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss index aadc2231e..abd31629c 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/variables.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/variables.scss @@ -1,4 +1,5 @@ :root { + --red-ui-primary-font: #{$primary-font}; --red-ui-primary-font-size: #{$primary-font-size}; --red-ui-monospace-font: #{$monospace-font}; @@ -40,7 +41,6 @@ --red-ui-text-color-link: #{$text-color-link}; - --red-ui-primary-border-color: #{$primary-border-color}; --red-ui-secondary-border-color: #{$secondary-border-color}; --red-ui-tertiary-border-color: #{$tertiary-border-color}; @@ -50,20 +50,38 @@ --red-ui-border-color-success: #{$border-color-success}; --red-ui-form-background: #{$form-background}; - --red-ui-form-placeholder-color: #{$form-placeholder-color}; --red-ui-form-text-color: #{$form-text-color}; --red-ui-form-text-color-disabled: #{$form-text-color-disabled}; + --red-ui-form-input-focus-color: #{$form-input-focus-color}; --red-ui-form-input-border-color: #{$form-input-border-color}; - --red-ui-form-input-border-color-focus: #{$form-input-focus-color}; - --red-ui-form-input-border-color-selected: #{$form-input-border-selected-color}; - --red-ui-form-input-border-color-error: #{$form-input-border-error-color}; + --red-ui-form-input-border-selected-color: #{$form-input-border-selected-color}; + --red-ui-form-input-border-error-color: #{$form-input-border-error-color}; --red-ui-form-input-background: #{$form-input-background}; --red-ui-form-input-background-disabled: #{$form-input-background-disabled}; --red-ui-form-button-background: #{$form-button-background}; --red-ui-form-tips-background: #{$form-tips-background}; + + --red-ui-text-editor-color: #{$text-editor-color}; + --red-ui-text-editor-background: #{$text-editor-background}; + --red-ui-text-editor-color-disabled: #{$text-editor-color-disabled}; + --red-ui-text-editor-background-disabled: #{$text-editor-background-disabled}; + --red-ui-text-editor-gutter-background: #{$text-editor-gutter-background}; + --red-ui-text-editor-gutter-color: #{$text-editor-gutter-color}; + --red-ui-text-editor-gutter-active-line-background: #{$text-editor-gutter-active-line-background}; + --red-ui-text-editor-active-line-background: #{$text-editor-active-line-background}; + --red-ui-text-editor-selection-background: #{$text-editor-selection-background}; + + --red-ui-event-log-background: #{$event-log-background}; + --red-ui-event-log-color: #{$event-log-color}; + --red-ui-event-log-active-line-background: #{$event-log-active-line-background}; + --red-ui-event-log-selection-background: #{$event-log-selection-background}; + + + + --red-ui-list-item-color: #{$list-item-color}; --red-ui-list-item-secondary-color: #{$list-item-secondary-color}; --red-ui-list-item-background: #{$list-item-background}; @@ -72,8 +90,120 @@ --red-ui-list-item-background-selected: #{$list-item-background-selected}; --red-ui-list-item-border-selected: #{$list-item-border-selected}; + --red-ui-tab-text-color-active: #{$tab-text-color-active}; + --red-ui-tab-text-color-inactive: #{$tab-text-color-inactive}; + --red-ui-tab-text-color-disabled-active: #{$tab-text-color-disabled-active}; + --red-ui-tab-text-color-disabled-inactive: #{$tab-text-color-disabled-inactive}; + + --red-ui-tab-badge-color: #{$tab-badge-color}; + --red-ui-tab-background: #{$tab-background}; + --red-ui-tab-background-active: #{$tab-background-active}; + --red-ui-tab-background-active-alpha: #{$tab-background-active-alpha}; + --red-ui-tab-background-selected: #{$tab-background-selected}; + --red-ui-tab-background-selected-alpha: #{$tab-background-selected-alpha}; + --red-ui-tab-background-inactive: #{$tab-background-inactive}; + --red-ui-tab-background-inactive-alpha: #{$tab-background-inactive-alpha}; + --red-ui-tab-background-hover: #{$tab-background-hover}; + --red-ui-tab-background-hover-alpha: #{$tab-background-hover-alpha}; + + --red-ui-palette-header-background: #{$palette-header-background}; + --red-ui-palette-header-color: #{$palette-header-color}; + --red-ui-palette-content-background: #{$palette-content-background}; + + + --red-ui-workspace-button-background: #{$workspace-button-background}; + --red-ui-workspace-button-background-hover: #{$workspace-button-background-hover}; + --red-ui-workspace-button-background-active: #{$workspace-button-background-active}; + + --red-ui-workspace-button-color: #{$workspace-button-color}; + --red-ui-workspace-button-color-disabled: #{$workspace-button-color-disabled}; + --red-ui-workspace-button-color-focus: #{$workspace-button-color-focus}; + --red-ui-workspace-button-color-hover: #{$workspace-button-color-hover}; + --red-ui-workspace-button-color-active: #{$workspace-button-color-active}; + --red-ui-workspace-button-color-selected: #{$workspace-button-color-selected}; + + --red-ui-workspace-button-color-primary: #{$workspace-button-color-primary}; + --red-ui-workspace-button-background-primary: #{$workspace-button-background-primary}; + --red-ui-workspace-button-background-primary-hover: #{$workspace-button-background-primary-hover}; + + --red-ui-workspace-button-color-focus-outline: #{$workspace-button-color-focus-outline}; + --red-ui-shade-color: #{$shade-color}; + --red-ui-popover-background: #{$popover-background}; + --red-ui-popover-border: #{$popover-border}; + --red-ui-popover-color: #{$popover-color}; + --red-ui-popover-button-border-color: #{$popover-button-border-color}; + --red-ui-popover-button-border-color-hover: #{$popover-button-border-color-hover}; + + + + --red-ui-diff-text-header-color: #{$diff-text-header-color}; + --red-ui-diff-text-header-background: #{$diff-text-header-background}; + --red-ui-diff-state-color: #{$diff-state-color}; + --red-ui-diff-state-prefix-color: #{$diff-state-prefix-color}; + --red-ui-diff-state-added: #{$diff-state-added}; + --red-ui-diff-state-deleted: #{$diff-state-deleted}; + --red-ui-diff-state-changed: #{$diff-state-changed}; + --red-ui-diff-state-changed-background: #{$diff-state-changed-background}; + --red-ui-diff-state-unchanged: #{$diff-state-unchanged}; + --red-ui-diff-state-unchanged-background: #{$diff-state-unchanged-background}; + + --red-ui-diff-state-conflicted: #{$diff-state-conflicted}; + --red-ui-diff-state-moved: #{$diff-state-moved}; + --red-ui-diff-state-conflict: #{$diff-state-conflict}; + --red-ui-diff-state-conflict-background: #{$diff-state-conflict-background}; + + --red-ui-diff-state-added-background: #{$diff-state-added-background}; + --red-ui-diff-state-added-border: #{$diff-state-added-border}; + --red-ui-diff-state-added-header-background: #{$diff-state-added-header-background}; + --red-ui-diff-state-added-header-border: #{$diff-state-added-header-border}; + + --red-ui-diff-state-deleted-background: #{$diff-state-deleted-background}; + --red-ui-diff-state-deleted-border: #{$diff-state-deleted-border}; + --red-ui-diff-state-deleted-header-background: #{$diff-state-deleted-header-background}; + --red-ui-diff-state-deleted-header-border: #{$diff-state-deleted-header-border}; + + --red-ui-diff-merge-header-color: #{$diff-merge-header-color}; + --red-ui-diff-merge-header-background: #{$diff-merge-header-background}; + --red-ui-diff-merge-header-border-color: #{$diff-merge-header-border-color}; + + --red-ui-menuBackground: #{$menuBackground}; + --red-ui-menuDivider: #{$menuDivider}; + --red-ui-menuColor: #{$menuColor}; + --red-ui-menuActiveColor: #{$menuActiveColor}; + --red-ui-menuActiveBackground: #{$menuActiveBackground}; + --red-ui-menuDisabledColor: #{$menuDisabledColor}; + --red-ui-menuHoverColor: #{$menuHoverColor}; + --red-ui-menuHoverBackground: #{$menuHoverBackground}; + --red-ui-menuCaret: #{$menuCaret}; + + --red-ui-view-navigator-background: #{$view-navigator-background}; + + --red-ui-view-lasso-stroke: #{$view-lasso-stroke}; + --red-ui-view-lasso-fill: #{$view-lasso-fill}; + + --red-ui-view-background: #{$view-background}; + --red-ui-view-grid-color: #{$view-grid-color}; + + --red-ui-node-label-color: #{$node-label-color}; + --red-ui-node-port-label-color: #{$node-port-label-color}; + --red-ui-node-border: #{$node-border}; + --red-ui-node-border-unknown: #{$node-border-unknown}; + --red-ui-node-border-placeholder: #{$node-border-placeholder}; + --red-ui-node-background-placeholder: #{$node-background-placeholder}; + + --red-ui-node-port-background: #{$node-port-background}; + --red-ui-node-port-background-hover: #{$node-port-background-hover}; + --red-ui-node-icon-color: #{$node-icon-color}; + --red-ui-node-icon-background-color: #{$node-icon-background-color}; + --red-ui-node-icon-background-color-fill: #{$node-icon-background-color-fill}; + --red-ui-node-icon-background-color-opacity: #{$node-icon-background-color-opacity}; + --red-ui-node-icon-border-color: #{$node-icon-border-color}; + --red-ui-node-icon-border-color-opacity: #{$node-icon-border-color-opacity}; + + --red-ui-node-config-background: #{$node-config-background}; + --red-ui-node-link-port-background: #{$node-link-port-background}; --red-ui-node-status-error-border: #{$node-status-error-border}; @@ -81,18 +211,87 @@ --red-ui-node-status-changed-border: #{$node-status-changed-border}; --red-ui-node-status-changed-background: #{$node-status-changed-background}; - --red-ui-node-border: #{$node-border}; - --red-ui-node-port-background:#{$node-port-background}; + @each $current-color in red green yellow blue grey gray { + --red-ui-node-status-colors-#{"" + $current-color}: #{map-get($node-status-colors, $current-color)}; + } + - --red-ui-node-label-color: #{$node-label-color}; --red-ui-node-selected-color: #{$node-selected-color}; --red-ui-port-selected-color: #{$port-selected-color}; - --red-ui-popover-background: #{$popover-background}; - --red-ui-popover-border: #{$popover-border}; - --red-ui-popover-color: #{$popover-color}; + --red-ui-link-color: #{$link-color}; + --red-ui-link-link-color: #{$link-link-color}; + --red-ui-link-disabled-color: #{$link-disabled-color}; + --red-ui-link-link-active-color: #{$link-link-active-color}; + --red-ui-link-unknown-color: #{$link-unknown-color}; + + --red-ui-clipboard-textarea-background: #{$clipboard-textarea-background}; + + + --red-ui-deploy-button-color: #{$deploy-button-color}; + --red-ui-deploy-button-color-active: #{$deploy-button-color-active}; + --red-ui-deploy-button-color-disabled: #{$deploy-button-color-disabled}; + --red-ui-deploy-button-background: #{$deploy-button-background}; + --red-ui-deploy-button-background-hover: #{$deploy-button-background-hover}; + --red-ui-deploy-button-background-active: #{$deploy-button-background-active}; + --red-ui-deploy-button-background-disabled: #{$deploy-button-background-disabled}; + --red-ui-deploy-button-background-disabled-hover: #{$deploy-button-background-disabled-hover}; + + + --red-ui-header-background: #{$header-background}; + --red-ui-header-button-background-active: #{$header-button-background-active}; + --red-ui-header-menu-color: #{$header-menu-color}; + --red-ui-header-menu-color-disabled: #{$header-menu-color-disabled}; + --red-ui-header-menu-heading-color: #{$header-menu-heading-color}; + --red-ui-header-menu-sublabel-color: #{$header-menu-sublabel-color}; + --red-ui-header-menu-background: #{$header-menu-background}; + --red-ui-header-menu-item-hover: #{$header-menu-item-hover}; + --red-ui-header-menu-item-border-active: #{$header-menu-item-border-active}; + --red-ui-headerMenuItemDivider: #{$headerMenuItemDivider}; + --red-ui-headerMenuCaret: #{$headerMenuCaret}; + + --red-ui-vcCommitShaColor: #{$vcCommitShaColor}; + + --red-ui-dnd-background: #{$dnd-background}; + --red-ui-dnd-color: #{$dnd-color}; + + --red-ui-notification-border-default: #{$notification-border-default}; + --red-ui-notification-border-success: #{$notification-border-success}; + --red-ui-notification-border-warning: #{$notification-border-warning}; + --red-ui-notification-border-error: #{$notification-border-error}; + + --red-ui-debug-message-background: #{$debug-message-background}; + --red-ui-debug-message-background-hover: #{$debug-message-background-hover}; + + --red-ui-debug-message-text-color: #{$debug-message-text-color}; + --red-ui-debug-message-text-color-meta: #{$debug-message-text-color-meta}; + --red-ui-debug-message-text-color-object-key: #{$debug-message-text-color-object-key}; + --red-ui-debug-message-text-color-msg-type-other: #{$debug-message-text-color-msg-type-other}; + --red-ui-debug-message-text-color-msg-type-string: #{$debug-message-text-color-msg-type-string}; + --red-ui-debug-message-text-color-msg-type-null: #{$debug-message-text-color-msg-type-null}; + --red-ui-debug-message-text-color-msg-type-meta: #{$debug-message-text-color-msg-type-meta}; + --red-ui-debug-message-text-color-msg-type-number: #{$debug-message-text-color-msg-type-number}; + + --red-ui-debug-message-border: #{$debug-message-border}; + --red-ui-debug-message-border-hover: #{$debug-message-border-hover}; + --red-ui-debug-message-border-warning: #{$debug-message-border-warning}; + --red-ui-debug-message-border-error: #{$debug-message-border-error}; + + --red-ui-group-default-fill: #{$group-default-fill}; + --red-ui-group-default-fill-opacity: #{$group-default-fill-opacity}; + --red-ui-group-default-stroke: #{$group-default-stroke}; + --red-ui-group-default-stroke-opacity: #{$group-default-stroke-opacity}; + --red-ui-group-default-label-color: #{$group-default-label-color}; --red-ui-tourGuide-border: #{$tourGuide-border}; --red-ui-tourGuide-heading-color: #{$tourGuide-heading-color}; + --red-ui-grip-color: #{$grip-color}; + + --red-ui-icons-flow-color: #{$icons-flow-color}; + + --red-ui-spinner-color: #{$spinner-color}; + + --red-ui-tab-icon-color: #{$tab-icon-color}; + } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index d594337de..24e156b1e 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -47,12 +47,12 @@ } .red-ui-workspace-chart-background { - fill: $view-background; + fill: var(--red-ui-view-background); } .red-ui-workspace-chart-grid line { fill: none; shape-rendering: crispEdges; - stroke: $view-grid-color; + stroke: var(--red-ui-view-grid-color); stroke-width: 1px; } .red-ui-workspace-select-mode { @@ -94,11 +94,11 @@ a { font-style: italic; - color: $tab-text-color-disabled-inactive !important; + color: var(--red-ui-tab-text-color-disabled-inactive) !important; } &.active a { font-weight: normal; - color: $tab-text-color-disabled-active !important; + color: var(--red-ui-tab-text-color-disabled-active) !important; } .red-ui-workspace-disabled-icon { display: inline; @@ -112,17 +112,17 @@ bottom: 0; right:0; z-index: 101; - border-left: 1px solid $primary-border-color; - border-top: 1px solid $primary-border-color; - background: $view-navigator-background; - box-shadow: -1px 0 3px $shadow; + border-left: 1px solid var(--red-ui-primary-border-color); + border-top: 1px solid var(--red-ui-primary-border-color); + background: var(--red-ui-view-navigator-background); + box-shadow: -1px 0 3px var(--red-ui-shadow); } .red-ui-navigator-border { stroke-dasharray: 5,5; pointer-events: none; - stroke: $secondary-border-color; + stroke: var(--red-ui-secondary-border-color); stroke-width: 1; - fill: $view-background; + fill: var(--red-ui-view-background); } .red-ui-component-footer { @@ -182,7 +182,7 @@ button.red-ui-footer-button-toggle { #red-ui-loading-progress { position: absolute; - background: $primary-background; + background: var(--red-ui-primary-background); top: 0; bottom: 0; right: 0; @@ -196,7 +196,7 @@ button.red-ui-footer-button-toggle { width: 300px; height:80px; text-align: center; - color: $secondary-text-color; + color: var(--red-ui-secondary-text-color); } } @@ -204,13 +204,13 @@ button.red-ui-footer-button-toggle { box-sizing: border-box; width: 300px; height: 30px; - border: 2px solid $primary-border-color; + border: 2px solid var(--red-ui-primary-border-color); border-radius: 4px; > span { display: block; height: 100%; - background: $secondary-border-color; + background: var(--red-ui-secondary-border-color); transition: width 0.2s; width: 10%; } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss index 2a734eb43..d0b0370ab 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspaceToolbar.scss @@ -17,7 +17,7 @@ #red-ui-workspace-toolbar { display: none; - color: $workspace-button-color; + color: var(--red-ui-workspace-button-color); font-size: 12px; line-height: 18px; position: absolute; @@ -27,8 +27,8 @@ padding: 7px; height: 40px; box-sizing: border-box; - background: $secondary-background; - border-bottom: 1px solid $secondary-border-color; + background: var(--red-ui-secondary-background); + border-bottom: 1px solid var(--red-ui-secondary-border-color); white-space: nowrap; transition: right 0.2s ease; overflow: hidden; @@ -61,23 +61,23 @@ } } .button.active { - background: $workspace-button-background-active; + background: var(--red-ui-workspace-button-background-active); cursor: default; } } .spinner-value { width: 25px; - color: $workspace-button-color; + color: var(--red-ui-workspace-button-color); padding: 0 5px; display: inline-block; text-align: center; - border-top: 1px solid $secondary-border-color; - border-bottom: 1px solid $secondary-border-color; + border-top: 1px solid var(--red-ui-secondary-border-color); + border-bottom: 1px solid var(--red-ui-secondary-border-color); margin: 0; height: 24px; font-size: 12px; - background: $form-input-background; + background: var(--red-ui-form-input-background); line-height: 22px; box-sizing: border-box; } diff --git a/scripts/build-custom-theme.js b/scripts/build-custom-theme.js index e16b35e8b..3a904fea8 100644 --- a/scripts/build-custom-theme.js +++ b/scripts/build-custom-theme.js @@ -83,7 +83,7 @@ while((match = ruleRegex.exec(colorsFile)) !== null) { const result = sass.renderSync({ outputStyle: "expanded", - file: path.join(workingDir,"style.scss"), + file: path.join(workingDir,"style-custom-theme.scss"), }); const css = result.css.toString()