[Gtk-Theme] First setup

build/render.js

@@ -20,6 +20,7 @@ const build = ( wallpaper, lockpaper, theme ) => {
             // Colours
             'colour-foreground-hex': renderColourAsHex( palette[ 0 ] ),
             'colour-foreground-rgb': renderColourAsRGB( palette[ 0 ] ),
+            'colour-foreground-rgb': renderColourAsRGBA( palette[ 0 ], 0.5 ),
             'colour-accent-hex': renderColourAsHex( palette[ 1 ] ),
             'colour-accent-rgb': renderColourAsRGB( palette[ 1 ] ),
             'colour-accent-rgba': renderColourAsRGBA( palette[ 1 ], 0.3 ),
@@ -30,10 +31,15 @@ const build = ( wallpaper, lockpaper, theme ) => {
             '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-alternative-hex': renderColourAsHex( colours[ 'background-alternative' ][ theme ] ),
+            'colour-background-alternative-hex': renderColourAsRGB( colours[ 'background-alternative' ][ theme ] ),
             'colour-shadow-hex': renderColourAsHex( colours.shadow[ theme ] ),
             'colour-shadow-rgb': renderColourAsRGB( colours.shadow[ theme ] ),
+            'colour-shadow-rgba': renderColourAsRGBA( colours.shadow[ theme ], 0.3 ),
             'colour-inavtive-hex': renderColourAsHex( colours.inactive[ theme ] ),
             'colour-inavtive-rgb': renderColourAsRGB( colours.inactive[ theme ] ),
+            'colour-inavtive-background-hex': renderColourAsHex( colours[ 'inactive-background' ][ theme ] ),
+            'colour-inavtive-background-rgb': renderColourAsRGB( colours[ 'inactive-background' ][ theme ] ),
 
             // Fonts
             'font-primary': fonts.primary[ theme ],
@@ -62,8 +68,6 @@ const build = ( wallpaper, lockpaper, theme ) => {
         // 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' ] );
 
-        // TODO: Copy missing files over directly
-        console.log( fileList );
         for (let index = 0; index < fileList.length; index++) {
             try {
                 render( fileList[ index ], view );
@@ -71,6 +75,10 @@ const build = ( wallpaper, lockpaper, theme ) => {
                 console.error( '=> Render failed for ' + fileList[ index ] + ' with error ' + e );
             }
         }
+
+        render( path.join( __dirname, '/../gtk-theme/src/gtk-3.0/gtk.css' ), view, 'src', 'dist' );
+        render( path.join( __dirname, '/../gtk-theme/src/gtk-4.0/gtk.css' ), view, 'src', 'dist' );
+        // TODO: Copy over to /usr/share/themes/Adaptive-Theme/
     } ).catch( e => {
         console.error( e );
         console.error( '\n=> Failed to load image or retrieve colour palette from it' );
@@ -79,12 +87,19 @@ const build = ( wallpaper, lockpaper, theme ) => {
 
 const colours = {
     background: {
-        'nordic': [ 10, 0, 60 ],
+        'nordic': [ 10, 0, 50 ],
         '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 ]
     },
+    'background-alternative': {
+        'nordic': [ 15, 5, 60 ],
+        '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 ]
+    },
     shadow: {
         'nordic': [ 10, 0, 60 ],
         'deep-dark': [ 20, 20, 20 ],
@@ -98,6 +113,13 @@ const colours = {
         'material': [ 200, 200, 200 ], // TODO: Will be calculated by material theme generator
         'light': [ 65, 65, 65 ],
         'bright': [ 60, 60, 60 ]
+    },
+    '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 ]
     }
 }
 
@@ -125,7 +147,6 @@ const fonts = {
     }
 }
 
-// TODO
 const yaziThemes = {
     'nordic': 'tokyo-night',
     'deep-dark': 'vscode-dark-modern',
@@ -136,14 +157,16 @@ const yaziThemes = {
 
 
 /**
- * @param {string} templatePath - Path relative to config root
+ * @param {string} templatePath - absolute path to config directory
- * @param {object} view - View rendering config
+ * @param {object} view - rendering config passed to mustache
+ * @param {string} originalDir - The original directory, defaults to renderable
+ * @param {string} newDir - the output directory override, defaults to config
  */
-const render = ( templatePath, view ) => {
+const render = ( templatePath, view, originalDir = 'renderable', newDir = 'config' ) => {
-    // Load template from disk (all can be found in <project-root>/config)
+    // 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( 'config', 'dist' ) ); 
+    const outPath = path.join( templatePath.replace( originalDir, newDir ) ); 
     console.log( '=> Rendering to ' + outPath );
     try {
         fs.mkdirSync( path.dirname( outPath ), {

gtk-theme/src/gtk-3.0/gtk.css

@@ -0,0 +1,100 @@
+/*
+ *          ╭───────────────────────────────────────────────╮
+ *          │               GTK NAMED COLORS                │
+ *          ╰───────────────────────────────────────────────╯
+*/
+
+/*
+ * ── widget text/foreground color ─────────────────────────────────────
+*/
+@define-color theme_fg_color {{ colour-foreground-hex }};
+
+/*
+ * ── text color for entries, views and content in general ─────────────
+*/
+@define-color theme_text_color {{ colour-foreground-hex }};
+
+/*
+ * ── widget base background color ─────────────────────────────────────
+*/
+@define-color theme_bg_color {{ colour-background-hex }};
+
+/*
+ * ── text widgets and the like base background color ──────────────────
+*/
+@define-color theme_base_color {{ colour-background-alternative-hex }};
+
+/*
+ * ── base background color of selections ──────────────────────────────
+*/
+@define-color theme_selected_bg_color {{ colour-accent-hex }};
+
+/*
+ * ── text/foreground color of selections ──────────────────────────────
+*/
+@define-color theme_selected_fg_color {{ colour-foreground-hex }};
+
+/*
+ * ── base background color of insensitive widgets ─────────────────────
+*/
+@define-color insensitive_bg_color {{ colour-background-hex }};
+
+/*
+ * ── text foreground color of insensitive widgets ─────────────────────
+*/
+@define-color insensitive_fg_color {{ colour-foreground-rgba }};
+
+/*
+ * ── insensitive text widgets and the like base background color ──────
+*/
+@define-color insensitive_base_color {{ colour-background-alternative-hex }};
+
+/*
+ * ── widget text/foreground color on backdrop windows ─────────────────
+*/
+@define-color theme_unfocused_fg_color {{ colour-accent-2-hex }};
+
+/*
+text color for entries, views and content in general on backdrop windows */
+@define-color theme_unfocused_text_color {{ colour-inactive-hex }};
+
+/*
+widget base background color on backdrop windows */
+@define-color theme_unfocused_bg_color {{ colour-inactive-background-hex }};
+
+/*
+text widgets and the like base background color on backdrop windows */
+@define-color theme_unfocused_base_color {{ colour-inactive-background-hex }};
+
+/*
+base background color of selections on backdrop windows */
+@define-color theme_unfocused_selected_bg_color {{ colour-accent-2-hex }};
+
+/*
+text/foreground color of selections on backdrop windows */
+@define-color theme_unfocused_selected_fg_color {{ colour-foreground-hex }};
+
+/*
+insensitive color on backdrop windows */
+@define-color unfocused_insensitive_color {{ colour-foreground-rgba }};
+
+/*
+widgets main borders color */
+@define-color borders {{ colour-shadow-rgba }};
+/*
+widgets main borders color on backdrop windows */
+@define-color unfocused_borders {{ colour-shadow-rgba }};
+
+/*
+these are pretty self explicative */
+@define-color warning_color #ffeb3b;
+@define-color error_color #f44336;
+@define-color success_color #00e676;
+
+/* content view background such as thumbnails view in Photos or Boxes */
+@define-color content_view_bg {{ colour-background-hex }};
+
+/* Very contrasty background for text views (@theme_text_color foreground) */
+@define-color text_view_bg {{ colour-background-hex }};
+/* placeholder for entries */
+@define-color placeholder_text_color {{ colour-inactive-hex }};

gtk-theme/src/gtk-4.0/gtk.css

@@ -0,0 +1,100 @@
+/*
+ *          ╭───────────────────────────────────────────────╮
+ *          │               GTK NAMED COLORS                │
+ *          ╰───────────────────────────────────────────────╯
+*/
+
+/*
+ * ── widget text/foreground color ─────────────────────────────────────
+*/
+@define-color theme_fg_color {{ colour-foreground-hex }};
+
+/*
+ * ── text color for entries, views and content in general ─────────────
+*/
+@define-color theme_text_color {{ colour-foreground-hex }};
+
+/*
+ * ── widget base background color ─────────────────────────────────────
+*/
+@define-color theme_bg_color {{ colour-background-hex }};
+
+/*
+ * ── text widgets and the like base background color ──────────────────
+*/
+@define-color theme_base_color {{ colour-background-alternative-hex }};
+
+/*
+ * ── base background color of selections ──────────────────────────────
+*/
+@define-color theme_selected_bg_color {{ colour-accent-hex }};
+
+/*
+ * ── text/foreground color of selections ──────────────────────────────
+*/
+@define-color theme_selected_fg_color {{ colour-foreground-hex }};
+
+/*
+ * ── base background color of insensitive widgets ─────────────────────
+*/
+@define-color insensitive_bg_color {{ colour-background-hex }};
+
+/*
+ * ── text foreground color of insensitive widgets ─────────────────────
+*/
+@define-color insensitive_fg_color {{ colour-foreground-rgba }};
+
+/*
+ * ── insensitive text widgets and the like base background color ──────
+*/
+@define-color insensitive_base_color {{ colour-background-alternative-hex }};
+
+/*
+ * ── widget text/foreground color on backdrop windows ─────────────────
+*/
+@define-color theme_unfocused_fg_color {{ colour-accent-2-hex }};
+
+/*
+text color for entries, views and content in general on backdrop windows */
+@define-color theme_unfocused_text_color {{ colour-inactive-hex }};
+
+/*
+widget base background color on backdrop windows */
+@define-color theme_unfocused_bg_color {{ colour-inactive-background-hex }};
+
+/*
+text widgets and the like base background color on backdrop windows */
+@define-color theme_unfocused_base_color {{ colour-inactive-background-hex }};
+
+/*
+base background color of selections on backdrop windows */
+@define-color theme_unfocused_selected_bg_color {{ colour-accent-2-hex }};
+
+/*
+text/foreground color of selections on backdrop windows */
+@define-color theme_unfocused_selected_fg_color {{ colour-foreground-hex }};
+
+/*
+insensitive color on backdrop windows */
+@define-color unfocused_insensitive_color {{ colour-foreground-rgba }};
+
+/*
+widgets main borders color */
+@define-color borders {{ colour-shadow-rgba }};
+/*
+widgets main borders color on backdrop windows */
+@define-color unfocused_borders {{ colour-shadow-rgba }};
+
+/*
+these are pretty self explicative */
+@define-color warning_color #ffeb3b;
+@define-color error_color #f44336;
+@define-color success_color #00e676;
+
+/* content view background such as thumbnails view in Photos or Boxes */
+@define-color content_view_bg {{ colour-background-hex }};
+
+/* Very contrasty background for text views (@theme_text_color foreground) */
+@define-color text_view_bg {{ colour-background-hex }};
+/* placeholder for entries */
+@define-color placeholder_text_color {{ colour-inactive-hex }};

gtk-theme/src/index.theme

@@ -0,0 +1,8 @@
+[Desktop Entry]
+Type=X-GNOME-Metatheme
+Name=Adaptive-Theme
+Comment=A very adaptive theme together with its scripts
+Encoding=UTF-8
+
+[X-GNOME-Metatheme]
+GtkTheme=Adaptive-Theme

system/environment

@@ -4,13 +4,12 @@
 # Syntax: simple "KEY=VAL" pairs on separate lines
 #
 
-QT_QPA_PLATFORMTHEME=qt5ct
+QT_QPA_PLATFORMTHEME=gtk3
-QT_STYLE_OVERRIDE=kvantum
+QT_QPA_PLATFORM=wayland
+GTK_THEME=Material-Black-Blueberry
+# QT_STYLE_OVERRIDE=kvantum
 GCM_CREDENTIAL_STORE=secretservice
 VKD3D_CONFIG=dxr11,dxr
 RADV_PERFTEST_RT=1
 ANDROID_HOME=/home/janis/Android/Sdk
-QT_QPA_PLATFORM=wayland
-JELLYFIN_WEB_DIR=/usr/share/jellyfin-web
-GTK_THEME=Material-Black-Blueberry
 EDITOR=nvim