@keboola/tailwind-config 0.3.0 → 0.4.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/colors.ts

@@ -66,6 +66,9 @@ export default {
   // Focus ring (brand blue).
   ring: 'rgb(var(--color-ring) / <alpha-value>)',
 
+  // Focus-ring offset gap (the surface color the ring is inset against).
+  'ring-offset': 'rgb(var(--color-ring-offset) / <alpha-value>)',
+
   // Categorical chart palette (brand-derived).
   chart: {
     1: 'rgb(var(--color-chart-1) / <alpha-value>)',

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,
@@ -178,3 +195,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.0",
+  "version": "0.4.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': {