@pnx-mixtape/mxds 0.0.13 → 0.0.15

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: {},
+}

package/src/Atom/DefinitionList/DefinitionList.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component, { DefinitionListItem } from "./DefinitionList"
 
 const meta: Meta<typeof Component> = {

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Atom/DefinitionList DefinitionList smoke-test 1`] = `
+<div class="mx-page default">
+  <dl>
+    <div>
+      <dt>
+        Some title
+      </dt>
+      <dd>
+        Some content
+      </dd>
+    </div>
+    <div>
+      <dt>
+        Another title
+      </dt>
+      <dd>
+        More content
+      </dd>
+    </div>
+    <div>
+      <dt>
+        Yet another title
+      </dt>
+      <dd>
+        And even more content
+      </dd>
+    </div>
+  </dl>
+</div>
+`;

package/src/Atom/DefinitionList/definition-list.twig

@@ -0,0 +1,9 @@
+{% set attributes = attributes ?? create_attribute() %}
+<dl{{ attributes }}>
+  {% for item in items %}
+    <div>
+      <dt>{{ item.title }}</dt>
+      <dd>{{ item.content }}</dd>
+    </div>
+  {% endfor %}
+</dl>

package/src/Atom/Heading/Heading.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./heading.twig"
 import "../_base.css"
 import { HeadingTypes } from "@pnx-mixtape/ids-shape"

package/src/Atom/Heading/Heading.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Heading"
 import { HeadingLevels, HeadingStyles } from "../../enums"
 

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

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Heading Headings smoke-test 1`] = `
-<h2>
-  Heading
-</h2>
+<div class="mx-page default">
+  <h2>
+    Heading
+  </h2>
+</div>
 `;

package/src/Atom/Heading/_headings.css

@@ -1,5 +1,28 @@
 @layer design-system.defaults {
   :is(
+    .mx-headline,
+    h1,
+    .mx-heading--xxl,
+    h2,
+    .mx-heading--xl,
+    h3,
+    .mx-heading--l,
+    h4,
+    .mx-heading--m,
+    h5,
+    .mx-heading--s,
+    h6,
+    .mx-heading--xs
+  ) {
+    font-family: var(--heading-font-family, var(--font-family));
+    line-height: var(--line-height-h);
+    font-size: var(--heading-font-size, var(--font-size));
+    font-weight: var(--heading-font-weight, var(--font-weight-bold));
+    text-wrap: balance;
+  }
+
+  @supports (font-size: 1cqi) {
+    :is(
       .mx-headline,
       h1,
       .mx-heading--xxl,
@@ -10,31 +33,8 @@
       h4,
       .mx-heading--m,
       h5,
-      .mx-heading--s,
-      h6,
-      .mx-heading--xs
+      .mx-heading--s
     ) {
-    font-family: var(--heading-font-family, var(--font-family));
-    line-height: var(--line-height-h);
-    font-size: var(--heading-font-size, var(--font-size));
-    font-weight: var(--heading-font-weight, var(--font-weight-bold));
-    text-wrap: balance;
-  }
-
-  @supports (font-size: 1cqi) {
-    :is(
-        .mx-headline,
-        h1,
-        .mx-heading--xxl,
-        h2,
-        .mx-heading--xl,
-        h3,
-        .mx-heading--l,
-        h4,
-        .mx-heading--m,
-        h5,
-        .mx-heading--s
-      ) {
       --font-min: calc(
         var(--heading-font-size) - var(--heading-font-size) *
           var(--font-size-diff, 0.3)

package/src/Atom/Icon/Icon.mdx

@@ -5,7 +5,7 @@ import {
   IconGallery,
   IconItem,
   Stories,
-} from "@storybook/blocks"
+} from "@storybook/addon-docs/blocks"
 import * as IconStories from "./Icon.stories"
 import { Icons } from "../../enums"
 

package/src/Atom/Icon/Icon.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./icon.twig"
 import "./icon.css"
 import {

package/src/Atom/Icon/Icon.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Icon"
 import { Icons } from "../../enums"
 import {

package/src/Atom/Icon/Icon.tsx

@@ -3,8 +3,8 @@ import classNames from "classnames"
 import { Icons } from "../../enums"
 import { Icon as IconType } from "@pnx-mixtape/ids-shape"
 
-type IconProps = IconType & {
-  icon: Icons
+export type IconProps = IconType & {
+  icon: Icons[]
 }
 
 const Icon = ({

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

@@ -1,18 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Icon Alignment smoke-test 1`] = `
-<span class="mx-icon mx-icon--arrow-left mx-icon--end ">
-  Message with icon
-</span>
+<div class="mx-page default">
+  <span class="mx-icon mx-icon--arrow-left mx-icon--end ">
+    Message with icon
+  </span>
+</div>
 `;
 
 exports[`Atom/Icon Icon smoke-test 1`] = `
-<span class="mx-icon mx-icon--arrow-right ">
-</span>
+<div class="mx-page default">
+  <span class="mx-icon mx-icon--arrow-right ">
+  </span>
+</div>
 `;
 
 exports[`Atom/Icon WithText smoke-test 1`] = `
-<span class="mx-icon mx-icon--arrow-right ">
-  Message with icon
-</span>
+<div class="mx-page default">
+  <span class="mx-icon mx-icon--arrow-right ">
+    Message with icon
+  </span>
+</div>
 `;

package/src/Atom/Icon/_icon.css

@@ -76,19 +76,19 @@
 
 @layer design-system.atoms {
   .mx-icon--color-info::before {
-    color: var(--colour-info-foreground);
+    color: var(--colour-info);
   }
 
   .mx-icon--color-error::before {
-    color: var(--colour-error-foreground);
+    color: var(--colour-error);
   }
 
   .mx-icon--color-warning::before {
-    color: var(--colour-warning-foreground);
+    color: var(--colour-warning);
   }
 
   .mx-icon--color-success::before {
-    color: var(--colour-success-foreground);
+    color: var(--colour-success);
   }
 
   .mx-icon--color-brand::before {

package/src/Atom/Image/Image.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./image.twig"
 import "../_base.css"
 import { Image as ImageType } from "@pnx-mixtape/ids-shape"

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

@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Image Image smoke-test 1`] = `
-<picture>
-  <img src="https://picsum.photos/id/56/558/418?grayscale"
-       alt="A picsum image"
-  >
-</picture>
+<div class="mx-page default">
+  <picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale"
+         alt="A picsum image"
+    >
+  </picture>
+</div>
 `;

package/src/Atom/Image/_image.css

@@ -2,12 +2,7 @@
   figure {
     margin: 0;
     display: table;
-    max-inline-size: 100%;
-
-    & img {
-      inline-size: 100%;
-      vertical-align: baseline;
-    }
+    inline-size: fit-content;
   }
 
   figcaption {
@@ -18,7 +13,7 @@
   }
 
   img {
-    vertical-align: text-bottom;
+    vertical-align: bottom;
     max-inline-size: 100%;
     block-size: auto;
   }