diff --git a/.changelog/11578.txt b/.changelog/11578.txt
new file mode 100644
index 0000000000..76f66adb98
--- /dev/null
+++ b/.changelog/11578.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix inline-code brand styling
+```
diff --git a/ui/packages/consul-ui/.docfy-config.js b/ui/packages/consul-ui/.docfy-config.js
index a3970301ca..445c28addd 100644
--- a/ui/packages/consul-ui/.docfy-config.js
+++ b/ui/packages/consul-ui/.docfy-config.js
@@ -50,6 +50,12 @@ module.exports = {
urlSchema: 'auto',
urlPrefix: 'docs',
},
+ {
+ root: path.resolve(__dirname, 'app/styles'),
+ pattern: '**/*.mdx',
+ urlSchema: 'auto',
+ urlPrefix: 'docs/styles',
+ },
{
root: path.resolve(__dirname, 'app/modifiers'),
pattern: '**/*.mdx',
diff --git a/ui/packages/consul-ui/app/components/auth-form/skin.scss b/ui/packages/consul-ui/app/components/auth-form/skin.scss
index 58053db1bc..939e323cad 100644
--- a/ui/packages/consul-ui/app/components/auth-form/skin.scss
+++ b/ui/packages/consul-ui/app/components/auth-form/skin.scss
@@ -8,5 +8,5 @@
/* in the center so if the background color of what the */
/* line is on is different, then this should be different */
%auth-form-hr span {
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
}
diff --git a/ui/packages/consul-ui/app/components/card/skin.scss b/ui/packages/consul-ui/app/components/card/skin.scss
index da07fa3f17..de730cf5bf 100644
--- a/ui/packages/consul-ui/app/components/card/skin.scss
+++ b/ui/packages/consul-ui/app/components/card/skin.scss
@@ -5,7 +5,7 @@
%card {
border: var(--decor-border-100);
border-radius: var(--decor-radius-100);
- background-color: rgb(var(--white) / 90%);
+ background-color: rgb(var(--tone-gray-000) / 90%);
}
%card > section,
%card > ul > li {
diff --git a/ui/packages/consul-ui/app/components/certificate/index.scss b/ui/packages/consul-ui/app/components/certificate/index.scss
index ff343a3a5a..f4a7ab23a9 100644
--- a/ui/packages/consul-ui/app/components/certificate/index.scss
+++ b/ui/packages/consul-ui/app/components/certificate/index.scss
@@ -20,7 +20,7 @@
}
hr {
border: 3px dashed rgb(var(--tone-gray-300));
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
width: 150px;
margin: auto;
margin-top: 9px;
diff --git a/ui/packages/consul-ui/app/components/code-editor/layout.scss b/ui/packages/consul-ui/app/components/code-editor/layout.scss
index 8eca313da1..2200042322 100644
--- a/ui/packages/consul-ui/app/components/code-editor/layout.scss
+++ b/ui/packages/consul-ui/app/components/code-editor/layout.scss
@@ -11,7 +11,7 @@
bottom: 0px;
width: 100%;
height: 25px;
- background-color: var(--black);
+ background-color: rgb(var(--tone-gray-999));
content: '';
display: block;
}
diff --git a/ui/packages/consul-ui/app/components/code-editor/skin.scss b/ui/packages/consul-ui/app/components/code-editor/skin.scss
index fc65b498b8..f4b35e6bd3 100644
--- a/ui/packages/consul-ui/app/components/code-editor/skin.scss
+++ b/ui/packages/consul-ui/app/components/code-editor/skin.scss
@@ -46,7 +46,7 @@ $syntax-dark-gray: #535f73;
.cm-s-hashi {
&.CodeMirror {
width: 100%;
- background-color: rgb(var(--black)) !important;
+ background-color: rgb(var(--tone-gray-999)) !important;
color: #cfd2d1 !important;
border: none;
font-family: var(--typo-family-mono);
@@ -81,7 +81,7 @@ $syntax-dark-gray: #535f73;
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
- background: rgb(var(--white) / 10%);
+ background: rgb(var(--tone-gray-000) / 10%);
}
span.cm-comment {
@@ -154,7 +154,7 @@ $syntax-dark-gray: #535f73;
.CodeMirror-matchingbracket {
text-decoration: underline;
- color: rgb(var(--white)) !important;
+ color: rgb(var(--tone-gray-000)) !important;
}
}
@@ -178,7 +178,7 @@ $syntax-dark-gray: #535f73;
}
span.cm-property {
- color: rgb(var(--white));
+ color: rgb(var(--tone-gray-000));
}
span.cm-variable-2 {
diff --git a/ui/packages/consul-ui/app/components/composite-row/index.scss b/ui/packages/consul-ui/app/components/composite-row/index.scss
index 7b42462c67..2f56cbe05c 100644
--- a/ui/packages/consul-ui/app/components/composite-row/index.scss
+++ b/ui/packages/consul-ui/app/components/composite-row/index.scss
@@ -113,5 +113,5 @@
%composite-row-header .policy-management dd::before,
%composite-row-detail .policy-management::before {
@extend %with-star-fill-mask, %as-pseudo;
- background-color: rgb(var(--brand-600));
+ background-color: rgb(var(--tone-brand-600));
}
diff --git a/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss b/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss
index 3c40475820..ded503dcfa 100644
--- a/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss
+++ b/ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss
@@ -1,5 +1,5 @@
table div.with-confirmation.confirming {
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
}
%confirmation-dialog-inline p {
color: rgb(var(--tone-gray-400));
diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
index 1b171b1ca7..c1b8623813 100644
--- a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss
@@ -27,7 +27,7 @@
tbody {
td {
font-size: var(--typo-size-600);
- color: var(--black);
+ color: rgb(var(--tone-gray-999));
}
tr {
cursor: default;
@@ -74,7 +74,7 @@
tbody {
td {
font-size: var(--typo-size-600);
- color: var(--black);
+ color: rgb(var(--tone-gray-999));
}
tr {
cursor: default;
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
index 52e3ab1a08..fca6c4a23e 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
@@ -3,7 +3,7 @@
{{selected.nodes}} {
opacity: 1 !important;
- background-color: var(--white);
+ background-color: var(--tone-gray-000);
border: var(--decor-border-100);
border-radius: var(--decor-radius-200);
border-color: rgb(var(--tone-gray-500));
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
index 6c34f57b96..30055d3aa7 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
@@ -63,7 +63,7 @@
}
%chain-node-active {
opacity: 1;
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
border-color: rgb(var(--tone-gray-500));
}
/* TODO: More text truncation, centralize */
@@ -99,7 +99,7 @@
/**/
%with-chain-outlet::before {
@extend %as-pseudo;
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
border-radius: var(--decor-radius-full);
border: 2px solid rgb(var(--tone-gray-400));
@@ -107,5 +107,5 @@
%discovery-chain circle {
stroke-width: 2;
stroke: rgb(var(--tone-gray-400));
- fill: rgb(var(--white));
+ fill: rgb(var(--tone-gray-000));
}
diff --git a/ui/packages/consul-ui/app/components/consul/loader/skin.scss b/ui/packages/consul-ui/app/components/consul/loader/skin.scss
index a5f3a103f1..a7a7f43220 100644
--- a/ui/packages/consul-ui/app/components/consul/loader/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/loader/skin.scss
@@ -1,5 +1,5 @@
%loader circle {
- fill: rgb(var(--brand-100));
+ fill: rgb(var(--tone-brand-100));
}
%loader circle {
animation: loader-animation 1.5s infinite ease-in-out;
diff --git a/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss b/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss
index 297a60de3b..76c2f47196 100644
--- a/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss
+++ b/ui/packages/consul-ui/app/components/expanded-single-select/skin.scss
@@ -14,5 +14,5 @@
%expanded-single-select input[type='radio']:checked + *,
%expanded-single-select input[type='radio']:hover + *,
%expanded-single-select input[type='radio']:focus + * {
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
}
diff --git a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
index ec23367742..dae3d356a2 100644
--- a/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
+++ b/ui/packages/consul-ui/app/components/freetext-filter/skin.scss
@@ -3,7 +3,7 @@
border: var(--decor-border-100);
border-radius: var(--decor-radius-100);
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
border-color: rgb(var(--tone-gray-200));
color: rgb(var(--tone-gray-400));
}
diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
index 306d8a3814..875e2af852 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
@@ -7,7 +7,7 @@
display: none;
}
[role='banner'] a svg {
- fill: rgb(var(--brand-600));
+ fill: rgb(var(--tone-brand-600));
}
.docs-link a::after {
@extend %with-docs-mask, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/informed-action/skin.scss b/ui/packages/consul-ui/app/components/informed-action/skin.scss
index de092e973b..72b3624449 100644
--- a/ui/packages/consul-ui/app/components/informed-action/skin.scss
+++ b/ui/packages/consul-ui/app/components/informed-action/skin.scss
@@ -3,7 +3,7 @@
border-radius: var(--decor-radius-200);
border: var(--decor-border-100);
border-color: rgb(var(--tone-gray-300));
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
}
> div {
border-top-left-radius: var(--decor-radius-200);
@@ -18,7 +18,7 @@
}
p {
@extend %p2;
- color: var(--black);
+ color: rgb(var(--tone-gray-999));
}
> ul {
list-style: none;
diff --git a/ui/packages/consul-ui/app/components/inline-code/skin.scss b/ui/packages/consul-ui/app/components/inline-code/skin.scss
index 3a013be65b..133d1ede38 100644
--- a/ui/packages/consul-ui/app/components/inline-code/skin.scss
+++ b/ui/packages/consul-ui/app/components/inline-code/skin.scss
@@ -1,6 +1,6 @@
%inline-code {
border: 1px solid;
- color: var(rgb(var(--brand-600)), inherit);
+ color: rgb(var(--tone-brand-600));
background-color: rgb(var(--tone-gray-050));
border-color: rgb(var(--tone-gray-200));
}
diff --git a/ui/packages/consul-ui/app/components/list-row/skin.scss b/ui/packages/consul-ui/app/components/list-row/skin.scss
index 12d6ed6fd7..0aacf59bf1 100644
--- a/ui/packages/consul-ui/app/components/list-row/skin.scss
+++ b/ui/packages/consul-ui/app/components/list-row/skin.scss
@@ -13,7 +13,7 @@
cursor: pointer;
}
%list-row-header {
- color: var(--black);
+ color: rgb(var(--tone-gray-999));
}
%list-row-header * {
color: inherit;
diff --git a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
index 171752150e..1172121c7a 100644
--- a/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
+++ b/ui/packages/consul-ui/app/components/modal-dialog/skin.scss
@@ -15,7 +15,7 @@
margin-right: 3px;
}
%modal-dialog-overlay {
- background-color: rgb(var(--white) / 90%);
+ background-color: rgb(var(--tone-gray-000) / 90%);
}
%modal-window {
box-shadow: var(--decor-elevation-800);
diff --git a/ui/packages/consul-ui/app/components/notice/skin.scss b/ui/packages/consul-ui/app/components/notice/skin.scss
index 5d99272474..3167d385e8 100644
--- a/ui/packages/consul-ui/app/components/notice/skin.scss
+++ b/ui/packages/consul-ui/app/components/notice/skin.scss
@@ -1,7 +1,7 @@
%notice {
border-radius: var(--decor-radius-100);
border: var(--decor-border-100);
- color: var(--black);
+ color: rgb(var(--tone-gray-999));
}
%notice::before {
@extend %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/overlay/none.scss b/ui/packages/consul-ui/app/components/overlay/none.scss
index e4084cc8be..951343b770 100644
--- a/ui/packages/consul-ui/app/components/overlay/none.scss
+++ b/ui/packages/consul-ui/app/components/overlay/none.scss
@@ -26,7 +26,7 @@
transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}
& {
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
border-radius: var(--decor-radius-100);
box-shadow: var(--decor-elevation-400);
}
diff --git a/ui/packages/consul-ui/app/components/overlay/square-tail.scss b/ui/packages/consul-ui/app/components/overlay/square-tail.scss
index 2647345284..286ababa3a 100644
--- a/ui/packages/consul-ui/app/components/overlay/square-tail.scss
+++ b/ui/packages/consul-ui/app/components/overlay/square-tail.scss
@@ -4,7 +4,7 @@
left: calc(0px - (var(--size) / 2)) !important;
}
.tippy-arrow::before {
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
width: calc(1px + var(--size));
height: calc(1px + var(--size));
border: var(--decor-border-100);
diff --git a/ui/packages/consul-ui/app/components/radio-card/skin.scss b/ui/packages/consul-ui/app/components/radio-card/skin.scss
index c52a026050..03320aa5e6 100644
--- a/ui/packages/consul-ui/app/components/radio-card/skin.scss
+++ b/ui/packages/consul-ui/app/components/radio-card/skin.scss
@@ -19,7 +19,7 @@
margin-bottom: 0.5em;
}
%radio-card header {
- color: var(--black);
+ color: rgb(var(--tone-gray-999));
}
%radio-card-with-icon > :last-child {
padding-left: 47px;
diff --git a/ui/packages/consul-ui/app/components/skip-links/skin.scss b/ui/packages/consul-ui/app/components/skip-links/skin.scss
index 17c3dc4009..808731d8d5 100644
--- a/ui/packages/consul-ui/app/components/skip-links/skin.scss
+++ b/ui/packages/consul-ui/app/components/skip-links/skin.scss
@@ -1,6 +1,6 @@
%skip-links {
- outline: 1px solid rgb(var(--white));
- color: rgb(var(--white));
+ outline: 1px solid rgb(var(--tone-gray-000));
+ color: rgb(var(--tone-gray-000));
background-color: rgb(var(--tone-blue-500));
}
%skip-links button,
diff --git a/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss b/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
index 9ab9704cc3..6a3e38cf77 100644
--- a/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
+++ b/ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
@@ -18,7 +18,7 @@
color: rgb(var(--tone-gray-900));
}
%sliding-toggle label span::after {
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
}
%sliding-toggle label input:checked + span::before,
%sliding-toggle-negative label input + span::before {
diff --git a/ui/packages/consul-ui/app/components/tabular-details/skin.scss b/ui/packages/consul-ui/app/components/tabular-details/skin.scss
index 53def1879f..0bd53b99ad 100644
--- a/ui/packages/consul-ui/app/components/tabular-details/skin.scss
+++ b/ui/packages/consul-ui/app/components/tabular-details/skin.scss
@@ -14,7 +14,7 @@
%tabular-detail::before,
%tabular-detail > div,
%tabular-detail > label {
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
}
%tabular-detail > label::before {
transform: rotate(180deg);
diff --git a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss
index 5113a1be35..a48931cb3c 100644
--- a/ui/packages/consul-ui/app/components/tabular-dl/skin.scss
+++ b/ui/packages/consul-ui/app/components/tabular-dl/skin.scss
@@ -6,13 +6,13 @@
dt,
dd {
border-color: rgb(var(--tone-gray-300)) !important;
- color: var(--black) !important;
+ color: rgb(var(--tone-gray-999)) !important;
}
dt {
font-weight: var(--typo-weight-bold);
}
dd .copy-button button::before {
- background-color: var(--black);
+ background-color: rgb(var(--tone-gray-999));
}
dt.type + dd span::before {
@extend %with-info-circle-outline-mask, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss
index a7e308ad2b..333faed35f 100644
--- a/ui/packages/consul-ui/app/components/tooltip/index.scss
+++ b/ui/packages/consul-ui/app/components/tooltip/index.scss
@@ -32,7 +32,7 @@
%tooltip-bubble {
& {
background-color: rgb(var(--tone-gray-700));
- color: rgb(var(--white));
+ color: rgb(var(--tone-gray-000));
}
}
%tooltip-tail {
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
index 0212f144a3..7a08492caf 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
@@ -7,7 +7,7 @@
display: block;
color: rgb(var(--tone-gray-700));
overflow: hidden;
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
border-radius: var(--decor-radius-100);
border: 1px solid rgb(var(--tone-gray-200));
p {
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
index b4102e0815..bef40bb814 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
@@ -2,7 +2,7 @@
> button {
position: absolute;
transform: translate(-50%, -50%);
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
padding: 1px 1px;
&:hover {
cursor: pointer;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
index afd24a6062..8b6fc0fda3 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
@@ -24,7 +24,7 @@
// Metrics Container
#metrics-container {
div:first-child {
- background-color: rgb(var(--white));
+ background-color: rgb(var(--tone-gray-000));
}
.link {
background-color: rgb(var(--tone-gray-100));
@@ -53,7 +53,7 @@
fill: var(--transparent);
}
circle {
- fill: rgb(var(--white));
+ fill: rgb(var(--tone-gray-000));
}
.allow-arrow {
fill: rgb(var(--tone-gray-300));
diff --git a/ui/packages/consul-ui/app/helpers/icons-debug.js b/ui/packages/consul-ui/app/helpers/icons-debug.js
new file mode 100644
index 0000000000..a64039cab8
--- /dev/null
+++ b/ui/packages/consul-ui/app/helpers/icons-debug.js
@@ -0,0 +1,1057 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function([lib], hash) {
+ return [
+ 'activity-16.svg',
+'activity-24.svg',
+'alert-circle-16.svg',
+'alert-circle-24.svg',
+'alert-circle-fill-16.svg',
+'alert-circle-fill-24.svg',
+'alert-circle-fill.svg',
+'alert-circle-outline.svg',
+'alert-octagon-16.svg',
+'alert-octagon-24.svg',
+'alert-octagon-fill-16.svg',
+'alert-octagon-fill-24.svg',
+'alert-triangle-16.svg',
+'alert-triangle-24.svg',
+'alert-triangle-fill-16.svg',
+'alert-triangle-fill-24.svg',
+'alert-triangle.svg',
+'alibaba-16.svg',
+'alibaba-24.svg',
+'alibaba-color-16.svg',
+'alibaba-color-24.svg',
+'align-center-16.svg',
+'align-center-24.svg',
+'align-justify-16.svg',
+'align-justify-24.svg',
+'align-left-16.svg',
+'align-left-24.svg',
+'align-right-16.svg',
+'align-right-24.svg',
+'apple-16.svg',
+'apple-24.svg',
+'apple-color-16.svg',
+'apple-color-24.svg',
+'archive-16.svg',
+'archive-24.svg',
+'arrow-down-16.svg',
+'arrow-down-24.svg',
+'arrow-down-circle-16.svg',
+'arrow-down-circle-24.svg',
+'arrow-down-left-16.svg',
+'arrow-down-left-24.svg',
+'arrow-down-right-16.svg',
+'arrow-down-right-24.svg',
+'arrow-down.svg',
+'arrow-left-16.svg',
+'arrow-left-24.svg',
+'arrow-left-circle-16.svg',
+'arrow-left-circle-24.svg',
+'arrow-left.svg',
+'arrow-right-16.svg',
+'arrow-right-24.svg',
+'arrow-right-circle-16.svg',
+'arrow-right-circle-24.svg',
+'arrow-right.svg',
+'arrow-up-16.svg',
+'arrow-up-24.svg',
+'arrow-up-circle-16.svg',
+'arrow-up-circle-24.svg',
+'arrow-up-left-16.svg',
+'arrow-up-left-24.svg',
+'arrow-up-right-16.svg',
+'arrow-up-right-24.svg',
+'arrow-up.svg',
+'at-sign-16.svg',
+'at-sign-24.svg',
+'auth0-16.svg',
+'auth0-24.svg',
+'auth0-color-16.svg',
+'auth0-color-24.svg',
+'auto-apply-16.svg',
+'auto-apply-24.svg',
+'award-16.svg',
+'award-24.svg',
+'aws-16.svg',
+'aws-24.svg',
+'aws-color-16.svg',
+'aws-color-24.svg',
+'azure-16.svg',
+'azure-24.svg',
+'azure-color-16.svg',
+'azure-color-24.svg',
+'azure-devops-16.svg',
+'azure-devops-24.svg',
+'azure-devops-color-16.svg',
+'azure-devops-color-24.svg',
+'bar-chart-16.svg',
+'bar-chart-24.svg',
+'bar-chart-alt-16.svg',
+'bar-chart-alt-24.svg',
+'battery-16.svg',
+'battery-24.svg',
+'battery-charging-16.svg',
+'battery-charging-24.svg',
+'beaker-16.svg',
+'beaker-24.svg',
+'bell-16.svg',
+'bell-24.svg',
+'bell-active-16.svg',
+'bell-active-24.svg',
+'bell-active-fill-16.svg',
+'bell-active-fill-24.svg',
+'bell-off-16.svg',
+'bell-off-24.svg',
+'bitbucket-16.svg',
+'bitbucket-24.svg',
+'bitbucket-color-16.svg',
+'bitbucket-color-24.svg',
+'bolt.svg',
+'bookmark-16.svg',
+'bookmark-24.svg',
+'bookmark-add-16.svg',
+'bookmark-add-24.svg',
+'bookmark-add-fill-16.svg',
+'bookmark-add-fill-24.svg',
+'bookmark-fill-16.svg',
+'bookmark-fill-24.svg',
+'bookmark-remove-16.svg',
+'bookmark-remove-24.svg',
+'bookmark-remove-fill-16.svg',
+'bookmark-remove-fill-24.svg',
+'bottom-16.svg',
+'bottom-24.svg',
+'box-16.svg',
+'box-24.svg',
+'box-check-fill.svg',
+'box-outline.svg',
+'briefcase-16.svg',
+'briefcase-24.svg',
+'broadcast.svg',
+'bug-16.svg',
+'bug-24.svg',
+'bug.svg',
+'build-16.svg',
+'build-24.svg',
+'calendar-16.svg',
+'calendar-24.svg',
+'calendar.svg',
+'camera-16.svg',
+'camera-24.svg',
+'camera-off-16.svg',
+'camera-off-24.svg',
+'cancel-circle-fill.svg',
+'cancel-circle-outline.svg',
+'cancel-plain.svg',
+'cancel-square-fill.svg',
+'cancel-square-outline.svg',
+'caret-16.svg',
+'caret-24.svg',
+'caret-down.svg',
+'caret-up.svg',
+'cast-16.svg',
+'cast-24.svg',
+'certificate-16.svg',
+'certificate-24.svg',
+'change-16.svg',
+'change-24.svg',
+'change-circle-16.svg',
+'change-circle-24.svg',
+'change-square-16.svg',
+'change-square-24.svg',
+'check-16.svg',
+'check-24.svg',
+'check-circle-16.svg',
+'check-circle-24.svg',
+'check-circle-fill-16.svg',
+'check-circle-fill-24.svg',
+'check-circle-fill.svg',
+'check-circle-outline.svg',
+'check-diamond-16.svg',
+'check-diamond-24.svg',
+'check-diamond-fill-16.svg',
+'check-diamond-fill-24.svg',
+'check-hexagon-16.svg',
+'check-hexagon-24.svg',
+'check-hexagon-fill-16.svg',
+'check-hexagon-fill-24.svg',
+'check-plain.svg',
+'check-square-16.svg',
+'check-square-24.svg',
+'check-square-fill-16.svg',
+'check-square-fill-24.svg',
+'chevron-down-16.svg',
+'chevron-down-24.svg',
+'chevron-down.svg',
+'chevron-left-16.svg',
+'chevron-left-24.svg',
+'chevron-left.svg',
+'chevron-right-16.svg',
+'chevron-right-24.svg',
+'chevron-right.svg',
+'chevron-up-16.svg',
+'chevron-up-24.svg',
+'chevron-up.svg',
+'chevrons-down-16.svg',
+'chevrons-down-24.svg',
+'chevrons-left-16.svg',
+'chevrons-left-24.svg',
+'chevrons-right-16.svg',
+'chevrons-right-24.svg',
+'chevrons-up-16.svg',
+'chevrons-up-24.svg',
+'circle-16.svg',
+'circle-24.svg',
+'circle-dot-16.svg',
+'circle-dot-24.svg',
+'circle-fill-16.svg',
+'circle-fill-24.svg',
+'circle-half-16.svg',
+'circle-half-24.svg',
+'clipboard-16.svg',
+'clipboard-24.svg',
+'clipboard-checked-16.svg',
+'clipboard-checked-24.svg',
+'clipboard-copy-16.svg',
+'clipboard-copy-24.svg',
+'clock-16.svg',
+'clock-24.svg',
+'clock-fill.svg',
+'clock-outline.svg',
+'cloud-16.svg',
+'cloud-24.svg',
+'cloud-check-16.svg',
+'cloud-check-24.svg',
+'cloud-cross.svg',
+'cloud-download-16.svg',
+'cloud-download-24.svg',
+'cloud-lightning-16.svg',
+'cloud-lightning-24.svg',
+'cloud-lock-16.svg',
+'cloud-lock-24.svg',
+'cloud-off-16.svg',
+'cloud-off-24.svg',
+'cloud-upload-16.svg',
+'cloud-upload-24.svg',
+'cloud-x-16.svg',
+'cloud-x-24.svg',
+'code-16.svg',
+'code-24.svg',
+'code.svg',
+'collections-16.svg',
+'collections-24.svg',
+'command-16.svg',
+'command-24.svg',
+'compass-16.svg',
+'compass-24.svg',
+'connection-16.svg',
+'connection-24.svg',
+'connection-gateway-16.svg',
+'connection-gateway-24.svg',
+'console.svg',
+'copy-action.svg',
+'copy-success.svg',
+'corner-down-left-16.svg',
+'corner-down-left-24.svg',
+'corner-down-right-16.svg',
+'corner-down-right-24.svg',
+'corner-left-down-16.svg',
+'corner-left-down-24.svg',
+'corner-left-up-16.svg',
+'corner-left-up-24.svg',
+'corner-right-down-16.svg',
+'corner-right-down-24.svg',
+'corner-right-up-16.svg',
+'corner-right-up-24.svg',
+'corner-up-left-16.svg',
+'corner-up-left-24.svg',
+'corner-up-right-16.svg',
+'corner-up-right-24.svg',
+'cpu-16.svg',
+'cpu-24.svg',
+'credit-card-16.svg',
+'credit-card-24.svg',
+'crop-16.svg',
+'crop-24.svg',
+'crosshair-16.svg',
+'crosshair-24.svg',
+'dashboard-16.svg',
+'dashboard-24.svg',
+'database-16.svg',
+'database-24.svg',
+'database.svg',
+'delay-16.svg',
+'delay-24.svg',
+'delay.svg',
+'delete-16.svg',
+'delete-24.svg',
+'deny-alt.svg',
+'deny-color.svg',
+'deny-default.svg',
+'diamond-16.svg',
+'diamond-24.svg',
+'diamond-fill-16.svg',
+'diamond-fill-24.svg',
+'disabled.svg',
+'disc-16.svg',
+'disc-24.svg',
+'discussion-circle-16.svg',
+'discussion-circle-24.svg',
+'discussion-square-16.svg',
+'discussion-square-24.svg',
+'docker-16.svg',
+'docker-24.svg',
+'docker-color-16.svg',
+'docker-color-24.svg',
+'docs-16.svg',
+'docs-24.svg',
+'docs-download-16.svg',
+'docs-download-24.svg',
+'docs-link-16.svg',
+'docs-link-24.svg',
+'docs.svg',
+'dollar-sign-16.svg',
+'dollar-sign-24.svg',
+'dot-16.svg',
+'dot-24.svg',
+'dot-half-16.svg',
+'dot-half-24.svg',
+'download-16.svg',
+'download-24.svg',
+'download.svg',
+'droplet-16.svg',
+'droplet-24.svg',
+'duplicate-16.svg',
+'duplicate-24.svg',
+'edit-16.svg',
+'edit-24.svg',
+'edit.svg',
+'entry-point-16.svg',
+'entry-point-24.svg',
+'envelope-sealed-fill.svg',
+'envelope-sealed-outline.svg',
+'envelope-unsealed--outline.svg',
+'envelope-unsealed-fill.svg',
+'event-16.svg',
+'event-24.svg',
+'exit-point-16.svg',
+'exit-point-24.svg',
+'exit.svg',
+'expand-less.svg',
+'expand-more.svg',
+'external-link-16.svg',
+'external-link-24.svg',
+'eye-16.svg',
+'eye-24.svg',
+'eye-off-16.svg',
+'eye-off-24.svg',
+'f5-16.svg',
+'f5-24.svg',
+'f5-color-16.svg',
+'f5-color-24.svg',
+'fast-forward-16.svg',
+'fast-forward-24.svg',
+'file-16.svg',
+'file-24.svg',
+'file-change-16.svg',
+'file-change-24.svg',
+'file-check-16.svg',
+'file-check-24.svg',
+'file-diff-16.svg',
+'file-diff-24.svg',
+'file-fill.svg',
+'file-minus-16.svg',
+'file-minus-24.svg',
+'file-outline.svg',
+'file-plus-16.svg',
+'file-plus-24.svg',
+'file-source-16.svg',
+'file-source-24.svg',
+'file-text-16.svg',
+'file-text-24.svg',
+'file-x-16.svg',
+'file-x-24.svg',
+'files-16.svg',
+'files-24.svg',
+'film-16.svg',
+'film-24.svg',
+'filter-16.svg',
+'filter-24.svg',
+'filter-circle-16.svg',
+'filter-circle-24.svg',
+'filter-fill-16.svg',
+'filter-fill-24.svg',
+'filter.svg',
+'fingerprint-16.svg',
+'fingerprint-24.svg',
+'flag-16.svg',
+'flag-24.svg',
+'flag.svg',
+'folder-16.svg',
+'folder-24.svg',
+'folder-fill-16.svg',
+'folder-fill-24.svg',
+'folder-fill.svg',
+'folder-minus-16.svg',
+'folder-minus-24.svg',
+'folder-minus-fill-16.svg',
+'folder-minus-fill-24.svg',
+'folder-outline.svg',
+'folder-plus-16.svg',
+'folder-plus-24.svg',
+'folder-plus-fill-16.svg',
+'folder-plus-fill-24.svg',
+'folder-star-16.svg',
+'folder-star-24.svg',
+'folder-users-16.svg',
+'folder-users-24.svg',
+'frown-16.svg',
+'frown-24.svg',
+'gateway-16.svg',
+'gateway-24.svg',
+'gateway.svg',
+'gcp-16.svg',
+'gcp-24.svg',
+'gcp-color-16.svg',
+'gcp-color-24.svg',
+'gift-16.svg',
+'gift-24.svg',
+'gift-fill.svg',
+'gift-outline.svg',
+'git-branch-16.svg',
+'git-branch-24.svg',
+'git-branch.svg',
+'git-commit-16.svg',
+'git-commit-24.svg',
+'git-commit.svg',
+'git-merge-16.svg',
+'git-merge-24.svg',
+'git-pull-request-16.svg',
+'git-pull-request-24.svg',
+'git-pull-request.svg',
+'git-repo-16.svg',
+'git-repo-24.svg',
+'git-repository.svg',
+'github-16.svg',
+'github-24.svg',
+'github-color-16.svg',
+'github-color-24.svg',
+'gitlab-16.svg',
+'gitlab-24.svg',
+'gitlab-color-16.svg',
+'gitlab-color-24.svg',
+'globe-16.svg',
+'globe-24.svg',
+'globe-private-16.svg',
+'globe-private-24.svg',
+'google-16.svg',
+'google-24.svg',
+'google-color-16.svg',
+'google-color-24.svg',
+'grid-16.svg',
+'grid-24.svg',
+'grid-alt-16.svg',
+'grid-alt-24.svg',
+'guide-16.svg',
+'guide-24.svg',
+'guide-link-16.svg',
+'guide-link-24.svg',
+'guide.svg',
+'hammer-16.svg',
+'hammer-24.svg',
+'hard-drive-16.svg',
+'hard-drive-24.svg',
+'hash-16.svg',
+'hash-24.svg',
+'headphones-16.svg',
+'headphones-24.svg',
+'health.svg',
+'heart-16.svg',
+'heart-24.svg',
+'heart-fill-16.svg',
+'heart-fill-24.svg',
+'heart-off-16.svg',
+'heart-off-24.svg',
+'help-16.svg',
+'help-24.svg',
+'help-circle-fill.svg',
+'help-circle-outline.svg',
+'hexagon-16.svg',
+'hexagon-24.svg',
+'hexagon-fill-16.svg',
+'hexagon-fill-24.svg',
+'history-16.svg',
+'history-24.svg',
+'history.svg',
+'home-16.svg',
+'home-24.svg',
+'hourglass-16.svg',
+'hourglass-24.svg',
+'identity-service-16.svg',
+'identity-service-24.svg',
+'identity-user-16.svg',
+'identity-user-24.svg',
+'image-16.svg',
+'image-24.svg',
+'inbox-16.svg',
+'inbox-24.svg',
+'info-16.svg',
+'info-24.svg',
+'info-circle-fill.svg',
+'info-circle-outline.svg',
+'jump-link-16.svg',
+'jump-link-24.svg',
+'key-16.svg',
+'key-24.svg',
+'key-values-16.svg',
+'key-values-24.svg',
+'key.svg',
+'kubernetes-16.svg',
+'kubernetes-24.svg',
+'kubernetes-color-16.svg',
+'kubernetes-color-24.svg',
+'labyrinth-16.svg',
+'labyrinth-24.svg',
+'layers-16.svg',
+'layers-24.svg',
+'layers.svg',
+'layout-16.svg',
+'layout-24.svg',
+'learn-16.svg',
+'learn-24.svg',
+'learn-link-16.svg',
+'learn-link-24.svg',
+'learn.svg',
+'line-chart-16.svg',
+'line-chart-24.svg',
+'line-chart-up-16.svg',
+'line-chart-up-24.svg',
+'link-16.svg',
+'link-24.svg',
+'link.svg',
+'list-16.svg',
+'list-24.svg',
+'loading.svg',
+'lock-16.svg',
+'lock-24.svg',
+'lock-closed-fill.svg',
+'lock-closed-outline.svg',
+'lock-closed.svg',
+'lock-disabled.svg',
+'lock-fill-16.svg',
+'lock-fill-24.svg',
+'lock-off-16.svg',
+'lock-off-24.svg',
+'lock-open.svg',
+'logo-alicloud-color.svg',
+'logo-alicloud-monochrome.svg',
+'logo-auth0-color.svg',
+'logo-aws-color.svg',
+'logo-aws-monochrome.svg',
+'logo-azure-color.svg',
+'logo-azure-dev-ops-color.svg',
+'logo-azure-dev-ops-monochrome.svg',
+'logo-azure-monochrome.svg',
+'logo-bitbucket-color.svg',
+'logo-bitbucket-monochrome.svg',
+'logo-consul-color.svg',
+'logo-ember-circle-color.svg',
+'logo-gcp-color.svg',
+'logo-gcp-monochrome.svg',
+'logo-github-color.svg',
+'logo-github-monochrome.svg',
+'logo-gitlab-color.svg',
+'logo-gitlab-monochrome.svg',
+'logo-glimmer-color.svg',
+'logo-google-color.svg',
+'logo-google-monochrome.svg',
+'logo-hashicorp-color.svg',
+'logo-jwt-color.svg',
+'logo-kubernetes-color.svg',
+'logo-kubernetes-monochrome.svg',
+'logo-microsoft-color.svg',
+'logo-nomad-color.svg',
+'logo-oidc-color.svg',
+'logo-okta-color.svg',
+'logo-oracle-color.svg',
+'logo-oracle-monochrome.svg',
+'logo-slack-color.svg',
+'logo-slack-monochrome.svg',
+'logo-terraform-color.svg',
+'logo-vault-color.svg',
+'logo-vmware-color.svg',
+'logo-vmware-monochrome.svg',
+'mail-16.svg',
+'mail-24.svg',
+'mail-open-16.svg',
+'mail-open-24.svg',
+'map-16.svg',
+'map-24.svg',
+'map-pin-16.svg',
+'map-pin-24.svg',
+'maximize-16.svg',
+'maximize-24.svg',
+'maximize-alt-16.svg',
+'maximize-alt-24.svg',
+'meh-16.svg',
+'meh-24.svg',
+'menu-16.svg',
+'menu-24.svg',
+'menu.svg',
+'mesh-16.svg',
+'mesh-24.svg',
+'mesh.svg',
+'message-circle-16.svg',
+'message-circle-24.svg',
+'message-circle-fill-16.svg',
+'message-circle-fill-24.svg',
+'message-square-16.svg',
+'message-square-24.svg',
+'message-square-fill-16.svg',
+'message-square-fill-24.svg',
+'message.svg',
+'mic-16.svg',
+'mic-24.svg',
+'mic-off-16.svg',
+'mic-off-24.svg',
+'microsoft-16.svg',
+'microsoft-24.svg',
+'microsoft-color-16.svg',
+'microsoft-color-24.svg',
+'migrate-16.svg',
+'migrate-24.svg',
+'minimize-16.svg',
+'minimize-24.svg',
+'minimize-alt-16.svg',
+'minimize-alt-24.svg',
+'minus-16.svg',
+'minus-24.svg',
+'minus-circle-16.svg',
+'minus-circle-24.svg',
+'minus-circle-fill.svg',
+'minus-circle-outline.svg',
+'minus-plain.svg',
+'minus-plus-16.svg',
+'minus-plus-24.svg',
+'minus-plus-circle-16.svg',
+'minus-plus-circle-24.svg',
+'minus-plus-square-16.svg',
+'minus-plus-square-24.svg',
+'minus-square-16.svg',
+'minus-square-24.svg',
+'minus-square-fill.svg',
+'module-16.svg',
+'module-24.svg',
+'module.svg',
+'monitor-16.svg',
+'monitor-24.svg',
+'moon-16.svg',
+'moon-24.svg',
+'more-horizontal-16.svg',
+'more-horizontal-24.svg',
+'more-horizontal.svg',
+'more-vertical-16.svg',
+'more-vertical-24.svg',
+'more-vertical.svg',
+'mouse-pointer-16.svg',
+'mouse-pointer-24.svg',
+'move-16.svg',
+'move-24.svg',
+'music-16.svg',
+'music-24.svg',
+'navigation-16.svg',
+'navigation-24.svg',
+'navigation-alt-16.svg',
+'navigation-alt-24.svg',
+'network-16.svg',
+'network-24.svg',
+'network-alt-16.svg',
+'network-alt-24.svg',
+'newspaper-16.svg',
+'newspaper-24.svg',
+'node-16.svg',
+'node-24.svg',
+'notification-disabled.svg',
+'notification-fill.svg',
+'notification-outline.svg',
+'octagon-16.svg',
+'octagon-24.svg',
+'okta-16.svg',
+'okta-24.svg',
+'okta-color-16.svg',
+'okta-color-24.svg',
+'oracle-16.svg',
+'oracle-24.svg',
+'oracle-color-16.svg',
+'oracle-color-24.svg',
+'org-16.svg',
+'org-24.svg',
+'outline-16.svg',
+'outline-24.svg',
+'outline.svg',
+'package-16.svg',
+'package-24.svg',
+'page-outline.svg',
+'paperclip-16.svg',
+'paperclip-24.svg',
+'partner.svg',
+'path-16.svg',
+'path-24.svg',
+'path.svg',
+'pause-16.svg',
+'pause-24.svg',
+'pause-circle-16.svg',
+'pause-circle-24.svg',
+'pen-tool-16.svg',
+'pen-tool-24.svg',
+'pencil-tool-16.svg',
+'pencil-tool-24.svg',
+'phone-16.svg',
+'phone-24.svg',
+'phone-call-16.svg',
+'phone-call-24.svg',
+'phone-off-16.svg',
+'phone-off-24.svg',
+'pie-chart-16.svg',
+'pie-chart-24.svg',
+'pin-16.svg',
+'pin-24.svg',
+'play-16.svg',
+'play-24.svg',
+'play-circle-16.svg',
+'play-circle-24.svg',
+'play-fill.svg',
+'play-outline.svg',
+'play-plain.svg',
+'plus-16.svg',
+'plus-24.svg',
+'plus-circle-16.svg',
+'plus-circle-24.svg',
+'plus-circle-fill.svg',
+'plus-circle-outline.svg',
+'plus-plain.svg',
+'plus-square-16.svg',
+'plus-square-24.svg',
+'plus-square-fill.svg',
+'port.svg',
+'power-16.svg',
+'power-24.svg',
+'printer-16.svg',
+'printer-24.svg',
+'protocol.svg',
+'provider-16.svg',
+'provider-24.svg',
+'provider.svg',
+'public-default.svg',
+'public-locked.svg',
+'queue-16.svg',
+'queue-24.svg',
+'queue.svg',
+'radio-16.svg',
+'radio-24.svg',
+'radio-button-checked.svg',
+'radio-button-unchecked.svg',
+'random-16.svg',
+'random-24.svg',
+'random.svg',
+'redirect-16.svg',
+'redirect-24.svg',
+'redirect.svg',
+'refresh-alert.svg',
+'refresh-default.svg',
+'reload-16.svg',
+'reload-24.svg',
+'remix.svg',
+'repeat-16.svg',
+'repeat-24.svg',
+'replication-direct-16.svg',
+'replication-direct-24.svg',
+'replication-perf-16.svg',
+'replication-perf-24.svg',
+'rewind-16.svg',
+'rewind-24.svg',
+'ribbon.svg',
+'rocket-16.svg',
+'rocket-24.svg',
+'rotate-ccw-16.svg',
+'rotate-ccw-24.svg',
+'rotate-cw-16.svg',
+'rotate-cw-24.svg',
+'rss-16.svg',
+'rss-24.svg',
+'run.svg',
+'save-16.svg',
+'save-24.svg',
+'scissors-16.svg',
+'scissors-24.svg',
+'search-16.svg',
+'search-24.svg',
+'search-color.svg',
+'search.svg',
+'send-16.svg',
+'send-24.svg',
+'server-16.svg',
+'server-24.svg',
+'server-cluster-16.svg',
+'server-cluster-24.svg',
+'serverless-16.svg',
+'serverless-24.svg',
+'settings-16.svg',
+'settings-24.svg',
+'settings.svg',
+'share-16.svg',
+'share-24.svg',
+'shield-16.svg',
+'shield-24.svg',
+'shield-alert-16.svg',
+'shield-alert-24.svg',
+'shield-check-16.svg',
+'shield-check-24.svg',
+'shield-off-16.svg',
+'shield-off-24.svg',
+'shield-x-16.svg',
+'shield-x-24.svg',
+'shopping-bag-16.svg',
+'shopping-bag-24.svg',
+'shopping-cart-16.svg',
+'shopping-cart-24.svg',
+'shuffle-16.svg',
+'shuffle-24.svg',
+'sidebar-16.svg',
+'sidebar-24.svg',
+'sidebar-hide-16.svg',
+'sidebar-hide-24.svg',
+'sidebar-show-16.svg',
+'sidebar-show-24.svg',
+'sign-in-16.svg',
+'sign-in-24.svg',
+'sign-out-16.svg',
+'sign-out-24.svg',
+'skip-16.svg',
+'skip-24.svg',
+'skip-back-16.svg',
+'skip-back-24.svg',
+'skip-forward-16.svg',
+'skip-forward-24.svg',
+'slack-16.svg',
+'slack-24.svg',
+'slack-color-16.svg',
+'slack-color-24.svg',
+'slash-16.svg',
+'slash-24.svg',
+'slash-square-16.svg',
+'slash-square-24.svg',
+'sliders-16.svg',
+'sliders-24.svg',
+'smartphone-16.svg',
+'smartphone-24.svg',
+'smile-16.svg',
+'smile-24.svg',
+'socket-16.svg',
+'socket-24.svg',
+'socket.svg',
+'sort-asc-16.svg',
+'sort-asc-24.svg',
+'sort-desc-16.svg',
+'sort-desc-24.svg',
+'sort.svg',
+'source-file.svg',
+'speaker-16.svg',
+'speaker-24.svg',
+'square-16.svg',
+'square-24.svg',
+'square-fill-16.svg',
+'square-fill-24.svg',
+'star-16.svg',
+'star-24.svg',
+'star-circle-16.svg',
+'star-circle-24.svg',
+'star-fill-16.svg',
+'star-fill-24.svg',
+'star-fill.svg',
+'star-off-16.svg',
+'star-off-24.svg',
+'star-outline.svg',
+'stop-circle-16.svg',
+'stop-circle-24.svg',
+'sub-left.svg',
+'sub-right.svg',
+'sun-16.svg',
+'sun-24.svg',
+'support-16.svg',
+'support-24.svg',
+'support.svg',
+'swap-horizontal-16.svg',
+'swap-horizontal-24.svg',
+'swap-horizontal.svg',
+'swap-vertical-16.svg',
+'swap-vertical-24.svg',
+'swap-vertical.svg',
+'switcher-16.svg',
+'switcher-24.svg',
+'sync-16.svg',
+'sync-24.svg',
+'sync-alert-16.svg',
+'sync-alert-24.svg',
+'sync-reverse-16.svg',
+'sync-reverse-24.svg',
+'tablet-16.svg',
+'tablet-24.svg',
+'tag-16.svg',
+'tag-24.svg',
+'tag.svg',
+'target-16.svg',
+'target-24.svg',
+'terminal-16.svg',
+'terminal-24.svg',
+'terminal-screen-16.svg',
+'terminal-screen-24.svg',
+'thumbs-down-16.svg',
+'thumbs-down-24.svg',
+'thumbs-up-16.svg',
+'thumbs-up-24.svg',
+'toggle-left-16.svg',
+'toggle-left-24.svg',
+'toggle-right-16.svg',
+'toggle-right-24.svg',
+'token-16.svg',
+'token-24.svg',
+'tools-16.svg',
+'tools-24.svg',
+'top-16.svg',
+'top-24.svg',
+'trash-16.svg',
+'trash-24.svg',
+'trash.svg',
+'trend-down-16.svg',
+'trend-down-24.svg',
+'trend-up-16.svg',
+'trend-up-24.svg',
+'triangle-16.svg',
+'triangle-24.svg',
+'triangle-fill-16.svg',
+'triangle-fill-24.svg',
+'truck-16.svg',
+'truck-24.svg',
+'tune.svg',
+'tv-16.svg',
+'tv-24.svg',
+'type-16.svg',
+'type-24.svg',
+'unfold-close-16.svg',
+'unfold-close-24.svg',
+'unfold-less.svg',
+'unfold-more.svg',
+'unfold-open-16.svg',
+'unfold-open-24.svg',
+'unlock-16.svg',
+'unlock-24.svg',
+'upload-16.svg',
+'upload-24.svg',
+'upload.svg',
+'user-16.svg',
+'user-24.svg',
+'user-add.svg',
+'user-check-16.svg',
+'user-check-24.svg',
+'user-circle-16.svg',
+'user-circle-24.svg',
+'user-circle-fill-16.svg',
+'user-circle-fill-24.svg',
+'user-minus-16.svg',
+'user-minus-24.svg',
+'user-organization.svg',
+'user-plain.svg',
+'user-plus-16.svg',
+'user-plus-24.svg',
+'user-square-fill.svg',
+'user-square-outline.svg',
+'user-team.svg',
+'user-x-16.svg',
+'user-x-24.svg',
+'users-16.svg',
+'users-24.svg',
+'vault-16.svg',
+'vault-24.svg',
+'verified-16.svg',
+'verified-24.svg',
+'video-16.svg',
+'video-24.svg',
+'video-off-16.svg',
+'video-off-24.svg',
+'visibility-hide.svg',
+'visibility-show.svg',
+'vmware-16.svg',
+'vmware-24.svg',
+'vmware-color-16.svg',
+'vmware-color-24.svg',
+'volume-16.svg',
+'volume-2-16.svg',
+'volume-2-24.svg',
+'volume-24.svg',
+'volume-down-16.svg',
+'volume-down-24.svg',
+'volume-x-16.svg',
+'volume-x-24.svg',
+'wall-16.svg',
+'wall-24.svg',
+'watch-16.svg',
+'watch-24.svg',
+'webhook-16.svg',
+'webhook-24.svg',
+'webhook.svg',
+'wifi-16.svg',
+'wifi-24.svg',
+'wifi-off-16.svg',
+'wifi-off-24.svg',
+'wrench-16.svg',
+'wrench-24.svg',
+'x-16.svg',
+'x-24.svg',
+'x-circle-16.svg',
+'x-circle-24.svg',
+'x-circle-fill-16.svg',
+'x-circle-fill-24.svg',
+'x-diamond-16.svg',
+'x-diamond-24.svg',
+'x-diamond-fill-16.svg',
+'x-diamond-fill-24.svg',
+'x-hexagon-16.svg',
+'x-hexagon-24.svg',
+'x-hexagon-fill-16.svg',
+'x-hexagon-fill-24.svg',
+'x-square-16.svg',
+'x-square-24.svg',
+'x-square-fill-16.svg',
+'x-square-fill-24.svg',
+'zap-16.svg',
+'zap-24.svg',
+'zap-off-16.svg',
+'zap-off-24.svg',
+'zoom-in-16.svg',
+'zoom-in-24.svg',
+'zoom-out-16.svg',
+'zoom-out-24.svg'
+
+ ].filter(item => {
+ const sized = item.endsWith('-16.svg') || item.endsWith('-24.svg');
+ return lib === 'structure' ? !sized : sized;
+ }).map(item => {
+ const temp = item.split('.');
+ temp.pop();
+ const name = temp.join('.');
+ let placeholder = `with-${name}`;
+ if(name.indexOf('-color') !== -1) {
+ placeholder = `${placeholder}-icon`;
+ } else {
+ placeholder = `${placeholder}-mask`;
+ }
+ return {
+ placeholder: placeholder,
+ name: name
+ };
+ })
+});
diff --git a/ui/packages/consul-ui/app/modifiers/css-props.js b/ui/packages/consul-ui/app/modifiers/css-props.js
new file mode 100644
index 0000000000..7ed02b4330
--- /dev/null
+++ b/ui/packages/consul-ui/app/modifiers/css-props.js
@@ -0,0 +1,39 @@
+import { modifier } from 'ember-modifier';
+const STYLE_RULE = 1;
+const getCustomProperties = function() {
+ return Object.fromEntries(
+ [...document.styleSheets].reduce(
+ (prev, item) =>
+ prev.concat(
+ [...item.cssRules]
+ .filter(item => item.type === STYLE_RULE)
+ .reduce((prev, rule) => {
+ const props = [...rule.style]
+ .filter(prop => prop.startsWith('--'))
+ .map(prop => [prop.trim(), rule.style.getPropertyValue(prop).trim()]);
+ return [...prev, ...props];
+ }, [])
+ ),
+ []
+ )
+ );
+};
+const props = getCustomProperties();
+export default modifier(function($element, [returns], hash) {
+ const re = new RegExp(`^--${hash.prefix || '.'}${hash.group || ''}+`);
+ const obj = {};
+ Object.entries(props).forEach(([key, value]) => {
+ const res = key.match(re);
+ if(res) {
+ let prop = res[0];
+ if (prop.charAt(prop.length - 1) === '-') {
+ prop = prop.substr(0, prop.length - 1);
+ }
+ if (typeof obj[prop] === 'undefined') {
+ obj[prop] = {};
+ }
+ obj[prop][key] = value;
+ }
+ });
+ returns(obj);
+});
diff --git a/ui/packages/consul-ui/app/styles/base/color/README.mdx b/ui/packages/consul-ui/app/styles/base/color/README.mdx
new file mode 100644
index 0000000000..414514316d
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/README.mdx
@@ -0,0 +1,81 @@
+# Colors
+
+All colors for the immediate future should _mostly_ use the following `tone`
+CSS properties, unless:
+
+1. We get around to eventually adding semantic colors names (or adding something else) in which case these docs should be updated.
+2. You are absolutely sure the color you want should never be changed by a theme. These should be very very few and far between so even if we get that wrong it should be easy to update.
+
+`tones` should always using the following form:
+
+```css
+property: rgb(var(--tone-gray-500));
+```
+
+In other words always use `rgb` this gives us the flexibility to easily use these variables with alpha if we ever need to.
+
+```css
+property: rgb(var(--tone-gray-500) / 50);
+```
+
+Currently, alphas are mainly used for shadows. Please avoid the use of alphas for adjusting hues as they can produce unpredictable results. We should be utilizing our pre-defined color palette or adding new colors to it with proper RGB values. If you do need to add a color with alpha, please include a code comment or a self-comment explaining the use case.
+
+Lastly, there is currently one non-color alias group which is `--tone-brand` which is a group of our current brand colors.
+
+
+## %theme-light (default)
+
+```hbs preview-template
+
+{{#each-in this.tones as |prop value|}}
+
+ {{#each-in value as |prop value|}}
+
+ {{prop}}
+
+ {{/each-in}}
+
+{{/each-in}}
+
+```
+
+## %theme-dark
+
+If you need to build something (like a component or view) which begins in 'dark mode', you will need to switch your coloring and use
+
+```css
+%component-name {
+ @extend %theme-dark;
+}
+```
+
+```hbs preview-template
+
+{{#each-in this.tones as |prop value|}}
+
+ {{#each-in value as |prop value|}}
+
+ {{prop}}
+
+ {{/each-in}}
+
+{{/each-in}}
+
+```
+
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss
index 52d04b0973..4f0cf22e0f 100644
--- a/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/frame-placeholders.scss
@@ -9,8 +9,8 @@
%frame-brand-300 {
@extend %frame-border-000;
background-color: var(--transparent);
- border-color: rgb(var(--decor-brand-600, inherit));
- color: rgb(var(--typo-brand-600, inherit));
+ border-color: rgb(var(--decor-brand-600));
+ color: rgb(var(--typo-brand-600));
}
/* possibly filter bar */
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss
index 22f5f94ac0..0c815c10f7 100644
--- a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark-high-contrast.scss
@@ -95,22 +95,5 @@
--tone-yellow-950: var(--yellow-950);
--tone-yellow-999: var(--black);
- --tone-yellow-000: var(--white);
- --tone-yellow-050: var(--yellow-050);
- --tone-yellow-100: var(--yellow-100);
- --tone-yellow-150: var(--yellow-150);
- --tone-yellow-200: var(--yellow-200);
- --tone-yellow-300: var(--yellow-300);
- --tone-yellow-400: var(--yellow-400);
- --tone-yellow-500: var(--yellow-500);
- --tone-yellow-600: var(--yellow-600);
- --tone-yellow-700: var(--yellow-700);
- --tone-yellow-800: var(--yellow-800);
- --tone-yellow-850: var(--yellow-850);
- --tone-yellow-900: var(--yellow-900);
- --tone-yellow-950: var(--yellow-950);
- --tone-yellow-999: var(--black);
-
--tone-transparent: var(--transparent);
}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss
index 8bb76828a7..27f809fc1b 100644
--- a/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/dark.scss
@@ -79,38 +79,21 @@
--tone-orange-950: var(--orange-950);
--tone-orange-999: var(--black);
- --tone-yellow-000: var(--white);
- --tone-yellow-050: var(--yellow-050);
- --tone-yellow-100: var(--yellow-100);
- --tone-yellow-150: var(--yellow-150);
- --tone-yellow-200: var(--yellow-200);
- --tone-yellow-300: var(--yellow-300);
- --tone-yellow-400: var(--yellow-400);
+ --tone-yellow-000: var(--black);
+ --tone-yellow-050: var(--blue-950);
+ --tone-yellow-100: var(--yellow-900);
+ --tone-yellow-150: var(--yellow-850);
+ --tone-yellow-200: var(--yellow-800);
+ --tone-yellow-300: var(--yellow-700);
+ --tone-yellow-400: var(--yellow-600);
--tone-yellow-500: var(--yellow-500);
- --tone-yellow-600: var(--yellow-600);
- --tone-yellow-700: var(--yellow-700);
- --tone-yellow-800: var(--yellow-800);
- --tone-yellow-850: var(--yellow-850);
- --tone-yellow-900: var(--yellow-900);
- --tone-yellow-950: var(--yellow-950);
- --tone-yellow-999: var(--black);
-
- --tone-yellow-000: var(--white);
- --tone-yellow-050: var(--yellow-050);
- --tone-yellow-100: var(--yellow-100);
- --tone-yellow-150: var(--yellow-150);
- --tone-yellow-200: var(--yellow-200);
- --tone-yellow-300: var(--yellow-300);
- --tone-yellow-400: var(--yellow-400);
- --tone-yellow-500: var(--yellow-500);
- --tone-yellow-600: var(--yellow-600);
- --tone-yellow-700: var(--yellow-700);
- --tone-yellow-800: var(--yellow-800);
- --tone-yellow-850: var(--yellow-850);
- --tone-yellow-900: var(--yellow-900);
- --tone-yellow-950: var(--yellow-950);
- --tone-yellow-999: var(--black);
+ --tone-yellow-600: var(--yellow-400);
+ --tone-yellow-700: var(--yellow-300);
+ --tone-yellow-800: var(--yellow-200);
+ --tone-yellow-850: var(--yellow-250);
+ --tone-yellow-900: var(--yellow-100);
+ --tone-yellow-950: var(--yellow-050);
+ --tone-yellow-999: var(--white);
--tone-transparent: var(--transparent);
}
-
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss
index 947fa84635..676de6b15f 100644
--- a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light-high-contrast.scss
@@ -95,21 +95,5 @@
--tone-yellow-950: var(--yellow-950);
--tone-yellow-999: var(--black);
- --tone-yellow-000: var(--white);
- --tone-yellow-050: var(--yellow-050);
- --tone-yellow-100: var(--yellow-100);
- --tone-yellow-150: var(--yellow-150);
- --tone-yellow-200: var(--yellow-200);
- --tone-yellow-300: var(--yellow-300);
- --tone-yellow-400: var(--yellow-400);
- --tone-yellow-500: var(--yellow-500);
- --tone-yellow-600: var(--yellow-600);
- --tone-yellow-700: var(--yellow-700);
- --tone-yellow-800: var(--yellow-800);
- --tone-yellow-850: var(--yellow-850);
- --tone-yellow-900: var(--yellow-900);
- --tone-yellow-950: var(--yellow-950);
- --tone-yellow-999: var(--black);
-
--tone-transparent: var(--transparent);
}
diff --git a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss
index 8584bfbd25..7497280ba0 100644
--- a/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/ui/themes/light.scss
@@ -95,21 +95,5 @@
--tone-yellow-950: var(--yellow-950);
--tone-yellow-999: var(--black);
- --tone-yellow-000: var(--white);
- --tone-yellow-050: var(--yellow-050);
- --tone-yellow-100: var(--yellow-100);
- --tone-yellow-150: var(--yellow-150);
- --tone-yellow-200: var(--yellow-200);
- --tone-yellow-300: var(--yellow-300);
- --tone-yellow-400: var(--yellow-400);
- --tone-yellow-500: var(--yellow-500);
- --tone-yellow-600: var(--yellow-600);
- --tone-yellow-700: var(--yellow-700);
- --tone-yellow-800: var(--yellow-800);
- --tone-yellow-850: var(--yellow-850);
- --tone-yellow-900: var(--yellow-900);
- --tone-yellow-950: var(--yellow-950);
- --tone-yellow-999: var(--black);
-
--tone-transparent: var(--transparent);
}
diff --git a/ui/packages/consul-ui/app/styles/base/icons/README.mdx b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
new file mode 100644
index 0000000000..8c8791353b
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/icons/README.mdx
@@ -0,0 +1,74 @@
+# Iconography
+
+Please prefer our Constructable `%placeholder` styles over singular CSS
+properties. If you need to drop back, to something not covered there then you
+can also use CSS properties directly.
+
+All icons use a `%with-` prefix for example `%with-alert-circle-fill-icon` or
+`%with-alert-circle-fill-mask`. We mostly use the `-mask` suffix and also use
+the `%as-pseudo` placeholder to tell CSS that we are using the background on a
+pseudo element:
+
+```css
+.selector::before {
+ @extend %with-alert-circle-fill-mask, %as-pseudo;
+}
+```
+
+If you are not using a pseudo element for whatever reason, then you do not need
+to use `%as-pseudo`.
+
+When using `-mask` icons, color will use the `currentColor` of the element. If
+you need the color of the icon to be different to the text you can define the
+color of the icon itself via the `color` CSS property (preferred) but you can
+also use `background-color`.
+
+```css
+.selector::before {
+ @extend %with-alert-circle-fill-mask, %as-pseudo;
+ color: rgb(var(--tone-strawberry-500));
+}
+```
+
+If you need to use a colored icon (usually an existing brand icon) then don't
+use `-mask`, use `-icon` instead:
+
+```css
+.selector::before {
+ @extend %with-logo-consul-color-icon, %as-pseudo;
+}
+```
+
+## Structure Icons + Consul Specific Icons
+
+```hbs preview-template
+
+{{#each (icons-debug 'structure') as |prop|}}
+
+
+ {{prop.name}}
+
+
+{{/each}}
+
+```
+
+## Flight Icons
+
+```hbs preview-template
+
+{{#each (icons-debug 'flight') as |prop|}}
+
+
+ {{prop.name}}
+
+
+{{/each}}
+
+```
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
index e8658c8467..c659f53745 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-placeholders.scss
@@ -3,6 +3,8 @@
background-position: center;
}
%with-mask {
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-position: center;
mask-repeat: no-repeat;
mask-position: center;
background-color: currentColor;
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
index c79b863f45..5149201eca 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
@@ -1,4131 +1,5164 @@
+
%activity-16-svg-prop {
- --activity-16-svg: url('data:image/svg+xml;charset=UTF-8,H2 Level meaning that looks like a h3 visually
+```
+```css
+.top-level-selector h2 {
+ /* make the h2 look like a h3 */
+ @extend %h300;
+}
+```
+
+```hbs preview-template
+
+{{#each (array 'h000' 'h100' 'h200' 'h300' 'h400' 'h500' 'h600') as |prop|}}
+
+
+ Ab
+ %{{prop}}
+
+
+{{/each}}
+
+```
+
+### %p (body copy)
+
+```hbs preview-template
+
+{{#each (array 'p' 'p1' 'p2' 'p3') as |prop|}}
+
+
+ Ab
+ %{{prop}}
+
+
+{{/each}}
+
+```
+
+
+## CSS props
+
+
+### Font sizes
+
+```hbs preview-template
+
+{{#each-in this.sizes as |prop value|}}
+ {{#each-in value as |prop value|}}
+
+
+ Ab
+ {{prop}} ({{value}})
+
+
+ {{/each-in}}
+{{/each-in}}
+
+```
+
+### Font weights
+
+```hbs preview-template
+
+{{#each-in this.weights as |prop value|}}
+ {{#each-in value as |prop value|}}
+
+
+ Ab
+ {{prop}} ({{value}})
+
+
+ {{/each-in}}
+{{/each-in}}
+
+```
+
+### Font families
+
+```hbs preview-template
+
+{{#each-in this.families as |prop value|}}
+ {{#each-in value as |prop value|}}
+
+
+ Ab
+ {{prop}} ({{value}})
+
+
+ {{/each-in}}
+{{/each-in}}
+
+```
diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss
index 00806a4279..878aac643b 100644
--- a/ui/packages/consul-ui/app/styles/debug.scss
+++ b/ui/packages/consul-ui/app/styles/debug.scss
@@ -1,4 +1,5 @@
@import './app';
+@import './base/icons/debug';
@import 'prism-coldark-dark';
// temporary component debugging setup
@@ -10,6 +11,91 @@
@import 'consul-ui/components/inline-alert/debug';
@import 'consul-ui/components/definition-table/debug';
+%debug-grid {
+ display: flex;
+ flex-wrap: wrap;
+}
+%debug-grid li {
+ margin-right: 20px;
+ margin-bottom: 20px;
+}
+%debug-grid figure {
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ width: 140px;
+}
+%debug-grid figcaption {
+ @extend %p3;
+ text-align: center;
+}
+[id^="docfy-demo-preview-color"] ul,
+[id^="docfy-demo-preview-typography"] ul,
+[id^="docfy-demo-preview-icons"] ul {
+ @extend %debug-grid;
+}
+
+[id^="docfy-demo-preview-typography"] figure,
+[id^="docfy-demo-preview-icons"] figure {
+ border: var(--decor-border-100);
+ border-color: rgb(var(--tone-gray-300));
+ height: 80px;
+}
+[id^="docfy-demo-preview-icons"] figure::before {
+ position: relative;
+ top: 20px;
+}
+
+[id^="docfy-demo-preview-color"] figure {
+ height: 40px;
+}
+#docfy-demo-preview-color0 {
+ @extend %theme-light;
+ background-color: rgb(var(--white));
+}
+#docfy-demo-preview-color1 {
+ background-color: rgb(var(--black));
+ @extend %theme-dark;
+}
+
+[id^="docfy-demo-preview-typography"] {
+ .debug-h000 {
+ @extend %h000;
+ }
+ .debug-h100 {
+ @extend %h100;
+ }
+ .debug-h200 {
+ @extend %h200;
+ }
+ .debug-h300 {
+ @extend %h300;
+ }
+ .debug-h400 {
+ @extend %h400;
+ }
+ .debug-h500 {
+ @extend %h500;
+ }
+ .debug-h600 {
+ @extend %h600;
+ }
+ .debug-p {
+ @extend %p;
+ }
+ .debug-p1 {
+ @extend %p1;
+ }
+ .debug-p2 {
+ @extend %p2;
+ }
+ .debug-p3 {
+ @extend %p3;
+ }
+}
+
html.is-debug body > .brand-loader {
display: none !important;
}
@@ -49,6 +135,9 @@ html.with-route-announcer .route-title {
display: none;
}
.docs {
+ & {
+ background-color: rgb(var(--tone-gray-000));
+ }
.tabular-collection,
.list-collection {
height: 300px !important;
@@ -78,7 +167,6 @@ html.with-route-announcer .route-title {
}
main {
& {
- background-color: white;
margin-bottom: 2rem;
}
> ol,
diff --git a/ui/packages/consul-ui/app/styles/variables/skin.scss b/ui/packages/consul-ui/app/styles/variables/skin.scss
index fec5b81ffe..cece201ac0 100644
--- a/ui/packages/consul-ui/app/styles/variables/skin.scss
+++ b/ui/packages/consul-ui/app/styles/variables/skin.scss
@@ -5,27 +5,27 @@
// unused CSS props
:root {
/* base brand colors */
- --brand-050: var(--tone-magenta-050);
- --brand-100: var(--tone-strawberry-100);
- // rgb(var(--brand-200)): #{rgb(var(--tone-magenta-200))};
- // rgb(var(--brand-300)): #{rgb(var(--tone-magenta-300))};
- // rgb(var(--brand-400)): #{rgb(var(--tone-magenta-400))};
- // rgb(var(--brand-500)): #{rgb(var(--tone-magenta-500))};
- /* temporary rose-like color until its replaced by a numbered one */
- --brand-600: 224 56 117;
- // rgb(var(--brand-700)): #{rgb(var(--tone-magenta-700))};
- --brand-800: var(--tone-magenta-800);
- // rgb(var(--brand-900)): #{rgb(var(--tone-magenta-900))};
+ --tone-brand-050: var(--tone-magenta-050);
+ --tone-brand-100: var(--tone-strawberry-100);
+ /* --tone-brand-200: var(--tone-strawberry-200) */
+ /* --tone-brand-300: var(--tone-strawberry-300) */
+ /* --tone-brand-400: var(--tone-strawberry-400) */
+ /* --tone-brand-500: var(--tone-strawberry-500) */
+ /* temporary strawberry-like color until its replaced by a numbered one */
+ --tone-brand-600: 224 56 117;
+ /* --tone-brand-700: var(--tone-strawberry-700) */
+ --tone-brand-800: var(--tone-magenta-800);
+ /* --tone-brand-900: var(--tone-strawberry-900) */
/* themeable ui colors */
- --typo-action-500: var(--tone-blue-500);
- --decor-error-500: var(--tone-red-500);
- --typo-contrast-999: var(--black);
+ --typo-action-500: rgb(var(--tone-blue-500));
+ --decor-error-500: rgb(var(--tone-red-500));
+ --typo-contrast-999: rgb(var(--tone-gray-999));
/* themeable brand colors */
- --typo-brand-050: var(--brand-050);
- --typo-brand-600: var(--brand-600);
- --decor-brand-600: var(--brand-600);
- --swatch-brand-600: var(--brand-600);
- --swatch-brand-800: var(--brand-800);
+ --typo-brand-050: rgb(var(--tone-brand-050));
+ --typo-brand-600: rgb(var(--tone-brand-600));
+ --decor-brand-600: rgb(var(--tone-brand-600));
+ --swatch-brand-600: rgb(var(--tone-brand-600));
+ --swatch-brand-800: rgb(var(--tone-brand-800));
}
diff --git a/ui/packages/consul-ui/app/templates/debug.hbs b/ui/packages/consul-ui/app/templates/debug.hbs
index 89bb4d3ee7..4fb4633694 100644
--- a/ui/packages/consul-ui/app/templates/debug.hbs
+++ b/ui/packages/consul-ui/app/templates/debug.hbs
@@ -6,6 +6,8 @@
+
+{{!hardcode in docs first}}
Docs
{{#each node.children as |child|}}
{{#each child.pages as |child|}}
@@ -17,7 +19,27 @@
{{/each}}
+
+{{!hardcode in styles next}}
+ {{#let (find-by 'label' 'styles' child.children) as |section|}}
+ {{section.label}}
+{{#each (flatten-property section 'pages') as |child|}}
+
+
+ {{classify child.title}}
+
+
+{{/each}}
+ {{/let}}
+
+{{!print out the rest}}
{{#each child.children as |section|}}
+{{#if (not-eq section.label 'styles')}}
{{section.label}}
{{#each (flatten-property section 'pages') as |child|}}
{{/each}}
+{{/if}}
{{/each}}
{{/each}}
+
diff --git a/ui/packages/consul-ui/docs/index.mdx b/ui/packages/consul-ui/docs/index.mdx
index 5a77a6dd58..3c1da2ea8b 100644
--- a/ui/packages/consul-ui/docs/index.mdx
+++ b/ui/packages/consul-ui/docs/index.mdx
@@ -32,8 +32,9 @@ The above will render the same code snippet in a box above the snippet.
The location and name of markdown files within the project differs slightly depending on what you need to add documentation for:
- **docs**: `docs/filename.mdx`
-- **components**: `components/your-component-name/README.mdx`
-- **helpers**: `helpers/your-helper-name.mdx`
-- **modifiers**: `modifiers/your-modifier-name.mdx`
-- **services**: `services/your-service-name.mdx` (eventually these will partly use jsdoc code style generation)
+- **styles**: `app/styles/*/*/README.mdx` (currently mostly in `app/styles/base`)
+- **components**: `app/components/your-component-name/README.mdx`
+- **helpers**: `app/helpers/your-helper-name.mdx`
+- **modifiers**: `app/modifiers/your-modifier-name.mdx`
+- **services**: `app/services/your-service-name.mdx` (eventually these will partly use jsdoc code style generation)
diff --git a/ui/packages/consul-ui/ember-cli-build.js b/ui/packages/consul-ui/ember-cli-build.js
index 4e694d3463..0634511c9f 100644
--- a/ui/packages/consul-ui/ember-cli-build.js
+++ b/ui/packages/consul-ui/ember-cli-build.js
@@ -59,6 +59,8 @@ module.exports = function(defaults, $ = process.env) {
excludeFiles = excludeFiles.concat([
'instance-initializers/debug.js',
'routing/**/*-debug.js',
+ 'helpers/**/*-debug.js',
+ 'modifiers/**/*-debug.js',
'services/**/*-debug.js',
'templates/debug.hbs',
'components/debug/**/*.*'