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

UI: CSS Refactor (#4919) 

- Adds full set of svg icons as CSS/Sass variables to the source
- Starts picking out some frame-grays, whilst commenting in possibles
- Remove color prefixing

The prefixes `ui-` and `brand-` for colors hav been removed. This makes
colors slightly easier to type.
In order to differentiate between brand colors and 'normal' colors, normal
colors are named as 'true colors' i.e. blue, red, green etc etc
whereas the brand colors used a more premium sounding name such as
'steel' for vault gray, 'magenta' for consul, 'cobalt' for vagrant etc etc.
This commit is contained in:
John Cowen 2018-11-09 15:28:26 +00:00 committed by John Cowen
parent d7655ea356
commit 99070f2983
40 changed files with 527 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
ui-v2/app/styles/base/color/base-variables.scss
View File

@ -1,133 +1,133 @@
$brand-gray-050: #f5f6f7;
$brand-gray-100: #e1e4e7;
$brand-gray-200: #cdd3d7;
$brand-gray-300: #b9c1c7;
$brand-gray-400: #a5b0b7;
$brand-gray-500: #919fa8;
$brand-gray-600: #77838a;
$brand-gray-700: #5d666b;
$brand-gray-800: #42494d;
$brand-gray-900: #282c2e;
$brand-magenta-050: #f9ebf2;
$brand-magenta-100: #efc4d8;
$brand-magenta-200: #e59ebe;
$brand-magenta-300: #da77a4;
$brand-magenta-400: #d0508a;
$brand-magenta-500: #c62a71;
$brand-magenta-600: #9e2159;
$brand-magenta-700: #7d1a47;
$brand-magenta-800: #5a1434;
$brand-magenta-900: #360c1f;
$brand-blue-050: #f0f5ff;
$brand-blue-100: #bfd4ff;
$brand-blue-200: #8ab1ff;
$brand-blue-300: #5b92ff;
$brand-blue-400: #387aff;
$brand-blue-500: #1563ff;
$brand-blue-600: #0f4fd1;
$brand-blue-700: #0e40a3;
$brand-blue-800: #0a2d74;
$brand-blue-900: #061b46;
$brand-purple-050: #eeedfc;
$brand-purple-100: #d5d2f7;
$brand-purple-200: #aea7f2;
$brand-purple-300: #8d83ed;
$brand-purple-400: #7568e8;
$brand-purple-500: #5c4ee5;
$brand-purple-600: #4c40bc;
$brand-purple-700: #3b3292;
$brand-purple-800: #2a2469;
$brand-purple-900: #1a163f;
$brand-teal-050: #ebf8f3;
$brand-teal-100: #c3ecdc;
$brand-teal-200: #9bdfc5;
$brand-teal-300: #74d3ae;
$brand-teal-400: #4cc679;
$brand-teal-500: #25ba81;
$brand-teal-600: #1f996a;
$brand-teal-700: #187753;
$brand-teal-800: #11553b;
$brand-teal-900: #0b3324;
$brand-cyan-050: #e7f8ff;
$brand-cyan-100: #b9ecff;
$brand-cyan-200: #8be0ff;
$brand-cyan-300: #5cd3ff;
$brand-cyan-400: #2ec7ff;
$brand-cyan-500: #00bbff;
$brand-cyan-600: #009fd9;
$brand-cyan-700: #0077a3;
$brand-cyan-800: #005574;
$brand-cyan-900: #003346;
$ui-gray-1: #191a1c;
$ui-gray-2: #323538;
$ui-gray-3: #4c4f54;
$ui-gray-4: #656a70;
$ui-gray-5: #7f858d;
$ui-gray-6: #9a9ea5;
$ui-gray-7: #b4b8bc;
$ui-gray-8: #d0d2d5;
$ui-gray-9: #ebecee;
$ui-gray-10: #f3f4f6;
$ui-gray-050: #f7f8fa;
$ui-gray-100: #ebeef2;
$ui-gray-200: #dce0e6;
$ui-gray-300: #bac1cc;
$ui-gray-400: #8e96a3;
$ui-gray-500: #6f7682;
$ui-gray-600: #626873;
$ui-gray-700: #525761;
$ui-gray-800: #373a42;
$ui-gray-900: #1f2124;
$ui-green-050: #ecf7ed;
$ui-green-100: #c6e9c9;
$ui-green-200: #a0dba5;
$ui-green-300: #7acc81;
$ui-green-400: #54be5d;
$ui-green-500: #2eb039;
$ui-green-600: #26912f;
$ui-green-700: #1e7125;
$ui-green-800: #15501a;
$ui-green-900: #0d3010;
$ui-blue-050: #f0f5ff;
$ui-blue-100: #bfd4ff;
$ui-blue-200: #8ab1ff;
$ui-blue-300: #5b92ff;
$ui-blue-400: #387aff;
$ui-blue-500: #1563ff;
$ui-blue-600: #0f4fd1;
$ui-blue-700: #0e40a3;
$ui-blue-800: #0a2d74;
$ui-blue-900: #061b46;
$ui-red-050: #f9ecee;
$ui-red-100: #efc7cc;
$ui-red-200: #e5a2aa;
$ui-red-300: #db7d88;
$ui-red-400: #d15866;
$ui-red-500: #c73445;
$ui-red-600: #a32b39;
$ui-red-700: #7f222c;
$ui-red-800: #5b1820;
$ui-red-900: #370f13;
$ui-orange-050: #fef4ec;
$ui-orange-100: #fde0c8;
$ui-orange-200: #fccca4;
$ui-orange-300: #fbb77f;
$ui-orange-400: #faa35b;
$ui-orange-500: #fa8f37;
$ui-orange-600: #cd762e;
$ui-orange-700: #a05c23;
$ui-orange-800: #724119;
$ui-orange-900: #45270f;
$ui-yellow-050: #fffbed;
$ui-yellow-100: #fdeeba;
$ui-yellow-200: #fce48c;
$ui-yellow-300: #fbd95e;
$ui-yellow-400: #face30;
$ui-yellow-500: #fac402;
$ui-yellow-600: #cda102;
$ui-yellow-700: #a07d02;
$ui-yellow-800: #725a01;
$ui-yellow-900: #453601;
$steel-050: #f5f6f7;
$steel-100: #e1e4e7;
$steel-200: #cdd3d7;
$steel-300: #b9c1c7;
$steel-400: #a5b0b7;
$steel-500: #919fa8;
$steel-600: #77838a;
$steel-700: #5d666b;
$steel-800: #42494d;
$steel-900: #282c2e;
$magenta-050: #f9ebf2;
$magenta-100: #efc4d8;
$magenta-200: #e59ebe;
$magenta-300: #da77a4;
$magenta-400: #d0508a;
$magenta-500: #c62a71;
$magenta-600: #9e2159;
$magenta-700: #7d1a47;
$magenta-800: #5a1434;
$magenta-900: #360c1f;
$cobalt-050: #f0f5ff;
$cobalt-100: #bfd4ff;
$cobalt-200: #8ab1ff;
$cobalt-300: #5b92ff;
$cobalt-400: #387aff;
$cobalt-500: #1563ff;
$cobalt-600: #0f4fd1;
$cobalt-700: #0e40a3;
$cobalt-800: #0a2d74;
$cobalt-900: #061b46;
$indigo-050: #eeedfc;
$indigo-100: #d5d2f7;
$indigo-200: #aea7f2;
$indigo-300: #8d83ed;
$indigo-400: #7568e8;
$indigo-500: #5c4ee5;
$indigo-600: #4c40bc;
$indigo-700: #3b3292;
$indigo-800: #2a2469;
$indigo-900: #1a163f;
$teal-050: #ebf8f3;
$teal-100: #c3ecdc;
$teal-200: #9bdfc5;
$teal-300: #74d3ae;
$teal-400: #4cc697;
$teal-500: #25ba81;
$teal-600: #1f996a;
$teal-700: #187753;
$teal-800: #11553b;
$teal-900: #0b3324;
$cyan-050: #e7f8ff;
$cyan-100: #b9ecff;
$cyan-200: #8be0ff;
$cyan-300: #5cd3ff;
$cyan-400: #2ec7ff;
$cyan-500: #00bbff;
$cyan-600: #009fd9;
$cyan-700: #0077a3;
$cyan-800: #005574;
$cyan-900: #003346;
$gray-1: #191a1c;
$gray-2: #323538;
$gray-3: #4c4f54;
$gray-4: #656a70;
$gray-5: #7f858d;
$gray-6: #9a9ea5;
$gray-7: #b4b8bc;
$gray-8: #d0d2d5;
$gray-9: #ebecee;
$gray-10: #f3f4f6;
$gray-050: #f7f8fa;
$gray-100: #ebeef2;
$gray-200: #dce0e6;
$gray-300: #bac1cc;
$gray-400: #8e96a3;
$gray-500: #6f7682;
$gray-600: #626873;
$gray-700: #525761;
$gray-800: #373a42;
$gray-900: #1f2124;
$green-050: #ecf7ed;
$green-100: #c6e9c9;
$green-200: #a0dba5;
$green-300: #7acc81;
$green-400: #54be5d;
$green-500: #2eb039;
$green-600: #26912f;
$green-700: #1e7125;
$green-800: #15501a;
$green-900: #0d3010;
$blue-050: #f0f5ff;
$blue-100: #bfd4ff;
$blue-200: #8ab1ff;
$blue-300: #5b92ff;
$blue-400: #387aff;
$blue-500: #1563ff;
$blue-600: #0f4fd1;
$blue-700: #0e40a3;
$blue-800: #0a2d74;
$blue-900: #061b46;
$red-050: #f9ecee;
$red-100: #efc7cc;
$red-200: #e5a2aa;
$red-300: #db7d88;
$red-400: #d15866;
$red-500: #c73445;
$red-600: #a32b39;
$red-700: #7f222c;
$red-800: #5b1820;
$red-900: #370f13;
$orange-050: #fef4ec;
$orange-100: #fde0c8;
$orange-200: #fccca4;
$orange-300: #fbb77f;
$orange-400: #faa35b;
$orange-500: #fa8f37;
$orange-600: #cd762e;
$orange-700: #a05c23;
$orange-800: #724119;
$orange-900: #45270f;
$yellow-050: #fffbed;
$yellow-100: #fdeeba;
$yellow-200: #fce48c;
$yellow-300: #fbd95e;
$yellow-400: #face30;
$yellow-500: #fac402;
$yellow-600: #cda102;
$yellow-700: #a07d02;
$yellow-800: #725a01;
$yellow-900: #453601;
$transparent: transparent;
$ui-white: #fff;
$ui-black: #000;
$white: #fff;
$black: #000;

153
ui-v2/app/styles/base/color/frame-placeholders.scss
View File

@ -5,82 +5,153 @@
%frame-border-000 {
/* same as decor-border-000 - but need to think about being able to import color on its own*/
border-style: solid;
// border-width: 0;
}
%frame-yellow-500 {
/* possibly filter bar */
/* modal close button */
%frame-gray-050 {
@extend %frame-border-000;
background-color: $ui-yellow-050;
border-color: $ui-color-warning;
background-color: $gray-050;
border-color: $gray-300;
color: $gray-400;
}
%frame-green-500 {
/* modal main content */
%frame-gray-100 {
@extend %frame-border-000;
background-color: $ui-green-050;
border-color: $ui-green-500;
color: $ui-green-500;
background-color: $white;
border-color: $gray-300;
color: $gray-600; /* wasn't set */
}
/* hover */
%frame-gray-200 {
@extend %frame-border-000;
background-color: $transparent;
border-color: $gray-700;
color: $gray-800;
}
%frame-gray-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $gray-700;
color: $gray-800;
}
/* button */
/**/
%frame-gray-400 {
@extend %frame-border-000;
background-color: $gray-050;
border-color: $gray-300;
color: $gray-800;
}
%frame-gray-500 {
@extend %frame-border-000;
background-color: $ui-gray-050;
border-color: $ui-gray-300;
color: $ui-gray-400;
background-color: $gray-050;
border-color: $gray-300;
color: $gray-400;
}
/* tabs */
%frame-gray-600 {
@extend %frame-border-000;
background-color: $gray-100;
border-color: $gray-500;
color: $gray-500;
}
/* active */
%frame-gray-700 {
@extend %frame-border-000;
background-color: $gray-200;
border-color: $gray-700;
color: $gray-800;
}
/* modal bars */
%frame-gray-800 {
@extend %frame-border-000;
background-color: $gray-050;
border-color: $gray-300;
color: $gray-900;
}
%frame-gray-900 {
@extend %frame-border-000;
background-color: $gray-100;
border-color: $gray-300;
color: $gray-900;
}
%frame-yellow-500 {
@extend %frame-border-000;
background-color: $yellow-050;
border-color: $color-warning;
}
%frame-green-500 {
@extend %frame-border-000;
background-color: $green-050;
border-color: $green-500;
color: $green-500;
}
%frame-blue-500 {
@extend %frame-border-000;
background-color: $blue-050;
border-color: $blue-500;
color: $blue-800;
}
%frame-blue-600 {
@extend %frame-border-000;
background-color: $ui-blue-200;
border-color: $ui-gray-400;
color: $ui-blue-050;
background-color: $blue-200;
border-color: $gray-400;
color: $blue-050;
}
%frame-blue-700 {
@extend %frame-border-000;
background-color: $ui-blue-400;
border-color: $ui-blue-800;
color: $ui-white;
background-color: $blue-400;
border-color: $blue-800;
color: $white;
}
%frame-blue-800 {
@extend %frame-border-000;
background-color: $ui-blue-500;
border-color: $ui-blue-800;
color: $ui-white;
background-color: $blue-500;
border-color: $blue-800;
color: $white;
}
%frame-blue-900 {
@extend %frame-border-000;
background-color: $ui-blue-700;
border-color: $ui-blue-800;
color: $ui-white;
background-color: $blue-700;
border-color: $blue-800;
color: $white;
}
%frame-red-300 {
@extend %frame-border-000;
background-color: $ui-white;
border-color: $ui-red-500;
color: $ui-red-500;
background-color: $white;
border-color: $red-500;
color: $red-500;
}
%frame-red-500 {
@extend %frame-border-000;
background-color: $ui-red-050;
border-color: $ui-red-500;
color: $ui-red-800;
background-color: $red-050;
border-color: $red-500;
color: $red-800;
}
%frame-red-600 {
@extend %frame-border-000;
background-color: $ui-red-200;
border-color: $ui-gray-400;
color: $ui-white;
background-color: $red-200;
border-color: $gray-400;
color: $white;
}
%frame-red-700 {
@extend %frame-border-000;
background-color: $ui-red-500;
border-color: $ui-red-800;
color: $ui-white;
background-color: $red-500;
border-color: $red-800;
color: $white;
}
%frame-red-900 {
@extend %frame-border-000;
background-color: $ui-red-700;
border-color: $ui-red-800;
color: $ui-white;
background-color: $red-700;
border-color: $red-800;
color: $white;
}
%frame-magenta-300 {
@extend %frame-border-000;
background-color: $ui-white;
border-color: $brand-magenta-600;
color: $brand-magenta-600;
background-color: $white;
border-color: $magenta-600;
color: $magenta-600;
}

24
ui-v2/app/styles/base/color/semantic-variables.scss
View File

@ -1,12 +1,12 @@
$ui-color-primary: $ui-blue-500;
$ui-color-dangerous: $ui-red-500;
$ui-color-primary-disabled: $ui-blue-500;
$ui-color-transparent: transparent;
$ui-color-neutral: $ui-gray-500;
$ui-color-action: $ui-blue-500;
$ui-color-info: $ui-blue-500;
$ui-color-success: $ui-green-500;
$ui-color-failure: $ui-red-500;
$ui-color-danger: $ui-red-500;
$ui-color-warning: $ui-yellow-500;
$ui-color-alert: $ui-orange-500;
$color-primary: $blue-500;
$color-dangerous: $red-500;
$color-primary-disabled: $blue-500;
$color-transparent: transparent;
$color-neutral: $gray-500;
$color-action: $blue-500;
$color-info: $blue-500;
$color-success: $green-500;
$color-failure: $red-500;
$color-danger: $red-500;
$color-warning: $yellow-500;
$color-alert: $orange-500;

98
ui-v2/app/styles/base/icons/base-variables.scss Normal file
View File

@ -0,0 +1,98 @@
$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="%23000"/></svg>');
$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" fill="%23000"/></svg>');
$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="%23000"/></svg>');
$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 3v14.2l-3.6-3.6L6 15l6 6 6-6-1.4-1.4-3.6 3.6V3h-2z" fill="%23000"/></svg>');
$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z" fill="%23000"/></svg>');
$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%23000"/></svg>');
$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 21V6.8l3.6 3.6L18 9l-6-6-6 6 1.4 1.4L11 6.8V21h2z" fill="%23000"/></svg>');
$calendar-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.429 19.143h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428v-1.429h-1.428v1.429zm-2.857 0h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428V12h-1.428v1.429zm-2.857 0h1.428V12H14.43v1.429zm-2.858 0H13V12h-1.429v1.429zm-2.857 0h1.429V12H8.714v1.429zm-2.857 0h1.429V12H5.857v1.429zm11.429-2.858h1.428V9.143h-1.428v1.428zm-2.857 0h1.428V9.143H14.43v1.428zm-2.858 0H13V9.143h-1.429v1.428zm-2.857 0h1.429V9.143H8.714v1.428zm7.143-5.714h1.429V2h-1.429v2.857zm-8.571 0h1.428V2H7.286v2.857zM4.429 20.571h15.714V7.714H4.429v12.857zM20.143 3.43h-1.429v2.14c0 .4-.314.715-.714.715h-2.857a.707.707 0 0 1-.714-.715V3.43h-4.286v2.14c0 .4-.314.715-.714.715H6.57a.707.707 0 0 1-.714-.715V3.43H4.43A1.43 1.43 0 0 0 3 4.857v15.714C3 21.357 3.643 22 4.429 22h15.714c.786 0 1.428-.643 1.428-1.429V4.857c0-.786-.642-1.428-1.428-1.428z" fill-rule="evenodd" fill="%23000"/></svg>');
$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="%23000"/></svg>');
$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" viewport="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23373a42"/></svg>');
$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-2 12.59L13.41 12 17 8.41 15.59 7 12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59z" fill="%23000"/></svg>');
$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.41 5L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8z" fill="%23000"/></svg>');
$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z" fill="%23000"/></svg>');
$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 14l5-5 5 5z" fill="%23000"/></svg>');
$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="%23000"/></svg>');
$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8-8-3.59-8-8zm3 0l1.41-1.41L11 13.17l5.59-5.59L18 9l-7 7-4-4z" fill="%23000"/></svg>');
$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="%23000"/></svg>');
$chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="%23000"/></svg>');
$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.7 16.9l-4.6-4.6 4.6-4.6-1.4-1.4-6 6 6 6 1.4-1.4z" fill="%23000"/></svg>');
$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.3 7.7l4.6 4.6-4.6 4.6 1.4 1.4 6-6-6-6-1.4 1.4z" fill="%23000"/></svg>');
$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.4 16l4.6-4.6 4.6 4.6 1.4-1.4-6-6-6 6L7.4 16z" fill="%23000"/></svg>');
$chevron-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M5.001 3.515L8.293.287a1.014 1.014 0 0 1 1.414 0 .967.967 0 0 1 0 1.386L5.71 5.595a1.014 1.014 0 0 1-1.414 0L.293 1.674a.967.967 0 0 1 0-1.387 1.014 1.014 0 0 1 1.414 0l3.294 3.228z" fill="%23000" fill-rule="nonzero"/></svg>');
$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z" fill="%23000"/></svg>');
$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" fill="%23000"/></svg>');
$code-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" fill="%23000"/></svg>');
$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13.82 3C13.4 1.84 12.3 1 11 1c-1.3 0-2.4.84-2.82 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM9 13H6v2h3v-2zm-3 6h5v-2H6v2zM6 9v2h6V9H6zm5-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm9.003 10H23v2h-2.997v2H18v4H4V5h2v1.007h10V5h2v5.992h2.003V13zm0 0H15.99v-3L12 14l3.99 4v-3h4.013v-2z" fill="%23000"/></svg>');
$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.82 3C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16.025c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-4.18zM12 3c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 15l-4-4 1.41-1.41L10 15.17l6.59-6.59L18 10l-8 8z" fill="%23000"/></svg>');
$disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31A7.902 7.902 0 0 1 12 20zm6.31-3.1L7.1 5.69A7.902 7.902 0 0 1 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" fill="%23000"/></svg>');
$download-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
$edit-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 15.796v3.058h3.058l8.153-8.154-3.057-3.057L5 15.796zm1.02 0h1.018v1.02h1.02v1.018H6.02v-2.038zm12.536-7.44L17.23 9.68l-3.058-3.057 1.325-1.326a1.015 1.015 0 0 1 1.436-.001h.002l1.62 1.622c.397.397.397 1.04 0 1.437z" fill="%23000"/></svg>');
$exit-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 19V5h5.944V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-5.98h-2V19H5zm9-16v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="%23000"/></svg>');
$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l2.3 2.3-2.89 2.87 1.42 1.42L8.7 16.7 11 19v-6H5zm14-2l-2.3-2.3 2.89-2.87-1.42-1.42L15.3 7.3 13 5v6h6z" fill="%23000"/></svg>');
$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14 4l2.3 2.3-2.89 2.87 1.42 1.42L17.7 7.7 20 10V4h-6zm-4 16l-2.3-2.3 2.89-2.87-1.42-1.42L6.3 16.3 4 14v6h6z" fill="%23000"/></svg>');
$eye-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg"><path d="M10.229 1.301A3.493 3.493 0 0 1 11.5 4a3.493 3.493 0 0 1-1.271 2.699c1.547-.431 3.008-1.326 4.393-2.699-1.385-1.373-2.846-2.268-4.393-2.699zM5.771 6.7A3.493 3.493 0 0 1 4.5 4c0-1.086.495-2.057 1.271-2.699C4.224 1.732 2.763 2.627 1.378 4c1.385 1.373 2.846 2.268 4.393 2.699zM8 8C5.054 8 2.388 6.667 0 4c2.388-2.667 5.054-4 8-4 2.946 0 5.612 1.333 8 4-2.388 2.667-5.054 4-8 4zm.965-4.25a1 1 0 1 0 .07-2 1 1 0 0 0-.07 2z" fill="%237C8896"/></svg>');
$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18.714 7.714L14.43 3.43h-10v17.14h14.285V7.714zM20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zM5.857 17.714h10v-1.428h-10v1.428zm0-2.857h10V13.43h-10v1.428zm0-2.857h10v-1.429h-10V12zm0-4.286h5.714V6.286H5.857v1.428z" fill="%23000"/></svg>');
$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20.143 7v13.571c0 .786-.643 1.429-1.429 1.429H4.43A1.433 1.433 0 0 1 3 20.571V3.43C3 2.643 3.643 2 4.429 2h10.714l5 5zm-1.429.714H14.43V3.43h-10v17.14h14.285V7.714z" fill="%23000"/></svg>');
$filter-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" fill="%23000"/></svg>');
$flag-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z" fill="%23000"/></svg>');
$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="%23000"/></svg>');
$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%23000"/></svg>');
$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.286 9.699a1.556 1.556 0 0 1-1.543-1.543c0-.836.707-1.543 1.543-1.543.835 0 1.543.707 1.543 1.543 0 .835-.708 1.543-1.543 1.543M8.57 19.984a1.556 1.556 0 0 1-1.542-1.543c0-.835.707-1.542 1.542-1.542.836 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543m0-15.955c.849 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543a1.564 1.564 0 0 1-1.54-1.543c0-.835.707-1.542 1.542-1.542m10.286 4.114a2.563 2.563 0 0 0-2.571-2.572A2.562 2.562 0 0 0 15 10.354v.386c-.026.669-.296 1.26-.81 1.774-.514.515-1.106.785-1.774.81-1.067.026-1.903.206-2.572.58V7.783A2.563 2.563 0 0 0 8.56 3 2.552 2.552 0 0 0 6 5.571a2.571 2.571 0 0 0 1.286 2.212v8.434C6.527 16.667 6 17.49 6 18.43A2.563 2.563 0 0 0 8.571 21a2.563 2.563 0 0 0 2.572-2.571c0-.682-.257-1.286-.682-1.749.116-.077.618-.526.759-.604.321-.142.72-.219 1.209-.219 1.35-.064 2.507-.578 3.535-1.607 1.029-1.029 1.543-2.546 1.607-3.883h-.025c.784-.463 1.311-1.286 1.311-2.224" fill="%23000"/></svg>');
$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.971a2.82 2.82 0 0 1-2.829-2.828A2.82 2.82 0 0 1 12 9.314a2.82 2.82 0 0 1 2.829 2.829A2.82 2.82 0 0 1 12 14.97zm4.963-4.114C16.384 8.646 14.39 7 12 7s-4.384 1.646-4.963 3.857H3v2.572h4.037C7.616 15.64 9.61 17.286 12 17.286s4.384-1.646 4.963-3.857H21v-2.572h-4.037z" fill="%23000"/></svg>');
$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.398 8.04c-.792 0-1.44-.66-1.44-1.44 0-.78.66-1.44 1.44-1.44.78 0 1.44.66 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.44 10.56c0 .792-.66 1.44-1.44 1.44-.78 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44m.96-12c0-1.332-1.068-2.4-2.4-2.4a2.391 2.391 0 0 0-1.2 4.464v7.872A2.39 2.39 0 0 0 7.398 21a2.39 2.39 0 0 0 1.2-4.464V8.664a2.386 2.386 0 0 0 1.2-2.064m7.2 13.44c-.792 0-1.44-.66-1.44-1.44 0-.781.66-1.44 1.44-1.44.78 0 1.44.659 1.44 1.44 0 .78-.66 1.44-1.44 1.44m1.2-3.504V9c-.036-.936-.408-1.764-1.128-2.472S15.534 5.436 14.598 5.4h-1.2V3l-3.6 3.6 3.6 3.6V7.8h1.2c.324.024.576.132.828.372s.36.504.372.828v7.536a2.392 2.392 0 0 0 1.2 4.464 2.39 2.39 0 0 0 1.2-4.464" fill="%23000"/></svg>');
$hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" fill-rule="evenodd" fill="%23000"/></svg>');
$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" fill="%23000"/></svg>');
$history-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" fill="%23000"/></svg>');
$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm1.429 10.014a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 7.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000" fill-rule="evenodd"/></svg>');
$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.543 2 12 6.486 2 12 2zm0 1.886c-4.486 0-8.143 3.628-8.143 8.114 0 4.486 3.657 8.143 8.143 8.143 4.486 0 8.143-3.643 8.143-8.143 0-4.5-3.657-8.129-8.143-8.129v.015zm1.429 8.128a1.555 1.555 0 0 0-.443-.985c-.286-.272-.6-.429-.986-.443h-1.429c-.385.028-.685.185-.985.443a1.457 1.457 0 0 0-.443.985h1.428V16.3c.029.386.158.714.443.986.286.285.6.443.986.443h1.429c.385 0 .685-.158.985-.443.286-.272.429-.6.443-.986H13.43V12v.014zM11 8.73a1.345 1.345 0 0 1-.4-1c0-.4.129-.743.4-1 .271-.258.6-.4 1-.4s.743.128 1 .4c.257.271.4.6.4 1s-.129.742-.4 1a1.433 1.433 0 0 1-1 .428c-.4 0-.743-.157-1-.428z" fill="%23000"/></svg>');
$kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="21" height="20" xmlns="http://www.w3.org/2000/svg"><g stroke="%23FFF" fill="none"><path d="M10.21 1.002a1.241 1.241 0 0 0-.472.12L3.29 4.201a1.225 1.225 0 0 0-.667.83l-1.591 6.922a1.215 1.215 0 0 0 .238 1.035l4.463 5.55c.234.29.59.46.964.46l7.159-.002c.375 0 .73-.168.964-.459l4.462-5.55c.234-.292.322-.673.238-1.036L17.927 5.03a1.225 1.225 0 0 0-.667-.83l-6.45-3.08a1.242 1.242 0 0 0-.598-.12z" fill="%23326CE5"/><path d="M10.275 3.357c-.213 0-.386.192-.386.429v.11c.005.136.035.24.052.367.033.27.06.492.043.7a.421.421 0 0 1-.125.2l-.01.163a4.965 4.965 0 0 0-3.22 1.548 6.47 6.47 0 0 1-.138-.099c-.07.01-.139.03-.23-.022-.172-.117-.33-.277-.52-.47-.087-.093-.15-.181-.254-.27L5.4 5.944a.46.46 0 0 0-.269-.101.372.372 0 0 0-.307.136c-.133.167-.09.422.094.57l.006.003.08.065c.11.08.21.122.32.187.231.142.422.26.574.403.06.063.07.175.078.223l.123.11a4.995 4.995 0 0 0-.787 3.483l-.162.047c-.042.055-.103.141-.166.167-.198.063-.422.086-.692.114-.126.01-.236.004-.37.03-.03.005-.07.016-.103.023l-.003.001-.006.002c-.228.055-.374.264-.327.47.047.206.27.331.498.282h.006c.003-.001.005-.003.008-.003l.1-.022c.131-.036.227-.088.346-.133.255-.092.467-.168.673-.198.086-.007.177.053.222.078l.168-.029a5.023 5.023 0 0 0 2.226 2.78l-.07.168c.025.065.053.154.034.218-.075.195-.203.4-.35.628-.07.106-.142.188-.206.309l-.05.104c-.099.212-.026.456.165.548.191.092.43-.005.532-.218h.001v-.001c.015-.03.036-.07.048-.098.055-.126.073-.233.111-.354.102-.257.159-.526.3-.694.038-.046.1-.063.166-.08l.087-.159a4.987 4.987 0 0 0 3.562.01l.083.148c.066.021.138.032.197.12.105.179.177.391.265.648.038.121.057.229.112.354.012.029.033.069.048.099.102.213.341.311.533.219.19-.092.264-.337.164-.549l-.05-.104c-.064-.12-.136-.202-.207-.307-.146-.23-.267-.419-.342-.613-.032-.1.005-.163.03-.228-.015-.017-.047-.111-.065-.156a5.023 5.023 0 0 0 2.225-2.8l.165.03c.058-.039.112-.088.216-.08.206.03.418.106.673.198.12.045.215.098.347.133.028.008.068.015.1.022l.007.002.006.001c.229.05.45-.076.498-.282.047-.206-.1-.415-.327-.47l-.112-.027c-.134-.025-.243-.019-.37-.03-.27-.027-.494-.05-.692-.113-.081-.031-.139-.128-.167-.167l-.156-.046a4.997 4.997 0 0 0-.804-3.474l.137-.123c.006-.069.001-.142.073-.218.151-.143.343-.261.574-.404.11-.064.21-.106.32-.187.025-.018.06-.047.086-.068.185-.148.227-.403.094-.57-.133-.166-.39-.182-.575-.034-.027.02-.062.048-.086.068-.104.09-.168.178-.255.27-.19.194-.348.355-.52.471-.075.044-.185.029-.235.026l-.146.104A5.059 5.059 0 0 0 10.7 5.328a9.325 9.325 0 0 1-.009-.172c-.05-.048-.11-.09-.126-.193-.017-.208.011-.43.044-.7.018-.126.047-.23.053-.367l-.001-.11c0-.237-.173-.429-.386-.429zM9.79 6.351l-.114 2.025-.009.004a.34.34 0 0 1-.54.26l-.003.002-1.66-1.177A3.976 3.976 0 0 1 9.79 6.351zm.968 0a4.01 4.01 0 0 1 2.313 1.115l-1.65 1.17-.006-.003a.34.34 0 0 1-.54-.26h-.003L10.76 6.35zm-3.896 1.87l1.516 1.357-.002.008a.34.34 0 0 1-.134.585l-.001.006-1.944.561a3.975 3.975 0 0 1 .565-2.516zm6.813.001a4.025 4.025 0 0 1 .582 2.51l-1.954-.563-.001-.008a.34.34 0 0 1-.134-.585v-.004l1.507-1.35zm-3.712 1.46h.62l.387.483-.139.602-.557.268-.56-.269-.138-.602.387-.482zm1.99 1.652a.339.339 0 0 1 .08.005l.002-.004 2.01.34a3.98 3.98 0 0 1-1.609 2.022l-.78-1.885.002-.003a.34.34 0 0 1 .296-.475zm-3.375.008a.34.34 0 0 1 .308.474l.005.007-.772 1.866a3.997 3.997 0 0 1-1.604-2.007l1.993-.339.003.005a.345.345 0 0 1 .067-.006zm1.683.817a.338.338 0 0 1 .312.179h.008l.982 1.775a3.991 3.991 0 0 1-2.57-.002l.979-1.772h.001a.34.34 0 0 1 .288-.18z" stroke-width=".25" fill="%23FFF"/></g></svg>');
$link-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20.074 10.015l-2.295 2.294a3.063 3.063 0 0 1-2.25.926c-.897 0-1.661-.323-2.294-.97l-.97.97c.647.633.97 1.401.97 2.305 0 .883-.305 1.63-.915 2.24l-2.272 2.282c-.61.626-1.36.938-2.25.938-.883 0-1.629-.305-2.24-.915l-1.62-1.61C3.312 17.863 3 17.117 3 16.234c0-.882.309-1.632.926-2.25l2.295-2.294a3.063 3.063 0 0 1 2.25-.926c.897 0 1.661.323 2.294.97l.97-.97a3.102 3.102 0 0 1-.97-2.305c0-.883.305-1.63.915-2.24l2.272-2.282c.61-.626 1.36-.938 2.25-.938.883 0 1.629.305 2.24.915l1.62 1.61c.626.611.938 1.357.938 2.24 0 .882-.309 1.632-.926 2.25m-9.437 4.83l-.204.21a6.818 6.818 0 0 1-.237.238 2.62 2.62 0 0 1-.209.166.884.884 0 0 1-.583.182c-.294 0-.543-.103-.749-.31a1.025 1.025 0 0 1-.308-.75.89.89 0 0 1 .182-.586 2.482 2.482 0 0 1 .401-.448l.21-.204A1.062 1.062 0 0 0 8.346 13c-.301 0-.55.1-.749.298l-2.29 2.299a1.025 1.025 0 0 0-.308.751c0 .287.103.534.308.74l1.619 1.614c.212.199.462.298.748.298.294 0 .543-.103.749-.31l2.268-2.287c.205-.206.308-.456.308-.751 0-.31-.121-.578-.363-.807m8.055-7.944l-1.619-1.614A1.058 1.058 0 0 0 16.325 5c-.301 0-.55.1-.749.298l-2.268 2.288a1.025 1.025 0 0 0-.308.751c0 .31.121.578.363.807l.204-.21c.114-.118.193-.197.237-.238a2.62 2.62 0 0 1 .209-.166.884.884 0 0 1 .583-.182c.294 0 .543.103.749.31.205.206.308.456.308.75a.89.89 0 0 1-.182.586 2.482 2.482 0 0 1-.401.448l-.21.204c.22.236.485.354.793.354.294 0 .543-.103.749-.31l2.29-2.298c.205-.206.308-.456.308-.751 0-.287-.103-.534-.308-.74" fill="%23000"/></svg>');
$loading-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" class="structure-icon-loading"><style>.structure-icon-loading-base{opacity:.1}.structure-icon-loading-progress{animation:structure-icon-loading-fancy-spin 3s infinite linear;opacity:.25;stroke-dasharray:0 44;stroke-dashoffset:0;stroke-linecap:round;transform-origin:50% 50%}@keyframes structure-icon-loading-fancy-spin{0%{stroke-dasharray:0 44;stroke-dashoffset:0}25%{stroke-dasharray:33 11;stroke-dashoffset:-40}50%{stroke-dasharray:0 44;stroke-dashoffset:-110}75%{stroke-dasharray:33 11;stroke-dashoffset:-150}to{stroke-dasharray:0 44;stroke-dashoffset:-220}}@keyframes structure-icon-loading-simple-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><defs><path stroke="%23000" stroke-width="3" fill="none" id="a" d="M12 5l6 3v8l-6 3-6-3V8z"/></defs><use xlink:href="%23a" class="structure-icon-loading-base"/><use xlink:href="%23a" class="structure-icon-loading-progress"/></svg>');
$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-3.876 5.767H9.473l2.319 3.938 2.332-3.938zM15.1 8H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" fill="%23000"/></svg>');
$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M21 21.78L4.22 5 3 6.22l2.04 2.04C4.42 8.6 4 9.25 4 10v10c0 1.1.9 2 2 2h12c.23 0 .45-.05.66-.12L19.78 23 21 21.78zM8.9 6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H9.66L20 18.34V10c0-1.1-.9-2-2-2h-1V6c0-2.76-2.24-5-5-5-2.56 0-4.64 1.93-4.94 4.4L8.9 7.24V6z" fill="%23000"/></svg>');
$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10zm-3.876-6.233H9.473l2.319 3.938 2.332-3.938z" fill="%23000"/></svg>');
$menu-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 18h16v-2H4v2zm0-5h16v-2H4v2zm0-7v2h16V6H4z" fill="%23000"/></svg>');
$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill="%23000"/></svg>');
$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13H5v-2h14z" fill="%23000"/></svg>');
$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" fill="%23000"/></svg>');
$minus-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="9" height="2" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFF" d="M0 0h9v1.5H0z"/></svg>');
$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="%23000"/></svg>');
$nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="%231F9967" d="M11.569 6.871v2.965l-2.064 1.192-1.443-.894v7.74l.04.002 7.78-4.47V4.48h-.145z"/><path fill="%2325BA81" d="M7.997 0L.24 4.481l5.233 3.074 1.06-.645 2.57 1.435v-2.98l2.465-1.481v2.987l4.314-2.391v-.011z"/><path fill="%2325BA81" d="M7.02 9.54v2.976l-2.347 1.488V8.05l.89-.548L.287 4.48.24 4.48v8.926l7.821 4.467v-7.74z"/></g></svg>');
$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" fill="%23000"/></svg>');
$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" fill="%23000"/></svg>');
$queue-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 9H2v2h17V9zm0-5H2v2h17V4zM2 16h13v-2H2v2zm20 4v-6l-5 3 5 3z" fill="%23000"/></svg>');
$refresh-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="%23000"/></svg>');
$run-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="structure-icon-run"><style>.structure-icon-run {animation: structure-icon-run-simple-spin 1s infinite linear;}.structure-icon-run-progress {animation: structure-icon-run-fancy-spin 3s infinite linear;fill: transparent;opacity: 0.66;stroke-dasharray: 16 16;transform-origin: 50% 50%;}@keyframes structure-icon-run-fancy-spin {0% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}50% {stroke-dasharray: 4 32;}50% {stroke-dasharray: 24 8;}100% {stroke-dasharray: 4 32;}}@keyframes structure-icon-run-simple-spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" r="8" stroke="%23000" stroke-width="4"/><circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" class="structure-icon-run-progress"/><circle cx="12" cy="12" r="4" fill="currentColor"/></g></svg>');
$search-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23000"/></svg>');
$settings-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" fill="%23000"/></svg>');
$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="%23000"/></svg>');
$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" fill="%23000"/></svg>');
$star-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="9" viewBox="0 0 10 9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M5 7.196L7.575 8.75l-.683-2.93 2.275-1.97-2.996-.254L5 .833 3.83 3.596.832 3.85l2.275 1.97-.683 2.93z"/></defs><use fill="%23FAC402" xlink:href="%23a" fill-rule="evenodd"/></svg>');
$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 9l1.42 1.42L8.83 14H18V4h2v12H8.83l3.59 3.58L11 21l-6-6z" fill="%23000"/></svg>');
$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9z" fill="%23000"/></svg>');
$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" fill="%23000"/></svg>');
$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z" fill="%23000"/></svg>');
$terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M19 11.75V8l-7-4-7 4v8l7 4 7-4v-4.25zm-1 .571l-2 1.143V9.5L12 7 8 9.5v3.964l-2-1.143V8.5l6-3.25 6 3.25v3.821zM12 2l9 5v10l-9 5-9-5V7l9-5zm0 6.25L15 10v4l-3 1.75L9 14v-4l3-1.75zM12 17l6-3.75v2.25l-6 3.25-6-3.25v-2.25L12 17z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M12 2l9 5v10l-9 5-9-5V7l9-5zm0 2L5 8v8l7 4 7-4V8l-7-4zm.001 1L18 8.5v7L12.001 19 6 15.5v-7L12.001 5z" id="a"/><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="%23FFF" stop-opacity=".25" offset="0%"/><stop stop-color="%23FFF" stop-opacity=".5" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="%23fff"><use xlink:href="%23a"/></mask><use fill="%23000" xlink:href="%23a"/><path fill="url(%23b)" opacity=".5" mask="url(%23c)" d="M12 2l9 5v10l-9 5z"/></g></svg>');
$trash-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7h2v12c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V7h2v12h8V7zm3-1H5V4h3.5l1-1h5l1 1H19v2zm-9 11.188V7h1v10.188h-1zm3 0V7h1v10.188h-1z" fill="%23000"/></svg>');
$tune-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" fill="%23000"/></svg>');
$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z" fill="%23000"/></svg>');
$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z" fill="%23000"/></svg>');
$upload-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5zm-2 2h2v-4H3v4zm16 0h2v-4h-2v4z" fill="%23000"/></svg>');
$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z" fill="%23000"/></svg>');
$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="%23000"/></svg>');
$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 5c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" fill="%23000"/></svg>');
$user-team-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7a2.5 2.5 0 0 0 0 5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z" fill="%23000"/></svg>');
$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" fill="%23000"/></svg>');
$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="%23000"/></svg>');

15
ui-v2/app/styles/base/icons/index.scss
View File

@ -1,14 +1 @@
$star-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="9" viewBox="0 0 10 9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M5 7.196L7.575 8.75l-.683-2.93 2.275-1.97-2.996-.254L5 .833 3.83 3.596.832 3.85l2.275 1.97-.683 2.93z"/></defs><use fill="%23FAC402" xlink:href="%23a" fill-rule="evenodd"/></svg>');
$eye-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="8" viewBox="0 0 16 8" xmlns="http://www.w3.org/2000/svg"><path d="M10.229 1.301A3.493 3.493 0 0 1 11.5 4a3.493 3.493 0 0 1-1.271 2.699c1.547-.431 3.008-1.326 4.393-2.699-1.385-1.373-2.846-2.268-4.393-2.699zM5.771 6.7A3.493 3.493 0 0 1 4.5 4c0-1.086.495-2.057 1.271-2.699C4.224 1.732 2.763 2.627 1.378 4c1.385 1.373 2.846 2.268 4.393 2.699zM8 8C5.054 8 2.388 6.667 0 4c2.388-2.667 5.054-4 8-4 2.946 0 5.612 1.333 8 4-2.388 2.667-5.054 4-8 4zm.965-4.25a1 1 0 1 0 .07-2 1 1 0 0 0-.07 2z" fill="%237C8896" fill-rule="nonzero"/></svg>');
$chevron-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg"><path d="M5.001 3.515L8.293.287a1.014 1.014 0 0 1 1.414 0 .967.967 0 0 1 0 1.386L5.71 5.595a1.014 1.014 0 0 1-1.414 0L.293 1.674a.967.967 0 0 1 0-1.387 1.014 1.014 0 0 1 1.414 0l3.294 3.228z" fill="%23000" fill-rule="nonzero"/></svg>');
$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="24" height="24" viewport="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23373a42"/></svg>');
$loading-svg: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" class="structure-icon-loading"><style>.structure-icon-loading-base{opacity:.1}.structure-icon-loading-progress{animation:structure-icon-loading-fancy-spin 3s infinite linear;opacity:.25;stroke-dasharray:0 44;stroke-dashoffset:0;stroke-linecap:round;transform-origin:50% 50%}@keyframes structure-icon-loading-fancy-spin{0%{stroke-dasharray:0 44;stroke-dashoffset:0}25%{stroke-dasharray:33 11;stroke-dashoffset:-40}50%{stroke-dasharray:0 44;stroke-dashoffset:-110}75%{stroke-dasharray:33 11;stroke-dashoffset:-150}to{stroke-dasharray:0 44;stroke-dashoffset:-220}}@keyframes structure-icon-loading-simple-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><defs><path stroke="%23fff" stroke-width="3" fill="none" id="structure-icon-loading" d="M12 5l6 3v8l-6 3-6-3V8z"/></defs><use xlink:href="%23structure-icon-loading" class="structure-icon-loading-base"/><use xlink:href="%23structure-icon-loading" class="structure-icon-loading-progress"/></svg>');
$hashicorp-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
$consul-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
$nomad-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="%231F9967" d="M11.569 6.871v2.965l-2.064 1.192-1.443-.894v7.74l.04.002 7.78-4.47V4.48h-.145z"/><path fill="%2325BA81" d="M7.997 0L.24 4.481l5.233 3.074 1.06-.645 2.57 1.435v-2.98l2.465-1.481v2.987l4.314-2.391v-.011z"/><path fill="%2325BA81" d="M7.02 9.54v2.976l-2.347 1.488V8.05l.89-.548L.287 4.48.24 4.48v8.926l7.821 4.467v-7.74z"/></g></svg>');
$terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
@import './base-variables';

8
ui-v2/app/styles/base/reset/system.scss
View File

@ -8,16 +8,16 @@ strong {
color: inherit;
}
body {
color: $ui-gray-900;
color: $gray-900;
}
a {
color: $ui-color-action;
color: $color-action;
}
html {
background-color: $ui-white;
background-color: $white;
}
hr {
background-color: $ui-gray-500;
background-color: $gray-500;
}
html {
font-size: $typo-size-000;

10
ui-v2/app/styles/components/action-group/skin.scss
View File

@ -2,7 +2,8 @@
@extend %toggle-button;
}
%action-group input[type='radio']:checked + label:first-of-type {
background-color: $ui-gray-050;
/* frame-gray */
background-color: $gray-050;
}
%action-group label {
cursor: pointer;
@ -23,13 +24,12 @@
}
%action-group ul,
%action-group ul::before {
border-color: $ui-color-action;
border-color: $color-action;
}
%action-group li a:hover {
background-color: $ui-color-action;
color: $ui-white;
@extend %frame-blue-800;
}
%action-group ul,
%action-group ul::before {
background-color: $ui-white;
background-color: $white;
}

4
ui-v2/app/styles/components/anchors.scss
View File

@ -1,12 +1,12 @@
@import './anchors/index';
%main-content a {
color: $ui-gray-900;
color: $gray-900;
}
%main-content a[rel*='help'] {
@extend %with-info;
}
%main-content label a[rel*='help'] {
color: $ui-gray-400;
color: $gray-400;
}
[role='tabpanel'] > p:only-child [rel*='help']::after {

2
ui-v2/app/styles/components/anchors/index.scss
View File

@ -6,5 +6,5 @@
%anchor:hover,
%anchor:focus,
%anchor:active {
color: $ui-color-action;
color: $color-action;
}

10
ui-v2/app/styles/components/app-view/skin.scss
View File

@ -7,15 +7,11 @@
border-color: $keyline-light;
}
%app-content div > dl > dd {
color: $ui-gray-400;
color: $gray-400;
}
[role='tabpanel'] > p:only-child,
.template-error > div {
background-color: $ui-gray-050;
color: $ui-gray-400;
}
.template-error > div,
%app-content > p:only-child,
%app-view > div.disabled > div {
background-color: $ui-gray-050;
color: $ui-gray-400;
@extend %frame-gray-500;
}

2
ui-v2/app/styles/components/breadcrumbs/skin.scss
View File

@ -5,5 +5,5 @@
list-style-type: none;
}
%breadcrumbs a {
color: $ui-color-action;
color: $color-action;
}

37
ui-v2/app/styles/components/buttons/skin.scss
View File

@ -21,22 +21,23 @@
@extend %button;
border-width: 1px;
border-radius: $radius-small;
box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12);
box-shadow: 0 3px 1px 0 rgba($black, 0.12);
}
/* color */
%copy-button {
color: $ui-color-action;
background-color: $ui-color-transparent;
color: $color-action;
background-color: $color-transparent;
}
%copy-button:hover:not(:disabled):not(:active),
%copy-button:focus {
color: $ui-color-action;
background-color: $ui-gray-050;
/*frame-grey frame-blue*/
color: $color-action;
background-color: $gray-050;
}
%copy-button:disabled {
}
%copy-button:active {
background-color: $ui-gray-200;
background-color: $gray-200;
}
%primary-button {
@extend %frame-blue-800;
@ -52,28 +53,22 @@
@extend %frame-blue-900;
}
/**/
%secondary-button {
/* %frame-gray-something */
color: $ui-gray-800;
background-color: $ui-gray-050;
border-color: $ui-gray-300;
border-style: solid;
}
%secondary-button:hover:not(:disabled):not(:active),
%secondary-button:focus {
/* %frame-gray-something */
background-color: $ui-white;
color: $ui-gray-800;
border-color: $ui-gray-700;
@extend %frame-gray-300;
}
%secondary-button {
@extend %frame-gray-400;
}
%secondary-button:disabled {
color: $ui-gray-600;
color: $gray-600;
}
%secondary-button:active {
/* %frame-gray-something */
background-color: $ui-gray-200;
color: $ui-gray-800;
border-color: $ui-gray-700;
@extend %frame-gray-700;
background-color: $gray-200;
color: $gray-800;
border-color: $gray-700;
}
/**/
%dangerous-button {

6
ui-v2/app/styles/components/code-editor/layout.scss
View File

@ -15,8 +15,8 @@
%code-editor-syntax-select {
margin-top: 1px;
border: 0;
background-color: $ui-black;
color: $ui-white;
background-color: $black;
color: $white;
border-left: 1px solid;
border-radius: 0;
}
@ -25,7 +25,7 @@
bottom: 0px;
width: 100%;
height: 25px;
background-color: black;
background-color: $black;
content: '';
display: block;
}

12
ui-v2/app/styles/components/code-editor/skin.scss
View File

@ -12,13 +12,13 @@ $syntax-serf: #dd4e58;
$syntax-packer: #1ddba3;
// Our colors
$syntax-gray: lighten($ui-black, 89%);
$syntax-gray: lighten($black, 89%);
$syntax-red: #ff3d3d;
$syntax-green: #39b54a;
$syntax-dark-gray: #535f73;
$syntax-gutter-grey: #2a2f36;
$syntax-yellow: $ui-yellow-500;
$syntax-yellow: $yellow-500;
.CodeMirror {
max-width: 1150px;
min-height: 300px;
@ -33,7 +33,7 @@ $syntax-yellow: $ui-yellow-500;
background-color: #f9f9fa;
border: 1px solid $syntax-light-gray;
border-radius: 0;
color: lighten($ui-black, 13%);
color: lighten($black, 13%);
font-family: $typo-family-mono;
font-size: 13px;
padding: 7px 8px 9px;
@ -42,7 +42,7 @@ $syntax-yellow: $ui-yellow-500;
.cm-s-hashi {
&.CodeMirror {
width: 100%;
background-color: $ui-black !important;
background-color: $black !important;
color: #cfd2d1 !important;
border: none;
font-family: $typo-family-mono;
@ -150,7 +150,7 @@ $syntax-yellow: $ui-yellow-500;
.CodeMirror-matchingbracket {
text-decoration: underline;
color: $ui-white !important;
color: $white !important;
}
}
@ -174,7 +174,7 @@ $syntax-yellow: $ui-yellow-500;
}
span.cm-property {
color: $ui-white;
color: $white;
}
span.cm-variable-2 {

4
ui-v2/app/styles/components/confirmation-dialog/skin.scss
View File

@ -1,6 +1,6 @@
table div.with-confirmation.confirming {
background-color: $ui-white;
background-color: $white;
}
%confirmation-dialog-inline p {
color: $ui-gray-400;
color: $gray-400;
}

4
ui-v2/app/styles/components/expanded-single-select/skin.scss
View File

@ -4,10 +4,10 @@
%expanded-single-select input[type='radio']:checked + *,
%expanded-single-select input[type='radio']:hover + *,
%expanded-single-select input[type='radio']:focus + * {
box-shadow: 0 4px 8px 0 rgba($ui-black, 0.05);
box-shadow: 0 4px 8px 0 rgba($black, 0.05);
}
%expanded-single-select input[type='radio']:checked + *,
%expanded-single-select input[type='radio']:hover + *,
%expanded-single-select input[type='radio']:focus + * {
background-color: $ui-white;
background-color: $white;
}

2
ui-v2/app/styles/components/feedback-dialog.scss
View File

@ -14,7 +14,7 @@ main .with-feedback {
.actions .with-feedback p::after {
bottom: auto;
top: -13px !important;
border-bottom: 18px solid $ui-gray-800;
border-bottom: 18px solid $gray-800;
border-top: 0;
}
}

11
ui-v2/app/styles/components/filter-bar/skin.scss
View File

@ -20,19 +20,20 @@
}
%filter-bar,
%filter-bar > * {
background-color: $ui-gray-050;
/* frame-gray */
background-color: $gray-050;
}
%filter-bar > *,
%filter-bar label:not(:last-child) {
border-color: $ui-gray-300 !important;
border-color: $gray-300 !important;
}
%filter-bar [role='radiogroup'] label {
color: $ui-gray-400;
color: $gray-400;
}
%filter-bar .value-warning span::after {
border-color: $ui-gray-050;
border-color: $gray-050;
}
%filter-bar .value-warning input:checked + span::after {
border-color: $ui-white;
border-color: $white;
}

20
ui-v2/app/styles/components/form-elements/skin.scss
View File

@ -23,39 +23,39 @@
border-radius: $decor-radius-100;
}
%form-element-error > input {
border-color: $ui-color-failure !important;
border-color: $color-failure !important;
}
%form-element > strong {
color: $ui-color-failure;
color: $color-failure;
}
%form-element > em {
color: $ui-gray-400;
color: $gray-400;
}
%form-element > em > code {
background-color: $ui-gray-200;
color: $brand-magenta-600;
background-color: $gray-200;
color: $magenta-600;
border-radius: $decor-radius-100;
}
%form-element > span {
color: $ui-black;
color: $black;
}
%form-element [type='text'],
%form-element [type='password'],
%form-element textarea {
color: $ui-gray-500;
color: $gray-500;
}
%form-element [type='text'],
%form-element [type='password'],
%form-element textarea {
border-color: $ui-gray-300;
border-color: $gray-300;
}
%form-element [type='text']:hover,
%form-element [type='password']:hover,
%form-element textarea:hover {
border-color: $ui-gray-500;
border-color: $gray-500;
}
%form-element [type='text']:focus,
%form-element [type='password']:focus,
%form-element textarea:focus {
border-color: $ui-blue-500;
border-color: $blue-500;
}

8
ui-v2/app/styles/components/freetext-filter/skin.scss
View File

@ -7,15 +7,15 @@
border-right: $decor-border-100;
}
%freetext-filter {
background-color: $ui-white;
background-color: $white;
}
%freetext-filter span {
color: $ui-gray-300;
color: $gray-300;
}
%freetext-filter input {
border-color: $ui-gray-300;
border-color: $gray-300;
}
%freetext-filter input,
%freetext-filter input::placeholder {
color: $ui-gray-400;
color: $gray-400;
}

20
ui-v2/app/styles/components/healthcheck-status/skin.scss
View File

@ -6,30 +6,30 @@
border-radius: $decor-radius-100;
}
%healthcheck-status dd:first-of-type {
color: $ui-gray-400;
color: $gray-400;
}
%healthcheck-status pre {
background-color: $ui-black;
color: $ui-white;
background-color: $black;
color: $white;
}
%healthcheck-status.passing {
/* TODO: this should be a gray frame */
/* TODO: this should be a frame-gray */
// @extend %frame-green-500;
color: $ui-gray-900;
border-color: $ui-gray-200;
color: $gray-900;
border-color: $gray-200;
border-style: solid;
}
%healthcheck-status.warning {
@extend %frame-yellow-500;
color: $ui-gray-900;
color: $gray-900;
}
%healthcheck-status.critical {
@extend %frame-red-500;
color: $ui-gray-900;
color: $gray-900;
}
%healthcheck-status.passing::before {
background-color: $ui-color-success !important;
background-color: $color-success !important;
}
%healthcheck-status.critical::before {
background-color: $ui-color-danger !important;
background-color: $color-danger !important;
}

14
ui-v2/app/styles/components/healthchecked-resource/skin.scss
View File

@ -1,26 +1,26 @@
%healthchecked-resource {
border: $decor-border-100;
box-shadow: 0 4px 8px 0 rgba($ui-black, 0.05);
box-shadow: 0 4px 8px 0 rgba($black, 0.05);
}
%healthchecked-resource li {
border-top: $decor-border-100;
}
%healthchecked-resource,
%healthchecked-resource li {
border-color: $ui-gray-200;
border-color: $gray-200;
}
%healthchecked-resource li.passing {
color: $ui-color-success;
color: $color-success;
}
%healthchecked-resource li.warning {
color: $ui-color-alert;
color: $color-alert;
}
%healthchecked-resource li.critical {
color: $ui-color-failure;
color: $color-failure;
}
%healthchecked-resource:hover,
%healthchecked-resource:focus {
box-shadow: 0 8px 10px 0 rgba($ui-black, 0.1);
box-shadow: 0 8px 10px 0 rgba($black, 0.1);
}
%healthchecked-resource {
border-radius: $radius-small;
@ -29,5 +29,5 @@
@extend %with-no-healthchecks;
}
%healthchecked-resource ul:empty::before {
color: $ui-gray-400;
color: $gray-400;
}

24
ui-v2/app/styles/components/icons/index.scss
View File

@ -66,18 +66,18 @@
display: inline-block;
}
%with-hashicorp {
background-color: $ui-white;
background-color: $white;
}
%with-hashicorp::before {
@extend %pseudo-icon;
opacity: 0.45;
background-image: $hashicorp-svg;
background-image: $hashicorp-logo-svg;
background-size: cover;
width: 20px;
height: 20px;
left: -25px;
margin-top: -10px;
background-color: $ui-color-transparent;
background-color: $color-transparent;
}
%with-clipboard {
padding-left: 38px !important;
@ -89,7 +89,7 @@
height: 17px;
left: 12px;
margin-top: -8px;
background-color: $ui-color-transparent;
background-color: $color-transparent;
}
%with-chevron::before {
@extend %pseudo-icon;
@ -98,7 +98,7 @@
height: 9px;
left: 0;
margin-top: -4px;
background-color: $ui-color-transparent;
background-color: $color-transparent;
}
%with-folder::before {
@extend %pseudo-icon;
@ -108,7 +108,7 @@
margin-top: -6px;
left: 2px;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="14" height="13" xmlns="http://www.w3.org/2000/svg"><path d="M4.779 1H1.8c-.439 0-.8.37-.8.833v9.334c0 .463.361.833.8.833h10.4c.439 0 .8-.37.8-.833V3.833C13 3.37 12.639 3 12.2 3H6.35a.5.5 0 0 1-.42-.228L4.78 1z" stroke="%23BBC4D2" fill="none"/></svg>');
background-color: $ui-color-transparent;
background-color: $color-transparent;
}
%with-magnifier {
position: relative;
@ -126,7 +126,7 @@
border: 0.05em solid;
border-radius: 0.35em;
border-color: currentColor;
background-color: $ui-color-transparent;
background-color: $color-transparent;
}
%with-magnifier::after {
@extend %pseudo-icon;
@ -148,7 +148,7 @@
@extend %pseudo-icon;
right: 0;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle stroke="%23BBC4D1" fill="%23FFF" cx="7" cy="7" r="7"/><path fill="%236A7786" d="M6.15 4.677V3.233h1.56v1.444zM6.15 11.374V6.35h1.56v5.023z"/></svg>');
background-color: $ui-color-transparent;
background-color: $color-transparent;
width: 16px;
height: 16px;
}
@ -188,7 +188,7 @@
}
%with-inverted-tick {
@extend %pseudo-icon;
background-color: $ui-color-transparent;
background-color: $color-transparent;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="10" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M8.95 0L10 .985 3.734 8 0 4.737l.924-1.11 2.688 2.349z" fill="%23#{$magenta-800-no-hash}"/></svg>');
height: 20px !important;
width: 16px !important;
@ -214,7 +214,7 @@
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M9.263.5L8.084 1.637l4.716 4.55H0v1.625h12.8l-4.716 4.55 1.18 1.138L16 7z" fill="%232EB039"/></svg>');
width: 16px;
height: 14px;
background-color: $ui-color-transparent;
background-color: $color-transparent;
}
%with-right-arrow-grey {
@extend %pseudo-icon;
@ -225,7 +225,7 @@
background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%23282C2E" d="M8.79 4l-.737.71L11 7.556H3V8.57h8l-2.947 2.844.736.711L13 8.062z"/><rect stroke="%23C73445" stroke-width="1.5" x=".75" y=".75" width="14.5" height="14.5" rx="7.25"/><path d="M3.5 3.5l9 9" stroke="%23C73445" stroke-width="1.5" stroke-linecap="square"/></g></svg>');
width: 16px;
height: 16px;
background-color: $ui-color-transparent;
background-color: $color-transparent;
}
%with-deny-icon-grey {
@extend %pseudo-icon;
@ -243,7 +243,7 @@
}
%with-warning::before {
@extend %with-warning-icon-orange;
background-color: $ui-color-transparent;
background-color: $color-transparent;
}
%with-critical::before {
@extend %with-cross;

19
ui-v2/app/styles/components/modal-dialog/skin.scss
View File

@ -1,21 +1,18 @@
%modal-dialog > label {
background-color: rgba($ui-white, 0.9);
background-color: rgba($white, 0.9);
}
%modal-window {
box-shadow: 2px 8px 8px 0 rgba($ui-black, 0.1);
box-shadow: 2px 8px 8px 0 rgba($black, 0.1);
}
%modal-window {
/*%frame-gray-000*/
background-color: $ui-white;
background-color: $white;
border: $decor-border-100;
border-color: $ui-gray-300;
border-color: $gray-300;
}
%modal-window > footer,
%modal-window > header {
/*%frame-gray-000*/
border: 0 solid;
background-color: $ui-gray-050;
border-color: $ui-gray-300;
@extend %frame-gray-800;
}
%modal-window > footer {
border-top-width: 1px;
@ -34,9 +31,9 @@
background-size: 80%;
cursor: pointer;
/*%frame-gray-000*/
background-color: $ui-gray-050;
/*%frame-gray-050??*/
background-color: $gray-050;
border: $decor-border-100;
border-color: $ui-gray-300;
border-color: $gray-300;
border-radius: $decor-radius-100;
}

41
ui-v2/app/styles/components/notice/skin.scss
View File

@ -10,46 +10,31 @@
@extend %notice;
}
%notice-success {
@extend %with-passing;
background-color: $ui-green-050;
border-color: $ui-color-success;
color: $ui-green-700;
}
%notice-success::before {
color: $ui-color-success;
@extend %frame-green-500, %with-passing;
}
%notice-info {
/* %frame-blue-000*/
border-style: solid; /*TODO: this can go once we are using a frame*/
@extend %with-passing; /* needs a better info button*/
background-color: $ui-blue-050;
border-color: $ui-color-action; /* TODO: change to info */
color: $ui-blue-700;
@extend %frame-blue-500, %with-passing; /* needs a better info button*/
}
%notice-highlight {
/* %frame-blue-000*/
border-style: solid; /*TODO: this can go once we are using a frame*/
@extend %with-star;
border-color: $ui-gray-300;
background-color: $ui-gray-050;
@extend %frame-gray-800, %with-star;
}
%notice-info::before {
color: $ui-color-action; /* change to info */
%notice-warning {
@extend %frame-yellow-500, %with-warning;
}
%notice-error {
@extend %frame-red-500, %with-critical;
}
%notice-highlight::before {
/* %with-star, bigger */
width: 16px;
height: 16px;
}
%notice-warning {
@extend %frame-yellow-500, %with-warning;
%notice-success::before {
color: $color-success;
}
%notice-error {
@extend %with-critical;
background-color: $ui-red-050;
border-color: $ui-color-failure;
color: $ui-red-600;
%notice-info::before {
color: $color-action; /* change to info */
}
%notice-error::before {
color: $ui-color-failure;
color: $color-failure;
}

2
ui-v2/app/styles/components/pill/skin.scss
View File

@ -1,4 +1,4 @@
%pill {
background-color: $ui-gray-100;
@extend %frame-gray-900;
border-radius: $radius-small;
}

12
ui-v2/app/styles/components/product.scss
View File

@ -10,23 +10,23 @@ html.template-loading main > div {
@extend %loader;
}
%loader circle {
fill: $brand-magenta-100;
fill: $magenta-100;
}
%main-header::before {
background-color: $brand-magenta-600;
background-color: $magenta-600;
}
%header-nav a,
%header-nav-toggle-button {
color: $brand-magenta-050;
color: $magenta-050;
}
@media #{$--lt-horizontal-nav} {
%header-nav-panel {
background-color: $brand-magenta-600;
background-color: $magenta-600;
}
}
@media #{$--horizontal-nav} {
%header-nav > ul > li:not(:first-child).is-active > a {
background-color: $brand-magenta-800;
background-color: $magenta-800;
}
}
#wrapper > footer {
@ -41,7 +41,7 @@ html.template-loading main > div {
/* toggleable toolbar for short screens */
[for='toolbar-toggle'] {
@extend %with-magnifier;
color: $ui-blue-500;
color: $blue-500;
width: 20px;
height: 20px;
margin-left: 15px;

6
ui-v2/app/styles/components/product/footer.scss
View File

@ -5,11 +5,11 @@
border-top: $decor-border-100;
}
%footer {
border-color: $ui-gray-200;
background-color: $ui-white;
border-color: $gray-200;
background-color: $white;
}
%footer > * {
color: $ui-gray-400;
color: $gray-400;
}
%footer {
display: flex;

14
ui-v2/app/styles/components/product/header-nav.scss
View File

@ -21,20 +21,20 @@
border-bottom: $decor-border-100;
}
%header-drop-nav li {
border-color: $ui-gray-300;
border-color: $gray-300;
}
%header-drop-nav {
border-color: $ui-gray-300;
background-color: $ui-white;
border-color: $gray-300;
background-color: $white;
}
%header-drop-nav a {
color: $ui-gray-900 !important;
color: $gray-900 !important;
}
%header-nav > ul > li > a:hover,
%header-nav > ul > li > a:focus,
%header-nav > ul > li > a:active,
%header-nav > ul > li.is-active > a {
color: $ui-white;
color: $white;
}
%header-nav-toggle-button::before,
%header-nav-toggle-button::after,
@ -99,7 +99,7 @@
padding: 15px 35px;
}
%header-nav-toggle:checked + label {
background-color: rgba($ui-black, 0.4);
background-color: rgba($black, 0.4);
width: 100vw;
height: 100%;
left: 0;
@ -125,7 +125,7 @@
%header-drop-nav a:focus,
%header-drop-nav a:active,
%header-drop-nav a.selected {
background-color: $ui-gray-050;
background-color: $gray-050;
}
%header-nav a {
display: block;

8
ui-v2/app/styles/components/table.scss
View File

@ -16,7 +16,7 @@ td span.zero {
@extend %with-no-healthchecks;
display: block;
text-indent: 20px;
color: $ui-gray-400;
color: $gray-400;
}
table:not(.sessions) tr {
cursor: pointer;
@ -26,15 +26,15 @@ table:not(.sessions) td:first-child {
}
td dt.passing,
td dt.passing + dd {
color: $ui-color-success;
color: $color-success;
}
td dt.warning,
td dt.warning + dd {
color: $ui-color-alert;
color: $color-alert;
}
td dt.critical,
td dt.critical + dd {
color: $ui-color-failure;
color: $color-failure;
}
/* Header Tooltips/Icon*/
th {

2
ui-v2/app/styles/components/table/skin.scss
View File

@ -3,7 +3,7 @@ td {
border-bottom: $decor-border-100;
}
th {
color: $ui-gray-400 !important;
color: $gray-400 !important;
}
th {
border-color: $keyline-dark;

9
ui-v2/app/styles/components/tabs/skin.scss
View File

@ -8,17 +8,16 @@
border-bottom: $decor-border-200;
}
%tab-nav a {
border-color: $ui-color-transparent;
color: $ui-gray-500;
border-color: $color-transparent;
color: $gray-500;
}
%tab-nav li:not(.selected) a:hover,
%tab-nav li:not(.selected) a:focus,
%tab-nav li:not(.selected) a:active {
/* %frame-gray-something */
border-color: $ui-color-transparent;
background-color: $ui-gray-100;
border-color: $color-transparent;
background-color: $gray-100;
}
%tab-nav .selected a {
@extend %frame-magenta-300;
}

6
ui-v2/app/styles/components/tabular-details/skin.scss
View File

@ -5,15 +5,15 @@
cursor: default;
}
%tabular-detail {
border: 1px solid $ui-gray-300;
border: 1px solid $gray-300;
border-radius: $decor-radius-100;
box-shadow: 0 8px 10px 0 rgba($ui-black, 0.1);
box-shadow: 0 8px 10px 0 rgba($black, 0.1);
margin-bottom: 20px;
}
%tabular-detail::before,
%tabular-detail > div,
%tabular-detail > label {
background-color: $ui-white;
background-color: $white;
}
%tabular-detail > label::before {
transform: rotate(180deg);

4
ui-v2/app/styles/components/toggle-button/skin.scss
View File

@ -4,8 +4,8 @@
}
%toggle-button:hover,
%toggle-button:focus {
background-color: $ui-gray-050;
background-color: $gray-050;
}
%toggle-button:active {
background-color: $ui-gray-100;
background-color: $gray-100;
}

8
ui-v2/app/styles/components/toggle/skin.scss
View File

@ -15,16 +15,16 @@
@extend %toggle-negative;
}
%toggle label span {
color: $ui-gray-900;
color: $gray-900;
}
%toggle label span::after {
background-color: $ui-white;
background-color: $white;
}
%toggle label input:checked + span::before,
%toggle-negative label input + span::before {
background-color: $ui-blue-500;
background-color: $blue-500;
}
%toggle label span::before,
%toggle-negative label input:checked + span::before {
background-color: $ui-gray-300;
background-color: $gray-300;
}

18
ui-v2/app/styles/components/tomography-graph.scss
View File

@ -1,31 +1,31 @@
.tomography .background {
fill: $ui-gray-050;
fill: $gray-050;
}
.tomography .axis {
fill: none;
stroke: $ui-gray-300;
stroke: $gray-300;
stroke-dasharray: 4 4;
}
.tomography .border {
fill: none;
stroke: $ui-gray-300;
stroke: $gray-300;
}
.tomography .point {
stroke: $ui-gray-400;
fill: $brand-magenta-600;
stroke: $gray-400;
fill: $magenta-600;
}
.tomography .lines line {
stroke: $brand-magenta-600;
stroke: $magenta-600;
}
.tomography .lines line:hover {
stroke: $ui-gray-300;
stroke: $gray-300;
stroke-width: 2px;
}
.tomography .tick line {
stroke: $ui-gray-300;
stroke: $gray-300;
}
.tomography .tick text {
font-size: $typo-size-600;
text-anchor: start;
color: $ui-gray-900;
color: $gray-900;
}

2
ui-v2/app/styles/components/with-tooltip/layout.scss
View File

@ -30,5 +30,5 @@
background-color: transparent !important;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 18px solid $ui-gray-800;
border-top: 18px solid $gray-800;
}

6
ui-v2/app/styles/components/with-tooltip/skin.scss
View File

@ -1,9 +1,9 @@
%tooltip-bubble,
%tooltip-tail {
color: $ui-white;
background-color: $ui-gray-800;
color: $white;
background-color: $gray-800;
}
%tooltip-bubble {
border-radius: $decor-radius-200;
box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12);
box-shadow: 0 3px 1px 0 rgba($black, 0.12);
}

4
ui-v2/app/styles/routes/dc/acls/tokens/index.scss
View File

@ -8,13 +8,13 @@
}
%token-yours {
text-indent: 20px;
color: $ui-blue-500;
color: $blue-500;
padding-left: 15px;
}
%token-yours::after {
@extend %with-tick;
border-radius: 100%;
background-color: $ui-blue-500;
background-color: $blue-500;
}
.me ~ :nth-last-child(2) {
@extend %token-yours;

12
ui-v2/app/styles/variables/index.scss
View File

@ -1,13 +1,13 @@
@import './custom-query';
$gray: $ui-gray-200;
$ui-gray-025: #fafbfc;
$gray: $gray-200;
$gray-025: #fafbfc;
$magenta-800-no-hash: 5a1434;
$keyline-light: $ui-gray-100; // h1
$keyline-mid: $ui-gray-200; // td, footer
$keyline-dark: $ui-gray-300; // th
$keyline-darker: $ui-gray-400;
$keyline-light: $gray-100; // h1
$keyline-mid: $gray-200; // td, footer
$keyline-dark: $gray-300; // th
$keyline-darker: $gray-400;
// decoration
// undecided