feat(chatgpt): use highlightjs import (#188)

styles/chatgpt/catppuccin.user.css

@@ -2,7 +2,7 @@
 @name ChatGPT Catppuccin
 @namespace github.com/catppuccin/userstyles/styles/chatgpt
 @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chatgpt
-@version 0.0.2
+@version 0.0.3
 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chatgpt/catppuccin.user.css
 @description Soothing pastel theme for ChatGPT
 @author Catppuccin
@@ -13,6 +13,8 @@
 @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"]
 ==/UserStyle== */
 @-moz-document domain("chat.openai.com") {
+  @import url("https://unpkg.com/@catppuccin/highlightjs@0.1.2/css/catppuccin.variables.css");
+  
   .light body,
   .light html {
     #catppuccin(@lightFlavor);
@@ -139,6 +141,11 @@
     };
   };
 
+  @color: white;
+  #rgbify(@color) {
+    @rgb-raw: red(@color), green(@color), blue(@color);
+  }
+
   #catppuccin(@lookup) {    
     @rosewater: @catppuccin[@@lookup][@rosewater];
     @flamingo: @catppuccin[@@lookup][@flamingo];
@@ -167,6 +174,33 @@
     @mantle: @catppuccin[@@lookup][@mantle];
     @crust: @catppuccin[@@lookup][@crust];
     
+    --ctp-rosewater: #rgbify(@rosewater)[];
+    --ctp-flamingo: #rgbify(@flamingo)[];
+    --ctp-pink: #rgbify(@pink)[];
+    --ctp-mauve: #rgbify(@mauve)[];
+    --ctp-red: #rgbify(@red)[];
+    --ctp-maroon: #rgbify(@maroon)[];
+    --ctp-peach: #rgbify(@peach)[];
+    --ctp-yellow: #rgbify(@yellow)[];
+    --ctp-green: #rgbify(@green)[];
+    --ctp-teal: #rgbify(@teal)[];
+    --ctp-sky: #rgbify(@sky)[];
+    --ctp-sapphire: #rgbify(@sapphire)[];
+    --ctp-blue: #rgbify(@blue)[];
+    --ctp-lavender: #rgbify(@lavender)[];
+    --ctp-text: #rgbify(@text)[];
+    --ctp-subtext1: #rgbify(@subtext1)[];
+    --ctp-subtext0: #rgbify(@subtext0)[];
+    --ctp-overlay2: #rgbify(@overlay2)[];
+    --ctp-overlay1: #rgbify(@overlay1)[];
+    --ctp-overlay0: #rgbify(@overlay0)[];
+    --ctp-surface2: #rgbify(@surface2)[];
+    --ctp-surface1: #rgbify(@surface1)[];
+    --ctp-surface0: #rgbify(@surface0)[];
+    --ctp-base: #rgbify(@crust)[];
+    --ctp-mantle: #rgbify(@mantle)[];
+    --ctp-curst: #rgbify(@crust)[];
+    
     /* Main page */
     div[class*="bg-gray-"]:not([class*="bg-gray-900"]):not(
         [class*="bg-gray-700"]
@@ -288,147 +322,5 @@
     [class*="text-green"] {
       color: @green !important;
     }
-
-    code.hljs {
-      background: @crust; /* only modification, rest are same as upstream */
-    }
-    code .hljs-keyword {
-      color: @mauve;
-    }
-    code .hljs-built_in {
-      color: @red;
-    }
-    code .hljs-type {
-      color: @yellow;
-    }
-    code .hljs-literal {
-      color: @peach;
-    }
-    code .hljs-number {
-      color: @peach;
-    }
-    code .hljs-operator {
-      color: @teal;
-    }
-    code .hljs-punctuation {
-      color: @subtext1;
-    }
-    code .hljs-property {
-      color: @teal;
-    }
-    code .hljs-regexp {
-      color: @pink;
-    }
-    code .hljs-string {
-      color: @green;
-    }
-    code .hljs-char.escape_ {
-      color: @green;
-    }
-    code .hljs-subst {
-      color: @subtext0;
-    }
-    code .hljs-symbol {
-      color: @flamingo;
-    }
-    code .hljs-variable {
-      color: @mauve;
-    }
-    code .hljs-variable.language_ {
-      color: @mauve;
-    }
-    code .hljs-variable.constant_ {
-      color: @peach;
-    }
-    code .hljs-title {
-      color: @blue;
-    }
-    code .hljs-title.class_ {
-      color: @yellow;
-    }
-    code .hljs-title.function_ {
-      color: @blue;
-    }
-    code .hljs-params {
-      color: @text;
-    }
-    code .hljs-comment {
-      color: @surface2;
-    }
-    code .hljs-doctag {
-      color: @red;
-    }
-    code .hljs-meta {
-      color: @peach;
-    }
-    code .hljs-section {
-      color: @blue;
-    }
-    code .hljs-tag {
-      color: @subtext0;
-    }
-    code .hljs-name {
-      color: @mauve;
-    }
-    code .hljs-attr {
-      color: @blue;
-    }
-    code .hljs-attribute {
-      color: @green;
-    }
-    code .hljs-bullet {
-      color: @teal;
-    }
-    code .hljs-code {
-      color: @green;
-    }
-    code .hljs-emphasis {
-      color: @red;
-      font-style: italic
-    }
-    code .hljs-strong {
-      color: @red;
-      font-weight: bold
-    }
-    code .hljs-formula {
-      color: @teal;
-    }
-    code .hljs-link {
-      color: @sapphire;
-      font-style: italic
-    }
-    code .hljs-quote {
-      color: @green;
-      font-style: italic
-    }
-    code .hljs-selector-tag {
-      color: @yellow;
-    }
-    code .hljs-selector-id {
-      color: @blue;
-    }
-    code .hljs-selector-class {
-      color: @teal;
-    }
-    code .hljs-selector-attr {
-      color: @mauve;
-    }
-    code .hljs-selector-pseudo {
-      color: @teal;
-    }
-    code .hljs-template-tag {
-      color: @flamingo;
-    }
-    code .hljs-template-variable {
-      color: @flamingo;
-    }
-    code .hljs-diff-addition {
-      color: @green;
-      background: fade(@green, 15%);
-    }
-    code .hljs-diff-deletion {
-      color: @red;
-      background: fade(@red, 15%);
-    }
   }
 }