feat: add CSS variables version (#5)

catppuccin · Sep 15, 2024 · de071c5 · de071c5
1 parent 49a0285
commit de071c5
Show file tree

Hide file tree

Showing 2 changed files with 171 additions and 30 deletions.
diff --git a/prismjs.tera b/prismjs.tera
@@ -3,132 +3,138 @@ whiskers:
   version: "2.4.0"
   matrix:
    - flavor
-  filename: "themes/{{ flavor.identifier }}.css"
+   - variant: ["flavor", "variable"]
+  filename: 'themes/{% if variant == "flavor" %}{{ flavor.identifier }}{% else %}variables{% endif %}.css'
   hex_format: "#{{r}}{{g}}{{b}}{{z}}"
 ---
+
+{%- macro color(c) -%}
+{% if variant == "flavor" %}{{ c.hex }}{% else %}var(--ctp-{{ c.identifier }}){% endif %}
+{%- endmacro -%}
+
 code[class*="language-"],
 pre[class*="language-"] {
-	color: {{ text.hex }};
+	color: {{ self::color(c=text) }};
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-	background: {{ mantle.hex }};
+	background: {{ self::color(c=mantle) }};
 }
 
 /* https://prismjs.com/tokens.html */
 
 .token.keyword {
-	color: {{ mauve.hex }};
+	color: {{ self::color(c=mauve) }};
 }
 
 .token.builtin {
-	color: {{ red.hex }};
+	color: {{ self::color(c=red) }};
 }
 
 .token.class-name {
-	color: {{ yellow.hex }};
+	color: {{ self::color(c=yellow) }};
 }
 
 .token.function {
-	color: {{ blue.hex }};
+	color: {{ self::color(c=blue) }};
 }
 
 .token.boolean,
 .token.number {
-	color: {{ peach.hex }};
+	color: {{ self::color(c=peach) }};
 }
 
 .token.string,
 .token.char {
-	color: {{ green.hex }};
+	color: {{ self::color(c=green) }};
 }
 
 .token.symbol {
-	color: {{ yellow.hex }};
+	color: {{ self::color(c=yellow) }};
 }
 
 .token.regex {
-	color: {{ pink.hex }};
+	color: {{ self::color(c=pink) }};
 }
 
 .token.url {
-	color: {{ green.hex }};
+	color: {{ self::color(c=green) }};
 }
 
 .token.operator {
-	color: {{ sky.hex }};
+	color: {{ self::color(c=sky) }};
 }
 
 .token.variable {
-	color: {{ text.hex }};
+	color: {{ self::color(c=text) }};
 }
 
 .token.constant {
-	color: {{ peach.hex }};
+	color: {{ self::color(c=peach) }};
 }
 
 .token.property {
-	color: {{ blue.hex }};
+	color: {{ self::color(c=blue) }};
 }
 
 .token.punctuation {
-	color: {{ overlay2.hex }};
+	color: {{ self::color(c=overlay2) }};
 }
 
 .token.important {
-	color: {{ mauve.hex }};
+	color: {{ self::color(c=mauve) }};
 }
 
 .token.comment {
-	color: {{ overlay2.hex }};
+	color: {{ self::color(c=overlay2) }};
 }
 
 .token.tag {
-	color: {{ blue.hex }};
+	color: {{ self::color(c=blue) }};
 }
 
 .token.attr-name {
-	color: {{ yellow.hex }};
+	color: {{ self::color(c=yellow) }};
 }
 
 .token.attr-value {
-	color: {{ green.hex }};
+	color: {{ self::color(c=green) }};
 }
 
 .token.namespace {
-	color: {{ yellow.hex }};
+	color: {{ self::color(c=yellow) }};
 }
 
 .token.prolog,
 .token.doctype {
-	color: {{ mauve.hex }};
+	color: {{ self::color(c=mauve) }};
 }
 
 .token.cdata {
-	color: {{ teal.hex }};
+	color: {{ self::color(c=teal) }};
 }
 
 .token.entity {
-	color: {{ red.hex }};
+	color: {{ self::color(c=red) }};
 }
 
 .token.atrule {
-	color: {{ mauve.hex }};
+	color: {{ self::color(c=mauve) }};
 }
 
 .token.selector {
-	color: {{ blue.hex }};
+	color: {{ self::color(c=blue) }};
 }
 
 /* Diff */
 
 .token.deleted {
-	color: {{ red.hex }};
+	color: {{ self::color(c=red) }};
 }
 
 .token.inserted {
-	color: {{ green.hex }}
+	color: {{ self::color(c=green) }}
 }
 
 /* Other */

diff --git a/themes/variables.css b/themes/variables.css
@@ -0,0 +1,135 @@
+code[class*="language-"],
+pre[class*="language-"] {
+	color: var(--ctp-text);
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: var(--ctp-mantle);
+}
+
+/* https://prismjs.com/tokens.html */
+
+.token.keyword {
+	color: var(--ctp-mauve);
+}
+
+.token.builtin {
+	color: var(--ctp-red);
+}
+
+.token.class-name {
+	color: var(--ctp-yellow);
+}
+
+.token.function {
+	color: var(--ctp-blue);
+}
+
+.token.boolean,
+.token.number {
+	color: var(--ctp-peach);
+}
+
+.token.string,
+.token.char {
+	color: var(--ctp-green);
+}
+
+.token.symbol {
+	color: var(--ctp-yellow);
+}
+
+.token.regex {
+	color: var(--ctp-pink);
+}
+
+.token.url {
+	color: var(--ctp-green);
+}
+
+.token.operator {
+	color: var(--ctp-sky);
+}
+
+.token.variable {
+	color: var(--ctp-text);
+}
+
+.token.constant {
+	color: var(--ctp-peach);
+}
+
+.token.property {
+	color: var(--ctp-blue);
+}
+
+.token.punctuation {
+	color: var(--ctp-overlay2);
+}
+
+.token.important {
+	color: var(--ctp-mauve);
+}
+
+.token.comment {
+	color: var(--ctp-overlay2);
+}
+
+.token.tag {
+	color: var(--ctp-blue);
+}
+
+.token.attr-name {
+	color: var(--ctp-yellow);
+}
+
+.token.attr-value {
+	color: var(--ctp-green);
+}
+
+.token.namespace {
+	color: var(--ctp-yellow);
+}
+
+.token.prolog,
+.token.doctype {
+	color: var(--ctp-mauve);
+}
+
+.token.cdata {
+	color: var(--ctp-teal);
+}
+
+.token.entity {
+	color: var(--ctp-red);
+}
+
+.token.atrule {
+	color: var(--ctp-mauve);
+}
+
+.token.selector {
+	color: var(--ctp-blue);
+}
+
+/* Diff */
+
+.token.deleted {
+	color: var(--ctp-red);
+}
+
+.token.inserted {
+	color: var(--ctp-green)
+}
+
+/* Other */
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+