@scalar/api-client 0.1.13 → 0.1.15

package/dist/style.css

@@ -10,15 +10,15 @@
   max-width: 100%;
 }
 .scalar-api-client__codemirror.ͼw {
-  background-color: var(--scalar-api-client-background-input);
+  background-color: var(--theme-background-1);
 }
 .scalar-api-client__codemirror--read-only.ͼw {
-  background-color: var(--scalar-api-client-background-secondary);
+  background-color: var(--theme-background-2);
 }
 
 /** URL input */
 .scalar-api-client__url-input {
-  font-weight: var(--scalar-api-client-font-semibold);
+  font-weight: var(--theme-semibold);
 }
 .scalar-api-client__url-input .cm-scroller {
   padding-left: 6px;
@@ -30,7 +30,7 @@
   color: var(--scalar-api-client-color);
 }
 
-.modal-layout[data-v-9bd42c67] {
+.modal-layout[data-v-5579cc4c] {
   position: fixed;
   width: 100vw;
   height: 100vh;
@@ -40,40 +40,40 @@
   background: rgba(0, 0, 0, 0.44);
   padding: 20px;
   opacity: 0;
-  animation: modal-fade-9bd42c67 0.2s forwards;
+  animation: modal-fade-5579cc4c 0.2s forwards;
 }
-.modal-body[data-v-9bd42c67] {
+.modal-body[data-v-5579cc4c] {
   padding: 24px 12px 18px 24px;
   max-height: calc(100vh - 240px);
-  background: var(--scalar-api-client-background-primary);
-  border-radius: var(--scalar-api-client-rounded);
-  font-family: var(--scalar-api-client-font-sans);
+  background: var(--theme-background-1);
+  border-radius: var(--theme-radius-lg);
+  font-family: var(--theme-font);
 }
-.modal[data-v-9bd42c67] {
+.modal[data-v-5579cc4c] {
   margin: 80px auto 0;
   position: relative;
-  background: var(--scalar-api-client-theme-background-2);
-  border-radius: var(--scalar-api-client-rounded);
-  color: var(--scalar-api-client-text-color-primary);
+  background: var(--theme-background-2);
+  border-radius: var(--theme-radius-lg);
+  color: var(--theme-color-1);
   width: 100%;
   text-align: left;
   line-height: 1.4;
   opacity: 0;
   transform: scale(0.98);
-  animation: modal-pop-9bd42c67 0.15s 0.15s forwards;
+  animation: modal-pop-5579cc4c 0.15s 0.15s forwards;
   display: flex;
   flex-direction: column;
 }
-.modal-content-large[data-v-9bd42c67] {
+.modal-content-large[data-v-5579cc4c] {
   max-width: 800px;
 }
-.modal-content-normal[data-v-9bd42c67] {
+.modal-content-normal[data-v-5579cc4c] {
   max-width: 640px;
 }
-.modal-content-small[data-v-9bd42c67] {
+.modal-content-small[data-v-5579cc4c] {
   max-width: 480px;
 }
-@keyframes modal-fade-9bd42c67 {
+@keyframes modal-fade-5579cc4c {
 from {
     opacity: 0;
 }
@@ -81,7 +81,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes modal-pop-9bd42c67 {
+@keyframes modal-pop-5579cc4c {
 0% {
     opacity: 0;
 }
@@ -90,14 +90,14 @@ to {
     transform: scale(1);
 }
 }
-.modal-header[data-v-9bd42c67] {
+.modal-header[data-v-5579cc4c] {
   padding: 12px 24px;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   font-size: var(--scalar-api-client-theme-font-size-4);
   text-align: left;
   font-weight: 600;
-  border-radius: var(--scalar-api-client-rounded)
-    var(--scalar-api-client-rounded) 0 0;
+  border-radius: var(--theme-radius-lg)
+    var(--theme-radius-lg) 0 0;
 }
 
 .navtable-mock {
@@ -105,8 +105,8 @@ to {
   width: 100%;
   background-image: linear-gradient(
     0deg,
-    var(--scalar-api-client-border-color) 1px,
-    --scalar-api-client-background-primary 1px
+    var(--theme-border-color) 1px,
+    --theme-background-1 1px
   );
   background-size: 31px 31px;
   background-position: center 1px;
@@ -154,19 +154,19 @@ to {
   transform: rotate(45deg) translate3d(-0.5px, -1px, 0);
 }
 .radio.post {
-  background: var(--scalar-api-client-post-color);
+  background: var(--theme-post-color);
 }
 .radio.delete {
-  background: var(--scalar-api-client-delete-color);
+  background: var(--theme-delete-color);
 }
 .radio.patch {
-  background: var(--scalar-api-client-patch-color);
+  background: var(--theme-patch-color);
 }
 .radio.get {
-  background: var(--scalar-api-client-get-color);
+  background: var(--theme-get-color);
 }
 .radio.put {
-  background: var(--scalar-api-client-put-color);
+  background: var(--theme-put-color);
 }
 
 .scalar-api-client__address-bar {
@@ -175,19 +175,19 @@ to {
   display: flex;
   align-items: center;
   position: relative;
-  background: var(--scalar-api-client-background-primary);
+  background: var(--theme-background-1);
 }
 .scalar-api-client__url-form {
   display: flex;
   width: 100%;
   align-items: stretch;
-  border-radius: var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg);
 }
 .scalar-api-client__field {
-  border: var(--scalar-api-client-border);
+  border: 1px solid var(--theme-border-color);
   border-right: 0;
-  border-radius: var(--scalar-api-client-rounded) 0 0
-    var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg) 0 0
+    var(--theme-radius-lg);
   display: flex;
   align-items: stretch;
   width: 100%;
@@ -202,18 +202,18 @@ to {
 .scalar-api-client__request-type {
   display: flex;
   align-items: center;
-  background: var(--scalar-api-client-background-secondary);
-  color: var(--scalar-api-client-text-color-muted);
+  background: var(--theme-background-2);
+  color: var(--theme-color-disabled);
   appearance: none;
   -webkit-appearance: none;
   padding: 0 12px;
-  border-right: var(--scalar-api-client-border);
-  border-radius: var(--scalar-api-client-rounded) 0 0
-    var(--scalar-api-client-rounded);
+  border-right: 1px solid var(--theme-border-color);
+  border-radius: var(--theme-radius-lg) 0 0
+    var(--theme-radius-lg);
   position: relative;
 }
 .scalar-api-client__request-type span {
-  font-family: var(--scalar-api-client-font-mono);
+  font-family: var(--theme-font-code);
   font-size: 500;
   font-size: 12px;
   text-transform: uppercase;
@@ -232,7 +232,7 @@ to {
   font-style: normal;
   flex-shrink: 0;
   display: inline-block;
-  color: var(--scalar-api-client-text-color-muted);
+  color: var(--theme-color-disabled);
   background: var(--scalar-api-client-color);
 }
 .meta-request-break {
@@ -242,17 +242,17 @@ to {
   appearance: none;
   -webkit-appearance: none;
   background: transparent;
-  color: var(--scalar-api-client-text-color-secondary);
+  color: var(--theme-color-2);
   display: flex;
   align-items: center;
-  border-radius: var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg);
   height: 100%;
 }
 .scalar-api-client__send-request-button[type='submit'] {
-  font-size: var(--scalar-api-client-text-xs);
+  font-size: var(--theme-micro);
   letter-spacing: 0.25px;
   line-height: 30px;
-  font-weight: var(--scalar-api-client-font-semibold);
+  font-weight: var(--theme-semibold);
   color: white;
   border: none;
   white-space: nowrap;
@@ -260,8 +260,8 @@ to {
   text-transform: uppercase;
   cursor: pointer;
   outline: none;
-  border-radius: 0 var(--scalar-api-client-rounded)
-    var(--scalar-api-client-rounded) 0;
+  border-radius: 0 var(--theme-radius-lg)
+    var(--theme-radius-lg) 0;
   background: var(--scalar-api-client-color);
   /**  #087f5b */
   display: flex;
@@ -309,42 +309,42 @@ to {
 .scalar-api-client__history-toggle {
   padding: 0 9px;
   line-height: 30px;
-  color: var(--scalar-api-client-text-color-muted);
-  font-size: var(--scalar-api-client-text-xs);
+  color: var(--theme-color-disabled);
+  font-size: var(--theme-micro);
   letter-spacing: 0.125px;
-  font-weight: var(--scalar-api-client-font-semibold);
+  font-weight: var(--theme-semibold);
   text-transform: uppercase;
   height: 100%;
   display: flex;
   align-items: center;
   cursor: pointer;
   white-space: nowrap;
-  border: var(--scalar-api-client-border);
+  border: 1px solid var(--theme-border-color);
   margin-left: 12px;
-  border-radius: var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg);
 }
 .scalar-api-client__history-toggle:hover {
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
 }
 .scalar-api-client__history-toggle svg {
   height: 13px;
   width: 13px;
   margin-right: 6px;
-  color: var(--scalar-api-client-text-color-muted);
+  color: var(--theme-color-disabled);
 }
 .scalar-api-client__address-bar-close {
-  fill: var(--scalar-api-client-text-color-muted);
+  fill: var(--theme-color-disabled);
   margin-left: 12px;
   height: 24px;
 }
 .scalar-api-client__address-bar-close:hover {
   cursor: pointer;
-  fill: var(--scalar-api-client-text-color-primary);
+  fill: var(--theme-color-1);
 }
 .scalar-api-client__address-bar__content {
   width: 640px;
   height: 100%;
-  background: var(--scalar-api-client-background-primary);
+  background: var(--theme-background-1);
   position: fixed;
   top: 0;
   right: 0;
@@ -375,18 +375,18 @@ to {
   cursor: pointer;
 }
 .scalar-api-client__address-bar .navtable-item__active {
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
   cursor: default;
 }
 .scalar-api-client__address-bar .navtable-item__active .radio:before {
   display: none;
 }
 .navigation-back {
-  stroke: var(--scalar-api-client-text-color-secondary);
+  stroke: var(--theme-color-2);
   cursor: pointer;
 }
 .navigation-back:hover {
-  stroke: var(--scalar-api-client-text-color-primary);
+  stroke: var(--theme-color-1);
 }
 .scalar-api-client__address-bar__close {
   width: 100%;
@@ -406,7 +406,7 @@ to {
   border: none;
   outline: none;
   font-size: 12px;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   width: 100%;
   display: block;
   overflow: hidden;
@@ -416,15 +416,15 @@ to {
 .navtable-item-request span em {
   text-transform: uppercase;
   font-style: normal;
-  font-family: var(--scalar-api-client-font-mono);
+  font-family: var(--theme-font-code);
   font-size: 11px;
   margin-right: 6px;
-  font-weight: var(--scalar-api-client-font-bold);
-  color: var(--scalar-api-client-text-color-muted);
+  font-weight: var(--theme-bold);
+  color: var(--theme-color-disabled);
 }
 .navtable-item-time {
   font-size: 12px;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   text-transform: capitalize;
   padding: 0 9px;
 }
@@ -445,9 +445,9 @@ to {
 }
 
 .scalar-api-client__item {
-  border-radius: var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg);
   margin-bottom: 6px;
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
   box-shadow: var(--shadow1);
   position: relative;
 }
@@ -458,7 +458,7 @@ to {
   cursor: pointer;
 }
 .scalar-api-client__item--open {
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
 }
 .scalar-api-client__item--open:focus-within {
   box-shadow: var(--shadow1);
@@ -482,9 +482,9 @@ to {
   width: 100%;
 }
 .scalar-api-client__item .scalar-api-client__item__title {
-  color: var(--scalar-api-client-text-color-primary);
-  font-size: var(--scalar-api-client-text-sm);
-  font-weight: var(--scalar-api-client-font-bold);
+  color: var(--theme-color-1);
+  font-size: var(--theme-small);
+  font-weight: var(--theme-bold);
   user-select: none;
   flex: 1;
 }
@@ -500,19 +500,19 @@ to {
 .scalar-api-client__item .scalar-api-client__toggle__icon {
   width: 10px;
   margin-right: 6px;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
 }
 .scalar-api-client__item__options {
   position: relative;
 }
 .scalar-api-client__item__options span {
-  background: var(--scalar-api-client-background-muted);
+  background: var(--theme-background-3);
   padding: 2px 6px;
   border-radius: 3px;
   font-size: 12px;
   pointer-events: none;
-  color: var(--scalar-api-client-text-color-secondary);
-  border: var(--scalar-api-client-border);
+  color: var(--theme-color-2);
+  border: 1px solid var(--theme-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -533,19 +533,19 @@ to {
 }
 
 .table {
-  border: var(--scalar-api-client-border);
+  border: 1px solid var(--theme-border-color);
   background: transparent;
-  border-radius: var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg);
   width: 100%;
 }
 .table-row {
-  border-bottom: var(--scalar-api-client-border);
+  border-bottom: 1px solid var(--theme-border-color);
   display: flex;
   position: relative;
 }
 .table-row__add {
-  border-radius: 0 0 var(--scalar-api-client-rounded)
-    var(--scalar-api-client-rounded);
+  border-radius: 0 0 var(--theme-radius-lg)
+    var(--theme-radius-lg);
   border-bottom: none;
 }
 .table-row.required-parameter .table-row-item:nth-of-type(2):after {
@@ -554,10 +554,10 @@ to {
   top: 4px;
   right: 0;
   padding: 5px 9px 5px 6px;
-  font-weight: var(--scalar-api-client-font-semibold);
+  font-weight: var(--theme-semibold);
   font-size: 12px;
-  background: var(--scalar-api-client-background-secondary);
-  box-shadow: -2px 0 4px var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
+  box-shadow: -2px 0 4px var(--theme-background-2);
 }
 .table-row.required-parameter
   .table-row-item:nth-of-type(2):focus-within:after {
@@ -567,39 +567,39 @@ to {
   border-bottom: none;
 }
 .table-row__active {
-  border-radius: 0 0 var(--scalar-api-client-rounded)
-    var(--scalar-api-client-rounded);
+  border-radius: 0 0 var(--theme-radius-lg)
+    var(--theme-radius-lg);
 }
 .table-row-drag {
   width: 20px;
   flex-shrink: 0;
-  border-right: var(--scalar-api-client-border);
+  border-right: 1px solid var(--theme-border-color);
   align-items: center;
   justify-content: center;
   display: none;
 }
 .table-row-drag svg {
   width: 6px;
-  fill: var(--scalar-api-client-text-color-muted);
+  fill: var(--theme-color-disabled);
 }
 .table-row-drag .table-row-drag-add {
   width: 8px;
 }
 .table-row-item {
   width: 100%;
-  border-right: var(--scalar-api-client-border);
+  border-right: 1px solid var(--theme-border-color);
   position: relative;
 }
 .table-row-item-menu {
   position: absolute;
   right: 12px;
-  background: var(--scalar-api-client-background-muted);
-  border: var(--scalar-api-client-border);
+  background: var(--theme-background-3);
+  border: 1px solid var(--theme-border-color);
   width: 24px;
   height: 24px;
   top: 50%;
   transform: translate3d(0, -50%, 0);
-  border-radius: var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -613,7 +613,7 @@ to {
 .table-row-item-menu svg {
   height: 12px;
   width: initial;
-  fill: var(--scalar-api-client-text-color-muted);
+  fill: var(--theme-color-disabled);
 }
 .table-row-item input {
   border: none;
@@ -621,23 +621,23 @@ to {
   outline: none;
   padding: 9px;
   width: 100%;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   font-size: 12px;
 }
 .table-row-item input[disabled] {
   background: transparent;
-  font-family: var(--scalar-api-client-font-mono);
+  font-family: var(--theme-font-code);
 }
 .table-row-item input:focus {
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
 }
 .table-row-item label {
   background: transparent;
   text-transform: uppercase;
   display: block;
   padding: 9px;
-  font-weight: var(--scalar-api-client-font-bold);
-  color: var(--scalar-api-client-text-color-muted);
+  font-weight: var(--theme-bold);
+  color: var(--theme-color-disabled);
   font-size: 12px;
 }
 .table-row-meta {
@@ -653,18 +653,18 @@ to {
 .table-row-meta-check {
   width: 18px;
   height: 18px;
-  border-radius: var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg);
   background: rgba(47, 177, 228, 0.1);
 }
 .table-row-meta svg {
   width: 13px;
   height: 13px;
   margin: 0 1px;
-  color: var(--scalar-api-client-text-color-muted);
+  color: var(--theme-color-disabled);
   cursor: pointer;
 }
 .table-row-meta svg:hover {
-  color: var(--scalar-api-client-text-color-secondary);
+  color: var(--theme-color-2);
 }
 .meta-check {
   display: flex;
@@ -672,7 +672,7 @@ to {
   cursor: pointer;
   align-items: center;
   font-size: 12px;
-  border-radius: var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg);
   user-select: none;
   margin: 0 1px;
   transition: all 0.15s ease-in-out;
@@ -687,7 +687,7 @@ to {
 .meta-checkmark {
   height: 15px;
   width: 15px;
-  background: var(--scalar-api-client-background-input);
+  background: var(--theme-background-1);
   border-radius: 3px;
   display: flex;
   align-items: center;
@@ -699,7 +699,7 @@ to {
   display: none;
   width: 5px;
   height: 8px;
-  border: solid var(--scalar-api-client-text-color-primary);
+  border: solid var(--theme-color-1);
   border-width: 0 1.5px 1.5px 0;
   transform: rotate(45deg) translate3d(0, -1px, 0);
 }
@@ -733,7 +733,7 @@ to {
   background-color: black;
 }
 .navtable-follow * {
-  font-family: var(--scalar-api-client-font-mono) !important;
+  font-family: var(--theme-font-code) !important;
 }
 .navtable-table {
   position: relative;
@@ -744,20 +744,20 @@ to {
 .navtable-item {
   display: flex;
   position: relative;
-  color: var(--scalar-api-client-text-color-primary);
-  border-top: var(--scalar-api-client-border);
-  font-weight: var(--scalar-api-client-font-semibold);
+  color: var(--theme-color-1);
+  border-top: 1px solid var(--theme-border-color);
+  font-weight: var(--theme-semibold);
 }
 .navtable-item > div {
   word-wrap: break-word;
 }
 .navtable-item > div:not(:first-child) {
-  border-left: var(--scalar-api-client-border);
+  border-left: 1px solid var(--theme-border-color);
 }
 .navtable-item-action {
-  color: var(--scalar-api-client-text-color-secondary);
+  color: var(--theme-color-2);
   font-size: 12px;
-  font-weight: var(--scalar-api-client-font-bold);
+  font-weight: var(--theme-bold);
   background: var(--scalar-api-client-bg3);
   border: none;
   border-radius: 30px;
@@ -774,12 +774,12 @@ to {
   position: relative;
 }
 .navtable-item-action:hover {
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   background: var(--scalar-api-client-gradient);
-  box-shadow: 0 0 0 1px var(--scalar-api-client-border-color);
+  box-shadow: 0 0 0 1px var(--theme-border-color);
 }
 .navtable-item-action:focus {
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
 }
 .navtable-item:hover,
 .navtable-item:focus-within .navtable-item-action {
@@ -789,15 +789,15 @@ to {
   display: flex;
   align-items: center;
   padding: 9px;
-  font-weight: var(--scalar-api-client-font-bold);
+  font-weight: var(--theme-bold);
   outline: none;
   border: none;
   appearance: none;
   background: transparent;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
 }
 .navtable-item-add:hover {
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
   cursor: pointer;
 }
 .navtable-item-25 {
@@ -824,7 +824,7 @@ to {
   align-items: center;
 }
 .navtable-item-75:focus-within {
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
 }
 .navtable-item-40 {
   width: 40%;
@@ -842,7 +842,7 @@ to {
   align-items: center;
 }
 .navtable-item-50:focus-within {
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
 }
 .navtable-item p {
   padding: 9px;
@@ -853,12 +853,12 @@ to {
   outline: none;
   appearance: none;
   font-size: 12px;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   background: transparent;
   width: 100%;
 }
 .navtable-item input:focus {
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
 }
 .navtable-item-select {
   position: relative;
@@ -874,12 +874,12 @@ to {
   top: 0;
   position: relative;
   cursor: pointer;
-  color: var(--scalar-api-client-text-color-secondary);
+  color: var(--theme-color-2);
 }
 .navtable-item-select svg {
   position: absolute;
   right: 6px;
-  color: var(--scalar-api-client-fill-icon);
+  color: var(--theme-color-ghost);
   width: 6px;
   top: 12px;
   pointer-events: none;
@@ -887,13 +887,13 @@ to {
 .navtable-item .option {
   padding: 12px 6px;
   font-size: 12px;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   width: 100%;
 }
 .navtable-item label {
-  color: var(--scalar-api-client-text-color-muted);
+  color: var(--theme-color-disabled);
   font-size: 12px;
-  font-weight: var(--scalar-api-client-font-bold);
+  font-weight: var(--theme-bold);
   text-transform: uppercase;
   padding: 9px;
   display: block;
@@ -920,7 +920,7 @@ to {
   height: 12px;
   border-radius: 50%;
   margin-right: 4px;
-  background: var(--scalar-api-client-background-secondary);
+  background: var(--theme-background-2);
 }
 .scalar-api-client__status--2xx:before {
   background: green;
@@ -947,8 +947,8 @@ to {
 
 .scalar-api-client__main__left {
   width: 50%;
-  border-right: var(--scalar-api-client-border);
-  padding: 0 12px 12px 12px;
+  border-right: 1px solid var(--theme-border-color);
+  padding: 0 0 12px 12px;
 }
 @media screen and (max-width: 820px) {
 .scalar-api-client__main__left {
@@ -960,14 +960,14 @@ to {
   flex-flow: wrap;
   padding: 0 12px 12px;
   border-radius: 3px;
-  color: var(--scalar-api-client-text-color-muted);
+  color: var(--theme-color-disabled);
   font-size: 12px;
   margin-top: -3px;
   justify-content: space-between;
 }
 .scalar-api-client__item__content .cm-s-default {
-  border: var(--scalar-api-client-border);
-  border-radius: var(--scalar-api-client-rounded);
+  border: 1px solid var(--theme-border-color);
+  border-radius: var(--theme-radius-lg);
 }
 .scalar-api-client__item__content .scalar-api-client__item__content--code {
   width: 100%;
@@ -975,7 +975,7 @@ to {
   overflow: auto;
 }
 .scalar-api-client__item__content .cm-scroller {
-  border: var(--scalar-api-client-border);
+  border: 1px solid var(--theme-border-color);
   border-radius: 3px;
 }
 .scalar-api-client__item__content .cm-editor {
@@ -991,7 +991,7 @@ to {
   font-size: 11px;
 }
 .scalar-api-client__item__content .cm-editor .cm-line {
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
 }
 .scalar-api-client__item__content-button {
   width: 100%;
@@ -1001,10 +1001,10 @@ to {
   font-size: 12px;
   background: var(--scalar-api-client-color) !important;
   text-align: center;
-  font-weight: var(--scalar-api-client-font-bold);
+  font-weight: var(--theme-bold);
   padding: 12px;
   text-transform: uppercase;
-  border-radius: var(--scalar-api-client-rounded);
+  border-radius: var(--theme-radius-lg);
   color: white;
   cursor: pointer;
 }
@@ -1014,26 +1014,9 @@ to {
 .scalar-collapsible-section-flex {
   width: 100%;
 }
-.scalar-collapsible-section-option {
-  font-size: var(--scalar-api-client-text-sm);
-  font-weight: var(--scalar-api-client-font-bold);
-  color: var(--scalar-api-client-color2);
-  background: var(--scalar-api-client-bg3);
-  border-radius: 30px;
-  display: inline-block;
-  padding: 8px 12px;
-  cursor: pointer;
-  margin: 0 4px 8px;
-  user-select: none;
-}
-.scalar-collapsible-section-option:hover {
-  box-shadow: 0 0 0 1px var(--scalar-api-client-border-color);
-  background: var(--scalar-api-client-gradient);
-  color: var(--scalar-api-client-text-color-primary);
-}
 .input {
-  background: var(--scalar-api-client-background-secondary);
-  border: var(--scalar-api-client-border);
+  background: var(--theme-background-2);
+  border: 1px solid var(--theme-border-color);
   border-radius: 3px;
   position: relative;
   width: 100%;
@@ -1044,7 +1027,7 @@ to {
   width: calc(50% - 3px);
 }
 .input:focus-within {
-  background: var(--scalar-api-client-background-muted);
+  background: var(--theme-background-3);
 }
 .input label,
 .input input {
@@ -1052,7 +1035,7 @@ to {
   border: 0;
   outline: none;
   font-size: 12px;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   width: 100%;
   background: transparent;
   appearance: none;
@@ -1061,7 +1044,7 @@ to {
 }
 .input label {
   position: absolute;
-  color: var(--scalar-api-client-text-color-secondary);
+  color: var(--theme-color-2);
 }
 .input input {
   opacity: 0;
@@ -1077,38 +1060,38 @@ to {
 .input:focus-within label {
   font-size: 10px;
   top: -6px;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
 }
 .input input:not(:placeholder-shown) + label {
-  color: var(--scalar-api-client-text-color-secondary);
+  color: var(--theme-color-2);
 }
 .select {
-  background: --scalar-api-client-background-primary;
-  border-radius: var(--scalar-api-client-rounded);
+  background: --theme-background-1;
+  border-radius: var(--theme-radius-lg);
   font-size: 12px;
-  border: var(--scalar-api-client-border);
+  border: 1px solid var(--theme-border-color);
   width: 100%;
   position: relative;
   margin-bottom: 6px;
 }
 .select:focus-within {
-  background: var(--scalar-api-client-background-muted);
+  background: var(--theme-background-3);
 }
 .select:hover {
-  background: var(--scalar-api-client-background-muted);
+  background: var(--theme-background-3);
 }
 .select svg {
   position: absolute;
   right: 12px;
   pointer-events: none;
-  color: var(--scalar-api-client-text-color-secondary);
+  color: var(--theme-color-2);
   width: 6px;
   top: 10px;
 }
 .select label {
   display: block;
   font-size: 10px;
-  color: var(--scalar-api-client-text-color-secondary);
+  color: var(--theme-color-2);
   position: absolute;
   left: 12px;
   top: 6px;
@@ -1119,7 +1102,7 @@ to {
   border: none;
   -webkit-appearance: none;
   font-size: 12px;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   appearance: none;
   width: 100%;
   padding: 18px 12px 6px 12px;
@@ -1133,14 +1116,14 @@ to {
   cursor: pointer;
   align-items: center;
   font-size: 12px;
-  border: var(--scalar-api-client-border);
+  border: 1px solid var(--theme-border-color);
   border-radius: 3px;
   padding: 10px 12px;
   user-select: none;
   width: 100%;
 }
 .check p {
-  color: var(--scalar-api-client-text-color-secondary);
+  color: var(--theme-color-2);
 }
 .check input {
   position: absolute;
@@ -1152,7 +1135,7 @@ to {
 .checkmark {
   height: 15px;
   width: 15px;
-  background: var(--scalar-api-client-background-muted);
+  background: var(--theme-background-3);
   margin-right: 10px;
   border-radius: 3px;
   display: flex;
@@ -1161,14 +1144,14 @@ to {
   position: relative;
 }
 .check input:checked ~ p {
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
 }
 .check .checkmark:after {
   content: '';
   display: none;
   width: 5px;
   height: 8px;
-  border: solid var(--scalar-api-client-text-color-muted);
+  border: solid var(--theme-color-disabled);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg) translate3d(0, -1px, 0);
 }
@@ -1183,26 +1166,26 @@ to {
   border: none;
   appearance: none;
   -webkit-appearance: none;
-  color: var(--scalar-api-client-text-color-muted);
-  border-radius: var(--scalar-api-client-rounded);
-  font-size: var(--scalar-api-client-text-xs);
-  font-weight: var(--scalar-api-client-font-bold);
+  color: var(--theme-color-disabled);
+  border-radius: var(--theme-radius-lg);
+  font-size: var(--theme-micro);
+  font-weight: var(--theme-bold);
   width: 100%;
   background: transparent;
 }
 
-a[data-v-84d41168] {
+a[data-v-7a2c7da8] {
   text-decoration: underline;
-  text-decoration-color: var(--scalar-api-client-border-color);
+  text-decoration-color: var(--theme-border-color);
   text-underline-offset: 2px;
   cursor: help;
 }
 
 .simple-cell {
-  border-right: var(--scalar-api-client-border);
+  border-right: 1px solid var(--theme-border-color);
   position: relative;
   padding: 0.75em;
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
   white-space: nowrap;
 }
 .simple-cell:last-of-type {
@@ -1212,20 +1195,20 @@ a[data-v-84d41168] {
   white-space: normal;
 }
 .simple-cell.strong {
-  font-weight: var(--scalar-api-client-font-semibold);
+  font-weight: var(--theme-semibold);
 }
 
 .simple-header {
-  color: var(--scalar-api-client-text-color-muted);
-  font-weight: var(--scalar-api-client-font-bold);
+  color: var(--theme-color-disabled);
+  font-weight: var(--theme-bold);
   text-transform: uppercase;
 }
 
 .simple-row {
-  border-top: var(--scalar-api-client-border);
+  border-top: 1px solid var(--theme-border-color);
 }
 .simple-row:last-of-type {
-  border-bottom: var(--scalar-api-client-border);
+  border-bottom: 1px solid var(--theme-border-color);
 }
 
 .simple-table {
@@ -1236,7 +1219,7 @@ a[data-v-84d41168] {
 
 .scalar-api-client__main__right {
   width: 50%;
-  padding: 0 12px 12px 12px;
+  padding: 0 0 12px 12px;
 }
 @media screen and (max-width: 820px) {
 .scalar-api-client__main__right {
@@ -1249,65 +1232,170 @@ a[data-v-84d41168] {
   top: 6px;
   right: 12px;
 }
+/* fonts */
 :root {
-  /** Colors */
-  --scalar-api-client-background-primary: #fff;
-  --scalar-api-client-background-secondary: #f6f6f6;
-  --scalar-api-client-background-input: #fff;
-  --scalar-api-client-background-muted: #e7e7e7;
-  --scalar-api-client-border-color: #dee2e6;
-  --scalar-api-client-fill-icon: #212529;
-
-  /** Borders */
-  --scalar-api-client-border: 1px solid #dee2e6;
-  --scalar-api-client-rounded: 4px;
-
-  /** Fonts */
-  --scalar-api-client-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-  Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  --scalar-api-client-font-mono: 'JetBrains Mono';
-
-  /** Font weights */
-  --scalar-api-client-font-semibold: 600;
-  --scalar-api-client-font-bold: 700;
-
-  /** Font colors */
-  --scalar-api-client-text-color-primary: #343a40;
-  --scalar-api-client-text-color-secondary: #868e96;
-  --scalar-api-client-text-color-muted: #868e96;
-
-  /** Font sizes */
-  --scalar-api-client-text-xs: 12px;
-  --scalar-api-client-text-sm: 14px;
-  --scalar-api-client-text-base: 16px;
-  --scalar-api-client-text-lg: 18px;
-
-  /** Request method colors */
-  --scalar-api-client-post-color: #00a67d;
-  --scalar-api-client-post-background: #00a67d1a;
-  --scalar-api-client-delete-color: #ef0006;
-  --scalar-api-client-delete-background: #ef00061a;
-  --scalar-api-client-patch-color: #b2b062;
-  --scalar-api-client-patch-background: #ffe6001a;
-  --scalar-api-client-get-color: #0082d0;
-  --scalar-api-client-get-background: #0082d01a;
-  --scalar-api-client-put-color: #f3830e;
-  --scalar-api-client-put-background: #f3830e1a;
-
-  /** TODO: Go through the following variables and check what they do */
-  --scalar-api-client-color2: green;
-  --scalar-api-client-bg3: purple;
-  --scalar-api-client-gradient: linear-gradient(180deg, black 0%, black 100%);
+    --app-header-height: 50px;
+    --theme-border-width: 1px;
+    --theme-radius: 3px;
+    --theme-radius-lg: 6px;
+    --theme-radius-xl: 8px;
+  
+    --theme-header-height: 50px;
+    --theme-sidebar-width: 250px;
+    --theme-toc-width: 250px;
+  
+    /* TYPOGRAPHY ------------------------------------ */
+    --theme-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    --theme-font-code: 'JetBrains Mono';
+  
+    /** Font sizes for rendered text content (editor styles or static content) */
+    --theme-heading-1: 40px; /* Editor Page heading */
+    --theme-page-description: 24px;
+    --theme-heading-2: 24px; /* Editor section headings */
+    --theme-heading-3: 20px;
+    --theme-heading-4: 16px;
+    --theme-heading-5: 16px;
+    --theme-heading-6: 16px;
+  
+    --theme-paragraph: 16px;
+    --theme-small: 14px;
+    --theme-mini: 13px;
+    --theme-micro: 12px;
+    --theme-bold: 600;
+    --theme-semibold: 500;
+    --theme-regular: 400;
+  
+    /* Font sizes for interactive applications (not rendered text content) */
+    --theme-font-size-1: 24px;
+    --theme-font-size-2: 16px;
+    --theme-font-size-3: 14px;
+    --theme-font-size-4: 13px;
+    --theme-font-size-5: 12px;
+  
+    --theme-line-height-1: 32px;
+    --theme-line-height-2: 24px;
+    --theme-line-height-3: 20px;
+    --theme-line-height-4: 18px;
+    --theme-line-height-5: 16px;
+  
+    --theme-font-medium: 500;
+    --theme-font-bold: 700;
+}
+@media (max-width: 460px) {
+:root {
+      --theme-font-size-1: 22px;
+      --theme-font-size-2: 14px;
+      --theme-font-size-3: 12px;
+}
+}
+@media (max-width: 720px) {
+:root {
+      --theme-heading-1: 24px;
+      --theme-page-description: 20px;
+}
+}
+.light-mode {
+    color-scheme: light;
+    --theme-color-1: #2a2f45;
+    --theme-color-2: #757575;
+    --theme-color-3: #8e8e8e;
+    --theme-color-disabled: #b4b1b1;
+    --theme-color-ghost: #a7a7a7;
+    --theme-color-accent: #0099ff;
+    --theme-background-1: #fff;
+    --theme-background-2: #f6f6f6;
+    --theme-background-3: #e7e7e7;
+    --theme-background-4: rgba(0, 0, 0, 0.06);
+    --theme-background-accent: #8ab4f81f;
+  
+    --theme-border-color: rgba(0, 0, 0, 0.1);
+    --theme-scrollbar-color: rgba(0, 0, 0, 0.18);
+    --theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);
+    --theme-lifted-brightness: 1;
+    --theme-backdrop-brightness: 1;
+  
+    --theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);
+    --theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,
+      rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;
+  
+    --theme-button-1: rgb(49 53 56);
+    --theme-button-1-color: #fff;
+    --theme-button-1-hover: rgb(28 31 33);
+  
+    --theme-error-color: #ae262f;
+    --theme-warning-color: #d89c6a;
+    --theme-success-color: #26ae42;
+  
+    /* REST API Client Colors */
+    --theme-post-color: #00a67d;
+    --theme-post-background: #00a67d1a;
+    --theme-delete-color: #ef0006;
+    --theme-delete-background: #ef00061a;
+    --theme-patch-color: #b2b062;
+    --theme-patch-background: #ffe6001a;
+    --theme-get-color: #0082d0;
+    --theme-get-background: #0082d01a;
+    --theme-put-color: #f3830e;
+    --theme-put-background: #f3830e1a;
+  
+    /* Misc Scalar Branding */
+    --scalar-brand: #faf6e9;
+}
+.dark-mode {
+    color-scheme: dark;
+    --theme-color-1: rgba(255, 255, 255, 0.9);
+    --theme-color-2: rgba(255, 255, 255, 0.62);
+    --theme-color-3: rgba(255, 255, 255, 0.44);
+    --theme-color-disabled: rgba(255, 255, 255, 0.34);
+    --theme-color-ghost: rgba(255, 255, 255, 0.26);
+    --theme-color-accent: #8ab4f8;
+    --theme-background-1: #1a1a1a;
+    --theme-background-2: #252525;
+    --theme-background-3: #323232;
+    --theme-background-4: rgba(255, 255, 255, 0.06);
+    --theme-background-accent: #8ab4f81f;
+  
+    --theme-border-color: rgba(255, 255, 255, 0.1);
+    --theme-scrollbar-color: rgba(255, 255, 255, 0.24);
+    --theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);
+    --theme-lifted-brightness: 1.45;
+    --theme-backdrop-brightness: 0.5;
+  
+    --theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);
+    --theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,
+      rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);
+  
+    --theme-button-1: #f6f6f6;
+    --theme-button-1-color: #000;
+    --theme-button-1-hover: #e7e7e7;
+  
+    --theme-error-color: #ff0011;
+    --theme-success-color: #26ae42;
+  
+    /* REST API Client Colors */
+    --theme-post-color: #7ee787;
+    --theme-post-background: #7ee78714;
+    --theme-delete-color: #e77e7e;
+    --theme-delete-background: #e77e7e24;
+    --theme-patch-color: #b2b062;
+    --theme-patch-background: #b2b06229;
+    --theme-get-color: #79c0ff;
+    --theme-get-background: #79c0ff21;
+    --theme-put-color: #e9950c;
+    --theme-put-background: #e9950c21;
+  
+    /* Misc Scalar Branding */
+    --scalar-brand: #8b7256;
 }
-
 .scalar-api-client {
-  background: var(--scalar-api-client-background-primary);
+  background: var(--theme-background-1);
   position: relative;
   height: 100%;
   overflow: hidden !important;
   display: flex;
   flex-direction: column;
-  font-family: var(--scalar-api-client-font-sans);
+  font-family: var(--theme-font);
 }
 @media screen and (max-width: 1000px) {
 .scalar-api-client {
@@ -1315,34 +1403,34 @@ a[data-v-84d41168] {
 }
 }
 .scalar-api-client pre {
-  font-family: var(--scalar-api-client-font-mono);
+  font-family: var(--theme-font-code);
 }
 .scalar-api-client--post {
-  --scalar-api-client-color: var(--scalar-api-client-post-color);
-  --scalar-api-client-background: var(--scalar-api-client-post-background);
+  --scalar-api-client-color: var(--theme-post-color);
+  --scalar-api-client-background: var(--theme-post-background);
 }
 .scalar-api-client--delete {
-  --scalar-api-client-color: var(--scalar-api-client-delete-color);
-  --scalar-api-client-background: var(--scalar-api-client-delete-background);
+  --scalar-api-client-color: var(--theme-delete-color);
+  --scalar-api-client-background: var(--theme-delete-background);
 }
 .scalar-api-client--patch {
-  --scalar-api-client-color: var(--scalar-api-client-patch-color);
-  --scalar-api-client-background: var(--scalar-api-client-patch-background);
+  --scalar-api-client-color: var(--theme-patch-color);
+  --scalar-api-client-background: var(--theme-patch-background);
 }
 .scalar-api-client--get {
-  --scalar-api-client-color: var(--scalar-api-client-get-color);
-  --scalar-api-client-background: var(--scalar-api-client-get-background);
+  --scalar-api-client-color: var(--theme-get-color);
+  --scalar-api-client-background: var(--theme-get-background);
 }
 .scalar-api-client--put {
-  --scalar-api-client-color: var(--scalar-api-client-put-color);
-  --scalar-api-client-background: var(--scalar-api-client-put-background);
+  --scalar-api-client-color: var(--theme-put-color);
+  --scalar-api-client-background: var(--theme-put-background);
 }
 .scalar-api-client__mobile-navigation {
   padding: 12px 12px 0 12px;
   display: flex;
-  font-size: var(--scalar-api-client-text-sm);
-  color: var(--scalar-api-client-text-color-secondary);
-  font-weight: var(--scalar-api-client-font-bold);
+  font-size: var(--theme-small);
+  color: var(--theme-color-2);
+  font-weight: var(--theme-bold);
 }
 .scalar-api-client__mobile-navigation__toggle {
   appearance: none;
@@ -1350,7 +1438,7 @@ a[data-v-84d41168] {
   cursor: pointer;
 }
 .scalar-api-client__mobile-navigation--active {
-  color: var(--scalar-api-client-text-color-primary);
+  color: var(--theme-color-1);
 }
 .scalar-api-client__mobile-navigation--active:hover {
   cursor: pointer;
@@ -1359,8 +1447,8 @@ a[data-v-84d41168] {
   display: flex;
   height: 100%;
   min-height: 0;
-  background: var(--scalar-api-client-background-primary);
-  border-top: var(--scalar-api-client-border);
+  background: var(--theme-background-1);
+  border-top: 1px solid var(--theme-border-color);
 }
 @media screen and (max-width: 820px) {
 .scalar-api-client__main {
@@ -1371,15 +1459,15 @@ a[data-v-84d41168] {
 /** TODO: Consider to make a Column component */
 .scalar-api-client__main__content {
   padding: 12px;
-  background: var(--scalar-api-client-background-primary);
+  background: var(--theme-background-1);
   top: 0;
   position: sticky;
   z-index: 100;
 }
 .scalar-api-client__main__content label {
-  font-size: var(--scalar-api-client-text-sm);
-  color: var(--scalar-api-client-text-color-primary);
-  font-weight: var(--scalar-api-client-font-bold);
+  font-size: var(--theme-small);
+  color: var(--theme-color-1);
+  font-weight: var(--theme-bold);
   display: flex;
   align-items: center;
 }
@@ -1393,12 +1481,12 @@ a[data-v-84d41168] {
 }
 .meta {
   display: flex;
-  font-size: var(--scalar-api-client-text-base);
-  font-weight: var(--scalar-api-client-text-base);
+  font-size: var(--theme-font-size-2);
+  font-weight: var(--theme-font-size-2);
   color: var(--scalar-api-client-color2);
 }
 .meta-item svg {
-  fill: var(--scalar-api-client-fill-icon);
+  fill: var(--theme-color-ghost);
   height: 14px;
   width: 14px;
   margin-right: 6px;
@@ -1408,9 +1496,9 @@ a[data-v-84d41168] {
   align-items: center;
   margin-right: 12px;
   white-space: nowrap;
-  font-weight: var(--scalar-api-client-font-bold);
+  font-weight: var(--theme-bold);
   font-size: 12px;
-  color: var(--scalar-api-client-text-color-muted);
+  color: var(--theme-color-disabled);
   padding: 3px 0;
 }
 .meta-item__input {
@@ -1439,75 +1527,10 @@ a[data-v-84d41168] {
   margin-top: 12px;
   font-size: 24px;
 }
-.types-item {
-  font-weight: var(--scalar-api-client-font-bold);
-  font-size: var(--scalar-api-client-text-lg);
-  color: var(--scalar-api-client-color2);
-  background: var(--scalar-api-client-bg3);
-  padding: 9px 18px;
-  margin: 6px;
-  border-radius: 30px;
-}
-.types-item:hover {
-  box-shadow: 0 0 0 1px var(--scalar-api-client-border-color);
-  background: var(--scalar-api-client-gradient);
-  color: var(--scalar-api-client-text-color-primary);
-  cursor: pointer;
-}
 .scalar-api-client__empty-state {
-  border: 1px dashed var(--scalar-api-client-border-color);
+  border: 1px dashed var(--theme-border-color);
   width: 100%;
   text-align: center;
-  font-size: var(--scalar-api-client-text-sm);
+  font-size: var(--theme-small);
   padding: 20px;
 }
-:root {
-  /** Colors */
-  --scalar-api-client-background-primary: #fff;
-  --scalar-api-client-background-secondary: #f6f6f6;
-  --scalar-api-client-background-input: #fff;
-  --scalar-api-client-background-muted: #e7e7e7;
-  --scalar-api-client-border-color: #dee2e6;
-  --scalar-api-client-fill-icon: #212529;
-
-  /** Borders */
-  --scalar-api-client-border: 1px solid #dee2e6;
-  --scalar-api-client-rounded: 4px;
-
-  /** Fonts */
-  --scalar-api-client-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-  Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  --scalar-api-client-font-mono: 'JetBrains Mono';
-
-  /** Font weights */
-  --scalar-api-client-font-semibold: 600;
-  --scalar-api-client-font-bold: 700;
-
-  /** Font colors */
-  --scalar-api-client-text-color-primary: #343a40;
-  --scalar-api-client-text-color-secondary: #868e96;
-  --scalar-api-client-text-color-muted: #868e96;
-
-  /** Font sizes */
-  --scalar-api-client-text-xs: 12px;
-  --scalar-api-client-text-sm: 14px;
-  --scalar-api-client-text-base: 16px;
-  --scalar-api-client-text-lg: 18px;
-
-  /** Request method colors */
-  --scalar-api-client-post-color: #00a67d;
-  --scalar-api-client-post-background: #00a67d1a;
-  --scalar-api-client-delete-color: #ef0006;
-  --scalar-api-client-delete-background: #ef00061a;
-  --scalar-api-client-patch-color: #b2b062;
-  --scalar-api-client-patch-background: #ffe6001a;
-  --scalar-api-client-get-color: #0082d0;
-  --scalar-api-client-get-background: #0082d01a;
-  --scalar-api-client-put-color: #f3830e;
-  --scalar-api-client-put-background: #f3830e1a;
-
-  /** TODO: Go through the following variables and check what they do */
-  --scalar-api-client-color2: green;
-  --scalar-api-client-bg3: purple;
-  --scalar-api-client-gradient: linear-gradient(180deg, black 0%, black 100%);
-}