@keboola/tailwind-config 0.5.0 → 0.7.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

@@ -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,13 @@ const baseConfig = {
       },
       typography: typography,
       colors,
+      // 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 +216,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 +238,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.5.0",
+  "version": "0.7.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",