From 874ec7f38f91ced6f8b836db4d06c3eebcc9163f Mon Sep 17 00:00:00 2001 From: Arpit Chakladar Date: Tue, 15 Sep 2026 21:21:28 +0530 Subject: feat(colors/base16): using the new base16 colorscheme in all modules --- modules/desktop/eww/default.nix | 2 +- modules/desktop/eww/eww.mustache.scss | 85 ---------------- modules/desktop/eww/eww.scss | 85 ++++++++++++++++ modules/desktop/rofi/default.nix | 2 +- modules/desktop/rofi/theme.mustache.rasi | 163 ------------------------------- modules/desktop/rofi/theme.rasi | 163 +++++++++++++++++++++++++++++++ modules/desktop/xdg/default.nix | 4 +- modules/desktop/xdg/style.css | 150 ++++++++++++++++++++++++++++ modules/desktop/xdg/style.mustache.css | 150 ---------------------------- 9 files changed, 402 insertions(+), 402 deletions(-) delete mode 100644 modules/desktop/eww/eww.mustache.scss create mode 100644 modules/desktop/eww/eww.scss delete mode 100644 modules/desktop/rofi/theme.mustache.rasi create mode 100644 modules/desktop/rofi/theme.rasi create mode 100644 modules/desktop/xdg/style.css delete mode 100644 modules/desktop/xdg/style.mustache.css (limited to 'modules/desktop') diff --git a/modules/desktop/eww/default.nix b/modules/desktop/eww/default.nix index 076307a..dfc80cd 100644 --- a/modules/desktop/eww/default.nix +++ b/modules/desktop/eww/default.nix @@ -51,7 +51,7 @@ (toString config.fonts.smallSize) (toString config.fonts.idxSize) ] - (builtins.readFile ./eww.mustache.scss); + (builtins.readFile ./eww.scss); } ); }; diff --git a/modules/desktop/eww/eww.mustache.scss b/modules/desktop/eww/eww.mustache.scss deleted file mode 100644 index 6e8a152..0000000 --- a/modules/desktop/eww/eww.mustache.scss +++ /dev/null @@ -1,85 +0,0 @@ -* { - font-family: "@@font-family@@"; - font-size: @@font-size@@px; - min-height: 0; -} - -window#eww-bar { - background: transparent; -} - -.bar-container { - background: transparent; -} - -.workspaces, .windows, .system { - border: 1px solid #{{base07}}; - margin: 5px; - min-width: 40px; -} - -.windows { - margin: 2.5px 5px; -} - -.workspaces, .windows { - padding: 5px; -} - -.workspace-button, .window-button, .system-item { - color: #{{base07}}; - font-size: @@font-size-icon@@px; - background-color: #{{base00}}; - background-image: none; - box-shadow: none; - text-shadow: none; - outline: none; -} - -.workspace-button, .window-button { - padding: 8px; - border: 1px solid #{{base03}}; -} - -.system-item { - padding: 5px 0; - border-bottom: 1px solid #{{base07}}; -} - -.system-item .system-label.small { - font-size: @@font-size-small@@px; -} - -.system > .system-item:last-child { - border: none; -} - -.system-item .system-label { - font-size: @@font-size-label@@px; -} - -.system-item .system-icon { - color: #{{base07}}; -} - -.workspace-button.active, .window-button.focused { - border-color: #{{base07}}; -} - -.workspace-button .workspace-icon { - padding: 0; - margin: 0; -} - -.workspace-button .workspace-idx { - font-size: @@font-size-idx@@px; - background: #{{base00}}; - opacity: 0.7; - color: #{{base07}}; - border-radius: 4px; - margin: 20px 0 0 20px; /* nudges the label into the bottom-right corner over the icon */ -} - -.workspace-button.active .workspace-idx { - opacity: 1; -} diff --git a/modules/desktop/eww/eww.scss b/modules/desktop/eww/eww.scss new file mode 100644 index 0000000..40ce183 --- /dev/null +++ b/modules/desktop/eww/eww.scss @@ -0,0 +1,85 @@ +* { + font-family: "@@font-family@@"; + font-size: @@font-size@@px; + min-height: 0; +} + +window#eww-bar { + background: transparent; +} + +.bar-container { + background: transparent; +} + +.workspaces, .windows, .system { + border: 1px solid #@@base07@@; + margin: 5px; + min-width: 40px; +} + +.windows { + margin: 2.5px 5px; +} + +.workspaces, .windows { + padding: 5px; +} + +.workspace-button, .window-button, .system-item { + color: #@@base07@@; + font-size: @@font-size-icon@@px; + background-color: #@@base00@@; + background-image: none; + box-shadow: none; + text-shadow: none; + outline: none; +} + +.workspace-button, .window-button { + padding: 8px; + border: 1px solid #@@base03@@; +} + +.system-item { + padding: 5px 0; + border-bottom: 1px solid #@@base07@@; +} + +.system-item .system-label.small { + font-size: @@font-size-small@@px; +} + +.system > .system-item:last-child { + border: none; +} + +.system-item .system-label { + font-size: @@font-size-label@@px; +} + +.system-item .system-icon { + color: #@@base07@@; +} + +.workspace-button.active, .window-button.focused { + border-color: #@@base07@@; +} + +.workspace-button .workspace-icon { + padding: 0; + margin: 0; +} + +.workspace-button .workspace-idx { + font-size: @@font-size-idx@@px; + background: #@@base00@@; + opacity: 0.7; + color: #@@base07@@; + border-radius: 4px; + margin: 20px 0 0 20px; /* nudges the label into the bottom-right corner over the icon */ +} + +.workspace-button.active .workspace-idx { + opacity: 1; +} diff --git a/modules/desktop/rofi/default.nix b/modules/desktop/rofi/default.nix index d193c10..ced9167 100644 --- a/modules/desktop/rofi/default.nix +++ b/modules/desktop/rofi/default.nix @@ -28,7 +28,7 @@ ''"${config.fonts.normal} Bold ${toString config.fonts.size}"'' ''"${config.fonts.normal} Bold ${toString config.fonts.idxSize}"'' ] - (builtins.readFile ./theme.mustache.rasi); + (builtins.readFile ./theme.rasi); in "${config.scheme { inherit template; diff --git a/modules/desktop/rofi/theme.mustache.rasi b/modules/desktop/rofi/theme.mustache.rasi deleted file mode 100644 index 19a3252..0000000 --- a/modules/desktop/rofi/theme.mustache.rasi +++ /dev/null @@ -1,163 +0,0 @@ -/* - * Rofi theme based on the Base16 OneDark Dark theme, rendered from a mustache template - */ - -* { - base00: #{{base00}}; - base01: #{{base01}}; - base02: #{{base02}}; - base03: #{{base03}}; - base04: #{{base04}}; - base05: #{{base05}}; - base06: #{{base06}}; - base07: #{{base07}}; - base08: #{{base08}}; - base09: #{{base09}}; - base0A: #{{base0A}}; - base0B: #{{base0B}}; - base0C: #{{base0C}}; - base0D: #{{base0D}}; - base0E: #{{base0E}}; - base0F: #{{base0F}}; - - background: @base00; - background-color: transparent; - foreground: @base07; - - border-color: @base07; - separatorcolor: @base02; - - selected-normal-background: @base00; - selected-normal-foreground: @base07; - selected-active-background: @base00; - selected-active-foreground: @base07; - selected-urgent-background: @base00; - selected-urgent-foreground: @base0F; - - normal-background: @base00; - normal-foreground: @base03; - active-background: @base00; - active-foreground: @base07; - urgent-background: @base00; - urgent-foreground: @base08; - - font: @@rofi-font@@; -} - -window { - background-color: @background; - border: 1px; - border-color: @border-color; - padding: 0; - width: 800px; - location: center; - anchor: center; -} - -mainbox { - background-color: transparent; - padding: 12px; - spacing: 12px; - children: [ "inputbar", "listview", "message" ]; -} - -inputbar { - background-color: @background; - text-color: @foreground; - border: 1px; - border-color: @border-color; - padding: 10px 14px; - spacing: 10px; - children: [ "entry" ]; - font: @font; -} - -entry { - background-color: transparent; - text-color: @foreground; - placeholder: "Search…"; - placeholder-color: @base03; - cursor: text; - font: @font; -} - -listview { - background-color: transparent; - columns: 1; - lines: 8; - spacing: 4px; - cycle: true; - dynamic: true; - scrollbar: false; - fixed-height: false; -} - -element { - background-color: transparent; - text-color: @normal-foreground; - padding: 8px 10px; - spacing: 10px; - orientation: horizontal; -} - -element normal.normal { - background-color: @normal-background; - text-color: @normal-foreground; -} - -element normal.active { - background-color: @active-background; - text-color: @active-foreground; -} - -element normal.urgent { - background-color: @urgent-background; - text-color: @urgent-foreground; -} - -element selected.normal { - background-color: @selected-normal-background; - text-color: @selected-normal-foreground; -} - -element selected.active { - background-color: @selected-active-background; - text-color: @selected-active-foreground; -} - -element selected.urgent { - background-color: @selected-urgent-background; - text-color: @selected-urgent-foreground; -} - -element-icon { - background-color: transparent; - size: 36px; - vertical-align: 0.5; -} - -element-text { - background-color: transparent; - text-color: inherit; - vertical-align: 0.5; - horizontal-align: 0.0; -} - -message { - background-color: @base00; - padding: 8px 12px; -} - -textbox { - background-color: transparent; - text-color: @foreground; - font: @@rofi-font-message@@; -} - -error-message { - background-color: @base00; - text-color: @base08; - border: 1.5px; - border-color: @base08; - padding: 10px; -} diff --git a/modules/desktop/rofi/theme.rasi b/modules/desktop/rofi/theme.rasi new file mode 100644 index 0000000..96fb7bb --- /dev/null +++ b/modules/desktop/rofi/theme.rasi @@ -0,0 +1,163 @@ +/* + * Rofi theme based on the OneDark Dark color scheme + */ + +* { + base00: #@@base00@@; + base01: #@@base01@@; + base02: #@@base02@@; + base03: #@@base03@@; + base04: #@@base04@@; + base05: #@@base05@@; + base06: #@@base06@@; + base07: #@@base07@@; + base08: #@@base08@@; + base09: #@@base09@@; + base0A: #@@base0A@@; + base0B: #@@base0B@@; + base0C: #@@base0C@@; + base0D: #@@base0D@@; + base0E: #@@base0E@@; + base0F: #@@base0F@@; + + background: @base00; + background-color: transparent; + foreground: @base07; + + border-color: @base07; + separatorcolor: @base02; + + selected-normal-background: @base00; + selected-normal-foreground: @base07; + selected-active-background: @base00; + selected-active-foreground: @base07; + selected-urgent-background: @base00; + selected-urgent-foreground: @base0F; + + normal-background: @base00; + normal-foreground: @base03; + active-background: @base00; + active-foreground: @base07; + urgent-background: @base00; + urgent-foreground: @base08; + + font: @@rofi-font@@; +} + +window { + background-color: @background; + border: 1px; + border-color: @border-color; + padding: 0; + width: 800px; + location: center; + anchor: center; +} + +mainbox { + background-color: transparent; + padding: 12px; + spacing: 12px; + children: [ "inputbar", "listview", "message" ]; +} + +inputbar { + background-color: @background; + text-color: @foreground; + border: 1px; + border-color: @border-color; + padding: 10px 14px; + spacing: 10px; + children: [ "entry" ]; + font: @font; +} + +entry { + background-color: transparent; + text-color: @foreground; + placeholder: "Search…"; + placeholder-color: @base03; + cursor: text; + font: @font; +} + +listview { + background-color: transparent; + columns: 1; + lines: 8; + spacing: 4px; + cycle: true; + dynamic: true; + scrollbar: false; + fixed-height: false; +} + +element { + background-color: transparent; + text-color: @normal-foreground; + padding: 8px 10px; + spacing: 10px; + orientation: horizontal; +} + +element normal.normal { + background-color: @normal-background; + text-color: @normal-foreground; +} + +element normal.active { + background-color: @active-background; + text-color: @active-foreground; +} + +element normal.urgent { + background-color: @urgent-background; + text-color: @urgent-foreground; +} + +element selected.normal { + background-color: @selected-normal-background; + text-color: @selected-normal-foreground; +} + +element selected.active { + background-color: @selected-active-background; + text-color: @selected-active-foreground; +} + +element selected.urgent { + background-color: @selected-urgent-background; + text-color: @selected-urgent-foreground; +} + +element-icon { + background-color: transparent; + size: 36px; + vertical-align: 0.5; +} + +element-text { + background-color: transparent; + text-color: inherit; + vertical-align: 0.5; + horizontal-align: 0.0; +} + +message { + background-color: @base00; + padding: 8px 12px; +} + +textbox { + background-color: transparent; + text-color: @foreground; + font: @@rofi-font-message@@; +} + +error-message { + background-color: @base00; + text-color: @base08; + border: 1.5px; + border-color: @base08; + padding: 10px; +} diff --git a/modules/desktop/xdg/default.nix b/modules/desktop/xdg/default.nix index e472e29..ef27182 100644 --- a/modules/desktop/xdg/default.nix +++ b/modules/desktop/xdg/default.nix @@ -27,7 +27,7 @@ let gtkCss = builtins.readFile ( config.scheme { - template = builtins.readFile ./style.mustache.css; + template = builtins.readFile ./style.css; extension = ".css"; } ); @@ -55,7 +55,7 @@ gtk3.extraCss = gtkCss; gtk4 = { # GTK 4/libadwaita does not support loading GTK 3 themes; use the - # Base16 CSS above without Home Manager's compatibility workaround. + # OneDark Dark CSS above without Home Manager's compatibility workaround. theme = null; extraCss = gtkCss; }; diff --git a/modules/desktop/xdg/style.css b/modules/desktop/xdg/style.css new file mode 100644 index 0000000..53bedfc --- /dev/null +++ b/modules/desktop/xdg/style.css @@ -0,0 +1,150 @@ +@define-color theme_bg_color #@@base00@@; +@define-color theme_fg_color #@@base05@@; +@define-color theme_base_color #@@base00@@; +@define-color theme_text_color #@@base05@@; +@define-color theme_selected_bg_color #@@base0D@@; +@define-color theme_selected_fg_color #@@base00@@; +@define-color theme_unfocused_bg_color #@@base01@@; +@define-color theme_unfocused_fg_color #@@base04@@; +@define-color theme_unfocused_base_color #@@base00@@; +@define-color theme_unfocused_text_color #@@base04@@; +@define-color theme_unfocused_selected_bg_color #@@base0D@@; +@define-color theme_unfocused_selected_fg_color #@@base00@@; +@define-color theme_tooltip_bg_color #@@base00@@; +@define-color theme_tooltip_fg_color #@@base06@@; +@define-color borders #@@base03@@; +@define-color unfocused_borders #@@base02@@; +@define-color accent_color #@@base0D@@; +@define-color warning_color #@@base0A@@; +@define-color error_color #@@base08@@; +@define-color success_color #@@base0B@@; +@define-color placeholder_text_color #@@base03@@; +@define-color insensitive_bg_color #@@base01@@; +@define-color insensitive_fg_color #@@base03@@; + +window, dialog, .background { + background-color: @theme_bg_color; + color: @theme_fg_color; +} + +headerbar, titlebar, .titlebar, .headerbar, toolbar, .toolbar, menubar, +actionbar, .sidebar, .nav-bar { + background-color: @theme_unfocused_bg_color; + color: @theme_fg_color; + border-color: @borders; +} + +menu, .menu, popover, .popover, menupopover { + background-color: @theme_unfocused_bg_color; + color: @theme_fg_color; + border-color: @borders; +} + +button, entry, spinbutton, combobox button, textview, .view, list, row, +listview, .list, flowbox, treeview, calendar, notebook > stack, scrolledwindow { + background-color: @theme_base_color; + color: @theme_text_color; + border-color: @borders; + border-radius: 0; + box-shadow: none; + caret-color: @theme_text_color; +} + +button:hover, entry:hover, row:hover { + border-color: #@@base04@@; +} + +button:active, button:checked, button:default, entry:focus, +spinbutton:focus, switch:checked, check:checked, radio:checked { + border-color: @theme_selected_bg_color; +} + +button.suggested-action, button.destructive-action, .suggested-action, +.destructive-action { + border-color: @theme_selected_bg_color; +} + +button.destructive-action, .destructive-action { + border-color: @error_color; +} + +selection, entry selection, textview selection, row:selected, .selected, +flowboxchild:selected, menu menuitem:hover, menu menuitem:selected, +popover row:hover, popover row:selected { + background-color: @theme_selected_bg_color; + color: @theme_selected_fg_color; +} + +headerbar button, toolbar button, menubar button { + background-color: transparent; +} + +treeview header button { + background-color: #@@base01@@; + color: @theme_text_color; + border-color: @borders; +} + +switch, scale trough, progressbar trough, scrollbar slider { + background-color: #@@base02@@; + border-color: @borders; +} + +switch slider, scale slider { + background-color: #@@base06@@; + border-color: #@@base02@@; +} + +scale highlight, scale fill, progressbar progress { + background-color: @theme_selected_bg_color; +} + +scrollbar { + background-color: #@@base01@@; +} + +scrollbar slider:hover { + background-color: #@@base04@@; +} + +notebook tab, notebook > header tabs tab { + background-color: #@@base01@@; + border-color: @borders; +} + +notebook tab:checked, notebook > header tabs tab:checked { + background-color: @theme_base_color; + border-bottom-color: @theme_selected_bg_color; +} + +separator, paned > separator { + background-color: #@@base02@@; +} + +tooltip, .tooltip { + background-color: @theme_tooltip_bg_color; + color: @theme_tooltip_fg_color; + border-color: @borders; +} + +statusbar, .statusbar { + background-color: @theme_bg_color; + color: #@@base04@@; +} + +link, .link { + color: #@@base0D@@; +} + +expander, arrow { + color: #@@base04@@; +} + +label:disabled, button:disabled { + color: @insensitive_fg_color; + background-color: @insensitive_bg_color; +} + +.dim-label { + color: #@@base04@@; +} diff --git a/modules/desktop/xdg/style.mustache.css b/modules/desktop/xdg/style.mustache.css deleted file mode 100644 index 4377184..0000000 --- a/modules/desktop/xdg/style.mustache.css +++ /dev/null @@ -1,150 +0,0 @@ -@define-color theme_bg_color #{{base00}}; -@define-color theme_fg_color #{{base05}}; -@define-color theme_base_color #{{base00}}; -@define-color theme_text_color #{{base05}}; -@define-color theme_selected_bg_color #{{base0D}}; -@define-color theme_selected_fg_color #{{base00}}; -@define-color theme_unfocused_bg_color #{{base01}}; -@define-color theme_unfocused_fg_color #{{base04}}; -@define-color theme_unfocused_base_color #{{base00}}; -@define-color theme_unfocused_text_color #{{base04}}; -@define-color theme_unfocused_selected_bg_color #{{base0D}}; -@define-color theme_unfocused_selected_fg_color #{{base00}}; -@define-color theme_tooltip_bg_color #{{base00}}; -@define-color theme_tooltip_fg_color #{{base06}}; -@define-color borders #{{base03}}; -@define-color unfocused_borders #{{base02}}; -@define-color accent_color #{{base0D}}; -@define-color warning_color #{{base0A}}; -@define-color error_color #{{base08}}; -@define-color success_color #{{base0B}}; -@define-color placeholder_text_color #{{base03}}; -@define-color insensitive_bg_color #{{base01}}; -@define-color insensitive_fg_color #{{base03}}; - -window, dialog, .background { - background-color: @theme_bg_color; - color: @theme_fg_color; -} - -headerbar, titlebar, .titlebar, .headerbar, toolbar, .toolbar, menubar, -actionbar, .sidebar, .nav-bar { - background-color: @theme_unfocused_bg_color; - color: @theme_fg_color; - border-color: @borders; -} - -menu, .menu, popover, .popover, menupopover { - background-color: @theme_unfocused_bg_color; - color: @theme_fg_color; - border-color: @borders; -} - -button, entry, spinbutton, combobox button, textview, .view, list, row, -listview, .list, flowbox, treeview, calendar, notebook > stack, scrolledwindow { - background-color: @theme_base_color; - color: @theme_text_color; - border-color: @borders; - border-radius: 0; - box-shadow: none; - caret-color: @theme_text_color; -} - -button:hover, entry:hover, row:hover { - border-color: #{{base04}}; -} - -button:active, button:checked, button:default, entry:focus, -spinbutton:focus, switch:checked, check:checked, radio:checked { - border-color: @theme_selected_bg_color; -} - -button.suggested-action, button.destructive-action, .suggested-action, -.destructive-action { - border-color: @theme_selected_bg_color; -} - -button.destructive-action, .destructive-action { - border-color: @error_color; -} - -selection, entry selection, textview selection, row:selected, .selected, -flowboxchild:selected, menu menuitem:hover, menu menuitem:selected, -popover row:hover, popover row:selected { - background-color: @theme_selected_bg_color; - color: @theme_selected_fg_color; -} - -headerbar button, toolbar button, menubar button { - background-color: transparent; -} - -treeview header button { - background-color: #{{base01}}; - color: @theme_text_color; - border-color: @borders; -} - -switch, scale trough, progressbar trough, scrollbar slider { - background-color: #{{base02}}; - border-color: @borders; -} - -switch slider, scale slider { - background-color: #{{base06}}; - border-color: #{{base02}}; -} - -scale highlight, scale fill, progressbar progress { - background-color: @theme_selected_bg_color; -} - -scrollbar { - background-color: #{{base01}}; -} - -scrollbar slider:hover { - background-color: #{{base04}}; -} - -notebook tab, notebook > header tabs tab { - background-color: #{{base01}}; - border-color: @borders; -} - -notebook tab:checked, notebook > header tabs tab:checked { - background-color: @theme_base_color; - border-bottom-color: @theme_selected_bg_color; -} - -separator, paned > separator { - background-color: #{{base02}}; -} - -tooltip, .tooltip { - background-color: @theme_tooltip_bg_color; - color: @theme_tooltip_fg_color; - border-color: @borders; -} - -statusbar, .statusbar { - background-color: @theme_bg_color; - color: #{{base04}}; -} - -link, .link { - color: #{{base0D}}; -} - -expander, arrow { - color: #{{base04}}; -} - -label:disabled, button:disabled { - color: @insensitive_fg_color; - background-color: @insensitive_bg_color; -} - -.dim-label { - color: #{{base04}}; -} -- cgit v1.2.3