fix(dialog,tokens): custom tokens created

- adds new takeover-dialog tokens to control the desktop/mobile spacing
- rebuilds mods

Author: marissahuysentruyt

components/dialog/index.css

@@ -55,9 +55,9 @@ governing permissions and limitations under the License.
 
 	/* Fullscreen/fullscreenTakeover */
 	--spectrum-takeover-dialog-title-font-size: var(--spectrum-title-size-xxl);
-	--spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-500);
-	--spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-400);
-	--spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-500);
+	--spectrum-takeover-dialog-grid-spacing: var(--spectrum-takeover-dialog-spacing-grid-padding);
+	--spectrum-takeover-dialog-spacing-header-content-gap: var(--spectrum-takeover-dialog-spacing-header-gap);
+	--spectrum-takeover-dialog-spacing-title-to-content: var(--spectrum-takeover-dialog-spacing-title-to-body);
 	--spectrum-takeover-dialog-inline-size: var(--spectrum-takeover-dialog-width);
 	--spectrum-takeover-dialog-block-size: var(--spectrum-takeover-dialog-height);
 }
@@ -270,25 +270,19 @@ governing permissions and limitations under the License.
 	max-block-size: none;
 	max-inline-size: none;
 
-	.spectrum--large & {
-		--spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-300);
-		--spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-400);
-		--spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-400);
-	}
-
 	.spectrum-Dialog-grid {
 		display: grid;
 		grid-template-columns:
-			var(--mod-takeover-dialog-spacing-grid-padding, var(--spectrum-takeover-dialog-spacing-grid-padding))
+			var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing))
 			1fr
 			auto
 			auto
-			var(--mod-takeover-dialog-spacing-grid-padding, var(--spectrum-takeover-dialog-spacing-grid-padding));
+			var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing));
 		grid-template-rows:
-			var(--mod-takeover-dialog-spacing-grid-padding, var(--spectrum-takeover-dialog-spacing-grid-padding))
+			var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing))
 			auto
 			1fr
-			var(--mod-takeover-dialog-spacing-grid-padding, var(--spectrum-takeover-dialog-spacing-grid-padding));
+			var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing));
 		grid-template-areas:
 			".    .       .       .            ."
 			".    heading header  buttonGroup  ."
@@ -298,9 +292,9 @@ governing permissions and limitations under the License.
 
 	.spectrum-Dialog-header {
 		grid-area: heading;
-		gap: var(--mod-takeover-dialog-spacing-header-gap, var(--spectrum-takeover-dialog-spacing-header-gap));
-		margin-inline-end: var(--mod-takeover-dialog-spacing-header-gap, var(--spectrum-takeover-dialog-spacing-header-gap));
-		margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-body);
+		gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
+		margin-inline-end: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap));
+		margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-content);
 	}
 
 	.spectrum-Dialog-heading {

components/dialog/metadata/mods.md

@@ -22,6 +22,6 @@
 | `--mod-standard-dialog-spacing-grid-padding`            |
 | `--mod-standard-dialog-spacing-title-to-description`    |
 | `--mod-standard-dialog-spacing-title-to-header-content` |
-| `--mod-takeover-dialog-spacing-grid-padding`            |
-| `--mod-takeover-dialog-spacing-header-gap`              |
+| `--mod-takeover-dialog-grid-spacing`                    |
+| `--mod-takeover-dialog-spacing-header-content-gap`      |
 | `--mod-takeover-dialog-title-font-size`                 |

tokens/custom-spectrum/custom-large-vars.css

@@ -88,7 +88,10 @@ governing permissions and limitations under the License.
   --spectrum-dialog-confirm-description-text-size: 15px;
   --spectrum-dialog-confirm-padding-grid: 24px;
 
-  --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400);
+  --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-400);
+  --spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-400);
+  --spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-300);
+  --spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-400);
 
   --spectrum-datepicker-initial-width: 160px;
   --spectrum-datepicker-generic-padding: 15px;

tokens/custom-spectrum/custom-medium-vars.css

@@ -87,7 +87,10 @@ governing permissions and limitations under the License.
   --spectrum-dialog-confirm-description-text-size: 14px;
   --spectrum-dialog-confirm-padding-grid: 40px;
 
-  --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500);
+  --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-500);
+  --spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-500);
+	--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-400);
+	--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-500);
 
   --spectrum-datepicker-initial-width: 128px;
   --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);

tokens/dist/css/spectrum/custom-large-vars.css

@@ -75,6 +75,9 @@
   --spectrum-dialog-confirm-padding-grid:24px;
 
   --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-400);
+  --spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-400);
+  --spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-300);
+  --spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-400);
 
   --spectrum-datepicker-initial-width:160px;
   --spectrum-datepicker-generic-padding:15px;

tokens/dist/css/spectrum/custom-medium-vars.css

@@ -74,6 +74,9 @@
   --spectrum-dialog-confirm-padding-grid:40px;
 
   --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-500);
+  --spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-500);
+	--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-400);
+	--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-500);
 
   --spectrum-datepicker-initial-width:128px;
   --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200);

tokens/dist/index.css

@@ -2580,6 +2580,9 @@
   --spectrum-dialog-confirm-padding-grid:24px;
 
   --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-400);
+  --spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-400);
+  --spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-300);
+  --spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-400);
 
   --spectrum-datepicker-initial-width:160px;
   --spectrum-datepicker-generic-padding:15px;
@@ -4172,6 +4175,9 @@
   --spectrum-dialog-confirm-padding-grid:40px;
 
   --spectrum-standard-dialog-spacing-edge-to-content:var(--spectrum-spacing-500);
+  --spectrum-takeover-dialog-spacing-grid-padding:var(--spectrum-spacing-500);
+	--spectrum-takeover-dialog-spacing-header-gap:var(--spectrum-spacing-400);
+	--spectrum-takeover-dialog-spacing-title-to-body:var(--spectrum-spacing-500);
 
   --spectrum-datepicker-initial-width:128px;
   --spectrum-datepicker-generic-padding:var(--spectrum-spacing-200);