Merge pull request #3857 from basecamp/share-picker

Add better portal share picker

config/hypr/xdph.conf

@@ -1,3 +1,4 @@
 screencopy {
     allow_token_by_default = true
+    custom_picker_binary = hyprland-preview-share-picker
 }

config/hyprland-preview-share-picker/config.yaml

@@ -0,0 +1,71 @@
+# paths to stylesheets on the filesystem which should be applied to the application
+#
+# relative paths are resolved relative to the location of the config file
+stylesheets: ["../omarchy/current/theme/hyprland-preview-share-picker.css"]
+# default page selected when the picker is opened
+default_page: windows
+
+window:
+  # height of the application window
+  height: 500
+  # width of the application window
+  width: 1000
+
+image:
+  # size to which the images should be internally resized to reduce the memory footprint
+  resize_size: 500
+  # target size of the longer side of the image widget
+  widget_size: 150
+
+classes:
+  # css classname of the window
+  window: window
+  # css classname of the card containing an image and a label
+  image_card: card
+  # css classname of the card containing an image and a label when the image is still being loaded
+  image_card_loading: card-loading
+  # css classname of the image inside the card
+  image: image
+  # css classname of the label inside the card
+  image_label: image-label
+  # css classname of the notebook containing all pages
+  notebook: notebook
+  # css classname of a label of the notebook
+  tab_label: tab-label
+  # css classname of a notebook page (e.g. windows container)
+  notebook_page: page
+  # css classname of the region selection button
+  region_button: region-button
+  # css classname of the button containing the session restore checkbox and label
+  restore_button: restore-button
+
+windows:
+  # minimum amount of image cards per row on the windows page
+  min_per_row: 3
+  # maximum amount of image cards per row on the windows page
+  max_per_row: 999
+  # number of clicks needed to select a window
+  clicks: 1
+  # spacing in pixels between the window cards
+  spacing: 12
+
+outputs:
+  # number of clicks needed to select an output
+  clicks: 1
+  # spacing in pixels between the outputs in the layout
+  # note: the spacing is applied from both sides (the gap is `spacing * 2`)
+  spacing: 6
+  # show the label with the output name
+  show_label: false
+  # size the output cards respectively to their scaling
+  respect_output_scaling: true
+
+region:
+  # command to run for region selection
+  # the output needs to be in the <output>@<x>,<y>,<w>,<h> (e.g. DP-3@2789,436,756,576) format
+  command: slurp -f '%o@%x,%y,%w,%h'
+
+# hide the token restore checkbox and use the default value instead
+hide_token_restore: true
+# enable debug logs by default
+debug: false

install/omarchy-base.packages

@@ -47,6 +47,7 @@ gvfs-smb
 hypridle
 hyprland
 hyprland-guiutils
+hyprland-preview-share-picker-git
 hyprlock
 hyprpicker
 hyprsunset

migrations/1765587218.sh

@@ -0,0 +1,6 @@
+echo "Add custom share portal picker"
+omarchy-pkg-add hyprland-preview-share-picker-git
+
+if ! grep -q "custom_picker_binary" ~/.config/hypr/xdph.conf; then
+    sed -i '/screencopy {/a\    custom_picker_binary = hyprland-preview-share-picker' ~/.config/hypr/xdph.conf
+fi

themes/catppuccin-latte/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #4C4F69;
+@define-color background #EFF1F5;
+@define-color accent #1E66F5;
+@define-color muted #9CA0B0;
+@define-color card_bg #E6E9EF;
+@define-color text_dark #EFF1F5;
+@define-color accent_hover #7287FD;
+@define-color selected_tab #1E66F5;
+@define-color text #4C4F69;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/catppuccin/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #CDD6F4;
+@define-color background #1E1E2E;
+@define-color accent #87B0F9;
+@define-color muted #43465A;
+@define-color card_bg #181825;
+@define-color text_dark #11111B;
+@define-color accent_hover #B4BEFE;
+@define-color selected_tab #87B0F9;
+@define-color text #CDD6F4;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/ethereal/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #ffcead;
+@define-color background #060B1E;
+@define-color accent #7d82d9;
+@define-color muted #6d7db6;
+@define-color card_bg #12172b;
+@define-color text_dark #060B1E;
+@define-color accent_hover #c2c4f0;
+@define-color selected_tab #7d82d9;
+@define-color text #ffcead;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/everforest/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #d3c6aa;
+@define-color background #2d353b;
+@define-color accent #a7c080;
+@define-color muted #475258;
+@define-color card_bg #333c43;
+@define-color text_dark #2d353b;
+@define-color accent_hover #83c092;
+@define-color selected_tab #a7c080;
+@define-color text #d3c6aa;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/flexoki-light/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #100F0F;
+@define-color background #FFFCF0;
+@define-color accent #205EA6;
+@define-color muted #6F6E69;
+@define-color card_bg #F2F0E5;
+@define-color text_dark #FFFCF0;
+@define-color accent_hover #4385BE;
+@define-color selected_tab #205EA6;
+@define-color text #100F0F;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/gruvbox/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #ebdbb2;
+@define-color background #282828;
+@define-color accent #d65d0e;
+@define-color muted #928374;
+@define-color card_bg #3c3836;
+@define-color text_dark #282828;
+@define-color accent_hover #fabd2f;
+@define-color selected_tab #d65d0e;
+@define-color text #ebdbb2;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/hackerman/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #ddf7ff;
+@define-color background #0B0C16;
+@define-color accent #829dd4;
+@define-color muted #6a6e95;
+@define-color card_bg #141526;
+@define-color text_dark #0B0C16;
+@define-color accent_hover #c4d2ed;
+@define-color selected_tab #829dd4;
+@define-color text #ddf7ff;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/kanagawa/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #dcd7ba;
+@define-color background #1f1f28;
+@define-color accent #7e9cd8;
+@define-color muted #727169;
+@define-color card_bg #2a2a37;
+@define-color text_dark #16161d;
+@define-color accent_hover #7fb4ca;
+@define-color selected_tab #7e9cd8;
+@define-color text #dcd7ba;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/matte-black/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #EAEAEA;
+@define-color background #121212;
+@define-color accent #B91C1C;
+@define-color muted #595959;
+@define-color card_bg #1e1e1e;
+@define-color text_dark #EAEAEA;
+@define-color accent_hover #D35F5F;
+@define-color selected_tab #B91C1C;
+@define-color text #EAEAEA;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/nord/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #D8DEE9;
+@define-color background #2E3440;
+@define-color accent #88C0D0;
+@define-color muted #4C566A;
+@define-color card_bg #3B4252;
+@define-color text_dark #2E3440;
+@define-color accent_hover #8FBCBB;
+@define-color selected_tab #88C0D0;
+@define-color text #D8DEE9;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/osaka-jade/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #ebfff2;
+@define-color background #11221C;
+@define-color accent #2DD5B7;
+@define-color muted #53685B;
+@define-color card_bg #23372B;
+@define-color text_dark #11221C;
+@define-color accent_hover #8CD3CB;
+@define-color selected_tab #2DD5B7;
+@define-color text #ebfff2;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/ristretto/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #e6d9db;
+@define-color background #2c2525;
+@define-color accent #f9cc6c;
+@define-color muted #948a8b;
+@define-color card_bg #403e41;
+@define-color text_dark #2c2525;
+@define-color accent_hover #fcd675;
+@define-color selected_tab #f9cc6c;
+@define-color text #e6d9db;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/rose-pine/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #575279;
+@define-color background #faf4ed;
+@define-color accent #d7827e;
+@define-color muted #9893a5;
+@define-color card_bg #fffaf3;
+@define-color text_dark #faf4ed;
+@define-color accent_hover #b4637a;
+@define-color selected_tab #d7827e;
+@define-color text #575279;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}

themes/tokyo-night/hyprland-preview-share-picker.css

@@ -0,0 +1,94 @@
+@define-color foreground #c0caf5;
+@define-color background #1a1b26;
+@define-color accent #7aa2f7;
+@define-color muted #565f89;
+@define-color card_bg #24283b;
+@define-color text_dark #15161e;
+@define-color accent_hover #9ec1ff;
+@define-color selected_tab #7dcfff;
+@define-color text #c0caf5;
+
+* {
+  all: unset;
+  font-family: JetBrains Mono NF;
+  color: @foreground;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.window {
+  background: alpha(@background, 0.95);
+  border: solid 2px @accent;
+  margin: 4px;
+  padding: 18px;
+}
+
+tabs {
+    padding: 0.5rem 1rem;
+}
+
+tabs > tab {
+    margin-right: 1rem;
+}
+
+.tab-label {
+    color: @text;
+    transition: all 0.2s ease;
+}
+
+tabs > tab:checked > .tab-label, tabs > tab:active > .tab-label {
+    text-decoration: underline currentColor;
+    color: @selected_tab;
+}
+
+tabs > tab:focus > .tab-label {
+    color: @foreground;
+}
+
+.page {
+    padding: 1rem;
+}
+
+.image-label {
+    font-size: 12px;
+    padding: 0.25rem;
+}
+
+flowboxchild > .card, button > .card {
+    transition: all 0.2s ease;
+    border: solid 2px transparent;
+    border-color: @background;
+    border-radius: 5px;
+    background-color: @card_bg;
+    padding: 5px;
+}
+
+flowboxchild:hover > .card, button:hover > .card, flowboxchild:active > .card, flowboxchild:selected > .card, button:active > .card, button:selected > .card, button:focus > .card {
+    border: solid 2px @accent;
+}
+
+.image {
+    border-radius: 5px;
+}
+
+.region-button {
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    background-color: @accent;
+    color: @text_dark;
+    transition: all 0.2s ease;
+}
+
+.region-button > label {
+    color: @text_dark;
+}
+
+.region-button:not(:disabled):hover, .region-button:not(:disabled):focus {
+    background-color: @accent_hover;
+    color: @text_dark;
+}
+
+.region-button:disabled {
+    background-color: @muted;
+    color: @background;
+}