1 files changed, 166 insertions, 0 deletions
diff --git a/asset/css/variables.less b/asset/css/variables.less
new file mode 100644
index 0000000..1d6c895
--- /dev/null
+++ b/asset/css/variables.less
@@ -0,0 +1,166 @@
+/*
+  RECOMMENDATION:
+     Please do not use the base color variables directly,
+     define a new variable instead that assigns the value of this base variable.
+       Examples:
+         - @base-color: red;
+         - @my-new-var: @base-color;
+         - @my-second-new-var: @base-color;
+
+     Do not use the same variable for different use cases, but define a new variable for each use case.
+
+  NOTICE:
+    Color vars identification:
+      - Vars with `-bg` suffix are background-color vars. Please use only for setting bg-color.
+      - Vars with `-color` suffix are color vars. Please use only for setting fg-color.
+
+  MODE SUPPORT:
+    The standard LESS variables represent the dark mode. The LESS detached ruleset `@iplWebLightRules`
+    contains CSS variables that represent the light mode. It must be used explicitly to have any effect.
+    If you use media queries to support modes, just call the ruleset inside your media query:
+
+      @media (prefers-color-scheme: light) {
+        @iplWebLightRules();
+      }
+*/
+
+@default-bg: #282E39;
+
+@base-gray: #c4c4c4;
+@base-gray-light: #5c5c5c;
+@base-gray-lighter: #4b4b4b;
+@base-disabled: #9a9a9a;
+
+@base-primary-color: #00C3ED;
+@base-primary-bg: #00C3ED;
+
+@default-text-color: #fff;
+@default-text-color-light: fade(@default-text-color, 75%);
+@default-text-color-inverted: @default-bg;
+
+@state-ok: #44bb77;
+@state-up: @state-ok;
+@state-warning: #ffaa44;
+@state-critical: #ff5566;
+@state-down: @state-critical;
+@state-pending: #77aaff;
+@state-unknown: #aa44ff;
+
+@primary-button-color: @default-text-color-inverted;
+@primary-button-bg: @base-primary-bg;
+@primary-button-hover-bg: #0081a6;
+
+@search-term-bg: @base-gray;
+@search-term-color: @default-text-color-inverted;
+@search-term-selected-bg: @base-disabled;
+@search-term-invalid-bg: @state-critical;
+@search-term-invalid-color: @default-text-color-inverted;
+@search-term-disabled-bg: @base-disabled;
+@search-term-selected-color: @base-gray-light;
+@search-term-highlighted-bg: @base-primary-bg;
+@search-term-highlighted-color: @default-text-color-inverted;
+
+@search-condition-remove-bg: @state-critical;
+@search-condition-remove-color: @default-text-color-inverted;
+
+@search-logical-operator-bg: @base-gray-light;
+@search-logical-operator-color: @default-text-color-light;
+
+@searchbar-bg: #404d72;
+@searchbar-scrollbar-bg: @base-gray-light;
+
+@search-editor-control-color: @base-gray-light;
+@search-editor-logical-op-bg: @base-gray-light;
+@search-editor-context-menu-border-color: @base-gray-light;
+@search-editor-context-menu-bg: @default-bg;
+@search-editor-drag-outline-color: @base-gray;
+
+@control-color: @base-primary-color;
+@control-hover-bg: @base-gray-lighter;
+@control-disabled-color: @base-disabled;
+
+@cancel-button-bg: none;
+@cancel-button-border-color: @state-critical;
+@cancel-button-color: @state-critical;
+@cancel-button-hover-bg: @state-critical;
+@cancel-button-hover-color: @default-text-color-inverted;
+
+@suggestions-bg: @default-bg;
+@suggestions-color: @default-text-color-light;
+@suggestions-focus-bg: @base-primary-bg;
+@suggestions-focus-color: @default-text-color-inverted;
+@suggestions-default-opt-bg: fade(@base-primary-bg, 10%);
+@suggestions-default-opt-color: @default-text-color-light;
+@suggestions-hover-bg: fade(@base-primary-bg, 30%);
+@suggestions-border-color: @base-gray-light;
+@suggestions-separation-bg: @base-gray-lighter;
+@suggestions-failure-message-color: @default-text-color-light;
+@suggestions-relation-path-bg: @base-gray-light;
+@suggestions-relation-path-focus-bg: @base-gray;
+
+@card-border-color: @base-gray-light;
+
+@iplWebLightRules: {
+  :root {
+    --base-gray: #819398;
+    --base-gray-light: #d0d3da;
+    --base-gray-lighter: #e8ecef;
+    --base-disabled: var(--base-gray-light);
+
+    --base-remove-bg: @state-critical;
+
+    --default-text-color: #535353;
+    --default-text-color-light: fade(#535353, 75%); // --default-text-color
+    --default-text-color-inverted: #F5F9FA;
+
+    --primary-button-color: var(--default-text-color-inverted);
+    --primary-button-bg: @primary-button-bg;
+    --primary-button-hover-bg: @primary-button-hover-bg;
+
+    --searchbar-bg: #DEECF1;
+    --searchbar-scrollbar-bg: var(--base-gray-light);
+
+    --search-term-bg: var(--base-gray-light);
+    --search-term-color: var(--default-text-color);
+    --search-term-selected-bg: var(--base-disabled);
+    --search-term-invalid-bg: var(--base-remove-bg);
+    --search-term-invalid-color: var(--default-text-color-inverted);
+    --search-term-disabled-bg: var(--base-gray-light);
+    --search-term-selected-color: var(--base-gray);
+    --search-term-highlighted-bg: var(--primary-button-bg);
+    --search-term-highlighted-color: var(--default-text-color-inverted);
+
+    --search-condition-remove-bg: var(--base-remove-bg);
+    --search-condition-remove-color: var(--default-text-color-inverted);
+
+    --search-logical-operator-bg: fade(#819398, 50%); // --base-gray
+    --search-logical-operator-color: var(--default-text-color-light);
+
+    --search-editor-control-color: var(--base-gray-light);
+    --search-editor-logical-op-bg: var(--base-gray-light);
+    --search-editor-context-menu-border-color: var(--base-gray-light);
+    --search-editor-context-menu-bg: var(--default-text-color-inverted);
+    --search-editor-drag-outline-color: var(--base-gray);
+
+    --control-color: var(--primary-button-bg);
+    --control-hover-bg: var(--base-gray-lighter);
+    --control-disabled-color: var(--base-gray-light);
+
+    --cancel-button-hover-color: var(--default-text-color-inverted);
+
+    --suggestions-bg: var(--default-text-color-inverted);
+    --suggestions-color: var(--default-text-color-light);
+    --suggestions-focus-bg: var(--primary-button-bg);
+    --suggestions-focus-color: var(--default-text-color-inverted);
+    --suggestions-default-opt-bg: fade(@primary-button-bg, 10%);
+    --suggestions-default-opt-color: var(--default-text-color-light);
+    --suggestions-hover-bg: fade(@primary-button-bg, 30%);
+    --suggestions-border-color: var(--base-gray-light);
+    --suggestions-separation-bg: var(--base-gray-lighter);
+    --suggestions-failure-message-color: var(--default-text-color-light);
+    --suggestions-relation-path-bg: var(--base-gray-lighter);
+    --suggestions-relation-path-focus-bg: var(--base-gray);
+
+    --card-border-color: var(--base-gray-light);
+  }
+};