@hashicorp/react-components 0.0.0-canary.dc549d6 → 0.0.0-canary.e8d8096

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hashicorp/react-components",
-	"version": "0.0.0-canary.dc549d6",
+	"version": "0.0.0-canary.e8d8096",
 	"main": "src/index.ts",
 	"scripts": {
 		"lint": "next-hashicorp lint",

package/src/components/nav-panel/product-panel/index.tsx

@@ -18,10 +18,15 @@ const PRODUCT_LOGO_MAP = new Map([
 	['Nomad', 'nomad-fill-color'],
 	['Waypoint', 'waypoint-fill-color'],
 	['Vagrant', 'vagrant-fill-color'],
-	['HCP Vault Secrets', 'vault-secrets-square-color'],
-	['HCP Vault Radar', 'vault-radar-square-color'],
+	['HCP Vault Secrets', 'vault-secrets'],
+	['HCP Vault Radar', 'vault-radar'],
 ])
 
+const PRODUCT_LOGO_EXCEPTION_CLASSNAMES = {
+	'HCP Vault Secrets': 'hcpVaultSecrets',
+	'HCP Vault Radar': 'hcpVaultRadar',
+}
+
 export interface ProductsPanelProps {
 	productCategories: any
 	promo?: PromoProps
@@ -127,6 +132,11 @@ function NavProduct({ url, product, description }: NavProductProps) {
 					<div className={s.productLogo}>
 						<FlightIcon
 							name={PRODUCT_LOGO_MAP.get(product) ?? 'hashicorp-fill-color'}
+							className={
+								PRODUCT_LOGO_EXCEPTION_CLASSNAMES[product]
+									? s[PRODUCT_LOGO_EXCEPTION_CLASSNAMES[product]]
+									: undefined
+							}
 						/>
 					</div>
 					<div className={s.productTextContent}>

package/src/components/nav-panel/product-panel/style.module.css

@@ -191,3 +191,20 @@ packages/react-components/src/components/nav-panel/components/link-list/style.mo
 	line-height: 18px;
 	color: var(--token-color-foreground-primary);
 }
+
+/* Branding exception classnames */
+
+.hcpVaultSecrets,
+.hcpVaultRadar {
+	padding: var(--hdsplus-spacing-01);
+	border: 2px solid var(--token-color-vault-brand);
+	border-radius: 3px;
+
+	& use {
+		fill: var(--token-color-foreground-strong);
+	}
+
+	& path {
+		fill: inherit;
+	}
+}