Fix ParamViewer css

[freddyaboulton]

Description

Fixes: #7111

The problem was that we were using prefers-color-scheme as opposed to the built-in theme variables. Rather than adding component specific css variables (we agreed to not do that anymore) I tried to recreate the existing style with the current theme variables. I think I got close but there may be some discrepancies. I think it'd be best to not introduce new theme variables though.

Dark mode

Left is this pr, right is main for both

Light mode

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh

2. You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
	Visual tests	all good!	Build review
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/f2989e6c6510b174480c24ced2f1879b9e63d3c4/gradio-4.15.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@f2989e6c6510b174480c24ced2f1879b9e63d3c4#subdirectory=client/python"

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/paramviewer	patch
gradio	patch

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Fix ParamViewer css

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[freddyaboulton]

We should add some stories but will hold off until we agree on the final style.

[pngwn]

I think the screenshots look fine but that isn't what I'm seeing locally:

There seem to be three issues:

• There is too much spacing for the main arg/type text causing misalignment (as well as making that box too big).
• The text for the arg/ type is too small
• The boxes have double border when collapsed/ when at the bottom.

[pngwn]

Demo i used to test:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("The `round()` function in Python takes two parameters")
    gr.ParamViewer(
        {
            "number": {
                "type": "int | float",
                "description": "The number to round",
                "default": None,
            },
            "ndigits": {
                "type": "int",
                "description": "The number of digits to round to",
                "default": "0",
            },
            "shape": {
                "type": "int",
                "default": "0",
            },
            "shape_two": {"type": "float", "default": "0.0"},
        }
    )

if __name__ == "__main__":
    demo.launch()
    ```

[pngwn]

Looks great! Thanks @freddyaboulton!

[freddyaboulton]

Thanks for the help and review @pngwn !