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

package/dist/types/src/tokens.d.ts

@@ -0,0 +1,200 @@
+export namespace global {
+    namespace size {
+        let xxxxs: string;
+        let xxxs: string;
+        let xxs: string;
+        let xs: string;
+        let s: string;
+        let m: string;
+        let l: string;
+        let xl: string;
+        let xxl: string;
+        let xxxl: string;
+        let xxxxl: string;
+        let ul: string;
+        let uul: string;
+        let uuul: string;
+    }
+    namespace typeScales {
+        let minorSecond: number;
+        let majorSecond: number;
+        let minorThird: number;
+        let majorThird: number;
+        let perfectFourth: number;
+        let augmentedFourth: number;
+        let perfectFifth: number;
+        let goldenRatio: number;
+    }
+    namespace colour {
+        let primary: string;
+        let accent: string;
+    }
+}
+declare namespace _default {
+    export namespace breakpoint {
+        let xxs_1: string;
+        export { xxs_1 as xxs };
+        let xs_1: string;
+        export { xs_1 as xs };
+        let s_1: string;
+        export { s_1 as s };
+        let m_1: string;
+        export { m_1 as m };
+        let l_1: string;
+        export { l_1 as l };
+        let xl_1: string;
+        export { xl_1 as xl };
+        export let globalNav: string;
+        export let contentCard: string;
+        export let collapsedCard: string;
+        export let dropMenu: string;
+    }
+    export namespace colour_1 {
+        export namespace primary_1 {
+            import colour_2 = primary;
+            export { colour_2 as colour };
+            export let scheme: string;
+        }
+        export { primary_1 as primary };
+        export namespace accent_1 {
+            import colour_3 = accent;
+            export { colour_3 as colour };
+            let scheme_1: string;
+            export { scheme_1 as scheme };
+        }
+        export { accent_1 as accent };
+        export namespace main {
+            export let fg: string;
+            export let bg: string;
+            export let fgAlt: string;
+            export let bgAlt: string;
+            export let border: string;
+            import link = primary;
+            export { link };
+            let scheme_2: string;
+            export { scheme_2 as scheme };
+        }
+        export namespace reverse {
+            let fg_1: string;
+            export { fg_1 as fg };
+            let bg_1: string;
+            export { bg_1 as bg };
+            let fgAlt_1: string;
+            export { fgAlt_1 as fgAlt };
+            let bgAlt_1: string;
+            export { bgAlt_1 as bgAlt };
+            let border_1: string;
+            export { border_1 as border };
+            let link_1: string;
+            export { link_1 as link };
+            let scheme_3: string;
+            export { scheme_3 as scheme };
+        }
+        export let info: string;
+        export let warning: string;
+        export let success: string;
+        export let error: string;
+    }
+    export { colour_1 as colour };
+    export namespace font {
+        export let family: string;
+        export namespace lineHeight {
+            let main_1: string;
+            export { main_1 as main };
+            export let heading: string;
+            export let ui: string;
+        }
+        export namespace weight {
+            let main_2: number;
+            export { main_2 as main };
+            export let bold: number;
+        }
+        export namespace size_1 {
+            import ratioSmall = minorThird;
+            export { ratioSmall };
+            import ratio = augmentedFourth;
+            export { ratio };
+            export let basePx: string;
+            export let diff: number;
+        }
+        export { size_1 as size };
+    }
+    export namespace size_2 {
+        namespace spacing {
+            import xxxxs_1 = xxxxs;
+            export { xxxxs_1 as xxxxs };
+            import xxxs_1 = xxxs;
+            export { xxxs_1 as xxxs };
+            import xxs_2 = xxs;
+            export { xxs_2 as xxs };
+            import xs_2 = xs;
+            export { xs_2 as xs };
+            import s_2 = s;
+            export { s_2 as s };
+            import m_2 = m;
+            export { m_2 as m };
+            import l_2 = l;
+            export { l_2 as l };
+            import xl_2 = xl;
+            export { xl_2 as xl };
+            import xxl_1 = xxl;
+            export { xxl_1 as xxl };
+            import xxxl_1 = xxxl;
+            export { xxxl_1 as xxxl };
+            import xxxxl_1 = xxxxl;
+            export { xxxxl_1 as xxxxl };
+            import ul_1 = ul;
+            export { ul_1 as ul };
+            import uul_1 = uul;
+            export { uul_1 as uul };
+            import uuul_1 = uuul;
+            export { uuul_1 as uuul };
+        }
+        namespace gap {
+            import s_3 = s;
+            export { s_3 as s };
+            import m_3 = m;
+            export { m_3 as m };
+            import l_3 = l;
+            export { l_3 as l };
+            import xl_3 = xl;
+            export { xl_3 as xl };
+        }
+        namespace container {
+            export let plus: string;
+            export let minus: string;
+            export let aligned: string;
+            export let narrow: string;
+            import gutterMin = s;
+            export { gutterMin };
+            import gutterMax = l;
+            export { gutterMax };
+        }
+    }
+    export { size_2 as size };
+    export namespace utility {
+        export namespace outline {
+            export let width: string;
+            export let style: string;
+            import colour_4 = primary;
+            export { colour_4 as colour };
+        }
+        export namespace radius {
+            let m_4: string;
+            export { m_4 as m };
+            import l_4 = l;
+            export { l_4 as l };
+            export let round: string;
+        }
+        export namespace shadow {
+            let colour_5: string;
+            export { colour_5 as colour };
+            import size_3 = xs;
+            export { size_3 as size };
+        }
+        let ratio_1: string;
+        export { ratio_1 as ratio };
+    }
+}
+export default _default;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/types/src/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/tokens.js"],"names":[],"mappings":""}

package/dist/types/tokens.d.ts

@@ -0,0 +1,147 @@
+export declare const global: {
+    size: {
+        xxxxs: string;
+        xxxs: string;
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        xxxxl: string;
+        ul: string;
+        uul: string;
+        uuul: string;
+    };
+    typeScales: {
+        minorSecond: number;
+        majorSecond: number;
+        minorThird: number;
+        majorThird: number;
+        perfectFourth: number;
+        augmentedFourth: number;
+        perfectFifth: number;
+        goldenRatio: number;
+    };
+    colour: {
+        primary: string;
+        accent: string;
+    };
+};
+declare const _default: {
+    breakpoint: {
+        xxs: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        globalNav: string;
+        contentCard: string;
+        collapsedCard: string;
+        dropMenu: string;
+    };
+    colour: {
+        primary: {
+            colour: string;
+            scheme: string;
+        };
+        accent: {
+            colour: string;
+            scheme: string;
+        };
+        main: {
+            fg: string;
+            bg: string;
+            fgAlt: string;
+            bgAlt: string;
+            border: string;
+            link: string;
+            scheme: string;
+        };
+        reverse: {
+            fg: string;
+            bg: string;
+            fgAlt: string;
+            bgAlt: string;
+            border: string;
+            link: string;
+            scheme: string;
+        };
+        info: string;
+        warning: string;
+        success: string;
+        error: string;
+    };
+    font: {
+        family: string;
+        lineHeight: {
+            main: string;
+            heading: string;
+            ui: string;
+        };
+        weight: {
+            main: number;
+            bold: number;
+        };
+        size: {
+            ratioSmall: number;
+            ratio: number;
+            basePx: string;
+            diff: number;
+        };
+    };
+    size: {
+        spacing: {
+            xxxxs: string;
+            xxxs: string;
+            xxs: string;
+            xs: string;
+            s: string;
+            m: string;
+            l: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+            xxxxl: string;
+            ul: string;
+            uul: string;
+            uuul: string;
+        };
+        gap: {
+            s: string;
+            m: string;
+            l: string;
+            xl: string;
+        };
+        container: {
+            plus: string;
+            minus: string;
+            aligned: string;
+            narrow: string;
+            gutterMin: string;
+            gutterMax: string;
+        };
+    };
+    utility: {
+        outline: {
+            width: string;
+            style: string;
+            colour: string;
+        };
+        radius: {
+            m: string;
+            l: string;
+            round: string;
+        };
+        shadow: {
+            colour: string;
+            size: string;
+        };
+        ratio: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/types/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/tokens.js"],"names":[],"mappings":"AACA,eAAO,MAAM,MAAM;IACjB,IAAI;QACF,KAAK;QACL,IAAI;QACJ,GAAG;QACH,EAAE;QACF,CAAC;QACD,CAAC;QACD,CAAC;QACD,EAAE;QACF,GAAG;QACH,IAAI;QACJ,KAAK;QACL,EAAE;QACF,GAAG;QACH,IAAI;;IAEN,UAAU;QACR,WAAW;QACX,WAAW;QACX,UAAU;QACV,UAAU;QACV,aAAa;QACb,eAAe;QACf,YAAY;QACZ,WAAW;;IAEb,MAAM;QACJ,OAAO;QACP,MAAM;;CAET,CAAA;;IAGC,UAAU;QACR,GAAG;QACH,EAAE;QACF,CAAC;QACD,CAAC;QACD,CAAC;QACD,EAAE;QACF,SAAS;QACT,WAAW;QACX,aAAa;QACb,QAAQ;;IAEV,MAAM;QACJ,OAAO;YACL,MAAM;YACN,MAAM;;QAER,MAAM;YACJ,MAAM;YACN,MAAM;;QAER,IAAI;YACF,EAAE;YACF,EAAE;YACF,KAAK;YACL,KAAK;YACL,MAAM;YACN,IAAI;YACJ,MAAM;;QAER,OAAO;YACL,EAAE;YACF,EAAE;YACF,KAAK;YACL,KAAK;YACL,MAAM;YACN,IAAI;YACJ,MAAM;;QAER,IAAI;QACJ,OAAO;QACP,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,MAAM;QACN,UAAU;YACR,IAAI;YACJ,OAAO;YACP,EAAE;;QAEJ,MAAM;YACJ,IAAI;YACJ,IAAI;;QAEN,IAAI;YACF,UAAU;YACV,KAAK;YACL,MAAM;YACN,IAAI;;;IAGR,IAAI;QACF,OAAO;YACL,KAAK;YACL,IAAI;YACJ,GAAG;YACH,EAAE;YACF,CAAC;YACD,CAAC;YACD,CAAC;YACD,EAAE;YACF,GAAG;YACH,IAAI;YACJ,KAAK;YACL,EAAE;YACF,GAAG;YACH,IAAI;;QAEN,GAAG;YACD,CAAC;YACD,CAAC;YACD,CAAC;YACD,EAAE;;QAEJ,SAAS;YACP,IAAI;YACJ,KAAK;YACL,OAAO;YACP,MAAM;YACN,SAAS;YACT,SAAS;;;IAGb,OAAO;QACL,OAAO;YACL,KAAK;YACL,KAAK;YACL,MAAM;;QAER,MAAM;YACJ,CAAC;YACD,CAAC;YACD,KAAK;;QAEP,MAAM;YACJ,MAAM;YACN,IAAI;;QAEN,KAAK"}

package/package.json

@@ -1,65 +1,70 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.29",
+  "version": "0.1.0-rc.0",
+  "license": "MIT",
   "dependencies": {
-    "@floating-ui/dom": "^1.7.4",
-    "@oddbird/popover-polyfill": "^0.6.1",
-    "@pnx-mixtape/ids-shape": "^0.0.24",
-    "@types/react": "^19.2.7",
+    "@floating-ui/dom": "^1.7.6",
+    "@oddbird/popover-polyfill": "^0.7.0",
+    "@pnx-mixtape/ids-shape": "^0.0.27",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "classnames": "^2.5.1",
-    "focus-trap": "^8.0.0",
-    "js-cookie": "^3.0.5",
-    "react": "^19.2.1",
-    "react-aria": "^3.44.0",
-    "react-dom": "^19.2.1",
-    "react-stately": "^3.42.0"
+    "focus-trap": "^8.2.2",
+    "js-cookie": "^3.0.8",
+    "react": "^19.2.7",
+    "react-aria": "^3.50.0",
+    "react-dom": "^19.2.7",
+    "react-stately": "^3.48.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.2.1",
     "@csstools/postcss-global-data": "^4.0.0",
     "@csstools/stylelint-formatter-github": "^2.0.0",
-    "@storybook/addon-a11y": "^10.1.4",
-    "@storybook/addon-docs": "^10.1.4",
-    "@storybook/addon-links": "^10.1.4",
-    "@storybook/addon-vitest": "^10.1.4",
-    "@storybook/html-vite": "^10.1.4",
-    "@storybook/react": "^10.1.4",
-    "@storybook/react-vite": "^10.1.4",
+    "@figma/code-connect": "^2.0.0",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-links": "^10.4.6",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/html-vite": "^10.4.6",
+    "@storybook/react": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.0.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/browser-playwright": "^4.0.15",
-    "@vitest/coverage-v8": "^4.0.15",
+    "@types/node": "^26.0.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
     "axe-playwright": "^2.2.2",
-    "concurrently": "^9.2.1",
+    "chromatic": "^18.0.1",
+    "concurrently": "^10.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "drupal-attribute": "^1.2.1",
     "drupal-twig-extensions": "1.0.0-beta.5",
-    "jsdom": "^28.0.0",
-    "oxlint": "^1.31.0",
-    "playwright": "^1.57.0",
-    "postcss": "^8.5.6",
+    "jsdom": "^30.0.0",
+    "lightningcss": "^1.32.0",
+    "oxfmt": "^0.66.0",
+    "oxlint": "^1.71.0",
+    "playwright": "^1.61.0",
+    "postcss": "^8.5.15",
+    "postcss-custom-media": "^12.0.1",
     "postcss-design-tokens": "^1.3.0",
-    "postcss-inline-svg": "^6.0.0",
     "postcss-mixins": "^12.1.2",
     "postcss-prepend-layer": "^1.0.2",
-    "postcss-preset-env": "^11.1.1",
+    "postcss-preset-env": "^11.3.1",
     "postcss-pxtorem": "^6.1.0",
-    "prettier": "^3.7.4",
-    "storybook": "^10.1.10",
-    "stylelint": "^17.0.0",
+    "storybook": "^10.4.6",
+    "stylelint": "^17.13.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-use-logical-spec": "^5.0.1",
-    "twig": "^1.17.1",
-    "typescript": "^5.9.3",
-    "vite": "8.0.0-beta.14",
+    "twig": "^3.0.0",
+    "typescript": "^7.0.2",
+    "vite": "8.2.2",
     "vite-plugin-twig-drupal": "^1.6.2",
-    "vitest": "^4.0.15"
+    "vitest": "^4.1.9"
   },
   "config": {
     "commitizen": {
@@ -70,14 +75,31 @@
     "node": ">= 20.0"
   },
   "type": "module",
+  "types": "./dist/types/elements.d.ts",
   "files": [
     "dist/build/*",
+    "dist/types",
     "src",
-    ".storybook"
+    ".storybook",
+    "tools"
   ],
   "exports": {
-    ".": "./src/elements.ts",
-    "./react": "./src/react.ts",
+    ".": {
+      "types": "./dist/types/elements.d.ts",
+      "default": "./src/elements.ts"
+    },
+    "./react": {
+      "types": "./dist/types/react.d.ts",
+      "default": "./src/react.ts"
+    },
+    "./compiled": {
+      "types": "./dist/types/elements.d.ts",
+      "default": "./dist/build/elements.js"
+    },
+    "./compiled/react": {
+      "types": "./dist/types/react.d.ts",
+      "default": "./dist/build/react.js"
+    },
     "./tokens": "./src/tokens.js",
     "./dist/*": "./dist/build/*",
     "./storybook/*": "./.storybook/*",
@@ -85,32 +107,39 @@
   },
   "scripts": {
     "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm dev-vite\" \"pnpm dev-storybook\"",
-    "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"pnpm build-vite\" \"pnpm build-storybook\"",
-    "test": "pnpm test-html && pnpm test-react",
-    "lint": "pnpm lint-prettier && pnpm lint-css && pnpm lint-ts && pnpm lint-js",
-    "format": "prettier --write \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\" && pnpm fix-css && pnpm fix-js",
+    "build": "pnpm build-vite && pnpm build-storybook",
+    "test": "pnpm test-storybook",
+    "test-storybook": "pnpm test-html && pnpm test-react",
+    "lint": "pnpm lint-format && pnpm lint-css && pnpm lint-ts && pnpm lint-js",
+    "format": "oxfmt && pnpm fix-css && pnpm fix-js",
     "dev-vite": "vite build -w -m development",
-    "dev-html": "storybook dev -p 6006",
-    "dev-react": "storybook dev -p 6008 -c .storybook-react",
+    "dev-html": "storybook dev -p 6006 --no-open",
+    "dev-react": "storybook dev -p 6008 -c .storybook-react --no-open",
     "dev-storybook": "concurrently \"npm:dev-html\" \"npm:dev-react\"",
-    "build-vite": "vite build",
+    "build-vite": "vite build && pnpm build-types",
+    "build-types": "tsc -p tsconfig.build.json",
     "build-ci": "pnpm build",
     "build-storybook": "pnpm build-html && pnpm build-react",
-    "build-html": "storybook build -o dist/storybook",
-    "build-react": "storybook build -o dist/storybook/react -c .storybook-react",
+    "build-html": "storybook build -o dist/storybook --stats-json",
+    "build-react": "storybook build -o dist/storybook/react -c .storybook-react --stats-json",
     "test-html": "vitest --project=storybook --run",
     "test-react": "vitest --project=storybook-react --run",
-    "lint-ci": "pnpm lint-prettier && pnpm lint-css-ci && pnpm lint-ts && pnpm lint-js-ci",
-    "lint-prettier": "prettier --check \"**/*.{css,ts,tsx,js,jsx,json,md,mdx}\"",
+    "lint-ci": "pnpm lint-format && pnpm lint-css-ci && pnpm lint-ts && pnpm lint-js-ci",
+    "lint-format": "oxfmt --check",
     "lint-css": "stylelint \"./**/*.css\"",
     "lint-css-ci": "stylelint \"./**/*.css\" --custom-formatter @csstools/stylelint-formatter-github",
-    "lint-js": "oxlint \"./**/*.{ts,tsx}\"",
-    "lint-js-ci": "oxlint \"./**/*.{ts,tsx}\" --format github",
+    "lint-js": "oxlint src",
+    "lint-js-ci": "oxlint src --format github",
     "lint-ts": "tsc",
+    "lint-classes": "node tools/lint-classnames.mjs",
+    "lint-classes-ci": "node tools/lint-classnames.mjs --format github",
+    "audit-parity": "node tools/audit-parity.mjs",
+    "audit-parity-write": "node tools/audit-parity.mjs --write",
     "fix-css": "pnpm lint-css --fix",
     "fix-js": "pnpm lint-js --fix",
     "clean": "rm -rf ./dist",
     "commit": "git-cz",
-    "bump-version": "pnpm version patch -m \"chore: tag %s\""
+    "bump-version": "pnpm version patch -m \"chore: tag %s\"",
+    "scaffold-component": "node tools/scaffold-component.mjs"
   }
 }

package/src/Atom/Background/README.md

@@ -0,0 +1,52 @@
+# Background
+
+Applies background colour, foreground colour, and colour scheme together — ensuring accessible contrast automatically. Use it to create coloured regions within a page.
+
+> **CSS utility — no component wrapper.** Background is a set of CSS modifier classes applied directly to any element. There is no React or Twig component; add the relevant `mx-background--*` class via `className` (React) or a Twig `addClass` call.
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Atom/Background/_background.css";
+```
+
+## HTML
+
+```html
+<div class="mx-background--primary">Content with primary background</div>
+
+<div class="mx-background--reverse">
+  Content on dark background
+  <div class="mx-background--reset">Back to default colours</div>
+</div>
+```
+
+## Modifiers
+
+All modifiers set `--background`, `--foreground`, and `--scheme` together so text and interactive elements always meet contrast requirements.
+
+| Class                    | `BackgroundStyles` enum    | Effect                                                                |
+| ------------------------ | -------------------------- | --------------------------------------------------------------------- |
+| `mx-background--primary` | `BackgroundStyles.PRIMARY` | Brand primary colour bg, adjusts line/link colours                    |
+| `mx-background--accent`  | `BackgroundStyles.ACCENT`  | Accent colour bg                                                      |
+| `mx-background--alt`     | `BackgroundStyles.ALT`     | Subtle off-background (`--colour-background-alt`)                     |
+| `mx-background--reverse` | `BackgroundStyles.REVERSE` | Dark background — flips colour scheme to `dark`                       |
+| `mx-background--reset`   | `BackgroundStyles.RESET`   | Resets to default colours — use to opt out of an inherited background |
+| `mx-background--box`     | `BackgroundStyles.BOX`     | Adds a border and padding to create a boxed region                    |
+
+> Note: `mx-background--image` is a special modifier for background images — it absolutely positions a child `<img>` and applies brightness/saturation/opacity filters via CSS custom properties (see below).
+
+## Combinable modifiers
+
+- `mx-background--reverse` + `mx-background--image` — darkens the image automatically (`--bg-img-brightness: 0.45`)
+- `mx-background--box` can be combined with any colour modifier
+
+## Customisation via CSS custom properties
+
+```css
+.my-section {
+  --bg-img-brightness: 0.6; /* image overlay brightness (default: 1) */
+  --bg-img-saturate: 1; /* image saturation (default: 1.25) */
+  --bg-img-opacity: 0.7; /* image opacity (default: 0.5) */
+}
+```