Add page margin token

Author: joshwooding

.changeset/heavy-pandas-strive.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/theme": minor
+---
+
+Added a new layout characteristic to the theme. This also adds `--salt-layout-page-margin` for the margin around the main content area and `--salt-layout-gap` for gutters.

packages/theme/css/legacy/characteristics/layout.css

@@ -0,0 +1,12 @@
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-layout-page-margin: var(--salt-spacing-300);
+  --salt-layout-gap: var(--salt-spacing-300);
+}
+
+.salt-density-touch,
+.salt-density-mobile {
+  --salt-layout-page-margin: var(--salt-spacing-100);
+  --salt-layout-gap: var(--salt-spacing-100);
+}

packages/theme/css/next/characteristics/layout.css

@@ -0,0 +1,12 @@
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-layout-page-margin: var(--salt-spacing-300);
+  --salt-layout-gap: var(--salt-spacing-300);
+}
+
+.salt-density-touch,
+.salt-density-mobile {
+  --salt-layout-page-margin: var(--salt-spacing-100);
+  --salt-layout-gap: var(--salt-spacing-100);
+}

packages/theme/css/theme-next.css

@@ -27,6 +27,7 @@
 @import url(next/characteristics/content.css);
 @import url(next/characteristics/editable.css);
 @import url(next/characteristics/focused.css);
+@import url(next/characteristics/layout.css);
 @import url(next/characteristics/navigable.css);
 @import url(next/characteristics/overlayable.css);
 @import url(next/characteristics/selectable.css);

packages/theme/css/theme.css

@@ -29,6 +29,7 @@
 @import url(legacy/characteristics/content.css);
 @import url(legacy/characteristics/editable.css);
 @import url(legacy/characteristics/focused.css);
+@import url(legacy/characteristics/layout.css);
 @import url(legacy/characteristics/navigable.css);
 @import url(legacy/characteristics/overlayable.css);
 @import url(legacy/characteristics/selectable.css);