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:
parent
21915e600e
commit
2200cde988
|
@ -0,0 +1,5 @@
|
|||
```release-note:improvement
|
||||
ui: Move the majority of our SASS variables to use native CSS custom
|
||||
properties
|
||||
```
|
||||
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
width: 26px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
color: $blue-500;
|
||||
color: rgb(var(--tone-blue-500));
|
||||
}
|
||||
#toolbar-toggle {
|
||||
display: none;
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
button {
|
||||
@extend %button;
|
||||
color: $color-action;
|
||||
color: rgb(var(--color-action));
|
||||
float: right;
|
||||
grid-area: toggle-button;
|
||||
margin-top: 1em;
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
%main-header-horizontal::before {
|
||||
background-color: var(--gray-000);
|
||||
background-color: rgb(var(--tone-gray-000));
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
/**/
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
```
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
%pill {
|
||||
border-radius: $decor-radius-100;
|
||||
border-radius: var(--decor-radius-100);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -59,5 +59,5 @@
|
|||
font-weight: normal;
|
||||
}
|
||||
%table tbody td em {
|
||||
color: $gray-500;
|
||||
color: rgb(var(--tone-gray-500));
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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';*/
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import './themes/light';
|
||||
@import './themes/dark';
|
||||
@import './themes/light-high-contrast';
|
||||
@import './themes/dark-high-contrast';
|
||||
@import './frame-placeholders';
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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); */
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import './themes/light';
|
||||
@import './themes/dark';
|
||||
@import './themes/light-high-contrast';
|
||||
@import './themes/dark-high-contrast';
|
||||
@import './frame-placeholders';
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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
Loading…
Reference in New Issue