Add nord themes

CHANGELOG.md

@@ -16,7 +16,7 @@ If a change only affects particular applications, they are listed in parentheses
 - feat(buffyboard): Allow disabling input devices via config
 - feat(buffyboard): Add CLI flags for overriding geometry & DPI
 - fix(unl0kr): Shutdown message box doesn't close on decline
-- fix(unl0kr): Shutdown message box buttons are unstyled
+- fix(unl0kr): Shutdown message box buttons and label are unstyled
 - fix(unl0kr): Build fails when DRM is disabled
 - misc: Update lvgl to git master (2023-03-30)
 

buffyboard/regenerate-screenshots.sh

@@ -2,8 +2,6 @@
 
 # Change this depending on what device you're generating the screenshots on
 fb_res=1920x1080
-fb_depth=8
-fb_format=rgba
 
 executable=$1
 outdir=screenshots
@@ -14,6 +12,8 @@ themes=(
     breezy-dark
     pmos-light
     pmos-dark
+    nord-light
+    nord-dark
 )
 
 resolutions=(
@@ -50,14 +50,8 @@ touchscreen=false
 EOF
 }
 
-# Hide cursor
-echo -e '\033[?25l'
-
 function clean_up() {
     rm -f $config
-
-    # Show cursor
-    echo -e '\033[?25h'
 }
 
 trap clean_up EXIT
@@ -67,6 +61,8 @@ mkdir "$outdir"
 
 readme="# Buffyboard themes"$'\n'
 
+clear # Blank the screen
+
 for theme in ${themes[@]}; do
     write_config $theme
 
@@ -78,17 +74,16 @@ for theme in ${themes[@]}; do
 
         sleep 3 # Wait for UI to render
 
-        cat /dev/fb0 > "$outdir/$theme-$res"
+        ../../fbcat/fbcat /dev/fb0 > "$outdir/$theme-$res.ppm"
         convert -size $fb_res \
-            -depth $fb_depth \
+            $outdir/$theme-$res.ppm \
             screenshot-background.png \
-            $fb_format:"$outdir/$theme-$res" \
             -crop $res+0+0 \
             -gravity NorthWest \
             -composite \
             "$outdir/$theme-$res.png"
 
-        rm "$outdir/$theme-$res"
+        rm "$outdir/$theme-$res.ppm"
         kill -15 $pid
 
         readme="$readme<img src=\"$theme-$res.png\" alt=\"$res\" height=\"300\"/>"$'\n'

buffyboard/screenshots/README.md

@@ -47,3 +47,27 @@
 <img src="pmos-dark-1280x800.png" alt="1280x800" height="300"/>
 <img src="pmos-dark-1440x720.png" alt="1440x720" height="300"/>
 <img src="pmos-dark-1920x1080.png" alt="1920x1080" height="300"/>
+
+## nord-light
+
+<img src="nord-light-480x800.png" alt="480x800" height="300"/>
+<img src="nord-light-800x480.png" alt="800x480" height="300"/>
+<img src="nord-light-540x960.png" alt="540x960" height="300"/>
+<img src="nord-light-960x540.png" alt="960x540" height="300"/>
+<img src="nord-light-768x1024.png" alt="768x1024" height="300"/>
+<img src="nord-light-1024x768.png" alt="1024x768" height="300"/>
+<img src="nord-light-1280x800.png" alt="1280x800" height="300"/>
+<img src="nord-light-1440x720.png" alt="1440x720" height="300"/>
+<img src="nord-light-1920x1080.png" alt="1920x1080" height="300"/>
+
+## nord-dark
+
+<img src="nord-dark-480x800.png" alt="480x800" height="300"/>
+<img src="nord-dark-800x480.png" alt="800x480" height="300"/>
+<img src="nord-dark-540x960.png" alt="540x960" height="300"/>
+<img src="nord-dark-960x540.png" alt="960x540" height="300"/>
+<img src="nord-dark-768x1024.png" alt="768x1024" height="300"/>
+<img src="nord-dark-1024x768.png" alt="1024x768" height="300"/>
+<img src="nord-dark-1280x800.png" alt="1280x800" height="300"/>
+<img src="nord-dark-1440x720.png" alt="1440x720" height="300"/>
+<img src="nord-dark-1920x1080.png" alt="1920x1080" height="300"/>

shared/theme.c

@@ -285,7 +285,11 @@ static void apply_theme_cb(lv_theme_t *theme, lv_obj_t *obj) {
         return;
     }
 
-    if (lv_obj_check_type(obj, &lv_label_class) && (lv_obj_check_type(lv_obj_get_parent(obj), &lv_msgbox_class) || lv_obj_check_type(lv_obj_get_parent(obj), &lv_msgbox_content_class))) {
+    if (lv_obj_check_type(obj, &lv_label_class) &&
+            (lv_obj_check_type(lv_obj_get_parent(obj), &lv_msgbox_class)
+             || lv_obj_check_type(lv_obj_get_parent(obj), &lv_msgbox_header_class)
+             || lv_obj_check_type(lv_obj_get_parent(obj), &lv_msgbox_content_class)))
+    {
         lv_obj_add_style(obj, &(styles.msgbox_label), 0);
         return; /* Inherit styling from message box */
     }

shared/themes.c

@@ -632,16 +632,344 @@ static const bbx_theme pmos_dark = {
     }
 };
 
+/* Nord themes (based on https://www.nordtheme.com/docs/colors-and-palettes) */
+
+#define NORD0   0x2e3440
+#define NORD1   0x3b4252
+#define NORD2   0x434c5e
+#define NORD3   0x4c566a
+#define NORD4   0xd8dee9
+#define NORD5   0xe5e9f0
+#define NORD6   0xeceff4
+#define NORD7   0x8fbcbb
+#define NORD8   0x88c0d0
+#define NORD9   0x81a1c1
+#define NORD10  0x5e81ac
+#define NORD11  0xbf616a
+#define NORD12  0xd08770
+#define NORD13  0xebcb8b
+#define NORD14  0xa3be8c
+#define NORD15  0xb48ead
+
+static const bbx_theme nord_light = {
+    .name = "nord-light",
+    .window = {
+        .bg_color = NORD6,
+    },
+    .header = {
+        .bg_color = NORD4,
+        .border_width = 1,
+        .border_color = NORD4,
+        .pad = 20,
+        .gap = 10
+    },
+    .keyboard = {
+        .bg_color = NORD4,
+        .border_width = 1,
+        .border_color = NORD4,
+        .pad = 20,
+        .gap = 10,
+        .keys = {
+            .border_width = 1,
+            .corner_radius = 3,
+            .key_char = {
+                .normal = {
+                    .fg_color = NORD0,
+                    .bg_color = NORD9,
+                    .border_color = NORD10
+                },
+                .pressed = {
+                    .fg_color = NORD6,
+                    .bg_color = NORD10,
+                    .border_color = NORD10
+                }
+            },
+            .key_non_char = {
+                .normal = {
+                    .fg_color = NORD0,
+                    .bg_color = NORD8,
+                    .border_color = NORD10
+                },
+                .pressed = {
+                    .fg_color = NORD6,
+                    .bg_color = NORD10,
+                    .border_color = NORD10
+                }
+            },
+            .key_mod_act = {
+                .normal = {
+                    .fg_color = NORD10,
+                    .bg_color = 0xbed5da,
+                    .border_color = 0x009900
+                },
+                .pressed = {
+                    .fg_color = NORD6,
+                    .bg_color = NORD10,
+                    .border_color = NORD10
+                }
+            },
+            .key_mod_inact = {
+                .normal = {
+                    .fg_color = NORD0,
+                    .bg_color = NORD8,
+                    .border_color = NORD10
+                },
+                .pressed = {
+                    .fg_color = 0xf2f7f8,
+                    .bg_color = 0x009900,
+                    .border_color = 0x009900
+                }
+            }
+        }
+    },
+    .button = {
+        .border_width = 1,
+        .corner_radius = 3,
+        .pad = 8,
+        .normal = {
+            .fg_color = NORD0,
+            .bg_color = NORD8,
+            .border_color = NORD10
+        },
+        .pressed = {
+            .fg_color = NORD6,
+            .bg_color = NORD10,
+            .border_color = NORD10
+        }
+    },
+    .textarea = {
+        .fg_color = NORD0,
+        .bg_color = NORD5,
+        .border_width = 1,
+        .border_color = NORD0,
+        .corner_radius = 3,
+        .pad = 8,
+        .placeholder_color = NORD10,
+        .cursor = {
+            .width = 2,
+            .color = NORD0,
+            .period = 700
+        }
+    },
+    .dropdown = {
+        .button = {
+            .border_width = 1,
+            .corner_radius = 3,
+            .pad = 8,
+            .normal = {
+                .fg_color = NORD0,
+                .bg_color = NORD8,
+                .border_color = NORD10
+            },
+            .pressed = {
+                .fg_color = NORD6,
+                .bg_color = NORD10,
+                .border_color = NORD10
+            }
+        },
+        .list = {
+            .fg_color = NORD0,
+            .bg_color = NORD4,
+            .selection_fg_color = NORD6,
+            .selection_bg_color = NORD10,
+            .border_width = 1,
+            .border_color = NORD10,
+            .corner_radius = 0,
+            .pad = 8
+        }
+    },
+    .label = {
+        .fg_color = 0x070c0d
+    },
+    .msgbox = {
+        .fg_color = NORD0,
+        .bg_color = NORD4,
+        .border_width = 1,
+        .border_color = NORD10,
+        .corner_radius = 3,
+        .pad = 20,
+        .gap = 20,
+        .dimming = {
+            .color = NORD0,
+            .opacity = 225
+        }
+    },
+    .bar = {
+        .border_width = 1,
+        .border_color = 0x009900,
+        .corner_radius = 3,
+        .indicator = {
+            .bg_color = 0x009900
+        }
+    }
+};
+
+static const bbx_theme nord_dark = {
+    .name = "nord-dark",
+    .window = {
+        .bg_color = NORD0,
+    },
+    .header = {
+        .bg_color = NORD1,
+        .border_width = 1,
+        .border_color = NORD2,
+        .pad = 20,
+        .gap = 10
+    },
+    .keyboard = {
+        .bg_color = NORD1,
+        .border_width = 1,
+        .border_color = NORD2,
+        .pad = 20,
+        .gap = 10,
+        .keys = {
+            .border_width = 1,
+            .corner_radius = 3,
+            .key_char = {
+                .normal = {
+                    .fg_color = NORD0,
+                    .bg_color = NORD9,
+                    .border_color = NORD10
+                },
+                .pressed = {
+                    .fg_color = NORD6,
+                    .bg_color = NORD10,
+                    .border_color = NORD10
+                }
+            },
+            .key_non_char = {
+                .normal = {
+                    .fg_color = NORD0,
+                    .bg_color = NORD8,
+                    .border_color = NORD10
+                },
+                .pressed = {
+                    .fg_color = NORD6,
+                    .bg_color = NORD10,
+                    .border_color = NORD10
+                }
+            },
+            .key_mod_act = {
+                .normal = {
+                    .fg_color = NORD10,
+                    .bg_color = 0xbed5da,
+                    .border_color = 0x009900
+                },
+                .pressed = {
+                    .fg_color = NORD6,
+                    .bg_color = NORD10,
+                    .border_color = NORD10
+                }
+            },
+            .key_mod_inact = {
+                .normal = {
+                    .fg_color = NORD0,
+                    .bg_color = NORD8,
+                    .border_color = NORD10
+                },
+                .pressed = {
+                    .fg_color = 0xf2f7f8,
+                    .bg_color = 0x009900,
+                    .border_color = 0x009900
+                }
+            }
+        }
+    },
+    .button = {
+        .border_width = 1,
+        .corner_radius = 3,
+        .pad = 8,
+        .normal = {
+            .fg_color = NORD0,
+            .bg_color = NORD8,
+            .border_color = NORD10
+        },
+        .pressed = {
+            .fg_color = NORD6,
+            .bg_color = NORD10,
+            .border_color = NORD10
+        }
+    },
+    .textarea = {
+        .fg_color = NORD6,
+        .bg_color = NORD2,
+        .border_width = 1,
+        .border_color = NORD4,
+        .corner_radius = 3,
+        .pad = 8,
+        .placeholder_color = NORD10,
+        .cursor = {
+            .width = 2,
+            .color = NORD4,
+            .period = 700
+        }
+    },
+    .dropdown = {
+        .button = {
+            .border_width = 1,
+            .corner_radius = 3,
+            .pad = 8,
+            .normal = {
+                .fg_color = NORD0,
+                .bg_color = NORD8,
+                .border_color = NORD10
+            },
+            .pressed = {
+                .fg_color = NORD6,
+                .bg_color = NORD10,
+                .border_color = NORD10
+            }
+        },
+        .list = {
+            .fg_color = NORD6,
+            .bg_color = NORD1,
+            .selection_fg_color = NORD6,
+            .selection_bg_color = NORD10,
+            .border_width = 1,
+            .border_color = NORD10,
+            .corner_radius = 0,
+            .pad = 8
+        }
+    },
+    .label = {
+        .fg_color = 0x070c0d
+    },
+    .msgbox = {
+        .fg_color = NORD6,
+        .bg_color = NORD1,
+        .border_width = 1,
+        .border_color = NORD10,
+        .corner_radius = 3,
+        .pad = 20,
+        .gap = 20,
+        .dimming = {
+            .color = NORD0,
+            .opacity = 225
+        }
+    },
+    .bar = {
+        .border_width = 1,
+        .border_color = 0x009900,
+        .corner_radius = 3,
+        .indicator = {
+            .bg_color = 0x009900
+        }
+    }
+};
+
+
 /**
  * Public interface
  */
 
-const int bbx_themes_num_themes = 4;
+const int bbx_themes_num_themes = 6;
 const bbx_theme *bbx_themes_themes[] = {
     &breezy_light,
     &breezy_dark,
     &pmos_light,
-    &pmos_dark
+    &pmos_dark,
+    &nord_light,
+    &nord_dark,
 };
 
 bbx_themes_theme_id_t bbx_themes_find_theme_with_name(const char *name) {

unl0kr/regenerate-screenshots.sh

@@ -2,8 +2,6 @@
 
 # Change this depending on what device you're generating the screenshots on
 fb_res=1920x1080
-fb_depth=8
-fb_format=rgba
 
 executable=$1
 outdir=screenshots
@@ -14,6 +12,8 @@ themes=(
     breezy-dark
     pmos-light
     pmos-dark
+    nord-light
+    nord-dark
 )
 
 resolutions=(
@@ -79,14 +79,14 @@ for theme in ${themes[@]}; do
     readme="$readme"$'\n'"## $theme"$'\n\n'
     
     for res in ${resolutions[@]}; do
-        CRYPTTAB_SOURCE=/dev/sda1 $executable -g $res -C $config &
+        $executable -g $res -C $config &
         pid=$!
 
         sleep 3 # Wait for UI to render
 
-        cat /dev/fb0 > "$outdir/$theme-$res"
+        ../../fbcat/fbcat /dev/fb0 > "$outdir/$theme-$res.ppm"
-        convert -size $fb_res -depth $fb_depth $fb_format:"$outdir/$theme-$res" -crop $res+0+0 "$outdir/$theme-$res.png"
+        convert -size $fb_res "$outdir/$theme-$res.ppm" -crop $res+0+0 "$outdir/$theme-$res.png"
-        rm "$outdir/$theme-$res"
+        rm "$outdir/$theme-$res.ppm"
         kill -15 $pid
 
         readme="$readme<img src=\"$theme-$res.png\" alt=\"$res\" height=\"300\"/>"$'\n'

unl0kr/unl0kr.conf

@@ -13,8 +13,8 @@ obscured=true
 #bullet=
 
 [theme]
-default=breezy-light
+default=nord-light
-alternate=breezy-dark
+alternate=nord-dark
 
 #[input]
 #keyboard=false