@dscout/particle 1.0.0-alpha.3 → 1.0.0-alpha.4

package/lib/stylesheets/particle.css

@@ -101,7 +101,6 @@ h6,
 p{
   font-size:var(--font-size--base);
   font-weight:normal;
-  margin-top:1em;
   margin-bottom:1em;
 }
 
@@ -175,6 +174,7 @@ pre code{
 
 .Avatar{
   align-items:center;
+  background-color:var(--Avatar____bg-color);
   background-position:center;
   background-size:cover;
   border-radius:50%;
@@ -187,17 +187,18 @@ pre code{
   width:40px;
 }
 
-.Avatar--background{
-  background-color:var(--Avatar____bg-color);
+.Avatar--loaded{
+  background-color:initial;
 }
 
-.Avatar--initials{
+.Avatar__Initials{
   line-height:1;
 }
 
 .theme--bandit{
   --Attribute____padding:0.5em 1em;
   --Attribute____font-size:var(--font-size--s);
+  --Attribute____line-height:var(--line-height--solid);
   --Attribute____border-color:var(--color--gray-4);
   --Attribute____border-radius:var(--radius--med);
   --Attribute____border-width:2px;
@@ -206,21 +207,22 @@ pre code{
   --Attribute--hover____border-color:rgba(var(--color--dscout-rgb), 0.7);
   --Attribute--selected____color:var(--color--invert);
   --Attribute--selected____background-color:var(--color--dscout);
-  --Attribute--selected____border-color:rgba(var(--color--dscout-rgb), 0.3);
+  --Attribute--selected____border-color:rgba(var(--color--dscout-rgb), 0.5);
 }
 
 .theme--researcher{
-  --Attribute____padding:0.25em 0.75em;
+  --Attribute____padding:0.375em 0.75em;
   --Attribute____font-size:var(--font-size--xs);
-  --Attribute____border-color:rgba(var(--color--main-rgb), 0.1);
+  --Attribute____line-height:var(--line-height--solid);
+  --Attribute____border-color:rgba(var(--color--main-rgb), 0.3);
   --Attribute____border-radius:var(--radius--tiny);
   --Attribute____border-width:1px;
-  --Attribute____color:rgba(var(--color--main-rgb), 0.3);
-  --Attribute--hover____color:rgba(var(--color--main-rgb), 0.65);
-  --Attribute--hover____border-color:rgba(var(--color--main-rgb), 0.2);
+  --Attribute____color:rgba(var(--color--main-rgb), 0.6275);
+  --Attribute--hover____color:rgba(var(--color--main-rgb), 0.875);
+  --Attribute--hover____border-color:rgba(var(--color--main-rgb), 0.5);
   --Attribute--selected____color:var(--color--dscout);
   --Attribute--selected____background-color:none;
-  --Attribute--selected____border-color:rgba(var(--color--dscout-rgb), 0.3);
+  --Attribute--selected____border-color:rgba(var(--color--dscout-rgb), 0.5);
 }
 
 .Attribute__Selector{
@@ -245,6 +247,10 @@ pre code{
   font-size:inherit;
   position:absolute;
 }
+.Attribute__Input:disabled + .Attribute__Label{
+  opacity:0.3;
+  pointer-events:none;
+}
 .Attribute__Input:focus{
   outline:none;
 }
@@ -259,16 +265,21 @@ pre code{
   border-radius:var(--Attribute____border-radius);
   color:var(--Attribute____color);
   cursor:pointer;
-  font-size:var(--Attribute____font-size);
-  letter-spacing:var(--tracked--loose);
+  display:inline-block;
   padding:var(--Attribute____padding);
-  text-transform:uppercase;
   transition:border var(--timing--hover), color var(--timing--hover);
 }
 .Attribute__Label:hover{
   border:var(--Attribute____border-width) solid var(--Attribute--hover____border-color);
   color:var(--Attribute--hover____color);
 }
+.Attribute__Label--read-only{
+  cursor:default;
+}
+.Attribute__Label--read-only:hover{
+  border:var(--Attribute____border-width) solid var(--Attribute____border-color);
+  color:var(--Attribute____color);
+}
 .Attribute__Label--selected, .Attribute__Label--selected:hover{
   background-color:var(--Attribute--selected____background-color);
   border-color:var(--Attribute--selected____border-color);
@@ -276,6 +287,14 @@ pre code{
   cursor:default;
 }
 
+.Attribute__Label__Content{
+  display:block;
+  font-size:var(--Attribute____font-size);
+  letter-spacing:var(--tracked--loose);
+  line-height:var(--Attribute____line-height);
+  text-transform:uppercase;
+}
+
 .Blitz__Wrapper{
   display:flex;
   justify-content:center;
@@ -404,9 +423,9 @@ pre code{
   --Button____color:var(--color--invert);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--main-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--main-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--main-rgb), 0.25);
@@ -421,7 +440,7 @@ pre code{
      -moz-appearance:none;
           appearance:none;
   background-color:var(--Button____bg-color);
-  border-bottom:none;
+  border:none;
   border-radius:var(--Button____radius);
   color:var(--Button____color);
   cursor:pointer;
@@ -440,7 +459,6 @@ pre code{
 }
 .Button:hover{
   background-color:var(--Button--hover____bg-color);
-  border-bottom:none;
   color:var(--Button--hover____color);
 }
 .Button:active{
@@ -495,16 +513,60 @@ pre code{
   box-shadow:none;
 }
 
+.Button--color-white{
+  --Button____bg-color:var(--color--white);
+  --Button--hover____bg-color:rgba(var(--color--white-rgb), 0.9);
+  --Button--active____bg-color:rgba(var(--color--white-rgb), 0.85);
+  --Button____color:var(--color--black);
+  --Button--hover____color:var(--Button____color);
+  --Button--active____color:var(--Button____color);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--glass____bg-color:rgba(var(--color--white-rgb), 0.1);
+  --Button--glass--hover____bg-color:rgba(var(--color--white-rgb), 0.2);
+  --Button--glass--active____bg-color:rgba(var(--color--white-rgb), 0.25);
+  --Button--glass____color:var(--color--white);
+  --Button--glass--hover____color:var(--color--white);
+  --Button--glass--active____color:var(--color--white);
+  --Button--outline____b-color:rgba(var(--color--white-rgb), 0.5);
+  --Button--outline--hover____b-color:rgba(var(--color--white-rgb), 0.7);
+  --Button--outline--active____b-color:rgba(var(--color--white-rgb), 0.8);
+  --Button--outline____color:var(--color--white);
+}
+
+.Button--color-black{
+  --Button____bg-color:var(--color--black);
+  --Button--hover____bg-color:rgba(var(--color--black-rgb), 0.9);
+  --Button--active____bg-color:rgba(var(--color--black-rgb), 0.85);
+  --Button____color:var(--color--white);
+  --Button--hover____color:var(--Button____color);
+  --Button--active____color:var(--Button____color);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--glass____bg-color:rgba(var(--color--black-rgb), 0.1);
+  --Button--glass--hover____bg-color:rgba(var(--color--black-rgb), 0.2);
+  --Button--glass--active____bg-color:rgba(var(--color--black-rgb), 0.25);
+  --Button--glass____color:var(--color--black);
+  --Button--glass--hover____color:var(--color--black);
+  --Button--glass--active____color:var(--color--black);
+  --Button--outline____b-color:rgba(var(--color--black-rgb), 0.5);
+  --Button--outline--hover____b-color:rgba(var(--color--black-rgb), 0.7);
+  --Button--outline--active____b-color:rgba(var(--color--black-rgb), 0.8);
+  --Button--outline____color:var(--color--black);
+}
+
 .Button--color-alert{
   --Button____bg-color:var(--color--alert);
   --Button--hover____bg-color:var(--color--alert-dark);
   --Button--active____bg-color:var(--color--alert-darkest);
-  --Button____color:var(--color--invert);
+  --Button____color:var(--color--white);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--alert-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--alert-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--alert-rgb), 0.25);
@@ -521,18 +583,18 @@ pre code{
   --Button____bg-color:var(--color--close);
   --Button--hover____bg-color:var(--color--close-dark);
   --Button--active____bg-color:var(--color--close-darkest);
-  --Button____color:var(--color--invert);
+  --Button____color:var(--color--white);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--close-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--close-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--close-rgb), 0.25);
-  --Button--glass____color:var(--color--close);
-  --Button--glass--hover____color:var(--Button--glass____color);
-  --Button--glass--active____color:var(--Button--glass____color);
+  --Button--glass____color:var(--color--close-dark);
+  --Button--glass--hover____color:var(--color--close-darkest);
+  --Button--glass--active____color:var(--color--close-darkest);
   --Button--outline____b-color:rgba(var(--color--close-rgb), 0.4);
   --Button--outline--hover____b-color:rgba(var(--color--close-rgb), 0.7);
   --Button--outline--active____b-color:rgba(var(--color--close-rgb), 0.8);
@@ -543,12 +605,12 @@ pre code{
   --Button____bg-color:var(--color--coachmark);
   --Button--hover____bg-color:var(--color--coachmark-dark);
   --Button--active____bg-color:var(--color--coachmark-darkest);
-  --Button____color:var(--color--invert);
+  --Button____color:var(--color--white);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--coachmark-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--coachmark-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--coachmark-rgb), 0.25);
@@ -565,12 +627,12 @@ pre code{
   --Button____bg-color:var(--color--dscout);
   --Button--hover____bg-color:var(--color--dscout-dark);
   --Button--active____bg-color:var(--color--dscout-darkest);
-  --Button____color:var(--color--invert);
+  --Button____color:var(--color--white);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--dscout-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--dscout-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--dscout-rgb), 0.25);
@@ -587,18 +649,18 @@ pre code{
   --Button____bg-color:var(--color--archive);
   --Button--hover____bg-color:var(--color--archive-dark);
   --Button--active____bg-color:var(--color--archive-darkest);
-  --Button____color:var(--color--invert);
+  --Button____color:var(--color--white);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--archive-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--archive-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--archive-rgb), 0.25);
-  --Button--glass____color:var(--color--archive);
-  --Button--glass--hover____color:var(--Button--glass____color);
-  --Button--glass--active____color:var(--Button--glass____color);
+  --Button--glass____color:var(--color--archive-dark);
+  --Button--glass--hover____color:var(--color--archive-darkest);
+  --Button--glass--active____color:var(--color--archive-darkest);
   --Button--outline____b-color:rgba(var(--color--archive-rgb), 0.4);
   --Button--outline--hover____b-color:rgba(var(--color--archive-rgb), 0.7);
   --Button--outline--active____b-color:rgba(var(--color--archive-rgb), 0.8);
@@ -606,15 +668,15 @@ pre code{
 }
 
 .Button--color-none{
-  --Button____bg-color:rgba(var(--color---main-rgb), 0);
+  --Button____bg-color:rgba(var(--color--main-rgb), 0);
   --Button--hover____bg-color:rgba(var(--color--main-rgb), 0.05);
   --Button--active____bg-color:rgba(var(--color--main-rgb), 0.08);
-  --Button____color:var(--color--gray-1);
+  --Button____color:rgba(var(--color--main-rgb), 0.9);
   --Button--hover____color:rgba(var(--color--main-rgb), 0.8);
   --Button--active____color:var(--color--main);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--main-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--main-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--main-rgb), 0.25);
@@ -631,18 +693,18 @@ pre code{
   --Button____bg-color:var(--color--success);
   --Button--hover____bg-color:var(--color--success-dark);
   --Button--active____bg-color:var(--color--success-darkest);
-  --Button____color:var(--color--invert);
+  --Button____color:var(--color--white);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--success-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--success-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--success-rgb), 0.25);
-  --Button--glass____color:var(--color--success);
-  --Button--glass--hover____color:var(--Button--glass____color);
-  --Button--glass--active____color:var(--Button--glass____color);
+  --Button--glass____color:var(--color--success-dark);
+  --Button--glass--hover____color:var(--color--success-darkest);
+  --Button--glass--active____color:var(--color--success-darkest);
   --Button--outline____b-color:rgba(var(--color--success-rgb), 0.4);
   --Button--outline--hover____b-color:rgba(var(--color--success-rgb), 0.7);
   --Button--outline--active____b-color:rgba(var(--color--success-rgb), 0.8);
@@ -653,18 +715,18 @@ pre code{
   --Button____bg-color:var(--color--screener);
   --Button--hover____bg-color:var(--color--screener-dark);
   --Button--active____bg-color:var(--color--screener-darkest);
-  --Button____color:var(--color--invert);
+  --Button____color:var(--color--white);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--screener-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--screener-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--screener-rgb), 0.25);
-  --Button--glass____color:var(--color--screener);
-  --Button--glass--hover____color:var(--Button--glass____color);
-  --Button--glass--active____color:var(--Button--glass____color);
+  --Button--glass____color:var(--color--screener-dark);
+  --Button--glass--hover____color:var(--color--screener-darkest);
+  --Button--glass--active____color:var(--color--screener-darkest);
   --Button--outline____b-color:rgba(var(--color--screener-rgb), 0.4);
   --Button--outline--hover____b-color:rgba(var(--color--screener-rgb), 0.7);
   --Button--outline--active____b-color:rgba(var(--color--screener-rgb), 0.8);
@@ -675,18 +737,18 @@ pre code{
   --Button____bg-color:var(--color--diary);
   --Button--hover____bg-color:var(--color--diary-dark);
   --Button--active____bg-color:var(--color--diary-darkest);
-  --Button____color:var(--color--invert);
+  --Button____color:var(--color--white);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--diary-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--diary-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--diary-rgb), 0.25);
-  --Button--glass____color:var(--color--diary);
-  --Button--glass--hover____color:var(--Button--glass____color);
-  --Button--glass--active____color:var(--Button--glass____color);
+  --Button--glass____color:var(--color--diary-dark);
+  --Button--glass--hover____color:var(--color--diary-darkest);
+  --Button--glass--active____color:var(--color--diary-darkest);
   --Button--outline____b-color:rgba(var(--color--diary-rgb), 0.4);
   --Button--outline--hover____b-color:rgba(var(--color--diary-rgb), 0.7);
   --Button--outline--active____b-color:rgba(var(--color--diary-rgb), 0.8);
@@ -697,18 +759,18 @@ pre code{
   --Button____bg-color:var(--color--note);
   --Button--hover____bg-color:var(--color--note-dark);
   --Button--active____bg-color:var(--color--note-darkest);
-  --Button____color:var(--color--archive);
+  --Button____color:var(--color--archive-darkest);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--note-rgb), 0.25);
   --Button--glass--hover____bg-color:rgba(var(--color--note-rgb), 0.35);
   --Button--glass--active____bg-color:rgba(var(--color--note-rgb), 0.4);
-  --Button--glass____color:var(--color--archive);
-  --Button--glass--hover____color:var(--Button--glass____color);
-  --Button--glass--active____color:var(--Button--glass____color);
+  --Button--glass____color:var(--color--archive-dark);
+  --Button--glass--hover____color:var(--color--archive-darkest);
+  --Button--glass--active____color:var(--color--archive-darkest);
   --Button--outline____b-color:rgba(var(--color--note-rgb), 0.4);
   --Button--outline--hover____b-color:rgba(var(--color--note-rgb), 0.7);
   --Button--outline--active____b-color:rgba(var(--color--note-rgb), 0.8);
@@ -719,18 +781,18 @@ pre code{
   --Button____bg-color:var(--color--test);
   --Button--hover____bg-color:var(--color--test-dark);
   --Button--active____bg-color:var(--color--test-darkest);
-  --Button____color:var(--color--invert);
+  --Button____color:var(--color--white);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--test-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--test-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--test-rgb), 0.25);
-  --Button--glass____color:var(--color--test);
-  --Button--glass--hover____color:var(--Button--glass____color);
-  --Button--glass--active____color:var(--Button--glass____color);
+  --Button--glass____color:var(--color--test-dark);
+  --Button--glass--hover____color:var(--color--test-darkest);
+  --Button--glass--active____color:var(--color--test-darkest);
   --Button--outline____b-color:rgba(var(--color--test-rgb), 0.4);
   --Button--outline--hover____b-color:rgba(var(--color--test-rgb), 0.7);
   --Button--outline--active____b-color:rgba(var(--color--test-rgb), 0.8);
@@ -744,15 +806,15 @@ pre code{
   --Button____color:var(--color--main);
   --Button--hover____color:var(--Button____color);
   --Button--active____color:var(--Button____color);
-  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--main-rgb), 0.25);
-  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--main-rgb), 0.3);
-  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--main-rgb), 0.25);
+  --Button--shadow____shadow:0 5px 8px 0px rgba(var(--color--shadow-rgb), 0.25);
+  --Button--shadow--hover____shadow:0 15px 20px 0px rgba(var(--color--shadow-rgb), 0.3);
+  --Button--shadow--active____shadow:0 2px 3px 0px rgba(var(--color--shadow-rgb), 0.25);
   --Button--glass____bg-color:rgba(var(--color--invert-rgb), 0.1);
   --Button--glass--hover____bg-color:rgba(var(--color--invert-rgb), 0.2);
   --Button--glass--active____bg-color:rgba(var(--color--invert-rgb), 0.25);
   --Button--glass____color:var(--color--invert);
-  --Button--glass--hover____color:var(--Button--glass____color);
-  --Button--glass--active____color:var(--Button--glass____color);
+  --Button--glass--hover____color:var(--color--invert);
+  --Button--glass--active____color:var(--color--invert);
   --Button--outline____b-color:rgba(var(--color--invert-rgb), 0.4);
   --Button--outline--hover____b-color:rgba(var(--color--invert-rgb), 0.7);
   --Button--outline--active____b-color:rgba(var(--color--invert-rgb), 0.8);
@@ -1090,6 +1152,7 @@ a.Card:hover{
 
 .Dropdown__Toggle{
   cursor:default;
+  margin-bottom:0;
   position:relative;
 }
 .Dropdown__Toggle--disabled{
@@ -1119,8 +1182,8 @@ a.Card:hover{
   top:0;
 }
 .mouse-intent .blitz:focus,
-.mouse-intent .btn:focus,
-.mouse-intent .btn--icon:focus,
+.mouse-intent .Button:focus,
+.mouse-intent .Button-Icon:focus,
 .mouse-intent .Menu__Item:focus,
 .mouse-intent .Menu__Toggle:focus,
 .mouse-intent .modal:focus,
@@ -1644,20 +1707,20 @@ a.Card:hover{
 }
 .Input-Group__Item .Input-Group__Addon,
 .Input-Group__Item .Input,
-.Input-Group__Item .btn{
+.Input-Group__Item .Button{
   border-radius:0;
   height:100%;
   position:relative;
 }
 .Input-Group__Item:first-child .Input-Group__Addon,
 .Input-Group__Item:first-child .Input,
-.Input-Group__Item:first-child .btn{
+.Input-Group__Item:first-child .Button{
   border-bottom-left-radius:var(--Input____radius);
   border-top-left-radius:var(--Input____radius);
 }
 .Input-Group__Item:last-child .Input-Group__Addon,
 .Input-Group__Item:last-child .Input,
-.Input-Group__Item:last-child .btn{
+.Input-Group__Item:last-child .Button{
   border-bottom-right-radius:var(--Input____radius);
   border-top-right-radius:var(--Input____radius);
 }
@@ -2153,19 +2216,19 @@ ol.List--fancy li ol li:before{
   visibility:hidden;
   transition-property:opacity, visibility;
 }
-.Modal__Wrapper--backdrop--coachmark{
+.Modal__Wrapper--backdrop-coachmark{
   background-color:rgba(var(--color--coachmark-rgb), 0.9);
 }
-.Modal__Wrapper--backdrop--default{
+.Modal__Wrapper--backdrop-default{
   background-color:var(--Modal__Wrapper____bg-color);
 }
-.Modal__Wrapper--backdrop--dscout{
+.Modal__Wrapper--backdrop-dscout{
   background-color:rgba(var(--color--dscout-rgb), 0.9);
 }
-.Modal__Wrapper--backdrop--main{
+.Modal__Wrapper--backdrop-main{
   background-color:rgba(var(--color--main-rgb), 0.7);
 }
-.Modal__Wrapper--backdrop--success{
+.Modal__Wrapper--backdrop-success{
   background-color:rgba(var(--color--success-rgb), 0.9);
 }
 
@@ -2174,11 +2237,9 @@ ol.List--fancy li ol li:before{
   margin-top:auto !important;
   margin-bottom:auto !important;
   max-width:var(--Modal____max-width);
-  width:100%;
-}
-.Modal--animation{
   transform:translateY(0);
   transition:transform var(--timing--rotate);
+  width:100%;
 }
 .Modal--hidden{
   transform:translateY(-1.428em);
@@ -2204,7 +2265,7 @@ ol.List--fancy li ol li:before{
   color:var(--Pill____color);
   display:inline-block;
   font-size:var(--font-size--base);
-  padding:0.5em 1em;
+  padding:0.125em 0.5em;
   position:relative;
 }
 .Pill--part-0{
@@ -2797,7 +2858,7 @@ ol.List--fancy li ol li:before{
 
 .Toggle{
   display:inline-block;
-  height:var(--Toggle__Switch____width);
+  height:var(--Toggle__Track____height);
   margin:0;
   position:relative;
   vertical-align:top;
@@ -2865,10 +2926,14 @@ ol.List--fancy li ol li:before{
   outline:var(--color--dscout) auto 5px;
 }
 
-.Tooltip__Container{
+.Tooltip-Container{
   outline:none;
   position:relative;
 }
+.Tooltip-Container:hover .Tooltip--visible-hover{
+  opacity:1;
+  visibility:visible;
+}
 
 .Tooltip{
   display:block;
@@ -2976,11 +3041,110 @@ ol.List--fancy li ol li:before{
   transform:translateX(-50%);
 }
 .theme--researcher{
+  --shadow--s:0 0.22rem 0.5rem rgba(var(--color--shadow-rgb), 0.03);
+  --shadow--m:0 0.22rem 0.5rem rgba(var(--color--shadow-rgb), 0.08);
+  --shadow--l:0 1em 2em rgba(var(--color--shadow-rgb), 0.1);
+  --shadow--xl:0 1em 2em rgba(var(--color--shadow-rgb), 0.2);
+  --radius--none:0;
+  --radius--tiny:0.125em;
+  --radius--small:0.188em;
+  --radius--med:0.313em;
+  --radius--large:0.625em;
+  --radius--circle:50%;
+  --radius--pill:50em;
+  --font--stack:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --font--monospace:Input Mono, Consolas, monospace;
+  --font--emoji:Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
+  --font-size--xxs:0.563em;
+  --font-size--xs:0.75em;
+  --font-size--s:0.875em;
+  --font-size--base:1em;
+  --font-size--l:1.2em;
+  --font-size--xl:1.44em;
+  --font-size--xxl:1.728em;
+  --font-size--xxxl:2.074em;
+  --font-size--subheadline:5em;
+  --font-size--headline:6em;
+  --font-weight--normal:400;
+  --font-weight--semibold:600;
+  --font-weight--bold:700;
+  --line-height--copy:1.5;
+  --line-height--solid:1;
+  --line-height--title:1.25;
+  --line-height--loose:2;
+  --tracked--tighter:-0.0625em;
+  --tracked--tight:-0.03125em;
+  --tracked--loose:0.03125em;
+  --tracked--looser:0.0625em;
+  --tracked--mega:0.25em;
+  --timing--click:0.1s;
+  --timing--hover:0.2s;
+  --timing--fade:0.4s;
+  --timing--rotate:0.6s;
+  --base____font-family:var(--font--stack);
+  --base____font-size:0.875rem;
+  --base____line-height:var(--line-height--copy);
+  font-family:var(--base____font-family);
+  font-size:var(--base____font-size);
+  line-height:var(--base____line-height);
+}
+
+.theme--bandit{
+  --shadow--s:0 0.125em 1em rgba(var(--color--shadow-rgb), 0.08);
+  --shadow--m:0 0.25em 2em rgba(var(--color--shadow-rgb), 0.12);
+  --shadow--l:0 0.375em 3em rgba(var(--color--shadow-rgb), 0.16);
+  --shadow--xl:0 0.5em 4em rgba(var(--color--shadow-rgb), 0.24);
+  --radius--none:0;
+  --radius--tiny:0.125em;
+  --radius--small:0.25em;
+  --radius--med:0.5em;
+  --radius--large:0.75em;
+  --radius--circle:50%;
+  --radius--pill:50em;
+  --font--stack:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --font--monospace:Input Mono, Consolas, monospace;
+  --font--emoji:Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
+  --font-size--xxs:0.5em;
+  --font-size--xs:0.75em;
+  --font-size--s:0.875em;
+  --font-size--base:1em;
+  --font-size--l:1.125em;
+  --font-size--xl:1.5em;
+  --font-size--xxl:2em;
+  --font-size--xxxl:3em;
+  --font-size--subheadline:4em;
+  --font-size--headline:5em;
+  --font-weight--normal:400;
+  --font-weight--semibold:600;
+  --font-weight--bold:700;
+  --line-height--copy:1.5;
+  --line-height--solid:1;
+  --line-height--title:1.25;
+  --line-height--loose:2;
+  --tracked--tighter:-0.0625em;
+  --tracked--tight:-0.03125em;
+  --tracked--loose:0.03125em;
+  --tracked--looser:0.0625em;
+  --tracked--mega:0.25em;
+  --timing--click:0.1s;
+  --timing--hover:0.2s;
+  --timing--fade:0.4s;
+  --timing--rotate:0.6s;
+  --base____font-family:var(--font--stack);
+  --base____font-size:1rem;
+  --base____line-height:var(--line-height--copy);
+  font-family:var(--base____font-family);
+  font-size:var(--base____font-size);
+  line-height:var(--base____line-height);
+}
+.color-scheme--researcher-light{
   --color--main:#222;
   --color--main-rgb:34, 34, 34;
   --color--invert:#fff;
   --color--invert-rgb:255, 255, 255;
   --color--none:rgba(0, 0, 0, 0);
+  --color--black:#222;
+  --color--black-rgb:34, 34, 34;
   --color--gray-1:#747474;
   --color--gray-1-rgb:116, 116, 116;
   --color--gray-2:#bdbdbd;
@@ -2993,6 +3157,8 @@ ol.List--fancy li ol li:before{
   --color--gray-5-rgb:244, 244, 244;
   --color--gray-6:#fbfbfb;
   --color--gray-6-rgb:251, 251, 251;
+  --color--white:#fff;
+  --color--white-rgb:255, 255, 255;
   --color--dscout-light:#e5f0ff;
   --color--dscout-outline:#84b9f5;
   --color--dscout:#0a73eb;
@@ -3078,62 +3244,174 @@ ol.List--fancy li ol li:before{
   --color--screener-rgb:170, 129, 210;
   --color--screener-dark:#9974bd;
   --color--screener-darkest:#8867a8;
-  --shadow--s:0 0.22rem 0.5rem rgba(var(--color--main-rgb), 0.03);
-  --shadow--m:0 0.22rem 0.5rem rgba(var(--color--main-rgb), 0.08);
-  --shadow--l:0 1em 2em rgba(var(--color--main-rgb), 0.1);
-  --shadow--xl:0 1em 2em rgba(var(--color--main-rgb), 0.2);
-  --radius--none:0;
-  --radius--tiny:0.125em;
-  --radius--small:0.188em;
-  --radius--med:0.313em;
-  --radius--large:0.625em;
-  --radius--circle:50%;
-  --radius--pill:50em;
-  --font--stack:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  --font--monospace:Input Mono, Consolas, monospace;
-  --font--emoji:Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-  --font-size--xxs:0.563em;
-  --font-size--xs:0.75em;
-  --font-size--s:0.875em;
-  --font-size--base:1em;
-  --font-size--l:1.2em;
-  --font-size--xl:1.44em;
-  --font-size--xxl:1.728em;
-  --font-size--xxxl:2.074em;
-  --font-size--subheadline:5em;
-  --font-size--headline:6em;
-  --font-weight--normal:400;
-  --font-weight--semibold:600;
-  --font-weight--bold:700;
-  --line-height--copy:1.5;
-  --line-height--solid:1;
-  --line-height--title:1.25;
-  --line-height--loose:2;
-  --tracked--tighter:-0.0625em;
-  --tracked--tight:-0.03125em;
-  --tracked--loose:0.03125em;
-  --tracked--looser:0.0625em;
-  --tracked--mega:0.25em;
-  --timing--click:0.1s;
-  --timing--hover:0.2s;
-  --timing--fade:0.4s;
-  --timing--rotate:0.6s;
+  --color--shadow:#222;
+  --color--shadow-rgb:34, 34, 34;
   --base____bg-color:var(--color--gray-5);
   --base____color:var(--color--main);
-  --base____font-family:var(--font--stack);
-  --base____font-size:0.875rem;
-  --base____line-height:var(--line-height--copy);
-  color:var(--base____color);
-  font-family:var(--base____font-family);
-  font-size:var(--base____font-size);
-  line-height:var(--base____line-height);
 }
-.theme--bandit{
+
+.color-scheme--researcher-dark,
+.color-scheme--researcher-dark-close,
+.color-scheme--researcher-dark-coachmark,
+.color-scheme--researcher-dark-dscout,
+.color-scheme--researcher-dark-success,
+.color-scheme--researcher-dark-test{
+  --color--main:var(--color--white);
+  --color--main-rgb:var(--color--white-rgb);
+  --color--invert:var(--color--black);
+  --color--invert-rgb:var(--color--black-rgb);
+  --color--none:rgba(0, 0, 0, 0);
+  --color--black:#222;
+  --color--black-rgb:34, 34, 34;
+  --color--gray-1:#fbfbfb;
+  --color--gray-1-rgb:251, 251, 251;
+  --color--gray-2:#f4f4f4;
+  --color--gray-2-rgb:244, 244, 244;
+  --color--gray-3:#e9e9e9;
+  --color--gray-3-rgb:233, 233, 233;
+  --color--gray-4:#dedede;
+  --color--gray-4-rgb:222, 222, 222;
+  --color--gray-5:#bdbdbd;
+  --color--gray-5-rgb:189, 189, 189;
+  --color--gray-6:#747474;
+  --color--gray-6-rgb:116, 116, 116;
+  --color--white:#fff;
+  --color--white-rgb:255, 255, 255;
+  --color--dscout-light:#e5f0ff;
+  --color--dscout-outline:#84b9f5;
+  --color--dscout:#0a73eb;
+  --color--dscout-rgb:10, 115, 235;
+  --color--dscout-dark:#0966d1;
+  --color--dscout-darkest:#0860c4;
+  --color--alert-light:#fbdfe4;
+  --color--alert-outline:#f28aa2;
+  --color--alert:#e51546;
+  --color--alert-rgb:229, 21, 70;
+  --color--alert-dark:#cc133e;
+  --color--alert-darkest:#bf123a;
+  --color--coachmark-light:#e6e6f4;
+  --color--coachmark-outline:#b6b2e1;
+  --color--coachmark:#6d65c3;
+  --color--coachmark-rgb:109, 101, 195;
+  --color--coachmark-dark:#5e57a8;
+  --color--coachmark-darkest:#57519c;
+  --color--close-light:#eceff6;
+  --color--close:#445ea3;
+  --color--close-rgb:68, 94, 163;
+  --color--close-dark:#3d5593;
+  --color--close-darkest:#364b82;
+  --color--success-light:#eafbf4;
+  --color--success:#2ed491;
+  --color--success-rgb:46, 212, 145;
+  --color--success-dark:#29bf83;
+  --color--success-darkest:#25aa74;
+  --color--archive-light:#f9f5f0;
+  --color--archive:#c69c6d;
+  --color--archive-rgb:198, 156, 109;
+  --color--archive-dark:#b28c62;
+  --color--archive-darkest:#9e7d57;
+  --color--note-light:#fffcf4;
+  --color--note:#ffe291;
+  --color--note-rgb:255, 226, 145;
+  --color--note-dark:#f2d78a;
+  --color--note-darkest:#e6cb83;
+  --color--marker-light:#fffef2;
+  --color--marker:#fff480;
+  --color--marker-rgb:255, 244, 128;
+  --color--marker-dark:#e6dc73;
+  --color--marker-darkest:#ccc366;
+  --color--test-light:#f3fbfa;
+  --color--test:#8bd9d0;
+  --color--test-rgb:139, 217, 208;
+  --color--test-dark:#7dc3bb;
+  --color--test-darkest:#6faea6;
+  --color--scout-light:#f4fffa;
+  --color--scout:#8cffd0;
+  --color--scout-rgb:140, 255, 208;
+  --color--scout-dark:#7ee6bb;
+  --color--scout-darkest:#70cca6;
+  --color--part-0:#2bae92;
+  --color--part-0-rgb:43, 174, 146;
+  --color--part-1:#a5d570;
+  --color--part-1-rgb:165, 213, 112;
+  --color--part-2:#ffd566;
+  --color--part-2-rgb:255, 213, 102;
+  --color--part-3:#fead04;
+  --color--part-3-rgb:254, 173, 4;
+  --color--part-4:#e76161;
+  --color--part-4-rgb:231, 97, 97;
+  --color--part-5:#f2659a;
+  --color--part-5-rgb:242, 101, 154;
+  --color--part-6:#aa81d2;
+  --color--part-6-rgb:170, 129, 210;
+  --color--part-7:#00acf1;
+  --color--part-7-rgb:0, 172, 241;
+  --color--part-8:#8edde8;
+  --color--part-8-rgb:142, 221, 232;
+  --color--part-9:#86c4c2;
+  --color--part-9-rgb:134, 196, 194;
+  --color--live:#e51546;
+  --color--live-rgb:229, 21, 70;
+  --color--live-dark:#cc133e;
+  --color--live-darkest:#bf123a;
+  --color--diary:#2bae92;
+  --color--diary-rgb:43, 174, 146;
+  --color--diary-dark:#279d83;
+  --color--diary-darkest:#228b75;
+  --color--screener:#aa81d2;
+  --color--screener-rgb:170, 129, 210;
+  --color--screener-dark:#9974bd;
+  --color--screener-darkest:#8867a8;
+  --color--shadow:#222;
+  --color--shadow-rgb:34, 34, 34;
+  --base____bg-color:var(--color--gray-5);
+  --base____color:var(--color--main);
+}
+
+.color-scheme--researcher-dark{
+  --color--shadow:#000;
+  --color--shadow-rgb:0,0,0;
+  --base____bg-color:#111;
+}
+
+.color-scheme--researcher-dark-close{
+  --color--invert:var(--color--close);
+  --color--invert-rgb:var(--color--close-rgb);
+  --base____bg-color:var(--color--close-dark);
+}
+
+.color-scheme--researcher-dark-coachmark{
+  --color--invert:var(--color--coachmark);
+  --color--invert-rgb:var(--color--coachmark-rgb);
+  --base____bg-color:var(--color--coachmark-dark);
+}
+
+.color-scheme--researcher-dark-dscout{
+  --color--invert:var(--color--dscout);
+  --color--invert-rgb:var(--color--dscout-rgb);
+  --base____bg-color:var(--color--dscout-dark);
+}
+
+.color-scheme--researcher-dark-success{
+  --color--invert:var(--color--success);
+  --color--invert-rgb:var(--color--success-rgb);
+  --base____bg-color:var(--color--success-dark);
+}
+
+.color-scheme--researcher-dark-test{
+  --color--invert:var(--color--test);
+  --color--invert-rgb:var(--color--test-rgb);
+  --base____bg-color:var(--color--test-dark);
+}
+
+.color-scheme--bandit-light{
   --color--main:#222;
   --color--main-rgb:34, 34, 34;
   --color--invert:#fff;
   --color--invert-rgb:255, 255, 255;
   --color--none:rgba(0, 0, 0, 0);
+  --color--black:#222;
+  --color--black-rgb:34, 34, 34;
   --color--gray-1:#323232;
   --color--gray-1-rgb:50, 50, 50;
   --color--gray-2:#646464;
@@ -3146,6 +3424,8 @@ ol.List--fancy li ol li:before{
   --color--gray-5-rgb:240, 240, 240;
   --color--gray-6:#fafafa;
   --color--gray-6-rgb:250, 250, 250;
+  --color--white:#fff;
+  --color--white-rgb:255, 255, 255;
   --color--dscout-light:#e5f0ff;
   --color--dscout-outline:#84b9f5;
   --color--dscout:#0a73eb;
@@ -3231,55 +3511,172 @@ ol.List--fancy li ol li:before{
   --color--screener-rgb:170, 129, 210;
   --color--screener-dark:#9974bd;
   --color--screener-darkest:#8867a8;
-  --shadow--s:0 0.125em 1em rgba(var(--color--main-rgb), 0.08);
-  --shadow--m:0 0.25em 2em rgba(var(--color--main-rgb), 0.12);
-  --shadow--l:0 0.375em 3em rgba(var(--color--main-rgb), 0.16);
-  --shadow--xl:0 0.5em 4em rgba(var(--color--main-rgb), 0.24);
-  --radius--none:0;
-  --radius--tiny:0.125em;
-  --radius--small:0.25em;
-  --radius--med:0.5em;
-  --radius--large:0.75em;
-  --radius--circle:50%;
-  --radius--pill:50em;
-  --font--stack:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  --font--monospace:Input Mono, Consolas, monospace;
-  --font--emoji:Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-  --font-size--xxs:0.5em;
-  --font-size--xs:0.75em;
-  --font-size--s:0.875em;
-  --font-size--base:1em;
-  --font-size--l:1.125em;
-  --font-size--xl:1.5em;
-  --font-size--xxl:2em;
-  --font-size--xxxl:3em;
-  --font-size--subheadline:4em;
-  --font-size--headline:5em;
-  --font-weight--normal:400;
-  --font-weight--semibold:600;
-  --font-weight--bold:700;
-  --line-height--copy:1.5;
-  --line-height--solid:1;
-  --line-height--title:1.25;
-  --line-height--loose:2;
-  --tracked--tighter:-0.0625em;
-  --tracked--tight:-0.03125em;
-  --tracked--loose:0.03125em;
-  --tracked--looser:0.0625em;
-  --tracked--mega:0.25em;
-  --timing--click:0.1s;
-  --timing--hover:0.2s;
-  --timing--fade:0.4s;
-  --timing--rotate:0.6s;
+  --color--shadow:#222;
+  --color--shadow-rgb:34, 34, 34;
   --base____bg-color:var(--color--gray-5);
   --base____color:var(--color--main);
-  --base____font-family:var(--font--stack);
-  --base____font-size:1rem;
-  --base____line-height:var(--line-height--copy);
+}
+
+.color-scheme--bandit-dark,
+.color-scheme--bandit-dark-close,
+.color-scheme--bandit-dark-coachmark,
+.color-scheme--bandit-dark-dscout,
+.color-scheme--bandit-dark-success,
+.color-scheme--bandit-dark-test{
+  --color--main:var(--color--white);
+  --color--main-rgb:var(--color--white-rgb);
+  --color--invert:var(--color--black);
+  --color--invert-rgb:var(--color--black-rgb);
+  --color--none:rgba(0, 0, 0, 0);
+  --color--black:#222;
+  --color--black-rgb:34, 34, 34;
+  --color--gray-1:#fafafa;
+  --color--gray-1-rgb:250, 250, 250;
+  --color--gray-2:#f0f0f0;
+  --color--gray-2-rgb:240, 240, 240;
+  --color--gray-3:#dedede;
+  --color--gray-3-rgb:222, 222, 222;
+  --color--gray-4:#aeaeae;
+  --color--gray-4-rgb:174, 174, 174;
+  --color--gray-5:#646464;
+  --color--gray-5-rgb:100, 100, 100;
+  --color--gray-6:#323232;
+  --color--gray-6-rgb:50, 50, 50;
+  --color--white:#fff;
+  --color--white-rgb:255, 255, 255;
+  --color--dscout-light:#e5f0ff;
+  --color--dscout-outline:#84b9f5;
+  --color--dscout:#0a73eb;
+  --color--dscout-rgb:10, 115, 235;
+  --color--dscout-dark:#0966d1;
+  --color--dscout-darkest:#0860c4;
+  --color--alert-light:#fbdfe4;
+  --color--alert-outline:#f28aa2;
+  --color--alert:#e51546;
+  --color--alert-rgb:229, 21, 70;
+  --color--alert-dark:#cc133e;
+  --color--alert-darkest:#bf123a;
+  --color--coachmark-light:#e6e6f4;
+  --color--coachmark-outline:#b6b2e1;
+  --color--coachmark:#6d65c3;
+  --color--coachmark-rgb:109, 101, 195;
+  --color--coachmark-dark:#5e57a8;
+  --color--coachmark-darkest:#57519c;
+  --color--close-light:#eceff6;
+  --color--close:#445ea3;
+  --color--close-rgb:68, 94, 163;
+  --color--close-dark:#3d5593;
+  --color--close-darkest:#364b82;
+  --color--success-light:#eafbf4;
+  --color--success:#2ed491;
+  --color--success-rgb:46, 212, 145;
+  --color--success-dark:#29bf83;
+  --color--success-darkest:#25aa74;
+  --color--archive-light:#f9f5f0;
+  --color--archive:#c69c6d;
+  --color--archive-rgb:198, 156, 109;
+  --color--archive-dark:#b28c62;
+  --color--archive-darkest:#9e7d57;
+  --color--note-light:#fffcf4;
+  --color--note:#ffe291;
+  --color--note-rgb:255, 226, 145;
+  --color--note-dark:#f2d78a;
+  --color--note-darkest:#e6cb83;
+  --color--marker-light:#fffef2;
+  --color--marker:#fff480;
+  --color--marker-rgb:255, 244, 128;
+  --color--marker-dark:#e6dc73;
+  --color--marker-darkest:#ccc366;
+  --color--test-light:#f3fbfa;
+  --color--test:#8bd9d0;
+  --color--test-rgb:139, 217, 208;
+  --color--test-dark:#7dc3bb;
+  --color--test-darkest:#6faea6;
+  --color--scout-light:#f4fffa;
+  --color--scout:#8cffd0;
+  --color--scout-rgb:140, 255, 208;
+  --color--scout-dark:#7ee6bb;
+  --color--scout-darkest:#70cca6;
+  --color--part-0:#2bae92;
+  --color--part-0-rgb:43, 174, 146;
+  --color--part-1:#a5d570;
+  --color--part-1-rgb:165, 213, 112;
+  --color--part-2:#ffd566;
+  --color--part-2-rgb:255, 213, 102;
+  --color--part-3:#fead04;
+  --color--part-3-rgb:254, 173, 4;
+  --color--part-4:#e76161;
+  --color--part-4-rgb:231, 97, 97;
+  --color--part-5:#f2659a;
+  --color--part-5-rgb:242, 101, 154;
+  --color--part-6:#aa81d2;
+  --color--part-6-rgb:170, 129, 210;
+  --color--part-7:#00acf1;
+  --color--part-7-rgb:0, 172, 241;
+  --color--part-8:#8edde8;
+  --color--part-8-rgb:142, 221, 232;
+  --color--part-9:#86c4c2;
+  --color--part-9-rgb:134, 196, 194;
+  --color--live:#e51546;
+  --color--live-rgb:229, 21, 70;
+  --color--live-dark:#cc133e;
+  --color--live-darkest:#bf123a;
+  --color--diary:#2bae92;
+  --color--diary-rgb:43, 174, 146;
+  --color--diary-dark:#279d83;
+  --color--diary-darkest:#228b75;
+  --color--screener:#aa81d2;
+  --color--screener-rgb:170, 129, 210;
+  --color--screener-dark:#9974bd;
+  --color--screener-darkest:#8867a8;
+  --color--shadow:#222;
+  --color--shadow-rgb:34, 34, 34;
+  --base____bg-color:var(--color--invert);
+  --base____color:var(--color--main);
+}
+
+.color-scheme--bandit-dark{
+  --color--shadow:#000;
+  --color--shadow-rgb:0,0,0;
+  --base____bg-color:#111;
+}
+
+.color-scheme--bandit-dark-close{
+  --color--invert:var(--color--close);
+  --color--invert-rgb:var(--color--close-rgb);
+  --base____bg-color:var(--color--close-dark);
+}
+
+.color-scheme--bandit-dark-coachmark{
+  --color--invert:var(--color--coachmark);
+  --color--invert-rgb:var(--color--coachmark-rgb);
+  --base____bg-color:var(--color--coachmark-dark);
+}
+
+.color-scheme--bandit-dark-dscout{
+  --color--invert:var(--color--dscout);
+  --color--invert-rgb:var(--color--dscout-rgb);
+  --base____bg-color:var(--color--dscout-dark);
+}
+
+.color-scheme--bandit-dark-success{
+  --color--invert:var(--color--success);
+  --color--invert-rgb:var(--color--success-rgb);
+  --base____bg-color:var(--color--success-dark);
+}
+
+.color-scheme--bandit-dark-test{
+  --color--invert:var(--color--test);
+  --color--invert-rgb:var(--color--test-rgb);
+  --base____bg-color:var(--color--test-dark);
+}
+
+.color-scheme--with-background-color{
+  background-color:var(--base____bg-color);
+}
+
+.color-scheme--with-color{
   color:var(--base____color);
-  font-family:var(--base____font-family);
-  font-size:var(--base____font-size);
-  line-height:var(--base____line-height);
 }
 .vertical--top{
   vertical-align:top;
@@ -3595,6 +3992,30 @@ ol.List--fancy li ol li:before{
   border-color:var(--color--none);
 }
 
+.color--black{
+  color:var(--color--black);
+}
+
+.bg-color--black{
+  background-color:var(--color--black);
+}
+
+.b-color--black{
+  border-color:var(--color--black);
+}
+
+.color--white{
+  color:var(--color--white);
+}
+
+.bg-color--white{
+  background-color:var(--color--white);
+}
+
+.b-color--white{
+  border-color:var(--color--white);
+}
+
 .color--dscout-light{
   color:var(--color--dscout-light);
 }
@@ -6436,6 +6857,13 @@ ol.List--fancy li ol li:before{
 .font-weight--9{
   font-weight:900;
 }
+.font-style--italic{
+  font-style:italic;
+}
+
+.font-style--normal{
+  font-style:normal;
+}
 .text-transform--c{
   text-transform:capitalize;
 }