Tomorrow's Stars: rescale greys in oklch

1 files changed, 16 insertions, 17 deletions

diff --git a/preview.html b/preview.html
index 8bdf75e..411f7f8 100644
--- a/preview.html
+++ b/preview.html
@@ -142,10 +142,10 @@ a:hover {
 
 <style>
 .tomorrows-stars {
-	--black:    #282a2e;
-	--dkgrey:   #373b41;
-	--ltgrey:   #969896;
-	--white:    #c5c8c6;
+	--black:    #282f35;
+	--dkgrey:   #44484d;
+	--ltgrey:   #a19e98;
+	--white:    #e6dec8;
 	--brred:      #cc6666;
 	--red:    #d54e53;
 	--brorange:   #e78c45;
@@ -164,17 +164,16 @@ a:hover {
 	color: 		var(--white);
 	background: var(--grey1);
 
-	--grey0: #000000;
-	--grey1: #1d1f21; /* bg */
-	--grey2: #282a2e; /* black */
-	--grey3: #373b41; /* dkgrey */
-	--grey4: #424242;
-	--grey5: #515151;
-	--grey6: #7e807c; /* pushed darker from the original #8e908c */
-	--grey7: #969896; /* ltgrey */
-	--grey8: #c5c8c6; /* fg / white */
-	--grey9: #d6d6d6;
-	--grey10: #eaeaea;
+	--grey0: oklch(10% .025 250);
+	--grey1: oklch(20% .02 250); /* bg */
+	--grey2: oklch(30% .015 250); /* black */
+	--grey3: oklch(40% .01 250); /* dkgrey */
+	--grey4: oklch(50% .005 250);
+	--grey5: oklch(60% 0 0);
+	--grey6: oklch(70% .01 90); /* ltgrey */
+	--grey7: oklch(80% .02 90);
+	--grey8: oklch(90% .03 90); /* fg / white */
+	--grey9: oklch(95% .04 90);
 }
 </style>
 
@@ -184,6 +183,6 @@ a:hover {
 <span style=color:var(--black)>&#x2588;&#x2588;</span><span style=color:var(--dkgrey)>&#x2588;&#x2588;</span><span style=color:var(--red)>&#x2588;&#x2588;</span><span style=color:var(--orange)>&#x2588;&#x2588;</span><span style=color:var(--yellow)>&#x2588;&#x2588;</span><span style=color:var(--green)>&#x2588;&#x2588;</span><span style=color:var(--cyan)>&#x2588;&#x2588;</span><span style=color:var(--blue)>&#x2588;&#x2588;</span><span style=color:var(--magenta)>&#x2588;&#x2588;</span><br>
 <span style=color:var(--white)>&#x2588;&#x2588;</span><span style=color:var(--ltgrey)>&#x2588;&#x2588;</span><span style=color:var(--brred)>&#x2588;&#x2588;</span><span style=color:var(--brorange)>&#x2588;&#x2588;</span><span style=color:var(--bryellow)>&#x2588;&#x2588;</span><span style=color:var(--brgreen)>&#x2588;&#x2588;</span><span style=color:var(--brcyan)>&#x2588;&#x2588;</span><span style=color:var(--brblue)>&#x2588;&#x2588;</span><span style=color:var(--brmagenta)>&#x2588;&#x2588;</span><br>
 <!-- greyscale -->
-<span style=color:var(--grey0)>&#x2588;&#x2588;</span><span style=color:var(--grey1)>&#x2588;&#x2588;</span><span style=color:var(--grey2)>&#x2588;&#x2588;</span><span style=color:var(--grey3)>&#x2588;&#x2588;</span><span style=color:var(--grey4)>&#x2588;&#x2588;</span><span style=color:var(--grey5)>&#x2588;&#x2588;</span><span style=color:var(--grey6)>&#x2588;&#x2588;</span><span style=color:var(--grey7)>&#x2588;&#x2588;</span><span style=color:var(--grey8)>&#x2588;&#x2588;</span><span style=color:var(--grey9)>&#x2588;&#x2588;</span><span style=color:var(--grey10)>&#x2588;&#x2588;</span><br>
-Adapted from <a href=https://github.com/chriskempson/tomorrow-theme>Chris Kempson's Tomorrow themes</a>.
+<span style=color:var(--grey0)>&#x2588;&#x2588;</span><span style=color:var(--grey1)>&#x2588;&#x2588;</span><span style=color:var(--grey2)>&#x2588;&#x2588;</span><span style=color:var(--grey3)>&#x2588;&#x2588;</span><span style=color:var(--grey4)>&#x2588;&#x2588;</span><span style=color:var(--grey5)>&#x2588;&#x2588;</span><span style=color:var(--grey6)>&#x2588;&#x2588;</span><span style=color:var(--grey7)>&#x2588;&#x2588;</span><span style=color:var(--grey8)>&#x2588;&#x2588;</span><span style=color:var(--grey9)>&#x2588;&#x2588;</span><br>
+Adapted from <a href=https://github.com/chriskempson/tomorrow-theme>Chris Kempson's Tomorrow themes</a>, grey rescaled in the Oklch color space and yellow made a little less green-tinted.
 </div>