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

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,11 +2,11 @@
text-transform: uppercase;
}
%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 */
/* in the center so if the background color of what the */
/* line is on is different, then this should be different */
%auth-form-hr span {
background-color: $white;
background-color: rgb(var(--white));
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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

View File

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

View File

@ -61,7 +61,7 @@
overflow-x: visible !important;
}
.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::before {
@ -113,5 +113,5 @@
%composite-row-header .policy-management dd::before,
%composite-row-detail .policy-management::before {
@extend %with-star-fill-mask, %as-pseudo;
background-color: var(--brand-600);
background-color: rgb(var(--brand-600));
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,30 +1,30 @@
%list-row {
list-style-type: none;
border: $decor-border-100;
border-top-color: $transparent;
border-bottom-color: $gray-200;
border-right-color: $transparent;
border-left-color: $transparent;
border: var(--decor-border-100);
border-top-color: var(--transparent);
border-bottom-color: rgb(var(--tone-gray-200));
border-right-color: var(--transparent);
border-left-color: var(--transparent);
}
%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);
border-top-color: $transparent;
border-top-color: var(--transparent);
cursor: pointer;
}
%list-row-header {
color: $black;
color: var(--black);
}
%list-row-header * {
color: inherit;
}
%list-row-detail {
color: $gray-500;
color: rgb(var(--tone-gray-500));
}
%list-row-detail a {
color: inherit;
}
%list-row-detail a:hover {
color: $color-action;
color: rgb(var(--color-action));
text-decoration: underline;
}

View File

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

View File

@ -1,5 +1,5 @@
%main-nav-horizontal-action {
border-radius: $decor-radius-200;
border-radius: var(--decor-radius-200);
cursor: pointer;
}
%main-nav-horizontal-action > a {
@ -16,11 +16,11 @@
cursor: pointer;
}
%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-intent,
%main-nav-horizontal-action-active {
color: var(--gray-600);
color: rgb(var(--tone-gray-600));
}
/**/

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 */
/* for hoisting, otherwise the viewport is the containing block */
transform: translate(0, 0);
background-color: var(--gray-600);
background-color: rgb(var(--tone-gray-600));
padding-top: 64px;
}
```

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,142 +1,178 @@
$steel-050: #f5f6f7;
$steel-100: #e1e4e7;
$steel-200: #cdd3d7;
$steel-300: #b9c1c7;
$steel-400: #a5b0b7;
$steel-500: #919fa8;
$steel-600: #77838a;
$steel-700: #5d666b;
$steel-800: #42494d;
$steel-900: #282c2e;
$magenta-050: #f9ebf2;
$magenta-100: #efc4d8;
$magenta-200: #e59ebe;
$magenta-300: #da77a4;
$magenta-400: #d0508a;
$magenta-500: #c62a71;
$magenta-600: #9e2159;
$magenta-700: #7d1a47;
$magenta-800: #5a1434;
$magenta-900: #360c1f;
:root {
/* vault */
--steel-050: 245 246 247;
--steel-100: 225 228 231;
--steel-200: 205 211 215;
--steel-300: 185 193 199;
--steel-400: 165 176 183;
--steel-500: 145 159 168;
--steel-600: 119 131 138;
--steel-700: 93 102 107;
--steel-800: 66 73 77;
--steel-900: 40 44 46;
$rose-010: #fff2f8;
$rose-050: #fff2f8;
$rose-100: #f8d9e7;
$rose-200: #f8d9e7;
$rose-300: #e07eac;
$rose-400: #e07eac;
$rose-500: #ca2171;
$rose-600: #8e134a;
$rose-700: #8e134a;
$rose-800: #650d34;
$rose-900: #650d34;
/* consul */
--magenta-050: 249 235 242;
--magenta-100: 239 196 216;
--magenta-200: 229 158 190;
--magenta-300: 218 119 164;
--magenta-400: 208 80 138;
--magenta-500: 198 42 113;
--magenta-600: 158 33 89;
--magenta-700: 125 26 71;
--magenta-800: 90 20 52;
--magenta-900: 54 12 31;
$cobalt-050: #f0f5ff;
$cobalt-100: #bfd4ff;
$cobalt-200: #8ab1ff;
$cobalt-300: #5b92ff;
$cobalt-400: #387aff;
$cobalt-500: #1563ff;
$cobalt-600: #0f4fd1;
$cobalt-700: #0e40a3;
$cobalt-800: #0a2d74;
$cobalt-900: #061b46;
$indigo-050: #eeedfc;
$indigo-100: #d5d2f7;
$indigo-200: #aea7f2;
$indigo-300: #8d83ed;
$indigo-400: #7568e8;
$indigo-500: #5c4ee5;
$indigo-600: #4c40bc;
$indigo-700: #3b3292;
$indigo-800: #2a2469;
$indigo-900: #1a163f;
$teal-050: #ebf8f3;
$teal-100: #c3ecdc;
$teal-200: #9bdfc5;
$teal-300: #74d3ae;
$teal-400: #4cc697;
$teal-500: #25ba81;
$teal-600: #1f996a;
$teal-700: #187753;
$teal-800: #11553b;
$teal-900: #0b3324;
$cyan-050: #e7f8ff;
$cyan-100: #b9ecff;
$cyan-200: #8be0ff;
$cyan-300: #5cd3ff;
$cyan-400: #2ec7ff;
$cyan-500: #00bbff;
$cyan-600: #009fd9;
$cyan-700: #0077a3;
$cyan-800: #005574;
$cyan-900: #003346;
$gray-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;
$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;
$orange-100: #fde0c8;
$orange-200: #fccca4;
$orange-300: #fbb77f;
$orange-400: #faa35b;
$orange-500: #fa8f37;
$orange-600: #cd762e;
$orange-700: #a05c23;
$orange-800: #724119;
$orange-900: #45270f;
$yellow-050: #fffbed;
$yellow-100: #fdeeba;
$yellow-200: #fce48c;
$yellow-300: #fbd95e;
$yellow-400: #face30;
$yellow-500: #fac402;
$yellow-600: #cda102;
$yellow-700: #a07d02;
$yellow-800: #725a01;
$yellow-900: #453601;
$transparent: transparent;
$white: #fff;
$black: #000;
/* consul refresh */
--strawberry-010: 255 242 248;
--strawberry-050: 255 242 248;
--strawberry-100: 248 217 231;
--strawberry-200: 248 217 231;
--strawberry-300: 224 126 172;
--strawberry-400: 224 126 172;
--strawberry-500: 202 33 113;
--strawberry-600: 142 19 74;
--strawberry-700: 142 19 74;
--strawberry-800: 101 13 52;
--strawberry-900: 101 13 52;
/* vagrant */
--cobalt-050: 240 245 255;
--cobalt-100: 191 212 255;
--cobalt-200: 138 177 255;
--cobalt-300: 91 146 255;
--cobalt-400: 56 122 255;
--cobalt-500: 21 99 255;
--cobalt-600: 15 79 209;
--cobalt-700: 14 64 163;
--cobalt-800: 10 45 116;
--cobalt-900: 6 27 70;
/* terraform */
--indigo-050: 238 237 252;
--indigo-100: 213 210 247;
--indigo-200: 174 167 242;
--indigo-300: 141 131 237;
--indigo-400: 117 104 232;
--indigo-500: 92 78 229;
--indigo-600: 76 64 188;
--indigo-700: 59 50 146;
--indigo-800: 42 36 105;
--indigo-900: 26 22 63;
/* nomad */
--teal-050: 235 248 243;/*#c3ecdc*/;
--teal-100: 195 236 220;/*#e1e4e7*/;
--teal-200: 155 223 197;
--teal-300: 116 211 174;
--teal-400: 76 198 151;
--teal-500: 37 186 129;
--teal-600: 31 153 106;
--teal-700: 24 119 83;
--teal-800: 17 85 59;
--teal-900: 11 51 36;
/* packer */
--cyan-050: 231 248 255;
--cyan-100: 185 236 255;
--cyan-200: 139 224 255;
--cyan-300: 92 211 255;
--cyan-400: 46 199 255;
--cyan-500: 0 187 255;
--cyan-600: 0 159 217;
--cyan-700: 0 119 163;
--cyan-800: 0 85 116;
--cyan-900: 0 51 70;
/* 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: 251 251 252;
--gray-050: 247 248 250;
--gray-100: 235 238 242;
--gray-150: 235 238 242;
--gray-200: 220 224 230;
--gray-300: 186 193 204;
--gray-400: 142 150 163;
--gray-500: 111 118 130;
--gray-600: 98 104 115;
--gray-700: 82 87 97;
--gray-800: 55 58 66;
--gray-850: 44 46 51;
--gray-900: 31 33 36;
--gray-950: 21 23 28;
/* status */
--green-050: 236 247 237;
--green-100: 198 233 201;
--green-200: 160 219 165;
--green-300: 122 204 129;
--green-400: 84 190 93;
--green-500: 46 176 57;
--green-600: 38 145 47;
--green-700: 30 113 37;
--green-800: 21 80 26;
--green-900: 13 48 16;
--blue-010: 251 252 255;
--blue-050: 240 245 255;
--blue-100: 191 212 255;
--blue-200: 138 177 255;
--blue-300: 91 146 255;
--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;
}

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

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

View File

@ -1,4 +1,7 @@
/*@import './hex-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 './frame-placeholders';
@import './theme-placeholders';
/*@import './theme-placeholders';*/

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

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

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

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

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

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

View File

@ -1,12 +1,27 @@
$color-primary: $blue-500;
$color-dangerous: $red-500;
$color-primary-disabled: $blue-500;
$color-transparent: transparent;
$color-neutral: $gray-500;
$color-action: $blue-500;
$color-info: $blue-500;
$color-success: $green-500;
$color-failure: $red-500;
$color-danger: $red-500;
$color-warning: $yellow-500;
$color-alert: $orange-500;
:root {
--color-primary: var(--tone-blue-500);
--color-dangerous: var(--tone-red-500);
--color-primary-disabled: var(--tone-blue-500);
--color-neutral: var(--tone-gray-500);
--color-action: var(--tone-blue-500);
--color-info: var(--tone-blue-500);
/*--color-active: var(--tone-blue-500); ?? form pre-focus*/
--color-success: var(--tone-green-500);
--color-failure: var(--tone-red-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); */
}

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

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

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

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

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

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