Improving and fixing misc issues with background docs

docs/background-attachment.md

@@ -13,67 +13,47 @@ Utilities for controlling how a background image behaves when scrolling.
 ### Fixed
 Use `bg-fixed` to fix the background image relative to the viewport.
 
-<container>
-<div class="position:relative">
-  <div class="-my-32 mx-32 overflow-hidden" style="background-image:url('50s-scientists.jpg'); background-position: center -280px;">
-    <div class="h-[320] pd-shadow-lg overflow-y-scroll overscroll-contain">
-      <div class="pd-bg-white/90 p-16 sm:p-24 mt-144">
-        <div class="pd-text-black font-bold">The science</div>
-        <div class="mt-1 pd-text-sm pd-text-slate-500">March 9th, 2023 · 14 min read</div>
-        <p class="mt-16 pd-text-slate-500">General Relativity states that space and time are fused and that nothing can travel faster than the speed of light. General relativity also describes how mass and energy warp spacetime – hefty objects like stars and black holes curve spacetime around them. This curvature is what you feel as gravity and why many space-faring heroes worry about “getting stuck in” or “falling into” a gravity well.</p>
-        <p class="mt-16 pd-text-slate-500">In some respects the force was electricity, but it was of a higher energy order, containing inherent magnetic properties in a complete union of a kind only vaguely suggested by the term “electromagnetic,” in which the two forces involved are more or less mutually exclusive, the one giving rise to the other.</p>
-      </div>
-    </div>
-  </div>
+<container class="bg-fixed bg-[url(office-warping.png)] overflow-hidden h-[240] overflow-y-scroll overscroll-contain">
+  <div class="pd-bg-slate-800/80 pd-shadow-lg p-32 rounded-8 text-center sm:mx-[10%] sm:my-32 pd-text-white">
+    <h3 class="mt-8! h1!">The science</h3>
+    <p class="pd-text-sm pd-text-gray-300">March 9th, 2023 · 14 min read</p>
+    <p class="pd-text-lg">General Relativity states that space and time are fused and that nothing can travel faster than the speed of light. General relativity also describes how mass and energy warp spacetime – hefty objects like stars and black holes curve spacetime around them. This curvature is what you feel as gravity and why many space-faring heroes worry about “getting stuck in” or “falling into” a gravity well.</p>
+    <p class="pd-text-lg">In some respects the force was electricity, but it was of a higher energy order, containing inherent magnetic properties in a complete union of a kind only vaguely suggested by the term “electromagnetic,” in which the two forces involved are more or less mutually exclusive, the one giving rise to the other.</p>
   </div>
 </container>
 
 ```html
-<div class="bg-fixed ...">
-  <!-- -->
-</div>
+<div class="bg-fixed ..."></div>
 ```
 
 ### Local
 Use `bg-local` to scroll the background image with the container and the viewport.
 
-<container>
-  <div class="-my-32 mx-32 overflow-hidden">
-    <div class="h-[320] bg-local pd-shadow-lg overflow-y-scroll overscroll-contain" style="background-image:url('50s-scientists.jpg'); background-position: center 0;">
-      <div class="px-40 py-16" style="margin-bottom:240px;">
-        <div class="pd-bg-slate-800/50 p-16 rounded-8 text-center">
-          <p class="mt-16 pd-text-white pd-text-xl font-bold">"Hefty objects like stars and black holes curve spacetime around them. This curvature is what you feel as gravity and why many space-faring heroes worry about getting stuck in or falling into a gravity well!"</p>
-          <p class="text-center pd-text-white">- Justina Matter</p>
-        </div>
-      </div>
-    </div>
+<container class="bg-local bg-[url(office-warping.png)] overflow-hidden h-[240] overflow-y-scroll overscroll-contain">
+  <div class="pd-bg-slate-800/80 pd-shadow-lg p-32 rounded-8 text-center sm:mx-[10%] sm:my-32 pd-text-white">
+    <h3 class="mt-8! h1!">The science</h3>
+    <p class="pd-text-sm pd-text-gray-300">March 9th, 2023 · 14 min read</p>
+    <p class="pd-text-lg">General Relativity states that space and time are fused and that nothing can travel faster than the speed of light. General relativity also describes how mass and energy warp spacetime – hefty objects like stars and black holes curve spacetime around them. This curvature is what you feel as gravity and why many space-faring heroes worry about “getting stuck in” or “falling into” a gravity well.</p>
+    <p class="pd-text-lg">In some respects the force was electricity, but it was of a higher energy order, containing inherent magnetic properties in a complete union of a kind only vaguely suggested by the term “electromagnetic,” in which the two forces involved are more or less mutually exclusive, the one giving rise to the other.</p>
   </div>
 </container>
 
 ```html
-<div class="bg-local ...">
-  <!-- -->
-</div>
+<div class="bg-local ..."></div>
 ```
 
 ### Scroll
 Use `bg-scroll` to scroll the background image with the viewport, but not with the container.
 
-<container>
-  <div class="-my-32 mx-32 overflow-hidden">
-    <div class="h-[320] bg-scroll pd-shadow-lg overflow-y-scroll overscroll-contain" style="background-image:url('50s-scientists.jpg'); background-position: center -200px;">
-      <div class="px-40 py-16" style="margin-bottom:240px;">
-        <div class=" pd-bg-slate-800/50 p-16 rounded-8 text-center">
-          <p class="mt-16 pd-text-white pd-text-xl font-bold">"Hefty objects like stars and black holes curve spacetime around them. This curvature is what you feel as gravity and why many space-faring heroes worry about getting stuck in or falling into a gravity well!"</p>
-          <p class="text-center pd-text-white">- Justina Matter</p>
-        </div>
-      </div>
-    </div>
+<container class="bg-scroll bg-[url(office-warping.png)] overflow-hidden h-[240] overflow-y-scroll overscroll-contain">
+  <div class="pd-bg-slate-800/80 pd-shadow-lg p-32 rounded-8 text-center sm:mx-[10%] sm:my-32 pd-text-white">
+    <h3 class="mt-8! h1!">The science</h3>
+    <p class="pd-text-sm pd-text-gray-300">March 9th, 2023 · 14 min read</p>
+    <p class="pd-text-lg">General Relativity states that space and time are fused and that nothing can travel faster than the speed of light. General relativity also describes how mass and energy warp spacetime – hefty objects like stars and black holes curve spacetime around them. This curvature is what you feel as gravity and why many space-faring heroes worry about “getting stuck in” or “falling into” a gravity well.</p>
+    <p class="pd-text-lg">In some respects the force was electricity, but it was of a higher energy order, containing inherent magnetic properties in a complete union of a kind only vaguely suggested by the term “electromagnetic,” in which the two forces involved are more or less mutually exclusive, the one giving rise to the other.</p>
   </div>
 </container>
 
 ```html
-<div class="bg-scroll ...">
-  <!-- -->
-</div>
+<div class="bg-scroll ..."></div>
 ```

docs/background-clip.md

@@ -14,18 +14,18 @@ Utilities for controlling the bounding box of an element's background.
 Use the `bg-clip-{keyword}` utilities to control the bounding box of an element’s background.
 
 <container>
-  <div class="flex flex-col sm:flex-row items-center justify-center gap-32">
-    <div class="flex flex-col items-center shrink-0">
-      <p class="pd-text-slate-500 pd-font-mono text-center mb-16 dark:pd-text-slate-400">bg-clip-border</p>
-      <div class="w-80 h-80 bg-clip-border p-16 rounded-8 pd-shadow-lg pd-bg-indigo-500 border-4 pd-border-white/50 border-dashed pd-font-mono pd-font-extrabold pd-text-sm pd-text-white flex justify-center items-center"></div>
+  <div class="flex sm:grid sm:grid-cols-3 sm:gap-24 sm:justify-around">
+    <div class="flex flex-col justify-self-center place-items-center">
+      <h4 class="m-[0_0_16px_0]! font-normal! pd-font-mono">bg-clip-border</h4>
+      <div class="w-128 h-128 bg-clip-border p-16 rounded-8 pd-shadow-lg pd-bg-indigo-500 border-8 pd-border-white/50 border-dashed"><span class="sr-only">Visual example of <code>bg-clip-border</code></span></div>
     </div>
-    <div class="flex flex-col items-center shrink-0">
-      <p class="pd-text-slate-500 pd-font-mono text-center mb-16 dark:pd-text-slate-400">bg-clip-padding</p>
-      <div class="w-80 h-80 bg-clip-padding p-16 rounded-8 pd-shadow-lg pd-bg-indigo-500 border-4 pd-border-indigo-500/50 border-dashed pd-font-mono pd-font-extrabold pd-text-sm pd-text-white flex justify-center items-center"></div>
+    <div class="flex flex-col justify-self-center place-items-center">
+      <h4 class="m-[0_0_16px_0]! font-normal! pd-font-mono">bg-clip-padding</h4>
+      <div class="w-128 h-128 bg-clip-padding p-16 rounded-8 pd-shadow-lg pd-bg-indigo-500 border-8 pd-border-indigo-500/50 border-dashed"><span class="sr-only">Visual example of <code>bg-clip-padding</code></span></div>
     </div>
-    <div class="flex flex-col items-center shrink-0">
-      <p class="pd-text-slate-500 pd-font-mono text-center mb-16 dark:pd-text-slate-400">bg-clip-content</p>
-      <div class="w-80 h-80 bg-clip-content p-16 rounded-8 pd-bg-indigo-500 border-4 pd-border-indigo-500/50 border-dashed pd-font-mono pd-font-extrabold pd-text-sm pd-text-white flex justify-center items-center"></div>
+    <div class="flex flex-col justify-self-center place-items-center">
+      <h4 class="m-[0_0_16px_0]! font-normal! pd-font-mono">bg-clip-content</h4>
+      <div class="w-128 h-128 bg-clip-content p-16 rounded-8 pd-bg-indigo-500 border-8 pd-border-indigo-500/50 border-dashed"><span class="sr-only">Visual example of <code>bg-clip-content</code></span></div>
     </div>
   </div>
 </container>
@@ -41,14 +41,16 @@ Use `bg-clip-text` to crop an element’s background to match the shape of the t
 
 <container>
   <div class="pd-text-5xl pd-font-extrabold text-center">
-    <span class="bg-clip-text bg-cover pd-text-transparent" style="background-image:url(office-warping.png); background-position: center -280px; ">
+    <span class="bg-clip-text bg-cover text-transparent bg-[url(office-warping.png)]">
       Warp speed
     </span>
   </div>
 </container>
 
 ```html
-<span class="bg-clip-text bg-cover text-transparent" style="background-image:url(...);">
+<span class="bg-clip-text bg-cover text-transparent bg-[url(...)]">
+  Warp speed
+</span>
 ```
 
 

docs/background-color.md

@@ -41,26 +41,20 @@ Control the background color of an element using the `bg-{transparent|inherit|cu
 ### Hover, focus and other states
 
 Conditionally apply utility classes in different states using variant modifiers.
-For example, use `hover:s-bg-positive` to only apply the `s-bg-positive` utility on hover.
+For example, use `hover:s-bg-hover` to only apply the `s-bg-hover` utility on hover.
 
 <container>
   <div class="grid grid-cols-3 gap-16 justify-items-center">
-    <div class="h-80 w-80 border rounded-16 s-bg hover:s-bg-hover active:s-bg-active active:hover:s-bg-active-hover"></div>
-    <div class="h-80 w-80 border rounded-16 s-bg-info hover:s-bg-info-hover active:s-bg-info-active active:hover:s-bg-info-active-hover"></div>
-    <div class="h-80 w-80 border rounded-16 s-bg-warning hover:s-bg-warning-hover active:s-bg-warning-active active:hover:s-bg-warning-active-hover"></div>
+    <div class="h-80 w-80 border rounded-16 s-bg hover:s-bg-hover active:s-bg-active"></div>
+    <div class="h-80 w-80 border rounded-16 s-bg-info hover:s-bg-info-hover active:s-bg-info-active"></div>
+    <div class="h-80 w-80 border rounded-16 s-bg-warning hover:s-bg-warning-hover active:s-bg-warning-active"></div>
   </div>
 </container>
 
 ```html
-<div
-  class="s-bg hover:s-bg-hover active:s-bg-active active:hover:s-bg-active-hover ..."
-></div>
-<div
-  class="s-bg-info hover:s-bg-info-hover active:s-bg-info-active active:hover:s-bg-info-active-hover ..."
-></div>
-<div
-  class="s-bg-warning hover:s-bg-warning-hover active:s-bg-warning-active active:hover:s-bg-warning-active-hover ..."
-></div>
+<div class="s-bg hover:s-bg-hover active:s-bg-active ..."></div>
+<div class="s-bg-info hover:s-bg-info-hover active:s-bg-info-active ..."></div>
+<div class="s-bg-warning hover:s-bg-warning-hover active:s-bg-warning-active ..."></div>
 ```
 
 ### Breakpoints and media queries

docs/background-image.md

@@ -4,24 +4,21 @@
 
 Utilities for controlling an element's background image.
 
-::: warning Unsupported
-This functionality is not yet supported! If you need this, reach out to us on [#nmp-warp-design-system](https://sch-chat.slack.com/archives/C04P0GYTHPV).
-:::
-
 ## Quick reference
 
 <qr-table />
 
-! TODO: Add support for bg-none
+> `{url}`: _Any valid image url_
 
 ## Basic usage
 
 ### Arbitrary values
-If you need to use a one-off `background-image` value that doesn't make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
+If you need to use a one-off `background-image` value, use square brackets to generate a property on the fly using any url.
+
+<container class="h-144 bg-cover bg-center bg-no-repeat bg-[url(20s-scientists.jpg)]">
+</container>
 
 ```html
-<div class="bg-[url('...')]">
-  <!-- ... -->
-</div>
+<div class="bg-[url(...)] ..."></div>
 ```
 

docs/background-origin.md

@@ -1,29 +1,32 @@
 > Backgrounds
 
 # Background Origin
+
 Utilities for controlling how an element's background is positioned relative to borders, padding, and content.
-​
+
 ## Quick reference
+
 <qr-table />
 
 ## Basic usage
+
 ### Setting the background origin
-Use `bg-origin-border`, `bg-origin-padding`, and `bg-origin-content` to control where an element’s background is rendered.
+Use `bg-origin-border`, `bg-origin-padding` and `bg-origin-content` to control where an element’s background is rendered.
 
 <container>
-  <div class="flex flex-col sm:flex-row items-center justify-center gap-32">
-  <div class="flex flex-col items-center shrink-0">
-  <p class="pd-text-slate-500 pd-font-mono text-center mb-16 dark:pd-text-slate-400">bg-origin-border</p>
-    <div class="w-80 h-80 bg-cover bg-clip-border p-16 rounded-8 pd-shadow-lg pd-bg-indigo-500 border-4 pd-border-white/50 border-dashed pd-font-mono pd-font-extrabold pd-text-sm pd-text-white flex justify-center items-center" style="background-image:url(/office-warping.png); background-position: center -280px; "></div>
-  </div>
-  <div class="flex flex-col items-center shrink-0">
-  <p class="pd-text-slate-500 pd-font-mono text-center mb-16 dark:pd-text-slate-400">bg-origin-padding</p>
-    <div class="w-80 h-80 bg-cover bg-clip-padding p-16 rounded-8 pd-shadow-lg pd-bg-indigo-500 border-4 pd-border-indigo-500/50 border-dashed pd-font-mono pd-font-extrabold pd-text-sm pd-text-white flex justify-center items-center" style="background-image:url(/office-warping.png); background-position: center -280px; "></div>
+  <div class="flex sm:grid sm:grid-cols-3 sm:gap-24 sm:justify-around">
+    <div class="flex flex-col justify-self-center place-items-center">
+      <div class="mb-16 pd-font-mono">bg-origin-border</div>
+      <div class="w-128 h-128 bg-cover bg-clip-border p-16 rounded-8 pd-shadow-lg pd-bg-indigo-500 border-8 pd-border-white/50 border-dashed pd-font-mono pd-font-extrabold pd-text-sm pd-text-white flex justify-center items-center bg-[url(office-warping.png)] bg-[center_-280px]"></div>
+    </div>
+    <div class="flex flex-col justify-self-center place-items-center">
+      <div class="mb-16 pd-font-mono">bg-origin-padding</div>
+      <div class="w-128 h-128 bg-cover bg-clip-padding p-16 rounded-8 pd-shadow-lg pd-bg-indigo-500 border-8 pd-border-indigo-500/50 border-dashed pd-font-mono pd-font-extrabold pd-text-sm pd-text-white flex justify-center items-center bg-[url(office-warping.png)] bg-[center_-280px]"></div>
+    </div>
+    <div class="flex flex-col justify-self-center place-items-center">
+      <div class="mb-16 pd-font-mono">bg-origin-content</div>
+      <div class="w-128 h-128 bg-cover bg-clip-content p-16 rounded-8 pd-bg-indigo-500 border-8 pd-border-indigo-500/50 border-dashed pd-font-mono pd-font-extrabold pd-text-sm pd-text-white flex justify-center items-center bg-[url(office-warping.png)] bg-[center_-280px]"></div>
     </div>
-    <div class="flex flex-col items-center shrink-0">
-  <p class="pd-text-slate-500 pd-font-mono text-center mb-16 dark:pd-text-slate-400">bg-origin-content</p>
-    <div class="w-80 h-80 bg-cover bg-clip-content p-16 rounded-8 pd-bg-indigo-500 border-4 pd-border-indigo-500/50 border-dashed pd-font-mono pd-font-extrabold pd-text-sm pd-text-white flex justify-center items-center" style="background-image:url(/office-warping.png); background-position: center -280px; "></div>
-  </div>
   </div>
 </container>