@keboola/tailwind-config 1.0.0 → 1.1.0

package/colors.ts

@@ -36,7 +36,7 @@ export default {
   },
 
   // 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`.
+  // The `<alpha-value>` placeholder lets Tailwind apply opacity modifiers like `tw:bg-muted/50`.
   background: 'rgb(var(--color-background) / <alpha-value>)',
   foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
 
@@ -59,8 +59,12 @@ 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.
   input: {
     DEFAULT: 'rgb(var(--color-input) / <alpha-value>)',
+    background: 'rgb(var(--color-input-background) / <alpha-value>)',
   },
 
   // Focus ring (brand blue).

package/index.js

@@ -33,17 +33,16 @@ const config = {
       },
       animation: {
         fade: 'fadeIn 100ms 100ms ease-in-out',
-        collapseDown: 'collapseDown 300ms both',
         'dot-pulse-1': 'dot-pulse 1.5s infinite',
         '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-down 0.2s ease-out',
-        'collapsible-up': 'collapsible-up 0.2s ease-out',
+        // `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`.
         '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',
-        'caret-blink': 'caret-blink 1.25s ease-out infinite',
       },
       keyframes: {
         // Animate the `translate` property, NOT `transform`. In v4 the `-translate-x-*`
@@ -57,11 +56,6 @@ const config = {
             translate: '100% 0',
           },
         },
-        collapseDown: {
-          from: { overflow: 'hidden' },
-          '99%': { overflow: 'hidden' },
-          to: { overflow: 'visible' },
-        },
         fadeIn: {
           from: { opacity: 0 },
           to: { opacity: 1 },
@@ -84,14 +78,6 @@ const config = {
             width: '0%',
           },
         },
-        'collapsible-down': {
-          from: { height: '0', overflow: 'hidden' },
-          to: { height: 'var(--radix-collapsible-content-height)', overflow: 'visible' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)', overflow: 'visible' },
-          to: { height: '0', overflow: 'hidden' },
-        },
         'marching-ants': {
           to: { strokeDashoffset: '-12' },
         },
@@ -104,14 +90,10 @@ const config = {
           from: { width: '0%' },
           to: { width: '100%' },
         },
-        'caret-blink': {
-          '0%, 70%, 100%': { opacity: '1' },
-          '20%, 50%': { opacity: '0' },
-        },
       },
       backgroundImage: {
         'loader-gradient': 'radial-gradient(circle closest-side,#000 90%,#0000)',
-        // Brand gradient — `tw-bg-brand`. Set via `theme.gradient.brand`; the
+        // 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`.
         brand:
@@ -125,22 +107,21 @@ const config = {
         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/md/lg` are unchanged until a brand sets
-        // `theme.shadows`. `tw-shadow-lift` is a stronger raised shadow.
+        // 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.
         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))',
         lift: 'var(--shadow-lift, 0 10px 30px -12px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.06))',
-        // Raised-surface elevation for Card / Search — dark-aware via the
-        // `--shadow-raised` token (flips to a black shadow under `[data-theme=dark]`).
-        raised: 'var(--shadow-raised, 0 2px 6px 0 rgb(100 135 153 / 0.13))',
       },
       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/md/lg` are unchanged until a
-        // brand (or the design stylesheet's `:root`) sets the var. Mirrors 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.
         sm: 'var(--radius-sm, 0.125rem)',
         md: 'var(--radius-md, 0.375rem)',
@@ -153,7 +134,7 @@ const config = {
         brand: 'var(--motion-easing, cubic-bezier(0.2, 0.7, 0.2, 1))',
       },
       spacing: {
-        // Brand-driven density: `tw-p-inset`, `tw-gap-gutter`, etc.
+        // Brand-driven density: `tw:p-inset`, `tw:gap-gutter`, etc.
         gutter: 'var(--space-gutter, 1.5rem)',
         inset: 'var(--space-inset, 1.5rem)',
       },
@@ -200,7 +181,7 @@ const config = {
       },
     },
     fontFamily: {
-      // Display face for headings — `tw-font-display`. Set via
+      // 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
@@ -233,7 +214,7 @@ const config = {
         'Courier New',
         'monospace',
       ],
-      // Body face — `tw-font-sans`. A brand's `typography.fontFamily` is emitted
+      // 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/tailwind-config",
-  "version": "1.0.0",
+  "version": "1.1.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/scrollFade.ts

@@ -27,8 +27,14 @@ export const scrollFadePlugin = plugin(function ({ addUtilities, addBase }) {
     },
   });
 
+  // The leading edge takes its own size, defaulting to the shared one. A region that pins a
+  // `position: sticky` header at its top sets it shallow: the mask dims whatever it covers, header
+  // included, and only a mask actually dissolves content — a background-coloured overlay just tints
+  // it, which is invisible over a card barely lighter than the page.
+  const START_SIZE = 'var(--tw-scroll-fade-size-start, var(--tw-scroll-fade-size))';
+
   const scrollFadeMask = (direction: 'bottom' | 'right') =>
-    `linear-gradient(to ${direction}, rgb(0 0 0 / var(--tw-scroll-fade-start)) 0, #000 var(--tw-scroll-fade-size), #000 calc(100% - var(--tw-scroll-fade-size)), rgb(0 0 0 / var(--tw-scroll-fade-end)) 100%)`;
+    `linear-gradient(to ${direction}, rgb(0 0 0 / var(--tw-scroll-fade-start)) 0, #000 ${START_SIZE}, #000 calc(100% - var(--tw-scroll-fade-size)), rgb(0 0 0 / var(--tw-scroll-fade-end)) 100%)`;
 
   const scrollFade = (direction: 'bottom' | 'right', axis: 'x' | 'y') => ({
     '--tw-scroll-fade-size': '1.5rem',
@@ -36,7 +42,7 @@ export const scrollFadePlugin = plugin(function ({ addUtilities, addBase }) {
     maskImage: scrollFadeMask(direction),
     animation: 'tw-scroll-fade-reveal-start linear both, tw-scroll-fade-reveal-end linear both',
     animationTimeline: `scroll(self ${axis}), scroll(self ${axis})`,
-    animationRange: '0 var(--tw-scroll-fade-size), calc(100% - var(--tw-scroll-fade-size)) 100%',
+    animationRange: `0 ${START_SIZE}, calc(100% - var(--tw-scroll-fade-size)) 100%`,
     // Browsers without scroll-driven animations show a static fade on both edges.
     '@supports not (animation-timeline: scroll())': {
       '--tw-scroll-fade-start': '0',