matrix-design-system 1.0.0

package/package.json

@@ -0,0 +1,160 @@
+{
+  "name": "matrix-design-system",
+  "version": "1.0.0",
+  "description": "A Matrix-inspired React design system: green on near-black, terminal-flavoured, framework-agnostic.",
+  "keywords": [
+    "react",
+    "design-system",
+    "component-library",
+    "tailwind",
+    "matrix",
+    "ui"
+  ],
+  "license": "MIT",
+  "author": "Fabrizio Duroni",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chicio/chicio-blog.git",
+    "directory": "packages/matrix-design-system"
+  },
+  "homepage": "https://github.com/chicio/chicio-blog/tree/main/packages/matrix-design-system#readme",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./chart": {
+      "types": "./dist/chart.d.mts",
+      "default": "./dist/chart.mjs"
+    },
+    "./markdown": {
+      "types": "./dist/markdown.d.mts",
+      "default": "./dist/markdown.mjs"
+    },
+    "./command-palette": {
+      "types": "./dist/command-palette.d.mts",
+      "default": "./dist/command-palette.mjs"
+    },
+    "./styles.css": "./src/styles/index.css",
+    "./theme.css": "./src/styles/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "prepublishOnly": "npx turbo run build --filter=matrix-design-system",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "validate-architecture": "depcruise src --config .dependency-cruiser.cjs",
+    "release": "release-it"
+  },
+  "peerDependencies": {
+    "cmdk": ">=1",
+    "framer-motion": "^12.42.2",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-markdown": ">=10",
+    "recharts": ">=3",
+    "rehype-highlight": ">=7",
+    "rehype-katex": ">=7",
+    "remark-emoji": ">=5",
+    "remark-gfm": ">=4",
+    "remark-math": ">=6",
+    "remark-parse": ">=11",
+    "unified": ">=11"
+  },
+  "peerDependenciesMeta": {
+    "cmdk": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "rehype-highlight": {
+      "optional": true
+    },
+    "rehype-katex": {
+      "optional": true
+    },
+    "remark-emoji": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "remark-math": {
+      "optional": true
+    },
+    "remark-parse": {
+      "optional": true
+    },
+    "unified": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "matrix-component-store": "^1.0.0",
+    "matrix-rain-webgpu": "^2.0.0",
+    "react-icons": "^5.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@eslint/js": "^9",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^6.0.5",
+    "@vitest/coverage-v8": "^4.1.9",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "cmdk": "^1.1.1",
+    "dependency-cruiser": "^18.1.0",
+    "eslint": "^9",
+    "eslint-plugin-chicio": "^1.0.0",
+    "eslint-plugin-react": "^7",
+    "eslint-plugin-react-hooks": "^7",
+    "framer-motion": "^12.42.2",
+    "globals": "^16",
+    "jsdom": "^30.0.0",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.9.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
+    "remark-emoji": "^5.0.2",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "remark-parse": "^11.0.0",
+    "tsdown": "0.22.14",
+    "typescript": "^5",
+    "typescript-eslint": "^8",
+    "unified": "^11.0.5",
+    "vitest": "^4.1.10"
+  }
+}

package/src/styles/base.css

@@ -0,0 +1,130 @@
+/**
+ * Element-level styling every design-system component's text sits on: headings, paragraphs, lists,
+ * tables, links. A component rendered without these looks unstyled, so they ship with the package
+ * rather than with the site.
+ */
+@layer base {
+    html {
+        @apply h-full max-w-full overflow-x-hidden;
+    }
+
+    /**
+     * iOS Safari zooms the viewport in when a focused form control's font size is under 16px, and it
+     * never zooms back out — you are left on a magnified, sideways-scrolling page. The alternative fix
+     * is a `maximum-scale=1` viewport meta, which also blocks deliberate pinch-zoom and is an
+     * accessibility regression, so the size is floored here instead.
+     *
+     * `max(1rem, 1em)` means "at least 16px, but keep growing with the surrounding text", so a control
+     * inside a deliberately large block still scales up. This is a base-layer rule so it reaches raw
+     * `input` elements and third-party ones alike — cmdk's `Command.Input` is not ours to style from a
+     * React component. Tailwind utilities sit in a later layer and still win, so putting `text-sm` on
+     * an input opts back into the zoom: don't, and there is no reason to.
+     */
+    input,
+    textarea,
+    select {
+        font-size: max(1rem, 1em);
+    }
+
+    body {
+        @apply bg-general-background text-primary-text m-0 flex h-full max-w-full flex-col font-sans;
+    }
+
+    h1 {
+        @apply text-accent mt-4 text-4xl leading-normal font-bold text-shadow-md sm:text-5xl;
+    }
+
+    h2 {
+        @apply text-accent mt-4 text-3xl leading-normal font-bold text-shadow-md sm:text-4xl;
+    }
+
+    h3 {
+        @apply text-accent mt-4 text-2xl leading-normal font-bold text-shadow-md sm:text-3xl;
+    }
+
+    h4 {
+        @apply text-accent mt-4 text-xl leading-normal font-bold text-shadow-md sm:text-2xl;
+    }
+
+    h5 {
+        @apply text-accent mt-4 text-lg leading-normal font-bold text-shadow-md sm:text-xl;
+    }
+
+    h6 {
+        @apply text-accent mt-4 text-base leading-normal font-bold text-shadow-md;
+    }
+
+    p {
+        @apply text-primary-text text-left text-base leading-normal;
+    }
+
+    strong {
+        @apply font-bold;
+    }
+
+    blockquote {
+        @apply border-accent text-accent border-l-4 pl-4 italic;
+    }
+
+    blockquote * {
+        @apply text-accent;
+    }
+
+    ul {
+        @apply text-primary-text m-4 list-none p-0 text-base leading-normal;
+    }
+
+    ul li {
+        @apply relative mb-2 pl-4;
+    }
+
+    ul li::before {
+        @apply text-primary absolute left-0 font-bold content-['▸'];
+    }
+
+    time {
+        @apply text-secondary-text;
+    }
+
+    a {
+        @apply text-accent text-base leading-normal break-words no-underline text-shadow-sm;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        a:hover {
+            @apply underline;
+        }
+    }
+
+    hr {
+        @apply from-general-background-light via-accent to-general-background-light h-px w-full border-0 bg-gradient-to-r;
+    }
+
+    table {
+        @apply mx-auto w-full table-auto border-collapse;
+    }
+
+    th {
+        @apply text-accent bg-primary-dark px-4 py-3 text-left font-bold;
+    }
+
+    td {
+        @apply text-primary-text px-4 py-2 text-left;
+    }
+
+    tbody tr:nth-child(even) td {
+        background-color: var(--color-general-background-light);
+    }
+
+    .table-wrapper {
+        @apply border-accent my-4 overflow-x-auto rounded-xl border shadow-lg;
+    }
+
+    figcaption {
+        @apply text-secondary-text mt-2 mb-3 text-center text-base leading-normal italic;
+    }
+}
+
+:root {
+    color-scheme: dark;
+}

package/src/styles/components.css

@@ -0,0 +1,57 @@
+/**
+ * The composed classes the design system's look is built from: the glassmorphism panels, the accent
+ * glow, the page containers and the call-to-action button.
+ */
+@layer components {
+    .container-fixed {
+        @apply mx-auto w-full max-w-[540px] px-4 sm:max-w-[720px] md:max-w-[960px];
+    }
+
+    .container-fluid {
+        @apply mx-auto w-full px-4;
+    }
+
+    .container-fullscreen {
+        @apply flex h-screen min-h-screen w-full flex-col items-center justify-center bg-transparent;
+    }
+
+    .container-section {
+        @apply mx-auto w-full max-w-[540px] py-4 sm:max-w-[720px] md:max-w-[960px];
+    }
+
+    .call-to-action {
+        @apply bg-accent text-text-above-primary m-1 inline-block min-w-[120px] rounded-xl border-0 p-3 text-center text-lg leading-none no-underline transition-all hover:scale-105 hover:shadow-xl;
+    }
+
+    .glow-border {
+        @apply border-accent-alpha-40 hover:border-accent active:border-accent focus:border-accent rounded-xl border border-solid;
+    }
+
+    .glow-container {
+        @apply border-accent-alpha-40 hover:border-accent active:border-accent focus:border-accent rounded-xl border border-solid shadow-lg transition-all duration-300 hover:scale-102;
+    }
+
+    .glassmorphism-lite {
+        @apply border-accent-alpha-40 hover:border-accent active:border-accent focus:border-accent bg-general-background rounded-xl border border-solid shadow-lg transition-transform duration-300 hover:scale-102;
+    }
+
+    .glassmorphism-lite-no-scale {
+        @apply border-accent-alpha-40 hover:border-accent active:border-accent focus:border-accent bg-general-background rounded-xl border border-solid shadow-lg transition-colors duration-300;
+    }
+
+    .glassmorphism {
+        @apply border-accent-alpha-40 hover:border-accent active:border-accent focus:border-accent bg-general-background-alpha-60 rounded-xl border border-solid shadow-lg backdrop-blur-sm transition-transform duration-300 hover:scale-102;
+    }
+
+    .glassmorphism-no-scale {
+        @apply border-accent-alpha-40 hover:border-accent active:border-accent focus:border-accent bg-general-background-alpha-60 rounded-xl border border-solid shadow-lg backdrop-blur-sm transition-colors duration-300;
+    }
+}
+
+.scroll-locked .menu-container {
+    right: var(--scrollbar-width, 0px);
+}
+
+.remove-scroll-width {
+    right: var(--scrollbar-width, 0px);
+}

package/src/styles/index.css

@@ -0,0 +1,23 @@
+/**
+ * The design system's stylesheet. A consumer imports this after `@import "tailwindcss"` and gets the
+ * theme, the base element styling its components assume, and the composed classes they use.
+ *
+ * These four files share no selectors, so their order relative to each other does not affect the
+ * cascade. The ordering that IS load-bearing lives one level up: the site's globals.css must import
+ * this entry BEFORE its own `@layer base`, so its article rules can override the element styling
+ * base.css sets.
+ */
+/**
+ * Tailwind ignores node_modules when scanning for class names, so a consumer would generate none of
+ * the utilities this package's components use. @source opts them back in.
+ *
+ * It must point at dist, not src: `files` publishes only dist and this styles folder, so a glob over
+ * src matches nothing once the package is installed from the registry — the components would render
+ * with no colours, spacing or layout. The built .mjs carry the same className strings.
+ */
+@source "../../dist/**/*.mjs";
+
+@import "./pills.css";
+@import "./theme.css";
+@import "./base.css";
+@import "./components.css";

package/src/styles/pills.css

@@ -0,0 +1,85 @@
+@layer components {
+    .pill {
+        @apply relative flex h-[50px] min-w-[145px] items-center justify-center px-3 py-0;
+        @apply rounded-[25px] border-2 border-solid border-(--pill-border-color);
+        @apply cursor-pointer no-underline;
+        @apply transition-all duration-300 ease-in-out;
+        @apply backdrop-blur-xs;
+
+        box-shadow:
+            0 4px 15px var(--pill-shadow-color),
+            inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    }
+
+    .pill::before {
+        @apply pointer-events-none content-[""];
+        @apply absolute top-1.5 right-3 left-3 h-4 rounded-[22px];
+        @apply bg-gradient-to-r from-white/80 via-white/10 to-white/60 opacity-85 blur-xs;
+    }
+
+    .pill:hover {
+        @apply translate-y-[-2px] scale-105;
+
+        box-shadow:
+            0 8px 25px var(--pill-hover-shadow, var(--color-accent-alpha-70)),
+            0 0 20px var(--pill-hover-glow, var(--color-accent-alpha-40)),
+            inset 0 1px 0 rgba(255, 255, 255, 0.3);
+    }
+
+    .pill-label {
+        @apply text-primary-text text-center text-sm font-bold whitespace-nowrap;
+
+        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
+    }
+
+    .pill-red {
+        --pill-border-color: var(--color-confirm);
+        --pill-shadow-color: #ff000050;
+        --pill-after-bg: radial-gradient(
+            circle at 60% 80%,
+            #fff6 0%,
+            var(--color-confirm-alpha-20) 70%,
+            transparent 100%
+        );
+        --pill-hover-shadow: #ff000070;
+        --pill-hover-glow: #ff000040;
+    }
+
+    .pill-red-glass {
+        background: linear-gradient(
+            135deg,
+            var(--color-confirm-alpha-60) 0%,
+            var(--color-confirm-alpha-60) 60%,
+            var(--color-confirm-alpha-25) 100%
+        );
+    }
+
+    .pill-red-glass-lite {
+        @apply bg-confirm;
+    }
+
+    .pill-blue {
+        --pill-border-color: var(--color-undo);
+        --pill-shadow-color: #0066ff50;
+        --pill-after-bg: radial-gradient(circle at 40% 80%, #fff6 0%, var(--color-undo-alpha-20) 70%, transparent 100%);
+        --pill-hover-shadow: #0066ff70;
+        --pill-hover-glow: #0066ff40;
+    }
+
+    .pill-blue-glass {
+        background: linear-gradient(
+            135deg,
+            var(--color-undo-alpha-60) 0%,
+            var(--color-undo-alpha-60) 60%,
+            var(--color-undo-alpha-25) 100%
+        );
+    }
+
+    .pill-blue-glass-lite {
+        @apply bg-undo;
+    }
+
+    .pill-no-reflection::before {
+        content: none !important;
+    }
+}