@calliopelabs/ui 0.0.0-stage → 0.1.0

package/dist/theme/tokens.js

@@ -0,0 +1,294 @@
+/**
+ * The Calliope AI operator palette: one table, and the source of
+ * `src/styles/theme.css` (`npm run theme`). Every value here is either a
+ * ground (the surface ramp), a family accent (action colour and the lead
+ * chart series), a semantic status, or a density step.
+ *
+ * Values come from the Astrolift frontend (`app/globals.css`, origin/main
+ * 8edb40d) and the operator-UI amendment of 2026-08-21: grounds are black
+ * and neutral, the sidebar is the one brand surface, corners are 2px, a
+ * second hue is allowed as accent, and semantic status never moves with the
+ * accent or the ground's tint. Astrolift's light values were oklch; they are
+ * stored here as the sRGB they render to, so the contrast tests can read
+ * them. One value changed on the way: light `warning` went from
+ * oklch(0.66 0.16 70) to oklch(0.65 0.16 70) so a warning dot clears 3:1 on
+ * paper and mist.
+ */
+export const GROUNDS = {
+    black: { label: "Black", mode: "dark" },
+    charcoal: { label: "Charcoal", mode: "dark" },
+    graphite: { label: "Graphite", mode: "dark" },
+    emerald: { label: "Emerald", mode: "dark" },
+    paper: { label: "Paper", mode: "light" },
+    mist: { label: "Mist", mode: "light" },
+};
+export const GROUND_KEYS = Object.keys(GROUNDS);
+const PRIMARY_TINT_16 = "color-mix(in oklab, var(--primary) 16%, transparent)";
+const PRIMARY_TINT_14 = "color-mix(in oklab, var(--primary) 14%, transparent)";
+export const SURFACES = {
+    black: {
+        background: "#000000",
+        card: "#0a0a0a",
+        popover: "#141414",
+        secondary: "#161616",
+        muted: "#111111",
+        accent: "#1b1b1b",
+        mutedForeground: "#848b88",
+        border: "rgba(255, 255, 255, 0.1)",
+        input: "rgba(255, 255, 255, 0.1)",
+        sidebar: "brand",
+        sidebarAccent: PRIMARY_TINT_16,
+        sidebarBorder: "rgba(255, 255, 255, 0.08)",
+    },
+    charcoal: {
+        background: "#0e0f10",
+        card: "#161819",
+        popover: "#1e2022",
+        secondary: "#202325",
+        muted: "#191b1c",
+        accent: "#232628",
+        mutedForeground: "#8b9194",
+        border: "rgba(255, 255, 255, 0.1)",
+        input: "rgba(255, 255, 255, 0.1)",
+        sidebar: "brand",
+        sidebarAccent: PRIMARY_TINT_16,
+        sidebarBorder: "rgba(255, 255, 255, 0.08)",
+    },
+    graphite: {
+        background: "#111214",
+        card: "#18191b",
+        popover: "#202124",
+        secondary: "#222326",
+        muted: "#1b1c1e",
+        accent: "#26272a",
+        mutedForeground: "#8e9296",
+        border: "rgba(255, 255, 255, 0.09)",
+        input: "rgba(255, 255, 255, 0.1)",
+        sidebar: "#161719",
+        sidebarAccent: PRIMARY_TINT_14,
+        sidebarBorder: "rgba(255, 255, 255, 0.07)",
+    },
+    emerald: {
+        background: "#050b08",
+        card: "#0a1310",
+        popover: "#0d1814",
+        secondary: "#121d18",
+        muted: "#101a15",
+        accent: "#16261f",
+        mutedForeground: "#8ba199",
+        border: "rgba(255, 255, 255, 0.1)",
+        input: "rgba(255, 255, 255, 0.1)",
+        sidebar: "brand",
+        sidebarAccent: PRIMARY_TINT_16,
+        sidebarBorder: "rgba(255, 255, 255, 0.08)",
+    },
+    paper: {
+        background: "#faf6ee",
+        card: "#fffdf9",
+        popover: "#fffdf9",
+        secondary: "#f3eee4",
+        muted: "#f3eee4",
+        accent: "#f0e6da",
+        mutedForeground: "#5c5b58",
+        border: "#dedad2",
+        input: "#dedad2",
+        sidebar: "#f5f0e4",
+        sidebarAccent: "#f0e6da",
+        sidebarBorder: "#dedad2",
+    },
+    mist: {
+        background: "#f2f7f9",
+        card: "#ffffff",
+        popover: "#ffffff",
+        secondary: "#e9eff2",
+        muted: "#e9eff2",
+        accent: "#dfeaf0",
+        mutedForeground: "#5c5b58",
+        border: "#d6dcdf",
+        input: "#d6dcdf",
+        sidebar: "#e9f1f5",
+        sidebarAccent: "#dfeaf0",
+        sidebarBorder: "#d6dcdf",
+    },
+};
+/**
+ * What a mode paints before a ground refines it: dark starts on black, light
+ * on a neutral white. Every shipped ground overrides these surfaces, so the
+ * light set only shows when no ground is set.
+ */
+export const BASE_SURFACES = {
+    dark: SURFACES.black,
+    light: {
+        background: "#fafaf9",
+        card: "#ffffff",
+        popover: "#ffffff",
+        secondary: "#f1f1f0",
+        muted: "#f1f1f0",
+        accent: "#f3ebe5",
+        mutedForeground: "#5c5b58",
+        border: "#dfdedc",
+        input: "#dfdedc",
+        sidebar: "#f4f3f1",
+        sidebarAccent: "#f3ebe5",
+        sidebarBorder: "#dfdedc",
+    },
+};
+export const MODE_TOKENS = {
+    dark: {
+        foreground: "#f0f2f1",
+        destructive: "#ff6b6b",
+        chart: {
+            "chart-2": "#8fd82a",
+            "chart-3": "#cbf39d",
+            "chart-4": "#e0b34a",
+            "chart-5": "#0b6644",
+        },
+        sidebarForeground: "#f0f2f1",
+        status: {
+            success: {
+                base: "#8fd82a",
+                fg: "#a6e34d",
+                bg: "rgba(143, 216, 42, 0.1)",
+                border: "rgba(143, 216, 42, 0.35)",
+            },
+            warning: {
+                base: "#f0c34e",
+                fg: "#f0c34e",
+                bg: "rgba(240, 195, 78, 0.1)",
+                border: "rgba(240, 195, 78, 0.35)",
+            },
+            info: {
+                base: "#2f9e52",
+                fg: "#5cbb79",
+                bg: "rgba(47, 158, 82, 0.14)",
+                border: "rgba(47, 158, 82, 0.4)",
+            },
+            danger: {
+                base: "#ff6b6b",
+                fg: "#ff8a8a",
+                bg: "rgba(255, 107, 107, 0.1)",
+                border: "rgba(255, 107, 107, 0.35)",
+            },
+        },
+    },
+    light: {
+        foreground: "#1e1d1b",
+        destructive: "#d40c1a",
+        chart: {
+            "chart-2": "#5c9c1a",
+            "chart-3": "#8a7a5c",
+            "chart-4": "#b8860b",
+            "chart-5": "#26803f",
+        },
+        sidebarForeground: "#1e1d1b",
+        status: {
+            success: { base: "#508d23", fg: "#305a12", bg: "#e3f5da", border: "#b4d7a2" },
+            warning: { base: "#cb7a00", fg: "#824c12", bg: "#fef0d4", border: "#e8c184" },
+            info: { base: "#2f8543", fg: "#1b622d", bg: "#e2f4e3", border: "#acd8b1" },
+            danger: { base: "#df2225", fg: "#bb0916", bg: "#ffeae9", border: "#ffb1aa" },
+        },
+    },
+};
+export const ACCENTS = {
+    green: {
+        label: "Green",
+        dark: "#2f9e52",
+        onDark: "#04241b",
+        light: "#26803f",
+        onLight: "#f3fbf7",
+    },
+    copper: {
+        label: "Copper",
+        dark: "#c97b4a",
+        onDark: "#140a04",
+        light: "#9c5730",
+        onLight: "#f3fbf7",
+        chart: { dark: { "chart-3": "#d9c7a3", "chart-5": "#2f9e52" } },
+    },
+    ice: {
+        label: "Ice",
+        dark: "#6e9fc4",
+        onDark: "#06131c",
+        light: "#3d6f95",
+        onLight: "#f3fbf7",
+        chart: { dark: { "chart-3": "#b9d4e4", "chart-5": "#2f9e52" } },
+    },
+    periwinkle: {
+        label: "Periwinkle",
+        dark: "#8b8fd9",
+        onDark: "#0b0c1a",
+        light: "#5a5fae",
+        onLight: "#f3fbf7",
+        chart: { dark: { "chart-3": "#c3c5ec", "chart-5": "#2f9e52" } },
+    },
+    amber: {
+        label: "Amber",
+        dark: "#e0b34a",
+        onDark: "#1a1204",
+        light: "#8a6410",
+        onLight: "#f3fbf7",
+        // Amber is the accent here, so the amber series moves to copper.
+        chart: { dark: { "chart-4": "#c97b4a" } },
+    },
+};
+export const ACCENT_KEYS = Object.keys(ACCENTS);
+/** The accent a mode paints when nothing chooses one. */
+export const DEFAULT_ACCENT = "green";
+/**
+ * Density is a layout axis, not padding (operator-UI amendment): `compact`
+ * is one panel of hairline rows, `cards` boxes items and flows them into
+ * responsive columns. Components read these variables, and a subtree can
+ * carry its own `data-density`, so the nearest one wins.
+ */
+export const DENSITIES = {
+    compact: {
+        label: "Compact",
+        hint: "Dense rows with hairline dividers",
+        tokens: {
+            "row-pad-y": "0.5rem",
+            "row-pad-x": "0.75rem",
+            "stack-gap": "0.75rem",
+            "panel-pad": "1rem",
+            "list-columns": "minmax(0, 1fr)",
+            "list-gap": "0px",
+            "list-frame-border": "1px",
+            "list-frame-radius": "var(--radius)",
+            "list-item-border": "0px",
+            "list-item-radius": "0px",
+            "list-item-bg": "transparent",
+            "list-item-pad": "var(--row-pad-y) var(--row-pad-x)",
+            "list-item-direction": "row",
+            "list-item-align": "center",
+            "list-item-trail": "auto",
+        },
+    },
+    cards: {
+        label: "Cards",
+        hint: "Boxed items that flow into columns",
+        tokens: {
+            "row-pad-y": "0.9rem",
+            "row-pad-x": "1rem",
+            "stack-gap": "1rem",
+            "panel-pad": "1.25rem",
+            "list-columns": "repeat(auto-fill, minmax(min(100%, 16rem), 1fr))",
+            "list-gap": "var(--stack-gap)",
+            "list-frame-border": "0px",
+            "list-frame-radius": "0px",
+            "list-item-border": "1px",
+            "list-item-radius": "var(--radius)",
+            "list-item-bg": "var(--card)",
+            "list-item-pad": "var(--panel-pad)",
+            "list-item-direction": "column",
+            "list-item-align": "stretch",
+            "list-item-trail": "0px",
+        },
+    },
+};
+export const DENSITY_KEYS = Object.keys(DENSITIES);
+/** Mode-independent tokens. `--radius` is the corners setting (2px shipped). */
+export const STATIC_TOKENS = {
+    radius: "2px",
+    "motion-fast": "120ms",
+    "motion-base": "200ms",
+    "motion-slow": "320ms",
+};

package/package.json

@@ -1,6 +1,114 @@
 {
   "name": "@calliopelabs/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Calliope AI shared operator UI: app shell, navigation, page frame, data table and list patterns, status colours, design tokens and appearance for Astrolift AI and Zentinelle AI.",
+  "keywords": [
+    "calliope-ai",
+    "astrolift",
+    "zentinelle",
+    "react",
+    "tailwindcss",
+    "design-system",
+    "storybook"
+  ],
+  "homepage": "https://github.com/calliopeai/calliope-ui#readme",
+  "bugs": {
+    "url": "https://github.com/calliopeai/calliope-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/calliopeai/calliope-ui.git"
+  },
+  "license": "MIT",
+  "author": "Calliope Labs Inc",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./dist/styles/theme.css",
+    "./preset.css": "./dist/styles/preset.css",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepack": "npm run build",
+    "pack:check": "node scripts/check-package.mjs",
+    "theme": "tsx scripts/generate-theme.ts",
+    "typecheck": "tsc -p tsconfig.json",
+    "lint": "eslint . --max-warnings=0",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:story-coverage": "vitest run src/test/story-coverage.test.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --quiet"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.58.0",
+    "radix-ui": "^1.8.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.5",
+    "@fontsource-variable/dm-sans": "^5.3.0",
+    "@fontsource/ibm-plex-mono": "^5.3.0",
+    "@fontsource/ibm-plex-sans": "^5.3.0",
+    "@storybook/addon-a11y": "^10.6.2",
+    "@storybook/react-vite": "^10.6.2",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "axe-core": "^4.14.0",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-storybook": "^10.6.2",
+    "globals": "^17.13.0",
+    "jsdom": "^30.1.3",
+    "prettier": "^3.9.10",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "storybook": "^10.6.2",
+    "tailwindcss": "^4.3.3",
+    "tsx": "^4.23.15",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.71.2",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.5"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}