nicer gutters (#772)

* nicer gutters

* fix

* better

* cursor

Author: Rich-Harris

apps/svelte.dev/src/lib/icons/chevron.svg

@@ -129,7 +129,7 @@
 					background-size: 2rem;
 					top: 0.4rem;
 					right: 0.2rem;
-					rotate: -90deg;
+					rotate: 0deg;
 					transition: rotate 0.2s;
 					transition: rotate 0.2s;
 				}
@@ -153,7 +153,7 @@
 
 			label:has(:checked) {
 				&::after {
-					rotate: 90deg;
+					rotate: 180deg;
 				}
 
 				/* TODO remove :global once https://github.com/sveltejs/svelte/issues/13779 is fixed */

apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte

@@ -115,7 +115,7 @@
 
 	.fake-gutter {
 		text-align: right;
-		padding-right: 3px;
+		padding-right: 0.7rem;
 	}
 
 	.fake-content {

packages/editor/src/lib/Editor.svelte

@@ -38,6 +38,14 @@
 	}
 
 	.cm-activeLine {
+		background: inherit;
+	}
+
+	.cm-foldGutter {
+		width: 1.4rem;
+	}
+
+	.cm-activeLineGutter {
 		/* this must be translucent, or it will obscure the selection */
 		background: hsl(0, 0%, 0%, 0.04);
 
@@ -46,8 +54,29 @@
 		}
 	}
 
-	.cm-activeLineGutter {
-		background-color: var(--sk-bg-3);
+	.cm-gutterElement {
+		position: relative;
+
+		&:where(:has([title='Fold line']), :has([title='Unfold line']))::after {
+			content: '';
+			position: absolute;
+			width: 100%;
+			right: 0;
+			top: 0;
+			height: 2.4rem;
+			background: url($lib/icons/chevron.svg) no-repeat 50% 50%;
+			background-size: contain;
+			transition: transform 0.2s;
+			cursor: pointer;
+		}
+
+		&:has([title='Unfold line'])::after {
+			transform: rotate(-90deg);
+		}
+
+		span {
+			color: transparent;
+		}
 	}
 
 	.cm-lineNumbers {
@@ -60,10 +89,6 @@
 		}
 	}
 
-	.cm-foldGutter {
-		width: 1rem;
-	}
-
 	.cm-foldPlaceholder {
 		background-color: transparent;
 		border: none;
@@ -85,17 +110,7 @@
 	}
 
 	.cm-content {
-		/* ensure no gap between top of editor and highlighted first/last line */
-		padding-top: 0;
-		padding-bottom: 0;
-
-		.cm-line:first-child {
-			padding-top: 4px;
-		}
-
-		.cm-line:last-child {
-			padding-bottom: 4px;
-		}
+		padding: 0.4rem 0;
 	}
 
 	.cm-line {

packages/editor/src/lib/codemirror.css

@@ -495,7 +495,7 @@
 			&::after {
 				background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
 				background-size: 2rem;
-				rotate: -90deg;
+				rotate: 0deg;
 				transition: rotate 0.2s;
 				transition: rotate 0.2s;
 				top: 0.2rem;
@@ -534,7 +534,7 @@
 
 			&[open] {
 				&::after {
-					rotate: 90deg;
+					rotate: 180deg;
 				}
 
 				& > summary {

packages/site-kit/src/lib/components/Text.svelte

@@ -100,12 +100,12 @@
 				height: 2rem;
 				background: url($lib/icons/chevron.svg);
 				background-size: contain;
-				rotate: -90deg;
+				rotate: 0deg;
 				transition: rotate 0.2s;
 			}
 
 			[open] &::after {
-				rotate: 90deg;
+				rotate: 180deg;
 			}
 
 			span:not(:last-child)::after {