npm - @pnx-mixtape/mxds - Versions diffs - 0.0.30 → 0.1.0-rc.1 - Mend

@pnx-mixtape/mxds 0.0.30 → 0.1.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1489) hide show

package/src/Atom/Background/__snapshots__/Background.stories.ts.snap CHANGED Viewed

@@ -2,15 +2,75 @@
 exports[`Accent 1`] = `
 "<div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--accent">
-  <div class="mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
+  <div class="mx-vertical-flow">
+    <p class="mx-text--alt"><strong>General check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Colour contrast works</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
   </div>
-  <div class="mx-background--reset mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
+  <div class="mx-background--box mx-background--reverse mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reverse check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Reverse background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--primary mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Primary check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Primary background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--accent mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Accent check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Accent background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reset check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Resets background when no colour is used</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
   </div>
 </div>
 "
@@ -18,15 +78,75 @@ exports[`Accent 1`] = `
 exports[`Alt 1`] = `
 "<div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--alt">
-  <div class="mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
+  <div class="mx-vertical-flow">
+    <p class="mx-text--alt"><strong>General check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Colour contrast works</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--reverse mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reverse check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Reverse background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
   </div>
-  <div class="mx-background--reset mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
+  <div class="mx-background--box mx-background--primary mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Primary check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Primary background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--accent mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Accent check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Accent background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reset check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Resets background when no colour is used</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
   </div>
 </div>
 "
@@ -34,15 +154,75 @@ exports[`Alt 1`] = `
 exports[`Backgrounds 1`] = `
 "<div class="mx-spacing--m mx-rich-text mx-vertical-flow ">
-  <div class="mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
+  <div class="mx-vertical-flow">
+    <p class="mx-text--alt"><strong>General check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Colour contrast works</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--reverse mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reverse check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Reverse background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--primary mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Primary check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Primary background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
   </div>
-  <div class="mx-background--reset mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
+  <div class="mx-background--box mx-background--accent mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Accent check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Accent background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reset check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Resets background when no colour is used</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
   </div>
 </div>
 "
@@ -50,15 +230,75 @@ exports[`Backgrounds 1`] = `
 exports[`Primary 1`] = `
 "<div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--primary">
-  <div class="mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
+  <div class="mx-vertical-flow">
+    <p class="mx-text--alt"><strong>General check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Colour contrast works</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--reverse mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reverse check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Reverse background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--primary mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Primary check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Primary background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--accent mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Accent check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Accent background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
   </div>
-  <div class="mx-background--reset mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
+  <div class="mx-background--box mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reset check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Resets background when no colour is used</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
   </div>
 </div>
 "
@@ -66,15 +306,75 @@ exports[`Primary 1`] = `
 exports[`Reverse 1`] = `
 "<div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--reverse">
-  <div class="mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
-  </div>
-  <div class="mx-background--reset mx-background--box mx-section--m  mx-vertical-flow ">
-    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences.</p>
-    <a href="#" class="mx-button mx-button--dark">Contact us</a> or
-    <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>
+  <div class="mx-vertical-flow">
+    <p class="mx-text--alt"><strong>General check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Colour contrast works</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--reverse mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reverse check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Reverse background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--primary mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Primary check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Primary background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-background--accent mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Accent check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Accent background with auto contrast</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
+  </div>
+  <div class="mx-background--box mx-section--m mx-vertical-flow">
+    <p class="mx-text--alt"><strong>Reset check</strong></p>
+    <p class="mx-text--eyebrow mx-text--embellished">Resets background when no colour is used</p>
+    <p>But I must explain to you how all this mistaken idea of denouncing of a <a href="#">pleasure and praising pain</a> was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences. To find out more <a href="#" class="mx-link--external">Contact the Lorem Ipsum Squad</a>.</p>
+    <p class="mx-text--primary"><strong>Primary text</strong></p>
+    <div class="mx-form-actions">
+      <a href="#" class="mx-button mx-button--dark">Contact us</a>
+      <a href="#" class="mx-button mx-button--dark mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--light">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent">Contact us</a>
+      <a href="#" class="mx-button mx-button--accent mx-button--outline">Contact us</a>
+      <a href="#" class="mx-button mx-button--white">Contact us</a>
+    </div>
   </div>
 </div>
 "

package/src/Atom/Background/_background.css CHANGED Viewed

@@ -1,20 +1,21 @@
 /**
  * Backgrounds
  */
-@layer design-system.atoms {
+@layer design-system.defaults {
   :where([class*="mx-background--"]) {
     background-color: var(--background, var(--colour-background));
     color: var(--foreground, var(--colour-foreground));
     color-scheme: var(--scheme, var(--colour-scheme));
-  }
-  .mx-background--reset {
-    /* use to revert .background--reverse on children */
-    --scheme: var(--colour-scheme);
-    --background: var(--colour-background);
-    --foreground: var(--colour-foreground);
-    --link-colour: var(--colour-link);
-    --line-colour: var(--colour-border);
+    & :where([class*="mx-background--"]) {
+      /* use to revert .background-- styles on children */
+      --scheme: var(--colour-scheme);
+      --background: var(--colour-background);
+      --line-colour: var(--colour-border);
+      --foreground-alt: var(--colour-foreground-alt);
+      --embellished-colour: var(--colour-accent);
+      --button-accent-scheme: dark;
+    }
   }
   .mx-background--alt {
@@ -23,32 +24,30 @@
   }
   .mx-background--primary {
+    --contrast-color: contrast-color(var(--colour-primary));
     --scheme: var(--primary-scheme, var(--colour-primary-scheme, var(--colour-scheme)));
     --background: var(--colour-primary);
     --line-colour: light-dark(var(--colour-primary-darker), var(--colour-primary-lighter));
-    --colour-foreground-alt: var(--colour-primary-light);
+    --foreground-alt: var(--colour-primary-light);
+    --embellished-colour: var(--colour-primary-darker);
+    --button-accent-scheme: light;
   }
   .mx-background--accent {
+    --contrast-color: contrast-color(var(--colour-accent));
     --scheme: var(--accent-scheme, var(--colour-accent-scheme, var(--colour-scheme)));
     --background: var(--colour-accent);
     --line-colour: light-dark(var(--colour-accent-darker), var(--colour-accent-lighter));
-    --icon-colour: var(--colour-foreground);
-  }
-  .mx-background--image {
-    & img {
-      object-fit: cover;
-      position: absolute;
-      inline-size: 100%;
-      min-block-size: 100%;
-      filter: brightness(var(--bg-img-brightness, 1)) saturate(var(--bg-img-saturate, 1.25))
-        opacity(var(--bg-img-opacity, 0.5));
-    }
+    --foreground-alt: var(--colour-accent-darkest);
+    --embellished-colour: var(--colour-accent-darker);
+    --button-accent-scheme: dark;
   }
   .mx-background--reverse {
+    --contrast-color: contrast-color(black);
     --scheme: var(--reverse-scheme, var(--colour-reverse-scheme, dark));
+    --embellished-colour: var(--colour-border);
+    --button-accent-scheme: light;
     & .mx-background--image {
       --bg-img-brightness: 0.45;
@@ -61,4 +60,15 @@
     border-radius: var(--border-radius);
     padding-inline: var(--gutter, 1rem);
   }
+  .mx-background--image {
+    & img {
+      object-fit: cover;
+      position: absolute;
+      inline-size: 100%;
+      min-block-size: 100%;
+      filter: brightness(var(--bg-img-brightness, 1)) saturate(var(--bg-img-saturate, 1.25))
+        opacity(var(--bg-img-opacity, 0.5));
+    }
+  }
 }