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

ui: Replaces almost all remaining instances of SASS variables with CSS (#11200) 

From an engineers perspective, whenever specifying colors from now on we should use the form:

```
color: rgb(var(--tone-red-500));
```

Please note:

- Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens.
- Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500.

Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black)

There are a 2 or 3 left for the code editor, plus our custom-query values
This commit is contained in:
John Cowen 2021-10-07 19:21:11 +01:00 committed by GitHub
parent 21915e600e
commit 2200cde988
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
121 changed files with 1883 additions and 1048 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changelog/11200.txt Normal file
View File

@ -0,0 +1,5 @@
```release-note:improvement
ui: Move the majority of our SASS variables to use native CSS custom
properties
```

4
ui/packages/consul-ui/app/components/anchors/index.scss
View File

@ -4,14 +4,14 @@ a[rel*='external']::after {
margin-left: 8px; margin-left: 8px;
} }
%main-content label a[rel*='help'] { %main-content label a[rel*='help'] {
color: $gray-400; color: rgb(var(--tone-gray-400));
} }
%main-content a[rel*='help']::after { %main-content a[rel*='help']::after {
@extend %with-info-circle-outline-icon, %as-pseudo; @extend %with-info-circle-outline-icon, %as-pseudo;
opacity: 0.4; opacity: 0.4;
} }
%main-content h2 a { %main-content h2 a {
color: $gray-900; color: rgb(var(--tone-gray-900));
} }
%main-content h2 a[rel*='help']::after { %main-content h2 a[rel*='help']::after {
font-size: 0.65em; font-size: 0.65em;

4
ui/packages/consul-ui/app/components/anchors/skin.scss
View File

@ -8,7 +8,7 @@
%anchor, %anchor,
%anchor-intent, %anchor-intent,
%anchor-active { %anchor-active {
color: $color-action; color: rgb(var(--color-action));
} }
%anchor-decoration:hover, %anchor-decoration:hover,
%anchor-decoration:focus { %anchor-decoration:focus {
@ -20,7 +20,7 @@
%anchor { %anchor {
@extend %anchor-decoration; @extend %anchor-decoration;
cursor: pointer; cursor: pointer;
background-color: $transparent; background-color: var(--transparent);
} }
%anchor:hover, %anchor:hover,
%anchor:focus { %anchor:focus {

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

@ -30,7 +30,7 @@
width: 26px; width: 26px;
height: 26px; height: 26px;
cursor: pointer; cursor: pointer;
color: $blue-500; color: rgb(var(--tone-blue-500));
} }
#toolbar-toggle { #toolbar-toggle {
display: none; display: none;

12
ui/packages/consul-ui/app/components/app-view/skin.scss
View File

@ -2,21 +2,21 @@
@extend %h100; @extend %h100;
} }
%app-view-title { %app-view-title {
border-bottom: $decor-border-100; border-bottom: var(--decor-border-100);
} }
%app-view-content form:not(.filter-bar) fieldset { %app-view-content form:not(.filter-bar) fieldset {
border-bottom: $decor-border-200; border-bottom: var(--decor-border-200);
} }
%app-view-header h1 > em { %app-view-header h1 > em {
color: var(--gray-600); color: rgb(var(--tone-gray-600));
} }
%app-view-header dd > a { %app-view-header dd > a {
color: var(--gray-999); color: rgb(var(--tone-gray-999));
} }
%app-view-content div > dl > dd { %app-view-content div > dl > dd {
color: var(--gray-400); color: rgb(var(--tone-gray-400));
} }
%app-view-title, %app-view-title,
%app-view-content form:not(.filter-bar) fieldset { %app-view-content form:not(.filter-bar) fieldset {
border-color: var(--gray-200); border-color: rgb(var(--tone-gray-200));
} }

4
ui/packages/consul-ui/app/components/auth-form/skin.scss
View File

@ -2,11 +2,11 @@
text-transform: uppercase; text-transform: uppercase;
} }
%auth-form-hr::before { %auth-form-hr::before {
border-top: 1px solid $gray-200; border-top: 1px solid rgb(var(--tone-gray-200));
} }
/* This is to mask off the hr so it has a space */ /* This is to mask off the hr so it has a space */
/* in the center so if the background color of what the */ /* in the center so if the background color of what the */
/* line is on is different, then this should be different */ /* line is on is different, then this should be different */
%auth-form-hr span { %auth-form-hr span {
background-color: $white; background-color: rgb(var(--white));
} }

2
ui/packages/consul-ui/app/components/auth-modal/layout.scss
View File

@ -6,7 +6,7 @@
padding-right: 42px; padding-right: 42px;
} }
%auth-modal footer { %auth-modal footer {
background-color: $transparent; background-color: var(--transparent);
} }
%auth-modal > div > div > div { %auth-modal > div > div > div {
padding-bottom: 0; padding-bottom: 0;

4
ui/packages/consul-ui/app/components/badge/index.scss
View File

@ -8,8 +8,8 @@
%badge, %badge,
%badge + dd { %badge + dd {
@extend %pill; @extend %pill;
background-color: var(--gray-100); background-color: rgb(var(--tone-gray-100));
color: var(--gray-500); color: rgb(var(--tone-gray-500));
} }
%badge::after, %badge::after,
%badge-reversed::after, %badge-reversed::after,

8
ui/packages/consul-ui/app/components/breadcrumbs/skin.scss
View File

@ -1,9 +1,9 @@
%crumbs { %crumbs {
color: $gray-500; color: rgb(var(--tone-gray-500));
text-decoration: none; text-decoration: none;
} }
%crumbs:hover { %crumbs:hover {
color: $blue-500; color: rgb(var(--tone-blue-500));
text-decoration: underline; text-decoration: underline;
} }
%crumbs::before { %crumbs::before {
@ -11,9 +11,9 @@
} }
%breadcrumb-milestone::before { %breadcrumb-milestone::before {
@extend %with-chevron-left-mask, %as-pseudo; @extend %with-chevron-left-mask, %as-pseudo;
background-color: $gray-500; background-color: rgb(var(--tone-gray-500));
} }
%breadcrumb::before { %breadcrumb::before {
content: '/'; content: '/';
color: $gray-500; color: rgb(var(--tone-gray-500));
} }

20
ui/packages/consul-ui/app/components/buttons/skin.scss
View File

@ -16,8 +16,8 @@
%dangerous-button { %dangerous-button {
@extend %button; @extend %button;
border-width: 1px; border-width: 1px;
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
box-shadow: $decor-elevation-300; box-shadow: var(--decor-elevation-300);
} }
/* color */ /* color */
%primary-button { %primary-button {
@ -42,14 +42,14 @@
@extend %frame-gray-400; @extend %frame-gray-400;
} }
%secondary-button:disabled { %secondary-button:disabled {
color: $gray-600; color: rgb(var(--tone-gray-600));
} }
%secondary-button:active { %secondary-button:active {
/* %frame-gray-something */ /* %frame-gray-something */
@extend %frame-gray-700; @extend %frame-gray-700;
background-color: $gray-200; background-color: rgb(var(--tone-gray-200));
color: $gray-800; color: rgb(var(--tone-gray-800));
border-color: $gray-700; border-color: rgb(var(--tone-gray-700));
} }
/**/ /**/
%dangerous-button { %dangerous-button {
@ -67,8 +67,8 @@
} }
%internal-button { %internal-button {
color: var(--gray-900); color: rgb(var(--tone-gray-900));
background-color: var(--gray-000); background-color: rgb(var(--tone-gray-000));
} }
%internal-button-dangerous { %internal-button-dangerous {
@extend %frame-red-300; @extend %frame-red-300;
@ -77,7 +77,7 @@
@extend %frame-red-700; @extend %frame-red-700;
} }
%internal-button-intent { %internal-button-intent {
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
} }
%internal-button:focus, %internal-button:focus,
%internal-button:hover { %internal-button:hover {
@ -95,7 +95,7 @@
top: 0; top: 0;
height: 100%; height: 100%;
margin-left: 8px; margin-left: 8px;
background-color: $gray-300; background-color: rgb(var(--tone-gray-300));
} }
%sort-button::before { %sort-button::before {
@extend %with-sort-mask, %as-pseudo; @extend %with-sort-mask, %as-pseudo;

12
ui/packages/consul-ui/app/components/card/skin.scss
View File

@ -3,23 +3,23 @@
@extend %card-intent; @extend %card-intent;
} }
%card { %card {
border: $decor-border-100; border: var(--decor-border-100);
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
background-color: rgba($white, 0.9); background-color: rgb(var(--white) / 90%);
} }
%card > section, %card > section,
%card > ul > li { %card > ul > li {
border-top: $decor-border-100; border-top: var(--decor-border-100);
} }
%card, %card,
%card > section, %card > section,
%card > ul > li { %card > ul > li {
border-color: $gray-200; border-color: rgb(var(--tone-gray-200));
} }
%card ul { %card ul {
/*TODO: %list-style-none?*/ /*TODO: %list-style-none?*/
list-style-type: none; list-style-type: none;
} }
%card-intent { %card-intent {
box-shadow: $decor-elevation-400; box-shadow: var(--decor-elevation-400);
} }

6
ui/packages/consul-ui/app/components/certificate/index.scss
View File

@ -13,14 +13,14 @@
@extend %with-visibility-show-icon, %as-pseudo; @extend %with-visibility-show-icon, %as-pseudo;
} }
code { code {
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
overflow-wrap: break-word; overflow-wrap: break-word;
max-width: min-content; max-width: min-content;
padding: 0 12px; padding: 0 12px;
} }
hr { hr {
border: 3px dashed var(--gray-300); border: 3px dashed rgb(var(--tone-gray-300));
background-color: $white; background-color: rgb(var(--white));
width: 150px; width: 150px;
margin: auto; margin: auto;
margin-top: 9px; margin-top: 9px;

6
ui/packages/consul-ui/app/components/code-editor/layout.scss
View File

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

82
ui/packages/consul-ui/app/components/code-editor/skin.scss
View File

@ -1,24 +1,28 @@
$syntax-light-grey: #dde3e7;
$syntax-light-gray: #a4a4a4;
$syntax-light-grey-blue: #6c7b81;
$syntax-dark-grey: #788290;
$syntax-faded-gray: #eaeaea;
// Product colors
$syntax-atlas: #127eff;
$syntax-vagrant: #2f88f7;
$syntax-consul: #69499a; $syntax-consul: #69499a;
$syntax-terraform: #822ff7; $syntax-dark-gray: #535f73;
$syntax-serf: #dd4e58; :root {
$syntax-packer: #1ddba3; --syntax-light-grey: #dde3e7;
--syntax-light-gray: #a4a4a4;
--syntax-light-grey-blue: #6c7b81;
--syntax-dark-grey: #788290;
--syntax-faded-gray: #eaeaea;
// Product colors
--syntax-atlas: #127eff;
--syntax-vagrant: #2f88f7;
--syntax-consul: #{$syntax-consul};
--syntax-terraform: #822ff7;
--syntax-serf: #dd4e58;
--syntax-packer: #1ddba3;
// Our colors // Our colors
$syntax-gray: lighten($black, 89%); --syntax-gray: lighten(#000, 89%);
$syntax-red: #ff3d3d; --syntax-red: #ff3d3d;
$syntax-green: #39b54a; --syntax-green: #39b54a;
$syntax-dark-gray: #535f73; --syntax-dark-gray: #{$syntax-dark-gray};
$syntax-gutter-grey: #2a2f36; --syntax-gutter-grey: #2a2f36;
$syntax-yellow: $yellow-500; --syntax-yellow: rgb(var(--tone-yellow-500));
}
.CodeMirror { .CodeMirror {
max-width: 1150px; max-width: 1150px;
min-height: 300px; min-height: 300px;
@ -31,10 +35,10 @@ $syntax-yellow: $yellow-500;
} }
.CodeMirror-lint-tooltip { .CodeMirror-lint-tooltip {
background-color: #f9f9fa; background-color: #f9f9fa;
border: 1px solid $syntax-light-gray; border: 1px solid var(--syntax-light-gray);
border-radius: 0; border-radius: 0;
color: lighten($black, 13%); color: lighten(#000, 13%);
font-family: $typo-family-mono; font-family: var(--typo-family-mono);
font-size: 13px; font-size: 13px;
padding: 7px 8px 9px; padding: 7px 8px 9px;
} }
@ -42,17 +46,17 @@ $syntax-yellow: $yellow-500;
.cm-s-hashi { .cm-s-hashi {
&.CodeMirror { &.CodeMirror {
width: 100%; width: 100%;
background-color: $black !important; background-color: rgb(var(--black)) !important;
color: #cfd2d1 !important; color: #cfd2d1 !important;
border: none; border: none;
font-family: $typo-family-mono; font-family: var(--typo-family-mono);
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
line-height: 1.4; line-height: 1.4;
} }
.CodeMirror-gutters { .CodeMirror-gutters {
color: $syntax-dark-grey; color: var(--syntax-dark-grey);
background-color: $syntax-gutter-grey; background-color: var(--syntax-gutter-grey);
border: none; border: none;
} }
@ -77,20 +81,20 @@ $syntax-yellow: $yellow-500;
.CodeMirror-line::-moz-selection, .CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection, .CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection { .CodeMirror-line > span > span::-moz-selection {
background: rgba(255, 255, 255, 0.1); background: rgb(var(--white) / 10%);
} }
span.cm-comment { span.cm-comment {
color: $syntax-light-grey; color: var(--syntax-light-grey);
} }
span.cm-string, span.cm-string,
span.cm-string-2 { span.cm-string-2 {
color: $syntax-packer; color: var(--syntax-packer);
} }
span.cm-number { span.cm-number {
color: $syntax-serf; color: var(--syntax-serf);
} }
span.cm-variable { span.cm-variable {
@ -102,26 +106,26 @@ $syntax-yellow: $yellow-500;
} }
span.cm-def { span.cm-def {
color: $syntax-packer; color: var(--syntax-packer);
} }
span.cm-operator { span.cm-operator {
color: $syntax-gray; color: var(--syntax-gray);
} }
span.cm-keyword { span.cm-keyword {
color: $syntax-yellow; color: var(--syntax-yellow);
} }
span.cm-atom { span.cm-atom {
color: $syntax-serf; color: var(--syntax-serf);
} }
span.cm-meta { span.cm-meta {
color: $syntax-packer; color: var(--syntax-packer);
} }
span.cm-tag { span.cm-tag {
color: $syntax-packer; color: var(--syntax-packer);
} }
span.cm-attribute { span.cm-attribute {
@ -150,7 +154,7 @@ $syntax-yellow: $yellow-500;
.CodeMirror-matchingbracket { .CodeMirror-matchingbracket {
text-decoration: underline; text-decoration: underline;
color: $white !important; color: rgb(var(--white)) !important;
} }
} }
@ -161,12 +165,12 @@ $syntax-yellow: $yellow-500;
.cm-s-hashi { .cm-s-hashi {
span { span {
color: $syntax-light-grey; color: var(--syntax-light-grey);
} }
span.cm-string, span.cm-string,
span.cm-string-2 { span.cm-string-2 {
color: $syntax-faded-gray; color: var(--syntax-faded-gray);
} }
span.cm-number { span.cm-number {
@ -174,11 +178,11 @@ $syntax-yellow: $yellow-500;
} }
span.cm-property { span.cm-property {
color: $white; color: rgb(var(--white));
} }
span.cm-variable-2 { span.cm-variable-2 {
color: $syntax-light-grey-blue; color: var(--syntax-light-grey-blue);
} }
} }
} }

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

@ -16,7 +16,7 @@
} }
button { button {
@extend %button; @extend %button;
color: $color-action; color: rgb(var(--color-action));
float: right; float: right;
grid-area: toggle-button; grid-area: toggle-button;
margin-top: 1em; margin-top: 1em;

4
ui/packages/consul-ui/app/components/composite-row/index.scss
View File

@ -61,7 +61,7 @@
overflow-x: visible !important; overflow-x: visible !important;
} }
.consul-intention-permission-list > ul { .consul-intention-permission-list > ul {
border-top: 1px solid $gray-200; border-top: 1px solid rgb(var(--tone-gray-200));
} }
.consul-service-instance-list .port dt, .consul-service-instance-list .port dt,
.consul-service-instance-list .port dt::before { .consul-service-instance-list .port dt::before {
@ -113,5 +113,5 @@
%composite-row-header .policy-management dd::before, %composite-row-header .policy-management dd::before,
%composite-row-detail .policy-management::before { %composite-row-detail .policy-management::before {
@extend %with-star-fill-mask, %as-pseudo; @extend %with-star-fill-mask, %as-pseudo;
background-color: var(--brand-600); background-color: rgb(var(--brand-600));
} }

4
ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss
View File

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

22
ui/packages/consul-ui/app/components/consul/auth-method/index.scss
View File

@ -20,14 +20,14 @@
} }
table { table {
thead td { thead td {
color: var(--gray-500); color: rgb(var(--tone-gray-500));
font-weight: $typo-weight-semibold; font-weight: var(--typo-weight-semibold);
font-size: $typo-size-700; font-size: var(--typo-size-700);
} }
tbody { tbody {
td { td {
font-size: $typo-size-600; font-size: var(--typo-size-600);
color: $black; color: var(--black);
} }
tr { tr {
cursor: default; cursor: default;
@ -57,7 +57,7 @@
@extend %tabular-dl; @extend %tabular-dl;
} }
code { code {
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
padding: 0 12px; padding: 0 12px;
} }
} }
@ -66,15 +66,15 @@
.consul-auth-method-nspace-list { .consul-auth-method-nspace-list {
thead { thead {
td { td {
color: var(--gray-500) !important; color: rgb(var(--tone-gray-500)) !important;
font-weight: $typo-weight-semibold !important; font-weight: var(--typo-weight-semibold) !important;
font-size: $typo-size-700 !important; font-size: var(--typo-size-700) !important;
} }
} }
tbody { tbody {
td { td {
font-size: $typo-size-600; font-size: var(--typo-size-600);
color: $black; color: var(--black);
} }
tr { tr {
cursor: default; cursor: default;

2
ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs
View File

@ -6,7 +6,7 @@
background-color: var(--white); background-color: var(--white);
border: var(--decor-border-100); border: var(--decor-border-100);
border-radius: var(--decor-radius-200); border-radius: var(--decor-radius-200);
border-color: var(--gray-500); border-color: rgb(var(--tone-gray-500));
box-shadow: var(--decor-elevation-600); box-shadow: var(--decor-elevation-600);
} }
{{/if}} {{/if}}

26
ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
View File

@ -19,7 +19,7 @@
transition-property: stroke; transition-property: stroke;
fill: none; fill: none;
stroke: $gray-400; stroke: rgb(var(--tone-gray-400));
stroke-width: 2; stroke-width: 2;
vector-effect: non-scaling-stroke; vector-effect: non-scaling-stroke;
} }
@ -30,15 +30,15 @@
} }
%chain-node, %chain-node,
%chain-node a { %chain-node a {
color: $gray-900 !important; color: rgb(var(--tone-gray-900)) !important;
} }
%discovery-chain-edge-active { %discovery-chain-edge-active {
stroke: $gray-900; stroke: rgb(var(--tone-gray-900));
} }
%chain-group { %chain-group {
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
border: 1px solid $gray-200; border: 1px solid rgb(var(--tone-gray-200));
background-color: $gray-100; background-color: rgb(var(--tone-gray-100));
pointer-events: none; pointer-events: none;
} }
@ -63,8 +63,8 @@
} }
%chain-node-active { %chain-node-active {
opacity: 1; opacity: 1;
background-color: $white; background-color: rgb(var(--white));
border-color: $gray-500; border-color: rgb(var(--tone-gray-500));
} }
/* TODO: More text truncation, centralize */ /* TODO: More text truncation, centralize */
%route-card header:not(.short) dd { %route-card header:not(.short) dd {
@ -99,13 +99,13 @@
/**/ /**/
%with-chain-outlet::before { %with-chain-outlet::before {
@extend %as-pseudo; @extend %as-pseudo;
background-color: $white; background-color: rgb(var(--white));
border-radius: $decor-radius-full; border-radius: var(--decor-radius-full);
border: 2px solid $gray-400; border: 2px solid rgb(var(--tone-gray-400));
} }
%discovery-chain circle { %discovery-chain circle {
stroke-width: 2; stroke-width: 2;
stroke: $gray-400; stroke: rgb(var(--tone-gray-400));
fill: $white; fill: rgb(var(--white));
} }

2
ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss
View File

@ -1,6 +1,6 @@
.consul-exposed-path-list { .consul-exposed-path-list {
> ul { > ul {
border-top: 1px solid $gray-200; border-top: 1px solid rgb(var(--tone-gray-200));
} }
> ul > li { > ul > li {
@extend %composite-row; @extend %composite-row;

26
ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
View File

@ -19,7 +19,7 @@
} }
%healthcheck-output dd em { %healthcheck-output dd em {
@extend %pill; @extend %pill;
background-color: $gray-100; background-color: rgb(var(--tone-gray-100));
/*TODO: Should this be merged into %pill? */ /*TODO: Should this be merged into %pill? */
cursor: default; cursor: default;
font-style: normal; font-style: normal;
@ -28,41 +28,41 @@
} }
%healthcheck-output.passing::before { %healthcheck-output.passing::before {
@extend %with-check-circle-fill-mask; @extend %with-check-circle-fill-mask;
color: $green-500; color: rgb(var(--tone-green-500));
} }
%healthcheck-output.warning::before { %healthcheck-output.warning::before {
@extend %with-alert-triangle-mask; @extend %with-alert-triangle-mask;
color: $orange-500; color: rgb(var(--tone-orange-500));
} }
%healthcheck-output.critical::before { %healthcheck-output.critical::before {
@extend %with-cancel-square-fill-mask; @extend %with-cancel-square-fill-mask;
color: $red-500; color: rgb(var(--tone-red-500));
} }
%healthcheck-output, %healthcheck-output,
%healthcheck-output pre { %healthcheck-output pre {
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
} }
%healthcheck-output dd:first-of-type { %healthcheck-output dd:first-of-type {
color: $gray-400; color: rgb(var(--tone-gray-400));
} }
%healthcheck-output pre { %healthcheck-output pre {
background-color: $gray-050; background-color: rgb(var(--tone-gray-050));
color: $gray-600; color: rgb(var(--tone-gray-600));
} }
%healthcheck-output { %healthcheck-output {
/* TODO: this should be a frame-gray */ /* TODO: this should be a frame-gray */
color: $gray-900; color: rgb(var(--tone-gray-900));
border-color: $gray-200; border-color: rgb(var(--tone-gray-200));
border-style: solid; border-style: solid;
border-left-width: 4px; border-left-width: 4px;
} }
%healthcheck-output.passing { %healthcheck-output.passing {
border-left-color: $green-500; border-left-color: rgb(var(--tone-green-500));
} }
%healthcheck-output.warning { %healthcheck-output.warning {
border-left-color: $yellow-500; border-left-color: rgb(var(--tone-yellow-500));
} }
%healthcheck-output.critical { %healthcheck-output.critical {
border-left-color: $red-500; border-left-color: rgb(var(--tone-red-500));
} }

12
ui/packages/consul-ui/app/components/consul/intention/components.scss
View File

@ -9,16 +9,16 @@
%pill-deny, %pill-deny,
%pill-l7 { %pill-l7 {
display: inline-block; display: inline-block;
font-weight: $typo-weight-normal; font-weight: var(--typo-weight-normal);
font-size: $typo-size-600; font-size: var(--typo-size-600);
} }
%pill-allow { %pill-allow {
color: $green-800; color: rgb(var(--tone-green-800));
background-color: $green-100; background-color: rgb(var(--tone-green-100));
} }
%pill-deny { %pill-deny {
color: $red-800; color: rgb(var(--tone-red-800));
background-color: $red-100; background-color: rgb(var(--tone-red-100));
} }
%pill-l7 { %pill-l7 {
@extend %frame-gray-900; @extend %frame-gray-900;

2
ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss
View File

@ -1,7 +1,7 @@
.consul-intention-fieldsets { .consul-intention-fieldsets {
.value-allow > :last-child::before { .value-allow > :last-child::before {
@extend %with-arrow-right-mask, %as-pseudo; @extend %with-arrow-right-mask, %as-pseudo;
color: $green-500; color: rgb(var(--tone-green-500));
} }
.value-deny > :last-child::before { .value-deny > :last-child::before {
@extend %with-deny-color-icon, %as-pseudo; @extend %with-deny-color-icon, %as-pseudo;

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

@ -3,7 +3,7 @@
max-width: 450px; max-width: 450px;
} }
.modal-dialog-body p { .modal-dialog-body p {
font-size: $typo-size-600; font-size: var(--typo-size-600);
} }
button.dangerous { button.dangerous {
@extend %dangerous-button; @extend %dangerous-button;

2
ui/packages/consul-ui/app/components/consul/intention/list/skin.scss
View File

@ -1,5 +1,5 @@
%consul-intention-list td.permissions { %consul-intention-list td.permissions {
color: $blue-500; color: rgb(var(--tone-blue-500));
} }
%consul-intention-list em { %consul-intention-list em {
--word-spacing: 0.25rem; --word-spacing: 0.25rem;

2
ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss
View File

@ -1,6 +1,6 @@
.consul-intention-permission-form { .consul-intention-permission-form {
h2 { h2 {
border-top: 1px solid $blue-500; border-top: 1px solid rgb(var(--tone-blue-500));
@extend %h200; @extend %h200;
} }
button.type-submit { button.type-submit {

2
ui/packages/consul-ui/app/components/consul/loader/skin.scss
View File

@ -1,5 +1,5 @@
%loader circle { %loader circle {
fill: var(--brand-100); fill: rgb(var(--brand-100));
} }
%loader circle { %loader circle {
animation: loader-animation 1.5s infinite ease-in-out; animation: loader-animation 1.5s infinite ease-in-out;

4
ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss
View File

@ -1,8 +1,8 @@
.consul-lock-session-form { .consul-lock-session-form {
h2 { h2 {
@extend %h200; @extend %h200;
border-bottom: $decor-border-200; border-bottom: var(--decor-border-200);
border-color: $gray-200; border-color: rgb(var(--tone-gray-200));
padding-bottom: 0.2em; padding-bottom: 0.2em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }

20
ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss
View File

@ -1,36 +1,36 @@
.tomography-graph { .tomography-graph {
.background { .background {
fill: $gray-050; fill: rgb(var(--tone-gray-050));
} }
.axis { .axis {
fill: none; fill: none;
stroke: $gray-300; stroke: rgb(var(--tone-gray-300));
stroke-dasharray: 4 4; stroke-dasharray: 4 4;
} }
.border { .border {
fill: none; fill: none;
stroke: $gray-300; stroke: rgb(var(--tone-gray-300));
} }
.point { .point {
stroke: $gray-400; stroke: rgb(var(--tone-gray-400));
fill: $magenta-600; fill: rgb(var(--tone-magenta-600));
} }
.lines rect { .lines rect {
fill: $magenta-600; fill: rgb(var(--tone-magenta-600));
stroke: transparent; stroke: transparent;
stroke-width: 5px; stroke-width: 5px;
} }
.lines rect:hover { .lines rect:hover {
fill: $gray-300; fill: rgb(var(--tone-gray-300));
height: 3px; height: 3px;
y: -1px; y: -1px;
} }
.tick line { .tick line {
stroke: $gray-300; stroke: rgb(var(--tone-gray-300));
} }
.tick text { .tick text {
font-size: $typo-size-600; font-size: var(--typo-size-600);
text-anchor: start; text-anchor: start;
color: $gray-900; color: rgb(var(--tone-gray-900));
} }
} }

2
ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss
View File

@ -12,6 +12,6 @@
@extend %with-folder-outline-mask, %as-pseudo; @extend %with-folder-outline-mask, %as-pseudo;
} }
dl.local-bind-mode dt { dl.local-bind-mode dt {
font-weight: $typo-weight-semibold; font-weight: var(--typo-weight-semibold);
} }
} }

14
ui/packages/consul-ui/app/components/copy-button/skin.scss
View File

@ -1,22 +1,22 @@
%copy-button { %copy-button {
color: var(--blue-500); color: rgb(var(--tone-blue-500));
background-color: var(--transparent); background-color: var(--transparent);
} }
%copy-button::before { %copy-button::before {
@extend %with-copy-action-mask, %as-pseudo; @extend %with-copy-action-mask, %as-pseudo;
background-color: var(--gray-500); background-color: rgb(var(--tone-gray-500));
} }
%copy-button::after { %copy-button::after {
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
} }
%copy-button:hover:not(:disabled):not(:active), %copy-button:hover:not(:disabled):not(:active),
%copy-button:focus { %copy-button:focus {
color: var(--blue-500); color: rgb(var(--tone-blue-500));
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
} }
%copy-button:hover::before { %copy-button:hover::before {
background-color: var(--blue-500); background-color: rgb(var(--tone-blue-500));
} }
%copy-button:active { %copy-button:active {
background-color: var(--gray-200); background-color: rgb(var(--tone-gray-200));
} }

4
ui/packages/consul-ui/app/components/empty-state/skin.scss
View File

@ -1,6 +1,6 @@
%empty-state { %empty-state {
color: $gray-500; color: rgb(var(--tone-gray-500));
background-color: $gray-010; background-color: rgb(var(--tone-gray-010));
} }
%empty-state-header { %empty-state-header {
border-bottom: none; border-bottom: none;

10
ui/packages/consul-ui/app/components/expanded-single-select/skin.scss
View File

@ -1,7 +1,7 @@
%expanded-single-select { %expanded-single-select {
border: $decor-border-100; border: var(--decor-border-100);
border-color: $gray-300; border-color: rgb(var(--tone-gray-300));
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
} }
%expanded-single-select label { %expanded-single-select label {
cursor: pointer; cursor: pointer;
@ -9,10 +9,10 @@
%expanded-single-select input[type='radio']:checked + *, %expanded-single-select input[type='radio']:checked + *,
%expanded-single-select input[type='radio']:hover + *, %expanded-single-select input[type='radio']:hover + *,
%expanded-single-select input[type='radio']:focus + * { %expanded-single-select input[type='radio']:focus + * {
box-shadow: $decor-elevation-300; box-shadow: var(--decor-elevation-300);
} }
%expanded-single-select input[type='radio']:checked + *, %expanded-single-select input[type='radio']:checked + *,
%expanded-single-select input[type='radio']:hover + *, %expanded-single-select input[type='radio']:hover + *,
%expanded-single-select input[type='radio']:focus + * { %expanded-single-select input[type='radio']:focus + * {
background-color: $white; background-color: rgb(var(--white));
} }

10
ui/packages/consul-ui/app/components/filter-bar/skin.scss
View File

@ -1,14 +1,14 @@
.filter-bar { .filter-bar {
& { & {
background-color: $gray-010; background-color: rgb(var(--tone-gray-010));
border-bottom: $decor-border-100; border-bottom: var(--decor-border-100);
border-color: $gray-200; border-color: rgb(var(--tone-gray-200));
} }
.filters, .filters,
.sort { .sort {
.popover-menu > [type='checkbox']:checked + label button { .popover-menu > [type='checkbox']:checked + label button {
color: $blue-500; color: rgb(var(--tone-blue-500));
background-color: $gray-100; background-color: rgb(var(--tone-gray-100));
} }
} }
} }

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

@ -12,7 +12,7 @@
/* flash message usage we should be able to remove this */ /* flash message usage we should be able to remove this */
%flash-message p.exists strong::before { %flash-message p.exists strong::before {
@extend %with-cancel-square-fill-mask; @extend %with-cancel-square-fill-mask;
color: $red-500; color: rgb(var(--tone-red-500));
} }
%flash-message p.exists { %flash-message p.exists {
@extend %frame-red-500; @extend %frame-red-500;

8
ui/packages/consul-ui/app/components/flash-message/skin.scss
View File

@ -1,21 +1,21 @@
%flash-message p { %flash-message p {
border-width: 1px; border-width: 1px;
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
} }
%flash-message p strong::before { %flash-message p strong::before {
@extend %as-pseudo; @extend %as-pseudo;
} }
%flash-message p.success strong::before { %flash-message p.success strong::before {
@extend %with-check-circle-fill-mask; @extend %with-check-circle-fill-mask;
color: $green-500; color: rgb(var(--tone-green-500));
} }
%flash-message p.warning strong::before { %flash-message p.warning strong::before {
@extend %with-alert-triangle-mask; @extend %with-alert-triangle-mask;
color: $orange-500; color: rgb(var(--tone-orange-500));
} }
%flash-message p.error strong::before { %flash-message p.error strong::before {
@extend %with-cancel-square-fill-mask; @extend %with-cancel-square-fill-mask;
color: $red-500; color: rgb(var(--tone-red-500));
} }
%flash-message p.success { %flash-message p.success {
@extend %frame-green-500; @extend %frame-green-500;

18
ui/packages/consul-ui/app/components/form-elements/skin.scss
View File

@ -1,9 +1,9 @@
%form-element-text-input { %form-element-text-input {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
box-shadow: inset $decor-elevation-100; box-shadow: inset var(--decor-elevation-100);
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
border: $decor-border-100; border: var(--decor-border-100);
outline: none; outline: none;
} }
textarea:disabled + .CodeMirror, textarea:disabled + .CodeMirror,
@ -14,21 +14,21 @@ textarea:disabled + .CodeMirror,
%form fieldset > p, %form fieldset > p,
%form-element-note, %form-element-note,
%form-element-text-input::placeholder { %form-element-text-input::placeholder {
color: $gray-400; color: rgb(var(--tone-gray-400));
} }
%form-element-error > input, %form-element-error > input,
%form-element-error > textarea { %form-element-error > textarea {
border-color: var(--decor-error-500, $red-500) !important; border-color: var(--decor-error-500, rgb(var(--tone-red-500))) !important;
} }
%form-element-text-input { %form-element-text-input {
color: $gray-500; color: rgb(var(--tone-gray-500));
border-color: $gray-300; border-color: rgb(var(--tone-gray-300));
} }
%form-element-text-input-hover { %form-element-text-input-hover {
border-color: $gray-500; border-color: rgb(var(--tone-gray-500));
} }
%form-element-text-input-focus { %form-element-text-input-focus {
border-color: var(--typo-action-500, $blue-500); border-color: var(--typo-action-500, rgb(var(--tone-blue-500)));
} }
%form-element-label { %form-element-label {
color: var(--typo-contrast-999, inherit); color: var(--typo-contrast-999, inherit);

18
ui/packages/consul-ui/app/components/freetext-filter/skin.scss
View File

@ -1,15 +1,15 @@
.freetext-filter { .freetext-filter {
& { & {
border: $decor-border-100; border: var(--decor-border-100);
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
background-color: $white; background-color: rgb(var(--white));
border-color: $gray-200; border-color: rgb(var(--tone-gray-200));
color: $gray-400; color: rgb(var(--tone-gray-400));
} }
&:hover, &:hover,
&:hover * { &:hover * {
border-color: $gray-400; border-color: rgb(var(--tone-gray-400));
} }
& *, & *,
&_input::placeholder { &_input::placeholder {
@ -36,14 +36,14 @@
@extend %with-search-mask; @extend %with-search-mask;
} }
.popover-menu { .popover-menu {
background-color: $gray-050; background-color: rgb(var(--tone-gray-050));
color: $gray-800; color: rgb(var(--tone-gray-800));
} }
.popover-menu { .popover-menu {
border-left: 1px solid; border-left: 1px solid;
border-color: inherit; border-color: inherit;
} }
.popover-menu > [type='checkbox']:checked + label button { .popover-menu > [type='checkbox']:checked + label button {
background-color: $gray-200; background-color: rgb(var(--tone-gray-200));
} }
} }

4
ui/packages/consul-ui/app/components/hashicorp-consul/index.scss
View File

@ -7,7 +7,7 @@
display: none; display: none;
} }
[role='banner'] a svg { [role='banner'] a svg {
fill: var(--brand-600); fill: rgb(var(--brand-600));
} }
.docs-link a::after { .docs-link a::after {
@extend %with-docs-mask, %as-pseudo; @extend %with-docs-mask, %as-pseudo;
@ -20,7 +20,7 @@
} }
.acls-separator span { .acls-separator span {
@extend %led-icon; @extend %led-icon;
color: $red-500; color: rgb(var(--tone-red-500));
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 2px; top: 2px;

4
ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx
View File

@ -202,11 +202,11 @@ dl {
} }
.lock-delay::before { .lock-delay::before {
@extend %with-delay-mask, %as-pseudo; @extend %with-delay-mask, %as-pseudo;
color: var(--gray-700); color: rgb(var(--tone-gray-700));
} }
.ttl::before { .ttl::before {
@extend %with-history-mask, %as-pseudo; @extend %with-history-mask, %as-pseudo;
color: var(--blue-500); color: rgb(var(--tone-blue-500));
} }
.service-identity { .service-identity {
@extend %badge; @extend %badge;

4
ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss
View File

@ -4,11 +4,11 @@
} }
.lock-delay::before { .lock-delay::before {
@extend %with-delay-mask, %as-pseudo; @extend %with-delay-mask, %as-pseudo;
color: var(--gray-700); color: rgb(var(--tone-gray-700));
} }
.ttl::before { .ttl::before {
@extend %with-history-mask, %as-pseudo; @extend %with-history-mask, %as-pseudo;
color: var(--blue-500); color: rgb(var(--tone-blue-500));
} }
.service-identity { .service-identity {
@extend %badge; @extend %badge;

10
ui/packages/consul-ui/app/components/icon-definition/index.scss
View File

@ -8,27 +8,27 @@
%icon-definition.passing dt::before, %icon-definition.passing dt::before,
%composite-row-header .passing dd::before { %composite-row-header .passing dd::before {
@extend %with-check-circle-fill-mask, %as-pseudo; @extend %with-check-circle-fill-mask, %as-pseudo;
color: $green-500; color: rgb(var(--tone-green-500));
} }
%icon-definition.warning dt::before, %icon-definition.warning dt::before,
%composite-row-header .warning dd::before { %composite-row-header .warning dd::before {
@extend %with-alert-triangle-mask, %as-pseudo; @extend %with-alert-triangle-mask, %as-pseudo;
color: $orange-500; color: rgb(var(--tone-orange-500));
} }
%icon-definition.critical dt::before, %icon-definition.critical dt::before,
%composite-row-header .critical dd::before { %composite-row-header .critical dd::before {
@extend %with-cancel-square-fill-mask, %as-pseudo; @extend %with-cancel-square-fill-mask, %as-pseudo;
color: $red-500; color: rgb(var(--tone-red-500));
} }
%icon-definition.empty dt::before, %icon-definition.empty dt::before,
%composite-row-header .empty dd::before { %composite-row-header .empty dd::before {
@extend %with-minus-square-fill-mask, %as-pseudo; @extend %with-minus-square-fill-mask, %as-pseudo;
color: $gray-500; color: rgb(var(--tone-gray-500));
} }
%composite-row-header [rel='me'] dd::before { %composite-row-header [rel='me'] dd::before {
@extend %with-check-circle-fill-mask, %as-pseudo; @extend %with-check-circle-fill-mask, %as-pseudo;
color: $blue-500; color: rgb(var(--tone-blue-500));
} }
%icon-definition.node dt::before { %icon-definition.node dt::before {

36
ui/packages/consul-ui/app/components/informed-action/skin.scss
View File

@ -1,13 +1,13 @@
%informed-action { %informed-action {
& { & {
border-radius: $decor-radius-200; border-radius: var(--decor-radius-200);
border: $decor-border-100; border: var(--decor-border-100);
border-color: $gray-300; border-color: rgb(var(--tone-gray-300));
background-color: $white; background-color: rgb(var(--white));
} }
> div { > div {
border-top-left-radius: $decor-radius-200; border-top-left-radius: var(--decor-radius-200);
border-top-right-radius: $decor-radius-200; border-top-right-radius: var(--decor-radius-200);
cursor: default; cursor: default;
} }
header { header {
@ -18,52 +18,52 @@
} }
p { p {
@extend %p2; @extend %p2;
color: $black; color: var(--black);
} }
> ul { > ul {
list-style: none; list-style: none;
} }
> ul > li > *:hover, > ul > li > *:hover,
> ul > li > *:focus { > ul > li > *:focus {
background-color: $gray-100; background-color: rgb(var(--tone-gray-100));
} }
/* variants */ /* variants */
&.info { &.info {
header { header {
color: $blue-700; color: rgb(var(--tone-blue-700));
} }
header::before { header::before {
@extend %with-info-circle-fill-mask, %as-pseudo; @extend %with-info-circle-fill-mask, %as-pseudo;
background-color: $blue-500; background-color: rgb(var(--tone-blue-500));
margin-right: 5px; margin-right: 5px;
} }
> div { > div {
background-color: $blue-010; background-color: rgb(var(--tone-blue-010));
} }
} }
&.dangerous { &.dangerous {
header { header {
color: $red-700; color: rgb(var(--tone-red-700));
} }
header::before { header::before {
@extend %with-alert-triangle-mask, %as-pseudo; @extend %with-alert-triangle-mask, %as-pseudo;
background-color: $red-500; background-color: rgb(var(--tone-red-500));
} }
> div { > div {
background-color: $red-010; background-color: rgb(var(--tone-red-010));
} }
} }
&.warning { &.warning {
header { header {
color: $orange-700; color: rgb(var(--tone-orange-700));
} }
header::before { header::before {
@extend %with-alert-triangle-mask, %as-pseudo; @extend %with-alert-triangle-mask, %as-pseudo;
background-color: $yellow-500; background-color: rgb(var(--tone-yellow-500));
margin-right: 5px; margin-right: 5px;
} }
> div { > div {
background-color: $yellow-050; background-color: rgb(var(--tone-yellow-050));
} }
} }
/* brands */ /* brands */
@ -74,7 +74,7 @@
} }
/**/ /**/
> ul > .action > * { > ul > .action > * {
color: $blue-500; color: rgb(var(--tone-blue-500));
} }
> ul > .dangerous > * { > ul > .dangerous > * {
@extend %frame-red-300; @extend %frame-red-300;

10
ui/packages/consul-ui/app/components/inline-alert/skin.scss
View File

@ -12,7 +12,7 @@
color: inherit; color: inherit;
} }
%inline-alert-error { %inline-alert-error {
color: $color-failure; color: rgb(var(--color-failure));
} }
%inline-alert::before { %inline-alert::before {
font-size: 14px; font-size: 14px;
@ -22,15 +22,15 @@
} }
%inline-alert-success::before { %inline-alert-success::before {
@extend %with-check-circle-fill-mask; @extend %with-check-circle-fill-mask;
color: $green-500; color: rgb(var(--tone-green-500));
} }
%inline-alert-error::before { %inline-alert-error::before {
@extend %with-cancel-square-fill-mask; @extend %with-cancel-square-fill-mask;
color: $red-500; color: rgb(var(--tone-red-500));
} }
%inline-alert-warning::before { %inline-alert-warning::before {
@extend %with-alert-triangle-mask; @extend %with-alert-triangle-mask;
color: $orange-500; color: rgb(var(--tone-orange-500));
/* the warning triangle always looks */ /* the warning triangle always looks */
/* too low just because its a triangle */ /* too low just because its a triangle */
/* this tweak make it look better */ /* this tweak make it look better */
@ -38,5 +38,5 @@
} }
%inline-alert-info::before { %inline-alert-info::before {
@extend %with-info-circle-fill-mask; @extend %with-info-circle-fill-mask;
color: $blue-500; color: rgb(var(--tone-blue-500));
} }

6
ui/packages/consul-ui/app/components/inline-code/skin.scss
View File

@ -1,6 +1,6 @@
%inline-code { %inline-code {
border: 1px solid; border: 1px solid;
color: var(--brand-600, inherit); color: var(rgb(var(--brand-600)), inherit);
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
border-color: var(--gray-200); border-color: rgb(var(--tone-gray-200));
} }

6
ui/packages/consul-ui/app/components/list-collection/skin.scss
View File

@ -1,11 +1,11 @@
%list-collection > ul { %list-collection > ul {
border-top: 1px solid; border-top: 1px solid;
border-color: var(--gray-200); border-color: rgb(var(--tone-gray-200));
} }
%list-collection-partial-button { %list-collection-partial-button {
cursor: pointer; cursor: pointer;
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
color: var(--blue-500); color: rgb(var(--tone-blue-500));
} }
%list-collection-partial-button::after { %list-collection-partial-button::after {
@extend %with-chevron-up-mask, %as-pseudo; @extend %with-chevron-up-mask, %as-pseudo;

20
ui/packages/consul-ui/app/components/list-row/skin.scss
View File

@ -1,30 +1,30 @@
%list-row { %list-row {
list-style-type: none; list-style-type: none;
border: $decor-border-100; border: var(--decor-border-100);
border-top-color: $transparent; border-top-color: var(--transparent);
border-bottom-color: $gray-200; border-bottom-color: rgb(var(--tone-gray-200));
border-right-color: $transparent; border-right-color: var(--transparent);
border-left-color: $transparent; border-left-color: var(--transparent);
} }
%list-row-intent { %list-row-intent {
border-color: $gray-200; border-color: rgb(var(--tone-gray-200));
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-top-color: $transparent; border-top-color: var(--transparent);
cursor: pointer; cursor: pointer;
} }
%list-row-header { %list-row-header {
color: $black; color: var(--black);
} }
%list-row-header * { %list-row-header * {
color: inherit; color: inherit;
} }
%list-row-detail { %list-row-detail {
color: $gray-500; color: rgb(var(--tone-gray-500));
} }
%list-row-detail a { %list-row-detail a {
color: inherit; color: inherit;
} }
%list-row-detail a:hover { %list-row-detail a:hover {
color: $color-action; color: rgb(var(--color-action));
text-decoration: underline; text-decoration: underline;
} }

2
ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss
View File

@ -1,3 +1,3 @@
%main-header-horizontal::before { %main-header-horizontal::before {
background-color: var(--gray-000); background-color: rgb(var(--tone-gray-000));
} }

6
ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss
View File

@ -1,5 +1,5 @@
%main-nav-horizontal-action { %main-nav-horizontal-action {
border-radius: $decor-radius-200; border-radius: var(--decor-radius-200);
cursor: pointer; cursor: pointer;
} }
%main-nav-horizontal-action > a { %main-nav-horizontal-action > a {
@ -16,11 +16,11 @@
cursor: pointer; cursor: pointer;
} }
%main-nav-horizontal-toggle-button::before { %main-nav-horizontal-toggle-button::before {
background-color: var(--gray-800); background-color: rgb(var(--tone-gray-800));
} }
%main-nav-horizontal-action, %main-nav-horizontal-action,
%main-nav-horizontal-action-intent, %main-nav-horizontal-action-intent,
%main-nav-horizontal-action-active { %main-nav-horizontal-action-active {
color: var(--gray-600); color: rgb(var(--tone-gray-600));
} }
/**/ /**/

2
ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx
View File

@ -65,7 +65,7 @@ you need to define a different ancestor for a containing block you can use
/* a transform is required to mark this element as the containing block */ /* a transform is required to mark this element as the containing block */
/* for hoisting, otherwise the viewport is the containing block */ /* for hoisting, otherwise the viewport is the containing block */
transform: translate(0, 0); transform: translate(0, 0);
background-color: var(--gray-600); background-color: rgb(var(--tone-gray-600));
padding-top: 64px; padding-top: 64px;
} }
``` ```

2
ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss
View File

@ -15,7 +15,7 @@
/* a transform is required to mark this element as the containing block */ /* a transform is required to mark this element as the containing block */
/* for hoisting, otherwise the viewport is the containing block */ /* for hoisting, otherwise the viewport is the containing block */
transform: translate(0, 0); transform: translate(0, 0);
background-color: var(--gray-600); background-color: rgb(var(--tone-gray-600));
padding-top: 64px; padding-top: 64px;
} }
// TODO: Reduce the need for these debug overrides // TODO: Reduce the need for these debug overrides

8
ui/packages/consul-ui/app/components/main-nav-vertical/index.scss
View File

@ -30,14 +30,14 @@
border-top-right-radius: 0; border-top-right-radius: 0;
} }
%main-nav-vertical .popover-menu > label > button { %main-nav-vertical .popover-menu > label > button {
border: $decor-border-100; border: var(--decor-border-100);
border-color: var(--gray-500); border-color: rgb(var(--tone-gray-500));
color: var(--gray-999); color: rgb(var(--tone-gray-999));
width: calc(100% - 20px); width: calc(100% - 20px);
z-index: 100; z-index: 100;
text-align: left; text-align: left;
padding: 10px; padding: 10px;
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
} }
%main-nav-vertical .popover-menu > label > button::after { %main-nav-vertical .popover-menu > label > button::after {
float: right; float: right;

32
ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
View File

@ -1,7 +1,7 @@
%main-nav-vertical-action { %main-nav-vertical-action {
cursor: pointer; cursor: pointer;
border-right: $decor-border-400; border-right: var(--decor-border-400);
border-color: $transparent; border-color: var(--transparent);
@extend %p1; @extend %p1;
} }
%main-nav-vertical-action > a { %main-nav-vertical-action > a {
@ -11,7 +11,7 @@
%main-nav-vertical [role='separator'] { %main-nav-vertical [role='separator'] {
@extend %p3; @extend %p3;
text-transform: uppercase; text-transform: uppercase;
font-weight: $typo-weight-medium; font-weight: var(--typo-weight-medium);
} }
%main-nav-vertical-action-intent { %main-nav-vertical-action-intent {
text-decoration: underline; text-decoration: underline;
@ -20,25 +20,25 @@
text-decoration: none; text-decoration: none;
} }
%main-nav-vertical { %main-nav-vertical {
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
color: var(--gray-700); color: rgb(var(--tone-gray-700));
} }
%main-nav-vertical li:not([role='separator']) > span { %main-nav-vertical li:not([role='separator']) > span {
color: var(--gray-300); color: rgb(var(--tone-gray-300));
} }
%main-nav-vertical [role='separator'] { %main-nav-vertical [role='separator'] {
color: var(--gray-600); color: rgb(var(--tone-gray-600));
} }
%main-nav-vertical-action { %main-nav-vertical-action {
color: var(--gray-800); color: rgb(var(--tone-gray-800));
} }
%main-nav-vertical-action-intent, %main-nav-vertical-action-intent,
%main-nav-vertical-action-active { %main-nav-vertical-action-active {
color: var(--gray-999); color: rgb(var(--tone-gray-999));
} }
%main-nav-vertical-action-active { %main-nav-vertical-action-active {
background-color: var(--gray-150); background-color: rgb(var(--tone-gray-150));
border-color: var(--gray-999); border-color: rgb(var(--tone-gray-999));
} }
%main-nav-vertical .popover-menu[aria-label]::before { %main-nav-vertical .popover-menu[aria-label]::before {
content: attr(aria-label); content: attr(aria-label);
@ -48,17 +48,17 @@
} }
%main-nav-vertical .is-local span:last-of-type { %main-nav-vertical .is-local span:last-of-type {
@extend %pill-200; @extend %pill-200;
color: var(--gray-000); color: rgb(var(--tone-gray-000));
background-color: var(--gray-500); background-color: rgb(var(--tone-gray-500));
} }
%main-nav-vertical .nspaces .menu-panel > div { %main-nav-vertical .nspaces .menu-panel > div {
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
color: var(--gray-999); color: rgb(var(--tone-gray-999));
padding-left: 36px; padding-left: 36px;
} }
%main-nav-vertical .nspaces .menu-panel > div::before { %main-nav-vertical .nspaces .menu-panel > div::before {
@extend %with-info-circle-fill-mask, %as-pseudo; @extend %with-info-circle-fill-mask, %as-pseudo;
color: $blue-500; color: rgb(var(--tone-blue-500));
/* sizes the icon not the text */ /* sizes the icon not the text */
font-size: 1.1em; font-size: 1.1em;
} }

26
ui/packages/consul-ui/app/components/menu-panel/skin.scss
View File

@ -1,13 +1,13 @@
%menu-panel { %menu-panel {
border: $decor-border-100; border: var(--decor-border-100);
border-radius: $decor-radius-200; border-radius: var(--decor-radius-200);
box-shadow: $decor-elevation-600; box-shadow: var(--decor-elevation-600);
} }
%menu-panel > ul > li { %menu-panel > ul > li {
list-style-type: none; list-style-type: none;
} }
%menu-panel dt { %menu-panel dt {
font-weight: $typo-weight-bold; font-weight: var(--typo-weight-bold);
} }
%menu-panel dl, %menu-panel dl,
%menu-panel-header { %menu-panel-header {
@ -16,33 +16,33 @@
%menu-panel-separator { %menu-panel-separator {
@extend %p3; @extend %p3;
text-transform: uppercase; text-transform: uppercase;
font-weight: $typo-weight-medium; font-weight: var(--typo-weight-medium);
} }
%menu-panel dt span { %menu-panel dt span {
font-weight: $typo-weight-normal; font-weight: var(--typo-weight-normal);
} }
%menu-panel-header + ul, %menu-panel-header + ul,
%menu-panel-separator:not(:first-child) { %menu-panel-separator:not(:first-child) {
border-top: $decor-border-100; border-top: var(--decor-border-100);
} }
%menu-panel .is-active > *::after { %menu-panel .is-active > *::after {
@extend %with-check-plain-mask, %as-pseudo; @extend %with-check-plain-mask, %as-pseudo;
} }
%menu-panel { %menu-panel {
border-color: var(--gray-300); border-color: rgb(var(--tone-gray-300));
background-color: var(--gray-000); background-color: rgb(var(--tone-gray-000));
} }
%menu-panel dt, %menu-panel dt,
%menu-panel dd { %menu-panel dd {
color: var(--gray-800); color: rgb(var(--tone-gray-800));
} }
%menu-panel dt span { %menu-panel dt span {
color: var(--gray-600); color: rgb(var(--tone-gray-600));
} }
%menu-panel-separator { %menu-panel-separator {
color: var(--gray-600); color: rgb(var(--tone-gray-600));
} }
%menu-panel-header + ul, %menu-panel-header + ul,
%menu-panel-separator:not(:first-child) { %menu-panel-separator:not(:first-child) {
border-color: var(--gray-300); border-color: rgb(var(--tone-gray-300));
} }

28
ui/packages/consul-ui/app/components/modal-dialog/skin.scss
View File

@ -1,28 +1,28 @@
%modal-dialog.warning header { %modal-dialog.warning header {
background-color: $yellow-050; background-color: rgb(var(--tone-yellow-050));
border-color: $yellow-500; border-color: rgb(var(--tone-yellow-500));
color: $yellow-800; color: rgb(var(--tone-yellow-800));
} }
%modal-dialog.warning header > *:not(label) { %modal-dialog.warning header > *:not(label) {
font-size: $typo-size-500; font-size: var(--typo-size-500);
font-weight: $typo-weight-semibold; font-weight: var(--typo-weight-semibold);
} }
%modal-dialog.warning header::before { %modal-dialog.warning header::before {
@extend %with-alert-triangle-mask, %as-pseudo; @extend %with-alert-triangle-mask, %as-pseudo;
color: $yellow-500; color: rgb(var(--tone-yellow-500));
float: left; float: left;
margin-top: 2px; margin-top: 2px;
margin-right: 3px; margin-right: 3px;
} }
%modal-dialog-overlay { %modal-dialog-overlay {
background-color: rgba($white, 0.9); background-color: rgb(var(--white) / 90%);
} }
%modal-window { %modal-window {
box-shadow: $decor-elevation-800; box-shadow: var(--decor-elevation-800);
} }
%modal-window { %modal-window {
/*%frame-gray-000*/ /*%frame-gray-000*/
background-color: var(--gray-000); background-color: rgb(var(--tone-gray-000));
} }
%modal-window > footer, %modal-window > footer,
%modal-window > header { %modal-window > header {
@ -35,7 +35,7 @@
.modal-dialog-body, .modal-dialog-body,
%modal-window > footer, %modal-window > footer,
%modal-window > header { %modal-window > header {
border-color: var(--gray-300); border-color: rgb(var(--tone-gray-300));
} }
.modal-dialog-body { .modal-dialog-body {
border-style: solid; border-style: solid;
@ -50,9 +50,9 @@
%modal-window > header [data-a11y-dialog-hide] { %modal-window > header [data-a11y-dialog-hide] {
@extend %with-cancel-plain-icon; @extend %with-cancel-plain-icon;
cursor: pointer; cursor: pointer;
border: $decor-border-100; border: var(--decor-border-100);
/*%frame-gray-050??*/ /*%frame-gray-050??*/
background-color: var(--gray-050); background-color: rgb(var(--tone-gray-050));
border-color: var(--gray-300); border-color: rgb(var(--tone-gray-300));
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
} }

10
ui/packages/consul-ui/app/components/more-popover-menu/index.scss
View File

@ -14,15 +14,15 @@
padding: 7px; padding: 7px;
} }
%more-popover-menu-trigger > * { %more-popover-menu-trigger > * {
background-color: $transparent; background-color: var(--transparent);
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
width: 30px; width: 30px;
height: 30px; height: 30px;
font-size: 0; font-size: 0;
} }
%more-popover-menu-trigger > *::after { %more-popover-menu-trigger > *::after {
@extend %with-more-horizontal-mask, %as-pseudo; @extend %with-more-horizontal-mask, %as-pseudo;
background-color: $gray-900; background-color: rgb(var(--tone-gray-900));
width: 16px; width: 16px;
height: 16px; height: 16px;
position: absolute; position: absolute;
@ -32,9 +32,9 @@
margin-left: -8px; margin-left: -8px;
} }
%more-popover-menu-trigger > *:active { %more-popover-menu-trigger > *:active {
background-color: $gray-100; background-color: rgb(var(--tone-gray-100));
} }
%more-popover-menu-trigger > *:hover, %more-popover-menu-trigger > *:hover,
%more-popover-menu-trigger > *:focus { %more-popover-menu-trigger > *:focus {
background-color: $gray-050; background-color: rgb(var(--tone-gray-050));
} }

44
ui/packages/consul-ui/app/components/notice/skin.scss
View File

@ -1,7 +1,7 @@
%notice { %notice {
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
border: $decor-border-100; border: var(--decor-border-100);
color: $black; color: var(--black);
} }
%notice::before { %notice::before {
@extend %as-pseudo; @extend %as-pseudo;
@ -11,7 +11,7 @@
} }
%notice footer * { %notice footer * {
@extend %p3; @extend %p3;
font-weight: $typo-weight-bold; font-weight: var(--typo-weight-bold);
} }
%notice-success, %notice-success,
%notice-info, %notice-info,
@ -21,51 +21,51 @@
@extend %notice; @extend %notice;
} }
%notice-success { %notice-success {
background-color: $green-050; background-color: rgb(var(--tone-green-050));
border-color: $green-500; border-color: rgb(var(--tone-green-500));
} }
%notice-info { %notice-info {
border-color: $blue-100; border-color: rgb(var(--tone-blue-100));
background-color: $gray-010; background-color: rgb(var(--tone-gray-010));
} }
%notice-info header * { %notice-info header * {
color: $blue-700; color: rgb(var(--tone-blue-700));
} }
%notice-highlight { %notice-highlight {
background-color: $gray-050; background-color: rgb(var(--tone-gray-050));
border-color: $gray-300; border-color: rgb(var(--tone-gray-300));
} }
%notice-info header * { %notice-info header * {
color: $gray-700; color: rgb(var(--tone-gray-700));
} }
%notice-warning { %notice-warning {
border-color: $yellow-100; border-color: rgb(var(--tone-yellow-100));
background-color: $yellow-050; background-color: rgb(var(--tone-yellow-050));
} }
%notice-warning header * { %notice-warning header * {
color: $yellow-800; color: rgb(var(--tone-yellow-800));
} }
%notice-error { %notice-error {
background-color: $red-050; background-color: rgb(var(--tone-red-050));
border-color: $red-500; border-color: rgb(var(--tone-red-500));
} }
%notice-success::before { %notice-success::before {
@extend %with-check-circle-fill-mask; @extend %with-check-circle-fill-mask;
color: $green-500; color: rgb(var(--tone-green-500));
} }
%notice-info::before { %notice-info::before {
@extend %with-info-circle-fill-mask; @extend %with-info-circle-fill-mask;
color: $blue-500; color: rgb(var(--tone-blue-500));
} }
%notice-highlight::before { %notice-highlight::before {
@extend %with-star-fill-mask; @extend %with-star-fill-mask;
color: $yellow-500; color: rgb(var(--tone-yellow-500));
} }
%notice-warning::before { %notice-warning::before {
@extend %with-alert-triangle-mask; @extend %with-alert-triangle-mask;
color: $orange-500; color: rgb(var(--tone-orange-500));
} }
%notice-error::before { %notice-error::before {
@extend %with-cancel-square-fill-mask; @extend %with-cancel-square-fill-mask;
color: $red-500; color: rgb(var(--tone-red-500));
} }

6
ui/packages/consul-ui/app/components/overlay/none.scss
View File

@ -26,9 +26,9 @@
transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
} }
& { & {
background-color: $white; background-color: rgb(var(--white));
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
box-shadow: $decor-elevation-400; box-shadow: var(--decor-elevation-400);
} }
.tippy-arrow { .tippy-arrow {
@extend %overlay-tail; @extend %overlay-tail;

14
ui/packages/consul-ui/app/components/overlay/square-tail.scss
View File

@ -4,11 +4,11 @@
left: calc(0px - (var(--size) / 2)) !important; left: calc(0px - (var(--size) / 2)) !important;
} }
.tippy-arrow::before { .tippy-arrow::before {
background-color: $white; background-color: rgb(var(--white));
width: calc(1px + var(--size)); width: calc(1px + var(--size));
height: calc(1px + var(--size)); height: calc(1px + var(--size));
border: $decor-border-100; border: var(--decor-border-100);
border-color: $gray-300; border-color: rgb(var(--tone-gray-300));
} }
// potential icon // potential icon
.tippy-arrow::after { .tippy-arrow::after {
@ -23,8 +23,8 @@
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
} }
.tippy-arrow::before { .tippy-arrow::before {
border-bottom-left-radius: $decor-radius-200; border-bottom-left-radius: var(--decor-radius-200);
border-bottom-right-radius: $decor-radius-200; border-bottom-right-radius: var(--decor-radius-200);
border-top: 0 !important; border-top: 0 !important;
} }
.tippy-arrow::after { .tippy-arrow::after {
@ -39,8 +39,8 @@
border-top-left-radius: 0 !important; border-top-left-radius: 0 !important;
} }
.tippy-arrow::before { .tippy-arrow::before {
border-top-left-radius: $decor-radius-200; border-top-left-radius: var(--decor-radius-200);
border-top-right-radius: $decor-radius-200; border-top-right-radius: var(--decor-radius-200);
border-bottom: 0 !important; border-bottom: 0 !important;
} }
.tippy-arrow::after { .tippy-arrow::after {

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

@ -1,3 +1,3 @@
%pill { %pill {
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
} }

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

@ -23,19 +23,19 @@
%popover-select .value-passing button::before { %popover-select .value-passing button::before {
@extend %with-check-circle-fill-mask, %as-pseudo; @extend %with-check-circle-fill-mask, %as-pseudo;
color: $green-500; color: rgb(var(--tone-green-500));
} }
%popover-select .value-warning button::before { %popover-select .value-warning button::before {
@extend %with-alert-triangle-mask, %as-pseudo; @extend %with-alert-triangle-mask, %as-pseudo;
color: $orange-500; color: rgb(var(--tone-orange-500));
} }
%popover-select .value-critical button::before { %popover-select .value-critical button::before {
@extend %with-cancel-square-fill-mask, %as-pseudo; @extend %with-cancel-square-fill-mask, %as-pseudo;
color: $red-500; color: rgb(var(--tone-red-500));
} }
%popover-select .value-empty button::before { %popover-select .value-empty button::before {
@extend %with-minus-square-fill-mask, %as-pseudo; @extend %with-minus-square-fill-mask, %as-pseudo;
color: $gray-400; color: rgb(var(--tone-gray-400));
} }
%popover-select.type-source li button { %popover-select.type-source li button {
text-transform: capitalize; text-transform: capitalize;

18
ui/packages/consul-ui/app/components/radio-card/skin.scss
View File

@ -1,25 +1,25 @@
%radio-card { %radio-card {
border: $decor-border-100; border: var(--decor-border-100);
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
border-color: $gray-200; border-color: rgb(var(--tone-gray-200));
box-shadow: $decor-elevation-400; box-shadow: var(--decor-elevation-400);
color: $gray-500; color: rgb(var(--tone-gray-500));
cursor: pointer; cursor: pointer;
} }
%radio-card.checked { %radio-card.checked {
border-color: $blue-500; border-color: rgb(var(--tone-blue-500));
} }
%radio-card > :first-child { %radio-card > :first-child {
background-color: $gray-050; background-color: rgb(var(--tone-gray-050));
} }
%radio-card.checked > :first-child { %radio-card.checked > :first-child {
background-color: $blue-050; background-color: rgb(var(--tone-blue-050));
} }
%radio-card header { %radio-card header {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
%radio-card header { %radio-card header {
color: $black; color: var(--black);
} }
%radio-card-with-icon > :last-child { %radio-card-with-icon > :last-child {
padding-left: 47px; padding-left: 47px;

12
ui/packages/consul-ui/app/components/search-bar/index.scss
View File

@ -1,8 +1,8 @@
.search-bar { .search-bar {
&-status { &-status {
& { & {
border-bottom: $decor-border-100; border-bottom: var(--decor-border-100);
border-bottom-color: $gray-200; border-bottom-color: rgb(var(--tone-gray-200));
} }
.remove-all button { .remove-all button {
@extend %anchor; @extend %anchor;
@ -10,16 +10,16 @@
li:not(.remove-all) { li:not(.remove-all) {
& { & {
@extend %pill-200; @extend %pill-200;
border: $decor-border-100; border: var(--decor-border-100);
border-color: $gray-200; border-color: rgb(var(--tone-gray-200));
color: $gray-600; color: rgb(var(--tone-gray-600));
} }
button { button {
cursor: pointer; cursor: pointer;
} }
button::before { button::before {
@extend %with-cancel-plain-mask, %as-pseudo; @extend %with-cancel-plain-mask, %as-pseudo;
color: $gray-600; color: rgb(var(--tone-gray-600));
margin-top: 1px; margin-top: 1px;
margin-right: 0.2rem; margin-right: 0.2rem;
} }

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

@ -15,7 +15,7 @@
} }
%secret-button span::before { %secret-button span::before {
@extend %with-visibility-show-mask, %as-pseudo; @extend %with-visibility-show-mask, %as-pseudo;
background-color: $gray-500; background-color: rgb(var(--tone-gray-500));
} }
%secret-button input:checked + span::before { %secret-button input:checked + span::before {
@extend %with-visibility-hide-mask; @extend %with-visibility-hide-mask;

6
ui/packages/consul-ui/app/components/skip-links/skin.scss
View File

@ -1,7 +1,7 @@
%skip-links { %skip-links {
outline: 1px solid $white; outline: 1px solid rgb(var(--white));
color: $white; color: rgb(var(--white));
background-color: $blue-500; background-color: rgb(var(--tone-blue-500));
} }
%skip-links button, %skip-links button,
%skip-links a { %skip-links a {

10
ui/packages/consul-ui/app/components/sliding-toggle/skin.scss
View File

@ -3,7 +3,7 @@
cursor: pointer; cursor: pointer;
} }
%sliding-toggle label span::after { %sliding-toggle label span::after {
border-radius: $decor-radius-full; border-radius: var(--decor-radius-full);
} }
%sliding-toggle label span::before { %sliding-toggle label span::before {
border-radius: 7px; border-radius: 7px;
@ -15,16 +15,16 @@
@extend %sliding-toggle-negative; @extend %sliding-toggle-negative;
} }
%sliding-toggle label span { %sliding-toggle label span {
color: $gray-900; color: rgb(var(--tone-gray-900));
} }
%sliding-toggle label span::after { %sliding-toggle label span::after {
background-color: $white; background-color: rgb(var(--white));
} }
%sliding-toggle label input:checked + span::before, %sliding-toggle label input:checked + span::before,
%sliding-toggle-negative label input + span::before { %sliding-toggle-negative label input + span::before {
background-color: $blue-500; background-color: rgb(var(--tone-blue-500));
} }
%sliding-toggle label span::before, %sliding-toggle label span::before,
%sliding-toggle-negative label input:checked + span::before { %sliding-toggle-negative label input:checked + span::before {
background-color: $gray-300; background-color: rgb(var(--tone-gray-300));
} }

12
ui/packages/consul-ui/app/components/tab-nav/skin.scss
View File

@ -10,29 +10,29 @@
} }
%tab-nav { %tab-nav {
/* %frame-transparent-something */ /* %frame-transparent-something */
border-bottom: $decor-border-100; border-bottom: var(--decor-border-100);
} }
%with-animated-tab-selection ul::after, %with-animated-tab-selection ul::after,
%tab-button { %tab-button {
border-bottom: $decor-border-300; border-bottom: var(--decor-border-300);
} }
%tab-nav { %tab-nav {
/* %frame-transparent-something */ /* %frame-transparent-something */
border-color: var(--gray-200); border-color: rgb(var(--tone-gray-200));
} }
%tab-button { %tab-button {
@extend %with-transition-500; @extend %with-transition-500;
transition-property: background-color, border-color; transition-property: background-color, border-color;
border-color: var(--transparent); border-color: var(--transparent);
color: var(--gray-500); color: rgb(var(--tone-gray-500));
} }
%tab-button-intent, %tab-button-intent,
%tab-button-active { %tab-button-active {
/* %frame-gray-something */ /* %frame-gray-something */
background-color: var(--gray-100); background-color: rgb(var(--tone-gray-100));
} }
%tab-button-intent { %tab-button-intent {
border-color: var(--gray-300); border-color: rgb(var(--tone-gray-300));
} }
%tab-nav.animatable .selected a { %tab-nav.animatable .selected a {
border-color: var(--transparent) !important; border-color: var(--transparent) !important;

6
ui/packages/consul-ui/app/components/table/index.scss
View File

@ -21,7 +21,7 @@ table.consul-metadata-list tbody tr:hover {
%table th span::after { %table th span::after {
@extend %with-info-circle-outline-mask, %as-pseudo; @extend %with-info-circle-outline-mask, %as-pseudo;
color: $gray-500; color: rgb(var(--tone-gray-500));
margin-left: 4px; margin-left: 4px;
} }
%table tbody tr { %table tbody tr {
@ -31,12 +31,12 @@ table.consul-metadata-list tbody tr:hover {
padding: 0; padding: 0;
} }
%table tbody tr:hover { %table tbody tr:hover {
box-shadow: $decor-elevation-300; box-shadow: var(--decor-elevation-300);
} }
%table td.folder::before { %table td.folder::before {
@extend %with-folder-outline-mask, %as-pseudo; @extend %with-folder-outline-mask, %as-pseudo;
background-color: $gray-300; background-color: rgb(var(--tone-gray-300));
margin-top: 1px; margin-top: 1px;
margin-right: 5px; margin-right: 5px;
} }

2
ui/packages/consul-ui/app/components/table/layout.scss
View File

@ -59,5 +59,5 @@
font-weight: normal; font-weight: normal;
} }
%table tbody td em { %table tbody td em {
color: $gray-500; color: rgb(var(--tone-gray-500));
} }

12
ui/packages/consul-ui/app/components/table/skin.scss
View File

@ -1,17 +1,17 @@
%table th, %table th,
%table td { %table td {
border-bottom: $decor-border-100; border-bottom: var(--decor-border-100);
} }
%table th { %table th {
border-color: $gray-300; border-color: rgb(var(--tone-gray-300));
} }
%table td { %table td {
border-color: $gray-200; border-color: rgb(var(--tone-gray-200));
color: $gray-500; color: rgb(var(--tone-gray-500));
} }
%table th, %table th,
%table td strong { %table td strong {
color: $gray-600; color: rgb(var(--tone-gray-600));
} }
/* TODO: Add to native selector `tbody th` - will involve moving all /* TODO: Add to native selector `tbody th` - will involve moving all
* current th's to `thead th` and changing the templates * current th's to `thead th` and changing the templates
@ -19,7 +19,7 @@
*/ */
%table a, %table a,
%tbody-th { %tbody-th {
color: $gray-900; color: rgb(var(--tone-gray-900));
} }
%table td:first-child { %table td:first-child {
@extend %tbody-th; @extend %tbody-th;

10
ui/packages/consul-ui/app/components/tabular-details/skin.scss
View File

@ -6,22 +6,22 @@
border: 0; border: 0;
} }
%tabular-detail { %tabular-detail {
border: 1px solid $gray-300; border: 1px solid rgb(var(--tone-gray-300));
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
box-shadow: $decor-elevation-600; box-shadow: var(--decor-elevation-600);
margin-bottom: 20px; margin-bottom: 20px;
} }
%tabular-detail::before, %tabular-detail::before,
%tabular-detail > div, %tabular-detail > div,
%tabular-detail > label { %tabular-detail > label {
background-color: $white; background-color: rgb(var(--white));
} }
%tabular-detail > label::before { %tabular-detail > label::before {
transform: rotate(180deg); transform: rotate(180deg);
} }
// this is here as its a fake border // this is here as its a fake border
%tabular-detail::before { %tabular-detail::before {
background: $gray-200; background: rgb(var(--tone-gray-200));
content: ''; content: '';
display: block; display: block;
height: 1px; height: 1px;

12
ui/packages/consul-ui/app/components/tabular-dl/skin.scss
View File

@ -1,21 +1,21 @@
%tabular-dl { %tabular-dl {
> dt:last-of-type, > dt:last-of-type,
> dd:last-of-type { > dd:last-of-type {
border-color: var(--gray-300) !important; border-color: rgb(var(--tone-gray-300)) !important;
} }
dt, dt,
dd { dd {
border-color: var(--gray-300) !important; border-color: rgb(var(--tone-gray-300)) !important;
color: $black !important; color: var(--black) !important;
} }
dt { dt {
font-weight: $typo-weight-bold; font-weight: var(--typo-weight-bold);
} }
dd .copy-button button::before { dd .copy-button button::before {
background-color: $black; background-color: var(--black);
} }
dt.type + dd span::before { dt.type + dd span::before {
@extend %with-info-circle-outline-mask, %as-pseudo; @extend %with-info-circle-outline-mask, %as-pseudo;
background-color: var(--gray-500); background-color: rgb(var(--tone-gray-500));
} }
} }

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

@ -8,7 +8,7 @@ td.tags {
%tag-list dt::before { %tag-list dt::before {
@extend %with-tag-mask, %as-pseudo; @extend %with-tag-mask, %as-pseudo;
color: inherit; color: inherit;
color: var(--gray-500); color: rgb(var(--tone-gray-500));
} }
%tag-list dd { %tag-list dd {
@extend %csv-list; @extend %csv-list;

6
ui/packages/consul-ui/app/components/toggle-button/skin.scss
View File

@ -1,12 +1,12 @@
%toggle-button { %toggle-button {
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
cursor: pointer; cursor: pointer;
} }
%toggle-button-intent { %toggle-button-intent {
background-color: $gray-050; background-color: rgb(var(--tone-gray-050));
} }
%toggle-button-active { %toggle-button-active {
background-color: $gray-100; background-color: rgb(var(--tone-gray-100));
} }
%toggle-button:hover, %toggle-button:hover,
%toggle-button:focus { %toggle-button:focus {

4
ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
View File

@ -7,8 +7,8 @@
width: 12px; width: 12px;
height: 12px; height: 12px;
background: white; background: white;
border-top: 1px solid $gray-300; border-top: 1px solid rgb(var(--tone-gray-300));
border-right: 1px solid $gray-300; border-right: 1px solid rgb(var(--tone-gray-300));
transform: rotate(-45deg); transform: rotate(-45deg);
position: absolute; position: absolute;
left: 16px; left: 16px;

8
ui/packages/consul-ui/app/components/tooltip/index.scss
View File

@ -31,19 +31,19 @@
%tooltip-bubble { %tooltip-bubble {
& { & {
background-color: $gray-700; background-color: rgb(var(--tone-gray-700));
color: $white; color: rgb(var(--white));
} }
} }
%tooltip-tail { %tooltip-tail {
--size: 5px; --size: 5px;
& { & {
color: $gray-700; color: rgb(var(--tone-gray-700));
width: calc(var(--size) * 2); width: calc(var(--size) * 2);
height: calc(var(--size) * 2); height: calc(var(--size) * 2);
} }
&::before { &::before {
border-color: $transparent; border-color: var(--transparent);
border-style: solid; border-style: solid;
} }
} }

24
ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
View File

@ -5,15 +5,15 @@
#upstream-container .topology-metrics-card, #upstream-container .topology-metrics-card,
#downstream-container .topology-metrics-card { #downstream-container .topology-metrics-card {
display: block; display: block;
color: $gray-700; color: rgb(var(--tone-gray-700));
overflow: hidden; overflow: hidden;
background-color: $white; background-color: rgb(var(--white));
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
border: 1px solid $gray-200; border: 1px solid rgb(var(--tone-gray-200));
p { p {
padding: 12px 12px 0 12px; padding: 12px 12px 0 12px;
font-size: $typo-size-500; font-size: var(--typo-size-500);
font-weight: $typo-weight-semibold; font-weight: var(--typo-weight-semibold);
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
p.empty { p.empty {
@ -26,7 +26,7 @@
margin-right: 8px; margin-right: 8px;
} }
dd { dd {
color: $gray-700; color: rgb(var(--tone-gray-700));
} }
span { span {
margin-right: 8px; margin-right: 8px;
@ -53,23 +53,23 @@
} }
.nspace dt::before, .nspace dt::before,
.health dt::before { .health dt::before {
background-color: $gray-500; background-color: rgb(var(--tone-gray-500));
} }
.passing::before { .passing::before {
@extend %with-check-circle-fill-mask, %as-pseudo; @extend %with-check-circle-fill-mask, %as-pseudo;
background-color: $green-500; background-color: rgb(var(--tone-green-500));
} }
.warning::before { .warning::before {
@extend %with-alert-triangle-mask, %as-pseudo; @extend %with-alert-triangle-mask, %as-pseudo;
background-color: $orange-500; background-color: rgb(var(--tone-orange-500));
} }
.critical::before { .critical::before {
@extend %with-cancel-square-fill-mask, %as-pseudo; @extend %with-cancel-square-fill-mask, %as-pseudo;
background-color: $red-500; background-color: rgb(var(--tone-red-500));
} }
.empty::before { .empty::before {
@extend %with-minus-square-fill-mask, %as-pseudo; @extend %with-minus-square-fill-mask, %as-pseudo;
color: $gray-500; color: rgb(var(--tone-gray-500));
} }
} }
.details { .details {

8
ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss
View File

@ -2,7 +2,7 @@
> button { > button {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: $white; background-color: rgb(var(--white));
padding: 1px 1px; padding: 1px 1px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@ -21,16 +21,16 @@
&.deny > button::before, &.deny > button::before,
&.deny .tippy-arrow::after { &.deny .tippy-arrow::after {
@extend %with-cancel-square-fill-mask, %as-pseudo; @extend %with-cancel-square-fill-mask, %as-pseudo;
background-color: $red-500; background-color: rgb(var(--tone-red-500));
} }
&.l7 > button::before, &.l7 > button::before,
&.l7 .tippy-arrow::after { &.l7 .tippy-arrow::after {
@extend %with-layers-mask, %as-pseudo; @extend %with-layers-mask, %as-pseudo;
background-color: $gray-300; background-color: rgb(var(--tone-gray-300));
} }
&.not-defined > button::before, &.not-defined > button::before,
&.not-defined .tippy-arrow::after { &.not-defined .tippy-arrow::after {
@extend %with-alert-triangle-mask, %as-pseudo; @extend %with-alert-triangle-mask, %as-pseudo;
color: $yellow-500; color: rgb(var(--tone-yellow-500));
} }
} }

16
ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss
View File

@ -8,7 +8,7 @@
font-size: 0.875em; font-size: 0.875em;
line-height: 1.5em; line-height: 1.5em;
font-weight: normal; font-weight: normal;
border: 1px solid $gray-300; border: 1px solid rgb(var(--tone-gray-300));
background: #fff; background: #fff;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
@ -19,7 +19,7 @@
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: #000; color: #000;
border-bottom: 1px solid $gray-200; border-bottom: 1px solid rgb(var(--tone-gray-200));
margin-bottom: 4px; margin-bottom: 4px;
text-align: center; text-align: center;
} }
@ -31,7 +31,7 @@
} }
.sparkline-tt-sum { .sparkline-tt-sum {
border-top: 1px solid $gray-200; border-top: 1px solid rgb(var(--tone-gray-200));
margin-top: 4px; margin-top: 4px;
padding: 8px 10px 0 10px; padding: 8px 10px 0 10px;
} }
@ -58,7 +58,7 @@
height: 12px; height: 12px;
left: 15px; left: 15px;
bottom: -7px; bottom: -7px;
border: 1px solid $gray-300; border: 1px solid rgb(var(--tone-gray-300));
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
background: #fff; background: #fff;
@ -75,7 +75,7 @@
} }
h3 { h3 {
color: $gray-900; color: rgb(var(--tone-gray-900));
font-size: 16px; font-size: 16px;
} }
@ -84,16 +84,16 @@
font-weight: 600; font-weight: 600;
} }
dd { dd {
color: $gray-500; color: rgb(var(--tone-gray-500));
} }
} }
} }
.sparkline-key-link { .sparkline-key-link {
color: $gray-500; color: rgb(var(--tone-gray-500));
} }
.sparkline-key-link:hover { .sparkline-key-link:hover {
color: $blue-500; color: rgb(var(--tone-blue-500));
} }
#metrics-container:hover .sparkline-key-link::before { #metrics-container:hover .sparkline-key-link::before {
@extend %with-info-circle-fill-mask, %as-pseudo; @extend %with-info-circle-fill-mask, %as-pseudo;

36
ui/packages/consul-ui/app/components/topology-metrics/skin.scss
View File

@ -1,41 +1,41 @@
.topology-container { .topology-container {
color: $gray-700; color: rgb(var(--tone-gray-700));
} }
// Columns/Containers & Lines // Columns/Containers & Lines
#downstream-container, #downstream-container,
#metrics-container, #metrics-container,
#upstream-container { #upstream-container {
border: 1px solid $gray-200; border: 1px solid rgb(var(--tone-gray-200));
border-radius: $decor-radius-100; border-radius: var(--decor-radius-100);
} }
#downstream-container, #downstream-container,
#upstream-container { #upstream-container {
background-color: $gray-100; background-color: rgb(var(--tone-gray-100));
} }
#downstream-container div:first-child { #downstream-container div:first-child {
display: inline-flex; display: inline-flex;
span::before { span::before {
@extend %with-info-circle-outline-mask, %as-pseudo; @extend %with-info-circle-outline-mask, %as-pseudo;
background-color: $gray-500; background-color: rgb(var(--tone-gray-500));
} }
} }
// Metrics Container // Metrics Container
#metrics-container { #metrics-container {
div:first-child { div:first-child {
background-color: $white; background-color: rgb(var(--white));
} }
.link { .link {
background-color: $gray-100; background-color: rgb(var(--tone-gray-100));
a { a {
color: $gray-700; color: rgb(var(--tone-gray-700));
} }
a::before { a::before {
background-color: $gray-500; background-color: rgb(var(--tone-gray-500));
} }
a:hover { a:hover {
color: $color-action; color: rgb(var(--color-action));
} }
.metrics-link::before { .metrics-link::before {
@extend %with-exit-mask, %as-pseudo; @extend %with-exit-mask, %as-pseudo;
@ -50,34 +50,34 @@
#downstream-lines svg, #downstream-lines svg,
#upstream-lines svg { #upstream-lines svg {
path { path {
fill: $transparent; fill: var(--transparent);
} }
circle { circle {
fill: $white; fill: rgb(var(--white));
} }
.allow-arrow { .allow-arrow {
fill: $gray-300; fill: rgb(var(--tone-gray-300));
stroke-linejoin: round; stroke-linejoin: round;
} }
path, path,
.allow-dot, .allow-dot,
.allow-arrow { .allow-arrow {
stroke: $gray-300; stroke: rgb(var(--tone-gray-300));
stroke-width: 2; stroke-width: 2;
} }
path[data-permission='not-defined'] { path[data-permission='not-defined'] {
stroke-dasharray: 4; stroke-dasharray: 4;
} }
path[data-permission='deny'] { path[data-permission='deny'] {
stroke: $red-500; stroke: rgb(var(--tone-red-500));
} }
.deny-dot { .deny-dot {
stroke: $red-500; stroke: rgb(var(--tone-red-500));
stroke-width: 2; stroke-width: 2;
} }
.deny-arrow { .deny-arrow {
fill: $red-500; fill: rgb(var(--tone-red-500));
stroke: $red-500; stroke: rgb(var(--tone-red-500));
stroke-linejoin: round; stroke-linejoin: round;
} }
} }

4
ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss
View File

@ -5,7 +5,7 @@
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
width: 100%; width: 100%;
border-top: 1px solid var(--gray-200); border-top: 1px solid rgb(var(--tone-gray-200));
dl { dl {
display: flex; display: flex;
padding-bottom: 12px; padding-bottom: 12px;
@ -15,7 +15,7 @@
line-height: 1.5em !important; line-height: 1.5em !important;
} }
dd { dd {
color: $gray-400 !important; color: rgb(var(--tone-gray-400)) !important;
} }
span { span {
padding-bottom: 12px; padding-bottom: 12px;

4
ui/packages/consul-ui/app/components/topology-metrics/status/index.scss
View File

@ -2,14 +2,14 @@
.topology-metrics-status-loader { .topology-metrics-status-loader {
font-weight: normal; font-weight: normal;
font-size: 0.875rem; font-size: 0.875rem;
color: $gray-500; color: rgb(var(--tone-gray-500));
text-align: center; text-align: center;
margin: 0 auto !important; margin: 0 auto !important;
display: block; display: block;
span::before { span::before {
@extend %with-info-circle-outline-mask, %as-pseudo; @extend %with-info-circle-outline-mask, %as-pseudo;
background-color: $gray-500; background-color: rgb(var(--tone-gray-500));
} }
} }

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

@ -1,142 +1,178 @@
$steel-050: #f5f6f7; :root {
$steel-100: #e1e4e7; /* vault */
$steel-200: #cdd3d7; --steel-050: 245 246 247;
$steel-300: #b9c1c7; --steel-100: 225 228 231;
$steel-400: #a5b0b7; --steel-200: 205 211 215;
$steel-500: #919fa8; --steel-300: 185 193 199;
$steel-600: #77838a; --steel-400: 165 176 183;
$steel-700: #5d666b; --steel-500: 145 159 168;
$steel-800: #42494d; --steel-600: 119 131 138;
$steel-900: #282c2e; --steel-700: 93 102 107;
$magenta-050: #f9ebf2; --steel-800: 66 73 77;
$magenta-100: #efc4d8; --steel-900: 40 44 46;
$magenta-200: #e59ebe;
$magenta-300: #da77a4;
$magenta-400: #d0508a;
$magenta-500: #c62a71;
$magenta-600: #9e2159;
$magenta-700: #7d1a47;
$magenta-800: #5a1434;
$magenta-900: #360c1f;
$rose-010: #fff2f8; /* consul */
$rose-050: #fff2f8; --magenta-050: 249 235 242;
$rose-100: #f8d9e7; --magenta-100: 239 196 216;
$rose-200: #f8d9e7; --magenta-200: 229 158 190;
$rose-300: #e07eac; --magenta-300: 218 119 164;
$rose-400: #e07eac; --magenta-400: 208 80 138;
$rose-500: #ca2171; --magenta-500: 198 42 113;
$rose-600: #8e134a; --magenta-600: 158 33 89;
$rose-700: #8e134a; --magenta-700: 125 26 71;
$rose-800: #650d34; --magenta-800: 90 20 52;
$rose-900: #650d34; --magenta-900: 54 12 31;
$cobalt-050: #f0f5ff; /* consul refresh */
$cobalt-100: #bfd4ff; --strawberry-010: 255 242 248;
$cobalt-200: #8ab1ff; --strawberry-050: 255 242 248;
$cobalt-300: #5b92ff; --strawberry-100: 248 217 231;
$cobalt-400: #387aff; --strawberry-200: 248 217 231;
$cobalt-500: #1563ff; --strawberry-300: 224 126 172;
$cobalt-600: #0f4fd1; --strawberry-400: 224 126 172;
$cobalt-700: #0e40a3; --strawberry-500: 202 33 113;
$cobalt-800: #0a2d74; --strawberry-600: 142 19 74;
$cobalt-900: #061b46; --strawberry-700: 142 19 74;
$indigo-050: #eeedfc; --strawberry-800: 101 13 52;
$indigo-100: #d5d2f7; --strawberry-900: 101 13 52;
$indigo-200: #aea7f2;
$indigo-300: #8d83ed; /* vagrant */
$indigo-400: #7568e8; --cobalt-050: 240 245 255;
$indigo-500: #5c4ee5; --cobalt-100: 191 212 255;
$indigo-600: #4c40bc; --cobalt-200: 138 177 255;
$indigo-700: #3b3292; --cobalt-300: 91 146 255;
$indigo-800: #2a2469; --cobalt-400: 56 122 255;
$indigo-900: #1a163f; --cobalt-500: 21 99 255;
$teal-050: #ebf8f3; --cobalt-600: 15 79 209;
$teal-100: #c3ecdc; --cobalt-700: 14 64 163;
$teal-200: #9bdfc5; --cobalt-800: 10 45 116;
$teal-300: #74d3ae; --cobalt-900: 6 27 70;
$teal-400: #4cc697;
$teal-500: #25ba81; /* terraform */
$teal-600: #1f996a; --indigo-050: 238 237 252;
$teal-700: #187753; --indigo-100: 213 210 247;
$teal-800: #11553b; --indigo-200: 174 167 242;
$teal-900: #0b3324; --indigo-300: 141 131 237;
$cyan-050: #e7f8ff; --indigo-400: 117 104 232;
$cyan-100: #b9ecff; --indigo-500: 92 78 229;
$cyan-200: #8be0ff; --indigo-600: 76 64 188;
$cyan-300: #5cd3ff; --indigo-700: 59 50 146;
$cyan-400: #2ec7ff; --indigo-800: 42 36 105;
$cyan-500: #00bbff; --indigo-900: 26 22 63;
$cyan-600: #009fd9;
$cyan-700: #0077a3; /* nomad */
$cyan-800: #005574; --teal-050: 235 248 243;/*#c3ecdc*/;
$cyan-900: #003346; --teal-100: 195 236 220;/*#e1e4e7*/;
$gray-010: #fbfbfc; --teal-200: 155 223 197;
$gray-050: #f7f8fa; --teal-300: 116 211 174;
$gray-100: #ebeef2; --teal-400: 76 198 151;
$gray-150: #ebeef2; --teal-500: 37 186 129;
$gray-200: #dce0e6; --teal-600: 31 153 106;
$gray-300: #bac1cc; --teal-700: 24 119 83;
$gray-400: #8e96a3; --teal-800: 17 85 59;
$gray-500: #6f7682; --teal-900: 11 51 36;
$gray-600: #626873;
$gray-700: #525761; /* packer */
$gray-800: #373a42; --cyan-050: 231 248 255;
$gray-850: #2c2e33; --cyan-100: 185 236 255;
$gray-900: #1f2124; --cyan-200: 139 224 255;
$gray-950: #15171c; --cyan-300: 92 211 255;
$green-050: #ecf7ed; --cyan-400: 46 199 255;
$green-100: #c6e9c9; --cyan-500: 0 187 255;
$green-200: #a0dba5; --cyan-600: 0 159 217;
$green-300: #7acc81; --cyan-700: 0 119 163;
$green-400: #54be5d; --cyan-800: 0 85 116;
$green-500: #2eb039; --cyan-900: 0 51 70;
$green-600: #26912f;
$green-700: #1e7125; /* ui */
$green-800: #15501a;
$green-900: #0d3010; /* removed to prevent confusion
$blue-010: #fbfcff; --gray-1: #191a1c;
$blue-050: #f0f5ff; --gray-2: #323538;
$blue-100: #bfd4ff; --gray-3: #4c4f54;
$blue-200: #8ab1ff; --gray-4: #656a70;
$blue-300: #5b92ff; --gray-5: #7f858d;
$blue-400: #387aff; --gray-6: #9a9ea5;
$blue-500: #1563ff; --gray-7: #b4b8bc;
$blue-600: #0f4fd1; --gray-8: #d0d2d5;
$blue-700: #0e40a3; --gray-9: #ebecee;
$blue-800: #0a2d74; --gray-10: #f3f4f6;
$blue-900: #061b46; */
$red-010: #fdfafb;
$red-050: #f9ecee; --gray-010: 251 251 252;
$red-100: #efc7cc; --gray-050: 247 248 250;
$red-200: #e5a2aa; --gray-100: 235 238 242;
$red-300: #db7d88; --gray-150: 235 238 242;
$red-400: #d15866; --gray-200: 220 224 230;
$red-500: #c73445; --gray-300: 186 193 204;
$red-600: #a32b39; --gray-400: 142 150 163;
$red-700: #7f222c; --gray-500: 111 118 130;
$red-800: #5b1820; --gray-600: 98 104 115;
$red-900: #370f13; --gray-700: 82 87 97;
$orange-050: #fef4ec; --gray-800: 55 58 66;
$orange-100: #fde0c8; --gray-850: 44 46 51;
$orange-200: #fccca4; --gray-900: 31 33 36;
$orange-300: #fbb77f; --gray-950: 21 23 28;
$orange-400: #faa35b;
$orange-500: #fa8f37; /* status */
$orange-600: #cd762e; --green-050: 236 247 237;
$orange-700: #a05c23; --green-100: 198 233 201;
$orange-800: #724119; --green-200: 160 219 165;
$orange-900: #45270f; --green-300: 122 204 129;
$yellow-050: #fffbed; --green-400: 84 190 93;
$yellow-100: #fdeeba; --green-500: 46 176 57;
$yellow-200: #fce48c; --green-600: 38 145 47;
$yellow-300: #fbd95e; --green-700: 30 113 37;
$yellow-400: #face30; --green-800: 21 80 26;
$yellow-500: #fac402; --green-900: 13 48 16;
$yellow-600: #cda102;
$yellow-700: #a07d02; --blue-010: 251 252 255;
$yellow-800: #725a01; --blue-050: 240 245 255;
$yellow-900: #453601; --blue-100: 191 212 255;
$transparent: transparent; --blue-200: 138 177 255;
$white: #fff; --blue-300: 91 146 255;
$black: #000; --blue-400: 56 122 255;
--blue-500: 21 99 255;
--blue-600: 15 79 209;
--blue-700: 14 64 163;
--blue-800: 10 45 116;
--blue-900: 6 27 70;
--red-010: 253 250 251;
--red-050: 249 236 238;
--red-100: 239 199 204;
--red-200: 229 162 170;
--red-300: 219 125 136;
--red-400: 209 88 102;
--red-500: 199 52 69;
--red-600: 163 43 57;
--red-700: 127 34 44;
--red-800: 91 24 32;
--red-900: 55 15 19;
--orange-050: 254 244 236;/*#fa8f37*/;
--orange-100: 253 224 200;
--orange-200: 252 204 164;
--orange-300: 251 183 127;
--orange-400: 250 163 91;
--orange-500: 250 143 55;
--orange-600: 205 118 46;
--orange-700: 160 92 35;
--orange-800: 114 65 25;
--orange-900: 69 39 15;
--yellow-050: 255 251 237;/*#fa8f37;*/
--yellow-100: 253 238 186;
--yellow-200: 252 228 140;
--yellow-300: 251 217 94;
--yellow-400: 250 206 48;
--yellow-500: 250 196 2;
--yellow-600: 205 161 2;
--yellow-700: 160 125 2;
--yellow-800: 114 90 1;
--yellow-900: 69 54 1;
--transparent: transparent;
--white: 255 255 255;
--black: 0 0 0;
}

259
ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss
View File

@ -1,259 +0,0 @@
/*TODO: Move this to the reset */
* {
border-width: 0;
}
%frame-border-000 {
/* same as decor-border-000 - but need to think about being able to import color on its own*/
border-style: solid;
}
%frame-brand-300 {
@extend %frame-border-000;
background-color: $transparent;
border-color: var(--decor-brand-600, inherit);
color: var(--typo-brand-600, inherit);
}
/* possibly filter bar */
/* modal close button */
%frame-gray-050 {
@extend %frame-border-000;
background-color: $gray-050;
border-color: $gray-300;
color: $gray-400;
}
/* modal main content */
%frame-gray-100 {
@extend %frame-border-000;
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: $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-yellow-800 {
@extend %frame-border-000;
background-color: $yellow-500;
border-color: $yellow-800;
color: $white;
}
%frame-green-500 {
@extend %frame-border-000;
background-color: $green-050;
border-color: $green-500;
color: $green-500;
}
%frame-green-800 {
@extend %frame-border-000;
background-color: $green-500;
border-color: $green-800;
color: $white;
}
%frame-blue-200 {
@extend %frame-border-000;
background-color: $white;
border-color: $blue-300;
color: $blue-300;
}
%frame-blue-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $blue-500;
color: $blue-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: $blue-200;
border-color: $gray-400;
color: $blue-050;
}
%frame-blue-700 {
@extend %frame-border-000;
background-color: $blue-400;
border-color: $blue-800;
color: $white;
}
%frame-blue-800 {
@extend %frame-border-000;
background-color: $blue-500;
border-color: $blue-800;
color: $white;
}
%frame-blue-900 {
@extend %frame-border-000;
background-color: $blue-700;
border-color: $blue-800;
color: $white;
}
%frame-red-300 {
@extend %frame-border-000;
background-color: $transparent;
border-color: $red-500;
color: $red-500;
}
%frame-red-500 {
@extend %frame-border-000;
background-color: $red-050;
border-color: $red-500;
color: $red-800;
}
%frame-red-600 {
@extend %frame-border-000;
background-color: $red-200;
border-color: $gray-400;
color: $white;
}
%frame-red-700 {
@extend %frame-border-000;
background-color: $red-500;
border-color: $red-800;
color: $white;
}
%frame-red-800 {
@extend %frame-border-000;
background-color: $red-500;
border-color: $red-800;
color: $white;
}
%frame-red-900 {
@extend %frame-border-000;
background-color: $red-700;
border-color: $red-800;
color: $white;
}
%frame-magenta-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $magenta-600;
color: $magenta-600;
}
%frame-magenta-800 {
@extend %frame-border-000;
background-color: $magenta-500;
border-color: $magenta-800;
color: $white;
}
%frame-steel-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $steel-600;
color: $steel-600;
}
%frame-steel-800 {
@extend %frame-border-000;
background-color: $steel-500;
border-color: $steel-800;
color: $white;
}
%frame-cobalt-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $cobalt-600;
color: $cobalt-600;
}
%frame-cobalt-800 {
@extend %frame-border-000;
background-color: $cobalt-500;
border-color: $cobalt-800;
color: $white;
}
%frame-indigo-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $indigo-600;
color: $indigo-600;
}
%frame-indigo-800 {
@extend %frame-border-000;
background-color: $indigo-500;
border-color: $indigo-800;
color: $white;
}
%frame-teal-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $teal-600;
color: $teal-600;
}
%frame-teal-800 {
@extend %frame-border-000;
background-color: $teal-500;
border-color: $teal-800;
color: $white;
}
%frame-cyan-300 {
@extend %frame-border-000;
background-color: $white;
border-color: $cyan-600;
color: $cyan-600;
}
%frame-cyan-800 {
@extend %frame-border-000;
background-color: $cyan-500;
border-color: $cyan-800;
color: $white;
}

178
ui/packages/consul-ui/app/styles/base/color/hex-variables.scss Normal file
View File

@ -0,0 +1,178 @@
:root {
/* vault */
--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;
/* consul */
--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;
/* consul refresh */
--strawberry-010: #fff2f8;
--strawberry-050: #fff2f8;
--strawberry-100: #f8d9e7;
--strawberry-200: #f8d9e7;
--strawberry-300: #e07eac;
--strawberry-400: #e07eac;
--strawberry-500: #ca2171;
--strawberry-600: #8e134a;
--strawberry-700: #8e134a;
--strawberry-800: #650d34;
--strawberry-900: #650d34;
/* vagrant */
--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;
/* terraform */
--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;
/* nomad */
--teal-050: #ebf8f3;/*#c3ecdc*/;
--teal-100: #c3ecdc;/*#e1e4e7*/;
--teal-200: #9bdfc5;
--teal-300: #74d3ae;
--teal-400: #4cc697;
--teal-500: #25ba81;
--teal-600: #1f996a;
--teal-700: #187753;
--teal-800: #11553b;
--teal-900: #0b3324;
/* packer */
--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;
/* ui */
/* removed to prevent confusion
--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-010: #fbfbfc;
--gray-050: #f7f8fa;
--gray-100: #ebeef2;
--gray-150: #ebeef2;
--gray-200: #dce0e6;
--gray-300: #bac1cc;
--gray-400: #8e96a3;
--gray-500: #6f7682;
--gray-600: #626873;
--gray-700: #525761;
--gray-800: #373a42;
--gray-850: #2c2e33;
--gray-900: #1f2124;
--gray-950: #15171c;
/* status */
--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-010: #fbfcff;
--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-010: #fdfafb;
--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;/*#fa8f37*/;
--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;/*#fa8f37;*/
--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;
--white: #fff;
--black: #000;
}

7
ui/packages/consul-ui/app/styles/base/color/index.scss
View File

@ -1,4 +1,7 @@
/*@import './hex-variables';*/
@import './base-variables'; @import './base-variables';
/* load in the ui theme */
@import './ui/index';
/* other themes should be added at a project level */
@import './semantic-variables'; @import './semantic-variables';
@import './frame-placeholders'; /*@import './theme-placeholders';*/
@import './theme-placeholders';

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

@ -0,0 +1,13 @@
%frame-magenta-300 {
@extend %frame-border-000;
background-color: rgb(var(--tone-gray-000));
border-color: rgb(var(--tone-magenta-600));
color: rgb(var(--tone-magenta-600));
}
%frame-magenta-800 {
@extend %frame-border-000;
background-color: rgb(var(--tone-magenta-500));
border-color: rgb(var(--tone-magenta-800));
color: rgb(var(--tone-gray-000));
}

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

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

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

@ -0,0 +1,18 @@
%theme-dark-low-contrast {
--tone-magenta-000: var(--white);
--tone-magenta-050: var(--magenta-050);
--tone-magenta-100: var(--magenta-100);
--tone-magenta-150: var(--magenta-150);
--tone-magenta-200: var(--magenta-200);
--tone-magenta-300: var(--magenta-300);
--tone-magenta-400: var(--magenta-400);
--tone-magenta-500: var(--magenta-500);
--tone-magenta-600: var(--magenta-600);
--tone-magenta-700: var(--magenta-700);
--tone-magenta-800: var(--magenta-800);
--tone-magenta-850: var(--magenta-850);
--tone-magenta-900: var(--magenta-900);
--tone-magenta-950: var(--magenta-950);
--tone-magenta-999: var(--black);
}

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

@ -0,0 +1,18 @@
%theme-dark {
--tone-magenta-000: var(--white);
--tone-magenta-050: var(--magenta-050);
--tone-magenta-100: var(--magenta-100);
--tone-magenta-150: var(--magenta-150);
--tone-magenta-200: var(--magenta-200);
--tone-magenta-300: var(--magenta-300);
--tone-magenta-400: var(--magenta-400);
--tone-magenta-500: var(--magenta-500);
--tone-magenta-600: var(--magenta-600);
--tone-magenta-700: var(--magenta-700);
--tone-magenta-800: var(--magenta-800);
--tone-magenta-850: var(--magenta-850);
--tone-magenta-900: var(--magenta-900);
--tone-magenta-950: var(--magenta-950);
--tone-magenta-999: var(--black);
}

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

@ -0,0 +1,18 @@
%theme-light {
--tone-magenta-000: var(--white);
--tone-magenta-050: var(--magenta-050);
--tone-magenta-100: var(--magenta-100);
--tone-magenta-150: var(--magenta-150);
--tone-magenta-200: var(--magenta-200);
--tone-magenta-300: var(--magenta-300);
--tone-magenta-400: var(--magenta-400);
--tone-magenta-500: var(--magenta-500);
--tone-magenta-600: var(--magenta-600);
--tone-magenta-700: var(--magenta-700);
--tone-magenta-800: var(--magenta-800);
--tone-magenta-850: var(--magenta-850);
--tone-magenta-900: var(--magenta-900);
--tone-magenta-950: var(--magenta-950);
--tone-magenta-999: var(--black);
}

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

@ -0,0 +1,18 @@
%theme-light-high-contrast {
--tone-magenta-000: var(--white);
--tone-magenta-050: var(--magenta-050);
--tone-magenta-100: var(--magenta-100);
--tone-magenta-150: var(--magenta-150);
--tone-magenta-200: var(--magenta-200);
--tone-magenta-300: var(--magenta-300);
--tone-magenta-400: var(--magenta-400);
--tone-magenta-500: var(--magenta-500);
--tone-magenta-600: var(--magenta-600);
--tone-magenta-700: var(--magenta-700);
--tone-magenta-800: var(--magenta-800);
--tone-magenta-850: var(--magenta-850);
--tone-magenta-900: var(--magenta-900);
--tone-magenta-950: var(--magenta-950);
--tone-magenta-999: var(--black);
}

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

@ -1,12 +1,27 @@
$color-primary: $blue-500; :root {
$color-dangerous: $red-500; --color-primary: var(--tone-blue-500);
$color-primary-disabled: $blue-500; --color-dangerous: var(--tone-red-500);
$color-transparent: transparent; --color-primary-disabled: var(--tone-blue-500);
$color-neutral: $gray-500;
$color-action: $blue-500; --color-neutral: var(--tone-gray-500);
$color-info: $blue-500; --color-action: var(--tone-blue-500);
$color-success: $green-500; --color-info: var(--tone-blue-500);
$color-failure: $red-500; /*--color-active: var(--tone-blue-500); ?? form pre-focus*/
$color-danger: $red-500; --color-success: var(--tone-green-500);
$color-warning: $yellow-500; --color-failure: var(--tone-red-500);
$color-alert: $orange-500; --color-danger: var(--tone-red-500);
--color-warning: var(--tone-yellow-500);
--color-alert: var(--tone-orange-500);
/* --color-keyline-000: var(--white); */
/* --color-keyline-050: var(); */
/* --color-keyline-100: var(--gray-100); */
/* --color-keyline-200: var(--gray-200); */
/* --color-keyline-300: var(--gray-300); */
/* --color-keyline-400: var(--gray-400); */
/* --color-keyline-500: var(--gray-500); */
/* --color-keyline-600: var(--gray-600); */
/* --color-keyline-700: var(); */
/* --color-keyline-800: var(); */
/* --color-keyline-900: var(--black); */
}

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

@ -0,0 +1,13 @@
%frame-strawberry-300 {
@extend %frame-border-000;
background-color: rgb(var(--tone-gray-000));
border-color: rgb(var(--tone-strawberry-600));
color: rgb(var(--tone-strawberry-600));
}
%frame-strawberry-800 {
@extend %frame-border-000;
background-color: rgb(var(--tone-strawberry-500));
border-color: rgb(var(--tone-strawberry-800));
color: rgb(var(--tone-gray-000));
}

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

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

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

@ -0,0 +1,18 @@
%theme-dark-high-contrast {
--tone-strawberry-000: var(--white);
--tone-strawberry-050: var(--strawberry-050);
--tone-strawberry-100: var(--strawberry-100);
--tone-strawberry-150: var(--strawberry-150);
--tone-strawberry-200: var(--strawberry-200);
--tone-strawberry-300: var(--strawberry-300);
--tone-strawberry-400: var(--strawberry-400);
--tone-strawberry-500: var(--strawberry-500);
--tone-strawberry-600: var(--strawberry-600);
--tone-strawberry-700: var(--strawberry-700);
--tone-strawberry-800: var(--strawberry-800);
--tone-strawberry-850: var(--strawberry-850);
--tone-strawberry-900: var(--strawberry-900);
--tone-strawberry-950: var(--strawberry-950);
--tone-strawberry-999: var(--black);
}

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

@ -0,0 +1,18 @@
%theme-dark {
--tone-strawberry-000: var(--white);
--tone-strawberry-050: var(--strawberry-050);
--tone-strawberry-100: var(--strawberry-100);
--tone-strawberry-150: var(--strawberry-150);
--tone-strawberry-200: var(--strawberry-200);
--tone-strawberry-300: var(--strawberry-300);
--tone-strawberry-400: var(--strawberry-400);
--tone-strawberry-500: var(--strawberry-500);
--tone-strawberry-600: var(--strawberry-600);
--tone-strawberry-700: var(--strawberry-700);
--tone-strawberry-800: var(--strawberry-800);
--tone-strawberry-850: var(--strawberry-850);
--tone-strawberry-900: var(--strawberry-900);
--tone-strawberry-950: var(--strawberry-950);
--tone-strawberry-999: var(--black);
}

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

@ -0,0 +1,18 @@
%theme-light-high-contrast {
--tone-strawberry-000: var(--white);
--tone-strawberry-050: var(--strawberry-050);
--tone-strawberry-100: var(--strawberry-100);
--tone-strawberry-150: var(--strawberry-150);
--tone-strawberry-200: var(--strawberry-200);
--tone-strawberry-300: var(--strawberry-300);
--tone-strawberry-400: var(--strawberry-400);
--tone-strawberry-500: var(--strawberry-500);
--tone-strawberry-600: var(--strawberry-600);
--tone-strawberry-700: var(--strawberry-700);
--tone-strawberry-800: var(--strawberry-800);
--tone-strawberry-850: var(--strawberry-850);
--tone-strawberry-900: var(--strawberry-900);
--tone-strawberry-950: var(--strawberry-950);
--tone-strawberry-999: var(--black);
}

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

@ -0,0 +1,18 @@
%theme-light {
--tone-strawberry-000: var(--white);
--tone-strawberry-050: var(--strawberry-050);
--tone-strawberry-100: var(--strawberry-100);
--tone-strawberry-150: var(--strawberry-150);
--tone-strawberry-200: var(--strawberry-200);
--tone-strawberry-300: var(--strawberry-300);
--tone-strawberry-400: var(--strawberry-400);
--tone-strawberry-500: var(--strawberry-500);
--tone-strawberry-600: var(--strawberry-600);
--tone-strawberry-700: var(--strawberry-700);
--tone-strawberry-800: var(--strawberry-800);
--tone-strawberry-850: var(--strawberry-850);
--tone-strawberry-900: var(--strawberry-900);
--tone-strawberry-950: var(--strawberry-950);
--tone-strawberry-999: var(--black);
}

Some files were not shown because too many files have changed in this diff Show More