Add colors

1 files changed, 95 insertions, 94 deletions

diff --git a/docs/dist/spectre-rtl.min.css b/docs/dist/spectre-rtl.min.css
index 6e6acf7..452c1d8 100644
--- a/docs/dist/spectre-rtl.min.css
+++ b/docs/dist/spectre-rtl.min.css
@@ -333,7 +333,7 @@ abbr[title] {
 }
 
 kbd {
-  background: #303742;
+  background: #fff;
   border-radius: .1rem;
   color: #000;
   font-size: .7rem;
@@ -342,15 +342,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;
 }
@@ -468,16 +468,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 {
@@ -489,7 +489,7 @@ html:lang(ko) {
 
 .table td,
 .table th {
-  border-bottom: .05rem solid #dadee4;
+  border-bottom: .05rem solid #a6a6a6;
   padding: .6rem .4rem;
 }
 
@@ -699,7 +699,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;
 }
 
@@ -788,7 +788,7 @@ legend {
   appearance: none;
   background: #000;
   background-image: none;
-  border: .05rem solid #bcc3ce;
+  border: .05rem solid #8c8c8c;
   border-radius: .1rem;
   color: #fff;
   display: block;
@@ -809,15 +809,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 {
@@ -849,7 +849,7 @@ textarea.form-input.input-sm {
 }
 
 .form-input-hint {
-  color: #bcc3ce;
+  color: #8c8c8c;
   font-size: .7rem;
   margin-top: .2rem;
 }
@@ -869,7 +869,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;
@@ -989,7 +989,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;
@@ -1021,7 +1021,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 {
@@ -1082,7 +1082,7 @@ textarea.form-input.input-sm {
 }
 
 .form-switch .form-icon {
-  background: #bcc3ce;
+  background: #8c8c8c;
   background-clip: padding-box;
   border-radius: .45rem;
   height: .9rem;
@@ -1109,7 +1109,7 @@ textarea.form-input.input-sm {
 }
 
 .form-switch input:active + .form-icon::before {
-  background: #f7f8f9;
+  background: #0d0d0d;
 }
 
 .input-group {
@@ -1118,8 +1118,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;
@@ -1270,18 +1270,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;
 }
@@ -1307,7 +1307,7 @@ input:disabled + .form-icon {
 }
 
 .label {
-  background: #eef0f3;
+  background: #050505;
   border-radius: .1rem;
   color: #fff;
   display: inline-block;
@@ -1362,7 +1362,7 @@ code {
 }
 
 .code::before {
-  color: #bcc3ce;
+  color: #8c8c8c;
   content: attr(data-lang);
   font-size: .7rem;
   position: absolute;
@@ -1371,7 +1371,7 @@ code {
 }
 
 .code code {
-  background: #f7f8f9;
+  background: #0d0d0d;
   color: inherit;
   display: block;
   line-height: 1.5;
@@ -1443,7 +1443,7 @@ video.video-responsive::before {
 }
 
 .figure .figure-caption {
-  color: #66758c;
+  color: #404040;
   margin-top: .4rem;
 }
 
@@ -2076,7 +2076,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;
@@ -2162,7 +2162,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .breadcrumb .breadcrumb-item {
-  color: #66758c;
+  color: #404040;
   display: inline-block;
   margin: 0;
   padding: .2rem 0;
@@ -2173,17 +2173,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;
@@ -2236,7 +2236,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .bar-slider .bar-item:not(:last-child):first-child {
-  background: #eef0f3;
+  background: #050505;
   z-index: 1;
 }
 
@@ -2259,7 +2259,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;
@@ -2305,7 +2305,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;
@@ -2370,9 +2370,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;
 }
@@ -2393,7 +2393,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;
@@ -2486,7 +2486,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .modal.active .modal-overlay,
 .modal:target .modal-overlay {
-  background: rgba(247, 248, 249, .75);
+  background: rgba(13, 13, 13, .75);
   bottom: 0;
   cursor: default;
   display: block;
@@ -2519,7 +2519,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;
@@ -2535,7 +2535,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .modal-container .modal-header {
-  color: #303742;
+  color: #000;
   padding: .8rem;
 }
 
@@ -2560,7 +2560,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .nav .nav-item a {
-  color: #66758c;
+  color: #404040;
   padding: .2rem .4rem;
   text-decoration: none;
 }
@@ -2571,7 +2571,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .nav .nav-item.active > a {
-  color: #505c6e;
+  color: #262626;
   font-weight: 700;
 }
 
@@ -2645,7 +2645,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .panel {
-  border: .05rem solid #dadee4;
+  border: .05rem solid #a6a6a6;
   border-radius: .1rem;
   display: -ms-flexbox;
   display: flex;
@@ -2728,7 +2728,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 {
@@ -2788,20 +2788,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;
@@ -2917,9 +2917,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;
@@ -2972,7 +2972,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;
@@ -3085,16 +3085,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 {
@@ -3172,12 +3172,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 {
@@ -3283,7 +3284,7 @@ a.text-error:visited {
 .divider-vert[data-content]::after,
 .divider[data-content]::after {
   background: #000;
-  color: #bcc3ce;
+  color: #8c8c8c;
   content: attr(data-content);
   display: inline-block;
   font-size: .7rem;
@@ -3292,7 +3293,7 @@ a.text-error:visited {
 }
 
 .divider {
-  border-top: .05rem solid #f1f3f5;
+  border-top: .05rem solid #bababa;
   height: .05rem;
   margin: .4rem 0;
 }
@@ -3307,7 +3308,7 @@ a.text-error:visited {
 }
 
 .divider-vert::before {
-  border-left: .05rem solid #dadee4;
+  border-left: .05rem solid #a6a6a6;
   bottom: .4rem;
   content: "";
   display: block;
@@ -3713,7 +3714,7 @@ a.text-error:visited {
 }
 
 .calendar {
-  border: .05rem solid #dadee4;
+  border: .05rem solid #a6a6a6;
   border-radius: .1rem;
   display: block;
   min-width: 280px;
@@ -3721,7 +3722,7 @@ a.text-error:visited {
 
 .calendar .calendar-nav {
   align-items: center;
-  background: #f7f8f9;
+  background: #0d0d0d;
   border-top-left-radius: .1rem;
   border-top-right-radius: .1rem;
   display: -ms-flexbox;
@@ -3750,15 +3751,15 @@ a.text-error:visited {
 }
 
 .calendar .calendar-header {
-  background: #f7f8f9;
-  border-bottom: .05rem solid #dadee4;
-  color: #bcc3ce;
+  background: #0d0d0d;
+  border-bottom: .05rem solid #a6a6a6;
+  color: #8c8c8c;
   font-size: .7rem;
   text-align: center;
 }
 
 .calendar .calendar-body {
-  color: #66758c;
+  color: #404040;
 }
 
 .calendar .calendar-date {
@@ -3773,7 +3774,7 @@ a.text-error:visited {
   background: 0 0;
   border: .05rem solid transparent;
   border-radius: 50%;
-  color: #66758c;
+  color: #404040;
   cursor: pointer;
   font-size: .7rem;
   height: 1.4rem;
@@ -3875,8 +3876,8 @@ a.text-error:visited {
 }
 
 .calendar.calendar-lg .calendar-body .calendar-date {
-  border-bottom: .05rem solid #dadee4;
-  border-right: .05rem solid #dadee4;
+  border-bottom: .05rem solid #a6a6a6;
+  border-right: .05rem solid #a6a6a6;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
@@ -3954,11 +3955,11 @@ a.text-error:visited {
 .carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-nav .nav-item:nth-of-type(6),
 .carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-nav .nav-item:nth-of-type(7),
 .carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-nav .nav-item:nth-of-type(8) {
-  color: #f7f8f9;
+  color: #bfbfbf;
 }
 
 .carousel {
-  background: #f7f8f9;
+  background: #0d0d0d;
   display: block;
   overflow: hidden;
   -webkit-overflow-scrolling: touch;
@@ -3997,9 +3998,9 @@ a.text-error:visited {
 
 .carousel .carousel-container .item-next,
 .carousel .carousel-container .item-prev {
-  background: rgba(247, 248, 249, .25);
-  border-color: rgba(247, 248, 249, .5);
-  color: #f7f8f9;
+  background: rgba(191, 191, 191, .25);
+  border-color: rgba(191, 191, 191, .5);
+  color: #bfbfbf;
   opacity: 0;
   position: absolute;
   top: 50%;
@@ -4030,7 +4031,7 @@ a.text-error:visited {
 }
 
 .carousel .carousel-nav .nav-item {
-  color: rgba(247, 248, 249, .5);
+  color: rgba(191, 191, 191, .5);
   display: block;
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
@@ -4159,7 +4160,7 @@ a.text-error:visited {
 }
 
 .comparison-slider .comparison-label {
-  background: rgba(48, 55, 66, .5);
+  background: rgba(0, 0, 0, .5);
   bottom: .8rem;
   color: #000;
   padding: .2rem .4rem;
@@ -4227,7 +4228,7 @@ a.text-error:visited {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #f7f8f9;
+  background: #0d0d0d;
   border: 0;
   border-radius: .1rem;
   display: block;
@@ -4247,7 +4248,7 @@ a.text-error:visited {
 }
 
 .meter::-webkit-meter-bar {
-  background: #f7f8f9;
+  background: #0d0d0d;
 }
 
 .meter::-webkit-meter-optimum-value {
@@ -4301,7 +4302,7 @@ a.text-error:visited {
 }
 
 .off-canvas .off-canvas-sidebar {
-  background: #f7f8f9;
+  background: #0d0d0d;
   bottom: 0;
   min-width: 10rem;
   overflow-y: auto;
@@ -4321,7 +4322,7 @@ a.text-error:visited {
 }
 
 .off-canvas .off-canvas-overlay {
-  background: rgba(48, 55, 66, .1);
+  background: rgba(0, 0, 0, .1);
   border-color: transparent;
   border-radius: 0;
   bottom: 0;
@@ -4368,7 +4369,7 @@ a.text-error:visited {
 }
 
 .parallax .parallax-content {
-  box-shadow: 0 1rem 2.1rem rgba(48, 55, 66, .3);
+  box-shadow: 0 1rem 2.1rem rgba(0, 0, 0, .3);
   height: auto;
   transform: perspective(1000px);
   transform-style: preserve-3d;
@@ -4398,7 +4399,7 @@ a.text-error:visited {
   left: 0;
   position: absolute;
   text-align: center;
-  text-shadow: 0 0 20px rgba(48, 55, 66, .75);
+  text-shadow: 0 0 20px rgba(0, 0, 0, .75);
   top: 0;
   transform: translateZ(50px) scale(.95);
   transition: transform .4s;
@@ -4510,7 +4511,7 @@ a.text-error:visited {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #eef0f3;
+  background: #050505;
   border: 0;
   border-radius: .1rem;
   color: #5755d9;
@@ -4536,7 +4537,7 @@ a.text-error:visited {
 
 .progress:indeterminate {
   animation: progress-indeterminate 1.5s linear infinite;
-  background: #eef0f3 linear-gradient(to right, #5755d9 30%, #eef0f3 30%) top left/150% 150% no-repeat;
+  background: #050505 linear-gradient(to right, #5755d9 30%, #050505 30%) top left/150% 150% no-repeat;
 }
 
 .progress:indeterminate::-moz-progress-bar {
@@ -4617,38 +4618,38 @@ a.text-error:visited {
 
 .slider.disabled::-webkit-slider-thumb,
 .slider:disabled::-webkit-slider-thumb {
-  background: #f7f8f9;
+  background: #bfbfbf;
   transform: scale(1);
 }
 
 .slider.disabled::-moz-range-thumb,
 .slider:disabled::-moz-range-thumb {
-  background: #f7f8f9;
+  background: #bfbfbf;
   transform: scale(1);
 }
 
 .slider.disabled::-ms-thumb,
 .slider:disabled::-ms-thumb {
-  background: #f7f8f9;
+  background: #bfbfbf;
   transform: scale(1);
 }
 
 .slider::-webkit-slider-runnable-track {
-  background: #eef0f3;
+  background: #050505;
   border-radius: .1rem;
   height: .1rem;
   width: 100%;
 }
 
 .slider::-moz-range-track {
-  background: #eef0f3;
+  background: #050505;
   border-radius: .1rem;
   height: .1rem;
   width: 100%;
 }
 
 .slider::-ms-track {
-  background: #eef0f3;
+  background: #050505;
   border-radius: .1rem;
   height: .1rem;
   width: 100%;
@@ -4666,7 +4667,7 @@ a.text-error:visited {
 }
 
 .timeline .timeline-item::before {
-  background: #dadee4;
+  background: #a6a6a6;
   content: "";
   height: 100%;
   left: 11px;