@tailor-platform/app-shell 1.4.1 → 1.6.0

package/dist/themes/default.css

@@ -0,0 +1,162 @@
+/**
+ * Default palette — base `:root` tokens.
+ *
+ * All palettes inherit shared aliases + semantic tokens from here.
+ * Branded palettes override only palette-specific tokens; see ./_template.css.
+ */
+:root {
+  color-scheme: light;
+
+  /* ── 1. BRAND ─────────────────────────────────────────────────────────── */
+  --primary: rgba(23, 23, 23, 1);
+  --primary-foreground: rgba(250, 250, 250, 1);
+  --secondary: rgba(245, 245, 245, 1);
+  --secondary-foreground: rgba(23, 23, 23, 1);
+  --accent: rgb(237, 237, 237);
+  --accent-foreground: rgba(10, 10, 10, 1);
+
+  /* ── 2. SHELL GRADIENT — not used (flat palette) ──────────────────────── */
+
+  /* ── 3. SHARED ALIASES — inherited by palettes; usually leave as-is ───── */
+  --ring: color-mix(in srgb, var(--primary) 45%, transparent);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-ring: var(--ring);
+
+  /* ── 4. SYSTEM ────────────────────────────────────────────────────────── */
+  --background: rgba(250, 250, 250, 1);
+  --foreground: rgba(10, 10, 10, 1);
+  --card: rgba(255, 255, 255, 1);
+  --card-foreground: rgba(10, 10, 10, 1);
+  --popover: rgba(255, 255, 255, 1);
+  --popover-foreground: rgba(10, 10, 10, 1);
+  --muted: rgba(245, 245, 245, 1);
+  --muted-foreground: rgba(115, 115, 115, 1);
+  --border: rgba(229, 229, 229, 1);
+  --input: rgba(229, 229, 229, 1);
+  --sidebar: rgba(250, 250, 250, 1);
+  --sidebar-foreground: rgba(10, 10, 10, 1);
+  --sidebar-border: rgba(229, 229, 229, 1);
+
+  /* ── 5. PALETTE ───────────────────────────────────────────────────────── */
+  --destructive: rgba(220, 38, 38, 1);
+  --destructive-foreground: rgba(254, 242, 242, 1);
+  --radius: 0.625rem;
+  --chart-1: rgba(234, 88, 12, 1);
+  --chart-2: rgba(13, 148, 136, 1);
+  --chart-3: rgba(22, 78, 99, 1);
+  --chart-4: rgba(251, 191, 36, 1);
+  --chart-5: rgba(245, 158, 11, 1);
+  --semantic-shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.06);
+  --semantic-shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08);
+  --semantic-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.09), 0 2px 4px -2px rgb(15 23 42 / 0.06);
+  --semantic-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.12), 0 4px 6px -4px rgb(15 23 42 / 0.09);
+
+  /* ── 6. SEMANTIC — product-wide; inherited by all palettes, do not override */
+  --status-default: #737373;
+  --status-neutral: #0ea5e9;
+  --status-completed: #22c55e;
+  --status-attention: #f59e0b;
+  --status-danger: #ef4444;
+  --alert-neutral-background: var(--muted);
+  --alert-neutral-foreground: var(--foreground);
+  --alert-neutral-foreground-muted: var(--muted-foreground);
+  --alert-neutral-border: var(--border);
+  --alert-success-foreground: #15803d;
+  --alert-success-foreground-muted: color-mix(
+    in srgb,
+    var(--alert-success-foreground) 80%,
+    transparent
+  );
+  --alert-success-background: color-mix(in srgb, #22c55e 10%, transparent);
+  --alert-success-border: color-mix(in srgb, #22c55e 20%, transparent);
+  --alert-warning-foreground: #a16207;
+  --alert-warning-foreground-muted: color-mix(
+    in srgb,
+    var(--alert-warning-foreground) 80%,
+    transparent
+  );
+  --alert-warning-background: color-mix(in srgb, #eab308 10%, transparent);
+  --alert-warning-border: color-mix(in srgb, #eab308 20%, transparent);
+  --alert-error-foreground: var(--destructive);
+  --alert-error-foreground-muted: color-mix(
+    in srgb,
+    var(--alert-error-foreground) 80%,
+    transparent
+  );
+  --alert-error-background: color-mix(in srgb, var(--destructive) 10%, transparent);
+  --alert-error-border: color-mix(in srgb, var(--destructive) 20%, transparent);
+  --alert-info-foreground: #1d4ed8;
+  --alert-info-foreground-muted: color-mix(in srgb, var(--alert-info-foreground) 80%, transparent);
+  --alert-info-background: color-mix(in srgb, #3b82f6 10%, transparent);
+  --alert-info-border: color-mix(in srgb, #3b82f6 20%, transparent);
+}
+
+/*
+ * Dark variant. Overrides BRAND + SYSTEM (+ semantic foregrounds that differ).
+ * Shared aliases/ring re-resolve when BRAND changes; `--radius` and `--status-*`
+ * inherit from the light block.
+ */
+.dark {
+  color-scheme: dark;
+
+  /* ── 1. BRAND (dark) ──────────────────────────────────────────────────── */
+  --primary: rgba(229, 229, 229, 1);
+  --primary-foreground: rgba(23, 23, 23, 1);
+  --secondary: rgba(38, 38, 38, 1);
+  --secondary-foreground: rgba(250, 250, 250, 1);
+  --accent: rgb(48, 48, 48);
+  --accent-foreground: rgba(250, 250, 250, 1);
+
+  /* ── 4. SYSTEM (dark) ─────────────────────────────────────────────────── */
+  --background: rgba(10, 10, 10, 1);
+  --foreground: rgba(250, 250, 250, 1);
+  --card: rgba(23, 23, 23, 1);
+  --card-foreground: rgba(250, 250, 250, 1);
+  --popover: rgba(38, 38, 38, 1);
+  --popover-foreground: rgba(250, 250, 250, 1);
+  --muted: rgba(38, 38, 38, 1);
+  --muted-foreground: rgba(163, 163, 163, 1);
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.15);
+  --sidebar: rgba(10, 10, 10, 1);
+  --sidebar-foreground: rgba(250, 250, 250, 1);
+  --sidebar-border: rgba(255, 255, 255, 0.1);
+
+  /* ── 5. PALETTE (dark) ────────────────────────────────────────────────── */
+  --destructive: rgba(248, 113, 113, 1);
+  --destructive-foreground: rgba(254, 242, 242, 1);
+  --chart-1: rgba(29, 78, 216, 1);
+  --chart-2: rgba(16, 185, 129, 1);
+  --chart-3: rgba(245, 158, 11, 1);
+  --chart-4: rgba(168, 85, 247, 1);
+  --chart-5: rgba(244, 63, 94, 1);
+  --semantic-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
+  --semantic-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.38), 0 1px 2px -1px rgb(0 0 0 / 0.32);
+  --semantic-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.28);
+  --semantic-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.42), 0 4px 6px -4px rgb(0 0 0 / 0.35);
+
+  /* ── 6. SEMANTIC (dark foreground adjustments) ──────────────────────── */
+  --alert-success-foreground: #86efac;
+  --alert-success-foreground-muted: color-mix(
+    in srgb,
+    var(--alert-success-foreground) 85%,
+    transparent
+  );
+  --alert-warning-foreground: #fde047;
+  --alert-warning-foreground-muted: color-mix(
+    in srgb,
+    var(--alert-warning-foreground) 85%,
+    transparent
+  );
+  --alert-error-foreground: #fca5a5;
+  --alert-error-foreground-muted: color-mix(
+    in srgb,
+    var(--alert-error-foreground) 85%,
+    transparent
+  );
+  --alert-info-foreground: #93c5fd;
+  --alert-info-foreground-muted: color-mix(in srgb, var(--alert-info-foreground) 85%, transparent);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "An opinionated React application framework for building ERP applications on Tailor Platform",
   "keywords": [
     "app-shell",
@@ -28,7 +28,8 @@
   "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
-    "./theme.css": "./dist/theme.css",
+    "./theme.css": "./dist/theme.shims.css",
+    "./themes/*": "./dist/themes/*.css",
     ".": {
       "types": "./dist/app-shell.d.ts",
       "default": "./dist/app-shell.js"
@@ -43,6 +44,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
+    "@fontsource-variable/inter": "^5.0.0",
     "@standard-schema/spec": "^1.1.0",
     "@tailor-platform/auth-public-client": "^0.5.0",
     "change-case": "^5.4.4",
@@ -54,7 +56,7 @@
     "react-router": "^7.14.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "@tailor-platform/app-shell-vite-plugin": "0.2.2"
+    "@tailor-platform/app-shell-vite-plugin": "0.2.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.0",

package/skills/app-shell-patterns/references/fundamental/components.md

@@ -424,6 +424,27 @@ const table = useDataTable({
 
 **Used in patterns:** KPI tiles, dashboards, **`detail/*`** metric strips where specs call for them.
 
+### `DocumentProgressCard`
+
+**Import:** `import { DocumentProgressCard } from '@tailor-platform/app-shell'`
+**Purpose:** Generic document lifecycle/fulfilment state — optional percentage, stacked progress bar, status legend; arbitrary `segments`.
+**API:** `DocumentProgressCardProps` — `segments` (`{ label, value, color? }[]`), `title?`, `percent?`, `legend?` (defaults to `segments`), `total?` (bar denominator; larger than the sum leaves an empty track), `className?`. View-only — `percent` is explicit.
+**Example:**
+
+```tsx
+<DocumentProgressCard
+  title="Shipment status"
+  percent={60}
+  segments={[
+    { label: "Shipped", value: 30, color: "green" },
+    { label: "Returned", value: 3, color: "red" },
+    { label: "Pending", value: 17, color: "neutral" },
+  ]}
+/>
+```
+
+**Used in patterns:** **`detail/*`** right-rail cards for arbitrary status breakdowns (shipped/cancelled/pending, PO received/returned/yet-to-receive, etc.). For the purchase-order fulfilment recipe (derived %, net-received/returned bar split, legend override), see `docs/components/document-progress-card.md`.
+
 ### `Avatar`
 
 **Import:** `import { Avatar } from '@tailor-platform/app-shell'`