From 19eeb5d7bae2033e8a9a9f97bf3e6ce891882782 Mon Sep 17 00:00:00 2001 From: TomJGooding <101601846+TomJGooding@users.noreply.github.com> Date: Thu, 17 Jul 2025 18:58:59 +0100 Subject: [PATCH] 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 | 48 +++++++++---------- src/textual/widgets/_markdown.py | 4 +- .../test_snapshots/test_example_markdown.svg | 2 +- ...t_markdown_component_classes_reloading.svg | 4 +- .../test_markdown_dark_theme_override.svg | 6 +-- .../test_snapshots/test_markdown_example.svg | 2 +- .../test_markdown_light_theme_override.svg | 6 +-- .../test_markdown_space_squashing.svg | 8 ++-- .../test_markdown_theme_switching.svg | 6 +-- .../test_markdown_viewer_example.svg | 2 +- tests/test_highlight.py | 4 +- 11 files changed, 46 insertions(+), 46 deletions(-) diff --git a/src/textual/highlight.py b/src/textual/highlight.py index 268b137ebf..edfbd2cb20 100644 --- a/src/textual/highlight.py +++ b/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: "", } diff --git a/src/textual/widgets/_markdown.py b/src/textual/widgets/_markdown.py index 4e4eb9f994..8145ebf25b 100644 --- a/src/textual/widgets/_markdown.py +++ b/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 { diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_markdown.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_markdown.svg index d76a6a5ea1..9290cb2696 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_markdown.svg +++ b/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 } diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_component_classes_reloading.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_component_classes_reloading.svg index 50841dacce..4aff474f5f 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_component_classes_reloading.svg +++ b/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 } diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_dark_theme_override.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_dark_theme_override.svg index a8084dcdb8..b7ddb86911 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_dark_theme_override.svg +++ b/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 } diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_example.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_example.svg index c538a6c0cd..42be129ae8 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_example.svg +++ b/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 } diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_light_theme_override.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_light_theme_override.svg index 318133af19..bea99b82c2 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_light_theme_override.svg +++ b/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 } diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_space_squashing.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_space_squashing.svg index 6c8414fc1a..c6f27c06d5 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_space_squashing.svg +++ b/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 } diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_theme_switching.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_theme_switching.svg index 318133af19..bea99b82c2 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_theme_switching.svg +++ b/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 } diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_viewer_example.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_viewer_example.svg index 93ed375c09..616ed1ae00 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_markdown_viewer_example.svg +++ b/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 } diff --git a/tests/test_highlight.py b/tests/test_highlight.py index 9596620f14..0178835221 100644 --- a/tests/test_highlight.py +++ b/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"), ]