Rename link-hover-* rules to link-*-hover.

CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+
+### Changed
+
+- Breaking changes https://github.com/Textualize/textual/issues/1530
+ - `link-hover-background` renamed to `link-background-hover`
+ - `link-hover-color` renamed to `link-color-hover`
+ - `link-hover-style` renamed to `link-style-hover`
+
 
 ## [0.42.0] - 2023-11-22
 

docs/examples/styles/link_hover_background.py → docs/examples/styles/link_background_hover.py

@@ -3,7 +3,7 @@
 
 
 class LinkHoverBackgroundApp(App):
-    CSS_PATH = "link_hover_background.tcss"
+    CSS_PATH = "link_background_hover.tcss"
 
     def compose(self):
         yield Label(

docs/examples/styles/link_hover_background.tcss → docs/examples/styles/link_background_hover.tcss

@@ -1,9 +1,9 @@
 #lbl1, #lbl2 {
-    link-hover-background: red;  /* (1)! */
+    link-background-hover: red;  /* (1)! */
 }
 
 #lbl3 {
-    link-hover-background: hsl(60,100%,50%) 50%;
+    link-background-hover: hsl(60,100%,50%) 50%;
 }
 
 #lbl4 {

docs/examples/styles/link_hover_color.py → docs/examples/styles/link_color_hover.py

@@ -3,7 +3,7 @@
 
 
 class LinkHoverColorApp(App):
-    CSS_PATH = "link_hover_color.tcss"
+    CSS_PATH = "link_color_hover.tcss"
 
     def compose(self):
         yield Label(

docs/examples/styles/link_color_hover.tcss

@@ -0,0 +1,11 @@
+#lbl1, #lbl2 {
+    link-color-hover: red;  /* (1)! */
+}
+
+#lbl3 {
+    link-color-hover: hsl(60,100%,50%) 50%;
+}
+
+#lbl4 {
+    link-color-hover: black;
+}

docs/examples/styles/link_hover_style.py → docs/examples/styles/link_style_hover.py

@@ -3,7 +3,7 @@
 
 
 class LinkHoverStyleApp(App):
-    CSS_PATH = "link_hover_style.tcss"
+    CSS_PATH = "link_style_hover.tcss"
 
     def compose(self):
         yield Label(

docs/examples/styles/link_style_hover.tcss

@@ -0,0 +1,11 @@
+#lbl1, #lbl2 {
+    link-style-hover: bold italic;  /* (1)! */
+}
+
+#lbl3 {
+    link-style-hover: reverse strike;
+}
+
+#lbl4 {
+    link-style-hover: bold;
+}

docs/styles/links/index.md

@@ -10,11 +10,11 @@ There are a number of styles which influence the appearance of these links withi
 | Property                                              | Description                                                       |
 |-------------------------------------------------------|-------------------------------------------------------------------|
 | [`link-background`](./link_background.md)             | The background color of the link text.                            |
+| [`link-background-hover`](./link_background_hover.md) | The background color of the link text when the cursor is over it. |
 | [`link-color`](./link_color.md)                       | The color of the link text.                                       |
-| [`link-hover-background`](./link_hover_background.md) | The background color of the link text when the cursor is over it. |
-| [`link-hover-color`](./link_hover_color.md)           | The color of the link text when the cursor is over it.            |
-| [`link-hover-style`](./link_hover_style.md)           | The style of the link text when the cursor is over it.            |
+| [`link-color-hover`](./link_color_hover.md)           | The color of the link text when the cursor is over it.            |
 | [`link-style`](./link_style.md)                       | The style of the link text (e.g. underline).                      |
+| [`link-style-hover`](./link_style_hover.md)           | The style of the link text when the cursor is over it.            |
 
 ## Syntax
 
@@ -25,11 +25,11 @@ There are a number of styles which influence the appearance of these links withi
 
 <a href="./link_style">link-style</a>: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
 
-<a href="./link_hover_background">link-hover-background</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
+<a href="./link_background_hover">link-background-hover</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 
-<a href="./link_hover_color">link-hover-color</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
+<a href="./link_color_hover">link-color-hover</a>: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 
-<a href="./link_hover_style">link-hover-style</a>: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
+<a href="./link_style_hover">link-style-hover</a>: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
 --8<-- "docs/snippets/syntax_block_end.md"
 
 Visit each style's reference page to learn more about how the values are used.

docs/styles/links/link_background.md

@@ -63,4 +63,4 @@ widget.styles.link_background = Color(100, 30, 173)
 ## See also
 
  - [`link-color`](./link_color.md) to set the color of link text.
- - [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it.
+ - [`link-background-hover](./link_background_hover.md) to set the background color of link text when the mouse pointer is over it.

docs/styles/links/link_hover_background.md → docs/styles/links/link_background_hover.md

@@ -1,53 +1,53 @@
-# Link-hover-background
+# Link-background-hover
 
-The `link-hover-background` style sets the background color of the link when the mouse cursor is over the link.
+The `link-background-hover` style sets the background color of the link when the mouse cursor is over the link.
 
 !!! note
 
-    `link-hover-background` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
+    `link-background-hover` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
 
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-link-hover-background: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
+link-background-hover: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-`link-hover-background` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.
+`link-background-hover` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.
 
 ### Defaults
 
-If not provided, a Textual action link will have `link-hover-background` set to `$accent`.
+If not provided, a Textual action link will have `link-background-hover` set to `$accent`.
 
 ## Example
 
-The example below shows some links that have their background colour changed when the mouse moves over it and it shows that there is a default color for `link-hover-background`.
+The example below shows some links that have their background colour changed when the mouse moves over it and it shows that there is a default color for `link-background-hover`.
 
-It also shows that `link-hover-background` does not affect hyperlinks.
+It also shows that `link-background-hover` does not affect hyperlinks.
 
 === "Output"
 
-    ![](./demos/link_hover_background_demo.gif)
+    ![](./demos/link_background_hover_demo.gif)
 
     !!! note
 
         The GIF has reduced quality to make it easier to load in the documentation.
-        Try running the example yourself with `textual run docs/examples/styles/link_hover_background.py`.
+        Try running the example yourself with `textual run docs/examples/styles/link_background_hover.py`.
 
-=== "link_hover_background.py"
+=== "link_background_hover.py"
 
     ```py hl_lines="10-11 14-15 18-19 22-23"
-    --8<-- "docs/examples/styles/link_hover_background.py"
+    --8<-- "docs/examples/styles/link_background_hover.py"
     ```
 
-    1. This label has a hyperlink so it won't be affected by the `link-hover-background` rule.
-    2. This label has an "action link" that can be styled with `link-hover-background`.
-    3. This label has an "action link" that can be styled with `link-hover-background`.
-    4. This label has an "action link" that can be styled with `link-hover-background`.
+    1. This label has a hyperlink so it won't be affected by the `link-background-hover` rule.
+    2. This label has an "action link" that can be styled with `link-background-hover`.
+    3. This label has an "action link" that can be styled with `link-background-hover`.
+    4. This label has an "action link" that can be styled with `link-background-hover`.
 
-=== "link_hover_background.tcss"
+=== "link_background_hover.tcss"
 
     ```sass hl_lines="2 6 10"
-    --8<-- "docs/examples/styles/link_hover_background.tcss"
+    --8<-- "docs/examples/styles/link_background_hover.tcss"
     ```
 
     1. This will only affect one of the labels because action links are the only links that this rule affects.
@@ -56,22 +56,22 @@ It also shows that `link-hover-background` does not affect hyperlinks.
 ## CSS
 
 ```sass
-link-hover-background: red 70%;
-link-hover-background: $accent;
+link-background-hover: red 70%;
+link-background-hover: $accent;
 ```
 
 ## Python
 
 ```py
-widget.styles.link_hover_background = "red 70%"
-widget.styles.link_hover_background = "$accent"
+widget.styles.link_background_hover = "red 70%"
+widget.styles.link_background_hover = "$accent"
 
 # You can also use a `Color` object directly:
-widget.styles.link_hover_background = Color(100, 30, 173)
+widget.styles.link_background_hover = Color(100, 30, 173)
 ```
 
 ## See also
 
  - [`link-background`](./link_background.md) to set the background color of link text.
- - [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it.
- - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it.
+ - [`link-color-hover](./link_color_hover.md) to set the color of link text when the mouse pointer is over it.
+ - [`link-style-hover](./link_style_hover.md) to set the style of link text when the mouse pointer is over it.

docs/styles/links/link_color.md

@@ -63,4 +63,4 @@ widget.styles.link_color = Color(100, 30, 173)
 ## See also
 
  - [`link-background`](./link_background.md) to set the background color of link text.
- - [`link-hover-color](./link_hover_color.md) to set the color of link text when the mouse pointer is over it.
+ - [`link-color-hover](./link_color_hover.md) to set the color of link text when the mouse pointer is over it.

docs/styles/links/link_hover_color.md → docs/styles/links/link_color_hover.md

@@ -1,80 +1,80 @@
-# Link-hover-color
+# Link-color-hover
 
-The `link-hover-color` style sets the color of the link text when the mouse cursor is over the link.
+The `link-color-hover` style sets the color of the link text when the mouse cursor is over the link.
 
 !!! note
 
-    `link-hover-color` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
+    `link-color-hover` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks.
 
 ## Syntax
 
 --8<-- "docs/snippets/syntax_block_start.md"
-link-hover-color: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
+link-color-hover: <a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
 --8<-- "docs/snippets/syntax_block_end.md"
 
-`link-hover-color` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.
+`link-color-hover` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.
 
 ### Defaults
 
-If not provided, a Textual action link will have `link-hover-color` set to `white`.
+If not provided, a Textual action link will have `link-color-hover` set to `white`.
 
 ## Example
 
 The example below shows some links that have their colour changed when the mouse moves over it.
-It also shows that `link-hover-color` does not affect hyperlinks.
+It also shows that `link-color-hover` does not affect hyperlinks.
 
 === "Output"
 
-    ![](./demos/link_hover_color_demo.gif)
+    ![](./demos/link_color_hover_demo.gif)
 
     !!! note
 
         The background color also changes when the mouse moves over the links because that is the default behavior.
-        That can be customised by setting [`link-hover-background`](./link_hover_background.md) but we haven't done so in this example.
+        That can be customised by setting [`link-background-hover`](./link_background_hover.md) but we haven't done so in this example.
 
     !!! note
 
         The GIF has reduced quality to make it easier to load in the documentation.
-        Try running the example yourself with `textual run docs/examples/styles/link_hover_color.py`.
+        Try running the example yourself with `textual run docs/examples/styles/link_color_hover.py`.
 
-=== "link_hover_color.py"
+=== "link_color_hover.py"
 
     ```py hl_lines="10-11 14-15 18-19 22-23"
-    --8<-- "docs/examples/styles/link_hover_color.py"
+    --8<-- "docs/examples/styles/link_color_hover.py"
     ```
 
-    1. This label has a hyperlink so it won't be affected by the `link-hover-color` rule.
-    2. This label has an "action link" that can be styled with `link-hover-color`.
-    3. This label has an "action link" that can be styled with `link-hover-color`.
-    4. This label has an "action link" that can be styled with `link-hover-color`.
+    1. This label has a hyperlink so it won't be affected by the `link-color-hover` rule.
+    2. This label has an "action link" that can be styled with `link-color-hover`.
+    3. This label has an "action link" that can be styled with `link-color-hover`.
+    4. This label has an "action link" that can be styled with `link-color-hover`.
 
-=== "link_hover_color.tcss"
+=== "link_color_hover.tcss"
 
     ```sass hl_lines="2 6 10"
-    --8<-- "docs/examples/styles/link_hover_color.tcss"
+    --8<-- "docs/examples/styles/link_color_hover.tcss"
     ```
 
     1. This will only affect one of the labels because action links are the only links that this rule affects.
 
 ## CSS
 
 ```sass
-link-hover-color: red 70%;
-link-hover-color: black;
+link-color-hover: red 70%;
+link-color-hover: black;
 ```
 
 ## Python
 
 ```py
-widget.styles.link_hover_color = "red 70%"
-widget.styles.link_hover_color = "black"
+widget.styles.link_color_hover = "red 70%"
+widget.styles.link_color_hover = "black"
 
 # You can also use a `Color` object directly:
-widget.styles.link_hover_color = Color(100, 30, 173)
+widget.styles.link_color_hover = Color(100, 30, 173)
 ```
 
 ## See also
 
  - [`link-color`](./link_color.md) to set the color of link text.
- - [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it.
- - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it.
+ - [`link-background-hover](./link_background_hover.md) to set the background color of link text when the mouse pointer is over it.
+ - [`link-style-hover](./link_style_hover.md) to set the style of link text when the mouse pointer is over it.

docs/styles/links/link_style.md

@@ -63,5 +63,5 @@ widget.styles.link_style = "bold italic reverse"
 
 ## See also
 
- - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it.
+ - [`link-style-hover](./link_style_hover.md) to set the style of link text when the mouse pointer is over it.
  - [`text-style`](../text_style.md) to set the style of text in a widget.