fix spaces in variables, add previews, add example

2025-06-09 13:29:04 -06:00 · 2025-06-09 13:29:04 -06:00 · 4cbd8618e1
commit 4cbd8618e1
parent e6d587637b
22 changed files with 224 additions and 101 deletions
--- a/README.md
+++ b/README.md
@ -3,10 +3,29 @@
  &nbsp;
 </h3>

-_Note: Using [TailwindCSS](https://tailwindcss.com/) in your project? Check out [@catppuccin/tailwindcss](https://github.com/catppuccin/tailwindcss)._
+![](./assets/preview.png)
+
+<details>
+<summary>🌻 Latte</summary>
+<img src="./assets/latte.png"/>
+</details>
+<details>
+<summary>🪴 Frappé</summary>
+<img src="./assets/frappé.png"/>
+</details>
+<details>
+<summary>🌺 Macchiato</summary>
+<img src="./assets/macchiato.png"/>
+</details>
+<details>
+<summary>🌿 Mocha</summary>
+<img src="./assets/mocha.png"/>
+</details>

 ## Usage

+_Note: Using [TailwindCSS](https://tailwindcss.com/) in your project? Check out [@catppuccin/tailwindcss](https://github.com/catppuccin/tailwindcss)._
+
 1. Copy the theme files from this repository:

  ```bash
@ -37,12 +56,15 @@ _Note: Using [TailwindCSS](https://tailwindcss.com/) in your project? Check out
  }
  ```

+## 🙋 FAQ
+
+- Q: **How can I add a variable prefix?**
+  A: See [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on how to build themes from source with a prefix, ex: `var(--myprefix-text);`
+
 ## Contributing

 See [CONTRIBUTING.md](./CONTRIBUTING.md) and thanks for the interest!

-_Bonus:_ Customizing an optional CSS variable prefix is available.
-
 &nbsp;

 <p align="center"><img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" /></p>
--- a/assets/frappé.png
+++ b/assets/frappé.png
--- a/assets/latte.png
+++ b/assets/latte.png
--- a/assets/macchiato.png
+++ b/assets/macchiato.png
--- a/assets/mocha.png
+++ b/assets/mocha.png
--- a/assets/preview.png
+++ b/assets/preview.png
--- a/example/example.css
+++ b/example/example.css
@ -0,0 +1,57 @@
+@import '../themes/Catppuccin-Latte.hex.css';
+/* @import '../themes/Catppuccin-Frappé.hex.css'; */
+/* @import '../themes/Catppuccin-Macchiato.hex.css'; */
+/* @import '../themes/Catppuccin-Mocha.hex.css'; */
+
+body {
+  color: var(--subtext-1);
+  background-color: var(--mantle);
+  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,Cantarell,Ubuntu,roboto,noto,helvetica,arial,sans-serif;
+  padding: 0 1.5rem;
+  margin: 0;
+}
+
+h1 {
+  color: var(--peach);
+}
+
+h2 {
+  color: var(--text);
+}
+
+a {
+  color: var(--blue);
+}
+
+ul {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  padding: 0;
+
+  li {
+    list-style-type: none;
+  }
+}
+
+.colors {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+
+  > * {
+    width: 100px;
+    height: 100px;
+    border-radius: 1rem;
+  }
+
+  .first {
+    background-color: var(--pink);
+  }
+  .second {
+    background-color: var(--yellow);
+  }
+  .third {
+    background-color: var(--teal);
+  }
+}
--- a/example/index.html
+++ b/example/index.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Catppuccin CSS Example Page</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="/example/example.css">
+</head>
+<body>
+  <header>
+    <h1>Catppuccin CSS</h1>
+  </header>
+
+  <nav>
+    <ul>
+      <li><a href="">Home</a></li>
+      <li><a href="">About</a></li>
+      <li><a href="">Contact</a></li>
+    </ul>
+  </nav>
+
+  <article>
+    <h2>This is a headline</h2>
+    <p>
+      This paragraph is nested inside an article. It contains basic tags like <a href="#top">anchors</a>,
+      <strong>strong</strong>, <em>emphasis</em>, and <u>underline</u>.
+      It provides <del>deleted text</del> as well, which often gets replaced with <ins>inserted</ins> text.
+    </p>
+
+    <h3>Soothing Pastels</h3>
+
+    <div class="colors">
+      <div class="first"></div>
+      <div class="second"></div>
+      <div class="third"></div>
+    </div>
+  </article>
+
+  <!-- Made with html5example.com -->
+</body>
+</html>
+
--- a/index.js
+++ b/index.js
@ -48,7 +48,8 @@ function cssClasses(colors, color_type) {
 }

 function cssClass(name, color, color_type) {
-  return `${INDENTATION}--${PREFIX.length > 0 ? PREFIX + '-' : ''}${name.toLowerCase()}: ${handle_color_type(color, color_type)};`
+  name = name.toLowerCase().replace(' ', '-')
+  return `${INDENTATION}--${PREFIX.length > 0 ? PREFIX + '-' : ''}${name}: ${handle_color_type(color, color_type)};`
 }

 function handle_color_type(color, color_type) {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@catppuccin/css",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "description": "Soothing pastel theme for CSS",
  "main": "index.js",
  "scripts": {
--- a/themes/Catppuccin-Frappé.hex.css
+++ b/themes/Catppuccin-Frappé.hex.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 HEX from palette v1.7.1
  --blue: #8caaee;
  --lavender: #babbf1;
  --text: #c6d0f5;
-  --subtext 1: #b5bfe2;
-  --subtext 0: #a5adce;
-  --overlay 2: #949cbb;
-  --overlay 1: #838ba7;
-  --overlay 0: #737994;
-  --surface 2: #626880;
-  --surface 1: #51576d;
-  --surface 0: #414559;
+  --subtext-1: #b5bfe2;
+  --subtext-0: #a5adce;
+  --overlay-2: #949cbb;
+  --overlay-1: #838ba7;
+  --overlay-0: #737994;
+  --surface-2: #626880;
+  --surface-1: #51576d;
+  --surface-0: #414559;
  --base: #303446;
  --mantle: #292c3c;
  --crust: #232634;
--- a/themes/Catppuccin-Frappé.hsl.css
+++ b/themes/Catppuccin-Frappé.hsl.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 HSL from palette v1.7.1
  --blue: hsl(221.6326530612245, 0.7424242424242424, 0.7411764705882353);
  --lavender: hsl(238.90909090909093, 0.6626506024096385, 0.8372549019607842);
  --text: hsl(227.2340425531915, 0.7014925373134333, 0.8686274509803922);
-  --subtext 1: hsl(226.66666666666669, 0.43689320388349495, 0.7980392156862746);
-  --subtext 0: hsl(228.29268292682926, 0.2949640287769784, 0.7274509803921569);
-  --overlay 2: hsl(227.69230769230768, 0.22285714285714275, 0.6568627450980392);
-  --overlay 1: hsl(226.66666666666669, 0.16981132075471703, 0.584313725490196);
-  --overlay 0: hsl(229.0909090909091, 0.13360323886639683, 0.515686274509804);
-  --surface 2: hsl(228.00000000000003, 0.1327433628318584, 0.44313725490196076);
-  --surface 1: hsl(227.14285714285714, 0.14736842105263157, 0.37254901960784315);
-  --surface 0: hsl(230.00000000000003, 0.15584415584415584, 0.30196078431372547);
+  --subtext-1: hsl(226.66666666666669, 0.43689320388349495, 0.7980392156862746);
+  --subtext-0: hsl(228.29268292682926, 0.2949640287769784, 0.7274509803921569);
+  --overlay-2: hsl(227.69230769230768, 0.22285714285714275, 0.6568627450980392);
+  --overlay-1: hsl(226.66666666666669, 0.16981132075471703, 0.584313725490196);
+  --overlay-0: hsl(229.0909090909091, 0.13360323886639683, 0.515686274509804);
+  --surface-2: hsl(228.00000000000003, 0.1327433628318584, 0.44313725490196076);
+  --surface-1: hsl(227.14285714285714, 0.14736842105263157, 0.37254901960784315);
+  --surface-0: hsl(230.00000000000003, 0.15584415584415584, 0.30196078431372547);
  --base: hsl(229.0909090909091, 0.18644067796610175, 0.23137254901960785);
  --mantle: hsl(230.52631578947367, 0.18811881188118806, 0.19803921568627453);
  --crust: hsl(229.41176470588238, 0.19540229885057467, 0.17058823529411765);
--- a/themes/Catppuccin-Frappé.rgb.css
+++ b/themes/Catppuccin-Frappé.rgb.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 RGB from palette v1.7.1
  --blue: rgb(140, 170, 238);
  --lavender: rgb(186, 187, 241);
  --text: rgb(198, 208, 245);
-  --subtext 1: rgb(181, 191, 226);
-  --subtext 0: rgb(165, 173, 206);
-  --overlay 2: rgb(148, 156, 187);
-  --overlay 1: rgb(131, 139, 167);
-  --overlay 0: rgb(115, 121, 148);
-  --surface 2: rgb(98, 104, 128);
-  --surface 1: rgb(81, 87, 109);
-  --surface 0: rgb(65, 69, 89);
+  --subtext-1: rgb(181, 191, 226);
+  --subtext-0: rgb(165, 173, 206);
+  --overlay-2: rgb(148, 156, 187);
+  --overlay-1: rgb(131, 139, 167);
+  --overlay-0: rgb(115, 121, 148);
+  --surface-2: rgb(98, 104, 128);
+  --surface-1: rgb(81, 87, 109);
+  --surface-0: rgb(65, 69, 89);
  --base: rgb(48, 52, 70);
  --mantle: rgb(41, 44, 60);
  --crust: rgb(35, 38, 52);
--- a/themes/Catppuccin-Latte.hex.css
+++ b/themes/Catppuccin-Latte.hex.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 HEX from palette v1.7.1
  --blue: #1e66f5;
  --lavender: #7287fd;
  --text: #4c4f69;
-  --subtext 1: #5c5f77;
-  --subtext 0: #6c6f85;
-  --overlay 2: #7c7f93;
-  --overlay 1: #8c8fa1;
-  --overlay 0: #9ca0b0;
-  --surface 2: #acb0be;
-  --surface 1: #bcc0cc;
-  --surface 0: #ccd0da;
+  --subtext-1: #5c5f77;
+  --subtext-0: #6c6f85;
+  --overlay-2: #7c7f93;
+  --overlay-1: #8c8fa1;
+  --overlay-0: #9ca0b0;
+  --surface-2: #acb0be;
+  --surface-1: #bcc0cc;
+  --surface-0: #ccd0da;
  --base: #eff1f5;
  --mantle: #e6e9ef;
  --crust: #dce0e8;
--- a/themes/Catppuccin-Latte.hsl.css
+++ b/themes/Catppuccin-Latte.hsl.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 HSL from palette v1.7.1
  --blue: hsl(219.90697674418607, 0.9148936170212768, 0.5392156862745098);
  --lavender: hsl(230.93525179856115, 0.9720279720279721, 0.7196078431372549);
  --text: hsl(233.79310344827587, 0.16022099447513813, 0.3549019607843137);
-  --subtext 1: hsl(233.33333333333334, 0.1279620853080569, 0.4137254901960784);
-  --subtext 0: hsl(232.79999999999998, 0.10373443983402494, 0.4725490196078431);
-  --overlay 2: hsl(232.17391304347825, 0.09623430962343092, 0.5313725490196078);
-  --overlay 1: hsl(231.42857142857144, 0.10047846889952144, 0.5901960784313726);
-  --overlay 0: hsl(228.00000000000003, 0.11235955056179768, 0.6509803921568628);
-  --surface 2: hsl(226.6666666666667, 0.12162162162162159, 0.7098039215686275);
-  --surface 1: hsl(225.00000000000003, 0.13559322033898308, 0.7686274509803922);
-  --surface 0: hsl(222.85714285714292, 0.1590909090909089, 0.8274509803921568);
+  --subtext-1: hsl(233.33333333333334, 0.1279620853080569, 0.4137254901960784);
+  --subtext-0: hsl(232.79999999999998, 0.10373443983402494, 0.4725490196078431);
+  --overlay-2: hsl(232.17391304347825, 0.09623430962343092, 0.5313725490196078);
+  --overlay-1: hsl(231.42857142857144, 0.10047846889952144, 0.5901960784313726);
+  --overlay-0: hsl(228.00000000000003, 0.11235955056179768, 0.6509803921568628);
+  --surface-2: hsl(226.6666666666667, 0.12162162162162159, 0.7098039215686275);
+  --surface-1: hsl(225.00000000000003, 0.13559322033898308, 0.7686274509803922);
+  --surface-0: hsl(222.85714285714292, 0.1590909090909089, 0.8274509803921568);
  --base: hsl(220.00000000000009, 0.23076923076923136, 0.9490196078431372);
  --mantle: hsl(220.00000000000006, 0.21951219512195116, 0.919607843137255);
  --crust: hsl(220.00000000000006, 0.20689655172413762, 0.8862745098039215);
--- a/themes/Catppuccin-Latte.rgb.css
+++ b/themes/Catppuccin-Latte.rgb.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 RGB from palette v1.7.1
  --blue: rgb(30, 102, 245);
  --lavender: rgb(114, 135, 253);
  --text: rgb(76, 79, 105);
-  --subtext 1: rgb(92, 95, 119);
-  --subtext 0: rgb(108, 111, 133);
-  --overlay 2: rgb(124, 127, 147);
-  --overlay 1: rgb(140, 143, 161);
-  --overlay 0: rgb(156, 160, 176);
-  --surface 2: rgb(172, 176, 190);
-  --surface 1: rgb(188, 192, 204);
-  --surface 0: rgb(204, 208, 218);
+  --subtext-1: rgb(92, 95, 119);
+  --subtext-0: rgb(108, 111, 133);
+  --overlay-2: rgb(124, 127, 147);
+  --overlay-1: rgb(140, 143, 161);
+  --overlay-0: rgb(156, 160, 176);
+  --surface-2: rgb(172, 176, 190);
+  --surface-1: rgb(188, 192, 204);
+  --surface-0: rgb(204, 208, 218);
  --base: rgb(239, 241, 245);
  --mantle: rgb(230, 233, 239);
  --crust: rgb(220, 224, 232);
--- a/themes/Catppuccin-Macchiato.hex.css
+++ b/themes/Catppuccin-Macchiato.hex.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 HEX from palette v1.7.1
  --blue: #8aadf4;
  --lavender: #b7bdf8;
  --text: #cad3f5;
-  --subtext 1: #b8c0e0;
-  --subtext 0: #a5adcb;
-  --overlay 2: #939ab7;
-  --overlay 1: #8087a2;
-  --overlay 0: #6e738d;
-  --surface 2: #5b6078;
-  --surface 1: #494d64;
-  --surface 0: #363a4f;
+  --subtext-1: #b8c0e0;
+  --subtext-0: #a5adcb;
+  --overlay-2: #939ab7;
+  --overlay-1: #8087a2;
+  --overlay-0: #6e738d;
+  --surface-2: #5b6078;
+  --surface-1: #494d64;
+  --surface-0: #363a4f;
  --base: #24273a;
  --mantle: #1e2030;
  --crust: #181926;
--- a/themes/Catppuccin-Macchiato.hsl.css
+++ b/themes/Catppuccin-Macchiato.hsl.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 HSL from palette v1.7.1
  --blue: hsl(220.188679245283, 0.8281250000000003, 0.7490196078431373);
  --lavender: hsl(234.46153846153848, 0.8227848101265824, 0.8450980392156863);
  --text: hsl(227.4418604651163, 0.6825396825396831, 0.8764705882352941);
-  --subtext 1: hsl(228, 0.39215686274509803, 0.8);
-  --subtext 0: hsl(227.36842105263156, 0.2676056338028167, 0.7215686274509804);
-  --overlay 2: hsl(228.33333333333331, 0.2000000000000001, 0.6470588235294117);
-  --overlay 1: hsl(227.6470588235294, 0.1545454545454545, 0.5686274509803921);
-  --overlay 0: hsl(230.32258064516128, 0.12350597609561753, 0.49215686274509807);
-  --surface 2: hsl(229.65517241379308, 0.13744075829383887, 0.4137254901960784);
-  --surface 1: hsl(231.11111111111114, 0.15606936416184972, 0.3392156862745098);
-  --surface 0: hsl(230.4, 0.1879699248120301, 0.2607843137254902);
+  --subtext-1: hsl(228, 0.39215686274509803, 0.8);
+  --subtext-0: hsl(227.36842105263156, 0.2676056338028167, 0.7215686274509804);
+  --overlay-2: hsl(228.33333333333331, 0.2000000000000001, 0.6470588235294117);
+  --overlay-1: hsl(227.6470588235294, 0.1545454545454545, 0.5686274509803921);
+  --overlay-0: hsl(230.32258064516128, 0.12350597609561753, 0.49215686274509807);
+  --surface-2: hsl(229.65517241379308, 0.13744075829383887, 0.4137254901960784);
+  --surface-1: hsl(231.11111111111114, 0.15606936416184972, 0.3392156862745098);
+  --surface-0: hsl(230.4, 0.1879699248120301, 0.2607843137254902);
  --base: hsl(231.8181818181818, 0.23404255319148934, 0.1843137254901961);
  --mantle: hsl(233.33333333333334, 0.23076923076923075, 0.15294117647058825);
  --crust: hsl(235.71428571428572, 0.22580645161290322, 0.12156862745098039);
--- a/themes/Catppuccin-Macchiato.rgb.css
+++ b/themes/Catppuccin-Macchiato.rgb.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 RGB from palette v1.7.1
  --blue: rgb(138, 173, 244);
  --lavender: rgb(183, 189, 248);
  --text: rgb(202, 211, 245);
-  --subtext 1: rgb(184, 192, 224);
-  --subtext 0: rgb(165, 173, 203);
-  --overlay 2: rgb(147, 154, 183);
-  --overlay 1: rgb(128, 135, 162);
-  --overlay 0: rgb(110, 115, 141);
-  --surface 2: rgb(91, 96, 120);
-  --surface 1: rgb(73, 77, 100);
-  --surface 0: rgb(54, 58, 79);
+  --subtext-1: rgb(184, 192, 224);
+  --subtext-0: rgb(165, 173, 203);
+  --overlay-2: rgb(147, 154, 183);
+  --overlay-1: rgb(128, 135, 162);
+  --overlay-0: rgb(110, 115, 141);
+  --surface-2: rgb(91, 96, 120);
+  --surface-1: rgb(73, 77, 100);
+  --surface-0: rgb(54, 58, 79);
  --base: rgb(36, 39, 58);
  --mantle: rgb(30, 32, 48);
  --crust: rgb(24, 25, 38);
--- a/themes/Catppuccin-Mocha.hex.css
+++ b/themes/Catppuccin-Mocha.hex.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 HEX from palette v1.7.1
  --blue: #89b4fa;
  --lavender: #b4befe;
  --text: #cdd6f4;
-  --subtext 1: #bac2de;
-  --subtext 0: #a6adc8;
-  --overlay 2: #9399b2;
-  --overlay 1: #7f849c;
-  --overlay 0: #6c7086;
-  --surface 2: #585b70;
-  --surface 1: #45475a;
-  --surface 0: #313244;
+  --subtext-1: #bac2de;
+  --subtext-0: #a6adc8;
+  --overlay-2: #9399b2;
+  --overlay-1: #7f849c;
+  --overlay-0: #6c7086;
+  --surface-2: #585b70;
+  --surface-1: #45475a;
+  --surface-0: #313244;
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
--- a/themes/Catppuccin-Mocha.hsl.css
+++ b/themes/Catppuccin-Mocha.hsl.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 HSL from palette v1.7.1
  --blue: hsl(217.1681415929203, 0.9186991869918699, 0.7588235294117647);
  --lavender: hsl(231.89189189189187, 0.9736842105263159, 0.8509803921568628);
  --text: hsl(226.15384615384616, 0.6393442622950825, 0.8803921568627451);
-  --subtext 1: hsl(226.66666666666669, 0.35294117647058837, 0.8);
-  --subtext 0: hsl(227.6470588235294, 0.23611111111111102, 0.7176470588235294);
-  --overlay 2: hsl(228.38709677419354, 0.16756756756756758, 0.6372549019607843);
-  --overlay 1: hsl(229.65517241379308, 0.12775330396475776, 0.5549019607843138);
-  --overlay 0: hsl(230.7692307692308, 0.10743801652892565, 0.4745098039215686);
-  --surface 2: hsl(232.5, 0.12, 0.39215686274509803);
-  --surface 1: hsl(234.2857142857143, 0.13207547169811326, 0.31176470588235294);
-  --surface 0: hsl(236.84210526315792, 0.16239316239316234, 0.22941176470588237);
+  --subtext-1: hsl(226.66666666666669, 0.35294117647058837, 0.8);
+  --subtext-0: hsl(227.6470588235294, 0.23611111111111102, 0.7176470588235294);
+  --overlay-2: hsl(228.38709677419354, 0.16756756756756758, 0.6372549019607843);
+  --overlay-1: hsl(229.65517241379308, 0.12775330396475776, 0.5549019607843138);
+  --overlay-0: hsl(230.7692307692308, 0.10743801652892565, 0.4745098039215686);
+  --surface-2: hsl(232.5, 0.12, 0.39215686274509803);
+  --surface-1: hsl(234.2857142857143, 0.13207547169811326, 0.31176470588235294);
+  --surface-0: hsl(236.84210526315792, 0.16239316239316234, 0.22941176470588237);
  --base: hsl(240, 0.21052631578947367, 0.14901960784313725);
  --mantle: hsl(240, 0.2131147540983607, 0.11960784313725491);
  --crust: hsl(240, 0.22727272727272727, 0.08627450980392157);
--- a/themes/Catppuccin-Mocha.rgb.css
+++ b/themes/Catppuccin-Mocha.rgb.css
@ -18,14 +18,14 @@ Catppuccin CSS Theme v0.1.0 RGB from palette v1.7.1
  --blue: rgb(137, 180, 250);
  --lavender: rgb(180, 190, 254);
  --text: rgb(205, 214, 244);
-  --subtext 1: rgb(186, 194, 222);
-  --subtext 0: rgb(166, 173, 200);
-  --overlay 2: rgb(147, 153, 178);
-  --overlay 1: rgb(127, 132, 156);
-  --overlay 0: rgb(108, 112, 134);
-  --surface 2: rgb(88, 91, 112);
-  --surface 1: rgb(69, 71, 90);
-  --surface 0: rgb(49, 50, 68);
+  --subtext-1: rgb(186, 194, 222);
+  --subtext-0: rgb(166, 173, 200);
+  --overlay-2: rgb(147, 153, 178);
+  --overlay-1: rgb(127, 132, 156);
+  --overlay-0: rgb(108, 112, 134);
+  --surface-2: rgb(88, 91, 112);
+  --surface-1: rgb(69, 71, 90);
+  --surface-0: rgb(49, 50, 68);
  --base: rgb(30, 30, 46);
  --mantle: rgb(24, 24, 37);
  --crust: rgb(17, 17, 27);