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/dist/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/index.css

@@ -12,7 +12,23 @@
  */
 
 .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);
+	--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(--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/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`

yarn.lock

@@ -7331,31 +7331,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640":
-  version: 1.0.30001643
-  resolution: "caniuse-lite@npm:1.0.30001643"
-  checksum: 10c0/7fcd0fd180bbe6764311ad57b0d39c23afdcc3bb1d8f804e7a76752c62a85b1bb7cf74b672d9da2f0afe7ad75336ff811a6fe279eb2a54bc04c272b6b62e57f1
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001629":
-  version: 1.0.30001636
-  resolution: "caniuse-lite@npm:1.0.30001636"
-  checksum: 10c0/e5f965b4da7bae1531fd9f93477d015729ff9e3fa12670ead39a9e6cdc4c43e62c272d47857c5cc332e7b02d697cb3f2f965a1030870ac7476da60c2fc81ee94
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001646":
-  version: 1.0.30001660
-  resolution: "caniuse-lite@npm:1.0.30001660"
-  checksum: 10c0/d28900b56c597176d515c3175ca75c454f2d30cb2c09a44d7bdb009bb0c4d8a2557905adb77642889bbe9feb85fbfe9d974c8b8e53521fb4b50ee16ab246104e
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001669":
-  version: 1.0.30001673
-  resolution: "caniuse-lite@npm:1.0.30001673"
-  checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001629, caniuse-lite@npm:^1.0.30001640, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669":
+  version: 1.0.30001692
+  resolution: "caniuse-lite@npm:1.0.30001692"
+  checksum: 10c0/fca5105561ea12f3de593f3b0f062af82f7d07519e8dbcb97f34e7fd23349bcef1b1622a9a6cd2164d98e3d2f20059ef7e271edae46567aef88caf4c16c7708a
   languageName: node
   linkType: hard