luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Enable theming (#12134) 

plus Themeable icons (#12135)
This commit is contained in:
John Cowen 2022-01-21 12:19:03 +00:00 committed by GitHub
parent 0446074ad7
commit 8990d383e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 154 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/packages/consul-ui/app/components/pill/index.scss
View File

@ -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;

2
ui/packages/consul-ui/app/components/popover-select/index.scss
View File

@ -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;

2
ui/packages/consul-ui/app/styles/app.scss
View File

@ -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';

26
ui/packages/consul-ui/app/styles/base/color/base-variables.scss
View File

@ -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;

0
ui/packages/consul-ui/app/styles/base/color/lemon/frame-placeholders.scss Normal file
View File

5
ui/packages/consul-ui/app/styles/base/color/lemon/index.scss Normal file
View File

@ -0,0 +1,5 @@
@import './themes/light';
@import './themes/dark';
@import './themes/light-high-contrast';
@import './themes/dark-high-contrast';
@import './frame-placeholders';

17
ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss Normal file
View File

@ -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);
}

17
ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss Normal file
View File

@ -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);
}

17
ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss Normal file
View File

@ -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);
}

17
ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss Normal file
View File

@ -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);
}

0
ui/packages/consul-ui/app/styles/base/color/vault/frame-placeholders.scss Normal file
View File

6
ui/packages/consul-ui/app/styles/base/color/vault/index.scss Normal file
View File

@ -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';

3
ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss Normal file
View File

@ -0,0 +1,3 @@
%theme-dark-high-contrast {
--tone-vault-500: var(--lemon-500);
}

3
ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss Normal file
View File

@ -0,0 +1,3 @@
%theme-dark {
--tone-vault-500: var(--lemon-500);
}

3
ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss Normal file
View File

@ -0,0 +1,3 @@
%theme-light-high-contrast {
--tone-vault-500: var(--black);
}

3
ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss Normal file
View File

@ -0,0 +1,3 @@
%theme-light {
--tone-vault-500: var(--black);
}

2
ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
View File

@ -3891,7 +3891,7 @@
}
%vault-16-svg-prop {
--vault-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><g fill="%23000"><path fill-rule="evenodd" d="M6.035 3.974A4.978 4.978 0 019 3c1.11 0 2.136.362 2.965.974l.005-.004a.75.75 0 111.06 1.06l-.004.005C13.638 5.865 14 6.89 14 8c0 1.11-.362 2.136-.974 2.965l.004.005a.75.75 0 11-1.06 1.06l-.005-.004A4.978 4.978 0 019 13a4.978 4.978 0 01-2.965-.974l-.005.004a.75.75 0 01-1.06-1.06l.004-.005A4.977 4.977 0 014 8c0-1.11.362-2.136.974-2.965L4.97 5.03a.75.75 0 011.06-1.06l.005.004zm1.078 1.078A3.484 3.484 0 019 4.5c.695 0 1.343.203 1.887.552l-.917.918a.75.75 0 001.06 1.06l.918-.917c.35.544.552 1.192.552 1.887 0 .695-.203 1.343-.552 1.887l-.918-.917a.75.75 0 10-1.06 1.06l.917.918A3.484 3.484 0 019 11.5a3.483 3.483 0 01-1.887-.552l.917-.918a.75.75 0 10-1.06-1.06l-.918.917A3.484 3.484 0 015.5 8c0-.695.203-1.343.552-1.887l.918.917a.75.75 0 001.06-1.06l-.917-.918z" clip-rule="evenodd"/><path d="M2.75 3.25A.75.75 0 013.5 4v1.5a.75.75 0 01-1.5 0V4a.75.75 0 01.75-.75zM3.5 10.5a.75.75 0 00-1.5 0V12a.75.75 0 001.5 0v-1.5z"/><path fill-rule="evenodd" d="M2.25 1A2.25 2.25 0 000 3.25v9.5A2.25 2.25 0 002.25 15H3v.25a.75.75 0 001.5 0V15h7v.25a.75.75 0 001.5 0V15h.75A2.25 2.25 0 0016 12.75v-9.5A2.25 2.25 0 0013.75 1H2.25zm11.5 12.5a.75.75 0 00.75-.75v-9.5a.75.75 0 00-.75-.75H2.25a.75.75 0 00-.75.75v9.5c0 .414.336.75.75.75h11.5z" clip-rule="evenodd"/></g></svg>');
--vault-16-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="%23000" d="M0 0l7.971 15.516L16 0H0zm6.732 6.16h-1.27V4.89h1.27v1.27zm0-1.906h-1.27V2.985h1.27v1.269zm1.904 3.81h-1.27v-1.27h1.27v1.27zm0-1.905h-1.27V4.89h1.27v1.27zm0-1.905h-1.27V2.985h1.27v1.269zm1.894 1.905H9.26V4.89h1.27v1.27zM9.26 4.254V2.985h1.27v1.269H9.26z"/></svg>');
}
%vault-24-svg-prop {

4
ui/packages/consul-ui/app/styles/icons.scss Normal file
View File

@ -0,0 +1,4 @@
%with-vault-300 {
@extend %with-vault-16-mask, %as-pseudo;
color: rgb(var(--tone-vault-500));
}

8
ui/packages/consul-ui/app/styles/themes.scss
View File

@ -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 {

30
ui/packages/consul-ui/app/utils/get-environment.js
View File

@ -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');

3
ui/packages/consul-ui/docs/bookmarklets.mdx
View File

@ -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 |