@keboola/tailwind-config 0.3.1 → 0.5.0

package/README.md

@@ -32,6 +32,39 @@ export default {
 };
 ```
 
+### Class prefix (`tw-`)
+
+The default config prefixes every utility with `tw-` (`tw-flex`, `tw-bg-background`, …). `@keboola/design` components ship with those `tw-`-prefixed class names baked into their compiled JS, and those classes only render if a stylesheet the app loads actually **defines** them. How you load that stylesheet decides whether you can drop the prefix:
+
+1. **Build-from-source** (the monorepo / `apps/boilerplate` pattern) — the app imports the source stylesheet `@keboola/design/styles` and runs its **own** Tailwind `@tailwind utilities` pass over design's `dist/` plus its own markup. That pass emits the components' classes _using this config's prefix_, so it only produces `tw-*` when the prefix is `tw-`. **If you flip this setup to `prefix: ''`, design components render UNSTYLED** — your build emits `flex`, never `tw-flex`, so the `tw-flex` baked into the components matches nothing. **Keep `tw-` for build-from-source setups.**
+
+2. **Precompiled CSS** — the app imports `@keboola/design/styles/compiled` (the shipped `dist/styles.css`, which already contains every `tw-*` utility the components use, prebuilt). Design components are then styled by that stylesheet regardless of your app's own Tailwind prefix, so `createKeboolaConfig({ prefix: '' })` is safe **for your own markup**: `tw-flex` (design's) and `flex` (yours) live in the same cascade without colliding.
+
+Prefix-less recipe (consume design precompiled, author your own utilities unprefixed):
+
+```css
+@import '@keboola/design/styles/compiled'; /* design components, pre-styled with tw-* */
+@tailwind base;
+@tailwind components;
+@tailwind utilities; /* your own unprefixed utilities */
+```
+
+**Bottom line: prefix-less is safe only when you consume design via `/styles/compiled`, not when you build design's utilities from source.**
+
+Opt out of the prefix (or set a custom one) with the `createKeboolaConfig` factory:
+
+```js
+import { createKeboolaConfig } from '@keboola/tailwind-config';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  ...createKeboolaConfig({ prefix: '' }), // unprefixed: `flex`, not `tw-flex`
+  content: ['./src/**/*.{ts,tsx,mdx}'],
+};
+```
+
+Pass any string to `prefix` for a custom prefix (e.g. `createKeboolaConfig({ prefix: 'kbc-' })`). The default export is `createKeboolaConfig()` (i.e. `prefix: 'tw-'`), so existing `import keboolaConfig from '@keboola/tailwind-config'` consumers are unaffected.
+
 ### Subpath imports
 
 If you only need the raw token data:

package/index.js

@@ -7,9 +7,26 @@ import containerQueriesPlugin from '@tailwindcss/container-queries';
 import { typography } from './typography';
 import { scrollFadePlugin } from './scrollFade';
 
+/**
+ * Build the Keboola Tailwind config, optionally overriding the class prefix.
+ *
+ * `@keboola/design` and the in-monorepo apps are built with the `tw-` prefix
+ * (the default), so the design system's compiled CSS assumes it. External
+ * consumers that don't extend design's stylesheet — and want unprefixed
+ * utilities (`flex`, not `tw-flex`) — can opt out with `createKeboolaConfig({ prefix: '' })`.
+ *
+ * @param {{ prefix?: string }} [options]
+ * @returns {import('tailwindcss').Config}
+ */
+export function createKeboolaConfig({ prefix = 'tw-' } = {}) {
+  return {
+    ...baseConfig,
+    prefix,
+  };
+}
+
 /** @type {import('tailwindcss').Config} */
-export default {
-  prefix: 'tw-',
+const baseConfig = {
   content: ['./src/**/*.{js,jsx,ts,tsx,mdx}', '../../packages/design/src/**/*.{ts,tsx}'],
   corePlugins: {
     preflight: false,
@@ -109,6 +126,11 @@ export default {
       },
       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',
@@ -117,16 +139,61 @@ export default {
         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',
@@ -178,3 +245,6 @@ export default {
     scrollFadePlugin,
   ],
 };
+
+/** @type {import('tailwindcss').Config} */
+export default createKeboolaConfig();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/tailwind-config",
-  "version": "0.3.1",
+  "version": "0.5.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",

package/typography.ts

@@ -32,6 +32,7 @@ export const typography = {
         fontSize: '32px',
         lineHeight: '40px',
         fontWeight: '500',
+        color: 'rgb(var(--color-foreground))',
         marginTop: 0,
         marginBottom: '10px',
       },
@@ -42,7 +43,7 @@ export const typography = {
         fontSize: '24px',
         lineHeight: '32px',
         fontWeight: '500',
-        color: colors.neutral[900],
+        color: 'rgb(var(--color-foreground))',
         marginTop: 0,
         marginBottom: '10px',
       },
@@ -53,21 +54,25 @@ export const typography = {
         fontSize: '16px',
         lineHeight: '24px',
         fontWeight: '500',
-        color: colors.neutral[900],
+        color: 'rgb(var(--color-foreground))',
         margin: 0,
       },
       h4: {
         fontSize: '14px',
         lineHeight: '20px',
         fontWeight: '500',
-        color: colors.neutral[900],
+        color: 'rgb(var(--color-foreground))',
         margin: 0,
       },
       h5: {
         fontSize: '12px',
         lineHeight: '20px',
         fontWeight: '500',
-        color: colors.neutral[900],
+        color: 'rgb(var(--color-foreground))',
+        margin: 0,
+      },
+      h6: {
+        color: 'rgb(var(--color-foreground))',
         margin: 0,
       },
       'h1 small, h2 small, h3 small, h4 small, h5 small, h6 small': {