mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
310 lines
17 KiB
SCSS
310 lines
17 KiB
SCSS
@use "sass:map";
|
|
@use "colors";
|
|
@use "sizes";
|
|
|
|
:root {
|
|
|
|
--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: #{colors.$primary-background};
|
|
|
|
--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: #{colors.$tertiary-background};
|
|
|
|
--red-ui-shadow: #{colors.$shadow};
|
|
|
|
// Header Height
|
|
--red-ui-header-height: #{sizes.$header-height};
|
|
|
|
// Main body text
|
|
--red-ui-primary-text-color: #{colors.$primary-text-color};
|
|
// UI control label text
|
|
--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: #{colors.$tertiary-text-color};
|
|
// Heading text
|
|
--red-ui-header-text-color: #{colors.$header-text-color};
|
|
|
|
--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: #{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: #{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: #{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: #{colors.$form-tips-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: #{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: #{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: #{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: #{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: #{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: #{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: #{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: #{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: #{colors.$workspace-button-color-focus-outline};
|
|
|
|
--red-ui-shade-color: #{colors.$shade-color};
|
|
|
|
--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: #{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: #{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: #{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: #{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: #{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: #{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: #{colors.$view-navigator-background};
|
|
|
|
--red-ui-view-lasso-stroke: #{colors.$view-lasso-stroke};
|
|
--red-ui-view-lasso-fill: #{colors.$view-lasso-fill};
|
|
|
|
--red-ui-view-background: #{colors.$view-background};
|
|
--red-ui-view-grid-color: #{colors.$view-grid-color};
|
|
|
|
--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: #{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: #{colors.$node-config-background};
|
|
--red-ui-node-config-icon-container-disabled: #{colors.$node-config-icon-container-disabled};
|
|
|
|
--red-ui-node-link-port-background: #{colors.$node-link-port-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(colors.$node-status-colors, $current-color)};
|
|
}
|
|
|
|
|
|
--red-ui-node-selected-color: #{colors.$node-selected-color};
|
|
--red-ui-port-selected-color: #{colors.$port-selected-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: #{colors.$clipboard-textarea-background};
|
|
|
|
|
|
--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: #{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: #{colors.$vcCommitShaColor};
|
|
|
|
--red-ui-dnd-background: #{colors.$dnd-background};
|
|
--red-ui-dnd-color: #{colors.$dnd-color};
|
|
|
|
--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: #{colors.$debug-message-background};
|
|
--red-ui-debug-message-background-hover: #{colors.$debug-message-background-hover};
|
|
|
|
--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: #{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: #{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: #{colors.$tourGuide-border};
|
|
--red-ui-tourGuide-heading-color: #{colors.$tourGuide-heading-color};
|
|
|
|
--red-ui-grip-color: #{colors.$grip-color};
|
|
|
|
--red-ui-icons-flow-color: #{colors.$icons-flow-color};
|
|
|
|
--red-ui-spinner-color: #{colors.$spinner-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(colors.$user-profile-colors, $current-color)};
|
|
}
|
|
}
|