Updating theme

README.md

@@ -1,12 +1,17 @@
----
-title: MaybeRedsLikeRoses Theme
-emoji: 🏢
-colorFrom: pink
-colorTo: pink
-sdk: gradio
-sdk_version: 4.42.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+---
+tags: [gradio-theme]
+title: MaybeRedsLikeRoses-Theme
+colorFrom: red
+colorTo: purple
+sdk: gradio
+sdk_version: 4.42.0
+app_file: app.py
+pinned: false
+license: apache-2.0
+---
+# MaybeRedsLikeRoses-Theme
+## Description
+Add a description of this theme here!
+## Contributions
+Thanks to [@Ruby-NewLeaf](https://huggingface.co/Ruby-NewLeaf) for adding this gradio theme!

app.py

@@ -0,0 +1,139 @@
+import time
+
+import gradio as gr
+from gradio.themes.utils.theme_dropdown import create_theme_dropdown
+
+dropdown, js = create_theme_dropdown()
+
+with gr.Blocks(theme='Ruby-NewLeaf/MaybeRedsLikeRoses-Theme') as demo:
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=10):
+            gr.Markdown(
+                """
+                # Theme preview: `MaybeRedsLikeRoses-Theme`
+                To use this theme, set `theme='Ruby-NewLeaf/MaybeRedsLikeRoses-Theme'` in `gr.Blocks()` or `gr.Interface()`.
+                You can append an `@` and a semantic version expression, e.g. @>=1.0.0,<2.0.0 to pin to a given version
+                of this theme.
+                """
+            )
+        with gr.Column(scale=3):
+            with gr.Group():
+                dropdown.render()
+                toggle_dark = gr.Button(value="Toggle Dark")
+
+    dropdown.change(None, dropdown, None, js=js)
+    toggle_dark.click(
+        None,
+        js="""
+        () => {
+            document.body.classList.toggle('dark');
+        }
+        """,
+    )
+
+    name = gr.Textbox(
+        label="Name",
+        info="Full name, including middle name. No special characters.",
+        placeholder="John Doe",
+        value="John Doe",
+        interactive=True,
+    )
+
+    with gr.Row():
+        slider1 = gr.Slider(label="Slider 1")
+        slider2 = gr.Slider(label="Slider 2")
+    gr.CheckboxGroup(["A", "B", "C"], label="Checkbox Group")
+
+    with gr.Row():
+        with gr.Column(variant="panel", scale=1):
+            gr.Markdown("## Panel 1")
+            radio = gr.Radio(
+                ["A", "B", "C"],
+                label="Radio",
+                info="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+            )
+            drop = gr.Dropdown(["Option 1", "Option 2", "Option 3"], show_label=False)
+            drop_2 = gr.Dropdown(
+                ["Option A", "Option B", "Option C"],
+                multiselect=True,
+                value=["Option A"],
+                label="Dropdown",
+                interactive=True,
+            )
+            check = gr.Checkbox(label="Go")
+        with gr.Column(variant="panel", scale=2):
+            img = gr.Image(
+                "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg",
+                label="Image",
+                height=320,
+            )
+            with gr.Row():
+                go_btn = gr.Button("Go", variant="primary")
+                clear_btn = gr.Button("Clear", variant="secondary")
+
+                def go(*_args):
+                    time.sleep(3)
+                    return "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
+
+                go_btn.click(go, [radio, drop, drop_2, check, name], img, api_name="go")
+
+                def clear():
+                    time.sleep(0.2)
+
+                clear_btn.click(clear, None, img)
+
+            with gr.Row():
+                btn1 = gr.Button("Button 1", size="sm")
+                btn2 = gr.UploadButton(size="sm")
+                stop_btn = gr.Button("Stop", size="sm", variant="stop")
+
+    with gr.Row():
+        gr.Dataframe(value=[[1, 2, 3], [4, 5, 6], [7, 8, 9]], label="Dataframe")
+        gr.JSON(
+            value={"a": 1, "b": 2, "c": {"test": "a", "test2": [1, 2, 3]}}, label="JSON"
+        )
+        gr.Label(value={"cat": 0.7, "dog": 0.2, "fish": 0.1})
+        gr.File()
+    with gr.Row():
+        gr.ColorPicker()
+        gr.Video("https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4")
+        gr.Gallery(
+            [
+                (
+                    "https://gradio-static-files.s3.us-west-2.amazonaws.com/lion.jpg",
+                    "lion",
+                ),
+                (
+                    "https://gradio-static-files.s3.us-west-2.amazonaws.com/logo.png",
+                    "logo",
+                ),
+                (
+                    "https://gradio-static-files.s3.us-west-2.amazonaws.com/tower.jpg",
+                    "tower",
+                ),
+            ],
+            height=200,
+        )
+
+    with gr.Row():
+        with gr.Column(scale=2):
+            chatbot = gr.Chatbot([("Hello", "Hi")], label="Chatbot")
+            chat_btn = gr.Button("Add messages")
+
+            chat_btn.click(
+                lambda history: history
+                + [["How are you?", "I am good."]]
+                + (time.sleep(2) or []),
+                chatbot,
+                chatbot,
+            )
+        with gr.Column(scale=1):
+            with gr.Accordion("Advanced Settings"):
+                gr.Markdown("Hello")
+                gr.Number(label="Chatbot control 1")
+                gr.Number(label="Chatbot control 2")
+                gr.Number(label="Chatbot control 3")
+
+
+if __name__ == "__main__":
+    demo.queue().launch()

themes/[email protected]

@@ -0,0 +1 @@
+{"theme": {"_font": [{"__gradio_font__": true, "name": "Sora", "class": "google"}, {"__gradio_font__": true, "name": "Arimo", "class": "font"}, {"__gradio_font__": true, "name": "system-ui", "class": "font"}, {"__gradio_font__": true, "name": "sans-serif", "class": "font"}], "_font_mono": [{"__gradio_font__": true, "name": "Cascadia Code", "class": "google"}, {"__gradio_font__": true, "name": "ui-monospace", "class": "font"}, {"__gradio_font__": true, "name": "Consolas", "class": "font"}, {"__gradio_font__": true, "name": "monospace", "class": "font"}], "_stylesheets": ["https://fonts.googleapis.com/css2?family=Sora:wght@400;600&display=swap", "https://fonts.googleapis.com/css2?family=Cascadia+Code:wght@400;600&display=swap"], "accordion_text_color": "*body_text_color", "accordion_text_color_dark": "*body_text_color", "background_fill_primary": "*secondary_950", "background_fill_primary_dark": "*secondary_950", "background_fill_secondary": "repeating-radial-gradient(274px 708px at -189px 113px, #B1537B0D 0%, #073AFF00 99%),repeating-conic-gradient(from 105deg at 45px -600px, #DD151500 96%, #4D36BC0D 100%),linear-gradient(90deg, #4B375188 0%, #3B253C88 32%, #45283688 72%, #47263688 99%),radial-gradient(75% 75% at 50% 50%, #000000FF 0%, #000000FF 100%);", "background_fill_secondary_dark": "repeating-radial-gradient(274px 708px at -189px 113px, #B1537B0D 0%, #073AFF00 99%),repeating-conic-gradient(from 105deg at 45px -600px, #DD151500 96%, #4D36BC0D 100%),linear-gradient(90deg, #4B375188 0%, #3B253C88 32%, #45283688 72%, #47263688 99%),radial-gradient(75% 75% at 50% 50%, #000000FF 0%, #000000FF 100%);", "block_background_fill": "*neutral_800", "block_background_fill_dark": "*neutral_800", "block_border_color": "*border_color_primary", "block_border_color_dark": "*border_color_primary", "block_border_width": "1px", "block_border_width_dark": "1px", "block_info_text_color": "*secondary_400", "block_info_text_color_dark": "*secondary_400", "block_info_text_size": "*text_sm", "block_info_text_weight": "400", "block_label_background_fill": "linear-gradient(180deg, #301B30FF 0%, #361F36FF 14%, #2B1E2800 53%, #2B1E2800 73%, #481838FF 96%),repeating-conic-gradient(from 1deg at 50% 0%, #FFFFFF00 53%, #60009E08 55%, #471A3724 68%, #911E3D21 84%, #FFFFFF00 92%),linear-gradient(0deg, #352A35FF 80%, #523246FF 90%);", "block_label_background_fill_dark": "linear-gradient(180deg, #301B30FF 0%, #361F36FF 14%, #2B1E2800 53%, #2B1E2800 73%, #481838FF 96%),repeating-conic-gradient(from 1deg at 50% 0%, #FFFFFF00 53%, #60009E08 55%, #471A3724 68%, #911E3D21 84%, #FFFFFF00 92%),linear-gradient(0deg, #352A35FF 80%, #523246FF 90%);", "block_label_border_color": "*secondary_600", "block_label_border_color_dark": "*secondary_600", "block_label_border_width": "2px", "block_label_border_width_dark": "2px", "block_label_margin": "2px", "block_label_padding": "*spacing_sm *spacing_lg", "block_label_radius": "2px", "block_label_right_radius": "2px", "block_label_shadow": "*shadow_drop", "block_label_text_color": "*neutral_50", "block_label_text_color_dark": "*neutral_50", "block_label_text_size": "*text_xs", "block_label_text_weight": "400", "block_padding": "8px 6px", "block_radius": "2px", "block_shadow": "*shadow_drop", "block_shadow_dark": "*shadow_drop", "block_title_background_fill": "linear-gradient(180deg, #301B30FF 0%, #361F36FF 14%, #2B1E2800 53%, #2B1E2800 73%, #481838FF 96%),repeating-conic-gradient(from 1deg at 50% 0%, #FFFFFF00 53%, #60009E08 55%, #471A3724 68%, #911E3D21 84%, #FFFFFF00 92%),linear-gradient(0deg, #352A35FF 80%, #523246FF 90%);", "block_title_background_fill_dark": "linear-gradient(180deg, #301B30FF 0%, #361F36FF 14%, #2B1E2800 53%, #2B1E2800 73%, #481838FF 96%),repeating-conic-gradient(from 1deg at 50% 0%, #FFFFFF00 53%, #60009E08 55%, #471A3724 68%, #911E3D21 84%, #FFFFFF00 92%),linear-gradient(0deg, #352A35FF 80%, #523246FF 90%);", "block_title_border_color": "*secondary_600", "block_title_border_color_dark": "*secondary_600", "block_title_border_width": "1px", "block_title_border_width_dark": "1px", "block_title_padding": "*spacing_sm *spacing_lg", "block_title_radius": "*table_radius", "block_title_text_color": "*secondary_50", "block_title_text_color_dark": "*secondary_50", "block_title_text_size": "*text_md", "block_title_text_weight": "400", "body_background_fill": "*neutral_950", "body_background_fill_dark": "*neutral_950", "body_text_color": "*secondary_50", "body_text_color_dark": "*secondary_50", "body_text_color_subdued": "*secondary_500", "body_text_color_subdued_dark": "*secondary_500", "body_text_size": "*text_sm", "body_text_weight": "400", "border_color_accent": "*secondary_700", "border_color_accent_dark": "*secondary_700", "border_color_accent_subdued": "*secondary_950", "border_color_accent_subdued_dark": "*secondary_950", "border_color_primary": "*neutral_600", "border_color_primary_dark": "*neutral_600", "button_border_width": "1px", "button_border_width_dark": "1px", "button_cancel_background_fill": "#bb3300", "button_cancel_background_fill_dark": "#bb3300", "button_cancel_background_fill_hover": "*button_cancel_background_fill", "button_cancel_background_fill_hover_dark": "*button_primary_background_fill_hover", "button_cancel_border_color": "*button_primary_border_color", "button_cancel_border_color_dark": "*button_secondary_border_color", "button_cancel_border_color_hover": "*button_cancel_border_color", "button_cancel_border_color_hover_dark": "*button_cancel_border_color", "button_cancel_text_color": "*button_secondary_text_color", "button_cancel_text_color_dark": "*button_secondary_text_color", "button_cancel_text_color_hover": "*button_cancel_text_color", "button_cancel_text_color_hover_dark": "*button_cancel_text_color", "button_large_padding": "*spacing_lg calc(2 * *spacing_lg)", "button_large_radius": "*radius_lg", "button_large_text_size": "*text_lg", "button_large_text_weight": "600", "button_primary_background_fill": "*primary_700", "button_primary_background_fill_dark": "*primary_600", "button_primary_background_fill_hover": "*primary_500", "button_primary_background_fill_hover_dark": "*primary_500", "button_primary_border_color": "*primary_300", "button_primary_border_color_dark": "*primary_300", "button_primary_border_color_hover": "*button_primary_border_color", "button_primary_border_color_hover_dark": "*button_primary_border_color", "button_primary_text_color": "*secondary_50", "button_primary_text_color_dark": "*secondary_50", "button_primary_text_color_hover": "*button_primary_text_color", "button_primary_text_color_hover_dark": "*button_primary_text_color", "button_secondary_background_fill": "*secondary_800", "button_secondary_background_fill_dark": "*secondary_800", "button_secondary_background_fill_hover": "*secondary_400", "button_secondary_background_fill_hover_dark": "*secondary_400", "button_secondary_border_color": "*secondary_500", "button_secondary_border_color_dark": "*secondary_500", "button_secondary_border_color_hover": "*primary_500", "button_secondary_border_color_hover_dark": "*button_secondary_border_color", "button_secondary_text_color": "*neutral_200", "button_secondary_text_color_dark": "*neutral_200", "button_secondary_text_color_hover": "*secondary_50", "button_secondary_text_color_hover_dark": "*secondary_50", "button_shadow": "*shadow_drop", "button_shadow_active": "*shadow_inset", "button_shadow_hover": "*shadow_drop_lg", "button_small_padding": "*spacing_sm calc(2 * *spacing_sm)", "button_small_radius": "*radius_lg", "button_small_text_size": "*text_md", "button_small_text_weight": "400", "button_transition": "all 1s cubic-bezier(.07,1.63,.67,1)", "checkbox_background_color": "*neutral_900", "checkbox_background_color_dark": "*neutral_900", "checkbox_background_color_focus": "*secondary_800", "checkbox_background_color_focus_dark": "*secondary_800", "checkbox_background_color_hover": "*primary_800", "checkbox_background_color_hover_dark": "*primary_800", "checkbox_background_color_selected": "*primary_600", "checkbox_background_color_selected_dark": "*primary_600", "checkbox_border_color": "*neutral_500", "checkbox_border_color_dark": "*neutral_500", "checkbox_border_color_focus": "*neutral_500", "checkbox_border_color_focus_dark": "*neutral_500", "checkbox_border_color_hover": "*secondary_500", "checkbox_border_color_hover_dark": "*secondary_500", "checkbox_border_color_selected": "*secondary_700", "checkbox_border_color_selected_dark": "*secondary_700", "checkbox_border_radius": "*radius_sm", "checkbox_border_width": "*input_border_width", "checkbox_border_width_dark": "*input_border_width", "checkbox_check": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")", "checkbox_label_background_fill": "*neutral_500", "checkbox_label_background_fill_dark": "*neutral_500", "checkbox_label_background_fill_hover": "*button_secondary_background_fill_hover", "checkbox_label_background_fill_hover_dark": "*button_secondary_background_fill_hover", "checkbox_label_background_fill_selected": "*secondary_800", "checkbox_label_background_fill_selected_dark": "*secondary_800", "checkbox_label_border_color": "*neutral_500", "checkbox_label_border_color_dark": "*neutral_500", "checkbox_label_border_color_hover": "*secondary_500", "checkbox_label_border_color_hover_dark": "*secondary_500", "checkbox_label_border_width": "1px", "checkbox_label_border_width_dark": "1px", "checkbox_label_gap": "*spacing_lg", "checkbox_label_padding": "*spacing_md calc(2 * *spacing_md)", "checkbox_label_shadow": "*shadow_drop", "checkbox_label_text_color": "*body_text_color", "checkbox_label_text_color_dark": "*body_text_color", "checkbox_label_text_color_selected": "*checkbox_label_text_color", "checkbox_label_text_color_selected_dark": "*checkbox_label_text_color", "checkbox_label_text_size": "*text_md", "checkbox_label_text_weight": "400", "checkbox_shadow": "*input_shadow", "code_background_fill": "*neutral_800", "code_background_fill_dark": "*neutral_800", "color_accent": "*primary_800", "color_accent_soft": "*primary_900", "color_accent_soft_dark": "*primary_900", "container_radius": "*radius_lg", "embed_radius": "*radius_xs", "error_background_fill": "*background_fill_primary", "error_background_fill_dark": "*background_fill_primary", "error_border_color": "#ef4444", "error_border_color_dark": "#ef4444", "error_border_width": "1px", "error_border_width_dark": "1px", "error_icon_color": "#ef4444", "error_icon_color_dark": "#ef4444", "error_text_color": "#fef2f2", "error_text_color_dark": "#fef2f2", "font": "'Sora', 'Arimo', 'system-ui', sans-serif", "font_mono": "'Cascadia Code', 'ui-monospace', 'Consolas', monospace", "form_gap_width": "*spacing_xxs", "input_background_fill": "*neutral_700", "input_background_fill_dark": "*neutral_700", "input_background_fill_focus": "*neutral_950", "input_background_fill_focus_dark": "*neutral_950", "input_background_fill_hover": "*neutral_950", "input_background_fill_hover_dark": "*neutral_950", "input_border_color": "*neutral_400", "input_border_color_dark": "*neutral_400", "input_border_color_focus": "*primary_400", "input_border_color_focus_dark": "*primary_400", "input_border_color_hover": "*primary_500", "input_border_color_hover_dark": "*primary_500", "input_border_width": "1px", "input_border_width_dark": "1px", "input_padding": "*spacing_xl", "input_placeholder_color": "*neutral_500", "input_placeholder_color_dark": "*neutral_500", "input_radius": "*radius_lg", "input_shadow": "*shadow_drop", "input_shadow_dark": "*shadow_drop", "input_shadow_focus": "*input_shadow", "input_shadow_focus_dark": "*input_shadow", "input_text_size": "*text_md", "input_text_weight": "400", "layout_gap": "*spacing_xxl", "link_text_color": "*primary_400", "link_text_color_active": "*secondary_300", "link_text_color_active_dark": "*secondary_300", "link_text_color_dark": "*primary_400", "link_text_color_hover": "*primary_200", "link_text_color_hover_dark": "*primary_200", "link_text_color_visited": "*secondary_600", "link_text_color_visited_dark": "*secondary_600", "loader_color": "*primary_500", "loader_color_dark": "*primary_500", "name": "Ruby-NewLeaf/MaybeRedsLikeRoses", "neutral_100": "#f5f4f6", "neutral_200": "#e6e3e8", "neutral_300": "#d4d0d7", "neutral_400": "#a59cab", "neutral_50": "#fcfcff", "neutral_500": "#756a7c", "neutral_600": "#544b58", "neutral_700": "#423a45", "neutral_800": "#27232a", "neutral_900": "#1a171c", "neutral_950": "#0d0b0e", "panel_background_fill": "linear-gradient(180deg, #52324600 29%, #352A3500 75%, #0d0b0e 100%),repeating-radial-gradient(768px 512px at 155% 120%, #FFE50105 73%, #FF000005 92%),repeating-conic-gradient(from 23deg at 100% -50%, #DDA41500 96%, #FFDD0005 100%),linear-gradient(0deg, #2B1E2800 1%, #211521FF 22%, #2B1E2800 70%),linear-gradient(180deg, #523246FF 3%, #352A35FF 75%, #0d0b0e 100%);", "panel_background_fill_dark": "linear-gradient(180deg, #52324600 29%, #352A3500 75%, #0d0b0e 100%),repeating-radial-gradient(768px 512px at 155% 120%, #FFE50105 73%, #FF000005 92%),repeating-conic-gradient(from 23deg at 100% -50%, #DDA41500 96%, #FFDD0005 100%),linear-gradient(0deg, #2B1E2800 1%, #211521FF 22%, #2B1E2800 70%),linear-gradient(180deg, #523246FF 3%, #352A35FF 75%, #0d0b0e 100%);", "panel_border_color": "*border_color_primary", "panel_border_color_dark": "*border_color_primary", "panel_border_width": "1px", "panel_border_width_dark": "1px", "primary_100": "#ffe5ea", "primary_200": "#fecdd5", "primary_300": "#fda5b4", "primary_400": "#fb6f86", "primary_50": "#fffffc", "primary_500": "#f43f5e", "primary_600": "#d92653", "primary_700": "#ad2552", "primary_800": "#7a1f40", "primary_900": "#58132f", "primary_950": "#3e0f22", "prose_header_text_weight": "600", "prose_text_size": "*text_md", "prose_text_weight": "400", "radio_circle": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\")", "radius_lg": "2px", "radius_md": "2px", "radius_sm": "0px", "radius_xl": "2px", "radius_xs": "0px", "radius_xxl": "6px", "radius_xxs": "0px", "secondary_100": "#f3d8e0", "secondary_200": "#e6b7c6", "secondary_300": "#e29cb4", "secondary_400": "#ca7290", "secondary_50": "#fafeff", "secondary_500": "#b36183", "secondary_600": "#a24e78", "secondary_700": "#8d3f6b", "secondary_800": "#6b2e55", "secondary_900": "#471f3b", "secondary_950": "#1a0f17", "section_header_text_size": "*text_sm", "section_header_text_weight": "400", "shadow_drop": "rgba(0,0,0,0.15) 0px 2px 4px 0px", "shadow_drop_lg": "rgba(0,0,0,0.15) 0px 2px 4px 2px", "shadow_inset": "rgba(0,0,0,0.15) 0px 4px 6px 2px inset", "shadow_spread": "3px", "shadow_spread_dark": "3px", "slider_color": "*primary_500", "slider_color_dark": "*primary_500", "spacing_lg": "5px", "spacing_md": "4px", "spacing_sm": "2px", "spacing_xl": "6px", "spacing_xs": "2px", "spacing_xxl": "8px", "spacing_xxs": "1px", "stat_background_fill": "*primary_500", "stat_background_fill_dark": "*primary_500", "table_border_color": "*neutral_700", "table_border_color_dark": "*neutral_700", "table_even_background_fill": "*neutral_950", "table_even_background_fill_dark": "*neutral_950", "table_odd_background_fill": "*neutral_900", "table_odd_background_fill_dark": "*neutral_900", "table_radius": "*radius_lg", "table_row_focus": "*color_accent_soft", "table_row_focus_dark": "*color_accent_soft", "table_text_color": "*body_text_color", "table_text_color_dark": "*body_text_color", "text_lg": "14px", "text_md": "14px", "text_sm": "13px", "text_xl": "16px", "text_xs": "12px", "text_xxl": "18px", "text_xxs": "11px"}, "version": "1.0.0"}