feat(statuslight): s2 migration (#2818)

* refactor: remove --sizeM modifier and make "medium" default size

* refactor:remove accent semantic variant

* refactor: add/update new colors/tokens

* refactor: update typography styles

* refactor: generate new mod properties

* docs: add migration notes/changes to yml

* feat: add chromatic vr coverage

* fix: high contrast changes (utilizes changes from PR#2771 to clean up
legacy vendor prefixes)

* docs: add changeset and update yml

Author: marissahuysentruyt

.changeset/chilly-peaches-sniff.md

@@ -0,0 +1,21 @@
+---
+"@spectrum-css/statuslight": major
+---
+
+Spectrum 2 Status light migration
+
+New non-semantic colors were added to the variants list, while the `accent` semantic variant was removed. There were also some new and updated color and text-to-visual tokens used to match the designs, along with normalizing font family, font style, and font weight.
+
+New mods added:
+
+- `--mod-statuslight-font-family`
+- `--mod-statuslight-font-style`
+- `--mod-statuslight-nonsemantic-brown-color`
+- `--mod-statuslight-nonsemantic-cinnamon-color`
+- `--mod-statuslight-nonsemantic-pink-color`
+- `--mod-statuslight-nonsemantic-silver-color`
+- `--mod-statuslight-nonsemantic-turquoise-color`
+
+Removed mods:
+
+- `--mod-statuslight-semantic-accent-color`

components/statuslight/index.css

@@ -12,31 +12,37 @@
  */
 
 .spectrum-StatusLight {
+	/* Static tokens */
+	--spectrum-statuslight-corner-radius: var(--spectrum-corner-radius-full);
+	--spectrum-statuslight-border-width: var(--spectrum-border-width-100);
+
+	/* Size */
 	--spectrum-statuslight-height: var(--spectrum-component-height-100);
 	--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
+	--spectrum-statuslight-line-height: var(--spectrum-line-height-100);
+	--spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
+	/* Font */
+	--spectrum-statuslight-font-family: var(--spectrum-default-font-family);
+	--spectrum-statuslight-font-weight: var(--spectrum-regular-font-weight);
+	--spectrum-statuslight-font-style: var(--spectrum-default-font-style);
 	--spectrum-statuslight-font-size: var(--spectrum-font-size-100);
 
-	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
+	/* Space */
+	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-100);
 	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
 	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
 	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
 
-	--spectrum-statuslight-corner-radius: 50%;
-	--spectrum-statuslight-font-weight: 400;
-	--spectrum-statuslight-border-width: var(--spectrum-border-width-100);
-
-	--spectrum-statuslight-line-height: var(--spectrum-line-height-100);
-	--spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
+	/* Color */
 	--spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
-	--spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
+	--spectrum-statuslight-subdued-content-color-default: var(--spectrum-gray-600);
 	--spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
-	--spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color);
 	--spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
 	--spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
 	--spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
 	--spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
+
 	--spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
 	--spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
 	--spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
@@ -51,6 +57,11 @@
 	--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);
+	--spectrum-statuslight-nonsemantic-pink-color: var(--spectrum-pink-visual-color);
+	--spectrum-statuslight-nonsemantic-turquoise-color: var(--spectrum-turquoise-visual-color);
+	--spectrum-statuslight-nonsemantic-cinnamon-color: var(--spectrum-cinnamon-visual-color);
+	--spectrum-statuslight-nonsemantic-brown-color: var(--spectrum-brown-visual-color);
+	--spectrum-statuslight-nonsemantic-silver-color: var(--spectrum-silver-visual-color);
 }
 
 .spectrum-StatusLight--sizeS {
@@ -59,7 +70,7 @@
 
 	--spectrum-statuslight-font-size: var(--spectrum-font-size-75);
 
-	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75);
+	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-75);
 	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small);
 	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
 	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
@@ -71,7 +82,7 @@
 
 	--spectrum-statuslight-font-size: var(--spectrum-font-size-200);
 
-	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200);
+	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-200);
 	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large);
 	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
 	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200);
@@ -83,7 +94,7 @@
 
 	--spectrum-statuslight-font-size: var(--spectrum-font-size-300);
 
-	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300);
+	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-300);
 	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large);
 	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
 	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
@@ -103,6 +114,8 @@
 
 	font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
 	font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight));
+	font-family: var(--mod-statuslight-font-family, var(--spectrum-statuslight-font-family));
+	font-style: var(--mod-statuslight-font-style, var(--spectrum-statuslight-font-style));
 
 	line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height));
 
@@ -116,8 +129,6 @@
 
 	/* Dot */
 	&::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: "";
 		flex-grow: 0;
 		flex-shrink: 0;
@@ -126,26 +137,21 @@
 		block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
 		border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius));
 
+		--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)));
 		margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot);
 		margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label));
 	}
 }
 
 /* Semantic Colors */
 .spectrum-StatusLight--neutral {
-	font-style: italic;
-
 	color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));
 
 	&::before {
 		background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color));
 	}
 }
 
-.spectrum-StatusLight--accent::before {
-	background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color));
-}
-
 .spectrum-StatusLight--info::before {
 	background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color));
 }
@@ -219,13 +225,32 @@
 	background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color));
 }
 
+.spectrum-StatusLight--pink::before {
+	background-color: var(--mod-statuslight-nonsemantic-pink-color, var(--spectrum-statuslight-nonsemantic-pink-color));
+}
+
+.spectrum-StatusLight--turquoise::before {
+	background-color: var(--mod-statuslight-nonsemantic-turquoise-color, var(--spectrum-statuslight-nonsemantic-turquoise-color));
+}
+
+.spectrum-StatusLight--cinnamon::before {
+	background-color: var(--mod-statuslight-nonsemantic-cinnamon-color, var(--spectrum-statuslight-nonsemantic-cinnamon-color));
+}
+
+.spectrum-StatusLight--brown::before {
+	background-color: var(--mod-statuslight-nonsemantic-brown-color, var(--spectrum-statuslight-nonsemantic-brown-color));
+}
+
+.spectrum-StatusLight--silver::before {
+	background-color: var(--mod-statuslight-nonsemantic-silver-color, var(--spectrum-statuslight-nonsemantic-silver-color));
+}
+
 @media (forced-colors: active) {
 	.spectrum-StatusLight {
+		forced-color-adjust: none;
 		--highcontrast-statuslight-content-color-default: CanvasText;
 		--highcontrast-statuslight-subdued-content-color-default: CanvasText;
 
-		forced-color-adjust: none;
-
 		/* Dot */
 		&::before {
 			forced-color-adjust: none;

components/statuslight/metadata/metadata.json

@@ -2,10 +2,11 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-StatusLight",
-    ".spectrum-StatusLight--accent:before",
     ".spectrum-StatusLight--blue:before",
+    ".spectrum-StatusLight--brown:before",
     ".spectrum-StatusLight--celery:before",
     ".spectrum-StatusLight--chartreuse:before",
+    ".spectrum-StatusLight--cinnamon:before",
     ".spectrum-StatusLight--cyan:before",
     ".spectrum-StatusLight--fuchsia:before",
     ".spectrum-StatusLight--gray:before",
@@ -18,13 +19,16 @@
     ".spectrum-StatusLight--neutral:before",
     ".spectrum-StatusLight--notice:before",
     ".spectrum-StatusLight--orange:before",
+    ".spectrum-StatusLight--pink:before",
     ".spectrum-StatusLight--positive:before",
     ".spectrum-StatusLight--purple:before",
     ".spectrum-StatusLight--red:before",
     ".spectrum-StatusLight--seafoam:before",
+    ".spectrum-StatusLight--silver:before",
     ".spectrum-StatusLight--sizeL",
     ".spectrum-StatusLight--sizeS",
     ".spectrum-StatusLight--sizeXL",
+    ".spectrum-StatusLight--turquoise:before",
     ".spectrum-StatusLight--yellow:before",
     ".spectrum-StatusLight:before",
     ".spectrum-StatusLight:lang(ja)",
@@ -36,26 +40,32 @@
     "--mod-statuslight-content-color-default",
     "--mod-statuslight-corner-radius",
     "--mod-statuslight-dot-size",
+    "--mod-statuslight-font-family",
     "--mod-statuslight-font-size",
+    "--mod-statuslight-font-style",
     "--mod-statuslight-font-weight",
     "--mod-statuslight-height",
     "--mod-statuslight-line-height",
     "--mod-statuslight-line-height-cjk",
     "--mod-statuslight-nonsemantic-blue-color",
+    "--mod-statuslight-nonsemantic-brown-color",
     "--mod-statuslight-nonsemantic-celery-color",
     "--mod-statuslight-nonsemantic-chartreuse-color",
+    "--mod-statuslight-nonsemantic-cinnamon-color",
     "--mod-statuslight-nonsemantic-cyan-color",
     "--mod-statuslight-nonsemantic-fuchsia-color",
     "--mod-statuslight-nonsemantic-gray-color",
     "--mod-statuslight-nonsemantic-green-color",
     "--mod-statuslight-nonsemantic-indigo-color",
     "--mod-statuslight-nonsemantic-magenta-color",
     "--mod-statuslight-nonsemantic-orange-color",
+    "--mod-statuslight-nonsemantic-pink-color",
     "--mod-statuslight-nonsemantic-purple-color",
     "--mod-statuslight-nonsemantic-red-color",
     "--mod-statuslight-nonsemantic-seafoam-color",
+    "--mod-statuslight-nonsemantic-silver-color",
+    "--mod-statuslight-nonsemantic-turquoise-color",
     "--mod-statuslight-nonsemantic-yellow-color",
-    "--mod-statuslight-semantic-accent-color",
     "--mod-statuslight-semantic-info-color",
     "--mod-statuslight-semantic-negative-color",
     "--mod-statuslight-semantic-neutral-color",
@@ -72,6 +82,10 @@
     "--spectrum-status-light-dot-size-large",
     "--spectrum-status-light-dot-size-medium",
     "--spectrum-status-light-dot-size-small",
+    "--spectrum-status-light-text-to-visual-100",
+    "--spectrum-status-light-text-to-visual-200",
+    "--spectrum-status-light-text-to-visual-300",
+    "--spectrum-status-light-text-to-visual-75",
     "--spectrum-status-light-top-to-dot-extra-large",
     "--spectrum-status-light-top-to-dot-large",
     "--spectrum-status-light-top-to-dot-medium",
@@ -80,26 +94,32 @@
     "--spectrum-statuslight-content-color-default",
     "--spectrum-statuslight-corner-radius",
     "--spectrum-statuslight-dot-size",
+    "--spectrum-statuslight-font-family",
     "--spectrum-statuslight-font-size",
+    "--spectrum-statuslight-font-style",
     "--spectrum-statuslight-font-weight",
     "--spectrum-statuslight-height",
     "--spectrum-statuslight-line-height",
     "--spectrum-statuslight-line-height-cjk",
     "--spectrum-statuslight-nonsemantic-blue-color",
+    "--spectrum-statuslight-nonsemantic-brown-color",
     "--spectrum-statuslight-nonsemantic-celery-color",
     "--spectrum-statuslight-nonsemantic-chartreuse-color",
+    "--spectrum-statuslight-nonsemantic-cinnamon-color",
     "--spectrum-statuslight-nonsemantic-cyan-color",
     "--spectrum-statuslight-nonsemantic-fuchsia-color",
     "--spectrum-statuslight-nonsemantic-gray-color",
     "--spectrum-statuslight-nonsemantic-green-color",
     "--spectrum-statuslight-nonsemantic-indigo-color",
     "--spectrum-statuslight-nonsemantic-magenta-color",
     "--spectrum-statuslight-nonsemantic-orange-color",
+    "--spectrum-statuslight-nonsemantic-pink-color",
     "--spectrum-statuslight-nonsemantic-purple-color",
     "--spectrum-statuslight-nonsemantic-red-color",
     "--spectrum-statuslight-nonsemantic-seafoam-color",
+    "--spectrum-statuslight-nonsemantic-silver-color",
+    "--spectrum-statuslight-nonsemantic-turquoise-color",
     "--spectrum-statuslight-nonsemantic-yellow-color",
-    "--spectrum-statuslight-semantic-accent-color",
     "--spectrum-statuslight-semantic-info-color",
     "--spectrum-statuslight-semantic-negative-color",
     "--spectrum-statuslight-semantic-neutral-color",
@@ -113,11 +133,12 @@
     "--spectrum-statuslight-subdued-content-color-default"
   ],
   "global": [
-    "--spectrum-accent-visual-color",
     "--spectrum-blue-visual-color",
     "--spectrum-border-width-100",
+    "--spectrum-brown-visual-color",
     "--spectrum-celery-visual-color",
     "--spectrum-chartreuse-visual-color",
+    "--spectrum-cinnamon-visual-color",
     "--spectrum-cjk-line-height-100",
     "--spectrum-component-bottom-to-text-100",
     "--spectrum-component-bottom-to-text-200",
@@ -131,12 +152,16 @@
     "--spectrum-component-top-to-text-200",
     "--spectrum-component-top-to-text-300",
     "--spectrum-component-top-to-text-75",
+    "--spectrum-corner-radius-full",
     "--spectrum-cyan-visual-color",
+    "--spectrum-default-font-family",
+    "--spectrum-default-font-style",
     "--spectrum-font-size-100",
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
     "--spectrum-fuchsia-visual-color",
+    "--spectrum-gray-600",
     "--spectrum-gray-visual-color",
     "--spectrum-green-visual-color",
     "--spectrum-indigo-visual-color",
@@ -145,18 +170,17 @@
     "--spectrum-magenta-visual-color",
     "--spectrum-negative-visual-color",
     "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-subdued-content-color-default",
     "--spectrum-neutral-visual-color",
     "--spectrum-notice-visual-color",
     "--spectrum-orange-visual-color",
+    "--spectrum-pink-visual-color",
     "--spectrum-positive-visual-color",
     "--spectrum-purple-visual-color",
     "--spectrum-red-visual-color",
+    "--spectrum-regular-font-weight",
     "--spectrum-seafoam-visual-color",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75",
+    "--spectrum-silver-visual-color",
+    "--spectrum-turquoise-visual-color",
     "--spectrum-yellow-visual-color"
   ],
   "system-theme": [],

components/statuslight/metadata/mods.md

@@ -4,26 +4,32 @@
 | `--mod-statuslight-content-color-default`         |
 | `--mod-statuslight-corner-radius`                 |
 | `--mod-statuslight-dot-size`                      |
+| `--mod-statuslight-font-family`                   |
 | `--mod-statuslight-font-size`                     |
+| `--mod-statuslight-font-style`                    |
 | `--mod-statuslight-font-weight`                   |
 | `--mod-statuslight-height`                        |
 | `--mod-statuslight-line-height`                   |
 | `--mod-statuslight-line-height-cjk`               |
 | `--mod-statuslight-nonsemantic-blue-color`        |
+| `--mod-statuslight-nonsemantic-brown-color`       |
 | `--mod-statuslight-nonsemantic-celery-color`      |
 | `--mod-statuslight-nonsemantic-chartreuse-color`  |
+| `--mod-statuslight-nonsemantic-cinnamon-color`    |
 | `--mod-statuslight-nonsemantic-cyan-color`        |
 | `--mod-statuslight-nonsemantic-fuchsia-color`     |
 | `--mod-statuslight-nonsemantic-gray-color`        |
 | `--mod-statuslight-nonsemantic-green-color`       |
 | `--mod-statuslight-nonsemantic-indigo-color`      |
 | `--mod-statuslight-nonsemantic-magenta-color`     |
 | `--mod-statuslight-nonsemantic-orange-color`      |
+| `--mod-statuslight-nonsemantic-pink-color`        |
 | `--mod-statuslight-nonsemantic-purple-color`      |
 | `--mod-statuslight-nonsemantic-red-color`         |
 | `--mod-statuslight-nonsemantic-seafoam-color`     |
+| `--mod-statuslight-nonsemantic-silver-color`      |
+| `--mod-statuslight-nonsemantic-turquoise-color`   |
 | `--mod-statuslight-nonsemantic-yellow-color`      |
-| `--mod-statuslight-semantic-accent-color`         |
 | `--mod-statuslight-semantic-info-color`           |
 | `--mod-statuslight-semantic-negative-color`       |
 | `--mod-statuslight-semantic-neutral-color`        |