more

Author: Rich-Harris

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

@@ -495,15 +495,19 @@
 			}
 
 			&::after {
-				background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
-				background-size: 2rem;
-				rotate: 0deg;
-				transition: rotate 0.2s;
+				background: #666;
+				mask: url(icons/chevron) 50% 50% no-repeat;
+				mask-size: 2rem;
+				rotate: -90deg;
 				transition: rotate 0.2s;
 				top: 0.2rem;
 				right: 0.8rem;
 			}
 
+			:root.dark &::after {
+				background: #d4d4d4;
+			}
+
 			&:has(summary:active)::after {
 				top: 0.3rem;
 				right: 0.7rem;
@@ -536,7 +540,7 @@
 
 			&[open] {
 				&::after {
-					rotate: 180deg;
+					rotate: 90deg;
 				}
 
 				& > summary {

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

@@ -98,14 +98,19 @@
 				top: calc(50% - 1rem);
 				width: 2rem;
 				height: 2rem;
-				background: url($lib/icons/chevron.svg);
-				background-size: contain;
-				rotate: 0deg;
+				background: #666;
+				mask: url(icons/chevron);
+				mask-size: contain;
+				rotate: -90deg;
 				transition: rotate 0.2s;
 			}
 
+			:root.dark &::after {
+				background: #d4d4d4;
+			}
+
 			[open] &::after {
-				rotate: 180deg;
+				rotate: 90deg;
 			}
 
 			span:not(:last-child)::after {