Update dark color variable

1 files changed, 74 insertions, 76 deletions

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index fe5bd3e..f873b62 100644
--- a/docs/dist/spectre.css
+++ b/docs/dist/spectre.css
@@ -287,7 +287,7 @@ html {
 
 body {
   background: #fff;
-  color: #50596c;
+  color: #3b4351;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size: .8rem;
   overflow-x: hidden;
@@ -386,7 +386,7 @@ abbr[title] {
 }
 
 kbd {
-  background: #454d5d;
+  background: #303742;
   border-radius: .1rem;
   color: #fff;
   font-size: .7rem; 
@@ -397,12 +397,12 @@ kbd {
 mark {
   background: #ffe9b3;
   border-radius: .1rem;
-  color: #50596c;
+  color: #3b4351;
   padding: .05rem;
 }
 
 blockquote {
-  border-left: .1rem solid #e7e9ed;
+  border-left: .1rem solid #dadee4;
   margin-left: 0;
   padding: .4rem .8rem;
 }
@@ -515,16 +515,16 @@ dl dd {
 }
 
 .table.table-striped tbody tr:nth-of-type(odd) {
-  background: #f8f9fa;
+  background: #f7f8f9;
 }
 
 .table tbody tr.active,
 .table.table-striped tbody tr.active {
-  background: #f0f1f4;
+  background: #eef0f3;
 }
 
 .table.table-hover tbody tr:hover {
-  background: #f0f1f4;
+  background: #eef0f3;
 }
 
 .table.table-scroll {
@@ -536,7 +536,7 @@ dl dd {
 
 .table td,
 .table th {
-  border-bottom: .05rem solid #e7e9ed;
+  border-bottom: .05rem solid #dadee4;
   padding: .6rem .4rem;
 }
 
@@ -833,9 +833,9 @@ legend {
   appearance: none;
   background: #fff;
   background-image: none;
-  border: .05rem solid #caced7;
+  border: .05rem solid #bcc3ce;
   border-radius: .1rem;
-  color: #50596c;
+  color: #3b4351;
   display: block;
   font-size: .8rem;
   height: 1.8rem;
@@ -854,19 +854,19 @@ legend {
 }
 
 .form-input::-webkit-input-placeholder {
-  color: #acb3c2;
+  color: #bcc3ce;
 }
 
 .form-input:-ms-input-placeholder {
-  color: #acb3c2;
+  color: #bcc3ce;
 }
 
 .form-input::-ms-input-placeholder {
-  color: #acb3c2;
+  color: #bcc3ce;
 }
 
 .form-input::placeholder {
-  color: #acb3c2;
+  color: #bcc3ce;
 }
 
 .form-input.input-sm {
@@ -896,7 +896,7 @@ textarea.form-input {
 }
 
 .form-input-hint {
-  color: #acb3c2;
+  color: #bcc3ce;
   font-size: .7rem;
   margin-top: .2rem;
 }
@@ -915,7 +915,7 @@ textarea.form-input {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  border: .05rem solid #caced7;
+  border: .05rem solid #bcc3ce;
   border-radius: .1rem;
   color: inherit;
   font-size: .8rem;
@@ -1034,7 +1034,7 @@ textarea.form-input {
 .form-checkbox .form-icon,
 .form-radio .form-icon,
 .form-switch .form-icon {
-  border: .05rem solid #caced7;
+  border: .05rem solid #bcc3ce;
   cursor: pointer;
   display: inline-block;
   position: absolute; 
@@ -1066,7 +1066,7 @@ textarea.form-input {
 
 .form-checkbox input:active + .form-icon,
 .form-radio input:active + .form-icon {
-  background: #f0f1f4;
+  background: #eef0f3;
 }
 
 .form-checkbox .form-icon {
@@ -1114,12 +1114,12 @@ textarea.form-input {
   background: #fff;
   border-radius: 50%;
   content: "";
-  height: 4px;
+  height: 6px;
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
-  width: 4px;
+  width: 6px;
 }
 
 .form-switch {
@@ -1127,7 +1127,7 @@ textarea.form-input {
 }
 
 .form-switch .form-icon {
-  background: #e7e9ed;
+  background: #bcc3ce;
   background-clip: padding-box;
   border-radius: .45rem;
   height: .9rem;
@@ -1154,7 +1154,7 @@ textarea.form-input {
 }
 
 .form-switch input:active + .form-icon::before {
-  background: #f8f9fa;
+  background: #f7f8f9;
 }
 
 .input-group {
@@ -1163,8 +1163,8 @@ textarea.form-input {
 }
 
 .input-group .input-group-addon {
-  background: #f8f9fa;
-  border: .05rem solid #caced7;
+  background: #f7f8f9;
+  border: .05rem solid #bcc3ce;
   border-radius: .1rem;
   line-height: 1.2rem;
   padding: .25rem .4rem;
@@ -1312,18 +1312,18 @@ textarea.form-input {
 .form-input.disabled,
 .form-select:disabled,
 .form-select.disabled {
-  background-color: #f0f1f4;
+  background-color: #eef0f3;
   cursor: not-allowed;
   opacity: .5;
 }
 
 .form-input[readonly] {
-  background-color: #f8f9fa;
+  background-color: #f7f8f9;
 }
 
 input:disabled + .form-icon,
 input.disabled + .form-icon {
-  background: #f0f1f4;
+  background: #eef0f3;
   cursor: not-allowed;
   opacity: .5;
 }
@@ -1349,9 +1349,9 @@ input.disabled + .form-icon {
 }
 
 .label {
-  background: #f0f1f4;
+  background: #eef0f3;
   border-radius: .1rem;
-  color: #5b657a;
+  color: #455060;
   display: inline-block; 
   line-height: 1.2;
   padding: .1rem .2rem;
@@ -1399,12 +1399,12 @@ code {
 
 .code {
   border-radius: .1rem;
-  color: #50596c;
+  color: #3b4351;
   position: relative;
 }
 
 .code::before {
-  color: #acb3c2;
+  color: #bcc3ce;
   content: attr(data-lang);
   font-size: .7rem;
   position: absolute;
@@ -1413,7 +1413,7 @@ code {
 }
 
 .code code {
-  background: #f8f9fa;
+  background: #f7f8f9;
   color: inherit;
   display: block;
   line-height: 1.5;
@@ -1485,7 +1485,7 @@ video.video-responsive::before {
 }
 
 .figure .figure-caption {
-  color: #667189;
+  color: #66758c;
   margin-top: .4rem;
 }
 
@@ -2073,7 +2073,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .avatar .avatar-presence {
-  background: #acb3c2;
+  background: #bcc3ce;
   border-radius: 50%;
   box-shadow: 0 0 0 .1rem #fff;
   height: .5em;
@@ -2159,7 +2159,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .breadcrumb .breadcrumb-item {
-  color: #667189;
+  color: #66758c;
   display: inline-block;
   margin: 0;
   padding: .2rem 0;
@@ -2170,17 +2170,17 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .breadcrumb .breadcrumb-item:not(:last-child) a {
-  color: #667189;
+  color: #66758c;
 }
 
 .breadcrumb .breadcrumb-item:not(:first-child)::before {
-  color: #e7e9ed;
+  color: #66758c;
   content: "/";
   padding-right: .4rem;
 }
 
 .bar {
-  background: #f0f1f4;
+  background: #eef0f3;
   border-radius: .1rem;
   display: flex;
   display: -ms-flexbox;
@@ -2233,7 +2233,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .bar-slider .bar-item:not(:last-child):first-child {
-  background: #f0f1f4;
+  background: #eef0f3;
   z-index: 1;
 }
 
@@ -2256,7 +2256,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .card {
   background: #fff;
-  border: .05rem solid #e7e9ed;
+  border: .05rem solid #dadee4;
   border-radius: .1rem;
   display: flex;
   display: -ms-flexbox;
@@ -2302,9 +2302,8 @@ summary.accordion-header::-webkit-details-marker {
 
 .chip {
   align-items: center;
-  background: #f0f1f4;
+  background: #eef0f3;
   border-radius: 5rem;
-  color: #454d5d;
   display: inline-flex;
   display: -ms-inline-flexbox;
   -ms-flex-align: center;
@@ -2367,9 +2366,9 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .empty {
-  background: #f8f9fa;
+  background: #f7f8f9;
   border-radius: .1rem;
-  color: #667189;
+  color: #66758c;
   padding: 3.2rem 1.6rem; 
   text-align: center;
 }
@@ -2390,7 +2389,7 @@ summary.accordion-header::-webkit-details-marker {
 .menu {
   background: #fff;
   border-radius: .1rem;
-  box-shadow: 0 .05rem .2rem rgba(69, 77, 93, .3);
+  box-shadow: 0 .05rem .2rem rgba(48, 55, 66, .3);
   list-style: none;
   margin: 0;
   min-width: 180px;
@@ -2480,7 +2479,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal:target .modal-overlay,
 .modal.active .modal-overlay {
-  background: rgba(248, 249, 250, .75);
+  background: rgba(247, 248, 249, .75);
   bottom: 0;
   cursor: default;
   display: block;
@@ -2513,7 +2512,7 @@ summary.accordion-header::-webkit-details-marker {
 .modal-container {
   background: #fff;
   border-radius: .1rem;
-  box-shadow: 0 .2rem .5rem rgba(69, 77, 93, .3);
+  box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
   display: flex;
   display: -ms-flexbox;
   -ms-flex-direction: column;
@@ -2529,7 +2528,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .modal-container .modal-header {
-  color: #454d5d;
+  color: #303742;
   padding: .8rem;
 }
 
@@ -2554,7 +2553,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .nav .nav-item a {
-  color: #667189;
+  color: #66758c;
   padding: .2rem .4rem;
   text-decoration: none;
 }
@@ -2565,7 +2564,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .nav .nav-item.active > a {
-  color: #50596c;
+  color: #505c6e;
   font-weight: bold;
 }
 
@@ -2598,7 +2597,6 @@ summary.accordion-header::-webkit-details-marker {
 
 .pagination .page-item a {
   border-radius: .1rem;
-  color: #667189;
   display: inline-block;
   padding: .2rem .4rem;
   text-decoration: none;
@@ -2640,7 +2638,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .panel {
-  border: .05rem solid #e7e9ed;
+  border: .05rem solid #dadee4;
   border-radius: .1rem;
   display: flex;
   display: -ms-flexbox;
@@ -2723,7 +2721,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .popover .card {
   border: 0; 
-  box-shadow: 0 .2rem .5rem rgba(69, 77, 93, .3);
+  box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
 }
 
 .step {
@@ -2756,7 +2754,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .step .step-item a {
-  color: #acb3c2;
+  color: #bcc3ce;
   display: inline-block;
   padding: 20px 10px 0;
   text-decoration: none;
@@ -2783,16 +2781,16 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .step .step-item.active ~ .step-item::before {
-  background: #e7e9ed;
+  background: #dadee4;
 }
 
 .step .step-item.active ~ .step-item a::before {
-  background: #e7e9ed;
+  background: #f7f8f9;
 }
 
 .tab {
   align-items: center;
-  border-bottom: .05rem solid #e7e9ed;
+  border-bottom: .05rem solid #dadee4;
   display: flex;
   display: -ms-flexbox;
   -ms-flex-align: center;
@@ -2908,9 +2906,9 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .toast {
-  background: rgba(69, 77, 93, .9);
-  border: .05rem solid #454d5d;
-  border-color: #454d5d;
+  background: rgba(48, 55, 66, .95);
+  border: .05rem solid #303742;
+  border-color: #303742;
   border-radius: .1rem;
   color: #fff;
   display: block;
@@ -2919,22 +2917,22 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .toast.toast-primary {
-  background: rgba(87, 85, 217, .9);
+  background: rgba(87, 85, 217, .95);
   border-color: #5755d9;
 }
 
 .toast.toast-success {
-  background: rgba(50, 182, 67, .9);
+  background: rgba(50, 182, 67, .95);
   border-color: #32b643;
 }
 
 .toast.toast-warning {
-  background: rgba(255, 183, 0, .9);
+  background: rgba(255, 183, 0, .95);
   border-color: #ffb700;
 }
 
 .toast.toast-error {
-  background: rgba(232, 86, 0, .9);
+  background: rgba(232, 86, 0, .95);
   border-color: #e85600;
 }
 
@@ -2959,7 +2957,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .tooltip::after {
-  background: rgba(69, 77, 93, .9);
+  background: rgba(48, 55, 66, .95);
   border-radius: .1rem;
   bottom: 100%;
   color: #fff;
@@ -3072,16 +3070,16 @@ a.text-secondary:visited {
 }
 
 .text-gray {
-  color: #acb3c2 !important;
+  color: #66758c !important;
 }
 
 a.text-gray:focus,
 a.text-gray:hover {
-  color: #9ea6b7;
+  color: #5b687d;
 }
 
 a.text-gray:visited {
-  color: #bbc1cd;
+  color: #728199;
 }
 
 .text-light {
@@ -3098,16 +3096,16 @@ a.text-light:visited {
 }
 
 .text-dark {
-  color: #50596c !important;
+  color: #3b4351 !important;
 }
 
 a.text-dark:focus,
 a.text-dark:hover {
-  color: #454d5d;
+  color: #303742;
 }
 
 a.text-dark:visited {
-  color: #5b657a;
+  color: #455060;
 }
 
 .text-success {
@@ -3159,12 +3157,12 @@ a.text-error:visited {
 }
 
 .bg-dark {
-  background: #454d5d !important;
+  background: #303742 !important;
   color: #fff;
 }
 
 .bg-gray {
-  background: #f8f9fa !important;
+  background: #f7f8f9 !important;
 }
 
 .bg-success {
@@ -3270,7 +3268,7 @@ a.text-error:visited {
 .divider[data-content]::after,
 .divider-vert[data-content]::after {
   background: #fff;
-  color: #acb3c2;
+  color: #bcc3ce;
   content: attr(data-content);
   display: inline-block;
   font-size: .7rem;
@@ -3279,7 +3277,7 @@ a.text-error:visited {
 }
 
 .divider {
-  border-top: .05rem solid #e7e9ed;
+  border-top: .05rem solid #dadee4;
   height: .05rem;
   margin: .4rem 0;
 }
@@ -3294,7 +3292,7 @@ a.text-error:visited {
 }
 
 .divider-vert::before {
-  border-left: .05rem solid #e7e9ed;
+  border-left: .05rem solid #dadee4;
   bottom: .4rem;
   content: "";
   display: block;