From f49c10b05bf9fb23d052efec0c9a915802fd6040 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Fri, 11 Jul 2025 15:03:18 -0400
Subject: [PATCH] Replace old `--wa-flow-spacing` with `--wa-content-spacing`
 (#1157)

* remove old `--wa-flow-spacing`

* add changelog
---
 packages/webawesome/docs/assets/styles/code-examples.css | 2 +-
 packages/webawesome/docs/assets/styles/docs.css          | 8 ++------
 packages/webawesome/docs/docs/resources/changelog.md     | 1 +
 packages/webawesome/docs/docs/resources/community.md     | 6 +++---
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/webawesome/docs/assets/styles/code-examples.css b/packages/webawesome/docs/assets/styles/code-examples.css
index 11a64f692..1e213f323 100644
--- a/packages/webawesome/docs/assets/styles/code-examples.css
+++ b/packages/webawesome/docs/assets/styles/code-examples.css
@@ -3,7 +3,7 @@
   border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
   border-radius: var(--wa-border-radius-l);
   color: var(--wa-color-text-normal);
-  margin-block-end: var(--wa-flow-spacing);
+  margin-block-end: var(--wa-content-spacing);
   isolation: isolate;
 }
 
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css
index 4daa4b299..ba413cb2c 100644
--- a/packages/webawesome/docs/assets/styles/docs.css
+++ b/packages/webawesome/docs/assets/styles/docs.css
@@ -26,10 +26,6 @@ body.theme-transitioning {
   transition: opacity 200ms ease-out;
 }
 
-wa-page {
-  --wa-flow-spacing: var(--wa-space-xl);
-}
-
 /* Header */
 wa-page::part(header) {
   background-color: var(--wa-color-surface-default);
@@ -314,7 +310,7 @@ h1.title {
   gap: var(--wa-space-xs);
   flex-wrap: wrap;
   align-items: center;
-  margin-block-end: var(--wa-flow-spacing);
+  margin-block-end: var(--wa-content-spacing);
 
   code {
     line-height: var(--wa-line-height-condensed);
@@ -357,7 +353,7 @@ h1.title {
   border: var(--wa-border-style) var(--wa-border-width-s);
   border-radius: var(--wa-border-radius-l);
   padding: 1rem;
-  margin-block-end: var(--wa-flow-spacing);
+  margin-block-end: var(--wa-content-spacing);
 
   :first-child {
     margin-block-start: 0;
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index b6b5bb5d8..f24c96517 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -92,6 +92,7 @@ Many of these changes and improvements were the direct result of feedback from u
 - Added a new free component: `<wa-zoomable-frame>` (#3 of 14 per stretch goals)
 - Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height
 - Added support for `name` in `<wa-details>` for exclusively opening one in a group
+- Added `--wa-content-spacing` to themes to set default spacing between HTML elements in Native Styles
 - Added `--checked-icon-scale` to `<wa-checkbox>`
 - Added `--tag-max-size` to `<wa-select>` when using `multiple`
 - Added support for `data-dialog="open <id>"` to `<wa-dialog>`
diff --git a/packages/webawesome/docs/docs/resources/community.md b/packages/webawesome/docs/docs/resources/community.md
index 502d1d243..66b5805ce 100644
--- a/packages/webawesome/docs/docs/resources/community.md
+++ b/packages/webawesome/docs/docs/resources/community.md
@@ -17,7 +17,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
 - Show the community what you're working on
 - Learn more about the project, its values, and its roadmap
 
-<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
+<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="github" family="brands" slot="start"></wa-icon>
   Join the Discussion
 </wa-button>
@@ -31,7 +31,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 - Show the community what you're working on
 - Chat live with other designers, developers, and Web Awesome fans
 
-<wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
+<wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="discord" family="brands" slot="start"></wa-icon>
   Join the Chat
 </wa-button>
@@ -42,7 +42,7 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
 
 **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
-<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
+<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-content-spacing);">
   <wa-icon name="twitter" family="brands" slot="start"></wa-icon>
   Follow on Twitter
 </wa-button>
\ No newline at end of file