feat(avatar): migrate s2 avatar (#3355)

* chore(s2-avatar): initial commit

* chore(s2-avatar): add sizing and border tokens

.changeset/friendly-dolls-raise.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/avatar": major
+---
+
+Adds support for new avatar-size tokens (avatar-size-800 to avatar-size-1500). Updates avatar component story to support new sizes. Adds support for avatar-border-color and avatar-border-thickness.

components/avatar/index.css

@@ -18,6 +18,8 @@
 	--spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
 
 	--spectrum-avatar-border-radius: var(--spectrum-avatar-block-size);
+	--spectrum-avatar-border-thickness: var(--spectrum-avatar-border-width);
+	--spectrum-avatar-border-color-default: var(--spectrum-avatar-border-color);
 
 	--spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 	--spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
@@ -71,6 +73,46 @@
 	--spectrum-avatar-block-size: var(--spectrum-avatar-size-700);
 }
 
+.spectrum-Avatar--size800 {
+	--spectrum-avatar-inline-size: var(--spectrum-avatar-size-800);
+	--spectrum-avatar-block-size: var(--spectrum-avatar-size-800);
+}
+
+.spectrum-Avatar--size900 {
+	--spectrum-avatar-inline-size: var(--spectrum-avatar-size-900);
+	--spectrum-avatar-block-size: var(--spectrum-avatar-size-900);
+}
+
+.spectrum-Avatar--size1000 {
+	--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1000);
+	--spectrum-avatar-block-size: var(--spectrum-avatar-size-1000);
+}
+
+.spectrum-Avatar--size1100 {
+	--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1100);
+	--spectrum-avatar-block-size: var(--spectrum-avatar-size-1100);
+}
+
+.spectrum-Avatar--size1200 {
+	--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1200);
+	--spectrum-avatar-block-size: var(--spectrum-avatar-size-1200);
+}
+
+.spectrum-Avatar--size1300 {
+	--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1300);
+	--spectrum-avatar-block-size: var(--spectrum-avatar-size-1300);
+}
+
+.spectrum-Avatar--size1400 {
+	--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1400);
+	--spectrum-avatar-block-size: var(--spectrum-avatar-size-1400);
+}
+
+.spectrum-Avatar--size1500 {
+	--spectrum-avatar-inline-size: var(--spectrum-avatar-size-1500);
+	--spectrum-avatar-block-size: var(--spectrum-avatar-size-1500);
+}
+
 @media (forced-colors: active) {
 	.spectrum-Avatar {
 		--highcontrast-avatar-focus-indicator-color: CanvasText;
@@ -83,8 +125,10 @@
 	inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size));
 	block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size));
 
+	border-style: solid;
 	border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius));
-	border-width: 0;
+	border-width: var(--spectrum-avatar-border-thickness);
+	border-color: var(--spectrum-avatar-border-color-default);
 
 	outline: none;
 
@@ -96,7 +140,7 @@
 	opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
 
 	&.is-disabled {
-		opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled));
+		opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)));
 	}
 }
 
@@ -120,7 +164,9 @@
 }
 
 .spectrum-Avatar-link {
-	outline: 0;
+	outline: none;
+	outline-color: transparent;
+	outline-style: solid;
 }
 
 .spectrum-Avatar-image {

components/avatar/metadata/metadata.json

@@ -3,6 +3,12 @@
   "selectors": [
     ".spectrum-Avatar",
     ".spectrum-Avatar--size100",
+    ".spectrum-Avatar--size1000",
+    ".spectrum-Avatar--size1100",
+    ".spectrum-Avatar--size1200",
+    ".spectrum-Avatar--size1300",
+    ".spectrum-Avatar--size1400",
+    ".spectrum-Avatar--size1500",
     ".spectrum-Avatar--size200",
     ".spectrum-Avatar--size300",
     ".spectrum-Avatar--size400",
@@ -11,6 +17,8 @@
     ".spectrum-Avatar--size600",
     ".spectrum-Avatar--size700",
     ".spectrum-Avatar--size75",
+    ".spectrum-Avatar--size800",
+    ".spectrum-Avatar--size900",
     ".spectrum-Avatar-image",
     ".spectrum-Avatar-link",
     ".spectrum-Avatar.is-disabled",
@@ -29,7 +37,11 @@
   ],
   "component": [
     "--spectrum-avatar-block-size",
+    "--spectrum-avatar-border-color",
+    "--spectrum-avatar-border-color-default",
     "--spectrum-avatar-border-radius",
+    "--spectrum-avatar-border-thickness",
+    "--spectrum-avatar-border-width",
     "--spectrum-avatar-color-opacity",
     "--spectrum-avatar-color-opacity-disabled",
     "--spectrum-avatar-focus-indicator-color",
@@ -38,14 +50,22 @@
     "--spectrum-avatar-inline-size",
     "--spectrum-avatar-opacity-disabled",
     "--spectrum-avatar-size-100",
+    "--spectrum-avatar-size-1000",
+    "--spectrum-avatar-size-1100",
+    "--spectrum-avatar-size-1200",
+    "--spectrum-avatar-size-1300",
+    "--spectrum-avatar-size-1400",
+    "--spectrum-avatar-size-1500",
     "--spectrum-avatar-size-200",
     "--spectrum-avatar-size-300",
     "--spectrum-avatar-size-400",
     "--spectrum-avatar-size-50",
     "--spectrum-avatar-size-500",
     "--spectrum-avatar-size-600",
     "--spectrum-avatar-size-700",
-    "--spectrum-avatar-size-75"
+    "--spectrum-avatar-size-75",
+    "--spectrum-avatar-size-800",
+    "--spectrum-avatar-size-900"
   ],
   "global": [
     "--spectrum-focus-indicator-color",
@@ -54,5 +74,8 @@
   ],
   "system-theme": [],
   "passthroughs": [],
-  "high-contrast": ["--highcontrast-avatar-focus-indicator-color"]
+  "high-contrast": [
+    "--highcontrast-avatar-color-opacity-disabled",
+    "--highcontrast-avatar-focus-indicator-color"
+  ]
 }

components/avatar/stories/avatar.stories.js

@@ -13,7 +13,7 @@ export default {
 	title: "Avatar",
 	component: "Avatar",
 	argTypes: {
-		size: size([50, 75, 100, 200, 300, 400, 500, 600, 700], false),
+		size: size([50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500], false),
 		image: {
 			name: "Image",
 			type: { name: "string" },