Style updates (gradio-app#1350)

* clean up python style api

* allow Box to be styled

* changes

* update style args and add md doc detailing

* cleanup

* add deprecation warnings

* fix

* formatting

demo/blocks_flashcards/run.py

@@ -25,10 +25,8 @@
                     with gr.Row():
                         correct_btn = gr.Button(
                             "Correct",
-                        ).style(bg_color="green", text_color="black", full_width=True)
-                        incorrect_btn = gr.Button("Incorrect").style(
-                            bg_color="pink", text_color="black", full_width=True
-                        )
+                        ).style(full_width=True)
+                        incorrect_btn = gr.Button("Incorrect").style(full_width=True)
 
         with gr.TabItem("Results"):
             results = gr.Variable(value={})

demo/blocks_simple_squares/run.py

@@ -5,15 +5,13 @@
 with demo:
     default_json = {"a": "a"}
 
-
     num = gr.Variable(value=0)
-    squared = gr.Number(value=0).style(text_color="blue", container_bg_color="yellow")
-    btn = gr.Button("Next Square", elem_id="btn").style(rounded=False, bg_color="purple")
-    
+    squared = gr.Number(value=0)
+    btn = gr.Button("Next Square", elem_id="btn").style(rounded=False)
+
     stats = gr.Variable(value=default_json)
     table = gr.JSON()
 
-
     def increase(var, stats_history):
         var += 1
         stats_history[str(var)] = var**2

demo/blocks_style/run.py

@@ -0,0 +1,104 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Column():
+        txt = gr.Textbox(label="Small Textbox", lines=1).style(
+            rounded=False,
+            border=False,
+            container=False,
+        )
+
+        num = gr.Number(label="Number", show_label=False).style(
+            rounded=False,
+            border=False,
+            container=False,
+        )
+        slider = gr.Slider(label="Slider", show_label=False).style(
+            container=False,
+        )
+        check = gr.Checkbox(label="Checkbox", show_label=False).style(
+            rounded=False,
+            border=False,
+            container=False,
+        )
+        check_g = gr.CheckboxGroup(
+            label="Checkbox Group", choices=["One", "Two", "Three"], show_label=False
+        ).style(rounded=False, container=False, item_container=False)
+        radio = gr.Radio(
+            label="Radio", choices=["One", "Two", "Three"], show_label=False
+        ).style(
+            item_container=False,
+            container=False,
+        )
+        drop = gr.Dropdown(
+            label="Dropdown", choices=["One", "Two", "Three"], show_label=False
+        ).style(
+            rounded=False,
+            border=False,
+            container=False,
+        )
+        image = gr.Image(show_label=False).style(
+            rounded=False,
+        )
+        video = gr.Video(show_label=False).style(
+            rounded=False,
+        )
+        audio = gr.Audio(show_label=False).style(
+            rounded=False,
+        )
+        file = gr.File(show_label=False).style(
+            rounded=False,
+        )
+        df = gr.Dataframe(show_label=False).style(
+            rounded=False,
+        )
+
+        ts = gr.Timeseries(show_label=False).style(
+            rounded=False,
+        )
+        label = gr.Label().style(
+            container=False,
+        )
+        highlight = gr.HighlightedText(
+            "+ hello. - goodbye", show_label=False, color_map={"+": "green", "-": "red"}
+        ).style(rounded=False, container=False)
+        json = gr.JSON().style(container=False)
+        html = gr.HTML(show_label=False).style()
+        gallery = gr.Gallery().style(
+            rounded=False,
+            grid=(3, 3, 1),
+            height="auto",
+            container=False,
+        )
+        chat = gr.Chatbot("hi", color_map=("pink", "blue")).style(
+            rounded=False,
+        )
+
+        model = gr.Model3D().style(
+            rounded=False,
+        )
+
+        gr.Plot().style()
+        md = gr.Markdown(show_label=False).style()
+
+        highlight = gr.HighlightedText().style(
+            rounded=False,
+        )
+
+        btn = gr.Button("Run").style(
+            rounded=False,
+            full_width=True,
+            border=False,
+        )
+
+        # Not currently public
+        # TODO: Uncomment at next release
+        # gr.Dataset().style(
+        #     rounded=False,
+        #     margin=False,
+        #     border=False,
+        # )
+
+
+if __name__ == "__main__":
+    demo.launch()

demo/chatbot_demo/run.py

@@ -16,12 +16,12 @@ def chat(message, history):
     history.append((message, response))
     return history, history
 
-chatbot = gr.Chatbot(color_map=("green", "gray"))
+
+chatbot = gr.Chatbot(color_map=("green", "pink")).style()
 demo = gr.Interface(
     chat,
     ["text", "state"],
     [chatbot, "state"],
-    allow_screenshot=False,
     allow_flagging="never",
 )
 if __name__ == "__main__":

demo/diff_texts/run.py

@@ -25,7 +25,10 @@ def diff_texts(text1, text2):
             value="The fast brown fox jumps over lazy dogs.",
         ),
     ],
-    gr.HighlightedText(label="Diff", combine_adjacent=True),
+    gr.HighlightedText(
+        label="Diff",
+        combine_adjacent=True,
+    ).style(color_map={"+": "red", "-": "green"}),
 )
 if __name__ == "__main__":
     demo.launch()