fix(status-light): add missing accent and cyan variants (#5813)

* feat(statuslight): add missing first-gen variants
- added missing cyan and accent to variant list that were identified in
the component analysis
- correct the existing accent and cyan variant selectors
- add example to docs page
- create changeset
- update golden hash

Author: marissahuysentruyt

.changeset/short-pans-know.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/status-light': patch
+---
+
+**Fixed**: Added missing `accent` and `cyan` variant to status light.

.circleci/config.yml

@@ -22,7 +22,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: 1bd7e9973de8f318233aa41b5b8a97a2956cd44d
+        default: 13c4ec984fd6880ccc8dde9dd23f22d6b4337969
     wireit_cache_name:
         type: string
         default: wireit

packages/status-light/README.md

@@ -80,15 +80,11 @@ Status lights come in various semantic and non-semantic variants to convey diffe
 <sp-tab-panel value="semantic">
 
 ```html
-<sp-status-light variant="neutral">
-    use for default state
-</sp-status-light>
+<sp-status-light variant="neutral">use for default state</sp-status-light>
 <sp-status-light variant="positive">
     use for success or approval
 </sp-status-light>
-<sp-status-light variant="negative">
-    use for error or rejection
-</sp-status-light>
+<sp-status-light variant="negative">use for error or rejection</sp-status-light>
 <sp-status-light variant="notice">
     use for warning or attention needed
 </sp-status-light>
@@ -110,6 +106,7 @@ Status lights come in various semantic and non-semantic variants to convey diffe
 <sp-status-light variant="magenta">magenta status</sp-status-light>
 <sp-status-light variant="celery">celery status</sp-status-light>
 <sp-status-light variant="purple">purple status</sp-status-light>
+<sp-status-light variant="cyan">cyan status</sp-status-light>
 ```
 
 </sp-tab-panel>

packages/status-light/src/StatusLight.ts

@@ -44,6 +44,7 @@ export class StatusLight extends SizedMixin(SpectrumElement, {
      */
     @property({ reflect: true })
     public variant:
+        | 'accent'
         | 'negative'
         | 'notice'
         | 'positive'
@@ -56,7 +57,8 @@ export class StatusLight extends SizedMixin(SpectrumElement, {
         | 'chartreuse'
         | 'magenta'
         | 'celery'
-        | 'purple' = 'info';
+        | 'purple'
+        | 'cyan' = 'info';
 
     protected override render(): TemplateResult {
         return html`

packages/status-light/src/spectrum-status-light.css

@@ -79,6 +79,7 @@
     --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
     --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
     --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
+
     min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height));
     box-sizing: border-box;
     font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
@@ -102,6 +103,7 @@
 
 :host:before {
     --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));
+
     content: "";
     inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
     block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
@@ -122,7 +124,7 @@
     background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color));
 }
 
-.spectrum-StatusLight--accent:before {
+:host([variant="accent"]):before {
     background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color));
 }
 
@@ -174,7 +176,7 @@
     background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color));
 }
 
-.spectrum-StatusLight--cyan:before {
+:host([variant="cyan"]):before {
     background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color));
 }
 
@@ -202,6 +204,7 @@
     :host([dir]) {
         --highcontrast-statuslight-content-color-default: CanvasText;
         --highcontrast-statuslight-subdued-content-color-default: CanvasText;
+
         forced-color-adjust: none;
     }
 

packages/status-light/stories/status-light.stories.ts

@@ -19,6 +19,7 @@ export default {
 };
 
 export const s = (): TemplateResult => html`
+    <sp-status-light size="s" variant="accent">accent</sp-status-light>
     <sp-status-light size="s" variant="positive">positive</sp-status-light>
     <sp-status-light size="s" variant="negative">negative</sp-status-light>
     <sp-status-light size="s" variant="notice">notice</sp-status-light>
@@ -32,9 +33,11 @@ export const s = (): TemplateResult => html`
     <sp-status-light size="s" variant="magenta">magenta</sp-status-light>
     <sp-status-light size="s" variant="celery">celery</sp-status-light>
     <sp-status-light size="s" variant="purple">purple</sp-status-light>
+    <sp-status-light size="s" variant="cyan">cyan</sp-status-light>
 `;
 
 export const m = (): TemplateResult => html`
+    <sp-status-light size="m" variant="accent">accent</sp-status-light>
     <sp-status-light size="m" variant="positive">positive</sp-status-light>
     <sp-status-light size="m" variant="negative">negative</sp-status-light>
     <sp-status-light size="m" variant="notice">notice</sp-status-light>
@@ -48,9 +51,11 @@ export const m = (): TemplateResult => html`
     <sp-status-light size="m" variant="magenta">magenta</sp-status-light>
     <sp-status-light size="m" variant="celery">celery</sp-status-light>
     <sp-status-light size="m" variant="purple">purple</sp-status-light>
+    <sp-status-light size="m" variant="cyan">cyan</sp-status-light>
 `;
 
 export const l = (): TemplateResult => html`
+    <sp-status-light size="l" variant="accent">accent</sp-status-light>
     <sp-status-light size="l" variant="positive">positive</sp-status-light>
     <sp-status-light size="l" variant="negative">negative</sp-status-light>
     <sp-status-light size="l" variant="notice">notice</sp-status-light>
@@ -64,9 +69,11 @@ export const l = (): TemplateResult => html`
     <sp-status-light size="l" variant="magenta">magenta</sp-status-light>
     <sp-status-light size="l" variant="celery">celery</sp-status-light>
     <sp-status-light size="l" variant="purple">purple</sp-status-light>
+    <sp-status-light size="l" variant="cyan">cyan</sp-status-light>
 `;
 
 export const XL = (): TemplateResult => html`
+    <sp-status-light size="xl" variant="accent">accent</sp-status-light>
     <sp-status-light size="xl" variant="positive">positive</sp-status-light>
     <sp-status-light size="xl" variant="negative">negative</sp-status-light>
     <sp-status-light size="xl" variant="notice">notice</sp-status-light>
@@ -80,6 +87,7 @@ export const XL = (): TemplateResult => html`
     <sp-status-light size="xl" variant="magenta">magenta</sp-status-light>
     <sp-status-light size="xl" variant="celery">celery</sp-status-light>
     <sp-status-light size="xl" variant="purple">purple</sp-status-light>
+    <sp-status-light size="xl" variant="cyan">cyan</sp-status-light>
 `;
 
 export const disabledTrue = (): TemplateResult => html`