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

@@ -11,15 +11,24 @@
  * governing permissions and limitations under the License.
  */
 
+.spectrum-OpacityCheckerboard {
+	--spectrum-opacity-checkerboard-dark: var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark));
+	--spectrum-opacity-checkerboard-light: var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light));
+	--spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-medium));
+
+	--spectrum-opacity-checkerboard-position: var(--mod-opacity-checkerboard-position, left top);
+}
+
+.spectrum-OpacityCheckerboard--sizeS {
+	--spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-small));
+}
+
 .spectrum-OpacityCheckerboard {
 	background:
-		repeating-conic-gradient(
-			var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light)) 0% 25%,
-			var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark)) 0% 50%
-		)
-		var(--mod-opacity-checkerboard-position, left top) /
-		calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2)
-		calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2);
+		repeating-conic-gradient(var(--spectrum-opacity-checkerboard-light) 0% 25%, var(--spectrum-opacity-checkerboard-dark) 0% 50%)
+		var(--spectrum-opacity-checkerboard-position) /
+		calc(var(--spectrum-opacity-checkerboard-size) * 2)
+		calc(var(--spectrum-opacity-checkerboard-size) * 2);
 }
 
 @media (forced-colors: active) {

components/opacitycheckerboard/metadata/metadata.json

@@ -1,16 +1,24 @@
 {
   "sourceFile": "index.css",
-  "selectors": [".spectrum-OpacityCheckerboard"],
+  "selectors": [
+    ".spectrum-OpacityCheckerboard",
+    ".spectrum-OpacityCheckerboard--sizeS"
+  ],
   "modifiers": [
     "--mod-opacity-checkerboard-dark",
     "--mod-opacity-checkerboard-light",
     "--mod-opacity-checkerboard-position",
     "--mod-opacity-checkerboard-size"
   ],
   "component": [
+    "--spectrum-opacity-checkerboard-dark",
+    "--spectrum-opacity-checkerboard-light",
+    "--spectrum-opacity-checkerboard-position",
+    "--spectrum-opacity-checkerboard-size",
     "--spectrum-opacity-checkerboard-square-dark",
     "--spectrum-opacity-checkerboard-square-light",
-    "--spectrum-opacity-checkerboard-square-size"
+    "--spectrum-opacity-checkerboard-square-size-medium",
+    "--spectrum-opacity-checkerboard-square-size-small"
   ],
   "global": [],
   "system-theme": [],

components/opacitycheckerboard/stories/opacitycheckerboard.stories.js

@@ -20,6 +20,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",

components/opacitycheckerboard/stories/template.js

@@ -13,6 +13,7 @@ export const Template = ({
 	customStyles = {},
 	id = getRandomId("opacity-checkerboard"),
 	content = [],
+	size,
 	role,
 } = {}) => {
 	return html`