Add Zendesk Garden theme (#589)

* zendesk-garden

* zendesk-garden update

* zendesk-garden update

* Don't make changes to scripts in a new theme PR

A new PR will be created with the changes proposed to this file.

* Check out the default branch when cloning

* Set color-scheme

* Apply changes discussed in #585

---------

Co-authored-by: Mauricio Bonani <[email protected]>

README.md

@@ -59,6 +59,7 @@ npm install @node-red-contrib-themes/theme-collection
 - tokyo-night-storm
 - totallyinformation
 - zenburn
+- zendesk-garden
 
 If you have an idea for a new theme, you can request it [here][tr], or better yet, [create one yourself][creating-a-new-theme].
 

src/themes/zendesk-garden/theme-custom.css

@@ -0,0 +1,9 @@
+/* Theme customizations */
+
+/* color-scheme */
+:root {
+  /* For dark themes, uncomment the line below*/
+  color-scheme: dark;
+  /* For light themes, uncomment the line below */
+  /* color-scheme: light; */
+}

src/themes/zendesk-garden/theme-mermaid.json

@@ -0,0 +1 @@
+"dark"

src/themes/zendesk-garden/theme-monaco.json

@@ -0,0 +1 @@
+"tomorrow-night-bright"

src/themes/zendesk-garden/theme.scss

@@ -0,0 +1,303 @@
+@use "sass:color";
+
+$primary-font: "Helvetica Neue", Arial, Helvetica, sans-serif;
+$primary-font-size: 14px;
+$monospace-font: Menlo, Consolas, "DejaVu Sans Mono", Courier, monospace;
+
+$primary-background: #151a1e;
+
+$secondary-background: #1c2227;
+$secondary-background-selected: #0a0d0e;
+$secondary-background-inactive: #151a1e;
+$secondary-background-hover: #0a0d0e;
+$secondary-background-disabled: #252c31;
+
+$tertiary-background: #151a1e;
+
+$shadow: rgba(0, 0, 0, 0.2);
+
+// Main body text
+$primary-text-color: #d8dcde;
+// UI control label text
+$secondary-text-color: #919ca5;
+$secondary-text-color-focus: #d8dcde;
+$secondary-text-color-hover: #d8dcde;
+$secondary-text-color-active: #d8dcde;
+$secondary-text-color-selected: #d8dcde;
+$secondary-text-color-inactive: #d8dcde;
+$secondary-text-color-disabled: #5c6970;
+$secondary-text-color-disabled-active: color.scale($secondary-text-color-disabled, $lightness: 15%);
+$secondary-text-color-disabled-inactive: color.scale($secondary-text-color-disabled, $lightness: 7.5%);
+
+// Sub label text
+$tertiary-text-color: #919ca5;
+// Heading text
+$header-text-color: #d8dcde;
+
+$text-color-error: #f2a1a8;
+$text-color-warning: #fca347;
+$text-color-success: #94c1b0;
+$text-color-code: #919ca5;
+$text-color-link: #2694d6;
+
+$primary-border-color: #39434b;
+$secondary-border-color: color.scale($primary-border-color, $lightness: -14%);
+$tertiary-border-color: color.scale($primary-border-color, $lightness: -7%);
+
+$border-color-error: #df2935;
+$border-color-warning: #ffcf70;
+$border-color-success: #4b8400;
+
+$form-background: $secondary-background;
+$form-placeholder-color: #5c6970;
+$form-text-color: $primary-text-color;
+$form-text-color-disabled: $secondary-text-color-disabled;
+$form-input-focus-color: #2694d6;
+$form-input-border-color: $tertiary-border-color;
+$form-input-border-selected-color: #4a9999;
+$form-input-border-error-color: #eb5c69;
+$form-input-background: $secondary-background;
+$form-input-background-disabled: $secondary-background-disabled;
+$form-button-background: $secondary-background-selected;
+
+$form-tips-background: $primary-background;
+
+$text-editor-color: $primary-text-color;
+$text-editor-background: $secondary-background;
+$text-editor-color-disabled: $secondary-text-color-inactive;
+$text-editor-background-disabled: $secondary-background-disabled;
+$text-editor-gutter-background: $secondary-background;
+$text-editor-gutter-color: #777;
+$text-editor-gutter-active-line-background: $secondary-background-selected;
+$text-editor-active-line-background: $secondary-background-selected;
+$text-editor-selection-background: #d6d6d6;
+
+$event-log-background: $secondary-background;
+$event-log-color: $primary-text-color;
+$event-log-active-line-background: $primary-background;
+$event-log-selection-background: $secondary-background-selected;
+
+$list-item-color: $primary-text-color;
+$list-item-secondary-color: $secondary-text-color;
+$list-item-background: $secondary-background;
+$list-item-background-disabled: $secondary-background-disabled;
+$list-item-background-hover: $secondary-background-hover;
+$list-item-background-selected: $secondary-background-selected;
+$list-item-border-selected: $secondary-text-color-selected;
+
+$tab-text-color-active: $header-text-color;
+$tab-text-color-inactive: $secondary-text-color-inactive;
+$tab-text-color-disabled-active: $secondary-text-color-disabled-active;
+$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($tab-background-active, 0.001);
+$tab-background-selected: $secondary-background-selected;
+$tab-background-selected-alpha: rgba($tab-background-selected, 0.001);
+$tab-background-inactive: $secondary-background-inactive;
+$tab-background-inactive-alpha: rgba($tab-background-inactive, 0.001);
+$tab-background-hover: $secondary-background-hover;
+$tab-background-hover-alpha: rgba($tab-background-hover, 0.001);
+
+$palette-header-background: $primary-background;
+$palette-header-color: $header-text-color;
+$palette-content-background: $secondary-background;
+
+$workspace-button-background: $secondary-background;
+$workspace-button-background-hover: $secondary-background-hover;
+$workspace-button-background-active: $secondary-background-selected;
+
+$workspace-button-color: $secondary-text-color;
+$workspace-button-color-disabled: $secondary-text-color-disabled;
+$workspace-button-color-focus: $secondary-text-color-focus;
+$workspace-button-color-hover: $secondary-text-color-hover;
+$workspace-button-color-active: $secondary-text-color-active;
+$workspace-button-color-selected: $secondary-text-color-selected;
+
+$workspace-button-color-primary: #eee;
+$workspace-button-background-primary: #ad1625;
+$workspace-button-background-primary-hover: #6e0a1e;
+
+$workspace-button-color-focus-outline: $form-input-focus-color;
+
+$shade-color: rgba(160, 160, 160, 0.5);
+
+$popover-background: $secondary-background-hover;
+$popover-border: $popover-background;
+$popover-color: $primary-text-color;
+$popover-button-border-color: $primary-border-color;
+$popover-button-border-color-hover: $secondary-text-color-hover;
+
+$diff-text-header-color: $secondary-text-color;
+$diff-text-header-background: $secondary-background;
+$diff-state-color: $primary-text-color;
+$diff-state-prefix-color: $secondary-text-color;
+$diff-state-added: #94c1b0;
+$diff-state-deleted: #f2a1a8;
+$diff-state-changed: #fca347;
+$diff-state-changed-background: $secondary-background;
+$diff-state-unchanged: $primary-text-color;
+$diff-state-unchanged-background: $primary-background;
+
+$diff-state-conflicted: purple;
+$diff-state-moved: #3f81b3;
+$diff-state-conflict: #9b45ce;
+$diff-state-conflict-background: #ffdad4;
+
+$diff-state-added-background: #e7ffe3;
+$diff-state-added-border: rgba($diff-state-added-background, 0.1);
+$diff-state-added-header-background: #c0f6c0;
+$diff-state-added-header-border: rgba($diff-state-added-header-background, 0.1);
+
+$diff-state-deleted-background: #ffe1e1;
+$diff-state-deleted-border: rgba($diff-state-deleted-background, 0.1);
+$diff-state-deleted-header-background: #ffcccc;
+$diff-state-deleted-header-border: rgba($diff-state-deleted-header-background, 0.1);
+
+$diff-merge-header-color: #800080;
+$diff-merge-header-background: #e5f9ff;
+$diff-merge-header-border-color: #b2edff;
+
+$menuBackground: $primary-background;
+$menuDivider: $secondary-border-color;
+$menuColor: $primary-text-color;
+$menuActiveColor: $secondary-text-color-active;
+$menuActiveBackground: $secondary-background-hover;
+$menuDisabledColor: $secondary-text-color-disabled;
+$menuHoverColor: $secondary-text-color-hover;
+$menuHoverBackground: $secondary-background-hover;
+$menuCaret: $tertiary-text-color;
+
+$view-navigator-background: rgba($primary-background, 0.8);
+
+$view-lasso-stroke: #ff7f0e;
+$view-lasso-fill: rgba(20, 125, 255, 0.1);
+
+$view-background: $secondary-background;
+$view-grid-color: #ffffff0f;
+
+$node-label-color: #333;
+$node-port-label-color: #888;
+$node-border: #999;
+$node-border-unknown: #f33;
+$node-border-placeholder: #aaa;
+$node-background-placeholder: #eee;
+
+$node-port-background: #d9d9d9;
+$node-port-background-hover: #eee;
+$node-icon-color: #fff;
+$node-icon-background-color: rgba(0, 0, 0, 0.05);
+$node-icon-background-color-fill: #000;
+$node-icon-background-color-opacity: 0.05;
+$node-icon-border-color: #000;
+$node-icon-border-color-opacity: 0.1;
+
+$node-config-background: #f3f3f3;
+$node-config-icon-container-disabled: #aaa;
+
+$node-link-port-background: #eee;
+
+$node-status-error-border: rgb(145, 16, 2);
+$node-status-error-background: rgb(255, 102, 0);
+$node-status-changed-border: rgb(28, 102, 140);
+$node-status-changed-background: rgb(0, 188, 255);
+
+$node-status-colors: (
+  red: #c00,
+  green: #5a8,
+  yellow: #f9df31,
+  blue: #53a3f3,
+  grey: #d3d3d3
+);
+
+$node-selected-color: #ff7f0e;
+$port-selected-color: #ff7f0e;
+
+$link-color: #999;
+$link-link-color: #aaa;
+$link-disabled-color: #ccc;
+$link-link-active-color: #ff7f0e;
+$link-unknown-color: #f00;
+
+$clipboard-textarea-background: $primary-background;
+
+$deploy-button-color: #eee;
+$deploy-button-color-active: #ccc;
+$deploy-button-color-disabled: #999;
+$deploy-button-background: #8c101c;
+$deploy-button-background-hover: #6e0a1e;
+$deploy-button-background-active: #4c0a17;
+$deploy-button-background-disabled: #444;
+$deploy-button-background-disabled-hover: #555;
+
+$header-background: #000;
+$header-button-background-active: #121212;
+$header-accent: #c02020;
+$header-menu-color: #eee;
+$header-menu-color-disabled: #666;
+$header-menu-heading-color: #fff;
+$header-menu-sublabel-color: #aeaeae;
+$header-menu-background: #121212;
+$header-menu-item-hover: #323232;
+$header-menu-item-border-active: #777677;
+$headerMenuItemDivider: #464646;
+$headerMenuCaret: #c7c7c7;
+
+$vcCommitShaColor: #c38888;
+
+$dnd-background: rgba(0, 0, 0, 0.3);
+$dnd-color: #fff;
+
+$notification-border-default: #325c80;
+$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-hover;
+
+$debug-message-text-color: $primary-text-color;
+$debug-message-text-color-meta: #919ca5;
+$debug-message-text-color-object-key: #fca347;
+$debug-message-text-color-msg-type-other: #2694d6;
+$debug-message-text-color-msg-type-string: #f2a1a8;
+$debug-message-text-color-msg-type-null: #919ca5;
+$debug-message-text-color-msg-type-meta: #919ca5;
+$debug-message-text-color-msg-type-number: #2694d6;
+
+$debug-message-border: $primary-background;
+$debug-message-border-hover: $secondary-background-hover;
+$debug-message-border-warning: $border-color-warning;
+$debug-message-border-error: $border-color-error;
+
+$group-default-fill: $primary-background;
+$group-default-fill-opacity: 0.5;
+$group-default-stroke: $primary-border-color;
+$group-default-stroke-opacity: 1;
+$group-default-label-color: $primary-text-color;
+
+$tourGuide-border: #c56c6c;
+$tourGuide-heading-color: #c56c6c;
+
+$grip-color: rgba($primary-text-color, 0.5);
+
+$icons-flow-color: $primary-text-color;
+
+$spinner-color: $primary-text-color;
+
+$tab-icon-color: rgba($primary-text-color, 0.2);
+
+$user-profile-colors: (
+  1: #822e81,
+  2: #955e42,
+  3: #9c914f,
+  4: #748e54,
+  5: #06bcc1
+);
+
+// Deprecated
+$text-color-green: $text-color-success;
+$info-text-code-color: $text-color-code;
+$info-text-link-color: $text-color-link;