@keboola/design 13.2.0 → 15.0.0

package/dist/vegaTheme-ISwGXvof.js

@@ -0,0 +1,49 @@
+import { SERIES_TOKENS, createVegaColorResolver } from "./vegaTokens-DCkvpIVE.js";
+//#region src/vega/vegaTheme.ts
+const CHART_FONT = "Inter, system-ui, sans-serif";
+/**
+* The design system's Vega-Lite chart look, following scheme and brand.
+*
+* - `range.category` is `--chart-1..5`, the same palette as `@keboola/design/charts`.
+* - A range set on the spec's own scale still wins (Flint charts rely on it).
+* - Colours are concrete `rgb()` strings — vega never reads the stylesheet — so rebuild on a
+*   scheme or brand change; `useVegaTheme` does.
+*/
+const vegaTheme = (scheme, from) => {
+	const token = createVegaColorResolver(scheme, from);
+	const label = token("muted-foreground");
+	const heading = token("foreground");
+	const line = token("border");
+	return {
+		background: "transparent",
+		font: CHART_FONT,
+		axis: {
+			labelColor: label,
+			titleColor: heading,
+			gridColor: token("border", .6),
+			domainColor: line,
+			tickColor: line
+		},
+		legend: {
+			labelColor: label,
+			titleColor: heading
+		},
+		header: {
+			labelColor: label,
+			titleColor: heading
+		},
+		title: {
+			color: heading,
+			subtitleColor: label
+		},
+		text: { color: heading },
+		range: {
+			category: SERIES_TOKENS.map((name) => token(name)),
+			ramp: [token("accent"), token("chart-1")]
+		}
+	};
+};
+//#endregion
+export { vegaTheme };
+
+//# sourceMappingURL=vegaTheme-ISwGXvof.js.map

package/dist/vegaTheme-ISwGXvof.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vegaTheme-ISwGXvof.js","names":[],"sources":["../src/vega/vegaTheme.ts"],"sourcesContent":["import type { Config } from 'vega-lite';\n\nimport type { ResolvedColorScheme } from '../components/ThemeProvider/types';\n\nimport { createVegaColorResolver, SERIES_TOKENS } from './vegaTokens';\n\nconst CHART_FONT = 'Inter, system-ui, sans-serif';\n\n/**\n * The design system's Vega-Lite chart look, following scheme and brand.\n *\n * - `range.category` is `--chart-1..5`, the same palette as `@keboola/design/charts`.\n * - A range set on the spec's own scale still wins (Flint charts rely on it).\n * - Colours are concrete `rgb()` strings — vega never reads the stylesheet — so rebuild on a\n *   scheme or brand change; `useVegaTheme` does.\n */\nexport const vegaTheme = (scheme: ResolvedColorScheme, from?: Element | null): Config => {\n  const token = createVegaColorResolver(scheme, from);\n\n  const label = token('muted-foreground');\n  const heading = token('foreground');\n  const line = token('border');\n\n  return {\n    background: 'transparent',\n    font: CHART_FONT,\n    axis: {\n      labelColor: label,\n      titleColor: heading,\n      gridColor: token('border', 0.6),\n      domainColor: line,\n      tickColor: line,\n    },\n    legend: { labelColor: label, titleColor: heading },\n    header: { labelColor: label, titleColor: heading },\n    title: { color: heading, subtitleColor: label },\n    text: { color: heading },\n    range: {\n      category: SERIES_TOKENS.map((name) => token(name)),\n      ramp: [token('accent'), token('chart-1')],\n    },\n  };\n};\n"],"mappings":";;AAMA,MAAM,aAAa;;;;;;;;;AAUnB,MAAa,aAAa,QAA6B,SAAkC;CACvF,MAAM,QAAQ,wBAAwB,QAAQ,IAAI;CAElD,MAAM,QAAQ,MAAM,kBAAkB;CACtC,MAAM,UAAU,MAAM,YAAY;CAClC,MAAM,OAAO,MAAM,QAAQ;CAE3B,OAAO;EACL,YAAY;EACZ,MAAM;EACN,MAAM;GACJ,YAAY;GACZ,YAAY;GACZ,WAAW,MAAM,UAAU,EAAG;GAC9B,aAAa;GACb,WAAW;EACb;EACA,QAAQ;GAAE,YAAY;GAAO,YAAY;EAAQ;EACjD,QAAQ;GAAE,YAAY;GAAO,YAAY;EAAQ;EACjD,OAAO;GAAE,OAAO;GAAS,eAAe;EAAM;EAC9C,MAAM,EAAE,OAAO,QAAQ;EACvB,OAAO;GACL,UAAU,cAAc,KAAK,SAAS,MAAM,IAAI,CAAC;GACjD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,SAAS,CAAC;EAC1C;CACF;AACF"}

package/dist/{vegaTheme-VQMWTlBw.js → vegaTokens-DCkvpIVE.js}

@@ -1,4 +1,4 @@
-import { createChannelResolver } from "./themeTokens-7DEab0kp.js";
+import { createChannelResolver } from "./themeTokens-DCeb62ap.js";
 //#region src/vega/vegaTokens.ts
 /**
 * Serializes `"R G B"` channels comma-separated, the only form vega parses.
@@ -67,6 +67,18 @@ const FALLBACK_CHANNELS = {
 	card: {
 		light: "255 255 255",
 		dark: "34 34 40"
+	},
+	muted: {
+		light: "241 245 249",
+		dark: "38 38 45"
+	},
+	primary: {
+		light: "37 99 235",
+		dark: "31 143 255"
+	},
+	destructive: {
+		light: "220 38 38",
+		dark: "229 72 77"
 	}
 };
 /**
@@ -81,52 +93,32 @@ const createVegaColorResolver = (scheme, from) => {
 	const resolve = createChannelResolver(from);
 	return (token, alpha) => vegaRgb(resolve(token, FALLBACK_CHANNELS[token][scheme]), alpha);
 };
-//#endregion
-//#region src/vega/vegaTheme.ts
-const CHART_FONT = "Inter, system-ui, sans-serif";
 /**
-* The design system's Vega-Lite chart look, following scheme and brand.
+* How the second palette tier (series 6-10) is derived from the core hues.
 *
-* - `range.category` is `--chart-1..5`, the same palette as `@keboola/design/charts`.
-* - A range set on the spec's own scale still wins (Flint charts rely on it).
-* - Colours are concrete `rgb()` strings — vega never reads the stylesheet — so rebuild on a
-*   scheme or brand change; `useVegaTheme` does.
+* - Each hue moves *away* from its surface: darker on light, lighter on dark.
+*   Darkening on dark would drop contrast from ~6.7:1 to ~3.7:1.
+* - `amount` is the fraction of the distance travelled toward `towards`.
 */
-const vegaTheme = (scheme, from) => {
-	const token = createVegaColorResolver(scheme, from);
-	const label = token("muted-foreground");
-	const heading = token("foreground");
-	const line = token("border");
-	return {
-		background: "transparent",
-		font: CHART_FONT,
-		axis: {
-			labelColor: label,
-			titleColor: heading,
-			gridColor: token("border", .6),
-			domainColor: line,
-			tickColor: line
-		},
-		legend: {
-			labelColor: label,
-			titleColor: heading
-		},
-		header: {
-			labelColor: label,
-			titleColor: heading
-		},
-		title: {
-			color: heading,
-			subtitleColor: label
-		},
-		text: { color: heading },
-		range: {
-			category: SERIES_TOKENS.map((name) => token(name)),
-			ramp: [token("accent"), token("chart-1")]
-		}
-	};
+const TIER_TWO_SHIFT = {
+	light: {
+		towards: 0,
+		amount: .38
+	},
+	dark: {
+		towards: 255,
+		amount: .35
+	}
+};
+/** A series colour's second-tier variant; an input not shaped like `rgb()` comes back unchanged. */
+const tierTwoColour = (colour, scheme) => {
+	const channels = colour.match(/\d+/g);
+	if (!channels || channels.length < 3) return colour;
+	const { towards, amount } = TIER_TWO_SHIFT[scheme];
+	const shifted = channels.slice(0, 3).map((c) => Math.round(Number(c) + (towards - Number(c)) * amount));
+	return vegaRgb(shifted.join(" "));
 };
 //#endregion
-export { SERIES_TOKENS, createVegaColorResolver, vegaRgb, vegaTheme };
+export { SERIES_TOKENS, createVegaColorResolver, tierTwoColour };
 
-//# sourceMappingURL=vegaTheme-VQMWTlBw.js.map
+//# sourceMappingURL=vegaTokens-DCkvpIVE.js.map

package/dist/vegaTokens-DCkvpIVE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vegaTokens-DCkvpIVE.js","names":[],"sources":["../src/vega/vegaTokens.ts"],"sourcesContent":["import type { ResolvedColorScheme } from '../components/ThemeProvider/types';\nimport { createChannelResolver } from '../utils/themeTokens';\n\n/**\n * Serializes `\"R G B\"` channels comma-separated, the only form vega parses.\n *\n * - vega reads colours through d3-color 3.1, which answers `null` for the\n *   space-separated CSS Color 4 form the rest of the package emits.\n * - A flat fill survives that anyway — the string reaches the SVG attribute and\n *   the browser parses it. An interpolated one does not: both endpoints of a\n *   sequential ramp collapse, and a quantitative scale paints solid black.\n */\nconst vegaRgb = (channels: string, alpha?: number): string => {\n  const c = channels.split(/\\s+/).join(', ');\n  return alpha === undefined ? `rgb(${c})` : `rgba(${c}, ${alpha})`;\n};\n\n/** The `--chart-*` slots, in series order. */\nexport const SERIES_TOKENS = ['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5'] as const;\n\n/**\n * Fallback channels for the tokens a vega chart reads, mirroring the `:root` /\n * `[data-theme='dark']` blocks of `styles.css`. The resolver reaches these only\n * when the live custom property is missing — SSR, or a unit test that loads no\n * CSS.\n */\nconst FALLBACK_CHANNELS = {\n  foreground: { light: '30 41 59', dark: '229 230 236' },\n  'muted-foreground': { light: '100 116 139', dark: '141 144 153' },\n  border: { light: '229 231 235', dark: '52 53 62' },\n  'chart-1': { light: '31 143 255', dark: '92 173 255' },\n  'chart-2': { light: '0 194 135', dark: '0 230 161' },\n  'chart-3': { light: '146 92 255', dark: '173 133 255' },\n  'chart-4': { light: '245 147 0', dark: '255 190 92' },\n  'chart-5': { light: '237 94 223', dark: '242 140 232' },\n  // The sequential ramp's low end and the surface it must stay legible against.\n  accent: { light: '224 242 254', dark: '30 58 95' },\n  card: { light: '255 255 255', dark: '34 34 40' },\n  // Diagram surfaces and accents (`MermaidDiagram`).\n  muted: { light: '241 245 249', dark: '38 38 45' },\n  primary: { light: '37 99 235', dark: '31 143 255' },\n  destructive: { light: '220 38 38', dark: '229 72 77' },\n} as const;\n\nexport type VegaTokenName = keyof typeof FALLBACK_CHANNELS;\n\n/**\n * A vega-serializing token resolver bound to one `getComputedStyle` snapshot.\n *\n * - Answers `rgb(R, G, B)` / `rgba(R, G, B, a)` — see {@link vegaRgb}.\n * - Falls back per scheme when the custom property is not painted.\n * - Build one per palette, never at module level: the values change whenever\n *   the scheme or the brand does.\n */\nexport const createVegaColorResolver = (scheme: ResolvedColorScheme, from?: Element | null) => {\n  const resolve = createChannelResolver(from);\n\n  return (token: VegaTokenName, alpha?: number): string =>\n    vegaRgb(resolve(token, FALLBACK_CHANNELS[token][scheme]), alpha);\n};\n\n/**\n * How the second palette tier (series 6-10) is derived from the core hues.\n *\n * - Each hue moves *away* from its surface: darker on light, lighter on dark.\n *   Darkening on dark would drop contrast from ~6.7:1 to ~3.7:1.\n * - `amount` is the fraction of the distance travelled toward `towards`.\n */\nconst TIER_TWO_SHIFT = {\n  light: { towards: 0, amount: 0.38 },\n  dark: { towards: 255, amount: 0.35 },\n} as const;\n\n/** A series colour's second-tier variant; an input not shaped like `rgb()` comes back unchanged. */\nexport const tierTwoColour = (colour: string, scheme: ResolvedColorScheme): string => {\n  const channels = colour.match(/\\d+/g);\n  if (!channels || channels.length < 3) return colour;\n  const { towards, amount } = TIER_TWO_SHIFT[scheme];\n  const shifted = channels\n    .slice(0, 3)\n    .map((c) => Math.round(Number(c) + (towards - Number(c)) * amount));\n  return vegaRgb(shifted.join(' '));\n};\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,WAAW,UAAkB,UAA2B;CAC5D,MAAM,IAAI,SAAS,MAAM,KAAK,CAAC,CAAC,KAAK,IAAI;CACzC,OAAO,UAAU,KAAA,IAAY,OAAO,EAAE,KAAK,QAAQ,EAAE,IAAI,MAAM;AACjE;;AAGA,MAAa,gBAAgB;CAAC;CAAW;CAAW;CAAW;CAAW;AAAS;;;;;;;AAQnF,MAAM,oBAAoB;CACxB,YAAY;EAAE,OAAO;EAAY,MAAM;CAAc;CACrD,oBAAoB;EAAE,OAAO;EAAe,MAAM;CAAc;CAChE,QAAQ;EAAE,OAAO;EAAe,MAAM;CAAW;CACjD,WAAW;EAAE,OAAO;EAAc,MAAM;CAAa;CACrD,WAAW;EAAE,OAAO;EAAa,MAAM;CAAY;CACnD,WAAW;EAAE,OAAO;EAAc,MAAM;CAAc;CACtD,WAAW;EAAE,OAAO;EAAa,MAAM;CAAa;CACpD,WAAW;EAAE,OAAO;EAAc,MAAM;CAAc;CAEtD,QAAQ;EAAE,OAAO;EAAe,MAAM;CAAW;CACjD,MAAM;EAAE,OAAO;EAAe,MAAM;CAAW;CAE/C,OAAO;EAAE,OAAO;EAAe,MAAM;CAAW;CAChD,SAAS;EAAE,OAAO;EAAa,MAAM;CAAa;CAClD,aAAa;EAAE,OAAO;EAAa,MAAM;CAAY;AACvD;;;;;;;;;AAYA,MAAa,2BAA2B,QAA6B,SAA0B;CAC7F,MAAM,UAAU,sBAAsB,IAAI;CAE1C,QAAQ,OAAsB,UAC5B,QAAQ,QAAQ,OAAO,kBAAkB,MAAM,CAAC,OAAO,GAAG,KAAK;AACnE;;;;;;;;AASA,MAAM,iBAAiB;CACrB,OAAO;EAAE,SAAS;EAAG,QAAQ;CAAK;CAClC,MAAM;EAAE,SAAS;EAAK,QAAQ;CAAK;AACrC;;AAGA,MAAa,iBAAiB,QAAgB,WAAwC;CACpF,MAAM,WAAW,OAAO,MAAM,MAAM;CACpC,IAAI,CAAC,YAAY,SAAS,SAAS,GAAG,OAAO;CAC7C,MAAM,EAAE,SAAS,WAAW,eAAe;CAC3C,MAAM,UAAU,SACb,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,MAAM,KAAK,MAAM,OAAO,CAAC,KAAK,UAAU,OAAO,CAAC,KAAK,MAAM,CAAC;CACpE,OAAO,QAAQ,QAAQ,KAAK,GAAG,CAAC;AAClC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "13.2.0",
+  "version": "15.0.0",
   "description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
   "license": "MIT",
   "type": "module",
@@ -194,7 +194,7 @@
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.9",
     "@iconify-json/lucide": "^1.2.118",
-    "@keboola/brand-registry": "^2.0.0",
+    "@keboola/brand-registry": "^3.0.0",
     "@keboola/codemirror-lang-sql": "^0.7.3",
     "@keboola/tailwind-config": "^1.2.0",
     "@lexical/code": "^0.42.0",
@@ -236,7 +236,6 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@uiw/codemirror-theme-github": "^4.25.11",
     "@uiw/react-codemirror": "^4.25.11",
-    "beautiful-mermaid": "^1.1.3",
     "boring-avatars": "^2.0.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -247,8 +246,8 @@
     "input-otp": "^1.4.2",
     "lexical": "^0.42.0",
     "lucide-react": "^1.17.0",
-    "mermaid": "^11.17.2",
     "node-diff3": "^3.2.0",
+    "pele": "^1.6.0",
     "react-day-picker": "^10.0.1",
     "react-dropzone": "^14.2.3",
     "react-markdown": "^10.1.0",

package/src/styles.css

@@ -284,10 +284,10 @@
      a sticky table header it read as a glowing seam. `--shadow-table` is softer than
      `--shadow-raised` because the header casts a full-width band.
 
-     Reaches rules that read `var(--shadow-table)` / `var(--shadow-card)` directly,
-     which is how kbc-ui's Less consumes them. It does NOT reach the `shadow-table` /
-     `shadow-card` Tailwind utilities: those are `@theme` tokens (theme.css), so v4
-     inlines the light literal into the generated class at build time. Making the
+     Reaches only rules that read `var(--shadow-table)` / `var(--shadow-card)` directly,
+     and no rule in this repo does. It does NOT reach the `shadow-table` / `shadow-card`
+     Tailwind utilities: those are `@theme` tokens (theme.css), so v4 inlines the light
+     literal into the generated class at build time. Making the
      utilities scheme-aware needs the token to carry a `var(--runtime, fallback)`
      shape, which is a separate change with control-ui / boilerplate to verify against. */
   --shadow-card: 0px 1px 4px rgb(0 0 0 / 0.4);
@@ -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

@@ -110,6 +110,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 +334,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(