Cleanup theme vars (#6183)

* changes

* chaeneas

* add changeset

* lint

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
aliabid94 2023-10-31 04:30:18 -07:00 committed by GitHub
parent 86edc01995
commit cc341fc438
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 11 deletions

View File

@ -0,0 +1,6 @@
---
"@gradio/markdown": minor
"gradio": minor
---
feat:Cleanup theme vars

View File

@ -506,6 +506,8 @@ class Base(ThemeClass):
prose_text_size=None,
prose_text_weight=None,
prose_header_text_weight=None,
code_background_fill=None,
code_background_fill_dark=None,
# Shadows: These set the high-level shadow rendering styles. These variables are often referenced by other component-specific shadow variables.
shadow_drop=None,
shadow_drop_lg=None,
@ -566,8 +568,6 @@ class Base(ThemeClass):
section_header_text_size=None,
section_header_text_weight=None,
# Component Atoms: These set the style for elements within components.
chatbot_code_background_color=None,
chatbot_code_background_color_dark=None,
checkbox_background_color=None,
checkbox_background_color_dark=None,
checkbox_background_color_focus=None,
@ -747,6 +747,8 @@ class Base(ThemeClass):
prose_text_size: The text size used for markdown and other prose.
prose_text_weight: The text weight used for markdown and other prose.
prose_header_text_weight: The text weight of a header used for markdown and other prose.
code_background_fill: The background color of code blocks.
code_background_fill_dark: The background color of code blocks in dark mode.
shadow_drop: Drop shadow used by other shadowed items.
shadow_drop_lg: Larger drop shadow used by other shadowed items.
shadow_inset: Inset shadow used by other shadowed items.
@ -804,8 +806,6 @@ class Base(ThemeClass):
panel_border_width_dark: The border width of a panel 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).
chatbot_code_background_color: The background color of code blocks in the chatbot.
chatbot_code_background_color_dark: The background color of code blocks in the chatbot in dark mode.
checkbox_background_color: The background of a checkbox square or radio circle.
checkbox_background_color_dark: The background of a checkbox square or radio circle in dark mode.
checkbox_background_color_focus: The background of a checkbox square or radio circle when focused.
@ -1214,12 +1214,11 @@ class Base(ThemeClass):
or getattr(self, "border_color_accent_subdued_dark", "*border_color_accent")
)
# Component Atoms
self.chatbot_code_background_color = chatbot_code_background_color or getattr(
self, "chatbot_code_background_color", "*neutral_100"
self.code_background_fill = code_background_fill or getattr(
self, "code_background_fill", "*neutral_100"
)
self.chatbot_code_background_color_dark = (
chatbot_code_background_color_dark
or getattr(self, "chatbot_code_background_color_dark", "*neutral_800")
self.code_background_fill_dark = code_background_fill_dark or getattr(
self, "code_background_fill_dark", "*neutral_800"
)
self.checkbox_background_color = checkbox_background_color or getattr(
self, "checkbox_background_color", "*background_fill_primary"

View File

@ -65,7 +65,7 @@ th {
box-shadow: none;
border: none;
border-radius: var(--radius-md);
background-color: var(--chatbot-code-background-color);
background: var(--code-background-fill);
padding: var(--spacing-lg) var(--spacing-xl);
font-family: var(--font-mono);
/* font-size: var(--text-sm) !important; */
@ -90,7 +90,7 @@ th {
padding: 0.1em;
border-radius: var(--radius-xs);
white-space: normal;
background-color: var(--chatbot-code-background-color);
background: var(--code-background-fill);
border: 1px solid var(--panel-border-color);
padding: var(--spacing-xxs) var(--spacing-xs);
}