summaryrefslogtreecommitdiffstats
path: root/asset/css/variables.less
diff options
context:
space:
mode:
Diffstat (limited to 'asset/css/variables.less')
-rw-r--r--asset/css/variables.less166
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);
+ }
+};