@cratis/components 3.3.3 → 3.4.0

package/dist/esm/primereact-v10-palette.css

@@ -0,0 +1,242 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+/*
+ * The PrimeReact 10 theme palette, carried forward.
+ *
+ * PrimeReact 10's stylesheet themes published a set of custom properties on `:root` —
+ * `--surface-ground`, `--surface-card`, `--surface-border`, `--text-color`, `--primary-color`,
+ * the `--surface-0…900` and `--gray/--blue/--red-…` scales, and so on — and applications wrote
+ * their own CSS against them for years. PrimeReact 11 ships no stylesheet, so those names
+ * resolve to nothing the day it is installed: borders vanish, cards lose their background,
+ * text falls back to the browser default.
+ *
+ * This file restores every one of them, with the values of the `lara-light-blue` and
+ * `lara-dark-blue` themes both Cratis applications shipped, so an application can move to
+ * PrimeReact 11 without rewriting those call sites. Import it once, next to the token layer:
+ *
+ *     import '@cratis/components/tokens';
+ *     import '@cratis/components/styles';
+ *     import '@cratis/components/primereact-v10-palette';
+ *
+ * Two kinds of name:
+ *
+ * - The **semantic** names (`--surface-ground`, `--surface-card`, `--text-color`,
+ *   `--primary-color`, …) resolve from the active `@primeuix/themes` preset's `--p-*` tokens
+ *   where PrimeReact 11 has an equivalent, so they follow whatever preset is applied — with
+ *   the Lara values as the fallback when no preset is present.
+ * - The **numbered scales** (`--surface-0…900`, `--primary-50…900`, `--gray/--blue/--red-…`)
+ *   are the Lara values verbatim. PrimeReact 11's `--p-surface-*` scale is not inverted in
+ *   dark mode the way the v10 one was, so it cannot stand in for it.
+ *
+ * Light and dark are both carried through `light-dark()`, which reads the element's
+ * `color-scheme`. `.cratis-dark` — the class the Cratis baseline theme and `styledMode()`
+ * key dark mode off — sets it, so one class on the body switches every name below.
+ *
+ * Nothing new should be written against these names: use the `--cratis-*` tokens (or the
+ * preset's `--p-*` tokens) instead. This exists so what already is written keeps working.
+ */
+
+.cratis-dark {
+    color-scheme: dark;
+}
+
+:root {
+    /* Semantic surfaces and text — follow the preset, fall back to Lara */
+    --surface-ground: light-dark(#f9fafb, #111827);
+    --surface-section: light-dark(#ffffff, #111827);
+    --surface-card: var(--p-content-background, light-dark(#ffffff, #1f2937));
+    --surface-overlay: var(--p-overlay-modal-background, light-dark(#ffffff, #1f2937));
+    --surface-border: var(--p-content-border-color, light-dark(#dfe7ef, rgba(255, 255, 255, 0.1)));
+    --surface-hover: var(--p-content-hover-background, light-dark(#f6f9fc, rgba(255, 255, 255, 0.03)));
+    --text-color: var(--p-text-color, light-dark(#4b5563, rgba(255, 255, 255, 0.87)));
+    --text-color-secondary: var(--p-text-muted-color, light-dark(#6b7280, rgba(255, 255, 255, 0.6)));
+    --primary-color: var(--p-primary-color, light-dark(#3b82f6, #60a5fa));
+    --primary-color-text: var(--p-primary-contrast-color, light-dark(#ffffff, #030712));
+    --highlight-bg: var(--p-highlight-background, light-dark(#eff6ff, rgba(96, 165, 250, 0.16)));
+    --highlight-text-color: var(--p-highlight-color, light-dark(#1d4ed8, rgba(255, 255, 255, 0.87)));
+    --focus-ring: var(--p-focus-ring-shadow, 0 0 0 0.2rem light-dark(#bfdbfe, rgba(96, 165, 250, 0.2)));
+    --maskbg: var(--p-mask-background, rgba(0, 0, 0, 0.4));
+    --border-radius: var(--p-content-border-radius, 6px);
+
+    /* Spacing the v10 themes published alongside the palette */
+    --content-padding: 1.25rem;
+    --inline-spacing: 0.5rem;
+
+    /* The v9 aliases the v10 themes still carried */
+    --surface-a: var(--surface-card);
+    --surface-b: var(--surface-ground);
+    --surface-c: var(--surface-hover);
+    --surface-d: var(--surface-border);
+    --surface-e: var(--surface-overlay);
+    --surface-f: var(--surface-card);
+
+    /* Surface scale — inverted in the dark scheme, as the v10 dark themes had it */
+    --surface-0: light-dark(#ffffff, #111827);
+    --surface-50: light-dark(#f9fafb, #1f2937);
+    --surface-100: light-dark(#f3f4f6, #374151);
+    --surface-200: light-dark(#e5e7eb, #4b5563);
+    --surface-300: light-dark(#d1d5db, #6b7280);
+    --surface-400: #9ca3af;
+    --surface-500: light-dark(#6b7280, #d1d5db);
+    --surface-600: light-dark(#4b5563, #e5e7eb);
+    --surface-700: light-dark(#374151, #f3f4f6);
+    --surface-800: light-dark(#1f2937, #f9fafb);
+    --surface-900: light-dark(#111827, #ffffff);
+
+    /* Primary scale */
+    --primary-50: light-dark(#f5f9ff, #f7fbff);
+    --primary-100: light-dark(#d0e1fd, #d9e9fe);
+    --primary-200: light-dark(#abc9fb, #bbd8fd);
+    --primary-300: light-dark(#85b2f9, #9cc7fc);
+    --primary-400: light-dark(#609af8, #7eb6fb);
+    --primary-500: light-dark(#3b82f6, #60a5fa);
+    --primary-600: light-dark(#326fd1, #528cd5);
+    --primary-700: light-dark(#295bac, #4374af);
+    --primary-800: light-dark(#204887, #355b8a);
+    --primary-900: light-dark(#183462, #264264);
+
+    /* Gray scale */
+    --gray-50: #f9fafb;
+    --gray-100: #f3f4f6;
+    --gray-200: #e5e7eb;
+    --gray-300: #d1d5db;
+    --gray-400: #9ca3af;
+    --gray-500: #6b7280;
+    --gray-600: #4b5563;
+    --gray-700: #374151;
+    --gray-800: #1f2937;
+    --gray-900: #111827;
+
+    /* Blue scale */
+    --blue-50: #f5f9ff;
+    --blue-100: #d0e1fd;
+    --blue-200: #abc9fb;
+    --blue-300: #85b2f9;
+    --blue-400: #609af8;
+    --blue-500: #3b82f6;
+    --blue-600: #326fd1;
+    --blue-700: #295bac;
+    --blue-800: #204887;
+    --blue-900: #183462;
+
+    /* Green scale */
+    --green-50: #f4fcf7;
+    --green-100: #caf1d8;
+    --green-200: #a0e6ba;
+    --green-300: #76db9b;
+    --green-400: #4cd07d;
+    --green-500: #22c55e;
+    --green-600: #1da750;
+    --green-700: #188a42;
+    --green-800: #136c34;
+    --green-900: #0e4f26;
+
+    /* Yellow scale */
+    --yellow-50: #fefbf3;
+    --yellow-100: #faedc4;
+    --yellow-200: #f6de95;
+    --yellow-300: #f2d066;
+    --yellow-400: #eec137;
+    --yellow-500: #eab308;
+    --yellow-600: #c79807;
+    --yellow-700: #a47d06;
+    --yellow-800: #816204;
+    --yellow-900: #5e4803;
+
+    /* Cyan scale */
+    --cyan-50: #f3fbfd;
+    --cyan-100: #c3edf5;
+    --cyan-200: #94e0ed;
+    --cyan-300: #65d2e4;
+    --cyan-400: #35c4dc;
+    --cyan-500: #06b6d4;
+    --cyan-600: #059bb4;
+    --cyan-700: #047f94;
+    --cyan-800: #036475;
+    --cyan-900: #024955;
+
+    /* Pink scale */
+    --pink-50: #fef6fa;
+    --pink-100: #fad3e7;
+    --pink-200: #f7b0d3;
+    --pink-300: #f38ec0;
+    --pink-400: #f06bac;
+    --pink-500: #ec4899;
+    --pink-600: #c93d82;
+    --pink-700: #a5326b;
+    --pink-800: #822854;
+    --pink-900: #5e1d3d;
+
+    /* Indigo scale */
+    --indigo-50: #f7f7fe;
+    --indigo-100: #dadafc;
+    --indigo-200: #bcbdf9;
+    --indigo-300: #9ea0f6;
+    --indigo-400: #8183f4;
+    --indigo-500: #6366f1;
+    --indigo-600: #5457cd;
+    --indigo-700: #4547a9;
+    --indigo-800: #363885;
+    --indigo-900: #282960;
+
+    /* Teal scale */
+    --teal-50: #f3fbfb;
+    --teal-100: #c7eeea;
+    --teal-200: #9ae0d9;
+    --teal-300: #6dd3c8;
+    --teal-400: #41c5b7;
+    --teal-500: #14b8a6;
+    --teal-600: #119c8d;
+    --teal-700: #0e8174;
+    --teal-800: #0b655b;
+    --teal-900: #084a42;
+
+    /* Orange scale */
+    --orange-50: #fff8f3;
+    --orange-100: #feddc7;
+    --orange-200: #fcc39b;
+    --orange-300: #fba86f;
+    --orange-400: #fa8e42;
+    --orange-500: #f97316;
+    --orange-600: #d46213;
+    --orange-700: #ae510f;
+    --orange-800: #893f0c;
+    --orange-900: #642e09;
+
+    /* Blue-gray scale */
+    --bluegray-50: #f7f8f9;
+    --bluegray-100: #dadee3;
+    --bluegray-200: #bcc3cd;
+    --bluegray-300: #9fa9b7;
+    --bluegray-400: #818ea1;
+    --bluegray-500: #64748b;
+    --bluegray-600: #556376;
+    --bluegray-700: #465161;
+    --bluegray-800: #37404c;
+    --bluegray-900: #282e38;
+
+    /* Purple scale */
+    --purple-50: #fbf7ff;
+    --purple-100: #ead6fd;
+    --purple-200: #dab6fc;
+    --purple-300: #c996fa;
+    --purple-400: #b975f9;
+    --purple-500: #a855f7;
+    --purple-600: #8f48d2;
+    --purple-700: #763cad;
+    --purple-800: #5c2f88;
+    --purple-900: #432263;
+
+    /* Red scale */
+    --red-50: #fff5f5;
+    --red-100: #ffd0ce;
+    --red-200: #ffaca7;
+    --red-300: #ff8780;
+    --red-400: #ff6259;
+    --red-500: #ff3d32;
+    --red-600: #d9342b;
+    --red-700: #b32b23;
+    --red-800: #8c221c;
+    --red-900: #661814;
+}

package/dist/esm/styles.css

@@ -790,8 +790,8 @@
   }
 }
 :root {
-  --cratis-surface-0: var(--p-surface-0, var(--surface-0));
-  --cratis-surface-100: var(--p-surface-100, var(--surface-100));
+  --cratis-surface-0: var(--p-form-field-background, var(--surface-0));
+  --cratis-surface-100: var(--p-content-hover-background, var(--surface-100));
   --cratis-surface-ground: var(--p-content-background, var(--surface-ground));
   --cratis-surface-section: var(--p-content-hover-background, var(--surface-section));
   --cratis-surface-card: var(--p-content-background, var(--surface-card));

package/dist/esm/theme.css

@@ -39,8 +39,8 @@
     --cratis-orange-500:         var(--p-orange-500, #f59e0b);
     --cratis-red-500:            var(--p-red-500, #ef4444);
 
-    --cratis-surface-0:          var(--p-surface-0, #ffffff);
-    --cratis-surface-100:        var(--p-surface-100, #f1f5f9);
+    --cratis-surface-0:          var(--p-form-field-background, #ffffff);
+    --cratis-surface-100:        var(--p-content-hover-background, #f1f5f9);
     --cratis-surface-section:    var(--p-surface-50, #f8fafc);
     --cratis-surface-card:       var(--p-surface-0, #ffffff);
     --cratis-surface-overlay:    var(--p-surface-0, #ffffff);
@@ -239,9 +239,35 @@
 .cratis-theme [data-scope='slider'][data-part='handle'] { width: 1.1rem; height: 1.1rem; background: var(--cratis-primary-color); border-radius: 50%; }
 
 /* ── Dialog ──────────────────────────────────────────────────────────────── */
+/* PrimeReact 11 renders the backdrop and the positioner as siblings under the portal,
+   and leaves placing them to CSS: without these two rules the backdrop is a zero-height
+   block and the popup flows in after the page content, below the fold. The layout is
+   the one PrimeReact's own dialog style applies (`@primereact/styles/dialog`). */
 .cratis-theme [data-scope='dialog'][data-part='backdrop'],
-.cratis-theme [data-scope='dialog'][data-part='mask'] { background: var(--cratis-maskbg, rgba(0, 0, 0, 0.5)); }
+.cratis-theme [data-scope='dialog'][data-part='mask'] {
+    position: fixed;
+    inset: 0;
+    background: var(--cratis-maskbg, rgba(0, 0, 0, 0.5));
+}
+.cratis-theme [data-scope='dialog'][data-part='positioner'] {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    pointer-events: none;
+}
+.cratis-theme [data-scope='dialog'][data-part='positioner'][data-modal] { pointer-events: auto; }
+.cratis-theme [data-scope='dialog'][data-part='positioner'][data-position='top'] { align-items: flex-start; }
+.cratis-theme [data-scope='dialog'][data-part='positioner'][data-position='bottom'] { align-items: flex-end; }
+.cratis-theme [data-scope='dialog'][data-part='positioner'][data-position='left'] { justify-content: flex-start; }
+.cratis-theme [data-scope='dialog'][data-part='positioner'][data-position='right'] { justify-content: flex-end; }
 .cratis-theme [data-scope='dialog'][data-part='popup'] {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    pointer-events: auto;
     background: var(--cratis-surface-overlay);
     color: var(--cratis-text-color);
     border-radius: 0.75rem;
@@ -257,7 +283,7 @@
     border-bottom: 1px solid var(--cratis-surface-border);
     font-weight: 600;
 }
-.cratis-theme [data-scope='dialog'][data-part='content'] { padding: 1.25rem; }
+.cratis-theme [data-scope='dialog'][data-part='content'] { padding: 1.25rem; overflow-y: auto; }
 .cratis-theme [data-scope='dialog'][data-part='footer'] { padding: 1rem 1.25rem; border-top: 1px solid var(--cratis-surface-border); }
 .cratis-theme [data-scope='dialog'][data-part='close'] {
     border: none; background: transparent; color: var(--cratis-text-color-secondary);

package/dist/esm/tokens.css

@@ -24,10 +24,12 @@
  * v11 ships ZERO CSS. There is no `primereact/resources/themes/*.css` to import any
  * more. The --p-* custom properties are emitted **at runtime** by @primeuix/styled
  * when a preset (a plain JS token object from @primeuix/themes — Aura, Lara, Nora)
- * is handed to the provider:
+ * is handed to the provider - which `styledMode()` from `@cratis/components/styled`
+ * does, together with PrimeReact's own component styles for every primitive (a
+ * preset alone leaves the primitives without their `p-*` classes):
  *
- *   import Aura from '@primeuix/themes/aura';
- *   <CratisComponentsProvider value={{ theme: { preset: Aura } }}>
+ *   import { styledMode } from '@cratis/components/styled';
+ *   <CratisComponentsProvider value={{ license, ...styledMode() }}>
  *
  * So the chain is: preset (JS) → --p-* (runtime) → --cratis-* (this file) → component CSS.
  *
@@ -39,12 +41,12 @@
  *
  * ## Three ways to get a look
  *
- * 1. **A licensed preset** — `value={{ theme: { preset: Aura } }}`. The styled layer
- *    is license-gated in v11; without a PrimeUI key it nags and falls back.
- * 2. **The Cratis baseline theme** — `import '@cratis/components/theme'`. A
- *    license-free stylesheet that assigns the --cratis-* tokens directly (light and
- *    dark), so it needs no preset and no key. It defers to a preset's --p-* values
- *    when one is present.
+ * 1. **Styled mode** — `value={{ license, ...styledMode() }}` from
+ *    `@cratis/components/styled`: a preset plus PrimeReact's component styles.
+ * 2. **The Cratis baseline theme** — `import '@cratis/components/theme'`. A stylesheet
+ *    that assigns the --cratis-* tokens directly (light and dark), so it needs no preset
+ *    and no @primeuix/themes install. It defers to a preset's --p-* values when one is
+ *    present.
  * 3. **Your own tokens** — override any --cratis-* on :root (or any ancestor):
  *
  *   :root {
@@ -60,8 +62,13 @@
 
 :root {
     /* Surfaces */
-    --cratis-surface-0:        var(--p-surface-0, var(--surface-0));
-    --cratis-surface-100:      var(--p-surface-100, var(--surface-100));
+    /* v10's surface scale ran from the page tone (0) up through raised surfaces (100, 200, …)
+     * and inverted in its dark themes, so surface-0 was the darkest tone there. v11's
+     * --p-surface-N is a plain palette that is white at 0 in both schemes, so it cannot stand
+     * in. The two are read here as what they were used for: the tone underneath a form field
+     * and the tone of a raised or hovered surface, which v11 names semantically. */
+    --cratis-surface-0:        var(--p-form-field-background, var(--surface-0));
+    --cratis-surface-100:      var(--p-content-hover-background, var(--surface-100));
     /* v11 has no page-canvas/section token — map to the neutral content surface;
      * separation in v11 comes from borders (content-border-color), not fills. */
     --cratis-surface-ground:   var(--p-content-background, var(--surface-ground));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/components",
-    "version": "3.3.3",
+    "version": "3.4.0",
     "description": "",
     "author": "Cratis",
     "license": "MIT",
@@ -106,13 +106,18 @@
             "types": "./dist/esm/Toolbar/index.d.ts",
             "import": "./dist/esm/Toolbar/index.js"
         },
+        "./styled": {
+            "types": "./dist/esm/Styled/index.d.ts",
+            "import": "./dist/esm/Styled/index.js"
+        },
         "./types": {
             "types": "./dist/esm/types/index.d.ts",
             "import": "./dist/esm/types/index.js"
         },
         "./styles": "./dist/esm/styles.css",
         "./tokens": "./dist/esm/tokens.css",
-        "./theme": "./dist/esm/theme.css"
+        "./theme": "./dist/esm/theme.css",
+        "./primereact-v10-palette": "./dist/esm/primereact-v10-palette.css"
     },
     "scripts": {
         "prepare": "yarn g:build",
@@ -140,6 +145,7 @@
         "@cratis/arc.vite": "21.19.0",
         "@primereact/core": "11.1.0",
         "@primereact/headless": "11.1.0",
+        "@primereact/styles": "11.1.0",
         "@primereact/types": "11.1.0",
         "@primeuix/motion": "^1.0.0",
         "@primeuix/styled": "^1.0.0",
@@ -153,7 +159,9 @@
         "@cratis/fundamentals": "^7.10.3",
         "@primereact/core": "^11.0.0",
         "@primereact/headless": "^11.0.0",
+        "@primereact/styles": "^11.0.0",
         "@primereact/types": "^11.0.0",
+        "@primeuix/themes": "^3.0.0",
         "primeicons": "^8.0.0",
         "primereact": "^11.0.0",
         "react": "^19.0.0",
@@ -162,8 +170,14 @@
         "tsyringe": "4.10.0"
     },
     "peerDependenciesMeta": {
+        "@primereact/styles": {
+            "optional": true
+        },
         "@primereact/types": {
             "optional": true
+        },
+        "@primeuix/themes": {
+            "optional": true
         }
     }
 }