diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39ffcc4d91..5b27bc934b 100644
--- 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](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).
+## Unreleased
+
+### Added
+
+- Added support for A-F to Digits widget https://github.com/Textualize/textual/pull/5094
+
+### Changed
+
+- Digits are now thin by default, style with text-style: bold to get bold digits https://github.com/Textualize/textual/pull/5094
+
## [0.82.0] - 2024-10-03
### Fixed
diff --git a/docs/blog/images/compositor/cuts.excalidraw.svg b/docs/blog/images/compositor/cuts.excalidraw.svg
new file mode 100644
index 0000000000..454ac2943c
--- /dev/null
+++ b/docs/blog/images/compositor/cuts.excalidraw.svg
@@ -0,0 +1,21 @@
+
diff --git a/src/textual/renderables/digits.py b/src/textual/renderables/digits.py
index f22943e414..9fd2044404 100644
--- a/src/textual/renderables/digits.py
+++ b/src/textual/renderables/digits.py
@@ -5,8 +5,8 @@
from rich.segment import Segment
from rich.style import Style, StyleType
-DIGITS = " 0123456789+-^x:"
-DIGITS3X3 = """\
+DIGITS = " 0123456789+-^x:ABCDEF"
+DIGITS3X3_BOLD = """\
@@ -55,6 +55,96 @@
:
+╭─╮
+├─┤
+╵ ╵
+┌─╮
+├─┤
+└─╯
+╭─╮
+│
+╰─╯
+┌─╮
+│ │
+└─╯
+╭─╴
+├─
+╰─╴
+╭─╴
+├─
+╵
+
+""".splitlines()
+
+
+DIGITS3X3 = """\
+
+
+
+╭─╮
+│ │
+╰─╯
+╶╮
+ │
+╶┴╴
+╶─╮
+┌─┘
+╰─╴
+╶─╮
+ ─┤
+╶─╯
+╷ ╷
+╰─┤
+ ╵
+╭─╴
+╰─╮
+╶─╯
+╭─╴
+├─╮
+╰─╯
+╶─┐
+ │
+ ╵
+╭─╮
+├─┤
+╰─╯
+╭─╮
+╰─┤
+╶─╯
+
+╶┼╴
+
+
+╶─╴
+
+ ^
+
+
+
+ ×
+
+
+ :
+
+╭─╮
+├─┤
+╵ ╵
+┌─╮
+├─┤
+└─╯
+╭─╮
+│
+╰─╯
+┌─╮
+│ │
+└─╯
+╭─╴
+├─
+╰─╴
+╭─╴
+├─
+╵
+
""".splitlines()
@@ -91,6 +181,11 @@ def render(self, style: Style) -> RenderResult:
row2 = digit_pieces[1].append
row3 = digit_pieces[2].append
+ if style.bold:
+ digits = DIGITS3X3_BOLD
+ else:
+ digits = DIGITS3X3
+
for character in self._text:
try:
position = DIGITS.index(character) * 3
@@ -99,9 +194,9 @@ def render(self, style: Style) -> RenderResult:
row2(" ")
row3(character)
else:
- row1(DIGITS3X3[position].ljust(3))
- row2(DIGITS3X3[position + 1].ljust(3))
- row3(DIGITS3X3[position + 2].ljust(3))
+ row1(digits[position].ljust(3))
+ row2(digits[position + 1].ljust(3))
+ row3(digits[position + 2].ljust(3))
new_line = Segment.line()
for line in digit_pieces:
diff --git a/src/textual/widgets/_digits.py b/src/textual/widgets/_digits.py
index c64f9cafa4..b85fe27525 100644
--- a/src/textual/widgets/_digits.py
+++ b/src/textual/widgets/_digits.py
@@ -18,8 +18,7 @@ class Digits(Widget):
Digits {
width: 1fr;
height: auto;
- text-align: left;
- text-style: bold;
+ text-align: left;
box-sizing: border-box;
}
"""
diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_digits.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_digits.svg
index 91fd49898b..238accbed3 100644
--- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_digits.svg
+++ b/tests/snapshot_tests/__snapshots__/test_snapshots/test_digits.svg
@@ -19,132 +19,132 @@
font-weight: 700;
}
- .terminal-1348330842-matrix {
+ .terminal-2016553667-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
- .terminal-1348330842-title {
+ .terminal-2016553667-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
- .terminal-1348330842-r1 { fill: #e1e1e1;font-weight: bold }
-.terminal-1348330842-r2 { fill: #c5c8c6 }
-.terminal-1348330842-r3 { fill: #e1e1e1 }
+ .terminal-2016553667-r1 { fill: #e1e1e1 }
+.terminal-2016553667-r2 { fill: #c5c8c6 }
+.terminal-2016553667-r3 { fill: #e1e1e1;font-weight: bold }
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
- DigitApp
+ DigitApp
-
+
-
- ╺━┓ ┓ ╻ ╻╺━┓╺━┓
- ━┫ ┃ ┗━┫┏━┛ ┃
-╺━┛.╺┻╸ ╹┗━╸ ╹
- ┏━┓ ┓ ╺━┓╺━┓╻ ╻┏━╸┏━╸╺━┓┏━┓┏━┓
- ┃ ┃ ┃ ┏━┛ ━┫┗━┫┗━┓┣━┓ ┃┣━┫┗━┫╺╋╸╺━╸
- ┗━┛╺┻╸┗━╸╺━┛ ╹╺━┛┗━┛ ╹┗━┛╺━┛ .,
- ╺━┓ ┓ ┏━┓ ^ ╻ ╻
- ━┫ × ┃ ┃ ┃ ┗━┫
- ╺━┛ ╺┻╸┗━┛ ╹
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ ╶─╮ ╶╮ ╷ ╷╶─╮╶─┐
+ ─┤ │ ╰─┤┌─┘ │
+╶─╯.╶┴╴ ╵╰─╴ ╵
+ ╭─╮╶╮ ╶─╮╶─╮╷ ╷╭─╴╭─╴╶─┐╭─╮╭─╮ ╭─╮┌─╮╭─╮┌─╮╭─╴╭─╴
+ │ │ │ ┌─┘ ─┤╰─┤╰─╮├─╮ │├─┤╰─┤╶┼╴╶─╴ ├─┤├─┤│ │ │├─ ├─
+ ╰─╯╶┴╴╰─╴╶─╯ ╵╶─╯╰─╯ ╵╰─╯╶─╯ .,╵ ╵└─╯╰─╯└─╯╰─╴╵
+ ┏━┓ ┓ ╺━┓╺━┓╻ ╻┏━╸┏━╸╺━┓┏━┓┏━┓ ╭─╮┌─╮╭─╮┌─╮╭─╴╭─╴
+ ┃ ┃ ┃ ┏━┛ ━┫┗━┫┗━┓┣━┓ ┃┣━┫┗━┫╺╋╸╺━╸ ├─┤├─┤│ │ │├─ ├─
+ ┗━┛╺┻╸┗━╸╺━┛ ╹╺━┛┗━┛ ╹┗━┛╺━┛ .,╵ ╵└─╯╰─╯└─╯╰─╴╵
+ ╶─╮ ╶╮ ╭─╮ ^ ╷ ╷
+ ─┤ × │ │ │ ╰─┤
+ ╶─╯ ╶┴╴╰─╯ ╵
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_calculator.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_calculator.svg
index fc4357d199..312e3a8a19 100644
--- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_calculator.svg
+++ b/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_calculator.svg
@@ -19,145 +19,145 @@
font-weight: 700;
}
- .terminal-2896294451-matrix {
+ .terminal-3758221115-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
- .terminal-2896294451-title {
+ .terminal-3758221115-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
- .terminal-2896294451-r1 { fill: #e1e1e1 }
-.terminal-2896294451-r2 { fill: #1e1e1e }
-.terminal-2896294451-r3 { fill: #c5c8c6 }
-.terminal-2896294451-r4 { fill: #e5ebf2;font-weight: bold }
-.terminal-2896294451-r5 { fill: #507bb3 }
-.terminal-2896294451-r6 { fill: #ffcf56 }
-.terminal-2896294451-r7 { fill: #004578;font-weight: bold }
-.terminal-2896294451-r8 { fill: #dde6ed;font-weight: bold }
-.terminal-2896294451-r9 { fill: #211505;font-weight: bold }
-.terminal-2896294451-r10 { fill: #001541 }
-.terminal-2896294451-r11 { fill: #b86b00 }
-.terminal-2896294451-r12 { fill: #454a50 }
-.terminal-2896294451-r13 { fill: #e2e3e3;font-weight: bold }
-.terminal-2896294451-r14 { fill: #000000 }
-.terminal-2896294451-r15 { fill: #14191f }
+ .terminal-3758221115-r1 { fill: #e1e1e1 }
+.terminal-3758221115-r2 { fill: #1e1e1e }
+.terminal-3758221115-r3 { fill: #c5c8c6 }
+.terminal-3758221115-r4 { fill: #e5ebf2 }
+.terminal-3758221115-r5 { fill: #507bb3 }
+.terminal-3758221115-r6 { fill: #ffcf56 }
+.terminal-3758221115-r7 { fill: #004578;font-weight: bold }
+.terminal-3758221115-r8 { fill: #dde6ed;font-weight: bold }
+.terminal-3758221115-r9 { fill: #211505;font-weight: bold }
+.terminal-3758221115-r10 { fill: #001541 }
+.terminal-3758221115-r11 { fill: #b86b00 }
+.terminal-3758221115-r12 { fill: #454a50 }
+.terminal-3758221115-r13 { fill: #e2e3e3;font-weight: bold }
+.terminal-3758221115-r14 { fill: #000000 }
+.terminal-3758221115-r15 { fill: #14191f }
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
- CalculatorApp
+ CalculatorApp
-
+
-
-
-
- ┏━┓
- ┃ ┃
- ┗━┛
-
-
-▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
- AC +/- % ÷
-▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
-
-▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
- 7 8 9 ×
-▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
-
-▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
- 4 5 6 -
-▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
-
-▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
- 1 2 3 +
-▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▅▅
-
-▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+
+
+
+ ╭─╮
+ │ │
+ ╰─╯
+
+
+▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+ AC +/- % ÷
+▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+
+▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+ 7 8 9 ×
+▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+
+▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+ 4 5 6 -
+▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+
+▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+ 1 2 3 +
+▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▅▅
+
+▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_merlin.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_merlin.svg
index 424a18628e..2199d7a4b2 100644
--- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_merlin.svg
+++ b/tests/snapshot_tests/__snapshots__/test_snapshots/test_example_merlin.svg
@@ -19,141 +19,141 @@
font-weight: 700;
}
- .terminal-4281637637-matrix {
+ .terminal-2134437-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
- .terminal-4281637637-title {
+ .terminal-2134437-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
- .terminal-4281637637-r1 { fill: #e1e1e1 }
-.terminal-4281637637-r2 { fill: #1e1e1e }
-.terminal-4281637637-r3 { fill: #c5c8c6 }
-.terminal-4281637637-r4 { fill: #fea62b;font-weight: bold }
-.terminal-4281637637-r5 { fill: #004578 }
-.terminal-4281637637-r6 { fill: #e1e1e1;font-weight: bold }
-.terminal-4281637637-r7 { fill: #0178d4 }
-.terminal-4281637637-r8 { fill: #e2e2e2 }
-.terminal-4281637637-r9 { fill: #262626 }
-.terminal-4281637637-r10 { fill: #737373;font-weight: bold }
-.terminal-4281637637-r11 { fill: #14191f }
+ .terminal-2134437-r1 { fill: #e1e1e1 }
+.terminal-2134437-r2 { fill: #1e1e1e }
+.terminal-2134437-r3 { fill: #c5c8c6 }
+.terminal-2134437-r4 { fill: #fea62b }
+.terminal-2134437-r5 { fill: #004578 }
+.terminal-2134437-r6 { fill: #e1e1e1;font-weight: bold }
+.terminal-2134437-r7 { fill: #0178d4 }
+.terminal-2134437-r8 { fill: #e2e2e2 }
+.terminal-2134437-r9 { fill: #262626 }
+.terminal-2134437-r10 { fill: #737373;font-weight: bold }
+.terminal-2134437-r11 { fill: #14191f }
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
- MerlinApp
+ MerlinApp
-
+
-
-
-
-┏━┓ ┏━┓┏━┓ ┏━┓┏━┓
-┃ ┃ : ┃ ┃┃ ┃ : ┃ ┃┃ ┃
-┗━┛ ┗━┛┗━┛ ┗━┛┗━┛
-
-
-█▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█
-██
-█ 7 8 9 █
-█▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎█
-█▊▎▊▎▊▎█
-█▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎█
-██
-█ 4 5 6 █
-█▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎█
-█▊▎▊▎▊▎█
-█▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎█
-██
-█ 1 2 3 █
-█▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎█
-█▊▎▊▎▊▎█
-█▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎█
-██▇▇
+
+
+
+╭─╮ ╭─╮╭─╮ ╭─╮╭─╮
+│ │ : │ ││ │ : │ ││ │
+╰─╯ ╰─╯╰─╯ ╰─╯╰─╯
+
+
+█▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█
+██
+█ 7 8 9 █
+█▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎█
+█▊▎▊▎▊▎█
+█▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎█
+██
+█ 4 5 6 █
+█▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎█
+█▊▎▊▎▊▎█
+█▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎█
+██
+█ 1 2 3 █
+█▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎▊▔▔▔▔▔▔▔▔▎█
+█▊▎▊▎▊▎█
+█▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎▊▁▁▁▁▁▁▁▁▎█
+██▇▇
diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots/test_recompose.svg b/tests/snapshot_tests/__snapshots__/test_snapshots/test_recompose.svg
index 3feef6016d..6b3f7a1094 100644
--- a/tests/snapshot_tests/__snapshots__/test_snapshots/test_recompose.svg
+++ b/tests/snapshot_tests/__snapshots__/test_snapshots/test_recompose.svg
@@ -19,135 +19,134 @@
font-weight: 700;
}
- .terminal-1943930343-matrix {
+ .terminal-3827288185-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
- .terminal-1943930343-title {
+ .terminal-3827288185-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
- .terminal-1943930343-r1 { fill: #ff0000 }
-.terminal-1943930343-r2 { fill: #c5c8c6 }
-.terminal-1943930343-r3 { fill: #e1e1e1;font-weight: bold }
-.terminal-1943930343-r4 { fill: #e1e1e1 }
-.terminal-1943930343-r5 { fill: #fea62b }
-.terminal-1943930343-r6 { fill: #323232 }
+ .terminal-3827288185-r1 { fill: #ff0000 }
+.terminal-3827288185-r2 { fill: #c5c8c6 }
+.terminal-3827288185-r3 { fill: #e1e1e1 }
+.terminal-3827288185-r4 { fill: #fea62b }
+.terminal-3827288185-r5 { fill: #323232 }
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
- RecomposeApp
+ RecomposeApp
-
+
-
- ┌─────────┐┌─────────┐┌──────────┐┌─────────┐┌──────────┐┌─────────┐┌──────────┐
-│ ┓ ┏━┓ ││ ┓ ┓ ││ ┓ ╺━┓ ││ ┓ ╺━┓ ││ ┓ ╻ ╻ ││ ┓ ┏━╸ ││ ┓ ┏━╸ │
-│ ┃ ┃ ┃ ││ ┃ ┃ ││ ┃ ┏━┛ ││ ┃ ━┫ ││ ┃ ┗━┫ ││ ┃ ┗━┓ ││ ┃ ┣━┓ │
-│╺┻╸┗━┛ ││╺┻╸╺┻╸ ││╺┻╸┗━╸ ││╺┻╸╺━┛ ││╺┻╸ ╹ ││╺┻╸╺━┛ ││╺┻╸┗━┛ │
-└─────────┘└─────────┘└──────────┘└─────────┘└──────────┘└─────────┘└──────────┘
-
-
-
-
-
-
-
-━━━━━━━━━━━━━━━━╺━━━━━━━━━━━━━━━50%
-
-
-
-
-
-
-
-
-
-
+
+ ┌─────────┐┌─────────┐┌──────────┐┌─────────┐┌──────────┐┌─────────┐┌──────────┐
+│╶╮ ╭─╮ ││╶╮ ╶╮ ││╶╮ ╶─╮ ││╶╮ ╶─╮ ││╶╮ ╷ ╷ ││╶╮ ╭─╴ ││╶╮ ╭─╴ │
+│ │ │ │ ││ │ │ ││ │ ┌─┘ ││ │ ─┤ ││ │ ╰─┤ ││ │ ╰─╮ ││ │ ├─╮ │
+│╶┴╴╰─╯ ││╶┴╴╶┴╴ ││╶┴╴╰─╴ ││╶┴╴╶─╯ ││╶┴╴ ╵ ││╶┴╴╶─╯ ││╶┴╴╰─╯ │
+└─────────┘└─────────┘└──────────┘└─────────┘└──────────┘└─────────┘└──────────┘
+
+
+
+
+
+
+
+━━━━━━━━━━━━━━━━╺━━━━━━━━━━━━━━━50%
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/snapshot_tests/snapshot_apps/digits.py b/tests/snapshot_tests/snapshot_apps/digits.py
index f4c1be6e01..93d7c5df32 100644
--- a/tests/snapshot_tests/snapshot_apps/digits.py
+++ b/tests/snapshot_tests/snapshot_apps/digits.py
@@ -4,21 +4,25 @@
class DigitApp(App):
CSS = """
- #digits1 {
+ .left {
text-align: left;
}
- #digits2 {
+ .center {
text-align:center;
}
- #digits3 {
+ .right {
text-align:right;
}
+ .bold {
+ text-style: bold;
+ }
"""
def compose(self) -> ComposeResult:
- yield Digits("3.1427", id="digits1")
- yield Digits(" 0123456789+-.,", id="digits2")
- yield Digits("3x10^4", id="digits3")
+ yield Digits("3.1427", classes="left")
+ yield Digits(" 0123456789+-.,ABCDEF", classes="center")
+ yield Digits(" 0123456789+-.,ABCDEF", classes="center bold")
+ yield Digits("3x10^4", classes="right")
if __name__ == "__main__":