@ecoma-io/loom 0.1.0

package/dist/styles/theme.css

@@ -0,0 +1,212 @@
+/**
+ * Loom — design tokens.
+ * =====================
+ * The single source of truth for the visual language. Everything a consumer
+ * can theme lives here and nowhere else: no colour, duration, easing, radius
+ * or shadow is written literally in a component.
+ *
+ * Positioning it encodes. Ecoma is a platform where an organization digitizes
+ * its own operations and AI agents are a first-class workforce, so the form
+ * language is dual-force:
+ *
+ *   - Human (warp) — the threads strung and held under tension: what people
+ *     author and decide. Doubles as the default action colour, because a
+ *     person drives the interface.
+ *   - Agent (weft) — the thread carried across them: work an agent is running
+ *     or has produced.
+ *   - The seam — a warp→weft gradient — appears ONLY where the two forces
+ *     meet: handoffs, co-authored assets, brand moments. Never under body
+ *     text, never on anything smaller than 20px, never in an interaction
+ *     state.
+ *
+ * Two threads, one cloth: the forces are one piece of work, not two systems.
+ *
+ * Light-first. This is a daytime operations tool, so the paper-light theme is
+ * the single default and there is no runtime light/dark switch. A symmetric
+ * dark theme is a reserved seam that returns with the first surface that
+ * needs it.
+ *
+ * `static` rather than plain `@theme`: Tailwind emits only the variables its
+ * generated utilities reference, and several tokens here are read by an
+ * inline `style` binding or a `@keyframes` block instead — neither of which
+ * the scanner sees. `static` emits all of them, which is what makes
+ * `var(--duration-fast)` resolve inside a component's style attribute.
+ */
+@theme static {
+  /* ---- Neutrals: technical paper, cooled slightly toward the warp ------- */
+  --color-background: hsl(213 25% 96%);
+  --color-foreground: hsl(213 29% 15%);
+
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(213 29% 15%);
+
+  /* Workspace chrome (sidebars, rails) — the sunken layer of the elevation
+   * rhythm: sunken < background < card, so work surfaces read as lifted and
+   * navigation recedes. */
+  --color-sunken: hsl(213 22% 93%);
+
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(213 29% 15%);
+
+  --color-muted: hsl(213 18% 91%);
+  --color-muted-foreground: hsl(213 14% 41%);
+
+  /* Two border weights: the default hairline recedes; strong is for the few
+   * blocks that must assert their edge — an active panel, a keyboard target
+   * zone. */
+  --color-border: hsl(213 16% 87%);
+  --color-border-strong: hsl(213 14% 78%);
+  --color-input: hsl(213 15% 82%);
+
+  /* Neutral hover/press fill. This is a neutral, not the brand: a hover state
+   * is not an action colour. */
+  --color-subtle: hsl(213 20% 94%);
+  --color-subtle-foreground: hsl(213 29% 18%);
+
+  /* ---- Force 1 · Human — warp: default action, structure, decisions ----- */
+  --color-primary: hsl(211 37% 32%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-primary-muted: hsl(211 35% 92%); /* warp wash: selected/active fills */
+
+  /* ---- Force 2 · Agent — weft: automated work running or produced ------- */
+  --color-agent: hsl(18 56% 39%);
+  --color-agent-foreground: hsl(0 0% 100%);
+  --color-agent-muted: hsl(18 50% 93%); /* weft wash: agent-driven surfaces */
+
+  --color-secondary: hsl(213 18% 91%);
+  --color-secondary-foreground: hsl(213 29% 18%);
+
+  /* Focus ring is the Human warp: keyboard focus is a person acting. */
+  --color-ring: hsl(211 37% 32%);
+
+  /* ---- Functional — hues kept distinct from both forces ----------------- */
+  --color-destructive: hsl(356 65% 41%);
+  --color-destructive-foreground: hsl(0 0% 100%);
+  --color-success: hsl(152 45% 30%);
+  --color-success-foreground: hsl(0 0% 100%);
+  --color-warning: hsl(38 92% 28%);
+  --color-warning-foreground: hsl(0 0% 100%);
+  --color-info: hsl(202 65% 35%);
+  --color-info-foreground: hsl(0 0% 100%);
+
+  /* ---- The seam: the two forces meeting. Interpolated in OKLCH so the
+   * midpoint never turns muddy. Reach for it through the `bg-seam` utility
+   * below, at handoff points and brand moments only. ---------------------- */
+  --seam: linear-gradient(90deg in oklch, hsl(211 37% 32%), hsl(18 56% 39%));
+
+  /* ---- Shape: small, even fillets — milled, never blobby.
+   * Nesting law: inner radius = outer radius − padding, floor 2px. Pick the
+   * step that honours it rather than an arbitrary value. ------------------ */
+  --radius-md: 0.5rem; /* 8px — the control radius */
+  --radius-sm: calc(var(--radius-md) - 4px);
+  --radius-lg: calc(var(--radius-md) + 4px);
+  --radius-xl: calc(var(--radius-md) + 8px);
+
+  /* ---- Motion. Motion is meaning, not decoration ------------------------ */
+  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* emphasized decelerate — the default */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* restrained overshoot */
+
+  --duration-instant: 80ms;
+  --duration-fast: 140ms;
+  --duration-normal: 200ms; /* the feedback ceiling — snappy, never sluggish */
+  --duration-slow: 320ms;
+  --duration-slower: 480ms;
+
+  /* Tailwind's own defaults for a bare `transition-*`, so a component that
+   * declares no duration still speaks the Loom vocabulary. */
+  --default-transition-duration: var(--duration-normal);
+  --default-transition-timing-function: var(--ease-out);
+
+  /* ---- Elevation: hairline-first. Cool, soft, and reserved for true
+   * overlays — a shadow is depth, never a glow. -------------------------- */
+  --shadow-sm: 0 1px 2px 0 hsl(213 30% 12% / 0.07);
+  --shadow-md: 0 4px 12px -2px hsl(213 30% 12% / 0.1), 0 2px 6px -2px hsl(213 30% 12% / 0.07);
+  --shadow-lg: 0 12px 32px -6px hsl(213 30% 12% / 0.14), 0 4px 10px -4px hsl(213 30% 12% / 0.08);
+
+  /* Focus halo — a warp haze AROUND the crisp ring outline, added on top of
+   * it and never replacing it, so the outline still shows under
+   * forced-colors. */
+  --shadow-halo: 0 0 0 4px hsl(211 37% 32% / 0.15);
+
+  /* ---- Type ------------------------------------------------------------ */
+  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace;
+
+  /* The named scale, as utilities: text-display … text-micro. A view composes
+   * the scale instead of hand-picking a size, weight and tracking per
+   * heading; weight and tracking ride along. Override with font-* or
+   * tracking-* only for a deliberate divergence. */
+  --text-display: 2.25rem;
+  --text-display--line-height: 1.1;
+  --text-display--font-weight: 600;
+  --text-display--letter-spacing: -0.02em;
+
+  --text-heading: 1.5rem;
+  --text-heading--line-height: 1.2;
+  --text-heading--font-weight: 600;
+  --text-heading--letter-spacing: -0.01em;
+
+  --text-title: 1.125rem;
+  --text-title--line-height: 1.3;
+  --text-title--font-weight: 500;
+
+  --text-body: 0.875rem;
+  --text-body--line-height: 1.55;
+  --text-body--font-weight: 400;
+
+  --text-small: 0.75rem;
+  --text-small--line-height: 1.5;
+  --text-small--font-weight: 400;
+
+  --text-micro: 0.6875rem;
+  --text-micro--line-height: 1.4;
+  --text-micro--font-weight: 400;
+
+  /* ---- Wide and ultra-wide breakpoints. Tailwind's own scale stops at
+   * 1536px, short of the desktop reality these products run on; `@theme`
+   * merges, so sm…2xl stay intact. Width only — there is deliberately no
+   * height vocabulary. Snap a window's minimum width to one of these names,
+   * never to an arbitrary pixel count. ----------------------------------- */
+  --breakpoint-3xl: 1920px; /* FHD desktop, maximized on one monitor */
+  --breakpoint-4xl: 2560px; /* QHD */
+  --breakpoint-5xl: 3440px; /* 21:9 ultra-wide */
+
+  /* ---- The animation vocabulary. Keyframes live in global.css; these are
+   * the named utilities that play them. ---------------------------------- */
+  --animate-fade: fade var(--duration-normal) var(--ease-out) both;
+  --animate-fade-rise: fade-rise var(--duration-normal) var(--ease-out) both;
+  --animate-scale-in: scale-in var(--duration-fast) var(--ease-spring) both;
+  --animate-shimmer: shimmer 1.6s linear infinite;
+  /* Agent at work — the weft's shuttle beat. */
+  --animate-conduct: conduct 1.8s var(--ease-in-out) infinite;
+  /* A live seam: the warp↔weft boundary drifts while the collaboration runs,
+   * and goes static once the work settles. */
+  --animate-seam-flow: seam-flow 3.2s linear infinite;
+  --animate-progress-indeterminate: progress-indeterminate 1.3s var(--ease-in-out) infinite;
+  --animate-toast-in: toast-in var(--duration-normal) var(--ease-spring) both;
+}
+
+/* Tailwind has no `--duration-*` theme namespace — `duration-*` takes a bare
+ * millisecond count or an arbitrary value, so the named steps above would be
+ * reachable from an inline style but not from a class. These four close that
+ * gap, and they are why a component never writes `duration-[140ms]`. */
+@utility duration-instant {
+  transition-duration: var(--duration-instant);
+}
+@utility duration-fast {
+  transition-duration: var(--duration-fast);
+}
+@utility duration-slow {
+  transition-duration: var(--duration-slow);
+}
+@utility duration-slower {
+  transition-duration: var(--duration-slower);
+}
+
+/* The seam, as a background. A gradient is not a colour, so it has no colour
+ * namespace to live in; this is the only sanctioned way to paint one. */
+@utility bg-seam {
+  background-image: var(--seam);
+}

package/package.json

@@ -0,0 +1,123 @@
+{
+  "name": "@ecoma-io/loom",
+  "version": "0.1.0",
+  "description": "Design system & components for the Ecoma ecosystem.",
+  "keywords": [
+    "design-system",
+    "component-library",
+    "ui-components",
+    "ui-kit",
+    "design-tokens",
+    "vue",
+    "vue3",
+    "tailwindcss",
+    "accessibility",
+    "a11y",
+    "wcag",
+    "theming",
+    "dark-mode",
+    "ecoma"
+  ],
+  "homepage": "https://github.com/ecoma-io/loom#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ecoma-io/loom.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ecoma-io/loom/issues"
+  },
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Mai Ngọc Hóa (John Martin)",
+    "email": "john.itvn@gmail.com"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./a11y": {
+      "types": "./dist/a11y.d.ts",
+      "default": "./dist/a11y.js"
+    },
+    "./styles/global.css": "./dist/styles/global.css",
+    "./styles/theme.css": "./dist/styles/theme.css",
+    "./styles/fonts.css": "./dist/styles/fonts.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@11.20.0",
+  "engines": {
+    "node": ">=24",
+    "pnpm": ">=11"
+  },
+  "scripts": {
+    "prepare": "lefthook install",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint . --max-warnings 0 && node tools/check-component-artifacts.ts",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "e2e": "playwright test",
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:stage": "node tools/stage-docs.ts",
+    "docs:preview": "vitepress preview docs"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.12.1",
+    "@commitlint/cli": "^21.2.1",
+    "@commitlint/config-conventional": "^21.2.0",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.62.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.1.2",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@vitest/eslint-plugin": "^1.6.26",
+    "@vue/test-utils": "^2.4.11",
+    "eslint": "^10.8.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-playwright": "^2.11.0",
+    "eslint-plugin-vue": "^10.10.0",
+    "eslint-plugin-vuejs-accessibility": "^2.5.0",
+    "fast-check": "^4.9.0",
+    "globals": "^17.9.0",
+    "gsap": "^3.15.0",
+    "jsdom": "^30.0.1",
+    "lefthook": "^2.1.10",
+    "prettier": "^3.9.6",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.66.0",
+    "vite": "^8.2.0",
+    "vitepress": "^1.6.4",
+    "vitest": "^4.1.10",
+    "vue": "^3.5.40",
+    "vue-docgen-api": "^4.79.2",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "^3.3.9",
+    "wrangler": "^4.118.0"
+  },
+  "dependencies": {
+    "@lucide/vue": "^1.28.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "reka-ui": "^2.10.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}