feat(opacitycheckerboard): S2, small t-shirt size squares (#2610)

* feat(opacitycheckerboard): small t-shirt size squares
* docs(opacitycheckerboard): chromatic coverage for t-shirt size

Author: Melissa Thompson

components/opacitycheckerboard/index.css

@@ -15,11 +15,17 @@ permissions and limitations under the License. */
 		--spectrum-opacity-checkerboard-square-light
 	);
 	--spectrum-opacity-checkerboard-size: var(
-		--spectrum-opacity-checkerboard-square-size
+		--spectrum-opacity-checkerboard-square-size-medium
 	);
 	--spectrum-opacity-checkerboard-position: left top;
 }
 
+.spectrum-OpacityCheckerboard--sizeS {
+	--spectrum-opacity-checkerboard-size: var(
+		--spectrum-opacity-checkerboard-square-size-small
+	);
+}
+
 .spectrum-OpacityCheckerboard {
 	background: repeating-conic-gradient(
 			var(

components/opacitycheckerboard/stories/opacitycheckerboard.stories.js

@@ -19,6 +19,16 @@ export default {
 			control: "text",
 			description: "Value for <code>--mod-opacity-checkerboard-position</code>. Accepts any valid CSS background-position property value.",
 		},
+		size: {
+			name: "Size",
+			type: { name: "string", required: true },
+			table: {
+				type: { summary: "string" },
+				category: "Component",
+			},
+			options: ["s", "m"],
+			control: "select",
+		},
 	},
 	args: {
 		rootClass: "spectrum-OpacityCheckerboard",
@@ -36,21 +46,41 @@ export default {
 		(Story, context) => html`<div style=${styleMap({ inlineSize: "100px", blockSize: "100px" })}>${Story(context)}</div>`
 	],
 };
-export const Default = Template.bind({});
-Default.args = {
-	customStyles: {
-		"inline-size": "100%",
-		"block-size": "100%"
-	}
-};
 
-export const CheckerboardPosition = Template.bind({});
+const CheckerboardDefault = (args) => html`
+	${window.isChromatic() ? html`
+			${Template({
+				...args,
+				customStyles: {
+					"inline-size": "100%",
+					"block-size": "100%"
+				}
+			})}
+			<br>
+			${Template({
+				...args,
+				customStyles: {
+					"inline-size": "100%",
+					"block-size": "100%"
+				},
+				size: "s",
+			})}
+	` : Template({
+			...args,
+			customStyles: {
+				"inline-size": "100%",
+				"block-size": "100%"
+			}
+		})}
+`;
+
+
+export const Default = CheckerboardDefault.bind({});
+Default.args = {};
+
+export const CheckerboardPosition = CheckerboardDefault.bind({});
 CheckerboardPosition.args = {
 	backgroundPosition: "center center",
-	customStyles: {
-		"inline-size": "100%",
-		"block-size": "100%"
-	}
 };
 CheckerboardPosition.parameters = {
 	docs: {

components/opacitycheckerboard/stories/template.js

@@ -12,12 +12,14 @@ export const Template = ({
 	customStyles = {},
 	id,
 	content = [],
+	size,
 	role,
 }) => {
 	return html`
 		<div
 			class=${classMap({
 				[rootClass]: true,
+				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${ifDefined(styleMap({