feat!: change catppuccin.variables.css into generic version (#32)

* feat: add separate variable and rgb variables variants

* Discard changes to README.md

* refactor: add new "any" variables variant

* docs(README): update

* refactor: switch rgb/variable variants

* docs(README): update info on variable versions

* docs(README): fix links

README.md

@@ -53,8 +53,9 @@ You can then use the files in `@catppuccin/highlightjs/css` or `@catppuccin/high
 Embed the [Highlight.js script](https://highlightjs.org/download/) along with one of our themes.
 
 > [!NOTE]
-> The "variable version" assumes that you have a flavor of Catppuccin already present in your CSS variables, e.g. `:root { --ctp-mauve:136,57,239; }`.
-> This is particularly useful if you use [Catppuccin TailwindCSS](https://github.com/catppuccin/tailwindcss)
+> The "variable version" assumes that you have a flavor of Catppuccin already present in your CSS variables, in any format of color (e.g. `--ctp-mauve: rgb(136, 57, 239)`, `--ctp-mauve: #8839ef`, `--ctp-mauve: hsl(266deg, 85%, 58%)`, etc).
+> If you use [Catppuccin for TailwindCSS](https://github.com/catppuccin/tailwindcss), where your variables are in the format of three comma-separated RGB
+> values (e.g. `--ctp-mauve: 136,57,239`), you should use the "rgb variable" version.
 
 <!-- x-release-please-start-version -->
 
@@ -65,9 +66,14 @@ Embed the [Highlight.js script](https://highlightjs.org/download/) along with on
 <link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin-frappe.css">
 <link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin-macchiato.css">
 <link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin-mocha.css">
-<!-- variable version -->
+<!-- Variable version -->
 <link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin.variables.css">
+<!-- Variable version with !important (higher specificity) -->
 <link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin.variables.important.css">
+<!-- RGB variable version -->
+<link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin.variables.rgb.css">
+<!-- RGB variable version with !important (higher specificity) -->
+<link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin.variables.rgb.important.css">
 ```
 
 #### jsDelivr
@@ -77,10 +83,14 @@ Embed the [Highlight.js script](https://highlightjs.org/download/) along with on
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-frappe.css">
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-macchiato.css">
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-mocha.css">
-
-<!-- variable version -->
+<!-- Variable version -->
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin.variables.css">
+<!-- Variable version with !important (higher specificity) -->
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin.variables.important.css">
+<!-- RGB variable version -->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin.variables.rgb.css">
+<!-- RGB variable version with !important (higher specificity) -->
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin.variables.rgb.important.css">
 ```
 
 <!-- x-release-please-end -->

sass/_theme.scss

@@ -59,26 +59,35 @@ $fontStyles: (
   "quote": "italic",
 );
 
-@mixin highlights($flavor, $output: "hex", $prefix: "ctp-", $important: false) {
+@mixin highlights(
+  $flavor,
+  $format: "inject",
+  $prefix: "ctp-",
+  $important: false
+) {
   $colors: map-get(catppuccin.$palette, $flavor);
-  $hex: $output == "hex";
 
   &.hljs {
-    @if $hex {
+    @if $format == "inject" {
       color: map-get($colors, "text") if($important, !important, null);
       background: map-get($colors, "base") if($important, !important, null);
-    } @else {
+    } @else if $format == "rgb" {
       color: rgb(var(--#{$prefix}text)) if($important, !important, null);
       background: rgb(var(--#{$prefix}base)) if($important, !important, null);
+    } @else if $format == "variable" {
+      color: var(--#{$prefix}text) if($important, !important, null);
+      background: var(--#{$prefix}base) if($important, !important, null);
     }
   }
 
   @each $key, $value in $highlights {
     .hljs-#{$key} {
-      @if $hex {
+      @if $format == "inject" {
         color: map-get($colors, $value) if($important, !important, null);
-      } @else {
+      } @else if $format == "rgb" {
         color: rgb(var(--#{$prefix}#{$value})) if($important, !important, null);
+      } @else if $format == "variable" {
+        color: var(--#{$prefix}#{$value}) if($important, !important, null);
       }
 
       @if map-has-key($fontStyles, $key) {
@@ -90,11 +99,14 @@ $fontStyles: (
       }
 
       @if ($key == "addition" or $key == "deletion") {
-        @if $hex {
+        @if $format == "inject" {
           background: color.change(map-get($colors, $value), $alpha: 0.15)
             if($important, !important, null);
-        } @else {
-          background: rgba(var(--#{$prefix}#{$value}), 15%)
+        } @else if $format == "rgb" {
+          background: rgb(var(--#{$prefix}#{$value}) / 15%)
+            if($important, !important, null);
+        } @else if $format == "variable" {
+          background: rgb(from var(--#{$prefix}#{$value}) r g b / 15%)
             if($important, !important, null);
         }
       }

sass/catppuccin-frappe.scss

@@ -1,5 +1,5 @@
 @use "theme";
 
 code {
-  @include theme.highlights("frappe", "hex");
+  @include theme.highlights($flavor: "frappe");
 }

sass/catppuccin-latte.scss

@@ -1,5 +1,5 @@
 @use "theme";
 
 code {
-  @include theme.highlights("latte", "hex");
+  @include theme.highlights($flavor: "latte");
 }

sass/catppuccin-macchiato.scss

@@ -1,5 +1,5 @@
 @use "theme";
 
 code {
-  @include theme.highlights("macchiato", "hex");
+  @include theme.highlights($flavor: "macchiato");
 }

sass/catppuccin-mocha.scss

@@ -1,5 +1,5 @@
 @use "theme";
 
 code {
-  @include theme.highlights("mocha", "hex");
+  @include theme.highlights($flavor: "mocha");
 }

sass/catppuccin-variables.important.scss

@@ -0,0 +1,9 @@
+@use "theme";
+
+code {
+  @include theme.highlights(
+    $flavor: "mocha",
+    $format: "variable",
+    $important: true
+  );
+}

sass/catppuccin-variables.rgb.important.scss

@@ -0,0 +1,5 @@
+@use "theme";
+
+code {
+  @include theme.highlights($flavor: "mocha", $format: "rgb", $important: true);
+}

sass/catppuccin-variables.rgb.scss

@@ -0,0 +1,5 @@
+@use "theme";
+
+code {
+  @include theme.highlights($flavor: "mocha", $format: "rgb");
+}

sass/catppuccin-variables.scss

@@ -0,0 +1,5 @@
+@use "theme";
+
+code {
+  @include theme.highlights($flavor: "mocha", $format: "variable");
+}