janishutz/dotfiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

[Build] Done

Browse Source
This commit is contained in:
Janis Hutz 2025-04-25 15:36:22 +02:00
parent db16e830d1
commit 0b349fb038
12 changed files with 379 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
build/render.js
View File

@ -12,43 +12,142 @@ const build = ( wallpaper, lockpaper, theme ) => {
// Extract colour palette from chosen wallpaper using Color-Thief // Extract colour palette from chosen wallpaper using Color-Thief
colorThief.getPalette( wallpaper ).then( palette => { colorThief.getPalette( wallpaper ).then( palette => {
// Define view options (for rendering with mustache) // Define view options (for rendering with mustache)
if ( theme === 'test' ) {
palette = [ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ];
}
const view = { const view = {
'wallpaper-path': wallpaper, 'wallpaper-path': wallpaper,
'lockpaper-path': lockpaper, 'lockpaper-path': lockpaper,
// Colours // ┌ ┐
// │ Colours │
// └ ┘
// ── Foreground ───────────────────────────────────────────────────
'colour-foreground-hex': renderColourAsHex( colours.foreground[ theme ] ), 'colour-foreground-hex': renderColourAsHex( colours.foreground[ theme ] ),
'colour-foreground-rgb': renderColourAsRGB( colours.foreground[ theme ] ), 'colour-foreground-rgb': renderColourAsRGB( colours.foreground[ theme ] ),
'colour-foreground-rgba': renderColourAsRGBA( colours.foreground[ theme ], 0.5 ), '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-hex': renderColourAsHex( palette[ 0 ] ),
'colour-accent-rgb': renderColourAsRGB( palette[ 0 ] ), 'colour-accent-rgb': renderColourAsRGB( palette[ 0 ] ),
'colour-accent-rgba': renderColourAsRGBA( palette[ 0 ], 0.3 ), '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-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-hex': renderColourAsHex( palette[ 1 ] ),
'colour-accent-2-rgb': renderColourAsRGB( palette[ 1 ] ), 'colour-accent-2-rgb': renderColourAsRGB( palette[ 1 ] ),
'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 ),
// ── Tertiary accent ──────────────────────────────────────────────
'colour-accent-3-hex': renderColourAsHex( palette[ 2 ] ), 'colour-accent-3-hex': renderColourAsHex( palette[ 2 ] ),
'colour-accent-3-rgb': renderColourAsRGB( palette[ 2 ] ), 'colour-accent-3-rgb': renderColourAsRGB( palette[ 2 ] ),
// ── Background ───────────────────────────────────────────────────
'colour-background-hex': renderColourAsHex( colours.background[ theme ] ), 'colour-background-hex': renderColourAsHex( colours.background[ theme ] ),
'colour-background-rgb': renderColourAsRGB( colours.background[ theme ] ), 'colour-background-rgb': renderColourAsRGB( colours.background[ theme ] ),
'colour-background-rgba': renderColourAsRGBA( colours.background[ theme ], 0.5 ), '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-hex': renderColourAsHex( colours[ 'background-alternative' ][ theme ] ),
'colour-background-alternative-hex': renderColourAsRGB( 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-hex': renderColourAsHex( colours.shadow[ theme ] ),
'colour-shadow-rgb': renderColourAsRGB( colours.shadow[ theme ] ), 'colour-shadow-rgb': renderColourAsRGB( colours.shadow[ theme ] ),
'colour-shadow-rgba': renderColourAsRGBA( colours.shadow[ theme ], 0.3 ), '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-hex': renderColourAsHex( colours.inactive[ theme ] ),
'colour-inactive-rgb': renderColourAsRGB( 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-hex': renderColourAsHex( colours[ 'inactive-background' ][ theme ] ),
'colour-inactive-background-rgb': renderColourAsRGB( colours[ 'inactive-background' ][ theme ] ), 'colour-inactive-background-rgb': renderColourAsRGB( 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 // ┌ ┐
// │ Fonts │
// └ ┘
'font-primary': fonts.primary[ theme ], 'font-primary': fonts.primary[ theme ],
'font-accent': fonts.accent[ theme ], 'font-accent': fonts.accent[ theme ],
'font-mono': fonts.mono[ theme ], 'font-mono': fonts.mono[ theme ],
// yazi theme // ┌ ┐
// │ yazi theme │
// └ ┘
'yazi-theme': yaziThemes[ theme ], 'yazi-theme': yaziThemes[ theme ],
// Path to this repo on disk // ┌ ┐
// │ Path to this repo on disk │
// └ ┘
'path-to-dotfiles': __dirname.slice(0, __dirname.length - 5), 'path-to-dotfiles': __dirname.slice(0, __dirname.length - 5),
} }
@ -70,10 +169,9 @@ const build = ( wallpaper, lockpaper, theme ) => {
} }
} }
util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), 'src' ); 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' ); util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-3.0/gtk.css' ), 'src', 'dist' );
render( path.join( __dirname, '/../gtk-theme/temp/gtk-3.0/gtk.css' ), view, 'temp', 'dist' ); render( path.join( __dirname, '/../gtk-theme/src/colours.css' ), view, 'src', 'dist' );
render( path.join( __dirname, '/../gtk-theme/temp/gtk-4.0/gtk.css' ), view, 'temp', 'dist' );
// TODO: Copy over to /usr/share/themes/Adaptive-Theme/ // TODO: Copy over to /usr/share/themes/Adaptive-Theme/
} ).catch( e => { } ).catch( e => {
console.error( e ); console.error( e );
@ -81,48 +179,78 @@ const build = ( wallpaper, lockpaper, theme ) => {
} ); } );
} }
const gradientMultipliers = {
'nordic': 0.9,
'deep-dark': 0.8,
'material': 0.85,
'light': 1.1,
'bright': 1.15,
'test': 0.75
}
const colours = { const colours = {
foreground: { foreground: {
'nordic': [ 10, 220, 255 ], 'nordic': [ 200, 220, 255 ],
'deep-dark': [ 230, 230, 230 ], 'deep-dark': [ 230, 230, 230 ],
'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator 'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
'light': [ 40, 40, 40 ], 'light': [ 40, 40, 40 ],
'bright': [ 0, 0, 0 ] '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: { background: {
'nordic': [ 10, 0, 50 ], 'nordic': [ 10, 10, 15 ],
'deep-dark': [ 20, 20, 20 ], 'deep-dark': [ 20, 20, 20 ],
'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator 'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
'light': [ 230, 230, 230 ], 'light': [ 230, 230, 230 ],
'bright': [ 255, 255, 255 ] 'bright': [ 255, 255, 255 ],
'test': [ 255, 255, 255 ],
}, },
'background-alternative': { 'background-alternative': {
'nordic': [ 15, 5, 60 ], 'nordic': [ 20, 20, 25 ],
'deep-dark': [ 30, 30, 30 ], 'deep-dark': [ 30, 30, 30 ],
'material': [ 40, 40, 40 ], // TODO: Will be calculated by material theme generator 'material': [ 40, 40, 40 ], // TODO: Will be calculated by material theme generator
'light': [ 210, 210, 210 ], 'light': [ 210, 210, 210 ],
'bright': [ 230, 230, 230 ] '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: { shadow: {
'nordic': [ 10, 0, 60 ], 'nordic': [ 0, 0, 2 ],
'deep-dark': [ 20, 20, 20 ], 'deep-dark': [ 40, 40, 40 ],
'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator 'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator
'light': [ 230, 230, 230 ], 'light': [ 190, 190, 190 ],
'bright': [ 255, 255, 255 ] 'bright': [ 150, 150, 150 ],
'test': [ 120, 0, 0 ] // dark red
}, },
inactive: { inactive: {
'nordic': [ 200, 200, 200 ], 'nordic': [ 200, 200, 200 ],
'deep-dark': [ 200, 200, 200 ], 'deep-dark': [ 200, 200, 200 ],
'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator 'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator
'light': [ 65, 65, 65 ], 'light': [ 65, 65, 65 ],
'bright': [ 60, 60, 60 ] 'bright': [ 60, 60, 60 ],
'test': [ 150, 150, 150 ]
}, },
'inactive-background': { 'inactive-background': {
'nordic': [ 0, 0, 0 ], 'nordic': [ 0, 0, 0 ],
'deep-dark': [ 0, 0, 0 ], 'deep-dark': [ 0, 0, 0 ],
'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator 'material': [ 255, 255, 255 ], // TODO: Will be calculated by material theme generator
'light': [ 200, 200, 200 ], 'light': [ 80, 80, 80 ],
'bright': [ 60, 60, 60 ] 'bright': [ 60, 60, 60 ],
'test': [ 60, 60, 60 ]
} }
} }

41
build/themalizer.js Normal file
View File

@ -0,0 +1,41 @@
const fs = require( 'fs' );
const path = require( 'path' );
const data = '' + fs.readFileSync( '/usr/share/themes/Material-Black-Blueberry/gtk-4.0/gtk.css' );
let lineNumber = 1;
const indexer = {};
for (let i = 0; i < data.length; i++) {
const char = data[i];
if ( char === '\n' ) {
lineNumber++;
} else if ( char === '#' ) {
const extract = data.substring( i );
const col = extract.slice( 0, extract.indexOf( '\n' ) );
if ( !indexer[ col ] ) {
indexer[ col ] = [];
}
indexer[ col ].push( lineNumber );
} else if ( char === 'r' ) {
const extract = data.substring( i );
if ( extract.slice( 0, 3 ) === 'rgb' ) {
const col = extract.slice( 0, extract.indexOf( '\n' ) );
if ( !indexer[ col ] ) {
indexer[ col ] = [];
}
indexer[ col ].push( lineNumber );
}
}
}
// Output
const keys = Object.keys( indexer );
for (let i = 0; i < keys.length; i++) {
const element = keys[i];
if ( element.length <= 25 ) {
console.log( 'Colour ' + element.slice( 0, element.length - 1 ) + ' appears on ' + indexer[ element ] );
}
}

86
build/util.js
View File

@ -42,32 +42,63 @@ const renderColourAsRGBA = ( colour, ambiance ) => {
return `rgba( ${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance } )` return `rgba( ${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance } )`
} }
/* /*
* Replace the colours with variable names * Replace the colours with variable names
* #000 = @bg
* #111 = @bg_accent
* #222 = @bg_inactive
* #555A = @shadow_rgba
* #555 = @shadow
* #F00 = @accent
* #0F0 = @accent2
* #00F = @accent3
* #AAA = @inactive
* #FFF = @fg
*/ */
const replacements = { const replacements = {
'#000': '@bg', '#0f1011': '@bg',
'#111': '@bg_accent', 'rgba(9, 9, 10, 0.9)': '@bg_rgba_07',
'#222': '@bg_inactive', 'rgba(26, 28, 30, 0.3)': '@bg_rgba_05',
'#555A': '@shadow_rgba', '#000': '@bg_accent',
'#555': '@shadow', '#000000': '@bg_accent',
'#F00': '@accent', 'rgba(0, 0, 0, 0.7)': '@bg_accent_rgba_07',
'#0F0': '@accent2', 'rgba(0, 0, 0, 0.6)': '@bg_accent_rgba_06',
'#00F': '@accent3', 'rgba(0, 0, 0, 0.5)': '@bg_accent_rgba_05',
'#AAA': '@inactive', 'rgba(0, 0, 0, 0.4)': '@bg_accent_rgba_04',
'#FFF': '@fg' '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 ) => { const themePreProcessor = ( file, replacement, out ) => {
const colours = Object.keys( replacements ); const colours = Object.keys( replacements );
let data = '' + fs.readFileSync( file ); let data = '' + fs.readFileSync( file );
for (let index = 0; index < colours.length; index++) { for (let index = 0; index < colours.length; index++) {
@ -75,7 +106,7 @@ const themePreProcessor = ( file, replacement ) => {
data = data.replaceAll(colour, replacements[ colour ]); data = data.replaceAll(colour, replacements[ colour ]);
} }
const outPath = file.replace( replacement, 'temp' ); const outPath = file.replace( replacement, out );
try { try {
fs.mkdirSync( path.dirname( outPath ), { fs.mkdirSync( path.dirname( outPath ), {
recursive: true, recursive: true,
@ -87,10 +118,19 @@ const themePreProcessor = ( file, replacement ) => {
fs.writeFileSync( outPath, data ); 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 = { module.exports = {
treeWalker, treeWalker,
renderColourAsHex, renderColourAsHex,
renderColourAsRGB, renderColourAsRGB,
renderColourAsRGBA, renderColourAsRGBA,
themePreProcessor themePreProcessor,
getGradientColour
} }

5
config.json Normal file
View File

@ -0,0 +1,5 @@
{
"gen": {
"overrides": {}
}
}

8
config/astal/util/colours.scss
View File

@ -1,4 +1,4 @@
$fg-color: #0ADCFF; $fg-color: #C8DCFF;
$bg-color: #0A0032; $bg-color: #0A0A0F;
$accent-color: #CFDCEA; $accent-color: #0B0B0B;
$accent-color-2: #686659; $accent-color-2: #F0F4F5;

2
config/hypr/hyprland/colors.conf
View File

@ -5,7 +5,7 @@
# ──────────────────────────────────────────────────────────────────── # ────────────────────────────────────────────────────────────────────
general { general {
col.active_border = rgb( 207, 220, 234 ) rgb( 104, 102, 89 ) rgb( 108, 176, 234 ) 45deg col.active_border = rgb( 11, 11, 11 ) rgb( 240, 244, 245 ) rgb( 82, 89, 93 ) 45deg
col.inactive_border = rgb( 200, 200, 200 ) col.inactive_border = rgb( 200, 200, 200 )
} }

2
config/hypr/hyprland/windowrules.conf
View File

@ -119,5 +119,3 @@ windowrule = idleinhibit focus, class:vlc
windowrule = idleinhibit focus, class:supertuxkart windowrule = idleinhibit focus, class:supertuxkart
windowrule = idleinhibit fullscreen, title:^(.*)(Discord)(.*)$ windowrule = idleinhibit fullscreen, title:^(.*)(Discord)(.*)$
windowrule = idleinhibit fullscreen, title:^(.*)(~)(.*)$ windowrule = idleinhibit fullscreen, title:^(.*)(~)(.*)$
windowrule = idleinhibit focus, title:^(.*)(~)(.*)$
windowrule = idleinhibit focus, title:^(.*)(LibreWolf)(.*)$

4
config/hypr/hyprlock.conf
View File

@ -18,7 +18,7 @@ general {
# └ ┘ # └ ┘
background { background {
monitor = monitor =
path = &#x2F;home&#x2F;janis&#x2F;NextCloud&#x2F;Wallpapers&#x2F;H125-AirZermatt.jpg # Or screenshot path = &#x2F;home&#x2F;janis&#x2F;NextCloud&#x2F;Wallpapers&#x2F;arch&#x2F;arch-simple.jpg # Or screenshot
blur_passes = 1 blur_passes = 1
} }
@ -33,7 +33,7 @@ input-field {
dots_size = 0.33 # Scale of input-field height, 0.2 - 0.8 dots_size = 0.33 # Scale of input-field height, 0.2 - 0.8
dots_spacing = 0.15 # Scale of dots' absolute size, 0.0 - 1.0 dots_spacing = 0.15 # Scale of dots' absolute size, 0.0 - 1.0
dots_center = false dots_center = false
outer_color = rgb( 207, 220, 234 ) outer_color = rgb( 11, 11, 11 )
inner_color = rgb(200, 200, 200) inner_color = rgb(200, 200, 200)
font_color = rgb(10, 10, 10) font_color = rgb(10, 10, 10)
fade_on_empty = true fade_on_empty = true

4
config/wlogout/style.css
View File

@ -7,7 +7,7 @@ window {
font-family: monospace; font-family: monospace;
font-size: 14pt; font-size: 14pt;
color: #ffffff; /* text */ color: #ffffff; /* text */
background-color: rgba( 10, 0, 50, 0.5 ); background-color: rgba( 10, 10, 15, 0.5 );
} }
button { button {
@ -25,7 +25,7 @@ button:hover {
} }
button:focus { button:focus {
background-color: rgb( 207, 220, 234 ); background-color: rgb( 11, 11, 11 );
color: ; color: ;
} }

17
prompts.md
View File

@ -41,3 +41,20 @@ Using AstalNetwork, can you write a UI (that can be integrated into a popover) a
- Local IP - Local IP
I would prefer if you could split up the logic from the UI, i.e. have the logic in a separate TS file and have the UI as its own TSX file and simply import the logic I would prefer if you could split up the logic from the UI, i.e. have the logic in a separate TS file and have the UI as its own TSX file and simply import the logic
# GTK THEME
Provide GTK CSS for Gtk 4, as short as possible, but including everything that is necessary to make it look good, where you have the following options for colours to pick. They will be replaced by a script (no need to provide that) according to some variables
- #000 (normal background)
- #111 (accent background, to differentiate, will be slightly brighter / darker
- #222 (secondary accent background, slightly brighter / darker than #111)
- #333 (inactive background, but could also be used to be slightly brighter / dark than #222)
- #555 (shadow colour)
- #555A (shadow colour, but as RGBA value)
- #F00 (accent colour, primary accent colour)
- #0F0 (secondary accent colour, use if it makes sense to differentiate from the primary accent)
- #00F (tertiary accent colour, use sparingly)
- #AAA (inactive colour, darker / brighter than primary foreground colour)
- #FFF (primary foreground colour)
Propose additional colours in a similar format (three-digit hex) and explain what they are for if necessary. Make the theme rounded and include as many of the widgets as needed or possible

93
setup
View File

@ -1,6 +1,95 @@
#!/bin/sh #!/bin/sh
# Read platform to install on (only if no platform file present in ~/.config/) # ───────────────────────────────────────────────────────────────────
read -p "Choose the configs to install, Laptop or Desktop (l/D): " platform # ╭────────────────────────────────────────────────╮
# │ Setup Script for janishutz Hyprland │
# ╰────────────────────────────────────────────────╯
# ───────────────────────────────────────────────────────────────────
echo "
_ _ _ _ _ _
_ _ ( ) ( )_ ( ) ( ) (_ ) ( )
(_) _ _ ___ (_) ___| |__ _ _| _)____ | |_| |_ _ _ _ _ __ | | _ _ ___ _| |
| |/ _ ) _ \ | __) _ \ ) ( ) | (_ ) | _ | ) ( ) _ \( __)| | / _ ) _ \/ _ |
| | (_| | ( ) | |__ \ | | | (_) | |_ / /_ | | | | (_) | (_) ) | | |( (_| | ( ) | (_| |
_ | |\__ _)_) (_)_)____/_) (_)\___/ \__)____) (_) (_)\__ | __/(_) (___)\__ _)_) (_)\__ _)
( )_| | ( )_| | |
\___/ \___/(_)
=> Setup script. This script is used to:
-> Set up configs initially
-> Regenerate the themes
-> Install new versions
"
# Read platform to install on (only if no platform file present in ~/.config/)
platform=""
if [ -f "~/.config/platform" ]; then
read -p "Choose the configs to install, Laptop or Desktop (l/D): " platform
echo "$platform" > ~/.config/platform
fi
platform=$(echo "$content" | tr '[:upper:]' '[:lower:]')
# Get user preference for regenerating the styling
regen=""
read -p "Would you like to regenerate styling? (y/N) " regen
if [ $regen == "y" ]; then
cd build
node build.js
cd ..
fi
echo "
=> Moving configs to correct destinations
"
cp -r ./config/fish ~/.config/
cp -r ./config/hypr ~/.config/
# Depending on platform, remove one or the other config and rename remaining one
if [ $platform == "d" ]; then
mv ~/.config/hypr/hyprland_desktop.conf ~/.config/hypr/hyprland.conf
rm ~/.config/hypr/hyprland_*
else then
mv ~/.config/hypr/hyprland_laptop.conf ~/.config/hypr/hyprland.conf
rm ~/.config/hypr/hyprland_*
fi
cp -r ./config/kitty ~/.config/
cp -r ./config/fastfetch ~/.config/
cp -r ./config/lazygit ~/.config/
cp -r ./config/mpv ~/.config/
cp -r ./config/Thunar ~/.config/
cp -r ./config/wlogout/ ~/.config/
cp -r ./config/yazi ~/.config/
cp -r ./config/zathura ~/.config/
echo "
=> Installing yazi plugins
"
ya pack -i ya pack -i
echo "
=> Installing GTK Theme
"
sudo rm -rf /usr/share/themes/Adaptive-Theme/
sudo mkdir /usr/share/themes/
sudo cp -r ./gtk-theme/dist/* /usr/share/themes/Adaptive-Theme/
echo "
=> Installing System Configs
"
sudo echo "$(cat ./system/environment)" > /etc/environment
echo "
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
██░▄▄▀██░▄▄▄░██░▀██░██░▄▄▄
██░██░██░███░██░█░█░██░▄▄▄
██░▀▀░██░▀▀▀░██░██▄░██░▀▀▀
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
=> All configs installed. Reboot
for them to apply properly
"

3
system/environment
View File

@ -6,7 +6,8 @@
QT_QPA_PLATFORMTHEME=gtk3 QT_QPA_PLATFORMTHEME=gtk3
QT_QPA_PLATFORM=wayland QT_QPA_PLATFORM=wayland
GTK_THEME=Material-Black-Blueberry GTK_THEME=Adaptive-Theme
# GTK_THEME=Material-Black-Blueberry
# QT_STYLE_OVERRIDE=kvantum # QT_STYLE_OVERRIDE=kvantum
GCM_CREDENTIAL_STORE=secretservice GCM_CREDENTIAL_STORE=secretservice
VKD3D_CONFIG=dxr11,dxr VKD3D_CONFIG=dxr11,dxr