From 2071e2147fbfb671d2b7599b798bec9ebc861bf7 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 22 Oct 2024 13:56:44 +0100 Subject: [PATCH 1/3] use hsl old fashioned form --- packages/site-kit/src/lib/styles/tokens.css | 54 ++++++++++----------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 768634b364..6a2ff493ba 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -72,10 +72,10 @@ --sk-back-5: hsl(0, 0%, 92%); --sk-back-6: hsl(0, 0%, 86%); - --sk-text-1: hsl(0 0 5); - --sk-text-2: hsl(0 0 12); - --sk-text-3: hsl(0 0 27); - --sk-text-4: hsl(0 0 45); + --sk-text-1: hsl(0 0% 5%); + --sk-text-2: hsl(0 0% 12%); + --sk-text-3: hsl(0 0% 27%); + --sk-text-4: hsl(0 0% 45%); --sk-scrollbar: rgba(0, 0, 0, 0.3); --sk-shadow: drop-shadow(0px 0px 14px rgba(0 0 0 / 0.1)); @@ -84,9 +84,9 @@ --sk-code-base: var(--sk-text-2); --sk-code-comment: var(--sk-text-4); - --sk-code-keyword: hsl(204 100 38); + --sk-code-keyword: hsl(204 100% 38%); --sk-code-function: var(--sk-theme-1); - --sk-code-string: hsl(30 100 30); + --sk-code-string: hsl(30 100% 30%); --sk-code-number: hsl(120, 100%, 25%); --sk-code-template-string: hsl(2, 80%, 47%); --sk-code-tags: var(--sk-code-function); @@ -129,18 +129,18 @@ --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-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(var(--sk-back-hue) 10 90%); - --sk-text-2: hsl(var(--sk-back-hue) 10 80%); - --sk-text-3: hsl(var(--sk-back-hue) 10 65%); - --sk-text-4: hsl(var(--sk-back-hue) 10 45%); + --sk-text-1: hsl(var(--sk-back-hue) 10% 90%); + --sk-text-2: hsl(var(--sk-back-hue) 10% 80%); + --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)); @@ -149,19 +149,19 @@ --sk-text-warning-hsl: 32, 67%, 56%; - --sk-code-base: hsl(45 7 75); - --sk-code-comment: hsl(0 0 55); - --sk-code-keyword: hsl(204 88 65); - --sk-code-function: hsl(19 67 75); - --sk-code-string: hsl(41 37 68); - --sk-code-number: hsl(120 100 25); - --sk-code-template-string: hsl(2 80 47); + --sk-code-base: hsl(45 7% 75%); + --sk-code-comment: hsl(0 0% 55%); + --sk-code-keyword: hsl(204 88% 65%); + --sk-code-function: hsl(19 67% 75%); + --sk-code-string: hsl(41 37% 68%); + --sk-code-number: hsl(120 100% 25%); + --sk-code-template-string: hsl(2 80% 47%); --sk-code-tags: var(--sk-code-function); --sk-code-important: var(--sk-code-string); - --sk-code-diff-base: hsla(0 0 100 / 0.5); - --sk-code-diff-inserted: hsl(120 46 48); - --sk-code-diff-removed: hsl(2 64 70); + --sk-code-diff-base: hsla(0 0% 100% / 0.5); + --sk-code-diff-inserted: hsl(120 46% 48%); + --sk-code-diff-removed: hsl(2 64% 70%); /* overrides */ --shiki-color-background: var(--sk-back-3); From d384a560af46104bf1b4cca725858a1b540a07e7 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 22 Oct 2024 14:05:15 +0100 Subject: [PATCH 2/3] feedback --- 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 6a2ff493ba..44c0111c70 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -77,7 +77,7 @@ --sk-text-3: hsl(0 0% 27%); --sk-text-4: hsl(0 0% 45%); --sk-scrollbar: rgba(0, 0, 0, 0.3); - --sk-shadow: drop-shadow(0px 0px 14px rgba(0 0 0 / 0.1)); + --sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1)); /* same in light mode, different in dark mode */ --sk-theme-1-variant: hsl(15, 100%, 50%); @@ -135,7 +135,7 @@ --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-back-translucent: hsla(0, 0%, 100%, 0.1); --sk-theme-1-hsl: 12, 94%, 62%; --sk-text-1: hsl(var(--sk-back-hue) 10% 90%); --sk-text-2: hsl(var(--sk-back-hue) 10% 80%); @@ -143,7 +143,7 @@ --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)); + --sk-shadow: drop-shadow(1px 2px 16px rgba(0, 0, 0, 0.5)); --sk-theme-1-variant: hsl(15, 100%, 40%); @@ -159,7 +159,7 @@ --sk-code-tags: var(--sk-code-function); --sk-code-important: var(--sk-code-string); - --sk-code-diff-base: hsla(0 0% 100% / 0.5); + --sk-code-diff-base: hsla(0, 0%, 100%, 0.5); --sk-code-diff-inserted: hsl(120 46% 48%); --sk-code-diff-removed: hsl(2 64% 70%); From 828c299c2dd10218003182818566b8679c744339 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Tue, 22 Oct 2024 14:06:45 +0100 Subject: [PATCH 3/3] feedback --- packages/site-kit/src/lib/styles/tokens.css | 46 ++++++++++----------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 44c0111c70..b228c054f3 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -72,10 +72,10 @@ --sk-back-5: hsl(0, 0%, 92%); --sk-back-6: hsl(0, 0%, 86%); - --sk-text-1: hsl(0 0% 5%); - --sk-text-2: hsl(0 0% 12%); - --sk-text-3: hsl(0 0% 27%); - --sk-text-4: hsl(0 0% 45%); + --sk-text-1: hsl(0, 0%, 5%); + --sk-text-2: hsl(0, 0%, 12%); + --sk-text-3: hsl(0, 0%, 27%); + --sk-text-4: hsl(0, 0%, 45%); --sk-scrollbar: rgba(0, 0, 0, 0.3); --sk-shadow: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.1)); @@ -129,18 +129,18 @@ --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-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: hsla(0, 0%, 100%, 0.1); --sk-theme-1-hsl: 12, 94%, 62%; - --sk-text-1: hsl(var(--sk-back-hue) 10% 90%); - --sk-text-2: hsl(var(--sk-back-hue) 10% 80%); - --sk-text-3: hsl(var(--sk-back-hue) 10% 65%); - --sk-text-4: hsl(var(--sk-back-hue) 10% 45%); + --sk-text-1: hsl(var(--sk-back-hue), 10%, 90%); + --sk-text-2: hsl(var(--sk-back-hue), 10%, 80%); + --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 rgba(0, 0, 0, 0.5)); @@ -149,19 +149,19 @@ --sk-text-warning-hsl: 32, 67%, 56%; - --sk-code-base: hsl(45 7% 75%); - --sk-code-comment: hsl(0 0% 55%); - --sk-code-keyword: hsl(204 88% 65%); - --sk-code-function: hsl(19 67% 75%); - --sk-code-string: hsl(41 37% 68%); - --sk-code-number: hsl(120 100% 25%); - --sk-code-template-string: hsl(2 80% 47%); + --sk-code-base: hsl(45, 7%, 75%); + --sk-code-comment: hsl(0, 0%, 55%); + --sk-code-keyword: hsl(204, 88%, 65%); + --sk-code-function: hsl(19, 67%, 75%); + --sk-code-string: hsl(41, 37%, 68%); + --sk-code-number: hsl(120, 100%, 25%); + --sk-code-template-string: hsl(2, 80%, 47%); --sk-code-tags: var(--sk-code-function); --sk-code-important: var(--sk-code-string); --sk-code-diff-base: hsla(0, 0%, 100%, 0.5); - --sk-code-diff-inserted: hsl(120 46% 48%); - --sk-code-diff-removed: hsl(2 64% 70%); + --sk-code-diff-inserted: hsl(120, 46%, 48%); + --sk-code-diff-removed: hsl(2, 64%, 70%); /* overrides */ --shiki-color-background: var(--sk-back-3);