feat(highlight): use theme text colors

The new `highlight` module for syntax highlighting currently uses the
'base' theme colors. Perhaps this was intentional, but to my eye this
makes the colors in `Markdown` code blocks so prominent that they feel
a bit out of place.

This updates the highlight theme to instead use the dedicated theme text
colors, which I think looks more consistent.

src/textual/highlight.py

@@ -18,33 +18,33 @@ class HighlightTheme:
 
     STYLES: dict[TokenType, str] = {
         Token.Comment: "$text 60%",
-        Token.Error: "$error on $error-muted",
-        Token.Generic.Error: "$error on $error-muted",
-        Token.Generic.Heading: "$primary underline",
-        Token.Generic.Subheading: "$primary",
-        Token.Keyword: "$accent",
-        Token.Keyword.Constant: "bold $success 80%",
-        Token.Keyword.Namespace: "$error",
+        Token.Error: "$text-error on $error-muted",
+        Token.Generic.Error: "$text-error on $error-muted",
+        Token.Generic.Heading: "$text-primary underline",
+        Token.Generic.Subheading: "$text-primary",
+        Token.Keyword: "$text-accent",
+        Token.Keyword.Constant: "bold $text-success 80%",
+        Token.Keyword.Namespace: "$text-error",
         Token.Keyword.Type: "bold",
-        Token.Literal.Number: "$warning",
-        Token.Literal.String: "$success 90%",
-        Token.Literal.String.Doc: "$success 80% italic",
-        Token.Literal.String.Double: "$success 90%",
-        Token.Name: "$primary",
-        Token.Name.Attribute: "$warning",
-        Token.Name.Builtin: "$accent",
+        Token.Literal.Number: "$text-warning",
+        Token.Literal.String: "$text-success 90%",
+        Token.Literal.String.Doc: "$text-success 80% italic",
+        Token.Literal.String.Double: "$text-success 90%",
+        Token.Name: "$text-primary",
+        Token.Name.Attribute: "$text-warning",
+        Token.Name.Builtin: "$text-accent",
         Token.Name.Builtin.Pseudo: "italic",
-        Token.Name.Class: "$warning bold",
-        Token.Name.Constant: "$error",
-        Token.Name.Decorator: "$primary bold",
-        Token.Name.Function: "$warning underline",
-        Token.Name.Function.Magic: "$warning underline",
-        Token.Name.Tag: "$primary bold",
-        Token.Name.Variable: "$secondary",
-        Token.Number: "$warning",
+        Token.Name.Class: "$text-warning bold",
+        Token.Name.Constant: "$text-error",
+        Token.Name.Decorator: "$text-primary bold",
+        Token.Name.Function: "$text-warning underline",
+        Token.Name.Function.Magic: "$text-warning underline",
+        Token.Name.Tag: "$text-primary bold",
+        Token.Name.Variable: "$text-secondary",
+        Token.Number: "$text-warning",
         Token.Operator: "bold",
-        Token.Operator.Word: "bold $error",
-        Token.String: "$success",
+        Token.Operator.Word: "bold $text-error",
+        Token.String: "$text-success",
         Token.Whitespace: "",
     }
 

src/textual/widgets/_markdown.py

@@ -838,11 +838,11 @@ class Markdown(Widget):
         }
         &:dark .code_inline {
             background: $warning-muted 30%;
-            color: $warning;        
+            color: $text-warning;
         }
         &:light .code_inline {
             background: $error-muted 30%;
-            color: $error;
+            color: $text-error;
         }
     }
     .em {

tests/snapshot_tests/__snapshots__/test_snapshots/test_example_markdown.svg

@@ -37,7 +37,7 @@
 .terminal-r3 { fill: #a0a3a6 }
 .terminal-r4 { fill: #3e3e3e }
 .terminal-r5 { fill: #0178d4;font-weight: bold }
-.terminal-r6 { fill: #fea62b }
+.terminal-r6 { fill: #ffc473 }
 .terminal-r7 { fill: #0178d4;text-decoration: underline; }
 .terminal-r8 { fill: #e1e1e1;text-decoration: underline; }
 .terminal-r9 { fill: #ffa62b;font-weight: bold }

tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_component_classes_reloading.svg

@@ -37,12 +37,12 @@
 .terminal-r3 { fill: #3b3b3b }
 .terminal-r4 { fill: #0178d4 }
 .terminal-r5 { fill: #e0e0e0 }
-.terminal-r6 { fill: #fea62b }
+.terminal-r6 { fill: #ffc473 }
 .terminal-r7 { fill: #e0e0e0;font-weight: bold }
 .terminal-r8 { fill: #e0e0e0;font-style: italic; }
 .terminal-r9 { fill: #e0e0e0;text-decoration: line-through; }
 .terminal-r10 { fill: #ffffff }
-.terminal-r11 { fill: #47ad67 }
+.terminal-r11 { fill: #7dc092 }
     </style>
 
     <defs>

tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_dark_theme_override.svg

@@ -34,10 +34,10 @@
 
     .terminal-r1 { fill: #c5c8c6 }
 .terminal-r2 { fill: #0178d4;font-weight: bold }
-.terminal-r3 { fill: #fea62b }
+.terminal-r3 { fill: #ffc473 }
 .terminal-r4 { fill: #ffffff }
-.terminal-r5 { fill: #fea62b;text-decoration: underline; }
-.terminal-r6 { fill: #47ad67 }
+.terminal-r5 { fill: #ffc473;text-decoration: underline; }
+.terminal-r6 { fill: #7dc092 }
     </style>
 
     <defs>

tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_example.svg

@@ -38,7 +38,7 @@
 .terminal-r4 { fill: #e0e0e0;font-weight: bold }
 .terminal-r5 { fill: #e0e0e0 }
 .terminal-r6 { fill: #e0e0e0;font-style: italic; }
-.terminal-r7 { fill: #fea62b }
+.terminal-r7 { fill: #ffc473 }
 .terminal-r8 { fill: #000000 }
 .terminal-r9 { fill: #094573 }
 .terminal-r10 { fill: #0e4977 }

tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_light_theme_override.svg

@@ -34,10 +34,10 @@
 
     .terminal-r1 { fill: #c5c8c6 }
 .terminal-r2 { fill: #004578;font-weight: bold }
-.terminal-r3 { fill: #fea62b }
+.terminal-r3 { fill: #a86d1c }
 .terminal-r4 { fill: #000000 }
-.terminal-r5 { fill: #fea62b;text-decoration: underline; }
-.terminal-r6 { fill: #5dc37d }
+.terminal-r5 { fill: #a86d1c;text-decoration: underline; }
+.terminal-r6 { fill: #458859 }
     </style>
 
     <defs>

tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_space_squashing.svg

@@ -40,11 +40,11 @@
 .terminal-r6 { fill: #e0e0e0;font-weight: bold }
 .terminal-r7 { fill: #e0e0e0;text-decoration: line-through; }
 .terminal-r8 { fill: #9f9f9f }
-.terminal-r9 { fill: #fea62b }
+.terminal-r9 { fill: #ffc473 }
 .terminal-r10 { fill: #ffffff }
-.terminal-r11 { fill: #fea62b;font-weight: bold }
-.terminal-r12 { fill: #419c5d;font-style: italic; }
-.terminal-r13 { fill: #0178d4 }
+.terminal-r11 { fill: #ffc473;font-weight: bold }
+.terminal-r12 { fill: #71ac84;font-style: italic; }
+.terminal-r13 { fill: #57a5e2 }
     </style>
 
     <defs>

tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_theme_switching.svg

@@ -34,10 +34,10 @@
 
     .terminal-r1 { fill: #c5c8c6 }
 .terminal-r2 { fill: #004578;font-weight: bold }
-.terminal-r3 { fill: #fea62b }
+.terminal-r3 { fill: #a86d1c }
 .terminal-r4 { fill: #000000 }
-.terminal-r5 { fill: #fea62b;text-decoration: underline; }
-.terminal-r6 { fill: #5dc37d }
+.terminal-r5 { fill: #a86d1c;text-decoration: underline; }
+.terminal-r6 { fill: #458859 }
     </style>
 
     <defs>

tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_viewer_example.svg

@@ -38,7 +38,7 @@
 .terminal-r4 { fill: #a0a3a6 }
 .terminal-r5 { fill: #3e3e3e }
 .terminal-r6 { fill: #0178d4;font-weight: bold }
-.terminal-r7 { fill: #fea62b }
+.terminal-r7 { fill: #ffc473 }
 .terminal-r8 { fill: #000000 }
 .terminal-r9 { fill: #0178d4;text-decoration: underline; }
 .terminal-r10 { fill: #e1e1e1;font-weight: bold }

tests/test_highlight.py

@@ -11,8 +11,8 @@ def test_highlight() -> None:
     print(import_this.spans)
     assert import_this.spans == [
         Span(0, 11, style="$text"),
-        Span(0, 6, style="$error"),
-        Span(7, 11, style="$primary"),
+        Span(0, 6, style="$text-error"),
+        Span(7, 11, style="$text-primary"),
     ]