Add colors

1 files changed, 64 insertions, 63 deletions

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index 50e2a6d..700eecd 100644
--- a/docs/dist/spectre.css
+++ b/docs/dist/spectre.css
@@ -386,7 +386,7 @@ abbr[title] {
 }
 
 kbd {
-  background: #303742;
+  background: #fff;
   border-radius: .1rem;
   color: #000;
   font-size: .7rem; 
@@ -395,15 +395,15 @@ kbd {
 }
 
 mark {
-  background: #ffe9b3;
-  border-bottom: .05rem solid #ffd367;
+  background: #fff000;
+  border-bottom: .05rem solid #b3a800;
   border-radius: .1rem;
-  color: #fff;
+  color: #1a1919;
   padding: .05rem .1rem 0;
 }
 
 blockquote {
-  border-left: .1rem solid #dadee4;
+  border-left: .1rem solid #a6a6a6;
   margin-left: 0;
   padding: .4rem .8rem;
 }
@@ -521,16 +521,16 @@ html:lang(ko),
 }
 
 .table.table-striped tbody tr:nth-of-type(odd) {
-  background: #f7f8f9;
+  background: #0d0d0d;
 }
 
 .table tbody tr.active,
 .table.table-striped tbody tr.active {
-  background: #eef0f3;
+  background: #050505;
 }
 
 .table.table-hover tbody tr:hover {
-  background: #eef0f3;
+  background: #050505;
 }
 
 .table.table-scroll {
@@ -542,7 +542,7 @@ html:lang(ko),
 
 .table td,
 .table th {
-  border-bottom: .05rem solid #dadee4;
+  border-bottom: .05rem solid #a6a6a6;
   padding: .6rem .4rem;
 }
 
@@ -752,7 +752,7 @@ html:lang(ko),
 
 .btn.btn-clear:focus,
 .btn.btn-clear:hover {
-  background: rgba(247, 248, 249, .5);
+  background: rgba(13, 13, 13, .5);
   opacity: .95;
 }
 
@@ -841,7 +841,7 @@ legend {
   appearance: none;
   background: #000;
   background-image: none;
-  border: .05rem solid #bcc3ce;
+  border: .05rem solid #8c8c8c;
   border-radius: .1rem;
   color: #fff;
   display: block;
@@ -862,15 +862,15 @@ legend {
 }
 
 .form-input:-ms-input-placeholder {
-  color: #bcc3ce;
+  color: #8c8c8c;
 }
 
 .form-input::-ms-input-placeholder {
-  color: #bcc3ce;
+  color: #8c8c8c;
 }
 
 .form-input::placeholder {
-  color: #bcc3ce;
+  color: #8c8c8c;
 }
 
 .form-input.input-sm {
@@ -902,7 +902,7 @@ textarea.form-input.input-sm {
 }
 
 .form-input-hint {
-  color: #bcc3ce;
+  color: #8c8c8c;
   font-size: .7rem;
   margin-top: .2rem;
 }
@@ -922,7 +922,7 @@ textarea.form-input.input-sm {
   -moz-appearance: none;
   appearance: none;
   background: #000; 
-  border: .05rem solid #bcc3ce;
+  border: .05rem solid #8c8c8c;
   border-radius: .1rem;
   color: inherit;
   font-size: .8rem;
@@ -1042,7 +1042,7 @@ textarea.form-input.input-sm {
 .form-checkbox .form-icon,
 .form-radio .form-icon,
 .form-switch .form-icon {
-  border: .05rem solid #bcc3ce;
+  border: .05rem solid #8c8c8c;
   cursor: pointer;
   display: inline-block;
   position: absolute;
@@ -1074,7 +1074,7 @@ textarea.form-input.input-sm {
 
 .form-checkbox input:active + .form-icon,
 .form-radio input:active + .form-icon {
-  background: #eef0f3;
+  background: #050505;
 }
 
 .form-checkbox .form-icon {
@@ -1135,7 +1135,7 @@ textarea.form-input.input-sm {
 }
 
 .form-switch .form-icon {
-  background: #bcc3ce;
+  background: #8c8c8c;
   background-clip: padding-box;
   border-radius: .45rem;
   height: .9rem;
@@ -1162,7 +1162,7 @@ textarea.form-input.input-sm {
 }
 
 .form-switch input:active + .form-icon::before {
-  background: #f7f8f9;
+  background: #0d0d0d;
 }
 
 .input-group {
@@ -1171,8 +1171,8 @@ textarea.form-input.input-sm {
 }
 
 .input-group .input-group-addon {
-  background: #f7f8f9;
-  border: .05rem solid #bcc3ce;
+  background: #0d0d0d;
+  border: .05rem solid #8c8c8c;
   border-radius: .1rem;
   line-height: 1.2rem;
   padding: .25rem .4rem;
@@ -1323,18 +1323,18 @@ textarea.form-input.input-sm {
 .form-input.disabled,
 .form-select:disabled,
 .form-select.disabled {
-  background-color: #eef0f3;
+  background-color: #050505;
   cursor: not-allowed;
   opacity: .5;
 }
 
 .form-input[readonly] {
-  background-color: #f7f8f9;
+  background-color: #0d0d0d;
 }
 
 input:disabled + .form-icon,
 input.disabled + .form-icon {
-  background: #eef0f3;
+  background: #050505;
   cursor: not-allowed;
   opacity: .5;
 }
@@ -1360,7 +1360,7 @@ input.disabled + .form-icon {
 }
 
 .label {
-  background: #eef0f3;
+  background: #050505;
   border-radius: .1rem;
   color: white;
   display: inline-block; 
@@ -1415,7 +1415,7 @@ code {
 }
 
 .code::before {
-  color: #bcc3ce;
+  color: #8c8c8c;
   content: attr(data-lang);
   font-size: .7rem;
   position: absolute;
@@ -1424,7 +1424,7 @@ code {
 }
 
 .code code {
-  background: #f7f8f9;
+  background: #0d0d0d;
   color: inherit;
   display: block;
   line-height: 1.5;
@@ -1496,7 +1496,7 @@ video.video-responsive::before {
 }
 
 .figure .figure-caption {
-  color: #66758c;
+  color: #404040;
   margin-top: .4rem;
 }
 
@@ -2129,7 +2129,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .avatar .avatar-presence {
-  background: #bcc3ce;
+  background: #8c8c8c;
   border-radius: 50%;
   box-shadow: 0 0 0 .1rem #000;
   height: .5em;
@@ -2215,7 +2215,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .breadcrumb .breadcrumb-item {
-  color: #66758c;
+  color: #404040;
   display: inline-block;
   margin: 0;
   padding: .2rem 0;
@@ -2226,17 +2226,17 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .breadcrumb .breadcrumb-item:not(:last-child) a {
-  color: #66758c;
+  color: #404040;
 }
 
 .breadcrumb .breadcrumb-item:not(:first-child)::before {
-  color: #66758c;
+  color: #404040;
   content: "/";
   padding-right: .4rem;
 }
 
 .bar {
-  background: #eef0f3;
+  background: #050505;
   border-radius: .1rem;
   display: -ms-flexbox;
   display: flex;
@@ -2289,7 +2289,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .bar-slider .bar-item:not(:last-child):first-child {
-  background: #eef0f3;
+  background: #050505;
   z-index: 1;
 }
 
@@ -2312,7 +2312,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .card {
   background: #000;
-  border: .05rem solid #dadee4;
+  border: .05rem solid #a6a6a6;
   border-radius: .1rem;
   display: -ms-flexbox;
   display: flex;
@@ -2358,7 +2358,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .chip {
   align-items: center;
-  background: #eef0f3;
+  background: #050505;
   border-radius: 5rem;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -2423,9 +2423,9 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .empty {
-  background: #f7f8f9;
+  background: #0d0d0d;
   border-radius: .1rem;
-  color: #66758c;
+  color: #404040;
   padding: 3.2rem 1.6rem; 
   text-align: center;
 }
@@ -2446,7 +2446,7 @@ summary.accordion-header::-webkit-details-marker {
 .menu {
   background: #000;
   border-radius: .1rem;
-  box-shadow: 0 .05rem .2rem rgba(48, 55, 66, .3);
+  box-shadow: 0 .05rem .2rem rgba(0, 0, 0, .3);
   list-style: none;
   margin: 0;
   min-width: 180px;
@@ -2539,7 +2539,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal:target .modal-overlay,
 .modal.active .modal-overlay {
-  background: rgba(247, 248, 249, .75);
+  background: rgba(13, 13, 13, .75);
   bottom: 0;
   cursor: default;
   display: block;
@@ -2572,7 +2572,7 @@ summary.accordion-header::-webkit-details-marker {
 .modal-container {
   background: #000;
   border-radius: .1rem;
-  box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
+  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .3);
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
@@ -2588,7 +2588,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .modal-container .modal-header {
-  color: #303742;
+  color: #000;
   padding: .8rem;
 }
 
@@ -2613,7 +2613,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .nav .nav-item a {
-  color: #66758c;
+  color: #404040;
   padding: .2rem .4rem;
   text-decoration: none;
 }
@@ -2624,7 +2624,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .nav .nav-item.active > a {
-  color: #505c6e;
+  color: #262626;
   font-weight: bold;
 }
 
@@ -2698,7 +2698,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .panel {
-  border: .05rem solid #dadee4;
+  border: .05rem solid #a6a6a6;
   border-radius: .1rem;
   display: -ms-flexbox;
   display: flex;
@@ -2781,7 +2781,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .popover .card {
   border: 0; 
-  box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
+  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .3);
 }
 
 .step {
@@ -2841,20 +2841,20 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .step .step-item.active ~ .step-item::before {
-  background: #dadee4;
+  background: #a6a6a6;
 }
 
 .step .step-item.active ~ .step-item a {
-  color: #bcc3ce;
+  color: #8c8c8c;
 }
 
 .step .step-item.active ~ .step-item a::before {
-  background: #dadee4;
+  background: #a6a6a6;
 }
 
 .tab {
   align-items: center;
-  border-bottom: .05rem solid #dadee4;
+  border-bottom: .05rem solid #a6a6a6;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
@@ -2970,9 +2970,9 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .toast {
-  background: rgba(48, 55, 66, .95);
-  border: .05rem solid #303742;
-  border-color: #303742;
+  background: rgba(0, 0, 0, .95);
+  border: .05rem solid #000;
+  border-color: #000;
   border-radius: .1rem;
   color: #000;
   display: block;
@@ -3025,7 +3025,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .tooltip::after {
-  background: rgba(48, 55, 66, .95);
+  background: rgba(0, 0, 0, .95);
   border-radius: .1rem;
   bottom: 100%;
   color: #000;
@@ -3138,16 +3138,16 @@ a.text-secondary:visited {
 }
 
 .text-gray {
-  color: #bcc3ce !important;
+  color: #8c8c8c !important;
 }
 
 a.text-gray:focus,
 a.text-gray:hover {
-  color: #adb6c4;
+  color: #807f7f;
 }
 
 a.text-gray:visited {
-  color: #cbd0d9;
+  color: #999;
 }
 
 .text-light {
@@ -3225,12 +3225,13 @@ a.text-error:visited {
 }
 
 .bg-dark {
-  background: #303742 !important;
+  background: #000 !important;
   color: #000;
 }
 
 .bg-gray {
-  background: #f7f8f9 !important;
+  background: #0d0d0d !important;
+  color: #000;
 }
 
 .bg-success {
@@ -3336,7 +3337,7 @@ a.text-error:visited {
 .divider[data-content]::after,
 .divider-vert[data-content]::after {
   background: #000;
-  color: #bcc3ce;
+  color: #8c8c8c;
   content: attr(data-content);
   display: inline-block;
   font-size: .7rem;
@@ -3345,7 +3346,7 @@ a.text-error:visited {
 }
 
 .divider {
-  border-top: .05rem solid #f1f3f5;
+  border-top: .05rem solid #bababa;
   height: .05rem;
   margin: .4rem 0;
 }
@@ -3360,7 +3361,7 @@ a.text-error:visited {
 }
 
 .divider-vert::before {
-  border-left: .05rem solid #dadee4;
+  border-left: .05rem solid #a6a6a6;
   bottom: .4rem;
   content: "";
   display: block;