From 28be8bdd339f94955d6d4c1121b36a91ac8406c2 Mon Sep 17 00:00:00 2001
From: Will McGugan <willmcgugan@gmail.com>
Date: Thu, 7 Apr 2022 15:57:40 +0100
Subject: [PATCH] added hypen between numbers in css variables

---
 sandbox/basic.css     | 27 +++++++++++++--------------
 src/textual/design.py | 12 ++++++------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/sandbox/basic.css b/sandbox/basic.css
index b70a3b47a..1b94a9dab 100644
--- a/sandbox/basic.css
+++ b/sandbox/basic.css
@@ -28,27 +28,27 @@ App > Screen {
 
 #sidebar .title {
   height: 1;
-  background: $primary-darken2;
-  color: $on-primary-darken2;
-  border-right: outer $primary-darken3;
+  background: $primary-darken-2;
+  color: $on-primary-darken-2;
+  border-right: outer $primary-darken-3;
 }
 
 #sidebar .user {
   height: 8;
-  background: $primary-darken1;
-  color: $on-primary-darken1;
-  border-right: outer $primary-darken3;
+  background: $primary-darken-1;
+  color: $on-primary-darken-1;
+  border-right: outer $primary-darken-3;
 }
 
 #sidebar .content {
   background: $primary;
   color: $on-primary;
-  border-right: outer $primary-darken3;
+  border-right: outer $primary-darken-3;
 }
 
 #header {
-  color: $on-primary-darken1;
-  background: $primary-darken1;
+  color: $on-primary-darken-1;
+  background: $primary-darken-1;
   height: 3;
 
 }
@@ -77,7 +77,7 @@ TweetHeader {
 
 TweetBody {  
   background: $background
-  color: $on-background-fade1
+  color: $on-background-fade-1
   height:6;
 }
 
@@ -95,14 +95,13 @@ TweetBody {
 }
 
 .button:hover {
-  background: $accent1-darken1;
-  color: $on-accent1-darken1;
+  background: $accent1-darken-1;
+  color: $on-accent1-darken-1;
   width:20;
   height: 3
   border: tall $on-background;
  
   margin: 0 1 1 1;
- 
 
  
 }
@@ -111,5 +110,5 @@ TweetBody {
   color: $on-accent2;
   background: $accent2;
   height: 1;
-  border-top: hkey $accent2-darken2;
+  border-top: hkey $accent2-darken-2;
 }
diff --git a/src/textual/design.py b/src/textual/design.py
index 27b9c43c2..eb77e8ae7 100644
--- a/src/textual/design.py
+++ b/src/textual/design.py
@@ -102,9 +102,9 @@ class ColorSystem:
         for color in self.COLOR_NAMES:
             for shade_number in range(-NUMBER_OF_SHADES, NUMBER_OF_SHADES + 1):
                 if shade_number < 0:
-                    yield f"{color}-darken{abs(shade_number)}"
+                    yield f"{color}-darken-{abs(shade_number)}"
                 elif shade_number > 0:
-                    yield f"{color}-lighten{shade_number}"
+                    yield f"{color}-lighten-{shade_number}"
                 else:
                     yield color
 
@@ -160,7 +160,7 @@ class ColorSystem:
                     label = "-lighten"
                 else:
                     label = ""
-                yield (f"{label}{abs(n) if n else ''}"), n * luminosity_step
+                yield (f"{label}{'-' + str(abs(n)) if n else ''}"), n * luminosity_step
 
         # Color names and color
         COLORS = [
@@ -195,7 +195,7 @@ class ColorSystem:
                     text_color = shade_color.get_contrast_text(text_alpha)
                     if fade > 0:
                         text_color = text_color.blend(shade_color, fade * 0.1 + 0.15)
-                        on_name = f"on-{name}{shade_name}-fade{fade}"
+                        on_name = f"on-{name}{shade_name}-fade-{fade}"
                     else:
                         on_name = f"on-{name}{shade_name}"
                     colors[on_name] = text_color.hex
@@ -212,7 +212,7 @@ class ColorSystem:
                 text = Text(f"{background} ", style=f"{foreground} on {background}")
                 for fade in range(3):
                     foreground = colors[
-                        f"on-{name}-fade{fade}" if fade else f"on-{name}"
+                        f"on-{name}-fade-{fade}" if fade else f"on-{name}"
                     ]
                     text.append(f"{name} ", style=f"{foreground} on {background}")
 
@@ -236,4 +236,4 @@ if __name__ == "__main__":
 
     from rich import print
 
-    print(color_system)
+    print(color_system.generate(dark=True))