Files
dotfiles/build/helpers/generateTheme.js
2025-10-17 09:47:40 +02:00

488 lines
20 KiB
JavaScript

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',
};