@almadar/ui 6.51.2 → 6.53.0

package/themes/_base.css

@@ -216,23 +216,119 @@
     --motion-page-exit-to-transform: translateY(-8px);
 
     /* ----------------------------------------------------------------
-     * Skeleton shimmer — the loading-placeholder sweep. Two color stops
-     * (base + highlight) drive the gradient; --duration-shimmer the loop.
-     * Override per theme to restyle the placeholder tone.
+     * Element entry — how a rendered element animates in when it mounts.
+     * --motion-enter-default is the keyframe every slot's content plays when
+     * it changes (`none` = off); a render-ui node's own `enter` overrides it.
+     * The shape tokens restyle what each named entry looks like; timing is
+     * the `enter` intent (--duration-normal / --easing-emphasized).
+     * ---------------------------------------------------------------- */
+    --motion-enter-default: almadar-enter-fade;
+    /* A busy control shows its spinner only once its action outlasts this
+     * (under it the action reads as instant — no flash on fast actions). */
+    --motion-busy-delay: 300ms;
+    /* An empty slot awaiting its server render shows the compiler-predicted
+     * skeleton (`block`) or nothing (`none`), fading in after the busy delay. */
+    --awaiting-skeleton-display: none;
+    --motion-enter-stagger: 40ms;
+    --motion-enter-rise-from-transform: translateY(12px);
+    --motion-enter-scale-from-transform: scale(0.96);
+    --motion-enter-slide-sign: 1;
+    --motion-enter-slide-from-transform: translateX(calc(16px * var(--motion-enter-slide-sign)));
+
+    /* ----------------------------------------------------------------
+     * Skeleton shimmer — the loading-placeholder sweep. A theme may set
+     * --skeleton-base / --skeleton-highlight to restyle the tone; unset, the
+     * shimmer paints the active theme's --color-muted / --color-surface
+     * (resolved at `.almadar-shimmer`, not here — a :root alias would freeze
+     * the root theme's colors for every [data-theme] subtree).
      * ---------------------------------------------------------------- */
-    --skeleton-base: var(--color-muted, rgba(128, 128, 128, 0.18));
-    --skeleton-highlight: var(--color-surface, rgba(255, 255, 255, 0.55));
     --duration-shimmer: 1.5s;
 }
 
+[dir="rtl"] {
+    --motion-enter-slide-sign: -1;
+}
+
+@keyframes almadar-enter-fade {
+    from { opacity: 0; }
+}
+@keyframes almadar-enter-rise {
+    from { opacity: 0; transform: var(--motion-enter-rise-from-transform); }
+}
+@keyframes almadar-enter-scale {
+    from { opacity: 0; transform: var(--motion-enter-scale-from-transform); }
+}
+@keyframes almadar-enter-slide {
+    from { opacity: 0; transform: var(--motion-enter-slide-from-transform); }
+}
+
+/* Busy control: the label gives way to the spinner only after --motion-busy-delay. */
+@keyframes almadar-busy-hide {
+    to { visibility: hidden; }
+}
+@keyframes almadar-busy-show {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+.almadar-busy-content {
+    animation: almadar-busy-hide 0s linear var(--motion-busy-delay, 300ms) forwards;
+}
+.almadar-busy-indicator {
+    opacity: 0;
+    animation: almadar-busy-show var(--duration-fast, 150ms) var(--easing-standard, ease) var(--motion-busy-delay, 300ms) forwards;
+}
+
+/* A row whose own action is in flight: dims after --motion-busy-delay, never re-clickable. */
+@keyframes almadar-row-pending {
+    to { opacity: 0.55; }
+}
+[data-row-pending="true"] {
+    pointer-events: none;
+    animation: almadar-row-pending var(--duration-fast, 150ms) var(--easing-standard, ease) var(--motion-busy-delay, 300ms) forwards;
+}
+
+/* Awaiting-server skeleton: theme-switched, appears only once the round trip outlasts --motion-busy-delay. */
+.almadar-awaiting-skeleton {
+    display: var(--awaiting-skeleton-display, none);
+    opacity: 0;
+    animation: almadar-busy-show var(--duration-fast, 150ms) var(--easing-standard, ease) var(--motion-busy-delay, 300ms) forwards;
+}
+
+/* Slot content: plays the theme's default entry (restarted when the content changes). */
+.almadar-enter-slot {
+    animation-name: var(--motion-enter-default, none);
+}
+.almadar-enter-slot,
+.almadar-enter-fade,
+.almadar-enter-rise,
+.almadar-enter-scale,
+.almadar-enter-slide {
+    animation-duration: var(--duration-normal, 250ms);
+    animation-timing-function: var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+    animation-fill-mode: both;
+    animation-delay: calc(var(--enter-index, 0) * var(--motion-enter-stagger, 40ms));
+}
+.almadar-enter-fade { animation-name: almadar-enter-fade; }
+.almadar-enter-rise { animation-name: almadar-enter-rise; }
+.almadar-enter-scale { animation-name: almadar-enter-scale; }
+.almadar-enter-slide { animation-name: almadar-enter-slide; }
+.almadar-enter-delay-1 { --enter-index: 1; }
+.almadar-enter-delay-2 { --enter-index: 2; }
+.almadar-enter-delay-3 { --enter-index: 3; }
+.almadar-enter-delay-4 { --enter-index: 4; }
+.almadar-enter-delay-5 { --enter-index: 5; }
+.almadar-enter-delay-6 { --enter-index: 6; }
+.almadar-enter-delay-7 { --enter-index: 7; }
+.almadar-enter-delay-8 { --enter-index: 8; }
+
 /* The shimmer gradient background. Pair with the `animate-shimmer` utility
  * (defined in tailwind-preset) which sweeps background-position. */
 .almadar-shimmer {
     background-image: linear-gradient(
         90deg,
-        var(--skeleton-base) 0%,
-        var(--skeleton-highlight) 50%,
-        var(--skeleton-base) 100%
+        var(--skeleton-base, var(--color-muted)) 0%,
+        var(--skeleton-highlight, var(--color-surface)) 50%,
+        var(--skeleton-base, var(--color-muted)) 100%
     );
     background-size: 200% 100%;
     background-repeat: no-repeat;
@@ -255,3 +351,13 @@
         scroll-behavior: auto !important;
     }
 }
+
+/* The `dock` slot (a right panel that pushes the page) sets this inset while open. */
+body {
+    padding-inline-end: var(--almadar-dock-inset, 0px);
+}
+
+/* A `dock` inside a contained preview pushes that preview, not the page. */
+.ui-slot-renderer {
+    padding-inline-end: var(--almadar-dock-contained-inset, 0px);
+}

package/themes/_contract.md

@@ -227,6 +227,7 @@ These separate artistic styles (Art Deco vs Win95 vs wabi-sabi) along dimensions
 | `typeScale.fontImport` | — (not a var) | preset: generated `_fonts.css` `@import`; inline: `OrbitalThemeProvider` `<link>`; compiled: `@import` atop the theme CSS | — |
 | `geometry.cornerShape` | `--corner-shape` | every element inside `[data-theme]` (CSS `corner-shape`; Chromium 139+, other engines render plain round corners) | `round` |
 | `geometry.cornerShapePill` | `--corner-shape-pill` | `.rounded-full` / `.rounded-pill` | `round` |
+| `geometry.cornerShapeInteractive` | `--corner-shape-interactive` | `Button`, `Input`, `Select`, `Textarea` (`.interactive-border`) | `--corner-shape` |
 | `geometry.borderStyle` | `--border-style` | every bordered element (scoped reset) | `solid` |
 | `geometry.borderStyleInteractive` | `--border-style-interactive` | `Button` (`.interactive-border`) | `--border-style` |
 | `elevation.interactiveElevation` | `--elevation-interactive` | `Button` resting (`shadow-elevation-interactive`) | `--shadow-sm` |
@@ -235,6 +236,11 @@ These separate artistic styles (Art Deco vs Win95 vs wabi-sabi) along dimensions
 | `surface.cardImage` | `--surface-card-image` | `.surface-material`: `background-image` over the card color | `none` |
 | `surface.pageImage` | `--surface-page-image` | `.surface-page` (app shells, themed orbital roots) | `none` |
 | `surface.pageImageSize` | `--surface-page-image-size` | `.surface-page` | `auto` |
+| `surface.contentBg` | `--surface-content-bg` | `.surface-content`: the background behind every content block (table, calendar, list, chart …) and the default `Card` | `--color-card` |
+| `surface.contentBorderWidth` | `--surface-content-border-width` | `.surface-content` | `--border-width` |
+| `surface.contentBorderColor` | `--surface-content-border-color` | `.surface-content` | `--color-border` |
+| `surface.contentRadius` | `--surface-content-radius` | `.surface-content` | `--radius-container` |
+| `surface.contentShadow` | `--surface-content-shadow` | `.surface-content` | `--elevation-card` |
 
 | `motion.shapes.modalEnter` / `modalExit` | `--motion-modal-enter-from-transform` / `--motion-modal-exit-to-transform` | `Modal` (every modal slot: runtime, contained preview, compiled) | `scale(.96) translateY(8px)` / `scale(.92) translateY(16px)` |
 | `motion.shapes.popoverEnter` / `popoverExit` | `--motion-popover-enter-from-transform` / `--motion-popover-exit-to-transform` | `Popover`, menus | `scale(.95)` |

package/themes/almadar-website.css

@@ -31,6 +31,7 @@
     --color-warning-foreground: #000000;
     --color-info: #1d4ed8;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;
@@ -118,6 +119,7 @@
     --color-warning-foreground: #000000;
     --color-info: #38bdf8;
     --color-info-foreground: #000000;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;

package/themes/almadar.css

@@ -31,6 +31,7 @@
     --color-warning-foreground: #000000;
     --color-info: #0369a1;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 10px;
@@ -116,6 +117,7 @@
     --color-warning-foreground: #000000;
     --color-info: #38bdf8;
     --color-info-foreground: #000000;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 10px;

package/themes/aqua.css

@@ -11,7 +11,7 @@
     --color-secondary: #dde5f0;
     --color-secondary-hover: #cbd6e6;
     --color-secondary-foreground: #1c2a3a;
-    --color-accent: #0b6b8a;
+    --color-accent: #56657a;
     --color-accent-foreground: #ffffff;
     --color-muted: #e4e9f1;
     --color-muted-foreground: #4a5a70;
@@ -37,6 +37,7 @@
     --color-warning-foreground: #2a1c00;
     --color-info: #1f6fe0;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 9px;
@@ -194,8 +195,8 @@
     --color-secondary: #343c49;
     --color-secondary-hover: #414b5b;
     --color-secondary-foreground: #e8eef8;
-    --color-accent: #5fd0ee;
-    --color-accent-foreground: #00222c;
+    --color-accent: #9aa7b8;
+    --color-accent-foreground: #10161f;
     --color-muted: #2a313c;
     --color-muted-foreground: #b4c0d2;
     --color-background: #1a1f27;
@@ -220,6 +221,7 @@
     --color-warning-foreground: #2a1c00;
     --color-info: #4a9bff;
     --color-info-foreground: #001a3a;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 9px;

package/themes/arabesque.css

@@ -8,9 +8,9 @@
     --color-primary: #1f3f8f;
     --color-primary-hover: #183275;
     --color-primary-foreground: #fff8e7;
-    --color-secondary: #2bb3a6;
-    --color-secondary-hover: #2fbfb1;
-    --color-secondary-foreground: #06302c;
+    --color-secondary: #247a74;
+    --color-secondary-hover: #1d6964;
+    --color-secondary-foreground: #fff8e7;
     --color-accent: #7d5a0c;
     --color-accent-foreground: #fff8e7;
     --color-muted: #ebe0c6;
@@ -37,6 +37,7 @@
     --color-warning-foreground: #1a1200;
     --color-info: #1f5fbf;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;
@@ -193,8 +194,8 @@
     --color-primary: #e0b64a;
     --color-primary-hover: #efc866;
     --color-primary-foreground: #1a1200;
-    --color-secondary: #3cc9bb;
-    --color-secondary-hover: #56d8cb;
+    --color-secondary: #4fb3a9;
+    --color-secondary-hover: #66c1b8;
     --color-secondary-foreground: #04201d;
     --color-accent: #8fb0ff;
     --color-accent-foreground: #0a1530;
@@ -207,7 +208,7 @@
     --color-surface: #122040;
     --color-border: #c9a13a;
     --color-input: #c9a13a;
-    --color-ring: #3cc9bb;
+    --color-ring: #4fb3a9;
     --color-table-header: #122040;
     --color-table-border: #c9a13a;
     --color-table-row-hover: #1a2c55;
@@ -222,6 +223,7 @@
     --color-warning-foreground: #1a1200;
     --color-info: #8ab4ff;
     --color-info-foreground: #071b3d;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;
@@ -249,7 +251,7 @@
     --active-translate-y: 0px;
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
-    --focus-ring-color: #3cc9bb;
+    --focus-ring-color: #4fb3a9;
     --shadow-main: 0 4px 14px rgba(0,0,0,0.45);
     --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
     --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);

package/themes/art-deco.css

@@ -5,7 +5,7 @@
  */
 
 [data-theme="art-deco-light"] {
-    --color-primary: #7a5a00;
+    --color-primary: #7d6024;
     --color-primary-foreground: #fff6d8;
     --color-secondary: #0f5a45;
     --color-secondary-hover: #0b4937;
@@ -36,7 +36,8 @@
     --color-warning-foreground: #1a1200;
     --color-info: #1f4a8a;
     --color-info-foreground: #ffffff;
-    --color-primary-hover: #634900;
+    --color-primary-hover: #664e1c;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;
@@ -52,7 +53,7 @@
     --font-weight-bold: 700;
     --letter-spacing: 0.02em;
     --line-height: 1.55;
-    --icon-color: #7a5a00;
+    --icon-color: #7d6024;
     --transition-fast: 240ms;
     --transition-normal: 420ms;
     --transition-slow: 700ms;
@@ -221,6 +222,7 @@
     --color-warning-foreground: #1a1200;
     --color-info: #79a8f2;
     --color-info-foreground: #051226;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;

package/themes/art-nouveau.css

@@ -37,6 +37,7 @@
     --color-warning-foreground: #2a1c00;
     --color-info: #3a6a80;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 8px;
     --radius-md: 16px;
@@ -181,6 +182,7 @@
     --border-heavy: var(--border-width-thick);
     --corner-shape: scoop;
     --corner-shape-pill: round;
+    --corner-shape-interactive: round;
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-card-image: linear-gradient(160deg, rgba(255,250,235,0.7), rgba(233,200,192,0.12));
@@ -221,6 +223,7 @@
     --color-warning-foreground: #241800;
     --color-info: #86c2dc;
     --color-info-foreground: #05202c;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 8px;
     --radius-md: 16px;
@@ -365,6 +368,7 @@
     --border-heavy: var(--border-width-thick);
     --corner-shape: scoop;
     --corner-shape-pill: round;
+    --corner-shape-interactive: round;
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-card-image: linear-gradient(160deg, rgba(185,196,106,0.07), rgba(227,160,168,0.04));

package/themes/atelier.css

@@ -5,8 +5,8 @@
  */
 
 [data-theme="atelier-light"] {
-    --color-primary: #1f51ff;
-    --color-primary-hover: #1a45e0;
+    --color-primary: #1a3db8;
+    --color-primary-hover: #15319a;
     --color-primary-foreground: #fafaf7;
     --color-secondary: #f2f1ec;
     --color-secondary-hover: #e8e7e1;
@@ -22,7 +22,7 @@
     --color-surface: #f2f1ec;
     --color-border: #e5e4de;
     --color-input: #d6d5cf;
-    --color-ring: #1f51ff;
+    --color-ring: #1a3db8;
     --color-table-header: #f2f1ec;
     --color-table-border: #e5e4de;
     --color-table-row-hover: #f6f5f0;
@@ -37,6 +37,7 @@
     --color-warning-foreground: #fafaf7;
     --color-info: #1f51ff;
     --color-info-foreground: #fafaf7;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 12px;
@@ -65,7 +66,7 @@
     --active-translate-y: 0;
     --focus-ring-width: 2px;
     --focus-ring-offset: 3px;
-    --focus-ring-color: #1f51ff;
+    --focus-ring-color: #1a3db8;
     --shadow-main: none;
     --shadow-sm: none;
     --shadow-lg: none;
@@ -187,8 +188,8 @@
 }
 
 [data-theme="atelier-dark"] {
-    --color-primary: #5b7fff;
-    --color-primary-hover: #7a96ff;
+    --color-primary: #7088f0;
+    --color-primary-hover: #8a9ff5;
     --color-primary-foreground: #0d0d0d;
     --color-secondary: #1a1a1a;
     --color-secondary-hover: #242424;
@@ -204,7 +205,7 @@
     --color-surface: #1a1a1a;
     --color-border: #262626;
     --color-input: #333333;
-    --color-ring: #5b7fff;
+    --color-ring: #7088f0;
     --color-table-header: #1a1a1a;
     --color-table-border: #262626;
     --color-table-row-hover: #181818;
@@ -219,6 +220,7 @@
     --color-warning-foreground: #0d0d0d;
     --color-info: #5b7fff;
     --color-info-foreground: #0d0d0d;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 12px;
@@ -247,7 +249,7 @@
     --active-translate-y: 0;
     --focus-ring-width: 2px;
     --focus-ring-offset: 3px;
-    --focus-ring-color: #5b7fff;
+    --focus-ring-color: #7088f0;
     --shadow-main: none;
     --shadow-sm: none;
     --shadow-lg: none;

package/themes/bauhaus.css

@@ -37,6 +37,7 @@
     --color-warning-foreground: #111111;
     --color-info: #0f4fa8;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 0px;
     --radius-md: 0px;
@@ -218,6 +219,7 @@
     --color-warning-foreground: #111111;
     --color-info: #5b96ee;
     --color-info-foreground: #04132b;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 0px;
     --radius-md: 0px;

package/themes/bloomberg-dense.css

@@ -5,8 +5,8 @@
  */
 
 [data-theme="bloomberg-dense-light"] {
-    --color-primary: #0e7490;
-    --color-primary-hover: #155e75;
+    --color-primary: #1e3a6e;
+    --color-primary-hover: #172e58;
     --color-primary-foreground: #ffffff;
     --color-secondary: #eef2f8;
     --color-secondary-hover: #e1e7f0;
@@ -22,7 +22,7 @@
     --color-surface: #eef2f8;
     --color-border: #d6deeb;
     --color-input: #c2cee0;
-    --color-ring: #0e7490;
+    --color-ring: #1e3a6e;
     --color-table-header: #eef2f8;
     --color-table-border: #d6deeb;
     --color-table-row-hover: #eef2f8;
@@ -37,6 +37,7 @@
     --color-warning-foreground: #ffffff;
     --color-info: #0e7490;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 0px;
     --radius-md: 1px;
@@ -65,7 +66,7 @@
     --active-translate-y: 0;
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
-    --focus-ring-color: #0e7490;
+    --focus-ring-color: #1e3a6e;
     --shadow-main: none;
     --shadow-sm: none;
     --shadow-lg: none;
@@ -187,14 +188,14 @@
 }
 
 [data-theme="bloomberg-dense-dark"] {
-    --color-primary: #22d3ee;
-    --color-primary-hover: #67e8f9;
-    --color-primary-foreground: #06131a;
+    --color-primary: #f5a524;
+    --color-primary-hover: #f7b54a;
+    --color-primary-foreground: #1a1206;
     --color-secondary: #16233d;
     --color-secondary-hover: #1d2d4c;
     --color-secondary-foreground: #d6e0ef;
-    --color-accent: #fbbf24;
-    --color-accent-foreground: #1a1206;
+    --color-accent: #5ab0d8;
+    --color-accent-foreground: #06131a;
     --color-muted: #131f36;
     --color-muted-foreground: #8e9db8;
     --color-background: #0a0f1c;
@@ -204,7 +205,7 @@
     --color-surface: #131f36;
     --color-border: #20304e;
     --color-input: #2d4163;
-    --color-ring: #22d3ee;
+    --color-ring: #f5a524;
     --color-table-header: #131f36;
     --color-table-border: #20304e;
     --color-table-row-hover: #16233d;
@@ -219,6 +220,7 @@
     --color-warning-foreground: #1a1206;
     --color-info: #38bdf8;
     --color-info-foreground: #061318;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 0px;
     --radius-md: 1px;
@@ -247,7 +249,7 @@
     --active-translate-y: 0;
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
-    --focus-ring-color: #22d3ee;
+    --focus-ring-color: #f5a524;
     --shadow-main: none;
     --shadow-sm: none;
     --shadow-lg: none;

package/themes/blueprint.css

@@ -37,6 +37,7 @@
     --color-warning-foreground: #332600;
     --color-info: #1a4a8a;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 0px;
     --radius-md: 0px;
@@ -220,6 +221,7 @@
     --color-warning-foreground: #332600;
     --color-info: #7fe3ff;
     --color-info-foreground: #0e2f5e;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 0px;
     --radius-md: 0px;

package/themes/clay.css

@@ -31,6 +31,7 @@
     --color-warning-foreground: #3d2a00;
     --color-info: #3f6fd1;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 16px;
     --radius-md: 22px;
@@ -206,6 +207,7 @@
     --color-warning-foreground: #332400;
     --color-info: #9ab8f0;
     --color-info-foreground: #0f1f3d;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 16px;
     --radius-md: 22px;

package/themes/comic.css

@@ -8,11 +8,11 @@
     --color-primary: #c2301b;
     --color-primary-hover: #a92814;
     --color-primary-foreground: #fff8e7;
-    --color-secondary: #a9e8d3;
-    --color-secondary-hover: #8fdcc1;
-    --color-secondary-foreground: #0f3d2c;
-    --color-accent: #8f6300;
-    --color-accent-foreground: #fff8e7;
+    --color-secondary: #fde68a;
+    --color-secondary-hover: #fcd95c;
+    --color-secondary-foreground: #1c1c28;
+    --color-accent: #1d5bbf;
+    --color-accent-foreground: #ffffff;
     --color-muted: #f5e9c9;
     --color-muted-foreground: #6b5a34;
     --color-background: #fff8e7;
@@ -37,6 +37,7 @@
     --color-warning-foreground: #2a1a00;
     --color-info: #2f6fed;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 8px;
     --radius-md: 14px;
@@ -190,11 +191,11 @@
     --color-primary: #ff7a5c;
     --color-primary-hover: #ff9174;
     --color-primary-foreground: #180a05;
-    --color-secondary: #6fe3c4;
-    --color-secondary-hover: #8ceccf;
-    --color-secondary-foreground: #062a1e;
-    --color-accent: #ffdd57;
-    --color-accent-foreground: #2a1e00;
+    --color-secondary: #f2c94c;
+    --color-secondary-hover: #f5d570;
+    --color-secondary-foreground: #1c1c28;
+    --color-accent: #7fb0ff;
+    --color-accent-foreground: #0b1530;
     --color-muted: #262a4d;
     --color-muted-foreground: #b7bbe3;
     --color-background: #14162c;
@@ -219,6 +220,7 @@
     --color-warning-foreground: #2a1a00;
     --color-info: #6fa8ff;
     --color-info-foreground: #071b3d;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 8px;
     --radius-md: 14px;

package/themes/constructivist.css

@@ -37,6 +37,7 @@
     --color-warning-foreground: #111111;
     --color-info: #1a3a6a;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 6px;
@@ -221,6 +222,7 @@
     --color-warning-foreground: #111111;
     --color-info: #7fa6e8;
     --color-info-foreground: #051226;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 6px;

package/themes/corporate.css

@@ -11,7 +11,7 @@
     --color-secondary: #e2e8f0;
     --color-secondary-hover: #cbd5e1;
     --color-secondary-foreground: #1e293b;
-    --color-accent: #0369a1;
+    --color-accent: #a16207;
     --color-accent-foreground: #ffffff;
     --color-muted: #eef1f6;
     --color-muted-foreground: #5b6b80;
@@ -31,6 +31,7 @@
     --color-warning-foreground: #ffffff;
     --color-info: #1d4ed8;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 2px;
     --radius-md: 2px;
@@ -186,7 +187,7 @@
     --color-secondary: #1c2942;
     --color-secondary-hover: #24344f;
     --color-secondary-foreground: #dbe3f0;
-    --color-accent: #7aa5f5;
+    --color-accent: #e0b24a;
     --color-accent-foreground: #0d1526;
     --color-muted: #1a2438;
     --color-muted-foreground: #8b98ad;
@@ -206,6 +207,7 @@
     --color-warning-foreground: #0d1526;
     --color-info: #7aa5f5;
     --color-info-foreground: #0d1526;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 2px;
     --radius-md: 2px;

package/themes/cyberpunk.css

@@ -37,6 +37,7 @@
     --color-warning-foreground: #000000;
     --color-info: #0050d0;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 10px;
@@ -219,6 +220,7 @@
     --color-warning-foreground: #1a1000;
     --color-info: #4dc3ff;
     --color-info-foreground: #001a2e;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 10px;