reya/coop
1
0
Fork 0
Code Issues Pull Requests Releases Activity

chore: make the ui consistent #19

Merged
reya merged 5 commits from ui-consistent into master 2026-03-12 02:20:00 +00:00
Conversation 0 Commits 5 Files Changed 37 +1935 -1202
37 changed files with 1935 additions and 1202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
assets/themes/aurora.json Normal file
View File

@@ -0,0 +1,144 @@
{
"id": "aurora",
"name": "Aurora",
"author": "Coop",
"url": "https://github.com/lumehq/coop",
"light": {
"background": "#fdfcfeff",
"surface_background": "#f8f8ffff",
"elevated_surface_background": "#f0f1feff",
"panel_background": "#fdfcfeff",
"overlay": "#211f4300",
"title_bar": "#f0f1feff",
"title_bar_inactive": "#fdfcfeff",
"window_border": "#dadcffff",
"border": "#dadcffff",
"border_variant": "#cbcdffff",
"border_focused": "#5b5bd6ff",
"border_selected": "#5b5bd6ff",
"border_transparent": "#00000000",
"border_disabled": "#e6e7ffff",
"ring": "#5151cdff",
"text": "#1f2d5cff",
"text_muted": "#5753c6ff",
"text_placeholder": "#9b9ef0ff",
"text_accent": "#5b5bd6ff",
"text_danger": "#e54d2eff",
"text_warning": "#f76b15ff",
"icon": "#5753c6ff",
"icon_muted": "#9b9ef0ff",
"icon_accent": "#5151cdff",
"element_foreground": "#ffffffff",
"element_background": "#5b5bd6ff",
"element_hover": "#5151cdff",
"element_active": "#6e56cfff",
"element_selected": "#654dc4ff",
"element_disabled": "#5b5bd64d",
"secondary_foreground": "#1f2d5cff",
"secondary_background": "#f0f1feff",
"secondary_hover": "#e6e7ffff",
"secondary_active": "#dadcffff",
"secondary_selected": "#dadcffff",
"secondary_disabled": "#5b5bd64d",
"danger_foreground": "#ffffffff",
"danger_background": "#feebe7ff",
"danger_hover": "#ffcdc2ff",
"danger_active": "#fdbdafff",
"danger_selected": "#fdbdafff",
"danger_disabled": "#e54d2e4d",
"warning_foreground": "#ffffffff",
"warning_background": "#fff7edff",
"warning_hover": "#ffd19aff",
"warning_active": "#ffc182ff",
"warning_selected": "#ffc182ff",
"warning_disabled": "#f76b154d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#f0f1feff",
"ghost_element_hover": "#211f430d",
"ghost_element_active": "#211f431a",
"ghost_element_selected": "#211f431a",
"ghost_element_disabled": "#211f4305",
"tab_background": "#f0f1feff",
"tab_foreground": "#5753c6ff",
"tab_hover_background": "#211f430d",
"tab_active_background": "#fdfcfeff",
"tab_active_foreground": "#1f2d5cff",
"scrollbar_thumb_background": "#211f431a",
"scrollbar_thumb_hover_background": "#211f4326",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#00000000",
"drop_target_background": "#5b5bd61a",
"cursor": "#5b5bd6ff",
"selection": "#5b5bd640"
},
"dark": {
"background": "#14121fff",
"surface_background": "#1b1525ff",
"elevated_surface_background": "#291f43ff",
"panel_background": "#14121fff",
"overlay": "#baa7ff1a",
"title_bar": "#291f43ff",
"title_bar_inactive": "#14121fff",
"window_border": "#473876ff",
"border": "#473876ff",
"border_variant": "#3c2e69ff",
"border_focused": "#7d66d9ff",
"border_selected": "#7d66d9ff",
"border_transparent": "#00000000",
"border_disabled": "#33255bff",
"ring": "#6e56cfff",
"text": "#e2ddfeff",
"text_muted": "#baa7ffff",
"text_placeholder": "#6958adff",
"text_accent": "#baa7ffff",
"text_danger": "#ff977dff",
"text_warning": "#ffa057ff",
"icon": "#baa7ffff",
"icon_muted": "#6958adff",
"icon_accent": "#6e56cfff",
"element_foreground": "#14121fff",
"element_background": "#7d66d9ff",
"element_hover": "#baa7ffff",
"element_active": "#6e56cfff",
"element_selected": "#654dc4ff",
"element_disabled": "#7d66d94d",
"secondary_foreground": "#e2ddfeff",
"secondary_background": "#291f43ff",
"secondary_hover": "#33255bff",
"secondary_active": "#3c2e69ff",
"secondary_selected": "#3c2e69ff",
"secondary_disabled": "#7d66d94d",
"danger_foreground": "#181111ff",
"danger_background": "#391714ff",
"danger_hover": "#5e1c16ff",
"danger_active": "#6e2920ff",
"danger_selected": "#6e2920ff",
"danger_disabled": "#ff977d4d",
"warning_foreground": "#17120eff",
"warning_background": "#331e0bff",
"warning_hover": "#562800ff",
"warning_active": "#66350cff",
"warning_selected": "#66350cff",
"warning_disabled": "#ffa0574d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#291f43ff",
"ghost_element_hover": "#baa7ff0d",
"ghost_element_active": "#baa7ff1a",
"ghost_element_selected": "#baa7ff1a",
"ghost_element_disabled": "#baa7ff05",
"tab_background": "#291f43ff",
"tab_foreground": "#baa7ffff",
"tab_hover_background": "#baa7ff0d",
"tab_active_background": "#14121fff",
"tab_active_foreground": "#e2ddfeff",
"scrollbar_thumb_background": "#baa7ff1a",
"scrollbar_thumb_hover_background": "#baa7ff26",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#00000000",
"drop_target_background": "#baa7ff1a",
"cursor": "#baa7ffff",
"selection": "#baa7ff40"
}
}

192
assets/themes/catppuccin-frappe.json
View File

@@ -1,74 +1,76 @@
{ {
"id": "catppuccin-frappe", "id": "catppuccin-frappe",
"name": "Catppuccin Frappé", "name": "Catppuccin Frappé",
"author": "Catppuccin", "author": "Catppuccin Org (ported by Coop)",
"url": "https://github.com/catppuccin/catppuccin", "url": "https://catppuccin.com",
"light": { "light": {
"background": "#303446", "background": "#303446",
"surface_background": "#292c3c", "surface_background": "#292c3c",
"elevated_surface_background": "#232634", "elevated_surface_background": "#232634",
"panel_background": "#303446", "panel_background": "#303446",
"overlay": "#c6d0f51a", "overlay": "#c6d0f51a",
"title_bar": "#292c3c", "title_bar": "#232634",
"title_bar_inactive": "#232634", "title_bar_inactive": "#303446",
"window_border": "#737994", "window_border": "#51576d",
"border": "#626880", "border": "#51576d",
"border_variant": "#51576d", "border_variant": "#414559",
"border_focused": "#8caaee", "border_focused": "#8caaee",
"border_selected": "#8caaee", "border_selected": "#8caaee",
"border_transparent": "#00000000", "border_transparent": "#c6d0f500",
"border_disabled": "#414559", "border_disabled": "#292c3c",
"ring": "#8caaee", "ring": "#babbf1",
"text": "#c6d0f5", "text": "#c6d0f5",
"text_muted": "#b5bfe2", "text_muted": "#a5adce",
"text_placeholder": "#a5adce", "text_placeholder": "#838ba7",
"text_accent": "#8caaee", "text_accent": "#8caaee",
"icon": "#b5bfe2", "text_danger": "#e78284",
"icon_muted": "#a5adce", "text_warning": "#ef9f76",
"icon_accent": "#8caaee", "icon": "#a5adce",
"element_foreground": "#232634", "icon_muted": "#838ba7",
"icon_accent": "#babbf1",
"element_foreground": "#303446",
"element_background": "#8caaee", "element_background": "#8caaee",
"element_hover": "#babbf1", "element_hover": "#babbf1",
"element_active": "#7e99d6", "element_active": "#99d1db",
"element_selected": "#7088bf", "element_selected": "#85c1dc",
"element_disabled": "#8caaee4d", "element_disabled": "#8caaee4d",
"secondary_foreground": "#7088bf", "secondary_foreground": "#c6d0f5",
"secondary_background": "#292c3c", "secondary_background": "#414559",
"secondary_hover": "#8caaee33", "secondary_hover": "#51576d",
"secondary_active": "#232634", "secondary_active": "#626880",
"secondary_selected": "#232634", "secondary_selected": "#626880",
"secondary_disabled": "#8caaee4d", "secondary_disabled": "#8caaee4d",
"danger_foreground": "#232634", "danger_foreground": "#303446",
"danger_background": "#e78284", "danger_background": "#e78284",
"danger_hover": "#ea999c", "danger_hover": "#ea999c",
"danger_active": "#d07576", "danger_active": "#ef9f76",
"danger_selected": "#b96869", "danger_selected": "#e5c890",
"danger_disabled": "#e782844d", "danger_disabled": "#e782844d",
"warning_foreground": "#232634", "warning_foreground": "#303446",
"warning_background": "#e5c890", "warning_background": "#ef9f76",
"warning_hover": "#ef9f76", "warning_hover": "#e5c890",
"warning_active": "#ceb482", "warning_active": "#a6d189",
"warning_selected": "#b7a074", "warning_selected": "#81c8be",
"warning_disabled": "#e5c8904d", "warning_disabled": "#ef9f764d",
"ghost_element_background": "#00000000", "ghost_element_background": "#c6d0f500",
"ghost_element_background_alt": "#414559", "ghost_element_background_alt": "#292c3c",
"ghost_element_hover": "#c6d0f533", "ghost_element_hover": "#c6d0f50d",
"ghost_element_active": "#51576d", "ghost_element_active": "#c6d0f51a",
"ghost_element_selected": "#51576d", "ghost_element_selected": "#c6d0f51a",
"ghost_element_disabled": "#c6d0f50d", "ghost_element_disabled": "#c6d0f505",
"tab_inactive_background": "#292c3c", "tab_background": "#232634",
"tab_inactive_foreground": "#b5bfe2", "tab_foreground": "#a5adce",
"tab_hover_background": "#c6d0f50d",
"tab_active_background": "#303446", "tab_active_background": "#303446",
"tab_active_foreground": "#c6d0f5", "tab_active_foreground": "#c6d0f5",
"tab_hover_foreground": "#babbf1", "scrollbar_thumb_background": "#c6d0f51a",
"scrollbar_thumb_background": "#c6d0f533", "scrollbar_thumb_hover_background": "#c6d0f526",
"scrollbar_thumb_hover_background": "#c6d0f580", "scrollbar_thumb_border": "#c6d0f500",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#c6d0f500",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#c6d0f500",
"scrollbar_track_border": "#51576d",
"drop_target_background": "#8caaee1a", "drop_target_background": "#8caaee1a",
"cursor": "#f2d5cf", "cursor": "#8caaee",
"selection": "#949cbb40" "selection": "#8caaee40"
}, },
"dark": { "dark": {
"background": "#303446", "background": "#303446",
@@ -76,65 +78,67 @@
"elevated_surface_background": "#232634", "elevated_surface_background": "#232634",
"panel_background": "#303446", "panel_background": "#303446",
"overlay": "#c6d0f51a", "overlay": "#c6d0f51a",
"title_bar": "#292c3c", "title_bar": "#232634",
"title_bar_inactive": "#232634", "title_bar_inactive": "#303446",
"window_border": "#737994", "window_border": "#51576d",
"border": "#626880", "border": "#51576d",
"border_variant": "#51576d", "border_variant": "#414559",
"border_focused": "#8caaee", "border_focused": "#8caaee",
"border_selected": "#8caaee", "border_selected": "#8caaee",
"border_transparent": "#00000000", "border_transparent": "#c6d0f500",
"border_disabled": "#414559", "border_disabled": "#292c3c",
"ring": "#8caaee", "ring": "#babbf1",
"text": "#c6d0f5", "text": "#c6d0f5",
"text_muted": "#b5bfe2", "text_muted": "#a5adce",
"text_placeholder": "#a5adce", "text_placeholder": "#838ba7",
"text_accent": "#8caaee", "text_accent": "#8caaee",
"icon": "#b5bfe2", "text_danger": "#e78284",
"icon_muted": "#a5adce", "text_warning": "#ef9f76",
"icon_accent": "#8caaee", "icon": "#a5adce",
"element_foreground": "#232634", "icon_muted": "#838ba7",
"icon_accent": "#babbf1",
"element_foreground": "#303446",
"element_background": "#8caaee", "element_background": "#8caaee",
"element_hover": "#babbf1", "element_hover": "#babbf1",
"element_active": "#7e99d6", "element_active": "#99d1db",
"element_selected": "#7088bf", "element_selected": "#85c1dc",
"element_disabled": "#8caaee4d", "element_disabled": "#8caaee4d",
"secondary_foreground": "#7088bf", "secondary_foreground": "#c6d0f5",
"secondary_background": "#292c3c", "secondary_background": "#414559",
"secondary_hover": "#8caaee33", "secondary_hover": "#51576d",
"secondary_active": "#232634", "secondary_active": "#626880",
"secondary_selected": "#232634", "secondary_selected": "#626880",
"secondary_disabled": "#8caaee4d", "secondary_disabled": "#8caaee4d",
"danger_foreground": "#232634", "danger_foreground": "#303446",
"danger_background": "#e78284", "danger_background": "#e78284",
"danger_hover": "#ea999c", "danger_hover": "#ea999c",
"danger_active": "#d07576", "danger_active": "#ef9f76",
"danger_selected": "#b96869", "danger_selected": "#e5c890",
"danger_disabled": "#e782844d", "danger_disabled": "#e782844d",
"warning_foreground": "#232634", "warning_foreground": "#303446",
"warning_background": "#e5c890", "warning_background": "#ef9f76",
"warning_hover": "#ef9f76", "warning_hover": "#e5c890",
"warning_active": "#ceb482", "warning_active": "#a6d189",
"warning_selected": "#b7a074", "warning_selected": "#81c8be",
"warning_disabled": "#e5c8904d", "warning_disabled": "#ef9f764d",
"ghost_element_background": "#00000000", "ghost_element_background": "#c6d0f500",
"ghost_element_background_alt": "#414559", "ghost_element_background_alt": "#292c3c",
"ghost_element_hover": "#c6d0f533", "ghost_element_hover": "#c6d0f50d",
"ghost_element_active": "#51576d", "ghost_element_active": "#c6d0f51a",
"ghost_element_selected": "#51576d", "ghost_element_selected": "#c6d0f51a",
"ghost_element_disabled": "#c6d0f50d", "ghost_element_disabled": "#c6d0f505",
"tab_inactive_background": "#292c3c", "tab_background": "#232634",
"tab_inactive_foreground": "#b5bfe2", "tab_foreground": "#a5adce",
"tab_hover_background": "#c6d0f50d",
"tab_active_background": "#303446", "tab_active_background": "#303446",
"tab_active_foreground": "#c6d0f5", "tab_active_foreground": "#c6d0f5",
"tab_hover_foreground": "#babbf1", "scrollbar_thumb_background": "#c6d0f51a",
"scrollbar_thumb_background": "#c6d0f533", "scrollbar_thumb_hover_background": "#c6d0f526",
"scrollbar_thumb_hover_background": "#c6d0f580", "scrollbar_thumb_border": "#c6d0f500",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#c6d0f500",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#c6d0f500",
"scrollbar_track_border": "#51576d",
"drop_target_background": "#8caaee1a", "drop_target_background": "#8caaee1a",
"cursor": "#f2d5cf", "cursor": "#8caaee",
"selection": "#949cbb40" "selection": "#8caaee40"
} }
} }

188
assets/themes/catppuccin-latte.json
View File

@@ -1,74 +1,76 @@
{ {
"id": "catppuccin-latte", "id": "catppuccin-latte",
"name": "Catppuccin Latte", "name": "Catppuccin Latte",
"author": "Catppuccin", "author": "Catppuccin Org (ported by Coop)",
"url": "https://github.com/catppuccin/catppuccin", "url": "https://catppuccin.com",
"light": { "light": {
"background": "#eff1f5", "background": "#eff1f5",
"surface_background": "#e6e9ef", "surface_background": "#e6e9ef",
"elevated_surface_background": "#dce0e8", "elevated_surface_background": "#dce0e8",
"panel_background": "#eff1f5", "panel_background": "#eff1f5",
"overlay": "#4c4f691a", "overlay": "#4c4f691a",
"title_bar": "#e6e9ef", "title_bar": "#dce0e8",
"title_bar_inactive": "#dce0e8", "title_bar_inactive": "#eff1f5",
"window_border": "#9ca0b0", "window_border": "#bcc0cc",
"border": "#acb0be", "border": "#bcc0cc",
"border_variant": "#bcc0cc", "border_variant": "#ccd0da",
"border_focused": "#1e66f5", "border_focused": "#1e66f5",
"border_selected": "#1e66f5", "border_selected": "#1e66f5",
"border_transparent": "#00000000", "border_transparent": "#4c4f6900",
"border_disabled": "#ccd0da", "border_disabled": "#e6e9ef",
"ring": "#1e66f5", "ring": "#7287fd",
"text": "#4c4f69", "text": "#4c4f69",
"text_muted": "#5c5f77", "text_muted": "#6c6f85",
"text_placeholder": "#6c6f85", "text_placeholder": "#8c8fa1",
"text_accent": "#1e66f5", "text_accent": "#1e66f5",
"icon": "#5c5f77", "text_danger": "#d20f39",
"icon_muted": "#6c6f85", "text_warning": "#fe640b",
"icon_accent": "#1e66f5", "icon": "#6c6f85",
"icon_muted": "#8c8fa1",
"icon_accent": "#7287fd",
"element_foreground": "#eff1f5", "element_foreground": "#eff1f5",
"element_background": "#1e66f5", "element_background": "#1e66f5",
"element_hover": "#8839ef", "element_hover": "#7287fd",
"element_active": "#1c5ce0", "element_active": "#04a5e5",
"element_selected": "#1a52cc", "element_selected": "#209fb5",
"element_disabled": "#1e66f54d", "element_disabled": "#1e66f54d",
"secondary_foreground": "#1a52cc", "secondary_foreground": "#4c4f69",
"secondary_background": "#e6e9ef", "secondary_background": "#ccd0da",
"secondary_hover": "#8839ef33", "secondary_hover": "#bcc0cc",
"secondary_active": "#dce0e8", "secondary_active": "#acb0be",
"secondary_selected": "#dce0e8", "secondary_selected": "#acb0be",
"secondary_disabled": "#1e66f54d", "secondary_disabled": "#1e66f54d",
"danger_foreground": "#eff1f5", "danger_foreground": "#eff1f5",
"danger_background": "#d20f39", "danger_background": "#d20f39",
"danger_hover": "#e64553", "danger_hover": "#e64553",
"danger_active": "#bd0d33", "danger_active": "#fe640b",
"danger_selected": "#a80b2d", "danger_selected": "#df8e1d",
"danger_disabled": "#d20f394d", "danger_disabled": "#d20f394d",
"warning_foreground": "#4c4f69", "warning_foreground": "#eff1f5",
"warning_background": "#df8e1d", "warning_background": "#fe640b",
"warning_hover": "#fe640b", "warning_hover": "#df8e1d",
"warning_active": "#c9801a", "warning_active": "#40a02b",
"warning_selected": "#b47217", "warning_selected": "#179299",
"warning_disabled": "#df8e1d4d", "warning_disabled": "#fe640b4d",
"ghost_element_background": "#00000000", "ghost_element_background": "#4c4f6900",
"ghost_element_background_alt": "#ccd0da", "ghost_element_background_alt": "#e6e9ef",
"ghost_element_hover": "#4c4f6933", "ghost_element_hover": "#4c4f690d",
"ghost_element_active": "#bcc0cc", "ghost_element_active": "#4c4f691a",
"ghost_element_selected": "#bcc0cc", "ghost_element_selected": "#4c4f691a",
"ghost_element_disabled": "#4c4f690d", "ghost_element_disabled": "#4c4f6905",
"tab_inactive_background": "#e6e9ef", "tab_background": "#e6e9ef",
"tab_inactive_foreground": "#5c5f77", "tab_foreground": "#6c6f85",
"tab_hover_background": "#4c4f690d",
"tab_active_background": "#eff1f5", "tab_active_background": "#eff1f5",
"tab_active_foreground": "#4c4f69", "tab_active_foreground": "#4c4f69",
"tab_hover_foreground": "#8839ef", "scrollbar_thumb_background": "#4c4f691a",
"scrollbar_thumb_background": "#4c4f6933", "scrollbar_thumb_hover_background": "#4c4f6926",
"scrollbar_thumb_hover_background": "#4c4f6980", "scrollbar_thumb_border": "#4c4f6900",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#4c4f6900",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#4c4f6900",
"scrollbar_track_border": "#bcc0cc",
"drop_target_background": "#1e66f51a", "drop_target_background": "#1e66f51a",
"cursor": "#dc8a78", "cursor": "#1e66f5",
"selection": "#7c7f9340" "selection": "#1e66f540"
}, },
"dark": { "dark": {
"background": "#eff1f5", "background": "#eff1f5",
@@ -76,65 +78,67 @@
"elevated_surface_background": "#dce0e8", "elevated_surface_background": "#dce0e8",
"panel_background": "#eff1f5", "panel_background": "#eff1f5",
"overlay": "#4c4f691a", "overlay": "#4c4f691a",
"title_bar": "#e6e9ef", "title_bar": "#dce0e8",
"title_bar_inactive": "#dce0e8", "title_bar_inactive": "#eff1f5",
"window_border": "#9ca0b0", "window_border": "#bcc0cc",
"border": "#acb0be", "border": "#bcc0cc",
"border_variant": "#bcc0cc", "border_variant": "#ccd0da",
"border_focused": "#1e66f5", "border_focused": "#1e66f5",
"border_selected": "#1e66f5", "border_selected": "#1e66f5",
"border_transparent": "#00000000", "border_transparent": "#4c4f6900",
"border_disabled": "#ccd0da", "border_disabled": "#e6e9ef",
"ring": "#1e66f5", "ring": "#7287fd",
"text": "#4c4f69", "text": "#4c4f69",
"text_muted": "#5c5f77", "text_muted": "#6c6f85",
"text_placeholder": "#6c6f85", "text_placeholder": "#8c8fa1",
"text_accent": "#1e66f5", "text_accent": "#1e66f5",
"icon": "#5c5f77", "text_danger": "#d20f39",
"icon_muted": "#6c6f85", "text_warning": "#fe640b",
"icon_accent": "#1e66f5", "icon": "#6c6f85",
"icon_muted": "#8c8fa1",
"icon_accent": "#7287fd",
"element_foreground": "#eff1f5", "element_foreground": "#eff1f5",
"element_background": "#1e66f5", "element_background": "#1e66f5",
"element_hover": "#8839ef", "element_hover": "#7287fd",
"element_active": "#1c5ce0", "element_active": "#04a5e5",
"element_selected": "#1a52cc", "element_selected": "#209fb5",
"element_disabled": "#1e66f54d", "element_disabled": "#1e66f54d",
"secondary_foreground": "#1a52cc", "secondary_foreground": "#4c4f69",
"secondary_background": "#e6e9ef", "secondary_background": "#ccd0da",
"secondary_hover": "#8839ef33", "secondary_hover": "#bcc0cc",
"secondary_active": "#dce0e8", "secondary_active": "#acb0be",
"secondary_selected": "#dce0e8", "secondary_selected": "#acb0be",
"secondary_disabled": "#1e66f54d", "secondary_disabled": "#1e66f54d",
"danger_foreground": "#eff1f5", "danger_foreground": "#eff1f5",
"danger_background": "#d20f39", "danger_background": "#d20f39",
"danger_hover": "#e64553", "danger_hover": "#e64553",
"danger_active": "#bd0d33", "danger_active": "#fe640b",
"danger_selected": "#a80b2d", "danger_selected": "#df8e1d",
"danger_disabled": "#d20f394d", "danger_disabled": "#d20f394d",
"warning_foreground": "#4c4f69", "warning_foreground": "#eff1f5",
"warning_background": "#df8e1d", "warning_background": "#fe640b",
"warning_hover": "#fe640b", "warning_hover": "#df8e1d",
"warning_active": "#c9801a", "warning_active": "#40a02b",
"warning_selected": "#b47217", "warning_selected": "#179299",
"warning_disabled": "#df8e1d4d", "warning_disabled": "#fe640b4d",
"ghost_element_background": "#00000000", "ghost_element_background": "#4c4f6900",
"ghost_element_background_alt": "#ccd0da", "ghost_element_background_alt": "#e6e9ef",
"ghost_element_hover": "#4c4f6933", "ghost_element_hover": "#4c4f690d",
"ghost_element_active": "#bcc0cc", "ghost_element_active": "#4c4f691a",
"ghost_element_selected": "#bcc0cc", "ghost_element_selected": "#4c4f691a",
"ghost_element_disabled": "#4c4f690d", "ghost_element_disabled": "#4c4f6905",
"tab_inactive_background": "#e6e9ef", "tab_background": "#e6e9ef",
"tab_inactive_foreground": "#5c5f77", "tab_foreground": "#6c6f85",
"tab_hover_background": "#4c4f690d",
"tab_active_background": "#eff1f5", "tab_active_background": "#eff1f5",
"tab_active_foreground": "#4c4f69", "tab_active_foreground": "#4c4f69",
"tab_hover_foreground": "#8839ef", "scrollbar_thumb_background": "#4c4f691a",
"scrollbar_thumb_background": "#4c4f6933", "scrollbar_thumb_hover_background": "#4c4f6926",
"scrollbar_thumb_hover_background": "#4c4f6980", "scrollbar_thumb_border": "#4c4f6900",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#4c4f6900",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#4c4f6900",
"scrollbar_track_border": "#bcc0cc",
"drop_target_background": "#1e66f51a", "drop_target_background": "#1e66f51a",
"cursor": "#dc8a78", "cursor": "#1e66f5",
"selection": "#7c7f9340" "selection": "#1e66f540"
} }
} }

192
assets/themes/catppuccin-macchiato.json
View File

@@ -1,74 +1,76 @@
{ {
"id": "catppuccin-macchiato", "id": "catppuccin-macchiato",
"name": "Catppuccin Macchiato", "name": "Catppuccin Macchiato",
"author": "Catppuccin", "author": "Catppuccin Org (ported by Coop)",
"url": "https://github.com/catppuccin/catppuccin", "url": "https://catppuccin.com",
"light": { "light": {
"background": "#24273a", "background": "#24273a",
"surface_background": "#1e2030", "surface_background": "#1e2030",
"elevated_surface_background": "#181926", "elevated_surface_background": "#181926",
"panel_background": "#24273a", "panel_background": "#24273a",
"overlay": "#cad3f51a", "overlay": "#cad3f51a",
"title_bar": "#1e2030", "title_bar": "#181926",
"title_bar_inactive": "#181926", "title_bar_inactive": "#24273a",
"window_border": "#6e738d", "window_border": "#494d64",
"border": "#5b6078", "border": "#494d64",
"border_variant": "#494d64", "border_variant": "#363a4f",
"border_focused": "#8aadf4", "border_focused": "#8aadf4",
"border_selected": "#8aadf4", "border_selected": "#8aadf4",
"border_transparent": "#00000000", "border_transparent": "#cad3f500",
"border_disabled": "#363a4f", "border_disabled": "#1e2030",
"ring": "#8aadf4", "ring": "#b7bdf8",
"text": "#cad3f5", "text": "#cad3f5",
"text_muted": "#b8c0e0", "text_muted": "#a5adcb",
"text_placeholder": "#a5adcb", "text_placeholder": "#8087a2",
"text_accent": "#8aadf4", "text_accent": "#8aadf4",
"icon": "#b8c0e0", "text_danger": "#ed8796",
"icon_muted": "#a5adcb", "text_warning": "#f5a97f",
"icon_accent": "#8aadf4", "icon": "#a5adcb",
"element_foreground": "#181926", "icon_muted": "#8087a2",
"icon_accent": "#b7bdf8",
"element_foreground": "#24273a",
"element_background": "#8aadf4", "element_background": "#8aadf4",
"element_hover": "#b7bdf8", "element_hover": "#b7bdf8",
"element_active": "#7c9cdc", "element_active": "#91d7e3",
"element_selected": "#6e8bc5", "element_selected": "#7dc4e4",
"element_disabled": "#8aadf44d", "element_disabled": "#8aadf44d",
"secondary_foreground": "#6e8bc5", "secondary_foreground": "#cad3f5",
"secondary_background": "#1e2030", "secondary_background": "#363a4f",
"secondary_hover": "#8aadf433", "secondary_hover": "#494d64",
"secondary_active": "#181926", "secondary_active": "#5b6078",
"secondary_selected": "#181926", "secondary_selected": "#5b6078",
"secondary_disabled": "#8aadf44d", "secondary_disabled": "#8aadf44d",
"danger_foreground": "#181926", "danger_foreground": "#24273a",
"danger_background": "#ed8796", "danger_background": "#ed8796",
"danger_hover": "#ee99a0", "danger_hover": "#ee99a0",
"danger_active": "#d57a87", "danger_active": "#f5a97f",
"danger_selected": "#be6d78", "danger_selected": "#eed49f",
"danger_disabled": "#ed87964d", "danger_disabled": "#ed87964d",
"warning_foreground": "#181926", "warning_foreground": "#24273a",
"warning_background": "#eed49f", "warning_background": "#f5a97f",
"warning_hover": "#f5a97f", "warning_hover": "#eed49f",
"warning_active": "#d6bf8f", "warning_active": "#a6da95",
"warning_selected": "#beaa7f", "warning_selected": "#8bd5ca",
"warning_disabled": "#eed49f4d", "warning_disabled": "#f5a97f4d",
"ghost_element_background": "#00000000", "ghost_element_background": "#cad3f500",
"ghost_element_background_alt": "#363a4f", "ghost_element_background_alt": "#1e2030",
"ghost_element_hover": "#cad3f533", "ghost_element_hover": "#cad3f50d",
"ghost_element_active": "#494d64", "ghost_element_active": "#cad3f51a",
"ghost_element_selected": "#494d64", "ghost_element_selected": "#cad3f51a",
"ghost_element_disabled": "#cad3f50d", "ghost_element_disabled": "#cad3f505",
"tab_inactive_background": "#1e2030", "tab_background": "#181926",
"tab_inactive_foreground": "#b8c0e0", "tab_foreground": "#a5adcb",
"tab_hover_background": "#cad3f50d",
"tab_active_background": "#24273a", "tab_active_background": "#24273a",
"tab_active_foreground": "#cad3f5", "tab_active_foreground": "#cad3f5",
"tab_hover_foreground": "#b7bdf8", "scrollbar_thumb_background": "#cad3f51a",
"scrollbar_thumb_background": "#cad3f533", "scrollbar_thumb_hover_background": "#cad3f526",
"scrollbar_thumb_hover_background": "#cad3f580", "scrollbar_thumb_border": "#cad3f500",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#cad3f500",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#cad3f500",
"scrollbar_track_border": "#494d64",
"drop_target_background": "#8aadf41a", "drop_target_background": "#8aadf41a",
"cursor": "#f4dbd6", "cursor": "#8aadf4",
"selection": "#939ab740" "selection": "#8aadf440"
}, },
"dark": { "dark": {
"background": "#24273a", "background": "#24273a",
@@ -76,65 +78,67 @@
"elevated_surface_background": "#181926", "elevated_surface_background": "#181926",
"panel_background": "#24273a", "panel_background": "#24273a",
"overlay": "#cad3f51a", "overlay": "#cad3f51a",
"title_bar": "#1e2030", "title_bar": "#181926",
"title_bar_inactive": "#181926", "title_bar_inactive": "#24273a",
"window_border": "#6e738d", "window_border": "#494d64",
"border": "#5b6078", "border": "#494d64",
"border_variant": "#494d64", "border_variant": "#363a4f",
"border_focused": "#8aadf4", "border_focused": "#8aadf4",
"border_selected": "#8aadf4", "border_selected": "#8aadf4",
"border_transparent": "#00000000", "border_transparent": "#cad3f500",
"border_disabled": "#363a4f", "border_disabled": "#1e2030",
"ring": "#8aadf4", "ring": "#b7bdf8",
"text": "#cad3f5", "text": "#cad3f5",
"text_muted": "#b8c0e0", "text_muted": "#a5adcb",
"text_placeholder": "#a5adcb", "text_placeholder": "#8087a2",
"text_accent": "#8aadf4", "text_accent": "#8aadf4",
"icon": "#b8c0e0", "text_danger": "#ed8796",
"icon_muted": "#a5adcb", "text_warning": "#f5a97f",
"icon_accent": "#8aadf4", "icon": "#a5adcb",
"element_foreground": "#181926", "icon_muted": "#8087a2",
"icon_accent": "#b7bdf8",
"element_foreground": "#24273a",
"element_background": "#8aadf4", "element_background": "#8aadf4",
"element_hover": "#b7bdf8", "element_hover": "#b7bdf8",
"element_active": "#7c9cdc", "element_active": "#91d7e3",
"element_selected": "#6e8bc5", "element_selected": "#7dc4e4",
"element_disabled": "#8aadf44d", "element_disabled": "#8aadf44d",
"secondary_foreground": "#6e8bc5", "secondary_foreground": "#cad3f5",
"secondary_background": "#1e2030", "secondary_background": "#363a4f",
"secondary_hover": "#8aadf433", "secondary_hover": "#494d64",
"secondary_active": "#181926", "secondary_active": "#5b6078",
"secondary_selected": "#181926", "secondary_selected": "#5b6078",
"secondary_disabled": "#8aadf44d", "secondary_disabled": "#8aadf44d",
"danger_foreground": "#181926", "danger_foreground": "#24273a",
"danger_background": "#ed8796", "danger_background": "#ed8796",
"danger_hover": "#ee99a0", "danger_hover": "#ee99a0",
"danger_active": "#d57a87", "danger_active": "#f5a97f",
"danger_selected": "#be6d78", "danger_selected": "#eed49f",
"danger_disabled": "#ed87964d", "danger_disabled": "#ed87964d",
"warning_foreground": "#181926", "warning_foreground": "#24273a",
"warning_background": "#eed49f", "warning_background": "#f5a97f",
"warning_hover": "#f5a97f", "warning_hover": "#eed49f",
"warning_active": "#d6bf8f", "warning_active": "#a6da95",
"warning_selected": "#beaa7f", "warning_selected": "#8bd5ca",
"warning_disabled": "#eed49f4d", "warning_disabled": "#f5a97f4d",
"ghost_element_background": "#00000000", "ghost_element_background": "#cad3f500",
"ghost_element_background_alt": "#363a4f", "ghost_element_background_alt": "#1e2030",
"ghost_element_hover": "#cad3f533", "ghost_element_hover": "#cad3f50d",
"ghost_element_active": "#494d64", "ghost_element_active": "#cad3f51a",
"ghost_element_selected": "#494d64", "ghost_element_selected": "#cad3f51a",
"ghost_element_disabled": "#cad3f50d", "ghost_element_disabled": "#cad3f505",
"tab_inactive_background": "#1e2030", "tab_background": "#181926",
"tab_inactive_foreground": "#b8c0e0", "tab_foreground": "#a5adcb",
"tab_hover_background": "#cad3f50d",
"tab_active_background": "#24273a", "tab_active_background": "#24273a",
"tab_active_foreground": "#cad3f5", "tab_active_foreground": "#cad3f5",
"tab_hover_foreground": "#b7bdf8", "scrollbar_thumb_background": "#cad3f51a",
"scrollbar_thumb_background": "#cad3f533", "scrollbar_thumb_hover_background": "#cad3f526",
"scrollbar_thumb_hover_background": "#cad3f580", "scrollbar_thumb_border": "#cad3f500",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#cad3f500",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#cad3f500",
"scrollbar_track_border": "#494d64",
"drop_target_background": "#8aadf41a", "drop_target_background": "#8aadf41a",
"cursor": "#f4dbd6", "cursor": "#8aadf4",
"selection": "#939ab740" "selection": "#8aadf440"
} }
} }

192
assets/themes/catppuccin-mocha.json
View File

@@ -1,74 +1,76 @@
{ {
"id": "catppuccin-mocha", "id": "catppuccin-mocha",
"name": "Catppuccin Mocha", "name": "Catppuccin Mocha",
"author": "Catppuccin", "author": "Catppuccin Org (ported by Coop)",
"url": "https://github.com/catppuccin/catppuccin", "url": "https://catppuccin.com",
"light": { "light": {
"background": "#1e1e2e", "background": "#1e1e2e",
"surface_background": "#181825", "surface_background": "#181825",
"elevated_surface_background": "#11111b", "elevated_surface_background": "#11111b",
"panel_background": "#1e1e2e", "panel_background": "#1e1e2e",
"overlay": "#cdd6f41a", "overlay": "#cdd6f41a",
"title_bar": "#181825", "title_bar": "#11111b",
"title_bar_inactive": "#11111b", "title_bar_inactive": "#1e1e2e",
"window_border": "#6c7086", "window_border": "#45475a",
"border": "#585b70", "border": "#45475a",
"border_variant": "#45475a", "border_variant": "#313244",
"border_focused": "#89b4fa", "border_focused": "#89b4fa",
"border_selected": "#89b4fa", "border_selected": "#89b4fa",
"border_transparent": "#00000000", "border_transparent": "#cdd6f400",
"border_disabled": "#313244", "border_disabled": "#181825",
"ring": "#89b4fa", "ring": "#b4befe",
"text": "#cdd6f4", "text": "#cdd6f4",
"text_muted": "#bac2de", "text_muted": "#a6adc8",
"text_placeholder": "#a6adc8", "text_placeholder": "#7f849c",
"text_accent": "#89b4fa", "text_accent": "#89b4fa",
"icon": "#bac2de", "text_danger": "#f38ba8",
"icon_muted": "#a6adc8", "text_warning": "#fab387",
"icon_accent": "#89b4fa", "icon": "#a6adc8",
"element_foreground": "#11111b", "icon_muted": "#7f849c",
"icon_accent": "#b4befe",
"element_foreground": "#1e1e2e",
"element_background": "#89b4fa", "element_background": "#89b4fa",
"element_hover": "#b4befe", "element_hover": "#b4befe",
"element_active": "#7ba2e1", "element_active": "#89dceb",
"element_selected": "#6d90c9", "element_selected": "#74c7ec",
"element_disabled": "#89b4fa4d", "element_disabled": "#89b4fa4d",
"secondary_foreground": "#6d90c9", "secondary_foreground": "#cdd6f4",
"secondary_background": "#181825", "secondary_background": "#313244",
"secondary_hover": "#89b4fa33", "secondary_hover": "#45475a",
"secondary_active": "#11111b", "secondary_active": "#585b70",
"secondary_selected": "#11111b", "secondary_selected": "#585b70",
"secondary_disabled": "#89b4fa4d", "secondary_disabled": "#89b4fa4d",
"danger_foreground": "#11111b", "danger_foreground": "#1e1e2e",
"danger_background": "#f38ba8", "danger_background": "#f38ba8",
"danger_hover": "#eba0ac", "danger_hover": "#eba0ac",
"danger_active": "#db7d98", "danger_active": "#fab387",
"danger_selected": "#c46f88", "danger_selected": "#f9e2af",
"danger_disabled": "#f38ba84d", "danger_disabled": "#f38ba84d",
"warning_foreground": "#11111b", "warning_foreground": "#1e1e2e",
"warning_background": "#f9e2af", "warning_background": "#fab387",
"warning_hover": "#fab387", "warning_hover": "#f9e2af",
"warning_active": "#e0cb9e", "warning_active": "#a6e3a1",
"warning_selected": "#c8b48d", "warning_selected": "#94e2d5",
"warning_disabled": "#f9e2af4d", "warning_disabled": "#fab3874d",
"ghost_element_background": "#00000000", "ghost_element_background": "#cdd6f400",
"ghost_element_background_alt": "#313244", "ghost_element_background_alt": "#181825",
"ghost_element_hover": "#cdd6f433", "ghost_element_hover": "#cdd6f40d",
"ghost_element_active": "#45475a", "ghost_element_active": "#cdd6f41a",
"ghost_element_selected": "#45475a", "ghost_element_selected": "#cdd6f41a",
"ghost_element_disabled": "#cdd6f40d", "ghost_element_disabled": "#cdd6f405",
"tab_inactive_background": "#181825", "tab_background": "#11111b",
"tab_inactive_foreground": "#bac2de", "tab_foreground": "#a6adc8",
"tab_hover_background": "#cdd6f40d",
"tab_active_background": "#1e1e2e", "tab_active_background": "#1e1e2e",
"tab_active_foreground": "#cdd6f4", "tab_active_foreground": "#cdd6f4",
"tab_hover_foreground": "#b4befe", "scrollbar_thumb_background": "#cdd6f41a",
"scrollbar_thumb_background": "#cdd6f433", "scrollbar_thumb_hover_background": "#cdd6f426",
"scrollbar_thumb_hover_background": "#cdd6f580", "scrollbar_thumb_border": "#cdd6f400",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#cdd6f400",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#cdd6f400",
"scrollbar_track_border": "#45475a",
"drop_target_background": "#89b4fa1a", "drop_target_background": "#89b4fa1a",
"cursor": "#f5e0dc", "cursor": "#89b4fa",
"selection": "#9399b240" "selection": "#89b4fa40"
}, },
"dark": { "dark": {
"background": "#1e1e2e", "background": "#1e1e2e",
@@ -76,65 +78,67 @@
"elevated_surface_background": "#11111b", "elevated_surface_background": "#11111b",
"panel_background": "#1e1e2e", "panel_background": "#1e1e2e",
"overlay": "#cdd6f41a", "overlay": "#cdd6f41a",
"title_bar": "#181825", "title_bar": "#11111b",
"title_bar_inactive": "#11111b", "title_bar_inactive": "#1e1e2e",
"window_border": "#6c7086", "window_border": "#45475a",
"border": "#585b70", "border": "#45475a",
"border_variant": "#45475a", "border_variant": "#313244",
"border_focused": "#89b4fa", "border_focused": "#89b4fa",
"border_selected": "#89b4fa", "border_selected": "#89b4fa",
"border_transparent": "#00000000", "border_transparent": "#cdd6f400",
"border_disabled": "#313244", "border_disabled": "#181825",
"ring": "#89b4fa", "ring": "#b4befe",
"text": "#cdd6f4", "text": "#cdd6f4",
"text_muted": "#bac2de", "text_muted": "#a6adc8",
"text_placeholder": "#a6adc8", "text_placeholder": "#7f849c",
"text_accent": "#89b4fa", "text_accent": "#89b4fa",
"icon": "#bac2de", "text_danger": "#f38ba8",
"icon_muted": "#a6adc8", "text_warning": "#fab387",
"icon_accent": "#89b4fa", "icon": "#a6adc8",
"element_foreground": "#11111b", "icon_muted": "#7f849c",
"icon_accent": "#b4befe",
"element_foreground": "#1e1e2e",
"element_background": "#89b4fa", "element_background": "#89b4fa",
"element_hover": "#b4befe", "element_hover": "#b4befe",
"element_active": "#7ba2e1", "element_active": "#89dceb",
"element_selected": "#6d90c9", "element_selected": "#74c7ec",
"element_disabled": "#89b4fa4d", "element_disabled": "#89b4fa4d",
"secondary_foreground": "#6d90c9", "secondary_foreground": "#cdd6f4",
"secondary_background": "#181825", "secondary_background": "#313244",
"secondary_hover": "#89b4fa33", "secondary_hover": "#45475a",
"secondary_active": "#11111b", "secondary_active": "#585b70",
"secondary_selected": "#11111b", "secondary_selected": "#585b70",
"secondary_disabled": "#89b4fa4d", "secondary_disabled": "#89b4fa4d",
"danger_foreground": "#11111b", "danger_foreground": "#1e1e2e",
"danger_background": "#f38ba8", "danger_background": "#f38ba8",
"danger_hover": "#eba0ac", "danger_hover": "#eba0ac",
"danger_active": "#db7d98", "danger_active": "#fab387",
"danger_selected": "#c46f88", "danger_selected": "#f9e2af",
"danger_disabled": "#f38ba84d", "danger_disabled": "#f38ba84d",
"warning_foreground": "#11111b", "warning_foreground": "#1e1e2e",
"warning_background": "#f9e2af", "warning_background": "#fab387",
"warning_hover": "#fab387", "warning_hover": "#f9e2af",
"warning_active": "#e0cb9e", "warning_active": "#a6e3a1",
"warning_selected": "#c8b48d", "warning_selected": "#94e2d5",
"warning_disabled": "#f9e2af4d", "warning_disabled": "#fab3874d",
"ghost_element_background": "#00000000", "ghost_element_background": "#cdd6f400",
"ghost_element_background_alt": "#313244", "ghost_element_background_alt": "#181825",
"ghost_element_hover": "#cdd6f433", "ghost_element_hover": "#cdd6f40d",
"ghost_element_active": "#45475a", "ghost_element_active": "#cdd6f41a",
"ghost_element_selected": "#45475a", "ghost_element_selected": "#cdd6f41a",
"ghost_element_disabled": "#cdd6f40d", "ghost_element_disabled": "#cdd6f405",
"tab_inactive_background": "#181825", "tab_background": "#11111b",
"tab_inactive_foreground": "#bac2de", "tab_foreground": "#a6adc8",
"tab_hover_background": "#cdd6f40d",
"tab_active_background": "#1e1e2e", "tab_active_background": "#1e1e2e",
"tab_active_foreground": "#cdd6f4", "tab_active_foreground": "#cdd6f4",
"tab_hover_foreground": "#b4befe", "scrollbar_thumb_background": "#cdd6f41a",
"scrollbar_thumb_background": "#cdd6f433", "scrollbar_thumb_hover_background": "#cdd6f426",
"scrollbar_thumb_hover_background": "#cdd6f580", "scrollbar_thumb_border": "#cdd6f400",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#cdd6f400",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#cdd6f400",
"scrollbar_track_border": "#45475a",
"drop_target_background": "#89b4fa1a", "drop_target_background": "#89b4fa1a",
"cursor": "#f5e0dc", "cursor": "#89b4fa",
"selection": "#9399b240" "selection": "#89b4fa40"
} }
} }

210
assets/themes/flexoki.json
View File

@@ -1,140 +1,144 @@
{ {
"id": "flexoki", "id": "flexoki",
"name": "Flexoki", "name": "Flexoki",
"author": "Stephan Ango", "author": "Steph Ango (ported by Coop)",
"url": "https://stephango.com/flexoki", "url": "https://stephango.com/flexoki",
"light": { "light": {
"background": "#FFFCF0", "background": "#FFFCF0",
"surface_background": "#F2F0E5", "surface_background": "#F2F0E5",
"elevated_surface_background": "#E6E4D9", "elevated_surface_background": "#E6E4D9",
"panel_background": "#FFFCF0", "panel_background": "#FFFCF0",
"overlay": "#100F0F1a", "overlay": "#100F0F1A",
"title_bar": "#F2F0E5", "title_bar": "#E6E4D9",
"title_bar_inactive": "#E6E4D9", "title_bar_inactive": "#FFFCF0",
"window_border": "#B7B5AC", "window_border": "#CECDC3",
"border": "#CECDC3", "border": "#CECDC3",
"border_variant": "#DAD8CE", "border_variant": "#DAD8CE",
"border_focused": "#205EA6", "border_focused": "#24837B",
"border_selected": "#205EA6", "border_selected": "#24837B",
"border_transparent": "#00000000", "border_transparent": "#100F0F00",
"border_disabled": "#E6E4D9", "border_disabled": "#E6E4D9",
"ring": "#205EA6", "ring": "#3AA99F",
"text": "#100F0F", "text": "#100F0F",
"text_muted": "#6F6E69", "text_muted": "#6F6E69",
"text_placeholder": "#9F9D96", "text_placeholder": "#B7B5AC",
"text_accent": "#205EA6", "text_accent": "#24837B",
"text_danger": "#AF3029",
"text_warning": "#BC5215",
"icon": "#6F6E69", "icon": "#6F6E69",
"icon_muted": "#9F9D96", "icon_muted": "#B7B5AC",
"icon_accent": "#205EA6", "icon_accent": "#3AA99F",
"element_foreground": "#FFFCF0", "element_foreground": "#FFFCF0",
"element_background": "#205EA6", "element_background": "#24837B",
"element_hover": "#1A4F8C", "element_hover": "#3AA99F",
"element_active": "#163B66", "element_active": "#1C1B1A",
"element_selected": "#133051", "element_selected": "#100F0F",
"element_disabled": "#205EA64d", "element_disabled": "#24837B4D",
"secondary_foreground": "#163B66", "secondary_foreground": "#100F0F",
"secondary_background": "#F2F0E5", "secondary_background": "#E6E4D9",
"secondary_hover": "#205EA61a", "secondary_hover": "#DAD8CE",
"secondary_active": "#E6E4D9", "secondary_active": "#CECDC3",
"secondary_selected": "#E6E4D9", "secondary_selected": "#CECDC3",
"secondary_disabled": "#205EA64d", "secondary_disabled": "#24837B4D",
"danger_foreground": "#FFFCF0", "danger_foreground": "#FFFCF0",
"danger_background": "#D14D41", "danger_background": "#AF3029",
"danger_hover": "#C03E35", "danger_hover": "#D14D41",
"danger_active": "#AF3029", "danger_active": "#1C1B1A",
"danger_selected": "#942822", "danger_selected": "#100F0F",
"danger_disabled": "#D14D414d", "danger_disabled": "#AF30294D",
"warning_foreground": "#100F0F", "warning_foreground": "#FFFCF0",
"warning_background": "#D0A215", "warning_background": "#BC5215",
"warning_hover": "#BE9207", "warning_hover": "#DA702C",
"warning_active": "#AD8301", "warning_active": "#1C1B1A",
"warning_selected": "#8E6B01", "warning_selected": "#100F0F",
"warning_disabled": "#D0A2154d", "warning_disabled": "#BC52154D",
"ghost_element_background": "#00000000", "ghost_element_background": "#100F0F00",
"ghost_element_background_alt": "#E6E4D9", "ghost_element_background_alt": "#F2F0E5",
"ghost_element_hover": "#100F0F1a", "ghost_element_hover": "#100F0F0D",
"ghost_element_active": "#DAD8CE", "ghost_element_active": "#100F0F1A",
"ghost_element_selected": "#DAD8CE", "ghost_element_selected": "#100F0F1A",
"ghost_element_disabled": "#100F0F0d", "ghost_element_disabled": "#100F0F05",
"tab_inactive_background": "#F2F0E5", "tab_background": "#E6E4D9",
"tab_inactive_foreground": "#6F6E69", "tab_foreground": "#6F6E69",
"tab_hover_background": "#100F0F0D",
"tab_active_background": "#FFFCF0", "tab_active_background": "#FFFCF0",
"tab_active_foreground": "#100F0F", "tab_active_foreground": "#100F0F",
"tab_hover_foreground": "#205EA6", "scrollbar_thumb_background": "#100F0F1A",
"scrollbar_thumb_background": "#100F0F33", "scrollbar_thumb_hover_background": "#100F0F26",
"scrollbar_thumb_hover_background": "#100F0F4d", "scrollbar_thumb_border": "#100F0F00",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#100F0F00",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#100F0F00",
"scrollbar_track_border": "#DAD8CE", "drop_target_background": "#24837B1A",
"drop_target_background": "#205EA61a", "cursor": "#24837B",
"cursor": "#205EA6", "selection": "#24837B40"
"selection": "#205EA640"
}, },
"dark": { "dark": {
"background": "#100F0F", "background": "#100F0F",
"surface_background": "#1C1B1A", "surface_background": "#1C1B1A",
"elevated_surface_background": "#282726", "elevated_surface_background": "#282726",
"panel_background": "#100F0F", "panel_background": "#100F0F",
"overlay": "#FFFCF01a", "overlay": "#FFFCF01A",
"title_bar": "#1C1B1A", "title_bar": "#282726",
"title_bar_inactive": "#282726", "title_bar_inactive": "#100F0F",
"window_border": "#575653", "window_border": "#403E3C",
"border": "#403E3C", "border": "#403E3C",
"border_variant": "#343331", "border_variant": "#343331",
"border_focused": "#4385BE", "border_focused": "#3AA99F",
"border_selected": "#4385BE", "border_selected": "#3AA99F",
"border_transparent": "#00000000", "border_transparent": "#100F0F00",
"border_disabled": "#282726", "border_disabled": "#282726",
"ring": "#4385BE", "ring": "#24837B",
"text": "#FFFCF0", "text": "#CECDC3",
"text_muted": "#878580", "text_muted": "#878580",
"text_placeholder": "#6F6E69", "text_placeholder": "#575653",
"text_accent": "#4385BE", "text_accent": "#3AA99F",
"text_danger": "#D14D41",
"text_warning": "#DA702C",
"icon": "#878580", "icon": "#878580",
"icon_muted": "#6F6E69", "icon_muted": "#575653",
"icon_accent": "#4385BE", "icon_accent": "#24837B",
"element_foreground": "#100F0F", "element_foreground": "#100F0F",
"element_background": "#4385BE", "element_background": "#3AA99F",
"element_hover": "#3171B2", "element_hover": "#24837B",
"element_active": "#205EA6", "element_active": "#CECDC3",
"element_selected": "#1A4F8C", "element_selected": "#F2F0E5",
"element_disabled": "#4385BE4d", "element_disabled": "#3AA99F4D",
"secondary_foreground": "#205EA6", "secondary_foreground": "#CECDC3",
"secondary_background": "#1C1B1A", "secondary_background": "#1C1B1A",
"secondary_hover": "#4385BE1a", "secondary_hover": "#282726",
"secondary_active": "#282726", "secondary_active": "#343331",
"secondary_selected": "#282726", "secondary_selected": "#343331",
"secondary_disabled": "#4385BE4d", "secondary_disabled": "#3AA99F4D",
"danger_foreground": "#100F0F", "danger_foreground": "#100F0F",
"danger_background": "#E8705F", "danger_background": "#D14D41",
"danger_hover": "#D14D41", "danger_hover": "#AF3029",
"danger_active": "#C03E35", "danger_active": "#CECDC3",
"danger_selected": "#AF3029", "danger_selected": "#F2F0E5",
"danger_disabled": "#E8705F4d", "danger_disabled": "#D14D414D",
"warning_foreground": "#100F0F", "warning_foreground": "#100F0F",
"warning_background": "#DFB431", "warning_background": "#DA702C",
"warning_hover": "#D0A215", "warning_hover": "#BC5215",
"warning_active": "#BE9207", "warning_active": "#CECDC3",
"warning_selected": "#AD8301", "warning_selected": "#F2F0E5",
"warning_disabled": "#DFB4314d", "warning_disabled": "#DA702C4D",
"ghost_element_background": "#00000000", "ghost_element_background": "#100F0F00",
"ghost_element_background_alt": "#282726", "ghost_element_background_alt": "#1C1B1A",
"ghost_element_hover": "#FFFCF01a", "ghost_element_hover": "#FFFCF00D",
"ghost_element_active": "#343331", "ghost_element_active": "#FFFCF01A",
"ghost_element_selected": "#343331", "ghost_element_selected": "#FFFCF01A",
"ghost_element_disabled": "#FFFCF00d", "ghost_element_disabled": "#FFFCF005",
"tab_inactive_background": "#1C1B1A", "tab_background": "#282726",
"tab_inactive_foreground": "#878580", "tab_foreground": "#878580",
"tab_hover_background": "#FFFCF00D",
"tab_active_background": "#100F0F", "tab_active_background": "#100F0F",
"tab_active_foreground": "#FFFCF0", "tab_active_foreground": "#CECDC3",
"tab_hover_foreground": "#4385BE", "scrollbar_thumb_background": "#FFFCF01A",
"scrollbar_thumb_background": "#FFFCF033", "scrollbar_thumb_hover_background": "#FFFCF026",
"scrollbar_thumb_hover_background": "#FFFCF04d", "scrollbar_thumb_border": "#100F0F00",
"scrollbar_thumb_border": "#00000000", "scrollbar_track_background": "#100F0F00",
"scrollbar_track_background": "#00000000", "scrollbar_track_border": "#100F0F00",
"scrollbar_track_border": "#343331", "drop_target_background": "#3AA99F1A",
"drop_target_background": "#4385BE1a", "cursor": "#3AA99F",
"cursor": "#4385BE", "selection": "#3AA99F40"
"selection": "#4385BE40"
} }
} }

144
assets/themes/forest.json Normal file
View File

@@ -0,0 +1,144 @@
{
"id": "forest",
"name": "Forest",
"author": "Coop",
"url": "https://github.com/lumehq/coop",
"light": {
"background": "#fbfefcff",
"surface_background": "#f4fbf6ff",
"elevated_surface_background": "#e9f6e9ff",
"panel_background": "#fbfefcff",
"overlay": "#193b2d1a",
"title_bar": "#e9f6e9ff",
"title_bar_inactive": "#fbfefcff",
"window_border": "#c4e8d1ff",
"border": "#c4e8d1ff",
"border_variant": "#b2ddb5ff",
"border_focused": "#30a46cff",
"border_selected": "#30a46cff",
"border_transparent": "#00000000",
"border_disabled": "#e0f3e6ff",
"ring": "#2b9a66ff",
"text": "#193b2dff",
"text_muted": "#2f7c57ff",
"text_placeholder": "#8eceaaff",
"text_accent": "#30a46cff",
"text_danger": "#e54d2eff",
"text_warning": "#f76b15ff",
"icon": "#2f7c57ff",
"icon_muted": "#8eceaaff",
"icon_accent": "#2b9a66ff",
"element_foreground": "#ffffffff",
"element_background": "#30a46cff",
"element_hover": "#2b9a66ff",
"element_active": "#2a7e3bff",
"element_selected": "#218358ff",
"element_disabled": "#30a46c4d",
"secondary_foreground": "#193b2dff",
"secondary_background": "#e9f6e9ff",
"secondary_hover": "#daf1dbff",
"secondary_active": "#c4e8d1ff",
"secondary_selected": "#c4e8d1ff",
"secondary_disabled": "#30a46c4d",
"danger_foreground": "#ffffffff",
"danger_background": "#feebe7ff",
"danger_hover": "#ffcdc2ff",
"danger_active": "#fdbdafff",
"danger_selected": "#fdbdafff",
"danger_disabled": "#e54d2e4d",
"warning_foreground": "#ffffffff",
"warning_background": "#fff7edff",
"warning_hover": "#ffd19aff",
"warning_active": "#ffc182ff",
"warning_selected": "#ffc182ff",
"warning_disabled": "#f76b154d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#e9f6e9ff",
"ghost_element_hover": "#193b2d0d",
"ghost_element_active": "#193b2d1a",
"ghost_element_selected": "#193b2d1a",
"ghost_element_disabled": "#193b2d05",
"tab_background": "#e9f6e9ff",
"tab_foreground": "#2f7c57ff",
"tab_hover_background": "#193b2d0d",
"tab_active_background": "#fbfefcff",
"tab_active_foreground": "#193b2dff",
"scrollbar_thumb_background": "#193b2d1a",
"scrollbar_thumb_hover_background": "#193b2d26",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#00000000",
"drop_target_background": "#30a46c1a",
"cursor": "#30a46cff",
"selection": "#30a46c40"
},
"dark": {
"background": "#0e1512ff",
"surface_background": "#121b17ff",
"elevated_surface_background": "#132d21ff",
"panel_background": "#0e1512ff",
"overlay": "#b1f1cb1a",
"title_bar": "#132d21ff",
"title_bar_inactive": "#0e1512ff",
"window_border": "#20573eff",
"border": "#20573eff",
"border_variant": "#174933ff",
"border_focused": "#33b074ff",
"border_selected": "#33b074ff",
"border_transparent": "#00000000",
"border_disabled": "#113b29ff",
"ring": "#33b074ff",
"text": "#b1f1cbff",
"text_muted": "#71d083ff",
"text_placeholder": "#2f7c57ff",
"text_accent": "#3dd68cff",
"text_danger": "#ff977dff",
"text_warning": "#ffa057ff",
"icon": "#71d083ff",
"icon_muted": "#2f7c57ff",
"icon_accent": "#33b074ff",
"element_foreground": "#0e1512ff",
"element_background": "#3dd68cff",
"element_hover": "#71d083ff",
"element_active": "#33b074ff",
"element_selected": "#30a46cff",
"element_disabled": "#3dd68c4d",
"secondary_foreground": "#b1f1cbff",
"secondary_background": "#132d21ff",
"secondary_hover": "#113b29ff",
"secondary_active": "#174933ff",
"secondary_selected": "#174933ff",
"secondary_disabled": "#3dd68c4d",
"danger_foreground": "#181111ff",
"danger_background": "#391714ff",
"danger_hover": "#5e1c16ff",
"danger_active": "#6e2920ff",
"danger_selected": "#6e2920ff",
"danger_disabled": "#ff977d4d",
"warning_foreground": "#17120eff",
"warning_background": "#331e0bff",
"warning_hover": "#562800ff",
"warning_active": "#66350cff",
"warning_selected": "#66350cff",
"warning_disabled": "#ffa0574d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#132d21ff",
"ghost_element_hover": "#b1f1cb0d",
"ghost_element_active": "#b1f1cb1a",
"ghost_element_selected": "#b1f1cb1a",
"ghost_element_disabled": "#b1f1cb05",
"tab_background": "#132d21ff",
"tab_foreground": "#71d083ff",
"tab_hover_background": "#b1f1cb0d",
"tab_active_background": "#0e1512ff",
"tab_active_foreground": "#b1f1cbff",
"scrollbar_thumb_background": "#b1f1cb1a",
"scrollbar_thumb_hover_background": "#b1f1cb26",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#00000000",
"drop_target_background": "#3dd68c1a",
"cursor": "#3dd68cff",
"selection": "#3dd68c40"
}
}

144
assets/themes/ocean.json Normal file
View File

@@ -0,0 +1,144 @@
{
"id": "ocean",
"name": "Ocean",
"author": "Coop",
"url": "https://github.com/lumehq/coop",
"light": {
"background": "#fafefeff",
"surface_background": "#f2fbfaff",
"elevated_surface_background": "#e6f7f7ff",
"panel_background": "#fafefeff",
"overlay": "#00333f1a",
"title_bar": "#e6f7f7ff",
"title_bar_inactive": "#fafefeff",
"window_border": "#cce5e9ff",
"border": "#cce5e9ff",
"border_variant": "#b8dde3ff",
"border_focused": "#00a2c7ff",
"border_selected": "#00a2c7ff",
"border_transparent": "#00000000",
"border_disabled": "#e0f0f2ff",
"ring": "#0797b9ff",
"text": "#0d3c48ff",
"text_muted": "#107d98ff",
"text_placeholder": "#60b3d7ff",
"text_accent": "#00a2c7ff",
"text_danger": "#e54d2eff",
"text_warning": "#f76b15ff",
"icon": "#107d98ff",
"icon_muted": "#60b3d7ff",
"icon_accent": "#0797b9ff",
"element_foreground": "#ffffffff",
"element_background": "#00a2c7ff",
"element_hover": "#0797b9ff",
"element_active": "#12667eff",
"element_selected": "#0d4a5cff",
"element_disabled": "#00a2c74d",
"secondary_foreground": "#0d4a5cff",
"secondary_background": "#ddf9f2ff",
"secondary_hover": "#c8f4e9ff",
"secondary_active": "#b3ecdeff",
"secondary_selected": "#b3ecdeff",
"secondary_disabled": "#00a2c74d",
"danger_foreground": "#ffffffff",
"danger_background": "#feebe7ff",
"danger_hover": "#ffcdc2ff",
"danger_active": "#fdbdafff",
"danger_selected": "#fdbdafff",
"danger_disabled": "#e54d2e4d",
"warning_foreground": "#ffffffff",
"warning_background": "#fff7edff",
"warning_hover": "#ffd19aff",
"warning_active": "#ffc182ff",
"warning_selected": "#ffc182ff",
"warning_disabled": "#f76b154d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#e6f7f7ff",
"ghost_element_hover": "#00333f0d",
"ghost_element_active": "#00333f1a",
"ghost_element_selected": "#00333f1a",
"ghost_element_disabled": "#00333f05",
"tab_background": "#e6f7f7ff",
"tab_foreground": "#107d98ff",
"tab_hover_background": "#00333f0d",
"tab_active_background": "#fafefeff",
"tab_active_foreground": "#0d3c48ff",
"scrollbar_thumb_background": "#00333f1a",
"scrollbar_thumb_hover_background": "#00333f26",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#00000000",
"drop_target_background": "#00a2c71a",
"cursor": "#00a2c7ff",
"selection": "#00a2c740"
},
"dark": {
"background": "#0b161aff",
"surface_background": "#101b20ff",
"elevated_surface_background": "#082c36ff",
"panel_background": "#0b161aff",
"overlay": "#c2f3ff1a",
"title_bar": "#082c36ff",
"title_bar_inactive": "#0b161aff",
"window_border": "#1b537bff",
"border": "#1b537bff",
"border_variant": "#154467ff",
"border_focused": "#00a2c7ff",
"border_selected": "#00a2c7ff",
"border_transparent": "#00000000",
"border_disabled": "#112840ff",
"ring": "#23afd0ff",
"text": "#b6ecf7ff",
"text_muted": "#4ccce6ff",
"text_placeholder": "#197caeff",
"text_accent": "#7ce2feff",
"text_danger": "#ff977dff",
"text_warning": "#ffa057ff",
"icon": "#4ccce6ff",
"icon_muted": "#197caeff",
"icon_accent": "#23afd0ff",
"element_foreground": "#0b161aff",
"element_background": "#7ce2feff",
"element_hover": "#a8eeffff",
"element_active": "#23afd0ff",
"element_selected": "#00a2c7ff",
"element_disabled": "#7ce2fe4d",
"secondary_foreground": "#adf0ddff",
"secondary_background": "#0d2d2aff",
"secondary_hover": "#023b37ff",
"secondary_active": "#084843ff",
"secondary_selected": "#084843ff",
"secondary_disabled": "#7ce2fe4d",
"danger_foreground": "#181111ff",
"danger_background": "#391714ff",
"danger_hover": "#5e1c16ff",
"danger_active": "#6e2920ff",
"danger_selected": "#6e2920ff",
"danger_disabled": "#ff977d4d",
"warning_foreground": "#17120eff",
"warning_background": "#331e0bff",
"warning_hover": "#562800ff",
"warning_active": "#66350cff",
"warning_selected": "#66350cff",
"warning_disabled": "#ffa0574d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#082c36ff",
"ghost_element_hover": "#c2f3ff0d",
"ghost_element_active": "#c2f3ff1a",
"ghost_element_selected": "#c2f3ff1a",
"ghost_element_disabled": "#c2f3ff05",
"tab_background": "#082c36ff",
"tab_foreground": "#4ccce6ff",
"tab_hover_background": "#c2f3ff0d",
"tab_active_background": "#0b161aff",
"tab_active_foreground": "#b6ecf7ff",
"scrollbar_thumb_background": "#c2f3ff1a",
"scrollbar_thumb_hover_background": "#c2f3ff26",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#00000000",
"drop_target_background": "#7ce2fe1a",
"cursor": "#7ce2feff",
"selection": "#7ce2fe40"
}
}

140
assets/themes/rose-pine-dawn.json
View File

@@ -1,140 +0,0 @@
{
"id": "rose-pine-dawn",
"name": "Rosé Pine Dawn",
"author": "Rosé Pine",
"url": "https://rosepinetheme.com/",
"light": {
"background": "#faf4ed",
"surface_background": "#fffaf3",
"elevated_surface_background": "#f2e9e1",
"panel_background": "#faf4ed",
"overlay": "#5752791a",
"title_bar": "#fffaf3",
"title_bar_inactive": "#f2e9e1",
"window_border": "#cecacd",
"border": "#dfdad9",
"border_variant": "#f4ede8",
"border_focused": "#907aa9",
"border_selected": "#907aa9",
"border_transparent": "#00000000",
"border_disabled": "#f2e9e1",
"ring": "#907aa9",
"text": "#575279",
"text_muted": "#797593",
"text_placeholder": "#9893a5",
"text_accent": "#907aa9",
"icon": "#797593",
"icon_muted": "#9893a5",
"icon_accent": "#907aa9",
"element_foreground": "#faf4ed",
"element_background": "#907aa9",
"element_hover": "#907aa9e6",
"element_active": "#826b95",
"element_selected": "#745c81",
"element_disabled": "#907aa94d",
"secondary_foreground": "#745c81",
"secondary_background": "#fffaf3",
"secondary_hover": "#907aa91a",
"secondary_active": "#f2e9e1",
"secondary_selected": "#f2e9e1",
"secondary_disabled": "#907aa94d",
"danger_foreground": "#faf4ed",
"danger_background": "#b4637a",
"danger_hover": "#a7586e",
"danger_active": "#9a4d62",
"danger_selected": "#8d4256",
"danger_disabled": "#b4637a4d",
"warning_foreground": "#575279",
"warning_background": "#ea9d34",
"warning_hover": "#d98e2f",
"warning_active": "#c87f2a",
"warning_selected": "#b77025",
"warning_disabled": "#ea9d344d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#f2e9e1",
"ghost_element_hover": "#5752791a",
"ghost_element_active": "#dfdad9",
"ghost_element_selected": "#dfdad9",
"ghost_element_disabled": "#5752790d",
"tab_inactive_background": "#fffaf3",
"tab_inactive_foreground": "#797593",
"tab_active_background": "#faf4ed",
"tab_active_foreground": "#575279",
"tab_hover_foreground": "#907aa9",
"scrollbar_thumb_background": "#57527933",
"scrollbar_thumb_hover_background": "#5752794d",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#dfdad9",
"drop_target_background": "#907aa91a",
"cursor": "#907aa9",
"selection": "#907aa940"
},
"dark": {
"background": "#faf4ed",
"surface_background": "#fffaf3",
"elevated_surface_background": "#f2e9e1",
"panel_background": "#faf4ed",
"overlay": "#5752791a",
"title_bar": "#fffaf3",
"title_bar_inactive": "#f2e9e1",
"window_border": "#cecacd",
"border": "#dfdad9",
"border_variant": "#f4ede8",
"border_focused": "#907aa9",
"border_selected": "#907aa9",
"border_transparent": "#00000000",
"border_disabled": "#f2e9e1",
"ring": "#907aa9",
"text": "#575279",
"text_muted": "#797593",
"text_placeholder": "#9893a5",
"text_accent": "#907aa9",
"icon": "#797593",
"icon_muted": "#9893a5",
"icon_accent": "#907aa9",
"element_foreground": "#faf4ed",
"element_background": "#907aa9",
"element_hover": "#907aa9e6",
"element_active": "#826b95",
"element_selected": "#745c81",
"element_disabled": "#907aa94d",
"secondary_foreground": "#745c81",
"secondary_background": "#fffaf3",
"secondary_hover": "#907aa91a",
"secondary_active": "#f2e9e1",
"secondary_selected": "#f2e9e1",
"secondary_disabled": "#907aa94d",
"danger_foreground": "#faf4ed",
"danger_background": "#b4637a",
"danger_hover": "#a7586e",
"danger_active": "#9a4d62",
"danger_selected": "#8d4256",
"danger_disabled": "#b4637a4d",
"warning_foreground": "#575279",
"warning_background": "#ea9d34",
"warning_hover": "#d98e2f",
"warning_active": "#c87f2a",
"warning_selected": "#b77025",
"warning_disabled": "#ea9d344d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#f2e9e1",
"ghost_element_hover": "#5752791a",
"ghost_element_active": "#dfdad9",
"ghost_element_selected": "#dfdad9",
"ghost_element_disabled": "#5752790d",
"tab_inactive_background": "#fffaf3",
"tab_inactive_foreground": "#797593",
"tab_active_background": "#faf4ed",
"tab_active_foreground": "#575279",
"tab_hover_foreground": "#907aa9",
"scrollbar_thumb_background": "#57527933",
"scrollbar_thumb_hover_background": "#5752794d",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#dfdad9",
"drop_target_background": "#907aa91a",
"cursor": "#907aa9",
"selection": "#907aa940"
}
}

140
assets/themes/rose-pine-moon.json
View File

@@ -1,140 +0,0 @@
{
"id": "rose-pine-moon",
"name": "Rosé Pine Moon",
"author": "Rosé Pine",
"url": "https://rosepinetheme.com/",
"light": {
"background": "#232136",
"surface_background": "#2a273f",
"elevated_surface_background": "#393552",
"panel_background": "#232136",
"overlay": "#e0def41a",
"title_bar": "#2a273f",
"title_bar_inactive": "#393552",
"window_border": "#56526e",
"border": "#44415a",
"border_variant": "#393552",
"border_focused": "#c4a7e7",
"border_selected": "#c4a7e7",
"border_transparent": "#00000000",
"border_disabled": "#393552",
"ring": "#c4a7e7",
"text": "#e0def4",
"text_muted": "#908caa",
"text_placeholder": "#6e6a86",
"text_accent": "#c4a7e7",
"icon": "#908caa",
"icon_muted": "#6e6a86",
"icon_accent": "#c4a7e7",
"element_foreground": "#232136",
"element_background": "#c4a7e7",
"element_hover": "#c4a7e7e6",
"element_active": "#b296d6",
"element_selected": "#a085c5",
"element_disabled": "#c4a7e74d",
"secondary_foreground": "#a085c5",
"secondary_background": "#393552",
"secondary_hover": "#c4a7e71a",
"secondary_active": "#44415a",
"secondary_selected": "#44415a",
"secondary_disabled": "#c4a7e74d",
"danger_foreground": "#232136",
"danger_background": "#eb6f92",
"danger_hover": "#e55a82",
"danger_active": "#df4572",
"danger_selected": "#d93062",
"danger_disabled": "#eb6f924d",
"warning_foreground": "#232136",
"warning_background": "#f6c177",
"warning_hover": "#f4b35e",
"warning_active": "#f2a545",
"warning_selected": "#f0972c",
"warning_disabled": "#f6c1774d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#393552",
"ghost_element_hover": "#e0def41a",
"ghost_element_active": "#44415a",
"ghost_element_selected": "#44415a",
"ghost_element_disabled": "#e0def40d",
"tab_inactive_background": "#2a273f",
"tab_inactive_foreground": "#908caa",
"tab_active_background": "#232136",
"tab_active_foreground": "#e0def4",
"tab_hover_foreground": "#c4a7e7",
"scrollbar_thumb_background": "#e0def433",
"scrollbar_thumb_hover_background": "#e0def44d",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#44415a",
"drop_target_background": "#c4a7e71a",
"cursor": "#c4a7e7",
"selection": "#c4a7e740"
},
"dark": {
"background": "#232136",
"surface_background": "#2a273f",
"elevated_surface_background": "#393552",
"panel_background": "#232136",
"overlay": "#e0def41a",
"title_bar": "#2a273f",
"title_bar_inactive": "#393552",
"window_border": "#56526e",
"border": "#44415a",
"border_variant": "#393552",
"border_focused": "#c4a7e7",
"border_selected": "#c4a7e7",
"border_transparent": "#00000000",
"border_disabled": "#393552",
"ring": "#c4a7e7",
"text": "#e0def4",
"text_muted": "#908caa",
"text_placeholder": "#6e6a86",
"text_accent": "#c4a7e7",
"icon": "#908caa",
"icon_muted": "#6e6a86",
"icon_accent": "#c4a7e7",
"element_foreground": "#232136",
"element_background": "#c4a7e7",
"element_hover": "#c4a7e7e6",
"element_active": "#b296d6",
"element_selected": "#a085c5",
"element_disabled": "#c4a7e74d",
"secondary_foreground": "#a085c5",
"secondary_background": "#393552",
"secondary_hover": "#c4a7e71a",
"secondary_active": "#44415a",
"secondary_selected": "#44415a",
"secondary_disabled": "#c4a7e74d",
"danger_foreground": "#232136",
"danger_background": "#eb6f92",
"danger_hover": "#e55a82",
"danger_active": "#df4572",
"danger_selected": "#d93062",
"danger_disabled": "#eb6f924d",
"warning_foreground": "#232136",
"warning_background": "#f6c177",
"warning_hover": "#f4b35e",
"warning_active": "#f2a545",
"warning_selected": "#f0972c",
"warning_disabled": "#f6c1774d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#393552",
"ghost_element_hover": "#e0def41a",
"ghost_element_active": "#44415a",
"ghost_element_selected": "#44415a",
"ghost_element_disabled": "#e0def40d",
"tab_inactive_background": "#2a273f",
"tab_inactive_foreground": "#908caa",
"tab_active_background": "#232136",
"tab_active_foreground": "#e0def4",
"tab_hover_foreground": "#c4a7e7",
"scrollbar_thumb_background": "#e0def433",
"scrollbar_thumb_hover_background": "#e0def44d",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#44415a",
"drop_target_background": "#c4a7e71a",
"cursor": "#c4a7e7",
"selection": "#c4a7e740"
}
}

140
assets/themes/rose-pine.json
View File

@@ -1,140 +0,0 @@
{
"id": "rose-pine",
"name": "Rosé Pine",
"author": "Rosé Pine",
"url": "https://rosepinetheme.com/",
"light": {
"background": "#191724",
"surface_background": "#1f1d2e",
"elevated_surface_background": "#26233a",
"panel_background": "#191724",
"overlay": "#e0def41a",
"title_bar": "#1f1d2e",
"title_bar_inactive": "#26233a",
"window_border": "#524f67",
"border": "#403d52",
"border_variant": "#26233a",
"border_focused": "#c4a7e7",
"border_selected": "#c4a7e7",
"border_transparent": "#00000000",
"border_disabled": "#26233a",
"ring": "#c4a7e7",
"text": "#e0def4",
"text_muted": "#908caa",
"text_placeholder": "#6e6a86",
"text_accent": "#c4a7e7",
"icon": "#908caa",
"icon_muted": "#6e6a86",
"icon_accent": "#c4a7e7",
"element_foreground": "#191724",
"element_background": "#c4a7e7",
"element_hover": "#c4a7e7e6",
"element_active": "#b296d6",
"element_selected": "#a085c5",
"element_disabled": "#c4a7e74d",
"secondary_foreground": "#a085c5",
"secondary_background": "#26233a",
"secondary_hover": "#c4a7e71a",
"secondary_active": "#403d52",
"secondary_selected": "#403d52",
"secondary_disabled": "#c4a7e74d",
"danger_foreground": "#191724",
"danger_background": "#eb6f92",
"danger_hover": "#e55a82",
"danger_active": "#df4572",
"danger_selected": "#d93062",
"danger_disabled": "#eb6f924d",
"warning_foreground": "#191724",
"warning_background": "#f6c177",
"warning_hover": "#f4b35e",
"warning_active": "#f2a545",
"warning_selected": "#f0972c",
"warning_disabled": "#f6c1774d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#26233a",
"ghost_element_hover": "#e0def41a",
"ghost_element_active": "#403d52",
"ghost_element_selected": "#403d52",
"ghost_element_disabled": "#e0def40d",
"tab_inactive_background": "#1f1d2e",
"tab_inactive_foreground": "#908caa",
"tab_active_background": "#191724",
"tab_active_foreground": "#e0def4",
"tab_hover_foreground": "#c4a7e7",
"scrollbar_thumb_background": "#e0def433",
"scrollbar_thumb_hover_background": "#e0def44d",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#403d52",
"drop_target_background": "#c4a7e71a",
"cursor": "#c4a7e7",
"selection": "#c4a7e740"
},
"dark": {
"background": "#191724",
"surface_background": "#1f1d2e",
"elevated_surface_background": "#26233a",
"panel_background": "#191724",
"overlay": "#e0def41a",
"title_bar": "#1f1d2e",
"title_bar_inactive": "#26233a",
"window_border": "#524f67",
"border": "#403d52",
"border_variant": "#26233a",
"border_focused": "#c4a7e7",
"border_selected": "#c4a7e7",
"border_transparent": "#00000000",
"border_disabled": "#26233a",
"ring": "#c4a7e7",
"text": "#e0def4",
"text_muted": "#908caa",
"text_placeholder": "#6e6a86",
"text_accent": "#c4a7e7",
"icon": "#908caa",
"icon_muted": "#6e6a86",
"icon_accent": "#c4a7e7",
"element_foreground": "#191724",
"element_background": "#c4a7e7",
"element_hover": "#c4a7e7e6",
"element_active": "#b296d6",
"element_selected": "#a085c5",
"element_disabled": "#c4a7e74d",
"secondary_foreground": "#a085c5",
"secondary_background": "#26233a",
"secondary_hover": "#c4a7e71a",
"secondary_active": "#403d52",
"secondary_selected": "#403d52",
"secondary_disabled": "#c4a7e74d",
"danger_foreground": "#191724",
"danger_background": "#eb6f92",
"danger_hover": "#e55a82",
"danger_active": "#df4572",
"danger_selected": "#d93062",
"danger_disabled": "#eb6f924d",
"warning_foreground": "#191724",
"warning_background": "#f6c177",
"warning_hover": "#f4b35e",
"warning_active": "#f2a545",
"warning_selected": "#f0972c",
"warning_disabled": "#f6c1774d",
"ghost_element_background": "#00000000",
"ghost_element_background_alt": "#26233a",
"ghost_element_hover": "#e0def41a",
"ghost_element_active": "#403d52",
"ghost_element_selected": "#403d52",
"ghost_element_disabled": "#e0def40d",
"tab_inactive_background": "#1f1d2e",
"tab_inactive_foreground": "#908caa",
"tab_active_background": "#191724",
"tab_active_foreground": "#e0def4",
"tab_hover_foreground": "#c4a7e7",
"scrollbar_thumb_background": "#e0def433",
"scrollbar_thumb_hover_background": "#e0def44d",
"scrollbar_thumb_border": "#00000000",
"scrollbar_track_background": "#00000000",
"scrollbar_track_border": "#403d52",
"drop_target_background": "#c4a7e71a",
"cursor": "#c4a7e7",
"selection": "#c4a7e740"
}
}

60
crates/chat_ui/src/lib.rs
View File

@@ -1,6 +1,5 @@
use std::collections::{BTreeMap, BTreeSet, HashSet}; use std::collections::{BTreeMap, BTreeSet, HashSet};
use std::sync::Arc; use std::sync::Arc;
use std::time::Duration;
pub use actions::*; pub use actions::*;
use anyhow::{Context as AnyhowContext, Error}; use anyhow::{Context as AnyhowContext, Error};
@@ -24,7 +23,7 @@ use state::{NostrRegistry, upload};
use theme::ActiveTheme; use theme::ActiveTheme;
use ui::avatar::Avatar; use ui::avatar::Avatar;
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::dock_area::panel::{Panel, PanelEvent}; use ui::dock::{Panel, PanelEvent};
use ui::indicator::Indicator; use ui::indicator::Indicator;
use ui::input::{InputEvent, InputState, TextInput}; use ui::input::{InputEvent, InputState, TextInput};
use ui::menu::DropdownMenu; use ui::menu::DropdownMenu;
@@ -42,11 +41,6 @@ mod text;
const ANNOUNCEMENT: &str = const ANNOUNCEMENT: &str =
"This conversation is private. Only members can see each other's messages."; "This conversation is private. Only members can see each other's messages.";
const NO_INBOX: &str = "has not set up messaging relays. \
They will not receive messages you send.";
const NO_ANNOUNCEMENT: &str = "has not set up an encryption key. \
You cannot send messages encrypted with an encryption key to them yet. \
Coop automatically uses your identity to encrypt messages.";
pub fn init(room: WeakEntity<Room>, window: &mut Window, cx: &mut App) -> Entity<ChatPanel> { pub fn init(room: WeakEntity<Room>, window: &mut Window, cx: &mut App) -> Entity<ChatPanel> {
cx.new(|cx| ChatPanel::new(room, window, cx)) cx.new(|cx| ChatPanel::new(room, window, cx))
@@ -131,7 +125,7 @@ impl ChatPanel {
}); });
// Define subject input state // Define subject input state
let subject_input = cx.new(|cx| InputState::new(window, cx).placeholder("Nostr Meetup")); let subject_input = cx.new(|cx| InputState::new(window, cx).placeholder("New subject..."));
let subject_bar = cx.new(|_cx| false); let subject_bar = cx.new(|_cx| false);
// Define subscriptions // Define subscriptions
@@ -161,7 +155,6 @@ impl ChatPanel {
// Define all functions that will run after the current cycle // Define all functions that will run after the current cycle
cx.defer_in(window, |this, window, cx| { cx.defer_in(window, |this, window, cx| {
this.connect(window, cx);
this.handle_notifications(cx); this.handle_notifications(cx);
this.subscribe_room_events(window, cx); this.subscribe_room_events(window, cx);
this.get_messages(window, cx); this.get_messages(window, cx);
@@ -187,49 +180,6 @@ impl ChatPanel {
} }
} }
/// Get all necessary data for each member
fn connect(&mut self, window: &mut Window, cx: &mut Context<Self>) {
let Ok((members, connect)) = self
.room
.read_with(cx, |this, cx| (this.members(), this.connect(cx)))
else {
return;
};
// Run the connect task in background
self.tasks.push(connect);
// Spawn another task to verify after 3 seconds
self.tasks.push(cx.spawn_in(window, async move |this, cx| {
cx.background_executor().timer(Duration::from_secs(3)).await;
// Verify the connection
this.update_in(cx, |this, _window, cx| {
let persons = PersonRegistry::global(cx);
for member in members.into_iter() {
let profile = persons.read(cx).get(&member, cx);
if profile.announcement().is_none() {
let content = format!("{} {}", profile.name(), NO_ANNOUNCEMENT);
let message = Message::warning(content);
this.insert_message(message, true, cx);
}
if profile.messaging_relays().is_empty() {
let content = format!("{} {}", profile.name(), NO_INBOX);
let message = Message::warning(content);
this.insert_message(message, true, cx);
}
}
})?;
Ok(())
}));
}
/// Handle nostr notifications /// Handle nostr notifications
fn handle_notifications(&mut self, cx: &mut Context<Self>) { fn handle_notifications(&mut self, cx: &mut Context<Self>) {
let nostr = NostrRegistry::global(cx); let nostr = NostrRegistry::global(cx);
@@ -1047,11 +997,11 @@ impl ChatPanel {
fn render_message_reports(&self, id: &EventId, cx: &Context<Self>) -> impl IntoElement { fn render_message_reports(&self, id: &EventId, cx: &Context<Self>) -> impl IntoElement {
h_flex() h_flex()
.id(SharedString::from(id.to_hex())) .id(SharedString::from(id.to_hex()))
.gap_0p5() .gap_1()
.text_color(cx.theme().danger_active) .text_color(cx.theme().text_danger)
.text_xs() .text_xs()
.italic() .italic()
.child(Icon::new(IconName::Info).xsmall()) .child(Icon::new(IconName::Info).small())
.child(SharedString::from( .child(SharedString::from(
"Failed to send message. Click to see details.", "Failed to send message. Click to see details.",
)) ))

2
crates/coop/src/dialogs/accounts.rs
View File

@@ -162,7 +162,7 @@ impl Render for AccountSelector {
.italic() .italic()
.text_xs() .text_xs()
.text_center() .text_center()
.text_color(cx.theme().danger_active) .text_color(cx.theme().text_danger)
.child(error.clone()), .child(error.clone()),
) )
}) })

2
crates/coop/src/dialogs/connect.rs
View File

@@ -101,7 +101,7 @@ impl Render for ConnectSigner {
div() div()
.text_xs() .text_xs()
.text_center() .text_center()
.text_color(cx.theme().danger_active) .text_color(cx.theme().text_danger)
.child(error.clone()), .child(error.clone()),
) )
}) })

2
crates/coop/src/dialogs/import.rs
View File

@@ -293,7 +293,7 @@ impl Render for ImportKey {
div() div()
.text_xs() .text_xs()
.text_center() .text_center()
.text_color(cx.theme().danger_active) .text_color(cx.theme().text_danger)
.child(error.clone()), .child(error.clone()),
) )
}) })

8
crates/coop/src/panels/backup.rs
View File

@@ -2,16 +2,16 @@ use std::time::Duration;
use anyhow::Error; use anyhow::Error;
use gpui::{ use gpui::{
div, AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter, FocusHandle, AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter, FocusHandle,
Focusable, IntoElement, ParentElement, Render, SharedString, Styled, Task, Window, Focusable, IntoElement, ParentElement, Render, SharedString, Styled, Task, Window, div,
}; };
use nostr_sdk::prelude::*; use nostr_sdk::prelude::*;
use state::KEYRING; use state::KEYRING;
use theme::ActiveTheme; use theme::ActiveTheme;
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::dock_area::panel::{Panel, PanelEvent}; use ui::dock::{Panel, PanelEvent};
use ui::input::{InputState, TextInput}; use ui::input::{InputState, TextInput};
use ui::{divider, v_flex, IconName, Sizable, StyledExt}; use ui::{IconName, Sizable, StyledExt, divider, v_flex};
const MSG: &str = "Store your account keys in a safe location. \ const MSG: &str = "Store your account keys in a safe location. \
You can restore your account or move to another client anytime you want."; You can restore your account or move to another client anytime you want.";

4
crates/coop/src/panels/contact_list.rs
View File

@@ -15,7 +15,7 @@ use state::NostrRegistry;
use theme::ActiveTheme; use theme::ActiveTheme;
use ui::avatar::Avatar; use ui::avatar::Avatar;
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::dock_area::panel::{Panel, PanelEvent}; use ui::dock::{Panel, PanelEvent};
use ui::input::{InputEvent, InputState, TextInput}; use ui::input::{InputEvent, InputState, TextInput};
use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, h_flex, v_flex}; use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, h_flex, v_flex};
@@ -322,7 +322,7 @@ impl Render for ContactListPanel {
div() div()
.italic() .italic()
.text_xs() .text_xs()
.text_color(cx.theme().danger_active) .text_color(cx.theme().text_danger)
.child(error.clone()), .child(error.clone()),
) )
}), }),

3
crates/coop/src/panels/greeter.rs
View File

@@ -5,8 +5,7 @@ use gpui::{
use state::NostrRegistry; use state::NostrRegistry;
use theme::ActiveTheme; use theme::ActiveTheme;
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::dock_area::dock::DockPlacement; use ui::dock::{DockPlacement, Panel, PanelEvent};
use ui::dock_area::panel::{Panel, PanelEvent};
use ui::{Icon, IconName, Sizable, StyledExt, h_flex, v_flex}; use ui::{Icon, IconName, Sizable, StyledExt, h_flex, v_flex};
use crate::panels::profile; use crate::panels::profile;

4
crates/coop/src/panels/messaging_relays.rs
View File

@@ -13,7 +13,7 @@ use smallvec::{SmallVec, smallvec};
use state::NostrRegistry; use state::NostrRegistry;
use theme::ActiveTheme; use theme::ActiveTheme;
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::dock_area::panel::{Panel, PanelEvent}; use ui::dock::{Panel, PanelEvent};
use ui::input::{InputEvent, InputState, TextInput}; use ui::input::{InputEvent, InputState, TextInput};
use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, divider, h_flex, v_flex}; use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, divider, h_flex, v_flex};
@@ -338,7 +338,7 @@ impl Render for MessagingRelayPanel {
div() div()
.italic() .italic()
.text_xs() .text_xs()
.text_color(cx.theme().danger_active) .text_color(cx.theme().text_danger)
.child(error.clone()), .child(error.clone()),
) )
}), }),

2
crates/coop/src/panels/profile.rs
View File

@@ -14,7 +14,7 @@ use state::{NostrRegistry, upload};
use theme::ActiveTheme; use theme::ActiveTheme;
use ui::avatar::Avatar; use ui::avatar::Avatar;
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::dock_area::panel::{Panel, PanelEvent}; use ui::dock::{Panel, PanelEvent};
use ui::input::{InputState, TextInput}; use ui::input::{InputState, TextInput};
use ui::notification::Notification; use ui::notification::Notification;
use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, h_flex, v_flex}; use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, h_flex, v_flex};

16
crates/coop/src/panels/relay_list.rs
View File

@@ -1,23 +1,23 @@
use std::collections::HashSet; use std::collections::HashSet;
use std::time::Duration; use std::time::Duration;
use anyhow::{anyhow, Context as AnyhowContext, Error}; use anyhow::{Context as AnyhowContext, Error, anyhow};
use gpui::prelude::FluentBuilder; use gpui::prelude::FluentBuilder;
use gpui::{ use gpui::{
div, px, rems, Action, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Action, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
Focusable, InteractiveElement, IntoElement, ParentElement, Render, SharedString, Styled, InteractiveElement, IntoElement, ParentElement, Render, SharedString, Styled, Subscription,
Subscription, Task, TextAlign, Window, Task, TextAlign, Window, div, px, rems,
}; };
use nostr_sdk::prelude::*; use nostr_sdk::prelude::*;
use serde::Deserialize; use serde::Deserialize;
use smallvec::{smallvec, SmallVec}; use smallvec::{SmallVec, smallvec};
use state::NostrRegistry; use state::NostrRegistry;
use theme::ActiveTheme; use theme::ActiveTheme;
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::dock_area::panel::{Panel, PanelEvent}; use ui::dock::{Panel, PanelEvent};
use ui::input::{InputEvent, InputState, TextInput}; use ui::input::{InputEvent, InputState, TextInput};
use ui::menu::DropdownMenu; use ui::menu::DropdownMenu;
use ui::{divider, h_flex, v_flex, Disableable, IconName, Sizable, StyledExt, WindowExtension}; use ui::{Disableable, IconName, Sizable, StyledExt, WindowExtension, divider, h_flex, v_flex};
const MSG: &str = "Relay List (or Gossip Relays) are a set of relays \ const MSG: &str = "Relay List (or Gossip Relays) are a set of relays \
where you will publish all your events. Others also publish events \ where you will publish all your events. Others also publish events \
@@ -408,7 +408,7 @@ impl Render for RelayListPanel {
div() div()
.italic() .italic()
.text_xs() .text_xs()
.text_color(cx.theme().danger_active) .text_color(cx.theme().text_danger)
.child(error.clone()), .child(error.clone()),
) )
}), }),

8
crates/coop/src/sidebar/entry.rs
View File

@@ -3,16 +3,16 @@ use std::rc::Rc;
use chat::RoomKind; use chat::RoomKind;
use gpui::prelude::FluentBuilder; use gpui::prelude::FluentBuilder;
use gpui::{ use gpui::{
div, App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce, App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce, SharedString,
SharedString, StatefulInteractiveElement, Styled, Window, StatefulInteractiveElement, Styled, Window, div,
}; };
use nostr_sdk::prelude::*; use nostr_sdk::prelude::*;
use settings::AppSettings; use settings::AppSettings;
use theme::ActiveTheme; use theme::ActiveTheme;
use ui::avatar::Avatar; use ui::avatar::Avatar;
use ui::dock_area::ClosePanel; use ui::dock::ClosePanel;
use ui::modal::ModalButtonProps; use ui::modal::ModalButtonProps;
use ui::{h_flex, Icon, IconName, Selectable, Sizable, StyledExt, WindowExtension}; use ui::{Icon, IconName, Selectable, Sizable, StyledExt, WindowExtension, h_flex};
use crate::dialogs::screening; use crate::dialogs::screening;

4
crates/coop/src/sidebar/mod.rs
View File

@@ -18,7 +18,7 @@ use smallvec::{SmallVec, smallvec};
use state::{FIND_DELAY, NostrRegistry}; use state::{FIND_DELAY, NostrRegistry};
use theme::{ActiveTheme, SIDEBAR_WIDTH, TABBAR_HEIGHT}; use theme::{ActiveTheme, SIDEBAR_WIDTH, TABBAR_HEIGHT};
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::dock_area::panel::{Panel, PanelEvent}; use ui::dock::{Panel, PanelEvent};
use ui::indicator::Indicator; use ui::indicator::Indicator;
use ui::input::{InputEvent, InputState, TextInput}; use ui::input::{InputEvent, InputState, TextInput};
use ui::notification::Notification; use ui::notification::Notification;
@@ -503,7 +503,7 @@ impl Render for Sidebar {
.h(TABBAR_HEIGHT) .h(TABBAR_HEIGHT)
.border_b_1() .border_b_1()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.bg(cx.theme().elevated_surface_background) .bg(cx.theme().tab_background)
.child( .child(
TextInput::new(&self.find_input) TextInput::new(&self.find_input)
.appearance(false) .appearance(false)

8
crates/coop/src/workspace.rs
View File

@@ -18,9 +18,7 @@ use theme::{ActiveTheme, SIDEBAR_WIDTH, Theme, ThemeRegistry};
use title_bar::TitleBar; use title_bar::TitleBar;
use ui::avatar::Avatar; use ui::avatar::Avatar;
use ui::button::{Button, ButtonVariants}; use ui::button::{Button, ButtonVariants};
use ui::dock_area::dock::DockPlacement; use ui::dock::{ClosePanel, DockArea, DockItem, DockPlacement, PanelView};
use ui::dock_area::panel::PanelView;
use ui::dock_area::{ClosePanel, DockArea, DockItem};
use ui::menu::{DropdownMenu, PopupMenuItem}; use ui::menu::{DropdownMenu, PopupMenuItem};
use ui::notification::{Notification, NotificationKind}; use ui::notification::{Notification, NotificationKind};
use ui::{Disableable, IconName, Root, Sizable, WindowExtension, h_flex, v_flex}; use ui::{Disableable, IconName, Root, Sizable, WindowExtension, h_flex, v_flex};
@@ -277,8 +275,8 @@ impl Workspace {
/// Set the center dock layout /// Set the center dock layout
fn set_center_layout(&mut self, window: &mut Window, cx: &mut Context<Self>) { fn set_center_layout(&mut self, window: &mut Window, cx: &mut Context<Self>) {
let dock = self.dock.downgrade(); let dock = self.dock.downgrade();
let greeeter = Arc::new(greeter::init(window, cx)); let greeter = Arc::new(greeter::init(window, cx));
let tabs = DockItem::tabs(vec![greeeter], None, &dock, window, cx); let tabs = DockItem::tabs(vec![greeter], None, &dock, window, cx);
let center = DockItem::split(Axis::Vertical, vec![tabs], &dock, window, cx); let center = DockItem::split(Axis::Vertical, vec![tabs], &dock, window, cx);
// Update the layout with center dock // Update the layout with center dock

44
crates/theme/src/colors.rs
View File

@@ -1,4 +1,4 @@
use gpui::{hsla, Hsla, Rgba}; use gpui::{Hsla, Rgba, hsla};
use schemars::JsonSchema; use schemars::JsonSchema;
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
@@ -30,6 +30,8 @@ pub struct ThemeColors {
pub text_muted: Hsla, pub text_muted: Hsla,
pub text_placeholder: Hsla, pub text_placeholder: Hsla,
pub text_accent: Hsla, pub text_accent: Hsla,
pub text_danger: Hsla,
pub text_warning: Hsla,
// Icon colors // Icon colors
pub icon: Hsla, pub icon: Hsla,
@@ -77,11 +79,11 @@ pub struct ThemeColors {
pub ghost_element_disabled: Hsla, pub ghost_element_disabled: Hsla,
// Tab colors // Tab colors
pub tab_inactive_background: Hsla, pub tab_background: Hsla,
pub tab_inactive_foreground: Hsla, pub tab_foreground: Hsla,
pub tab_hover_background: Hsla,
pub tab_active_background: Hsla, pub tab_active_background: Hsla,
pub tab_active_foreground: Hsla, pub tab_active_foreground: Hsla,
pub tab_hover_foreground: Hsla,
// Scrollbar colors // Scrollbar colors
pub scrollbar_thumb_background: Hsla, pub scrollbar_thumb_background: Hsla,
@@ -110,8 +112,8 @@ impl ThemeColors {
elevated_surface_background: neutral().light().step_3(), elevated_surface_background: neutral().light().step_3(),
panel_background: neutral().light().step_1(), panel_background: neutral().light().step_1(),
overlay: neutral().light_alpha().step_3(), overlay: neutral().light_alpha().step_3(),
title_bar: neutral().light().step_2(), title_bar: neutral().light().step_3(),
title_bar_inactive: neutral().light().step_3(), title_bar_inactive: neutral().light().step_1(),
window_border: hsl(240.0, 5.9, 78.0), window_border: hsl(240.0, 5.9, 78.0),
border: neutral().light().step_6(), border: neutral().light().step_6(),
@@ -125,7 +127,9 @@ impl ThemeColors {
text: neutral().light().step_12(), text: neutral().light().step_12(),
text_muted: neutral().light().step_11(), text_muted: neutral().light().step_11(),
text_placeholder: neutral().light().step_10(), text_placeholder: neutral().light().step_10(),
text_accent: brand().light().step_11(), text_accent: brand().light().step_9(),
text_danger: danger().light().step_9(),
text_warning: warning().light().step_9(),
icon: neutral().light().step_11(), icon: neutral().light().step_11(),
icon_muted: neutral().light().step_10(), icon_muted: neutral().light().step_10(),
@@ -166,17 +170,17 @@ impl ThemeColors {
ghost_element_selected: neutral().light().step_5(), ghost_element_selected: neutral().light().step_5(),
ghost_element_disabled: neutral().light_alpha().step_2(), ghost_element_disabled: neutral().light_alpha().step_2(),
tab_inactive_background: neutral().light().step_2(), tab_background: neutral().light().step_3(),
tab_inactive_foreground: neutral().light().step_11(), tab_foreground: neutral().light().step_11(),
tab_hover_background: neutral().light_alpha().step_4(),
tab_active_background: neutral().light().step_1(), tab_active_background: neutral().light().step_1(),
tab_active_foreground: neutral().light().step_12(), tab_active_foreground: neutral().light().step_12(),
tab_hover_foreground: brand().light().step_9(),
scrollbar_thumb_background: neutral().light_alpha().step_3(), scrollbar_thumb_background: neutral().light_alpha().step_3(),
scrollbar_thumb_hover_background: neutral().light_alpha().step_4(), scrollbar_thumb_hover_background: neutral().light_alpha().step_4(),
scrollbar_thumb_border: gpui::transparent_black(), scrollbar_thumb_border: gpui::transparent_black(),
scrollbar_track_background: gpui::transparent_black(), scrollbar_track_background: gpui::transparent_black(),
scrollbar_track_border: neutral().light().step_5(), scrollbar_track_border: gpui::transparent_black(),
drop_target_background: brand().light_alpha().step_2(), drop_target_background: brand().light_alpha().step_2(),
cursor: hsl(200., 100., 50.), cursor: hsl(200., 100., 50.),
@@ -192,9 +196,9 @@ impl ThemeColors {
background: neutral().dark().step_1(), background: neutral().dark().step_1(),
surface_background: neutral().dark().step_2(), surface_background: neutral().dark().step_2(),
elevated_surface_background: neutral().dark().step_3(), elevated_surface_background: neutral().dark().step_3(),
panel_background: gpui::black(), panel_background: neutral().dark().step_1(),
overlay: neutral().dark_alpha().step_3(), overlay: neutral().dark_alpha().step_3(),
title_bar: gpui::transparent_black(), title_bar: neutral().dark().step_3(),
title_bar_inactive: neutral().dark().step_1(), title_bar_inactive: neutral().dark().step_1(),
window_border: hsl(240.0, 3.7, 28.0), window_border: hsl(240.0, 3.7, 28.0),
@@ -209,7 +213,9 @@ impl ThemeColors {
text: neutral().dark().step_12(), text: neutral().dark().step_12(),
text_muted: neutral().dark().step_11(), text_muted: neutral().dark().step_11(),
text_placeholder: neutral().dark().step_10(), text_placeholder: neutral().dark().step_10(),
text_accent: brand().dark().step_11(), text_accent: brand().dark().step_9(),
text_danger: danger().dark().step_9(),
text_warning: warning().dark().step_9(),
icon: neutral().dark().step_11(), icon: neutral().dark().step_11(),
icon_muted: neutral().dark().step_10(), icon_muted: neutral().dark().step_10(),
@@ -250,17 +256,17 @@ impl ThemeColors {
ghost_element_selected: neutral().dark().step_5(), ghost_element_selected: neutral().dark().step_5(),
ghost_element_disabled: neutral().dark_alpha().step_2(), ghost_element_disabled: neutral().dark_alpha().step_2(),
tab_inactive_background: neutral().dark().step_2(), tab_background: neutral().dark().step_3(),
tab_inactive_foreground: neutral().dark().step_11(), tab_foreground: neutral().dark().step_11(),
tab_active_background: neutral().dark().step_3(), tab_hover_background: neutral().dark_alpha().step_4(),
tab_active_background: neutral().dark().step_1(),
tab_active_foreground: neutral().dark().step_12(), tab_active_foreground: neutral().dark().step_12(),
tab_hover_foreground: brand().dark().step_9(),
scrollbar_thumb_background: neutral().dark_alpha().step_3(), scrollbar_thumb_background: neutral().dark_alpha().step_3(),
scrollbar_thumb_hover_background: neutral().dark_alpha().step_4(), scrollbar_thumb_hover_background: neutral().dark_alpha().step_4(),
scrollbar_thumb_border: gpui::transparent_black(), scrollbar_thumb_border: gpui::transparent_black(),
scrollbar_track_background: gpui::transparent_black(), scrollbar_track_background: gpui::transparent_black(),
scrollbar_track_border: neutral().dark().step_5(), scrollbar_track_border: gpui::transparent_black(),
drop_target_background: brand().dark_alpha().step_2(), drop_target_background: brand().dark_alpha().step_2(),
cursor: hsl(200., 100., 50.), cursor: hsl(200., 100., 50.),

2
crates/theme/src/lib.rs
View File

@@ -207,7 +207,7 @@ impl From<ThemeFamily> for Theme {
Theme { Theme {
font_size: px(15.), font_size: px(15.),
font_family: font_family.into(), font_family: font_family.into(),
radius: px(5.), radius: px(6.),
radius_lg: px(10.), radius_lg: px(10.),
shadow: true, shadow: true,
scrollbar_mode: ScrollbarMode::default(), scrollbar_mode: ScrollbarMode::default(),

24
crates/ui/src/dock_area/dock.rs → crates/ui/src/dock/dock.rs
View File

@@ -3,20 +3,26 @@ use std::sync::Arc;
use gpui::prelude::FluentBuilder as _; use gpui::prelude::FluentBuilder as _;
use gpui::{ use gpui::{
div, px, App, AppContext, Axis, Context, Element, Entity, IntoElement, MouseMoveEvent, App, AppContext, Axis, Context, Element, Empty, Entity, IntoElement, MouseMoveEvent,
MouseUpEvent, ParentElement as _, Pixels, Point, Render, Style, Styled as _, WeakEntity, MouseUpEvent, ParentElement as _, Pixels, Point, Render, Style, StyleRefinement, Styled as _,
Window, WeakEntity, Window, div, px,
}; };
use super::{DockArea, DockItem}; use super::{DockArea, DockItem};
use crate::dock_area::panel::PanelView;
use crate::dock_area::tab_panel::TabPanel;
use crate::resizable::{resize_handle, PANEL_MIN_SIZE};
use crate::StyledExt; use crate::StyledExt;
use crate::dock::panel::PanelView;
use crate::dock::tab_panel::TabPanel;
use crate::resizable::{PANEL_MIN_SIZE, resize_handle};
#[derive(Clone, Render)] #[derive(Clone)]
struct ResizePanel; struct ResizePanel;
impl Render for ResizePanel {
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
Empty
}
}
#[derive(Debug, Clone, Copy, PartialEq, Eq)] #[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum DockPlacement { pub enum DockPlacement {
Center, Center,
@@ -321,6 +327,8 @@ impl Render for Dock {
return div(); return div();
} }
let cache_style = StyleRefinement::default().absolute().size_full();
div() div()
.relative() .relative()
.overflow_hidden() .overflow_hidden()
@@ -336,7 +344,7 @@ impl Render for Dock {
.map(|this| match &self.panel { .map(|this| match &self.panel {
DockItem::Split { view, .. } => this.child(view.clone()), DockItem::Split { view, .. } => this.child(view.clone()),
DockItem::Tabs { view, .. } => this.child(view.clone()), DockItem::Tabs { view, .. } => this.child(view.clone()),
DockItem::Panel { view, .. } => this.child(view.clone().view()), DockItem::Panel { view, .. } => this.child(view.clone().view().cached(cache_style)),
}) })
.child(self.render_resize_handle(window, cx)) .child(self.render_resize_handle(window, cx))
.child(DockElement { .child(DockElement {

24
crates/ui/src/dock_area/mod.rs → crates/ui/src/dock/mod.rs
View File

@@ -2,22 +2,24 @@ use std::sync::Arc;
use gpui::prelude::FluentBuilder; use gpui::prelude::FluentBuilder;
use gpui::{ use gpui::{
actions, div, px, AnyElement, AnyView, App, AppContext, Axis, Bounds, Context, Decorations, AnyElement, AnyView, App, AppContext, Axis, Bounds, Context, Decorations, Edges, Entity,
Edges, Entity, EntityId, EventEmitter, Focusable, InteractiveElement as _, IntoElement, EntityId, EventEmitter, Focusable, InteractiveElement as _, IntoElement, ParentElement as _,
ParentElement as _, Pixels, Render, SharedString, Styled, Subscription, WeakEntity, Window, Pixels, Render, SharedString, Styled, Subscription, WeakEntity, Window, actions, div, px,
}; };
use theme::CLIENT_SIDE_DECORATION_ROUNDING; use theme::CLIENT_SIDE_DECORATION_ROUNDING;
use crate::dock_area::dock::{Dock, DockPlacement};
use crate::dock_area::panel::{Panel, PanelEvent, PanelStyle, PanelView};
use crate::dock_area::stack_panel::StackPanel;
use crate::dock_area::tab_panel::TabPanel;
use crate::ElementExt; use crate::ElementExt;
pub mod dock; #[allow(clippy::module_inception)]
pub mod panel; mod dock;
pub mod stack_panel; mod panel;
pub mod tab_panel; mod stack_panel;
mod tab_panel;
pub use dock::*;
pub use panel::*;
pub use stack_panel::*;
pub use tab_panel::*;
actions!(dock, [ToggleZoom, ClosePanel]); actions!(dock, [ToggleZoom, ClosePanel]);

8
crates/ui/src/dock_area/panel.rs → crates/ui/src/dock/panel.rs
View File

@@ -1,5 +1,5 @@
use gpui::{ use gpui::{
AnyElement, AnyView, App, Element, Entity, EventEmitter, FocusHandle, Focusable, Hsla, Render, AnyElement, AnyView, App, Element, Entity, EventEmitter, FocusHandle, Focusable, Render,
SharedString, Window, SharedString, Window,
}; };
@@ -21,12 +21,6 @@ pub enum PanelStyle {
TabBar, TabBar,
} }
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub struct TitleStyle {
pub background: Hsla,
pub foreground: Hsla,
}
pub trait Panel: EventEmitter<PanelEvent> + Render + Focusable { pub trait Panel: EventEmitter<PanelEvent> + Render + Focusable {
/// The name of the panel used to serialize, deserialize and identify the panel. /// The name of the panel used to serialize, deserialize and identify the panel.
/// ///

4
crates/ui/src/dock_area/stack_panel.rs → crates/ui/src/dock/stack_panel.rs
View File

@@ -10,8 +10,8 @@ use smallvec::SmallVec;
use theme::{ActiveTheme, AxisExt as _, CLIENT_SIDE_DECORATION_ROUNDING, Placement}; use theme::{ActiveTheme, AxisExt as _, CLIENT_SIDE_DECORATION_ROUNDING, Placement};
use super::{DockArea, PanelEvent}; use super::{DockArea, PanelEvent};
use crate::dock_area::panel::{Panel, PanelView}; use crate::dock::panel::{Panel, PanelView};
use crate::dock_area::tab_panel::TabPanel; use crate::dock::tab_panel::TabPanel;
use crate::h_flex; use crate::h_flex;
use crate::resizable::{ use crate::resizable::{
PANEL_MIN_SIZE, ResizablePanelEvent, ResizablePanelGroup, ResizablePanelState, ResizableState, PANEL_MIN_SIZE, ResizablePanelEvent, ResizablePanelGroup, ResizablePanelState, ResizableState,

82
crates/ui/src/dock_area/tab_panel.rs → crates/ui/src/dock/tab_panel.rs
View File

@@ -10,10 +10,10 @@ use gpui::{
use theme::{ActiveTheme, AxisExt, CLIENT_SIDE_DECORATION_ROUNDING, Placement, TABBAR_HEIGHT}; use theme::{ActiveTheme, AxisExt, CLIENT_SIDE_DECORATION_ROUNDING, Placement, TABBAR_HEIGHT};
use crate::button::{Button, ButtonVariants as _}; use crate::button::{Button, ButtonVariants as _};
use crate::dock_area::dock::DockPlacement; use crate::dock::dock::DockPlacement;
use crate::dock_area::panel::{Panel, PanelView}; use crate::dock::panel::{Panel, PanelView};
use crate::dock_area::stack_panel::StackPanel; use crate::dock::stack_panel::StackPanel;
use crate::dock_area::{ClosePanel, DockArea, PanelEvent, PanelStyle, ToggleZoom}; use crate::dock::{ClosePanel, DockArea, PanelEvent, PanelStyle, ToggleZoom};
use crate::menu::{DropdownMenu, PopupMenu}; use crate::menu::{DropdownMenu, PopupMenu};
use crate::tab::Tab; use crate::tab::Tab;
use crate::tab::tab_bar::TabBar; use crate::tab::tab_bar::TabBar;
@@ -42,22 +42,20 @@ impl DragPanel {
impl Render for DragPanel { impl Render for DragPanel {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement { fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
div() h_flex()
.id("drag-panel") .id("drag-panel")
.cursor_grab() .cursor_grab()
.py_1() .p_2()
.px_2() .min_w_24()
.w_24()
.flex()
.items_center()
.justify_center() .justify_center()
.overflow_hidden() .overflow_hidden()
.whitespace_nowrap() .whitespace_nowrap()
.rounded(cx.theme().radius_lg) .rounded(cx.theme().radius)
.text_xs() .text_xs()
.when(cx.theme().shadow, |this| this.shadow_lg()) .text_color(cx.theme().text)
.text_ellipsis()
.when(cx.theme().shadow, |this| this.shadow_xs())
.bg(cx.theme().background) .bg(cx.theme().background)
.text_color(cx.theme().text_accent)
.child(self.panel.title(cx)) .child(self.panel.title(cx))
} }
} }
@@ -425,14 +423,13 @@ impl TabPanel {
let view = cx.entity().clone(); let view = cx.entity().clone();
let build_popup_menu = move |this, cx: &App| view.read(cx).popup_menu(this, cx); let build_popup_menu = move |this, cx: &App| view.read(cx).popup_menu(this, cx);
let toolbar = self.toolbar_buttons(window, cx); let toolbar = self.toolbar_buttons(window, cx);
let has_toolbar = !toolbar.is_empty();
h_flex() h_flex()
.p_0p5() .p_0p5()
.gap_1() .gap_1p5()
.occlude() .occlude()
.rounded_full() .rounded_full()
.children(toolbar.into_iter().map(|btn| btn.small().ghost().rounded())) .children(toolbar.into_iter().map(|btn| btn.small().ghost()))
.when(self.zoomed, |this| { .when(self.zoomed, |this| {
this.child( this.child(
Button::new("zoom") Button::new("zoom")
@@ -445,15 +442,11 @@ impl TabPanel {
})), })),
) )
}) })
.when(has_toolbar, |this| {
this.child(div().flex_shrink_0().h_4().w_px().bg(cx.theme().border))
})
.child( .child(
Button::new("menu") Button::new("menu")
.icon(IconName::Ellipsis) .icon(IconName::Ellipsis)
.small() .small()
.ghost() .ghost()
.rounded()
.dropdown_menu({ .dropdown_menu({
let zoomable = state.zoomable; let zoomable = state.zoomable;
let closable = state.closable; let closable = state.closable;
@@ -578,6 +571,7 @@ impl TabPanel {
let right_dock_button = self.render_dock_toggle_button(DockPlacement::Right, window, cx); let right_dock_button = self.render_dock_toggle_button(DockPlacement::Right, window, cx);
let has_extend_dock_button = left_dock_button.is_some() || bottom_dock_button.is_some(); let has_extend_dock_button = left_dock_button.is_some() || bottom_dock_button.is_some();
let tabs_count = self.panels.len(); let tabs_count = self.panels.len();
let is_bottom_dock = bottom_dock_button.is_some();
if tabs_count == 1 && dock_area.read(cx).panel_style == PanelStyle::Default { if tabs_count == 1 && dock_area.read(cx).panel_style == PanelStyle::Default {
let panel = self.panels.first().unwrap(); let panel = self.panels.first().unwrap();
@@ -646,7 +640,7 @@ impl TabPanel {
.into_any_element(); .into_any_element();
} }
TabBar::new() TabBar::new("tab-bar")
.track_scroll(&self.tab_bar_scroll_handle) .track_scroll(&self.tab_bar_scroll_handle)
.h(TABBAR_HEIGHT) .h(TABBAR_HEIGHT)
.when(has_extend_dock_button, |this| { .when(has_extend_dock_button, |this| {
@@ -659,8 +653,9 @@ impl TabPanel {
.border_b_1() .border_b_1()
.h_full() .h_full()
.border_color(cx.theme().border) .border_color(cx.theme().border)
.bg(cx.theme().surface_background) .bg(cx.theme().tab_background)
.px_2() .pl_0p5()
.pr_1()
.children(left_dock_button) .children(left_dock_button)
.children(bottom_dock_button), .children(bottom_dock_button),
) )
@@ -682,16 +677,43 @@ impl TabPanel {
Some( Some(
Tab::new() Tab::new()
.ix(ix) .ix(ix)
.label(panel.title(cx)) .tab_bar_prefix(has_extend_dock_button)
.py_2() .child(panel.title(cx))
.selected(active) .selected(active)
.disabled(disabled) .disabled(disabled)
.suffix(
Button::new("close-{ix}")
.icon(IconName::Close)
.tooltip("Close panel")
.ghost()
.xsmall()
.on_click(cx.listener({
let panel = panel.clone();
move |view, _ev, window, cx| {
view.remove_panel(&panel, window, cx);
}
})),
)
.on_click(cx.listener({
let is_collapsed = self.collapsed;
let dock_area = self.dock_area.clone();
move |view, _, window, cx| {
view.set_active_ix(ix, window, cx);
// Open dock if clicked on the collapsed bottom dock
if is_bottom_dock && is_collapsed {
_ = dock_area.update(cx, |dock_area, cx| {
dock_area.toggle_dock(DockPlacement::Bottom, window, cx);
});
}
}
}))
.when(!disabled, |this| { .when(!disabled, |this| {
this.on_mouse_down( this.on_mouse_down(
MouseButton::Middle, MouseButton::Middle,
cx.listener({ cx.listener({
let panel = panel.clone(); let panel = panel.clone();
move |view, _, window, cx| { move |view, _ev, window, cx| {
view.remove_panel(&panel, window, cx); view.remove_panel(&panel, window, cx);
} }
}), }),
@@ -757,14 +779,15 @@ impl TabPanel {
this.suffix( this.suffix(
h_flex() h_flex()
.items_center() .items_center()
.px_2()
.gap_1()
.top_0() .top_0()
.right_0() .right_0()
.h_full() .h_full()
.border_color(cx.theme().border)
.border_l_1() .border_l_1()
.border_b_1() .border_b_1()
.px_0p5()
.gap_1()
.border_color(cx.theme().border)
.bg(cx.theme().tab_background)
.child(self.render_toolbar(state, window, cx)) .child(self.render_toolbar(state, window, cx))
.when_some(right_dock_button, |this, btn| this.child(btn)), .when_some(right_dock_button, |this, btn| this.child(btn)),
) )
@@ -1099,6 +1122,7 @@ impl Focusable for TabPanel {
} }
impl EventEmitter<DismissEvent> for TabPanel {} impl EventEmitter<DismissEvent> for TabPanel {}
impl EventEmitter<PanelEvent> for TabPanel {} impl EventEmitter<PanelEvent> for TabPanel {}
impl Render for TabPanel { impl Render for TabPanel {

2
crates/ui/src/lib.rs
View File

@@ -17,7 +17,7 @@ pub mod avatar;
pub mod button; pub mod button;
pub mod checkbox; pub mod checkbox;
pub mod divider; pub mod divider;
pub mod dock_area; pub mod dock;
pub mod group_box; pub mod group_box;
pub mod history; pub mod history;
pub mod indicator; pub mod indicator;

10
crates/ui/src/notification.rs
View File

@@ -29,10 +29,8 @@ impl NotificationKind {
fn icon(&self, cx: &App) -> Icon { fn icon(&self, cx: &App) -> Icon {
match self { match self {
Self::Info => Icon::new(IconName::Info).text_color(cx.theme().icon), Self::Info => Icon::new(IconName::Info).text_color(cx.theme().icon),
Self::Warning => Icon::new(IconName::Warning).text_color(cx.theme().warning_foreground), Self::Success => Icon::new(IconName::CheckCircle).text_color(cx.theme().icon_accent),
Self::Success => { Self::Warning => Icon::new(IconName::Warning).text_color(cx.theme().text_warning),
Icon::new(IconName::CheckCircle).text_color(cx.theme().secondary_foreground)
}
Self::Error => { Self::Error => {
Icon::new(IconName::CloseCircle).text_color(cx.theme().danger_foreground) Icon::new(IconName::CloseCircle).text_color(cx.theme().danger_foreground)
} }
@@ -352,8 +350,8 @@ impl Render for Notification {
.child( .child(
div() div()
.absolute() .absolute()
.top_2() .top(px(6.5))
.right_2() .right(px(6.5))
.invisible() .invisible()
.group_hover("", |this| this.visible()) .group_hover("", |this| this.visible())
.child( .child(

2
crates/ui/src/resizable/resize_handle.rs
View File

@@ -9,7 +9,7 @@ use gpui::{
}; };
use theme::{ActiveTheme, AxisExt}; use theme::{ActiveTheme, AxisExt};
use crate::dock_area::dock::DockPlacement; use crate::dock::DockPlacement;
pub(crate) const HANDLE_PADDING: Pixels = px(4.); pub(crate) const HANDLE_PADDING: Pixels = px(4.);
pub(crate) const HANDLE_SIZE: Pixels = px(1.); pub(crate) const HANDLE_SIZE: Pixels = px(1.);

26
crates/ui/src/styled.rs
View File

@@ -1,4 +1,4 @@
use gpui::{div, px, App, Div, Pixels, Refineable, StyleRefinement, Styled}; use gpui::{App, DefiniteLength, Div, Edges, Pixels, Refineable, StyleRefinement, Styled, div, px};
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
use theme::ActiveTheme; use theme::ActiveTheme;
@@ -46,6 +46,30 @@ pub trait StyledExt: Styled + Sized {
self.flex().flex_col() self.flex().flex_col()
} }
/// Apply paddings to the element.
fn paddings<L>(self, paddings: impl Into<Edges<L>>) -> Self
where
L: Into<DefiniteLength> + Clone + Default + std::fmt::Debug + PartialEq,
{
let paddings = paddings.into();
self.pt(paddings.top.into())
.pb(paddings.bottom.into())
.pl(paddings.left.into())
.pr(paddings.right.into())
}
/// Apply margins to the element.
fn margins<L>(self, margins: impl Into<Edges<L>>) -> Self
where
L: Into<DefiniteLength> + Clone + Default + std::fmt::Debug + PartialEq,
{
let margins = margins.into();
self.mt(margins.top.into())
.mb(margins.bottom.into())
.ml(margins.left.into())
.mr(margins.right.into())
}
font_weight!(font_thin, THIN); font_weight!(font_thin, THIN);
font_weight!(font_extralight, EXTRA_LIGHT); font_weight!(font_extralight, EXTRA_LIGHT);
font_weight!(font_light, LIGHT); font_weight!(font_light, LIGHT);

716
crates/ui/src/tab/mod.rs
View File

@@ -1,74 +1,557 @@
use gpui::prelude::FluentBuilder; use std::rc::Rc;
use gpui::{
div, px, AnyElement, App, Div, InteractiveElement, IntoElement, MouseButton, ParentElement,
RenderOnce, StatefulInteractiveElement, Styled, Window,
};
use theme::{ActiveTheme, TABBAR_HEIGHT};
use crate::{Selectable, Sizable, Size}; use gpui::prelude::FluentBuilder as _;
use gpui::{
AnyElement, App, ClickEvent, Div, Edges, Hsla, InteractiveElement, IntoElement, MouseButton,
ParentElement, Pixels, RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window,
div, px, relative,
};
use theme::ActiveTheme;
use crate::{Icon, IconName, Selectable, Sizable, Size, StyledExt, h_flex};
pub mod tab_bar; pub mod tab_bar;
/// Tab variants.
#[derive(Debug, Clone, Default, Copy, PartialEq, Eq, Hash)]
pub enum TabVariant {
#[default]
Tab,
Outline,
Pill,
Segmented,
Underline,
}
impl TabVariant {
fn height(&self, size: Size) -> Pixels {
match size {
Size::XSmall => match self {
TabVariant::Underline => px(26.),
_ => px(20.),
},
Size::Small => match self {
TabVariant::Underline => px(30.),
_ => px(24.),
},
Size::Large => match self {
TabVariant::Underline => px(44.),
_ => px(36.),
},
_ => match self {
TabVariant::Underline => px(36.),
_ => px(32.),
},
}
}
fn inner_height(&self, size: Size) -> Pixels {
match size {
Size::XSmall => match self {
TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(18.),
TabVariant::Segmented => px(16.),
TabVariant::Underline => px(20.),
},
Size::Small => match self {
TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(22.),
TabVariant::Segmented => px(18.),
TabVariant::Underline => px(22.),
},
Size::Large => match self {
TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(36.),
TabVariant::Segmented => px(28.),
TabVariant::Underline => px(32.),
},
_ => match self {
TabVariant::Tab => px(30.),
TabVariant::Outline | TabVariant::Pill => px(26.),
TabVariant::Segmented => px(24.),
TabVariant::Underline => px(26.),
},
}
}
/// Default px(12) to match panel px_3, See [`crate::dock::TabPanel`]
fn inner_paddings(&self, size: Size) -> Edges<Pixels> {
let mut padding_x = match size {
Size::XSmall => px(8.),
Size::Small => px(10.),
Size::Large => px(16.),
_ => px(12.),
};
if matches!(self, TabVariant::Underline) {
padding_x = px(0.);
}
Edges {
left: padding_x,
right: padding_x,
..Default::default()
}
}
fn inner_margins(&self, size: Size) -> Edges<Pixels> {
match size {
Size::XSmall => match self {
TabVariant::Underline => Edges {
top: px(1.),
bottom: px(2.),
..Default::default()
},
_ => Edges::all(px(0.)),
},
Size::Small => match self {
TabVariant::Underline => Edges {
top: px(2.),
bottom: px(3.),
..Default::default()
},
_ => Edges::all(px(0.)),
},
Size::Large => match self {
TabVariant::Underline => Edges {
top: px(5.),
bottom: px(6.),
..Default::default()
},
_ => Edges::all(px(0.)),
},
_ => match self {
TabVariant::Underline => Edges {
top: px(3.),
bottom: px(4.),
..Default::default()
},
_ => Edges::all(px(0.)),
},
}
}
fn normal(&self, cx: &App) -> TabStyle {
match self {
TabVariant::Tab => TabStyle {
fg: cx.theme().tab_foreground,
bg: gpui::transparent_black(),
borders: Edges {
left: px(1.),
right: px(1.),
..Default::default()
},
border_color: gpui::transparent_black(),
..Default::default()
},
TabVariant::Outline => TabStyle {
fg: cx.theme().tab_foreground,
bg: gpui::transparent_black(),
borders: Edges::all(px(1.)),
border_color: cx.theme().border,
..Default::default()
},
TabVariant::Pill => TabStyle {
fg: cx.theme().text,
bg: gpui::transparent_black(),
..Default::default()
},
TabVariant::Segmented => TabStyle {
fg: cx.theme().tab_foreground,
bg: gpui::transparent_black(),
..Default::default()
},
TabVariant::Underline => TabStyle {
fg: cx.theme().tab_foreground,
bg: gpui::transparent_black(),
inner_bg: gpui::transparent_black(),
borders: Edges {
bottom: px(2.),
..Default::default()
},
border_color: gpui::transparent_black(),
..Default::default()
},
}
}
fn hovered(&self, selected: bool, cx: &App) -> TabStyle {
match self {
TabVariant::Tab => TabStyle {
fg: cx.theme().tab_foreground,
bg: gpui::transparent_black(),
borders: Edges {
left: px(1.),
right: px(1.),
..Default::default()
},
border_color: gpui::transparent_black(),
..Default::default()
},
TabVariant::Outline => TabStyle {
fg: cx.theme().secondary_foreground,
bg: cx.theme().secondary_hover,
borders: Edges::all(px(1.)),
border_color: cx.theme().border,
..Default::default()
},
TabVariant::Pill => TabStyle {
fg: cx.theme().secondary_foreground,
bg: cx.theme().secondary_background,
..Default::default()
},
TabVariant::Segmented => TabStyle {
fg: cx.theme().tab_foreground,
bg: gpui::transparent_black(),
inner_bg: if selected {
cx.theme().background
} else {
gpui::transparent_black()
},
..Default::default()
},
TabVariant::Underline => TabStyle {
fg: cx.theme().tab_foreground,
bg: gpui::transparent_black(),
inner_bg: gpui::transparent_black(),
borders: Edges {
bottom: px(2.),
..Default::default()
},
border_color: gpui::transparent_black(),
..Default::default()
},
}
}
fn selected(&self, cx: &App) -> TabStyle {
match self {
TabVariant::Tab => TabStyle {
fg: cx.theme().tab_active_foreground,
bg: cx.theme().tab_active_background,
borders: Edges {
left: px(1.),
right: px(1.),
..Default::default()
},
border_color: cx.theme().border,
..Default::default()
},
TabVariant::Outline => TabStyle {
fg: cx.theme().text_accent,
bg: gpui::transparent_black(),
borders: Edges::all(px(1.)),
border_color: cx.theme().element_active,
..Default::default()
},
TabVariant::Pill => TabStyle {
fg: cx.theme().element_foreground,
bg: cx.theme().element_background,
..Default::default()
},
TabVariant::Segmented => TabStyle {
fg: cx.theme().tab_active_foreground,
bg: gpui::transparent_black(),
inner_bg: cx.theme().background,
shadow: true,
..Default::default()
},
TabVariant::Underline => TabStyle {
fg: cx.theme().tab_active_foreground,
bg: gpui::transparent_black(),
borders: Edges {
bottom: px(2.),
..Default::default()
},
border_color: cx.theme().element_active,
..Default::default()
},
}
}
fn disabled(&self, selected: bool, cx: &App) -> TabStyle {
match self {
TabVariant::Tab => TabStyle {
fg: cx.theme().text_muted,
bg: gpui::transparent_black(),
border_color: if selected {
cx.theme().border
} else {
gpui::transparent_black()
},
borders: Edges {
left: px(1.),
right: px(1.),
..Default::default()
},
..Default::default()
},
TabVariant::Outline => TabStyle {
fg: cx.theme().text_muted,
bg: gpui::transparent_black(),
borders: Edges::all(px(1.)),
border_color: if selected {
cx.theme().element_active
} else {
cx.theme().border
},
..Default::default()
},
TabVariant::Pill => TabStyle {
fg: if selected {
cx.theme().element_foreground.opacity(0.5)
} else {
cx.theme().text_muted
},
bg: if selected {
cx.theme().element_background.opacity(0.5)
} else {
gpui::transparent_black()
},
..Default::default()
},
TabVariant::Segmented => TabStyle {
fg: cx.theme().text_muted,
bg: cx.theme().tab_background,
inner_bg: if selected {
cx.theme().background
} else {
gpui::transparent_black()
},
..Default::default()
},
TabVariant::Underline => TabStyle {
fg: cx.theme().text_muted,
bg: gpui::transparent_black(),
border_color: if selected {
cx.theme().border
} else {
gpui::transparent_black()
},
borders: Edges {
bottom: px(2.),
..Default::default()
},
..Default::default()
},
}
}
pub(super) fn tab_bar_radius(&self, size: Size, cx: &App) -> Pixels {
if *self != TabVariant::Segmented {
return px(0.);
}
match size {
Size::XSmall | Size::Small => cx.theme().radius,
Size::Large => cx.theme().radius_lg,
_ => cx.theme().radius_lg,
}
}
fn radius(&self, size: Size, cx: &App) -> Pixels {
match self {
TabVariant::Outline | TabVariant::Pill => px(99.),
TabVariant::Segmented => match size {
Size::XSmall | Size::Small => cx.theme().radius,
Size::Large => cx.theme().radius_lg,
_ => cx.theme().radius_lg,
},
_ => px(0.),
}
}
fn inner_radius(&self, size: Size, cx: &App) -> Pixels {
match self {
TabVariant::Segmented => match size {
Size::Large => self.tab_bar_radius(size, cx) - px(3.),
_ => self.tab_bar_radius(size, cx) - px(2.),
},
_ => px(0.),
}
}
}
#[allow(dead_code)]
struct TabStyle {
borders: Edges<Pixels>,
border_color: Hsla,
bg: Hsla,
fg: Hsla,
shadow: bool,
inner_bg: Hsla,
}
impl Default for TabStyle {
fn default() -> Self {
TabStyle {
borders: Edges::all(px(0.)),
border_color: gpui::transparent_white(),
bg: gpui::transparent_white(),
fg: gpui::transparent_white(),
shadow: false,
inner_bg: gpui::transparent_white(),
}
}
}
#[allow(clippy::type_complexity)]
/// A Tab element for the [`super::TabBar`].
#[derive(IntoElement)] #[derive(IntoElement)]
pub struct Tab { pub struct Tab {
ix: usize, ix: usize,
base: Div, base: Div,
label: Option<AnyElement>, pub(super) label: Option<SharedString>,
icon: Option<Icon>,
prefix: Option<AnyElement>, prefix: Option<AnyElement>,
pub(super) tab_bar_prefix: Option<bool>,
suffix: Option<AnyElement>, suffix: Option<AnyElement>,
disabled: bool, children: Vec<AnyElement>,
selected: bool, variant: TabVariant,
size: Size, size: Size,
pub(super) disabled: bool,
pub(super) selected: bool,
on_click: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
} }
impl Tab { impl From<&'static str> for Tab {
pub fn new() -> Self { fn from(label: &'static str) -> Self {
Self { Self::new().label(label)
ix: 0,
base: div(),
label: None,
disabled: false,
selected: false,
prefix: None,
suffix: None,
size: Size::default(),
}
} }
}
/// Set label for the tab. impl From<String> for Tab {
pub fn label(mut self, label: impl Into<AnyElement>) -> Self { fn from(label: String) -> Self {
self.label = Some(label.into()); Self::new().label(label)
self
} }
}
/// Set the left side of the tab impl From<SharedString> for Tab {
pub fn prefix(mut self, prefix: impl Into<AnyElement>) -> Self { fn from(label: SharedString) -> Self {
self.prefix = Some(prefix.into()); Self::new().label(label)
self
} }
}
/// Set the right side of the tab impl From<Icon> for Tab {
pub fn suffix(mut self, suffix: impl Into<AnyElement>) -> Self { fn from(icon: Icon) -> Self {
self.suffix = Some(suffix.into()); Self::default().icon(icon)
self
} }
}
/// Set disabled state to the tab impl From<IconName> for Tab {
pub fn disabled(mut self, disabled: bool) -> Self { fn from(icon_name: IconName) -> Self {
self.disabled = disabled; Self::default().icon(Icon::new(icon_name))
self
}
/// Set index to the tab.
pub fn ix(mut self, ix: usize) -> Self {
self.ix = ix;
self
} }
} }
impl Default for Tab { impl Default for Tab {
fn default() -> Self { fn default() -> Self {
Self::new() Self {
ix: 0,
base: div(),
label: None,
icon: None,
tab_bar_prefix: None,
children: Vec::new(),
disabled: false,
selected: false,
prefix: None,
suffix: None,
variant: TabVariant::default(),
size: Size::default(),
on_click: None,
}
}
}
impl Tab {
/// Create a new tab with a label.
pub fn new() -> Self {
Self::default()
}
/// Set label for the tab.
pub fn label(mut self, label: impl Into<SharedString>) -> Self {
self.label = Some(label.into());
self
}
/// Set icon for the tab.
pub fn icon(mut self, icon: impl Into<Icon>) -> Self {
self.icon = Some(icon.into());
self
}
/// Set Tab Variant.
pub fn with_variant(mut self, variant: TabVariant) -> Self {
self.variant = variant;
self
}
/// Use Pill variant.
pub fn pill(mut self) -> Self {
self.variant = TabVariant::Pill;
self
}
/// Use outline variant.
pub fn outline(mut self) -> Self {
self.variant = TabVariant::Outline;
self
}
/// Use Segmented variant.
pub fn segmented(mut self) -> Self {
self.variant = TabVariant::Segmented;
self
}
/// Use Underline variant.
pub fn underline(mut self) -> Self {
self.variant = TabVariant::Underline;
self
}
/// Set the left side of the tab
pub fn prefix(mut self, prefix: impl IntoElement) -> Self {
self.prefix = Some(prefix.into_any_element());
self
}
/// Set the right side of the tab
pub fn suffix(mut self, suffix: impl IntoElement) -> Self {
self.suffix = Some(suffix.into_any_element());
self
}
/// Set disabled state to the tab, default false.
pub fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled;
self
}
/// Set the click handler for the tab.
pub fn on_click(
mut self,
on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
) -> Self {
self.on_click = Some(Rc::new(on_click));
self
}
/// Set index to the tab.
pub(crate) fn ix(mut self, ix: usize) -> Self {
self.ix = ix;
self
}
/// Set if the tab bar has a prefix.
pub(crate) fn tab_bar_prefix(mut self, tab_bar_prefix: bool) -> Self {
self.tab_bar_prefix = Some(tab_bar_prefix);
self
}
}
impl ParentElement for Tab {
fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
self.children.extend(elements);
} }
} }
@@ -105,62 +588,115 @@ impl Sizable for Tab {
} }
impl RenderOnce for Tab { impl RenderOnce for Tab {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement { fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
let (text_color, hover_text_color, bg_color, border_color) = let mut tab_style = if self.selected {
match (self.selected, self.disabled) { self.variant.selected(cx)
(true, false) => ( } else {
cx.theme().tab_active_foreground, self.variant.normal(cx)
cx.theme().tab_hover_foreground, };
cx.theme().tab_active_background,
cx.theme().border, let mut hover_style = self.variant.hovered(self.selected, cx);
),
(false, false) => ( if self.disabled {
cx.theme().tab_inactive_foreground, tab_style = self.variant.disabled(self.selected, cx);
cx.theme().tab_hover_foreground, hover_style = self.variant.disabled(self.selected, cx);
cx.theme().ghost_element_background, }
cx.theme().border_transparent,
), let tab_bar_prefix = self.tab_bar_prefix.unwrap_or_default();
(true, true) => (
cx.theme().tab_inactive_foreground, if !tab_bar_prefix && self.ix == 0 && self.variant == TabVariant::Tab {
cx.theme().tab_hover_foreground, tab_style.borders.left = px(0.);
cx.theme().ghost_element_background, hover_style.borders.left = px(0.);
cx.theme().border_disabled, }
),
(false, true) => ( let radius = self.variant.radius(self.size, cx);
cx.theme().tab_inactive_foreground, let inner_radius = self.variant.inner_radius(self.size, cx);
cx.theme().tab_hover_foreground, let inner_paddings = self.variant.inner_paddings(self.size);
cx.theme().ghost_element_background, let inner_margins = self.variant.inner_margins(self.size);
cx.theme().border_disabled, let inner_height = self.variant.inner_height(self.size);
), let height = self.variant.height(self.size);
};
self.base self.base
.id(self.ix) .id(self.ix)
.h(TABBAR_HEIGHT)
.px_4()
.relative()
.flex() .flex()
.flex_wrap()
.gap_1()
.items_center() .items_center()
.flex_shrink_0() .flex_shrink_0()
.cursor_pointer() .h(height)
.overflow_hidden() .overflow_hidden()
.text_xs() .text_color(tab_style.fg)
.text_ellipsis() .map(|this| match self.size {
.text_color(text_color) Size::XSmall => this.text_xs(),
.bg(bg_color) Size::Large => this.text_base(),
.border_l(px(1.)) _ => this.text_sm(),
.border_r(px(1.)) })
.border_color(border_color) .bg(tab_style.bg)
.border_l(tab_style.borders.left)
.border_r(tab_style.borders.right)
.border_t(tab_style.borders.top)
.border_b(tab_style.borders.bottom)
.border_color(tab_style.border_color)
.rounded(radius)
.when(!self.selected && !self.disabled, |this| { .when(!self.selected && !self.disabled, |this| {
this.hover(|this| this.text_color(hover_text_color)) this.hover(|this| {
this.text_color(hover_style.fg)
.bg(hover_style.bg)
.border_l(hover_style.borders.left)
.border_r(hover_style.borders.right)
.border_t(hover_style.borders.top)
.border_b(hover_style.borders.bottom)
.border_color(hover_style.border_color)
.rounded(radius)
})
}) })
.when_some(self.prefix, |this, prefix| { .when_some(self.prefix, |this, prefix| this.child(prefix))
this.child(prefix).text_color(text_color) .child(
h_flex()
.flex_1()
.h(inner_height)
.line_height(relative(1.))
.whitespace_nowrap()
.items_center()
.justify_center()
.overflow_hidden()
.margins(inner_margins)
.flex_shrink_0()
.map(|this| match self.icon {
Some(icon) => {
this.w(inner_height * 1.25)
.child(icon.map(|this| match self.size {
Size::XSmall => this.size_2p5(),
Size::Small => this.size_3p5(),
Size::Large => this.size_4(),
_ => this.size_4(),
}))
}
None => this
.paddings(inner_paddings)
.map(|this| match self.label {
Some(label) => this.child(label),
None => this,
})
.children(self.children),
})
.bg(tab_style.inner_bg)
.rounded(inner_radius)
.when(tab_style.shadow, |this| this.shadow_xs())
.hover(|this| this.bg(hover_style.inner_bg).rounded(inner_radius)),
)
.when_some(self.suffix, |this, suffix| {
this.child(div().pr_2().child(suffix))
}) })
.when_some(self.label, |this, label| this.child(label)) .on_mouse_down(MouseButton::Left, |_, _, cx| {
.when_some(self.suffix, |this, suffix| this.child(suffix)) // Stop propagation behavior, for works on TitleBar.
.on_mouse_down(MouseButton::Left, |_ev, _window, cx| { // https://github.com/longbridge/gpui-component/issues/1836
cx.stop_propagation(); cx.stop_propagation();
}) })
.when(!self.disabled, |this| {
this.when_some(self.on_click.clone(), |this, on_click| {
this.on_click(move |event, window, cx| on_click(event, window, cx))
})
})
} }
} }

244
crates/ui/src/tab/tab_bar.rs
View File

@@ -1,41 +1,92 @@
use std::rc::Rc;
use gpui::prelude::FluentBuilder as _; use gpui::prelude::FluentBuilder as _;
#[cfg(not(target_os = "windows"))]
use gpui::Pixels;
use gpui::{ use gpui::{
div, px, AnyElement, App, Div, InteractiveElement, IntoElement, ParentElement, RenderOnce, AnyElement, App, Corner, Div, Edges, ElementId, InteractiveElement, IntoElement, ParentElement,
ScrollHandle, StatefulInteractiveElement as _, StyleRefinement, Styled, Window, RenderOnce, ScrollHandle, Stateful, StatefulInteractiveElement as _, StyleRefinement, Styled,
Window, div, px,
}; };
use smallvec::SmallVec; use smallvec::SmallVec;
use theme::ActiveTheme; use theme::ActiveTheme;
use crate::{h_flex, Sizable, Size, StyledExt}; use super::{Tab, TabVariant};
use crate::button::{Button, ButtonVariants as _};
use crate::menu::{DropdownMenu as _, PopupMenuItem};
use crate::{IconName, Selectable, Sizable, Size, StyledExt, h_flex};
#[allow(clippy::type_complexity)]
/// A TabBar element that contains multiple [`Tab`] items.
#[derive(IntoElement)] #[derive(IntoElement)]
pub struct TabBar { pub struct TabBar {
base: Div, base: Stateful<Div>,
style: StyleRefinement, style: StyleRefinement,
scroll_handle: Option<ScrollHandle>, scroll_handle: Option<ScrollHandle>,
prefix: Option<AnyElement>, prefix: Option<AnyElement>,
suffix: Option<AnyElement>, suffix: Option<AnyElement>,
children: SmallVec<[Tab; 2]>,
last_empty_space: AnyElement, last_empty_space: AnyElement,
children: SmallVec<[AnyElement; 2]>, selected_index: Option<usize>,
variant: TabVariant,
size: Size, size: Size,
menu: bool,
on_click: Option<Rc<dyn Fn(&usize, &mut Window, &mut App) + 'static>>,
} }
impl TabBar { impl TabBar {
pub fn new() -> Self { /// Create a new TabBar.
pub fn new(id: impl Into<ElementId>) -> Self {
Self { Self {
base: h_flex().px(px(-1.)), base: div().id(id).px(px(-1.)),
style: StyleRefinement::default(), style: StyleRefinement::default(),
scroll_handle: None,
children: SmallVec::new(), children: SmallVec::new(),
scroll_handle: None,
prefix: None, prefix: None,
suffix: None, suffix: None,
variant: TabVariant::default(),
size: Size::default(), size: Size::default(),
last_empty_space: div().w_3().into_any_element(), last_empty_space: div().w_3().into_any_element(),
selected_index: None,
on_click: None,
menu: false,
} }
} }
/// Set the Tab variant, all children will inherit the variant.
pub fn with_variant(mut self, variant: TabVariant) -> Self {
self.variant = variant;
self
}
/// Set the Tab variant to Pill, all children will inherit the variant.
pub fn pill(mut self) -> Self {
self.variant = TabVariant::Pill;
self
}
/// Set the Tab variant to Outline, all children will inherit the variant.
pub fn outline(mut self) -> Self {
self.variant = TabVariant::Outline;
self
}
/// Set the Tab variant to Segmented, all children will inherit the variant.
pub fn segmented(mut self) -> Self {
self.variant = TabVariant::Segmented;
self
}
/// Set the Tab variant to Underline, all children will inherit the variant.
pub fn underline(mut self) -> Self {
self.variant = TabVariant::Underline;
self
}
/// Set whether to show the menu button when tabs overflow, default is false.
pub fn menu(mut self, menu: bool) -> Self {
self.menu = menu;
self
}
/// Track the scroll of the TabBar. /// Track the scroll of the TabBar.
pub fn track_scroll(mut self, scroll_handle: &ScrollHandle) -> Self { pub fn track_scroll(mut self, scroll_handle: &ScrollHandle) -> Self {
self.scroll_handle = Some(scroll_handle.clone()); self.scroll_handle = Some(scroll_handle.clone());
@@ -54,27 +105,39 @@ impl TabBar {
self self
} }
/// Add children of the TabBar, all children will inherit the variant.
pub fn children(mut self, children: impl IntoIterator<Item = impl Into<Tab>>) -> Self {
self.children.extend(children.into_iter().map(Into::into));
self
}
/// Add child of the TabBar, tab will inherit the variant.
pub fn child(mut self, child: impl Into<Tab>) -> Self {
self.children.push(child.into());
self
}
/// Set the selected index of the TabBar.
pub fn selected_index(mut self, index: usize) -> Self {
self.selected_index = Some(index);
self
}
/// Set the last empty space element of the TabBar. /// Set the last empty space element of the TabBar.
pub fn last_empty_space(mut self, last_empty_space: impl IntoElement) -> Self { pub fn last_empty_space(mut self, last_empty_space: impl IntoElement) -> Self {
self.last_empty_space = last_empty_space.into_any_element(); self.last_empty_space = last_empty_space.into_any_element();
self self
} }
#[cfg(not(target_os = "windows"))] /// Set the on_click callback of the TabBar, the first parameter is the index of the clicked tab.
pub fn height(window: &mut Window) -> Pixels { ///
(1.75 * window.rem_size()).max(px(36.)) /// When this is set, the children's on_click will be ignored.
} pub fn on_click<F>(mut self, on_click: F) -> Self
} where
F: Fn(&usize, &mut Window, &mut App) + 'static,
impl Default for TabBar { {
fn default() -> Self { self.on_click = Some(Rc::new(on_click));
Self::new() self
}
}
impl ParentElement for TabBar {
fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
self.children.extend(elements)
} }
} }
@@ -92,37 +155,136 @@ impl Sizable for TabBar {
} }
impl RenderOnce for TabBar { impl RenderOnce for TabBar {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement { fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
let default_gap = match self.size {
Size::Small | Size::XSmall => px(8.),
Size::Large => px(16.),
_ => px(12.),
};
let (bg, paddings, gap) = match self.variant {
TabVariant::Tab => {
let padding = Edges::all(px(0.));
(cx.theme().tab_background, padding, px(0.))
}
TabVariant::Outline => {
let padding = Edges::all(px(0.));
(gpui::transparent_black(), padding, default_gap)
}
TabVariant::Pill => {
let padding = Edges::all(px(0.));
(gpui::transparent_black(), padding, px(4.))
}
TabVariant::Segmented => {
let padding_x = match self.size {
Size::XSmall => px(2.),
Size::Small => px(3.),
_ => px(4.),
};
let padding = Edges {
left: padding_x,
right: padding_x,
..Default::default()
};
(cx.theme().tab_background, padding, px(2.))
}
TabVariant::Underline => {
// This gap is same as the tab inner_paddings
let gap = match self.size {
Size::XSmall => px(10.),
Size::Small => px(12.),
Size::Large => px(20.),
_ => px(16.),
};
(gpui::transparent_black(), Edges::all(px(0.)), gap)
}
};
let mut item_labels = Vec::new();
let selected_index = self.selected_index;
let on_click = self.on_click.clone();
self.base self.base
.group("tab-bar") .group("tab-bar")
.relative() .relative()
.refine_style(&self.style) .flex()
.bg(cx.theme().surface_background) .items_center()
.child( .bg(bg)
div() .text_color(cx.theme().tab_foreground)
.id("border-bottom") .when(
.absolute() self.variant == TabVariant::Underline || self.variant == TabVariant::Tab,
.left_0() |this| {
.bottom_0() this.child(
.size_full() div()
.border_b_1() .id("border-b")
.border_color(cx.theme().border), .absolute()
.left_0()
.bottom_0()
.size_full()
.border_b_1()
.border_color(cx.theme().border),
)
},
) )
.text_color(cx.theme().text) .rounded(self.variant.tab_bar_radius(self.size, cx))
.paddings(paddings)
.refine_style(&self.style)
.when_some(self.prefix, |this, prefix| this.child(prefix)) .when_some(self.prefix, |this, prefix| this.child(prefix))
.child( .child(
h_flex() h_flex()
.id("tabs") .id("tabs")
.flex_grow() .flex_1()
.overflow_x_scroll() .overflow_x_scroll()
.when_some(self.scroll_handle, |this, scroll_handle| { .when_some(self.scroll_handle, |this, scroll_handle| {
this.track_scroll(&scroll_handle) this.track_scroll(&scroll_handle)
}) })
.children(self.children) .gap(gap)
.when(self.suffix.is_some(), |this| { .children(self.children.into_iter().enumerate().map(|(ix, child)| {
item_labels.push((child.label.clone(), child.disabled));
let tab_bar_prefix = child.tab_bar_prefix.unwrap_or(true);
child
.ix(ix)
.tab_bar_prefix(tab_bar_prefix)
.with_variant(self.variant)
.with_size(self.size)
.when_some(self.selected_index, |this, selected_ix| {
this.selected(selected_ix == ix)
})
.when_some(self.on_click.clone(), move |this, on_click| {
this.on_click(move |_, window, cx| on_click(&ix, window, cx))
})
}))
.when(self.suffix.is_some() || self.menu, |this| {
this.child(self.last_empty_space) this.child(self.last_empty_space)
}), }),
) )
.when(self.menu, |this| {
this.child(
Button::new("more")
.xsmall()
.ghost()
.icon(IconName::ChevronDown)
.dropdown_menu(move |mut this, _, _| {
this = this.scrollable(true);
for (ix, (label, disabled)) in item_labels.iter().enumerate() {
this = this.item(
PopupMenuItem::new(label.clone().unwrap_or_default())
.checked(selected_index == Some(ix))
.disabled(*disabled)
.when_some(on_click.clone(), |this, on_click| {
this.on_click(move |_, window, cx| {
on_click(&ix, window, cx)
})
}),
)
}
this
})
.anchor(Corner::TopRight),
)
})
.when_some(self.suffix, |this, suffix| this.child(suffix)) .when_some(self.suffix, |this, suffix| this.child(suffix))
} }
} }