jepler/textual
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Tweaks

Browse source
This commit is contained in:
Darren Burns 2024-10-16 17:09:08 +01:00
parent c4b57ba097
commit 55d84c0985
21 changed files with 127 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/textual/color.py
View file

@ -558,6 +558,33 @@ class Color(NamedTuple):
"""
return self.darken(-amount, alpha)
@lru_cache(maxsize=1024)
def tint(self, color: Color) -> Color:
"""Apply a tint to a color.
Similar to blend, but preserves the alpha of the original.
Args:
color: A color with alpha component.
Returns:
New color
"""
if color.ansi is not None:
return color
r2, g2, b2, a2, _ = color
if a2 <= 0:
return self
if a2 >= 1:
return color
r1, g1, b1, a1, _ = self
return Color(
int(r1 * a1 + (r2 - r1) * a2),
int(g1 * a1 + (g2 - g1) * a2),
int(b1 * a1 + (b2 - b1) * a2),
max(1.0, a1 + a2),
)
@lru_cache(maxsize=1024)
def get_contrast_text(self, alpha: float = 0.95) -> Color:
"""Get a light or dark color that best contrasts this color, for use with text.

14
src/textual/design.py
View file

@ -13,9 +13,9 @@ from textual.color import WHITE, Color
NUMBER_OF_SHADES = 3
# Where no content exists
DEFAULT_DARK_BACKGROUND = "#1e1e1e"
DEFAULT_DARK_BACKGROUND = "#121212"
# What text usually goes on top off
DEFAULT_DARK_SURFACE = "#272727"
DEFAULT_DARK_SURFACE = "#1e1e1e"
# TODO - update this
# # Where no content exists
# DEFAULT_DARK_BACKGROUND = "#121212"
@ -186,6 +186,8 @@ class ColorSystem:
shade_color = color.lighten(luminosity_delta)
colors[f"{name}{shade_name}"] = shade_color.hex
print(f"{name}{shade_name}: {colors[f'{name}{shade_name}']}")
if foreground.ansi is None:
colors["text"] = "auto 87%"
colors["text-muted"] = "auto 60%"
@ -196,16 +198,16 @@ class ColorSystem:
colors["text-disabled"] = "ansi_default"
# The cursor color for widgets such as OptionList, DataTable, etc.
colors["highlight-cursor"] = accent.hex
colors["highlight-cursor"] = secondary.hex
# The cursor should dim when the widget is blurred.
colors["highlight-cursor-blurred"] = accent.with_alpha(0.3).hex
colors["highlight-cursor-blurred"] = secondary.with_alpha(0.3).hex
# The border color for focused widgets which have a border.
colors["border"] = accent.hex
colors["border"] = secondary.hex
# The blurred equivalent of the above.
# By default when the widget is blurred, the border matches the surface
# of the widget (and so isn't visible until the widget is focused)
colors["border-blurred"] = surface.hex
colors["border-blurred"] = surface.darken(0.025).hex
# Widgets such as OptionList, DataTable, etc. have a "hover cursor"
# which gives a subtle highlight behind the option under the mouse

266
src/textual/theme.py
View file

@ -61,6 +61,41 @@ class Theme:
BUILTIN_THEMES: dict[str, Theme] = {
"textual-dark": Theme(
name="textual-dark",
primary="#004578",
secondary="#0178D4",
accent="#ffa62b",
warning="#ffa62b",
error="#ba3c5b",
success="#4EBF71",
dark=True,
),
"textual-light": Theme(
name="textual-light",
primary="#004578",
secondary="#0178D4",
accent="#ffa62b",
warning="#ffa62b",
error="#ba3c5b",
success="#4EBF71",
dark=False,
),
"textual-ansi": Theme(
name="textual-ansi",
primary="ansi_blue",
secondary="ansi_cyan",
warning="ansi_yellow",
error="ansi_red",
success="ansi_green",
accent="ansi_bright_blue",
foreground="ansi_default",
background="ansi_default",
surface="ansi_default",
panel="ansi_default",
boost="ansi_default",
dark=False,
),
"dracula": Theme(
name="dracula",
primary="#BD93F9", # Purple
@ -74,19 +109,6 @@ BUILTIN_THEMES: dict[str, Theme] = {
panel="#44475A", # Current Line
dark=True,
),
"nord": Theme(
name="nord",
primary="#88C0D0", # Nord8
secondary="#81A1C1", # Nord9
warning="#EBCB8B", # Nord13
error="#BF616A", # Nord11
success="#A3BE8C", # Nord14
accent="#B48EAD", # Nord15
background="#2E3440", # Nord0
surface="#3B4252", # Nord1
panel="#434C5E", # Nord2
dark=True,
),
"solarized-dark": Theme(
name="solarized-dark",
primary="#268bd2", # Blue
@ -100,19 +122,6 @@ BUILTIN_THEMES: dict[str, Theme] = {
panel="#586e75", # Base01
dark=True,
),
"one-dark": Theme(
name="one-dark",
primary="#61afef", # Blue
secondary="#56b6c2", # Cyan
warning="#e5c07b", # Yellow
error="#e06c75", # Red
success="#98c379", # Green
accent="#c678dd", # Purple
background="#282c34", # Black
surface="#3e4451", # Gray
panel="#4b5263", # Light Gray
dark=True,
),
"github-dark": Theme(
name="github-dark",
primary="#58a6ff", # Blue
@ -126,69 +135,18 @@ BUILTIN_THEMES: dict[str, Theme] = {
panel="#21262d", # Gray
dark=True,
),
"material-palenight": Theme(
name="material-palenight",
primary="#82aaff", # Blue
secondary="#89ddff", # Cyan
warning="#ffcb6b", # Yellow
error="#ff5370", # Red
success="#c3e88d", # Green
accent="#c792ea", # Purple
background="#292d3e", # Background
surface="#34324a", # Surface
panel="#3a3f58", # Panel
dark=True,
),
"ayu-dark": Theme(
name="ayu-dark",
primary="#39bae6", # Blue
secondary="#95e6cb", # Cyan
warning="#ffb454", # Yellow
error="#ff3333", # Red
success="#c2d94c", # Green
accent="#f29668", # Orange
background="#0a0e14", # Background
surface="#1c1f26", # Surface
panel="#272d38", # Panel
dark=True,
),
"synthwave": Theme(
name="synthwave",
primary="#f97e72", # Coral
secondary="#36f9f6", # Cyan
warning="#fede5d", # Yellow
error="#fe4450", # Red
success="#72f1b8", # Green
accent="#ff7edb", # Pink
background="#262335", # Background
surface="#34294f", # Surface
panel="#483c6c", # Panel
dark=True,
),
"cyberpunk": Theme(
name="cyberpunk",
primary="#00ffff", # Cyan
secondary="#ff00ff", # Magenta
warning="#ffff00", # Yellow
error="#ff0000", # Red
success="#00ff00", # Green
accent="#ff00aa", # Hot Pink
background="#000000", # Black
surface="#1a1a1a", # Dark Gray
panel="#333333", # Gray
dark=True,
),
"gruvbox": Theme(
name="gruvbox",
primary="#458588", # Blue
secondary="#689D6A", # Aqua
warning="#D79921", # Yellow
error="#CC241D", # Red
success="#98971A", # Green
accent="#B16286", # Purple
background="#282828", # Dark0
surface="#3C3836", # Dark1
panel="#504945", # Dark2
primary="#A89A85",
secondary="#85A598",
warning="#fabd2f",
error="#fb4934",
success="#b8bb26",
accent="#fabd2f",
foreground="#EBDAB4",
background="#282828",
surface="#3D3836",
panel="#504946",
dark=True,
),
"tokyo-night": Theme(
@ -207,62 +165,27 @@ BUILTIN_THEMES: dict[str, Theme] = {
"catppuccin": Theme(
name="catppuccin",
primary="#89DCEB", # Sky
secondary="#F5C2E7", # Pink
warning="#FAE3B0", # Yellow
error="#F28FAD", # Red
success="#ABE9B3", # Green
accent="#DDB6F2", # Mauve
background="#1E1E2E", # Base
surface="#302D41", # Surface0
panel="#575268", # Surface1
secondary="#F5C2E7",
warning="#FAE3B0",
error="#F28FAD",
success="#ABE9B3",
accent="#DDB6F2",
background="#1E1E2E",
surface="#302D41",
panel="#575268",
dark=True,
),
"textual-dark": Theme(
name="textual-dark",
primary="#004578",
secondary="#ffa62b",
warning="#ffa62b",
error="#ba3c5b",
success="#4EBF71",
accent="#0178D4",
dark=True,
),
"textual-light": Theme(
name="textual-light",
primary="#004578",
secondary="#ffa62b",
warning="#ffa62b",
error="#ba3c5b",
success="#4EBF71",
accent="#0178D4",
dark=False,
),
"textual-ansi": Theme(
name="textual-ansi",
primary="ansi_blue",
secondary="ansi_cyan",
warning="ansi_yellow",
error="ansi_red",
success="ansi_green",
accent="ansi_bright_blue",
foreground="ansi_default",
background="ansi_default",
surface="ansi_default",
panel="ansi_default",
boost="ansi_default",
dark=False,
),
"monokai": Theme(
name="monokai",
primary="#F92672", # Pink
secondary="#66D9EF", # Light Blue
warning="#FD971F", # Orange
error="#F92672", # Pink (same as primary for consistency)
success="#A6E22E", # Green
accent="#AE81FF", # Purple
background="#272822", # Dark gray-green
surface="#3E3D32", # Slightly lighter gray-green
panel="#3E3D32", # Same as surface for consistency
primary="#F92672",
secondary="#AE81FF",
accent="#66D9EF",
warning="#FD971F",
error="#F92672",
success="#A6E22E",
background="#272822",
surface="#3E3D32",
panel="#3E3D32",
dark=True,
),
"solarized-light": Theme(
@ -277,45 +200,6 @@ BUILTIN_THEMES: dict[str, Theme] = {
surface="#eee8d5",
panel="#eee8d5",
),
"nautilus": Theme(
name="nautilus",
primary="#0077BE", # Ocean Blue
secondary="#20B2AA", # Light Sea Green
warning="#FFD700", # Gold (like sunlight on water)
error="#FF6347", # Tomato (like a warning buoy)
success="#32CD32", # Lime Green (like seaweed)
accent="#FF8C00", # Dark Orange (like a sunset over water)
dark=True,
background="#001F3F", # Dark Blue (deep ocean)
surface="#003366", # Navy Blue (shallower water)
panel="#005A8C", # Steel Blue (water surface)
),
"galaxy": Theme(
name="galaxy",
primary="#8A2BE2", # Improved Deep Magenta (Blueviolet)
secondary="#a684e8",
warning="#FFD700", # Gold, more visible than orange
error="#FF4500", # OrangeRed, vibrant but less harsh than pure red
success="#00FA9A", # Medium Spring Green, kept for vibrancy
accent="#FF69B4", # Hot Pink, for a pop of color
dark=True,
background="#0F0F1F", # Very Dark Blue, almost black
surface="#1E1E3F", # Dark Blue-Purple
panel="#2D2B55", # Slightly Lighter Blue-Purple
),
"nebula": Theme(
name="nebula",
primary="#4169E1", # Royal Blue, more vibrant than Midnight Blue
secondary="#9400D3", # Dark Violet, more vibrant than Indigo Dye
warning="#FFD700", # Kept Gold for warnings
error="#FF1493", # Deep Pink, more nebula-like than Crimson
success="#00FF7F", # Spring Green, slightly more vibrant
accent="#FF00FF", # Magenta, for a true neon accent
dark=True,
background="#0A0A23", # Dark Navy, closer to a night sky
surface="#1C1C3C", # Dark Blue-Purple
panel="#2E2E5E", # Slightly Lighter Blue-Purple
),
"alpine": Theme(
name="alpine",
primary="#4A90E2", # Clear Sky Blue
@ -342,32 +226,6 @@ BUILTIN_THEMES: dict[str, Theme] = {
panel="#2D3E46", # Storm Gray
background="#1F262A", # Charcoal
),
"twilight": Theme(
name="twilight",
primary="#367588",
secondary="#5F9EA0",
warning="#FFD700",
error="#FF6347",
success="#00FA9A",
accent="#FF7F50",
dark=True,
background="#191970",
surface="#3B3B6D",
panel="#4C516D",
),
"hacker": Theme(
name="hacker",
primary="#00FF00", # Bright Green (Lime)
secondary="#32CD32", # Lime Green
warning="#ADFF2F", # Green Yellow
error="#FF4500", # Orange Red (for contrast)
success="#00FA9A", # Medium Spring Green
accent="#39FF14", # Neon Green
dark=True,
background="#0D0D0D", # Almost Black
surface="#1A1A1A", # Very Dark Gray
panel="#2A2A2A", # Dark Gray
),
}

4
src/textual/widget.py
View file

@ -280,7 +280,7 @@ class Widget(DOMNode):
scrollbar-background-hover: $panel-darken-2;
scrollbar-background-active: $panel-darken-3;
scrollbar-color: $primary-lighten-1;
scrollbar-color-active: $secondary;
scrollbar-color-active: $accent;
scrollbar-color-hover: $primary-lighten-2;
scrollbar-corner-color: $panel-darken-1;
scrollbar-size-vertical: 2;
@ -288,7 +288,7 @@ class Widget(DOMNode):
link-background: initial;
link-color: $text;
link-style: underline;
link-background-hover: $accent;
link-background-hover: $secondary;
link-color-hover: $text;
link-style-hover: bold not underline;
background: transparent;

2
src/textual/widgets/_collapsible.py
View file

@ -29,7 +29,7 @@ class CollapsibleTitle(Static, can_focus=True):
}
CollapsibleTitle:focus {
background: $accent;
background: $secondary;
color: $text;
}
"""

6
src/textual/widgets/_data_table.py
View file

@ -316,7 +316,7 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
DEFAULT_CSS = """
DataTable {
background: $surface;
color: $text;
color: $foreground;
height: auto;
max-height: 100%;
@ -365,12 +365,12 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
}
& > .datatable--header-cursor {
background: $secondary-darken-1;
background: $accent-darken-1;
color: $text;
}
& > .datatable--header-hover {
background: $secondary 30%;
background: $accent 30%;
}
& > .datatable--hover {

2
src/textual/widgets/_footer.py
View file

@ -30,7 +30,7 @@ class FooterKey(Widget):
background: $panel;
color: $text-muted;
.footer-key--key {
color: $secondary;
color: $accent;
background: $panel;
text-style: bold;
padding: 0 1;

4
src/textual/widgets/_input.py
View file

@ -147,7 +147,7 @@ class Input(Widget, can_focus=True):
DEFAULT_CSS = """
Input {
background: $surface;
color: $text;
color: $foreground;
padding: 0 2;
border: tall $border-blurred;
width: 100%;
@ -159,7 +159,7 @@ class Input(Widget, can_focus=True):
}
&>.input--cursor {
background: $surface;
color: $text;
color: $foreground;
text-style: reverse;
}
&>.input--placeholder, &>.input--suggestion {

2
src/textual/widgets/_key_panel.py
View file

@ -126,7 +126,7 @@ class KeyPanel(VerticalScroll, can_focus=False):
align: center top;
&> BindingsTable > .bindings-table--key {
color: $secondary;
color: $accent;
text-style: bold;
padding: 0 1;
}

2
src/textual/widgets/_loading_indicator.py
View file

@ -22,7 +22,7 @@ class LoadingIndicator(Widget):
height: 100%;
min-height: 1;
content-align: center middle;
color: $accent;
color: $secondary;
text-style: not reverse;
}
LoadingIndicator.-textual-loading-indicator {

4
src/textual/widgets/_option_list.py
View file

@ -154,7 +154,7 @@ class OptionList(ScrollView, can_focus=True):
}
& > .option-list--option-hover-highlighted {
background: $accent;
background: $secondary;
color: $text;
}
& > .option-list--separator {
@ -171,7 +171,7 @@ class OptionList(ScrollView, can_focus=True):
background: $highlight-hover;
}
& > .option-list--option-hover-highlighted {
background: $accent 60%;
background: $secondary 60%;
color: $text;
}
}

4
src/textual/widgets/_sparkline.py
View file

@ -40,10 +40,10 @@ class Sparkline(Widget):
height: 1;
}
Sparkline > .sparkline--max-color {
color: $accent;
color: $secondary;
}
Sparkline > .sparkline--min-color {
color: $accent 30%;
color: $secondary 30%;
}
"""

9
src/textual/widgets/_text_area.py
View file

@ -93,13 +93,14 @@ TextArea {
height: 1fr;
border: tall $border-blurred;
padding: 0 1;
color: $foreground;
background: $surface;
& .text-area--gutter {
color: $text 40%;
color: $foreground 40%;
}
& .text-area--cursor-gutter {
color: $text 60%;
color: $foreground 60%;
background: $boost;
text-style: bold;
}
@ -109,7 +110,7 @@ TextArea {
}
& .text-area--selection {
background: $accent-lighten-1 40%;
background: $secondary-lighten-1 40%;
}
& .text-area--matching-bracket {
@ -117,7 +118,7 @@ TextArea {
}
&:focus {
border: tall $accent;
border: tall $secondary;
}
&:dark {

2
src/textual/widgets/_toast.py
View file

@ -51,7 +51,7 @@ class Toast(Static, inherit_css=False):
link-background: initial;
link-color: $text;
link-style: underline;
link-background-hover: $accent;
link-background-hover: $secondary;
link-color-hover: $text;
link-style-hover: bold not underline;
}

2
tests/footer/test_footer.py
View file

@ -20,7 +20,7 @@ async def test_footer_bindings() -> None:
content-align: center middle;
&:focus {
border: tall $accent;
border: tall $secondary;
}
}
"""

2
tests/snapshot_tests/snapshot_apps/alignment_containers.py
View file

@ -13,7 +13,7 @@ class AlignContainersApp(App[None]):
tint: $primary 10%;
}
Middle {
tint: $secondary 10%;
tint: $accent 10%;
}
"""

2
tests/snapshot_tests/snapshot_apps/data_table_style_order.py
View file

@ -35,7 +35,7 @@ class DataTableCursorStyles(App):
CSS = """
DataTable {margin-bottom: 1;}
DataTable > .datatable--cursor {
color: $secondary;
color: $accent;
background: $success;
text-style: bold italic;
}

6
tests/snapshot_tests/snapshot_apps/footer_classic_styling.py
View file

@ -13,14 +13,14 @@ class ClassicFooterStylingApp(App):
CSS = """
Footer {
background: $accent;
background: $secondary;
FooterKey {
background: $accent;
background: $secondary;
color: $text;
.footer-key--key {
background: $accent-darken-2;
background: $secondary-darken-2;
color: $text;
}

2
tests/snapshot_tests/snapshot_apps/grid_gutter.py
View file

@ -15,7 +15,7 @@ class FooApp(App):
#root {
width: 60;
height: 20;
border: solid $accent;
border: solid $secondary;
}
.info-container {
grid-rows: auto;

2
tests/snapshot_tests/snapshot_apps/loading.py
View file

@ -15,7 +15,7 @@ class SimpleLoadingIndicator(Widget):
height: 100%;
min-height: 1;
content-align: center middle;
color: $accent;
color: $secondary;
}
SimpleLoadingIndicator.-textual-loading-indicator {
layer: _loading;

2
tests/snapshot_tests/snapshot_apps/scroll_to_center.py
View file

@ -13,7 +13,7 @@ class MyApp(App[None]):
height: 21;
}
HorizontalScroll {
border: round $secondary;
border: round $accent;
height: auto;
}
Label {