mirror of https://github.com/hashicorp/consul
parent
61d7acd51f
commit
e6a084807b
|
@ -34,7 +34,7 @@ span.policy-service-identity::before {
|
||||||
@extend %with-logo-consul-color-icon, %as-pseudo;
|
@extend %with-logo-consul-color-icon, %as-pseudo;
|
||||||
}
|
}
|
||||||
%pill.vault::before {
|
%pill.vault::before {
|
||||||
@extend %with-logo-vault-color-icon, %as-pseudo;
|
@extend %with-vault-300;
|
||||||
}
|
}
|
||||||
%pill.aws::before {
|
%pill.aws::before {
|
||||||
@extend %with-logo-aws-color-icon, %as-pseudo;
|
@extend %with-logo-aws-color-icon, %as-pseudo;
|
||||||
|
|
|
@ -69,7 +69,7 @@
|
||||||
@extend %with-logo-nomad-color-icon, %as-pseudo;
|
@extend %with-logo-nomad-color-icon, %as-pseudo;
|
||||||
}
|
}
|
||||||
%popover-select .vault button::before {
|
%popover-select .vault button::before {
|
||||||
@extend %with-logo-vault-color-icon, %as-pseudo;
|
@extend %with-vault-300;
|
||||||
}
|
}
|
||||||
%popover-select .terraform button::before {
|
%popover-select .terraform button::before {
|
||||||
@extend %with-logo-terraform-color-icon, %as-pseudo;
|
@extend %with-logo-terraform-color-icon, %as-pseudo;
|
||||||
|
|
|
@ -11,5 +11,7 @@
|
||||||
@import 'layout';
|
@import 'layout';
|
||||||
/* pinpoint individual overwrites for those 'just on this page' problems */
|
/* pinpoint individual overwrites for those 'just on this page' problems */
|
||||||
@import 'routes';
|
@import 'routes';
|
||||||
|
/* more semantically (for our project) named icons */
|
||||||
|
@import 'icons';
|
||||||
/* global control of themeable components */
|
/* global control of themeable components */
|
||||||
@import 'themes';
|
@import 'themes';
|
||||||
|
|
|
@ -11,6 +11,18 @@
|
||||||
--steel-800: 66 73 77;
|
--steel-800: 66 73 77;
|
||||||
--steel-900: 40 44 46;
|
--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 */
|
/* consul */
|
||||||
--magenta-050: 249 235 242;
|
--magenta-050: 249 235 242;
|
||||||
--magenta-100: 239 196 216;
|
--magenta-100: 239 196 216;
|
||||||
|
@ -61,8 +73,8 @@
|
||||||
--indigo-900: 26 22 63;
|
--indigo-900: 26 22 63;
|
||||||
|
|
||||||
/* nomad */
|
/* nomad */
|
||||||
--teal-050: 235 248 243;/*#c3ecdc*/;
|
--teal-050: 235 248 243; /*#c3ecdc*/
|
||||||
--teal-100: 195 236 220;/*#e1e4e7*/;
|
--teal-100: 195 236 220; /*#e1e4e7*/
|
||||||
--teal-200: 155 223 197;
|
--teal-200: 155 223 197;
|
||||||
--teal-300: 116 211 174;
|
--teal-300: 116 211 174;
|
||||||
--teal-400: 76 198 151;
|
--teal-400: 76 198 151;
|
||||||
|
@ -84,9 +96,9 @@
|
||||||
--cyan-800: 0 85 116;
|
--cyan-800: 0 85 116;
|
||||||
--cyan-900: 0 51 70;
|
--cyan-900: 0 51 70;
|
||||||
|
|
||||||
/* ui */
|
/* ui */
|
||||||
|
|
||||||
/* removed to prevent confusion
|
/* removed to prevent confusion
|
||||||
--gray-1: #191a1c;
|
--gray-1: #191a1c;
|
||||||
--gray-2: #323538;
|
--gray-2: #323538;
|
||||||
--gray-3: #4c4f54;
|
--gray-3: #4c4f54;
|
||||||
|
@ -114,7 +126,7 @@
|
||||||
--gray-900: 31 33 36;
|
--gray-900: 31 33 36;
|
||||||
--gray-950: 21 23 28;
|
--gray-950: 21 23 28;
|
||||||
|
|
||||||
/* status */
|
/* status */
|
||||||
--green-050: 236 247 237;
|
--green-050: 236 247 237;
|
||||||
--green-100: 198 233 201;
|
--green-100: 198 233 201;
|
||||||
--green-200: 160 219 165;
|
--green-200: 160 219 165;
|
||||||
|
@ -150,7 +162,7 @@
|
||||||
--red-800: 91 24 32;
|
--red-800: 91 24 32;
|
||||||
--red-900: 55 15 19;
|
--red-900: 55 15 19;
|
||||||
|
|
||||||
--orange-050: 254 244 236;/*#fa8f37*/;
|
--orange-050: 254 244 236; /*#fa8f37*/
|
||||||
--orange-100: 253 224 200;
|
--orange-100: 253 224 200;
|
||||||
--orange-200: 252 204 164;
|
--orange-200: 252 204 164;
|
||||||
--orange-300: 251 183 127;
|
--orange-300: 251 183 127;
|
||||||
|
@ -161,7 +173,7 @@
|
||||||
--orange-800: 114 65 25;
|
--orange-800: 114 65 25;
|
||||||
--orange-900: 69 39 15;
|
--orange-900: 69 39 15;
|
||||||
|
|
||||||
--yellow-050: 255 251 237;/*#fa8f37;*/
|
--yellow-050: 255 251 237; /*#fa8f37;*/
|
||||||
--yellow-100: 253 238 186;
|
--yellow-100: 253 238 186;
|
||||||
--yellow-200: 252 228 140;
|
--yellow-200: 252 228 140;
|
||||||
--yellow-300: 251 217 94;
|
--yellow-300: 251 217 94;
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import './themes/light';
|
||||||
|
@import './themes/dark';
|
||||||
|
@import './themes/light-high-contrast';
|
||||||
|
@import './themes/dark-high-contrast';
|
||||||
|
@import './frame-placeholders';
|
|
@ -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);
|
||||||
|
}
|
|
@ -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);
|
||||||
|
}
|
|
@ -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);
|
||||||
|
}
|
|
@ -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,0 +1,6 @@
|
||||||
|
@import '../lemon';
|
||||||
|
@import './themes/light';
|
||||||
|
@import './themes/dark';
|
||||||
|
@import './themes/light-high-contrast';
|
||||||
|
@import './themes/dark-high-contrast';
|
||||||
|
@import './frame-placeholders';
|
|
@ -0,0 +1,3 @@
|
||||||
|
%theme-dark-high-contrast {
|
||||||
|
--tone-vault-500: var(--lemon-500);
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
%theme-dark {
|
||||||
|
--tone-vault-500: var(--lemon-500);
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
%theme-light-high-contrast {
|
||||||
|
--tone-vault-500: var(--black);
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
%theme-light {
|
||||||
|
--tone-vault-500: var(--black);
|
||||||
|
}
|
|
@ -3891,7 +3891,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
%vault-16-svg-prop {
|
%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 {
|
%vault-24-svg-prop {
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
%with-vault-300 {
|
||||||
|
@extend %with-vault-16-mask, %as-pseudo;
|
||||||
|
color: rgb(var(--tone-vault-500));
|
||||||
|
}
|
|
@ -1,9 +1,15 @@
|
||||||
@import './base/color/ui/index';
|
@import './base/color/ui/index';
|
||||||
@import './base/color/magenta/index';
|
@import './base/color/magenta/index';
|
||||||
@import './base/color/strawberry/index';
|
@import './base/color/strawberry/index';
|
||||||
:root {
|
@import './base/color/vault/index';
|
||||||
|
|
||||||
|
:root:not(.prefers-color-scheme-dark) {
|
||||||
@extend %theme-light;
|
@extend %theme-light;
|
||||||
}
|
}
|
||||||
|
:root.prefers-color-scheme-dark {
|
||||||
|
@extend %theme-dark;
|
||||||
|
}
|
||||||
|
|
||||||
%main-header-horizontal,
|
%main-header-horizontal,
|
||||||
%main-nav-vertical,
|
%main-nav-vertical,
|
||||||
%main-nav-horizontal {
|
%main-nav-horizontal {
|
||||||
|
|
|
@ -25,7 +25,31 @@ export default function(config = {}, win = window, doc = document) {
|
||||||
};
|
};
|
||||||
win['Scenario'] = function(str = '') {
|
win['Scenario'] = function(str = '') {
|
||||||
if (str.length > 0) {
|
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 = '';
|
win.location.hash = '';
|
||||||
location.reload();
|
location.reload();
|
||||||
} else {
|
} else {
|
||||||
|
@ -70,9 +94,7 @@ export default function(config = {}, win = window, doc = document) {
|
||||||
};
|
};
|
||||||
const operatorConfig = {
|
const operatorConfig = {
|
||||||
...config.operatorConfig,
|
...config.operatorConfig,
|
||||||
...JSON.parse(
|
...JSON.parse(doc.querySelector(`[data-${config.modulePrefix}-config]`).textContent),
|
||||||
doc.querySelector(`[data-${config.modulePrefix}-config]`).textContent
|
|
||||||
)
|
|
||||||
};
|
};
|
||||||
const ui_config = operatorConfig.UIConfig || {};
|
const ui_config = operatorConfig.UIConfig || {};
|
||||||
const scripts = doc.getElementsByTagName('script');
|
const scripts = doc.getElementsByTagName('script');
|
||||||
|
|
|
@ -7,7 +7,8 @@ Below is a list of the most commonly used functions as bookmarklets followed by
|
||||||
| Link/Bookmarklet | Description |
|
| Link/Bookmarklet | Description |
|
||||||
| ---- | ----------- |
|
| ---- | ----------- |
|
||||||
| [Print Routing DSL](javascript:Routes()) | Print out Ember's Route DSL for the application |
|
| [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 ACLs](javascript:Scenario('CONSUL_ACLS_ENABLE=1')) | Enable ACLs |
|
||||||
| [Enable TProxy](javascript:Scenario('CONSUL_TPROXY_ENABLE=1')) | Enable TProxy |
|
| [Enable TProxy](javascript:Scenario('CONSUL_TPROXY_ENABLE=1')) | Enable TProxy |
|
||||||
| [Enable Nspaces](javascript:Scenario('CONSUL_NSPACES_ENABLE=1')) | Enable Namespace Support |
|
| [Enable Nspaces](javascript:Scenario('CONSUL_NSPACES_ENABLE=1')) | Enable Namespace Support |
|
||||||
|
|
Loading…
Reference in New Issue