more

Author: Rich-Harris

packages/repl/src/lib/Input/runes-off-light.svg renamed to packages/icons/icons/runes-off.svg

@@ -96,6 +96,7 @@
 		"codemirror": "^6.0.1",
 		"esm-env": "^1.0.0",
 		"esrap": "^1.2.2",
+		"icons": "workspace:*",
 		"locate-character": "^3.0.0",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",

packages/repl/src/lib/Input/runes-on-light.svg renamed to packages/icons/icons/runes-on.svg

@@ -73,32 +73,33 @@
 	}
 
 	span.lightning {
-		--icon-size: 1.8rem;
 		width: 1.8rem;
 		height: 1.8rem;
 		z-index: 9999;
-		background: url(./runes-off-light.svg) no-repeat 50% 50%;
-		background-size: contain;
+		background: #ccc;
+		mask: url(icons/runes-off) no-repeat 50% 50%;
+		mask-size: contain;
 
 		:root.dark &:not(.active) {
-			background-image: url(./runes-off-dark.svg);
+			background: #777;
 		}
 
 		&.active {
-			background-image: url(./runes-on-light.svg);
+			background: var(--sk-fg-accent);
+			mask-image: url(icons/runes-on);
 			animation: bump 0.4s;
 		}
 	}
 
 	@keyframes bump {
 		0% {
-			background-size: var(--icon-size);
+			scale: 1;
 		}
 		50% {
-			background-size: calc(1.3 * var(--icon-size));
+			scale: 1.3;
 		}
 		100% {
-			background-size: var(--icon-size);
+			scale: 1;
 		}
 	}