dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

accordion: Fix Accordion hover background. (#1184)

Browse source 
- Improved `accordion.hover` theme color default fallback to `accent`.
- Fix incorrect Accordion border top radius on hover.
- Removed unused `accordion.active.background` theme variable.

<img width="1106" height="799" alt="image"
src="https://github.com/user-attachments/assets/3b1d3e56-7e77-4118-ac3c-231c6571940a"
/>
This commit is contained in:
Jason Lee 2025-08-29 11:51:32 +08:00 committed by GitHub
parent f98ad5232b
commit 709a888e15
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 612 additions and 699 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.theme-schema.json
View file

@ -106,10 +106,6 @@
"description": "Accordion background color.",
"type": ["string", "null"]
},
"accordion.active.background": {
"description": "Accordion active background color.",
"type": ["string", "null"]
},
"accordion.hover.background": {
"description": "Accordion hover background color.",
"type": ["string", "null"]

4
crates/ui/src/accordion.rs
View file

@ -247,9 +247,7 @@ impl RenderOnce for AccordionItem {
})
})
.when(!self.bordered, |this| {
this.border_b_1()
.border_color(cx.theme().border)
.rounded_t(cx.theme().radius)
this.border_b_1().border_color(cx.theme().border)
})
.child(
h_flex()

6
crates/ui/src/theme/schema.rs
View file

@ -57,9 +57,6 @@ pub struct ThemeConfigColors {
/// Accordion background color.
#[serde(rename = "accordion.background")]
pub accordion: Option<SharedString>,
/// Accordion active background color.
#[serde(rename = "accordion.active.background")]
pub accordion_active: Option<SharedString>,
/// Accordion hover background color.
#[serde(rename = "accordion.hover.background")]
pub accordion_hover: Option<SharedString>,
@ -507,8 +504,7 @@ impl ThemeColor {
apply_color!(accent, fallback = self.secondary);
apply_color!(accent_foreground, fallback = self.secondary_foreground);
apply_color!(accordion, fallback = self.background);
apply_color!(accordion_active, fallback = self.accordion);
apply_color!(accordion_hover, fallback = self.accordion);
apply_color!(accordion_hover, fallback = self.accent.opacity(0.8));
apply_color!(
group_box,
fallback = self

2
crates/ui/src/theme/theme_color.rs
View file

@ -14,8 +14,6 @@ pub struct ThemeColor {
pub accent_foreground: Hsla,
/// Accordion background color.
pub accordion: Hsla,
/// Accordion active background color.
pub accordion_active: Hsla,
/// Accordion hover background color.
pub accordion_hover: Hsla,
/// Default background color.

4
themes/adventure.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#25292d",
"accent.foreground": "#feffff",
"accordion.active.background": "#003a5b",
"accordion.hover.background": "#4b6479",
"background": "#040404",
"border": "#282828",
"danger.background": "#d84a33",
@ -164,8 +162,6 @@
"colors": {
"accent.background": "#36345f",
"accent.foreground": "#f8dcc0",
"accordion.active.background": "#003a5b",
"accordion.hover.background": "#4b6479",
"background": "#1f1d45",
"border": "#333150",
"foreground": "#f8dcc0",

2
themes/alduin.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#322F2D",
"accent.foreground": "#ebdbb2",
"accordion.active.background": "#504945",
"accordion.hover.background": "#665c54",
"background": "#1C1C1C",
"border": "#3a3a3a",
"danger.background": "#cc241d",

4
themes/ayu.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#ECECED",
"accent.foreground": "#5C6773",
"accordion.active.background": "#F3F4F5",
"accordion.hover.background": "#D9DCE3",
"background": "#fafafa",
"foreground": "#5C6773",
"border": "#E6E8EA",
@ -161,8 +159,6 @@
"colors": {
"accent.background": "#191F2A",
"accent.foreground": "#B3B1AD",
"accordion.active.background": "#1F2430",
"accordion.hover.background": "#333F58",
"background": "#0F1419",
"border": "#444444",
"ring": "#FFB454",

8
themes/catppuccin.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#D6DAE2",
"accent.foreground": "#4c4f69",
"accordion.active.background": "#dce0e8",
"accordion.hover.background": "#acb0be",
"background": "#E5E9EF",
"border": "#CCD0DA",
"ring": "#c6d0f5",
@ -403,8 +401,6 @@
"colors": {
"accent.background": "#3b3f4f",
"accent.foreground": "#c6d0f5",
"accordion.active.background": "#414559",
"accordion.hover.background": "#51576d",
"background": "#232634",
"border": "#3e4255",
"ring": "#f2d5cf",
@ -540,8 +536,6 @@
"colors": {
"accent.background": "#24273a",
"accent.foreground": "#cad3f5",
"accordion.active.background": "#363a4f",
"accordion.hover.background": "#494d64",
"action_bar.background": "#1E2030",
"background": "#1E2030",
"border": "#494d64",
@ -689,8 +683,6 @@
"colors": {
"accent.background": "#2e2e3e",
"accent.foreground": "#cdd6f4",
"accordion.active.background": "#302d41",
"accordion.hover.background": "#575268",
"background": "#181825",
"border": "#313244",
"ring": "#cba6f7",

4
themes/default.json
View file

@ -12,8 +12,6 @@
"accent.background": "#f5f5f5",
"accent.foreground": "#171717",
"accordion.background": "#ffffff",
"accordion.active.background": "#e5e5e5",
"accordion.hover.background": "#f5f5f5",
"background": "#ffffff",
"border": "#e5e5e5",
"group_box.background": "#f5f5f5",
@ -215,8 +213,6 @@
"accent.background": "#171717",
"accent.foreground": "#fafafa",
"accordion.background": "#0a0a0a",
"accordion.active.background": "#262626",
"accordion.hover.background": "#262626e6",
"background": "#0a0a0a",
"border": "#262626",
"group_box.background": "#171717",

4
themes/everforest.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#E7E5D4",
"accent.foreground": "#5F6D75",
"accordion.active.background": "#d3c6aa",
"accordion.hover.background": "#E7E5D4",
"background": "#FEFCEE",
"border": "#E7E5D4",
"danger.background": "#e67e80",
@ -155,8 +153,6 @@
"colors": {
"accent.background": "#3c4448",
"accent.foreground": "#d3c6aa",
"accordion.active.background": "#2E383B",
"accordion.hover.background": "#485156",
"background": "#262E34",
"border": "#40484c",
"danger.active.background": "#e67e80",

2
themes/fahrenheit.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#171717",
"accent.foreground": "#FFFFCE",
"accordion.active.background": "#1e1e1e",
"accordion.hover.background": "#3e3e3e",
"background": "#000000",
"border": "#252525",
"danger.background": "#593002",

6
themes/flexoki.json
View file

@ -30,7 +30,7 @@
"scrollbar.thumb.hover.background": "#DAD8CE",
"secondary.active.background": "#DAD8CE",
"secondary.background": "#F2F0E5",
"secondary.foreground": "#5C6773",
"secondary.foreground": "#100F0F",
"secondary.hover.background": "#E6E4D9",
"tab.active.background": "#FFFCF0",
"tab.active.foreground": "#100F0F",
@ -238,10 +238,8 @@
"name": "Flexoki Dark",
"mode": "dark",
"colors": {
"accent.background": "#343331",
"accent.background": "#1f1d1c",
"accent.foreground": "#CECDC3",
"accordion.active.background": "#282726",
"accordion.hover.background": "#343331",
"background": "#100F0F",
"border": "#282726",
"ring": "#AD8301",

4
themes/gruvbox.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#ebdbb2",
"accent.foreground": "#3c3836",
"accordion.active.background": "#fbf1c7",
"accordion.hover.background": "#d5c4a1",
"background": "#fbf1c7",
"border": "#d5c4a1",
"danger.background": "#fb4934",
@ -159,8 +157,6 @@
"colors": {
"accent.background": "#282828",
"accent.foreground": "#ebdbb2",
"accordion.active.background": "#282828",
"accordion.hover.background": "#504945",
"background": "#1d2021",
"border": "#3e3936",
"card.background": "#282828",

2
themes/harper.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#18151B",
"accent.foreground": "#a8a49d",
"accordion.active.background": "#003a5b",
"accordion.hover.background": "#726E69",
"background": "#010101",
"border": "#333333",
"foreground": "#a8a49d",

8
themes/hybrid.json
View file

@ -8,10 +8,8 @@
"name": "Hybrid Light",
"mode": "light",
"colors": {
"accent.background": "#D4E2E2",
"accent.background": "#d3d8da",
"accent.foreground": "#1c1c1c",
"accordion.active.background": "#d3d3d3",
"accordion.hover.background": "#c0c0c0",
"background": "#E4E4E4",
"border": "#CACACA",
"danger.background": "#ff5f5f",
@ -155,10 +153,8 @@
"name": "Hybrid Dark",
"mode": "dark",
"colors": {
"accent.background": "#313E40",
"accent.background": "#292f30",
"accent.foreground": "#e8e8e8",
"accordion.active.background": "#1c1c1c",
"accordion.hover.background": "#3a3a3a",
"background": "#1D1F21",
"border": "#34373c",
"card.background": "#1D1F21",

2
themes/jellybeans.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#232323",
"accent.foreground": "#e8e8e8",
"accordion.active.background": "#444444",
"accordion.hover.background": "#4E4847",
"background": "#151515",
"border": "#2e2e2e",
"danger.foreground": "#151515",

2
themes/kibble.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#242223",
"accent.foreground": "#f7f7f7",
"accordion.active.background": "#003a5b",
"accordion.hover.background": "#726E69",
"background": "#0e100a",
"border": "#333333",
"danger.background": "#c70031",

5
themes/macos-classic.json
View file

@ -10,9 +10,6 @@
"colors": {
"accent.background": "#EAEAEA",
"accent.foreground": "#000000",
"accordion.active.background": "#F7F7F7",
"accordion.background": "#F9F9F9",
"accordion.hover.background": "#D0D0D0",
"background": "#FFFFFF",
"foreground": "#000000",
"border": "#D2D2D2",
@ -160,8 +157,6 @@
"colors": {
"accent.background": "#353436",
"accent.foreground": "#CACCCA",
"accordion.active.background": "#1E1D1E",
"accordion.hover.background": "#353436",
"background": "#131313",
"border": "#404040",
"ring": "#A76D3B",

14
themes/mandarin-square.json
View file

@ -8,17 +8,15 @@
"name": "Mandarin Square",
"mode": "dark",
"colors": {
"accent.background": "#2B2525",
"accent.foreground": "#ebdbb2",
"accordion.active.background": "#504945",
"accordion.hover.background": "#665c54",
"accent.background": "#2a2c33",
"accent.foreground": "#e3dbd3",
"background": "#110D10",
"border": "#312B32",
"danger.background": "#cc241d",
"danger.active.background": "#cc241d",
"danger.foreground": "#282828",
"danger.hover.background": "#fb4934",
"foreground": "#F0DBC6",
"foreground": "#e3dbd3",
"input.border": "#504945",
"list.active.background": "#7F5B2128",
"list.active.border": "#D99832",
@ -26,8 +24,8 @@
"muted.background": "#3c3836",
"muted.foreground": "#878787",
"panel.background": "#282828",
"popover.background": "#1B1717",
"popover.foreground": "#ebdbb2",
"popover.background": "#110D10",
"popover.foreground": "#e3dbd3",
"primary.active.background": "#324a8f99",
"primary.background": "#324a8f",
"primary.foreground": "#c6cdf0",
@ -36,7 +34,7 @@
"scrollbar.thumb.background": "#504945",
"secondary.background": "#312C31",
"secondary.active.background": "#201B20",
"secondary.foreground": "#D5BBA3",
"secondary.foreground": "#e3dbd3",
"secondary.hover.background": "#3b353b",
"tab.active.background": "#110D10",
"tab.active.foreground": "#ebdbb2",

13
themes/matrix.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#003200",
"accent.foreground": "#00FF00",
"accordion.active.background": "#001900",
"accordion.hover.background": "#003200",
"background": "#020d02",
"border": "#12410E",
"window_border": "#156B12",
@ -50,13 +48,12 @@
"tab_bar.background": "#0D0208",
"title_bar.background": "#020d02",
"title_bar.border": "#12410E",
"base.red": "#23755a",
"base.green": "#82d967",
"base.yellow": "#ffd700",
"base.blue": "#3f5242",
"base.red": "#FF0000",
"base.green": "#00FF00",
"base.yellow": "#ffea00",
"base.blue": "#0000ff",
"base.magenta": "#FF00FF",
"base.magenta.light": "#FF00FF22",
"base.cyan": "#50b45a"
"base.cyan": "#00ffd5"
},
"highlight": {
"editor.foreground": "#88FF88",

4
themes/mellifluous.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#d5d5d5",
"accent.foreground": "#383a42",
"accordion.active.background": "#fafafa",
"accordion.hover.background": "#d5d5d5",
"background": "#E7E7E7",
"border": "#CACACA",
"danger.active.background": "#e06c75",
@ -159,8 +157,6 @@
"colors": {
"accent.background": "#292929",
"accent.foreground": "#abb2bf",
"accordion.active.background": "#282c34",
"accordion.hover.background": "#444444",
"background": "#1A1A1A",
"border": "#444444",
"card.background": "#282c34",

2
themes/molokai.json
View file

@ -145,8 +145,6 @@
"colors": {
"accent.background": "#2b2f30",
"accent.foreground": "#f8f8f2",
"accordion.active.background": "#1b1d1e",
"accordion.hover.background": "#2b2d2e",
"background": "#1b1d1e",
"border": "#3b3b3b",
"card.background": "#272822",

5
themes/solarized.json
View file

@ -10,9 +10,6 @@
"colors": {
"accent.background": "#EEE8D5",
"accent.foreground": "#073642",
"accordion.active.background": "#eee8d5",
"accordion.background": "#fdf6e3",
"accordion.hover.background": "#e0e0d0",
"background": "#FDF6E3",
"border": "#DCD4BC",
"foreground": "#586E75",
@ -155,8 +152,6 @@
"colors": {
"accent.background": "#15333A",
"accent.foreground": "#fdf6e3",
"accordion.active.background": "#073642",
"accordion.hover.background": "#073642",
"background": "#002B36",
"border": "#083e4c",
"card.background": "#002b36",

2
themes/spaceduck.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#1c1d39",
"accent.foreground": "#ecf0c1",
"accordion.active.background": "#003a5b",
"accordion.hover.background": "#4b6479",
"background": "#0F111B",
"border": "#272C42",
"foreground": "#ecf0c1",

6
themes/tokyonight.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#2C3045",
"accent.foreground": "#c0caf5",
"accordion.active.background": "#414868",
"accordion.hover.background": "#292e42",
"background": "#1a1b26",
"border": "#292e42",
"window_border": "#3d4462",
@ -151,8 +149,6 @@
"colors": {
"accent.background": "#414868",
"accent.foreground": "#c0caf5",
"accordion.active.background": "#414868",
"accordion.hover.background": "#292e42",
"background": "#24283b",
"border": "#3d4462",
"window_border": "#3d4462",
@ -287,8 +283,6 @@
"colors": {
"accent.background": "#32364E",
"accent.foreground": "#c0caf5",
"accordion.active.background": "#444b6a",
"accordion.hover.background": "#2d3149",
"background": "#222436",
"border": "#323752",
"window_border": "#404668",

2
themes/twilight.json
View file

@ -10,8 +10,6 @@
"colors": {
"accent.background": "#1F1F1F",
"accent.foreground": "#dcdcdc",
"accordion.active.background": "#1e1e1e",
"accordion.hover.background": "#3e3e3e",
"background": "#141414",
"border": "#3e3e3e",
"foreground": "#dcdcdc",