Add color variables for newly available badge

delucis · Oct 26, 2024 · afa5a2f · afa5a2f
1 parent 7eaf0a1
commit afa5a2f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/docs/src/content/docs/components/baseline-status.mdx b/docs/src/content/docs/components/baseline-status.mdx
@@ -92,7 +92,7 @@ If your site uses a theme picker to set the current theme and you need to suppor
 For example, if you use a `data-theme="dark"` attribute to enable dark mode on your site, configure colors when that is set:
 
 ```css
-[data-theme="dark"] .baseline-status::part(root) {
+[data-theme='dark'] .baseline-status::part(root) {
 	--baseline-status-color-limited: var(--baseline-status-color-limited--dark);
 	--baseline-status-color-newly: var(--baseline-status-color-newly--dark);
 	--baseline-status-color-widely: var(--baseline-status-color-widely--dark);
@@ -111,7 +111,6 @@ The following component parts are exposed to set custom styles in your CSS.
 Selects the wrapper at the base of the component.
 Particularly useful for setting CSS variables that impact component styles.
 
-
 #### `::part(feature-name)`
 
 The name of the feature support information is being displayed for.
@@ -174,6 +173,8 @@ The `<BaselineStatus>` component supports the following API for controlling its
 	--baseline-status-color-outline--light: #d9d9d9;
 	--baseline-status-color-text--light: inherit;
 	--baseline-status-color-link--light: #1a73e8;
+	--baseline-badge-background--light: #3367d6;
+	--baseline-badge-text--light: #fff;
 	--baseline-icon-limited-front--light: #f09409;
 	--baseline-icon-limited-back--light: #c6c6c6;
 	--baseline-icon-widely-front--light: #1ea446;
@@ -189,6 +190,8 @@ The `<BaselineStatus>` component supports the following API for controlling its
 	--baseline-status-color-outline--dark: #d9d9d9;
 	--baseline-status-color-text--dark: inherit;
 	--baseline-status-color-link--dark: #5aa1ff;
+	--baseline-badge-background--dark: #3367d6;
+	--baseline-badge-text--dark: #fff;
 	--baseline-icon-limited-front--dark: #f09409;
 	--baseline-icon-limited-back--dark: #565656;
 	--baseline-icon-widely-front--dark: #1ea446;

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/astro-embed-baseline-status/BaselineStatus.astro b/packages/astro-embed-baseline-status/BaselineStatus.astro
@@ -157,6 +157,8 @@ const year =
 		--baseline-status-color-outline--light: #d9d9d9;
 		--baseline-status-color-text--light: inherit;
 		--baseline-status-color-link--light: #1a73e8;
+		--baseline-badge-background--light: #3367d6;
+		--baseline-badge-text--light: #fff;
 		--baseline-icon-limited-front--light: #f09409;
 		--baseline-icon-limited-back--light: #c6c6c6;
 		--baseline-icon-widely-front--light: #1ea446;
@@ -172,6 +174,8 @@ const year =
 		--baseline-status-color-outline--dark: #d9d9d9;
 		--baseline-status-color-text--dark: inherit;
 		--baseline-status-color-link--dark: #5aa1ff;
+		--baseline-badge-background--dark: #3367d6;
+		--baseline-badge-text--dark: #fff;
 		--baseline-icon-limited-front--dark: #f09409;
 		--baseline-icon-limited-back--dark: #565656;
 		--baseline-icon-widely-front--dark: #1ea446;
@@ -194,6 +198,8 @@ const year =
 		);
 		--baseline-status-color-text: var(--baseline-status-color-text--light);
 		--baseline-status-color-link: var(--baseline-status-color-link--light);
+		--baseline-badge-background: var(--baseline-badge-background--light);
+		--baseline-badge-text: var(--baseline-badge-text--light);
 		--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);
@@ -230,6 +236,8 @@ const year =
 			);
 			--baseline-status-color-text: var(--baseline-status-color-text--dark);
 			--baseline-status-color-link: var(--baseline-status-color-link--dark);
+			--baseline-badge-background: var(--baseline-badge-background--dark);
+			--baseline-badge-text: var(--baseline-badge-text--dark);
 			--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);
@@ -271,6 +279,14 @@ const year =
 				var(--baseline-status-color-link--light),
 				var(--baseline-status-color-link--dark)
 			);
+			--baseline-badge-background: light-dark(
+				var(--baseline-badge-background--light),
+				var(--baseline-badge-background--dark)
+			);
+			--baseline-badge-text: light-dark(
+				var(--baseline-badge-text--light),
+				var(--baseline-badge-text--dark)
+			);
 			--baseline-icon-limited-front: light-dark(
 				var(--baseline-icon-limited-front--light),
 				var(--baseline-icon-limited-front--dark)
@@ -343,8 +359,8 @@ const year =
 	}
 
 	.baseline-status::part(badge) {
-		background: #3367d6;
-		color: #fff;
+		background: var(--baseline-badge-background);
+		color: var(--baseline-badge-text);
 		font-size: 0.6875rem;
 		padding-inline: 4px;
 		border-radius: 2px;