Add named colors listing to colors sample application

Resolves: Textualize/textual#2922
Co-authored-by: Zsolt Cserna  <cserna.zsolt@gmail.com>

Author: vlaci

src/textual_dev/previews/colors.css

@@ -2,13 +2,13 @@ Label {
     width: 100%;
 }
 
-ColorButtons {
+ThemeColorButtons {
     dock: left;
     overflow-y: auto;
     width: 30;
 }
 
-ColorButtons > Button {
+ThemeColorButtons > Button {
     width: 100%;
 }
 
@@ -61,6 +61,10 @@ ColorGroup.-active {
     color: $text;
 }
 
+.text-left {
+    content-align: left middle;
+}
+
 .muted {
     color: $text-muted;
 }

src/textual_dev/previews/colors.py

@@ -1,10 +1,11 @@
 from textual.app import App, ComposeResult
+from textual.color import COLOR_NAME_TO_RGB, Color
 from textual.containers import Horizontal, Vertical, VerticalScroll
 from textual.design import ColorSystem
-from textual.widgets import Button, Footer, Label, Static
+from textual.widgets import Button, Footer, Label, Static, TabbedContent
 
 
-class ColorButtons(VerticalScroll):
+class ThemeColorButtons(VerticalScroll):
     def compose(self) -> ComposeResult:
         for color_name in ColorSystem.COLOR_NAMES:
             yield Button(color_name, id=color_name)
@@ -27,6 +28,26 @@ class Content(Vertical):
 
 
 class ColorsView(VerticalScroll):
+    pass
+
+
+class ColorTabs(TabbedContent, inherit_css=False):
+    pass
+
+
+class NamedColorsView(ColorsView):
+    def compose(self) -> ComposeResult:
+        with ColorGroup(id=f"group-named"):
+            for name, rgb in COLOR_NAME_TO_RGB.items():
+                color = Color(*rgb)
+                with ColorItem() as ci:
+                    ci.styles.background = name
+                    yield ColorBar(name, classes="text")
+                    yield ColorBar(f"{color.hex6}", classes="text")
+                    yield ColorBar(f"{color.rgb}", classes="text text-left")
+
+
+class ThemeColorsView(ColorsView):
     def compose(self) -> ComposeResult:
         LEVELS = [
             "darken-3",
@@ -55,15 +76,17 @@ class ColorsApp(App[None]):
     BINDINGS = [("d", "toggle_dark", "Toggle dark mode")]
 
     def compose(self) -> ComposeResult:
-        yield Content(ColorButtons())
         yield Footer()
+        with ColorTabs("Theme Colors", "Named Colors"):
+            yield Content(ThemeColorButtons())
+            yield Vertical(NamedColorsView())
 
     def on_mount(self) -> None:
         self.call_after_refresh(self.update_view)
 
     def update_view(self) -> None:
         content = self.query_one("Content", Content)
-        content.mount(ColorsView())
+        content.mount(ThemeColorsView())
 
     def on_button_pressed(self, event: Button.Pressed) -> None:
         self.query(ColorGroup).remove_class("-active")