color tweaks

examples/basic.css

@@ -25,27 +25,27 @@ App > Screen {
   height: 1;
   background: $secondary-darken2;
   color: $on-secondary-darken2;
-  border-right: vkey $secondary-darken2;
+  border-right: outer $secondary-darken3;
 }
 
 #sidebar .user {
   height: 8;
   background: $secondary-darken1;
   color: $on-secondary-darken1;
-  border-right: vkey $secondary-darken2;
+  border-right: outer $secondary-darken3;
 }
 
 #sidebar .content {
   background: $secondary;
   color: $on-secondary;
-  border-right: vkey $secondary-darken2;
+  border-right: outer $secondary-darken3;
 }
 
 #header {
-  color: $on-primary-darken1;
-  background: $primary-darken1;
+  color: $on-primary;
+  background: $primary;
   height: 3;
-  border: hkey $primary-darken2;
+  border-right: outer $secondary-darken3;
 }
 
 #content {

src/textual/app.py

@@ -113,12 +113,12 @@ class App(DOMNode):
         self._refresh_required = False
 
         self.design = ColorSystem(
-            primary="#1565c0",
-            secondary="#00695c",
+            primary="#3F51B5",
+            secondary="#3F51B5",
             warning="#ffa000",
             error="#C62828",
             success="#558B2F",
-            accent1="#ff6f00",
+            accent1="#FFC107",
             accent3="#512DA8",
         )
 

src/textual/design.py

@@ -9,6 +9,8 @@ from rich.text import Text
 
 from .color import Color, BLACK, WHITE
 
+NUMBER_OF_SHADES = 3
+
 
 class ColorProperty:
     def __set_name__(self, owner: ColorSystem, name: str) -> None:
@@ -94,11 +96,13 @@ class ColorSystem:
     def shades(self) -> Iterable[str]:
         """The names of the colors and derived shades."""
         for color in self.COLOR_NAMES:
-            yield f"{color}-darken2"
-            yield f"{color}-darken1"
-            yield color
-            yield f"{color}-lighten1"
-            yield f"{color}-lighten2"
+            for shade_number in range(-NUMBER_OF_SHADES, NUMBER_OF_SHADES + 1):
+                if shade_number < 0:
+                    yield f"{color}-darken{abs(shade_number)}"
+                elif shade_number > 0:
+                    yield f"{color}-lighten{shade_number}"
+                else:
+                    yield color
 
     def generate(
         self,
@@ -142,7 +146,7 @@ class ColorSystem:
 
             """
             luminosity_step = spread / 2
-            for n in range(-2, +3):
+            for n in range(-NUMBER_OF_SHADES, +NUMBER_OF_SHADES + 1):
                 if n < 0:
                     label = "-darken"
                 elif n > 0:
@@ -176,7 +180,7 @@ class ColorSystem:
                     dark_background = background.blend(color, 8 / 100)
                     shade_color = dark_background.blend(
                         WHITE, spread + luminosity_delta
-                    )
+                    ).clamped
                     colors[f"{name}{shade_name}"] = shade_color.hex
                 else:
                     shade_color = color.lighten(luminosity_delta)