@cratis/components 3.3.4 → 3.5.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;
+}