Renaming opacity to text-opacity in code

docs/examples/basic.css

@@ -4,18 +4,18 @@
 
  * {
     transition: color 300ms linear, background 300ms linear;
-} 
+}
 
 
 *:hover {
-  /* tint: 30% red;  
+  /* tint: 30% red;
   /* outline: heavy red; */
 }
 
 App > Screen {
-    
+
   background: $surface;
-  color: $text-surface; 
+  color: $text-surface;
   layers: base sidebar;
 
   color: $text-background;
@@ -23,12 +23,12 @@ App > Screen {
   layout: vertical;
 
   overflow: hidden;
-  
+
 }
 
 #tree-container {
   overflow-y: auto;
-  height: 20; 
+  height: 20;
   margin: 1 3;
   background: $panel;
   padding: 1 2;
@@ -37,7 +37,7 @@ App > Screen {
 DirectoryTree {
     padding: 0 1;
     height: auto;
-   
+
 }
 
 
@@ -46,10 +46,10 @@ DirectoryTree {
 DataTable {
   /*border:heavy red;*/
   /* tint: 10% green; */
-  /* opacity: 50%; */
+  /* text-opacity: 50%; */
   padding: 1;
-  margin: 1 2;  
+  margin: 1 2;
-  height: 24;  
+  height: 24;
 }
 
 #sidebar {
@@ -59,7 +59,7 @@ DataTable {
   width: 30;
   margin-bottom: 1;
   offset-x: -100%;
-  
+
   transition: offset 500ms in_out_cubic;
   layer: sidebar;
 }
@@ -97,8 +97,8 @@ DataTable {
 Tweet {
   height:12;
   width: 100%;
-  margin: 0 2; 
+  margin: 0 2;
-  
+
   background: $panel;
   color: $text-panel;
   layout: vertical;
@@ -121,9 +121,9 @@ Tweet {
   layout: vertical;
 }
 
-.code {  
+.code {
   height: auto;
-  
+
 }
 
 
@@ -133,12 +133,12 @@ TweetHeader {
   color: $text-accent
 }
 
-TweetBody {  
+TweetBody {
   width: 100%;
   background: $panel;
   color: $text-panel;
-  height: auto; 
+  height: auto;
-  padding: 0 1 0 0; 
+  padding: 0 1 0 0;
 }
 
 Tweet.scroll-horizontal TweetBody {
@@ -158,7 +158,7 @@ Tweet.scroll-horizontal TweetBody {
   /* padding: 1 0 0 0 ; */
 
   transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
- 
+
 }
 
 .button:hover {
@@ -178,7 +178,7 @@ Tweet.scroll-horizontal TweetBody {
   color: $text-accent;
   background: $accent;
   height: 1;
-  
+
   content-align: center middle;
   dock:bottom;
 }
@@ -213,7 +213,7 @@ Error {
   color: $text-error;
   border-top: tall $error-darken-2;
   border-bottom: tall $error-darken-2;
-  
+
   padding: 0;
   text-style: bold;
   align-horizontal: center;
@@ -226,21 +226,21 @@ Warning {
   color: $text-warning-fade-1;
   border-top: tall $warning-darken-2;
   border-bottom: tall $warning-darken-2;
-  
+
   text-style: bold;
   align-horizontal: center;
 }
 
 Success {
   width: 100%;
-  
+
-  height:auto;  
+  height:auto;
   box-sizing: border-box;
   background: $success;
-  color: $text-success-fade-1;  
+  color: $text-success-fade-1;
-  
+
   border-top: hkey $success-darken-2;
-  border-bottom: hkey $success-darken-2; 
+  border-bottom: hkey $success-darken-2;
 
   text-style: bold ;
 

docs/examples/introduction/stopwatch.css

@@ -9,12 +9,12 @@ Stopwatch {
 
 TimeDisplay {
     content-align: center middle;
-    opacity: 60%;
+    text-opacity: 60%;
     height: 3;
 }
 
 Button {
-    width: 16;    
+    width: 16;
 }
 
 #start {
@@ -30,14 +30,14 @@ Button {
     dock: right;
 }
 
-.started {   
+.started {
     text-style: bold;
     background: $success;
     color: $text-success;
 }
 
 .started TimeDisplay {
-    opacity: 100%;
+    text-opacity: 100%;
 }
 
 .started #start {

docs/examples/introduction/stopwatch03.css

@@ -8,12 +8,12 @@ Stopwatch {
 
 TimeDisplay {
     content-align: center middle;
-    opacity: 60%;
+    text-opacity: 60%;
     height: 3;
 }
 
 Button {
-    width: 16;    
+    width: 16;
 }
 
 #start {

docs/examples/introduction/stopwatch04.css

@@ -9,12 +9,12 @@ Stopwatch {
 
 TimeDisplay {
     content-align: center middle;
-    opacity: 60%;
+    text-opacity: 60%;
     height: 3;
 }
 
 Button {
-    width: 16;    
+    width: 16;
 }
 
 #start {
@@ -30,14 +30,14 @@ Button {
     dock: right;
 }
 
-.started {   
+.started {
     text-style: bold;
     background: $success;
     color: $text-success;
 }
 
 .started TimeDisplay {
-    opacity: 100%;
+    text-opacity: 100%;
 }
 
 .started #start {

e2e_tests/test_apps/basic.css

@@ -4,33 +4,33 @@
 
  * {
     transition: color 300ms linear, background 300ms linear;
-} 
+}
 
 
 *:hover {
-  /* tint: 30% red;  
+  /* tint: 30% red;
   /* outline: heavy red; */
 }
 
 App > Screen {
-    
+
   background: $surface;
-  color: $text-surface; 
+  color: $text-surface;
   layers: sidebar;
 
   color: $text-background;
   background: $background;
   layout: vertical;
-  
+
 }
 
 DataTable {
   /*border:heavy red;*/
   /* tint: 10% green; */
-  /* opacity: 50%; */
+  /* text-opacity: 50%; */
   padding: 1;
-  margin: 1 2;  
+  margin: 1 2;
-  height: 12;  
+  height: 12;
 }
 
 #sidebar {
@@ -39,7 +39,7 @@ DataTable {
   dock: left;
   width: 30;
   offset-x: -100%;
-  
+
   transition: offset 500ms in_out_cubic;
   layer: sidebar;
 }
@@ -76,7 +76,7 @@ DataTable {
   background: $secondary-background;
   height: 1;
   content-align: center middle;
-  
+
   dock: top;
 }
 
@@ -84,8 +84,8 @@ DataTable {
 Tweet {
   height:12;
   width: 100%;
- 
+
-  
+
   background: $panel;
   color: $text-panel;
   layout: vertical;
@@ -100,7 +100,7 @@ Tweet {
 
 
 .scrollable {
- 
+
   overflow-y: scroll;
   margin: 1 2;
   height: 20;
@@ -108,9 +108,9 @@ Tweet {
   layout: vertical;
 }
 
-.code {  
+.code {
   height: auto;
-  
+
 }
 
 
@@ -120,12 +120,12 @@ TweetHeader {
   color: $text-accent
 }
 
-TweetBody {  
+TweetBody {
   width: 100%;
   background: $panel;
   color: $text-panel;
-  height: auto; 
+  height: auto;
-  padding: 0 1 0 0; 
+  padding: 0 1 0 0;
 }
 
 Tweet.scroll-horizontal TweetBody {
@@ -145,7 +145,7 @@ Tweet.scroll-horizontal TweetBody {
   /* padding: 1 0 0 0 ; */
 
   transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
- 
+
 }
 
 .button:hover {
@@ -165,7 +165,7 @@ Tweet.scroll-horizontal TweetBody {
   color: $text-accent;
   background: $accent;
   height: 1;
-  
+
   content-align: center middle;
   dock:bottom;
 }
@@ -200,7 +200,7 @@ Error {
   color: $text-error;
   border-top: tall $error-darken-2;
   border-bottom: tall $error-darken-2;
-  
+
   padding: 0;
   text-style: bold;
   align-horizontal: center;
@@ -213,21 +213,21 @@ Warning {
   color: $text-warning-fade-1;
   border-top: tall $warning-darken-2;
   border-bottom: tall $warning-darken-2;
-  
+
   text-style: bold;
   align-horizontal: center;
 }
 
 Success {
   width: 100%;
-  
+
-  height:auto;  
+  height:auto;
   box-sizing: border-box;
   background: $success;
-  color: $text-success-fade-1;  
+  color: $text-success-fade-1;
-  
+
   border-top: hkey $success-darken-2;
-  border-bottom: hkey $success-darken-2; 
+  border-bottom: hkey $success-darken-2;
 
   text-style: bold ;
 

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

@@ -4,18 +4,18 @@
 
  * {
     transition: color 300ms linear, background 300ms linear;
-} 
+}
 
 
 *:hover {
-  /* tint: 30% red;  
+  /* tint: 30% red;
   /* outline: heavy red; */
 }
 
 App > Screen {
-    
+
   background: $surface;
-  color: $text-surface; 
+  color: $text-surface;
   layers: base sidebar;
 
   color: $text-background;
@@ -23,12 +23,12 @@ App > Screen {
   layout: vertical;
 
   overflow: hidden;
-  
+
 }
 
 #tree-container {
   overflow-y: auto;
-  height: 20; 
+  height: 20;
   margin: 1 2;
   background: $panel;
   padding: 1 2;
@@ -37,7 +37,7 @@ App > Screen {
 DirectoryTree {
     padding: 0 1;
     height: auto;
-   
+
 }
 
 
@@ -46,10 +46,10 @@ DirectoryTree {
 DataTable {
   /*border:heavy red;*/
   /* tint: 10% green; */
-  /* opacity: 50%; */
+  /* text-opacity: 50%; */
   padding: 1;
-  margin: 1 2;  
+  margin: 1 2;
-  height: 24;  
+  height: 24;
 }
 
 #sidebar {
@@ -59,7 +59,7 @@ DataTable {
   width: 30;
   margin-bottom: 1;
   offset-x: -100%;
-  
+
   transition: offset 500ms in_out_cubic;
   layer: sidebar;
 }
@@ -98,7 +98,7 @@ Tweet {
   height:12;
   width: 100%;
   margin: 0 2;
- 
+
   margin:0 2;
   background: $panel;
   color: $text-panel;
@@ -123,9 +123,9 @@ Tweet {
   layout: vertical;
 }
 
-.code {  
+.code {
   height: auto;
-  
+
 }
 
 
@@ -135,12 +135,12 @@ TweetHeader {
   color: $text-accent
 }
 
-TweetBody {  
+TweetBody {
   width: 100%;
   background: $panel;
   color: $text-panel;
-  height: auto; 
+  height: auto;
-  padding: 0 1 0 0; 
+  padding: 0 1 0 0;
 }
 
 Tweet.scroll-horizontal TweetBody {
@@ -160,7 +160,7 @@ Tweet.scroll-horizontal TweetBody {
   /* padding: 1 0 0 0 ; */
 
   transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
- 
+
 }
 
 .button:hover {
@@ -180,7 +180,7 @@ Tweet.scroll-horizontal TweetBody {
   color: $text-accent;
   background: $accent;
   height: 1;
-  
+
   content-align: center middle;
   dock:bottom;
 }
@@ -215,7 +215,7 @@ Error {
   color: $text-error;
   border-top: tall $error-darken-2;
   border-bottom: tall $error-darken-2;
-  
+
   padding: 0;
   text-style: bold;
   align-horizontal: center;
@@ -228,21 +228,21 @@ Warning {
   color: $text-warning-fade-1;
   border-top: tall $warning-darken-2;
   border-bottom: tall $warning-darken-2;
-  
+
   text-style: bold;
   align-horizontal: center;
 }
 
 Success {
   width: 100%;
-  
+
-  height:auto;  
+  height:auto;
   box-sizing: border-box;
   background: $success;
-  color: $text-success-fade-1;  
+  color: $text-success-fade-1;
-  
+
   border-top: hkey $success-darken-2;
-  border-bottom: hkey $success-darken-2; 
+  border-bottom: hkey $success-darken-2;
 
   text-style: bold ;
 

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

@@ -29,14 +29,14 @@ class HeaderClock(Widget):
     """Display a clock on the right of the header."""
 
     CSS = """
-    HeaderClock {        
+    HeaderClock {
         dock: right;
         width: auto;
         padding: 0 1;
         background: $secondary-background-lighten-1;
         color: $text-secondary-background;
-        opacity: 85%;      
+        text-opacity: 85%;
-        content-align: center middle;  
+        content-align: center middle;
     }
     """
 
@@ -51,9 +51,9 @@ class HeaderTitle(Widget):
     """Display the title / subtitle in the header."""
 
     CSS = """
-    HeaderTitle {               
+    HeaderTitle {
         content-align: center middle;
-        width: 100%;        
+        width: 100%;
     }
     """
 
@@ -79,7 +79,7 @@ class Header(Widget):
         height: 1;
     }
     Header.tall {
-        height: 3;        
+        height: 3;
     }
     """
 

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(