@podoba/tailwind 0.0.1

package/README.md

@@ -0,0 +1,21 @@
+# @podoba/tailwind
+
+The shared Tailwind preset. Binds `@podoba/tokens` CSS custom properties to Tailwind's
+`theme.extend`, so `@podoba/react` primitives (and your app code) can use utilities like
+`bg-surface`, `text-fg-muted`, `text-heading2`, `rounded-panel`.
+
+```ts
+// tailwind.config.ts in a consuming app
+import podobaPreset from "@podoba/tailwind";
+
+export default {
+	presets: [podobaPreset],
+	content: ["./src/**/*.{ts,tsx}"], // you own your content globs
+};
+```
+
+Also `import "@podoba/tokens/variables.css"` once at your app root so the `var(--…)`
+the preset points at actually resolve.
+
+The preset is intentionally **content-less** — a preset that hardcodes `content` globs
+(as `@app/ui` did, pointing at `../../apps/web`) breaks every other consumer.

package/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@podoba/tailwind",
+	"version": "0.0.1",
+	"type": "module",
+	"description": "podoba Tailwind preset — binds @podoba/tokens CSS custom properties to theme.extend.",
+	"main": "./src/index.ts",
+	"types": "./src/index.ts",
+	"exports": {
+		".": "./src/index.ts"
+	},
+	"files": ["src"],
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"typecheck": "tsc --build"
+	},
+	"dependencies": {
+		"@tailwindcss/typography": "catalog:ui"
+	},
+	"peerDependencies": {
+		"tailwindcss": "^3.4.0"
+	},
+	"devDependencies": {
+		"tailwindcss": "catalog:ui",
+		"typescript": "catalog:",
+		"@types/bun": "catalog:"
+	}
+}

package/src/index.ts

@@ -0,0 +1,131 @@
+// @podoba/tailwind — shared Tailwind preset for the design system.
+//
+// Binds @podoba/tokens' CSS custom properties (see @podoba/tokens/variables.css)
+// to Tailwind's theme, so primitives reference `bg-surface` / `text-fg-muted` /
+// `text-heading2` / `rounded-panel` and resolve to `var(--…)`.
+//
+// Ported verbatim from @app/ui/tailwind.config.ts `theme.extend` + plugins.
+// Deliberately CONTENT-LESS: a shared preset must not hardcode `content` globs
+// (the source pointed at ../../apps/web). Each consuming app owns its `content`.
+//
+//   import podobaPreset from "@podoba/tailwind";
+//   export default { presets: [podobaPreset], content: ["./src/**/*.{ts,tsx}"] };
+//
+// NOTE: custom scale keys here (fontSize `micro`…`display`/`heading1-5`, spacing
+// `nav-x`, borderRadius `panel`) are mirrored in @podoba/react's uic tailwind-merge
+// config so conflicting utilities dedupe correctly. Keep the two in sync.
+
+import typography from "@tailwindcss/typography";
+import type { Config } from "tailwindcss";
+
+export const podobaPreset: Omit<Config, "content"> = {
+	theme: {
+		extend: {
+			colors: {
+				brand: {
+					DEFAULT: "var(--color-brand-primary)",
+					primary: "var(--color-brand-primary)",
+					secondary: "var(--color-brand-secondary)",
+					green: "var(--color-brand-green)",
+				},
+				surface: {
+					DEFAULT: "var(--color-surface)",
+					muted: "var(--color-surface-muted)",
+					card: "var(--color-surface-card)",
+					inverted: "var(--color-surface-inverted)",
+					placeholder: "var(--color-surface-placeholder)",
+				},
+				fg: {
+					DEFAULT: "var(--color-fg)",
+					muted: "var(--color-fg-muted)",
+					subtle: "var(--color-fg-subtle)",
+					inverted: "var(--color-fg-inverted)",
+				},
+				accent: {
+					strong: "var(--color-accent-strong)",
+					yellow: "var(--color-accent-yellow)",
+					mint: "var(--color-accent-mint)",
+					"green-light": "var(--color-accent-green-light)",
+					pink: "var(--color-accent-pink)",
+				},
+				neutral: {
+					600: "var(--color-neutral-600)",
+				},
+				border: {
+					DEFAULT: "var(--color-border)",
+				},
+				danger: {
+					DEFAULT: "var(--color-danger)",
+					fg: "var(--color-danger-fg)",
+				},
+				success: {
+					DEFAULT: "var(--color-success)",
+					fg: "var(--color-success-fg)",
+				},
+				ring: {
+					DEFAULT: "var(--color-ring)",
+				},
+			},
+			borderRadius: {
+				sm: "var(--radius-sm)",
+				md: "var(--radius-md)",
+				lg: "var(--radius-lg)",
+				xl: "var(--radius-xl)",
+				"2xl": "var(--radius-2xl)",
+				panel: "var(--radius-panel)",
+			},
+			spacing: {
+				xs: "var(--space-xs)",
+				sm: "var(--space-sm)",
+				md: "var(--space-md)",
+				lg: "var(--space-lg)",
+				xl: "var(--space-xl)",
+				"nav-x": "var(--space-nav-x)",
+			},
+			fontFamily: {
+				sans: "var(--font-sans)",
+				mono: "var(--font-mono)",
+			},
+			fontSize: {
+				micro: "var(--font-size-micro)",
+				caption: "var(--font-size-caption)",
+				label: "var(--font-size-label)",
+				compact: "var(--font-size-compact)",
+				callout: "var(--font-size-callout)",
+				body: "var(--font-size-body)",
+				subtitle: "var(--font-size-subtitle)",
+				title: "var(--font-size-title)",
+				headline: "var(--font-size-headline)",
+				display: "var(--font-size-display)",
+				heading1: ["var(--font-size-heading1)", { lineHeight: "var(--line-height-heading1)" }],
+				heading2: ["var(--font-size-heading2)", { lineHeight: "var(--line-height-heading2)" }],
+				heading3: ["var(--font-size-heading3)", { lineHeight: "var(--line-height-heading3)" }],
+				heading4: ["var(--font-size-heading4)", { lineHeight: "var(--line-height-heading4)" }],
+				heading5: ["var(--font-size-heading5)", { lineHeight: "var(--line-height-heading5)" }],
+			},
+			letterSpacing: {
+				tight: "var(--tracking-tight)",
+				normal: "var(--tracking-normal)",
+				wide: "var(--tracking-wide)",
+				wider: "var(--tracking-wider)",
+			},
+			keyframes: {
+				"expand-cta": {
+					from: { opacity: "0", transform: "translateY(-2px)" },
+					to: { opacity: "1", transform: "translateY(0)" },
+				},
+				"lightbox-in": {
+					from: { opacity: "0", transform: "translateX(24%)" },
+					to: { opacity: "1", transform: "translateX(0)" },
+				},
+			},
+			animation: {
+				"expand-cta": "expand-cta 220ms cubic-bezier(0.16, 1, 0.3, 1)",
+				"lightbox-in": "lightbox-in 0.3s ease-out",
+			},
+		},
+	},
+	plugins: [typography],
+};
+
+export default podobaPreset;