feat(brand-example): Add color swatch page

Author: gadenbuie

examples/brand/_colors.scss

@@ -110,5 +110,7 @@
 .bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
 .bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
 
-.bd-white { color: color-contrast($white); background-color: $white; }
-.bd-black { color: color-contrast($black); background-color: $black; }
+.bd-white { color: color-contrast($white); background-color: $white; border: 2px solid $body-color;}
+.bd-black { color: color-contrast($black); background-color: $black; }
+.bd-foreground { color: $body-bg; background-color: $body-color; }
+.bd-background { color: $body-color; background-color: $body-bg; border: 2px solid $body-color;}

examples/brand/app.py

@@ -29,7 +29,7 @@
                 ),
                 ui.input_action_button("action1", "Action Button"),
             ),
-            ui.layout_column_wrap(
+            ui.layout_columns(
                 ui.value_box(
                     "Metric 1",
                     "100",
@@ -121,11 +121,11 @@
                 ),
                 ui.input_password("password1", "Password Input"),
             ),
-            width=400,
+            width=300,
             heights_equal=False,
         ),
     ),
-    ui.nav_panel("Colors", ui.output_ui("ui_colors")),
+    ui.nav_panel("Colors", ui.div(ui.output_ui("ui_colors"), class_="container-sm")),
     ui.nav_panel(
         "Documentation",
         ui.div(
@@ -286,22 +286,43 @@ def ui_colors():
                         ui.div(f"{color}-{r}", class_=f"p-3 bd-{color}-{r}")
                         for r in range(100, 1000, 100)
                     ],
-                    class_="col-md-4 mb-3",
+                    class_="mb-3",
                 )
             ]
 
         return ui.TagList(
+            ui.div(
+                *[
+                    ui.div(
+                        ui.div(
+                            color, class_=f"p-3 mb-2 position-relative text-bg-{color}"
+                        ),
+                        class_="col-md-3 mb-3",
+                    )
+                    for color in [
+                        "primary",
+                        "secondary",
+                        "dark",
+                        "light",
+                        "info",
+                        "success",
+                        "warning",
+                        "danger",
+                    ]
+                ],
+                class_="row font-monospace",
+            ),
             ui.div(
                 *[
                     ui.div(
                         ui.div(color, class_=f"p-3 mb-2 position-relative bd-{color}"),
-                        class_="col-md-4 mb-3",
+                        class_="col-md-3 mb-3",
                     )
-                    for color in ["black", "white"]
+                    for color in ["black", "white", "foreground", "background"]
                 ],
                 class_="row font-monospace",
             ),
-            ui.div(*colors, class_="row font-monospace"),
+            ui.layout_column_wrap(*colors, class_="font-monospace"),
         )