@keboola/tailwind-config 0.6.0 → 0.8.0

package/index.js

@@ -152,6 +152,14 @@ const baseConfig = {
       },
       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
+        // `shadow-*` / `space-*` pattern above.
+        sm: 'var(--radius-sm, 0.125rem)',
+        md: 'var(--radius-md, 0.375rem)',
+        lg: 'var(--radius-lg, 0.5rem)',
       },
       transitionDuration: {
         brand: 'var(--motion-duration, 200ms)',
@@ -166,6 +174,45 @@ const baseConfig = {
       },
       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.
+      fontSize: {
+        display: [
+          'var(--type-display-size, 1.875rem)',
+          {
+            lineHeight: 'var(--type-display-leading, 1.2)',
+            fontWeight: 'var(--type-display-weight, 600)',
+            letterSpacing: 'var(--type-display-tracking, -0.02em)',
+          },
+        ],
+        heading: [
+          'var(--type-heading-size, 1.25rem)',
+          {
+            lineHeight: 'var(--type-heading-leading, 1.4)',
+            fontWeight: 'var(--type-heading-weight, 600)',
+            letterSpacing: 'var(--type-heading-tracking, -0.01em)',
+          },
+        ],
+        body: [
+          'var(--type-body-size, 0.875rem)',
+          {
+            lineHeight: 'var(--type-body-leading, 1.5)',
+            fontWeight: 'var(--type-body-weight, 400)',
+            letterSpacing: 'var(--type-body-tracking, normal)',
+          },
+        ],
+      },
+      // 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.
+      letterSpacing: {
+        chrome: 'var(--letter-spacing-chrome, 1px)',
+      },
     },
     fontFamily: {
       // Display face for headings — `tw-font-display`. Set via
@@ -201,8 +248,13 @@ const baseConfig = {
         '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.
       sans: [
-        'Inter',
+        'var(--font-sans, Inter)',
         'system-ui',
         '-apple-system',
         'Segoe UI',
@@ -218,11 +270,14 @@ const baseConfig = {
         '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.
     fontWeight: {
-      normal: '400',
-      medium: '500',
-      semibold: '600',
-      bold: '700',
+      normal: 'var(--font-weight-normal, 400)',
+      medium: 'var(--font-weight-medium, 500)',
+      semibold: 'var(--font-weight-semibold, 600)',
+      bold: 'var(--font-weight-bold, 700)',
     },
   },
   plugins: [

package/package.json

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