feat(opacitycheckerboard): small t-shirt size squares

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/package.json

@@ -15,7 +15,7 @@
   },
   "main": "dist/index-vars.css",
   "peerDependencies": {
-    "@spectrum-css/tokens": ">=13"
+    "@spectrum-css/tokens": "^14.0.0-next.3"
   },
   "devDependencies": {
     "@spectrum-css/component-builder-simple": "^5.0.6-next.1"

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",

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({