add

theme_dropdown.py

@@ -0,0 +1,57 @@
+import os
+import pathlib
+
+from gradio.themes.utils import ThemeAsset
+
+
+def create_theme_dropdown():
+    import gradio as gr
+
+    asset_path = pathlib.Path(__file__).parent / "themes"
+    themes = []
+    for theme_asset in os.listdir(str(asset_path)):
+        themes.append(
+            (ThemeAsset(theme_asset), gr.Theme.load(str(asset_path / theme_asset)))
+        )
+
+    def make_else_if(theme_asset):
+        return f"""
+        else if (theme == '{str(theme_asset[0].version)}') {{
+            var theme_css = `{theme_asset[1]._get_theme_css()}`
+        }}"""
+
+    head, tail = themes[0], themes[1:]
+    if_statement = f"""
+        if (theme == "{str(head[0].version)}") {{
+            var theme_css = `{head[1]._get_theme_css()}`
+        }} {" ".join(make_else_if(t) for t in tail)}
+    """
+
+    latest_to_oldest = sorted([t[0] for t in themes], key=lambda asset: asset.version)[
+        ::-1
+    ]
+    latest_to_oldest = [str(t.version) for t in latest_to_oldest]
+
+    component = gr.Dropdown(
+        choices=latest_to_oldest,
+        value=latest_to_oldest[0],
+        render=False,
+        label="Select Version",
+    ).style(container=False)
+
+    return (
+        component,
+        f"""
+        (theme) => {{
+            if (!document.querySelector('.theme-css')) {{
+                var theme_elem = document.createElement('style');
+                theme_elem.classList.add('theme-css');
+                document.head.appendChild(theme_elem);
+            }} else {{
+                var theme_elem = document.querySelector('.theme-css');
+            }}
+            {if_statement}
+            theme_elem.innerHTML = theme_css;
+        }}
+    """,
+    )

themes/[email protected]

@@ -0,0 +1,358 @@
+{
+  "theme": {
+    "_font": [
+      {
+        "__gradio_font__": true,
+        "name": "Source Sans Pro",
+        "class": "google"
+      },
+      {
+        "__gradio_font__": true,
+        "name": "ui-sans-serif",
+        "class": "font"
+      },
+      {
+        "__gradio_font__": true,
+        "name": "system-ui",
+        "class": "font"
+      },
+      {
+        "__gradio_font__": true,
+        "name": "sans-serif",
+        "class": "font"
+      }
+    ],
+    "_font_mono": [
+      {
+        "__gradio_font__": true,
+        "name": "IBM Plex Mono",
+        "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=Noto+Sans+KR:wght@500&display=swap",
+      "https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap"
+    ],
+    "background_fill_primary": "white",
+    "background_fill_primary_dark": "*neutral_950",
+    "background_fill_secondary": "*neutral_50",
+    "background_fill_secondary_dark": "*neutral_900",
+    "block_background_fill": "white",
+    "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": "*body_text_color_subdued",
+    "block_info_text_color_dark": "*body_text_color_subdued",
+    "block_info_text_size": "*text_sm",
+    "block_info_text_weight": "normal",
+    "block_label_background_fill": "*krew_grey_1_lighter_95",
+    "block_label_background_fill_dark": "*background_fill_secondary",
+    "block_label_border_color": "*border_color_primary",
+    "block_label_border_color_dark": "*border_color_primary",
+    "block_label_border_width": "1px",
+    "block_label_border_width_dark": "1px",
+    "block_label_margin": "0",
+    "block_label_padding": "*spacing_sm *spacing_lg",
+    "block_label_radius": "calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px) 0",
+    "block_label_right_radius": "0 calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px)",
+    "block_label_text_color": "*neutral_500",
+    "block_label_text_color_dark": "*neutral_200",
+    "block_label_text_size": "*text_sm",
+    "block_label_text_weight": "normal",
+    "block_padding": "*spacing_xl calc(*spacing_xl + 2px)",
+    "block_radius": "*radius_lg",
+    "block_shadow": "none",
+    "block_shadow_dark": "none",
+    "block_title_background_fill": "none",
+    "block_title_background_fill_dark": "none",
+    "block_title_border_color": "none",
+    "block_title_border_color_dark": "none",
+    "block_title_border_width": "0px",
+    "block_title_border_width_dark": "0px",
+    "block_title_padding": "0",
+    "block_title_radius": "none",
+    "block_title_text_color": "*neutral_500",
+    "block_title_text_color_dark": "*neutral_200",
+    "block_title_text_size": "*text_md",
+    "block_title_text_weight": "normal",
+    "body_background_fill": "*background_fill_primary",
+    "body_background_fill_dark": "*background_fill_primary",
+    "body_text_color": "*neutral_800",
+    "body_text_color_dark": "*neutral_100",
+    "body_text_color_subdued": "*neutral_400",
+    "body_text_color_subdued_dark": "*neutral_400",
+    "body_text_size": "*text_md",
+    "body_text_weight": "normal",
+    "border_color_accent": "*krew_yellow_1_lighter_30",
+    "border_color_accent_dark": "*neutral_600",
+    "border_color_primary": "*neutral_200",
+    "border_color_primary_dark": "*neutral_700",
+    "button_border_width": "*input_border_width",
+    "button_border_width_dark": "*input_border_width",
+    "button_cancel_background_fill": "*krew_yellow_1_lighter_40",
+    "button_cancel_background_fill_dark": "*button_secondary_background_fill",
+    "button_cancel_background_fill_hover": "*krew_yellow_1",
+    "button_cancel_background_fill_hover_dark": "*button_cancel_background_fill",
+    "button_cancel_border_color": "*button_secondary_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": "*krew_yellow_2_lighter_30",
+    "button_primary_background_fill_dark": "*primary_700",
+    "button_primary_background_fill_hover": "*krew_yellow_2",
+    "button_primary_background_fill_hover_dark": "*button_primary_background_fill",
+    "button_primary_border_color": "*primary_200",
+    "button_primary_border_color_dark": "*primary_600",
+    "button_primary_border_color_hover": "*button_primary_border_color",
+    "button_primary_border_color_hover_dark": "*button_primary_border_color",
+    "button_primary_text_color": "*krew_yellow_2_darker_60",
+    "button_primary_text_color_dark": "white",
+    "button_primary_text_color_hover": "*button_primary_text_color",
+    "button_primary_text_color_hover_dark": "*button_primary_text_color",
+    "button_secondary_background_fill": "*krew_yellow_1_lighter_40",
+    "button_secondary_background_fill_dark": "*neutral_600",
+    "button_secondary_background_fill_hover": "*krew_yellow_1",
+    "button_secondary_background_fill_hover_dark": "*button_secondary_background_fill",
+    "button_secondary_border_color": "*neutral_200",
+    "button_secondary_border_color_dark": "*neutral_600",
+    "button_secondary_border_color_hover": "*button_secondary_border_color",
+    "button_secondary_border_color_hover_dark": "*button_secondary_border_color",
+    "button_secondary_text_color": "*krew_yellow_1_darker_60",
+    "button_secondary_text_color_dark": "white",
+    "button_secondary_text_color_hover": "*button_secondary_text_color",
+    "button_secondary_text_color_hover_dark": "*button_secondary_text_color",
+    "button_shadow": "none",
+    "button_shadow_active": "none",
+    "button_shadow_hover": "none",
+    "button_small_padding": "*spacing_sm calc(2 * *spacing_sm)",
+    "button_small_radius": "*radius_lg",
+    "button_small_text_size": "*text_md",
+    "button_small_text_weight": "normal",
+    "button_transition": "background-color 0.2s ease",
+    "checkbox_background_color": "white",
+    "checkbox_background_color_dark": "*neutral_800",
+    "checkbox_background_color_focus": "white",
+    "checkbox_background_color_focus_dark": "*checkbox_background_color",
+    "checkbox_background_color_hover": "*checkbox_background_color",
+    "checkbox_background_color_hover_dark": "*checkbox_background_color",
+    "checkbox_background_color_selected": "*krew_yellow_2",
+    "checkbox_background_color_selected_dark": "*secondary_600",
+    "checkbox_border_color": "*neutral_300",
+    "checkbox_border_color_dark": "*neutral_700",
+    "checkbox_border_color_focus": "*neutral_300",
+    "checkbox_border_color_focus_dark": "*secondary_500",
+    "checkbox_border_color_hover": "*neutral_300",
+    "checkbox_border_color_hover_dark": "*neutral_600",
+    "checkbox_border_color_selected": "*krew_yellow_2",
+    "checkbox_border_color_selected_dark": "*secondary_600",
+    "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": "*krew_yellow_1_lighter_40",
+    "checkbox_label_background_fill_dark": "*button_secondary_background_fill",
+    "checkbox_label_background_fill_hover": "*krew_yellow_1",
+    "checkbox_label_background_fill_hover_dark": "*button_secondary_background_fill_hover",
+    "checkbox_label_background_fill_selected": "*krew_yellow_1",
+    "checkbox_label_background_fill_selected_dark": "*checkbox_label_background_fill",
+    "checkbox_label_border_color": "*border_color_primary",
+    "checkbox_label_border_color_dark": "*border_color_primary",
+    "checkbox_label_border_color_hover": "*checkbox_label_border_color",
+    "checkbox_label_border_color_hover_dark": "*checkbox_label_border_color",
+    "checkbox_label_border_width": "*input_border_width",
+    "checkbox_label_border_width_dark": "*input_border_width",
+    "checkbox_label_gap": "*spacing_lg",
+    "checkbox_label_padding": "*spacing_md calc(2 * *spacing_md)",
+    "checkbox_label_shadow": "none",
+    "checkbox_label_text_color": "*krew_yellow_1_darker_60",
+    "checkbox_label_text_color_dark": "*body_text_color",
+    "checkbox_label_text_color_selected": "*krew_yellow_2_darker_60",
+    "checkbox_label_text_color_selected_dark": "*checkbox_label_text_color",
+    "checkbox_label_text_size": "*text_md",
+    "checkbox_label_text_weight": "normal",
+    "checkbox_shadow": "*input_shadow",
+    "color_accent": "*krew_yellow_2",
+    "color_accent_soft": "*krew_yellow_1_lighter_60",
+    "color_accent_soft_dark": "*neutral_700",
+    "container_radius": "*radius_lg",
+    "embed_radius": "*radius_lg",
+    "error_background_fill": "#fee2e2",
+    "error_background_fill_dark": "*background_fill_primary",
+    "error_border_color": "#fecaca",
+    "error_border_color_dark": "*border_color_primary",
+    "error_border_width": "1px",
+    "error_border_width_dark": "1px",
+    "error_text_color": "#ef4444",
+    "error_text_color_dark": "#ef4444",
+    "font": "'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif",
+    "font_mono": "'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace",
+    "form_gap_width": "0px",
+    "input_background_fill": "*neutral_100",
+    "input_background_fill_dark": "*neutral_700",
+    "input_background_fill_focus": "*secondary_500",
+    "input_background_fill_focus_dark": "*secondary_600",
+    "input_background_fill_hover": "*input_background_fill",
+    "input_background_fill_hover_dark": "*input_background_fill",
+    "input_border_color": "*border_color_primary",
+    "input_border_color_dark": "*border_color_primary",
+    "input_border_color_focus": "*secondary_300",
+    "input_border_color_focus_dark": "*neutral_700",
+    "input_border_color_hover": "*input_border_color",
+    "input_border_color_hover_dark": "*input_border_color",
+    "input_border_width": "0px",
+    "input_border_width_dark": "0px",
+    "input_padding": "*spacing_xl",
+    "input_placeholder_color": "*neutral_400",
+    "input_placeholder_color_dark": "*neutral_500",
+    "input_radius": "*radius_lg",
+    "input_shadow": "none",
+    "input_shadow_dark": "none",
+    "input_shadow_focus": "*input_shadow",
+    "input_shadow_focus_dark": "*input_shadow",
+    "input_text_size": "*text_md",
+    "input_text_weight": "normal",
+    "layout_gap": "*spacing_xxl",
+    "link_text_color": "*secondary_600",
+    "link_text_color_active": "*secondary_600",
+    "link_text_color_active_dark": "*secondary_500",
+    "link_text_color_dark": "*secondary_500",
+    "link_text_color_hover": "*secondary_700",
+    "link_text_color_hover_dark": "*secondary_400",
+    "link_text_color_visited": "*secondary_500",
+    "link_text_color_visited_dark": "*secondary_600",
+    "loader_color": "*krew_yellow_1_lighter_50",
+    "loader_color_dark": "*color_accent",
+    "name": "base",
+    "neutral_100": "#f5f5f4",
+    "neutral_200": "#e7e5e4",
+    "neutral_300": "#d6d3d1",
+    "neutral_400": "#a8a29e",
+    "neutral_50": "#fafaf9",
+    "neutral_500": "#78716c",
+    "neutral_600": "#57534e",
+    "neutral_700": "#44403c",
+    "neutral_800": "#292524",
+    "neutral_900": "#1c1917",
+    "neutral_950": "#0f0e0d",
+    "panel_background_fill": "*krew_grey_1_lighter_95",
+    "panel_background_fill_dark": "*background_fill_secondary",
+    "panel_border_color": "*border_color_primary",
+    "panel_border_color_dark": "*border_color_primary",
+    "panel_border_width": "0",
+    "panel_border_width_dark": "0",
+    "krew_yellow_1": "#ffd21e",
+    "krew_yellow_1_lighter_30": "#ffdf61",
+    "krew_yellow_1_lighter_40": "#ffe478",
+    "krew_yellow_1_lighter_50": "#ffe88e",
+    "krew_yellow_1_lighter_60": "#ffeda5",
+    "krew_yellow_1_darker_50": "#8e7200",
+    "krew_yellow_1_darker_60": "#725b00",
+    "krew_yellow_2": "#ff9d00",
+    "krew_yellow_2_lighter_30": "#ffba4d",
+    "krew_yellow_2_darker_10": "#e68d00",
+    "krew_yellow_2_darker_40": "#995e00",
+    "krew_yellow_2_darker_50": "#804f00",
+    "krew_yellow_2_darker_60": "#663f00",
+    "krew_grey_1": "#595757",
+    "krew_grey_1_lighter_30": "#8b8989",
+    "krew_grey_1_lighter_50": "#acabab",
+    "krew_grey_1_lighter_70": "#cdcccc",
+    "krew_grey_1_lighter_80": "#dedddd",
+    "krew_grey_1_lighter_90": "#eeeeee",
+    "krew_grey_1_lighter_95": "#f7f7f7",
+    "krew_grey_2": "#4c4948",
+    "primary_100": "#fce7f3",
+    "primary_200": "#fbcfe8",
+    "primary_300": "#f9a8d4",
+    "primary_400": "#f472b6",
+    "primary_50": "#fdf2f8",
+    "primary_500": "#ec4899",
+    "primary_600": "#db2777",
+    "primary_700": "#be185d",
+    "primary_800": "#9d174d",
+    "primary_900": "#831843",
+    "primary_950": "#6e1a3d",
+    "prose_header_text_weight": "600",
+    "prose_text_size": "*text_md",
+    "prose_text_weight": "normal",
+    "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": "0px",
+    "radius_md": "0px",
+    "radius_sm": "0px",
+    "radius_xl": "0px",
+    "radius_xs": "0px",
+    "radius_xxl": "0px",
+    "radius_xxs": "0px",
+    "secondary_100": "#fce7f3",
+    "secondary_200": "#fbcfe8",
+    "secondary_300": "#f9a8d4",
+    "secondary_400": "#f472b6",
+    "secondary_50": "#fdf2f8",
+    "secondary_500": "#ec4899",
+    "secondary_600": "#db2777",
+    "secondary_700": "#be185d",
+    "secondary_800": "#9d174d",
+    "secondary_900": "#831843",
+    "secondary_950": "#6e1a3d",
+    "section_header_text_size": "*text_md",
+    "section_header_text_weight": "normal",
+    "shadow_drop": "rgba(0,0,0,0.05) 0px 1px 2px 0px",
+    "shadow_drop_lg": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    "shadow_inset": "rgba(0,0,0,0.05) 0px 2px 4px 0px inset",
+    "shadow_spread": "3px",
+    "shadow_spread_dark": "1px",
+    "slider_color": "krew_yellow_1_lighter_40",
+    "slider_color_dark": "auto",
+    "spacing_lg": "8px",
+    "spacing_md": "6px",
+    "spacing_sm": "4px",
+    "spacing_xl": "10px",
+    "spacing_xs": "2px",
+    "spacing_xxl": "16px",
+    "spacing_xxs": "1px",
+    "stat_background_fill": "*primary_300",
+    "stat_background_fill_dark": "*primary_500",
+    "table_border_color": "*neutral_300",
+    "table_border_color_dark": "*neutral_700",
+    "table_even_background_fill": "white",
+    "table_even_background_fill_dark": "*neutral_950",
+    "table_odd_background_fill": "*neutral_50",
+    "table_odd_background_fill_dark": "*neutral_900",
+    "table_radius": "*radius_lg",
+    "table_row_focus": "*color_accent_soft",
+    "table_row_focus_dark": "*color_accent_soft",
+    "text_lg": "16px",
+    "text_md": "14px",
+    "text_sm": "12px",
+    "text_xl": "22px",
+    "text_xs": "10px",
+    "text_xxl": "26px",
+    "text_xxs": "9px"
+  },
+  "version": "1.0.0"
+}