From bd044512ffc659fd26dd76cc9a37345c124d70fb Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 18 Oct 2024 09:08:54 -0400 Subject: [PATCH 1/2] blue --- packages/site-kit/src/lib/styles/tokens.css | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index d2c6ded272..06bf3cc81b 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -115,16 +115,18 @@ &.dark { color-scheme: dark; - --sk-back-1: hsl(0 0 1); - --sk-back-2: hsl(0 0 15); - --sk-back-3: hsl(0 0 12); - --sk-back-4: hsl(0 0 22); - --sk-back-5: hsl(0 0 25); - --sk-back-6: hsl(0 0 32); + --sk-back-hue: 220; + + --sk-back-1: hsl(var(--sk-back-hue) 15 8); + --sk-back-2: hsl(var(--sk-back-hue) 15 15); + --sk-back-3: hsl(var(--sk-back-hue) 15 12); + --sk-back-4: hsl(var(--sk-back-hue) 15 22); + --sk-back-5: hsl(var(--sk-back-hue) 15 25); + --sk-back-6: hsl(var(--sk-back-hue) 15 32); --sk-back-translucent: hsl(0 0 100 / 0.1); --sk-theme-1-hsl: 12, 94%, 62%; --sk-text-1: hsl(0, 0%, 90%); - --sk-text-2: hsl(0, 0%, 80%); + --sk-text-2: hsl(0, 0%, 70%); --sk-text-3: hsl(0, 0%, 65%); --sk-text-4: hsl(0, 0%, 45%); --sk-text-translucent: hsla(0, 0%, 100%, 0.9); From 59405a4ef806431bcac5d147d4d98f1b74adef7d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 18 Oct 2024 09:21:24 -0400 Subject: [PATCH 2/2] tweak front colours as well --- packages/site-kit/src/lib/styles/tokens.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 06bf3cc81b..02d0a2f70d 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -125,10 +125,10 @@ --sk-back-6: hsl(var(--sk-back-hue) 15 32); --sk-back-translucent: hsl(0 0 100 / 0.1); --sk-theme-1-hsl: 12, 94%, 62%; - --sk-text-1: hsl(0, 0%, 90%); - --sk-text-2: hsl(0, 0%, 70%); - --sk-text-3: hsl(0, 0%, 65%); - --sk-text-4: hsl(0, 0%, 45%); + --sk-text-1: hsl(var(--sk-back-hue) 10 90%); + --sk-text-2: hsl(var(--sk-back-hue) 10 70%); + --sk-text-3: hsl(var(--sk-back-hue) 10 65%); + --sk-text-4: hsl(var(--sk-back-hue) 10 45%); --sk-text-translucent: hsla(0, 0%, 100%, 0.9); --sk-scrollbar: rgba(255, 255, 255, 0.3); --sk-shadow: drop-shadow(1px 2px 16px rgb(0 0 0 / 0.5));