From d81ae318f462c0a360acf6401fd438e62b6f9921 Mon Sep 17 00:00:00 2001
From: Pocco81 <pocco451@gmail.com>
Date: Sun, 15 May 2022 19:14:56 -0500
Subject: [PATCH] feat: node package + reorganized everything

---
 .gitignore                                    |   1 +
 .npmrc                                        |   1 +
 Catppuccin.css                                |  66 --
 .../Catppuccin.afpalette                      | Bin
 Catppuccin.ase => ase/Catppuccin.ase          | Bin
 assets/.gitkeep                               |   0
 Catppuccin.png => assets/Catppuccin.png       | Bin
 css/catppuccin.css                            | 314 +++++++
 css_builder.js                                |   9 +
 Catppuccin.gpl => gpl/Catppuccin.gpl          |   0
 index.js                                      | 828 ++++++++++++++++++
 Catppuccin.kpl => kpl/Catppuccin.kpl          | Bin
 lib/builder.lua                               |  71 ++
 package.json                                  |  39 +
 Catppuccin.scss => scss/Catppuccin.scss       |   0
 test.js                                       |  35 +
 16 files changed, 1298 insertions(+), 66 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 .npmrc
 delete mode 100644 Catppuccin.css
 rename Catppuccin.afpalette => afpalette/Catppuccin.afpalette (100%)
 rename Catppuccin.ase => ase/Catppuccin.ase (100%)
 delete mode 100644 assets/.gitkeep
 rename Catppuccin.png => assets/Catppuccin.png (100%)
 create mode 100644 css/catppuccin.css
 create mode 100644 css_builder.js
 rename Catppuccin.gpl => gpl/Catppuccin.gpl (100%)
 create mode 100644 index.js
 rename Catppuccin.kpl => kpl/Catppuccin.kpl (100%)
 create mode 100644 lib/builder.lua
 create mode 100644 package.json
 rename Catppuccin.scss => scss/Catppuccin.scss (100%)
 create mode 100644 test.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..43c97e7
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/Catppuccin.css b/Catppuccin.css
deleted file mode 100644
index 6f5faad..0000000
--- a/Catppuccin.css
+++ /dev/null
@@ -1,66 +0,0 @@
-
-/* ----- Catppuccin Colours ----- */
-
-
-:root {
-
-    /* ----- rainbow ----- */
-
-    /*                 H     S     L */
-    --rosewater_hsl:  10,  56%,  91%;
-    --flamingo_hsl:    0,  59%,  88%;
-    --mauve_hsl:     279,  70%,  83%;
-    --pink_hsl:      316,  72%,  86%;
-    --maroon_hsl:    349,  60%,  77%;
-    --red_hsl:       342,  79%,  75%;
-    --peach_hsl:      24,  88%,  78%;
-    --yellow_hsl:     41,  88%,  84%;
-    --green_hsl:     128,  58%,  79%;
-    --teal_hsl:      171,  53%,  81%;
-    --blue_hsl:      207,  93%,  79%;
-    --sky_hsl:       189,  71%,  73%;
-    --lavender_hsl:  238, 100%,  89%;
-
-
-
-    /* ----- black & white ----- */
-
-    /*                 H     S     L */
-    --black0_hsl:    254,  25%,  10%;
-    --black1_hsl:    249,  23%,  12%;
-    --black2_hsl:    240,  21%,  15%;
-    --black3_hsl:    249,  18%,  22%;
-    --black4_hsl:    254,  12%,  36%;
-    --gray0_hsl:     247,   8%,  46%;
-    --gray1_hsl:     274,  11%,  59%;
-    --gray2_hsl:     285,  10%,  75%;
-    --white_hsl:     220,  38%,  89%;
-
-
-
-    /* ----- variables ----- */
-
-    --rosewater:     hsl(var(--rosewater_hsl));
-    --flamingo:      hsl(var(--flamingo_hsl));
-    --mauve:         hsl(var(--mauve_hsl));
-    --pink:          hsl(var(--pink_hsl));
-    --maroon:        hsl(var(--maroon_hsl));
-    --red:           hsl(var(--red_hsl));
-    --peach:         hsl(var(--peach_hsl));
-    --yellow:        hsl(var(--yellow_hsl));
-    --green:         hsl(var(--green_hsl));
-    --teal:          hsl(var(--teal_hsl));
-    --blue:          hsl(var(--blue_hsl));
-    --sky:           hsl(var(--sky_hsl));
-    --lavender:      hsl(var(--lavender_hsl));
-    --black0:        hsl(var(--black0_hsl));
-    --black1:        hsl(var(--black1_hsl));
-    --black2:        hsl(var(--black2_hsl));
-    --black3:        hsl(var(--black3_hsl));
-    --black4:        hsl(var(--black4_hsl));
-    --gray0:         hsl(var(--gray0_hsl));
-    --gray1:         hsl(var(--gray1_hsl));
-    --gray2:         hsl(var(--gray2_hsl));
-    --white:         hsl(var(--white_hsl));
-
-}
diff --git a/Catppuccin.afpalette b/afpalette/Catppuccin.afpalette
similarity index 100%
rename from Catppuccin.afpalette
rename to afpalette/Catppuccin.afpalette
diff --git a/Catppuccin.ase b/ase/Catppuccin.ase
similarity index 100%
rename from Catppuccin.ase
rename to ase/Catppuccin.ase
diff --git a/assets/.gitkeep b/assets/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/Catppuccin.png b/assets/Catppuccin.png
similarity index 100%
rename from Catppuccin.png
rename to assets/Catppuccin.png
diff --git a/css/catppuccin.css b/css/catppuccin.css
new file mode 100644
index 0000000..a269e63
--- /dev/null
+++ b/css/catppuccin.css
@@ -0,0 +1,314 @@
+:root {
+	--ctp-latte-rosewater: #de9584;
+	--ctp-latte-rosewater-rgb: rgb(222, 149, 132);
+	--ctp-latte-rosewater-hsl: hsl(11, 58%, 69%);
+	--ctp-frappe-rosewater: #f2d5cf;
+	--ctp-frappe-rosewater-rgb: rgb(242, 213, 207);
+	--ctp-frappe-rosewater-hsl: hsl(10, 57%, 88%);
+	--ctp-macchiato-rosewater: #f4dbd6;
+	--ctp-macchiato-rosewater-rgb: rgb(244, 219, 214);
+	--ctp-macchiato-rosewater-hsl: hsl(10, 58%, 90%);
+	--ctp-mocha-rosewater: #f5e0dc;
+	--ctp-mocha-rosewater-rgb: rgb(245, 224, 220);
+	--ctp-mocha-rosewater-hsl: hsl(10, 56%, 91%);
+	--ctp-latte-flamingo: #dd7878;
+	--ctp-latte-flamingo-rgb: rgb(221, 120, 120);
+	--ctp-latte-flamingo-hsl: hsl(0, 60%, 67%);
+	--ctp-frappe-flamingo: #eebebe;
+	--ctp-frappe-flamingo-rgb: rgb(238, 190, 190);
+	--ctp-frappe-flamingo-hsl: hsl(0, 59%, 84%);
+	--ctp-macchiato-flamingo: #f0c6c6;
+	--ctp-macchiato-flamingo-rgb: rgb(240, 198, 198);
+	--ctp-macchiato-flamingo-hsl: hsl(0, 58%, 86%);
+	--ctp-mocha-flamingo: #f2cdcd;
+	--ctp-mocha-flamingo-rgb: rgb(242, 205, 205);
+	--ctp-mocha-flamingo-hsl: hsl(0, 59%, 88%);
+	--ctp-latte-pink: #ec83d0;
+	--ctp-latte-pink-rgb: rgb(236, 131, 208);
+	--ctp-latte-pink-hsl: hsl(316, 73%, 72%);
+	--ctp-frappe-pink: #f4b8e4;
+	--ctp-frappe-pink-rgb: rgb(244, 184, 228);
+	--ctp-frappe-pink-hsl: hsl(316, 73%, 84%);
+	--ctp-macchiato-pink: #f5bde6;
+	--ctp-macchiato-pink-rgb: rgb(245, 189, 230);
+	--ctp-macchiato-pink-hsl: hsl(316, 74%, 85%);
+	--ctp-mocha-pink: #f5c2e7;
+	--ctp-mocha-pink-rgb: rgb(245, 194, 231);
+	--ctp-mocha-pink-hsl: hsl(316, 72%, 86%);
+	--ctp-latte-mauve: #8839ef;
+	--ctp-latte-mauve-rgb: rgb(136, 57, 239);
+	--ctp-latte-mauve-hsl: hsl(266, 85%, 58%);
+	--ctp-frappe-mauve: #ca9ee6;
+	--ctp-frappe-mauve-rgb: rgb(202, 158, 230);
+	--ctp-frappe-mauve-hsl: hsl(277, 59%, 76%);
+	--ctp-macchiato-mauve: #c6a0f6;
+	--ctp-macchiato-mauve-rgb: rgb(198, 160, 246);
+	--ctp-macchiato-mauve-hsl: hsl(267, 83%, 80%);
+	--ctp-mocha-mauve: #cba6f7;
+	--ctp-mocha-mauve-rgb: rgb(203, 166, 247);
+	--ctp-mocha-mauve-hsl: hsl(267, 84%, 81%);
+	--ctp-latte-red: #d20f39;
+	--ctp-latte-red-rgb: rgb(210, 15, 57);
+	--ctp-latte-red-hsl: hsl(347, 87%, 44%);
+	--ctp-frappe-red: #e78284;
+	--ctp-frappe-red-rgb: rgb(231, 130, 132);
+	--ctp-frappe-red-hsl: hsl(359, 68%, 71%);
+	--ctp-macchiato-red: #ed8796;
+	--ctp-macchiato-red-rgb: rgb(237, 135, 150);
+	--ctp-macchiato-red-hsl: hsl(351, 74%, 73%);
+	--ctp-mocha-red: #f38ba8;
+	--ctp-mocha-red-rgb: rgb(243, 139, 168);
+	--ctp-mocha-red-hsl: hsl(343, 81%, 75%);
+	--ctp-latte-maroon: #e64553;
+	--ctp-latte-maroon-rgb: rgb(230, 69, 83);
+	--ctp-latte-maroon-hsl: hsl(355, 76%, 59%);
+	--ctp-frappe-maroon: #ea999c;
+	--ctp-frappe-maroon-rgb: rgb(234, 153, 156);
+	--ctp-frappe-maroon-hsl: hsl(358, 66%, 76%);
+	--ctp-macchiato-maroon: #ee99a0;
+	--ctp-macchiato-maroon-rgb: rgb(238, 153, 160);
+	--ctp-macchiato-maroon-hsl: hsl(355, 71%, 77%);
+	--ctp-mocha-maroon: #eba0ac;
+	--ctp-mocha-maroon-rgb: rgb(235, 160, 172);
+	--ctp-mocha-maroon-hsl: hsl(350, 65%, 77%);
+	--ctp-latte-peach: #fe640b;
+	--ctp-latte-peach-rgb: rgb(254, 100, 11);
+	--ctp-latte-peach-hsl: hsl(22, 99%, 52%);
+	--ctp-frappe-peach: #ef9f76;
+	--ctp-frappe-peach-rgb: rgb(239, 159, 118);
+	--ctp-frappe-peach-hsl: hsl(20, 79%, 70%);
+	--ctp-macchiato-peach: #f5a97f;
+	--ctp-macchiato-peach-rgb: rgb(245, 169, 127);
+	--ctp-macchiato-peach-hsl: hsl(21, 86%, 73%);
+	--ctp-mocha-peach: #fab387;
+	--ctp-mocha-peach-rgb: rgb(250, 179, 135);
+	--ctp-mocha-peach-hsl: hsl(23, 92%, 75%);
+	--ctp-latte-yellow: #e49320;
+	--ctp-latte-yellow-rgb: rgb(228, 147, 32);
+	--ctp-latte-yellow-hsl: hsl(35, 78%, 51%);
+	--ctp-frappe-yellow: #e5c890;
+	--ctp-frappe-yellow-rgb: rgb(229, 200, 144);
+	--ctp-frappe-yellow-hsl: hsl(40, 62%, 73%);
+	--ctp-macchiato-yellow: #eed49f;
+	--ctp-macchiato-yellow-rgb: rgb(238, 212, 159);
+	--ctp-macchiato-yellow-hsl: hsl(40, 70%, 78%);
+	--ctp-mocha-yellow: #f9e2af;
+	--ctp-mocha-yellow-rgb: rgb(249, 226, 175);
+	--ctp-mocha-yellow-hsl: hsl(41, 86%, 83%);
+	--ctp-latte-green: #40a02b;
+	--ctp-latte-green-rgb: rgb(64, 160, 43);
+	--ctp-latte-green-hsl: hsl(109, 58%, 40%);
+	--ctp-frappe-green: #a6d189;
+	--ctp-frappe-green-rgb: rgb(166, 209, 137);
+	--ctp-frappe-green-hsl: hsl(96, 44%, 68%);
+	--ctp-macchiato-green: #a6da95;
+	--ctp-macchiato-green-rgb: rgb(166, 218, 149);
+	--ctp-macchiato-green-hsl: hsl(105, 48%, 72%);
+	--ctp-mocha-green: #a6e3a1;
+	--ctp-mocha-green-rgb: rgb(166, 227, 161);
+	--ctp-mocha-green-hsl: hsl(115, 54%, 76%);
+	--ctp-latte-teal: #179299;
+	--ctp-latte-teal-rgb: rgb(23, 146, 153);
+	--ctp-latte-teal-hsl: hsl(183, 74%, 35%);
+	--ctp-frappe-teal: #81c8be;
+	--ctp-frappe-teal-rgb: rgb(129, 200, 190);
+	--ctp-frappe-teal-hsl: hsl(172, 39%, 65%);
+	--ctp-macchiato-teal: #8bd5ca;
+	--ctp-macchiato-teal-rgb: rgb(139, 213, 202);
+	--ctp-macchiato-teal-hsl: hsl(171, 47%, 69%);
+	--ctp-mocha-teal: #94e2d5;
+	--ctp-mocha-teal-rgb: rgb(148, 226, 213);
+	--ctp-mocha-teal-hsl: hsl(170, 57%, 73%);
+	--ctp-latte-sky: #04a5e5;
+	--ctp-latte-sky-rgb: rgb(4, 165, 229);
+	--ctp-latte-sky-hsl: hsl(197, 97%, 46%);
+	--ctp-frappe-sky: #99d1db;
+	--ctp-frappe-sky-rgb: rgb(153, 209, 219);
+	--ctp-frappe-sky-hsl: hsl(189, 48%, 73%);
+	--ctp-macchiato-sky: #91d7e3;
+	--ctp-macchiato-sky-rgb: rgb(145, 215, 227);
+	--ctp-macchiato-sky-hsl: hsl(189, 59%, 73%);
+	--ctp-mocha-sky: #89dceb;
+	--ctp-mocha-sky-rgb: rgb(137, 220, 235);
+	--ctp-mocha-sky-hsl: hsl(189, 71%, 73%);
+	--ctp-latte-sapphire: #209fb5;
+	--ctp-latte-sapphire-rgb: rgb(32, 159, 181);
+	--ctp-latte-sapphire-hsl: hsl(189, 70%, 42%);
+	--ctp-frappe-sapphire: #85c1dc;
+	--ctp-frappe-sapphire-rgb: rgb(133, 193, 220);
+	--ctp-frappe-sapphire-hsl: hsl(199, 55%, 69%);
+	--ctp-macchiato-sapphire: #7dc4e4;
+	--ctp-macchiato-sapphire-rgb: rgb(125, 196, 228);
+	--ctp-macchiato-sapphire-hsl: hsl(199, 66%, 69%);
+	--ctp-mocha-sapphire: #74c7ec;
+	--ctp-mocha-sapphire-rgb: rgb(116, 199, 236);
+	--ctp-mocha-sapphire-hsl: hsl(199, 76%, 69%);
+	--ctp-latte-blue: #2a6ef5;
+	--ctp-latte-blue-rgb: rgb(42, 110, 245);
+	--ctp-latte-blue-hsl: hsl(220, 91%, 56%);
+	--ctp-frappe-blue: #8caaee;
+	--ctp-frappe-blue-rgb: rgb(140, 170, 238);
+	--ctp-frappe-blue-hsl: hsl(222, 74%, 74%);
+	--ctp-macchiato-blue: #8aadf4;
+	--ctp-macchiato-blue-rgb: rgb(138, 173, 244);
+	--ctp-macchiato-blue-hsl: hsl(220, 83%, 75%);
+	--ctp-mocha-blue: #87b0f9;
+	--ctp-mocha-blue-rgb: rgb(135, 176, 249);
+	--ctp-mocha-blue-hsl: hsl(218, 90%, 75%);
+	--ctp-latte-lavender: #7287fd;
+	--ctp-latte-lavender-rgb: rgb(114, 135, 253);
+	--ctp-latte-lavender-hsl: hsl(231, 97%, 72%);
+	--ctp-frappe-lavender: #babbf1;
+	--ctp-frappe-lavender-rgb: rgb(186, 187, 241);
+	--ctp-frappe-lavender-hsl: hsl(239, 66%, 84%);
+	--ctp-macchiato-lavender: #b7bdf8;
+	--ctp-macchiato-lavender-rgb: rgb(183, 189, 248);
+	--ctp-macchiato-lavender-hsl: hsl(234, 82%, 85%);
+	--ctp-mocha-lavender: #b4befe;
+	--ctp-mocha-lavender-rgb: rgb(180, 190, 254);
+	--ctp-mocha-lavender-hsl: hsl(232, 97%, 85%);
+	--ctp-latte-text: #4c4f69;
+	--ctp-latte-text-rgb: rgb(76, 79, 105);
+	--ctp-latte-text-hsl: hsl(234, 16%, 35%);
+	--ctp-frappe-text: #c6ceef;
+	--ctp-frappe-text-rgb: rgb(198, 206, 239);
+	--ctp-frappe-text-hsl: hsl(228, 56%, 86%);
+	--ctp-macchiato-text: #c5cff5;
+	--ctp-macchiato-text-rgb: rgb(197, 207, 245);
+	--ctp-macchiato-text-hsl: hsl(228, 71%, 87%);
+	--ctp-mocha-text: #c6d0f5;
+	--ctp-mocha-text-rgb: rgb(198, 208, 245);
+	--ctp-mocha-text-hsl: hsl(227, 70%, 87%);
+	--ctp-latte-subtext1: #5c5f77;
+	--ctp-latte-subtext1-rgb: rgb(92, 95, 119);
+	--ctp-latte-subtext1-hsl: hsl(233, 13%, 41%);
+	--ctp-frappe-subtext1: #b5bddc;
+	--ctp-frappe-subtext1-rgb: rgb(181, 189, 220);
+	--ctp-frappe-subtext1-hsl: hsl(228, 36%, 79%);
+	--ctp-macchiato-subtext1: #b3bce0;
+	--ctp-macchiato-subtext1-rgb: rgb(179, 188, 224);
+	--ctp-macchiato-subtext1-hsl: hsl(228, 42%, 79%);
+	--ctp-mocha-subtext1: #b3bcdf;
+	--ctp-mocha-subtext1-rgb: rgb(179, 188, 223);
+	--ctp-mocha-subtext1-hsl: hsl(228, 41%, 79%);
+	--ctp-latte-subtext0: #6c6f85;
+	--ctp-latte-subtext0-rgb: rgb(108, 111, 133);
+	--ctp-latte-subtext0-hsl: hsl(233, 10%, 47%);
+	--ctp-frappe-subtext0: #a5acc9;
+	--ctp-frappe-subtext0-rgb: rgb(165, 172, 201);
+	--ctp-frappe-subtext0-hsl: hsl(228, 25%, 72%);
+	--ctp-macchiato-subtext0: #a1aacb;
+	--ctp-macchiato-subtext0-rgb: rgb(161, 170, 203);
+	--ctp-macchiato-subtext0-hsl: hsl(227, 29%, 71%);
+	--ctp-mocha-subtext0: #a1a8c9;
+	--ctp-mocha-subtext0-rgb: rgb(161, 168, 201);
+	--ctp-mocha-subtext0-hsl: hsl(229, 27%, 71%);
+	--ctp-latte-overlay2: #7c7f93;
+	--ctp-latte-overlay2-rgb: rgb(124, 127, 147);
+	--ctp-latte-overlay2-hsl: hsl(232, 10%, 53%);
+	--ctp-frappe-overlay2: #949bb7;
+	--ctp-frappe-overlay2-rgb: rgb(148, 155, 183);
+	--ctp-frappe-overlay2-hsl: hsl(228, 20%, 65%);
+	--ctp-macchiato-overlay2: #8f97b7;
+	--ctp-macchiato-overlay2-rgb: rgb(143, 151, 183);
+	--ctp-macchiato-overlay2-hsl: hsl(228, 22%, 64%);
+	--ctp-mocha-overlay2: #8e95b3;
+	--ctp-mocha-overlay2-rgb: rgb(142, 149, 179);
+	--ctp-mocha-overlay2-hsl: hsl(229, 20%, 63%);
+	--ctp-latte-overlay1: #8c8fa1;
+	--ctp-latte-overlay1-rgb: rgb(140, 143, 161);
+	--ctp-latte-overlay1-hsl: hsl(231, 10%, 59%);
+	--ctp-frappe-overlay1: #838aa4;
+	--ctp-frappe-overlay1-rgb: rgb(131, 138, 164);
+	--ctp-frappe-overlay1-hsl: hsl(227, 15%, 58%);
+	--ctp-macchiato-overlay1: #7d84a2;
+	--ctp-macchiato-overlay1-rgb: rgb(125, 132, 162);
+	--ctp-macchiato-overlay1-hsl: hsl(229, 17%, 56%);
+	--ctp-mocha-overlay1: #7b819d;
+	--ctp-mocha-overlay1-rgb: rgb(123, 129, 157);
+	--ctp-mocha-overlay1-hsl: hsl(229, 15%, 55%);
+	--ctp-latte-overlay0: #9ca0b0;
+	--ctp-latte-overlay0-rgb: rgb(156, 160, 176);
+	--ctp-latte-overlay0-hsl: hsl(228, 11%, 65%);
+	--ctp-frappe-overlay0: #737891;
+	--ctp-frappe-overlay0-rgb: rgb(115, 120, 145);
+	--ctp-frappe-overlay0-hsl: hsl(230, 12%, 51%);
+	--ctp-macchiato-overlay0: #6c728d;
+	--ctp-macchiato-overlay0-rgb: rgb(108, 114, 141);
+	--ctp-macchiato-overlay0-hsl: hsl(229, 13%, 49%);
+	--ctp-mocha-overlay0: #696d86;
+	--ctp-mocha-overlay0-rgb: rgb(105, 109, 134);
+	--ctp-mocha-overlay0-hsl: hsl(232, 12%, 47%);
+	--ctp-latte-surface2: #acb0be;
+	--ctp-latte-surface2-rgb: rgb(172, 176, 190);
+	--ctp-latte-surface2-hsl: hsl(227, 12%, 71%);
+	--ctp-frappe-surface2: #62677e;
+	--ctp-frappe-surface2-rgb: rgb(98, 103, 126);
+	--ctp-frappe-surface2-hsl: hsl(229, 13%, 44%);
+	--ctp-macchiato-surface2: #5a5f78;
+	--ctp-macchiato-surface2-rgb: rgb(90, 95, 120);
+	--ctp-macchiato-surface2-hsl: hsl(230, 14%, 41%);
+	--ctp-mocha-surface2: #565970;
+	--ctp-mocha-surface2-rgb: rgb(86, 89, 112);
+	--ctp-mocha-surface2-hsl: hsl(233, 13%, 39%);
+	--ctp-latte-surface1: #bcc0cc;
+	--ctp-latte-surface1-rgb: rgb(188, 192, 204);
+	--ctp-latte-surface1-hsl: hsl(225, 14%, 77%);
+	--ctp-frappe-surface1: #51566c;
+	--ctp-frappe-surface1-rgb: rgb(81, 86, 108);
+	--ctp-frappe-surface1-hsl: hsl(229, 14%, 37%);
+	--ctp-macchiato-surface1: #484c64;
+	--ctp-macchiato-surface1-rgb: rgb(72, 76, 100);
+	--ctp-macchiato-surface1-hsl: hsl(231, 16%, 34%);
+	--ctp-mocha-surface1: #43465a;
+	--ctp-mocha-surface1-rgb: rgb(67, 70, 90);
+	--ctp-mocha-surface1-hsl: hsl(232, 15%, 31%);
+	--ctp-latte-surface0: #ccd0da;
+	--ctp-latte-surface0-rgb: rgb(204, 208, 218);
+	--ctp-latte-surface0-hsl: hsl(223, 16%, 83%);
+	--ctp-frappe-surface0: #414559;
+	--ctp-frappe-surface0-rgb: rgb(65, 69, 89);
+	--ctp-frappe-surface0-hsl: hsl(230, 16%, 30%);
+	--ctp-macchiato-surface0: #363a4f;
+	--ctp-macchiato-surface0-rgb: rgb(54, 58, 79);
+	--ctp-macchiato-surface0-hsl: hsl(230, 19%, 26%);
+	--ctp-mocha-surface0: #313244;
+	--ctp-mocha-surface0-rgb: rgb(49, 50, 68);
+	--ctp-mocha-surface0-hsl: hsl(237, 16%, 23%);
+	--ctp-latte-base: #eff1f5;
+	--ctp-latte-base-rgb: rgb(239, 241, 245);
+	--ctp-latte-base-hsl: hsl(220, 23%, 95%);
+	--ctp-frappe-base: #303446;
+	--ctp-frappe-base-rgb: rgb(48, 52, 70);
+	--ctp-frappe-base-hsl: hsl(229, 19%, 23%);
+	--ctp-macchiato-base: #24273a;
+	--ctp-macchiato-base-rgb: rgb(36, 39, 58);
+	--ctp-macchiato-base-hsl: hsl(232, 23%, 18%);
+	--ctp-mocha-base: #1e1e2e;
+	--ctp-mocha-base-rgb: rgb(30, 30, 46);
+	--ctp-mocha-base-hsl: hsl(240, 21%, 15%);
+	--ctp-latte-mantle: #e6e9ef;
+	--ctp-latte-mantle-rgb: rgb(230, 233, 239);
+	--ctp-latte-mantle-hsl: hsl(220, 22%, 92%);
+	--ctp-frappe-mantle: #292c3c;
+	--ctp-frappe-mantle-rgb: rgb(41, 44, 60);
+	--ctp-frappe-mantle-hsl: hsl(231, 19%, 20%);
+	--ctp-macchiato-mantle: #1e2030;
+	--ctp-macchiato-mantle-rgb: rgb(30, 32, 48);
+	--ctp-macchiato-mantle-hsl: hsl(233, 23%, 15%);
+	--ctp-mocha-mantle: #181825;
+	--ctp-mocha-mantle-rgb: rgb(24, 24, 37);
+	--ctp-mocha-mantle-hsl: hsl(240, 21%, 12%);
+	--ctp-latte-crust: #dce0e8;
+	--ctp-latte-crust-rgb: rgb(220, 224, 232);
+	--ctp-latte-crust-hsl: hsl(220, 21%, 89%);
+	--ctp-frappe-crust: #232634;
+	--ctp-frappe-crust-rgb: rgb(35, 38, 52);
+	--ctp-frappe-crust-hsl: hsl(229, 20%, 17%);
+	--ctp-macchiato-crust: #181926;
+	--ctp-macchiato-crust-rgb: rgb(24, 25, 38);
+	--ctp-macchiato-crust-hsl: hsl(236, 23%, 12%);
+	--ctp-mocha-crust: #11111b;
+	--ctp-mocha-crust-rgb: rgb(17, 17, 27);
+	--ctp-mocha-crust-hsl: hsl(240, 23%, 9%);
+}
diff --git a/css_builder.js b/css_builder.js
new file mode 100644
index 0000000..0cefcfa
--- /dev/null
+++ b/css_builder.js
@@ -0,0 +1,9 @@
+import {variants, labels} from './index.js'
+
+for (let label in labels) {
+	for (let palette in variants) {
+		console.log("--ctp-" + palette + "-" + label + ": " + variants[palette][label]["hex"] + ";")
+		console.log("--ctp-" + palette + "-" + label + "-rgb" + ": " + variants[palette][label]["rgb"] + ";")
+		console.log("--ctp-" + palette + "-" + label + "-hsl" + ": " + variants[palette][label]["hsl"] + ";")
+	}
+}
diff --git a/Catppuccin.gpl b/gpl/Catppuccin.gpl
similarity index 100%
rename from Catppuccin.gpl
rename to gpl/Catppuccin.gpl
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..781953f
--- /dev/null
+++ b/index.js
@@ -0,0 +1,828 @@
+// catppuccin palettes
+
+const latte = {
+	rosewater: {
+		hex: '#de9584',
+		rgb: 'rgb(222, 149, 132)',
+		hsl: 'hsl(11, 58%, 69%)',
+	},
+
+	flamingo: {
+		hex: '#dd7878',
+		rgb: 'rgb(221, 120, 120)',
+		hsl: 'hsl(0, 60%, 67%)',
+	},
+
+	pink: {
+		hex: '#ec83d0',
+		rgb: 'rgb(236, 131, 208)',
+		hsl: 'hsl(316, 73%, 72%)',
+	},
+
+	mauve: {
+		hex: '#8839ef',
+		rgb: 'rgb(136, 57, 239)',
+		hsl: 'hsl(266, 85%, 58%)',
+	},
+
+	red: {
+		hex: '#d20f39',
+		rgb: 'rgb(210, 15, 57)',
+		hsl: 'hsl(347, 87%, 44%)',
+	},
+
+	maroon: {
+		hex: '#e64553',
+		rgb: 'rgb(230, 69, 83)',
+		hsl: 'hsl(355, 76%, 59%)',
+	},
+
+	peach: {
+		hex: '#fe640b',
+		rgb: 'rgb(254, 100, 11)',
+		hsl: '	hsl(22, 99%, 52%)',
+	},
+
+	yellow: {
+		hex: '#e49320',
+		rgb: 'rgb(228, 147, 32)',
+		hsl: 'hsl(35, 78%, 51%)',
+	},
+
+	green: {
+		hex: '#40a02b',
+		rgb: 'rgb(64, 160, 43)',
+		hsl: 'hsl(109, 58%, 40%)',
+	},
+
+	teal: {
+		hex: '#179299',
+		rgb: 'rgb(23, 146, 153)',
+		hsl: 'hsl(183, 74%, 35%)',
+	},
+
+	sky: {
+		hex: '#04a5e5',
+		rgb: 'rgb(4, 165, 229)',
+		hsl: 'hsl(197, 97%, 46%)',
+	},
+
+	sapphire: {
+		hex: '#209fb5',
+		rgb: 'rgb(32, 159, 181)',
+		hsl: 'hsl(189, 70%, 42%)',
+	},
+
+	blue: {
+		hex: '#2a6ef5',
+		rgb: 'rgb(42, 110, 245)',
+		hsl: 'hsl(220, 91%, 56%)',
+	},
+
+	lavender: {
+		hex: '#7287fd',
+		rgb: 'rgb(114, 135, 253)',
+		hsl: 'hsl(231, 97%, 72%)',
+	},
+
+	text: {
+		hex: '#4c4f69',
+		rgb: 'rgb(76, 79, 105)',
+		hsl: 'hsl(234, 16%, 35%)',
+	},
+
+	subtext1: {
+		hex: '#5c5f77',
+		rgb: 'rgb(92, 95, 119)',
+		hsl: 'hsl(233, 13%, 41%)',
+	},
+
+	subtext0: {
+		hex: '#6c6f85',
+		rgb: 'rgb(108, 111, 133)',
+		hsl: 'hsl(233, 10%, 47%)',
+	},
+
+	overlay2: {
+		hex: '#7c7f93',
+		rgb: 'rgb(124, 127, 147)',
+		hsl: 'hsl(232, 10%, 53%)',
+	},
+
+	overlay1: {
+		hex: '#8c8fa1',
+		rgb: 'rgb(140, 143, 161)',
+		hsl: 'hsl(231, 10%, 59%)',
+	},
+
+	overlay0: {
+		hex: '#9ca0b0',
+		rgb: 'rgb(156, 160, 176)',
+		hsl: 'hsl(228, 11%, 65%)',
+	},
+
+	surface2: {
+		hex: '#acb0be',
+		rgb: 'rgb(172, 176, 190)',
+		hsl: 'hsl(227, 12%, 71%)',
+	},
+
+	surface1: {
+		hex: '#bcc0cc',
+		rgb: 'rgb(188, 192, 204)',
+		hsl: 'hsl(225, 14%, 77%)',
+	},
+
+	surface0: {
+		hex: '#ccd0da',
+		rgb: 'rgb(204, 208, 218)',
+		hsl: 'hsl(223, 16%, 83%)',
+	},
+
+	crust: {
+		hex: '#dce0e8',
+		rgb: 'rgb(220, 224, 232)',
+		hsl: 'hsl(220, 21%, 89%)',
+	},
+
+	mantle: {
+		hex: '#e6e9ef',
+		rgb: 'rgb(230, 233, 239)',
+		hsl: 'hsl(220, 22%, 92%)',
+	},
+
+	base: {
+		hex: '#eff1f5',
+		rgb: 'rgb(239, 241, 245)',
+		hsl: 'hsl(220, 23%, 95%)',
+	},
+}
+
+const frappe = {
+	rosewater: {
+		hex: '#f2d5cf',
+		rgb: 'rgb(242, 213, 207)',
+		hsl: 'hsl(10, 57%, 88%)',
+	},
+
+	flamingo: {
+		hex: '#eebebe',
+		rgb: 'rgb(238, 190, 190)',
+		hsl: 'hsl(0, 59%, 84%)',
+	},
+
+	pink: {
+		hex: '#f4b8e4',
+		rgb: 'rgb(244, 184, 228)',
+		hsl: 'hsl(316, 73%, 84%)',
+	},
+
+	mauve: {
+		hex: '#ca9ee6',
+		rgb: 'rgb(202, 158, 230)',
+		hsl: 'hsl(277, 59%, 76%)',
+	},
+
+	red: {
+		hex: '#e78284',
+		rgb: 'rgb(231, 130, 132)',
+		hsl: 'hsl(359, 68%, 71%)',
+	},
+
+	maroon: {
+		hex: '#ea999c',
+		rgb: 'rgb(234, 153, 156)',
+		hsl: 'hsl(358, 66%, 76%)',
+	},
+
+	peach: {
+		hex: '#ef9f76',
+		rgb: 'rgb(239, 159, 118)',
+		hsl: 'hsl(20, 79%, 70%)',
+	},
+
+	yellow: {
+		hex: '#e5c890',
+		rgb: 'rgb(229, 200, 144)',
+		hsl: 'hsl(40, 62%, 73%)',
+	},
+
+	green: {
+		hex: '#a6d189',
+		rgb: 'rgb(166, 209, 137)',
+		hsl: 'hsl(96, 44%, 68%)',
+	},
+
+	teal: {
+		hex: '#81c8be',
+		rgb: 'rgb(129, 200, 190)',
+		hsl: 'hsl(172, 39%, 65%)',
+	},
+
+	sky: {
+		hex: '#99d1db',
+		rgb: 'rgb(153, 209, 219)',
+		hsl: 'hsl(189, 48%, 73%)',
+	},
+
+	sapphire: {
+		hex: '#85c1dc',
+		rgb: 'rgb(133, 193, 220)',
+		hsl: 'hsl(199, 55%, 69%)',
+	},
+
+	blue: {
+		hex: '#8caaee',
+		rgb: 'rgb(140, 170, 238)',
+		hsl: 'hsl(222, 74%, 74%)',
+	},
+
+	lavender: {
+		hex: '#babbf1',
+		rgb: 'rgb(186, 187, 241)',
+		hsl: 'hsl(239, 66%, 84%)',
+	},
+
+	text: {
+		hex: '#c6ceef',
+		rgb: 'rgb(198, 206, 239)',
+		hsl: 'hsl(228, 56%, 86%)',
+	},
+
+	subtext1: {
+		hex: '#b5bddc',
+		rgb: 'rgb(181, 189, 220)',
+		hsl: 'hsl(228, 36%, 79%)',
+	},
+
+	subtext0: {
+		hex: '#a5acc9',
+		rgb: 'rgb(165, 172, 201)',
+		hsl: 'hsl(228, 25%, 72%)',
+	},
+
+	overlay2: {
+		hex: '#949bb7',
+		rgb: 'rgb(148, 155, 183)',
+		hsl: 'hsl(228, 20%, 65%)',
+	},
+
+	overlay1: {
+		hex: '#838aa4',
+		rgb: 'rgb(131, 138, 164)',
+		hsl: 'hsl(227, 15%, 58%)',
+	},
+
+	overlay0: {
+		hex: '#737891',
+		rgb: 'rgb(115, 120, 145)',
+		hsl: 'hsl(230, 12%, 51%)',
+	},
+
+	surface2: {
+		hex: '#62677e',
+		rgb: 'rgb(98, 103, 126)',
+		hsl: 'hsl(229, 13%, 44%)',
+	},
+
+	surface1: {
+		hex: '#51566c',
+		rgb: 'rgb(81, 86, 108)',
+		hsl: 'hsl(229, 14%, 37%)',
+	},
+
+	surface0: {
+		hex: '#414559',
+		rgb: 'rgb(65, 69, 89)',
+		hsl: 'hsl(230, 16%, 30%)',
+	},
+
+	base: {
+		hex: '#303446',
+		rgb: 'rgb(48, 52, 70)',
+		hsl: 'hsl(229, 19%, 23%)',
+	},
+
+	mantle: {
+		hex: '#292c3c',
+		rgb: 'rgb(41, 44, 60)',
+		hsl: 'hsl(231, 19%, 20%)',
+	},
+
+	crust: {
+		hex: '#232634',
+		rgb: 'rgb(35, 38, 52)',
+		hsl: 'hsl(229, 20%, 17%)',
+	},
+}
+
+const macchiato = {
+	rosewater: {
+		hex: '#f4dbd6',
+		rgb: 'rgb(244, 219, 214)',
+		hsl: 'hsl(10, 58%, 90%)',
+	},
+
+	flamingo: {
+		hex: '#f0c6c6',
+		rgb: 'rgb(240, 198, 198)',
+		hsl: 'hsl(0, 58%, 86%)',
+	},
+
+	pink: {
+		hex: '#f5bde6',
+		rgb: 'rgb(245, 189, 230)',
+		hsl: 'hsl(316, 74%, 85%)',
+	},
+
+	mauve: {
+		hex: '#c6a0f6',
+		rgb: 'rgb(198, 160, 246)',
+		hsl: 'hsl(267, 83%, 80%)',
+	},
+
+	red: {
+		hex: '#ed8796',
+		rgb: 'rgb(237, 135, 150)',
+		hsl: 'hsl(351, 74%, 73%)',
+	},
+
+	maroon: {
+		hex: '#ee99a0',
+		rgb: 'rgb(238, 153, 160)',
+		hsl: 'hsl(355, 71%, 77%)',
+	},
+
+	peach: {
+		hex: '#f5a97f',
+		rgb: 'rgb(245, 169, 127)',
+		hsl: 'hsl(21, 86%, 73%)',
+	},
+
+	yellow: {
+		hex: '#eed49f',
+		rgb: 'rgb(238, 212, 159)',
+		hsl: 'hsl(40, 70%, 78%)',
+	},
+
+	green: {
+		hex: '#a6da95',
+		rgb: 'rgb(166, 218, 149)',
+		hsl: 'hsl(105, 48%, 72%)',
+	},
+
+	teal: {
+		hex: '#8bd5ca',
+		rgb: 'rgb(139, 213, 202)',
+		hsl: 'hsl(171, 47%, 69%)',
+	},
+
+	sky: {
+		hex: '#91d7e3',
+		rgb: 'rgb(145, 215, 227)',
+		hsl: 'hsl(189, 59%, 73%)',
+	},
+
+	sapphire: {
+		hex: '#7dc4e4',
+		rgb: 'rgb(125, 196, 228)',
+		hsl: 'hsl(199, 66%, 69%)',
+	},
+
+	blue: {
+		hex: '#8aadf4',
+		rgb: 'rgb(138, 173, 244)',
+		hsl: 'hsl(220, 83%, 75%)',
+	},
+
+	lavender: {
+		hex: '#b7bdf8',
+		rgb: 'rgb(183, 189, 248)',
+		hsl: 'hsl(234, 82%, 85%)',
+	},
+
+	text: {
+		hex: '#c5cff5',
+		rgb: 'rgb(197, 207, 245)',
+		hsl: 'hsl(228, 71%, 87%)',
+	},
+
+	subtext1: {
+		hex: '#b3bce0',
+		rgb: 'rgb(179, 188, 224)',
+		hsl: 'hsl(228, 42%, 79%)',
+	},
+
+	subtext0: {
+		hex: '#a1aacb',
+		rgb: 'rgb(161, 170, 203)',
+		hsl: 'hsl(227, 29%, 71%)',
+	},
+
+	overlay2: {
+		hex: '#8f97b7',
+		rgb: 'rgb(143, 151, 183)',
+		hsl: 'hsl(228, 22%, 64%)',
+	},
+
+	overlay1: {
+		hex: '#7d84a2',
+		rgb: 'rgb(125, 132, 162)',
+		hsl: 'hsl(229, 17%, 56%)',
+	},
+
+	overlay0: {
+		hex: '#6c728d',
+		rgb: 'rgb(108, 114, 141)',
+		hsl: 'hsl(229, 13%, 49%)',
+	},
+
+	surface2: {
+		hex: '#5a5f78',
+		rgb: 'rgb(90, 95, 120)',
+		hsl: 'hsl(230, 14%, 41%)',
+	},
+
+	surface1: {
+		hex: '#484c64',
+		rgb: 'rgb(72, 76, 100)',
+		hsl: 'hsl(231, 16%, 34%)',
+	},
+
+	surface0: {
+		hex: '#363a4f',
+		rgb: 'rgb(54, 58, 79)',
+		hsl: 'hsl(230, 19%, 26%)',
+	},
+
+	base: {
+		hex: '#24273a',
+		rgb: 'rgb(36, 39, 58)',
+		hsl: 'hsl(232, 23%, 18%)',
+	},
+
+	mantle: {
+		hex: '#1e2030',
+		rgb: 'rgb(30, 32, 48)',
+		hsl: 'hsl(233, 23%, 15%)',
+	},
+
+	crust: {
+		hex: '#181926',
+		rgb: 'rgb(24, 25, 38)',
+		hsl: 'hsl(236, 23%, 12%)',
+	},
+}
+
+const mocha = {
+	rosewater: {
+		hex: '#f5e0dc',
+		rgb: 'rgb(245, 224, 220)',
+		hsl: 'hsl(10, 56%, 91%)',
+	},
+
+	flamingo: {
+		hex: '#f2cdcd',
+		rgb: 'rgb(242, 205, 205)',
+		hsl: 'hsl(0, 59%, 88%)',
+	},
+
+	pink: {
+		hex: '#f5c2e7',
+		rgb: 'rgb(245, 194, 231)',
+		hsl: 'hsl(316, 72%, 86%)',
+	},
+
+	mauve: {
+		hex: '#cba6f7',
+		rgb: 'rgb(203, 166, 247)',
+		hsl: 'hsl(267, 84%, 81%)',
+	},
+
+	red: {
+		hex: '#f38ba8',
+		rgb: 'rgb(243, 139, 168)',
+		hsl: 'hsl(343, 81%, 75%)',
+	},
+
+	maroon: {
+		hex: '#eba0ac',
+		rgb: 'rgb(235, 160, 172)',
+		hsl: 'hsl(350, 65%, 77%)',
+	},
+
+	peach: {
+		hex: '#fab387',
+		rgb: 'rgb(250, 179, 135)',
+		hsl: 'hsl(23, 92%, 75%)',
+	},
+
+	yellow: {
+		hex: '#f9e2af',
+		rgb: 'rgb(249, 226, 175)',
+		hsl: 'hsl(41, 86%, 83%)',
+	},
+
+	green: {
+		hex: '#a6e3a1',
+		rgb: 'rgb(166, 227, 161)',
+		hsl: 'hsl(115, 54%, 76%)',
+	},
+
+	teal: {
+		hex: '#94e2d5',
+		rgb: 'rgb(148, 226, 213)',
+		hsl: 'hsl(170, 57%, 73%)',
+	},
+
+	sky: {
+		hex: '#89dceb',
+		rgb: 'rgb(137, 220, 235)',
+		hsl: 'hsl(189, 71%, 73%)',
+	},
+
+	sapphire: {
+		hex: '#74c7ec',
+		rgb: 'rgb(116, 199, 236)',
+		hsl: 'hsl(199, 76%, 69%)',
+	},
+
+	blue: {
+		hex: '#87b0f9',
+		rgb: 'rgb(135, 176, 249)',
+		hsl: 'hsl(218, 90%, 75%)',
+	},
+
+	lavender: {
+		hex: '#b4befe',
+		rgb: 'rgb(180, 190, 254)',
+		hsl: 'hsl(232, 97%, 85%)',
+	},
+
+	text: {
+		hex: '#c6d0f5',
+		rgb: 'rgb(198, 208, 245)',
+		hsl: 'hsl(227, 70%, 87%)',
+	},
+
+	subtext1: {
+		hex: '#b3bcdf',
+		rgb: 'rgb(179, 188, 223)',
+		hsl: 'hsl(228, 41%, 79%)',
+	},
+
+	subtext0: {
+		hex: '#a1a8c9',
+		rgb: 'rgb(161, 168, 201)',
+		hsl: 'hsl(229, 27%, 71%)',
+	},
+
+	overlay2: {
+		hex: '#8e95b3',
+		rgb: 'rgb(142, 149, 179)',
+		hsl: 'hsl(229, 20%, 63%)',
+	},
+
+	overlay1: {
+		hex: '#7b819d',
+		rgb: 'rgb(123, 129, 157)',
+		hsl: 'hsl(229, 15%, 55%)',
+	},
+
+	overlay0: {
+		hex: '#696d86',
+		rgb: 'rgb(105, 109, 134)',
+		hsl: 'hsl(232, 12%, 47%)',
+	},
+
+	surface2: {
+		hex: '#565970',
+		rgb: 'rgb(86, 89, 112)',
+		hsl: 'hsl(233, 13%, 39%)',
+	},
+
+	surface1: {
+		hex: '#43465a',
+		rgb: 'rgb(67, 70, 90)',
+		hsl: 'hsl(232, 15%, 31%)',
+	},
+
+	surface0: {
+		hex: '#313244',
+		rgb: 'rgb(49, 50, 68)',
+		hsl: 'hsl(237, 16%, 23%)',
+	},
+
+	base: {
+		hex: '#1e1e2e',
+		rgb: 'rgb(30, 30, 46)',
+		hsl: 'hsl(240, 21%, 15%)',
+	},
+
+	mantle: {
+		hex: '#181825',
+		rgb: 'rgb(24, 24, 37)',
+		hsl: 'hsl(240, 21%, 12%)',
+	},
+
+	crust: {
+		hex: '#11111b',
+		rgb: 'rgb(17, 17, 27)',
+		hsl: 'hsl(240, 23%, 9%)',
+	},
+}
+
+const palettes = {
+	variants: {
+		latte,
+		frappe,
+		macchiato,
+		mocha,
+	},
+	labels: {
+		rosewater: {
+			latte: latte.rosewater,
+			frappe: frappe.rosewater,
+			macchiato: macchiato.rosewater,
+			mocha: mocha.rosewater,
+		},
+
+		flamingo: {
+			latte: latte.flamingo,
+			frappe: frappe.flamingo,
+			macchiato: macchiato.flamingo,
+			mocha: mocha.flamingo,
+		},
+
+		pink: {
+			latte: latte.pink,
+			frappe: frappe.pink,
+			macchiato: macchiato.pink,
+			mocha: mocha.pink,
+		},
+
+		mauve: {
+			latte: latte.mauve,
+			frappe: frappe.mauve,
+			macchiato: macchiato.mauve,
+			mocha: mocha.mauve,
+		},
+
+		red: {
+			latte: latte.red,
+			frappe: frappe.red,
+			macchiato: macchiato.red,
+			mocha: mocha.red,
+		},
+
+		maroon: {
+			latte: latte.maroon,
+			frappe: frappe.maroon,
+			macchiato: macchiato.maroon,
+			mocha: mocha.maroon,
+		},
+
+		peach: {
+			latte: latte.peach,
+			frappe: frappe.peach,
+			macchiato: macchiato.peach,
+			mocha: mocha.peach,
+		},
+
+		yellow: {
+			latte: latte.yellow,
+			frappe: frappe.yellow,
+			macchiato: macchiato.yellow,
+			mocha: mocha.yellow,
+		},
+
+		green: {
+			latte: latte.green,
+			frappe: frappe.green,
+			macchiato: macchiato.green,
+			mocha: mocha.green,
+		},
+
+		teal: {
+			latte: latte.teal,
+			frappe: frappe.teal,
+			macchiato: macchiato.teal,
+			mocha: mocha.teal,
+		},
+
+		sky: {
+			latte: latte.sky,
+			frappe: frappe.sky,
+			macchiato: macchiato.sky,
+			mocha: mocha.sky,
+		},
+
+		sapphire: {
+			latte: latte.sapphire,
+			frappe: frappe.sapphire,
+			macchiato: macchiato.sapphire,
+			mocha: mocha.sapphire,
+		},
+
+		blue: {
+			latte: latte.blue,
+			frappe: frappe.blue,
+			macchiato: macchiato.blue,
+			mocha: mocha.blue,
+		},
+
+		lavender: {
+			latte: latte.lavender,
+			frappe: frappe.lavender,
+			macchiato: macchiato.lavender,
+			mocha: mocha.lavender,
+		},
+
+		text: {
+			latte: latte.text,
+			frappe: frappe.text,
+			macchiato: macchiato.text,
+			mocha: mocha.text,
+		},
+
+		subtext1: {
+			latte: latte.subtext1,
+			frappe: frappe.subtext1,
+			macchiato: macchiato.subtext1,
+			mocha: mocha.subtext1,
+		},
+
+		subtext0: {
+			latte: latte.subtext0,
+			frappe: frappe.subtext0,
+			macchiato: macchiato.subtext0,
+			mocha: mocha.subtext0,
+		},
+
+		overlay2: {
+			latte: latte.overlay2,
+			frappe: frappe.overlay2,
+			macchiato: macchiato.overlay2,
+			mocha: mocha.overlay2,
+		},
+
+		overlay1: {
+			latte: latte.overlay1,
+			frappe: frappe.overlay1,
+			macchiato: macchiato.overlay1,
+			mocha: mocha.overlay1,
+		},
+
+		overlay0: {
+			latte: latte.overlay0,
+			frappe: frappe.overlay0,
+			macchiato: macchiato.overlay0,
+			mocha: mocha.overlay0,
+		},
+
+		surface2: {
+			latte: latte.surface2,
+			frappe: frappe.surface2,
+			macchiato: macchiato.surface2,
+			mocha: mocha.surface2,
+		},
+
+		surface1: {
+			latte: latte.surface1,
+			frappe: frappe.surface1,
+			macchiato: macchiato.surface1,
+			mocha: mocha.surface1,
+		},
+
+		surface0: {
+			latte: latte.surface0,
+			frappe: frappe.surface0,
+			macchiato: macchiato.surface0,
+			mocha: mocha.surface0,
+		},
+
+		base: {
+			latte: latte.base,
+			frappe: frappe.base,
+			macchiato: macchiato.base,
+			mocha: mocha.base,
+		},
+
+		mantle: {
+			latte: latte.mantle,
+			frappe: frappe.mantle,
+			macchiato: macchiato.mantle,
+			mocha: mocha.mantle,
+		},
+
+		crust: {
+			latte: latte.crust,
+			frappe: frappe.crust,
+			macchiato: macchiato.crust,
+			mocha: mocha.crust,
+		},
+	},
+}
+
+export const {variants, labels} = palettes
+export default palettes
diff --git a/Catppuccin.kpl b/kpl/Catppuccin.kpl
similarity index 100%
rename from Catppuccin.kpl
rename to kpl/Catppuccin.kpl
diff --git a/lib/builder.lua b/lib/builder.lua
new file mode 100644
index 0000000..c2c58f5
--- /dev/null
+++ b/lib/builder.lua
@@ -0,0 +1,71 @@
+local color_palette = {
+	rosewater = "#F5E0DC",
+	flamingo = "#F2CDCD",
+	pink = "#F5C2E7",
+	mauve = "#CBA6F7",
+	red = "#F38BA8",
+	maroon = "#EBA0AC",
+	peach = "#FAB387",
+	yellow = "#F9E2AF",
+	green = "#A6E3A1",
+	teal = "#94E2D5",
+	sky = "#89DCEB",
+	blue = "#90C1FB",
+	sapphire = "#74C7EC",
+	lavender = "#B4BEFE",
+	text = "#C6D0F5",
+	overlay2 = "#AEB7D9",
+	overlay1 = "#969DBC",
+	overlay0 = "#7E84A0",
+	surface2 = "#666A83",
+	surface1 = "#4E5167",
+	surface0 = "#36374A",
+	base2 = "#1E1E2E",
+	base1 = "#12121C",
+	base0 = "#07070A",
+}
+
+-- https://stackoverflow.com/questions/24714253/how-to-loop-through-the-table-and-keep-the-order
+function sorted_iter(t)
+  local i = {}
+  for k in next, t do
+    table.insert(i, k)
+  end
+  table.sort(i)
+  return function()
+    local k = table.remove(i)
+    if k ~= nil then
+      return k, t[k]
+    end
+  end
+end
+
+local function hex2rgb(hex)
+    hex = hex:gsub("#","")
+    return tonumber("0x"..hex:sub(1,2)), tonumber("0x"..hex:sub(3,4)), tonumber("0x"..hex:sub(5,6))
+end
+
+local function rgb2hsl(r, g, b)
+    local max, min = math.max(r, g, b), math.min(r, g, b)
+    local b = max + min
+    local h = b / 2
+    if max == min then return 0, 0, h end
+    local s, l = h, h
+    local d = max - min
+    s = l > .5 and d / (2 - b) or d / b
+    if max == r then h = (g - b) / d + (g < b and 6 or 0)
+    elseif max == g then h = (b - r) / d + 2
+    elseif max == b then h = (r - g) / d + 4
+    end
+    return h * .16667, s, l
+end
+
+for color in sorted_iter(color_palette) do
+	print(color..": {")
+	print("\thex: '" .. string.lower(color_palette[color]) .."',")
+	local r, g, b = hex2rgb(color_palette[color])
+	print("\trgb: 'rgb(" .. r .. ", " .. g .. ", ".. b .. ")',")
+	local h, s, l = rgb2hsl(r, g, b)
+	print("\thsl: '',")
+	print("},")
+end
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8835aa7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,39 @@
+{
+	"name": "@catppuccin/palette",
+	"version": "0.1.0",
+	"description": "Soothing pastel themes for the high-spirited!",
+	"main": "index.js",
+	"type": "module",
+	"exports": "./index.js",
+	"scripts": {
+		"test": "ava"
+	},
+	"files": [
+		"css/",
+		"index.js"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/catppuccin/palette.git"
+	},
+	"keywords": [
+		"pastel-colors",
+		"catppuccin",
+		"colors",
+		"theme",
+		"palette",
+		"soothing"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"author": "Catppuccin Org",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/catppuccin/palette/issues"
+	},
+	"homepage": "https://github.com/catppuccin/palette#readme",
+	"devDependencies": {
+		"ava": "^4.2.0"
+	}
+}
diff --git a/Catppuccin.scss b/scss/Catppuccin.scss
similarity index 100%
rename from Catppuccin.scss
rename to scss/Catppuccin.scss
diff --git a/test.js b/test.js
new file mode 100644
index 0000000..9d6eb60
--- /dev/null
+++ b/test.js
@@ -0,0 +1,35 @@
+import test from 'ava'
+import {variants, labels} from './index.js'
+
+test('Labels', (t) => {
+	t.deepEqual(labels.base, {
+		latte: {
+			hex: '#eff1f5',
+			rgb: 'rgb(239, 241, 245)',
+			hsl: 'hsl(220, 23%, 95%)',
+		},
+		frappe: {
+			hex: '#303446',
+			rgb: 'rgb(48, 52, 70)',
+			hsl: 'hsl(229, 19%, 23%)',
+		},
+		macchiato: {
+			hex: '#24273a',
+			rgb: 'rgb(36, 39, 58)',
+			hsl: 'hsl(232, 23%, 18%)',
+		},
+		mocha: {
+			hex: '#1e1e2e',
+			rgb: 'rgb(30, 30, 46)',
+			hsl: 'hsl(240, 21%, 15%)',
+		},
+	})
+})
+
+test('Variants', (t) => {
+	t.deepEqual(variants.macchiato.rosewater, {
+		hex: '#f4dbd6',
+		rgb: 'rgb(244, 219, 214)',
+		hsl: 'hsl(10, 58%, 90%)',
+	})
+})