Implement widget opacity

sandbox/darren/just_a_box.py

@@ -25,18 +25,20 @@ class JustABox(App):
 
     def compose(self) -> ComposeResult:
         self.box = Box(classes="box1")
+        self.box.styles.opacity = "50%"
         yield self.box
         yield Box(classes="box2")
         yield Widget(id="sidebar")
 
     def key_a(self):
+        self._animate_out()
+
+    def _animate_out(self):
+        def p():
+            print("done")
+
         self.animator.animate(
-            self.box.styles,
-            "text_opacity",
-            value=0.0,
-            duration=2.0,
-            delay=2.0,
-            on_complete=self.box.remove,
+            self.box.styles, "opacity", value=0.0, duration=2.0, on_complete=p
         )
 
     async def on_key(self, event: events.Key) -> None:

src/textual/_opacity.py

@@ -4,7 +4,6 @@ from rich.segment import Segment
 from rich.style import Style
 
 from textual.color import Color
-from textual.renderables._blend_colors import blend_colors
 
 
 def _apply_widget_opacity(
@@ -19,12 +18,19 @@ def _apply_widget_opacity(
             yield segment
             continue
 
-        color = style.color
-        bgcolor = style.bgcolor
-        if color and color.triplet and bgcolor and bgcolor.triplet:
-            blended_foreground = blend_colors(color, base_background, ratio=opacity)
-            blended_background = blend_colors(bgcolor, base_background, ratio=opacity)
-            blended_style = Style(color=blended_foreground, bgcolor=blended_background)
-            yield _Segment(text, style + blended_style)
-        else:
-            yield segment
+        blended_style = style
+        if style.color:
+            color = Color.from_rich_color(style.color)
+            blended_foreground = base_background.blend(color, factor=opacity)
+            blended_style = style + Style.from_color(
+                color=blended_foreground.rich_color
+            )
+
+        if style.bgcolor:
+            bgcolor = Color.from_rich_color(style.bgcolor)
+            blended_background = base_background.blend(bgcolor, factor=opacity)
+            blended_style = blended_style + Style.from_color(
+                bgcolor=blended_background.rich_color
+            )
+
+        yield _Segment(text, blended_style)

src/textual/_styles_cache.py

@@ -246,7 +246,7 @@ class StylesCache:
                 segments = _apply_widget_opacity(
                     segments, base_background, styles.opacity
                 )
-
+            segments = list(segments)
             return segments if isinstance(segments, list) else list(segments)
 
         line: Iterable[Segment]

src/textual/widget.py

@@ -1266,7 +1266,6 @@ class Widget(DOMNode):
         width, height = self.size
         renderable = self.render()
         renderable = self.post_render(renderable)
-        renderable = self.apply_opacity(renderable)
         options = self._console.options.update_dimensions(width, height).update(
             highlight=False
         )