migrate from scss variables to css vars instead

kint-php · Oct 28, 2024 · 329ef22 · 329ef22
1 parent 41ccd89
commit 329ef22
Show file tree

Hide file tree

Showing 11 changed files with 189 additions and 329 deletions.
diff --git a/build/kint.phar b/build/kint.phar
diff --git a/resources/compiled/aante-dark.css b/resources/compiled/aante-dark.css
diff --git a/resources/compiled/original.css b/resources/compiled/original.css
diff --git a/resources/compiled/solarized-dark.css b/resources/compiled/solarized-dark.css
diff --git a/resources/compiled/solarized.css b/resources/compiled/solarized.css
diff --git a/resources/sass/_base.scss b/resources/sass/_base.scss
diff --git a/resources/sass/aante-dark.scss b/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>");
+}
diff --git a/resources/sass/aante-light.scss b/resources/sass/aante-light.scss
diff --git a/resources/sass/original.scss b/resources/sass/original.scss
@@ -1,27 +1,30 @@
 @import "base";
 
+:root {
+  --kint-color1: #e3ecf0;
+  --kint-color2: #c0d4df;
+  --kint-color3: #9dbed0;
+  --kint-color4: #b2ccda;
+  --kint-highlight-color: #f0eb96;
+}
+
 .kint-rich {
   > dl > dt {
-    background: linear-gradient(to bottom, #e3ecf0 0, #c0d4df 100%);
+    background: linear-gradient(to bottom, var(--kint-color1) 0%, var(--kint-color2) 100%);
   }
-
   ul.kint-tabs {
-    background: linear-gradient(to bottom, #9dbed0 0px, #b2ccda 100%);
+    background: linear-gradient(to bottom, var(--kint-color3) 0%, var(--kint-color4) 100%);
   }
-
   & > dl:not(.kint-trace) > dd > ul.kint-tabs li {
-    background: $main-background;
-
+    background: var(--main-background);
     &.kint-active-tab {
-      background: $secondary-background;
+      background: var(--secondary-background);
     }
   }
-
   & > dl.kint-trace > dt {
-    background: linear-gradient(to bottom, #c0d4df 0px, #e3ecf0 100%);
+    background: linear-gradient(to bottom, var(--kint-color2) 0%, var(--kint-color1) 100%);
   }
-
   .kint-source .kint-highlight {
-    background: #f0eb96;
+    background: var(--kint-highlight-color);
   }
 }
diff --git a/resources/sass/solarized-dark.scss b/resources/sass/solarized-dark.scss
@@ -1,35 +1,36 @@
-$spacing: 5;
+@import "base";
 
-// base 03
-$main-background: #002b36;
+:root {
+  --spacing: 5px;
 
-// base 02
-$secondary-background: #073642;
+  // base 3
+  --main-background: #002b36;
 
-$backdrop-color: $secondary-background;
+  // base 2
+  --secondary-background: #073642;
 
-// base 0
-$text-color: #839496;
+  --backdrop-color: var(--secondary-background);
 
-// base 1
-$variable-name-color: #93a1a1;
+  // base 0
+  --text-color: #839496;
 
-// blue
-$variable-type-color: #268bd2;
+  // base 1
+  --variable-name-color: #93a1a1;
 
-// cyan
-$variable-type-color-hover: #2aa198;
+  // blue
+  --variable-type-color: #268bd2;
 
-// base 01
-$border-color: #586e75;
+  // cyan
+  --variable-type-color-hover: #2aa198;
 
-// blue
-$border-color-hover: #268bd2;
+  // base 1
+  --border-color: #586e75;
 
-// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 150"><defs><path stroke-linejoin="round" d="M4 3a24 32 0 0 1 0 24 40 20-10 0 1 23-12A40 20 10 0 1 4 3z" id="a"/></defs><g fill="#93a1a1" stroke="#93a1a1"><use xlink:href="#a"/><use xlink:href="#a" transform="rotate(90 -15 45)"/></g><g fill="#586e75" stroke="#586e75" transform="translate(0 30)"><use xlink:href="#a"/><use xlink:href="#a" transform="rotate(90 -15 45)"/></g><path d="M6 126l18 18m-18 0l18-18" stroke-width="2" stroke="#586e75"/></svg>
-$caret-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzAgMTUwIj48ZGVmcz48cGF0aCBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNNCAzYTI0IDMyIDAgMCAxIDAgMjQgNDAgMjAtMTAgMCAxIDIzLTEyQTQwIDIwIDEwIDAgMSA0IDN6IiBpZD0iYSIvPjwvZGVmcz48ZyBmaWxsPSIjOTNhMWExIiBzdHJva2U9IiM5M2ExYTEiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAtMTUgNDUpIi8+PC9nPjxnIGZpbGw9IiM1ODZlNzUiIHN0cm9rZT0iIzU4NmU3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzMCkiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAtMTUgNDUpIi8+PC9nPjxwYXRoIGQ9Ik02IDEyNmwxOCAxOG0tMTggMGwxOC0xOCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiM1ODZlNzUiLz48L3N2Zz4=");
+  // blue
+  --border-color-hover: #268bd2;
 
-@import "base";
+  --caret-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 30 150'><defs><path stroke-linejoin='round' d='M4 3a24 32 0 0 1 0 24 40 20-10 0 1 23-12A40 20 10 0 1 4 3z' id='a'/></defs><g fill='%2393a1a1' stroke='%2393a1a1'><use xlink:href='%23a'/><use xlink:href='%23a' transform='rotate(90 -15 45)'/></g><g fill='%23586e75' stroke='%23586e75' transform='translate(0 30)'><use xlink:href='%23a'/><use xlink:href='%23a' transform='rotate(90 -15 45)'/></g><path d='M6 126l18 18m-18 0l18-18' stroke-width='2' stroke='%23586e75'/></svg>");
+}
 
 .kint-rich {
   .kint-focused {
@@ -40,7 +41,7 @@ $caret-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 
   > dl > dt,
   ul.kint-tabs {
-    box-shadow: 4px 0 2px -3px $variable-type-color inset;
+    box-shadow: 4px 0 2px -3px var(--variable-type-color) inset;
   }
 
   ul.kint-tabs li.kint-active-tab {

diff --git a/resources/sass/solarized.scss b/resources/sass/solarized.scss
@@ -1,33 +1,34 @@
-$spacing: 5;
+@import "base";
 
-// base 3
-$main-background: #fdf6e3;
+:root {
+  --spacing: 5px;
 
-// base 2
-$secondary-background: #eee8d5;
+  // base 3
+  --main-background: #fdf6e3;
 
-// base 00
-$text-color: #657b83;
+  // base 2
+  --secondary-background: #eee8d5;
 
-// base 01
-$variable-name-color: #586e75;
+  // base 0
+  --text-color: #657b83;
 
-// blue
-$variable-type-color: #268bd2;
+  // base 1
+  --variable-name-color: #586e75;
 
-// cyan
-$variable-type-color-hover: #2aa198;
+  // blue
+  --variable-type-color: #268bd2;
 
-// base 1
-$border-color: #93a1a1;
+  // cyan
+  --variable-type-color-hover: #2aa198;
 
-// blue
-$border-color-hover: #268bd2;
+  // base 1
+  --border-color: #93a1a1;
 
-// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30 150"><defs><path stroke-linejoin="round" d="M4 3a24 32 0 0 1 0 24 40 20-10 0 1 23-12A40 20 10 0 1 4 3z" id="a"/></defs><g fill="#93a1a1" stroke="#93a1a1"><use xlink:href="#a"/><use xlink:href="#a" transform="rotate(90 -15 45)"/></g><g fill="#586e75" stroke="#586e75" transform="translate(0 30)"><use xlink:href="#a"/><use xlink:href="#a" transform="rotate(90 -15 45)"/></g><path d="M6 126l18 18m-18 0l18-18" stroke-width="2" stroke="#586e75"/></svg>
-$caret-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzAgMTUwIj48ZGVmcz48cGF0aCBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNNCAzYTI0IDMyIDAgMCAxIDAgMjQgNDAgMjAtMTAgMCAxIDIzLTEyQTQwIDIwIDEwIDAgMSA0IDN6IiBpZD0iYSIvPjwvZGVmcz48ZyBmaWxsPSIjOTNhMWExIiBzdHJva2U9IiM5M2ExYTEiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAtMTUgNDUpIi8+PC9nPjxnIGZpbGw9IiM1ODZlNzUiIHN0cm9rZT0iIzU4NmU3NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAzMCkiPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48dXNlIHhsaW5rOmhyZWY9IiNhIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAtMTUgNDUpIi8+PC9nPjxwYXRoIGQ9Ik02IDEyNmwxOCAxOG0tMTggMGwxOC0xOCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiM1ODZlNzUiLz48L3N2Zz4=");
+  // blue
+  --border-color-hover: #268bd2;
 
-@import "base";
+  --caret-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 30 150'><defs><path stroke-linejoin='round' d='M4 3a24 32 0 0 1 0 24 40 20-10 0 1 23-12A40 20 10 0 1 4 3z' id='a'/></defs><g fill='%2393a1a1' stroke='%2393a1a1'><use xlink:href='%23a'/><use xlink:href='%23a' transform='rotate(90 -15 45)'/></g><g fill='%23586e75' stroke='%23586e75' transform='translate(0 30)'><use xlink:href='%23a'/><use xlink:href='%23a' transform='rotate(90 -15 45)'/></g><path d='M6 126l18 18m-18 0l18-18' stroke-width='2' stroke='%23586e75'/></svg>");
+}
 
 .kint-rich {
   .kint-focused {
@@ -38,7 +39,7 @@ $caret-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5
 
   > dl > dt,
   ul.kint-tabs {
-    box-shadow: 4px 0 2px -3px $variable-type-color inset;
+    box-shadow: 4px 0 2px -3px var(--variable-type-color) inset;
   }
 
   ul.kint-tabs li.kint-active-tab {