test color changes

Author: LiamConnors

doc/python/colors-fonts.md

@@ -26,18 +26,21 @@ jupyter:
     display_as: file_settings
     language: python
     layout: base
-    name: Supported Colors and Fonts
-    order: 40
+    name: Changes in Version 6
+    order: 8
     page_type: example_index
     permalink: python/colors-fonts/
     thumbnail: null
 ---
 
 # Supported Colors and Fonts
 
-
+The following are supported colors in Plotly.
 
 ```python hide_code=true
+import plotly.graph_objects as go
+import pandas as pd
+
 supported_colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure",
                 "beige", "bisque", "black", "blanchedalmond", "blue",
                 "blueviolet", "brown", "burlywood", "cadetblue",
@@ -73,20 +76,58 @@ supported_colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure",
                 "springgreen", "steelblue", "tan", "teal", "thistle", "tomato",
                 "turquoise", "violet", "wheat", "white", "whitesmoke",
                 "yellow", "yellowgreen"]
-```
-
-```python hide_code=true
-from IPython.display import HTML, display
-
-def show_color(color_name):
-    display(HTML(f'<div style="background-color:{color_name}; width:100px; height:50px; border:1px solid black"></div>'))
-
-# Example usage
-for color in supported_colors:
-    print(color)
-    show_color(color)
-```
 
-```python
+def display_colors_as_shapes(color_names):
+    fig = go.Figure()
+    
+    # Add a colored rectangle for each color name
+    for i, color in enumerate(color_names):
+        # Position rectangles in a grid
+        row, col = i // 5, i % 5
+        x0, y0 = col * 1.2, -row * 1.2
+        
+        # Add the colored rectangle
+        fig.add_shape(
+            type="rect",
+            x0=x0, y0=y0,
+            x1=x0+1, y1=y0+1,
+            fillcolor=color,
+            line=dict(color="black", width=1),
+        )
+        
+        fig.add_annotation(
+            x=x0+0.5, y=y0-0.1,
+            text=color,
+            showarrow=False,
+            font=dict(size=10)
+        )
+    
+    height = ((len(color_names) // 5) + (1 if len(color_names) % 5 else 0)) * 120
+    
+    fig.update_layout(
+        height=height,
+        width=800,
+        showlegend=False,
+        plot_bgcolor='rgba(0,0,0,0)',
+        margin=dict(l=50, r=50, t=50, b=50),
+        xaxis=dict(
+            showgrid=False,
+            zeroline=False,
+            showticklabels=False,
+            range=[-0.5, 6]
+        ),
+        yaxis=dict(
+            showgrid=False,
+            zeroline=False,
+            showticklabels=False,
+            scaleanchor="x",
+            scaleratio=1,
+            range=[-((len(color_names) // 5) + 1) * 1.2, 1.5]
+        )
+    )
+    
+    return fig
 
+fig = display_colors_as_shapes(supported_colors)
+fig.show()
 ```