[Build] Restructure
This commit is contained in:
@@ -3,8 +3,8 @@ const inquirer = require( 'inquirer' );
|
||||
const fs = require( 'fs' );
|
||||
const path = require( 'path' );
|
||||
const os = require( 'os' );
|
||||
const render = require( './render' );
|
||||
const { treeWalker } = require('./util');
|
||||
const render = require( './helpers/render' );
|
||||
const { treeWalker } = require('./helpers/util');
|
||||
|
||||
// TODO: Better comments
|
||||
// TODO: Split up configs and buildables
|
||||
|
||||
280
build/helpers/generateTheme.js
Normal file
280
build/helpers/generateTheme.js
Normal file
@@ -0,0 +1,280 @@
|
||||
const util = require( './util' );
|
||||
|
||||
const renderColourAsRGB = util.renderColourAsRGB;
|
||||
const renderColourAsRGBA = util.renderColourAsRGBA;
|
||||
const renderColourAsHex = util.renderColourAsHex;
|
||||
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
// ╭───────────────────────────────────────────────╮
|
||||
// │ Theme generator (returns theme as object) │
|
||||
// ╰───────────────────────────────────────────────╯
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
module.exports.generateTheme = ( theme, wallpaper, lockpaper, palette ) => {
|
||||
return {
|
||||
'wallpaper-path': wallpaper,
|
||||
'lockpaper-path': lockpaper,
|
||||
|
||||
// ┌ ┐
|
||||
// │ Colours │
|
||||
// └ ┘
|
||||
// ── Foreground ───────────────────────────────────────────────────
|
||||
'colour-foreground-hex': renderColourAsHex( colours.foreground[ theme ] ),
|
||||
'colour-foreground-rgb': renderColourAsRGB( colours.foreground[ theme ] ),
|
||||
'colour-foreground-rgba': renderColourAsRGBA( colours.foreground[ theme ], 0.5 ),
|
||||
'colour-foreground-rgba-07': renderColourAsRGBA( colours.foreground[ theme ], 0.7 ),
|
||||
'colour-foreground-rgba-06': renderColourAsRGBA( colours.foreground[ theme ], 0.6 ),
|
||||
'colour-foreground-rgba-05': renderColourAsRGBA( colours.foreground[ theme ], 0.5 ),
|
||||
'colour-foreground-rgba-03': renderColourAsRGBA( colours.foreground[ theme ], 0.3 ),
|
||||
'colour-foreground-rgba-02': renderColourAsRGBA( colours.foreground[ theme ], 0.2 ),
|
||||
'colour-foreground-rgba-01': renderColourAsRGBA( colours.foreground[ theme ], 0.1 ),
|
||||
|
||||
// ── Accent foreground colour ─────────────────────────────────────
|
||||
'colour-foreground-accent-hex': renderColourAsHex( colours['foreground-accent'][ theme ] ),
|
||||
'colour-foreground-accent-rgba-07': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.7 ),
|
||||
'colour-foreground-accent-rgba-06': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.6 ),
|
||||
'colour-foreground-accent-rgba-05': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.5 ),
|
||||
'colour-foreground-accent-rgba-03': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.3 ),
|
||||
'colour-foreground-accent-rgba-02': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.2 ),
|
||||
|
||||
// ── Accent colour ────────────────────────────────────────────────
|
||||
'colour-accent-hex': renderColourAsHex( palette[ 0 ] ),
|
||||
'colour-accent-rgb': renderColourAsRGB( palette[ 0 ] ),
|
||||
'colour-accent-rgba': renderColourAsRGBA( palette[ 0 ], 0.3 ),
|
||||
'colour-accent-rgba-07': renderColourAsRGBA( palette[ 0 ], 0.7 ),
|
||||
'colour-accent-rgba-05': renderColourAsRGBA( palette[ 0 ], 0.5 ),
|
||||
'colour-accent-rgba-03': renderColourAsRGBA( palette[ 0 ], 0.3 ),
|
||||
'colour-accent-rgba-02': renderColourAsRGBA( palette[ 0 ], 0.2 ),
|
||||
'colour-accent-rgba-015': renderColourAsRGBA( palette[ 0 ], 0.15 ),
|
||||
'colour-accent-rgba-011': renderColourAsRGBA( palette[ 0 ], 0.11 ),
|
||||
'colour-accent-rgba-007': renderColourAsRGBA( palette[ 0 ], 0.07 ),
|
||||
'colour-accent-hyprland': util.renderColourAsRGBAHex( palette[ 0 ], 0.8 ),
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
'colour-accent-gradient-1-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-2-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 2, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-3-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 3, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-4-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 4, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-5-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 5, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-inverse-1-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-inverse-2-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-inverse-3-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
|
||||
|
||||
// ── Secondary accent ─────────────────────────────────────────────
|
||||
'colour-accent-2-hex': renderColourAsHex( palette[ 1 ] ),
|
||||
'colour-accent-2-rgb': renderColourAsRGB( palette[ 1 ] ),
|
||||
'colour-accent-2-rgba-07': renderColourAsRGBA( palette[ 1 ], 0.7 ),
|
||||
'colour-accent-2-rgba-05': renderColourAsRGBA( palette[ 1 ], 0.5 ),
|
||||
'colour-accent-2-rgba-03': renderColourAsRGBA( palette[ 1 ], 0.3 ),
|
||||
'colour-accent-2-rgba-02': renderColourAsRGBA( palette[ 1 ], 0.2 ),
|
||||
'colour-accent-2-rgba-015': renderColourAsRGBA( palette[ 1 ], 0.15 ),
|
||||
'colour-accent-2-rgba-01': renderColourAsRGBA( palette[ 1 ], 0.1 ),
|
||||
'colour-accent-2-hyprland': util.renderColourAsRGBAHex( palette[ 1 ], 0.8 ),
|
||||
|
||||
// ── Tertiary accent ──────────────────────────────────────────────
|
||||
'colour-accent-3-hex': renderColourAsHex( palette[ 2 ] ),
|
||||
'colour-accent-3-rgb': renderColourAsRGB( palette[ 2 ] ),
|
||||
'colour-accent-3-hyprland': util.renderColourAsRGBAHex( palette[ 2 ], 0.8 ),
|
||||
|
||||
// ── Background ───────────────────────────────────────────────────
|
||||
'colour-background-hex': renderColourAsHex( colours.background[ theme ] ),
|
||||
'colour-background-rgb': renderColourAsRGB( colours.background[ theme ] ),
|
||||
'colour-background-rgba': renderColourAsRGBA( colours.background[ theme ], 0.5 ),
|
||||
'colour-background-rgba-07': renderColourAsRGBA( colours.background[ theme ], 0.7 ),
|
||||
'colour-background-rgba-05': renderColourAsRGBA( colours.background[ theme ], 0.5 ),
|
||||
'colour-background-rgba-03': renderColourAsRGBA( colours.background[ theme ], 0.3 ),
|
||||
'colour-background-rgba-02': renderColourAsRGBA( colours.background[ theme ], 0.2 ),
|
||||
'colour-background-rgba-015': renderColourAsRGBA( colours.background[ theme ], 0.15 ),
|
||||
'colour-background-rgba-011': renderColourAsRGBA( colours.background[ theme ], 0.11 ),
|
||||
|
||||
// ── Background Alternative ───────────────────────────────────────
|
||||
'colour-background-alternative-hex': renderColourAsHex( colours[ 'background-alternative' ][ theme ] ),
|
||||
'colour-background-alternative-rgb': renderColourAsRGB( colours[ 'background-alternative' ][ theme ] ),
|
||||
'colour-background-alternative-rgba-07': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.7 ),
|
||||
'colour-background-alternative-rgba-06': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.6 ),
|
||||
'colour-background-alternative-rgba-05': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.5 ),
|
||||
'colour-background-alternative-rgba-04': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.4 ),
|
||||
'colour-background-alternative-rgba-03': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.3 ),
|
||||
'colour-background-alternative-rgba-02': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.2 ),
|
||||
'colour-background-alternative-rgba-015': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.15 ),
|
||||
'colour-background-alternative-rgba-01': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.1 ),
|
||||
|
||||
// ── Background Tertiary ──────────────────────────────────────────
|
||||
'colour-background-tertiary-hex': renderColourAsHex( colours[ 'background-tertiary' ][ theme ] ),
|
||||
'colour-background-tertiary-rgb': renderColourAsRGB( colours[ 'background-tertiary' ][ theme ] ),
|
||||
'colour-background-tertiary-rgba-05': renderColourAsRGBA( colours[ 'background-tertiary' ][ theme ], 0.5 ),
|
||||
'colour-background-tertiary-rgba-02': renderColourAsRGBA( colours[ 'background-tertiary' ][ theme ], 0.2 ),
|
||||
|
||||
// ── Shadow ───────────────────────────────────────────────────────
|
||||
'colour-shadow-hex': renderColourAsHex( colours.shadow[ theme ] ),
|
||||
'colour-shadow-rgb': renderColourAsRGB( colours.shadow[ theme ] ),
|
||||
'colour-shadow-hyprland': util.renderColourAsRGBHex( colours.shadow[ theme ] ),
|
||||
'colour-shadow-rgba-07': renderColourAsRGBA( colours.shadow[ theme ], 0.7 ),
|
||||
'colour-shadow-rgba-05': renderColourAsRGBA( colours.shadow[ theme ], 0.5 ),
|
||||
'colour-shadow-rgba-03': renderColourAsRGBA( colours.shadow[ theme ], 0.3 ),
|
||||
'colour-shadow-rgba-02': renderColourAsRGBA( colours.shadow[ theme ], 0.2 ),
|
||||
'colour-shadow-rgba-015': renderColourAsRGBA( colours.shadow[ theme ], 0.15 ),
|
||||
'colour-shadow-rgba-011': renderColourAsRGBA( colours.shadow[ theme ], 0.11 ),
|
||||
|
||||
// ── Inactive ─────────────────────────────────────────────────────
|
||||
'colour-inactive-hex': renderColourAsHex( colours.inactive[ theme ] ),
|
||||
'colour-inactive-rgb': renderColourAsRGB( colours.inactive[ theme ] ),
|
||||
'colour-inactive-rgba-07': renderColourAsRGBA( colours.inactive[ theme ], 0.7 ),
|
||||
'colour-inactive-rgba-05': renderColourAsRGBA( colours.inactive[ theme ], 0.5 ),
|
||||
'colour-inactive-rgba-03': renderColourAsRGBA( colours.inactive[ theme ], 0.3 ),
|
||||
'colour-inactive-rgba-02': renderColourAsRGBA( colours.inactive[ theme ], 0.2 ),
|
||||
'colour-inactive-rgba-015': renderColourAsRGBA( colours.inactive[ theme ], 0.15 ),
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
'colour-inactive-background-hex': renderColourAsHex( colours[ 'inactive-background' ][ theme ] ),
|
||||
'colour-inactive-background-rgb': renderColourAsRGB( colours[ 'inactive-background' ][ theme ] ),
|
||||
'colour-inactive-background-hyprland': util.renderColourAsRGBHex( colours[ 'inactive-background' ][ theme ] ),
|
||||
'colour-inactive-background-rgba-07': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.7 ),
|
||||
'colour-inactive-background-rgba-05': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.5 ),
|
||||
'colour-inactive-background-rgba-04': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.4 ),
|
||||
'colour-inactive-background-rgba-03': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.3 ),
|
||||
'colour-inactive-background-rgba-02': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.2 ),
|
||||
'colour-inactive-background-rgba-015': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.15 ),
|
||||
'colour-inactive-background-rgba-01': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.1 ),
|
||||
|
||||
// ┌ ┐
|
||||
// │ Fonts │
|
||||
// └ ┘
|
||||
'font-primary': fonts.primary[ theme ],
|
||||
'font-accent': fonts.accent[ theme ],
|
||||
'font-mono': fonts.mono[ theme ],
|
||||
|
||||
// ┌ ┐
|
||||
// │ Icon Theme │
|
||||
// └ ┘
|
||||
'icon-theme': iconTheme[ theme ],
|
||||
|
||||
// ┌ ┐
|
||||
// │ yazi theme │
|
||||
// └ ┘
|
||||
'yazi-theme': yaziThemes[ theme ],
|
||||
|
||||
// ┌ ┐
|
||||
// │ Path to this repo on disk │
|
||||
// └ ┘
|
||||
'path-to-dotfiles': __dirname.slice(0, __dirname.length - 5),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
// ╭───────────────────────────────────────────────╮
|
||||
// │ Theme definitions │
|
||||
// ╰───────────────────────────────────────────────╯
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
const gradientMultipliers = {
|
||||
'nordic': 0.9,
|
||||
'deep-dark': 0.8,
|
||||
'material': 0.85,
|
||||
'light': 1.1,
|
||||
'bright': 1.15,
|
||||
'test': 0.75
|
||||
}
|
||||
const colours = {
|
||||
foreground: {
|
||||
'nordic': [ 200, 220, 255 ],
|
||||
'deep-dark': [ 230, 230, 230 ],
|
||||
'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 40, 40, 40 ],
|
||||
'bright': [ 0, 0, 0 ],
|
||||
'test': [ 0, 0, 0 ],
|
||||
},
|
||||
'foreground-accent': {
|
||||
'nordic': [ 255, 255, 255 ],
|
||||
'deep-dark': [ 255, 255, 255 ],
|
||||
'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 0, 0, 0 ],
|
||||
'bright': [ 50, 50, 50 ],
|
||||
'test': [ 0, 0, 0 ],
|
||||
},
|
||||
background: {
|
||||
'nordic': [ 10, 10, 15 ],
|
||||
'deep-dark': [ 20, 20, 20 ],
|
||||
'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 230, 230, 230 ],
|
||||
'bright': [ 255, 255, 255 ],
|
||||
'test': [ 255, 255, 255 ],
|
||||
},
|
||||
'background-alternative': {
|
||||
'nordic': [ 20, 20, 25 ],
|
||||
'deep-dark': [ 30, 30, 30 ],
|
||||
'material': [ 40, 40, 40 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 210, 210, 210 ],
|
||||
'bright': [ 230, 230, 230 ],
|
||||
'test': [ 255, 255, 0 ] // brown
|
||||
},
|
||||
'background-tertiary': {
|
||||
'nordic': [ 0, 0, 0 ],
|
||||
'deep-dark': [ 45, 45, 45 ],
|
||||
'material': [ 0, 0, 0 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 180, 180, 180 ],
|
||||
'bright': [ 200, 200, 200 ],
|
||||
'test': [ 255, 0, 255 ] // purple
|
||||
},
|
||||
shadow: {
|
||||
'nordic': [ 0, 0, 2 ],
|
||||
'deep-dark': [ 40, 40, 40 ],
|
||||
'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 190, 190, 190 ],
|
||||
'bright': [ 150, 150, 150 ],
|
||||
'test': [ 120, 0, 0 ] // dark red
|
||||
},
|
||||
inactive: {
|
||||
'nordic': [ 200, 200, 200 ],
|
||||
'deep-dark': [ 200, 200, 200 ],
|
||||
'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 65, 65, 65 ],
|
||||
'bright': [ 60, 60, 60 ],
|
||||
'test': [ 150, 150, 150 ]
|
||||
},
|
||||
'inactive-background': {
|
||||
'nordic': [ 0, 0, 0 ],
|
||||
'deep-dark': [ 0, 0, 0 ],
|
||||
'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 80, 80, 80 ],
|
||||
'bright': [ 60, 60, 60 ],
|
||||
'test': [ 60, 60, 60 ]
|
||||
}
|
||||
}
|
||||
|
||||
const fonts = {
|
||||
'primary': {
|
||||
'nordic': 'Comfortaa',
|
||||
'deep-dark': 'Comfortaa',
|
||||
'material': 'Comfortaa',
|
||||
'light': 'Adwaita Sans',
|
||||
'bright': 'Adwaita Sans Extralight'
|
||||
},
|
||||
'accent': {
|
||||
'nordic': 'Adwaita Sans',
|
||||
'deep-dark': 'Adwaita Sans',
|
||||
'material': 'Adwaita Sans',
|
||||
'light': 'Cantarell',
|
||||
'bright': 'Contarell Thin'
|
||||
},
|
||||
'mono': {
|
||||
'nordic': 'Source Code Pro',
|
||||
'deep-dark': 'Source Code Pro',
|
||||
'material': 'Source Code Pro',
|
||||
'light': 'Jetbrains Mono',
|
||||
'bright': 'Jetbrains Mono',
|
||||
}
|
||||
}
|
||||
|
||||
const iconTheme = {
|
||||
'nordic': 'Candy',
|
||||
'deep-dark': 'Candy',
|
||||
'material': 'Candy',
|
||||
'light': 'Candy',
|
||||
'bright': 'Candy'
|
||||
}
|
||||
|
||||
const yaziThemes = {
|
||||
'nordic': 'tokyo-night',
|
||||
'deep-dark': 'vscode-dark-modern',
|
||||
'material': 'dracula',
|
||||
'light': 'vscode-light-modern',
|
||||
'bright': 'vscode-light-modern',
|
||||
}
|
||||
68
build/helpers/render.js
Normal file
68
build/helpers/render.js
Normal file
@@ -0,0 +1,68 @@
|
||||
const mustache = require( 'mustache' );
|
||||
const colorThief = require( '@janishutz/colorthief' );
|
||||
const fs = require( 'fs' );
|
||||
const path = require( 'path' );
|
||||
const util = require( './util' );
|
||||
const generateTheme = require( './generateTheme' );
|
||||
|
||||
const build = ( wallpaper, lockpaper, theme ) => {
|
||||
console.log( '\n=> Extracting colours' );
|
||||
// Extract colour palette from chosen wallpaper using Color-Thief
|
||||
colorThief.getPalette( wallpaper ).then( palette => {
|
||||
// Define view options (for rendering with mustache)
|
||||
if ( theme === 'test' ) {
|
||||
palette = [ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ];
|
||||
}
|
||||
|
||||
const view = generateTheme.generateTheme( theme, wallpaper, lockpaper, palette );
|
||||
|
||||
try {
|
||||
fs.mkdir( path.join( __dirname, '/dist' ) );
|
||||
} catch ( e ) {
|
||||
|
||||
}
|
||||
|
||||
// recursively index files from config directory -> Maybe add a file to each
|
||||
// directory to indicate whether or not to index files in it?
|
||||
const fileList = util.treeWalker( path.join( __dirname, '/../../renderable/' ), '*', [ 'node_modules', '@girs', '.gitignore', '.git', 'flavours' ] );
|
||||
|
||||
for (let index = 0; index < fileList.length; index++) {
|
||||
try {
|
||||
render( fileList[ index ], view );
|
||||
} catch ( e ) {
|
||||
console.error( '=> Render failed for ' + fileList[ index ] + ' with error ' + e );
|
||||
}
|
||||
}
|
||||
|
||||
util.themePreProcessor( path.join( __dirname, '/../../gtk-theme/src/gtk-4.0/gtk.css' ), 'src', 'dist' );
|
||||
util.themePreProcessor( path.join( __dirname, '/../../gtk-theme/src/gtk-3.0/gtk.css' ), 'src', 'dist' );
|
||||
render( path.join( __dirname, '/../../gtk-theme/src/colours.css' ), view, 'src', 'dist' );
|
||||
} ).catch( e => {
|
||||
console.error( e );
|
||||
console.error( '\n=> Failed to load image or retrieve colour palette from it' );
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} templatePath - absolute path to config directory
|
||||
* @param {object} view - rendering config passed to mustache
|
||||
* @param {string} originalDir - The original directory, defaults to renderable
|
||||
* @param {string} newDir - the output directory override, defaults to config
|
||||
*/
|
||||
const render = ( templatePath, view, originalDir = 'renderable', newDir = 'config' ) => {
|
||||
// Load template from disk (all can be found in <project-root>/renderable)
|
||||
// TODO: Make exclusion better plus copy other files maybe?
|
||||
const template = '' + fs.readFileSync( templatePath );
|
||||
const outPath = path.join( templatePath.replace( originalDir, newDir ) );
|
||||
console.log( '=> Rendering to ' + outPath );
|
||||
try {
|
||||
fs.mkdirSync( path.dirname( outPath ), {
|
||||
recursive: true,
|
||||
} );
|
||||
} catch ( e ) {
|
||||
console.error( e );
|
||||
}
|
||||
fs.writeFileSync( outPath, mustache.render( template, view ) );
|
||||
}
|
||||
|
||||
module.exports = build;
|
||||
318
build/render.js
318
build/render.js
@@ -1,318 +0,0 @@
|
||||
const mustache = require( 'mustache' );
|
||||
const colorThief = require( '@janishutz/colorthief' );
|
||||
const fs = require( 'fs' );
|
||||
const path = require( 'path' );
|
||||
const util = require( './util' );
|
||||
const renderColourAsRGB = util.renderColourAsRGB;
|
||||
const renderColourAsRGBA = util.renderColourAsRGBA;
|
||||
const renderColourAsHex = util.renderColourAsHex;
|
||||
|
||||
const build = ( wallpaper, lockpaper, theme ) => {
|
||||
console.log( '\n=> Extracting colours' );
|
||||
// Extract colour palette from chosen wallpaper using Color-Thief
|
||||
colorThief.getPalette( wallpaper ).then( palette => {
|
||||
// Define view options (for rendering with mustache)
|
||||
if ( theme === 'test' ) {
|
||||
palette = [ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ];
|
||||
}
|
||||
const view = {
|
||||
'wallpaper-path': wallpaper,
|
||||
'lockpaper-path': lockpaper,
|
||||
|
||||
// ┌ ┐
|
||||
// │ Colours │
|
||||
// └ ┘
|
||||
// ── Foreground ───────────────────────────────────────────────────
|
||||
'colour-foreground-hex': renderColourAsHex( colours.foreground[ theme ] ),
|
||||
'colour-foreground-rgb': renderColourAsRGB( colours.foreground[ theme ] ),
|
||||
'colour-foreground-rgba': renderColourAsRGBA( colours.foreground[ theme ], 0.5 ),
|
||||
'colour-foreground-rgba-07': renderColourAsRGBA( colours.foreground[ theme ], 0.7 ),
|
||||
'colour-foreground-rgba-06': renderColourAsRGBA( colours.foreground[ theme ], 0.6 ),
|
||||
'colour-foreground-rgba-05': renderColourAsRGBA( colours.foreground[ theme ], 0.5 ),
|
||||
'colour-foreground-rgba-03': renderColourAsRGBA( colours.foreground[ theme ], 0.3 ),
|
||||
'colour-foreground-rgba-02': renderColourAsRGBA( colours.foreground[ theme ], 0.2 ),
|
||||
'colour-foreground-rgba-01': renderColourAsRGBA( colours.foreground[ theme ], 0.1 ),
|
||||
|
||||
// ── Accent foreground colour ─────────────────────────────────────
|
||||
'colour-foreground-accent-hex': renderColourAsHex( colours['foreground-accent'][ theme ] ),
|
||||
'colour-foreground-accent-rgba-07': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.7 ),
|
||||
'colour-foreground-accent-rgba-06': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.6 ),
|
||||
'colour-foreground-accent-rgba-05': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.5 ),
|
||||
'colour-foreground-accent-rgba-03': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.3 ),
|
||||
'colour-foreground-accent-rgba-02': renderColourAsRGBA( colours['foreground-accent'][ theme ], 0.2 ),
|
||||
|
||||
// ── Accent colour ────────────────────────────────────────────────
|
||||
'colour-accent-hex': renderColourAsHex( palette[ 0 ] ),
|
||||
'colour-accent-rgb': renderColourAsRGB( palette[ 0 ] ),
|
||||
'colour-accent-rgba': renderColourAsRGBA( palette[ 0 ], 0.3 ),
|
||||
'colour-accent-rgba-07': renderColourAsRGBA( palette[ 0 ], 0.7 ),
|
||||
'colour-accent-rgba-05': renderColourAsRGBA( palette[ 0 ], 0.5 ),
|
||||
'colour-accent-rgba-03': renderColourAsRGBA( palette[ 0 ], 0.3 ),
|
||||
'colour-accent-rgba-02': renderColourAsRGBA( palette[ 0 ], 0.2 ),
|
||||
'colour-accent-rgba-015': renderColourAsRGBA( palette[ 0 ], 0.15 ),
|
||||
'colour-accent-rgba-011': renderColourAsRGBA( palette[ 0 ], 0.11 ),
|
||||
'colour-accent-rgba-007': renderColourAsRGBA( palette[ 0 ], 0.07 ),
|
||||
'colour-accent-hyprland': util.renderColourAsRGBAHex( palette[ 0 ], 0.8 ),
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
'colour-accent-gradient-1-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-2-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 2, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-3-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 3, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-4-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 4, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-5-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 5, gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-inverse-1-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-inverse-2-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
|
||||
'colour-accent-gradient-inverse-3-hex': renderColourAsHex( util.getGradientColour( palette[ 0 ], 1, 1 / gradientMultipliers[ theme ] ) ),
|
||||
|
||||
// ── Secondary accent ─────────────────────────────────────────────
|
||||
'colour-accent-2-hex': renderColourAsHex( palette[ 1 ] ),
|
||||
'colour-accent-2-rgb': renderColourAsRGB( palette[ 1 ] ),
|
||||
'colour-accent-2-rgba-07': renderColourAsRGBA( palette[ 1 ], 0.7 ),
|
||||
'colour-accent-2-rgba-05': renderColourAsRGBA( palette[ 1 ], 0.5 ),
|
||||
'colour-accent-2-rgba-03': renderColourAsRGBA( palette[ 1 ], 0.3 ),
|
||||
'colour-accent-2-rgba-02': renderColourAsRGBA( palette[ 1 ], 0.2 ),
|
||||
'colour-accent-2-rgba-015': renderColourAsRGBA( palette[ 1 ], 0.15 ),
|
||||
'colour-accent-2-rgba-01': renderColourAsRGBA( palette[ 1 ], 0.1 ),
|
||||
'colour-accent-2-hyprland': util.renderColourAsRGBAHex( palette[ 1 ], 0.8 ),
|
||||
|
||||
// ── Tertiary accent ──────────────────────────────────────────────
|
||||
'colour-accent-3-hex': renderColourAsHex( palette[ 2 ] ),
|
||||
'colour-accent-3-rgb': renderColourAsRGB( palette[ 2 ] ),
|
||||
'colour-accent-3-hyprland': util.renderColourAsRGBAHex( palette[ 2 ], 0.8 ),
|
||||
|
||||
// ── Background ───────────────────────────────────────────────────
|
||||
'colour-background-hex': renderColourAsHex( colours.background[ theme ] ),
|
||||
'colour-background-rgb': renderColourAsRGB( colours.background[ theme ] ),
|
||||
'colour-background-rgba': renderColourAsRGBA( colours.background[ theme ], 0.5 ),
|
||||
'colour-background-rgba-07': renderColourAsRGBA( colours.background[ theme ], 0.7 ),
|
||||
'colour-background-rgba-05': renderColourAsRGBA( colours.background[ theme ], 0.5 ),
|
||||
'colour-background-rgba-03': renderColourAsRGBA( colours.background[ theme ], 0.3 ),
|
||||
'colour-background-rgba-02': renderColourAsRGBA( colours.background[ theme ], 0.2 ),
|
||||
'colour-background-rgba-015': renderColourAsRGBA( colours.background[ theme ], 0.15 ),
|
||||
'colour-background-rgba-011': renderColourAsRGBA( colours.background[ theme ], 0.11 ),
|
||||
|
||||
// ── Background Alternative ───────────────────────────────────────
|
||||
'colour-background-alternative-hex': renderColourAsHex( colours[ 'background-alternative' ][ theme ] ),
|
||||
'colour-background-alternative-rgb': renderColourAsRGB( colours[ 'background-alternative' ][ theme ] ),
|
||||
'colour-background-alternative-rgba-07': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.7 ),
|
||||
'colour-background-alternative-rgba-06': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.6 ),
|
||||
'colour-background-alternative-rgba-05': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.5 ),
|
||||
'colour-background-alternative-rgba-04': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.4 ),
|
||||
'colour-background-alternative-rgba-03': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.3 ),
|
||||
'colour-background-alternative-rgba-02': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.2 ),
|
||||
'colour-background-alternative-rgba-015': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.15 ),
|
||||
'colour-background-alternative-rgba-01': renderColourAsRGBA( colours[ 'background-alternative' ][ theme ], 0.1 ),
|
||||
|
||||
// ── Background Tertiary ──────────────────────────────────────────
|
||||
'colour-background-tertiary-hex': renderColourAsHex( colours[ 'background-tertiary' ][ theme ] ),
|
||||
'colour-background-tertiary-rgb': renderColourAsRGB( colours[ 'background-tertiary' ][ theme ] ),
|
||||
'colour-background-tertiary-rgba-05': renderColourAsRGBA( colours[ 'background-tertiary' ][ theme ], 0.5 ),
|
||||
'colour-background-tertiary-rgba-02': renderColourAsRGBA( colours[ 'background-tertiary' ][ theme ], 0.2 ),
|
||||
|
||||
// ── Shadow ───────────────────────────────────────────────────────
|
||||
'colour-shadow-hex': renderColourAsHex( colours.shadow[ theme ] ),
|
||||
'colour-shadow-rgb': renderColourAsRGB( colours.shadow[ theme ] ),
|
||||
'colour-shadow-hyprland': util.renderColourAsRGBHex( colours.shadow[ theme ] ),
|
||||
'colour-shadow-rgba-07': renderColourAsRGBA( colours.shadow[ theme ], 0.7 ),
|
||||
'colour-shadow-rgba-05': renderColourAsRGBA( colours.shadow[ theme ], 0.5 ),
|
||||
'colour-shadow-rgba-03': renderColourAsRGBA( colours.shadow[ theme ], 0.3 ),
|
||||
'colour-shadow-rgba-02': renderColourAsRGBA( colours.shadow[ theme ], 0.2 ),
|
||||
'colour-shadow-rgba-015': renderColourAsRGBA( colours.shadow[ theme ], 0.15 ),
|
||||
'colour-shadow-rgba-011': renderColourAsRGBA( colours.shadow[ theme ], 0.11 ),
|
||||
|
||||
// ── Inactive ─────────────────────────────────────────────────────
|
||||
'colour-inactive-hex': renderColourAsHex( colours.inactive[ theme ] ),
|
||||
'colour-inactive-rgb': renderColourAsRGB( colours.inactive[ theme ] ),
|
||||
'colour-inactive-rgba-07': renderColourAsRGBA( colours.inactive[ theme ], 0.7 ),
|
||||
'colour-inactive-rgba-05': renderColourAsRGBA( colours.inactive[ theme ], 0.5 ),
|
||||
'colour-inactive-rgba-03': renderColourAsRGBA( colours.inactive[ theme ], 0.3 ),
|
||||
'colour-inactive-rgba-02': renderColourAsRGBA( colours.inactive[ theme ], 0.2 ),
|
||||
'colour-inactive-rgba-015': renderColourAsRGBA( colours.inactive[ theme ], 0.15 ),
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
'colour-inactive-background-hex': renderColourAsHex( colours[ 'inactive-background' ][ theme ] ),
|
||||
'colour-inactive-background-rgb': renderColourAsRGB( colours[ 'inactive-background' ][ theme ] ),
|
||||
'colour-inactive-background-hyprland': util.renderColourAsRGBHex( colours[ 'inactive-background' ][ theme ] ),
|
||||
'colour-inactive-background-rgba-07': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.7 ),
|
||||
'colour-inactive-background-rgba-05': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.5 ),
|
||||
'colour-inactive-background-rgba-04': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.4 ),
|
||||
'colour-inactive-background-rgba-03': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.3 ),
|
||||
'colour-inactive-background-rgba-02': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.2 ),
|
||||
'colour-inactive-background-rgba-015': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.15 ),
|
||||
'colour-inactive-background-rgba-01': renderColourAsRGBA( colours[ 'inactive-background' ][ theme ], 0.1 ),
|
||||
|
||||
// ┌ ┐
|
||||
// │ Fonts │
|
||||
// └ ┘
|
||||
'font-primary': fonts.primary[ theme ],
|
||||
'font-accent': fonts.accent[ theme ],
|
||||
'font-mono': fonts.mono[ theme ],
|
||||
|
||||
// ┌ ┐
|
||||
// │ yazi theme │
|
||||
// └ ┘
|
||||
'yazi-theme': yaziThemes[ theme ],
|
||||
|
||||
// ┌ ┐
|
||||
// │ Path to this repo on disk │
|
||||
// └ ┘
|
||||
'path-to-dotfiles': __dirname.slice(0, __dirname.length - 5),
|
||||
}
|
||||
|
||||
try {
|
||||
fs.mkdir( path.join( __dirname, '/dist' ) );
|
||||
} catch ( e ) {
|
||||
|
||||
}
|
||||
|
||||
// recursively index files from config directory -> Maybe add a file to each
|
||||
// directory to indicate whether or not to index files in it?
|
||||
const fileList = util.treeWalker( path.join( __dirname, '/../renderable/' ), '*', [ 'node_modules', '@girs', '.gitignore', '.git', 'flavours' ] );
|
||||
|
||||
for (let index = 0; index < fileList.length; index++) {
|
||||
try {
|
||||
render( fileList[ index ], view );
|
||||
} catch ( e ) {
|
||||
console.error( '=> Render failed for ' + fileList[ index ] + ' with error ' + e );
|
||||
}
|
||||
}
|
||||
|
||||
util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), 'src', 'dist' );
|
||||
util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-3.0/gtk.css' ), 'src', 'dist' );
|
||||
render( path.join( __dirname, '/../gtk-theme/src/colours.css' ), view, 'src', 'dist' );
|
||||
// TODO: Copy over to /usr/share/themes/Adaptive-Theme/
|
||||
} ).catch( e => {
|
||||
console.error( e );
|
||||
console.error( '\n=> Failed to load image or retrieve colour palette from it' );
|
||||
} );
|
||||
}
|
||||
|
||||
const gradientMultipliers = {
|
||||
'nordic': 0.9,
|
||||
'deep-dark': 0.8,
|
||||
'material': 0.85,
|
||||
'light': 1.1,
|
||||
'bright': 1.15,
|
||||
'test': 0.75
|
||||
}
|
||||
const colours = {
|
||||
foreground: {
|
||||
'nordic': [ 200, 220, 255 ],
|
||||
'deep-dark': [ 230, 230, 230 ],
|
||||
'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 40, 40, 40 ],
|
||||
'bright': [ 0, 0, 0 ],
|
||||
'test': [ 0, 0, 0 ],
|
||||
},
|
||||
'foreground-accent': {
|
||||
'nordic': [ 255, 255, 255 ],
|
||||
'deep-dark': [ 255, 255, 255 ],
|
||||
'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 0, 0, 0 ],
|
||||
'bright': [ 50, 50, 50 ],
|
||||
'test': [ 0, 0, 0 ],
|
||||
},
|
||||
background: {
|
||||
'nordic': [ 10, 10, 15 ],
|
||||
'deep-dark': [ 20, 20, 20 ],
|
||||
'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 230, 230, 230 ],
|
||||
'bright': [ 255, 255, 255 ],
|
||||
'test': [ 255, 255, 255 ],
|
||||
},
|
||||
'background-alternative': {
|
||||
'nordic': [ 20, 20, 25 ],
|
||||
'deep-dark': [ 30, 30, 30 ],
|
||||
'material': [ 40, 40, 40 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 210, 210, 210 ],
|
||||
'bright': [ 230, 230, 230 ],
|
||||
'test': [ 255, 255, 0 ] // brown
|
||||
},
|
||||
'background-tertiary': {
|
||||
'nordic': [ 0, 0, 0 ],
|
||||
'deep-dark': [ 45, 45, 45 ],
|
||||
'material': [ 0, 0, 0 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 180, 180, 180 ],
|
||||
'bright': [ 200, 200, 200 ],
|
||||
'test': [ 255, 0, 255 ] // purple
|
||||
},
|
||||
shadow: {
|
||||
'nordic': [ 0, 0, 2 ],
|
||||
'deep-dark': [ 40, 40, 40 ],
|
||||
'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 190, 190, 190 ],
|
||||
'bright': [ 150, 150, 150 ],
|
||||
'test': [ 120, 0, 0 ] // dark red
|
||||
},
|
||||
inactive: {
|
||||
'nordic': [ 200, 200, 200 ],
|
||||
'deep-dark': [ 200, 200, 200 ],
|
||||
'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 65, 65, 65 ],
|
||||
'bright': [ 60, 60, 60 ],
|
||||
'test': [ 150, 150, 150 ]
|
||||
},
|
||||
'inactive-background': {
|
||||
'nordic': [ 0, 0, 0 ],
|
||||
'deep-dark': [ 0, 0, 0 ],
|
||||
'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
|
||||
'light': [ 80, 80, 80 ],
|
||||
'bright': [ 60, 60, 60 ],
|
||||
'test': [ 60, 60, 60 ]
|
||||
}
|
||||
}
|
||||
|
||||
const fonts = {
|
||||
'primary': {
|
||||
'nordic': 'Comfortaa',
|
||||
'deep-dark': 'Comfortaa',
|
||||
'material': 'Comfortaa',
|
||||
'light': 'Adwaita Sans',
|
||||
'bright': 'Adwaita Sans Extralight'
|
||||
},
|
||||
'accent': {
|
||||
'nordic': 'Adwaita Sans',
|
||||
'deep-dark': 'Adwaita Sans',
|
||||
'material': 'Adwaita Sans',
|
||||
'light': 'Cantarell',
|
||||
'bright': 'Contarell Thin'
|
||||
},
|
||||
'mono': {
|
||||
'nordic': 'Source Code Pro',
|
||||
'deep-dark': 'Source Code Pro',
|
||||
'material': 'Source Code Pro',
|
||||
'light': 'Jetbrains Mono',
|
||||
'bright': 'Jetbrains Mono',
|
||||
}
|
||||
}
|
||||
|
||||
const yaziThemes = {
|
||||
'nordic': 'tokyo-night',
|
||||
'deep-dark': 'vscode-dark-modern',
|
||||
'material': 'dracula',
|
||||
'light': 'vscode-light-modern',
|
||||
'bright': 'vscode-light-modern',
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {string} templatePath - absolute path to config directory
|
||||
* @param {object} view - rendering config passed to mustache
|
||||
* @param {string} originalDir - The original directory, defaults to renderable
|
||||
* @param {string} newDir - the output directory override, defaults to config
|
||||
*/
|
||||
const render = ( templatePath, view, originalDir = 'renderable', newDir = 'config' ) => {
|
||||
// Load template from disk (all can be found in <project-root>/renderable)
|
||||
// TODO: Make exclusion better plus copy other files maybe?
|
||||
const template = '' + fs.readFileSync( templatePath );
|
||||
const outPath = path.join( templatePath.replace( originalDir, newDir ) );
|
||||
console.log( '=> Rendering to ' + outPath );
|
||||
try {
|
||||
fs.mkdirSync( path.dirname( outPath ), {
|
||||
recursive: true,
|
||||
} );
|
||||
} catch ( e ) {
|
||||
console.error( e );
|
||||
}
|
||||
fs.writeFileSync( outPath, mustache.render( template, view ) );
|
||||
}
|
||||
|
||||
module.exports = build;
|
||||
Reference in New Issue
Block a user