Merge pull request #2262 from Textualize/svg-default-back

fix for default background in svg export
Textualize · May 8, 2022 · 0fd6bc5 · 0fd6bc5
2 parents 2c93dce + 3239e56
commit 0fd6bc5
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [12.4.1] - 2022-05-08
+
+### Fixed
+
+- Fix for https://github.com/Textualize/rich/issues/2260
+
+### Changed
+
+- Added a keyline around SVG terminals which is visible on dark backgrounds
+
 ## [12.4.0] - 2022-05-07
 
 ### Changed
@@ -1730,7 +1740,8 @@ Major version bump for a breaking change to `Text.stylize signature`, which corr
 
 - First official release, API still to be stabilized
 
-[unreleased]: https://github.com/willmcgugan/rich/compare/v12.4.0...HEAD
+[unreleased]: https://github.com/willmcgugan/rich/compare/v12.4.1...HEAD
+[12.4.1]: https://github.com/willmcgugan/rich/compare/v12.4.0...v12.4.1
 [12.4.0]: https://github.com/willmcgugan/rich/compare/v12.3.0...v12.4.0
 [12.3.0]: https://github.com/willmcgugan/rich/compare/v12.2.0...v12.3.0
 [12.2.0]: https://github.com/willmcgugan/rich/compare/v12.1.0...v12.2.0

diff --git a/pyproject.toml b/pyproject.toml
@@ -2,7 +2,7 @@
 name = "rich"
 homepage = "https://github.com/willmcgugan/rich"
 documentation = "https://rich.readthedocs.io/en/latest/"
-version = "12.4.0"
+version = "12.4.1"
 description = "Render rich text, tables, progress bars, syntax highlighting, markdown and more to the terminal"
 authors = ["Will McGugan <willmcgugan@gmail.com>"]
 license = "MIT"

diff --git a/rich/_export_format.py b/rich/_export_format.py
@@ -21,6 +21,7 @@
 
 CONSOLE_SVG_FORMAT = """\
 <svg class="rich-terminal" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg">
+    <!-- Generated with Rich https://www.textualize.io -->
     <style>
 
     @font-face {{
@@ -43,13 +44,13 @@
     .{unique_id}-matrix {{
         font-family: Fira Code, monospace;
         font-size: {char_height}px;
-        font-variant: east-asian-width-values;
         line-height: {line_height}px;
+        font-variant-east-asian: full-width;
     }}
 
     .{unique_id}-title {{
         font-size: 18px;
-        opacity: 0.8;
+
         font-weight: bold;
         font-family: arial;
     }}

diff --git a/rich/console.py b/rich/console.py
@@ -2252,12 +2252,12 @@ def get_svg_style(style: Style) -> str:
             css_rules = []
             color = (
                 _theme.foreground_color
-                if style.color is None
+                if (style.color is None or style.color.is_default)
                 else style.color.get_truecolor(_theme)
             )
             bgcolor = (
                 _theme.background_color
-                if style.bgcolor is None
+                if (style.bgcolor is None or style.bgcolor.is_default)
                 else style.bgcolor.get_truecolor(_theme)
             )
             if style.reverse:
@@ -2365,7 +2365,8 @@ def stringify(value: object) -> str:
                         else style.color.get_truecolor(_theme).hex
                     )
                 else:
-                    has_background = style.bgcolor is not None
+                    bgcolor = style.bgcolor
+                    has_background = bgcolor is not None and not bgcolor.is_default
                     background = (
                         _theme.background_color.hex
                         if style.bgcolor is None
@@ -2407,12 +2408,15 @@ def stringify(value: object) -> str:
         chrome = make_tag(
             "rect",
             fill=_theme.background_color.hex,
+            stroke="rgba(255,255,255,0.35)",
+            stroke_width="1",
             x=margin_left,
             y=margin_top,
             width=terminal_width,
             height=terminal_height,
             rx=12,
         )
+
         title_color = _theme.foreground_color.hex
         if title:
             chrome += make_tag(

diff --git a/rich/terminal_theme.py b/rich/terminal_theme.py
@@ -127,5 +127,27 @@ def __init__(
     ],
 )
 
-
-SVG_EXPORT_THEME = DIMMED_MONOKAI
+SVG_EXPORT_THEME = TerminalTheme(
+    (41, 41, 41),
+    (197, 200, 198),
+    [
+        (75, 78, 85),
+        (204, 85, 90),
+        (152, 168, 75),
+        (208, 179, 68),
+        (96, 138, 177),
+        (152, 114, 159),
+        (104, 160, 179),
+        (197, 200, 198),
+        (154, 155, 153),
+    ],
+    [
+        (255, 38, 39),
+        (0, 130, 61),
+        (208, 132, 66),
+        (25, 132, 233),
+        (255, 44, 122),
+        (57, 130, 128),
+        (253, 253, 197),
+    ],
+)
diff --git a/tests/test_console.py b/tests/test_console.py
@@ -494,7 +494,7 @@ def test_export_html_inline():
     assert html == expected
 
 
-EXPECTED_SVG = '<svg class="rich-terminal" viewBox="0 0 1296 118.4" xmlns="http://www.w3.org/2000/svg">\n    <style>\n\n    @font-face {\n        font-family: "Fira Code";\n        src: local("FiraCode-Regular"),\n                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),\n                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");\n        font-style: normal;\n        font-weight: 400;\n    }\n    @font-face {\n        font-family: "Fira Code";\n        src: local("FiraCode-Bold"),\n                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),\n                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");\n        font-style: bold;\n        font-weight: 700;\n    }\n\n    .terminal-614794459-matrix {\n        font-family: Fira Code, monospace;\n        font-size: 20px;\n        font-variant: east-asian-width-values;\n        line-height: 26.400000000000002px;\n    }\n\n    .terminal-614794459-title {\n        font-size: 18px;\n        opacity: 0.8;\n        font-weight: bold;\n        font-family: arial;\n    }\n\n    .terminal-614794459-r1 { fill: #4f76a1;font-weight: bold }\n.terminal-614794459-r2 { fill: #b9bcba }\n    </style>\n    <rect fill="#191919" x="16" y="20" width="1264" height="78.4" rx="12"/><text class="terminal-614794459-title" fill="#b9bcba" text-anchor="middle" x="632" y="46">Rich</text>\n            <circle cx="40" cy="40" r="7" fill="#ff5f57"/>\n            <circle cx="62" cy="40" r="7" fill="#febc2e"/>\n            <circle cx="84" cy="40" r="7" fill="#28c840"/>\n        \n    <g transform="translate(28, 60)">\n    <rect fill="#be3f48" x="0" y="0" width="38.2" height="27.4"/>\n    <text alignment-baseline="baseline" class="terminal-614794459-matrix" font-variant="east-asian-width-values"><tspan class="terminal-614794459-r1" x="0" y="20" textLength="37.2">foo</tspan><tspan class="terminal-614794459-r2" x="37.2" y="20" textLength="12.4">&#160;</tspan><tspan class="terminal-614794459-r2" x="49.6" y="20" textLength="62">Click</tspan><tspan class="terminal-614794459-r2" x="111.6" y="20" textLength="1128.4">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</tspan><tspan class="terminal-614794459-r2" x="1240" y="20" textLength="12.4">\n</tspan></text>\n    </g>\n</svg>\n'
+EXPECTED_SVG = '<svg class="rich-terminal" viewBox="0 0 1296 118.4" xmlns="http://www.w3.org/2000/svg">\n    <!-- Generated with Rich https://www.textualize.io -->\n    <style>\n\n    @font-face {\n        font-family: "Fira Code";\n        src: local("FiraCode-Regular"),\n                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),\n                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");\n        font-style: normal;\n        font-weight: 400;\n    }\n    @font-face {\n        font-family: "Fira Code";\n        src: local("FiraCode-Bold"),\n                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),\n                url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");\n        font-style: bold;\n        font-weight: 700;\n    }\n\n    .terminal-614794459-matrix {\n        font-family: Fira Code, monospace;\n        font-size: 20px;\n        line-height: 26.400000000000002px;\n        font-variant-east-asian: full-width;\n    }\n\n    .terminal-614794459-title {\n        font-size: 18px;\n\n        font-weight: bold;\n        font-family: arial;\n    }\n\n    .terminal-614794459-r1 { fill: #608ab1;font-weight: bold }\n.terminal-614794459-r2 { fill: #c5c8c6 }\n    </style>\n    <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="16" y="20" width="1264" height="78.4" rx="12"/><text class="terminal-614794459-title" fill="#c5c8c6" text-anchor="middle" x="632" y="46">Rich</text>\n            <circle cx="40" cy="40" r="7" fill="#ff5f57"/>\n            <circle cx="62" cy="40" r="7" fill="#febc2e"/>\n            <circle cx="84" cy="40" r="7" fill="#28c840"/>\n        \n    <g transform="translate(28, 60)">\n    <rect fill="#cc555a" x="0" y="0" width="38.2" height="27.4"/>\n    <text alignment-baseline="baseline" class="terminal-614794459-matrix" font-variant="east-asian-width-values"><tspan class="terminal-614794459-r1" x="0" y="20" textLength="37.2">foo</tspan><tspan class="terminal-614794459-r2" x="37.2" y="20" textLength="12.4">&#160;</tspan><tspan class="terminal-614794459-r2" x="49.6" y="20" textLength="62">Click</tspan><tspan class="terminal-614794459-r2" x="111.6" y="20" textLength="1128.4">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</tspan><tspan class="terminal-614794459-r2" x="1240" y="20" textLength="12.4">\n</tspan></text>\n    </g>\n</svg>\n'
 
 
 def test_export_svg():