@keboola/tailwind-config 0.4.0 → 0.6.0

package/colors.ts

@@ -96,6 +96,10 @@ 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: 'rgb(var(--color-skeleton) / <alpha-value>)',
+
   // Sidebar semantic colors
   sidebar: {
     DEFAULT: 'rgb(var(--color-sidebar) / <alpha-value>)',

package/index.js

@@ -126,6 +126,11 @@ const baseConfig = {
       },
       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`.
+        brand:
+          'var(--gradient-brand, linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-accent, var(--color-primary)))))',
       },
       ringWidth: {
         3: '3px',
@@ -134,16 +139,61 @@ const baseConfig = {
         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/md/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',
       },
+      transitionDuration: {
+        brand: 'var(--motion-duration, 200ms)',
+      },
+      transitionTimingFunction: {
+        brand: 'var(--motion-easing, cubic-bezier(0.2, 0.7, 0.2, 1))',
+      },
+      spacing: {
+        // Brand-driven density: `tw-p-inset`, `tw-gap-gutter`, etc.
+        gutter: 'var(--space-gutter, 1.5rem)',
+        inset: 'var(--space-inset, 1.5rem)',
+      },
       typography: typography,
       colors,
     },
     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.
+      display: [
+        'var(--font-display, var(--font-sans, Inter))',
+        'system-ui',
+        '-apple-system',
+        'Segoe UI',
+        'Roboto',
+        'Helvetica Neue',
+        'Arial',
+        'Noto Sans',
+        'Liberation Sans',
+        'sans-serif',
+        // Match the canonical sans stack so emoji render consistently.
+        'Apple Color Emoji',
+        'Segoe UI Emoji',
+        'Segoe UI Symbol',
+        'Noto Color Emoji',
+      ],
       mono: [
-        'SFMono-Regular',
+        'var(--font-mono, SFMono-Regular)',
         'Menlo',
         'Monaco',
         'Consolas',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/tailwind-config",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Shared Tailwind CSS v3 config for the Keboola UI platform — semantic color palette, plugins, and the `tw-` class prefix.",
   "license": "MIT",
   "type": "module",