From 15a215a2ae387c06ddeb4431f42c1a08e2f03c09 Mon Sep 17 00:00:00 2001 From: Bauke Date: Tue, 14 Apr 2020 16:27:09 +0200 Subject: [PATCH] Create the Tauon theme. --- .gitignore | 3 ++ .gitlab-ci.yml | 3 +- package.json | 4 +- source/pages/index.html | 3 ++ source/scripts/tauon.ts | 73 +++++++++++++++++++++++++++ source/tauon/love-template.ttheme | 84 +++++++++++++++++++++++++++++++ 6 files changed, 168 insertions(+), 2 deletions(-) create mode 100644 source/scripts/tauon.ts create mode 100644 source/tauon/love-template.ttheme diff --git a/.gitignore b/.gitignore index 6c37a5f..a3dcb71 100644 --- a/.gitignore +++ b/.gitignore @@ -117,3 +117,6 @@ source/vscode/themes/love-light.color-theme.json source/sublime-text/love-dark.sublime-color-scheme source/sublime-text/love-light.sublime-color-scheme source/sublime-text/Love.sublime-package +source/tauon/Love Dark.ttheme +source/tauon/Love Light.ttheme +source/tauon/love-tauon.zip diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 2a92490..0b373e3 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -23,7 +23,8 @@ pages: script: - yarn build - cp 'public/index.html' 'public/404.html' - - cp 'source/sublime-text/Love.sublime-package' 'public/' + # Copy various theme output files over so they're available through the website. + - yarn copy-themes artifacts: paths: - public diff --git a/package.json b/package.json index 4e5458f..d5eab7b 100644 --- a/package.json +++ b/package.json @@ -6,14 +6,16 @@ "homepage": "https://love.holllo.cc", "repository": "https://gitlab.com/holllo/love", "scripts": { - "build": "yarn build:atom && yarn build:images && yarn build:pages && yarn build:sublime-text && yarn build:vscode", + "build": "yarn build:atom && yarn build:images && yarn build:pages && yarn build:sublime-text && yarn build:tauon && yarn build:vscode && yarn copy-themes", "build:atom": "ts-node 'source/scripts/atom.ts'", "build:images": "cpy 'source/pages/images/**' 'public/images/'", "build:pages": "ts-node 'source/scripts/pages.ts'", "build:sublime-text": "ts-node 'source/scripts/sublime-text.ts'", + "build:tauon": "ts-node 'source/scripts/tauon.ts'", "build:vscode": "ts-node 'source/scripts/vscode.ts'", "watch:atom": "chokidar 'source/atom/*.less' 'source/atom/ui-template/*.less' -c 'yarn build:atom'", "watch:vscode": "chokidar 'source/vscode/themes/love-template.color-theme.json' -c 'yarn build:vscode'", + "copy-themes": "cp 'source/sublime-text/Love.sublime-package' 'public/' && cp 'source/tauon/love-tauon.zip' 'public/'", "test": "xo && stylelint 'source/pages/scss/**'" }, "dependencies": { diff --git a/source/pages/index.html b/source/pages/index.html index 060a764..ebadb2b 100644 --- a/source/pages/index.html +++ b/source/pages/index.html @@ -169,6 +169,9 @@
  • Sublime Text
    • +
  • + Tauon Music Box +
  • Visual Studio Code
    • diff --git a/source/scripts/tauon.ts b/source/scripts/tauon.ts new file mode 100644 index 0000000..b3c3f41 --- /dev/null +++ b/source/scripts/tauon.ts @@ -0,0 +1,73 @@ +import {promises as fsp} from 'fs'; +import {join} from 'path'; +import Zip from 'jszip'; +import nunjucks from 'nunjucks'; +import {generateLove, LoveVariant} from './love'; + +export async function entry(): Promise { + const themeDirectory: string = join(__dirname, '../tauon/'); + // Configure Nunjucks to use the templates for `source/tauon/`. + nunjucks.configure(themeDirectory, { + lstripBlocks: true, + trimBlocks: true, + throwOnUndefined: true + }); + + // Create a new zip archive. + const tauonPackage: Zip = new Zip(); + + // Generate the Love variants. + const love: LoveVariant[] = generateLove(); + + for (const variant of love) { + const themeName = `Love ${variant.name.slice(0, 1).toUpperCase() + + variant.name.slice(1)}.ttheme`; + const outputPath: string = join(themeDirectory, themeName); + + // Render the template. + const theme: string = nunjucks.render('love-template.ttheme', { + love: variant, + rgb: hexToRGB + }); + + // Write the theme to file and add it to the zip archive. + await fsp.writeFile(outputPath, theme); + tauonPackage.file(themeName, theme); + } + + // Write the zip archive to file. + const zip: Buffer = await tauonPackage.generateAsync({type: 'nodebuffer'}); + await fsp.writeFile(join(themeDirectory, 'love-tauon.zip'), zip); +} + +// A quick helper function to take a 3 or 6 character hex color and have it return +// the RGB values from 0 to 256 as an `r,g,b` string since that's how Tauon +// defines its colors in the themes. +export function hexToRGB(hex: string): string { + // If the color starts with a #, remove it. + if (hex.startsWith('#')) { + hex = hex.slice(1); + } + + if (hex.length === 3) { + return [ + parseInt(hex[0], 16), + parseInt(hex[1], 16), + parseInt(hex[2], 16) + ].join(','); + } + + if (hex.length === 6) { + return [ + parseInt(hex.slice(0, 2), 16), + parseInt(hex.slice(2, 4), 16), + parseInt(hex.slice(4, 6), 16) + ].join(','); + } + + throw new Error(`Unsupported hex "${hex}" used`); +} + +if (require.main === module) { + entry(); +} diff --git a/source/tauon/love-template.ttheme b/source/tauon/love-template.ttheme new file mode 100644 index 0000000..cac94b1 --- /dev/null +++ b/source/tauon/love-template.ttheme @@ -0,0 +1,84 @@ +# The Love Theme for Tauon Music Box +# Version: 0.1.0 +# https://love.holllo.cc + +{% if love.name === 'light' %} +light-mode +{% endif %} + +# Backgrounds + +{{ rgb(love.colors.background2) }} player background (top panel) +{{ rgb(love.colors.background1) }} playlist panel +{{ rgb(love.colors.background2) }} side panel +{{ rgb(love.colors.background1) }} bottom panel +{{ rgb(love.colors.background2) }} gallery background + +# Frame +# Don't know where these colors are used. ☹️ + +rgb(255,0,255) sep line +rgb(255,0,255) bb line +rgb(255,0,255) tb line + +# Playlist + +{{ rgb(love.colors.foreground1) }} track line +{{ rgb(love.colors.foreground1) }} track time +{{ rgb(love.colors.accents[4]) }} track index +{{ rgb(love.colors.accents[6]) }} track artist +{{ rgb(love.colors.accents[9]) }} album line + +{{ rgb(love.colors.accents[3]) }} track playing +{{ rgb(love.colors.accents[3]) }} time playing +{{ rgb(love.colors.accents[3]) }} index playing +{{ rgb(love.colors.accents[3]) }} artist playing +{{ rgb(love.colors.accents[3]) }} album playing + +{{ rgb(love.colors.accents[0]) }} track missing + +{{ rgb(love.colors.accents[2]) }} fav line +{{ rgb(love.colors.foreground1) }} folder line +{{ rgb(love.colors.foreground1) }} folder title + +{{ rgb(love.colors.accents[6]) + ',30' }} playing highlight +{{ rgb(love.colors.foreground1) + ',20' }} select highlight +{{ rgb(love.colors.foreground1) }} gallery highlight + +# Bottom Panel + +{{ rgb(love.colors.foreground1) + ',40' }} buttons off +{{ rgb(love.colors.accents[4]) }} buttons over +{{ rgb(love.colors.accents[6]) }} buttons active + +{{ rgb(love.colors.foreground1) }} playing time + +{{ rgb(love.colors.accents[6]) }} seek bar +{{ rgb(love.colors.accents[6]) }} volume bar +{{ rgb(love.colors.accents[6]) + ',40' }} seek bg +{{ rgb(love.colors.accents[6]) + ',40' }} volume bg +{{ rgb(love.colors.foreground1) }} scroll bar + +{{ rgb(love.colors.foreground1) + ',40' }} mode off +{{ rgb(love.colors.accents[4]) }} mode over +{{ rgb(love.colors.accents[6]) }} mode on + +# Top Panel + +{{ rgb(love.colors.background1) }} tab active line +{{ rgb(love.colors.foreground1) }} tab line +{{ rgb(love.colors.background1) }} tab background +{{ rgb(love.colors.background2) }} tab over +{{ rgb(love.colors.foreground1) }} tab active background +{{ rgb(love.colors.foreground1) }} music vis + +# Side Panel + +{{ rgb(love.colors.foreground1) }} title info +{{ rgb(love.colors.foreground1) }} extra info +{{ rgb(love.colors.foreground1) }} art border + +# Mini Mode + +{{ rgb(love.colors.background1) }} mini bg +{{ rgb(love.colors.foreground1) }} mini border