Tweak the delete button

So it doesn't look like "not allowed"

Author: DmitrySharabin

src/color-scale/color-scale.css

@@ -20,7 +20,7 @@ color-swatch {
 	}
 
 	.color-name, input.color {
-		--_border-color: var(--border-color, color-mix(in oklab, currentcolor 70%, oklab(none none none / 0%)));
+		--_border-color: var(--border-color, color-mix(in oklab, buttonborder 70%, oklab(none none none / 0%)));
 
 		font: inherit;
 		box-sizing: border-box;
@@ -34,32 +34,30 @@ color-swatch {
 	}
 
 	.delete-button {
+		--_foreground-color: red;
+		--_background-color: white;
+
 		all: unset;
-		position: absolute;
-		inset-inline-end: .1em;
-		inset-block-start: .3em;
 
 		display: grid;
 		place-items: center;
 		inline-size: 1.5em;
-		padding: .2em;
 		aspect-ratio: 1;
+		padding: .2em;
 
-		font-size: 70%;
-		line-height: 1;
-		text-align: center;
+		color: var(--_foreground-color);
+		background-color: var(--_background-color);
 
-		border-radius: 50%;
-		border: 1px solid color-mix(in oklab, currentcolor 20%, oklab(none none none / 0%));
+		border-radius: .3em;
 		box-shadow: 0 .05em 1em -.7em black;
-		background-color: white;
 
 		cursor: pointer;
 
-		transition: transform .2s, opacity .2s;
+		transition: opacity .2s;
 
 		&:is(:hover, :focus) {
-			transform: scale(1.1);
+			color: var(--_background-color);
+			background-color: var(--_foreground-color);
 		}
 	}
 }

src/color-scale/color-scale.js

@@ -230,7 +230,11 @@ const Self = class ColorScale extends ColorElement {
 				if (this.editable.color) {
 					// FIXME: What if there is content in the slots?
 					html += `<input class="color editable" value="${ color }" />`;
-					html += `<button slot="swatch-content" class="delete-button" title="Delete color">❌</button>`;
+					html += `<button slot="swatch-content" class="delete-button" title="Delete color">
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+							<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
+						</svg>
+					</button>`;
 				}
 
 				swatch.innerHTML = html;