aria/feresaria
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Share native theme components and fix dialog backdrop blur

Browse Source 
Centralize native palettes, presets, typography, controls, menus, calendar rendering, and icon assets in ferese-theme. Reuse the shared components across the shell, settings, lock screen, authentication prompt, and screen-sharing chooser.

Attach themed dialogs to compositor-owned materials, correct backdrop capture and sampling across output transforms, smooth patterned backgrounds, and prevent clipped picker buttons with the configured shell font.
This commit is contained in:
Samuel Onoja committed 2026-09-29 21:19:19 +01:00
1 parent 362bf79012
commit b2363a18b0
85 files changed
+2163 -1591
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

shell/ferese-shell/assets/icons/battery.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="6" width="18" height="12" rx="2.8"/>
<path d="M22 10v4"/>
<rect x="5" y="9" width="12" height="6" rx="0.9" fill="currentColor" stroke="none"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 355 B

shell/ferese-shell/assets/icons/ferese.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" role="img" aria-label="Ferese symbol: tiled F">
<rect x="20" y="20" width="50" height="160" rx="8" fill="currentColor"/>
<rect x="80" y="20" width="100" height="55" rx="8" fill="currentColor"/>
<rect x="80" y="95" width="70" height="45" rx="8" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 341 B

shell/ferese-shell/assets/icons/overview.svg
-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="7" height="7" rx="1.8"/>
<rect x="14" y="3" width="7" height="7" rx="1.8"/>
<rect x="3" y="14" width="7" height="7" rx="1.8"/>
<rect x="14" y="14" width="7" height="7" rx="1.8"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 403 B

shell/ferese-shell/assets/icons/status/airplane.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 3c-.9 0-1.5.7-1.5 1.7V9L3 13v2l7.5-2v4.5L8 19v1.5l4-1 4 1V19l-2.5-1.5V13l7.5 2v-2l-7.5-4V4.7C13.5 3.7 12.9 3 12 3Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 324 B

shell/ferese-shell/assets/icons/status/battery-25.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24" role="img" aria-label="Battery 25">
<rect x="2" y="6" width="25" height="12" rx="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
<rect x="28" y="10" width="2" height="4" rx="1" fill="currentColor"/>
<rect x="5" y="9" width="4.75" height="6" rx="1.2" fill="#e0654f"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 344 B

shell/ferese-shell/assets/icons/status/battery-50.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24" role="img" aria-label="Battery 50">
<rect x="2" y="6" width="25" height="12" rx="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
<rect x="28" y="10" width="2" height="4" rx="1" fill="currentColor"/>
<rect x="5" y="9" width="9.5" height="6" rx="1.2" fill="#3d7be6"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 343 B

shell/ferese-shell/assets/icons/status/battery-75.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24" role="img" aria-label="Battery 75">
<rect x="2" y="6" width="25" height="12" rx="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
<rect x="28" y="10" width="2" height="4" rx="1" fill="currentColor"/>
<rect x="5" y="9" width="14.25" height="6" rx="1.2" fill="#3d7be6"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 345 B

shell/ferese-shell/assets/icons/status/battery-charging.svg
-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24" role="img" aria-label="Battery charging">
<rect x="2" y="6" width="25" height="12" rx="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
<rect x="28" y="10" width="2" height="4" rx="1" fill="currentColor"/>
<rect x="5" y="9" width="19" height="6" rx="1.2" fill="#3d7be6" opacity="0.35"/>
<path d="M16,7 L12,13 H15 L14,17 L19,11 H16 Z" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 432 B

shell/ferese-shell/assets/icons/status/battery-empty.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24" role="img" aria-label="Battery empty">
<rect x="2" y="6" width="25" height="12" rx="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
<rect x="28" y="10" width="2" height="4" rx="1" fill="currentColor"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 279 B

shell/ferese-shell/assets/icons/status/battery-full.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 24" role="img" aria-label="Battery full">
<rect x="2" y="6" width="25" height="12" rx="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
<rect x="28" y="10" width="2" height="4" rx="1" fill="currentColor"/>
<rect x="5" y="9" width="19" height="6" rx="1.2" fill="#63c168"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 344 B

shell/ferese-shell/assets/icons/status/bluetooth-connected.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Bluetooth">
<g transform="translate(-11 -4)"><path d="M30,10 L30,58 M30,10 L42,22 L30,34 L42,46 L30,58" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></g>
<g transform="translate(-11 -4)"><circle cx="49" cy="34" r="4" fill="#3d7be6"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 382 B

shell/ferese-shell/assets/icons/status/bluetooth-off.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Bluetooth off">
<g transform="translate(-6 -4)"><path d="M30,10 L30,58 M30,10 L42,22 L30,34 L42,46 L30,58" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/></g>
<path d="M8,8 L52,52" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 413 B

shell/ferese-shell/assets/icons/status/bluetooth-on.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Bluetooth">
<g transform="translate(-6 -4)"><path d="M30,10 L30,58 M30,10 L42,22 L30,34 L42,46 L30,58" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 297 B

shell/ferese-shell/assets/icons/status/brightness.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"/>
<path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.4 1.4m11.2 11.2L19 19M19 5l-1.4 1.4M6.4 17.6 5 19"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 324 B

shell/ferese-shell/assets/icons/status/calendar.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M7 3v4m10-4v4M3 10h18"/><path d="M8 14h2m4 0h2m-8 4h2m4 0h2"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 287 B

shell/ferese-shell/assets/icons/status/chevron-down.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="m5 9 7 7 7-7"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 218 B

shell/ferese-shell/assets/icons/status/chevron-up.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 15 7-7 7 7"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 192 B

shell/ferese-shell/assets/icons/status/close.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="m6 6 12 12M18 6 6 18"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 175 B

shell/ferese-shell/assets/icons/status/control-center.svg
-8
View File
@@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Control center">
<g transform="translate(0 -4)">
<rect x="10" y="14" width="40" height="16" rx="8" fill="none" stroke="currentColor" stroke-width="3"/>
<circle cx="38" cy="22" r="6" fill="#3d7be6"/>
<rect x="10" y="38" width="40" height="16" rx="8" fill="none" stroke="currentColor" stroke-width="3"/>
<circle cx="22" cy="46" r="6" fill="currentColor"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 449 B

shell/ferese-shell/assets/icons/status/dnd.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 14.2A8.4 8.4 0 1 1 9.8 4a6.6 6.6 0 0 0 10.2 10.2Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 259 B

shell/ferese-shell/assets/icons/status/ethernet.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 3h14v12h-4v3H9v-3H5ZM8 3v4m4-4v4m4-4v4M12 18v3M8 21h8"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 262 B

shell/ferese-shell/assets/icons/status/lock.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="5" y="10" width="14" height="11" rx="2.8"/>
<path d="M8 10V7a4 4 0 0 1 8 0v3M12 14.5v2"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 294 B

shell/ferese-shell/assets/icons/status/mic-mute.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 6a3 3 0 0 1 6 0v5M5.5 11.5a6.5 6.5 0 0 0 10.6 5M18.5 11.5a6.5 6.5 0 0 1-.4 2.3M12 18v3m-3 0h6"/>
<path d="M4 4l16 16"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 327 B

shell/ferese-shell/assets/icons/status/mic.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="3" width="6" height="11" rx="3"/>
<path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3m-3 0h6"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 300 B

shell/ferese-shell/assets/icons/status/moon.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 14.2A8.4 8.4 0 1 1 9.8 4a6.6 6.6 0 0 0 10.2 10.2Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 259 B

shell/ferese-shell/assets/icons/status/notifications-off.svg
-8
View File
@@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Notification off">
<g transform="translate(0 -2)">
<path d="M30,10 A16,16 0 0,1 46,26 L46,38 L14,38 L14,26 A16,16 0 0,1 30,10 Z" fill="currentColor" opacity="0.5"/>
<rect x="10" y="38" width="40" height="5" rx="2" fill="currentColor" opacity="0.5"/>
<circle cx="30" cy="50" r="4" fill="currentColor" opacity="0.5"/>
<path d="M8,8 L52,56" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 509 B

shell/ferese-shell/assets/icons/status/notifications.svg
-7
View File
@@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Notification">
<g transform="translate(0 -2)">
<path d="M30,10 A16,16 0 0,1 46,26 L46,38 L14,38 L14,26 A16,16 0 0,1 30,10 Z" fill="currentColor"/>
<rect x="10" y="38" width="40" height="5" rx="2" fill="currentColor"/>
<circle cx="30" cy="50" r="4" fill="#3d7be6"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 360 B

shell/ferese-shell/assets/icons/status/power-balanced.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M7 12h10"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 226 B

shell/ferese-shell/assets/icons/status/power-off.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v9"/><path d="M7 5.5a9 9 0 1 0 10 0"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 219 B

shell/ferese-shell/assets/icons/status/power-performance.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a9 9 0 1 0 9 9"/><path d="M12 12 18 6"/><circle cx="12" cy="12" r="1"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 252 B

shell/ferese-shell/assets/icons/status/power-saver.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4c-8 0-14 3-14 10a6 6 0 0 0 6 6c7 0 10-6 8-16Z"/><path d="M4 21c2-5 6-8 12-11"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 260 B

shell/ferese-shell/assets/icons/status/power.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2.8v8M7.4 5.9a8 8 0 1 0 9.2 0"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 239 B

shell/ferese-shell/assets/icons/status/record-cancel.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Cancel display selection"><circle cx="30" cy="30" r="22" fill="none" stroke="currentColor" stroke-width="3"/><path d="m23 23 14 14m0-14L23 37" fill="none" stroke="#3d7be6" stroke-width="3" stroke-linecap="round"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 303 B

shell/ferese-shell/assets/icons/status/record-saving.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Saving recording"><circle cx="30" cy="30" r="22" fill="none" stroke="currentColor" stroke-width="3"/><g fill="#3d7be6"><circle cx="20" cy="30" r="3"/><circle cx="30" cy="30" r="3"/><circle cx="40" cy="30" r="3"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 306 B

shell/ferese-shell/assets/icons/status/record-stop.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Stop recording">
<circle cx="30" cy="30" r="22" fill="none" stroke="currentColor" stroke-width="3"/>
<rect x="20" y="20" width="20" height="20" rx="4" fill="#3d7be6"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 258 B

shell/ferese-shell/assets/icons/status/record.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Record screen">
<rect x="8" y="10" width="44" height="32" rx="7" fill="none" stroke="currentColor" stroke-width="3"/>
<path d="M23 50h14M30 42v8" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
<circle cx="30" cy="26" r="9" fill="#3d7be6"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 359 B

shell/ferese-shell/assets/icons/status/restart.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 11a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 225 B

shell/ferese-shell/assets/icons/status/settings.svg
-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Settings">
<g fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M25 7h10l2 7 5 3 7-2 5 9-5 5v6l5 5-5 9-7-2-5 3-2 7H25l-2-7-5-3-7 2-5-9 5-5v-6l-5-5 5-9 7 2 5-3z" transform="translate(0 -2)"/>
<circle cx="30" cy="30" r="8" stroke="#3d7be6"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 393 B

shell/ferese-shell/assets/icons/status/suspend.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 15.5A8.5 8.5 0 0 1 8.5 4 8.5 8.5 0 1 0 20 15.5Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 230 B

shell/ferese-shell/assets/icons/status/trash.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v5M14 11v5"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 229 B

shell/ferese-shell/assets/icons/status/volume-high.svg
-7
View File
@@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Audio">
<g transform="translate(3 0)">
<path d="M27.5,12.5 L15,22.5 L5,22.5 L5,37.5 L15,37.5 L27.5,47.5 Z" fill="currentColor"/>
<path d="M34,22 Q40,30 34,38" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
<path d="M40,15 Q50,30 40,45" fill="none" stroke="#3d7be6" stroke-width="4" stroke-linecap="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 431 B

shell/ferese-shell/assets/icons/status/volume-low.svg
-7
View File
@@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Audio">
<g transform="translate(3 0)">
<path d="M27.5,12.5 L15,22.5 L5,22.5 L5,37.5 L15,37.5 L27.5,47.5 Z" fill="currentColor"/>
<path d="M34,22 Q40,30 34,38" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
<path d="M40,15 Q50,30 40,45" fill="none" opacity="0.18" stroke="#3d7be6" stroke-width="4" stroke-linecap="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 446 B

shell/ferese-shell/assets/icons/status/volume-medium.svg
-7
View File
@@ -1,7 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Audio">
<g transform="translate(3 0)">
<path d="M27.5,12.5 L15,22.5 L5,22.5 L5,37.5 L15,37.5 L27.5,47.5 Z" fill="currentColor"/>
<path d="M34,22 Q40,30 34,38" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
<path d="M40,15 Q50,30 40,45" fill="none" opacity="0.35" stroke="#3d7be6" stroke-width="4" stroke-linecap="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 446 B

shell/ferese-shell/assets/icons/status/volume-mute.svg
-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Audio off">
<g transform="translate(3 0)">
<path d="M27.5,12.5 L15,22.5 L5,22.5 L5,37.5 L15,37.5 L27.5,47.5 Z" fill="currentColor" opacity="0.5"/>
<path d="M6,6 L54,54" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 340 B

shell/ferese-shell/assets/icons/status/wifi-full.svg
-8
View File
@@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Wifi">
<g transform="translate(3 -1.5) scale(0.9)">
<circle cx="30" cy="53" r="3" fill="#3d7be6"/>
<path d="M21,44 Q30,34 39,44" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
<path d="M12,35 Q30,15 48,35" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
<path d="M3,26 Q30,5 57,26" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 510 B

shell/ferese-shell/assets/icons/status/wifi-low.svg
-8
View File
@@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Wifi">
<g transform="translate(3 -1.5) scale(0.9)">
<circle cx="30" cy="53" r="3" fill="#3d7be6"/>
<path d="M21,44 Q30,34 39,44" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
<path opacity="0.25" d="M12,35 Q30,15 48,35" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
<path opacity="0.25" d="M3,26 Q30,5 57,26" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 540 B

shell/ferese-shell/assets/icons/status/wifi-medium.svg
-8
View File
@@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Wifi">
<g transform="translate(3 -1.5) scale(0.9)">
<circle cx="30" cy="53" r="3" fill="#3d7be6"/>
<path d="M21,44 Q30,34 39,44" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
<path d="M12,35 Q30,15 48,35" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
<path opacity="0.25" d="M3,26 Q30,5 57,26" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 525 B

shell/ferese-shell/assets/icons/status/wifi-off.svg
-9
View File
@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" role="img" aria-label="Wifi off">
<g transform="translate(3 -1.5) scale(0.9)">
<circle cx="30" cy="53" r="3" fill="currentColor" opacity="0.5"/>
<path d="M21,44 Q30,34 39,44" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" opacity="0.5"/>
<path d="M12,35 Q30,15 48,35" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" opacity="0.5"/>
<path d="M3,26 Q30,5 57,26" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" opacity="0.5"/>
<path d="M6,6 L54,54" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 673 B

shell/ferese-shell/assets/icons/volume.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9h4l5-4v14l-5-4H3Z"/>
<path d="M15.2 8.5a5 5 0 0 1 0 7"/>
<path d="M18.4 5.5a9.2 9.2 0 0 1 0 13"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 308 B

shell/ferese-shell/assets/icons/wifi.svg
-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M2.5 7.8a14.5 14.5 0 0 1 19 0"/>
<path d="M5.7 11.4a9.6 9.6 0 0 1 12.6 0"/>
<path d="M8.9 15a4.7 4.7 0 0 1 6.2 0"/>
<circle cx="12" cy="18.4" r="1.2" fill="currentColor" stroke="none"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 394 B

shell/ferese-shell/src/config.rs
+16
View File
@@ -90,6 +90,22 @@ impl Default for ShellTheme {
}
impl ShellTheme {
pub(crate) fn palette(self) -> ferese_theme::Palette {
let color =
|[r, g, b, a]: [u8; 4]| cosmic::iced::Color::from_rgba8(r, g, b, f32::from(a) / 255.);
let surface = color(self.surface_base);
ferese_theme::Palette {
background: surface,
sidebar: surface,
card: surface,
text: color(self.text_primary),
muted: color(self.text_muted),
accent: color(self.accent),
radius: self.material_radius,
error: cosmic::iced::Color::from_rgb8(235, 98, 98),
}
}
// The bar has its own foreground tokens, matched to its surface.
pub(crate) fn for_bar(mut self) -> Self {
self.text_primary = self.bar_text_primary;
shell/ferese-shell/src/main.rs
+30 -217
View File
@@ -39,6 +39,9 @@ use wayland_client::{
use crate::config::{ShellConfig, ShellTheme, WallpaperMode};
use crate::control::{ShellControl, ShellSnapshot};
use ferese_theme::calendar::format_bar_time;
use ferese_theme::calendar::stacked_digits as stacked_clock_digits;
use ferese_theme::icons::{accented as accented_icon, tinted as bar_icon};
const APP_ID: &str = "dev.ferese.Shell";
@@ -50,40 +53,20 @@ static SHELL_FONT: std::sync::OnceLock<std::sync::RwLock<cosmic::font::Font>> =
std::sync::OnceLock::new();
fn configured_font(family: Option<&str>) -> cosmic::font::Font {
family.map_or_else(cosmic::font::default, |family| {
// Font names require static storage. Intern repeated families and cap
// the cache so live theme edits cannot leak unlimited strings.
static FONTS: std::sync::OnceLock<
std::sync::Mutex<std::collections::HashMap<String, cosmic::font::Font>>,
> = std::sync::OnceLock::new();
let mut fonts = FONTS.get_or_init(Default::default).lock().unwrap();
ferese_theme::font(family)
}
if let Some(font) = fonts.get(family) {
return *font;
}
if fonts.len() >= 64 {
return cosmic::font::default();
}
let family = Box::leak(family.to_owned().into_boxed_str());
let font = cosmic::font::Font::with_name(family);
fonts.insert(family.to_owned(), font);
font
})
fn shell_font() -> cosmic::font::Font {
*SHELL_FONT
.get_or_init(|| std::sync::RwLock::new(cosmic::font::default()))
.read()
.unwrap()
}
// COSMIC's text helper explicitly selects its interface font, overriding
// Settings::default_font. Use this helper for every bar and menu label.
fn text<'a>(
content: impl Into<std::borrow::Cow<'a, str>> + 'a,
) -> cosmic::widget::Text<'a, cosmic::Theme, cosmic::Renderer> {
cosmic::widget::text(content).font(
*SHELL_FONT
.get_or_init(|| std::sync::RwLock::new(cosmic::font::default()))
.read()
.unwrap(),
)
ferese_theme::text(content, shell_font())
}
#[derive(Clone, Copy)]
@@ -111,35 +94,6 @@ impl From<ShellTheme> for BarMetrics {
}
}
fn stacked_clock_digits(label: &str) -> Option<[String; 2]> {
let mut parts = label.split_whitespace();
let time = parts.next()?;
if let Some(period) = parts.next()
&& !period.eq_ignore_ascii_case("am")
&& !period.eq_ignore_ascii_case("pm")
{
return None;
}
if parts.next().is_some() {
return None;
}
let (hour, minute) = time.split_once(':')?;
if !(1..=2).contains(&hour.len())
|| minute.len() != 2
|| !hour
.bytes()
.chain(minute.bytes())
.all(|digit| digit.is_ascii_digit())
{
return None;
}
Some([format!("{hour:0>2}"), minute.to_owned()])
}
fn main() -> cosmic::iced::Result {
// Small shell surfaces do not need a second GPU device and shader setup.
// Keep wgpu as a fallback and honor an explicit renderer preference.
@@ -191,7 +145,9 @@ fn main() -> cosmic::iced::Result {
.client_decorations(false)
.transparent(true)
.is_daemon(true);
settings = settings.default_font(shell_font);
settings = settings
.default_font(shell_font)
.theme(config.theme.palette().native_theme());
cosmic::app::run::<FereseShell>(settings, (config, wallpaper))
}
@@ -884,6 +840,10 @@ impl FereseShell {
Task::none()
}];
if old.palette() != theme.palette() {
tasks.push(cosmic::command::set_theme(theme.palette().native_theme()));
}
if clock_changed
&& self
.note_drag
@@ -2287,55 +2247,12 @@ impl FereseShell {
}
}
fn bar_icon(source: &'static [u8], size: u16, foreground: Color) -> icon::Icon {
accented_icon(source, size, foreground, foreground)
}
fn accented_icon(source: &'static [u8], size: u16, foreground: Color, accent: Color) -> icon::Icon {
let svg = std::str::from_utf8(source).expect("embedded SVG must be UTF-8");
// Battery canvases are wider; reserve that space instead of stretching
// or clipping them into the square slot used by the other status icons.
let aspect = if svg.contains("viewBox=\"0 0 32 24\"") {
4.0 / 3.0
} else {
1.0
};
icon::from_svg_bytes(tinted_svg(source, foreground, accent))
.symbolic(false)
.icon()
.size(size)
.width(Length::Fixed(f32::from(size) * aspect))
.content_fit(ContentFit::Contain)
.class(theme::Svg::custom(move |_| {
cosmic::iced::widget::svg::Style { color: None }
}))
}
fn tinted_svg(source: &[u8], foreground: Color, accent: Color) -> Vec<u8> {
let rgba = |foreground: Color| {
format!(
"rgba({},{},{},{})",
(foreground.r * 255.0).round() as u8,
(foreground.g * 255.0).round() as u8,
(foreground.b * 255.0).round() as u8,
foreground.a,
)
};
std::str::from_utf8(source)
.expect("embedded icons must be UTF-8 SVG")
.replace("currentColor", &rgba(foreground))
// The source artwork's blue swatch is the semantic theme accent.
// Battery warning/success swatches remain status colors.
.replace("#3d7be6", &rgba(accent))
.into_bytes()
}
fn overview_control(
bar: BarMetrics,
foreground: Color,
) -> Element<'static, cosmic::Action<Message>> {
container(bar_icon(
include_bytes!("../assets/icons/ferese.svg"),
ferese_theme::icons::FERESE,
bar.overview_icon_size,
foreground,
))
@@ -2587,48 +2504,20 @@ fn current_time() -> String {
format_bar_time(&Zoned::now())
}
fn format_bar_time(now: &Zoned) -> String {
let months = [
"jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sept", "oct", "nov", "dec",
];
let hour = now.hour();
let hour12 = if hour % 12 == 0 { 12 } else { hour % 12 };
format!(
"{} {}, {}:{:02} {}",
now.day(),
months[(now.month() - 1) as usize],
hour12,
now.minute(),
if hour < 12 { "am" } else { "pm" }
)
}
fn shell_surface_style(theme: ShellTheme) -> cosmic::iced::theme::Style {
cosmic::iced::theme::Style {
background_color: Color::TRANSPARENT,
text_color: color(theme.text_primary),
icon_color: color(theme.text_primary),
}
theme.palette().application_style(Color::TRANSPARENT)
}
fn bar_style(theme: ShellTheme, compositor_material: bool) -> container::Style {
container::Style {
icon_color: Some(color(theme.text_primary)),
text_color: Some(color(theme.text_primary)),
// The compositor paints the selected panel material behind this surface.
// A client-side fill would cover its blur and tint; use it only as fallback.
background: if compositor_material {
None
} else {
Some(Background::Color(color(theme.bar_background)))
},
border: Border {
radius: theme.bar_radius.into(),
..Border::default()
},
snap: true,
..container::Style::default()
let mut style =
ferese_theme::controls::surface_appearance(color(theme.bar_background), theme.bar_radius);
if compositor_material {
style.background = None;
}
style.text_color = Some(color(theme.text_primary));
style.icon_color = style.text_color;
style.snap = true;
style
}
fn bar_group_style(theme: ShellTheme) -> container::Style {
@@ -2818,6 +2707,8 @@ delegate_noop!(EffectsState: ignore FereseSurfaceEffectsV1);
#[cfg(test)]
mod tests {
use super::*;
use crate::control::{OutputSnapshot, WindowSnapshot};
#[test]
fn widget_drag_stops_at_edges_without_tunnelling_and_slides() {
use cosmic::iced::{Point, Rectangle};
@@ -2874,21 +2765,6 @@ mod tests {
);
}
#[test]
fn pixel_clock_stacks_only_hour_and_minute_formats() {
assert_eq!(
super::stacked_clock_digits("2:45 pm"),
Some(["02".into(), "45".into()])
);
assert_eq!(
super::stacked_clock_digits("14:45"),
Some(["14".into(), "45".into()])
);
assert!(super::stacked_clock_digits("14:45:30").is_none());
assert!(super::stacked_clock_digits("Today 14:45").is_none());
assert!(super::stacked_clock_digits("14:45 pm extra").is_none());
}
#[test]
fn note_drag_origin_and_bounds_use_logical_output_coordinates() {
use cosmic::iced::Point;
@@ -2938,28 +2814,6 @@ mod tests {
);
}
#[test]
fn clock_uses_lowercase_date_and_twelve_hour_time() {
for (stamp, expected) in [
(
"2026-09-28T21:32:00+01:00[Africa/Lagos]",
"28 sept, 9:32 pm",
),
(
"2026-09-28T00:05:00+01:00[Africa/Lagos]",
"28 sept, 12:05 am",
),
(
"2026-09-28T12:00:00+01:00[Africa/Lagos]",
"28 sept, 12:00 pm",
),
] {
assert_eq!(super::format_bar_time(&stamp.parse().unwrap()), expected);
}
}
use super::*;
use crate::control::{OutputSnapshot, WindowSnapshot};
#[test]
fn shell_font_respects_configured_family() {
assert_eq!(
@@ -2969,47 +2823,6 @@ mod tests {
assert_eq!(configured_font(None), cosmic::font::default());
}
#[test]
fn icons_use_theme_accent_and_preserve_battery_status_colors() {
for (source, accent) in [
(
include_bytes!("../assets/icons/status/battery-full.svg").as_slice(),
"#63c168",
),
(
include_bytes!("../assets/icons/status/battery-50.svg").as_slice(),
"#3d7be6",
),
(
include_bytes!("../assets/icons/status/battery-25.svg").as_slice(),
"#e0654f",
),
(
include_bytes!("../assets/icons/status/wifi-full.svg").as_slice(),
"#3d7be6",
),
(
include_bytes!("../assets/icons/status/control-center.svg").as_slice(),
"#3d7be6",
),
] {
let svg = String::from_utf8(tinted_svg(
source,
Color::from_rgb8(205, 214, 244),
Color::from_rgb8(203, 166, 247),
))
.unwrap();
assert!(!svg.contains("currentColor"));
assert!(svg.contains("rgba(205,214,244,1)"));
assert!(!svg.contains("#3d7be6"));
assert!(svg.contains(if accent == "#3d7be6" {
"rgba(203,166,247,1)"
} else {
accent
}));
}
}
#[test]
fn workspace_selector_has_distinct_active_paint() {
let theme = ShellTheme::default();
shell/ferese-shell/src/motion.rs
+9 -15
View File
@@ -144,21 +144,15 @@ pub(crate) fn button<'a, M: Clone + 'a>(
let progress = std::rc::Rc::new(std::cell::Cell::new(0.0));
let active = progress.clone();
let hovered = progress.clone();
let paint = move |progress: f32, pressed: bool| cosmic::widget::button::Style {
text_color: Some(foreground),
icon_color: Some(foreground),
border_radius: radius(14.0).into(),
background: Some(cosmic::iced::Background::Color(cosmic::iced::Color {
a: if pressed {
0.20 * opacity
} else {
((if selected { 0.14 } else { 0.0 })
+ progress * if selected { 0.02 } else { 0.08 })
* opacity
},
..foreground
})),
..Default::default()
let paint = move |progress: f32, pressed: bool| {
ferese_theme::controls::shell_button(
foreground,
selected,
opacity,
radius(14.),
progress,
pressed,
)
};
let content = button
.class(cosmic::theme::Button::Custom {
shell/ferese-shell/src/notification_ui.rs
+15 -27
View File
@@ -82,24 +82,17 @@ fn card_button<'a>(
round: bool,
accessible_name: String,
) -> Element<'a, cosmic::Action<Message>> {
let style = move |active: bool| button::Style {
text_color: Some(foreground),
icon_color: Some(foreground),
background: (active || round).then_some(Background::Color(hover)),
border_radius: (if round { motion::radius(11.0) } else { 0.0 }).into(),
..Default::default()
};
button::custom(content)
.name(accessible_name)
.width(if round { Length::Shrink } else { Length::Fill })
.padding(0)
.on_press(cosmic::Action::App(message))
.class(theme::Button::Custom {
active: Box::new(move |_, _| style(false)),
hovered: Box::new(move |_, _| style(true)),
pressed: Box::new(move |_, _| style(true)),
disabled: Box::new(move |_| style(false)),
})
.class(ferese_theme::controls::notification_button(
foreground,
hover,
if round { motion::radius(11.) } else { 0. },
round,
))
.into()
}
@@ -308,12 +301,7 @@ impl FereseShell {
bold.weight = cosmic::iced::font::Weight::Bold;
let app_icon = if notice.app.to_lowercase().starts_with("ferese") || notice.icon.is_empty()
{
accented_icon(
include_bytes!("../assets/icons/ferese.svg"),
18,
accent,
accent,
)
accented_icon(ferese_theme::icons::FERESE, 18, accent, accent)
} else if notice.icon.starts_with('/') {
icon::icon(icon::from_path(notice.icon.clone().into())).size(18)
} else {
@@ -403,7 +391,7 @@ impl FereseShell {
.class(theme::Text::Color(muted)),
)
.push(icon_control(
include_bytes!("../assets/icons/status/close.svg"),
ferese_theme::icons::CLOSE,
"Dismiss notification",
if history && count > 1 {
Message::RemoveNotificationGroup(notice.app.clone())
@@ -624,7 +612,7 @@ impl FereseShell {
.align_y(alignment::Vertical::Center)
.push(container(heading).width(Length::Fill))
.push(icon_control(
include_bytes!("../assets/icons/status/close.svg"),
ferese_theme::icons::CLOSE,
"Close notification center",
Message::ToggleNotificationHistory,
muted,
@@ -637,9 +625,9 @@ impl FereseShell {
muted
};
let dnd_icon = if self.notifications.dnd {
include_bytes!("../assets/icons/status/notifications-off.svg").as_slice()
ferese_theme::icons::NOTIFICATIONS_OFF
} else {
include_bytes!("../assets/icons/status/notifications.svg").as_slice()
ferese_theme::icons::NOTIFICATIONS
};
let dnd = row([])
.spacing(10)
@@ -705,7 +693,7 @@ impl FereseShell {
.align_x(alignment::Horizontal::Center)
.push(
container(accented_icon(
include_bytes!("../assets/icons/status/notifications.svg"),
ferese_theme::icons::NOTIFICATIONS,
26,
muted,
accent,
@@ -749,7 +737,7 @@ impl FereseShell {
.width(Length::Fill),
)
.push(icon_control(
include_bytes!("../assets/icons/status/trash.svg"),
ferese_theme::icons::TRASH,
"Clear all notifications",
Message::ClearNotifications,
muted,
@@ -777,7 +765,7 @@ impl FereseShell {
.width(Length::Fill),
)
.push(icon_control(
include_bytes!("../assets/icons/status/chevron-up.svg"),
ferese_theme::icons::CHEVRON_UP,
"Collapse group",
Message::ToggleNotificationGroup(latest.app.clone()),
muted,
@@ -785,7 +773,7 @@ impl FereseShell {
24,
))
.push(icon_control(
include_bytes!("../assets/icons/status/trash.svg"),
ferese_theme::icons::TRASH,
"Clear group",
Message::RemoveNotificationGroup(latest.app.clone()),
muted,
shell/ferese-shell/src/status_ui.rs
+96 -352
View File
@@ -275,16 +275,10 @@ impl FereseShell {
}
let (source, enabled) = if kind == Menu::Recording {
let source: &'static [u8] = match self.recorder.state {
recording::State::Selecting => {
include_bytes!("../assets/icons/status/record-cancel.svg")
}
recording::State::Recording(_) => {
include_bytes!("../assets/icons/status/record-stop.svg")
}
recording::State::Saving => {
include_bytes!("../assets/icons/status/record-saving.svg")
}
_ => include_bytes!("../assets/icons/status/record.svg"),
recording::State::Selecting => ferese_theme::icons::RECORD_CANCEL,
recording::State::Recording(_) => ferese_theme::icons::RECORD_STOP,
recording::State::Saving => ferese_theme::icons::RECORD_SAVING,
_ => ferese_theme::icons::RECORD,
};
(source, true)
} else {
@@ -420,33 +414,20 @@ impl FereseShell {
let kind = menu.kind;
let primary = color_with_opacity(theme.text_primary, p);
let muted = color_with_opacity(theme.text_muted, p);
let badge = container(
let badge = ferese_theme::menus::badge(
accented_icon(
status_icon(kind, &self.status).0,
22,
primary,
color_with_opacity(theme.accent, p),
)
.width(Length::Fixed(22.0)),
)
.width(36)
.height(36)
.center_x(36)
.center_y(36)
.class(theme::Container::custom(move |_| container::Style {
background: Some(Background::Color(color_with_opacity(
theme.accent,
0.12 * p,
))),
border: Border {
radius: motion::radius(20.0).into(),
..Default::default()
},
..Default::default()
}));
let mut heading = row![badge, text(kind.title()).size(18).width(Length::Fill)]
.spacing(10)
.align_y(Alignment::Center);
.width(Length::Fixed(22.))
.into(),
color(theme.accent),
p,
motion::radius(20.),
);
let mut heading = ferese_theme::menus::heading(badge, kind.title(), shell_font());
if kind == Menu::System
&& self
.config
@@ -458,7 +439,7 @@ impl FereseShell {
{
heading = heading.push(motion::button(
button::custom(accented_icon(
include_bytes!("../assets/icons/status/settings.svg"),
ferese_theme::icons::SETTINGS,
20,
primary,
color_with_opacity(theme.accent, p),
@@ -687,7 +668,7 @@ impl FereseShell {
let brightness = column![
text("Brightness").size(13),
slider_row(
include_bytes!("../assets/icons/status/brightness.svg"),
ferese_theme::icons::BRIGHTNESS,
value,
true,
primary,
@@ -778,24 +759,23 @@ impl FereseShell {
}
if menu.kind == Menu::Battery {
rows = rows.push(text("Power mode").size(13).class(theme::Text::Color(muted)));
rows = rows.push(ferese_theme::menus::section_label(
"Power mode",
shell_font(),
muted,
));
if let Some(profiles) = &self.status.power_profiles {
let mut modes = row::with_capacity(3).spacing(6).width(Length::Fill);
for (index, (label, icon, profile)) in [
(
"Power saver",
include_bytes!("../assets/icons/status/power-saver.svg").as_slice(),
ferese_theme::icons::POWER_SAVER,
"power-saver",
),
(
"Balanced",
include_bytes!("../assets/icons/status/power-balanced.svg").as_slice(),
"balanced",
),
("Balanced", ferese_theme::icons::POWER_BALANCED, "balanced"),
(
"Performance",
include_bytes!("../assets/icons/status/power-performance.svg")
.as_slice(),
ferese_theme::icons::POWER_PERFORMANCE,
"performance",
),
]
@@ -827,19 +807,19 @@ impl FereseShell {
(
self.status.reboot,
"Restart",
include_bytes!("../assets/icons/status/restart.svg").as_slice(),
ferese_theme::icons::RESTART,
Action::Reboot,
),
(
self.status.poweroff,
"Power off",
include_bytes!("../assets/icons/status/power-off.svg").as_slice(),
ferese_theme::icons::POWER_OFF,
Action::Poweroff,
),
(
self.status.suspend,
"Suspend",
include_bytes!("../assets/icons/status/suspend.svg").as_slice(),
ferese_theme::icons::SUSPEND,
Action::Suspend,
),
] {
@@ -849,7 +829,11 @@ impl FereseShell {
}
if self.status.reboot || self.status.poweroff || self.status.suspend {
rows = rows.push(text("Power").size(13).class(theme::Text::Color(muted)));
rows = rows.push(ferese_theme::menus::section_label(
"Power",
shell_font(),
muted,
));
rows = rows.push(power);
}
}
@@ -1008,21 +992,7 @@ fn control_card<'a>(
foreground: Color,
opacity: f32,
) -> Element<'a, cosmic::Action<Message>> {
container(content)
.padding(10)
.width(Length::Fill)
.class(theme::Container::custom(move |_| container::Style {
background: Some(Background::Color(Color {
a: 0.045 * opacity,
..foreground
})),
border: Border {
radius: motion::radius(22.0).into(),
..Default::default()
},
..Default::default()
}))
.into()
ferese_theme::menus::section(content, foreground, opacity, motion::radius(22.))
}
fn connection_caption(detail: &str) -> String {
@@ -1101,22 +1071,13 @@ fn connection_control<'a>(
))
.on_press(cosmic::Action::App(Message::Control(action)));
let tile: Element<'_, cosmic::Action<Message>> = if selected {
let paint = move |outline| cosmic::widget::button::Style {
background: Some(Color { a: opacity, ..fill }.into()),
text_color: Some(foreground),
icon_color: Some(foreground),
border_radius: motion::radius(14.).into(),
outline_width: outline,
outline_color: foreground,
..Default::default()
};
button
.class(theme::Button::Custom {
active: Box::new(move |focused, _| paint(if focused { 1. } else { 0. })),
hovered: Box::new(move |_, _| paint(1.)),
pressed: Box::new(move |_, _| paint(2.)),
disabled: Box::new(move |_| paint(0.)),
})
.class(ferese_theme::controls::filled_button(
fill,
foreground,
motion::radius(14.),
opacity,
))
.into()
} else {
motion::button(button, foreground, false, opacity)
@@ -1180,98 +1141,24 @@ fn power_tile_action<'a>(
motion::button(btn, foreground, false, opacity)
}
fn calendar_month(today: jiff::civil::Date, offset: i32) -> (jiff::civil::Date, usize, usize) {
let month_index = i32::from(today.year()) * 12 + i32::from(today.month()) - 1 + offset;
let year = month_index.div_euclid(12) as i16;
let month = (month_index.rem_euclid(12) + 1) as i8;
let first = jiff::civil::Date::new(year, month, 1).expect("calendar month is in range");
let start = usize::try_from(first.weekday().since(jiff::civil::Weekday::Monday)).unwrap_or(0);
let days = usize::try_from(first.days_in_month()).unwrap_or(31);
(first, start, days)
}
fn calendar_grid<'a>(
offset: i32,
theme: ShellTheme,
opacity: f32,
) -> Element<'a, cosmic::Action<Message>> {
let today = Zoned::now().date();
let months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
let (first, start, days) = calendar_month(today, offset);
let year = first.year();
let month = first.month();
let primary = color_with_opacity(theme.text_primary, opacity);
let muted = color_with_opacity(theme.text_muted, opacity);
let header = row![
text(format!("{} {year}", months[(month - 1) as usize]))
.size(15)
.width(Length::Fill),
menu_button("‹", Message::CalendarMonth(-1), primary, opacity),
menu_button("Today", Message::CalendarToday, primary, opacity),
menu_button("›", Message::CalendarMonth(1), primary, opacity),
]
.align_y(Alignment::Center)
.spacing(2);
let mut grid = column::with_capacity(8).spacing(3).push(header);
let mut weekdays = row::with_capacity(7).spacing(3);
for label in ["M", "T", "W", "T", "F", "S", "S"] {
weekdays = weekdays.push(
container(text(label).size(11).class(theme::Text::Color(muted)))
.width(30)
.center_x(30),
);
}
grid = grid.push(weekdays);
for week in 0..(start + days).div_ceil(7) {
let mut dates = row::with_capacity(7).spacing(3);
for weekday in 0..7 {
let cell = week * 7 + weekday;
let day = cell
.checked_sub(start)
.map(|day| day + 1)
.filter(|day| *day <= days);
let is_today =
year == today.year() && month == today.month() && day == Some(today.day() as usize);
let label = day.map_or(String::new(), |day| day.to_string());
dates = dates.push(
container(text(label).size(12).class(theme::Text::Color(if is_today {
primary
} else {
muted
})))
.width(30)
.height(25)
.center_x(30)
.center_y(25)
.class(theme::Container::custom(move |_| container::Style {
background: is_today.then_some(Background::Color(color_with_opacity(
theme.accent,
0.2 * opacity,
))),
border: Border {
radius: motion::radius(12.0).into(),
..Default::default()
},
..Default::default()
})),
);
}
grid = grid.push(dates);
}
grid.into()
ferese_theme::calendar::grid(
Zoned::now().date(),
offset,
theme.palette(),
shell_font(),
opacity,
[
menu_button("‹", Message::CalendarMonth(-1), primary, opacity),
menu_button("Today", Message::CalendarToday, primary, opacity),
menu_button("›", Message::CalendarMonth(1), primary, opacity),
],
)
}
fn menu_button<'a>(
@@ -1281,9 +1168,7 @@ fn menu_button<'a>(
opacity: f32,
) -> Element<'a, cosmic::Action<Message>> {
motion::button(
button::custom(text(label).size(13))
.padding([6, 8])
.on_press(cosmic::Action::App(message)),
ferese_theme::menus::button(label, cosmic::Action::App(message), shell_font()),
foreground,
false,
opacity,
@@ -1297,59 +1182,7 @@ fn shell_switch<'a>(
palette: ShellTheme,
opacity: f32,
) -> Element<'a, cosmic::Action<Message>> {
let track = if enabled {
color(palette.accent)
} else {
Color {
a: 0.22,
..color(palette.text_primary)
}
};
let thumb = if enabled {
ferese_theme::foreground(track, color(palette.text_primary))
} else {
color(palette.text_primary)
};
let knob = container(text(""))
.width(16)
.height(16)
.class(theme::Container::custom(move |_| container::Style {
background: Some(
Color {
a: opacity,
..thumb
}
.into(),
),
border: Border {
radius: motion::radius(8.).into(),
..Default::default()
},
..Default::default()
}));
let toggle = container(knob)
.width(36)
.height(20)
.padding(2)
.align_x(if enabled {
alignment::Horizontal::Right
} else {
alignment::Horizontal::Left
})
.class(theme::Container::custom(move |_| container::Style {
background: Some(
Color {
a: track.a * opacity,
..track
}
.into(),
),
border: Border {
radius: motion::radius(10.).into(),
..Default::default()
},
..Default::default()
}));
let toggle = ferese_theme::menus::switch(enabled, palette.palette(), opacity);
motion::button(
button::custom(toggle)
.padding(4)
@@ -1368,12 +1201,11 @@ fn toggle_row<'a>(
palette: ShellTheme,
opacity: f32,
) -> Element<'a, cosmic::Action<Message>> {
row![
text(label).width(Length::Fill).size(14),
shell_switch(label, on, action, palette, opacity)
]
.align_y(Alignment::Center)
.into()
ferese_theme::menus::row(
label,
shell_switch(label, on, action, palette, opacity),
shell_font(),
)
}
fn slider_row(
@@ -1384,39 +1216,6 @@ fn slider_row(
icon_accent: Color,
opacity: f32,
) -> Element<'static, cosmic::Action<Message>> {
let style = std::rc::Rc::new(move |_: &cosmic::Theme| {
use cosmic::iced::widget::slider::{Breakpoint, Handle, HandleShape, Rail, Style};
Style {
rail: Rail {
backgrounds: (
foreground.into(),
Color {
a: 0.16 * opacity,
..foreground
}
.into(),
),
width: 4.0,
border: Border {
radius: motion::radius(2.0).into(),
..Default::default()
},
},
handle: Handle {
shape: HandleShape::Rectangle {
width: 10,
height: 10,
border_radius: motion::radius(5.0).into(),
},
background: foreground.into(),
border_width: 0.0,
border_color: Color::TRANSPARENT,
},
breakpoint: Breakpoint {
color: Color::TRANSPARENT,
},
}
});
let control = slider(
if brightness { 1..=100 } else { 0..=100 },
value,
@@ -1430,11 +1229,11 @@ fn slider_row(
)
.width(Length::Fill)
.height(24)
.class(theme::iced::Slider::Custom {
active: style.clone(),
hovered: style.clone(),
dragging: style,
});
.class(ferese_theme::menus::slider(
foreground,
opacity,
motion::radius(5.),
));
row![
accented_icon(source, 18, foreground, icon_accent),
control,
@@ -1479,13 +1278,13 @@ fn status_label(kind: Menu, s: &Snapshot) -> String {
fn audio_icon(volume: u8, muted: bool) -> &'static [u8] {
if muted || volume == 0 {
include_bytes!("../assets/icons/status/volume-mute.svg")
ferese_theme::icons::VOLUME_MUTE
} else if volume <= 33 {
include_bytes!("../assets/icons/status/volume-low.svg")
ferese_theme::icons::VOLUME_LOW
} else if volume <= 66 {
include_bytes!("../assets/icons/status/volume-medium.svg")
ferese_theme::icons::VOLUME_MEDIUM
} else {
include_bytes!("../assets/icons/status/volume-high.svg")
ferese_theme::icons::VOLUME_HIGH
}
}
@@ -1493,79 +1292,57 @@ fn status_icon(kind: Menu, s: &Snapshot) -> (&'static [u8], bool) {
match kind {
Menu::Network => {
let Some(n) = &s.network else {
return (include_bytes!("../assets/icons/status/wifi-off.svg"), false);
return (ferese_theme::icons::WIFI_OFF, false);
};
if !n.enabled || n.connection.is_none() {
(include_bytes!("../assets/icons/status/wifi-off.svg"), false)
(ferese_theme::icons::WIFI_OFF, false)
} else if n.signal <= 33 {
(include_bytes!("../assets/icons/status/wifi-low.svg"), true)
(ferese_theme::icons::WIFI_LOW, true)
} else if n.signal <= 66 {
(
include_bytes!("../assets/icons/status/wifi-medium.svg"),
true,
)
(ferese_theme::icons::WIFI_MEDIUM, true)
} else {
(include_bytes!("../assets/icons/status/wifi-full.svg"), true)
(ferese_theme::icons::WIFI_FULL, true)
}
}
Menu::Bluetooth => match &s.bluetooth {
Some(b) if b.enabled && !b.devices.is_empty() => (
include_bytes!("../assets/icons/status/bluetooth-connected.svg"),
true,
),
Some(b) if b.enabled => (
include_bytes!("../assets/icons/status/bluetooth-on.svg"),
true,
),
_ => (
include_bytes!("../assets/icons/status/bluetooth-off.svg"),
false,
),
Some(b) if b.enabled && !b.devices.is_empty() => {
(ferese_theme::icons::BLUETOOTH_CONNECTED, true)
}
Some(b) if b.enabled => (ferese_theme::icons::BLUETOOTH_ON, true),
_ => (ferese_theme::icons::BLUETOOTH_OFF, false),
},
Menu::Audio => s.audio.as_ref().map_or((audio_icon(0, true), false), |a| {
(audio_icon(a.volume, a.muted), !a.muted && a.volume > 0)
}),
Menu::Calendar => (include_bytes!("../assets/icons/status/calendar.svg"), true),
Menu::Recording => (include_bytes!("../assets/icons/status/record.svg"), true),
Menu::Calendar => (ferese_theme::icons::CALENDAR, true),
Menu::Recording => (ferese_theme::icons::RECORD, true),
Menu::Battery => {
let Some(b) = &s.battery else {
return (
include_bytes!("../assets/icons/status/battery-empty.svg"),
false,
);
return (ferese_theme::icons::BATTERY_EMPTY, false);
};
let icon: &'static [u8] = if b.status == "Charging" {
include_bytes!("../assets/icons/status/battery-charging.svg")
ferese_theme::icons::BATTERY_CHARGING
} else if b.percent >= 80 {
include_bytes!("../assets/icons/status/battery-full.svg")
ferese_theme::icons::BATTERY_FULL
} else if b.percent >= 50 {
include_bytes!("../assets/icons/status/battery-75.svg")
ferese_theme::icons::BATTERY_75
} else if b.percent >= 20 {
include_bytes!("../assets/icons/status/battery-50.svg")
ferese_theme::icons::BATTERY_50
} else if b.percent > 0 {
include_bytes!("../assets/icons/status/battery-25.svg")
ferese_theme::icons::BATTERY_25
} else {
include_bytes!("../assets/icons/status/battery-empty.svg")
ferese_theme::icons::BATTERY_EMPTY
};
(icon, true)
}
Menu::Notifications => {
if s.notifications.as_ref().is_some_and(|n| n.dnd) {
(
include_bytes!("../assets/icons/status/notifications-off.svg"),
false,
)
(ferese_theme::icons::NOTIFICATIONS_OFF, false)
} else {
(
include_bytes!("../assets/icons/status/notifications.svg"),
true,
)
(ferese_theme::icons::NOTIFICATIONS, true)
}
}
Menu::System => (
include_bytes!("../assets/icons/status/control-center.svg"),
true,
),
Menu::System => (ferese_theme::icons::CONTROL_CENTER, true),
}
}
@@ -1589,21 +1366,6 @@ mod tests {
assert!(caption.ends_with('…'));
}
#[test]
fn calendar_aligns_leap_months_and_year_boundaries() {
let february = jiff::civil::Date::new(2024, 2, 15).unwrap();
let (first, start, days) = calendar_month(february, 0);
assert_eq!((first.year(), first.month(), start, days), (2024, 2, 3, 29));
let (first, start, days) = calendar_month(february, -2);
assert_eq!(
(first.year(), first.month(), start, days),
(2023, 12, 4, 31)
);
let june = jiff::civil::Date::new(2025, 6, 1).unwrap();
let (_, start, days) = calendar_month(june, 0);
assert_eq!((start, days), (6, 30));
}
#[test]
fn smaller_popups_have_content_specific_widths() {
assert_eq!(Menu::System.width(), 360.0);
@@ -1663,10 +1425,7 @@ mod tests {
};
assert_eq!(
status_icon(Menu::Audio, &s),
(
include_bytes!("../assets/icons/status/volume-mute.svg").as_slice(),
false
)
(ferese_theme::icons::VOLUME_MUTE, false)
);
s.battery = Some(status::Battery {
@@ -1675,7 +1434,7 @@ mod tests {
});
assert_eq!(
status_icon(Menu::Battery, &s).0,
include_bytes!("../assets/icons/status/battery-charging.svg")
ferese_theme::icons::BATTERY_CHARGING
);
s.notifications = Some(status::Notifications {
@@ -1684,7 +1443,7 @@ mod tests {
});
assert_eq!(
status_icon(Menu::Notifications, &s).0,
include_bytes!("../assets/icons/status/notifications-off.svg")
ferese_theme::icons::NOTIFICATIONS_OFF
);
assert_eq!(
status_label(Menu::Notifications, &s),
@@ -1697,7 +1456,7 @@ mod tests {
});
assert_eq!(
status_icon(Menu::Bluetooth, &s).0,
include_bytes!("../assets/icons/status/bluetooth-off.svg")
ferese_theme::icons::BLUETOOTH_OFF
);
}
@@ -1705,26 +1464,11 @@ mod tests {
fn battery_bands_and_live_label_follow_charge_state() {
let mut s = Snapshot::default();
for (percent, expected) in [
(
0,
include_bytes!("../assets/icons/status/battery-empty.svg").as_slice(),
),
(
19,
include_bytes!("../assets/icons/status/battery-25.svg").as_slice(),
),
(
20,
include_bytes!("../assets/icons/status/battery-50.svg").as_slice(),
),
(
50,
include_bytes!("../assets/icons/status/battery-75.svg").as_slice(),
),
(
80,
include_bytes!("../assets/icons/status/battery-full.svg").as_slice(),
),
(0, ferese_theme::icons::BATTERY_EMPTY),
(19, ferese_theme::icons::BATTERY_25),
(20, ferese_theme::icons::BATTERY_50),
(50, ferese_theme::icons::BATTERY_75),
(80, ferese_theme::icons::BATTERY_FULL),
] {
s.battery = Some(status::Battery {
percent,