tfaour/espresso_frame
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Add a curated theme system for "modern" style widgets, inspired by Tesserae
Build and push server image / test (push) Successful in 44s
Details
Build and push server image / build-and-push (push) Successful in 3m33s
Details
Build and push server image / deploy (push) Failing after 1m27s
Details

Browse Source 
Frame.theme (7 presets in app/theme_tokens.py) drives font family,
corner radius, drop shadow, and an accent hue for every modern-style
widget's header/accent region. Rich accent colors (not just the 6 flat
panel inks) are approximated via denser Bayer stippling confined to just
that region (html_render.ordered_dither_regions), so icon/text content
elsewhere stays exactly as crisp as it is today -- verified directly
against real Chromium renders, both in unit tests and via run-server.
"classic" is a byte-identical no-visual-change default: weather's header
keeps its original fixed blue gradient, tasks/calendar keep their flat
THEME_* ink.

Themes are purely stylistic -- battery's charge-level color, calendar/
tasks' per-owner event chips, and text's own per-widget font choice are
never touched.
This commit is contained in:
tfaour
2026-07-31 10:34:28 +00:00
parent e331f5e5a1
commit 5f4f8f2ea7
32 changed files with 808 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/app/templates/frame_config.html
+17
View File
@@ -196,6 +196,23 @@
Compare against the physical panel before keeping it.</p>
</details>
<details class="card">
<summary class="card-title">Theme</summary>
<p class="sub">A curated visual style for widgets using the
"modern" (experimental) render style -- font, corner radius,
shadow, and header accent. Widgets rendered in the classic
style are unaffected. Photos are unaffected too (see Photos
configuration below).</p>
<label>Theme
<select id="theme-select">
{% for key, t in themes.items() %}
<option value="{{ key }}" {% if frame.theme == key %}selected{% endif %}>{{ t.label }}</option>
{% endfor %}
</select>
</label>
<button type="button" class="secondary" id="theme-save" style="margin-top: 16px;">Save</button>
</details>
<details class="card">
<summary class="card-title">Photos configuration</summary>
<p class="sub">Palette and dithering used <strong>only</strong> by
server/app/templates/widget_html/battery.html.jinja
+3 -3
View File
@@ -1,8 +1,8 @@
<!doctype html>
<html><head><style>
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Bold.ttf"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
.card {
width: {{ w - gutter * 2 }}px;
server/app/templates/widget_html/calendar_agenda.html.jinja
+4 -4
View File
@@ -1,8 +1,8 @@
<!doctype html>
<html><head><style>
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Bold.ttf"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
.card {
width: {{ w - gutter * 2 }}px;
@@ -10,7 +10,7 @@
margin: {{ gutter }}px;
border-radius: {{ radius }}px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);
{% if shadow %}box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);{% endif %}
background: #ffffff;
display: flex;
flex-direction: column;
server/app/templates/widget_html/calendar_month.html.jinja
+4 -4
View File
@@ -1,8 +1,8 @@
<!doctype html>
<html><head><style>
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Bold.ttf"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
.card {
width: {{ w - gutter * 2 }}px;
@@ -10,7 +10,7 @@
margin: {{ gutter }}px;
border-radius: {{ radius }}px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);
{% if shadow %}box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);{% endif %}
background: #ffffff;
display: flex;
flex-direction: column;
server/app/templates/widget_html/calendar_today_tomorrow.html.jinja
+4 -4
View File
@@ -1,8 +1,8 @@
<!doctype html>
<html><head><style>
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Bold.ttf"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
.card {
width: {{ w - gutter * 2 }}px;
@@ -10,7 +10,7 @@
margin: {{ gutter }}px;
border-radius: {{ radius }}px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);
{% if shadow %}box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);{% endif %}
background: #ffffff;
display: flex;
flex-direction: column;
server/app/templates/widget_html/calendar_week_horizontal.html.jinja
+4 -4
View File
@@ -1,8 +1,8 @@
<!doctype html>
<html><head><style>
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Bold.ttf"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
.card {
width: {{ w - gutter * 2 }}px;
@@ -10,7 +10,7 @@
margin: {{ gutter }}px;
border-radius: {{ radius }}px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);
{% if shadow %}box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);{% endif %}
background: #ffffff;
display: flex;
}
server/app/templates/widget_html/framed_image.html.jinja
+1 -1
View File
@@ -8,7 +8,7 @@
margin: {{ gutter }}px;
border-radius: {{ radius }}px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 20, 60, 0.25);
{% if shadow %}box-shadow: 0 4px 14px rgba(0, 20, 60, 0.25);{% endif %}
background: #ffffff;
}
.card img {
server/app/templates/widget_html/tasks.html.jinja
+4 -4
View File
@@ -1,8 +1,8 @@
<!doctype html>
<html><head><style>
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Bold.ttf"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
.card {
width: {{ w - gutter * 2 }}px;
@@ -10,7 +10,7 @@
margin: {{ gutter }}px;
border-radius: {{ radius }}px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);
{% if shadow %}box-shadow: 0 4px 14px rgba(0, 20, 60, 0.2);{% endif %}
background: #ffffff;
display: flex;
flex-direction: column;
server/app/templates/widget_html/weather_current.html.jinja
+3 -3
View File
@@ -1,8 +1,8 @@
<!doctype html>
<html><head><style>
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Bold.ttf"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
.card {
width: {{ w - gutter * 2 }}px;
server/app/templates/widget_html/weather_daily.html.jinja
+4 -4
View File
@@ -1,8 +1,8 @@
<!doctype html>
<html><head><style>
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("file://{{ font_dir }}/Inter-Bold.ttf"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Inter", sans-serif; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_regular }}"); font-weight: 400; }
@font-face { font-family: "ThemeFont"; src: url("file://{{ font_bold }}"); font-weight: 700; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "ThemeFont", sans-serif; }
body { width: {{ w }}px; height: {{ h }}px; background: #ffffff; }
.card {
width: {{ w - gutter * 2 }}px;
@@ -10,7 +10,7 @@
margin: {{ gutter }}px;
border-radius: {{ radius }}px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0, 20, 60, 0.25);
{% if shadow %}box-shadow: 0 4px 14px rgba(0, 20, 60, 0.25);{% endif %}
background: #ffffff;
}
.header {