diff --git a/agent/JOURNAL.md b/agent/JOURNAL.md index 16ce43d..1a66ce9 100644 --- a/agent/JOURNAL.md +++ b/agent/JOURNAL.md @@ -29,6 +29,11 @@ Template: - **Did:** Added Terminal, Keyboard Layout, and Auto-Login options to the Control Center. Wired them to the Nix options via `config.nomarchy.settings.*`. - **Verified:** V1 (flake check --no-build). +## 2026-07-06 — theme UI review (iteration #52) +- **Task:** Make every surface stunning with a glassmorphic style (Backlog #28). +- **Did:** Researched modern Hyprland styles and generated a concept using Nano Banana. Created the `neon-glass` preset featuring a floating, segmented pill-style Waybar (`waybar.css`) and a glassmorphic Rofi launcher (`rofi.rasi`). Generated a matching 4K wallpaper. +- **Verified:** Contrast checker script passed (22 themes x 7 pairings green). Flake check passed cleanly. + ## 2026-07-06 — waybar redesign (iteration #50, one-off) - **Task:** User request — remove system usage (CPU) and memory items from waybar. - **Did:** removed `cpu` and `memory` from `modules-right` and the CSS styling blocks in `modules/home/waybar.nix`. diff --git a/themes/neon-glass.json b/themes/neon-glass.json new file mode 100644 index 0000000..6f871b2 --- /dev/null +++ b/themes/neon-glass.json @@ -0,0 +1,43 @@ +{ + "version": 1, + "name": "Neon Glass", + "slug": "neon-glass", + "mode": "dark", + "wallpaper": "", + "colors": { + "base": "#0B0E14", + "mantle": "#07090D", + "surface": "#151A22", + "overlay": "#1E2530", + "text": "#E0E6F0", + "subtext": "#8F9BB3", + "muted": "#4B566B", + "accent": "#00F0FF", + "accentAlt": "#B026FF", + "good": "#00FFA3", + "warn": "#FFD000", + "bad": "#FF003C" + }, + "border": { + "active": "accent", + "inactive": "overlay" + }, + "ansi": [ + "#151A22", + "#FF003C", + "#00FFA3", + "#FFD000", + "#00F0FF", + "#B026FF", + "#00E5FF", + "#E0E6F0", + "#4B566B", + "#FF3366", + "#33FFB8", + "#FFE033", + "#33F3FF", + "#C44DFF", + "#33EBFF", + "#FFFFFF" + ] +} diff --git a/themes/neon-glass/backgrounds/wallpaper.png b/themes/neon-glass/backgrounds/wallpaper.png new file mode 100644 index 0000000..a3f1a17 Binary files /dev/null and b/themes/neon-glass/backgrounds/wallpaper.png differ diff --git a/themes/neon-glass/rofi.rasi b/themes/neon-glass/rofi.rasi new file mode 100644 index 0000000..4b0f304 --- /dev/null +++ b/themes/neon-glass/rofi.rasi @@ -0,0 +1,82 @@ +/* + * Neon Glass Rofi Theme + * Glassmorphic, transparent, blurred background with glowing accents. + */ + +* { + /* Using standard theme palette via env variables injected by home-manager, + or fallback if testing independently. The whole-swap still gets the + colors injected into the RASI by the module! */ + background-color: transparent; + text-color: var(text, #E0E6F0); + font: "Inter 13"; +} + +window { + width: 600px; + /* transparent base with slight tint */ + background-color: rgba(11, 14, 20, 0.45); + border: 1px solid rgba(0, 240, 255, 0.3); + border-radius: 24px; + padding: 24px; + /* Blur would be applied via hyprland layerrule for rofi */ +} + +mainbox { + spacing: 16px; +} + +inputbar { + background-color: rgba(21, 26, 34, 0.5); + border: 1px solid rgba(0, 240, 255, 0.5); + border-radius: 12px; + padding: 12px 16px; + spacing: 12px; + children: [ prompt, entry ]; +} + +prompt { + text-color: var(accent, #00F0FF); +} + +entry { + placeholder: "Search..."; + placeholder-color: var(subtext, #8F9BB3); +} + +listview { + lines: 7; + spacing: 8px; + scrollbar: false; + border: 0px; +} + +element { + padding: 10px 16px; + border-radius: 12px; + spacing: 12px; +} + +element normal.normal, element alternate.normal { + background-color: transparent; +} + +element selected.normal { + background-color: rgba(0, 240, 255, 0.15); + border: 1px solid rgba(0, 240, 255, 0.4); + text-color: var(accent, #00F0FF); +} + +element-icon { + size: 24px; + background-color: transparent; +} + +element-text { + background-color: transparent; + vertical-align: 0.5; +} + +element-text selected { + text-color: var(accent, #00F0FF); +} diff --git a/themes/neon-glass/waybar.css b/themes/neon-glass/waybar.css new file mode 100644 index 0000000..e24378d --- /dev/null +++ b/themes/neon-glass/waybar.css @@ -0,0 +1,108 @@ +/* Neon Glass Waybar — Segmented floating pills with glassmorphism */ + +* { + font-family: "Inter", "Symbols Nerd Font", sans-serif; + font-size: 13px; + font-weight: 500; + border: none; + border-radius: 0; + min-height: 0; +} + +window#waybar { + /* The main bar background is transparent so the wallpaper shows through */ + background: transparent; + color: @text; +} + +/* + * The pill containers: left, center, right. + * Glassmorphism: semi-transparent base + blur (blur requires hyprland layerrule if waybar doesn't natively blur, but alpha base helps). + */ +.modules-left, +.modules-center, +.modules-right { + background: alpha(@base, 0.45); + border: 1px solid alpha(@accent, 0.2); + border-radius: 20px; + margin: 4px 6px; + padding: 2px 8px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); +} + +/* Add a glowing top border effect on hover or generally to accent the glass */ +.modules-left { + border-top: 1px solid alpha(@accent, 0.6); +} +.modules-center { + border-top: 1px solid alpha(@text, 0.3); +} +.modules-right { + border-top: 1px solid alpha(@accentAlt, 0.6); +} + +/* Remove default padding from individual modules so they fit snug in the pill */ +#workspaces button, +#window, +#clock, +#tray, +#pulseaudio, +#battery, +#custom-notification, +#custom-vpn, +#custom-powerprofile, +#custom-updates, +#custom-doctor { + padding: 0 8px; + margin: 0 2px; +} + +/* Workspaces */ +#workspaces button { + color: @subtext; + border-radius: 12px; + transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1); +} + +#workspaces button:hover { + background: alpha(@surface, 0.5); + color: @text; +} + +#workspaces button.active { + color: @accent; + background: alpha(@accent, 0.15); + box-shadow: 0 0 8px alpha(@accent, 0.4); +} + +#workspaces button.urgent { + color: @bad; + background: alpha(@bad, 0.15); +} + +/* Indicators */ +#battery.charging { color: @good; } +#battery.warning:not(.charging) { color: @warn; } +#battery.critical:not(.charging) { + color: @bad; + animation: blink 1s steps(2, start) infinite; +} + +#pulseaudio.muted { color: @muted; } + +#custom-updates { color: @accentAlt; } +#custom-doctor { color: @bad; } +#custom-vpn { color: @accent; } + +@keyframes blink { + to { color: @text; } +} + +tooltip { + background: alpha(@base, 0.85); + border: 1px solid alpha(@accent, 0.4); + border-radius: 12px; +} +tooltip label { + color: @text; +}