Spaces:
Sleeping
Sleeping
File size: 3,482 Bytes
688e8b8 098c0fa 688e8b8 098c0fa f4bdb3c 098c0fa 15d5f78 f4bdb3c 688e8b8 098c0fa 23276e6 7210472 23276e6 688e8b8 23276e6 688e8b8 23276e6 688e8b8 15d5f78 20a1fe9 688e8b8 20a1fe9 688e8b8 15d5f78 098c0fa 15d5f78 098c0fa 15d5f78 098c0fa 20a1fe9 688e8b8 098c0fa 20a1fe9 688e8b8 15d5f78 688e8b8 15d5f78 688e8b8 6b74d0a 098c0fa 688e8b8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
from __future__ import annotations
from gradio.themes.base import Base
from gradio.themes.utils import colors, fonts, sizes
# Import our custom colors
from colors import (
purple as custom_purple,
blue as custom_blue,
grey as custom_grey,
green as custom_green,
red as custom_red,
white,
black,
purple_alpha
)
from sizes import spacing_md, radius_sm, text_md
class CanvaTheme(Base):
def __init__(
self,
*,
primary_hue: colors.Color | str = colors.purple, # Using Gradio's purple
secondary_hue: colors.Color | str = colors.blue, # Using Gradio's blue
neutral_hue: colors.Color | str = colors.gray, # Using Gradio's gray
text_size: sizes.Size | str = sizes.text_md,
spacing_size: sizes.Size | str = sizes.spacing_md,
radius_size: sizes.Size | str = sizes.radius_sm,
font: fonts.Font | str | Iterable[fonts.Font | str] = (
# fonts.LocalFont("CanvaSans", weights=[400, 500, 700]),
fonts.GoogleFont("Open Sans", weights=[400, 500, 700]),
"ui-sans-serif",
"system-ui",
"sans-serif",
),
font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
fonts.GoogleFont("JetBrains Mono", weights=[400, 700]),
"ui-monospace",
"Consolas",
"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(
# Body colors
body_background_fill=white.c50,
body_background_fill_dark=black.c50,
# Text colors
body_text_color=black.c50,
body_text_color_dark=white.c50,
# Block colors
block_background_fill=white.c50,
block_background_fill_dark=custom_grey.c800,
block_border_color=custom_grey.c200,
block_border_color_dark=custom_grey.c700,
block_title_text_color=custom_grey.c500,
block_title_text_color_dark=custom_grey.c400,
# Input colors
input_background_fill=custom_grey.c50,
input_background_fill_dark=custom_grey.c800,
input_border_color=custom_grey.c200,
input_border_color_dark=custom_grey.c700,
input_border_width="1px",
# Button colors
button_primary_background_fill=custom_purple.c500,
button_primary_background_fill_dark=custom_purple.c600,
button_primary_text_color=white.c50,
button_primary_text_color_dark=white.c50,
button_secondary_background_fill=custom_grey.c50,
button_secondary_background_fill_dark=custom_grey.c800,
button_secondary_text_color=black.c50,
button_secondary_text_color_dark=white.c50,
# Shadows
shadow_drop="0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
shadow_inset="0 2px 4px 0 rgb(0 0 0 / 0.05) inset",
# Link colors
link_text_color=custom_purple.c500,
link_text_color_dark=custom_purple.c400,
) |