Renaming opacity to text-opacity in code

docs/examples/basic.css

@@ -46,7 +46,7 @@ DirectoryTree {
 DataTable {
   /*border:heavy red;*/
   /* tint: 10% green; */
-  /* opacity: 50%; */
+  /* text-opacity: 50%; */
   padding: 1;
   margin: 1 2;
   height: 24;

docs/examples/introduction/stopwatch.css

@@ -9,7 +9,7 @@ Stopwatch {
 
 TimeDisplay {
     content-align: center middle;
-    opacity: 60%;
+    text-opacity: 60%;
     height: 3;
 }
 
@@ -37,7 +37,7 @@ Button {
 }
 
 .started TimeDisplay {
-    opacity: 100%;
+    text-opacity: 100%;
 }
 
 .started #start {

docs/examples/introduction/stopwatch03.css

@@ -8,7 +8,7 @@ Stopwatch {
 
 TimeDisplay {
     content-align: center middle;
-    opacity: 60%;
+    text-opacity: 60%;
     height: 3;
 }
 

docs/examples/introduction/stopwatch04.css

@@ -9,7 +9,7 @@ Stopwatch {
 
 TimeDisplay {
     content-align: center middle;
-    opacity: 60%;
+    text-opacity: 60%;
     height: 3;
 }
 
@@ -37,7 +37,7 @@ Button {
 }
 
 .started TimeDisplay {
-    opacity: 100%;
+    text-opacity: 100%;
 }
 
 .started #start {

e2e_tests/test_apps/basic.css

@@ -27,7 +27,7 @@ App > Screen {
 DataTable {
   /*border:heavy red;*/
   /* tint: 10% green; */
-  /* opacity: 50%; */
+  /* text-opacity: 50%; */
   padding: 1;
   margin: 1 2;
   height: 12;

sandbox/darren/buttons.css

@@ -1,4 +1,6 @@
 Button {
     padding-left: 1;
     padding-right: 1;
+    margin: 3;
+    text-opacity: 30%;
 }

sandbox/darren/just_a_box.py

@@ -26,15 +26,15 @@ class JustABox(App):
         yield Box(classes="box2")
 
     def key_a(self):
-        self.box.styles.display = "none"
+        # self.box.styles.display = "none"
         # self.box.styles.visibility = "hidden"
-        # self.animator.animate(
+        self.animator.animate(
-        #     self.box.styles,
+            self.box.styles,
-        #     "opacity",
+            "text_opacity",
-        #     value=0.0,
+            value=0.0,
-        #     duration=2.0,
+            duration=2.0,
-        #     on_complete=self.box.remove,
+            on_complete=self.box.remove,
-        # )
+        )
 
     async def on_key(self, event: events.Key) -> None:
         await self.dispatch_key(event)

sandbox/dev_sandbox.scss

@@ -54,7 +54,7 @@ Widget:hover {
 }
 
 #footer {
-  opacity: 1;
+  text-opacity: 1;
   color: $text;
   background: $background;
   height: 3;
@@ -62,5 +62,5 @@ Widget:hover {
 }
 
 #footer.dim {
-  opacity: 0.5;
+  text-opacity: 0.5;
 }

sandbox/will/basic.css

@@ -46,7 +46,7 @@ DirectoryTree {
 DataTable {
   /*border:heavy red;*/
   /* tint: 10% green; */
-  /* opacity: 50%; */
+  /* text-opacity: 50%; */
   padding: 1;
   margin: 1 2;
   height: 24;

src/textual/_styles_cache.py

@@ -237,8 +237,8 @@ class StylesCache:
             Returns:
                 list[Segment]: New list of segments
             """
-            if styles.opacity != 1.0:
+            if styles.text_opacity != 1.0:
-                segments = Opacity.process_segments(segments, styles.opacity)
+                segments = Opacity.process_segments(segments, styles.text_opacity)
             if styles.tint.a:
                 segments = Tint.process_segments(segments, styles.tint)
             return segments if isinstance(segments, list) else list(segments)

src/textual/css/_styles_builder.py

@@ -332,7 +332,7 @@ class StylesBuilder:
                     "visibility", valid_values=list(VALID_VISIBILITY), context="css"
                 )
 
-    def process_opacity(self, name: str, tokens: list[Token]) -> None:
+    def process_text_opacity(self, name: str, tokens: list[Token]) -> None:
         if not tokens:
             return
         token = tokens[0]
@@ -342,16 +342,17 @@ class StylesBuilder:
         else:
             token_name = token.name
             value = token.value
+            rule_name = name.replace("-", "_")
             if token_name == "scalar" and value.endswith("%"):
                 try:
-                    opacity = percentage_string_to_float(value)
+                    text_opacity = percentage_string_to_float(value)
-                    self.styles.set_rule(name, opacity)
+                    self.styles.set_rule(rule_name, text_opacity)
                 except ValueError:
                     error = True
             elif token_name == "number":
                 try:
-                    opacity = clamp(float(value), 0, 1)
+                    text_opacity = clamp(float(value), 0, 1)
-                    self.styles.set_rule(name, opacity)
+                    self.styles.set_rule(rule_name, text_opacity)
                 except ValueError:
                     error = True
             else:

src/textual/css/styles.py

@@ -87,7 +87,7 @@ class RulesMap(TypedDict, total=False):
     background: Color
     text_style: Style
 
-    opacity: float
+    text_opacity: float
 
     padding: Spacing
     margin: Spacing
@@ -184,7 +184,7 @@ class StylesBase(ABC):
         "max_height",
         "color",
         "background",
-        "opacity",
+        "text_opacity",
         "tint",
         "scrollbar_color",
         "scrollbar_color_hover",
@@ -204,7 +204,7 @@ class StylesBase(ABC):
     background = ColorProperty(Color(0, 0, 0, 0), background=True)
     text_style = StyleFlagsProperty()
 
-    opacity = FractionalProperty()
+    text_opacity = FractionalProperty()
 
     padding = SpacingProperty()
     margin = SpacingProperty()

src/textual/widgets/_header.py

@@ -35,7 +35,7 @@ class HeaderClock(Widget):
         padding: 0 1;
         background: $secondary-background-lighten-1;
         color: $text-secondary-background;
-        opacity: 85%;      
+        text-opacity: 85%;
         content-align: center middle;
     }
     """

tests/css/test_parse.py

@@ -1098,15 +1098,15 @@ class TestParseOpacity:
         ],
     )
     def test_opacity_to_styles(self, css_value, styles_value):
-        css = f"#some-widget {{ opacity: {css_value} }}"
+        css = f"#some-widget {{ text-opacity: {css_value} }}"
         stylesheet = Stylesheet()
         stylesheet.add_source(css)
 
-        assert stylesheet.rules[0].styles.opacity == styles_value
+        assert stylesheet.rules[0].styles.text_opacity == styles_value
         assert not stylesheet.rules[0].errors
 
     def test_opacity_invalid_value(self):
-        css = "#some-widget { opacity: 123x }"
+        css = "#some-widget { text-opacity: 123x }"
         stylesheet = Stylesheet()
 
         with pytest.raises(StylesheetParseError):

tests/css/test_styles.py

@@ -120,7 +120,7 @@ def test_render_styles_border():
 
 def test_get_opacity_default():
     styles = RenderStyles(DOMNode(), Styles(), Styles())
-    assert styles.opacity == 1.0
+    assert styles.text_opacity == 1.0
 
 
 @pytest.mark.parametrize(
@@ -136,14 +136,14 @@ def test_get_opacity_default():
 )
 def test_opacity_set_then_get(set_value, expected):
     styles = RenderStyles(DOMNode(), Styles(), Styles())
-    styles.opacity = set_value
+    styles.text_opacity = set_value
-    assert styles.opacity == expected
+    assert styles.text_opacity == expected
 
 
 def test_opacity_set_invalid_type_error():
     styles = RenderStyles(DOMNode(), Styles(), Styles())
     with pytest.raises(StyleValueError):
-        styles.opacity = "invalid value"
+        styles.text_opacity = "invalid value"
 
 
 @pytest.mark.parametrize(