From 25944d8d7dfa52b318bc3cd5bc12ab418a61f187 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Tue, 17 Sep 2024 10:09:02 -0400
Subject: [PATCH] Breadcrumb styling (#171)

allow breadcrumb labels to inherit color
---
 docs/docs/components/breadcrumb.md            | 66 ++++++++++++++-----
 .../breadcrumb-item/breadcrumb-item.styles.ts | 18 ++---
 2 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/docs/docs/components/breadcrumb.md b/docs/docs/components/breadcrumb.md
index d137ffd78..ac48eb4e2 100644
--- a/docs/docs/components/breadcrumb.md
+++ b/docs/docs/components/breadcrumb.md
@@ -35,6 +35,36 @@ For websites, you'll probably want to use links instead. You can make any breadc
 </wa-breadcrumb>
 ```
 
+### Prefixes
+
+Use the `prefix` slot to add content before any breadcrumb item.
+
+```html {.example}
+<wa-breadcrumb>
+  <wa-breadcrumb-item>
+    <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
+    Home
+  </wa-breadcrumb-item>
+  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
+</wa-breadcrumb>
+```
+
+### Suffixes
+
+Use the `suffix` slot to add content after any breadcrumb item.
+
+```html {.example}
+<wa-breadcrumb>
+  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
+  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
+  <wa-breadcrumb-item>
+    Security
+    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
+  </wa-breadcrumb-item>
+</wa-breadcrumb>
+```
+
 ### Custom Separators
 
 Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
@@ -66,12 +96,27 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
 </wa-breadcrumb>
 ```
 
-### Prefixes
+### Custom Colors
 
-Use the `prefix` slot to add content before any breadcrumb item.
+Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffixes, and separators can be styled using CSS parts.
 
 ```html {.example}
-<wa-breadcrumb>
+<style>
+  .redcrumbs wa-breadcrumb-item {
+    color: firebrick;
+  }
+  .redcrumbs wa-breadcrumb-item:last-of-type {
+    color: crimson;
+  }
+  .redcrumbs wa-breadcrumb-item::part(separator) {
+    color: pink;
+  }
+  .redcrumbs wa-breadcrumb-item::part(prefix),
+  .redcrumbs wa-breadcrumb-item::part(suffix) {
+    color: currentColor;
+  }
+</style>
+<wa-breadcrumb class="redcrumbs">
   <wa-breadcrumb-item>
     <wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
     Home
@@ -81,21 +126,6 @@ Use the `prefix` slot to add content before any breadcrumb item.
 </wa-breadcrumb>
 ```
 
-### Suffixes
-
-Use the `suffix` slot to add content after any breadcrumb item.
-
-```html {.example}
-<wa-breadcrumb>
-  <wa-breadcrumb-item>Documents</wa-breadcrumb-item>
-  <wa-breadcrumb-item>Policies</wa-breadcrumb-item>
-  <wa-breadcrumb-item>
-    Security
-    <wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
-  </wa-breadcrumb-item>
-</wa-breadcrumb>
-```
-
 ### With Dropdowns
 
 Dropdown menus can be placed in the default slot to provide additional options.
diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
index e6bfadfc1..d290f884a 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -2,15 +2,19 @@ import { css } from 'lit';
 
 export default css`
   :host {
+    color: var(--wa-color-text-link);
     display: inline-flex;
   }
 
+  :host(:last-of-type) {
+    color: var(--wa-color-text-quiet);
+  }
+
   .breadcrumb-item {
     display: inline-flex;
     align-items: center;
     font: inherit;
     font-weight: var(--wa-font-weight-action);
-    color: var(--wa-color-neutral-on-quiet);
     line-height: var(--wa-line-height-normal);
     white-space: nowrap;
   }
@@ -19,7 +23,7 @@ export default css`
     display: inline-block;
     font: inherit;
     text-decoration: none;
-    color: inherit;
+    color: currentColor;
     background: none;
     border: none;
     border-radius: var(--wa-border-radius-s);
@@ -29,16 +33,12 @@ export default css`
     transition: color var(--wa-transition-normal) var(--wa-transition-easing);
   }
 
-  :host(:not(:last-of-type)) .breadcrumb-item__label {
-    color: var(--wa-color-text-link);
-  }
-
   :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
-    color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
   }
 
   :host(:not(:last-of-type)) .breadcrumb-item__label:active {
-    color: var(--wa-color-text-link);
+    color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
   }
 
   .breadcrumb-item__label:focus {
@@ -61,6 +61,7 @@ export default css`
   .breadcrumb-item__prefix,
   .breadcrumb-item__suffix {
     display: inline-flex;
+    color: var(--wa-color-text-quiet);
   }
 
   ::slotted([slot='prefix']) {
@@ -76,6 +77,7 @@ export default css`
   }
 
   .breadcrumb-item__separator {
+    color: var(--wa-color-text-quiet);
     display: inline-flex;
     align-items: center;
     margin: 0 var(--wa-space-s);