theme.py

from typing import Iterable
from gradio.themes import Soft
from gradio.themes.utils import colors, fonts, sizes

colors.teal_gray = colors.Color(
    name="teal_gray",
    c50="#e8f1f4",
    c100="#cddde3",
    c200="#a8c3cf",
    c300="#7da6b8",
    c400="#588aa2",
    c500="#3d6e87",
    c600="#335b70",
    c700="#2b495a",
    c800="#2c5364",
    c900="#233f4b",
    c950="#1b323c",
)

colors.red_gray = colors.Color(
    name="red_gray",
    c50="#f7eded",
    c100="#f5dcdc",
    c200="#efb4b4",
    c300="#e78f8f",
    c400="#d96a6a",
    c500="#c65353",
    c600="#b24444",
    c700="#8f3434",
    c800="#732d2d",
    c900="#5f2626",
    c950="#4d2020",
)


class Apriel(Soft):
    def __init__(
            self,
            *,
            primary_hue: colors.Color | str = colors.gray,
            secondary_hue: colors.Color | str = colors.teal_gray,
            neutral_hue: colors.Color | str = colors.slate,
            # spacing_size: sizes.Size | str = sizes.spacing_md,
            # radius_size: sizes.Size | str = sizes.radius_md,
            text_size: sizes.Size | str = sizes.text_md,
            font: fonts.Font
                  | str
                  | Iterable[fonts.Font | str] = (
                    fonts.GoogleFont("Inconsolata"),
                    "Arial",
                    "sans-serif",
            ),
            font_mono: fonts.Font
                       | str
                       | Iterable[fonts.Font | str] = (
                    fonts.GoogleFont("IBM Plex Mono"),
                    "ui-monospace",
                    "monospace",
            ),
    ):
        super().__init__(
            primary_hue=primary_hue,
            secondary_hue=secondary_hue,
            neutral_hue=neutral_hue,
            # spacing_size=spacing_size,
            # radius_size=radius_size,
            text_size=text_size,
            font=font,
            font_mono=font_mono,
        )
        super().set(
            background_fill_primary="*primary_50",
            background_fill_primary_dark="*primary_900",

            body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
            body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",

            button_primary_text_color="white",
            button_primary_text_color_hover="black",
            button_primary_background_fill="linear-gradient(90deg, *secondary_400, *secondary_400)",
            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_300, *secondary_300)",
            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_800)",
            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_500)",

            button_secondary_text_color="black",
            button_secondary_text_color_hover="white",
            button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
            button_secondary_background_fill_hover="linear-gradient(90deg, *primary_400, *primary_400)",
            button_secondary_background_fill_dark="linear-gradient(90deg, *primary_500, *primary_600)",
            button_secondary_background_fill_hover_dark="linear-gradient(90deg, *primary_500, *primary_500)",

            button_cancel_background_fill=f"linear-gradient(90deg, {colors.red_gray.c400}, {colors.red_gray.c500})",
            button_cancel_background_fill_dark=f"linear-gradient(90deg, {colors.red_gray.c700}, {colors.red_gray.c800})",
            button_cancel_background_fill_hover=f"linear-gradient(90deg, {colors.red_gray.c500}, {colors.red_gray.c600})",
            button_cancel_background_fill_hover_dark=f"linear-gradient(90deg, {colors.red_gray.c800}, {colors.red_gray.c900})",
            # button_cancel_background_fill=f"linear-gradient(90deg, {colors.red.c400}, {colors.red.c500})",
            # button_cancel_background_fill_dark=f"linear-gradient(90deg, {colors.red.c700}, {colors.red.c800})",
            # button_cancel_background_fill_hover=f"linear-gradient(90deg, {colors.red.c500}, {colors.red.c600})",
            # button_cancel_background_fill_hover_dark=f"linear-gradient(90deg, {colors.red.c800}, {colors.red.c900})",
            button_cancel_text_color="white",
            button_cancel_text_color_dark="white",
            button_cancel_text_color_hover="white",
            button_cancel_text_color_hover_dark="white",

            # button_cancel_background_fill=colors.red.c500,
            # button_cancel_background_fill_dark=colors.red.c700,
            # button_cancel_background_fill_hover=colors.red.c600,
            # button_cancel_background_fill_hover_dark=colors.red.c800,
            # button_cancel_text_color="white",
            # button_cancel_text_color_dark="white",
            # button_cancel_text_color_hover="white",
            # button_cancel_text_color_hover_dark="white",

            slider_color="*secondary_300",
            slider_color_dark="*secondary_600",
            block_title_text_weight="600",
            block_border_width="3px",
            block_shadow="*shadow_drop_lg",
            button_primary_shadow="*shadow_drop_lg",
            button_large_padding="11px",

            color_accent_soft="*primary_100",

            block_label_background_fill="*primary_200",

        )


apriel = Apriel()

# with gr.Blocks(theme=apriel) as demo:
#     textbox = gr.Textbox(label="Name")
#     slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
#     with gr.Row():
#         button = gr.Button("Submit", variant="primary")
#         clear = gr.Button("Clear")
#     output = gr.Textbox(label="Output")
#
#
#     def repeat(name, count):
#         time.sleep(3)
#         return name * count
#
#
#     button.click(repeat, [textbox, slider], output)
#
# if __name__ == "__main__":
#     demo.launch()