feat: node package + reorganized everything
This commit is contained in:
Pocco81
parent
b1df09b021
commit
d81ae318f4
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules/
|
||||
|
|
@ -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));
|
||||
|
||||
}
|
||||
|
Before Width: | Height: | Size: 254 B After Width: | Height: | Size: 254 B |
314
css/catppuccin.css
Normal file
314
css/catppuccin.css
Normal file
|
|
@ -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%);
|
||||
}
|
||||
9
css_builder.js
Normal file
9
css_builder.js
Normal file
|
|
@ -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"] + ";")
|
||||
}
|
||||
}
|
||||
828
index.js
Normal file
828
index.js
Normal file
|
|
@ -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
|
||||
71
lib/builder.lua
Normal file
71
lib/builder.lua
Normal file
|
|
@ -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
|
||||
39
package.json
Normal file
39
package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
35
test.js
Normal file
35
test.js
Normal file
|
|
@ -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%)',
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue