@pnx-mixtape/mxds 0.0.13 → 0.0.14

package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap

@@ -1,100 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Atom/Backgrounds Accent smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--accent">
+    <blockquote>
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
+      </a>
+    </blockquote>
+    <blockquote class="mx-background--reset">
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
+      </a>
+    </blockquote>
+  </div>
+</div>
+`;
+
 exports[`Atom/Backgrounds Alt smoke-test 1`] = `
-<div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--alt">
-  <blockquote>
-    <p>
-      But I must explain to you how all this mistaken idea of denouncing of a
-      <a href="#">
-        pleasure and praising pain
+<div class="mx-page default">
+  <div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--alt">
+    <blockquote>
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
       </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-link--external"
-    >
-      Contact the Lorem Ipsum Squad
-    </a>
-  </blockquote>
-  <blockquote class="mx-background--reset">
-    <p>
-      But I must explain to you how all this mistaken idea of denouncing of a
-      <a href="#">
-        pleasure and praising pain
+    </blockquote>
+    <blockquote class="mx-background--reset">
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
       </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-link--external"
-    >
-      Contact the Lorem Ipsum Squad
-    </a>
-  </blockquote>
+    </blockquote>
+  </div>
 </div>
 `;
 
 exports[`Atom/Backgrounds Backgrounds smoke-test 1`] = `
-<div class="mx-spacing--m mx-rich-text mx-vertical-flow ">
-  <blockquote>
-    <p>
-      But I must explain to you how all this mistaken idea of denouncing of a
-      <a href="#">
-        pleasure and praising pain
+<div class="mx-page default">
+  <div class="mx-spacing--m mx-rich-text mx-vertical-flow ">
+    <blockquote>
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
+      </a>
+    </blockquote>
+    <blockquote class="mx-background--reset">
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
+      </a>
+    </blockquote>
+  </div>
+</div>
+`;
+
+exports[`Atom/Backgrounds Primary smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--primary">
+    <blockquote>
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
       </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-link--external"
-    >
-      Contact the Lorem Ipsum Squad
-    </a>
-  </blockquote>
-  <blockquote class="mx-background--reset">
-    <p>
-      But I must explain to you how all this mistaken idea of denouncing of a
-      <a href="#">
-        pleasure and praising pain
+    </blockquote>
+    <blockquote class="mx-background--reset">
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
       </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-link--external"
-    >
-      Contact the Lorem Ipsum Squad
-    </a>
-  </blockquote>
+    </blockquote>
+  </div>
 </div>
 `;
 
 exports[`Atom/Backgrounds Reverse smoke-test 1`] = `
-<div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--reverse">
-  <blockquote>
-    <p>
-      But I must explain to you how all this mistaken idea of denouncing of a
-      <a href="#">
-        pleasure and praising pain
+<div class="mx-page default">
+  <div class="mx-spacing--m mx-rich-text mx-vertical-flow  mx-background--reverse">
+    <blockquote>
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
       </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-link--external"
-    >
-      Contact the Lorem Ipsum Squad
-    </a>
-  </blockquote>
-  <blockquote class="mx-background--reset">
-    <p>
-      But I must explain to you how all this mistaken idea of denouncing of a
-      <a href="#">
-        pleasure and praising pain
+    </blockquote>
+    <blockquote class="mx-background--reset">
+      <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-link--external"
+      >
+        Contact the Lorem Ipsum Squad
       </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-link--external"
-    >
-      Contact the Lorem Ipsum Squad
-    </a>
-  </blockquote>
+    </blockquote>
+  </div>
 </div>
 `;

package/src/Atom/Background/_background.css

@@ -5,36 +5,39 @@
   :where([class*="mx-background--"]) {
     background-color: var(--background, var(--colour-background));
     color: var(--foreground, var(--colour-foreground));
+    color-scheme: var(--scheme, var(--color-scheme));
   }
 
   .mx-background--reset {
     /* use to revert .background--reverse on children */
+    --scheme: var(--color-scheme);
     --background: var(--colour-background);
     --foreground: var(--colour-foreground);
-    --link-colour: var(--colour-primary);
+    --link-colour: var(--colour-link);
     --line-colour: var(--colour-border);
   }
 
   .mx-background--alt {
+    --scheme: var(--alt-scheme, light);
     --background: var(--colour-background-alt);
   }
 
   .mx-background--primary {
+    --scheme: var(--primary-scheme, dark);
     --background: var(--colour-primary);
-    --foreground: var(--colour-foreground-reverse);
-    --line-colour: var(--colour-border-reverse);
     --link-colour: var(--colour-primary-light);
+    --line-colour: var(--colour-primary-light);
   }
 
   .mx-background--accent {
+    --scheme: var(--accent-scheme, dark);
     --background: var(--colour-accent);
-    --foreground: var(--colour-foreground-reverse);
-    --line-colour: var(--colour-border-reverse);
     --link-colour: var(--colour-accent-light);
+    --line-colour: var(--colour-accent-light);
   }
 
   .mx-background--image {
-    & > img {
+    & img {
       object-fit: cover;
       position: absolute;
       inline-size: 100%;
@@ -46,14 +49,17 @@
   }
 
   .mx-background--reverse {
-    --line-colour: var(--colour-border-reverse);
-    --link-colour: var(--colour-primary-light);
-    --background: var(--colour-background-reverse);
-    --foreground: var(--colour-foreground-reverse);
+    --scheme: var(--reverse-scheme, dark);
 
     & .mx-background--image {
       --bg-img-brightness: 0.45;
       --bg-img-opacity: 1;
     }
   }
+
+  .mx-background--box {
+    border: 1px solid var(--line-colour, var(--colour-border));
+    border-radius: var(--border-radius);
+    padding-inline: var(--gutter, 1rem);
+  }
 }

package/src/Atom/Base.mdx

@@ -1,4 +1,4 @@
-import { Meta, ColorPalette, ColorItem } from "@storybook/blocks"
+import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks"
 
 <Meta title="Atom/Base" />
 
@@ -13,26 +13,34 @@ Base styles and HTML elements, used by all Elements and Components.
     title="Light"
     subtitle="Neutral colours"
     colors={{
-      white: "lch(100% 0 0)",
-      light: "lch(95% 0 0)",
-      mid: "lch(90% 0 0)",
+      white: "oklch(1 0 100)",
+      light: "oklch(0.95 0 100)",
+      mid: "oklch(0.9 0 100)",
     }}
   />
   <ColorItem
     title="Dark"
     subtitle="Neutral colours"
     colors={{
-      black: "lch(0% 0 0)",
-      dark: "lch(10% 0 0)",
-      mid: "lch(25% 0 0)",
+      black: "oklch(0 0 100)",
+      dark: "oklch(0.1 0 100)",
+      mid: "oklch(0.25 0 100)",
+    }}
+  />
+  <ColorItem
+    title="Primary"
+    subtitle="Primary colour"
+    colors={{
+      full: "oklch(0.5 0.3 260)",
+      light: "color-mix(in oklch, oklch(0.5 0.3 260), white 95%)",
     }}
   />
   <ColorItem
     title="Accent"
     subtitle="Accent colour"
     colors={{
-      full: "lch(43% 100 288)",
-      light: "lch(95% 10 288)",
+      full: "oklch(0.5 0.3 320)",
+      light: "color-mix(in oklch, oklch(0.5 0.3 320), white 95%)",
     }}
   />
 </ColorPalette>
@@ -45,32 +53,32 @@ Base styles and HTML elements, used by all Elements and Components.
     title="Success"
     subtitle="Success colour"
     colors={{
-      full: "lch(45% 100 134)",
-      light: "lch(95% 10 134)",
+      full: "oklch(0.5 0.3 140)",
+      light: "color-mix(in oklch, oklch(0.5 0.3 140), white 95%)",
     }}
   />
   <ColorItem
     title="Warning"
     subtitle="Warning colour"
     colors={{
-      full: "lch(46% 100 70)",
-      light: "lch(95% 10 70)",
+      full: "oklch(0.55 0.3 90)",
+      light: "color-mix(in oklch, oklch(0.55 0.3 90), white 95%)",
     }}
   />
   <ColorItem
     title="Error"
     subtitle="Error colour"
     colors={{
-      full: "lch(40% 100 34)",
-      light: "lch(95% 10 34)",
+      full: "oklch(0.5 0.3 20)",
+      light: "color-mix(in oklch, oklch(0.5 0.3 20), white 95%)",
     }}
   />
   <ColorItem
     title="Info"
     subtitle="Info colour"
     colors={{
-      full: "lch(43% 100 288)",
-      light: "lch(95% 10 288)",
+      full: "oklch(0.5 0.3 260)",
+      light: "color-mix(in oklch, oklch(0.5 0.3 260), white 95%)",
     }}
   />
 </ColorPalette>

package/src/Atom/Button/Button.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./button.twig"
 import Icon from "../Icon/icon.twig"
 import "./button.css"
@@ -17,9 +17,6 @@ const meta: Meta<ButtonType> = {
     title: "Button",
     as: ButtonTypes.BUTTON,
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     modifiers: {
       options: Object.values(ButtonModifiers),

package/src/Atom/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Button"
 import { ButtonModifiers } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"

package/src/Atom/Button/__snapshots__/Button.stories.ts.snap

@@ -1,53 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Button Button smoke-test 1`] = `
-<button class="mx-button "
-        type="button"
->
-  <span>
-    Button
-  </span>
-</button>
+<div class="mx-page default">
+  <button class="mx-button "
+          type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+</div>
 `;
 
 exports[`Atom/Button IconButton smoke-test 1`] = `
-<button class="mx-button "
-        type="button"
->
-  <span>
-    Button
-  </span>
-  <span class="mx-icon mx-icon--arrow-right ">
-  </span>
-</button>
+<div class="mx-page default">
+  <button class="mx-button "
+          type="button"
+  >
+    <span>
+      Button
+    </span>
+    <span class="mx-icon mx-icon--arrow-right ">
+    </span>
+  </button>
+</div>
 `;
 
 exports[`Atom/Button Link smoke-test 1`] = `
-<a class="mx-button "
-   href="#"
->
-  <span>
-    Button
-  </span>
-</a>
+<div class="mx-page default">
+  <a class="mx-button "
+     href="#"
+  >
+    <span>
+      Button
+    </span>
+  </a>
+</div>
 `;
 
 exports[`Atom/Button Primary smoke-test 1`] = `
-<button class="mx-button  mx-button--dark"
-        type="button"
->
-  <span>
-    Button
-  </span>
-</button>
+<div class="mx-page default">
+  <button class="mx-button  mx-button--dark"
+          type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+</div>
 `;
 
 exports[`Atom/Button Text smoke-test 1`] = `
-<button class="mx-button  mx-button--light"
-        type="button"
->
-  <span>
-    Button
-  </span>
-</button>
+<div class="mx-page default">
+  <button class="mx-button  mx-button--light"
+          type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+</div>
 `;

package/src/Atom/Button/_buttons-styles.css

@@ -4,8 +4,8 @@
 
 @layer design-system.atoms {
   .mx-button--dark {
-    --button-line-colour: var(--colour-primary);
-    --background: var(--colour-primary);
+    --line-colour: var(--colour-link);
+    --background: var(--colour-link);
     --foreground: var(--colour-foreground-reverse);
 
     &.button--outline {
@@ -16,7 +16,7 @@
 
   .mx-button--light {
     border: transparent;
-    color: var(--link-colour, var(--colour-primary));
+    color: var(--link-colour, var(--colour-link));
     text-decoration-line: underline;
 
     &:hover {
@@ -25,18 +25,18 @@
   }
 
   .mx-button--destructive {
-    --button-line-colour: var(--colour-error-foreground);
-    --background: var(--colour-error-foreground);
+    --line-colour: var(--colour-error);
+    --background: var(--colour-error);
     --foreground: var(--colour-foreground-reverse);
 
     &.button--outline {
       --background: transparent;
-      --foreground: var(--colour-error-foreground);
+      --foreground: var(--colour-error);
     }
   }
 
   .mx-button--white {
-    --button-line-colour: var(--colour-foreground-reverse);
+    --line-colour: var(--colour-foreground-reverse);
     --background: var(--colour-foreground-reverse);
     --foreground: var(--colour-foreground);
 

package/src/Atom/Button/_buttons.css

@@ -5,7 +5,6 @@
 @layer design-system.atoms {
   .mx-button {
     --outline-offset: 1px;
-    --outline-width: 2px;
 
     display: inline-flex;
     inline-size: fit-content;
@@ -15,17 +14,13 @@
     font-family: var(--font-family);
     line-height: var(--line-height-ui);
     border: var(--line-width, 2px) solid
-      var(--button-line-colour, var(--colour-border));
+      var(--line-colour, var(--colour-border));
     border-radius: var(--radius, var(--border-radius-l));
     padding-block: var(--vertical-padding, var(--spacing-xxs));
     padding-inline: var(--horizontal-padding, var(--spacing-m));
     background-color: var(--background, var(--colour-background));
     color: var(--foreground, var(--colour-foreground));
     text-decoration-line: none;
-    transition:
-      0.2s color,
-      0.2s background-color,
-      0.2s border-color;
 
     &:hover {
       cursor: pointer;

package/src/Atom/DefinitionList/DefinitionList.stories.ts

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./definition-list.twig"
+import "../_base.css"
+import { DefinitionList as DefinitionListType } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<DefinitionListType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    items: [
+      {
+        title: "Some title",
+        content: "Some content",
+      },
+      {
+        title: "Another title",
+        content: "More content",
+      },
+      {
+        title: "Yet another title",
+        content: "And even more content",
+      },
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<DefinitionListType>
+
+export const DefinitionList: Story = {
+  args: {},
+}