diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 2a63f2e..7b78f10 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -20,7 +20,7 @@ jobs: cache: "yarn" - run: yarn install - - run: yarn build + - run: yarn release - name: Deploy uses: peaceiris/actions-gh-pages@v3 diff --git a/README.md b/README.md index 99229c6..29fefcf 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,12 @@ @import url("https://catppuccin.github.io/discord/dist/catppuccin-macchiato.theme.css"); /* mocha */ @import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css"); + +/* You can also append Catppuccin colors to customize the accent, e.g. */ +/* mocha (pink accent)*/ +@import url("https://catppuccin.github.io/discord/dist/catppuccin-mocha-pink.theme.css"); +/* frappe (maroon accent) */ +@import url("https://catppuccin.github.io/discord/dist/catppuccin-frappe-maroon.theme.css"); ``` ### [DiscoCSS](https://github.com/mlvzk/discocss) @@ -74,7 +80,13 @@ curl -L https://catppuccin.github.io/discord/dist/catppuccin-frappe.theme.css > # macchiato curl -L https://catppuccin.github.io/discord/dist/catppuccin-macchiato.theme.css > ~/.config/discocss/custom.css # mocha -curl -L https://catppuccin.github.io/discord/dist/catppuccin-mocha.theme.css> ~/.config/discocss/custom.css +you can also append Catppuccin colors to customize the accent + +# You can also append Catppuccin colors to customize the accent, e.g. +# mocha (pink accent) +curl -L https://catppuccin.github.io/discord/dist/catppuccin-mocha-pink.theme.css > ~/.config/discocss/custom.css +# frappe (maroon accent) +curl -L https://catppuccin.github.io/discord/dist/catppuccin-frappe-maroon.theme.css > ~/.config/discocss/custom.css ``` ### [Stylus](https://github.com/openstyles/stylus) diff --git a/build.js b/build.js new file mode 100644 index 0000000..9be0f2b --- /dev/null +++ b/build.js @@ -0,0 +1,59 @@ +const fs = require("fs").promises; +const path = require("path"); + +const sourceFiles = [ + "src/catppuccin-frappe.theme.scss", + "src/catppuccin-latte.theme.scss", + "src/catppuccin-macchiato.theme.scss", + "src/catppuccin-mocha.theme.scss", +]; + +const accents = [ + "rosewater", + "flamingo", + "pink", + "mauve", + "red", + "maroon", + "peach", + "yellow", + "green", + "teal", + "sky", + "sapphire", + "blue", + "lavender", +]; + +(async () => { + await Promise.all(sourceFiles.map(generateAccents)); + console.log("Generated all accents for all flavours"); +})(); + +// read sourceFile and generate all accents for it +async function generateAccents(sourceFilePath) { + const _sourceFilePath = path.join(__dirname, sourceFilePath); + const sourceFileData = await fs.readFile(_sourceFilePath, { + encoding: "utf8", + }); + return Promise.all( + accents.map((accent) => + generateAccent(sourceFileData, sourceFilePath, accent) + ) + ); +} + +// replace brand and write to separate file +async function generateAccent(sourceFileData, sourceFilePath, accent) { + const modifiedFileContent = sourceFileData.replace( + /\$brand: .*;/gm, + `$brand: \$${accent};` + ); + const outputFileName = sourceFilePath + .split(".") + .map((s, i) => (i === 0 ? s.concat(`-${accent}`) : s)) + .join("."); + const outputFilePath = path.join(__dirname, outputFileName); + await fs.writeFile(outputFilePath, modifiedFileContent); + console.log(`Generated: ${outputFileName}`); +} diff --git a/package.json b/package.json index 846428a..a1b9a74 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "private": true, "scripts": { "build": "mkdir -p dist/dist; sass --no-charset --no-source-map src:dist/dist", + "release": "node build.js; mkdir -p dist/dist; sass --no-charset --no-source-map src:dist/dist; rm src/catppuccin-*-*.theme.scss", "watch": "mkdir -p dist/dist; sass --no-charset --no-source-map src:dist/dist -w", "prepare": "husky install" },