From 2d705bcf7475eb46822358fed21dc081a800a73d Mon Sep 17 00:00:00 2001 From: Hannah Date: Tue, 21 May 2024 23:52:38 +0100 Subject: [PATCH] Add body color to `gr.Accordion` (#8284) * add color to body * add changeset * add accordion_text_color var * change default to body_text_color --------- Co-authored-by: gradio-pr-bot --- .changeset/open-rice-nail.md | 6 ++++++ gradio/themes/base.py | 10 ++++++++++ gradio/themes/monochrome.py | 2 ++ js/accordion/shared/Accordion.svelte | 1 + 4 files changed, 19 insertions(+) create mode 100644 .changeset/open-rice-nail.md diff --git a/.changeset/open-rice-nail.md b/.changeset/open-rice-nail.md new file mode 100644 index 0000000000..a42ed393e9 --- /dev/null +++ b/.changeset/open-rice-nail.md @@ -0,0 +1,6 @@ +--- +"@gradio/accordion": patch +"gradio": patch +--- + +fix:Add body color to `gr.Accordion` diff --git a/gradio/themes/base.py b/gradio/themes/base.py index c5463bbef8..5305ce689a 100644 --- a/gradio/themes/base.py +++ b/gradio/themes/base.py @@ -586,6 +586,8 @@ class Base(ThemeClass): section_header_text_size=None, section_header_text_weight=None, # Component Atoms: These set the style for elements within components. + accordion_text_color=None, + accordion_text_color_dark=None, checkbox_background_color=None, checkbox_background_color_dark=None, checkbox_background_color_focus=None, @@ -822,6 +824,8 @@ class Base(ThemeClass): panel_border_color_dark: The border color of a panel in dark mode. panel_border_width: The border width of a panel. panel_border_width_dark: The border width of a panel in dark mode. + accordion_text_color: The body text color in the accordion. + accordion_text_color_dark: The body text color in the accordion in dark mode. section_header_text_size: The text size of a section header (e.g. tab name). section_header_text_weight: The text weight of a section header (e.g. tab name). checkbox_background_color: The background of a checkbox square or radio circle. @@ -1051,6 +1055,12 @@ class Base(ThemeClass): self.body_text_color_subdued_dark = body_text_color_subdued_dark or getattr( self, "body_text_color_subdued_dark", "*neutral_400" ) + self.accordion_text_color = accordion_text_color or getattr( + self, "accordion_text_color", "*body_text_color" + ) + self.accordion_text_color_dark = accordion_text_color_dark or getattr( + self, "accordion_text_color_dark", "*body_text_color" + ) # Shadows self.shadow_drop = shadow_drop or getattr( self, "shadow_drop", "rgba(0,0,0,0.05) 0px 1px 2px 0px" diff --git a/gradio/themes/monochrome.py b/gradio/themes/monochrome.py index 1f39ce4935..e827f48b0f 100644 --- a/gradio/themes/monochrome.py +++ b/gradio/themes/monochrome.py @@ -44,6 +44,8 @@ class Monochrome(Base): # Colors slider_color="*neutral_900", slider_color_dark="*neutral_500", + accordion_text_color="*body_text_color*", + accordion_text_color_dark="*body_text_color_dark*", body_text_color="*neutral_900", block_label_text_color="*body_text_color", block_title_text_color="*body_text_color", diff --git a/js/accordion/shared/Accordion.svelte b/js/accordion/shared/Accordion.svelte index dd763ed5d4..621c6845c0 100644 --- a/js/accordion/shared/Accordion.svelte +++ b/js/accordion/shared/Accordion.svelte @@ -23,6 +23,7 @@ justify-content: space-between; cursor: pointer; width: var(--size-full); + color: var(--accordion-text-color); } .label-wrap.open { margin-bottom: var(--size-2);