tint style

docs/examples/styles/tint.py

@@ -0,0 +1,28 @@
+from textual.app import App
+from textual.color import Color
+from textual.widgets import Static
+
+
+class TintApp(App):
+    CSS = """    
+    Screen {
+        background: green;
+    }
+    Static {             
+        height: 3;
+        text-style: bold;
+        background: white;        
+        color: black;   
+        content-align: center middle; 
+    }
+    """
+
+    def compose(self):
+        color = Color.parse("green")
+        for tint_alpha in range(0, 101, 10):
+            widget = Static(f"tint: green {tint_alpha}%;")
+            widget.styles.tint = color.with_alpha(tint_alpha / 100)
+            yield widget
+
+
+app = TintApp()

docs/styles/tint.md

@@ -0,0 +1,39 @@
+# Tint
+
+The tint rule blends a color with the widget. The color should likely have an _alpha_ component, or the end result would obscure the widget content.
+
+## Example
+
+This examples shows a green tint with gradually increasing alpha.
+
+=== "tint.py"
+
+    ```python
+    --8<-- "docs/examples/styles/tint.py"
+    ```
+
+=== "Output"
+
+    ```{.textual path="docs/examples/styles/tint.py"}
+    ```
+
+## CSS
+
+```sass
+/* A red tint (could indicate an error) */
+tint: red 20%
+
+/* A green tint */
+tint: rgba(0, 200, 0, 0.3);
+```
+
+# Python
+
+```python
+# A red tint
+from textual.color import Color
+widget.styles.tint = Color.parse("red").with_alpha(0.2);
+
+# A green tint
+widget.styles.tint = "rgba(0, 200, 0, 0.3):
+```