From 0b349fb0388dbfda6e80e77fecbaf02a1b0812a6 Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Fri, 25 Apr 2025 15:36:22 +0200 Subject: [PATCH] [Build] Done --- build/render.js | 174 ++++++++++++++++++++++---- build/themalizer.js | 41 ++++++ build/util.js | 86 +++++++++---- config.json | 5 + config/astal/util/colours.scss | 8 +- config/hypr/hyprland/colors.conf | 2 +- config/hypr/hyprland/windowrules.conf | 2 - config/hypr/hyprlock.conf | 4 +- config/wlogout/style.css | 4 +- prompts.md | 17 +++ setup | 93 +++++++++++++- system/environment | 3 +- 12 files changed, 379 insertions(+), 60 deletions(-) create mode 100644 build/themalizer.js create mode 100644 config.json diff --git a/build/render.js b/build/render.js index 7beec66..44a5cec 100644 --- a/build/render.js +++ b/build/render.js @@ -12,43 +12,142 @@ const build = ( wallpaper, lockpaper, theme ) => { // Extract colour palette from chosen wallpaper using Color-Thief colorThief.getPalette( wallpaper ).then( palette => { // Define view options (for rendering with mustache) + if ( theme === 'test' ) { + palette = [ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ]; + } const view = { 'wallpaper-path': wallpaper, 'lockpaper-path': lockpaper, - // Colours + // ┌ ┐ + // │ 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-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-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-rgb': renderColourAsRGB( palette[ 2 ] ), + + // ── 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-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-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-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-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-accent': fonts.accent[ theme ], 'font-mono': fonts.mono[ theme ], - // yazi theme + // ┌ ┐ + // │ yazi 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), } @@ -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-3.0/gtk.css' ), 'src' ); - render( path.join( __dirname, '/../gtk-theme/temp/gtk-3.0/gtk.css' ), view, 'temp', 'dist' ); - render( path.join( __dirname, '/../gtk-theme/temp/gtk-4.0/gtk.css' ), view, 'temp', 'dist' ); + util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), 'src', 'dist' ); + util.themePreProcessor( path.join( __dirname, '/../gtk-theme/src/gtk-3.0/gtk.css' ), 'src', 'dist' ); + render( path.join( __dirname, '/../gtk-theme/src/colours.css' ), view, 'src', 'dist' ); // TODO: Copy over to /usr/share/themes/Adaptive-Theme/ } ).catch( e => { console.error( e ); @@ -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 = { foreground: { - 'nordic': [ 10, 220, 255 ], + '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 ] + '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, 0, 50 ], + '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 ] + 'bright': [ 255, 255, 255 ], + 'test': [ 255, 255, 255 ], }, 'background-alternative': { - 'nordic': [ 15, 5, 60 ], + '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 ] + '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': [ 10, 0, 60 ], - 'deep-dark': [ 20, 20, 20 ], + 'nordic': [ 0, 0, 2 ], + 'deep-dark': [ 40, 40, 40 ], 'material': [ 30, 30, 30 ], // TODO: Will be calculated by material theme generator - 'light': [ 230, 230, 230 ], - 'bright': [ 255, 255, 255 ] + '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 ] + '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': [ 200, 200, 200 ], - 'bright': [ 60, 60, 60 ] + 'light': [ 80, 80, 80 ], + 'bright': [ 60, 60, 60 ], + 'test': [ 60, 60, 60 ] } } diff --git a/build/themalizer.js b/build/themalizer.js new file mode 100644 index 0000000..62a2a65 --- /dev/null +++ b/build/themalizer.js @@ -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 ] ); + } +} diff --git a/build/util.js b/build/util.js index d9e531b..bf562e8 100644 --- a/build/util.js +++ b/build/util.js @@ -42,32 +42,63 @@ const renderColourAsRGBA = ( colour, ambiance ) => { return `rgba( ${ colour[ 0 ] }, ${ colour[ 1 ] }, ${ colour[ 2 ] }, ${ ambiance } )` } + /* * 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 = { - '#000': '@bg', - '#111': '@bg_accent', - '#222': '@bg_inactive', - '#555A': '@shadow_rgba', - '#555': '@shadow', - '#F00': '@accent', - '#0F0': '@accent2', - '#00F': '@accent3', - '#AAA': '@inactive', - '#FFF': '@fg' + '#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 ) => { +const themePreProcessor = ( file, replacement, out ) => { const colours = Object.keys( replacements ); let data = '' + fs.readFileSync( file ); for (let index = 0; index < colours.length; index++) { @@ -75,7 +106,7 @@ const themePreProcessor = ( file, replacement ) => { data = data.replaceAll(colour, replacements[ colour ]); } - const outPath = file.replace( replacement, 'temp' ); + const outPath = file.replace( replacement, out ); try { fs.mkdirSync( path.dirname( outPath ), { recursive: true, @@ -87,10 +118,19 @@ const themePreProcessor = ( file, replacement ) => { 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, - themePreProcessor + themePreProcessor, + getGradientColour } diff --git a/config.json b/config.json new file mode 100644 index 0000000..e1dd607 --- /dev/null +++ b/config.json @@ -0,0 +1,5 @@ +{ + "gen": { + "overrides": {} + } +} diff --git a/config/astal/util/colours.scss b/config/astal/util/colours.scss index 8c9353f..d16d574 100644 --- a/config/astal/util/colours.scss +++ b/config/astal/util/colours.scss @@ -1,4 +1,4 @@ -$fg-color: #0ADCFF; -$bg-color: #0A0032; -$accent-color: #CFDCEA; -$accent-color-2: #686659; +$fg-color: #C8DCFF; +$bg-color: #0A0A0F; +$accent-color: #0B0B0B; +$accent-color-2: #F0F4F5; diff --git a/config/hypr/hyprland/colors.conf b/config/hypr/hyprland/colors.conf index 6184df0..70ebec2 100644 --- a/config/hypr/hyprland/colors.conf +++ b/config/hypr/hyprland/colors.conf @@ -5,7 +5,7 @@ # ──────────────────────────────────────────────────────────────────── 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 ) } diff --git a/config/hypr/hyprland/windowrules.conf b/config/hypr/hyprland/windowrules.conf index 7e76135..ce6ac9a 100644 --- a/config/hypr/hyprland/windowrules.conf +++ b/config/hypr/hyprland/windowrules.conf @@ -119,5 +119,3 @@ windowrule = idleinhibit focus, class:vlc windowrule = idleinhibit focus, class:supertuxkart windowrule = idleinhibit fullscreen, title:^(.*)(Discord)(.*)$ windowrule = idleinhibit fullscreen, title:^(.*)(~)(.*)$ -windowrule = idleinhibit focus, title:^(.*)(~)(.*)$ -windowrule = idleinhibit focus, title:^(.*)(LibreWolf)(.*)$ diff --git a/config/hypr/hyprlock.conf b/config/hypr/hyprlock.conf index d5882c5..58c4aab 100644 --- a/config/hypr/hyprlock.conf +++ b/config/hypr/hyprlock.conf @@ -18,7 +18,7 @@ general { # └ ┘ background { monitor = - path = /home/janis/NextCloud/Wallpapers/H125-AirZermatt.jpg # Or screenshot + path = /home/janis/NextCloud/Wallpapers/arch/arch-simple.jpg # Or screenshot blur_passes = 1 } @@ -33,7 +33,7 @@ input-field { 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_center = false - outer_color = rgb( 207, 220, 234 ) + outer_color = rgb( 11, 11, 11 ) inner_color = rgb(200, 200, 200) font_color = rgb(10, 10, 10) fade_on_empty = true diff --git a/config/wlogout/style.css b/config/wlogout/style.css index c85bcea..354bc2e 100644 --- a/config/wlogout/style.css +++ b/config/wlogout/style.css @@ -7,7 +7,7 @@ window { font-family: monospace; font-size: 14pt; color: #ffffff; /* text */ - background-color: rgba( 10, 0, 50, 0.5 ); + background-color: rgba( 10, 10, 15, 0.5 ); } button { @@ -25,7 +25,7 @@ button:hover { } button:focus { - background-color: rgb( 207, 220, 234 ); + background-color: rgb( 11, 11, 11 ); color: ; } diff --git a/prompts.md b/prompts.md index b5a2201..45724db 100644 --- a/prompts.md +++ b/prompts.md @@ -41,3 +41,20 @@ Using AstalNetwork, can you write a UI (that can be integrated into a popover) a - 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 + + + +# 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 diff --git a/setup b/setup index eef4efb..1256b9f 100755 --- a/setup +++ b/setup @@ -1,6 +1,95 @@ #!/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 + +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 + +" diff --git a/system/environment b/system/environment index 2b48c5f..ec4eb38 100644 --- a/system/environment +++ b/system/environment @@ -6,7 +6,8 @@ QT_QPA_PLATFORMTHEME=gtk3 QT_QPA_PLATFORM=wayland -GTK_THEME=Material-Black-Blueberry +GTK_THEME=Adaptive-Theme +# GTK_THEME=Material-Black-Blueberry # QT_STYLE_OVERRIDE=kvantum GCM_CREDENTIAL_STORE=secretservice VKD3D_CONFIG=dxr11,dxr