mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-06 12:30:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Theme+release (#3494)

Browse Source 
* changes

* changes

* changes

* changes

* changes

* Update gradio/themes/base.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update gradio/themes/base.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update guides/03_building-with-blocks/06_theming-guide

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* changes

* changes

* changes

* save file

* update changelog

---------

Co-authored-by: Ali Abid <aabid94@gmail.com>
This commit is contained in:
Abubakar Abid 2023-03-17 07:41:53 -07:00 committed by GitHub
parent 79a369cc68
commit de3254fd08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
89 changed files with 1177 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -3,7 +3,13 @@
## New Features:
- Add keyword argument `elem_classes` to Components to control class names of components, in the same manner as existing `elem_id`.
### Official Theme release
Gradio now supports a new theme system, which allows you to customize the look and feel of your app. You can now use the `theme=` kwarg to pass in a prebuilt theme, or customize your own! See guides/06_other-tutorials/theming-guide for more details. By [@aliabid94](https://github.com/aliabid94) in [PR 3494](https://github.com/gradio-app/gradio/pull/3494)
### `elem_classes`
Add keyword argument `elem_classes` to Components to control class names of components, in the same manner as existing `elem_id`.
By [@aliabid94](https://github.com/aliabid94) in [PR 3466](https://github.com/gradio-app/gradio/pull/3466)
## Bug Fixes:

2
demo/blocks_kitchen_sink/run.ipynb
View File

File diff suppressed because one or more lines are too long

18
demo/blocks_kitchen_sink/run.py
View File

@ -10,7 +10,7 @@ monochrome_theme = gr.themes.Monochrome()
soft_theme = gr.themes.Soft()
glass_theme = gr.themes.Glass()
with gr.Blocks() as demo:
with gr.Blocks(theme=base_theme) as demo:
gr.Markdown(
"""
# Blocks Kitchen Sink
@ -31,13 +31,13 @@ with gr.Blocks() as demo:
_js="""
() => {
document.body.classList.toggle('dark');
document.querySelector('gradio-app').style.backgroundColor = 'var(--color-background-primary)'
document.querySelector('gradio-app').style.backgroundColor = 'var(--background-primary)'
}
""",
)
theme_selector = gr.Radio(
["Base", "Default", "Monochrome", "Soft", "Glass"],
value="Default",
value="Base",
label="Theme",
)
theme_selector.change(
@ -50,21 +50,33 @@ with gr.Blocks() as demo:
var theme_elem = document.createElement('style');
theme_elem.classList.add('theme-css');
document.head.appendChild(theme_elem);
var link_elem = document.createElement('link');
link_elem.classList.add('link-css');
link_elem.rel = 'stylesheet';
document.head.appendChild(link_elem);
}} else {{
var theme_elem = document.querySelector('.theme-css');
var link_elem = document.querySelector('.link-css');
}}
if (theme == "Base") {{
var theme_css = `{base_theme._get_theme_css()}`;
var link_css = `{base_theme._stylesheets[0]}`;
}} else if (theme == "Default") {{
var theme_css = `{default_theme._get_theme_css()}`;
var link_css = `{default_theme._stylesheets[0]}`;
}} else if (theme == "Monochrome") {{
var theme_css = `{monochrome_theme._get_theme_css()}`;
var link_css = `{monochrome_theme._stylesheets[0]}`;
}} else if (theme == "Soft") {{
var theme_css = `{soft_theme._get_theme_css()}`;
var link_css = `{soft_theme._stylesheets[0]}`;
}} else if (theme == "Glass") {{
var theme_css = `{glass_theme._get_theme_css()}`;
var link_css = `{glass_theme._stylesheets[0]}`;
}}
theme_elem.innerHTML = theme_css;
link_elem.href = link_css;
}}
""",
)

1
demo/theme_extended_step_1/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_extended_step_1"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "with gr.Blocks(theme=gr.themes.Default(primary_hue=\"red\", secondary_hue=\"pink\")) as demo:\n", " textbox = gr.Textbox(label=\"Name\")\n", " slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", " with gr.Row():\n", " button = gr.Button(\"Submit\", variant=\"primary\")\n", " clear = gr.Button(\"Clear\")\n", " output = gr.Textbox(label=\"Output\")\n", "\n", " def repeat(name, count):\n", " time.sleep(3)\n", " return name * count\n", " \n", " button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

19
demo/theme_extended_step_1/run.py Normal file
View File

@ -0,0 +1,19 @@
import gradio as gr
import time
with gr.Blocks(theme=gr.themes.Default(primary_hue="red", secondary_hue="pink")) 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()

1
demo/theme_extended_step_2/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_extended_step_2"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "with gr.Blocks(theme=gr.themes.Default(spacing_size=\"sm\", radius_size=\"none\")) as demo:\n", " textbox = gr.Textbox(label=\"Name\")\n", " slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", " with gr.Row():\n", " button = gr.Button(\"Submit\", variant=\"primary\")\n", " clear = gr.Button(\"Clear\")\n", " output = gr.Textbox(label=\"Output\")\n", "\n", " def repeat(name, count):\n", " time.sleep(3)\n", " return name * count\n", " \n", " button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

19
demo/theme_extended_step_2/run.py Normal file
View File

@ -0,0 +1,19 @@
import gradio as gr
import time
with gr.Blocks(theme=gr.themes.Default(spacing_size="sm", radius_size="none")) 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()

1
demo/theme_extended_step_3/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_extended_step_3"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "with gr.Blocks(\n", " theme=gr.themes.Default(\n", " font=[gr.themes.GoogleFont(\"Inconsolata\"), \"Arial\", \"sans-serif\"]\n", " )\n", ") as demo:\n", " textbox = gr.Textbox(label=\"Name\")\n", " slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", " with gr.Row():\n", " button = gr.Button(\"Submit\", variant=\"primary\")\n", " clear = gr.Button(\"Clear\")\n", " output = gr.Textbox(label=\"Output\")\n", "\n", " def repeat(name, count):\n", " time.sleep(3)\n", " return name * count\n", "\n", " button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

23
demo/theme_extended_step_3/run.py Normal file
View File

@ -0,0 +1,23 @@
import gradio as gr
import time
with gr.Blocks(
theme=gr.themes.Default(
font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"]
)
) 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()

1
demo/theme_extended_step_4/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_extended_step_4"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "theme = gr.themes.Default(primary_hue=\"blue\").set(\n", " loader_color=\"#FF0000\",\n", " slider_color=\"#FF0000\",\n", ")\n", "\n", "with gr.Blocks(\n", " theme=theme\n", ") as demo:\n", " textbox = gr.Textbox(label=\"Name\")\n", " slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", " with gr.Row():\n", " button = gr.Button(\"Submit\", variant=\"primary\")\n", " clear = gr.Button(\"Clear\")\n", " output = gr.Textbox(label=\"Output\")\n", "\n", " def repeat(name, count):\n", " time.sleep(3)\n", " return name * count\n", "\n", " button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

26
demo/theme_extended_step_4/run.py Normal file
View File

@ -0,0 +1,26 @@
import gradio as gr
import time
theme = gr.themes.Default(primary_hue="blue").set(
loader_color="#FF0000",
slider_color="#FF0000",
)
with gr.Blocks(
theme=theme
) 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()

1
demo/theme_glass/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_glass"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "with gr.Blocks(theme=gr.themes.Glass()) as demo:\n", " textbox = gr.Textbox(label=\"Name\")\n", " slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", " with gr.Row():\n", " button = gr.Button(\"Submit\", variant=\"primary\")\n", " clear = gr.Button(\"Clear\")\n", " output = gr.Textbox(label=\"Output\")\n", "\n", " def repeat(name, count):\n", " time.sleep(3)\n", " return name * count\n", " \n", " button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

19
demo/theme_glass/run.py Normal file
View File

@ -0,0 +1,19 @@
import gradio as gr
import time
with gr.Blocks(theme=gr.themes.Glass()) 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()

1
demo/theme_new_step_1/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_new_step_1"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from gradio.themes.base import Base\n", "import time\n", "\n", "class Seafoam(Base):\n", " pass\n", "\n", "seafoam = Seafoam()\n", "\n", "with gr.Blocks(theme=seafoam) as demo:\n", " textbox = gr.Textbox(label=\"Name\")\n", " slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", " with gr.Row():\n", " button = gr.Button(\"Submit\", variant=\"primary\")\n", " clear = gr.Button(\"Clear\")\n", " output = gr.Textbox(label=\"Output\")\n", "\n", " def repeat(name, count):\n", " time.sleep(3)\n", " return name * count\n", " \n", " button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

25
demo/theme_new_step_1/run.py Normal file
View File

@ -0,0 +1,25 @@
import gradio as gr
from gradio.themes.base import Base
import time
class Seafoam(Base):
pass
seafoam = Seafoam()
with gr.Blocks(theme=seafoam) 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()

1
demo/theme_new_step_2/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_new_step_2"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["from __future__ import annotations\n", "from typing import Iterable\n", "import gradio as gr\n", "from gradio.themes.base import Base\n", "from gradio.themes.utils import colors, fonts, sizes\n", "import time\n", "\n", "\n", "class Seafoam(Base):\n", " def __init__(\n", " self,\n", " *,\n", " primary_hue: colors.Color | str = colors.emerald,\n", " secondary_hue: colors.Color | str = colors.blue,\n", " neutral_hue: colors.Color | str = colors.gray,\n", " spacing_size: sizes.Size | str = sizes.spacing_md,\n", " radius_size: sizes.Size | str = sizes.radius_md,\n", " text_size: sizes.Size | str = sizes.text_lg,\n", " font: fonts.Font\n", " | str\n", " | Iterable[fonts.Font | str] = (\n", " fonts.GoogleFont(\"Quicksand\"),\n", " \"ui-sans-serif\",\n", " \"sans-serif\",\n", " ),\n", " font_mono: fonts.Font\n", " | str\n", " | Iterable[fonts.Font | str] = (\n", " fonts.GoogleFont(\"IBM Plex Mono\"),\n", " \"ui-monospace\",\n", " \"monospace\",\n", " ),\n", " ):\n", " super().__init__(\n", " primary_hue=primary_hue,\n", " secondary_hue=secondary_hue,\n", " neutral_hue=neutral_hue,\n", " spacing_size=spacing_size,\n", " radius_size=radius_size,\n", " text_size=text_size,\n", " font=font,\n", " font_mono=font_mono,\n", " )\n", "\n", "\n", "seafoam = Seafoam()\n", "\n", "with gr.Blocks(theme=seafoam) as demo:\n", " textbox = gr.Textbox(label=\"Name\")\n", " slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", " with gr.Row():\n", " button = gr.Button(\"Submit\", variant=\"primary\")\n", " clear = gr.Button(\"Clear\")\n", " output = gr.Textbox(label=\"Output\")\n", "\n", " def repeat(name, count):\n", " time.sleep(3)\n", " return name * count\n", "\n", " button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

63
demo/theme_new_step_2/run.py Normal file
View File

@ -0,0 +1,63 @@
from __future__ import annotations
from typing import Iterable
import gradio as gr
from gradio.themes.base import Base
from gradio.themes.utils import colors, fonts, sizes
import time
class Seafoam(Base):
def __init__(
self,
*,
primary_hue: colors.Color | str = colors.emerald,
secondary_hue: colors.Color | str = colors.blue,
neutral_hue: colors.Color | str = colors.gray,
spacing_size: sizes.Size | str = sizes.spacing_md,
radius_size: sizes.Size | str = sizes.radius_md,
text_size: sizes.Size | str = sizes.text_lg,
font: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("Quicksand"),
"ui-sans-serif",
"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,
)
seafoam = Seafoam()
with gr.Blocks(theme=seafoam) 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()

1
demo/theme_new_step_3/run.ipynb Normal file
View File

@ -0,0 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: theme_new_step_3"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["from __future__ import annotations\n", "from typing import Iterable\n", "import gradio as gr\n", "from gradio.themes.base import Base\n", "from gradio.themes.utils import colors, fonts, sizes\n", "import time\n", "\n", "\n", "class Seafoam(Base):\n", " def __init__(\n", " self,\n", " *,\n", " primary_hue: colors.Color | str = colors.emerald,\n", " secondary_hue: colors.Color | str = colors.blue,\n", " neutral_hue: colors.Color | str = colors.blue,\n", " spacing_size: sizes.Size | str = sizes.spacing_md,\n", " radius_size: sizes.Size | str = sizes.radius_md,\n", " text_size: sizes.Size | str = sizes.text_lg,\n", " font: fonts.Font\n", " | str\n", " | Iterable[fonts.Font | str] = (\n", " fonts.GoogleFont(\"Quicksand\"),\n", " \"ui-sans-serif\",\n", " \"sans-serif\",\n", " ),\n", " font_mono: fonts.Font\n", " | str\n", " | Iterable[fonts.Font | str] = (\n", " fonts.GoogleFont(\"IBM Plex Mono\"),\n", " \"ui-monospace\",\n", " \"monospace\",\n", " ),\n", " ):\n", " super().__init__(\n", " primary_hue=primary_hue,\n", " secondary_hue=secondary_hue,\n", " neutral_hue=neutral_hue,\n", " spacing_size=spacing_size,\n", " radius_size=radius_size,\n", " text_size=text_size,\n", " font=font,\n", " font_mono=font_mono,\n", " )\n", " super().set(\n", " body_background=\"repeating-linear-gradient(45deg, *primary_200, *primary_200 10px, *primary_50 10px, *primary_50 20px)\",\n", " body_background_dark=\"repeating-linear-gradient(45deg, *primary_800, *primary_800 10px, *primary_900 10px, *primary_900 20px)\",\n", " button_primary_background=\"linear-gradient(90deg, *primary_300, *secondary_400)\",\n", " button_primary_background_hover=\"linear-gradient(90deg, *primary_200, *secondary_300)\",\n", " button_primary_text_color=\"white\",\n", " button_primary_background_dark=\"linear-gradient(90deg, *primary_600, *secondary_800)\",\n", " slider_color=\"*secondary_300\",\n", " slider_color_dark=\"*secondary_600\",\n", " block_title_text_weight=\"600\",\n", " block_border_width=\"3px\",\n", " block_shadow=\"*shadow_drop_lg\",\n", " button_shadow=\"*shadow_drop_lg\",\n", " button_large_padding=\"32px\",\n", " )\n", "\n", "\n", "seafoam = Seafoam()\n", "\n", "with gr.Blocks(theme=seafoam) as demo:\n", " textbox = gr.Textbox(label=\"Name\")\n", " slider = gr.Slider(label=\"Count\", minimum=0, maximum=100, step=1)\n", " with gr.Row():\n", " button = gr.Button(\"Submit\", variant=\"primary\")\n", " clear = gr.Button(\"Clear\")\n", " output = gr.Textbox(label=\"Output\")\n", "\n", " def repeat(name, count):\n", " time.sleep(3)\n", " return name * count\n", "\n", " button.click(repeat, [textbox, slider], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

78
demo/theme_new_step_3/run.py Normal file
View File

@ -0,0 +1,78 @@
from __future__ import annotations
from typing import Iterable
import gradio as gr
from gradio.themes.base import Base
from gradio.themes.utils import colors, fonts, sizes
import time
class Seafoam(Base):
def __init__(
self,
*,
primary_hue: colors.Color | str = colors.emerald,
secondary_hue: colors.Color | str = colors.blue,
neutral_hue: colors.Color | str = colors.blue,
spacing_size: sizes.Size | str = sizes.spacing_md,
radius_size: sizes.Size | str = sizes.radius_md,
text_size: sizes.Size | str = sizes.text_lg,
font: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("Quicksand"),
"ui-sans-serif",
"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(
body_background="repeating-linear-gradient(45deg, *primary_200, *primary_200 10px, *primary_50 10px, *primary_50 20px)",
body_background_dark="repeating-linear-gradient(45deg, *primary_800, *primary_800 10px, *primary_900 10px, *primary_900 20px)",
button_primary_background="linear-gradient(90deg, *primary_300, *secondary_400)",
button_primary_background_hover="linear-gradient(90deg, *primary_200, *secondary_300)",
button_primary_text_color="white",
button_primary_background_dark="linear-gradient(90deg, *primary_600, *secondary_800)",
slider_color="*secondary_300",
slider_color_dark="*secondary_600",
block_title_text_weight="600",
block_border_width="3px",
block_shadow="*shadow_drop_lg",
button_shadow="*shadow_drop_lg",
button_large_padding="32px",
)
seafoam = Seafoam()
with gr.Blocks(theme=seafoam) 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()

6
gradio/blocks.py
View File

@ -497,7 +497,8 @@ class Blocks(BlockContext):
warnings.warn("Theme should be a class loaded from gradio.themes")
theme = DefaultTheme()
self.theme = theme
self.theme_css = self.theme._get_theme_css()
self.theme_css = theme._get_theme_css()
self.stylesheets = theme._stylesheets
self.encrypt = False
self.share = False
self.enable_queue = None
@ -1103,7 +1104,8 @@ class Blocks(BlockContext):
"show_error": getattr(self, "show_error", False),
"show_api": self.show_api,
"is_colab": utils.colab_check(),
"root": self.root
"stylesheets": self.stylesheets,
"root": self.root,
}
def getLayout(block):

1
gradio/themes/__init__.py
View File

@ -6,4 +6,5 @@ from gradio.themes.monochrome import Monochrome # noqa: F401
from gradio.themes.soft import Soft # noqa: F401
from gradio.themes.utils import colors, sizes # noqa: F401
from gradio.themes.utils.colors import Color # noqa: F401
from gradio.themes.utils.fonts import Font, GoogleFont # noqa: F401
from gradio.themes.utils.sizes import Size # noqa: F401

427
gradio/themes/base.py
View File

@ -1,21 +1,48 @@
from __future__ import annotations
import re
from typing import Iterable
from gradio.themes.utils import colors, sizes
from gradio.themes.utils import colors, fonts, sizes
class ThemeClass:
def __init__(self):
self._stylesheets = []
def _get_theme_css(self):
css = ":root {\n"
dark_css = ".dark {\n"
css = {}
dark_css = {}
for attr, val in self.__dict__.items():
val = getattr(self, attr)
if val is None:
if attr.startswith("_"):
continue
if val is None:
if attr.endswith("_dark"):
dark_css[attr[:-5]] = None
continue
else:
raise ValueError(
f"Cannot set '{attr}' to None - only dark mode variables can be None."
)
val = str(val)
pattern = r"(\*)([\w_]+)(\b)"
def repl_func(match):
full_match = match.group(0)
if full_match.startswith("*") and full_match.endswith("_dark"):
raise ValueError(
f"Cannot refer '{attr}' to '{val}' - dark variable references are automatically used for dark mode attributes, so do not use the _dark suffix in the value."
)
if (
attr.endswith("_dark")
and full_match.startswith("*")
and attr[:-5] == full_match[1:]
):
raise ValueError(
f"Cannot refer '{attr}' to '{val}' - if dark and light mode values are the same, set dark mode version to None."
)
word = match.group(2)
word = word.replace("_", "-")
return f"var(--{word})"
@ -23,14 +50,29 @@ class ThemeClass:
val = re.sub(pattern, repl_func, val)
attr = attr.replace("_", "-")
if attr.endswith("-dark"):
attr = attr[:-5]
dark_css += f" --{attr}: {val}; \n"
dark_css[attr] = val
else:
css += f" --{attr}: {val}; \n"
css += "}"
dark_css += "}"
return css + "\n" + dark_css
css[attr] = val
for attr, val in css.items():
if attr not in dark_css:
dark_css[attr] = val
css_code = (
":root {\n"
+ "\n".join([f" --{attr}: {val};" for attr, val in css.items()])
+ "\n}"
)
dark_css_code = (
".dark {\n"
+ "\n".join([f" --{attr}: {val};" for attr, val in dark_css.items()])
+ "\n}"
)
return css_code + "\n" + dark_css_code
class Base(ThemeClass):
@ -43,6 +85,22 @@ class Base(ThemeClass):
text_size: sizes.Size | str = sizes.text_md,
spacing_size: sizes.Size | str = sizes.spacing_md,
radius_size: sizes.Size | str = sizes.radius_md,
font: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("Source Sans Pro"),
"ui-sans-serif",
"system-ui",
"sans-serif",
),
font_mono: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("IBM Plex Mono"),
"ui-monospace",
"Consolas",
"monospace",
),
):
"""
Parameters:
@ -52,6 +110,8 @@ class Base(ThemeClass):
text_size: The size of the text. Load a preset, like gradio.themes.sizes.text_sm (or just the string "sm"), or pass your own gradio.themes.utils.Size object.
spacing_size: The size of the spacing. Load a preset, like gradio.themes.sizes.spacing_sm (or just the string "sm"), or pass your own gradio.themes.utils.Size object.
radius_size: The radius size of corners. Load a preset, like gradio.themes.sizes.radius_sm (or just the string "sm"), or pass your own gradio.themes.utils.Size object.
font: The primary font to use for the theme. Pass a string for a system font, or a gradio.themes.font.GoogleFont object to load a font from Google Fonts. Pass a list of fonts for fallbacks.
font_mono: The monospace font to use for the theme, applies to code. Pass a string for a system font, or a gradio.themes.font.GoogleFont object to load a font from Google Fonts. Pass a list of fonts for fallbacks.
"""
def expand_shortcut(shortcut, mode="color", prefix=None):
@ -112,6 +172,7 @@ class Base(ThemeClass):
self.neutral_900 = neutral_hue.c900
self.neutral_950 = neutral_hue.c950
# Spacing
self.spacing_xxs = spacing_size.xxs
self.spacing_xs = spacing_size.xs
self.spacing_sm = spacing_size.sm
@ -136,43 +197,64 @@ class Base(ThemeClass):
self.text_xl = text_size.xl
self.text_xxl = text_size.xxl
# Font
if not isinstance(font, Iterable):
font = [font]
self._font = [
fontfam if isinstance(fontfam, fonts.Font) else fonts.Font(fontfam)
for fontfam in font
]
if not isinstance(font_mono, Iterable):
font_mono = [font_mono]
self._font_mono = [
fontfam if isinstance(fontfam, fonts.Font) else fonts.Font(fontfam)
for fontfam in font_mono
]
self.font = ", ".join(str(font) for font in self._font)
self.font_mono = ", ".join(str(font) for font in self._font_mono)
self._stylesheets = []
for font in self._font + self._font_mono:
font_stylesheet = font.stylesheet()
if font_stylesheet:
self._stylesheets.append(font_stylesheet)
self.set()
def set(
self,
*,
# Core Colors
color_accent=None,
color_accent_soft=None,
color_accent_soft_dark=None,
color_background_primary=None,
color_background_primary_dark=None,
color_background_secondary=None,
color_background_secondary_dark=None,
color_border_accent=None,
color_border_accent_dark=None,
color_border_primary=None,
color_border_primary_dark=None,
# Text Colors
text_color_code_background=None,
text_color_code_background_dark=None,
text_color_code_border=None,
text_color_link=None,
text_color_link_active=None,
text_color_link_active_dark=None,
text_color_link_dark=None,
text_color_link_hover=None,
text_color_link_hover_dark=None,
text_color_link_visited=None,
text_color_link_visited_dark=None,
text_color_subdued=None,
text_color_subdued_dark=None,
background_accent=None,
background_accent_soft=None,
background_accent_soft_dark=None,
background_primary=None,
background_primary_dark=None,
background_secondary=None,
background_secondary_dark=None,
border_color_accent=None,
border_color_accent_dark=None,
border_color_primary=None,
border_color_primary_dark=None,
# Text
link_text_color=None,
link_text_color_active=None,
link_text_color_active_dark=None,
link_text_color_dark=None,
link_text_color_hover=None,
link_text_color_hover_dark=None,
link_text_color_visited=None,
link_text_color_visited_dark=None,
prose_text_size=None,
prose_text_weight=None,
# Body
body_background_color=None,
body_background_color_dark=None,
body_background=None,
body_background_dark=None,
body_text_color=None,
body_text_color_dark=None,
body_text_size=None,
body_text_color_subdued=None,
body_text_color_subdued_dark=None,
body_text_weight=None,
embed_radius=None,
# Shadows
@ -190,16 +272,16 @@ class Base(ThemeClass):
block_border_width_dark=None,
block_info_color=None,
block_info_color_dark=None,
block_info_color_size=None,
block_info_color_weight=None,
block_info_text_size=None,
block_info_text_weight=None,
block_label_background=None,
block_label_background_dark=None,
block_label_border_color=None,
block_label_border_color_dark=None,
block_label_border_width=None,
block_label_border_width_dark=None,
block_label_color=None,
block_label_color_dark=None,
block_label_text_color=None,
block_label_text_color_dark=None,
block_label_icon_color=None,
block_label_margin=None,
block_label_padding=None,
@ -217,8 +299,8 @@ class Base(ThemeClass):
block_title_border_color_dark=None,
block_title_border_width=None,
block_title_border_width_dark=None,
block_title_color=None,
block_title_color_dark=None,
block_title_text_color=None,
block_title_text_color_dark=None,
block_title_padding=None,
block_title_radius=None,
block_title_text_size=None,
@ -231,8 +313,8 @@ class Base(ThemeClass):
panel_border_color=None,
panel_border_color_dark=None,
panel_border_width=None,
section_text_size=None,
section_text_weight=None,
section_header_text_size=None,
section_header_text_weight=None,
# Component Atoms
checkbox_background=None,
checkbox_background_dark=None,
@ -307,8 +389,6 @@ class Base(ThemeClass):
input_text_weight=None,
loader_color=None,
loader_color_dark=None,
prose_text_size=None,
prose_text_weight=None,
slider_color=None,
slider_color_dark=None,
stat_color_background=None,
@ -374,87 +454,76 @@ class Base(ThemeClass):
button_transition=None,
):
# Core Colors
self.color_accent = color_accent or getattr(
self, "color_accent", "*primary_500"
self.background_accent = background_accent or getattr(
self, "background_accent", "*primary_500"
)
self.color_accent_soft = color_accent_soft or getattr(
self, "color_accent_soft", "*primary_50"
self.background_accent_soft = background_accent_soft or getattr(
self, "background_accent_soft", "*primary_50"
)
self.color_accent_soft_dark = color_accent_soft_dark or getattr(
self, "color_accent_soft_dark", "*neutral_700"
self.background_accent_soft_dark = background_accent_soft_dark or getattr(
self, "background_accent_soft_dark", "*neutral_700"
)
self.color_background_primary = color_background_primary or getattr(
self, "color_background_primary", "white"
self.background_primary = background_primary or getattr(
self, "background_primary", "white"
)
self.color_background_primary_dark = color_background_primary_dark or getattr(
self, "color_background_primary_dark", "*neutral_950"
self.background_primary_dark = background_primary_dark or getattr(
self, "background_primary_dark", "*neutral_950"
)
self.color_background_secondary = color_background_secondary or getattr(
self, "color_background_secondary", "*neutral_50"
self.background_secondary = background_secondary or getattr(
self, "background_secondary", "*neutral_50"
)
self.color_background_secondary_dark = (
color_background_secondary_dark
or getattr(self, "color_background_secondary_dark", "*neutral_900")
self.background_secondary_dark = background_secondary_dark or getattr(
self, "background_secondary_dark", "*neutral_900"
)
self.color_border_accent = color_border_accent or getattr(
self, "color_border_accent", "*primary_300"
self.border_color_accent = border_color_accent or getattr(
self, "border_color_accent", "*primary_300"
)
self.color_border_accent_dark = color_border_accent_dark or getattr(
self, "color_border_accent_dark", "*neutral_600"
self.border_color_accent_dark = border_color_accent_dark or getattr(
self, "border_color_accent_dark", "*neutral_600"
)
self.color_border_primary = color_border_primary or getattr(
self, "color_border_primary", "*neutral_200"
self.border_color_primary = border_color_primary or getattr(
self, "border_color_primary", "*neutral_200"
)
self.color_border_primary_dark = color_border_primary_dark or getattr(
self, "color_border_primary_dark", "*neutral_700"
self.border_color_primary_dark = border_color_primary_dark or getattr(
self, "border_color_primary_dark", "*neutral_700"
)
# Text Colors
self.text_color_code_background = text_color_code_background or getattr(
self, "text_color_code_background", "*neutral_200"
self.link_text_color = link_text_color or getattr(
self, "link_text_color", "*secondary_600"
)
self.text_color_code_background_dark = (
text_color_code_background_dark
or getattr(self, "text_color_code_background_dark", "*neutral_800")
self.link_text_color_active = link_text_color_active or getattr(
self, "link_text_color_active", "*secondary_600"
)
self.text_color_code_border = text_color_code_border or getattr(
self, "text_color_code_border", "*color_border_primary"
self.link_text_color_active_dark = link_text_color_active_dark or getattr(
self, "link_text_color_active_dark", "*secondary_500"
)
self.text_color_link = text_color_link or getattr(
self, "text_color_link", "*secondary_600"
self.link_text_color_dark = link_text_color_dark or getattr(
self, "link_text_color_dark", "*secondary_500"
)
self.text_color_link_active = text_color_link_active or getattr(
self, "text_color_link_active", "*secondary_600"
self.link_text_color_hover = link_text_color_hover or getattr(
self, "link_text_color_hover", "*secondary_700"
)
self.text_color_link_active_dark = text_color_link_active_dark or getattr(
self, "text_color_link_active_dark", "*secondary_500"
self.link_text_color_hover_dark = link_text_color_hover_dark or getattr(
self, "link_text_color_hover_dark", "*secondary_400"
)
self.text_color_link_dark = text_color_link_dark or getattr(
self, "text_color_link_dark", "*secondary_500"
self.link_text_color_visited = link_text_color_visited or getattr(
self, "link_text_color_visited", "*secondary_500"
)
self.text_color_link_hover = text_color_link_hover or getattr(
self, "text_color_link_hover", "*secondary_700"
self.link_text_color_visited_dark = link_text_color_visited_dark or getattr(
self, "link_text_color_visited_dark", "*secondary_600"
)
self.text_color_link_hover_dark = text_color_link_hover_dark or getattr(
self, "text_color_link_hover_dark", "*secondary_400"
self.body_text_color_subdued = body_text_color_subdued or getattr(
self, "body_text_color_subdued", "*neutral_400"
)
self.text_color_link_visited = text_color_link_visited or getattr(
self, "text_color_link_visited", "*secondary_500"
)
self.text_color_link_visited_dark = text_color_link_visited_dark or getattr(
self, "text_color_link_visited_dark", "*secondary_600"
)
self.text_color_subdued = text_color_subdued or getattr(
self, "text_color_subdued", "*neutral_400"
)
self.text_color_subdued_dark = text_color_subdued_dark or getattr(
self, "text_color_subdued_dark", "*neutral_400"
self.body_text_color_subdued_dark = body_text_color_subdued_dark or getattr(
self, "body_text_color_subdued_dark", "*neutral_400"
)
# Body
self.body_background_color = body_background_color or getattr(
self, "body_background_color", "*color_background_primary"
self.body_background = body_background or getattr(
self, "body_background", "*background_primary"
)
self.body_background_color_dark = body_background_color_dark or getattr(
self, "body_background_color_dark", "*color_background_primary"
self.body_background_dark = body_background_dark or getattr(
self, "body_background_dark", "*background_primary"
)
self.body_text_color = body_text_color or getattr(
self, "body_text_color", "*neutral_800"
@ -487,61 +556,61 @@ class Base(ThemeClass):
)
# Layout Atoms
self.block_background = block_background or getattr(
self, "block_background", "*color_background_primary"
self, "block_background", "*background_primary"
)
self.block_background_dark = block_background_dark or getattr(
self, "block_background_dark", "*neutral_800"
)
self.block_border_color = block_border_color or getattr(
self, "block_border_color", "*color_border_primary"
self, "block_border_color", "*border_color_primary"
)
self.block_border_color_dark = block_border_color_dark or getattr(
self, "block_border_color_dark", "*color_border_primary"
self, "block_border_color_dark", "*border_color_primary"
)
self.block_border_width = block_border_width or getattr(
self, "block_border_width", "1px"
)
self.block_border_width_dark = block_border_width_dark or getattr(
self, "block_border_width_dark", "1px"
self, "block_border_width_dark", None
)
self.block_info_color = block_info_color or getattr(
self, "block_info_color", "*text_color_subdued"
self, "block_info_color", "*body_text_color_subdued"
)
self.block_info_color_dark = block_info_color_dark or getattr(
self, "block_info_color_dark", "*text_color_subdued"
self, "block_info_color_dark", "*body_text_color_subdued"
)
self.block_info_color_size = block_info_color_size or getattr(
self, "block_info_color_size", "*text_sm"
self.block_info_text_size = block_info_text_size or getattr(
self, "block_info_text_size", "*text_sm"
)
self.block_info_color_weight = block_info_color_weight or getattr(
self, "block_info_color_weight", "400"
self.block_info_text_weight = block_info_text_weight or getattr(
self, "block_info_text_weight", "400"
)
self.block_label_background = block_label_background or getattr(
self, "block_label_background", "*color_background_primary"
self, "block_label_background", "*background_primary"
)
self.block_label_background_dark = block_label_background_dark or getattr(
self, "block_label_background_dark", "*color_background_secondary"
self, "block_label_background_dark", "*background_secondary"
)
self.block_label_border_color = block_label_border_color or getattr(
self, "block_label_border_color", "*color_border_primary"
self, "block_label_border_color", "*border_color_primary"
)
self.block_label_border_color_dark = block_label_border_color_dark or getattr(
self, "block_label_border_color_dark", "*color_border_primary"
self, "block_label_border_color_dark", "*border_color_primary"
)
self.block_label_border_width = block_label_border_width or getattr(
self, "block_label_border_width", "1px"
)
self.block_label_border_width_dark = block_label_border_width_dark or getattr(
self, "block_label_border_width_dark", "1px"
self, "block_label_border_width_dark", None
)
self.block_label_color = block_label_color or getattr(
self, "block_label_color", "*neutral_500"
self.block_label_text_color = block_label_text_color or getattr(
self, "block_label_text_color", "*neutral_500"
)
self.block_label_color_dark = block_label_color_dark or getattr(
self, "block_label_color_dark", "*neutral_200"
self.block_label_text_color_dark = block_label_text_color_dark or getattr(
self, "block_label_text_color_dark", "*neutral_200"
)
self.block_label_icon_color = block_label_icon_color or getattr(
self, "block_label_icon_color", "*block_label_color"
self, "block_label_icon_color", "*block_label_text_color"
)
self.block_label_margin = block_label_margin or getattr(
self, "block_label_margin", "0"
@ -571,31 +640,31 @@ class Base(ThemeClass):
self.block_radius = block_radius or getattr(self, "block_radius", "*radius_lg")
self.block_shadow = block_shadow or getattr(self, "block_shadow", "none")
self.block_shadow_dark = block_shadow_dark or getattr(
self, "block_shadow_dark", "none"
self, "block_shadow_dark", None
)
self.block_title_background = block_title_background or getattr(
self, "block_title_background", "none"
)
self.block_title_background_dark = block_title_background_dark or getattr(
self, "block_title_background_dark", "none"
self, "block_title_background_dark", None
)
self.block_title_border_color = block_title_border_color or getattr(
self, "block_title_border_color", "none"
)
self.block_title_border_color_dark = block_title_border_color_dark or getattr(
self, "block_title_border_color_dark", "none"
self, "block_title_border_color_dark", None
)
self.block_title_border_width = block_title_border_width or getattr(
self, "block_title_border_width", "0px"
)
self.block_title_border_width_dark = block_title_border_width_dark or getattr(
self, "block_title_border_width_dark", "0px"
self, "block_title_border_width_dark", None
)
self.block_title_color = block_title_color or getattr(
self, "block_title_color", "*neutral_500"
self.block_title_text_color = block_title_text_color or getattr(
self, "block_title_text_color", "*neutral_500"
)
self.block_title_color_dark = block_title_color_dark or getattr(
self, "block_title_color_dark", "*neutral_200"
self.block_title_text_color_dark = block_title_text_color_dark or getattr(
self, "block_title_text_color_dark", "*neutral_200"
)
self.block_title_padding = block_title_padding or getattr(
self, "block_title_padding", "0"
@ -615,41 +684,41 @@ class Base(ThemeClass):
self.form_gap_width = form_gap_width or getattr(self, "form_gap_width", "0px")
self.layout_gap = layout_gap or getattr(self, "layout_gap", "*spacing_xxl")
self.panel_background = panel_background or getattr(
self, "panel_background", "*color_background_secondary"
self, "panel_background", "*background_secondary"
)
self.panel_background_dark = panel_background_dark or getattr(
self, "panel_background_dark", "*color_background_secondary"
self, "panel_background_dark", "*background_secondary"
)
self.panel_border_color = panel_border_color or getattr(
self, "panel_border_color", "*color_border_primary"
self, "panel_border_color", "*border_color_primary"
)
self.panel_border_color_dark = panel_border_color_dark or getattr(
self, "panel_border_color_dark", "*color_border_primary"
self, "panel_border_color_dark", "*border_color_primary"
)
self.panel_border_width = panel_border_width or getattr(
self, "panel_border_width", "0"
)
self.section_text_size = section_text_size or getattr(
self, "section_text_size", "*text_md"
self.section_header_text_size = section_header_text_size or getattr(
self, "section_header_text_size", "*text_md"
)
self.section_text_weight = section_text_weight or getattr(
self, "section_text_weight", "400"
self.section_header_text_weight = section_header_text_weight or getattr(
self, "section_header_text_weight", "400"
)
# Component Atoms
self.checkbox_background = checkbox_background or getattr(
self, "checkbox_background", "*color_background_primary"
self, "checkbox_background", "*background_primary"
)
self.checkbox_background_dark = checkbox_background_dark or getattr(
self, "checkbox_background_dark", "*neutral_800"
)
self.checkbox_background_focus = checkbox_background_focus or getattr(
self, "checkbox_background_focus", "*color_background_primary"
self, "checkbox_background_focus", "*checkbox_background"
)
self.checkbox_background_focus_dark = checkbox_background_focus_dark or getattr(
self, "checkbox_background_focus_dark", "*checkbox_background"
)
self.checkbox_background_hover = checkbox_background_hover or getattr(
self, "checkbox_background_hover", "*color_background_primary"
self, "checkbox_background_hover", "*checkbox_background"
)
self.checkbox_background_hover_dark = checkbox_background_hover_dark or getattr(
self, "checkbox_background_hover_dark", "*checkbox_background"
@ -695,15 +764,17 @@ class Base(ThemeClass):
self, "checkbox_border_width", "*input_border_width"
)
self.checkbox_label_background = checkbox_label_background or getattr(
self, "checkbox_label_background", "*neutral_200"
self, "checkbox_label_background", "*button_secondary_background"
)
self.checkbox_label_background_dark = checkbox_label_background_dark or getattr(
self, "checkbox_label_background_dark", "*neutral_600"
self, "checkbox_label_background_dark", "*button_secondary_background"
)
self.checkbox_label_background_hover = (
checkbox_label_background_hover
or getattr(
self, "checkbox_label_background_hover", "*checkbox_label_background"
self,
"checkbox_label_background_hover",
"*button_secondary_background_hover",
)
)
self.checkbox_label_background_hover_dark = (
@ -711,7 +782,7 @@ class Base(ThemeClass):
or getattr(
self,
"checkbox_label_background_hover_dark",
"*checkbox_label_background",
"*button_secondary_background_hover",
)
)
self.checkbox_label_background_selected = (
@ -729,24 +800,28 @@ class Base(ThemeClass):
)
)
self.checkbox_label_border_color = checkbox_label_border_color or getattr(
self, "checkbox_label_border_color", "*color_border_primary"
self, "checkbox_label_border_color", "*border_color_primary"
)
self.checkbox_label_border_color_dark = (
checkbox_label_border_color_dark
or getattr(
self, "checkbox_label_border_color_dark", "*color_border_primary"
self, "checkbox_label_border_color_dark", "*border_color_primary"
)
)
self.checkbox_label_border_color_hover = (
checkbox_label_border_color_hover
or getattr(
self, "checkbox_label_border_color_hover", "*color_border_primary"
self,
"checkbox_label_border_color_hover",
"*checkbox_label_border_color",
)
)
self.checkbox_label_border_color_hover_dark = (
checkbox_label_border_color_hover_dark
or getattr(
self, "checkbox_label_border_color_hover_dark", "*color_border_primary"
self,
"checkbox_label_border_color_hover_dark",
"*checkbox_label_border_color",
)
)
self.checkbox_label_border_width = checkbox_label_border_width or getattr(
@ -789,19 +864,19 @@ class Base(ThemeClass):
self, "error_background", colors.red.c100
)
self.error_background_dark = error_background_dark or getattr(
self, "error_background_dark", "*color_background_primary"
self, "error_background_dark", "*background_primary"
)
self.error_border_color = error_border_color or getattr(
self, "error_border_color", colors.red.c200
)
self.error_border_color_dark = error_border_color_dark or getattr(
self, "error_border_color_dark", "*color_border_primary"
self, "error_border_color_dark", "*border_color_primary"
)
self.error_border_width = error_border_width or getattr(
self, "error_border_width", "1px"
)
self.error_border_width_dark = error_border_width_dark or getattr(
self, "error_border_width_dark", "*error_border_width"
self, "error_border_width_dark", None
)
self.error_color = error_color or getattr(self, "error_color", colors.red.c500)
self.error_color_dark = error_color_dark or getattr(
@ -829,10 +904,10 @@ class Base(ThemeClass):
self, "input_background_hover_dark", "*input_background"
)
self.input_border_color = input_border_color or getattr(
self, "input_border_color", "*color_border_primary"
self, "input_border_color", "*border_color_primary"
)
self.input_border_color_dark = input_border_color_dark or getattr(
self, "input_border_color_dark", "*color_border_primary"
self, "input_border_color_dark", "*border_color_primary"
)
self.input_border_color_focus = input_border_color_focus or getattr(
self, "input_border_color_focus", "*secondary_300"
@ -841,10 +916,10 @@ class Base(ThemeClass):
self, "input_border_color_focus_dark", "*neutral_700"
)
self.input_border_color_hover = input_border_color_hover or getattr(
self, "input_border_color_hover", "*color_border_primary"
self, "input_border_color_hover", "*input_border_color"
)
self.input_border_color_hover_dark = input_border_color_hover_dark or getattr(
self, "input_border_color_hover_dark", "*color_border_primary"
self, "input_border_color_hover_dark", "*input_border_color"
)
self.input_border_width = input_border_width or getattr(
self, "input_border_width", "0px"
@ -861,13 +936,13 @@ class Base(ThemeClass):
self.input_radius = input_radius or getattr(self, "input_radius", "*radius_lg")
self.input_shadow = input_shadow or getattr(self, "input_shadow", "none")
self.input_shadow_dark = input_shadow_dark or getattr(
self, "input_shadow_dark", "*input_shadow"
self, "input_shadow_dark", None
)
self.input_shadow_focus = input_shadow_focus or getattr(
self, "input_shadow_focus", "*input_shadow"
)
self.input_shadow_focus_dark = input_shadow_focus_dark or getattr(
self, "input_shadow_focus_dark", "*input_shadow"
self, "input_shadow_focus_dark", None
)
self.input_text_size = input_text_size or getattr(
self, "input_text_size", "*text_md"
@ -876,10 +951,10 @@ class Base(ThemeClass):
self, "input_text_weight", "400"
)
self.loader_color = loader_color or getattr(
self, "loader_color", "*color_accent"
self, "loader_color", "*background_accent"
)
self.loader_color_dark = loader_color_dark or getattr(
self, "loader_color_dark", "*color_accent"
self, "loader_color_dark", None
)
self.prose_text_size = prose_text_size or getattr(
self, "prose_text_size", "*text_md"
@ -887,7 +962,7 @@ class Base(ThemeClass):
self.prose_text_weight = prose_text_weight or getattr(
self, "prose_text_weight", "400"
)
self.slider_color = slider_color or getattr(self, "slider_color", None)
self.slider_color = slider_color or getattr(self, "slider_color", "")
self.slider_color_dark = slider_color_dark or getattr(
self, "slider_color_dark", None
)
@ -917,20 +992,20 @@ class Base(ThemeClass):
)
self.table_radius = table_radius or getattr(self, "table_radius", "*radius_lg")
self.table_row_focus = table_row_focus or getattr(
self, "table_row_focus", "*color_accent_soft"
self, "table_row_focus", "*background_accent_soft"
)
self.table_row_focus_dark = table_row_focus_dark or getattr(
self, "table_row_focus_dark", "*color_accent_soft"
self, "table_row_focus_dark", "*background_accent_soft"
)
# Buttons
self.button_border_width = button_border_width or getattr(
self, "button_border_width", "*input_border_width"
)
self.button_cancel_background = button_cancel_background or getattr(
self, "button_cancel_background", colors.red.c200
self, "button_cancel_background", "*button_secondary_background"
)
self.button_cancel_background_dark = button_cancel_background_dark or getattr(
self, "button_cancel_background_dark", colors.red.c700
self, "button_cancel_background_dark", "*button_secondary_background"
)
self.button_cancel_background_hover = button_cancel_background_hover or getattr(
self, "button_cancel_background_hover", "*button_cancel_background"
@ -940,20 +1015,26 @@ class Base(ThemeClass):
or getattr(
self,
"button_cancel_background_hover_dark",
"*button_cancel_background_hover",
"*button_cancel_background",
)
)
self.button_cancel_border_color = button_cancel_border_color or getattr(
self, "button_cancel_border_color", colors.red.c200
self, "button_cancel_border_color", "*button_secondary_border_color"
)
self.button_cancel_border_color_dark = (
button_cancel_border_color_dark
or getattr(self, "button_cancel_border_color_dark", colors.red.c600)
or getattr(
self,
"button_cancel_border_color_dark",
"*button_secondary_border_color",
)
)
self.button_cancel_border_color_hover = (
button_cancel_border_color_hover
or getattr(
self, "button_cancel_border_color_hover", "*button_cancel_border_color"
self,
"button_cancel_border_color_hover",
"*button_cancel_border_color",
)
)
self.button_cancel_border_color_hover_dark = (
@ -965,10 +1046,10 @@ class Base(ThemeClass):
)
)
self.button_cancel_text_color = button_cancel_text_color or getattr(
self, "button_cancel_text_color", colors.red.c600
self, "button_cancel_text_color", "*button_secondary_text_color"
)
self.button_cancel_text_color_dark = button_cancel_text_color_dark or getattr(
self, "button_cancel_text_color_dark", "white"
self, "button_cancel_text_color_dark", "*button_secondary_text_color"
)
self.button_cancel_text_color_hover = button_cancel_text_color_hover or getattr(
self, "button_cancel_text_color_hover", "*button_cancel_text_color"

30
gradio/themes/default.py
View File

@ -1,7 +1,9 @@
from __future__ import annotations
from typing import Iterable
from gradio.themes.base import Base
from gradio.themes.utils import colors, sizes
from gradio.themes.utils import colors, fonts, sizes
class Default(Base):
@ -14,6 +16,22 @@ class Default(Base):
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("Source Sans Pro"),
"ui-sans-serif",
"system-ui",
"sans-serif",
),
font_mono: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("IBM Plex Mono"),
"ui-monospace",
"Consolas",
"monospace",
),
):
super().__init__(
primary_hue=primary_hue,
@ -22,6 +40,8 @@ class Default(Base):
spacing_size=spacing_size,
radius_size=radius_size,
text_size=text_size,
font=font,
font_mono=font_mono,
)
super().set(
# Colors
@ -44,8 +64,8 @@ class Default(Base):
# Gradients
stat_color_background="linear-gradient(to right, *primary_400, *primary_200)",
stat_color_background_dark="linear-gradient(to right, *primary_400, *primary_600)",
error_background=f"linear-gradient(to right, {colors.red.c100}, *color_background_secondary)",
error_background_dark="*color_background_primary",
error_background=f"linear-gradient(to right, {colors.red.c100}, *background_secondary)",
error_background_dark="*background_primary",
checkbox_label_background="linear-gradient(to top, *neutral_50, white)",
checkbox_label_background_dark="linear-gradient(to top, *neutral_900, *neutral_800)",
checkbox_label_background_hover="linear-gradient(to top, *neutral_100, white)",
@ -63,4 +83,8 @@ class Default(Base):
button_cancel_background_dark=f"linear-gradient(to bottom right, {colors.red.c600}, {colors.red.c700})",
button_cancel_background_hover=f"linear-gradient(to bottom right, {colors.red.c100}, {colors.red.c100})",
button_cancel_background_hover_dark=f"linear-gradient(to bottom right, {colors.red.c600}, {colors.red.c600})",
button_cancel_border_color=colors.red.c200,
button_cancel_border_color_dark=colors.red.c600,
button_cancel_text_color=colors.red.c600,
button_cancel_text_color_dark="white",
)

47
gradio/themes/glass.py
View File

@ -1,29 +1,51 @@
from __future__ import annotations
from typing import Iterable
from gradio.themes.base import Base
from gradio.themes.utils import colors, sizes
from gradio.themes.utils import colors, fonts, sizes
class Glass(Base):
def __init__(
self,
*,
hue: colors.Color | str = colors.stone,
primary_hue: colors.Color | str = colors.stone,
secondary_hue: colors.Color | str = colors.stone,
neutral_hue: colors.Color | str = colors.stone,
spacing_size: sizes.Size | str = sizes.spacing_sm,
radius_size: sizes.Size | str = sizes.radius_sm,
text_size: sizes.Size | str = sizes.text_sm,
font: fonts.Font
| str
| Iterable[fonts.Font | str] = (
"Verdana",
"ui-sans-serif",
"system-ui",
"sans-serif",
),
font_mono: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("IBM Plex Mono"),
"ui-monospace",
"Consolas",
"monospace",
),
):
super().__init__(
primary_hue=hue,
secondary_hue=hue,
neutral_hue=hue,
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_background_color_dark="*primary_800",
color_background_secondary_dark="*primary_800",
body_background_dark="*primary_800",
background_secondary_dark="*primary_800",
block_background_dark="*primary_800",
button_primary_background="linear-gradient(180deg, *primary_50 0%, *primary_200 50%, *primary_300 50%, *primary_200 100%)",
button_primary_background_hover="linear-gradient(180deg, *primary_100 0%, *primary_200 50%, *primary_300 50%, *primary_200 100%)",
@ -51,10 +73,11 @@ class Glass(Base):
button_shadow_active="*shadow_inset",
input_background="linear-gradient(0deg, *secondary_50 0%, white 100%)",
input_background_dark="*secondary_600",
input_border_color_focus_dark="*primary_400",
input_border_width="1px",
slider_color="*primary_400",
block_label_color="*primary_500",
block_title_color="*primary_500",
block_label_text_color="*primary_500",
block_title_text_color="*primary_500",
block_label_text_weight="600",
block_title_text_weight="600",
block_label_text_size="*text_md",
@ -64,9 +87,9 @@ class Glass(Base):
block_border_width="0px",
block_border_width_dark="1px",
panel_border_width="1px",
color_border_primary_dark="*primary_500",
color_background_primary_dark="*neutral_700",
color_background_secondary="*primary_100",
border_color_primary_dark="*primary_500",
background_primary_dark="*neutral_700",
background_secondary="*primary_100",
block_background="*primary_50",
block_shadow="*primary_400 0px 0px 3px 0px",
table_even_background_dark="*neutral_700",

53
gradio/themes/monochrome.py
View File

@ -1,38 +1,60 @@
from __future__ import annotations
from typing import Iterable
from gradio.themes.base import Base
from gradio.themes.utils import colors, sizes
from gradio.themes.utils import colors, fonts, sizes
class Monochrome(Base):
def __init__(
self,
*,
hue: colors.Color | str = colors.neutral,
primary_hue: colors.Color | str = colors.neutral,
secondary_hue: colors.Color | str = colors.neutral,
neutral_hue: colors.Color | str = colors.neutral,
spacing_size: sizes.Size | str = sizes.spacing_lg,
radius_size: sizes.Size | str = sizes.radius_none,
text_size: sizes.Size | str = sizes.text_md,
font: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("Lora"),
"ui-sans-serif",
"system-ui",
"sans-serif",
),
font_mono: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("IBM Plex Mono"),
"ui-monospace",
"Consolas",
"monospace",
),
):
super().__init__(
primary_hue=hue,
secondary_hue=hue,
neutral_hue=hue,
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(
# Colors
slider_color="*neutral_900",
slider_color_dark="*neutral_500",
body_text_color="*neutral_900",
block_label_color="*body_text_color",
block_title_color="*body_text_color",
text_color_subdued="*neutral_700",
color_background_primary_dark="*neutral_900",
color_background_secondary_dark="*neutral_800",
block_label_text_color="*body_text_color",
block_title_text_color="*body_text_color",
body_text_color_subdued="*neutral_700",
background_primary_dark="*neutral_900",
background_secondary_dark="*neutral_800",
block_background_dark="*neutral_800",
input_background_dark="*neutral_600",
input_background_dark="*neutral_700",
# Button Colors
button_primary_background="*neutral_900",
button_primary_background_hover="*neutral_700",
@ -43,21 +65,12 @@ class Monochrome(Base):
button_secondary_background="*button_primary_background",
button_secondary_background_hover="*button_primary_background_hover",
button_secondary_text_color="*button_primary_text_color",
button_secondary_background_dark="*button_primary_background",
button_secondary_background_hover_dark="*button_primary_background_hover",
button_secondary_text_color_dark="*button_primary_text_color",
button_cancel_background="*button_primary_background",
button_cancel_background_hover="*button_primary_background_hover",
button_cancel_text_color="*button_primary_text_color",
button_cancel_background_dark="*button_primary_background",
button_cancel_background_hover_dark="*button_primary_background_hover",
button_cancel_text_color_dark="*button_primary_text_color",
checkbox_label_background="*button_primary_background",
checkbox_label_background_hover="*button_primary_background_hover",
checkbox_text_color="*button_primary_text_color",
checkbox_label_background_dark="*button_primary_background",
checkbox_label_background_hover_dark="*button_primary_background_hover",
checkbox_text_color_dark="*button_primary_text_color",
checkbox_background_selected="*neutral_600",
checkbox_background_dark="*neutral_700",
checkbox_background_selected_dark="*neutral_700",

38
gradio/themes/soft.py
View File

@ -1,7 +1,9 @@
from __future__ import annotations
from typing import Iterable
from gradio.themes.base import Base
from gradio.themes.utils import colors, sizes
from gradio.themes.utils import colors, fonts, sizes
class Soft(Base):
@ -14,6 +16,22 @@ class Soft(Base):
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("Montserrat"),
"ui-sans-serif",
"system-ui",
"sans-serif",
),
font_mono: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("IBM Plex Mono"),
"ui-monospace",
"Consolas",
"monospace",
),
):
super().__init__(
primary_hue=primary_hue,
@ -22,10 +40,12 @@ class Soft(Base):
spacing_size=spacing_size,
radius_size=radius_size,
text_size=text_size,
font=font,
font_mono=font_mono,
)
super().set(
# Colors
color_background_primary="*neutral_50",
background_primary="*neutral_50",
slider_color="*primary_500",
slider_color_dark="*primary_600",
# Shadows
@ -39,15 +59,14 @@ class Soft(Base):
block_label_radius="*radius_md",
block_label_text_size="*text_md",
block_label_text_weight="600",
block_label_color="*primary_500",
block_label_color_dark="*white",
block_label_text_color="*primary_500",
block_label_text_color_dark="*white",
block_title_radius="*block_label_radius",
block_title_padding="*block_label_padding",
block_title_background="*block_label_background",
block_title_background_dark="*block_label_background",
block_title_text_weight="600",
block_title_color="*primary_500",
block_title_color_dark="*white",
block_title_text_color="*primary_500",
block_title_text_color_dark="*white",
block_label_margin="*spacing_md",
# Inputs
input_background="white",
@ -63,14 +82,16 @@ class Soft(Base):
button_shadow_active="*shadow_inset",
button_primary_background="*primary_500",
button_primary_background_hover="*primary_400",
button_primary_background_hover_dark="*primary_500",
button_primary_text_color="white",
button_secondary_background="white",
button_secondary_background_hover="*neutral_100",
button_secondary_background_hover_dark="*primary_500",
button_secondary_text_color="*neutral_800",
button_cancel_background="*button_secondary_background",
button_cancel_background_hover="*button_secondary_background_hover",
button_cancel_background_hover_dark="*button_secondary_background_hover",
button_cancel_text_color="*button_secondary_text_color",
checkbox_label_background="white",
checkbox_label_background_selected="*primary_500",
checkbox_label_background_selected_dark="*primary_600",
checkbox_border_width="1px",
@ -85,6 +106,5 @@ class Soft(Base):
checkbox_text_color_selected="white",
# Borders
block_border_width="0px",
block_border_width_dark="0px",
panel_border_width="1px",
)

1
gradio/themes/utils/__init__.py
View File

@ -1,2 +1,3 @@
from .colors import * # noqa: F401
from .fonts import * # noqa: F401
from .sizes import * # noqa: F401

21
gradio/themes/utils/fonts.py Normal file
View File

@ -0,0 +1,21 @@
from __future__ import annotations
class Font:
def __init__(self, name: str):
self.name = name
def __str__(self) -> str:
return (
self.name
if self.name in ["sans-serif", "serif", "monospace", "cursive", "fantasy"]
else f"'{self.name}'"
)
def stylesheet(self) -> str:
return None
class GoogleFont(Font):
def stylesheet(self) -> str:
return f'https://fonts.googleapis.com/css2?family={self.name.replace(" ", "+")}:wght@400;600&display=swap'

16
guides/01_getting-started/02_key-features.md
View File

@ -119,13 +119,14 @@ Take a look at the [Docs](https://gradio.app/docs) to see all the preprocessing-
## Styling
Many components can be styled through the `style()` method. For example:
Gradio themes are the easiest way to customize the look and feel of your app. You can choose from a variety of themes, or create your own. To do so, pass the `theme=` kwarg to the `Interface` constructor. For example:
```python
img = gr.Image("lion.jpg").style(height='24', rounded=False)
demo = gr.Interface(..., theme=gr.themes.Monochrome())
```
Take a look at the [Docs](https://gradio.app/docs) to see all the styling options for each Component.
Gradio comes with a set of prebuilt themes which you can load from `gr.themes.*`. You can extend these themes or create your own themes from scratch - see the [Theming guide](https://gradio.app/theming-guide) for more details.
For additional styling ability, you can pass any CSS to your app using the `css=` kwarg.
The base class for the Gradio app is `gradio-container`, so here's an example that changes the background color of the Gradio app:
@ -135,6 +136,15 @@ with gr.Interface(css=".gradio-container {background-color: red}") as demo:
...
```
Some components can be additionally styled through the `style()` method. For example:
```python
img = gr.Image("lion.jpg").style(height='24', rounded=False)
```
Take a look at the [Docs](https://gradio.app/docs) to see all the styling options for each Component.
## Queuing
If your app expects heavy traffic, use the `queue()` method to control processing rate. This will queue up calls so only a certain number of requests are processed at a single time. Queueing uses websockets, which also prevent network timeouts, so you should use queueing if the inference time of your function is long (> 1min).

9
guides/03_building-with-blocks/04_custom-CSS-and-JS.md
View File

@ -4,6 +4,15 @@ This guide covers how to style Blocks with more flexibility, as well as adding J
## Custom CSS
Gradio themes are the easiest way to customize the look and feel of your app. You can choose from a variety of themes, or create your own. To do so, pass the `theme=` kwarg to the `Blocks` constructor. For example:
```python
with gr.Blocks(theme=gr.themes.Glass()):
...
```
Gradio comes with a set of prebuilt themes which you can load from `gr.themes.*`. You can extend these themes or create your own themes from scratch - see the [Theming guide](https://gradio.app/theming-guide) for more details.
For additional styling ability, you can pass any CSS to your app using the `css=` kwarg.
The base class for the Gradio app is `gradio-container`, so here's an example that changes the background color of the Gradio app:

212
guides/06_other-tutorials/theming-guide Normal file
View File

@ -0,0 +1,212 @@
# Theming
Tags: THEMES
## Introduction
Gradio features a built-in theming engine that lets you customize the look and feel of your app. You can choose from a variety of themes, or create your own. To do so, pass the `theme=` kwarg to the `Blocks` or `Interface` constructor. For example:
```python
with gr.Blocks(theme=gr.themes.Glass()):
...
```
$demo_theme_glass
Gradio comes with a set of prebuilt themes which you can load from `gr.themes.*`. Each of these themes set values for hundreds of CSS variables.
You can use prebuilt themes as a starting point for your own custom themes, or you can create your own themes from scratch. Let's take a look at each approach.
## Extending Themes via the Constructor
Although each theme has hundreds of CSS variables, the values for most these variables are drawn from 8 core variables which can be set through the constructor of each prebuilt theme. Modifying these 8 arguments allows you to quickly change the look and feel of your app.
### Core Colors
The first 3 constructor arguments set the colors of the theme and are gradio.themes.Color objects. Internally, these Color objects hold brightness values for the palette of a single hue, ranging from 50, 100, 200..., 800, 900, 950. Other CSS variables are derived from these 3 colors.
The 3 color constructor arguments are:
- `primary_hue`: This is the color draws attention in your theme. In the default theme, this is set to `gradio.themes.Orange`.
- `secondary_hue`: This is the color that is used for secondary elements in your theme. In the default theme, this is set to `gradio.themes.Blue`.
- `neutral_hue`: This is the color that is used for text and other neutral elements in your theme. In the default theme, this is set to `gradio.themes.Gray`.
You could modify these values using their string shortcuts, such as
```python
with gr.Blocks(theme=gr.themes.Default(primary_hue="red", secondary_hue="pink")):
...
```
or you could use the `Color` object directly, such as
```python
with gr.Blocks(theme=gr.themes.Default(primary_hue=gr.themes.Red, secondary_hue=gr.themes.Pink)):
...
```
$demo_theme_extended_step_1
You could also create your own custom `Color` objects and pass them in.
### Core Sizing
The next 3 constructor arguments set the sizing of the theme and are gradio.themes.Size objects. Internally, these Size objects hold pixel size values that range from `xxs` to `xxl`. Other CSS variables are derived from these 3 sizes.
- `spacing_size`: This sets the padding within and spacing between elements. In the default theme, this is set to `gradio.themes.spacing_md`.
- `radius_size`: This sets the roundedness of corners of elements. In the default theme, this is set to `gradio.themes.radius_md`.
- `text_size`: This sets the font size of text. In the default theme, this is set to `gradio.themes.font_md`.
You could modify these values using their string shortcuts, such as
```python
with gr.Blocks(theme=gr.themes.Default(spacing_size="sm", radius_size="none")):
...
```
or you could use the `Size` object directly, such as
```python
with gr.Blocks(theme=gr.themes.Default(spacing_size=gr.themes.spacing_sm, radius_size=gr.themes.radius_none)):
...
```
$demo_theme_extended_step_2
You could also create your own custom `Size` objects and pass them in.
### Core Fonts
The final 2 constructor arguments set the fonts of the theme. You can pass a list of fonts to each of these arguments to specify fallbacks. If you provide a string, it will be loaded as a system font. If you provide a `gradio.themes.GoogleFont`, the font will be loaded from Google Fonts.
- `font`: This sets the primary font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("Source Sans Pro")`.
- `font_mono`: This sets the monospace font of the theme. In the default theme, this is set to `gradio.themes.GoogleFont("IBM Plex Mono")`.
You could modify these values such as the following:
```python
with gr.Blocks(theme=gr.themes.Default(font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"])):
...
```
$demo_theme_extended_step_3
## Extending Themes via `.set()`
You can also modify the values of CSS variables after the theme has been loaded. To do so, use the `.set()` method of the theme object to get access to the CSS variables. For example:
```python
theme = gr.themes.Default(primary_hue="blue").set(
loader_color="#FF0000",
slider_color="#FF0000",
)
with gr.Blocks(theme=theme):
...
```
In the example above, we've set the `loader_color` and `slider_color` variables to `#FF0000`, despite the overall `primary_color` using the blue color palette. You can set any CSS variable that is defined in the theme in this manner.
Your IDE type hinting should help you navigate these variables. Since there are so many CSS variables, let's take a look at how these variables are named and organized.
### CSS Variable Naming Conventions
CSS variable names can get quite long, like `button_primary_background_hover_dark`! However they follow a common naming convention that makes it easy to understand what they do and to find the variable you're looking for. Seperated by underscores, the variable name is made up of:
1. The target element, such as `button`, `slider`, or `block`.
2. The target element type or sub-element, such as `button_primary`, or `block_label`.
3. The property, such as `button_primary_background`, or `block_label_border_width`.
4. Any relevant state, such as `button_primary_background_hover`.
5. If the value is different in dark mode, the suffix `_dark`. For example, `input_border_color_focus_dark`.
Of course, many CSS variable names are shorter than this, such as `table_border_color`, or `input_shadow`.
### CSS Variable Organization
Though there are hundreds of CSS variables, they do not all have to have individual values. They draw their values by referencing a set of core variables and referencing each other. This allows us to only have to modify a few variables to change the look and feel of the entire theme, while also getting finer control of individual elements that we may want to modify.
#### Referencing Core Variables
To reference one of the core constructor variables, precede the variable name with an asterisk. To reference a core color, use the `*primary_`, `*secondary_`, or `*neutral_` prefix, followed by the brightness value. For example:
```python
theme = gr.themes.Default(primary_hue="blue").set(
button_primary_background="*primary_200",
button_primary_background_hover="*primary_300",
)
```
In the example above, we've set the `button_primary_background` and `button_primary_background_hover` variables to `*primary_200` and `*primary_300`. These variables will be set to the 200 and 300 brightness values of the blue primary color palette, respectively.
Similarly, to reference a core size, use the `*spacing_`, `*radius_`, or `*text_` prefix, followed by the size value. For example:
```python
theme = gr.themes.Default(radius_size="md").set(
button_primary_border_radius="*radius_xl",
)
```
In the example above, we've set the `button_primary_border_radius` variable to `*radius_xl`. This variable will be set to the `xl` setting of the medium radius size range.
#### Referencing Other Variables
Variables can also reference each other. For example, look at the example below:
```python
theme = gr.themes.Default().set(
button_primary_background="#FF0000",
button_primary_background_hover="#FF0000",
button_primary_border="#FF0000",
)
```
Having to set these values to a common color is a bit tedious. Instead, we can reference the `button_primary_background` variable in the `button_primary_background_hover` and `button_primary_border` variables, using a `*` prefix.
```python
theme = gr.themes.Default().set(
button_primary_background="#FF0000",
button_primary_background_hover="*button_primary_background",
button_primary_border="*button_primary_background",
)
```
Now, if we change the `button_primary_background` variable, the `button_primary_background_hover` and `button_primary_border` variables will automatically update as well.
This is particularly useful if you intend to share your theme - it makes it easy to modify the theme without having to change every variable.
Note that dark mode variables automatically reference each other. For example:
```python
theme = gr.themes.Default().set(
button_primary_background="#FF0000",
button_primary_background_dark="#AAAAAA",
button_primary_border="*button_primary_background",
button_primary_border_dark="*button_primary_background",
)
```
`button_primary_border_dark` will draw its value from `button_primary_background_dark`, because dark mode always draw from the dark version of the variable.
## Creating a Full Theme
Let's say you want to create a theme from scratch! We'll go through it step by step - you can also see the source of prebuilt themes in the gradio source repo for reference - [here's the source](https://github.com/gradio-app/gradio/blob/main/gradio/themes/monochrome.py) for the Monochrome theme.
Our new theme class will inherit from `gradio.themes.Base`, a theme that sets a lot of convenient defaults. Let's make a simple demo that creates a dummy theme called Seafoam, and make a simple app that uses it.
$code_theme_new_step_1
$demo_theme_new_step_1
The Base theme is very barebones, and uses `gr.themes.Blue` as it primary color - you'll note the primary button and the loading animation are both blue as a result. Let's change the defaults core arguments of our app. We'll overwrite the constructor and pass new defaults for the core constructor arguments.
We'll use `gr.themes.Emerald` as our primary color, and set secondary and neutral hues to `gr.themes.Blue`. We'll make our text larger using `text_lg`. We'll use `Quicksand` as our default font, loaded from Google Fonts.
$code_theme_new_step_2
$demo_theme_new_step_2
See how the primary button and the loading animation are now green? These CSS variables are tied to the `primary_hue` variable. Let's modify the theme a bit more directly. We'll call the `set()` method to overwrite CSS variable values explicitly. We can use any CSS logic, and reference our core constructor arguments using the `*` prefix.
$code_theme_new_step_3
$demo_theme_new_step_3
Look how fun our theme looks now! With just a few variable changes, our theme looks completely different.
You may find it helpful to explore the [source code of the other prebuilt themes](https://github.com/gradio-app/gradio/blob/main/gradio/themes) to see how they modified the base theme. You can also find your browser's Inspector useful to select elements from the UI and see what CSS variables are being used in the styles panel.
Enjoy creating your own themes! If you make one you're proud of, please share it with us on [Twitter](https://twitter.com/gradio).

4
ui/packages/accordion/src/Accordion.svelte
View File

@ -15,8 +15,8 @@
<style>
span {
font-weight: var(--section-text-weight);
font-size: var(--section-text-size);
font-weight: var(--section-header-text-weight);
font-size: var(--section-header-text-size);
}
.label-wrap {
display: flex;

8
ui/packages/app/index.html
View File

@ -52,14 +52,6 @@
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
</head>

4
ui/packages/app/src/Blocks.svelte
View File

@ -469,7 +469,7 @@
display: flex;
justify-content: center;
margin-top: var(--size-4);
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
}
footer > * + * {
@ -523,7 +523,7 @@
.api-docs-wrap {
box-shadow: var(--shadow-drop-lg);
background: var(--color-background-primary);
background: var(--background-primary);
overflow-x: hidden;
overflow-y: auto;
}

4
ui/packages/app/src/Embed.svelte
View File

@ -48,7 +48,7 @@
display: flex;
position: relative;
flex-direction: column;
background: var(--body-background-color);
background: var(--body-background);
padding: 0;
min-height: 1px;
overflow: hidden;
@ -117,7 +117,7 @@
border-top: 1px solid var(--button-secondary-border-color);
padding: var(--size-1) var(--size-5);
width: 100%;
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
font-size: var(--text-md);
white-space: nowrap;
}

17
ui/packages/app/src/Index.svelte
View File

@ -27,6 +27,7 @@
is_space: boolean;
is_colab: boolean;
show_api: boolean;
stylesheets: string[];
}
let id = -1;
@ -96,6 +97,14 @@
target.appendChild(style);
}
mount_css(config.root + "/theme.css", document.head);
for (let stylesheet of config.stylesheets) {
let absolute_link =
stylesheet.startsWith("http:") || stylesheet.startsWith("https:");
mount_css(
absolute_link ? stylesheet : config.root + "/" + stylesheet,
document.head
);
}
}
async function reload_check(root: string) {
@ -332,19 +341,19 @@
}
a {
color: var(--text-color-link);
color: var(--link-text-color);
}
a:hover {
color: var(--text-color-link-hover);
color: var(--link-text-color-hover);
text-decoration: underline;
}
a:visited {
color: var(--text-color-link-visited);
color: var(--link-text-color-visited);
}
a:active {
color: var(--text-color-link-active);
color: var(--link-text-color-active);
}
</style>

2
ui/packages/app/src/Login.svelte
View File

@ -86,7 +86,7 @@
justify-content: center;
align-items: center;
margin-top: var(--size-3);
background: var(--color-background-primary);
background: var(--background-primary);
width: var(--size-full);
}

4
ui/packages/app/src/api_docs/ApiBanner.svelte
View File

@ -39,7 +39,7 @@
}
span {
color: var(--color-accent);
color: var(--background-accent);
}
button {
@ -51,7 +51,7 @@
}
button:hover {
color: var(--color-accent);
color: var(--background-accent);
}
@media (--screen-md) {

4
ui/packages/app/src/api_docs/ApiDocs.svelte
View File

@ -157,7 +157,7 @@
<style>
.banner-wrap {
position: relative;
border-bottom: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--border-color-primary);
padding: var(--size-4) var(--size-6);
font-size: var(--text-md);
}
@ -176,7 +176,7 @@
.endpoint {
border-radius: var(--radius-md);
background: var(--color-background-primary);
background: var(--background-primary);
padding: var(--size-6);
font-size: var(--text-md);
}

10
ui/packages/app/src/api_docs/CodeSnippets.svelte
View File

@ -145,11 +145,11 @@ const data = await <span class="token string">response</span>.json();
.snippet {
display: flex;
align-items: center;
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-radius: var(--radius-md);
padding: var(--size-1) var(--size-1-5);
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
color: var(--body-text-color);
line-height: 1;
user-select: none;
@ -157,13 +157,13 @@ const data = await <span class="token string">response</span>.json();
}
.current-lang {
border: 1px solid var(--text-color-subdued);
border: 1px solid var(--body-text-color-subdued);
color: var(--body-text-color);
}
.inactive-lang {
cursor: pointer;
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
}
.inactive-lang:hover,
@ -191,7 +191,7 @@ const data = await <span class="token string">response</span>.json();
.token.string {
display: contents;
color: var(--color-accent-base);
color: var(--background-accent-base);
}
code {

6
ui/packages/app/src/api_docs/EndpointDetail.svelte
View File

@ -42,12 +42,12 @@
.post {
margin-right: var(--size-2);
border: 1px solid var(--color-border-accent);
border: 1px solid var(--border-color-accent);
border-radius: var(--radius-sm);
background: var(--color-accent-soft);
background: var(--background-accent-soft);
padding-right: var(--size-1);
padding-left: var(--size-1);
color: var(--color-accent);
color: var(--background-accent);
font-weight: var(--weight-semibold);
}

4
ui/packages/app/src/api_docs/InputPayload.svelte
View File

@ -142,11 +142,11 @@
}
.type {
color: var(--block-label-color);
color: var(--block-label-text-color);
}
.desc {
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
}
.name {

4
ui/packages/app/src/api_docs/NoApi.svelte
View File

@ -50,7 +50,7 @@
.attention code {
border: none;
background: none;
color: var(--color-accent);
color: var(--background-accent);
font-weight: var(--weight-bold);
}
@ -63,7 +63,7 @@
}
button:hover {
color: var(--color-accent);
color: var(--background-accent);
}
@media (--screen-md) {

4
ui/packages/app/src/api_docs/ResponseObject.svelte
View File

@ -136,11 +136,11 @@
}
.type {
color: var(--block-label-color);
color: var(--block-label-text-color);
}
.desc {
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
}
.name {

20
ui/packages/app/src/components/Dataset/Dataset.svelte
View File

@ -201,7 +201,7 @@
display: flex;
align-items: center;
margin-bottom: var(--size-2);
color: var(--block-label-color);
color: var(--block-label-text-color);
font-weight: var(--block-label-text-weight);
font-size: var(--block-label-text-size);
line-height: var(--line-sm);
@ -218,18 +218,18 @@
}
.gallery-item {
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-radius: var(--button-large-radius);
overflow: hidden;
}
.gallery-item:hover {
border-color: var(--color-border-accent);
border-color: var(--border-color-accent);
background: var(--table-row-focus);
}
.table-wrap {
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-radius: var(--table-radius);
width: var(--size-full);
table-layout: auto;
@ -242,13 +242,13 @@
.tr-head {
box-shadow: var(--shadow-drop-lg);
border-bottom: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--border-color-primary);
}
.tr-head > * + * {
border-right-width: 0px;
border-left-width: 1px;
border-color: var(--color-border-primary);
border-color: var(--border-color-primary);
}
th {
@ -258,7 +258,7 @@
.tr-body {
cursor: pointer;
border-bottom: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--border-color-primary);
background: var(--table-even-background);
}
@ -277,11 +277,11 @@
.tr-body > * + * {
border-right-width: 0px;
border-left-width: 1px;
border-color: var(--color-border-primary);
border-color: var(--border-color-primary);
}
.tr-body:hover > * + * {
border-color: var(--color-border-accent);
border-color: var(--border-color-accent);
}
td {
@ -295,7 +295,7 @@
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--size-2);
color: var(--block-label-color);
color: var(--block-label-text-color);
font-size: var(--text-sm);
}

4
ui/packages/app/src/components/Dataset/ExampleComponents/Dataframe.svelte
View File

@ -99,7 +99,7 @@
}
.selected td {
border-color: var(--color-border-accent);
border-color: var(--border-color-accent);
}
.table {
@ -142,6 +142,6 @@
}
.button {
--gradient-to: var(--color-background-primary);
--gradient-to: var(--background-primary);
}
</style>

6
ui/packages/app/src/components/Dataset/ExampleComponents/Image.svelte
View File

@ -20,12 +20,12 @@
}
img.selected {
border-color: var(--color-border-accent);
border-color: var(--border-color-accent);
}
.table {
margin: 0 auto;
border: 2px solid var(--color-border-primary);
border: 2px solid var(--border-color-primary);
border-radius: var(--radius-lg);
width: var(--size-20);
height: var(--size-20);
@ -33,7 +33,7 @@
}
.gallery {
border: 2px solid var(--color-border-primary);
border: 2px solid var(--border-color-primary);
max-height: var(--size-20);
object-fit: cover;
}

4
ui/packages/app/src/components/Dataset/ExampleComponents/Video.svelte
View File

@ -44,14 +44,14 @@
<style>
video {
flex: none;
border: 2px solid var(--color-border-primary);
border: 2px solid var(--border-color-primary);
border-radius: var(--radius-lg);
max-width: none;
}
video:hover,
video.selected {
border-color: var(--color-border-accent);
border-color: var(--border-color-accent);
}
.table {
margin: 0 auto;

4
ui/packages/app/src/components/Form/Form.svelte
View File

@ -13,9 +13,9 @@
flex-wrap: wrap;
gap: var(--form-gap-width);
box-shadow: var(--block-shadow);
border: var(--block-border-width) solid var(--color-border-primary);
border: var(--block-border-width) solid var(--border-color-primary);
border-radius: var(--radius-lg);
background: var(--color-border-primary);
background: var(--border-color-primary);
overflow: hidden;
}

8
ui/packages/app/src/components/Interpretation/InterpretationComponents/Checkbox.svelte
View File

@ -66,8 +66,8 @@
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--color-border-primary);
background: var(--color-background-primary);
border: 1px solid var(--border-color-primary);
background: var(--background-primary);
width: var(--size-4);
height: var(--size-4);
}
@ -75,14 +75,14 @@
.checkbox-item {
transition: 150ms;
box-shadow: var(--shadow-drop);
background: var(--color-background-primary);
background: var(--background-primary);
}
.checkbox-item:hover {
box-shadow: var(--shadow-drop-lg);
}
.checkbox-item.selected {
background: var(--color-accent-base);
background: var(--background-accent-base);
color: white;
}
</style>

14
ui/packages/app/src/components/Interpretation/InterpretationComponents/CheckboxGroup.svelte
View File

@ -68,7 +68,7 @@
cursor: pointer;
box-shadow: var(--shadow-drop);
border-radius: var(--radius-md);
background: var(--color-background-primary);
background: var(--background-primary);
padding: var(--size-2) var(--size-3);
font-weight: var(--weight-semibold);
}
@ -81,27 +81,27 @@
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--color-border-primary);
background: var(--color-background-primary);
border: 1px solid var(--border-color-primary);
background: var(--background-primary);
width: var(--size-4);
height: var(--size-4);
}
.checkbox-item.selected {
background: var(--color-accent-base);
background: var(--background-accent-base);
color: white;
}
.selected .checkbox {
background: var(--color-accent-base);
background: var(--background-accent-base);
}
.checkbox-item {
transition: 150ms;
box-shadow: var(--shadow-drop);
background: var(--color-background-primary);
background: var(--background-primary);
}
.checkbox-item.selected {
background: var(--color-accent-base);
background: var(--background-accent-base);
color: white;
}
</style>

2
ui/packages/app/src/components/Interpretation/InterpretationComponents/Dropdown.svelte
View File

@ -29,7 +29,7 @@
display: block;
transition: 150ms;
cursor: pointer;
background: var(--color-background-primary);
background: var(--background-primary);
padding: var(--size-2) var(--size-3);
white-space: nowrap;
}

2
ui/packages/app/src/components/Interpretation/InterpretationComponents/Image.svelte
View File

@ -79,7 +79,7 @@
position: relative;
justify-content: center;
align-items: center;
background: var(--color-background-primary);
background: var(--background-primary);
width: var(--size-full);
height: var(--size-60);
}

2
ui/packages/app/src/components/Interpretation/InterpretationComponents/Number.svelte
View File

@ -24,7 +24,7 @@
.input-number {
transition: 150ms;
box-shadow: var(--shadow-drop);
background: var(--color-background-secondary);
background: var(--background-secondary);
}
.input-number:hover {

4
ui/packages/app/src/components/Interpretation/InterpretationComponents/Radio.svelte
View File

@ -35,7 +35,7 @@
transition: 150ms;
cursor: pointer;
border-radius: var(--radius-md);
background: var(--color-background-primary);
background: var(--background-primary);
padding: var(--size-2) var(--size-3);
font-weight: var(--weight-semibold);
}
@ -51,7 +51,7 @@
}
.radio-item.selected {
box-shadow: var(--shadow-drop);
background: var(--color-accent-base);
background: var(--background-accent-base);
color: white;
}
</style>

2
ui/packages/app/src/components/Interpretation/InterpretationComponents/Slider.svelte
View File

@ -46,7 +46,7 @@
transition: 150ms;
box-shadow: var(--shadow-drop);
border-radius: var(--radius-md);
background: var(--color-background-primary);
background: var(--background-primary);
width: var(--size-full);
height: var(--size-3);
}

2
ui/packages/app/src/components/Row/Row.svelte
View File

@ -38,7 +38,7 @@
.compact,
.panel {
border-radius: var(--container-radius);
background: var(--color-background-secondary);
background: var(--background-secondary);
padding: var(--size-2);
}
.unequal-height {

14
ui/packages/app/src/components/StatusTracker/StatusTracker.svelte
View File

@ -308,7 +308,7 @@
align-items: center;
z-index: var(--layer-5);
border-radius: var(--block-radius);
background-color: var(--color-background-primary);
background-color: var(--background-primary);
padding: 0 var(--size-6);
max-height: var(--size-screen-h);
overflow: hidden;
@ -334,7 +334,7 @@
.generating {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
border: 2px solid var(--color-accent);
border: 2px solid var(--background-accent);
background: transparent;
}
@ -366,11 +366,11 @@
opacity: 0.8;
z-index: var(--layer-1);
transition: 10ms;
background: var(--color-background-secondary);
background: var(--background-secondary);
}
.progress-bar-wrap {
border: 1px solid var(--color-border-primary);
background: var(--color-background-primary);
border: 1px solid var(--border-color-primary);
background: var(--background-primary);
width: 55.5%;
height: var(--size-4);
}
@ -426,7 +426,7 @@
box-shadow: var(--shadow-drop);
border: solid 1px var(--error-border-color);
border-radius: var(--radius-full);
background-color: var(--color-background-primary);
background-color: var(--background-primary);
background: var(--error-background);
padding-right: var(--size-4);
padding-left: var(--size-4);
@ -434,7 +434,7 @@
font-weight: var(--weight-semibold);
font-size: var(--text-lg);
line-height: var(--line-lg);
font-family: var(--font-sans);
font-family: var(--font);
}
.toast {

2
ui/packages/app/src/components/TimeSeries/TimeSeries.svelte
View File

@ -182,7 +182,7 @@
display: relative;
justify-content: center;
align-items: center;
background-color: var(--color-background-primary);
background-color: var(--background-primary);
width: var(--size-full);
height: var(--size-64);
}

4
ui/packages/app/src/components/UploadText.svelte
View File

@ -24,12 +24,12 @@
flex-direction: column;
justify-content: center;
min-height: var(--size-60);
color: var(--block-label-color);
color: var(--block-label-text-color);
line-height: var(--line-md);
}
.or {
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
}
@media (--screen-md) {

126
ui/packages/app/test/mocks/theme.css
View File

@ -53,20 +53,20 @@
--text-lg: 16px;
--text-xl: 22px;
--text-xxl: 26px;
--color-accent: var(--primary-500);
--color-accent-soft: var(--primary-50);
--color-background-primary: white;
--color-background-secondary: var(--neutral-50);
--color-border-accent: var(--primary-300);
--color-border-primary: var(--neutral-200);
--background-accent: var(--primary-500);
--background-accent-soft: var(--primary-50);
--background-primary: white;
--background-secondary: var(--neutral-50);
--border-color-accent: var(--primary-300);
--border-color-primary: var(--neutral-200);
--text-color-code-background: var(--neutral-200);
--text-color-code-border: var(--color-border-primary);
--text-color-link: var(--secondary-600);
--text-color-link-active: var(--secondary-600);
--text-color-link-hover: var(--secondary-700);
--text-color-link-visited: var(--secondary-500);
--text-color-subdued: var(--neutral-400);
--body-background-color: var(--color-background-primary);
--text-color-code-border: var(--border-color-primary);
--link-text-color: var(--secondary-600);
--link-text-color-active: var(--secondary-600);
--link-text-color-hover: var(--secondary-700);
--link-text-color-visited: var(--secondary-500);
--body-text-color-subdued: var(--neutral-400);
--body-background: var(--background-primary);
--body-text-color: var(--neutral-800);
--body-text-size: var(--text-md);
--body-text-weight: 400;
@ -76,17 +76,17 @@
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;
--block-background: var(--color-background-primary);
--block-border-color: var(--color-border-primary);
--block-background: var(--background-primary);
--block-border-color: var(--border-color-primary);
--block-border-width: 1px;
--block-info-color: var(--text-color-subdued);
--block-info-color-size: var(--text-sm);
--block-info-color-weight: 400;
--block-label-background: var(--color-background-primary);
--block-label-border-color: var(--color-border-primary);
--block-info-color: var(--body-text-color-subdued);
--block-info-text-size: var(--text-sm);
--block-info-text-weight: 400;
--block-label-background: var(--background-primary);
--block-label-border-color: var(--border-color-primary);
--block-label-border-width: 1px;
--block-label-color: var(--neutral-500);
--block-label-icon-color: var(--block-label-color);
--block-label-text-color: var(--neutral-500);
--block-label-icon-color: var(--block-label-text-color);
--block-label-margin: 0;
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
--block-label-radius: calc(var(--radius-lg) - 1px) 0
@ -101,7 +101,7 @@
--block-title-background: none;
--block-title-border-color: none;
--block-title-border-width: 0px;
--block-title-color: var(--neutral-500);
--block-title-text-color: var(--neutral-500);
--block-title-padding: 0;
--block-title-radius: none;
--block-title-text-size: var(--text-md);
@ -109,14 +109,14 @@
--container-radius: var(--radius-lg);
--form-gap-width: 1px;
--layout-gap: var(--spacing-xxl);
--panel-background: var(--color-background-secondary);
--panel-border-color: var(--color-border-primary);
--panel-background: var(--background-secondary);
--panel-border-color: var(--border-color-primary);
--panel-border-width: 0;
--section-text-size: var(--text-md);
--section-text-weight: 400;
--checkbox-background: var(--color-background-primary);
--checkbox-background-focus: var(--color-background-primary);
--checkbox-background-hover: var(--color-background-primary);
--section-header-text-size: var(--text-md);
--section-header-text-weight: 400;
--checkbox-background: var(--background-primary);
--checkbox-background-focus: var(--background-primary);
--checkbox-background-hover: var(--background-primary);
--checkbox-background-selected: var(--secondary-600);
--checkbox-border-color: var(--neutral-300);
--checkbox-border-color-focus: var(--secondary-500);
@ -135,8 +135,8 @@
white
);
--checkbox-label-background-selected: var(--checkbox-label-background);
--checkbox-label-border-color: var(--color-border-primary);
--checkbox-label-border-color-hover: var(--color-border-primary);
--checkbox-label-border-color: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--border-color-primary);
--checkbox-label-border-width: var(--input-border-width);
--checkbox-label-gap: var(--spacing-lg);
--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
@ -149,7 +149,7 @@
--error-background: linear-gradient(
to right,
#fee2e2,
var(--color-background-secondary)
var(--background-secondary)
);
--error-border-color: #fecaca;
--error-border-width: 1px;
@ -158,9 +158,9 @@
--input-background: white;
--input-background-focus: var(--secondary-500);
--input-background-hover: var(--input-background);
--input-border-color: var(--color-border-primary);
--input-border-color: var(--border-color-primary);
--input-border-color-focus: var(--secondary-300);
--input-border-color-hover: var(--color-border-primary);
--input-border-color-hover: var(--border-color-primary);
--input-border-width: 1px;
--input-padding: var(--spacing-xl);
--input-placeholder-color: var(--neutral-400);
@ -170,7 +170,7 @@
var(--shadow-inset);
--input-text-size: var(--text-md);
--input-text-weight: 400;
--loader-color: var(--color-accent);
--loader-color: var(--background-accent);
--prose-text-size: var(--text-md);
--prose-text-weight: 400;
--stat-color-background: linear-gradient(
@ -182,7 +182,7 @@
--table-even-background: white;
--table-odd-background: var(--neutral-50);
--table-radius: var(--radius-lg);
--table-row-focus: var(--color-accent-soft);
--table-row-focus: var(--background-accent-soft);
--button-border-width: var(--input-border-width);
--button-cancel-background: linear-gradient(
to bottom right,
@ -240,35 +240,35 @@
--button-transition: none;
}
.dark {
--color-accent-soft: var(--neutral-900);
--color-background-primary: var(--neutral-950);
--color-background-secondary: var(--neutral-900);
--color-border-accent: var(--neutral-600);
--color-border-primary: var(--neutral-700);
--background-accent-soft: var(--neutral-900);
--background-primary: var(--neutral-950);
--background-secondary: var(--neutral-900);
--border-color-accent: var(--neutral-600);
--border-color-primary: var(--neutral-700);
--text-color-code-background: var(--neutral-800);
--text-color-link-active: var(--secondary-500);
--text-color-link: var(--secondary-500);
--text-color-link-hover: var(--secondary-400);
--text-color-link-visited: var(--secondary-600);
--text-color-subdued: var(--neutral-400);
--body-background-color: var(--color-background-primary);
--link-text-color-active: var(--secondary-500);
--link-text-color: var(--secondary-500);
--link-text-color-hover: var(--secondary-400);
--link-text-color-visited: var(--secondary-600);
--body-text-color-subdued: var(--neutral-400);
--body-background: var(--background-primary);
--body-text-color: var(--neutral-100);
--shadow-spread: 1px;
--block-background: var(--neutral-800);
--block-border-color: var(--color-border-primary);
--block-border-color: var(--border-color-primary);
--block-border-width: 1px;
--block-info-color: var(--text-color-subdued);
--block-label-background: var(--color-background-secondary);
--block-label-border-color: var(--color-border-primary);
--block-info-color: var(--body-text-color-subdued);
--block-label-background: var(--background-secondary);
--block-label-border-color: var(--border-color-primary);
--block-label-border-width: 1px;
--block-label-color: var(--neutral-200);
--block-label-text-color: var(--neutral-200);
--block-shadow: none;
--block-title-background: none;
--block-title-border-color: none;
--block-title-border-width: 0px;
--block-title-color: var(--neutral-200);
--panel-background: var(--color-background-secondary);
--panel-border-color: var(--color-border-primary);
--block-title-text-color: var(--neutral-200);
--panel-background: var(--background-secondary);
--panel-border-color: var(--border-color-primary);
--checkbox-background: var(--neutral-800);
--checkbox-background-focus: var(--checkbox-background);
--checkbox-background-hover: var(--checkbox-background);
@ -288,20 +288,20 @@
var(--neutral-800)
);
--checkbox-label-background-selected: var(--checkbox-label-background);
--checkbox-label-border-color: var(--color-border-primary);
--checkbox-label-border-color-hover: var(--color-border-primary);
--checkbox-label-border-color: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--border-color-primary);
--checkbox-text-color: var(--body-text-color);
--checkbox-text-color-selected: var(--checkbox-text-color);
--error-background: var(--color-background-primary);
--error-border-color: var(--color-border-primary);
--error-background: var(--background-primary);
--error-border-color: var(--border-color-primary);
--error-border-width: var(--error-border-width);
--error-color: #ef4444;
--input-background: var(--neutral-800);
--input-background-focus: var(--secondary-600);
--input-background-hover: var(--input-background);
--input-border-color: var(--color-border-primary);
--input-border-color: var(--border-color-primary);
--input-border-color-focus: var(--neutral-700);
--input-border-color-hover: var(--color-border-primary);
--input-border-color-hover: var(--border-color-primary);
--input-placeholder-color: var(--neutral-500);
--input-shadow: var(--input-shadow);
--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700),
@ -315,7 +315,7 @@
--table-border-color: var(--neutral-700);
--table-even-background: var(--neutral-950);
--table-odd-background: var(--neutral-900);
--table-row-focus: var(--color-accent-soft);
--table-row-focus: var(--background-accent-soft);
--button-cancel-background: linear-gradient(
to bottom right,
#dc2626,

2
ui/packages/atoms/src/Block.svelte
View File

@ -63,7 +63,7 @@
}
.block.border_focus {
border-color: var(--color-accent);
border-color: var(--background-accent);
}
.padded {

4
ui/packages/atoms/src/BlockLabel.svelte
View File

@ -31,14 +31,14 @@
align-items: center;
z-index: var(--layer-2);
box-shadow: var(--block-shadow);
border: var(--block-label-border-width) solid var(--color-border-primary);
border: var(--block-label-border-width) solid var(--border-color-primary);
border-top: none;
border-left: none;
border-radius: var(--block-label-radius);
background: var(--block-label-background);
padding: var(--block-label-padding);
pointer-events: none;
color: var(--block-label-color);
color: var(--block-label-text-color);
font-weight: var(--block-label-text-weight);
font-size: var(--block-label-text-size);
line-height: var(--line-sm);

2
ui/packages/atoms/src/BlockTitle.svelte
View File

@ -31,7 +31,7 @@
border-radius: var(--block-title-radius);
background: var(--block-title-background);
padding: var(--block-title-padding);
color: var(--block-title-color);
color: var(--block-title-text-color);
font-weight: var(--block-title-text-weight);
font-size: var(--block-title-text-size);
line-height: var(--line-sm);

6
ui/packages/atoms/src/IconButton.svelte
View File

@ -16,15 +16,15 @@
box-shadow: var(--shadow-drop);
border: 1px solid var(--button-secondary-border-color);
border-radius: var(--radius-sm);
background: var(--color-background-primary);
background: var(--background-primary);
width: var(--size-5);
height: var(--size-5);
color: var(--block-label-color);
color: var(--block-label-text-color);
}
button:hover {
border: 1px solid var(--button-secondary-border-color-hover);
color: var(--block-label-color);
color: var(--block-label-text-color);
}
div {

12
ui/packages/chatbot/src/ChatBot.svelte
View File

@ -143,7 +143,7 @@
align-self: flex-start;
border-width: 1px;
border-radius: var(--radius-xxl);
background-color: var(--color-background-secondary);
background-color: var(--background-secondary);
padding: var(--spacing-xxl);
width: calc(100% - var(--spacing-xxl));
color: var(--body-text-color);
@ -171,12 +171,12 @@
/* Colors */
.bot,
.pending {
border-color: var(--color-border-primary);
background-color: var(--color-background-secondary);
border-color: var(--border-color-primary);
background-color: var(--background-secondary);
}
.user {
border-color: var(--color-border-accent);
background-color: var(--color-accent-soft);
border-color: var(--border-color-accent);
background-color: var(--background-accent-soft);
}
.feedback {
display: flex;
@ -187,7 +187,7 @@
font-size: var(--text-sm);
}
.feedback button {
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
}
.feedback button:hover {
color: var(--body-text-color);

1
ui/packages/client/src/client.ts
View File

@ -149,6 +149,7 @@ export async function client(
if (space_status_callback) space_status_callback(status);
if (status.status === "running")
try {
console.log(host);
config = await resolve_config(`${http_protocol}//${host}`);
res(config_success(config));
} catch (e) {

1
ui/packages/client/src/types.ts
View File

@ -15,6 +15,7 @@ export interface Config {
is_space: boolean;
is_colab: boolean;
show_api: boolean;
stylesheets: string[];
path: string;
}

6
ui/packages/code/interactive/Code.svelte
View File

@ -89,7 +89,7 @@
const FontTheme = EditorView.theme({
"&": {
fontSize: "var(--text-sm)",
backgroundColor: "var(--color-border-secondary)"
backgroundColor: "var(--border-color-secondary)"
},
".cm-content": {
paddingTop: "5px",
@ -103,9 +103,9 @@
},
".cm-gutters": {
marginRight: "1px",
borderRight: "1px solid var(--color-border-primary)",
borderRight: "1px solid var(--border-color-primary)",
backgroundColor: "transparent",
color: "var(--text-color-subdued)"
color: "var(--body-text-color-subdued)"
},
".cm-focused": {
outline: "none"

2
ui/packages/code/interactive/Copy.svelte
View File

@ -50,7 +50,7 @@
top: 0;
right: 0;
z-index: var(--layer-top);
background: var(--color-background-primary);
background: var(--background-primary);
padding: var(--size-1);
width: 100%;
height: 100%;

2
ui/packages/code/interactive/Download.svelte
View File

@ -81,7 +81,7 @@
top: 0;
right: 0;
z-index: var(--layer-top);
background: var(--color-background-primary);
background: var(--background-primary);
padding: var(--size-1);
width: 100%;
height: 100%;

6
ui/packages/code/interactive/Widgets.svelte
View File

@ -22,14 +22,14 @@
z-index: var(--layer-2);
transition: 150ms;
box-shadow: var(--shadow-drop);
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-top: none;
border-right: none;
border-radius: var(--block-label-right-radius);
background: var(--block-label-background);
overflow: hidden;
color: var(--block-label-color);
font: var(--font-sans);
color: var(--block-label-text-color);
font: var(--font);
font-size: var(--button-small-text-size);
}
</style>

8
ui/packages/file/src/FilePreview.svelte
View File

@ -83,17 +83,17 @@
text-decoration: underline;
}
.download > a {
color: var(--text-color-link);
color: var(--link-text-color);
}
.download > a:hover {
color: var(--text-color-link-hover);
color: var(--link-text-color-hover);
}
.download > a:visited {
color: var(--text-color-link-visited);
color: var(--link-text-color-visited);
}
.download > a:active {
color: var(--text-color-link-active);
color: var(--link-text-color-active);
}
.selectable {
cursor: pointer;

2
ui/packages/form/src/ColorPicker.svelte
View File

@ -31,7 +31,7 @@
input {
display: block;
position: relative;
background: var(--color-background-primary);
background: var(--background-primary);
line-height: var(--line-sm);
}
</style>

6
ui/packages/form/src/Dropdown.svelte
View File

@ -195,7 +195,7 @@
.wrap {
position: relative;
box-shadow: var(--input-shadow);
border: var(--input-border-width) solid var(--color-border-primary);
border: var(--input-border-width) solid var(--border-color-primary);
border-radius: var(--input-radius);
background: var(--input-background);
}
@ -241,9 +241,9 @@
justify-content: center;
align-items: center;
cursor: pointer;
border: var(--checkbox-border-width) solid var(--color-border-primary);
border: var(--checkbox-border-width) solid var(--border-color-primary);
border-radius: var(--radius-full);
background: var(--color-background-primary);
background: var(--background-primary);
padding: var(--size-0-5);
width: 18px;
height: 18px;

4
ui/packages/form/src/DropdownOptions.svelte
View File

@ -49,7 +49,7 @@
margin-left: 0;
box-shadow: var(--shadow-drop-lg);
border-radius: var(--container-radius);
background: var(--color-background-primary);
background: var(--background-primary);
width: var(--size-full);
max-height: var(--size-32);
overflow: auto;
@ -65,7 +65,7 @@
.item:hover,
.active {
background: var(--color-background-secondary);
background: var(--background-secondary);
}
.inner-item {

22
ui/packages/gallery/src/Gallery.svelte
View File

@ -227,7 +227,7 @@
flex-direction: column;
z-index: var(--layer-2);
backdrop-filter: blur(8px);
background: var(--color-background-primary);
background: var(--background-primary);
height: var(--size-full);
}
@ -255,7 +255,7 @@
.caption {
padding: var(--size-2) var(--size-3);
overflow: hidden;
color: var(--block-label-color);
color: var(--block-label-text-color);
font-weight: var(--weight-semibold);
text-align: center;
text-overflow: ellipsis;
@ -279,9 +279,9 @@
position: relative;
outline: none;
box-shadow: 0 0 0 2px var(--ring-color), var(--shadow-drop);
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-radius: var(--button-small-radius);
background-color: var(--color-background-secondary);
background-color: var(--background-secondary);
aspect-ratio: var(--ratio-square);
width: var(--size-full);
height: var(--size-full);
@ -289,9 +289,9 @@
}
.thumbnail-item:hover {
--ring-color: var(--color-border-accent);
--ring-color: var(--border-color-accent);
filter: brightness(1.1);
border-color: var(--color-border-accent);
border-color: var(--border-color-accent);
}
.thumbnail-small {
@ -303,9 +303,9 @@
}
.thumbnail-small.selected {
--ring-color: var(--color-accent);
--ring-color: var(--background-accent);
transform: scale(1);
border-color: var(--color-accent);
border-color: var(--background-accent);
}
.thumbnail-small > img {
@ -368,10 +368,10 @@
right: var(--block-label-margin);
bottom: var(--block-label-margin);
z-index: var(--layer-1);
border-top: 1px solid var(--color-border-primary);
border-left: 1px solid var(--color-border-primary);
border-top: 1px solid var(--border-color-primary);
border-left: 1px solid var(--border-color-primary);
border-radius: var(--block-label-radius);
background: var(--color-background-secondary);
background: var(--background-secondary);
padding: var(--block-label-padding);
max-width: 80%;
overflow: hidden;

2
ui/packages/highlighted-text/src/HighlightedText.svelte
View File

@ -206,7 +206,7 @@
.textfield {
box-sizing: border-box;
border-radius: var(--radius-xs);
background: var(--color-background-primary);
background: var(--background-primary);
background-color: transparent;
padding: var(--block-padding);
max-width: var(--size-full);

10
ui/packages/image/src/Sketch.svelte
View File

@ -626,13 +626,13 @@
}
.lr {
border-right: 1px solid var(--color-border-primary);
border-left: 1px solid var(--color-border-primary);
border-right: 1px solid var(--border-color-primary);
border-left: 1px solid var(--border-color-primary);
}
.tb {
border-top: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--color-border-primary);
border-top: 1px solid var(--border-color-primary);
border-bottom: 1px solid var(--border-color-primary);
}
canvas:hover {
@ -658,6 +658,6 @@
z-index: var(--layer-4);
touch-action: none;
pointer-events: none;
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
}
</style>

6
ui/packages/json/src/JSON.svelte
View File

@ -69,7 +69,7 @@
right: var(--block-label-margin);
align-items: center;
box-shadow: var(--shadow-drop);
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-top: none;
border-right: none;
border-radius: var(--block-label-right-radius);
@ -78,8 +78,8 @@
width: 22px;
height: 22px;
overflow: hidden;
color: var(--block-label-color);
font: var(--font-sans);
color: var(--block-label-text-color);
font: var(--font);
font-size: var(--button-small-text-size);
}
</style>

8
ui/packages/json/src/JSONNode.svelte
View File

@ -92,15 +92,15 @@
}
.expand-array {
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-radius: var(--radius-sm);
background-color: vSar(--color-background-secondary);
background-color: vSar(--background-secondary);
padding: 0 var(--size-1);
color: var(--body-text-color);
}
.expand-array:hover {
background-color: var(--color-background-primary);
background-color: var(--background-primary);
}
.children {
@ -112,7 +112,7 @@
}
.null {
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
}
.string {

4
ui/packages/label/src/Label.svelte
View File

@ -95,7 +95,7 @@
}
.confidence-set:hover .label {
color: var(--color-accent);
color: var(--background-accent);
}
.text {
@ -104,7 +104,7 @@
.line {
flex: 1 1 0%;
border: 1px dashed var(--color-border-primary);
border: 1px dashed var(--border-color-primary);
padding-right: var(--size-4);
padding-left: var(--size-4);
}

20
ui/packages/table/src/Table.svelte
View File

@ -646,7 +646,7 @@
<style>
.button-wrap:hover svg {
color: var(--color-accent);
color: var(--background-accent);
}
.button-wrap svg {
@ -661,21 +661,21 @@
position: relative;
z-index: var(--layer-4);
margin-bottom: var(--size-2);
color: var(--block-label-color);
color: var(--block-label-text-color);
font-size: var(--block-label-text-size);
}
.table-wrap {
position: relative;
transition: 150ms;
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-radius: var(--table-radius);
overflow-x: scroll;
overflow-y: hidden;
}
.dragging {
border-color: var(--color-accent);
border-color: var(--background-accent);
}
.no-wrap {
@ -706,7 +706,7 @@
}
tr {
border-bottom: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--border-color-primary);
text-align: left;
}
@ -714,7 +714,7 @@
border-right-width: 0px;
border-left-width: 1px;
border-style: solid;
border-color: var(--color-border-primary);
border-color: var(--border-color-primary);
}
th,
@ -736,7 +736,7 @@
th:focus-within,
td:focus-within {
--ring-color: var(--color-accent);
--ring-color: var(--background-accent);
}
tr:last-child td:first-child {
@ -764,7 +764,7 @@
transition: 150ms;
cursor: pointer;
padding: var(--size-2);
color: var(--text-color-subdued);
color: var(--body-text-color-subdued);
line-height: var(--text-sm);
}
@ -777,7 +777,7 @@
}
.sort-button.sorted {
color: var(--color-accent);
color: var(--background-accent);
}
tbody {
@ -797,7 +797,7 @@
}
tbody > tr:nth-child(odd):focus {
background: var(--color-background-primary);
background: var(--background-primary);
}
.editing {

2
ui/packages/tabs/src/TabItem.svelte
View File

@ -38,7 +38,7 @@
div {
display: flex;
position: relative;
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-top: none;
border-bottom-right-radius: var(--container-radius);
border-bottom-left-radius: var(--container-radius);

14
ui/packages/tabs/src/Tabs.svelte
View File

@ -91,7 +91,7 @@
display: flex;
position: relative;
flex-wrap: wrap;
border-bottom: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--border-color-primary);
white-space: nowrap;
}
@ -103,17 +103,17 @@
border-top-right-radius: var(--container-radius);
border-top-left-radius: var(--container-radius);
padding: var(--size-1) var(--size-4);
color: var(--text-color-subdued);
font-weight: var(--section-text-weight);
font-size: var(--section-text-size);
color: var(--body-text-color-subdued);
font-weight: var(--section-header-text-weight);
font-size: var(--section-header-text-size);
}
button:hover {
color: var(--body-text-color);
}
.selected {
border-color: var(--color-border-primary);
background-color: var(--color-background-primary);
border-color: var(--border-color-primary);
background-color: var(--background-primary);
color: var(--body-text-color);
}
@ -123,7 +123,7 @@
bottom: -2px;
left: 0;
z-index: 999;
background-color: var(--color-background-primary);
background-color: var(--background-primary);
width: 100%;
height: 2px;
content: "";

5
ui/packages/theme/src/global.css
View File

@ -22,10 +22,7 @@
.gradio-container {
-webkit-text-size-adjust: 100%; /* 2 */
line-height: 1.5; /* 1 */
font-family: Source Sans Pro, ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji"; /* 4 */
font-family: var(--font); /* 4 */
-moz-tab-size: 4; /* 3 */
tab-size: 4; /* 3 */
}

14
ui/packages/theme/src/typography.css
View File

@ -81,9 +81,9 @@
/* code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.prose code {
border: 1px solid var(--color-border-primary);
border: 1px solid var(--border-color-primary);
border-radius: var(--radius-sm);
background: var(--color-background-secondary);
background: var(--background-secondary);
padding: 1px 3px;
font-size: 85%;
white-space: nowrap;
@ -139,19 +139,19 @@
/* links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.prose a {
color: var(--text-color-link);
color: var(--link-text-color);
text-decoration: underline;
}
.prose a:visited {
color: var(--text-color-link-visited);
color: var(--link-text-color-visited);
}
.prose a:hover {
color: var(--text-color-link-hover);
color: var(--link-text-color-hover);
}
.prose a:active {
color: var(--text-color-link-active);
color: var(--link-text-color-active);
}
/* misc
@ -166,7 +166,7 @@
.prose blockquote {
margin: var(--size-6) 0 !important;
border-left: 5px solid var(--color-border-primary);
border-left: 5px solid var(--border-color-primary);
padding-left: var(--size-2);
}

2
ui/packages/video/src/Player.svelte
View File

@ -237,6 +237,6 @@
font-family: var(--font-mono);
}
.wrap {
background-color: var(--color-background-secondary);
background-color: var(--background-secondary);
}
</style>

2
ui/packages/workbench/src/routes/__layout.svelte
View File

@ -89,7 +89,7 @@
<main
class="gradio-bg px-6 w-full"
style="background: var(--color-background-primary)"
style="background: var(--background-primary)"
>
<div class="gradio-interface">
<slot />