From d8c56df45f82f1ab697cd207012acac4859ae8fd Mon Sep 17 00:00:00 2001 From: Mauricio Bonani Date: Mon, 21 Oct 2024 11:49:30 -0400 Subject: [PATCH] Fix Sass deprecation warnings --- .../@node-red/editor-client/src/sass/ace.scss | 4 +- .../editor-client/src/sass/base.scss | 6 +- .../editor-client/src/sass/editor.scss | 16 +- .../editor-client/src/sass/flow.scss | 16 +- .../editor-client/src/sass/header.scss | 4 +- .../editor-client/src/sass/jquery.scss | 8 +- .../editor-client/src/sass/library.scss | 4 +- .../src/sass/palette-editor.scss | 10 +- .../editor-client/src/sass/palette.scss | 8 +- .../editor-client/src/sass/popover.scss | 6 +- .../editor-client/src/sass/sidebar.scss | 18 +- .../src/sass/style-custom-theme.scss | 6 +- .../editor-client/src/sass/style.scss | 88 ++-- .../editor-client/src/sass/tab-config.scss | 4 +- .../editor-client/src/sass/tab-info.scss | 6 +- .../editor-client/src/sass/tabs.scss | 8 +- .../src/sass/ui/common/treeList.scss | 4 +- .../src/sass/ui/common/typedInput.scss | 4 +- .../editor-client/src/sass/variables.scss | 454 +++++++++--------- .../editor-client/src/sass/workspace.scss | 12 +- .../src/sass/workspaceToolbar.scss | 8 +- 21 files changed, 367 insertions(+), 327 deletions(-) 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 5aad96b4d..439ebea56 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 @@ -1,3 +1,5 @@ +@use "mixins"; + .red-ui-editor, .red-ui-editor-dialog { .ace_read-only { @@ -42,7 +44,7 @@ background: var(--red-ui-popover-background); color: var(--red-ui-popover-color); border-radius: 4px; - @include component-shadow; + @include mixins.component-shadow; border-color: var(--red-ui-popover-background); } .ace_content { 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 58e77863d..63ab6b77f 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -43,7 +45,7 @@ body { } #red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade { - @include shade; + @include mixins.shade; z-index: 5; } #red-ui-sidebar-shade { @@ -52,7 +54,7 @@ body { bottom: -1px; } #red-ui-full-shade { - @include shade; + @include mixins.shade; z-index: 15; } .red-ui-editor, 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 dcc8060d4..72c711066 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -63,7 +65,7 @@ } } .red-ui-tray-header { - @include disable-selection; + @include mixins.disable-selection; position: relative; box-sizing: border-box; font-weight: bold; @@ -77,7 +79,7 @@ } .red-ui-tray-footer { - @include component-footer; + @include mixins.component-footer; height: 35px; font-size: 14px !important; line-height: 35px; @@ -110,9 +112,9 @@ padding: 6px; button { - @include editor-button; + @include mixins.editor-button; &.toggle { - @include workspace-button-toggle; + @include mixins.workspace-button-toggle; } } } @@ -179,7 +181,7 @@ } a.red-ui-tray-resize-button, button.red-ui-tray-resize-button { - @include workspace-button; + @include mixins.workspace-button; display: block; height: 37px; line-height: 35px; @@ -274,7 +276,7 @@ button.editor-button, // Deprecated: use .red-ui-button a.red-ui-button, button.red-ui-button { - @include workspace-button; + @include mixins.workspace-button; height: 34px; line-height: 32px; font-size: 13px; @@ -283,7 +285,7 @@ button.red-ui-button white-space: nowrap; text-overflow: ellipsis; &.toggle { - @include workspace-button-toggle; + @include mixins.workspace-button-toggle; } } 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 723e8ac79..c3f3f8597 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -41,7 +43,7 @@ font-size: 14px; pointer-events: none; -webkit-touch-callout: none; - @include disable-selection; + @include mixins.disable-selection; .red-ui-flow-node-label-text { dominant-baseline: middle; @@ -60,7 +62,7 @@ text-anchor: middle; pointer-events: none; -webkit-touch-callout: none; - @include disable-selection; + @include mixins.disable-selection; } @@ -155,7 +157,7 @@ svg:not(.red-ui-workspace-lasso-active) { stroke-opacity: var(--red-ui-group-default-stroke-opacity); } .red-ui-flow-group-label { - @include disable-selection; + @include mixins.disable-selection; fill: var(--red-ui-group-default-label-color); } @@ -174,10 +176,10 @@ svg:not(.red-ui-workspace-lasso-active) { } .red-ui-flow-node-icon-group { text { - @include disable-selection; + @include mixins.disable-selection; } .fa-lg { - @include disable-selection; + @include mixins.disable-selection; stroke: none; fill: var(--red-ui-node-icon-color); text-anchor: middle; @@ -311,7 +313,7 @@ g.red-ui-flow-node-selected { fill-opacity: 0.9; } .red-ui-flow-node-status-label { - @include disable-selection; + @include mixins.disable-selection; stroke-width: 0; fill: var(--red-ui-secondary-text-color); font-size:9pt; @@ -417,7 +419,7 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line { pointer-events: none; -webkit-touch-callout: none; white-space: pre; - @include disable-selection; + @include mixins.disable-selection; } .red-ui-flow-junction-dragging { .red-ui-flow-junction-background { 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 550310205..3cff8f039 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -15,7 +17,7 @@ **/ .button { - @include disable-selection; + @include mixins.disable-selection; } #red-ui-header { 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 ec76049f9..ca3651c61 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -54,7 +56,7 @@ border-radius: 1px; background: var(--red-ui-secondary-background); padding: 0; - @include component-shadow; + @include mixins.component-shadow; } .ui-dialog .ui-dialog-content { padding: 25px 25px 10px 25px; @@ -92,7 +94,7 @@ } .ui-dialog-buttonset button { - @include workspace-button; + @include mixins.workspace-button; font-size: 14px; padding: 6px 14px; margin-right: 8px; @@ -160,7 +162,7 @@ .ui-widget-overlay { - @include shade; + @include mixins.shade; z-index: 100; opacity: 1; } 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 0b6ca55ed..7cad29397 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -254,7 +256,7 @@ display: flex; flex-direction: row; span:not(:nth-child(2)) { - @include disable-selection; + @include mixins.disable-selection; } span { padding: 8px 0; 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 947ada2e8..b099ca467 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -167,7 +169,7 @@ color: var(--red-ui-secondary-text-color); padding-left: 5px; font-size: 0.9em; - @include enable-selection; + @include mixins.enable-selection; } .red-ui-palette-module-type-swatch { display: inline-block; @@ -226,12 +228,12 @@ .red-ui-palette-module-name { color: var(--red-ui-primary-text-color); white-space: nowrap; - @include enable-selection; + @include mixins.enable-selection; } .red-ui-palette-module-version, .red-ui-palette-module-updated, .red-ui-palette-module-link { font-style:italic; font-size: 0.8em; - @include enable-selection; + @include mixins.enable-selection; } .red-ui-palette-module-button-group { position: absolute; @@ -256,7 +258,7 @@ ul.red-ui-palette-module-error-list { } .red-ui-palette-module-shade { - @include shade; + @include mixins.shade; text-align: center; padding-top: 20px; } 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 a3afc3d76..aefe1671c 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -23,8 +25,8 @@ background: var(--red-ui-primary-background); width: 180px; text-align: center; - @include disable-selection; - @include component-border; + @include mixins.disable-selection; + @include mixins.component-border; transition: width 0.2s ease-in-out; } @@ -112,7 +114,7 @@ line-height: 20px; overflow: hidden; text-align: center; - @include disable-selection; + @include mixins.disable-selection; } .red-ui-palette-label-right { margin: 4px 32px 4px 0; 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 53d1c7cab..3df2b495b 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -28,7 +30,7 @@ font-family: var(--red-ui-primary-font); font-size: 14px; line-height: 1.4em; - @include component-shadow; + @include mixins.component-shadow; border-color: var(--red-ui-popover-border); } .red-ui-popover-content { @@ -194,7 +196,7 @@ .red-ui-popover-panel { - @include component-shadow; + @include mixins.component-shadow; font-family: var(--red-ui-primary-font); font-size: var(--red-ui-primary-font-size); position: absolute; 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 21a57d29d..47c8dbc13 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -23,7 +25,7 @@ background: var(--red-ui-primary-background); box-sizing: border-box; z-index: 10; - @include component-border; + @include mixins.component-border; } #red-ui-sidebar.closing { @@ -73,7 +75,7 @@ .red-ui-sidebar-closed > #red-ui-editor-stack { right: 8px !important; } #red-ui-sidebar .button { - @include workspace-button; + @include mixins.workspace-button; line-height: 18px; font-size: 12px; margin-right: 5px; @@ -92,23 +94,23 @@ /* Deprecated -> red-ui-footer-button */ .sidebar-footer-button { - @include component-footer-button; + @include mixins.component-footer-button; } /* Deprecated -> red-ui-footer-button-toggle */ .sidebar-footer-button-toggle { - @include component-footer-button-toggle; + @include mixins.component-footer-button-toggle; } a.sidebar-header-button, button.sidebar-header-button, /* Deprecated -> red-ui-sidebar-header-button */ a.red-ui-sidebar-header-button, button.red-ui-sidebar-header-button { - @include workspace-button; + @include mixins.workspace-button; font-size: 13px; line-height: 13px; padding: 5px 8px; &.toggle { - @include workspace-button-toggle; + @include mixins.workspace-button-toggle; } } @@ -116,7 +118,7 @@ a.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-to button.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */ a.red-ui-sidebar-header-button-toggle, button.red-ui-sidebar-header-button-toggle { - @include workspace-button-toggle; + @include mixins.workspace-button-toggle; font-size: 13px; line-height: 13px; padding: 5px 8px; @@ -128,7 +130,7 @@ button.red-ui-sidebar-header-button-toggle { } .red-ui-sidebar-shade { - @include shade; + @include mixins.shade; } 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 index 312081503..622639bea 100644 --- 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 @@ -14,6 +14,6 @@ * limitations under the License. **/ -@import "colors"; -@import "sizes"; -@import "variables"; \ No newline at end of file +@use "colors"; +@use "sizes"; +@use "variables"; \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/sass/style.scss b/packages/node_modules/@node-red/editor-client/src/sass/style.scss index 77148abde..2b79e8fa0 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/style.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/style.scss @@ -14,64 +14,64 @@ * limitations under the License. **/ -@import "colors"; -@import "sizes"; -@import "variables"; -@import "mixins"; +@use "colors"; +@use "sizes"; +@use "variables"; +@use "mixins"; -@import "base"; -@import "forms"; +@use "base"; +@use "forms"; -@import "jquery"; -@import "ace"; +@use "jquery"; +@use "ace"; -@import "dropdownMenu"; +@use "dropdownMenu"; -@import "header"; -@import "palette"; -@import "sidebar"; -@import "workspace"; -@import "workspaceToolbar"; +@use "header"; +@use "palette"; +@use "sidebar"; +@use "workspace"; +@use "workspaceToolbar"; -@import "notifications"; +@use "notifications"; -@import "editor"; -@import "library"; -@import "search"; +@use "editor"; +@use "library"; +@use "search"; -@import "panels"; -@import "tabs"; -@import "tab-config"; -@import "tab-context"; -@import "tab-info"; -@import "tab-help"; -@import "popover"; -@import "flow"; -@import "palette-editor"; -@import "diff"; +@use "panels"; +@use "tabs"; +@use "tab-config"; +@use "tab-context"; +@use "tab-info"; +@use "tab-help"; +@use "popover"; +@use "flow"; +@use "palette-editor"; +@use "diff"; -@import "userSettings"; +@use "userSettings"; -@import "projects"; +@use "projects"; -@import "ui/common/editableList"; -@import "ui/common/searchBox"; -@import "ui/common/typedInput"; -@import "ui/common/nodeList"; -@import "ui/common/checkboxSet"; -@import "ui/common/stack"; -@import "ui/common/treeList"; -@import "ui/common/autoComplete"; +@use "ui/common/editableList"; +@use "ui/common/searchBox"; +@use "ui/common/typedInput"; +@use "ui/common/nodeList"; +@use "ui/common/checkboxSet"; +@use "ui/common/stack"; +@use "ui/common/treeList"; +@use "ui/common/autoComplete"; -@import "dragdrop"; +@use "dragdrop"; -@import "keyboard"; +@use "keyboard"; -@import "debug"; +@use "debug"; -@import "radialMenu"; +@use "radialMenu"; -@import "tourGuide"; +@use "tourGuide"; -@import "multiplayer"; +@use "multiplayer"; 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 aed01240a..1fac4ffc8 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -19,7 +21,7 @@ background: var(--red-ui-secondary-background); height: 100%; overflow-y:auto; - @include disable-selection; + @include mixins.disable-selection; &:focus { outline: none; 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 313025b27..732d4dfe8 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -25,6 +27,7 @@ padding-left: 9px; line-height: 21px; cursor: default; + border-bottom: 1px solid var(--red-ui-secondary-border-color); > * { vertical-align: middle } @@ -33,7 +36,6 @@ margin-left: 5px; overflow-wrap: anywhere; } - border-bottom: 1px solid var(--red-ui-secondary-border-color); } table.red-ui-info-table { font-size: 14px; @@ -307,7 +309,7 @@ div.red-ui-info-table { text-align: center; line-height: 1.9em; color : var(--red-ui-tertiary-text-color); - @include disable-selection; + @include mixins.disable-selection; cursor: default; } .red-ui-help-tips-buttons { 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 595423888..0180b0cfa 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -41,7 +43,7 @@ box-sizing:border-box; border-bottom: 1px solid var(--red-ui-primary-border-color); white-space: nowrap; - @include disable-selection; + @include mixins.disable-selection; li { box-sizing: border-box; @@ -243,7 +245,7 @@ z-index: 2; a { - @include workspace-button; + @include mixins.workspace-button; line-height: 30px; height: 28px; width: 28px; @@ -265,7 +267,7 @@ border-bottom: 1px solid var(--red-ui-primary-border-color); z-index: 2; a { - @include workspace-button-toggle; + @include mixins.workspace-button-toggle; line-height: 26px; height: 28px; width: 28px; 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 f076a533e..25373b138 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 @@ -1,3 +1,5 @@ +@use "../../mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -67,7 +69,7 @@ } } .red-ui-treeList-label { - @include disable-selection; + @include mixins.disable-selection; padding: 6px 0; display: flex; align-items: center; 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 1a421fac5..bfbb814a3 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 @@ -1,3 +1,5 @@ +@use "../../mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -67,7 +69,7 @@ } } .red-ui-typedInput-options { - @include component-shadow; + @include mixins.component-shadow; font-family: var(--red-ui-primary-font); font-size: var(--red-ui-primary-font-size); 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 bc8f9da17..9f34d8fde 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,305 +1,309 @@ +@use "sass:map"; +@use "colors"; +@use "sizes"; + :root { - --red-ui-primary-font: #{$primary-font}; - --red-ui-primary-font-size: #{$primary-font-size}; - --red-ui-monospace-font: #{$monospace-font}; + --red-ui-primary-font: #{colors.$primary-font}; + --red-ui-primary-font-size: #{colors.$primary-font-size}; + --red-ui-monospace-font: #{colors.$monospace-font}; - --red-ui-primary-background: #{$primary-background}; + --red-ui-primary-background: #{colors.$primary-background}; - --red-ui-secondary-background: #{$secondary-background}; - --red-ui-secondary-background-selected: #{$secondary-background-selected}; - --red-ui-secondary-background-inactive: #{$secondary-background-inactive}; - --red-ui-secondary-background-hover: #{$secondary-background-hover}; - --red-ui-secondary-background-disabled: #{$secondary-background-disabled}; + --red-ui-secondary-background: #{colors.$secondary-background}; + --red-ui-secondary-background-selected: #{colors.$secondary-background-selected}; + --red-ui-secondary-background-inactive: #{colors.$secondary-background-inactive}; + --red-ui-secondary-background-hover: #{colors.$secondary-background-hover}; + --red-ui-secondary-background-disabled: #{colors.$secondary-background-disabled}; - --red-ui-tertiary-background: #{$tertiary-background}; + --red-ui-tertiary-background: #{colors.$tertiary-background}; - --red-ui-shadow: #{$shadow}; + --red-ui-shadow: #{colors.$shadow}; // Header Height - --red-ui-header-height: #{$header-height}; + --red-ui-header-height: #{sizes.$header-height}; // Main body text - --red-ui-primary-text-color: #{$primary-text-color}; + --red-ui-primary-text-color: #{colors.$primary-text-color}; // UI control label text - --red-ui-secondary-text-color: #{$secondary-text-color}; - --red-ui-secondary-text-color-focus: #{$secondary-text-color-focus}; - --red-ui-secondary-text-color-hover: #{$secondary-text-color-hover}; - --red-ui-secondary-text-color-active: #{$secondary-text-color-active}; - --red-ui-secondary-text-color-selected: #{$secondary-text-color-selected}; - --red-ui-secondary-text-color-inactive: #{$secondary-text-color-inactive}; - --red-ui-secondary-text-color-disabled: #{$secondary-text-color-disabled}; - --red-ui-secondary-text-color-disabled-active: #{$secondary-text-color-disabled-active}; - --red-ui-secondary-text-color-disabled-inactive: #{$secondary-text-color-disabled-inactive}; + --red-ui-secondary-text-color: #{colors.$secondary-text-color}; + --red-ui-secondary-text-color-focus: #{colors.$secondary-text-color-focus}; + --red-ui-secondary-text-color-hover: #{colors.$secondary-text-color-hover}; + --red-ui-secondary-text-color-active: #{colors.$secondary-text-color-active}; + --red-ui-secondary-text-color-selected: #{colors.$secondary-text-color-selected}; + --red-ui-secondary-text-color-inactive: #{colors.$secondary-text-color-inactive}; + --red-ui-secondary-text-color-disabled: #{colors.$secondary-text-color-disabled}; + --red-ui-secondary-text-color-disabled-active: #{colors.$secondary-text-color-disabled-active}; + --red-ui-secondary-text-color-disabled-inactive: #{colors.$secondary-text-color-disabled-inactive}; // Sub label text - --red-ui-tertiary-text-color: #{$tertiary-text-color}; + --red-ui-tertiary-text-color: #{colors.$tertiary-text-color}; // Heading text - --red-ui-header-text-color: #{$header-text-color}; + --red-ui-header-text-color: #{colors.$header-text-color}; - --red-ui-text-color-error: #{$text-color-error}; - --red-ui-text-color-warning: #{$text-color-warning}; - --red-ui-text-color-success: #{$text-color-success}; - --red-ui-text-color-code: #{$text-color-code}; - --red-ui-text-color-link: #{$text-color-link}; + --red-ui-text-color-error: #{colors.$text-color-error}; + --red-ui-text-color-warning: #{colors.$text-color-warning}; + --red-ui-text-color-success: #{colors.$text-color-success}; + --red-ui-text-color-code: #{colors.$text-color-code}; + --red-ui-text-color-link: #{colors.$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}; + --red-ui-primary-border-color: #{colors.$primary-border-color}; + --red-ui-secondary-border-color: #{colors.$secondary-border-color}; + --red-ui-tertiary-border-color: #{colors.$tertiary-border-color}; - --red-ui-border-color-error: #{$border-color-error}; - --red-ui-border-color-warning: #{$border-color-warning}; - --red-ui-border-color-success: #{$border-color-success}; + --red-ui-border-color-error: #{colors.$border-color-error}; + --red-ui-border-color-warning: #{colors.$border-color-warning}; + --red-ui-border-color-success: #{colors.$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-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-background: #{colors.$form-background}; + --red-ui-form-placeholder-color: #{colors.$form-placeholder-color}; + --red-ui-form-text-color: #{colors.$form-text-color}; + --red-ui-form-text-color-disabled: #{colors.$form-text-color-disabled}; + --red-ui-form-input-focus-color: #{colors.$form-input-focus-color}; + --red-ui-form-input-border-color: #{colors.$form-input-border-color}; + --red-ui-form-input-border-selected-color: #{colors.$form-input-border-selected-color}; + --red-ui-form-input-border-error-color: #{colors.$form-input-border-error-color}; + --red-ui-form-input-background: #{colors.$form-input-background}; + --red-ui-form-input-background-disabled: #{colors.$form-input-background-disabled}; + --red-ui-form-button-background: #{colors.$form-button-background}; - --red-ui-form-tips-background: #{$form-tips-background}; + --red-ui-form-tips-background: #{colors.$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-text-editor-color: #{colors.$text-editor-color}; + --red-ui-text-editor-background: #{colors.$text-editor-background}; + --red-ui-text-editor-color-disabled: #{colors.$text-editor-color-disabled}; + --red-ui-text-editor-background-disabled: #{colors.$text-editor-background-disabled}; + --red-ui-text-editor-gutter-background: #{colors.$text-editor-gutter-background}; + --red-ui-text-editor-gutter-color: #{colors.$text-editor-gutter-color}; + --red-ui-text-editor-gutter-active-line-background: #{colors.$text-editor-gutter-active-line-background}; + --red-ui-text-editor-active-line-background: #{colors.$text-editor-active-line-background}; + --red-ui-text-editor-selection-background: #{colors.$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-event-log-background: #{colors.$event-log-background}; + --red-ui-event-log-color: #{colors.$event-log-color}; + --red-ui-event-log-active-line-background: #{colors.$event-log-active-line-background}; + --red-ui-event-log-selection-background: #{colors.$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}; - --red-ui-list-item-background-disabled: #{$list-item-background-disabled}; - --red-ui-list-item-background-hover: #{$list-item-background-hover}; - --red-ui-list-item-background-selected: #{$list-item-background-selected}; - --red-ui-list-item-border-selected: #{$list-item-border-selected}; + --red-ui-list-item-color: #{colors.$list-item-color}; + --red-ui-list-item-secondary-color: #{colors.$list-item-secondary-color}; + --red-ui-list-item-background: #{colors.$list-item-background}; + --red-ui-list-item-background-disabled: #{colors.$list-item-background-disabled}; + --red-ui-list-item-background-hover: #{colors.$list-item-background-hover}; + --red-ui-list-item-background-selected: #{colors.$list-item-background-selected}; + --red-ui-list-item-border-selected: #{colors.$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-text-color-active: #{colors.$tab-text-color-active}; + --red-ui-tab-text-color-inactive: #{colors.$tab-text-color-inactive}; + --red-ui-tab-text-color-disabled-active: #{colors.$tab-text-color-disabled-active}; + --red-ui-tab-text-color-disabled-inactive: #{colors.$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-tab-badge-color: #{colors.$tab-badge-color}; + --red-ui-tab-background: #{colors.$tab-background}; + --red-ui-tab-background-active: #{colors.$tab-background-active}; + --red-ui-tab-background-active-alpha: #{colors.$tab-background-active-alpha}; + --red-ui-tab-background-selected: #{colors.$tab-background-selected}; + --red-ui-tab-background-selected-alpha: #{colors.$tab-background-selected-alpha}; + --red-ui-tab-background-inactive: #{colors.$tab-background-inactive}; + --red-ui-tab-background-inactive-alpha: #{colors.$tab-background-inactive-alpha}; + --red-ui-tab-background-hover: #{colors.$tab-background-hover}; + --red-ui-tab-background-hover-alpha: #{colors.$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-palette-header-background: #{colors.$palette-header-background}; + --red-ui-palette-header-color: #{colors.$palette-header-color}; + --red-ui-palette-content-background: #{colors.$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-background: #{colors.$workspace-button-background}; + --red-ui-workspace-button-background-hover: #{colors.$workspace-button-background-hover}; + --red-ui-workspace-button-background-active: #{colors.$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: #{colors.$workspace-button-color}; + --red-ui-workspace-button-color-disabled: #{colors.$workspace-button-color-disabled}; + --red-ui-workspace-button-color-focus: #{colors.$workspace-button-color-focus}; + --red-ui-workspace-button-color-hover: #{colors.$workspace-button-color-hover}; + --red-ui-workspace-button-color-active: #{colors.$workspace-button-color-active}; + --red-ui-workspace-button-color-selected: #{colors.$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-primary: #{colors.$workspace-button-color-primary}; + --red-ui-workspace-button-background-primary: #{colors.$workspace-button-background-primary}; + --red-ui-workspace-button-background-primary-hover: #{colors.$workspace-button-background-primary-hover}; - --red-ui-workspace-button-color-focus-outline: #{$workspace-button-color-focus-outline}; + --red-ui-workspace-button-color-focus-outline: #{colors.$workspace-button-color-focus-outline}; - --red-ui-shade-color: #{$shade-color}; + --red-ui-shade-color: #{colors.$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-popover-background: #{colors.$popover-background}; + --red-ui-popover-border: #{colors.$popover-border}; + --red-ui-popover-color: #{colors.$popover-color}; + --red-ui-popover-button-border-color: #{colors.$popover-button-border-color}; + --red-ui-popover-button-border-color-hover: #{colors.$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-text-header-color: #{colors.$diff-text-header-color}; + --red-ui-diff-text-header-background: #{colors.$diff-text-header-background}; + --red-ui-diff-state-color: #{colors.$diff-state-color}; + --red-ui-diff-state-prefix-color: #{colors.$diff-state-prefix-color}; + --red-ui-diff-state-added: #{colors.$diff-state-added}; + --red-ui-diff-state-deleted: #{colors.$diff-state-deleted}; + --red-ui-diff-state-changed: #{colors.$diff-state-changed}; + --red-ui-diff-state-changed-background: #{colors.$diff-state-changed-background}; + --red-ui-diff-state-unchanged: #{colors.$diff-state-unchanged}; + --red-ui-diff-state-unchanged-background: #{colors.$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-conflicted: #{colors.$diff-state-conflicted}; + --red-ui-diff-state-moved: #{colors.$diff-state-moved}; + --red-ui-diff-state-conflict: #{colors.$diff-state-conflict}; + --red-ui-diff-state-conflict-background: #{colors.$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-added-background: #{colors.$diff-state-added-background}; + --red-ui-diff-state-added-border: #{colors.$diff-state-added-border}; + --red-ui-diff-state-added-header-background: #{colors.$diff-state-added-header-background}; + --red-ui-diff-state-added-header-border: #{colors.$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-state-deleted-background: #{colors.$diff-state-deleted-background}; + --red-ui-diff-state-deleted-border: #{colors.$diff-state-deleted-border}; + --red-ui-diff-state-deleted-header-background: #{colors.$diff-state-deleted-header-background}; + --red-ui-diff-state-deleted-header-border: #{colors.$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-diff-merge-header-color: #{colors.$diff-merge-header-color}; + --red-ui-diff-merge-header-background: #{colors.$diff-merge-header-background}; + --red-ui-diff-merge-header-border-color: #{colors.$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-menuBackground: #{colors.$menuBackground}; + --red-ui-menuDivider: #{colors.$menuDivider}; + --red-ui-menuColor: #{colors.$menuColor}; + --red-ui-menuActiveColor: #{colors.$menuActiveColor}; + --red-ui-menuActiveBackground: #{colors.$menuActiveBackground}; + --red-ui-menuDisabledColor: #{colors.$menuDisabledColor}; + --red-ui-menuHoverColor: #{colors.$menuHoverColor}; + --red-ui-menuHoverBackground: #{colors.$menuHoverBackground}; + --red-ui-menuCaret: #{colors.$menuCaret}; - --red-ui-view-navigator-background: #{$view-navigator-background}; + --red-ui-view-navigator-background: #{colors.$view-navigator-background}; - --red-ui-view-lasso-stroke: #{$view-lasso-stroke}; - --red-ui-view-lasso-fill: #{$view-lasso-fill}; + --red-ui-view-lasso-stroke: #{colors.$view-lasso-stroke}; + --red-ui-view-lasso-fill: #{colors.$view-lasso-fill}; - --red-ui-view-background: #{$view-background}; - --red-ui-view-grid-color: #{$view-grid-color}; + --red-ui-view-background: #{colors.$view-background}; + --red-ui-view-grid-color: #{colors.$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-label-color: #{colors.$node-label-color}; + --red-ui-node-port-label-color: #{colors.$node-port-label-color}; + --red-ui-node-border: #{colors.$node-border}; + --red-ui-node-border-unknown: #{colors.$node-border-unknown}; + --red-ui-node-border-placeholder: #{colors.$node-border-placeholder}; + --red-ui-node-background-placeholder: #{colors.$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-port-background: #{colors.$node-port-background}; + --red-ui-node-port-background-hover: #{colors.$node-port-background-hover}; + --red-ui-node-icon-color: #{colors.$node-icon-color}; + --red-ui-node-icon-background-color: #{colors.$node-icon-background-color}; + --red-ui-node-icon-background-color-fill: #{colors.$node-icon-background-color-fill}; + --red-ui-node-icon-background-color-opacity: #{colors.$node-icon-background-color-opacity}; + --red-ui-node-icon-border-color: #{colors.$node-icon-border-color}; + --red-ui-node-icon-border-color-opacity: #{colors.$node-icon-border-color-opacity}; - --red-ui-node-config-background: #{$node-config-background}; - --red-ui-node-config-icon-container-disabled: #{$node-config-icon-container-disabled}; + --red-ui-node-config-background: #{colors.$node-config-background}; + --red-ui-node-config-icon-container-disabled: #{colors.$node-config-icon-container-disabled}; - --red-ui-node-link-port-background: #{$node-link-port-background}; + --red-ui-node-link-port-background: #{colors.$node-link-port-background}; - --red-ui-node-status-error-border: #{$node-status-error-border}; - --red-ui-node-status-error-background: #{$node-status-error-background}; - --red-ui-node-status-changed-border: #{$node-status-changed-border}; - --red-ui-node-status-changed-background: #{$node-status-changed-background}; + --red-ui-node-status-error-border: #{colors.$node-status-error-border}; + --red-ui-node-status-error-background: #{colors.$node-status-error-background}; + --red-ui-node-status-changed-border: #{colors.$node-status-changed-border}; + --red-ui-node-status-changed-background: #{colors.$node-status-changed-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-status-colors-#{"" + $current-color}: #{map.get(colors.$node-status-colors, $current-color)}; } - --red-ui-node-selected-color: #{$node-selected-color}; - --red-ui-port-selected-color: #{$port-selected-color}; + --red-ui-node-selected-color: #{colors.$node-selected-color}; + --red-ui-port-selected-color: #{colors.$port-selected-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-link-color: #{colors.$link-color}; + --red-ui-link-link-color: #{colors.$link-link-color}; + --red-ui-link-disabled-color: #{colors.$link-disabled-color}; + --red-ui-link-link-active-color: #{colors.$link-link-active-color}; + --red-ui-link-unknown-color: #{colors.$link-unknown-color}; - --red-ui-clipboard-textarea-background: #{$clipboard-textarea-background}; + --red-ui-clipboard-textarea-background: #{colors.$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-deploy-button-color: #{colors.$deploy-button-color}; + --red-ui-deploy-button-color-active: #{colors.$deploy-button-color-active}; + --red-ui-deploy-button-color-disabled: #{colors.$deploy-button-color-disabled}; + --red-ui-deploy-button-background: #{colors.$deploy-button-background}; + --red-ui-deploy-button-background-hover: #{colors.$deploy-button-background-hover}; + --red-ui-deploy-button-background-active: #{colors.$deploy-button-background-active}; + --red-ui-deploy-button-background-disabled: #{colors.$deploy-button-background-disabled}; + --red-ui-deploy-button-background-disabled-hover: #{colors.$deploy-button-background-disabled-hover}; - --red-ui-header-background: #{$header-background}; - --red-ui-header-accent: #{$header-accent}; - --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-header-background: #{colors.$header-background}; + --red-ui-header-accent: #{colors.$header-accent}; + --red-ui-header-button-background-active: #{colors.$header-button-background-active}; + --red-ui-header-menu-color: #{colors.$header-menu-color}; + --red-ui-header-menu-color-disabled: #{colors.$header-menu-color-disabled}; + --red-ui-header-menu-heading-color: #{colors.$header-menu-heading-color}; + --red-ui-header-menu-sublabel-color: #{colors.$header-menu-sublabel-color}; + --red-ui-header-menu-background: #{colors.$header-menu-background}; + --red-ui-header-menu-item-hover: #{colors.$header-menu-item-hover}; + --red-ui-header-menu-item-border-active: #{colors.$header-menu-item-border-active}; + --red-ui-headerMenuItemDivider: #{colors.$headerMenuItemDivider}; + --red-ui-headerMenuCaret: #{colors.$headerMenuCaret}; - --red-ui-vcCommitShaColor: #{$vcCommitShaColor}; + --red-ui-vcCommitShaColor: #{colors.$vcCommitShaColor}; - --red-ui-dnd-background: #{$dnd-background}; - --red-ui-dnd-color: #{$dnd-color}; + --red-ui-dnd-background: #{colors.$dnd-background}; + --red-ui-dnd-color: #{colors.$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-notification-border-default: #{colors.$notification-border-default}; + --red-ui-notification-border-success: #{colors.$notification-border-success}; + --red-ui-notification-border-warning: #{colors.$notification-border-warning}; + --red-ui-notification-border-error: #{colors.$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-background: #{colors.$debug-message-background}; + --red-ui-debug-message-background-hover: #{colors.$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-text-color: #{colors.$debug-message-text-color}; + --red-ui-debug-message-text-color-meta: #{colors.$debug-message-text-color-meta}; + --red-ui-debug-message-text-color-object-key: #{colors.$debug-message-text-color-object-key}; + --red-ui-debug-message-text-color-msg-type-other: #{colors.$debug-message-text-color-msg-type-other}; + --red-ui-debug-message-text-color-msg-type-string: #{colors.$debug-message-text-color-msg-type-string}; + --red-ui-debug-message-text-color-msg-type-null: #{colors.$debug-message-text-color-msg-type-null}; + --red-ui-debug-message-text-color-msg-type-meta: #{colors.$debug-message-text-color-msg-type-meta}; + --red-ui-debug-message-text-color-msg-type-number: #{colors.$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-debug-message-border: #{colors.$debug-message-border}; + --red-ui-debug-message-border-hover: #{colors.$debug-message-border-hover}; + --red-ui-debug-message-border-warning: #{colors.$debug-message-border-warning}; + --red-ui-debug-message-border-error: #{colors.$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-group-default-fill: #{colors.$group-default-fill}; + --red-ui-group-default-fill-opacity: #{colors.$group-default-fill-opacity}; + --red-ui-group-default-stroke: #{colors.$group-default-stroke}; + --red-ui-group-default-stroke-opacity: #{colors.$group-default-stroke-opacity}; + --red-ui-group-default-label-color: #{colors.$group-default-label-color}; - --red-ui-tourGuide-border: #{$tourGuide-border}; - --red-ui-tourGuide-heading-color: #{$tourGuide-heading-color}; + --red-ui-tourGuide-border: #{colors.$tourGuide-border}; + --red-ui-tourGuide-heading-color: #{colors.$tourGuide-heading-color}; - --red-ui-grip-color: #{$grip-color}; + --red-ui-grip-color: #{colors.$grip-color}; - --red-ui-icons-flow-color: #{$icons-flow-color}; + --red-ui-icons-flow-color: #{colors.$icons-flow-color}; - --red-ui-spinner-color: #{$spinner-color}; + --red-ui-spinner-color: #{colors.$spinner-color}; - --red-ui-tab-icon-color: #{$tab-icon-color}; + --red-ui-tab-icon-color: #{colors.$tab-icon-color}; @each $current-color in 1 2 3 4 5 { - --red-ui-user-profile-colors-#{"" + $current-color}: #{map-get($user-profile-colors, $current-color)}; + --red-ui-user-profile-colors-#{"" + $current-color}: #{map.get(colors.$user-profile-colors, $current-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 e096c7cf3..95b8b4b45 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -22,7 +24,7 @@ bottom: 0px; right: 322px; overflow: hidden; - @include component-border; + @include mixins.component-border; transition: left 0.1s ease-in-out; } @@ -40,7 +42,7 @@ } } #red-ui-workspace-tabs-shade { - @include shade; + @include mixins.shade; z-index: 2; bottom: auto; height: 35px; @@ -157,7 +159,7 @@ } .red-ui-component-footer { - @include component-footer; + @include mixins.component-footer; > .button-group { display: inline-block; @@ -176,12 +178,12 @@ a.red-ui-footer-button, button.red-ui-footer-button { - @include component-footer-button; + @include mixins.component-footer-button; } a.red-ui-footer-button-toggle, button.red-ui-footer-button-toggle { - @include component-footer-button-toggle; + @include mixins.component-footer-button-toggle; } .red-ui-statusbar-widget { 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 d0b0370ab..7bc79f35a 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 @@ -1,3 +1,5 @@ +@use "mixins"; + /** * Copyright JS Foundation and other contributors, http://js.foundation * @@ -32,7 +34,7 @@ white-space: nowrap; transition: right 0.2s ease; overflow: hidden; - @include disable-selection; + @include mixins.disable-selection; label { padding: 1px 8px; @@ -44,12 +46,12 @@ padding: 0; } .button { - @include workspace-button; + @include mixins.workspace-button; margin-right: 10px; padding: 2px 8px; } .button-group { - @include disable-selection; + @include mixins.disable-selection; .button:first-child { margin-right: 0;