v0.1.0 build tool and themes, not on npm yet
This commit is contained in:
Ava Gaiety W
parent
26d803ec91
commit
e6d587637b
19 changed files with 564 additions and 2 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/node_modules
|
||||||
1
.tool-versions
Normal file
1
.tool-versions
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
node 22.16.0
|
||||||
5
CONTRIBUTING.md
Normal file
5
CONTRIBUTING.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Contributing
|
||||||
|
|
||||||
|
1. Clone this repository
|
||||||
|
2. Install NodeJS (tip, `.tool-versions` exists for [mise](https://mise.jdx.dev) `mise install` or [asdf](https://asdf-vm.com) support)
|
||||||
|
3. `npm run build` or `npm run build customprefix` to add a prefix for output CSS, ex: `--customprefix-text`
|
||||||
51
README.md
51
README.md
|
|
@ -1,3 +1,50 @@
|
||||||
# catppuccin-css
|
<h3 align="center">
|
||||||
|
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Catppuccin logo of a smiling black cat with a bowtie over a striped rainbow of pastel colors"/><br/>
|
||||||
|
|
||||||
|
</h3>
|
||||||
|
|
||||||
💨 Soothing pastel theme for CSS
|
_Note: Using [TailwindCSS](https://tailwindcss.com/) in your project? Check out [@catppuccin/tailwindcss](https://github.com/catppuccin/tailwindcss)._
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
1. Copy the theme files from this repository:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# There are .hex, .rgb, and .hsl options. When in doubt, .hex is simplest but less flexible in some cases
|
||||||
|
wget -P ./ https://git.basking.monster/gaiety/catppuccin-css/raw/branch/main/themes/Catppuccin-Frappé.hex.css
|
||||||
|
wget -P ./ https://git.basking.monster/gaiety/catppuccin-css/raw/branch/main/themes/Catppuccin-Latte.hex.css
|
||||||
|
wget -P ./ https://git.basking.monster/gaiety/catppuccin-css/raw/branch/main/themes/Catppuccin-Macchiato.hex.css
|
||||||
|
wget -P ./ https://git.basking.monster/gaiety/catppuccin-css/raw/branch/main/themes/Catppuccin-Mocha.hex.css
|
||||||
|
```
|
||||||
|
|
||||||
|
...or install with NPM and import from the module
|
||||||
|
|
||||||
|
2. Import it in your CSS
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* if installing from NPM, url may look something like "./node_modules/@catppuccin/css/themes/Catppuccin-Frappé.hex.css" */
|
||||||
|
@import url("./Catppuccin-Frappé.hex.css");
|
||||||
|
@import url("./Catppuccin-Mocha.hex.css") (prefers-color-scheme: dark);
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Use it in your styles!
|
||||||
|
|
||||||
|
```css
|
||||||
|
body {
|
||||||
|
/* If using RGB or HSL options, wrap var in the appropriate CSS wrapper, ex: rgba(var(--overlay-2, 0.5)) */
|
||||||
|
color: var(--text);
|
||||||
|
background-color: var(--mantle);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
See [CONTRIBUTING.md](./CONTRIBUTING.md) and thanks for the interest!
|
||||||
|
|
||||||
|
_Bonus:_ Customizing an optional CSS variable prefix is available.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<p align="center"><img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" /></p>
|
||||||
|
<p align="center">Copyright © 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
|
||||||
|
<p align="center"><a href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE"><img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=363a4f&colorB=b7bdf8"/></a></p>
|
||||||
|
|
|
||||||
64
index.js
Normal file
64
index.js
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
const { flavors, version: versionPalette } = require('@catppuccin/palette')
|
||||||
|
const { version: versionPackage } = require('./package.json')
|
||||||
|
const fs = require('node:fs/promises');
|
||||||
|
|
||||||
|
const [PREFIX = ''] = process.argv.slice(2)
|
||||||
|
|
||||||
|
const INDENTATION = ' '
|
||||||
|
const COLOR_TYPE_HEX = 'hex'
|
||||||
|
const COLOR_TYPE_RGB = 'rgb'
|
||||||
|
const COLOR_TYPE_HSL = 'hsl'
|
||||||
|
const COLOR_TYPES = [COLOR_TYPE_HEX, COLOR_TYPE_RGB, COLOR_TYPE_HSL]
|
||||||
|
|
||||||
|
console.log('Generating ./theme CSS files from Catppuccin palette', versionPalette)
|
||||||
|
|
||||||
|
COLOR_TYPES.forEach(color_type => {
|
||||||
|
console.log('Generating color type', color_type)
|
||||||
|
for (const flavorKey in flavors) {
|
||||||
|
const { emoji, colors, name } = flavors[flavorKey]
|
||||||
|
create_theme(name, color_type, parse_theme(color_type, colors, name, emoji))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function parse_theme(color_type, colors, name, emoji) {
|
||||||
|
return `/*
|
||||||
|
Catppuccin CSS Theme v${versionPackage} ${color_type.toUpperCase()} from palette v${versionPalette}
|
||||||
|
${emoji} ${name}
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
${cssClasses(colors, color_type)}
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
|
||||||
|
async function create_theme(name, color_type, output) {
|
||||||
|
try {
|
||||||
|
await fs.writeFile(`./themes/Catppuccin-${name}.${color_type}.css`, output)
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function cssClasses(colors, color_type) {
|
||||||
|
const LINE_BREAK = '\n'
|
||||||
|
let result = []
|
||||||
|
for (const colorKey in colors) {
|
||||||
|
result.push(cssClass(colors[colorKey].name, colors[colorKey][color_type], color_type))
|
||||||
|
}
|
||||||
|
return result.join(LINE_BREAK)
|
||||||
|
}
|
||||||
|
|
||||||
|
function cssClass(name, color, color_type) {
|
||||||
|
return `${INDENTATION}--${PREFIX.length > 0 ? PREFIX + '-' : ''}${name.toLowerCase()}: ${handle_color_type(color, color_type)};`
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle_color_type(color, color_type) {
|
||||||
|
switch (color_type) {
|
||||||
|
case COLOR_TYPE_RGB:
|
||||||
|
const { r, g, b } = color
|
||||||
|
return `rgb(${r}, ${g}, ${b})`
|
||||||
|
case COLOR_TYPE_HSL:
|
||||||
|
const { h, s, l } = color
|
||||||
|
return `hsl(${h}, ${s}, ${l})`
|
||||||
|
}
|
||||||
|
return color
|
||||||
|
}
|
||||||
33
package-lock.json
generated
Normal file
33
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
{
|
||||||
|
"name": "@catppuccin/css",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "@catppuccin/css",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@catppuccin/palette": "^1.7.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@catppuccin/palette": {
|
||||||
|
"version": "1.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@catppuccin/palette/-/palette-1.7.1.tgz",
|
||||||
|
"integrity": "sha512-aRc1tbzrevOTV7nFTT9SRdF26w/MIwT4Jwt4fDMc9itRZUDXCuEDBLyz4TQMlqO9ZP8mf5Hu4Jr6D03NLFc6Gw==",
|
||||||
|
"dev": true,
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/catppuccin"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/catppuccin"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "@catppuccin/css",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "Soothing pastel theme for CSS",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"build": "node ./index.js",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.basking.monster/gaiety/catppuccin-css"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"pastel-colors",
|
||||||
|
"catppuccin",
|
||||||
|
"colors",
|
||||||
|
"theme",
|
||||||
|
"soothing",
|
||||||
|
"css"
|
||||||
|
],
|
||||||
|
"author": "Gaiety <ava@wroten.me>",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@catppuccin/palette": "^1.7.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Frappé.hex.css
Normal file
32
themes/Catppuccin-Frappé.hex.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 HEX from palette v1.7.1
|
||||||
|
🪴 Frappé
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: #f2d5cf;
|
||||||
|
--flamingo: #eebebe;
|
||||||
|
--pink: #f4b8e4;
|
||||||
|
--mauve: #ca9ee6;
|
||||||
|
--red: #e78284;
|
||||||
|
--maroon: #ea999c;
|
||||||
|
--peach: #ef9f76;
|
||||||
|
--yellow: #e5c890;
|
||||||
|
--green: #a6d189;
|
||||||
|
--teal: #81c8be;
|
||||||
|
--sky: #99d1db;
|
||||||
|
--sapphire: #85c1dc;
|
||||||
|
--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;
|
||||||
|
--base: #303446;
|
||||||
|
--mantle: #292c3c;
|
||||||
|
--crust: #232634;
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Frappé.hsl.css
Normal file
32
themes/Catppuccin-Frappé.hsl.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 HSL from palette v1.7.1
|
||||||
|
🪴 Frappé
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: hsl(10.2857142857143, 0.5737704918032784, 0.8803921568627451);
|
||||||
|
--flamingo: hsl(0, 0.5853658536585367, 0.8392156862745098);
|
||||||
|
--pink: hsl(316, 0.7317073170731713, 0.8392156862745098);
|
||||||
|
--mauve: hsl(276.66666666666663, 0.5901639344262294, 0.7607843137254902);
|
||||||
|
--red: hsl(358.8118811881188, 0.6778523489932885, 0.7078431372549019);
|
||||||
|
--maroon: hsl(357.77777777777777, 0.6585365853658534, 0.7588235294117647);
|
||||||
|
--peach: hsl(20.33057851239669, 0.7908496732026143, 0.7);
|
||||||
|
--yellow: hsl(39.52941176470588, 0.6204379562043796, 0.7313725490196079);
|
||||||
|
--green: hsl(95.83333333333331, 0.4390243902439024, 0.6784313725490196);
|
||||||
|
--teal: hsl(171.5492957746479, 0.3922651933701657, 0.6450980392156862);
|
||||||
|
--sky: hsl(189.09090909090907, 0.47826086956521735, 0.7294117647058823);
|
||||||
|
--sapphire: hsl(198.62068965517244, 0.5541401273885351, 0.692156862745098);
|
||||||
|
--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);
|
||||||
|
--base: hsl(229.0909090909091, 0.18644067796610175, 0.23137254901960785);
|
||||||
|
--mantle: hsl(230.52631578947367, 0.18811881188118806, 0.19803921568627453);
|
||||||
|
--crust: hsl(229.41176470588238, 0.19540229885057467, 0.17058823529411765);
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Frappé.rgb.css
Normal file
32
themes/Catppuccin-Frappé.rgb.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 RGB from palette v1.7.1
|
||||||
|
🪴 Frappé
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: rgb(242, 213, 207);
|
||||||
|
--flamingo: rgb(238, 190, 190);
|
||||||
|
--pink: rgb(244, 184, 228);
|
||||||
|
--mauve: rgb(202, 158, 230);
|
||||||
|
--red: rgb(231, 130, 132);
|
||||||
|
--maroon: rgb(234, 153, 156);
|
||||||
|
--peach: rgb(239, 159, 118);
|
||||||
|
--yellow: rgb(229, 200, 144);
|
||||||
|
--green: rgb(166, 209, 137);
|
||||||
|
--teal: rgb(129, 200, 190);
|
||||||
|
--sky: rgb(153, 209, 219);
|
||||||
|
--sapphire: rgb(133, 193, 220);
|
||||||
|
--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);
|
||||||
|
--base: rgb(48, 52, 70);
|
||||||
|
--mantle: rgb(41, 44, 60);
|
||||||
|
--crust: rgb(35, 38, 52);
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Latte.hex.css
Normal file
32
themes/Catppuccin-Latte.hex.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 HEX from palette v1.7.1
|
||||||
|
🌻 Latte
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: #dc8a78;
|
||||||
|
--flamingo: #dd7878;
|
||||||
|
--pink: #ea76cb;
|
||||||
|
--mauve: #8839ef;
|
||||||
|
--red: #d20f39;
|
||||||
|
--maroon: #e64553;
|
||||||
|
--peach: #fe640b;
|
||||||
|
--yellow: #df8e1d;
|
||||||
|
--green: #40a02b;
|
||||||
|
--teal: #179299;
|
||||||
|
--sky: #04a5e5;
|
||||||
|
--sapphire: #209fb5;
|
||||||
|
--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;
|
||||||
|
--base: #eff1f5;
|
||||||
|
--mantle: #e6e9ef;
|
||||||
|
--crust: #dce0e8;
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Latte.hsl.css
Normal file
32
themes/Catppuccin-Latte.hsl.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 HSL from palette v1.7.1
|
||||||
|
🌻 Latte
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: hsl(10.799999999999995, 0.5882352941176472, 0.6666666666666667);
|
||||||
|
--flamingo: hsl(0, 0.5976331360946746, 0.6686274509803922);
|
||||||
|
--pink: hsl(316.0344827586207, 0.7341772151898731, 0.6901960784313725);
|
||||||
|
--mauve: hsl(266.0439560439561, 0.8504672897196262, 0.5803921568627451);
|
||||||
|
--red: hsl(347.0769230769231, 0.8666666666666666, 0.4411764705882353);
|
||||||
|
--maroon: hsl(354.78260869565213, 0.76303317535545, 0.5862745098039216);
|
||||||
|
--peach: hsl(21.975308641975307, 0.9918367346938776, 0.5196078431372549);
|
||||||
|
--yellow: hsl(34.948453608247426, 0.7698412698412698, 0.49411764705882355);
|
||||||
|
--green: hsl(109.23076923076923, 0.5763546798029556, 0.39803921568627454);
|
||||||
|
--teal: hsl(183.23076923076923, 0.7386363636363636, 0.34509803921568627);
|
||||||
|
--sky: hsl(197.0666666666667, 0.965665236051502, 0.45686274509803926);
|
||||||
|
--sapphire: hsl(188.85906040268458, 0.6995305164319249, 0.4176470588235294);
|
||||||
|
--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);
|
||||||
|
--base: hsl(220.00000000000009, 0.23076923076923136, 0.9490196078431372);
|
||||||
|
--mantle: hsl(220.00000000000006, 0.21951219512195116, 0.919607843137255);
|
||||||
|
--crust: hsl(220.00000000000006, 0.20689655172413762, 0.8862745098039215);
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Latte.rgb.css
Normal file
32
themes/Catppuccin-Latte.rgb.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 RGB from palette v1.7.1
|
||||||
|
🌻 Latte
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: rgb(220, 138, 120);
|
||||||
|
--flamingo: rgb(221, 120, 120);
|
||||||
|
--pink: rgb(234, 118, 203);
|
||||||
|
--mauve: rgb(136, 57, 239);
|
||||||
|
--red: rgb(210, 15, 57);
|
||||||
|
--maroon: rgb(230, 69, 83);
|
||||||
|
--peach: rgb(254, 100, 11);
|
||||||
|
--yellow: rgb(223, 142, 29);
|
||||||
|
--green: rgb(64, 160, 43);
|
||||||
|
--teal: rgb(23, 146, 153);
|
||||||
|
--sky: rgb(4, 165, 229);
|
||||||
|
--sapphire: rgb(32, 159, 181);
|
||||||
|
--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);
|
||||||
|
--base: rgb(239, 241, 245);
|
||||||
|
--mantle: rgb(230, 233, 239);
|
||||||
|
--crust: rgb(220, 224, 232);
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Macchiato.hex.css
Normal file
32
themes/Catppuccin-Macchiato.hex.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 HEX from palette v1.7.1
|
||||||
|
🌺 Macchiato
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: #f4dbd6;
|
||||||
|
--flamingo: #f0c6c6;
|
||||||
|
--pink: #f5bde6;
|
||||||
|
--mauve: #c6a0f6;
|
||||||
|
--red: #ed8796;
|
||||||
|
--maroon: #ee99a0;
|
||||||
|
--peach: #f5a97f;
|
||||||
|
--yellow: #eed49f;
|
||||||
|
--green: #a6da95;
|
||||||
|
--teal: #8bd5ca;
|
||||||
|
--sky: #91d7e3;
|
||||||
|
--sapphire: #7dc4e4;
|
||||||
|
--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;
|
||||||
|
--base: #24273a;
|
||||||
|
--mantle: #1e2030;
|
||||||
|
--crust: #181926;
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Macchiato.hsl.css
Normal file
32
themes/Catppuccin-Macchiato.hsl.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 HSL from palette v1.7.1
|
||||||
|
🌺 Macchiato
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: hsl(9.999999999999963, 0.5769230769230775, 0.8980392156862745);
|
||||||
|
--flamingo: hsl(0, 0.5833333333333333, 0.8588235294117648);
|
||||||
|
--pink: hsl(316.0714285714286, 0.7368421052631583, 0.8509803921568628);
|
||||||
|
--mauve: hsl(266.51162790697674, 0.8269230769230772, 0.7960784313725491);
|
||||||
|
--red: hsl(351.1764705882353, 0.7391304347826088, 0.7294117647058824);
|
||||||
|
--maroon: hsl(355.05882352941177, 0.7142857142857143, 0.7666666666666666);
|
||||||
|
--peach: hsl(21.355932203389827, 0.8550724637681162, 0.7294117647058824);
|
||||||
|
--yellow: hsl(40.253164556962034, 0.6991150442477877, 0.7784313725490196);
|
||||||
|
--green: hsl(105.21739130434783, 0.4825174825174825, 0.7196078431372549);
|
||||||
|
--teal: hsl(171.08108108108107, 0.46835443037974706, 0.6901960784313725);
|
||||||
|
--sky: hsl(188.78048780487802, 0.5942028985507245, 0.7294117647058823);
|
||||||
|
--sapphire: hsl(198.64077669902912, 0.6560509554140128, 0.692156862745098);
|
||||||
|
--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);
|
||||||
|
--base: hsl(231.8181818181818, 0.23404255319148934, 0.1843137254901961);
|
||||||
|
--mantle: hsl(233.33333333333334, 0.23076923076923075, 0.15294117647058825);
|
||||||
|
--crust: hsl(235.71428571428572, 0.22580645161290322, 0.12156862745098039);
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Macchiato.rgb.css
Normal file
32
themes/Catppuccin-Macchiato.rgb.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 RGB from palette v1.7.1
|
||||||
|
🌺 Macchiato
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: rgb(244, 219, 214);
|
||||||
|
--flamingo: rgb(240, 198, 198);
|
||||||
|
--pink: rgb(245, 189, 230);
|
||||||
|
--mauve: rgb(198, 160, 246);
|
||||||
|
--red: rgb(237, 135, 150);
|
||||||
|
--maroon: rgb(238, 153, 160);
|
||||||
|
--peach: rgb(245, 169, 127);
|
||||||
|
--yellow: rgb(238, 212, 159);
|
||||||
|
--green: rgb(166, 218, 149);
|
||||||
|
--teal: rgb(139, 213, 202);
|
||||||
|
--sky: rgb(145, 215, 227);
|
||||||
|
--sapphire: rgb(125, 196, 228);
|
||||||
|
--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);
|
||||||
|
--base: rgb(36, 39, 58);
|
||||||
|
--mantle: rgb(30, 32, 48);
|
||||||
|
--crust: rgb(24, 25, 38);
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Mocha.hex.css
Normal file
32
themes/Catppuccin-Mocha.hex.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 HEX from palette v1.7.1
|
||||||
|
🌿 Mocha
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: #f5e0dc;
|
||||||
|
--flamingo: #f2cdcd;
|
||||||
|
--pink: #f5c2e7;
|
||||||
|
--mauve: #cba6f7;
|
||||||
|
--red: #f38ba8;
|
||||||
|
--maroon: #eba0ac;
|
||||||
|
--peach: #fab387;
|
||||||
|
--yellow: #f9e2af;
|
||||||
|
--green: #a6e3a1;
|
||||||
|
--teal: #94e2d5;
|
||||||
|
--sky: #89dceb;
|
||||||
|
--sapphire: #74c7ec;
|
||||||
|
--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;
|
||||||
|
--base: #1e1e2e;
|
||||||
|
--mantle: #181825;
|
||||||
|
--crust: #11111b;
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Mocha.hsl.css
Normal file
32
themes/Catppuccin-Mocha.hsl.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 HSL from palette v1.7.1
|
||||||
|
🌿 Mocha
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: hsl(9.599999999999968, 0.555555555555556, 0.911764705882353);
|
||||||
|
--flamingo: hsl(0, 0.587301587301587, 0.8764705882352941);
|
||||||
|
--pink: hsl(316.4705882352941, 0.7183098591549301, 0.8607843137254902);
|
||||||
|
--mauve: hsl(267.4074074074074, 0.8350515463917528, 0.8098039215686275);
|
||||||
|
--red: hsl(343.2692307692308, 0.8124999999999998, 0.7490196078431373);
|
||||||
|
--maroon: hsl(350.4, 0.6521739130434779, 0.7745098039215685);
|
||||||
|
--peach: hsl(22.95652173913043, 0.92, 0.7549019607843137);
|
||||||
|
--yellow: hsl(41.35135135135135, 0.8604651162790699, 0.8313725490196078);
|
||||||
|
--green: hsl(115.45454545454544, 0.5409836065573769, 0.7607843137254902);
|
||||||
|
--teal: hsl(170.00000000000003, 0.5735294117647057, 0.7333333333333334);
|
||||||
|
--sky: hsl(189.18367346938774, 0.7101449275362316, 0.7294117647058823);
|
||||||
|
--sapphire: hsl(198.5, 0.759493670886076, 0.6901960784313725);
|
||||||
|
--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);
|
||||||
|
--base: hsl(240, 0.21052631578947367, 0.14901960784313725);
|
||||||
|
--mantle: hsl(240, 0.2131147540983607, 0.11960784313725491);
|
||||||
|
--crust: hsl(240, 0.22727272727272727, 0.08627450980392157);
|
||||||
|
}
|
||||||
32
themes/Catppuccin-Mocha.rgb.css
Normal file
32
themes/Catppuccin-Mocha.rgb.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*
|
||||||
|
Catppuccin CSS Theme v0.1.0 RGB from palette v1.7.1
|
||||||
|
🌿 Mocha
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--rosewater: rgb(245, 224, 220);
|
||||||
|
--flamingo: rgb(242, 205, 205);
|
||||||
|
--pink: rgb(245, 194, 231);
|
||||||
|
--mauve: rgb(203, 166, 247);
|
||||||
|
--red: rgb(243, 139, 168);
|
||||||
|
--maroon: rgb(235, 160, 172);
|
||||||
|
--peach: rgb(250, 179, 135);
|
||||||
|
--yellow: rgb(249, 226, 175);
|
||||||
|
--green: rgb(166, 227, 161);
|
||||||
|
--teal: rgb(148, 226, 213);
|
||||||
|
--sky: rgb(137, 220, 235);
|
||||||
|
--sapphire: rgb(116, 199, 236);
|
||||||
|
--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);
|
||||||
|
--base: rgb(30, 30, 46);
|
||||||
|
--mantle: rgb(24, 24, 37);
|
||||||
|
--crust: rgb(17, 17, 27);
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue