matefluency 1.0.0

package/dist/utilities.css

@@ -0,0 +1,264 @@
+/*!
+ * MateFluency Design System v1.0.0
+ * EcoWestern Naturalism Design Language
+ * Copyright (c) 2026 EcoWestern. All rights reserved.
+ * https://ecowestern.net
+ *
+ * Proprietary license — free to use, no derivatives or redistribution.
+ * See LICENSE or https://ecowestern.net/matefluency/license for full terms.
+ */
+
+/**
+ * MateFluency Design System — Utilities & Motion Layer
+ *
+ * Animation keyframes, utility classes, and the full animation
+ * vocabulary used across the MateFluency design language.
+ */
+
+/* ─── Keyframes ──────────────────────────────── */
+
+@keyframes mf-fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes mf-scroll {
+    0% {
+        transform: translateX(0);
+    }
+
+    100% {
+        transform: translateX(-50%);
+    }
+}
+
+@keyframes mf-scroll-reverse {
+    0% {
+        transform: translateX(-50%);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+@keyframes mf-blob {
+    0% {
+        transform: translate(0px, 0px) scale(1);
+    }
+
+    33% {
+        transform: translate(30px, -50px) scale(1.1);
+    }
+
+    66% {
+        transform: translate(-20px, 20px) scale(0.9);
+    }
+
+    100% {
+        transform: translate(0px, 0px) scale(1);
+    }
+}
+
+@keyframes mf-float {
+    0% {
+        transform: translateY(0px);
+    }
+
+    50% {
+        transform: translateY(-20px);
+    }
+
+    100% {
+        transform: translateY(0px);
+    }
+}
+
+@keyframes mf-breathe {
+
+    0%,
+    100% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.05);
+    }
+}
+
+/* ─── Animation Utility Classes ──────────────── */
+
+/**
+ * .mf-animate-in
+ * Page-entry animation — fades content up from 20px.
+ * Apply to the first visible section on each page.
+ */
+.mf-animate-in {
+    animation: mf-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/**
+ * .mf-scroll  /  .mf-scroll-reverse
+ * Infinite marquee strip. Apply to TWO duplicate containers
+ * inside a parent with overflow: hidden; display: flex.
+ * Both children must have the same class to avoid a reset flash.
+ */
+.mf-scroll {
+    animation: mf-scroll 20s linear infinite;
+}
+
+.mf-scroll-reverse {
+    animation: mf-scroll-reverse 20s linear infinite;
+}
+
+/**
+ * .mf-blob
+ * Ambient background blob drift. Use on large blurred circles
+ * behind hero sections.
+ */
+.mf-blob {
+    animation: mf-blob 7s infinite;
+}
+
+/**
+ * .mf-float
+ * Slow vertical float. Great for illustration SVGs or product
+ * images in hero sections.
+ */
+.mf-float {
+    animation: mf-float 6s ease-in-out infinite;
+}
+
+/**
+ * .mf-breathe
+ * Subtle scale pulse. Use on ambient background shapes to make
+ * them feel alive.
+ */
+.mf-breathe {
+    animation: mf-breathe 4s ease-in-out infinite;
+}
+
+/* ─── Text Utilities ─────────────────────────── */
+
+/**
+ * .mf-text-balance
+ * Prevents awkward single-word last lines in headings.
+ * Especially useful on H1/H2 copy.
+ */
+.mf-text-balance {
+    text-wrap: balance;
+}
+
+/* ─── Layout Utilities ───────────────────────── */
+
+/**
+ * .mf-container
+ * The standard MateFluency page container.
+ * max-width: 72rem (1152px), centered, with responsive horizontal padding.
+ */
+.mf-container {
+    max-width: 72rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1.5rem;
+    /* px-6 */
+    padding-right: 1.5rem;
+}
+
+@media (min-width: 768px) {
+    .mf-container {
+        padding-left: 2.5rem;
+        /* md:px-10 */
+        padding-right: 2.5rem;
+    }
+}
+
+/* ─── Typography Presets ─────────────────────── */
+
+/**
+ * These classes mirror the canonical MateFluency type scale.
+ * You don't have to use them — they're provided as a convenience
+ * for non-Tailwind projects.
+ */
+
+.mf-eyebrow {
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+    color: var(--mf-green, #086d00);
+}
+
+@media (min-width: 768px) {
+    .mf-eyebrow {
+        font-size: 0.75rem;
+    }
+}
+
+.mf-h1 {
+    font-size: 2.25rem;
+    /* text-4xl */
+    font-weight: 800;
+    letter-spacing: -0.025em;
+    line-height: 1.05;
+    color: var(--mf-ink, #1d1d1f);
+    text-wrap: balance;
+}
+
+@media (min-width: 640px) {
+    .mf-h1 {
+        font-size: 3rem;
+    }
+}
+
+/* sm:text-5xl */
+@media (min-width: 768px) {
+    .mf-h1 {
+        font-size: 4.5rem;
+    }
+}
+
+/* md:text-7xl */
+
+.mf-h2 {
+    font-size: 1.875rem;
+    /* text-3xl */
+    font-weight: 700;
+    letter-spacing: -0.025em;
+    color: var(--mf-ink, #1d1d1f);
+}
+
+.mf-h3 {
+    font-size: 1.5rem;
+    /* text-2xl */
+    font-weight: 700;
+    color: var(--mf-ink, #1d1d1f);
+}
+
+.mf-body {
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.75;
+    color: var(--mf-text-2, #515154);
+    text-wrap: balance;
+}
+
+@media (min-width: 768px) {
+    .mf-body {
+        font-size: 1.25rem;
+        /* md:text-xl */
+    }
+}
+
+.mf-meta {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--mf-text-3, #6e6e73);
+}

package/index.js

@@ -0,0 +1,43 @@
+/**
+ * MateFluency Design System — JS Entry Point
+ *
+ * This file is the `main` entry for the npm package.
+ * It exports helper metadata and documents the available CSS imports.
+ *
+ * CSS Usage:
+ *   import "matefluency/css";            // Full bundle (vanilla CSS)
+ *   import "matefluency/css/tailwind";   // Tailwind v4 bundle
+ *
+ * Or in a .css file:
+ *   @import "matefluency";               // Resolves to dist/matefluency.css
+ */
+
+module.exports = {
+  name: "MateFluency",
+  version: "1.0.0",
+  description: "EcoWestern Naturalism Design System",
+
+  /**
+   * Design tokens — exposed as JS for use in design tools,
+   * or for generating Tailwind config in v3 projects.
+   */
+  tokens: {
+    colors: {
+      green:        "#086d00",
+      greenFocus:   "#1db100",
+      greenHover:   "#065a00",
+      ink:          "#1d1d1f",
+      text2:        "#515154",
+      text3:        "#6e6e73",
+      separator:    "#e8e8ed",
+      canvas:       "#f7f7f2",
+    },
+    radius: {
+      organic: "2rem",
+    },
+    easing: {
+      release: "cubic-bezier(0.25, 1, 0.5, 1)",
+      enter:   "cubic-bezier(0.16, 1, 0.3, 1)",
+    },
+  },
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "matefluency",
+    "version": "1.0.0",
+    "description": "MateFluency — The EcoWestern Naturalism design system. Organic surfaces, soft textures, and weighted motion for the modern web.",
+    "keywords": [
+        "design-system",
+        "css",
+        "naturalism",
+        "matefluency",
+        "ecowestern",
+        "ui"
+    ],
+    "author": "EcoWestern <hello@ecowestern.net>",
+    "license": "UNLICENSED",
+    "homepage": "https://ecowestern.net",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ecowestern/matefluency"
+    },
+    "main": "index.js",
+    "exports": {
+        ".": "./index.js",
+        "./css": "./dist/matefluency.css"
+    },
+    "files": [
+        "dist/",
+        "index.js",
+        "README.md",
+        "LICENSE"
+    ],
+    "scripts": {
+        "build": "node scripts/build.js",
+        "prepublishOnly": "npm run build"
+    },
+    "devDependencies": {
+        "fs-extra": "^11.2.0"
+    }
+}