@keboola/tailwind-config 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @keboola/tailwind-config
 
+## 1.2.0
+
+### Minor Changes
+
+- The reading rhythm of an answer is one definition
+  - `tw:prose`'s `--tw-prose-*` slots point at theme tokens, so prose follows the colour scheme and the brand without a call site reaching for `prose-invert`. The `[data-theme='dark'] .tw:prose → prose-invert` patch is gone with them. This is not additive: every `.tw:prose` surface takes the new palette, tooltips and docs included.
+  - `tw:prose-answer` is the new measure, heading scale, heading margins and paragraph/list rhythm a Keboola answer reads on. `AIKit/Markdown` wears it, so every chat gets the same one.
+  - `Markdown` takes a `rhythm` prop: `answer` (the default) is the new rhythm, `chrome` is `tw:prose` on the dense `tw:prose-sm` scale for content a model did not write — a dashboard text widget, a vendor's app description.
+  - `tw:prose-code-chip` paints inline code as a chip on the `--muted` / `--foreground` pair, and both rhythms wear it. It is its own utility because it is palette, not rhythm: without it a surface keeps Typography's pinned `#c7254e`, which measures 3.36:1 on the dark page.
+  - `Markdown.Root` / `Markdown.Block` split one prose surface from the N blocks a streaming renderer paints into it — the rhythm then resolves `:first-child` / `:last-child` across the whole reply.
+  - `tw:prose-answer`'s wider values apply inside an `@container/messages` at 640px and up; where no consumer declares that container it keeps its narrow ones.
+
 ## 1.1.2
 
 ### Patch Changes

package/colors.ts

@@ -1,6 +1,4 @@
-// Keboola brand ramps. Historically these lived under `primary[100..900]` (green)
-// and `secondary[100..900]` (blue); defined once here so the legacy `primary`/
-// `secondary` aliases and the semantic-correct `green`/`blue` palettes can't drift.
+// Shared by the `primary`/`secondary` aliases and the `green`/`blue` palettes so they can't drift.
 const greenScale = {
   100: '#e0ffe0',
   200: '#baf5ba',
@@ -35,12 +33,12 @@ export default {
     preCodeBg: '#f5f5f5',
   },
 
-  // Main application colors — channel values live in CSS variables (see packages/design/src/styles.css :root).
-  // The `<alpha-value>` placeholder lets Tailwind apply opacity modifiers like `tw:bg-muted/50`.
+  // Channel values live in CSS vars (packages/design/src/styles.css :root).
+  // `<alpha-value>` enables opacity modifiers like `tw:bg-muted/50`.
   background: 'rgb(var(--color-background) / <alpha-value>)',
   foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
 
-  // Raised container chrome (Modal/Card/Sheet). White in light, lifted off background in dark.
+  // Raised container chrome (Modal/Card/Sheet).
   card: {
     DEFAULT: 'rgb(var(--color-card) / <alpha-value>)',
     foreground: 'rgb(var(--color-card-foreground) / <alpha-value>)',
@@ -59,15 +57,13 @@ export default {
 
   border: 'rgb(var(--color-border) / <alpha-value>)',
 
-  // `DEFAULT` is the input *border*; `background` is the control's own fill.
-  // Both are their own token because a form control is not a card — `card` is
-  // raised container chrome and re-skins independently of the field surface.
+  // `DEFAULT` is the input border; `background` its fill.
+  // Not `card`: a form control re-skins independently of container chrome.
   input: {
     DEFAULT: 'rgb(var(--color-input) / <alpha-value>)',
     background: 'rgb(var(--color-input-background) / <alpha-value>)',
   },
 
-  // Focus ring (brand blue).
   ring: 'rgb(var(--color-ring) / <alpha-value>)',
 
   // Focus-ring offset gap (the surface color the ring is inset against).
@@ -100,19 +96,13 @@ export default {
     foreground: 'rgb(var(--color-muted-foreground) / <alpha-value>)',
   },
 
-  // Loading-placeholder fill (Skeleton). Darker than `muted` in light, lighter
-  // than card/background in dark, so the block is perceptible in both schemes.
+  // Skeleton fill; perceptible against `muted` and surfaces in both schemes.
   skeleton: 'rgb(var(--color-skeleton) / <alpha-value>)',
 
-  // Table header surface — a chrome tint that sits clearly above the table
-  // body (card/background) in both schemes. `muted` is ~1.05:1 vs surfaces, so
-  // the header row was near-invisible; this separates it. Scheme-aware only
-  // (light fallback here + `[data-theme='dark']` override in styles.css) — like
-  // `--color-skeleton`, it is not a brand-registry `Colors` slot, so brands
-  // don't re-skin it; a consumer can still override `--color-table-header`.
+  // Table header tint (`muted` is too close to surfaces); dark override in styles.css.
+  // Not a brand `Colors` slot, so brands don't re-skin it.
   'table-header': 'rgb(var(--color-table-header, 219 225 235) / <alpha-value>)',
 
-  // Sidebar semantic colors
   sidebar: {
     DEFAULT: 'rgb(var(--color-sidebar) / <alpha-value>)',
     foreground: 'rgb(var(--color-sidebar-foreground) / <alpha-value>)',
@@ -228,14 +218,8 @@ export default {
     900: '#5C0A54',
   },
 
-  // Semantic-correct names for the Keboola brand ramps that historically lived under
-  // `primary[100..900]` (green) and `secondary[100..900]` (blue) — fixed tints used
-  // directly regardless of brand, unlike `primary.DEFAULT` / `secondary.DEFAULT`
-  // (shadcn semantic, CSS-var driven). New code should use these; the `primary`/
-  // `secondary` ramps remain as aliases until their callsites are migrated (Step 2).
-  //
-  // Like the existing custom palettes (`cyan`/`teal`/`yellow`/`pink`/`purple`), these
-  // are `100..900` only and override Tailwind's same-named defaults.
+  // Fixed brand-independent ramps; prefer over the `primary`/`secondary` ramp aliases.
+  // `100..900` only; overrides Tailwind's same-named defaults.
   green: { ...greenScale },
   blue: { ...blueScale },
 };

package/index.js

@@ -2,10 +2,8 @@ import colors from './colors';
 import { typography } from './typography';
 
 /**
- * The Keboola token surface as a Tailwind `theme`, loaded through v4's `@config`
- * bridge (see `packages/design/src/styles.css`). Everything a v4 build owns in
- * CSS — the class prefix, `@import`ed layers, the scoped preflight, plugins — is
- * intentionally absent: declare those in your stylesheet, not here.
+ * The Keboola token surface as a Tailwind `theme`, loaded via v4's `@config` (see `packages/design/src/styles.css`).
+ * Prefix, layers, preflight and plugins belong in the stylesheet, not here.
  *
  * @type {Pick<import('tailwindcss').Config, 'theme'>}
  */
@@ -18,9 +16,7 @@ const config = {
           700: 'url(#aigradient-700)',
         },
       },
-      // Lucide icons are stroke-based — exposing the AI gradient as a
-      // stroke utility lets us paint the visible line with the gradient,
-      // not just the (often empty) interior fill area.
+      // Lucide icons are stroke-based, so the gradient must paint the stroke, not just the fill.
       stroke: {
         aigradient: {
           600: 'url(#aigradient-600)',
@@ -37,20 +33,15 @@ const config = {
         'dot-pulse-2': 'dot-pulse 1.5s infinite 0.2s',
         'dot-pulse-3': 'dot-pulse 1.5s infinite 0.4s',
         'toast-progress': 'toast-progress 5s linear forwards',
-        // `collapsible-down` / `collapsible-up` are absent on purpose: `tw-animate-css` ships both
-        // utilities and wins, so an entry here emits nothing. `Collapsible`'s motion is registered
-        // as `collapsible-open` / `collapsible-close` in `packages/design/src/theme.css`.
+        // No `collapsible-down`/`-up`: `tw-animate-css` ships them and wins.
+        // `Collapsible` uses `collapsible-open`/`-close` from `packages/design/src/theme.css`.
         'marching-ants': 'marching-ants 1s linear infinite',
         'spinner-dots': 'spinner-dots 1s ease-in-out infinite',
         'progress-bar': 'progress-bar var(--progress-bar-duration, 3s) linear forwards',
       },
       keyframes: {
-        // Animate the `translate` property, NOT `transform`. In v4 the `-translate-x-*`
-        // utilities (Skeleton's `before:-translate-x-full` start position) set the CSS
-        // `translate` property, not `transform`. A `transform`-based keyframe composes
-        // as a SEPARATE property, so the static `translate:-100%` pins the shimmer
-        // off-screen and the sweep is invisible. Matching `translate` lets the keyframe
-        // override the start position and sweep -100% -> 100% as before.
+        // Animates `translate`, not `transform`: v4's `-translate-x-*` (Skeleton's start) sets
+        // `translate`, which a `transform` keyframe can't override, hiding the sweep.
         shimmer: {
           '100%': {
             translate: '100% 0',
@@ -93,9 +84,8 @@ const config = {
       },
       backgroundImage: {
         'loader-gradient': 'radial-gradient(circle closest-side,#000 90%,#0000)',
-        // Brand gradient — `tw:bg-brand`. Set via `theme.gradient.brand`; the
-        // inline fallback equals the stylesheet default (primary→accent), so the
-        // utility stays valid even without `@keboola/design/styles`.
+        // `tw:bg-brand`; the fallback equals the stylesheet default, so it works
+        // without `@keboola/design/styles`.
         brand:
           'var(--gradient-brand, linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-accent, var(--color-primary)))))',
       },
@@ -106,10 +96,7 @@ const config = {
         outline: '0 0 0 3px rgba(34, 141, 255, 0.25)',
         table: '0px 6px 6px -4px rgba(100, 135, 153, 0.13)',
         card: '0px 1px 4px rgba(100, 135, 153, 0.15)',
-        // Brand-driven elevation. The inline fallbacks equal the stock Tailwind
-        // shadow scale, so `tw:shadow-sm`, `tw:shadow-md` and `tw:shadow-lg`
-        // are unchanged until a brand sets `theme.shadows`. `tw:shadow-lift`
-        // is a stronger raised shadow.
+        // Fallbacks equal stock Tailwind shadows until a brand sets `theme.shadows`.
         sm: 'var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05))',
         md: 'var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))',
         lg: 'var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))',
@@ -117,12 +104,7 @@ const config = {
       },
       borderRadius: {
         card: '10px',
-        // Brand-driven corner radii — a brand overrides via `theme.radii`, which
-        // `ThemeProvider` emits as `--radius-*`. The inline fallbacks equal the
-        // stock Tailwind scale, so `tw:rounded-sm`, `tw:rounded-md` and
-        // `tw:rounded-lg` are unchanged until a brand (or the design
-        // stylesheet's `:root`) sets the var. Mirrors the
-        // `shadow-*` / `space-*` pattern above.
+        // `theme.radii` via `ThemeProvider`; fallbacks equal the stock Tailwind scale.
         sm: 'var(--radius-sm, 0.125rem)',
         md: 'var(--radius-md, 0.375rem)',
         lg: 'var(--radius-lg, 0.5rem)',
@@ -140,12 +122,8 @@ const config = {
       },
       typography: typography,
       colors,
-      // Brand-driven type scale — semantic `text-display` / `text-heading` /
-      // `text-body` utilities that bundle size + line-height + weight + tracking
-      // into one step. Each axis reads a `--type-*` var (emitted by ThemeProvider
-      // from `typography.typeScale`) with an inline fallback, so the utilities
-      // stay valid and unchanged until a brand opts in. Under `extend` so
-      // Tailwind's default `text-sm` / `text-xl` / … scale is preserved.
+      // `--type-*` from `typography.typeScale` via ThemeProvider; fallbacks keep it valid when unset.
+      // Under `extend` to keep Tailwind's default `text-*` scale.
       fontSize: {
         display: [
           'var(--type-display-size, 1.875rem)',
@@ -172,22 +150,14 @@ const config = {
           },
         ],
       },
-      // Chrome tracking token — under `extend` so Tailwind's default tracking
-      // scale (`tracking-normal` / `tracking-wide` / …) is preserved. `chrome`
-      // reads `--letter-spacing-chrome` (from `typography.letterSpacing.chrome`),
-      // falling back to the current 1px value.
+      // Under `extend` to keep Tailwind's default tracking scale.
       letterSpacing: {
         chrome: 'var(--letter-spacing-chrome, 1px)',
       },
     },
     fontFamily: {
-      // Display face for headings — `tw:font-display`. Set via
-      // `theme.typography.fontDisplay`; when unset it resolves to `--font-sans`
-      // then the Inter stack, so it defaults to the body face rather than a
-      // generic `sans-serif`. The fallback chain lives *inside* the `var()` so
-      // the declaration stays valid when the vars are undefined — a bare
-      // undefined `var()` invalidates the whole `font-family` at
-      // computed-value time, and the later families would not rescue it.
+      // `theme.typography.fontDisplay`, else the body face. Fallbacks live inside `var()`:
+      // a bare undefined `var()` invalidates the whole `font-family`.
       display: [
         'var(--font-display, var(--font-sans, Inter))',
         'system-ui',
@@ -214,11 +184,7 @@ const config = {
         'Courier New',
         'monospace',
       ],
-      // Body face — `tw:font-sans`. A brand's `typography.fontFamily` is emitted
-      // as `--font-sans` by `ThemeProvider`; the inline `Inter` fallback keeps
-      // the canonical stack when unset, so default rendering is unchanged. The
-      // fallback lives *inside* the `var()` (same reasoning as `display` above)
-      // so the declaration stays valid when the var is undefined.
+      // `typography.fontFamily` via `ThemeProvider`; fallback inside `var()` as for `display`.
       sans: [
         'var(--font-sans, Inter)',
         'system-ui',
@@ -236,9 +202,7 @@ const config = {
         'Noto Color Emoji',
       ],
     },
-    // Chrome font-weight scale. Brand-overridable via `--font-weight-*` (emitted
-    // by ThemeProvider from `typography.weight`); fallbacks are the design
-    // defaults, so a brand that omits weights shows no drift.
+    // `--font-weight-*` from `typography.weight` via ThemeProvider; fallbacks are design defaults.
     fontWeight: {
       normal: 'var(--font-weight-normal, 400)',
       medium: 'var(--font-weight-medium, 500)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/tailwind-config",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Shared Tailwind CSS v4 design tokens for the Keboola UI platform — semantic color palette, type scale, radii and shadows as a `theme` object.",
   "license": "MIT",
   "type": "module",

package/typography.ts

@@ -6,23 +6,8 @@ export const typography = {
       'h1, h2, h3, h4, h5, h6': {
         color: 'inherit',
       },
-      // Code in a quote or a fenced block takes the ink of the surface it sits
-      // on rather than a pinned one.
-      //
-      // - `--tw-prose-code` is `#c7254e` in both schemes; the fill under it is
-      //   not. On a dark `--muted` slab that pin measures 2.72:1.
-      // - A colour declared here lands on the `<code>`, so it beats the one a
-      //   call site puts on the `<pre>` — inheritance loses to any declaration.
-      // - Raising the call site's specificity is not an escape either: under
-      //   `[data-theme='dark'] .tw\:prose` this rule is `(0,2,0)`, above the
-      //   `(0,1,2)` of a `[&_pre_code]:…` arbitrary variant.
-      // - Bare inline `code` is deliberately not in the list. It keeps
-      //   `--tw-prose-invert-code`, 3.36:1 on the dark page. The chat surfaces
-      //   that render most of it put it on their own chip — `AIKit/Markdown`
-      //   and kbc-ui's chat both do. A bare `.tw\:prose` does not, and
-      //   kbc-ui's `react/common/Markdown` is one: there the 3.36:1 stands.
-      //   The fix still belongs with the chip — a rule here would strip the
-      //   accent from every call site at once, including the ones that want it.
+      // Quoted/fenced code inherits surface ink: pinned `--tw-prose-code` is 2.72:1 on dark `--muted`.
+      // Beats call-site colours on `<pre>`. Inline `code` is excluded: its chip belongs to the call site.
       'blockquote code, pre code': {
         color: 'inherit',
       },
@@ -30,9 +15,23 @@ export const typography = {
   },
   DEFAULT: {
     css: {
+      // Re-points the plugin's fixed light palette at theme tokens so prose follows scheme and brand.
+      // Raw `--<token>` triples: `--color-*` is `@theme inline` and doesn't exist at runtime.
+      '--tw-prose-body': 'rgb(var(--foreground))',
+      '--tw-prose-headings': 'rgb(var(--foreground))',
+      '--tw-prose-bold': 'rgb(var(--foreground))',
+      '--tw-prose-quotes': 'rgb(var(--foreground))',
+      '--tw-prose-links': 'rgb(var(--primary))',
+      '--tw-prose-counters': 'rgb(var(--muted-foreground))',
+      '--tw-prose-bullets': 'rgb(var(--muted-foreground))',
+      '--tw-prose-captions': 'rgb(var(--muted-foreground))',
+      '--tw-prose-hr': 'rgb(var(--border))',
+      '--tw-prose-th-borders': 'rgb(var(--border))',
+      '--tw-prose-td-borders': 'rgb(var(--border))',
+      // Inline code keeps its accent; chip surfaces opt in with `tw:prose-answer`.
       '--tw-prose-code': colors.prose.code,
-      '--tw-prose-pre-code': colors.prose.preCode,
-      '--tw-prose-pre-bg': colors.prose.preCodeBg,
+      '--tw-prose-pre-code': 'rgb(var(--foreground))',
+      '--tw-prose-pre-bg': 'rgb(var(--muted))',
       '--tw-prose-invert-body': colors.white,
       '--tw-prose-invert-code': colors.prose.code,
       '--tw-prose-invert-pre-code': colors.prose.preCode,
@@ -42,11 +41,13 @@ export const typography = {
       maxWidth: 'none',
       fontSize: '14px',
       lineHeight: '1.42857143',
+      // Each heading must name `--tw-prose-headings`: it overrides the plugin's colour rule.
+      // Not `rgb(var(--color-foreground))`: that var is `@theme inline` and already a full `rgb()`.
       h1: {
         fontSize: '32px',
         lineHeight: '40px',
         fontWeight: '500',
-        color: 'rgb(var(--color-foreground))',
+        color: 'var(--tw-prose-headings)',
         marginTop: 0,
         marginBottom: '10px',
       },
@@ -57,7 +58,7 @@ export const typography = {
         fontSize: '24px',
         lineHeight: '32px',
         fontWeight: '500',
-        color: 'rgb(var(--color-foreground))',
+        color: 'var(--tw-prose-headings)',
         marginTop: 0,
         marginBottom: '10px',
       },
@@ -68,25 +69,25 @@ export const typography = {
         fontSize: '16px',
         lineHeight: '24px',
         fontWeight: '500',
-        color: 'rgb(var(--color-foreground))',
+        color: 'var(--tw-prose-headings)',
         margin: 0,
       },
       h4: {
         fontSize: '14px',
         lineHeight: '20px',
         fontWeight: '500',
-        color: 'rgb(var(--color-foreground))',
+        color: 'var(--tw-prose-headings)',
         margin: 0,
       },
       h5: {
         fontSize: '12px',
         lineHeight: '20px',
         fontWeight: '500',
-        color: 'rgb(var(--color-foreground))',
+        color: 'var(--tw-prose-headings)',
         margin: 0,
       },
       h6: {
-        color: 'rgb(var(--color-foreground))',
+        color: 'var(--tw-prose-headings)',
         margin: 0,
       },
       'h1 small, h2 small, h3 small, h4 small, h5 small, h6 small': {