npm - @cratis/components - Versions diffs - 3.6.0 → 4.0.0 - Mend

@cratis/components 3.6.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1324) hide show

package/dist/esm/theme.css CHANGED Viewed

@@ -2,443 +2,181 @@
 /* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
 /*
- * Cratis baseline theme — a token-based default look for the unstyled
- * PrimeReact 11 components, built entirely on the `--cratis-*` / `--surface-*`
- * token layer. It requires **no PrimeUI license** (unlike the styled
- * `@primeuix/themes` presets).
- *
- * Usage: run the components `unstyled`, `import '@cratis/components/theme'`, and
- * add `class="cratis-theme"` to an ancestor (e.g. <body> or your app root). The
- * rules are scoped under `.cratis-theme` so it can also theme a subtree.
- *
- * It intentionally styles all buttons as filled primary (the unstyled DOM
- * carries no variant/severity); component-owned CSS (ActionMenubar, paginator,
- * toast, tooltip, filter menu) refines specific button roles on top.
+ * Optional baseline scheme behavior. Light root defaults live in tokens.css so a custom product can
+ * import tokens + structure and override the seam directly. This file adds document/subtree color,
+ * scoped light defaults, automatic/explicit dark values, and forced-colors values.
  */
-/* Concrete palette. The Cratis tokens normally resolve from a `@primeuix/themes`
-   preset's `--p-*` variables; with no preset (the license-free path) that chain
-   is empty, so the baseline theme supplies real colors here — deferring to a
-   preset's `--p-*` when one *is* present, and falling back to these otherwise. */
+:root,
 .cratis-theme {
-    /* Paint the base surface, not just the text color — so the theme is
-       self-contained on any host background. Applied to <body> it fills the
-       viewport; applied to a subtree (a documented use) it establishes the
-       themed backdrop instead of letting the dark text fall on whatever is
-       behind it. The surface token flips light/dark with the palette below. */
     color: var(--cratis-text-color);
-    background-color: var(--cratis-surface-section);
-    --cratis-primary-color:      var(--p-primary-color, #3b82f6);
-    --cratis-primary-color-text: var(--p-primary-contrast-color, #ffffff);
-    --cratis-primary-300:        var(--p-primary-300, #93c5fd);
-    --cratis-primary-400:        var(--p-primary-400, #60a5fa);
-    --cratis-primary-500:        var(--p-primary-500, #3b82f6);
-    --cratis-primary-600:        var(--p-primary-600, #2563eb);
-    --cratis-green-500:          var(--p-green-500, #22c55e);
-    --cratis-orange-500:         var(--p-orange-500, #f59e0b);
-    --cratis-red-500:            var(--p-red-500, #ef4444);
-    --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);
-    --cratis-surface-hover:      var(--p-surface-100, #f1f5f9);
-    --cratis-surface-border:     var(--p-surface-200, #e2e8f0);
-    --cratis-text-color:           var(--p-text-color, #1e293b);
-    --cratis-text-color-secondary: var(--p-text-muted-color, #475569);
-    --cratis-highlight-bg:         var(--p-highlight-background, #dbeafe);
-    --cratis-highlight-text-color: var(--p-highlight-color, #1e40af);
-    --cratis-maskbg:               rgba(0, 0, 0, 0.4);
-    --cratis-border-radius:        6px;
-    /* Arc component chrome. @cratis/arc.react's field wrappers, form errors, and
-       dialogs read this `--color-*` token family; map it onto the palette so the
-       baseline theme also themes the Arc surface (labels, borders, field errors),
-       not only the PrimeReact components. The chrome/text tokens reference the
-       `--cratis-*` vars so they flip automatically in dark; the semantic colors
-       are WCAG-AA-safe on the light surface and re-declared for dark below. */
-    --color-text:                 var(--cratis-text-color);
-    --color-text-secondary:       var(--cratis-text-color-secondary);
-    --color-text-muted:           var(--cratis-text-color-secondary);
-    --color-border:               var(--cratis-surface-border);
-    --color-background-secondary: var(--cratis-surface-section);
-    --color-background-tertiary:  var(--cratis-surface-100);
-    --color-error:                #b91c1c;
-    --color-error-bg:             #fef2f2;
-    --color-success:              #15803d;
-    --color-warning:              #b45309;
-    /* Arc also reads these radius/spacing/font tokens (with no fallbacks of its
-       own); supply a scale so Arc chrome keeps its corners, padding, and gaps
-       under the baseline theme instead of collapsing to the initial value. */
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 10px;
-    --space-xs: 0.25rem;
-    --space-sm: 0.5rem;
-    --space-md: 1rem;
-    --space-lg: 1.5rem;
-    --space-xl: 2rem;
-    --space-2xl: 3rem;
-    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-    /* Concrete values for two tokens tokens.css leaves preset-only. Filter/
-       FilterPanel.css (shipped via @cratis/components/Filter) consumes both
-       without inline fallbacks, so with no preset the Filter panel would lose its
-       sub-surface backgrounds and focus rings. */
-    --cratis-surface-ground: var(--p-surface-50, #f8fafc);
-    --cratis-focus-ring:     0 0 0 0.2rem rgba(59, 130, 246, 0.45);
-}
-/* Dark palette — applied when the `cratis-dark` class is on an ancestor. */
+    background-color: var(--cratis-surface-ground);
+}
+/* A themed subtree needs its own light defaults because tokens.css is rooted at :root.
+   Explicit light wins over ambient/root dark; an explicitly dark subtree still wins. */
+.cratis-theme,
+:root.cratis-light,
+:root.cratis-dark.cratis-light,
+:root.cratis-light .cratis-theme:not(.cratis-dark),
+.cratis-theme.cratis-light,
+.cratis-dark .cratis-theme.cratis-light {
+    color-scheme: light;
+    --cratis-primary-color: #2563eb;
+    --cratis-primary-color-text: #ffffff;
+    --cratis-primary-300: #93c5fd;
+    --cratis-primary-400: #60a5fa;
+    --cratis-primary-500: #3b82f6;
+    --cratis-primary-600: #2563eb;
+    --cratis-primary-600-text: #ffffff;
+    --cratis-action-background: #2563eb;
+    --cratis-action-background-hover: #1d4ed8;
+    --cratis-action-background-active: #1e40af;
+    --cratis-action-text: #ffffff;
+    --cratis-green-500: #16a34a;
+    --cratis-orange-500: #d97706;
+    --cratis-red-500: #dc2626;
+    --cratis-info-background: #0369a1;
+    --cratis-info-text: #ffffff;
+    --cratis-success-background: #15803d;
+    --cratis-success-text: #ffffff;
+    --cratis-warning-background: #c2410c;
+    --cratis-warning-text: #ffffff;
+    --cratis-danger-background: #b91c1c;
+    --cratis-danger-text: #ffffff;
+    --cratis-surface-0: #ffffff;
+    --cratis-surface-100: #f3f4f6;
+    --cratis-surface-ground: #f9fafb;
+    --cratis-surface-section: #ffffff;
+    --cratis-surface-card: #ffffff;
+    --cratis-surface-overlay: #ffffff;
+    --cratis-surface-hover: #f6f9fc;
+    --cratis-surface-border: #dfe7ef;
+    --cratis-control-background: #ffffff;
+    --cratis-control-border: #8492a6;
+    --cratis-text-color: #4b5563;
+    --cratis-text-color-secondary: #6b7280;
+    --cratis-highlight-bg: #eff6ff;
+    --cratis-highlight-text-color: #1d4ed8;
+    --cratis-maskbg: rgb(0 0 0 / 40%);
+    --cratis-border-radius: 6px;
+    --cratis-control-height: 2.75rem;
+    --cratis-control-height-small: 2.25rem;
+    --cratis-control-height-large: 3.25rem;
+    --cratis-disabled-opacity: 0.55;
+    --cratis-focus-ring: 0 0 0 3px #2563eb;
+    --cratis-shadow-subtle: 0 1px 2px rgb(0 0 0 / 5%);
+    --cratis-shadow-overlay: 0 2px 12px rgb(0 0 0 / 10%);
+    --cratis-shadow-dialog: 0 1rem 3rem rgb(0 0 0 / 22%);
+    --cratis-shadow-toast: 0 2px 12px rgb(0 0 0 / 10%);
+}
+:root.cratis-dark,
 .cratis-dark .cratis-theme,
 .cratis-theme.cratis-dark {
-    --cratis-surface-0:       #1e293b;
-    --cratis-surface-100:     #334155;
-    --cratis-surface-section: #0f172a;
-    --cratis-surface-card:    #1e293b;
-    --cratis-surface-overlay: #1e293b;
-    --cratis-surface-hover:   #334155;
-    --cratis-surface-border:  #334155;
-    --cratis-text-color:           #f8fafc;
-    --cratis-text-color-secondary: #cbd5e1;
-    --cratis-highlight-bg:         #1e3a8a;
-    --cratis-highlight-text-color: #ffffff;
-    --cratis-maskbg:               rgba(0, 0, 0, 0.6);
-    --cratis-surface-ground:       #020617;
-    /* Lighter semantic colors that stay AA-legible on the dark surface. The
-       chrome/text `--color-*` tokens follow the `--cratis-*` vars redefined
-       above, so only the concrete semantic colors are re-declared here. The
-       error-bg is deepened (red-950) so the #f87171 error text clears AA (~6.4:1)
-       on the exception banner, not just on the section surface. */
-    --color-error:    #f87171;
-    --color-error-bg: #450a0a;
-    --color-success:  #4ade80;
-    --color-warning:  #fbbf24;
-}
-/* ── Buttons ─────────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='button'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    border: 1px solid transparent;
-    border-radius: var(--cratis-border-radius, 6px);
-    /* A WCAG-AA-safe filled shade against the white label. */
-    background: #1d4ed8;
-    color: #fff;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.15s, opacity 0.15s;
-}
-.cratis-theme [data-scope='button']:not([disabled]):hover { background: #1e40af; }
-.cratis-theme [data-scope='button']:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cratis-primary-300, var(--cratis-primary-color)); }
-.cratis-theme [data-scope='button'][disabled] { opacity: 0.5; cursor: not-allowed; }
-/* ── Text inputs ─────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='inputtext'],
-.cratis-theme [data-scope='textarea'],
-.cratis-theme [data-scope='inputnumber'][data-part='input'],
-.cratis-theme [data-scope='datepicker'][data-part='input'],
-.cratis-theme [data-scope='inputtags'][data-part='control'],
-.cratis-theme [data-scope='select'][data-part='root'] {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    background: var(--cratis-surface-0);
-    color: var(--cratis-text-color);
-    border: 1px solid var(--cratis-surface-border);
-    border-radius: var(--cratis-border-radius, 6px);
-    box-sizing: border-box;
-}
-.cratis-theme [data-scope='textarea'] { resize: vertical; min-height: 4rem; }
-.cratis-theme [data-scope='select'][data-part='root'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-    cursor: pointer;
-}
-.cratis-theme [data-scope='select'][data-part='value'] { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
-.cratis-theme [data-scope='select'][data-part='arrow'],
-.cratis-theme [data-scope='datepicker'][data-part='trigger'] { color: var(--cratis-text-color-secondary); }
-.cratis-theme [data-scope='inputtext']:focus-visible,
-.cratis-theme [data-scope='textarea']:focus-visible,
-.cratis-theme [data-scope='inputnumber'][data-part='input']:focus-visible {
-    outline: none;
-    border-color: var(--cratis-primary-color);
-    box-shadow: 0 0 0 2px var(--cratis-primary-300, transparent);
-}
-.cratis-theme [aria-invalid='true'],
-.cratis-theme [data-invalid] > [data-scope='inputtext'],
-.cratis-theme [data-scope='inputtext'][aria-invalid='true'] { border-color: var(--cratis-red-500); }
-/* ── Select popup ────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='select'][data-part='list'],
-.cratis-theme [data-scope='select'][data-part='popup'] {
-    background: var(--cratis-surface-overlay);
-    border: 1px solid var(--cratis-surface-border);
-    border-radius: var(--cratis-border-radius, 6px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-    overflow: hidden;
-}
-.cratis-theme [data-scope='select'][data-part='option'] { padding: 0.5rem 0.75rem; cursor: pointer; }
-.cratis-theme [data-scope='select'][data-part='option']:hover,
-.cratis-theme [data-scope='select'][data-part='option'][data-selected] { background: var(--cratis-surface-hover); }
-/* ── DatePicker popup ────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='datepicker'][data-part='popup'] {
-    background: var(--cratis-surface-overlay);
-    border: 1px solid var(--cratis-surface-border);
-    border-radius: var(--cratis-border-radius, 6px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-    padding: 0.75rem;
-}
-.cratis-theme [data-scope='datepicker'][data-part='header'] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-.cratis-theme [data-scope='datepicker'][data-part='title'] { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; }
-.cratis-theme [data-scope='datepicker'][data-part='prev'],
-.cratis-theme [data-scope='datepicker'][data-part='next'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    cursor: pointer;
-}
-.cratis-theme [data-scope='datepicker'][data-part='selectmonth'],
-.cratis-theme [data-scope='datepicker'][data-part='selectyear'] {
-    padding: 0.15rem 0.4rem;
-    border-radius: var(--cratis-border-radius, 6px);
-    cursor: pointer;
-}
-.cratis-theme [data-scope='datepicker'][data-part='prev']:hover,
-.cratis-theme [data-scope='datepicker'][data-part='next']:hover,
-.cratis-theme [data-scope='datepicker'][data-part='selectmonth']:hover,
-.cratis-theme [data-scope='datepicker'][data-part='selectyear']:hover { background: var(--cratis-surface-hover); }
-.cratis-theme [data-scope='datepicker'][data-part='table'] { width: 100%; border-collapse: collapse; }
-.cratis-theme [data-scope='datepicker'][data-part='tableheadcell'] {
-    padding: 0.4rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--cratis-text-color-secondary);
-    text-align: center;
-}
-.cratis-theme [data-scope='datepicker'][data-part='tablebodycell'] { padding: 0.15rem; text-align: center; }
-.cratis-theme [data-scope='datepicker'][data-part='day'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    border-radius: 50%;
-    cursor: pointer;
-}
-.cratis-theme [data-scope='datepicker'][data-part='day']:hover { background: var(--cratis-surface-hover); }
-.cratis-theme [data-scope='datepicker'][data-part='day'][data-selected] {
-    background: var(--cratis-primary-color);
-    color: var(--cratis-primary-color-text);
-}
-.cratis-theme [data-scope='datepicker'][data-part='day'][data-today] { border: 1px solid var(--cratis-primary-color); }
-.cratis-theme [data-scope='datepicker'][data-part='day'][data-outside] { color: var(--cratis-text-color-secondary); opacity: 0.5; }
-.cratis-theme [data-scope='datepicker'][data-part='day'][data-disabled] { cursor: not-allowed; opacity: 0.4; }
-.cratis-theme [data-scope='datepicker'][data-part='buttonbar'] {
-    display: flex;
-    justify-content: space-between;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-    padding-top: 0.5rem;
-    border-top: 1px solid var(--cratis-surface-border);
-}
-/* ── Checkbox / radio ────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='checkboxbox'],
-.cratis-theme [data-scope='radiobutton'][data-part='box'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.15rem;
-    height: 1.15rem;
-    background: var(--cratis-surface-0);
-    border: 1px solid var(--cratis-surface-border);
-    color: var(--cratis-primary-color-text);
+    color-scheme: dark;
+    --cratis-primary-color: #60a5fa;
+    --cratis-primary-color-text: #030712;
+    --cratis-primary-600-text: #ffffff;
+    --cratis-action-background: #60a5fa;
+    --cratis-action-background-hover: #93c5fd;
+    --cratis-action-background-active: #bfdbfe;
+    --cratis-action-text: #030712;
+    --cratis-red-500: #f87171;
+    --cratis-info-background: #38bdf8;
+    --cratis-info-text: #082f49;
+    --cratis-success-background: #4ade80;
+    --cratis-success-text: #052e16;
+    --cratis-warning-background: #fb923c;
+    --cratis-warning-text: #431407;
+    --cratis-danger-background: #f87171;
+    --cratis-danger-text: #450a0a;
+    --cratis-surface-0: #111827;
+    --cratis-surface-100: #374151;
+    --cratis-surface-ground: #111827;
+    --cratis-surface-section: #1f2937;
+    --cratis-surface-card: #1f2937;
+    --cratis-surface-overlay: #1f2937;
+    --cratis-surface-hover: rgb(255 255 255 / 3%);
+    --cratis-surface-border: rgb(255 255 255 / 10%);
+    --cratis-control-background: #111827;
+    --cratis-control-border: #64748b;
+    --cratis-text-color: rgb(255 255 255 / 87%);
+    --cratis-text-color-secondary: rgb(255 255 255 / 60%);
+    --cratis-highlight-bg: rgb(96 165 250 / 16%);
+    --cratis-highlight-text-color: rgb(255 255 255 / 87%);
+    --cratis-maskbg: rgb(0 0 0 / 40%);
+    --cratis-focus-ring: 0 0 0 3px #93c5fd;
+    --cratis-shadow-subtle: none;
+    --cratis-shadow-overlay:
+        0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%),
+        0 1px 10px rgb(0 0 0 / 12%);
+    --cratis-shadow-dialog:
+        0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%),
+        0 9px 46px 8px rgb(0 0 0 / 12%);
+    --cratis-shadow-toast: none;
+}
+@media (prefers-color-scheme: dark) {
+    :root:not(.cratis-light),
+    .cratis-theme:not(.cratis-light) {
+        color-scheme: dark;
+        --cratis-primary-color: #60a5fa;
+        --cratis-primary-color-text: #030712;
+        --cratis-action-background: #60a5fa;
+        --cratis-action-background-hover: #93c5fd;
+        --cratis-action-background-active: #bfdbfe;
+        --cratis-action-text: #030712;
+        --cratis-red-500: #f87171;
+        --cratis-info-background: #38bdf8;
+        --cratis-info-text: #082f49;
+        --cratis-success-background: #4ade80;
+        --cratis-success-text: #052e16;
+        --cratis-warning-background: #fb923c;
+        --cratis-warning-text: #431407;
+        --cratis-danger-background: #f87171;
+        --cratis-danger-text: #450a0a;
+        --cratis-surface-0: #111827;
+        --cratis-surface-100: #374151;
+        --cratis-surface-ground: #111827;
+        --cratis-surface-section: #1f2937;
+        --cratis-surface-card: #1f2937;
+        --cratis-surface-overlay: #1f2937;
+        --cratis-surface-hover: rgb(255 255 255 / 3%);
+        --cratis-surface-border: rgb(255 255 255 / 10%);
+        --cratis-control-background: #111827;
+        --cratis-control-border: #64748b;
+        --cratis-text-color: rgb(255 255 255 / 87%);
+        --cratis-text-color-secondary: rgb(255 255 255 / 60%);
+        --cratis-highlight-bg: rgb(96 165 250 / 16%);
+        --cratis-highlight-text-color: rgb(255 255 255 / 87%);
+        --cratis-maskbg: rgb(0 0 0 / 40%);
+        --cratis-focus-ring: 0 0 0 3px #93c5fd;
+        --cratis-shadow-subtle: none;
+        --cratis-shadow-overlay:
+            0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%),
+            0 1px 10px rgb(0 0 0 / 12%);
+        --cratis-shadow-dialog:
+            0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%),
+            0 9px 46px 8px rgb(0 0 0 / 12%);
+        --cratis-shadow-toast: none;
+    }
+}
+@media (forced-colors: active) {
+    :root,
+    .cratis-theme {
+        --cratis-primary-color: Highlight;
+        --cratis-primary-color-text: HighlightText;
+        --cratis-primary-600-text: HighlightText;
+        --cratis-action-background: Highlight;
+        --cratis-action-text: HighlightText;
+        --cratis-surface-card: Canvas;
+        --cratis-surface-overlay: Canvas;
+        --cratis-surface-border: CanvasText;
+        --cratis-control-background: Canvas;
+        --cratis-control-border: CanvasText;
+        --cratis-text-color: CanvasText;
+        --cratis-text-color-secondary: CanvasText;
+        --cratis-focus-ring: 0 0 0 2px Highlight;
+    }
 }
-.cratis-theme [data-scope='checkboxbox'] { border-radius: 4px; }
-.cratis-theme [data-scope='radiobutton'][data-part='box'] { border-radius: 50%; }
-.cratis-theme [data-scope='checkbox'][data-part='root'][data-checked] [data-scope='checkboxbox'],
-.cratis-theme [data-scope='radiobutton'][data-part='root'][data-checked] [data-part='box'] {
-    background: var(--cratis-primary-color);
-    border-color: var(--cratis-primary-color);
-}
-/* ── Toggle switch ───────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='toggleswitch'][data-part='control'] {
-    display: inline-flex;
-    align-items: center;
-    width: 2.5rem;
-    height: 1.4rem;
-    padding: 0.15rem;
-    background: var(--cratis-surface-border);
-    border-radius: 999px;
-    transition: background-color 0.15s;
-}
-.cratis-theme [data-scope='toggleswitch'][data-part='root'][data-checked] [data-part='control'] { background: var(--cratis-primary-color); }
-.cratis-theme [data-scope='toggleswitch'][data-part='handle'] {
-    width: 1.1rem;
-    height: 1.1rem;
-    background: var(--cratis-surface-0);
-    border-radius: 50%;
-    transition: transform 0.15s;
-}
-.cratis-theme [data-scope='toggleswitch'][data-part='root'][data-checked] [data-part='handle'] { transform: translateX(1.1rem); }
-/* ── Slider ──────────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='slider'][data-part='track'] { height: 0.35rem; background: var(--cratis-surface-border); border-radius: 999px; }
-.cratis-theme [data-scope='slider'][data-part='range'] { height: 0.35rem; background: var(--cratis-primary-color); border-radius: 999px; }
-.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'] {
-    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;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
-    overflow: hidden;
-}
-.cratis-theme [data-scope='dialog'][data-part='header'] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 1rem 1.25rem;
-    border-bottom: 1px solid var(--cratis-surface-border);
-    font-weight: 600;
-}
-.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);
-    cursor: pointer; padding: 0.25rem; border-radius: 0.25rem;
-}
-.cratis-theme [data-scope='dialog'][data-part='close']:hover { color: var(--cratis-text-color); background: var(--cratis-surface-hover); }
-/* ── DataTable ───────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='datatable'][data-part='table'] { width: 100%; border-collapse: collapse; }
-.cratis-theme [data-scope='datatable'][data-part='thead'] { background: var(--cratis-surface-section); }
-.cratis-theme [data-scope='datatable'][data-part='theadcell'] {
-    padding: 0.625rem 0.75rem; text-align: left; font-weight: 600;
-    color: var(--cratis-text-color-secondary); border-bottom: 1px solid var(--cratis-surface-border);
-}
-.cratis-theme [data-scope='datatable'][data-part='cell'] { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--cratis-surface-border); }
-.cratis-theme [data-scope='datatable'][data-part='row']:hover { background: var(--cratis-surface-hover); }
-.cratis-theme [data-scope='datatable'][data-part='row'][data-selected] { background: var(--cratis-highlight-bg); color: var(--cratis-highlight-text-color); }
-/* ── Tag / Badge ─────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='tag'] {
-    display: inline-flex; align-items: center; gap: 0.25rem;
-    padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.8125rem; font-weight: 500;
-    background: var(--cratis-surface-hover); color: var(--cratis-text-color);
-}
-.cratis-theme [data-scope='badge'] {
-    display: inline-flex; align-items: center; justify-content: center;
-    min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; border-radius: 999px;
-    font-size: 0.75rem; font-weight: 600; background: #1d4ed8; color: #fff;
-}
-/* Filled severity backgrounds use WCAG-AA-safe (darker) shades against white text. */
-.cratis-theme [data-severity='success'] { background: #15803d; color: #fff; }
-.cratis-theme [data-severity='info'] { background: #1d4ed8; color: #fff; }
-.cratis-theme [data-severity='warn'] { background: #b45309; color: #fff; }
-.cratis-theme [data-severity='danger'] { background: #b91c1c; color: #fff; }
-.cratis-theme [data-severity='secondary'] { background: var(--cratis-surface-hover); color: var(--cratis-text-color); }
-/* ── Chip / Avatar ───────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='chip'][data-part='root'] {
-    display: inline-flex; align-items: center; gap: 0.375rem;
-    padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--cratis-surface-hover); color: var(--cratis-text-color);
-}
-.cratis-theme [data-scope='chip'][data-part='remove'] { cursor: pointer; color: var(--cratis-text-color-secondary); }
-.cratis-theme [data-scope='avatar'][data-part='root'] {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 2.25rem; height: 2.25rem; border-radius: 50%; overflow: hidden;
-    background: var(--cratis-surface-hover); color: var(--cratis-text-color); font-weight: 600;
-}
-.cratis-theme [data-scope='avatar'][data-part='root'][data-size='large'] { width: 3rem; height: 3rem; }
-/* ── ProgressBar / Skeleton ──────────────────────────────────────────────── */
-.cratis-theme [data-scope='progressbar'][data-part='root'] {
-    height: 1.25rem; background: var(--cratis-surface-border); border-radius: 999px; overflow: hidden;
-}
-.cratis-theme [data-scope='progressbar'][data-part='indicator'] {
-    display: flex; align-items: center; justify-content: center; height: 100%;
-    background: #1d4ed8; color: #fff; font-size: 0.75rem;
-    transition: width 0.2s;
-}
-.cratis-theme [data-scope='skeleton'] {
-    display: block; background: var(--cratis-surface-hover); border-radius: 4px;
-    animation: cratis-skeleton-pulse 1.4s ease-in-out infinite;
-}
-@keyframes cratis-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
-/* ── Stepper ─────────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='stepper'][data-part='number'] {
-    display: inline-flex; align-items: center; justify-content: center;
-    width: 1.75rem; height: 1.75rem; border-radius: 50%;
-    background: var(--cratis-surface-hover); color: var(--cratis-text-color); font-weight: 600;
-}
-.cratis-theme [data-scope='stepper'][data-part='step'][data-active] [data-part='number'] {
-    background: var(--cratis-primary-color); color: var(--cratis-primary-color-text);
-}
-.cratis-theme [data-scope='stepper'][data-part='separator'] { background: var(--cratis-surface-border); }
-.cratis-theme [data-scope='stepper'][data-part='header'] {
-    display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: none; cursor: pointer; color: inherit;
-}
-/* ── Rating ──────────────────────────────────────────────────────────────── */
-.cratis-theme [data-scope='rating'][data-part='root'] { display: inline-flex; gap: 0.25rem; }
-.cratis-theme [data-scope='rating'] .pi { font-size: 1.25rem; cursor: pointer; }
-.cratis-theme [data-scope='rating'] .pi-star { color: var(--cratis-surface-border); }
-.cratis-theme [data-scope='rating'] .pi-star-fill { color: var(--cratis-orange-500, #f59e0b); }
-/* ProgressSpinner sizing/stroke/motion is unconditional (not theme-gated) —
-   see Display/ProgressSpinner.css. It reads --cratis-primary-color, so it
-   still follows whichever preset this theme or styled mode applies. */