refactor global CSS a tiny bit (#339)

Author: Rich-Harris

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

@@ -132,7 +132,7 @@ blockquote {
 	max-width: var(--sk-page-content-width);
 }
 
-blockquote :where(p, ul) {
+blockquote :where(p, ul, ol) {
 	font-size: var(--sk-font-size-body-small);
 }
 
@@ -158,27 +158,6 @@ button[disabled] {
 	color: var(--sk-text-4);
 }
 
-.raised {
-	border-radius: var(--sk-border-radius);
-	border-style: solid;
-	border-color: var(--sk-raised-color);
-	border-width: var(--sk-raised-width);
-
-	&:hover {
-		border-color: var(--sk-raised-hover-color);
-	}
-
-	&:active {
-		border-color: var(--sk-raised-active-color);
-		border-width: var(--sk-raised-active-width);
-	}
-
-	&:disabled {
-		border-color: var(--sk-back-5);
-		border-width: 1px;
-	}
-}
-
 /*  links ------------------------------------- */
 a {
 	color: var(--sk-theme-1);

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

@@ -9,4 +9,5 @@
 @import './tokens.css';
 @import './base.css';
 @import './text.css';
-@import './code.css';
+@import './utils/buttons.css';
+@import './utils/twoslash.css';

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

@@ -35,30 +35,6 @@
 	min-height: 1.35em;
 }
 
-.api-section {
-	background: var(--sk-back-4);
-	padding: 1rem;
-	margin-bottom: 1rem;
-	max-width: var(--sk-page-content-width);
-	border-radius: var(--sk-border-radius);
-}
-
-.ts-block > pre {
-	--shiki-color-background: var(--sk-code-ts-bg);
-	margin: 0;
-	border-radius: 0;
-	box-shadow: none;
-	background: var(--sk-code-ts-bg);
-}
-
-.ts-block .ts-block-property p {
-	margin: 1rem 0;
-}
-
-.ts-block-property pre {
-	margin: 1rem 0;
-}
-
 .ts-block-property > pre {
 	margin: 0;
 	padding-left: 1rem;

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

@@ -62,7 +62,6 @@
 	--sk-theme-1-variant: hsl(15, 100%, 50%);
 	--sk-theme-2-variant: hsl(240, 8%, 44%);
 
-	--sk-code-ts-bg: var(--sk-back-1);
 	--sk-code-base: var(--sk-text-2);
 	--sk-code-comment: var(--sk-text-4);
 	--sk-code-keyword: hsl(204 100 38);
@@ -76,6 +75,17 @@
 	--sk-code-diff-inserted: hsl(120, 100%, 25%);
 	--sk-code-diff-removed: hsl(2, 80%, 47%);
 
+	--shiki-color-text: var(--sk-code-base);
+	--shiki-token-constant: var(--sk-code-base);
+	--shiki-token-string: var(--sk-code-string);
+	--shiki-token-comment: var(--sk-code-comment);
+	--shiki-token-keyword: var(--sk-code-keyword);
+	--shiki-token-parameter: var(--sk-code-base);
+	--shiki-token-function: var(--sk-code-function);
+	--shiki-token-string-expression: var(--sk-code-string);
+	--shiki-token-punctuation: var(--sk-code-base);
+	--shiki-token-link: var(--sk-code-keyword);
+
 	--sk-text-warning-hsl: 32, 95%, 44%;
 	--sk-text-warning: hsl(var(--sk-text-warning-hsl));
 
@@ -102,7 +112,7 @@
 		--sk-back-4: hsl(0 0 22);
 		--sk-back-5: hsl(0 0 25);
 		--sk-back-6: hsl(0 0 32);
-		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
+		--sk-back-translucent: hsl(0 0 100 / 0.1);
 		--sk-theme-1-hsl: 12, 94%, 62%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
 		--sk-text-1: hsl(0, 0%, 90%);
@@ -118,19 +128,19 @@
 
 		--sk-text-warning-hsl: 32, 67%, 56%;
 
-		--sk-code-ts-bg: var(--sk-back-2);
-		--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);

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

@@ -0,0 +1,20 @@
+.raised {
+	border-radius: var(--sk-border-radius);
+	border-style: solid;
+	border-color: var(--sk-raised-color);
+	border-width: var(--sk-raised-width);
+
+	&:hover {
+		border-color: var(--sk-raised-hover-color);
+	}
+
+	&:active {
+		border-color: var(--sk-raised-active-color);
+		border-width: var(--sk-raised-active-width);
+	}
+
+	&:disabled {
+		border-color: var(--sk-back-5);
+		border-width: 1px;
+	}
+}

packages/site-kit/src/lib/styles/utils/buttons.css

@@ -0,0 +1,7 @@
+.twoslash-hover {
+	position: relative;
+
+	.twoslash-popup-container {
+		display: none;
+	}
+}