@pnx-mixtape/mxds 0.1.0-rc.0 → 0.1.0-rc.2

package/.storybook/decorators.ts

@@ -3,5 +3,20 @@ import { Decorator } from "@storybook/html-vite"
 
 export const Page: Decorator = (story, { globals }) => {
   const { background } = globals
+  if (background === "theme--demo") {
+    import("./themes/demo.css")
+  }
+  if (background === "theme--civic-formal") {
+    import("./themes/civic-formal.css")
+  }
+  if (background === "theme--health-services") {
+    import("./themes/health-services.css")
+  }
+  if (background === "theme--research-faculty") {
+    import("./themes/research-faculty.css")
+  }
+  if (background === "theme--campus-vibrant") {
+    import("./themes/campus-vibrant.css")
+  }
   return `<div class="mx-page ${background}" data-testid="page">${story()}</div>`
 }

package/.storybook/preview.ts

@@ -11,7 +11,6 @@ import "../src/Atom/Icon/icon.css"
 import "../src/Atom/Button/button.css"
 import "../src/Form/form.css"
 import "../src/Component/Navigation/navigation.css"
-import "./theme-demo.css"
 import { Page } from "./decorators"
 
 const preview: Preview = {
@@ -59,6 +58,10 @@ const preview: Preview = {
           "mx-background--primary",
           "mx-background--accent",
           "theme--demo",
+          "theme--campus-vibrant",
+          "theme--research-faculty",
+          "theme--civic-formal",
+          "theme--health-services",
         ],
       },
     },

package/.storybook/themes/campus-vibrant.css

@@ -0,0 +1,181 @@
+/* Campus Vibrant — Mixtape theme
+ * Persona: undergraduate-facing higher ed (open days, course marketing).
+ * Part 1 is token overrides only. Part 2 is a small unlayered personality
+ * layer (shapes, motion, card lift) — unlayered CSS beats every design-system
+ * layer without !important, so no component internals are touched.
+ */
+
+@import "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,800;1,600&family=Public+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap";
+
+.theme--campus-vibrant {
+  /* Colour. Every primary/accent shade in the system is color-mix()'d off
+     these two, so the whole palette moves with them. */
+  --colour-primary: #a02000;
+  --colour-accent: #fcafda;
+  --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
+  --colour-primary-lighter: color-mix(in oklch, var(--colour-primary), white 20%);
+  --colour-primary-darker: color-mix(in oklch, var(--colour-primary), black 20%);
+  --colour-primary-dark: color-mix(in oklch, var(--colour-primary), black 40%);
+  --colour-primary-darkest: color-mix(in oklch, var(--colour-primary), black 50%);
+  --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
+  --colour-accent-lighter: color-mix(in oklch, var(--colour-accent), white 20%);
+  --colour-accent-darker: color-mix(in oklch, var(--colour-accent), black 10%);
+  --colour-accent-dark: color-mix(in oklch, var(--colour-accent), black 40%);
+  --colour-accent-darkest: color-mix(in oklch, var(--colour-accent), black 50%);
+
+  --colour-foreground: light-dark(#1a1014, #fff);
+  --colour-foreground-alt: light-dark(#6b4a44, #f0d6c6);
+  --colour-background: light-dark(#fff, #1a1014);
+  --colour-background-alt: light-dark(#fff4ec, #6b4a44);
+  --colour-border: light-dark(#f0d6c6, #6b4a44);
+  --colour-link: light-dark(var(--colour-primary), #f0d6c6);
+  --colour-foreground-reverse: light-dark(#fff, #1a1014);
+  --colour-background-reverse: light-dark(#1a1014, #fff);
+  --_colour-outline: light-dark(#b3280a, #f0d6c6);
+
+  /* Type: high-contrast serif display over a workhorse sans. */
+  --font-family: "Public Sans", system-ui, sans-serif;
+  --font-family-display: "Playfair Display", georgia, serif;
+  --type-ratio: 1.5;
+  --font-size: var(--base-font-size);
+  --font-size-xs: calc(var(--base-font-size) * pow(var(--type-ratio), -0.5));
+  --font-size-s: calc(var(--base-font-size) * pow(var(--type-ratio), -0.25));
+  --font-size-m: 1rem;
+  --font-size-ml: calc(var(--base-font-size) * pow(var(--type-ratio), 0.5));
+  --font-size-l: calc(var(--base-font-size) * pow(var(--type-ratio), 1));
+  --font-size-xl: calc(var(--base-font-size) * pow(var(--type-ratio), 2));
+  --font-size-xxl: calc(var(--base-font-size) * pow(var(--type-ratio), 3));
+  --font-size-xxxl: calc(var(--base-font-size) * pow(var(--type-ratio), 4));
+
+  /* Shape */
+  --border-radius: 1rem;
+  --border-radius-l: 2.5rem;
+  --hero-image-radius: 2rem;
+  --popover-radius: 1rem;
+  --container-max-width: 90ch;
+  --container-max-width-narrow: 50rem;
+  --section-xl: 7rem;
+
+  /* Depth and motion */
+  --shadow-color: #1a101426;
+  --shadow-size: 1.25em;
+  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  /* Component-level warmth */
+  --tag-background: #ff9bd2;
+  --tag-foreground: #1a1014;
+  --tag-font-size: var(--font-size-s);
+  --icon-size: 1rem;
+  --alert-background: var(--colour-accent-light);
+  --button-font-size: var(--font-size-m);
+  --card-gap: var(--gap-l);
+
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+
+  /* Display type. Serif headings, tight and optically sized; body stays sans. */
+
+  & :is(h1, h2, h3) {
+    --line-height-h: 1.04;
+    --heading-letter-spacing: -0.02em;
+
+    text-wrap: balance;
+  }
+
+  & :is(h4, h5, h6) {
+    --heading-font-family: var(--font-family);
+    --heading-letter-spacing: -0.01em;
+  }
+
+  & .mx-text--lede {
+    --font-size: var(--font-size-ml);
+  }
+
+  /* Pill buttons with a physical press. */
+
+  & .mx-button {
+    --radius: 999px;
+
+    transition:
+      transform 0.18s var(--ease),
+      box-shadow 0.18s var(--ease),
+      background-color 0.18s var(--ease);
+  }
+
+  & .mx-button:not(:disabled):hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0.5em 1.25em #1a101426;
+  }
+
+  & .mx-button:not(:disabled):active {
+    transform: translateY(0);
+  }
+
+  /* Tags read as stickers. */
+
+  & .mx-tag {
+    --border-radius: 999px;
+    --horizontal-padding: 0.75em;
+    --line-width: 0;
+  }
+
+  /* Cards: rounded, cropped media, a lift on hover. */
+
+  & .mx-card--block:not(.mx-list-item) {
+    --card-gap: 0;
+
+    border-radius: var(--border-radius-l);
+    overflow: clip;
+    background: var(--background, var(--colour-background));
+    box-shadow: 0 0.125em 0.5em #1a10140f;
+    transition:
+      transform 0.24s var(--ease),
+      box-shadow 0.24s var(--ease);
+
+    &:hover {
+      transform: translateY(-6px);
+      box-shadow: 0 1em 2em #1a101424;
+    }
+
+    & .mx-card__content {
+      padding: var(--spacing-m);
+    }
+  }
+
+  & .mx-card__media img {
+    border-radius: var(--border-radius);
+  }
+
+  & mx-accordion {
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-s);
+    }
+  }
+
+  & .mx-accordion {
+    --horizontal-padding: var(--spacing-xs);
+
+    border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
+    border-radius: var(--border-radius);
+    background-color: var(--colour-background-alt);
+  }
+
+  & .mx-accordion__toggle {
+    --font-weight-normal: 700;
+
+    & .mx-button {
+      border-color: transparent;
+    }
+  }
+
+  & .mx-accordion__content {
+    border-block-start-width: 0px;
+    background-color: var(--colour-background);
+    border-radius: var(--border-radius);
+  }
+
+  & .outcome {
+    border-radius: var(--border-radius-l);
+  }
+}

package/.storybook/themes/civic-formal.css

@@ -0,0 +1,246 @@
+/* Civic Formal — Mixtape theme
+ * Persona: Australian federal or state government department.
+ * Restrained and authoritative: low saturation, square corners, structured
+ * grid, generous whitespace, AAA contrast wherever the pairing allows.
+ *
+ * Part 1 is token overrides only. Part 2 is unlayered CSS for the shapes a
+ * department page needs and Mixtape does not ship: dense data tables,
+ * strict validation states, and formal document furniture (media release
+ * mastheads, official metadata blocks, legislative-style numbered clauses).
+ * Unlayered CSS beats every design-system layer without !important.
+ */
+
+@import "https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap";
+
+.theme--civic-formal {
+  --colour-primary: #1f3a5f;
+  --colour-accent: #97e3fa;
+
+  --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
+  --colour-primary-lighter: color-mix(in oklch, var(--colour-primary), white 20%);
+  --colour-primary-darker: color-mix(in oklch, var(--colour-primary), black 20%);
+  --colour-primary-dark: color-mix(in oklch, var(--colour-primary), black 40%);
+  --colour-primary-darkest: color-mix(in oklch, var(--colour-primary), black 50%);
+  --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
+  --colour-accent-lighter: color-mix(in oklch, var(--colour-accent), white 20%);
+  --colour-accent-darker: color-mix(in oklch, var(--colour-accent), black 10%);
+  --colour-accent-dark: color-mix(in oklch, var(--colour-accent), black 40%);
+  --colour-accent-darkest: color-mix(in oklch, var(--colour-accent), black 50%);
+
+  --colour-foreground: light-dark(#16181c, #fff);
+  --colour-foreground-alt: light-dark(#4a4f57, #eff1f3);
+  --colour-background: light-dark(#fff, #16181c);
+  --colour-background-alt: light-dark(#eff1f3, #4a4f57);
+  --colour-link: light-dark(#183e72, #eff1f3);
+  --colour-foreground-reverse: light-dark(#fff, #16181c);
+  --colour-background-reverse: light-dark(#16181c, #fff);
+  --_colour-outline: light-dark(#1f3a5f, #eff1f3);
+
+  /* Type: Public Sans for interface and headings, Lora for document prose.
+     A restrained 1.28 ratio — the page is read, not scanned. */
+  --font-family: "Public Sans", system-ui, sans-serif;
+  --font-family-prose: "Lora", georgia, serif;
+  --type-ratio: 1.28;
+  --font-size: var(--base-font-size);
+  --font-size-xs: calc(var(--base-font-size) * pow(var(--type-ratio), -0.5));
+  --font-size-s: calc(var(--base-font-size) * pow(var(--type-ratio), -0.25));
+  --font-size-m: 1rem;
+  --font-size-ml: calc(var(--base-font-size) * pow(var(--type-ratio), 0.5));
+  --font-size-l: calc(var(--base-font-size) * pow(var(--type-ratio), 1));
+  --font-size-xl: calc(var(--base-font-size) * pow(var(--type-ratio), 2));
+  --font-size-xxl: calc(var(--base-font-size) * pow(var(--type-ratio), 3));
+  --font-size-xxxl: calc(var(--base-font-size) * pow(var(--type-ratio), 4));
+
+  /* Shape: square. One radius value, and it is zero. */
+  --border-radius: 0;
+  --border-radius-l: 0;
+  --hero-image-radius: 0;
+  --popover-radius: 0;
+
+  --shadow-color: #16181c1f;
+  --shadow-size: 0.35em;
+
+  --tag-background: #e3e7ec;
+  --tag-foreground: #1f3a5f;
+  --tag-font-size: var(--font-size-xs);
+  --button-font-size: var(--font-size-s);
+  --icon-size: 1rem;
+
+  /* Form geometry: taller targets, visible 2px rules, explicit required text. */
+  --form-element-height: 3rem;
+  --control-size: 1.5rem;
+  --placeholder-colour: var(--colour-foreground-alt);
+  --colour-error: #8c1d18;
+  --colour-success: #1d5c37;
+
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+
+  & .mx-header {
+    border-block-end: 4px solid var(--colour-primary);
+  }
+
+  & .mx-footer {
+    --scheme: light;
+    --background: var(--colour-accent-light);
+
+    border-block-start: 2px solid var(--colour-border);
+  }
+
+  & .mx-nav {
+    --nav-underline: underline;
+    --link-colour: var(--colour-link);
+  }
+
+  /* Headings: plain, medium weight, no optical tightening. Authority here comes
+     from hierarchy and space, not from expression. */
+
+  & h1 {
+    --heading-letter-spacing: -0.015em;
+  }
+
+  & :is(h2, h3, h4, h5, h6) {
+    --font-weight-bold: 600;
+    --line-height-h: 1.25;
+    --heading-letter-spacing: -0.005em;
+
+    text-wrap: pretty;
+  }
+
+  & .mx-text--eyebrow {
+    --heading-font-weight: 600;
+    --heading-letter-spacing: 0.14em;
+  }
+
+  & .mx-button {
+    --font-weight-bold: 600;
+    --button-letter-spacing: 0.01em;
+    --button-min-height: 2.75rem;
+  }
+
+  & .mx-button--large {
+    --button-min-height: 3rem;
+  }
+
+  & .mx-button--small {
+    --button-min-height: unset;
+  }
+
+  & .mx-tag {
+    --tag-font-size: 0.75rem;
+    --font-weight-bold: 600;
+    --tag-letter-spacing: 0.04em;
+  }
+
+  & .mx-callout {
+    --line-width: 4px;
+
+    background: var(--colour-background-alt);
+    padding-block: var(--spacing-xs);
+    padding-inline-end: var(--spacing-xs);
+  }
+
+  & .mx-hero-banner {
+    &:not(:has(.mx-hero-banner__aside)) {
+      --hero-columns: 1fr;
+    }
+  }
+
+  /* Document prose: serif, capped measure, numbered clause support. */
+
+  & .mx-rich-text {
+    & h2 {
+      --heading-font-size: var(--font-size-l);
+    }
+
+    & h3 {
+      --heading-font-size: var(--font-size-ml);
+    }
+
+    & blockquote {
+      --line-width: 4px;
+
+      font-size: var(--font-size-ml);
+    }
+  }
+
+  /* Official metadata block: label/value pairs above a document. definitiion list / columns + mx-text--meta */
+
+  /* Dense data tables.
+     zebra, compact + right-aligned figures. */
+
+  & thead th {
+    background: var(--colour-primary);
+    color: #fff;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    border-block-end: unset;
+  }
+
+  & .num {
+    text-align: end;
+  }
+
+  & dl {
+    border-block: 1px solid currentcolor;
+    padding-block: var(--spacing-xs);
+  }
+
+  /* Validation: strict and loud. Error state gets rule, tint and a marker so
+     the signal is never colour alone. */
+
+  & .mx-label {
+    font-weight: 600;
+  }
+
+  & .mx-required {
+    font-weight: 400;
+    color: var(--colour-foreground-alt);
+  }
+
+  & :is(.mx-input__text, .mx-input__select, .mx-input__textarea, .mx-choice-card) {
+    --outline-color: var(--colour-primary);
+    --outline-offset: 2px;
+
+    &.error {
+      border-inline-start-width: 6px;
+      background: #fdf6f5;
+    }
+
+    &.success {
+      border-inline-start-width: 6px;
+    }
+  }
+
+  & .mx-choice-card:has(input:checked) {
+    border-inline-start-width: 6px;
+  }
+
+  & .mx-error-message {
+    font-weight: 600;
+
+    &::before {
+      content: "Error: ";
+    }
+  }
+
+  & .mx-fieldset {
+    border: 0;
+    padding: 0;
+    margin-inline: 0;
+  }
+
+  & .mx-legend {
+    font-weight: 600;
+    font-size: var(--font-size-m);
+  }
+
+  & .mx-accordion__toggle {
+    font-weight: 700;
+
+    & .mx-button {
+      border-color: transparent;
+    }
+  }
+}

package/.storybook/{theme-demo.css → themes/demo.css}

@@ -2,12 +2,18 @@
 
 .theme--demo {
   --font-family: "Mozilla Text", Inter, helvetica, arial, sans-serif;
-  --heading-font-family: "Mozilla Headline", Inter, helvetica, arial, sans-serif;
-  --font-size: 18px;
-  --font-size-xl: 40px;
-  --font-size-xxl: 60px;
-  --font-size-xxxl: 80px;
-  --font-size-l: 30px;
+  --font-family-display: "Mozilla Headline", Inter, helvetica, arial, sans-serif;
+  --typo-ratio: 1.618;
+  --font-size: var(--base-font-size);
+  --font-size-xs: calc(var(--base-font-size) * pow(var(--type-ratio), -0.5));
+  --font-size-s: calc(var(--base-font-size) * pow(var(--type-ratio), -0.25));
+  --font-size-m: 1rem;
+  --font-size-ml: calc(var(--base-font-size) * pow(var(--type-ratio), 0.5));
+  --font-size-l: calc(var(--base-font-size) * pow(var(--type-ratio), 1));
+  --font-size-xl: calc(var(--base-font-size) * pow(var(--type-ratio), 2));
+  --font-size-xxl: calc(var(--base-font-size) * pow(var(--type-ratio), 3));
+  --font-size-xxxl: calc(var(--base-font-size) * pow(var(--type-ratio), 4));
+
   --container-max-width: 90ch;
   --container-max-width-narrow: 50rem;
   --border-radius-l: 4px;
@@ -16,6 +22,7 @@
 
   font-family: var(--font-family);
   font-size: var(--font-size);
+  line-height: var(--line-height);
 
   & .mx-text--lede {
     --font-size: var(--font-size-m);
@@ -76,7 +83,7 @@
     }
 
     &[class*="mx-background--"] .mx-hero-banner__aside-image {
-      margin-bottom: -2rem;
+      margin-block-end: -2rem;
     }
   }