frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #2994 from node-red/css-vars 

Add css named variables for certain key colours
This commit is contained in:
Nick O'Leary 2021-05-27 12:18:05 +01:00 committed by GitHub
parent 3d405f8c63 de142ac9d6
commit 2cd74d355c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 143 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/node_modules/@node-red/editor-client/src/sass/base.scss vendored
View File

@ -149,7 +149,7 @@ body {
.red-ui-font-code {
font-family: $monospace-font;
font-size: $primary-font-size;
color: $info-text-code-color;
color: $text-color-code;
white-space: nowrap;
}
@ -158,7 +158,7 @@ body {
font-size: $primary-font-size;
padding: 0px;
margin: 1px;
color: $info-text-code-color;
color: $text-color-code;
white-space: nowrap;
}

33
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -48,15 +48,22 @@ $tertiary-text-color: #aaa;//#90f;
// Heading text
$header-text-color: #444;//#f00;
$text-color-warning: #AD1625;
$text-color-green: #3a3;
$text-color-error: #AD1625;
$text-color-warning: #CAB200;
$text-color-success: #3a3;
$text-color-code: #AD1625;
$text-color-link: #0088cc;
$primary-border-color: #bbbbbb;//#f00;
$secondary-border-color: #dddddd;//#0f0;
$tertiary-border-color: #ccc;//#00f;
$form-background: $secondary-background;
$border-color-error: #DF2935;
$border-color-warning: #FFCF70;
$border-color-success: #4B8400;
$form-background: $secondary-background;
$form-placeholder-color: $tertiary-text-color;
$form-text-color: $primary-text-color;
$form-text-color-disabled: $secondary-text-color-disabled;
@ -257,16 +264,13 @@ $headerMenuCaret: #C7C7C7;
$vcCommitShaColor: #c38888;
$info-text-code-color: #AD1625;
$info-text-link-color: #0088cc;
$dnd-background: rgba(0,0,0,0.3);
$dnd-color: #fff;
$notification-border-default: #325C80;
$notification-border-success: #4B8400;
$notification-border-warning: #D74108;
$notification-border-error: $text-color-warning;
$notification-border-success: $border-color-success;
$notification-border-warning: $border-color-warning;
$notification-border-error: $border-color-error;
$debug-message-background: $secondary-background;
$debug-message-background-hover: $secondary-background-selected;
@ -282,11 +286,16 @@ $debug-message-text-color-msg-type-number: #2033d6;
$debug-message-border: #eee;
$debug-message-border-hover: #999;
$debug-message-border-warning: #ffdf9d;
$debug-message-border-error: #f99;
$debug-message-border-warning: $border-color-warning;
$debug-message-border-error: $border-color-error;
$group-default-fill: none;
$group-default-fill-opacity: 1;
$group-default-stroke: #999;
$group-default-stroke-opacity: 1;
$group-default-label-color: #a4a4a4;
$group-default-label-color: #a4a4a4;
// Deprecated
$text-color-green: $text-color-success;
$info-text-code-color: $text-color-code;
$info-text-link-color: $text-color-link;

2
packages/node_modules/@node-red/editor-client/src/sass/diff.scss vendored
View File

@ -500,7 +500,7 @@ ul.red-ui-deploy-dialog-confirm-list {
width: 30px;
margin-right: 10px;
&.fa-check {
color: $text-color-green;
color: $text-color-success;
}
&.fa-exclamation {
color: $secondary-text-color;

2
packages/node_modules/@node-red/editor-client/src/sass/editor.scss vendored
View File

@ -222,7 +222,7 @@ button.red-ui-tray-resize-button {
}
.form-warning {
border-color: $text-color-warning;
border-color: $text-color-error;
}
}

1
packages/node_modules/@node-red/editor-client/src/sass/forms.scss vendored
View File

@ -395,6 +395,7 @@
select[readonly],
textarea[readonly] {
cursor: not-allowed;
color: $form-text-color-disabled;
background-color: $form-input-background-disabled;
}

2
packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss vendored
View File

@ -174,7 +174,7 @@
display: block;
text-align: center;
padding: 12px 8px;
color: $text-color-warning;
color: $text-color-code;
&:hover {
text-decoration: none;

25
packages/node_modules/@node-red/editor-client/src/sass/palette.scss vendored
View File

@ -265,6 +265,22 @@
top: -1px;
left: 0px;
}
&.red-ui-palette-icon-flow,
&.red-ui-palette-icon-group,
&.red-ui-palette-icon-selection {
background: none;
border-color: transparent;
.red-ui-palette-icon-container {
background: none;
}
.red-ui-palette-icon-fa {
color: $secondary-text-color;
font-size: 16px;
}
}
}
.red-ui-node-icon-container {
display: inline-flex;
@ -281,6 +297,15 @@
.red-ui-palette-icon-fa {
font-size: 11px;
}
.red-ui-icons-flow {
width: 14px;
}
&.red-ui-palette-icon-flow {
margin-top: -2px;
}
&.red-ui-palette-icon-group .red-ui-palette-icon-fa {
font-size: 14px;
}
}
.red-ui-node-label {
}

1
packages/node_modules/@node-red/editor-client/src/sass/style.scss vendored
View File

@ -15,6 +15,7 @@
**/
@import "colors";
@import "variables";
@import "mixins";
@import "base";

8
packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss vendored
View File

@ -125,13 +125,13 @@ div.red-ui-info-table {
line-height: 1.5em;
a {
color: $info-text-link-color;
color: $text-color-link;
text-decoration: none;
}
a:hover,
a:focus {
color: $info-text-link-color;
color: $text-color-link;
text-decoration: underline;
}
@ -176,7 +176,7 @@ div.red-ui-info-table {
font-family: $monospace-font;
font-weight: normal;
margin: 5px 3px 1px;
color: $text-color-warning;
color: $text-color-code;
white-space: nowrap;
&.optional {
font-style: italic;
@ -329,7 +329,7 @@ div.red-ui-info-table {
.red-ui-info-outline,
// TODO: remove these classes for 2.0. Keeping in 1.x for backwards compatibility
// of theme generators.
.red-ui-sidebar-help-toc, #red-ui-clipboard-dialog-import-conflicts-list, #red-ui-clipboard-dialog-export-tab-clipboard-preview
.red-ui-sidebar-help-toc, #red-ui-clipboard-dialog-import-conflicts-list, #red-ui-clipboard-dialog-export-tab-clipboard-preview
{
.red-ui-info-outline-item {
display: inline-block;

86
packages/node_modules/@node-red/editor-client/src/sass/variables.scss vendored Normal file
View File

@ -0,0 +1,86 @@
:root {
--red-ui-primary-font: #{$primary-font};
--red-ui-primary-font-size: #{$primary-font-size};
--red-ui-monospace-font: #{$monospace-font};
--red-ui-primary-background: #{$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-tertiary-background: #{$tertiary-background};
--red-ui-shadow: #{$shadow};
// Main body text
--red-ui-primary-text-color: #{$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};
// Sub label text
--red-ui-tertiary-text-color: #{$tertiary-text-color};
// Heading text
--red-ui-header-text-color: #{$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-primary-border-color: #{$primary-border-color};
--red-ui-secondary-border-color: #{$secondary-border-color};
--red-ui-tertiary-border-color: #{$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-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-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-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-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-shade-color: #{$shade-color};
--red-ui-node-link-port-background: #{$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-selected-color: #{$node-selected-color};
--red-ui-port-selected-color: #{$port-selected-color};
}