@keboola/design 14.0.0 → 15.1.0

package/src/styles.css

@@ -436,39 +436,6 @@
   }
 }
 
-/* Legacy (dark) tooltip chrome — invert nested prose for contrast. Must live in
- * `utilities`: `.tw\:prose` declares the same `--tw-prose-*` variables from that
- * layer, and the layer order at the top of this file makes `utilities` win over
- * `components` regardless of specificity. */
-@layer utilities {
-  [data-tooltip-content='true'] .tw\:prose {
-    @apply tw:prose-invert;
-
-    /* Typography's own `a`/`code` rules are `:where()`-wrapped (specificity 0), so
-     * the inverted variables never reach a link rendered by design's `Link`
-     * (`tw:text-primary`) nor an inline-code background a host's global CSS paints. */
-    a {
-      @apply tw:text-blue-300 tw:hover:text-blue-200;
-    }
-
-    /* Inline code only — scoped the way AIKit's markdown prose does it
-     * (`tw:[&_:not(pre)>code]:…` in `blocks/AIKit/Markdown.tsx`) so a fenced
-     * block's `pre > code` keeps `--tw-prose-invert-pre-bg`. */
-    :not(pre) > code {
-      @apply tw:bg-white/10 tw:text-neutral-100;
-    }
-
-    /* `.tw\:prose blockquote` (components layer, below) fills with the light
-     * `--muted`; on the dark tooltip that would put the now-inverted light text
-     * on a light fill. Re-fill with the same `white/10` wash the inline-code
-     * chip uses — the file's one translucent-overlay idiom, and the only fill
-     * that works against a fixed `bg-neutral-800` without a second token. */
-    blockquote {
-      @apply tw:bg-white/10;
-    }
-  }
-}
-
 @layer components {
   .tw\:prose blockquote {
     border-left: 4px solid rgb(var(--border));
@@ -776,8 +743,6 @@
  * - An `@utility` for the same reason `prose-answer` is one: it has to out-specify prose's
  *   `:where()`-wrapped `code` colour from the same layer. A rule in `components` loses on layer
  *   order and leaves the accent ink on the chip's fill.
- * - The dark tooltip keeps its own chip: `[data-tooltip-content='true'] .tw\:prose :not(pre) > code`
- *   is `(0,2,2)` against this rule's `(0,1,2)`, both in `utilities`.
  */
 @utility prose-code-chip {
   :not(pre) > code {

package/src/theme.css

@@ -51,6 +51,10 @@
    * cannot cycle — same reasoning as `--font-sans` above. */
   --shadow-raised: var(--shadow-raised, 0 2px 6px 0 rgb(100 135 153 / 0.13));
 
+  /* The shared overlay layer — `z-overlay`. Modal, Sheet, menus, popovers, selects and comboboxes
+   * all sit on it, so the one opened last paints on top. */
+  --z-index-overlay: 1055;
+
   /* Brand easing — `ease-brand`. The runtime override var (`--motion-easing`) differs from
    * this @theme token name, so registering it here drops no fallback (unlike bg-brand /
    * shadow-lift, whose runtime var name collides → they stay @utility below). */
@@ -110,6 +114,18 @@
       animation: none;
     }
   }
+
+  /* Dark: lighter violet pool and a light shade, so a near-black label stays AA across the fill. */
+  [data-theme='dark'] & {
+    background-image:
+      radial-gradient(circle, #61e4ff 0, transparent 50%),
+      radial-gradient(circle, #a78bfa 0, transparent 50%),
+      radial-gradient(circle, #2dd4ff 0, transparent 45%);
+
+    &::before {
+      background-image: radial-gradient(closest-side, rgb(125 211 252 / 0.45), transparent 70%);
+    }
+  }
 }
 
 @keyframes kai-drift {
@@ -322,6 +338,36 @@
   --color-selected: var(--selected, rgb(var(--accent)));
   --color-selected-foreground: var(--selected-foreground, rgb(var(--accent-foreground)));
   --color-scrim: var(--scrim, rgb(0 0 0 / 0.5));
+  /* Status pastels — `bg-<intent>-subtle` + `text-<intent>-subtle-foreground`.
+   * - Each reads a full CSS colour (`--success-subtle`, …), so a brand can set its own pair.
+   * - Unset, the fill is the token at 10%; the text is the token 30% towards `foreground`.
+   * - Plain token-on-tint is under AA at 12px; the step towards `foreground` clears it in both schemes.
+   * - `neutral` has no status token; unset, it is `muted` and `muted-foreground`. */
+  --color-success-subtle: var(--success-subtle, rgb(var(--success) / 0.1));
+  --color-success-subtle-foreground: var(
+    --success-subtle-foreground,
+    color-mix(in oklab, rgb(var(--success)), rgb(var(--foreground)) 30%)
+  );
+  --color-info-subtle: var(--info-subtle, rgb(var(--info) / 0.1));
+  --color-info-subtle-foreground: var(
+    --info-subtle-foreground,
+    color-mix(in oklab, rgb(var(--info)), rgb(var(--foreground)) 30%)
+  );
+  --color-warning-subtle: var(--warning-subtle, rgb(var(--warning) / 0.1));
+  --color-warning-subtle-foreground: var(
+    --warning-subtle-foreground,
+    color-mix(in oklab, rgb(var(--warning)), rgb(var(--foreground)) 30%)
+  );
+  --color-destructive-subtle: var(--destructive-subtle, rgb(var(--destructive) / 0.1));
+  --color-destructive-subtle-foreground: var(
+    --destructive-subtle-foreground,
+    color-mix(in oklab, rgb(var(--destructive)), rgb(var(--foreground)) 30%)
+  );
+  --color-neutral-subtle: var(--neutral-subtle, rgb(var(--muted)));
+  --color-neutral-subtle-foreground: var(
+    --neutral-subtle-foreground,
+    color-mix(in oklab, rgb(var(--muted-foreground)), rgb(var(--foreground)) 30%)
+  );
   /* The sidebar's own pair — the rail is often a different surface from the page. Unset, `sidebar-accent`. */
   --color-sidebar-hover: var(--sidebar-hover, rgb(var(--sidebar-accent)));
   --color-sidebar-hover-foreground: var(