diff --git a/README.md b/README.md
index a1255da..497bf56 100644
--- a/README.md
+++ b/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.
@@ -65,9 +66,14 @@ Embed the [Highlight.js script](https://highlightjs.org/download/) along with on
-
+
+
+
+
+
+
```
#### jsDelivr
@@ -77,10 +83,14 @@ Embed the [Highlight.js script](https://highlightjs.org/download/) along with on
-
-
+
+
+
+
+
+
```
diff --git a/sass/_theme.scss b/sass/_theme.scss
index c99039a..69f7c25 100644
--- a/sass/_theme.scss
+++ b/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);
}
}
diff --git a/sass/catppuccin-frappe.scss b/sass/catppuccin-frappe.scss
index 937f01e..325fbd1 100644
--- a/sass/catppuccin-frappe.scss
+++ b/sass/catppuccin-frappe.scss
@@ -1,5 +1,5 @@
@use "theme";
code {
- @include theme.highlights("frappe", "hex");
+ @include theme.highlights($flavor: "frappe");
}
diff --git a/sass/catppuccin-latte.scss b/sass/catppuccin-latte.scss
index e02e80e..fe92107 100644
--- a/sass/catppuccin-latte.scss
+++ b/sass/catppuccin-latte.scss
@@ -1,5 +1,5 @@
@use "theme";
code {
- @include theme.highlights("latte", "hex");
+ @include theme.highlights($flavor: "latte");
}
diff --git a/sass/catppuccin-macchiato.scss b/sass/catppuccin-macchiato.scss
index c1af21c..b050b0c 100644
--- a/sass/catppuccin-macchiato.scss
+++ b/sass/catppuccin-macchiato.scss
@@ -1,5 +1,5 @@
@use "theme";
code {
- @include theme.highlights("macchiato", "hex");
+ @include theme.highlights($flavor: "macchiato");
}
diff --git a/sass/catppuccin-mocha.scss b/sass/catppuccin-mocha.scss
index 01d1c7c..dd97ba1 100644
--- a/sass/catppuccin-mocha.scss
+++ b/sass/catppuccin-mocha.scss
@@ -1,5 +1,5 @@
@use "theme";
code {
- @include theme.highlights("mocha", "hex");
+ @include theme.highlights($flavor: "mocha");
}
diff --git a/sass/catppuccin-variables.important.scss b/sass/catppuccin-variables.important.scss
new file mode 100644
index 0000000..67ad6c5
--- /dev/null
+++ b/sass/catppuccin-variables.important.scss
@@ -0,0 +1,9 @@
+@use "theme";
+
+code {
+ @include theme.highlights(
+ $flavor: "mocha",
+ $format: "variable",
+ $important: true
+ );
+}
diff --git a/sass/catppuccin-variables.rgb.important.scss b/sass/catppuccin-variables.rgb.important.scss
new file mode 100644
index 0000000..e663617
--- /dev/null
+++ b/sass/catppuccin-variables.rgb.important.scss
@@ -0,0 +1,5 @@
+@use "theme";
+
+code {
+ @include theme.highlights($flavor: "mocha", $format: "rgb", $important: true);
+}
diff --git a/sass/catppuccin-variables.rgb.scss b/sass/catppuccin-variables.rgb.scss
new file mode 100644
index 0000000..575805b
--- /dev/null
+++ b/sass/catppuccin-variables.rgb.scss
@@ -0,0 +1,5 @@
+@use "theme";
+
+code {
+ @include theme.highlights($flavor: "mocha", $format: "rgb");
+}
diff --git a/sass/catppuccin-variables.scss b/sass/catppuccin-variables.scss
new file mode 100644
index 0000000..4ee3933
--- /dev/null
+++ b/sass/catppuccin-variables.scss
@@ -0,0 +1,5 @@
+@use "theme";
+
+code {
+ @include theme.highlights($flavor: "mocha", $format: "variable");
+}
diff --git a/sass/catppuccin.variables.important.scss b/sass/catppuccin.variables.important.scss
deleted file mode 100644
index 0f40e27..0000000
--- a/sass/catppuccin.variables.important.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use "theme";
-
-code {
- @include theme.highlights("mocha", "variables", "ctp-", $important: true);
-}
diff --git a/sass/catppuccin.variables.scss b/sass/catppuccin.variables.scss
deleted file mode 100644
index 0982427..0000000
--- a/sass/catppuccin.variables.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use "theme";
-
-code {
- @include theme.highlights("mocha", "variables", "ctp-");
-}