docs(swatch): add lightBorder template support and story

Author: marissahuysentruyt

components/swatch/stories/swatch.stories.js

@@ -69,7 +69,7 @@ export default {
 				type: { summary: "string", required: true },
 				category: "Component",
 			},
-			options: ["default", "noBorder"],
+			options: ["default", "noBorder", "lightBorder"],
 			control: "select",
 		},
 		isRectangle: {
@@ -191,6 +191,11 @@ Selected.args = {
 };
 Selected.tags = ["autodocs", "!dev"];
 
+/**
+ * By default, swatches have a border. However, when swatches are used within a swatch group, there are additional border considerations. 
+ * - When color swatches are used in a [swatch group](?path=/docs/components-swatch-group--docs), they typically have the `.spectrum-Swatch--noBorder` class.
+ * - When and only when color swatches used in a [swatch group](?path=/docs/components-swatch-group--docs) have low contrast (below 3:1 contrast with the background), those swatches will have a less prominent border compared to the swatch component when used by itself. They individually use the `.spectrum-Swatch--lightBorder` class.
+ */
 export const Border = BorderGroup.bind({});
 Border.tags = ["autodocs", "!dev"];
 

components/swatch/stories/template.js

@@ -210,7 +210,7 @@ export const RoundingGroup = (args, context) => html`
 `;
 
 export const BorderGroup = (args, context) => html `
-	<div style="display: flex; gap: 8px; padding: 8px 0;">
+	<div style="display: flex; flex-direction: column; gap: 8px; padding: 8px 0;">
 		<div>
 		${Typography({
 			semantics: "detail",
@@ -234,6 +234,18 @@ export const BorderGroup = (args, context) => html `
 			withBorder: "noBorder",
 			}, context)}
 		</div>
+		<div>
+		${Typography({
+			semantics: "detail",
+			size: "s",
+			content: ["Light border"],
+			customClasses: ["chromatic-ignore"],
+		})}
+		${Template({
+			...args,
+			withBorder: "lightBorder",
+			}, context)}
+		</div>
 	</div>
 `;