From e6a084807b716c93194ccac8f45043098b7712c8 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Fri, 21 Jan 2022 12:19:03 +0000 Subject: [PATCH] ui: Enable theming (#12134) plus Themeable icons (#12135) --- .../consul-ui/app/components/pill/index.scss | 2 +- .../app/components/popover-select/index.scss | 2 +- ui/packages/consul-ui/app/styles/app.scss | 2 ++ .../app/styles/base/color/base-variables.scss | 26 +++++++++++----- .../base/color/lemon/frame-placeholders.scss | 0 .../app/styles/base/color/lemon/index.scss | 5 ++++ .../lemon/themes/dark-high-contrast.scss | 17 +++++++++++ .../styles/base/color/lemon/themes/dark.scss | 17 +++++++++++ .../lemon/themes/light-high-contrast.scss | 17 +++++++++++ .../styles/base/color/lemon/themes/light.scss | 17 +++++++++++ .../base/color/vault/frame-placeholders.scss | 0 .../app/styles/base/color/vault/index.scss | 6 ++++ .../vault/themes/dark-high-contrast.scss | 3 ++ .../styles/base/color/vault/themes/dark.scss | 3 ++ .../vault/themes/light-high-contrast.scss | 3 ++ .../styles/base/color/vault/themes/light.scss | 3 ++ .../app/styles/base/icons/base-variables.scss | 2 +- ui/packages/consul-ui/app/styles/icons.scss | 4 +++ ui/packages/consul-ui/app/styles/themes.scss | 8 ++++- .../consul-ui/app/utils/get-environment.js | 30 ++++++++++++++++--- ui/packages/consul-ui/docs/bookmarklets.mdx | 3 +- 21 files changed, 154 insertions(+), 16 deletions(-) create mode 100644 ui/packages/consul-ui/app/styles/base/color/lemon/frame-placeholders.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/lemon/index.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/vault/frame-placeholders.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/vault/index.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss create mode 100644 ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss create mode 100644 ui/packages/consul-ui/app/styles/icons.scss diff --git a/ui/packages/consul-ui/app/components/pill/index.scss b/ui/packages/consul-ui/app/components/pill/index.scss index ee870d1c1e..1ad95dfe86 100644 --- a/ui/packages/consul-ui/app/components/pill/index.scss +++ b/ui/packages/consul-ui/app/components/pill/index.scss @@ -34,7 +34,7 @@ span.policy-service-identity::before { @extend %with-logo-consul-color-icon, %as-pseudo; } %pill.vault::before { - @extend %with-logo-vault-color-icon, %as-pseudo; + @extend %with-vault-300; } %pill.aws::before { @extend %with-logo-aws-color-icon, %as-pseudo; diff --git a/ui/packages/consul-ui/app/components/popover-select/index.scss b/ui/packages/consul-ui/app/components/popover-select/index.scss index 235fc643d4..a4fc7df8e9 100644 --- a/ui/packages/consul-ui/app/components/popover-select/index.scss +++ b/ui/packages/consul-ui/app/components/popover-select/index.scss @@ -69,7 +69,7 @@ @extend %with-logo-nomad-color-icon, %as-pseudo; } %popover-select .vault button::before { - @extend %with-logo-vault-color-icon, %as-pseudo; + @extend %with-vault-300; } %popover-select .terraform button::before { @extend %with-logo-terraform-color-icon, %as-pseudo; diff --git a/ui/packages/consul-ui/app/styles/app.scss b/ui/packages/consul-ui/app/styles/app.scss index 30d5235ff5..3834601dc0 100644 --- a/ui/packages/consul-ui/app/styles/app.scss +++ b/ui/packages/consul-ui/app/styles/app.scss @@ -11,5 +11,7 @@ @import 'layout'; /* pinpoint individual overwrites for those 'just on this page' problems */ @import 'routes'; +/* more semantically (for our project) named icons */ +@import 'icons'; /* global control of themeable components */ @import 'themes'; diff --git a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss index 1de2f5c5c1..e88817cda7 100644 --- a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss @@ -11,6 +11,18 @@ --steel-800: 66 73 77; --steel-900: 40 44 46; + /* vault refresh */ + --lemon-050: 255 216 20; + --lemon-100: 255 216 20; + --lemon-200: 255 216 20; + --lemon-300: 255 216 20; + --lemon-400: 255 216 20; + --lemon-500: 255 216 20; + --lemon-600: 255 216 20; + --lemon-700: 255 216 20; + --lemon-800: 255 216 20; + --lemon-900: 255 216 20; + /* consul */ --magenta-050: 249 235 242; --magenta-100: 239 196 216; @@ -61,8 +73,8 @@ --indigo-900: 26 22 63; /* nomad */ - --teal-050: 235 248 243;/*#c3ecdc*/; - --teal-100: 195 236 220;/*#e1e4e7*/; + --teal-050: 235 248 243; /*#c3ecdc*/ + --teal-100: 195 236 220; /*#e1e4e7*/ --teal-200: 155 223 197; --teal-300: 116 211 174; --teal-400: 76 198 151; @@ -84,9 +96,9 @@ --cyan-800: 0 85 116; --cyan-900: 0 51 70; -/* ui */ + /* ui */ -/* removed to prevent confusion + /* removed to prevent confusion --gray-1: #191a1c; --gray-2: #323538; --gray-3: #4c4f54; @@ -114,7 +126,7 @@ --gray-900: 31 33 36; --gray-950: 21 23 28; -/* status */ + /* status */ --green-050: 236 247 237; --green-100: 198 233 201; --green-200: 160 219 165; @@ -150,7 +162,7 @@ --red-800: 91 24 32; --red-900: 55 15 19; - --orange-050: 254 244 236;/*#fa8f37*/; + --orange-050: 254 244 236; /*#fa8f37*/ --orange-100: 253 224 200; --orange-200: 252 204 164; --orange-300: 251 183 127; @@ -161,7 +173,7 @@ --orange-800: 114 65 25; --orange-900: 69 39 15; - --yellow-050: 255 251 237;/*#fa8f37;*/ + --yellow-050: 255 251 237; /*#fa8f37;*/ --yellow-100: 253 238 186; --yellow-200: 252 228 140; --yellow-300: 251 217 94; diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/frame-placeholders.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/index.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/index.scss new file mode 100644 index 0000000000..e62440c7cb --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/lemon/index.scss @@ -0,0 +1,5 @@ +@import './themes/light'; +@import './themes/dark'; +@import './themes/light-high-contrast'; +@import './themes/dark-high-contrast'; +@import './frame-placeholders'; diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss new file mode 100644 index 0000000000..d57568f4a9 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss @@ -0,0 +1,17 @@ +%theme-dark-high-contrast { + --tone-lemon-000: var(--white); + --tone-lemon-050: var(--lemon-050); + --tone-lemon-100: var(--lemon-100); + --tone-lemon-150: var(--lemon-150); + --tone-lemon-200: var(--lemon-200); + --tone-lemon-300: var(--lemon-300); + --tone-lemon-400: var(--lemon-400); + --tone-lemon-500: var(--lemon-500); + --tone-lemon-600: var(--lemon-600); + --tone-lemon-700: var(--lemon-700); + --tone-lemon-800: var(--lemon-800); + --tone-lemon-850: var(--lemon-850); + --tone-lemon-900: var(--lemon-900); + --tone-lemon-950: var(--lemon-950); + --tone-lemon-999: var(--black); +} diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss new file mode 100644 index 0000000000..be9f8551e5 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss @@ -0,0 +1,17 @@ +%theme-dark { + --tone-lemon-000: var(--white); + --tone-lemon-050: var(--lemon-050); + --tone-lemon-100: var(--lemon-100); + --tone-lemon-150: var(--lemon-150); + --tone-lemon-200: var(--lemon-200); + --tone-lemon-300: var(--lemon-300); + --tone-lemon-400: var(--lemon-400); + --tone-lemon-500: var(--lemon-500); + --tone-lemon-600: var(--lemon-600); + --tone-lemon-700: var(--lemon-700); + --tone-lemon-800: var(--lemon-800); + --tone-lemon-850: var(--lemon-850); + --tone-lemon-900: var(--lemon-900); + --tone-lemon-950: var(--lemon-950); + --tone-lemon-999: var(--black); +} diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss new file mode 100644 index 0000000000..5a7fac0f04 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss @@ -0,0 +1,17 @@ +%theme-light-high-contrast { + --tone-lemon-000: var(--white); + --tone-lemon-050: var(--lemon-050); + --tone-lemon-100: var(--lemon-100); + --tone-lemon-150: var(--lemon-150); + --tone-lemon-200: var(--lemon-200); + --tone-lemon-300: var(--lemon-300); + --tone-lemon-400: var(--lemon-400); + --tone-lemon-500: var(--lemon-500); + --tone-lemon-600: var(--lemon-600); + --tone-lemon-700: var(--lemon-700); + --tone-lemon-800: var(--lemon-800); + --tone-lemon-850: var(--lemon-850); + --tone-lemon-900: var(--lemon-900); + --tone-lemon-950: var(--lemon-950); + --tone-lemon-999: var(--black); +} diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss new file mode 100644 index 0000000000..4e937d5cf5 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss @@ -0,0 +1,17 @@ +%theme-light { + --tone-lemon-000: var(--white); + --tone-lemon-050: var(--lemon-050); + --tone-lemon-100: var(--lemon-100); + --tone-lemon-150: var(--lemon-150); + --tone-lemon-200: var(--lemon-200); + --tone-lemon-300: var(--lemon-300); + --tone-lemon-400: var(--lemon-400); + --tone-lemon-500: var(--lemon-500); + --tone-lemon-600: var(--lemon-600); + --tone-lemon-700: var(--lemon-700); + --tone-lemon-800: var(--lemon-800); + --tone-lemon-850: var(--lemon-850); + --tone-lemon-900: var(--lemon-900); + --tone-lemon-950: var(--lemon-950); + --tone-lemon-999: var(--black); +} diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/vault/frame-placeholders.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/index.scss b/ui/packages/consul-ui/app/styles/base/color/vault/index.scss new file mode 100644 index 0000000000..74aa4c7b11 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/vault/index.scss @@ -0,0 +1,6 @@ +@import '../lemon'; +@import './themes/light'; +@import './themes/dark'; +@import './themes/light-high-contrast'; +@import './themes/dark-high-contrast'; +@import './frame-placeholders'; diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss new file mode 100644 index 0000000000..00bcce3c6c --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss @@ -0,0 +1,3 @@ +%theme-dark-high-contrast { + --tone-vault-500: var(--lemon-500); +} diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss new file mode 100644 index 0000000000..d873db1590 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss @@ -0,0 +1,3 @@ +%theme-dark { + --tone-vault-500: var(--lemon-500); +} diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss new file mode 100644 index 0000000000..cac38c06a0 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss @@ -0,0 +1,3 @@ +%theme-light-high-contrast { + --tone-vault-500: var(--black); +} diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss new file mode 100644 index 0000000000..669ed33f7e --- /dev/null +++ b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss @@ -0,0 +1,3 @@ +%theme-light { + --tone-vault-500: var(--black); +} diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss index 673e9d8a8e..70a4e386e6 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss @@ -3891,7 +3891,7 @@ } %vault-16-svg-prop { - --vault-16-svg: url('data:image/svg+xml;charset=UTF-8,'); + --vault-16-svg: url('data:image/svg+xml;charset=UTF-8,'); } %vault-24-svg-prop { diff --git a/ui/packages/consul-ui/app/styles/icons.scss b/ui/packages/consul-ui/app/styles/icons.scss new file mode 100644 index 0000000000..96eac426b8 --- /dev/null +++ b/ui/packages/consul-ui/app/styles/icons.scss @@ -0,0 +1,4 @@ +%with-vault-300 { + @extend %with-vault-16-mask, %as-pseudo; + color: rgb(var(--tone-vault-500)); +} diff --git a/ui/packages/consul-ui/app/styles/themes.scss b/ui/packages/consul-ui/app/styles/themes.scss index 058347ed4e..69282b79e7 100644 --- a/ui/packages/consul-ui/app/styles/themes.scss +++ b/ui/packages/consul-ui/app/styles/themes.scss @@ -1,9 +1,15 @@ @import './base/color/ui/index'; @import './base/color/magenta/index'; @import './base/color/strawberry/index'; -:root { +@import './base/color/vault/index'; + +:root:not(.prefers-color-scheme-dark) { @extend %theme-light; } +:root.prefers-color-scheme-dark { + @extend %theme-dark; +} + %main-header-horizontal, %main-nav-vertical, %main-nav-horizontal { diff --git a/ui/packages/consul-ui/app/utils/get-environment.js b/ui/packages/consul-ui/app/utils/get-environment.js index d350ca6ecf..157eef2f8e 100644 --- a/ui/packages/consul-ui/app/utils/get-environment.js +++ b/ui/packages/consul-ui/app/utils/get-environment.js @@ -25,7 +25,31 @@ export default function(config = {}, win = window, doc = document) { }; win['Scenario'] = function(str = '') { if (str.length > 0) { - cookies(str).forEach(item => (doc.cookie = `${item};Path=/`)); + cookies(str).forEach(item => { + // this current outlier is the only one that + // 1. Toggles + // 2. Uses localStorage + // Once we have a user facing widget to do this, it can all go + if (item.startsWith('CONSUL_COLOR_SCHEME=')) { + const [, value] = item.split('='); + let current; + try { + current = JSON.parse(win.localStorage.getItem('consul:theme')); + } catch (e) { + current = { + 'color-scheme': 'light', + }; + } + win.localStorage.setItem( + 'consul:theme', + `{"color-scheme": "${ + value === '!' ? (current['color-scheme'] === 'light' ? 'dark' : 'light') : value + }"}` + ); + } else { + doc.cookie = `${item};Path=/`; + } + }); win.location.hash = ''; location.reload(); } else { @@ -70,9 +94,7 @@ export default function(config = {}, win = window, doc = document) { }; const operatorConfig = { ...config.operatorConfig, - ...JSON.parse( - doc.querySelector(`[data-${config.modulePrefix}-config]`).textContent - ) + ...JSON.parse(doc.querySelector(`[data-${config.modulePrefix}-config]`).textContent), }; const ui_config = operatorConfig.UIConfig || {}; const scripts = doc.getElementsByTagName('script'); diff --git a/ui/packages/consul-ui/docs/bookmarklets.mdx b/ui/packages/consul-ui/docs/bookmarklets.mdx index fe33e10054..cc19f72171 100644 --- a/ui/packages/consul-ui/docs/bookmarklets.mdx +++ b/ui/packages/consul-ui/docs/bookmarklets.mdx @@ -7,7 +7,8 @@ Below is a list of the most commonly used functions as bookmarklets followed by | Link/Bookmarklet | Description | | ---- | ----------- | | [Print Routing DSL](javascript:Routes()) | Print out Ember's Route DSL for the application | -| [Save Current Scenario](javascript:Scenario()) | Opens a tab with links to allow you to create a bookmarklet or share a URL of your current scenario (your Consul UI relarted development/debug cookies) | +| [Save Current Scenario](javascript:Scenario()) | Opens a tab with links to allow you to create a bookmarklet or share a URL of your current scenario (your Consul UI related development/debug cookies) | +| [Toggle Color Scheme](javascript:Scenario('CONSUL_COLOR_SCHEME=!')) | Toggle Color Scheme from light to dark or vice versa | | [Enable ACLs](javascript:Scenario('CONSUL_ACLS_ENABLE=1')) | Enable ACLs | | [Enable TProxy](javascript:Scenario('CONSUL_TPROXY_ENABLE=1')) | Enable TProxy | | [Enable Nspaces](javascript:Scenario('CONSUL_NSPACES_ENABLE=1')) | Enable Namespace Support |