Compare commits
2 Commits
dev
...
e7b418007f
| Author | SHA1 | Date | |
|---|---|---|---|
| e7b418007f | |||
| 0b896e404c |
@@ -1,22 +1,4 @@
|
||||
import {
|
||||
Color
|
||||
} from '../types/colours';
|
||||
import {
|
||||
colours
|
||||
} from '../variables/colors';
|
||||
import {
|
||||
fonts
|
||||
} from '../variables/fonts';
|
||||
import {
|
||||
gradientMultipliers
|
||||
} from '../variables/gradients';
|
||||
import {
|
||||
iconTheme
|
||||
} from '../variables/icons';
|
||||
import util from './util';
|
||||
import {
|
||||
yaziThemes
|
||||
} from '../variables/yazi';
|
||||
const util = require( './util' );
|
||||
|
||||
const renderColourAsRGB = util.renderColourAsRGB;
|
||||
const renderColourAsRGBA = util.renderColourAsRGBA;
|
||||
@@ -27,7 +9,9 @@ const renderColourAsHex = util.renderColourAsHex;
|
||||
// │ Theme generator (returns theme as object) │
|
||||
// ╰───────────────────────────────────────────────╯
|
||||
// ───────────────────────────────────────────────────────────────────
|
||||
export const generateTheme = ( theme: string, wallpaper: string, lockpaper: string, palette: Color[] ) => {
|
||||
module.exports.generateTheme = (
|
||||
theme, wallpaper, lockpaper, palette
|
||||
) => {
|
||||
return {
|
||||
'wallpaper-path': wallpaper,
|
||||
'lockpaper-path': lockpaper,
|
||||
@@ -67,14 +51,30 @@ export const generateTheme = ( theme: string, wallpaper: string, lockpaper: stri
|
||||
'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 ] ) ),
|
||||
'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 ] ),
|
||||
@@ -172,6 +172,316 @@ export const generateTheme = ( theme: string, wallpaper: string, lockpaper: stri
|
||||
// ┌ ┐
|
||||
// │ Path to this repo on disk │
|
||||
// └ ┘
|
||||
'path-to-dotfiles': __dirname.slice( 0, __dirname.length - 5 )
|
||||
'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',
|
||||
};
|
||||
@@ -1,41 +1,24 @@
|
||||
import chalk from 'chalk';
|
||||
import colorThief from '@janishutz/colorthief';
|
||||
import fs from 'fs';
|
||||
import inquirer from 'inquirer';
|
||||
import mustache from 'mustache';
|
||||
import path from 'path';
|
||||
import util from './util';
|
||||
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 chalk = require( 'chalk' ).default;
|
||||
const inquirer = require( 'inquirer' ).default;
|
||||
|
||||
const build = ( wallpaper: string, lockpaper: string, theme: string ) => {
|
||||
const build = ( wallpaper, lockpaper, theme ) => {
|
||||
console.log( '\n=> Extracting colours' );
|
||||
// Extract colour palette from chosen wallpaper using Color-Thief
|
||||
colorThief.getPalette( wallpaper, 20 ).then( palette => {
|
||||
palette = util.removeUselessColours( palette );
|
||||
|
||||
// Define view options (for rendering with mustache)
|
||||
if ( theme === 'test' ) {
|
||||
palette = [
|
||||
[
|
||||
255,
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
255,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
0,
|
||||
255
|
||||
]
|
||||
];
|
||||
palette = [ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ];
|
||||
}
|
||||
|
||||
console.log( 'The following colours will be used based on your wallpaper: ' );
|
||||
let col = palette[ 0 ];
|
||||
|
||||
console.log( ' => Primary accent colour: ' + chalk.rgb( col[ 0 ], col[ 1 ], col[ 2 ] )( util.renderColourAsHex( col ) ) );
|
||||
col = palette[ 1 ];
|
||||
console.log( ' => Secondary accent colour: ' + chalk.rgb( col[ 0 ], col[ 1 ], col[ 2 ] )( util.renderColourAsHex( col ) ) );
|
||||
@@ -43,24 +26,21 @@ const build = ( wallpaper: string, lockpaper: string, theme: string ) => {
|
||||
console.log( ' => Tertiary accent colour: ' + chalk.rgb( col[ 0 ], col[ 1 ], col[ 2 ] )( util.renderColourAsHex( col ) ) );
|
||||
|
||||
inquirer.prompt( [{
|
||||
'type': 'confirm',
|
||||
'name': 'confirm-proceed-build',
|
||||
'message': 'Okay to proceed with these colours?'
|
||||
type: 'confirm',
|
||||
name: 'confirm-proceed-build',
|
||||
message: 'Okay to proceed with these colours?'
|
||||
} ] ).then( answer => {
|
||||
if ( answer['confirm-proceed-build'] ) proceedWithBuild( wallpaper, lockpaper, theme, palette );
|
||||
else {
|
||||
// Have the user pick any other of the extracted colours instead
|
||||
let counter = -1;
|
||||
|
||||
const colourOptions = palette.map( c => {
|
||||
counter++;
|
||||
|
||||
return {
|
||||
'name': chalk.rgb( c[ 0 ], c[ 1 ], c[ 2 ] )( util.renderColourAsHex( c ) ),
|
||||
'value': counter
|
||||
};
|
||||
} );
|
||||
|
||||
name: chalk.rgb( c[ 0 ], c[ 1 ], c[ 2 ] )( util.renderColourAsHex( c ) ),
|
||||
value: counter
|
||||
}
|
||||
} )
|
||||
inquirer.prompt( [
|
||||
{
|
||||
'type': 'list',
|
||||
@@ -81,31 +61,24 @@ const build = ( wallpaper: string, lockpaper: string, theme: string ) => {
|
||||
'name': 'tertiary'
|
||||
}
|
||||
] ).then( result => {
|
||||
const p = [
|
||||
palette[ result.primary ],
|
||||
palette[ result.secondary ],
|
||||
palette[ result.tertiary ]
|
||||
];
|
||||
const p = [ palette[ result.primary ], palette[ result.secondary ], palette[ result.tertiary ] ];
|
||||
|
||||
proceedWithBuild( wallpaper, lockpaper, theme, p );
|
||||
} )
|
||||
.catch( e => {
|
||||
} ).catch( e => {
|
||||
console.error( e );
|
||||
process.exit( 1 );
|
||||
} );
|
||||
}
|
||||
} )
|
||||
.catch( e => {
|
||||
} ).catch( e => {
|
||||
console.error( e );
|
||||
process.exit( 1 );
|
||||
} );
|
||||
} )
|
||||
.catch( e => {
|
||||
} ).catch( e => {
|
||||
console.error( e );
|
||||
console.error( '\n=> Failed to load image or retrieve colour palette from it' );
|
||||
process.exit( 1 );
|
||||
} );
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const proceedWithBuild = ( wallpaper, lockpaper, theme, palette ) => {
|
||||
@@ -119,13 +92,7 @@ const proceedWithBuild = ( wallpaper, lockpaper, theme, palette ) => {
|
||||
|
||||
// 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'
|
||||
] );
|
||||
const fileList = util.treeWalker( path.join( __dirname, '/../../renderable/' ), '*', [ 'node_modules', '@girs', '.gitignore', '.git', 'flavours' ] );
|
||||
|
||||
for (let index = 0; index < fileList.length; index++) {
|
||||
try {
|
||||
@@ -138,7 +105,7 @@ const proceedWithBuild = ( wallpaper, lockpaper, theme, palette ) => {
|
||||
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' );
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} templatePath - absolute path to config directory
|
||||
@@ -151,18 +118,15 @@ const render = ( templatePath, view, originalDir = 'renderable', newDir = 'confi
|
||||
// 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
|
||||
recursive: true,
|
||||
} );
|
||||
} catch ( e ) {
|
||||
console.error( e );
|
||||
}
|
||||
|
||||
fs.writeFileSync( outPath, mustache.render( template, view ) );
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = build;
|
||||
218
build/helpers/util.js
Normal file
218
build/helpers/util.js
Normal file
@@ -0,0 +1,218 @@
|
||||
const convert = require( 'color-convert' );
|
||||
|
||||
const fs = require( 'fs' );
|
||||
|
||||
const path = require( 'path' );
|
||||
|
||||
/**
|
||||
* Recursively find all files with extension in a directory
|
||||
* @param {string} dir The directory to search. Either absolute or relative path
|
||||
* @param {string} extension The file extension to look for
|
||||
* @returns {string[]} returns a list of html files with their full path
|
||||
*/
|
||||
const treeWalker = (
|
||||
dir, extension, ignoreList
|
||||
) => {
|
||||
const ls = fs.readdirSync( dir );
|
||||
const fileList = [];
|
||||
|
||||
for ( let file in ls ) {
|
||||
if ( fs.statSync( path.join( dir, ls[ file ] ) ).isDirectory() ) {
|
||||
// Filter ignored directories
|
||||
if ( ignoreList === undefined || !ignoreList.includes( ls[ file ] ) ) {
|
||||
const newFiles = treeWalker(
|
||||
path.join( dir, ls[ file ] ), extension, ignoreList
|
||||
);
|
||||
|
||||
for ( let file = 0; file < newFiles.length; file++ ) {
|
||||
fileList.push( newFiles[ file ] );
|
||||
}
|
||||
}
|
||||
} else if ( extension == '*' || ls[ file ].includes( extension ) ) {
|
||||
if ( ignoreList === undefined || !ignoreList.includes( ls[ file ] ) ) {
|
||||
fileList.push( path.join( dir, ls[ file ] ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return fileList;
|
||||
};
|
||||
|
||||
const renderColourAsHex = colour => {
|
||||
return '#' + convert.default.rgb.hex(
|
||||
colour[ 0 ], colour[ 1 ], colour[ 2 ]
|
||||
);
|
||||
};
|
||||
|
||||
const renderColourAsRGB = colour => {
|
||||
return `rgb(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] })`;
|
||||
};
|
||||
|
||||
const renderColourAsRGBA = ( colour, ambiance ) => {
|
||||
return `rgba(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance })`;
|
||||
};
|
||||
|
||||
const renderColourAsRGBHex = colour => {
|
||||
const hexCol = convert.default.rgb.hex(
|
||||
colour[ 0 ], colour[ 1 ], colour[ 2 ]
|
||||
);
|
||||
|
||||
return `rgb(${ hexCol })`.toLowerCase();
|
||||
};
|
||||
|
||||
function decimalToHex ( decimal ) {
|
||||
const hexValue = Math.round( decimal * 255 );
|
||||
|
||||
return hexValue.toString( 16 ).padStart( 2, '0' );
|
||||
}
|
||||
|
||||
const renderColourAsRGBAHex = ( colour, ambiance ) => {
|
||||
const hexCol = convert.default.rgb.hex(
|
||||
colour[ 0 ], colour[ 1 ], colour[ 2 ]
|
||||
);
|
||||
|
||||
return `rgba(${ hexCol }${ decimalToHex( ambiance ) })`.toLowerCase();
|
||||
};
|
||||
|
||||
const removeUselessColours = palette => {
|
||||
const p = [];
|
||||
|
||||
for ( let i = 0; i < palette.length; i++ ) {
|
||||
const el = palette[ i ];
|
||||
const luminance = calculateLuminance( palette[ i ] );
|
||||
|
||||
if ( luminance < 210 && luminance > 40 ) {
|
||||
p.push( palette[ i ] );
|
||||
}
|
||||
|
||||
for ( let j = 0; j < el.length; j++ ) {
|
||||
if ( el[j] > 70 ) {
|
||||
p.push( palette[ i ] );
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return p;
|
||||
};
|
||||
|
||||
const calculateLuminance = colour => {
|
||||
return colour[ 0 ] + colour[ 1 ] + colour[ 2 ] / 3;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Replace the colours with variable names
|
||||
*/
|
||||
const replacements = {
|
||||
'#0f1011': '@bg',
|
||||
'rgba(9, 9, 10, 0.9)': '@bg_rgba_07',
|
||||
'rgba(26, 28, 30, 0.3)': '@bg_rgba_05',
|
||||
'#000': '@bg_accent',
|
||||
'#000000': '@bg_accent',
|
||||
'rgba(0, 0, 0, 0.7)': '@bg_accent_rgba_07',
|
||||
'rgba(0, 0, 0, 0.6)': '@bg_accent_rgba_06',
|
||||
'rgba(0, 0, 0, 0.5)': '@bg_accent_rgba_05',
|
||||
'rgba(0, 0, 0, 0.4)': '@bg_accent_rgba_04',
|
||||
'rgba(0, 0, 0, 0.3)': '@bg_accent_rgba_03',
|
||||
'rgba(0, 0, 0, 0.12)': '@bg_accent_rgba_015',
|
||||
'rgba(0, 0, 0, 0.08)': '@bg_accent_rgba_01',
|
||||
'rgba(9, 9, 10, 0.9)': '@bg_inactive',
|
||||
'#80868b': '@inactive',
|
||||
'rgba(128, 134, 139, 0.7)': '@inactive_rgba_07',
|
||||
'rgba(128, 134, 139, 0.5)': '@inactive_rgba_05',
|
||||
'rgba(128, 134, 139, 0.3)': '@inactive_rgba_03',
|
||||
'rgba(128, 134, 139, 0.2)': '@inactive_rgba_02',
|
||||
// '#555A': '@shadow_rgba',
|
||||
// '#555': '@shadow',
|
||||
'#387db7': '@accent',
|
||||
'rgba(56, 125, 183, 0.5)': '@accent_rgba_05',
|
||||
'rgba(56, 125, 183, 0.32)': '@accent_rgba_03',
|
||||
'rgba(56, 125, 183, 0.24)': '@accent_rgba_02',
|
||||
'rgba(56, 125, 183, 0.16)': '@accent_rgba_015',
|
||||
'rgba(56, 125, 183, 0.12)': '@accent_rgba_011',
|
||||
'rgba(56, 125, 183, 0.08)': '@accent_rgba_007',
|
||||
'#1a1a1b': '@accent_gradient_5',
|
||||
'#1f1f21': '@accent_gradient_4',
|
||||
'#1a2530': '@accent_gradient_3',
|
||||
'#1c2c3b': '@accent_gradient_2',
|
||||
'#1e3040': '@accent_gradient_1',
|
||||
'#4887bd': '@accent_gradient_inverse_1',
|
||||
'#508dc0': '@accent_gradient_inverse_2',
|
||||
'#5892c3': '@accent_gradient_inverse_3',
|
||||
'#673ab7': '@accent2',
|
||||
'rgba(103, 58, 183, 0.12)': '@accent2_rgba_015',
|
||||
'#fff': '@fg_accent',
|
||||
'rgba(255, 255, 255, 0.7)': '@fg_accent_rgba_07',
|
||||
'rgba(255, 255, 255, 0.6)': '@fg_accent_rgba_06',
|
||||
'rgba(255, 255, 255, 0.5)': '@fg_accent_rgba_05',
|
||||
'rgba(255, 255, 255, 0.3)': '@fg_accent_rgba_03',
|
||||
'rgba(255, 255, 255, 0.2)': '@fg_accent_rgba_02',
|
||||
'#9e9e9e': '@fg',
|
||||
'rgba(158, 158, 158, 0.7)': '@fg_rgba_07',
|
||||
'rgba(158, 158, 158, 0.6)': '@fg_rgba_06',
|
||||
'rgba(158, 158, 158, 0.5)': '@fg_rgba_05',
|
||||
'rgba(158, 158, 158, 0.3)': '@fg_rgba_03',
|
||||
'rgba(158, 158, 158, 0.2)': '@fg_rgba_02',
|
||||
'rgba(158, 158, 158, 0.1168)': '@fg_rgba_01'
|
||||
};
|
||||
|
||||
const themePreProcessor = (
|
||||
file, replacement, out
|
||||
) => {
|
||||
const colours = Object.keys( replacements );
|
||||
|
||||
let data = '' + fs.readFileSync( file );
|
||||
|
||||
for ( let index = 0; index < colours.length; index++ ) {
|
||||
const colour = colours[index];
|
||||
|
||||
data = data.replaceAll( colour, replacements[ colour ] );
|
||||
}
|
||||
|
||||
const outPath = file.replace( replacement, out );
|
||||
|
||||
try {
|
||||
fs.mkdirSync( path.dirname( outPath ), {
|
||||
'recursive': true,
|
||||
} );
|
||||
} catch ( e ) {
|
||||
console.error( e );
|
||||
}
|
||||
|
||||
fs.writeFileSync( outPath, data );
|
||||
};
|
||||
|
||||
const getGradientColour = (
|
||||
colour, index, multiplier
|
||||
) => {
|
||||
if ( index === 0 ) {
|
||||
return [
|
||||
colour[ 0 ] * multiplier,
|
||||
colour[ 1 ] * multiplier,
|
||||
colour[ 2 ] * multiplier
|
||||
];
|
||||
}
|
||||
|
||||
const gradient = getGradientColour(
|
||||
colour, index - 1, multiplier
|
||||
);
|
||||
|
||||
return [
|
||||
Math.min( 255, gradient[ 0 ] * multiplier ),
|
||||
Math.min( 255, gradient[ 1 ] * multiplier ),
|
||||
Math.min( 255, gradient[ 2 ] * multiplier )
|
||||
];
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
treeWalker,
|
||||
renderColourAsHex,
|
||||
renderColourAsRGB,
|
||||
renderColourAsRGBA,
|
||||
renderColourAsRGBHex,
|
||||
renderColourAsRGBAHex,
|
||||
themePreProcessor,
|
||||
getGradientColour,
|
||||
removeUselessColours
|
||||
};
|
||||
@@ -8,7 +8,7 @@
|
||||
},
|
||||
"license": "GPL-3.0-or-later",
|
||||
"author": "janishutz",
|
||||
"type": "module",
|
||||
"type": "commonjs",
|
||||
"main": "build.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
@@ -19,12 +19,5 @@
|
||||
"color-convert": "^3.0.1",
|
||||
"inquirer": "^12.5.0",
|
||||
"mustache": "^4.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.2",
|
||||
"@stylistic/eslint-plugin": "^5.7.1",
|
||||
"@types/node": "^25.2.0",
|
||||
"eslint-plugin-vue": "^10.7.0",
|
||||
"typescript-eslint": "^8.54.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
import {
|
||||
Color
|
||||
} from '../types/colours';
|
||||
import convert from 'color-convert';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import {
|
||||
replacements
|
||||
} from '../variables/replacements';
|
||||
|
||||
/**
|
||||
* Recursively find all files with extension in a directory
|
||||
* @param {string} dir The directory to search. Either absolute or relative path
|
||||
* @param {string} extension The file extension to look for
|
||||
* @returns {string[]} returns a list of html files with their full path
|
||||
*/
|
||||
const treeWalker = ( dir: string, extension: string, ignoreList: string[] ): string[] => {
|
||||
const ls = fs.readdirSync( dir );
|
||||
const fileList = [];
|
||||
|
||||
for ( const file in ls ) {
|
||||
if ( fs.statSync( path.join( dir, ls[ file ] ) ).isDirectory() ) {
|
||||
// Filter ignored directories
|
||||
if ( ignoreList === undefined || !ignoreList.includes( ls[ file ] ) ) {
|
||||
const newFiles = treeWalker( path.join( dir, ls[ file ] ), extension, ignoreList );
|
||||
|
||||
for ( let file = 0; file < newFiles.length; file++ ) {
|
||||
fileList.push( newFiles[ file ] );
|
||||
}
|
||||
}
|
||||
} else if ( extension == '*' || ls[ file ].includes( extension ) ) {
|
||||
if ( ignoreList === undefined || !ignoreList.includes( ls[ file ] ) ) {
|
||||
fileList.push( path.join( dir, ls[ file ] ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return fileList;
|
||||
};
|
||||
|
||||
const renderColourAsHex = ( colour: Color ) => {
|
||||
return '#' + convert.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
|
||||
};
|
||||
|
||||
const renderColourAsRGB = ( colour: Color ) => {
|
||||
return `rgb(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] })`;
|
||||
};
|
||||
|
||||
const renderColourAsRGBA = ( colour: Color, ambiance: number ) => {
|
||||
return `rgba(${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance })`;
|
||||
};
|
||||
|
||||
const renderColourAsRGBHex = ( colour: Color ) => {
|
||||
const hexCol = convert.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
|
||||
|
||||
return `rgb(${ hexCol })`.toLowerCase();
|
||||
};
|
||||
|
||||
function decimalToHex ( decimal: number ) {
|
||||
const hexValue = Math.round( decimal * 255 );
|
||||
|
||||
return hexValue.toString( 16 ).padStart( 2, '0' );
|
||||
}
|
||||
|
||||
const renderColourAsRGBAHex = ( colour: Color, ambiance: number ) => {
|
||||
const hexCol = convert.rgb.hex( colour[ 0 ], colour[ 1 ], colour[ 2 ] );
|
||||
|
||||
return `rgba(${ hexCol }${ decimalToHex( ambiance ) })`.toLowerCase();
|
||||
};
|
||||
|
||||
const removeUselessColours = ( palette: Color[] ) => {
|
||||
const p = [];
|
||||
|
||||
for ( let i = 0; i < palette.length; i++ ) {
|
||||
const el = palette[ i ];
|
||||
const luminance = calculateLuminance( palette[ i ] );
|
||||
|
||||
if ( luminance < 210 && luminance > 40 ) {
|
||||
p.push( palette[ i ] );
|
||||
}
|
||||
|
||||
for ( let j = 0; j < el.length; j++ ) {
|
||||
if ( el[j] > 70 ) {
|
||||
p.push( palette[ i ] );
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return p;
|
||||
};
|
||||
|
||||
const calculateLuminance = ( colour: Color ) => {
|
||||
return colour[ 0 ] + colour[ 1 ] + ( colour[ 2 ] / 3 );
|
||||
};
|
||||
|
||||
|
||||
const themePreProcessor = ( file: string, replacement: string, out: string ) => {
|
||||
const colours = Object.keys( replacements );
|
||||
|
||||
let data = '' + fs.readFileSync( file );
|
||||
|
||||
for ( let index = 0; index < colours.length; index++ ) {
|
||||
const colour = colours[index];
|
||||
|
||||
data = data.replaceAll( colour, replacements[ colour ] );
|
||||
}
|
||||
|
||||
const outPath = file.replace( replacement, out );
|
||||
|
||||
try {
|
||||
fs.mkdirSync( path.dirname( outPath ), {
|
||||
'recursive': true
|
||||
} );
|
||||
} catch ( e ) {
|
||||
console.error( e );
|
||||
}
|
||||
|
||||
fs.writeFileSync( outPath, data );
|
||||
};
|
||||
|
||||
const getGradientColour = ( colour: Color, index: number, multiplier: number ): Color => {
|
||||
if ( index === 0 ) {
|
||||
return [
|
||||
colour[ 0 ] * multiplier,
|
||||
colour[ 1 ] * multiplier,
|
||||
colour[ 2 ] * multiplier
|
||||
];
|
||||
}
|
||||
|
||||
const gradient = getGradientColour( colour, index - 1, multiplier );
|
||||
|
||||
return [
|
||||
Math.min( 255, gradient[ 0 ] * multiplier ),
|
||||
Math.min( 255, gradient[ 1 ] * multiplier ),
|
||||
Math.min( 255, gradient[ 2 ] * multiplier )
|
||||
];
|
||||
};
|
||||
|
||||
export default {
|
||||
treeWalker,
|
||||
renderColourAsHex,
|
||||
renderColourAsRGB,
|
||||
renderColourAsRGBA,
|
||||
renderColourAsRGBHex,
|
||||
renderColourAsRGBAHex,
|
||||
themePreProcessor,
|
||||
getGradientColour,
|
||||
removeUselessColours
|
||||
};
|
||||
1
build/src/types/colours.d.ts
vendored
1
build/src/types/colours.d.ts
vendored
@@ -1 +0,0 @@
|
||||
export type Color = number[];
|
||||
@@ -1,266 +0,0 @@
|
||||
import {
|
||||
Color
|
||||
} from '../types/colours';
|
||||
|
||||
export const colours: {
|
||||
[key: string]: {
|
||||
[key: string]: Color
|
||||
}
|
||||
} = {
|
||||
'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
|
||||
]
|
||||
}
|
||||
};
|
||||
@@ -1,27 +0,0 @@
|
||||
export const fonts: {
|
||||
[key: string]: {
|
||||
[key]: string
|
||||
}
|
||||
} = {
|
||||
'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'
|
||||
}
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
export const gradientMultipliers: {
|
||||
[key: string]: number
|
||||
} = {
|
||||
'nordic': 0.9,
|
||||
'deep-dark': 0.8,
|
||||
'material': 0.85,
|
||||
'light': 1.1,
|
||||
'bright': 1.15,
|
||||
'test': 0.75
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
export const iconTheme: {
|
||||
[key: string]: string
|
||||
} = {
|
||||
'nordic': 'Candy',
|
||||
'deep-dark': 'Candy',
|
||||
'material': 'Candy',
|
||||
'light': 'Candy',
|
||||
'bright': 'Candy'
|
||||
};
|
||||
@@ -1,56 +0,0 @@
|
||||
/*
|
||||
* Replace the colours with variable names
|
||||
*/
|
||||
export const replacements: {
|
||||
[key: string]: string
|
||||
} = {
|
||||
'#0f1011': '@bg',
|
||||
'rgba(9, 9, 10, 0.9)': '@bg_rgba_07',
|
||||
'rgba(26, 28, 30, 0.3)': '@bg_rgba_05',
|
||||
'#000': '@bg_accent',
|
||||
'#000000': '@bg_accent',
|
||||
'rgba(0, 0, 0, 0.7)': '@bg_accent_rgba_07',
|
||||
'rgba(0, 0, 0, 0.6)': '@bg_accent_rgba_06',
|
||||
'rgba(0, 0, 0, 0.5)': '@bg_accent_rgba_05',
|
||||
'rgba(0, 0, 0, 0.4)': '@bg_accent_rgba_04',
|
||||
'rgba(0, 0, 0, 0.3)': '@bg_accent_rgba_03',
|
||||
'rgba(0, 0, 0, 0.12)': '@bg_accent_rgba_015',
|
||||
'rgba(0, 0, 0, 0.08)': '@bg_accent_rgba_01',
|
||||
'#80868b': '@inactive',
|
||||
'rgba(128, 134, 139, 0.7)': '@inactive_rgba_07',
|
||||
'rgba(128, 134, 139, 0.5)': '@inactive_rgba_05',
|
||||
'rgba(128, 134, 139, 0.3)': '@inactive_rgba_03',
|
||||
'rgba(128, 134, 139, 0.2)': '@inactive_rgba_02',
|
||||
// '#555A': '@shadow_rgba',
|
||||
// '#555': '@shadow',
|
||||
'#387db7': '@accent',
|
||||
'rgba(56, 125, 183, 0.5)': '@accent_rgba_05',
|
||||
'rgba(56, 125, 183, 0.32)': '@accent_rgba_03',
|
||||
'rgba(56, 125, 183, 0.24)': '@accent_rgba_02',
|
||||
'rgba(56, 125, 183, 0.16)': '@accent_rgba_015',
|
||||
'rgba(56, 125, 183, 0.12)': '@accent_rgba_011',
|
||||
'rgba(56, 125, 183, 0.08)': '@accent_rgba_007',
|
||||
'#1a1a1b': '@accent_gradient_5',
|
||||
'#1f1f21': '@accent_gradient_4',
|
||||
'#1a2530': '@accent_gradient_3',
|
||||
'#1c2c3b': '@accent_gradient_2',
|
||||
'#1e3040': '@accent_gradient_1',
|
||||
'#4887bd': '@accent_gradient_inverse_1',
|
||||
'#508dc0': '@accent_gradient_inverse_2',
|
||||
'#5892c3': '@accent_gradient_inverse_3',
|
||||
'#673ab7': '@accent2',
|
||||
'rgba(103, 58, 183, 0.12)': '@accent2_rgba_015',
|
||||
'#fff': '@fg_accent',
|
||||
'rgba(255, 255, 255, 0.7)': '@fg_accent_rgba_07',
|
||||
'rgba(255, 255, 255, 0.6)': '@fg_accent_rgba_06',
|
||||
'rgba(255, 255, 255, 0.5)': '@fg_accent_rgba_05',
|
||||
'rgba(255, 255, 255, 0.3)': '@fg_accent_rgba_03',
|
||||
'rgba(255, 255, 255, 0.2)': '@fg_accent_rgba_02',
|
||||
'#9e9e9e': '@fg',
|
||||
'rgba(158, 158, 158, 0.7)': '@fg_rgba_07',
|
||||
'rgba(158, 158, 158, 0.6)': '@fg_rgba_06',
|
||||
'rgba(158, 158, 158, 0.5)': '@fg_rgba_05',
|
||||
'rgba(158, 158, 158, 0.3)': '@fg_rgba_03',
|
||||
'rgba(158, 158, 158, 0.2)': '@fg_rgba_02',
|
||||
'rgba(158, 158, 158, 0.1168)': '@fg_rgba_01'
|
||||
};
|
||||
@@ -1,9 +0,0 @@
|
||||
export const yaziThemes: {
|
||||
[key: string]: string
|
||||
} = {
|
||||
'nordic': 'tokyo-night',
|
||||
'deep-dark': 'vscode-dark-modern',
|
||||
'material': 'dracula',
|
||||
'light': 'vscode-light-modern',
|
||||
'bright': 'vscode-light-modern'
|
||||
};
|
||||
19
config/ags/launcher/app.ts
Normal file
19
config/ags/launcher/app.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { App } from "astal/gtk4"
|
||||
import style from "./style.scss"
|
||||
import Bar from "./ui/Launcher"
|
||||
|
||||
App.start({
|
||||
css: style,
|
||||
main() {
|
||||
App.get_monitors().map(Bar)
|
||||
},
|
||||
requestHandler(request, res) {
|
||||
if ( request === 'open' ) {
|
||||
res( 'ok' );
|
||||
} else if ( request === 'close' ) {
|
||||
res( 'ok' );
|
||||
} else if ( request === 'toggle' ) {
|
||||
res( 'ok' );
|
||||
}
|
||||
}
|
||||
})
|
||||
75
config/ags/launcher/definitions/components.d.ts
vendored
Normal file
75
config/ags/launcher/definitions/components.d.ts
vendored
Normal file
@@ -0,0 +1,75 @@
|
||||
/*
|
||||
* dotfiles - components.d.ts
|
||||
*
|
||||
* Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
|
||||
* https://janishutz.com, development@janishutz.com
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import type { UIComponent, ResultElement } from "./rendering";
|
||||
|
||||
|
||||
export interface App extends ResultElement {
|
||||
/**
|
||||
* The app start command that will be executed
|
||||
*/
|
||||
command: string;
|
||||
}
|
||||
|
||||
// TODO: Finish
|
||||
export interface DictionaryEntry extends ResultElement {
|
||||
/**
|
||||
* Execute no command
|
||||
*/
|
||||
action: null;
|
||||
|
||||
|
||||
/**
|
||||
* The dictionary definition
|
||||
*/
|
||||
definition: string;
|
||||
}
|
||||
|
||||
export interface CMDOutput extends ResultElement {
|
||||
/**
|
||||
* Stdout from the command that was run
|
||||
*/
|
||||
result: string;
|
||||
}
|
||||
|
||||
export interface Calculation extends ResultElement {
|
||||
/**
|
||||
* THe calculation result
|
||||
*/
|
||||
result: string;
|
||||
}
|
||||
|
||||
|
||||
/* ************* *
|
||||
* UI Components *
|
||||
* ************* */
|
||||
|
||||
export interface LargeUIComponent extends UIComponent {
|
||||
/**
|
||||
* The number of items to display per line. Image size will automatically be scaled
|
||||
* based on width
|
||||
*/
|
||||
itemsPerLine: number;
|
||||
}
|
||||
|
||||
export interface MediumUIComponent extends UIComponent {}
|
||||
|
||||
export interface ListUIComponent extends UIComponent {}
|
||||
|
||||
export interface DictionaryUIComponent extends UIComponent {
|
||||
elements: DictionaryEntry[];
|
||||
}
|
||||
|
||||
export interface CMDOutputUIComponent extends UIComponent {
|
||||
elements: CMDOutput[];
|
||||
}
|
||||
|
||||
export interface CalculationUIComponent extends UIComponent {
|
||||
elements: Calculation[];
|
||||
}
|
||||
60
config/ags/launcher/definitions/rendering.d.ts
vendored
Normal file
60
config/ags/launcher/definitions/rendering.d.ts
vendored
Normal file
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
* dotfiles - rendering.d.ts
|
||||
*
|
||||
* Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
|
||||
* https://janishutz.com, development@janishutz.com
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
export interface UIComponent {
|
||||
/**
|
||||
* The title of the component (like a category name), shown above small divider line
|
||||
*/
|
||||
title: string;
|
||||
|
||||
/**
|
||||
* ResultElement list, made up of all elements that should be shown
|
||||
*/
|
||||
elements: ResultElement[];
|
||||
|
||||
/**
|
||||
* Choose how many elements to show before truncating (will expand when command is run)
|
||||
*/
|
||||
truncate: number;
|
||||
|
||||
/**
|
||||
* The weight of the element (determines order)
|
||||
*/
|
||||
weight: number;
|
||||
}
|
||||
|
||||
|
||||
export interface ResultElement {
|
||||
/**
|
||||
* The name of the result element
|
||||
*/
|
||||
name: string;
|
||||
|
||||
/**
|
||||
* Path to the image to be displayed in the UI
|
||||
*/
|
||||
img: string;
|
||||
|
||||
/**
|
||||
* The weight of the element (determines order)
|
||||
*/
|
||||
weight: number;
|
||||
|
||||
/**
|
||||
* The action to be executed
|
||||
*/
|
||||
action: Action;
|
||||
|
||||
/**
|
||||
* The font size of the text (optional)
|
||||
*/
|
||||
fontSize: number | undefined;
|
||||
}
|
||||
|
||||
type Action = '' | null;
|
||||
32
config/ags/launcher/helpers/fzf/dist/fzf.js
vendored
Normal file
32
config/ags/launcher/helpers/fzf/dist/fzf.js
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
"use strict";
|
||||
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||||
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
const fast_fuzzy_1 = require("fast-fuzzy");
|
||||
const fs_1 = __importDefault(require("fs"));
|
||||
// Get list source from args
|
||||
// ARGS: type source
|
||||
// Then we read query from stdin to not restart indexing & the like for each keystroke
|
||||
let data = [];
|
||||
if (process.argv[2] === 'fs') {
|
||||
if (process.argv[3].includes('.json')) {
|
||||
data = JSON.parse('' + fs_1.default.readFileSync(process.argv[3]));
|
||||
}
|
||||
else if (process.argv[3].includes('.txt')) {
|
||||
data = ('' + fs_1.default.readFileSync(process.argv[3])).split(',');
|
||||
}
|
||||
else if (fs_1.default.statSync(process.argv[3]).isDirectory()) {
|
||||
data = fs_1.default.readdirSync(process.argv[3]);
|
||||
}
|
||||
}
|
||||
else if (process.argv[2] === 'arg') {
|
||||
data = process.argv[3].split(',');
|
||||
}
|
||||
else {
|
||||
throw new Error('Invalid argument at position 1. Can be either fs or arg, not ' + process.argv[2]);
|
||||
}
|
||||
process.stdin.on("data", (query) => {
|
||||
// On stdin submit (which the other client will have to support) process data
|
||||
console.log((0, fast_fuzzy_1.search)(query.toString(), data));
|
||||
});
|
||||
18
config/ags/launcher/helpers/fzf/package.json
Normal file
18
config/ags/launcher/helpers/fzf/package.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "fzf",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"license": "ISC",
|
||||
"author": "",
|
||||
"type": "commonjs",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"fast-fuzzy": "^1.12.0"
|
||||
}
|
||||
}
|
||||
27
config/ags/launcher/helpers/fzf/src/fzf.ts
Normal file
27
config/ags/launcher/helpers/fzf/src/fzf.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { search } from 'fast-fuzzy';
|
||||
import fs from 'fs';
|
||||
|
||||
// Get list source from args
|
||||
// ARGS: type source
|
||||
// Then we read query from stdin to not restart indexing & the like for each keystroke
|
||||
|
||||
let data: string[] = [];
|
||||
if ( process.argv[ 2 ] === 'fs' ) {
|
||||
if ( process.argv[ 3 ].includes( '.json' ) ) {
|
||||
data = JSON.parse( '' + fs.readFileSync( process.argv[ 3 ] ) );
|
||||
} else if ( process.argv[ 3 ].includes( '.txt' ) ) {
|
||||
data = ( '' + fs.readFileSync( process.argv[ 3 ] ) ).split( ',' );
|
||||
} else if ( fs.statSync( process.argv[ 3 ] ).isDirectory() ) {
|
||||
data = fs.readdirSync( process.argv[ 3 ] );
|
||||
}
|
||||
} else if ( process.argv[ 2 ] === 'arg' ) {
|
||||
data = process.argv[ 3 ].split( ',' );
|
||||
} else {
|
||||
throw new Error( 'Invalid argument at position 1. Can be either fs or arg, not ' + process.argv[ 2 ] );
|
||||
}
|
||||
|
||||
process.stdin.on( "data", ( query ) => {
|
||||
// On stdin submit (which the other client will have to support) process data
|
||||
|
||||
console.log( search( query.toString(), data ) );
|
||||
} );
|
||||
13
config/ags/launcher/helpers/fzf/tsconfig.json
Normal file
13
config/ags/launcher/helpers/fzf/tsconfig.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist",
|
||||
"allowJs": true,
|
||||
"target": "ES6",
|
||||
"skipLibCheck": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"types": ["node"],
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext"
|
||||
},
|
||||
"include": [ "./src/**/*" ],
|
||||
}
|
||||
20
config/ags/launcher/style.scss
Normal file
20
config/ags/launcher/style.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
|
||||
$fg-color: #{"@theme_fg_color"};
|
||||
$bg-color: #{"@theme_bg_color"};
|
||||
|
||||
window.Bar {
|
||||
background: transparent;
|
||||
color: $fg-color;
|
||||
font-weight: bold;
|
||||
|
||||
>centerbox {
|
||||
background: $bg-color;
|
||||
border-radius: 10px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
32
config/ags/launcher/ui/Launcher.tsx
Normal file
32
config/ags/launcher/ui/Launcher.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { App, Astal, Gtk, Gdk } from "astal/gtk4"
|
||||
import { Variable } from "astal"
|
||||
|
||||
function hide() {
|
||||
App.get_window("launcher")!.hide()
|
||||
}
|
||||
|
||||
export default function Launcher(monitor: Gdk.Monitor) {
|
||||
const { CENTER } = Gtk.Align
|
||||
const width = Variable(1000)
|
||||
|
||||
const text = Variable("")
|
||||
|
||||
return <window
|
||||
name="launcher"
|
||||
anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM}
|
||||
exclusivity={Astal.Exclusivity.IGNORE}
|
||||
keymode={Astal.Keymode.ON_DEMAND}
|
||||
application={App}
|
||||
onShow={(self) => {
|
||||
text.set("")
|
||||
width.set(self.get_current_monitor().get_width_mm())
|
||||
}}
|
||||
onKeyPressed={(self, keyval, keycode) => {
|
||||
print( 'key pressed: ' + keyval + ' which has code ' + keycode );
|
||||
}}>
|
||||
<box>
|
||||
|
||||
</box>
|
||||
|
||||
</window>
|
||||
}
|
||||
3
config/ags/launcher/ui/components/calc.tsx
Normal file
3
config/ags/launcher/ui/components/calc.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export default () => {
|
||||
return <box></box>
|
||||
}
|
||||
12
config/ags/launcher/util/file.ts
Normal file
12
config/ags/launcher/util/file.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
/*
|
||||
* dotfiles - file.ts
|
||||
*
|
||||
* Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
|
||||
* https://janishutz.com, development@janishutz.com
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import { readFileAsync, writeFileAsync, monitorFile } from "astal";
|
||||
|
||||
|
||||
24
config/ags/launcher/util/fzf.ts
Normal file
24
config/ags/launcher/util/fzf.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
* dotfiles - fzf.ts
|
||||
*
|
||||
* Created by Janis Hutz 03/30/2025, Licensed under the GPL V3 License
|
||||
* https://janishutz.com, development@janishutz.com
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import AstalApps from "gi://AstalApps?version=0.1"
|
||||
|
||||
// TODO: For all astal apps, read a global colours config file
|
||||
const fzfApplication = ( query: string ) => {
|
||||
const apps = new AstalApps.Apps()
|
||||
return apps.fuzzy_query( query );
|
||||
}
|
||||
|
||||
const fzfCmd = ( query: string ) => {
|
||||
|
||||
}
|
||||
|
||||
export default {
|
||||
fzfApplication
|
||||
}
|
||||
51
config/ags/launcher/util/search.ts
Normal file
51
config/ags/launcher/util/search.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
/*
|
||||
* dotfiles - search.ts
|
||||
*
|
||||
* Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
|
||||
* https://janishutz.com, development@janishutz.com
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import subprocessRunner from "./subprocessRunner";
|
||||
import fzf from "./fzf";
|
||||
|
||||
const preprocess = ( input: string ) => {
|
||||
// Find out what kind of instruction to process
|
||||
if ( input.startsWith( ':' ) ) {
|
||||
processCommand( input.substring( 1, input.indexOf( ' ' ) ), input.substring( input.indexOf( ' ' ) ).split( ' ' ) );
|
||||
} else if ( input.startsWith( '!' ) ) {
|
||||
processBang( input.substring( 1, input.indexOf( ' ' ) ), input.substring( input.indexOf( ' ' ) ) );
|
||||
} else {
|
||||
// Determine if entered string is calculation or not
|
||||
// We can easily do that by asking qalc (qalculate cli) if this is fine
|
||||
subprocessRunner.executeCommand( 'qalc "' + input + '"' ).then( out => {
|
||||
// we get a calculation result here
|
||||
print( out );
|
||||
processCalculation( out );
|
||||
} ).catch( err => {
|
||||
processSearch( input );
|
||||
print( err );
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
const processSearch = ( input: string ) => {
|
||||
|
||||
}
|
||||
|
||||
const processCalculation = ( output: string ) => {
|
||||
|
||||
}
|
||||
|
||||
const processCommand = ( cmd: string, args: string[] ) => {
|
||||
|
||||
}
|
||||
|
||||
const processBang = ( bang: string, input: string ) => {
|
||||
|
||||
}
|
||||
|
||||
export default {
|
||||
preprocess
|
||||
}
|
||||
43
config/ags/launcher/util/subprocessRunner.ts
Normal file
43
config/ags/launcher/util/subprocessRunner.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
/*
|
||||
* dotfiles - subprocessRunner.ts
|
||||
*
|
||||
* Created by Janis Hutz 03/22/2025, Licensed under the GPL V3 License
|
||||
* https://janishutz.com, development@janishutz.com
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
import { subprocess, execAsync, Process } from "astal/process";
|
||||
|
||||
// TODO: Get cwd and the likes to then use that to run JavaScript files with node / python with python, etc
|
||||
|
||||
/**
|
||||
* Run a subprocess. If you simply want to run a command that doesn't need continuous updates
|
||||
* run executeCommand instead.
|
||||
* @param cmd - The command to be run
|
||||
* @param onOut - Calback function for stdout of the subprocess
|
||||
* @param onErr - [TODO:description]
|
||||
* @returns [TODO:return]
|
||||
*/
|
||||
const startSubProcess = (
|
||||
cmd: string | string[],
|
||||
onOut: (stdout: string) => void,
|
||||
onErr: (stderr: string) => void | undefined,
|
||||
): Process => {
|
||||
return subprocess( cmd, onOut, onErr );
|
||||
};
|
||||
|
||||
/**
|
||||
* Run a command. If you need continuous updates, run startSubProcess instead
|
||||
* @param cmd - The command to be run. Either a string or an array of strings
|
||||
* @returns A Promise resolving to stdout of the command
|
||||
*/
|
||||
const executeCommand = (cmd: string | string[]): Promise<string> => {
|
||||
return execAsync( cmd );
|
||||
};
|
||||
|
||||
|
||||
export default {
|
||||
startSubProcess,
|
||||
executeCommand
|
||||
}
|
||||
2
config/ags/notifications/.gitignore
vendored
Normal file
2
config/ags/notifications/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
@girs/
|
||||
21
config/ags/notifications/env.d.ts
vendored
Normal file
21
config/ags/notifications/env.d.ts
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
declare const SRC: string
|
||||
|
||||
declare module "inline:*" {
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
|
||||
declare module "*.scss" {
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
|
||||
declare module "*.blp" {
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
|
||||
declare module "*.css" {
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
2
config/astal/.gitignore
vendored
Normal file
2
config/astal/.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
@girs/
|
||||
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
6
config/astal/package.json
Normal file
6
config/astal/package.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "astal-shell",
|
||||
"dependencies": {
|
||||
"astal": "/usr/share/astal/gjs"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user