From e6ef3712a58932d7c5e81c665494d1d2d559095e Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Fri, 25 Oct 2024 21:32:26 +0200
Subject: [PATCH] Refactor baseline icon, `light-dark()` support & inline SVG

Partially based on https://github.com/web-platform-dx/baseline-status/pull/22
---
 .../BaselineIcon.astro                        | 114 ++++++++++++------
 1 file changed, 79 insertions(+), 35 deletions(-)

diff --git a/packages/astro-embed-baseline-status/BaselineIcon.astro b/packages/astro-embed-baseline-status/BaselineIcon.astro
index ba45ce9..5279edf 100644
--- a/packages/astro-embed-baseline-status/BaselineIcon.astro
+++ b/packages/astro-embed-baseline-status/BaselineIcon.astro
@@ -4,50 +4,94 @@ import type { StatusLevel } from './types';
 interface Props {
 	support: StatusLevel;
 }
+
+const paths = {
+	limited: `<path fill="var(--baseline-icon-limited-front)" d="m10 0 6 6-2 2-6-6 2-2Zm12 12-2 2 6 6 2-2-6-6Zm4-12 2 2-18 18-2-2L26 0Z"/><path fill="var(--baseline-icon-limited-back)" d="m8 2 2 2-6 6 6 6-2 2-8-8 8-8Zm20 0 8 8-8 8-2-2 6-6-6-6 2-2Z"/>`,
+	widely: `<path fill="var(--baseline-icon-widely-front)" d="m18 8 2 2-2 2-2-2 2-2Z"/><path fill="var(--baseline-icon-widely-front)" d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z"/><path fill="var(--baseline-icon-widely-back)" d="m28 2-2 2 6 6-6 6-4-4-2 2 6 6 10-10-8-8ZM10 0 2 8l2 2 6-6 4 4 2-2-6-6Z"/>`,
+	newly: `<path fill="var(--baseline-icon-newly-back)" d="m10 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm16 0 2 2-2 2-2-2 2-2Zm4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4 4 2 2-2 2-2-2 2-2Zm-4-4 2 2-2 2-2-2 2-2ZM6 4l2 2-2 2-2-2 2-2Z"/><path fill="var(--baseline-icon-newly-front)" d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z"/>`,
+	no_data: `<path fill="var(--baseline-icon-no_data)" d="m18 8 2 2-2 2-2-2 2-2Zm10-6-2 2 6 6-6 6-4-4-2 2 6 6 10-10-8-8ZM10 0 2 8l2 2 6-6 4 4 2-2-6-6Z"/><path fill="var(--baseline-icon-no_data)" d="m26 0 2 2-18 18L0 10l2-2 8 8L26 0Z"/>`,
+};
 ---
 
-<baseline-icon aria-hidden="true">
-	<div class={`support-${Astro.props.support}`}></div>
-</baseline-icon>
+<svg
+	width="36"
+	height="20"
+	viewBox="0 0 36 20"
+	class="baseline-icon"
+	aria-hidden="true"
+	set:html={paths[Astro.props.support]}
+/>
 
 <style>
-	baseline-icon {
-		--baseline-icon-limited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L16 6L14 8L8 2L10 0Z' fill='%23F09409'/%3E%3Cpath d='M28 2L36 10L28 18L26 16L32 10L26 4L28 2Z' fill='%23C6C6C6'/%3E%3Cpath d='M22 12L20 14L26 20L28 18L22 12Z' fill='%23F09409'/%3E%3Cpath d='M8 2L10 4L4 10L10 16L8 18L0 10L8 2Z' fill='%23C6C6C6'/%3E%3Cpath d='M26 0L28 2L10 20L8 18L26 0Z' fill='%23F09409'/%3E%3C/svg%3E");
-		--baseline-icon-widely: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%231EA446'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23C4EED0'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23C4EED0'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%231EA446'/%3E%3C/svg%3E");
-		--baseline-icon-newly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L12 2L10 4L8 2L10 0Z' fill='%23A8C7FA'/%3E%3Cpath d='M14 4L16 6L14 8L12 6L14 4Z' fill='%23A8C7FA'/%3E%3Cpath d='M30 4L32 6L30 8L28 6L30 4Z' fill='%23A8C7FA'/%3E%3Cpath d='M34 8L36 10L34 12L32 10L34 8Z' fill='%23A8C7FA'/%3E%3Cpath d='M30 12L32 14L30 16L28 14L30 12Z' fill='%23A8C7FA'/%3E%3Cpath d='M26 16L28 18L26 20L24 18L26 16Z' fill='%23A8C7FA'/%3E%3Cpath d='M22 12L24 14L22 16L20 14L22 12Z' fill='%23A8C7FA'/%3E%3Cpath d='M6 4L8 6L6 8L4 6L6 4Z' fill='%23A8C7FA'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%231B6EF3'/%3E%3C/svg%3E");
-		--baseline-icon-no_data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%23909090'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23909090'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23909090'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%23909090'/%3E%3C/svg%3E");
-		height: 20px;
+	.baseline-icon {
+		/* Light palette */
+		--baseline-icon-limited-front--light: #f09409;
+		--baseline-icon-limited-back--light: #c6c6c6;
+		--baseline-icon-widely-front--light: #1ea446;
+		--baseline-icon-widely-back--light: #c4eed0;
+		--baseline-icon-newly-front--light: #1b6ef3;
+		--baseline-icon-newly-back--light: #a8c7fa;
+		--baseline-icon-no_data--light: #909090;
+		/* Dark palette */
+		--baseline-icon-limited-front--dark: #f09409;
+		--baseline-icon-limited-back--dark: #565656;
+		--baseline-icon-widely-front--dark: #1ea446;
+		--baseline-icon-widely-back--dark: #125225;
+		--baseline-icon-newly-front--dark: #4185ff;
+		--baseline-icon-newly-back--dark: #2d509e;
+		--baseline-icon-no_data--dark: #666666;
+
+		--baseline-icon-limited-front: var(--baseline-icon-limited-front--light);
+		--baseline-icon-limited-back: var(--baseline-icon-limited-back--light);
+		--baseline-icon-widely-front: var(--baseline-icon-widely-front--light);
+		--baseline-icon-widely-back: var(--baseline-icon-widely-back--light);
+		--baseline-icon-newly-front: var(--baseline-icon-newly-front--light);
+		--baseline-icon-newly-back: var(--baseline-icon-newly-back--light);
+		--baseline-icon-no_data: var(--baseline-icon-no_data--light);
 	}
 
 	@media (prefers-color-scheme: dark) {
-		baseline-icon {
-			--baseline-icon-limited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L16 6L14 8L8 2L10 0Z' fill='%23F09409'/%3E%3Cpath d='M28 2L36 10L28 18L26 16L32 10L26 4L28 2Z' fill='%23565656'/%3E%3Cpath d='M22 12L20 14L26 20L28 18L22 12Z' fill='%23F09409'/%3E%3Cpath d='M8 2L10 4L4 10L10 16L8 18L0 10L8 2Z' fill='%23565656'/%3E%3Cpath d='M26 0L28 2L10 20L8 18L26 0Z' fill='%23F09409'/%3E%3C/svg%3E%0A");
-			--baseline-icon-widely: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%231EA446'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23125225'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23125225'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%231EA446'/%3E%3C/svg%3E");
-			--baseline-icon-newly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M10 0L12 2L10 4L8 2L10 0Z' fill='%232D509E'/%3E%3Cpath d='M14 4L16 6L14 8L12 6L14 4Z' fill='%232D509E'/%3E%3Cpath d='M30 4L32 6L30 8L28 6L30 4Z' fill='%232D509E'/%3E%3Cpath d='M34 8L36 10L34 12L32 10L34 8Z' fill='%232D509E'/%3E%3Cpath d='M30 12L32 14L30 16L28 14L30 12Z' fill='%232D509E'/%3E%3Cpath d='M26 16L28 18L26 20L24 18L26 16Z' fill='%232D509E'/%3E%3Cpath d='M22 12L24 14L22 16L20 14L22 12Z' fill='%232D509E'/%3E%3Cpath d='M6 4L8 6L6 8L4 6L6 4Z' fill='%232D509E'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%234185FF'/%3E%3C/svg%3E");
-			--baseline-icon-no_data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20' viewBox='0 0 36 20' fill='none'%3E%3Cpath d='M18 8L20 10L18 12L16 10L18 8Z' fill='%23666666'/%3E%3Cpath d='M28 2L26 4L32 10L26 16L22 12L20 14L26 20L36 10L28 2Z' fill='%23666666'/%3E%3Cpath d='M10 0L2 8L4 10L10 4L14 8L16 6L10 0Z' fill='%23666666'/%3E%3Cpath d='M26 0L28 2L10 20L0 10L2 8L10 16L26 0Z' fill='%23666666'/%3E%3C/svg%3E");
+		.baseline-icon {
+			--baseline-icon-limited-front: var(--baseline-icon-limited-front--dark);
+			--baseline-icon-limited-back: var(--baseline-icon-limited-back--dark);
+			--baseline-icon-widely-front: var(--baseline-icon-widely-front--dark);
+			--baseline-icon-widely-back: var(--baseline-icon-widely-back--dark);
+			--baseline-icon-newly-front: var(--baseline-icon-newly-front--dark);
+			--baseline-icon-newly-back: var(--baseline-icon-newly-back--dark);
+			--baseline-icon-no_data: var(--baseline-icon-no_data--dark);
 		}
 	}
 
-	div {
-		background-repeat: no-repeat;
-		width: 36px;
-		height: 20px;
-		display: inline-block;
-	}
-
-	.support-limited {
-		background-image: var(--baseline-icon-limited);
-	}
-
-	.support-widely {
-		background-image: var(--baseline-icon-widely);
-	}
-
-	.support-newly {
-		background-image: var(--baseline-icon-newly);
-	}
-
-	.support-no_data {
-		background-image: var(--baseline-icon-no_data);
+	@supports (--color: light-dark(var(--a), var(--b))) {
+		.baseline-icon {
+			--baseline-icon-limited-front: light-dark(
+				var(--baseline-icon-limited-front--light),
+				var(--baseline-icon-limited-front--dark)
+			);
+			--baseline-icon-limited-back: light-dark(
+				var(--baseline-icon-limited-back--light),
+				var(--baseline-icon-limited-back--dark)
+			);
+			--baseline-icon-widely-front: light-dark(
+				var(--baseline-icon-widely-front--light),
+				var(--baseline-icon-widely-front--dark)
+			);
+			--baseline-icon-widely-back: light-dark(
+				var(--baseline-icon-widely-back--light),
+				var(--baseline-icon-widely-back--dark)
+			);
+			--baseline-icon-newly-front: light-dark(
+				var(--baseline-icon-newly-front--light),
+				var(--baseline-icon-newly-front--dark)
+			);
+			--baseline-icon-newly-back: light-dark(
+				var(--baseline-icon-newly-back--light),
+				var(--baseline-icon-newly-back--dark)
+			);
+			--baseline-icon-no_data: light-dark(
+				var(--baseline-icon-no_data--light),
+				var(--baseline-icon-no_data--dark)
+			);
+		}
 	}
 </style>