Tidying up, applying opacity if it exists in styles

examples/dev_sandbox.py

@@ -18,6 +18,7 @@ class BasicApp(App):
         self.bind("tab", "toggle_class('#sidebar', '-active')")
         self.bind("a", "toggle_class('#header', '-visible')")
         self.bind("c", "toggle_class('#content', '-content-visible')")
+        self.bind("d", "toggle_class('#footer', 'dim')")
 
     def on_mount(self):
         """Build layout here."""

examples/dev_sandbox.scss

@@ -34,7 +34,6 @@ Widget:hover {
 
 #header {
   text: $text on $primary;
-  opacity: 0.2;
   height: 3;
   border-bottom: hkey $secondary;
 }
@@ -53,7 +52,12 @@ Widget:hover {
 }
 
 #footer {
+  opacity: 1;
   text: $text on $primary;
   height: 3;
   border-top: hkey $secondary;
 }
+
+#footer.dim {
+  opacity: 0.5;
+}

src/textual/css/_styles_builder.py

@@ -130,7 +130,7 @@ class StylesBuilder:
                     self.error(
                         name,
                         token,
-                        f"invalid value for visibility (received {value!r}, expected {friendly_list(VALID_VISIBILITY)})",
+                        f"property 'visibility' has invalid value {value!r}; expected {friendly_list(VALID_VISIBILITY)}",
                     )
             else:
                 self.error(name, token, f"invalid token {value!r} in this context")
@@ -152,18 +152,12 @@ class StylesBuilder:
                     self.styles.set_rule(name, opacity)
                 except ValueError:
                     error = True
-                    # self.error(
-                    #     name, token, f"unable to process value {value!r} as percentage"
-                    # )
             elif token_name == "number":
                 try:
                     opacity = clamp(float(value), 0, 1)
                     self.styles.set_rule(name, opacity)
                 except ValueError:
                     error = True
-                    # self.error(
-                    #     name, token, f"unable to process value {value!r} as float"
-                    # )
             else:
                 error = True
 
@@ -171,7 +165,9 @@ class StylesBuilder:
             self.error(
                 name,
                 token,
-                f"property 'opacity' has invalid value {_join_tokens(tokens)!r}; expected a scalar percentage or float between 0 and 1; example valid values: '0.4', '40%'",
+                f"property 'opacity' has invalid value {_join_tokens(tokens)!r}; "
+                f"expected a percentage or float between 0 and 1; "
+                f"example valid values: '0.4', '40%'",
             )
 
     def _process_space(self, name: str, tokens: list[Token]) -> None:

src/textual/widget.py

@@ -32,7 +32,7 @@ from .geometry import Size, Spacing
 from .message import Message
 from .messages import Layout, Update
 from .reactive import watch
-
+from .renderables.opacity import Opacity
 
 if TYPE_CHECKING:
     from .view import View
@@ -174,6 +174,9 @@ class Widget(DOMNode):
                 style=renderable_text_style,
             )
 
+        if styles.opacity:
+            renderable = Opacity(renderable, opacity=styles.opacity)
+
         return renderable
 
     @property