migrate from scss variables to css vars instead

resources/sass/aante-dark.scss

@@ -1,23 +1,24 @@
 // $author Ante Aljinovic https://github.com/aljinovic
 // modified dark version
 
-$main-background: invert(#f8f8f8);
-$secondary-background: invert(#f8f8f8);
+@import "aante";
 
-$variable-type-color: invert(#06f);
-$variable-type-color-hover: invert(#f00);
+:root {
+  --main-background: #070707;
+  --secondary-background: #070707;
 
-$border-color: invert(#d7d7d7);
-$border-color-hover: invert(#aaa);
+  --variable-type-color: #ff9900;
+  --variable-type-color-hover: #00ffff;
 
-// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 150"><path d="M6 7h18l-9 15zm0 30h18l-9 15zm0 45h18l-9-15zm0 30h18l-9-15zm0 12l18 18m-18 0l18-18" fill="#AAA"/><path d="M6 126l18 18m-18 0l18-18" stroke-width="2" stroke="#AAA"/></svg>
-$caret-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNTAiPjxwYXRoIGQ9Ik02IDdoMThsLTkgMTV6bTAgMzBoMThsLTkgMTV6bTAgNDVoMThsLTktMTV6bTAgMzBoMThsLTktMTV6bTAgMTJsMTggMThtLTE4IDBsMTgtMTgiIGZpbGw9IiNBQUEiLz48cGF0aCBkPSJNNiAxMjZsMTggMThtLTE4IDBsMTgtMTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjQUFBIi8+PC9zdmc+");
+  --border-color: #282828;
+  --border-color-hover: #555555;
 
-$backdrop-color: rgba(invert(#fff), 0.9);
-$text-color: invert(#1d1e1e);
-$variable-name-color: invert(#1d1e1e);
+  --backdrop-color: rgba(0,0,0, 0.9);
+  --text-color: #e2e1e1;
+  --variable-name-color: #e2e1e1;
 
-$alternative-background: invert(#fff);
-$highlight-color: invert(#cfc);
+  --alternative-background: #000;
+  --highlight-color: #330033;
 
-@import "aante-light";
+  --caret-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 150'><path d='M6 7h18l-9 15zm0 30h18l-9 15zm0 45h18l-9-15zm0 30h18l-9-15zm0 12l18 18m-18 0l18-18' fill='%23AAA'/><path d='M6 126l18 18m-18 0l18-18' stroke-width='2' stroke='%23AAA'/></svg>");
+}

resources/sass/aante.scss

@@ -0,0 +1,170 @@
+// $author Ante Aljinovic https://github.com/aljinovic
+
+@import "base";
+
+:root {
+  --main-background: #f8f8f8;
+  --secondary-background: #f8f8f8;
+
+  --variable-type-color: #06f;
+  --variable-type-color-hover: #f00;
+
+  --border-color: #d7d7d7;
+  --border-color-hover: #aaa;
+
+  --alternative-background: #fff;
+  --highlight-color: #cfc;
+
+  --caret-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 150'><path d='M6 7h18l-9 15zm0 30h18l-9 15zm0 45h18l-9-15zm0 30h18l-9-15zm0 12l18 18m-18 0l18-18' fill='%23555'/><path d='M6 126l18 18m-18 0l18-18' stroke-width='2' stroke='%23555'/></svg>");
+
+  @media (prefers-color-scheme: dark) {
+    --main-background: #070707;
+    --secondary-background: #070707;
+
+    --variable-type-color: #ff9900;
+    --variable-type-color-hover: #00ffff;
+
+    --border-color: #282828;
+    --border-color-hover: #555555;
+
+    --backdrop-color: rgba(0,0,0, 0.9);
+    --text-color: #e2e1e1;
+    --variable-name-color: #e2e1e1;
+
+    --alternative-background: #000;
+    --highlight-color: #330033;
+
+    --caret-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 150'><path d='M6 7h18l-9 15zm0 30h18l-9 15zm0 45h18l-9-15zm0 30h18l-9-15zm0 12l18 18m-18 0l18-18' fill='%23AAA'/><path d='M6 126l18 18m-18 0l18-18' stroke-width='2' stroke='%23AAA'/></svg>");
+  }
+
+}
+
+.kint-rich {
+  .kint-focused {
+    box-shadow: 0 0 3px 2px var(--variable-type-color-hover);
+  }
+
+  dt {
+    font-weight: normal;
+
+    &.kint-parent {
+      margin-top: 4px;
+    }
+  }
+
+  dl dl {
+    margin-top: 4px;
+    padding-left: 25px;
+    border-left: none;
+  }
+
+  > dl > dt {
+    background: var(--secondary-background);
+  }
+
+  //
+  // TABS
+  // --------------------------------------------------
+
+  ul {
+    margin: 0;
+    padding-left: 0;
+
+    &:not(.kint-tabs) > li {
+      border-left: 0;
+    }
+
+    &.kint-tabs {
+      background: var(--secondary-background);
+      border: var(--border);
+      border-width: 0 1px 1px 1px;
+      padding: 4px 0 0 12px;
+      margin-left: -1px;
+      margin-top: -1px;
+
+      li,
+      li + li {
+        margin: 0 0 0 4px;
+      }
+
+      li {
+        border-bottom-width: 0;
+        height: calc(var(--spacing) * 6);
+
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &.kint-active-tab {
+          border-top: var(--border);
+          background: var(--alternative-background);
+          font-weight: bold;
+          padding-top: 0;
+          border-bottom: 1px solid var(--alternative-background) !important;
+          margin-bottom: -1px;
+        }
+
+        &.kint-active-tab:hover {
+          border-bottom: 1px solid var(--alternative-background);
+        }
+      }
+    }
+
+    > li > pre {
+      border: var(--border);
+    }
+  }
+
+  dt:hover + dd > ul {
+    border-color: var(--border-color-hover);
+  }
+
+  pre {
+    background: var(--alternative-background);
+    margin-top: 4px;
+    margin-left: 25px;
+  }
+
+  .kint-source {
+    margin-left: -1px;
+
+    .kint-highlight {
+      background: var(--highlight-color);
+    }
+  }
+
+  .kint-parent.kint-show > .kint-search {
+    border-bottom-width: 1px;
+  }
+
+  table {
+    td {
+      background: var(--alternative-background);
+
+      > dl {
+        padding: 0;
+        margin: 0;
+
+        > dt.kint-parent {
+          margin: 0;
+        }
+      }
+    }
+
+    td:first-child,
+    td,
+    th {
+      padding: 2px 4px;
+    }
+
+    dd,
+    dt {
+      background: var(--alternative-background);
+    }
+
+    tr:hover > td {
+      box-shadow: none;
+      background: var(--highlight-color);
+    }
+  }
+}