use hsl old fashioned form (sveltejs#502)

* use hsl old fashioned form

* feedback

* feedback

Author: trueadm

packages/site-kit/src/lib/styles/tokens.css

@@ -72,21 +72,21 @@
 	--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));
+	--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%);
 
 	--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,39 +129,39 @@
 
 		--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: 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 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%);
 
 		--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);