[Build] Start refactor

This commit is contained in:
2026-02-02 16:01:56 +01:00
parent c38907ec39
commit 10a5c775be
561 changed files with 1936094 additions and 13878 deletions

744
build/eslint.config.mjs Normal file
View File

@@ -0,0 +1,744 @@
import eslint from '@eslint/js';
import globals from 'globals';
import stylistic from '@stylistic/eslint-plugin';
import tseslint from 'typescript-eslint';
import typescript from '@typescript-eslint/eslint-plugin';
import vue from 'eslint-plugin-vue';
const style = {
'plugins': {
'@stylistic': stylistic,
'@stylistic/js': stylistic,
'@stylistic/ts': stylistic
},
'files': [
'**/*.ts',
'**/*.js',
'**/*.mjs',
'**/*.cjs',
'**/*.tsx',
'**/*.jsx'
],
'rules': {
'sort-imports': [
'warn',
{
'ignoreCase': false,
'ignoreDeclarationSort': false,
'ignoreMemberSort': false,
'memberSyntaxSortOrder': [
'none',
'all',
'multiple',
'single'
],
'allowSeparatedGroups': false
}
],
// Formatting
'@stylistic/array-bracket-newline': [
'error',
{
'multiline': false,
'minItems': 2
}
],
'@stylistic/array-bracket-spacing': [
'error',
'always'
],
'@stylistic/array-element-newline': [
'error',
{
'consistent': false,
'multiline': false,
'minItems': 2
}
],
'@stylistic/arrow-parens': [
'error',
'as-needed'
],
'@stylistic/arrow-spacing': [
'error',
{
'before': true,
'after': true
}
],
'@stylistic/block-spacing': [
'error',
'always'
],
'@stylistic/brace-style': [
'error',
'1tbs',
{
'allowSingleLine': false
}
],
'@stylistic/comma-dangle': [
'error',
'never'
],
'@stylistic/comma-spacing': [
'error',
{
'before': false,
'after': true
}
],
'@stylistic/comma-style': [
'error',
'last'
],
'@stylistic/dot-location': [
'error',
'property'
],
'@stylistic/function-call-argument-newline': [
'error',
'consistent'
],
'@stylistic/function-call-spacing': [
'error',
'never'
],
'@stylistic/function-paren-newline': [
'error',
'multiline-arguments'
],
'@stylistic/implicit-arrow-linebreak': [
'error',
'beside'
],
'@stylistic/indent': [
'error',
4
],
'@stylistic/indent-binary-ops': [
'error',
4
],
'@stylistic/key-spacing': [
'error',
{
'beforeColon': false,
'afterColon': true
}
],
'@stylistic/keyword-spacing': [
'error',
{
'before': true,
'after': true
}
],
'@stylistic/lines-between-class-members': [
'error',
'always'
],
'@stylistic/max-len': [
'warn',
{
'code': 140,
'comments': 160,
'ignoreComments': false,
'ignoreUrls': true,
'ignoreStrings': true,
'ignoreTemplateLiterals': true,
'ignoreRegExpLiterals': true
}
],
'@stylistic/max-statements-per-line': [
'error',
{
'max': 1
}
],
'@stylistic/multiline-ternary': [
'error',
'always-multiline'
],
'@stylistic/new-parens': [
'error',
'always'
],
'@stylistic/newline-per-chained-call': 'error',
'@stylistic/no-confusing-arrow': 'error',
'@stylistic/no-extra-parens': [
'error',
'all',
{
'nestedBinaryExpressions': false,
'ternaryOperandBinaryExpressions': false,
'ignoreJSX': 'multi-line',
'nestedConditionalExpressions': false
}
],
'@stylistic/no-extra-semi': 'error',
'@stylistic/no-floating-decimal': 'error',
'@stylistic/no-mixed-operators': 'error',
'@stylistic/no-mixed-spaces-and-tabs': 'error',
'@stylistic/no-multi-spaces': 'error',
'@stylistic/no-multiple-empty-lines': [
'error',
{
'max': 3,
'maxEOF': 2
}
],
'@stylistic/no-tabs': 'error',
'@stylistic/no-trailing-spaces': 'error',
'@stylistic/no-whitespace-before-property': 'error',
'@stylistic/object-curly-newline': [
'error',
{
'multiline': true,
'minProperties': 1
}
],
'@stylistic/object-curly-spacing': [
'error',
'always'
],
'@stylistic/object-property-newline': 'error',
'@stylistic/one-var-declaration-per-line': 'error',
'@stylistic/operator-linebreak': [
'error',
'before'
],
'@stylistic/padded-blocks': [
'error',
{
'blocks': 'never',
'classes': 'always',
'switches': 'never'
}
],
// Padding lines. The most in-depth part of this config
'@stylistic/padding-line-between-statements': [
'error',
// Variables, Constants
{
'blankLine': 'never',
'prev': 'var',
'next': 'var'
},
{
'blankLine': 'never',
'prev': 'let',
'next': 'let'
},
{
'blankLine': 'never',
'prev': 'const',
'next': 'const'
},
{
'blankLine': 'always',
'prev': 'var',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'cjs-import',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'import',
'let',
'return',
'switch',
'throw',
'try',
'var',
'with'
]
},
{
'blankLine': 'always',
'prev': 'let',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'cjs-import',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'import',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
]
},
{
'blankLine': 'always',
'prev': 'const',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'cjs-import',
'class',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'import',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
]
},
// Import
{
'blankLine': 'never',
'prev': 'import',
'next': 'import'
},
{
'blankLine': 'never',
'prev': 'cjs-import',
'next': 'cjs-import'
},
{
'blankLine': 'always',
'prev': [
'block',
'block-like',
'break',
'cjs-export',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
],
'next': 'cjs-import'
},
{
'blankLine': 'always',
'prev': 'cjs-import',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
]
},
{
'blankLine': 'always',
'prev': [
'block',
'block-like',
'break',
'cjs-export',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
],
'next': 'import'
},
{
'blankLine': 'always',
'prev': 'import',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
]
},
// If
{
'blankLine': 'always',
'prev': '*',
'next': 'if'
},
{
'blankLine': 'always',
'prev': 'if',
'next': '*'
},
// For
{
'blankLine': 'always',
'prev': '*',
'next': 'for'
},
{
'blankLine': 'always',
'prev': 'for',
'next': '*'
},
// While
{
'blankLine': 'always',
'prev': '*',
'next': 'while'
},
{
'blankLine': 'always',
'prev': 'while',
'next': '*'
},
// Functions
{
'blankLine': 'always',
'prev': '*',
'next': 'function'
},
{
'blankLine': 'always',
'prev': 'function',
'next': '*'
},
// Block Statements
{
'blankLine': 'always',
'prev': '*',
'next': 'block-like'
},
{
'blankLine': 'always',
'prev': 'block-like',
'next': '*'
},
// Switch
{
'blankLine': 'always',
'prev': '*',
'next': 'switch'
},
{
'blankLine': 'always',
'prev': 'switch',
'next': '*'
},
// Try-Catch
{
'blankLine': 'always',
'prev': '*',
'next': 'try'
},
{
'blankLine': 'always',
'prev': 'try',
'next': '*'
},
// Throw
{
'blankLine': 'always',
'prev': '*',
'next': 'throw'
},
{
'blankLine': 'always',
'prev': 'throw',
'next': '*'
},
// Return
{
'blankLine': 'never',
'prev': 'return',
'next': '*'
},
{
'blankLine': 'always',
'prev': '*',
'next': 'return'
},
// Export
{
'blankLine': 'always',
'prev': '*',
'next': 'export'
},
{
'blankLine': 'always',
'prev': 'export',
'next': '*'
},
{
'blankLine': 'always',
'prev': '*',
'next': 'cjs-export'
},
{
'blankLine': 'always',
'prev': 'cjs-export',
'next': '*'
},
// Classes
{
'blankLine': 'always',
'prev': '*',
'next': 'class'
},
{
'blankLine': 'always',
'prev': 'class',
'next': '*'
}
],
'@stylistic/quote-props': [
'error',
'always'
],
'@stylistic/quotes': [
'error',
'single'
],
'@stylistic/rest-spread-spacing': [
'error',
'never'
],
'@stylistic/semi': [
'error',
'always'
],
'@stylistic/semi-spacing': [
'error',
{
'before': false,
'after': true
}
],
'@stylistic/semi-style': [
'error',
'last'
],
'@stylistic/space-before-blocks': [
'error',
'always'
],
'@stylistic/space-before-function-paren': [
'error',
'always'
],
'@stylistic/space-in-parens': [
'error',
'always'
],
'@stylistic/space-infix-ops': [
'error',
{
'int32Hint': false
}
],
'@stylistic/space-unary-ops': 'error',
'@stylistic/spaced-comment': [
'error',
'always'
],
'@stylistic/switch-colon-spacing': 'error',
'@stylistic/template-curly-spacing': [
'error',
'always'
],
'@stylistic/template-tag-spacing': [
'error',
'always'
],
'@stylistic/type-generic-spacing': 'error',
'@stylistic/type-named-tuple-spacing': 'error',
'@stylistic/wrap-iife': [
'error',
'inside'
],
'@stylistic/wrap-regex': 'error',
'@stylistic/ts/type-annotation-spacing': 'error'
}
};
/** @type {import('eslint').Linter.Config} */
export default tseslint.config(
// Base JavaScript rules
eslint.configs.recommended,
tseslint.configs.recommended,
style,
// Vue support (including TS and JSX inside SFCs)
{
'files': [ '**/*.vue' ],
'languageOptions': {
'sourceType': 'module',
'ecmaVersion': 'latest',
'globals': globals.browser,
'parserOptions': {
'parser': tseslint.parser
}
},
'plugins': {
'vue': vue,
'@stylistic': stylistic,
'@stylistic/js': stylistic,
'@stylistic/ts': stylistic,
'@typescript-eslint': typescript
},
'extends': [
eslint.configs.recommended,
...vue.configs['flat/recommended']
],
'rules': {
...typescript.configs.recommended.rules,
...style.rules,
// Vue specific rules
'@stylistic/indent': 'off',
'vue/html-indent': [
'error',
4
],
'vue/html-comment-indent': [
'error',
4
],
'vue/script-indent': [
'error',
4,
{
'baseIndent': 1,
'switchCase': 1
}
],
'vue/html-self-closing': [
'error',
{
'html': {
'void': 'never',
'normal': 'never',
'component': 'always'
},
'svg': 'always',
'math': 'never'
}
],
'vue/max-attributes-per-line': [
'error',
{
'singleline': 3,
'multiline': 1
}
]
}
}
);

View File

@@ -1,218 +0,0 @@
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
};

View File

@@ -1,23 +1,30 @@
{
"name": "janishutz-config-build",
"version": "1.0.0",
"description": "Build janishutz's dotfiles configs",
"repository": {
"type": "git",
"url": "https://git.janishutz.com/janishutz/dotfiles"
},
"license": "GPL-3.0-or-later",
"author": "janishutz",
"type": "commonjs",
"main": "build.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"@janishutz/colorthief": "^3.0.2",
"chalk": "^5.4.1",
"color-convert": "^3.0.1",
"inquirer": "^12.5.0",
"mustache": "^4.2.0"
}
"name": "janishutz-config-build",
"version": "1.0.0",
"description": "Build janishutz's dotfiles configs",
"repository": {
"type": "git",
"url": "https://git.janishutz.com/janishutz/dotfiles"
},
"license": "GPL-3.0-or-later",
"author": "janishutz",
"type": "module",
"main": "build.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"@janishutz/colorthief": "^3.0.2",
"chalk": "^5.4.1",
"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"
}
}

View File

@@ -1,4 +1,22 @@
const util = require( './util' );
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 renderColourAsRGB = util.renderColourAsRGB;
const renderColourAsRGBA = util.renderColourAsRGBA;
@@ -9,9 +27,7 @@ const renderColourAsHex = util.renderColourAsHex;
// │ Theme generator (returns theme as object) │
// ╰───────────────────────────────────────────────╯
// ───────────────────────────────────────────────────────────────────
module.exports.generateTheme = (
theme, wallpaper, lockpaper, palette
) => {
export const generateTheme = ( theme: string, wallpaper: string, lockpaper: string, palette: Color[] ) => {
return {
'wallpaper-path': wallpaper,
'lockpaper-path': lockpaper,
@@ -51,30 +67,14 @@ module.exports.generateTheme = (
'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,316 +172,6 @@ module.exports.generateTheme = (
// ┌ ┐
// │ 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',
};

View File

@@ -1,47 +1,67 @@
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;
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 build = ( wallpaper, lockpaper, theme ) => {
const build = ( wallpaper: string, lockpaper: string, theme: string ) => {
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 ) ) );
col = palette[ 2 ];
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?'
inquirer.prompt( [ {
'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
}
} )
inquirer.prompt( [
'name': chalk.rgb( c[ 0 ], c[ 1 ], c[ 2 ] )( util.renderColourAsHex( c ) ),
'value': counter
};
} );
inquirer.prompt( [
{
'type': 'list',
'message': 'Pick the primary accent colour',
@@ -61,24 +81,31 @@ const build = ( wallpaper, lockpaper, theme ) => {
'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 => {
console.error( e );
process.exit( 1 );
} );
} )
.catch( e => {
console.error( e );
process.exit( 1 );
} );
}
} ).catch( e => {
} )
.catch( e => {
console.error( e );
process.exit( 1 );
} );
} )
.catch( e => {
console.error( e );
console.error( '\n=> Failed to load image or retrieve colour palette from it' );
process.exit( 1 );
} );
} ).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 ) => {
@@ -92,9 +119,15 @@ 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++) {
for ( let index = 0; index < fileList.length; index++ ) {
try {
render( fileList[ index ], view );
} catch ( e ) {
@@ -105,7 +138,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
@@ -117,16 +150,19 @@ const render = ( templatePath, view, originalDir = 'renderable', newDir = 'confi
// 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 ) );
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;

150
build/src/helpers/util.ts Normal file
View File

@@ -0,0 +1,150 @@
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
};

0
build/src/index.ts Normal file
View File

1
build/src/types/colours.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
export type Color = number[];

View File

@@ -0,0 +1,266 @@
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
]
}
};

View File

@@ -0,0 +1,27 @@
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'
}
};

View File

@@ -0,0 +1,10 @@
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
};

View File

@@ -0,0 +1,9 @@
export const iconTheme: {
[key: string]: string
} = {
'nordic': 'Candy',
'deep-dark': 'Candy',
'material': 'Candy',
'light': 'Candy',
'bright': 'Candy'
};

View File

@@ -0,0 +1,56 @@
/*
* 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'
};

View File

@@ -0,0 +1,9 @@
export const yaziThemes: {
[key: string]: string
} = {
'nordic': 'tokyo-night',
'deep-dark': 'vscode-dark-modern',
'material': 'dracula',
'light': 'vscode-light-modern',
'bright': 'vscode-light-modern'
};

0
build/src/web/api.ts Normal file
View File

14
build/tsconfig.json Normal file
View File

@@ -0,0 +1,14 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"compilerOptions": {
"experimentalDecorators": true,
"strict": true,
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "Bundler",
// "checkJs": true,
// "allowJs": true,
"jsx": "react-jsx",
"jsxImportSource": "astal/gtk4",
}
}