@pantheon-systems/pds-toolkit-react 2.0.0-alpha.6 → 2.0.0-alpha.8

package/tailwind/TESTING.md

@@ -0,0 +1,457 @@
+# Tailwind Configuration — Testing Plan
+
+Test the v3 preset and v4 theme against real Next.js projects before shipping.
+Create one project per Tailwind version.
+
+---
+
+## Setup: Install PDS Locally
+
+Before creating test projects, pack the local PDS package into a tarball.
+This is more reliable than `npm link` and tests exactly what would be published.
+
+```bash
+# In the pds-toolkit-react repo root — run build:lib first so dist/ exists
+npm run build:lib
+
+# Pack into a tarball (creates e.g. pantheon-systems-pds-toolkit-react-2.0.0-alpha.7.tgz)
+npm pack
+```
+
+You'll reference this tarball when installing into each test project.
+
+---
+
+## Project A — Tailwind v3
+
+### 1. Create the project
+
+```bash
+npx create-next-app@latest pds-tw-test-v3 \
+  --typescript --no-tailwind --no-eslint --no-src-dir --app
+cd pds-tw-test-v3
+npm install tailwindcss@3 postcss autoprefixer
+npx tailwindcss init -p
+```
+
+### 2. Install PDS locally
+
+```bash
+npm install /path/to/pds-toolkit-react/pantheon-systems-pds-toolkit-react-*.tgz
+```
+
+### 3. Configure Tailwind
+
+Replace `tailwind.config.js` contents:
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	presets: [require('@pantheon-systems/pds-toolkit-react/tailwind/v3/preset')],
+	content: ['./app/**/*.{js,ts,jsx,tsx}'],
+};
+```
+
+### 4. Configure global CSS
+
+Add to the top of `app/layout.tsx` (before `./globals.css`):
+
+```tsx
+import '@pantheon-systems/pds-toolkit-react/css/pds-core.css';
+import './globals.css';
+```
+
+Replace `app/globals.css` contents:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+> **Note:** Import pds-core.css as a JS import in layout.tsx rather than a CSS
+> `@import` in globals.css. Next.js module resolution handles package `exports`
+> maps correctly for JS imports; CSS `@import` resolution is less reliable.
+> The path is `css/pds-core.css` (not `dist/css/`) — the package exports map
+> handles the `dist/` prefix automatically.
+
+### 5. Run the project
+
+```bash
+npm run dev
+```
+
+---
+
+## Project B — Tailwind v4
+
+### 1. Create the project
+
+```bash
+npx create-next-app@latest pds-tw-test-v4 \
+  --typescript --no-tailwind --no-eslint --no-src-dir --app
+cd pds-tw-test-v4
+npm install tailwindcss@latest
+```
+
+### 2. Install PDS locally
+
+```bash
+npm install /path/to/pds-toolkit-react/pantheon-systems-pds-toolkit-react-*.tgz
+```
+
+### 3. Configure global CSS
+
+Add to the top of `app/layout.tsx` (before `./globals.css`):
+
+```tsx
+import '@pantheon-systems/pds-toolkit-react/css/pds-core.css';
+import './globals.css';
+```
+
+Replace `app/globals.css` contents:
+
+```css
+@import 'tailwindcss/theme' layer(theme);
+@import 'tailwindcss/utilities' layer(utilities);
+
+@import '@pantheon-systems/pds-toolkit-react/tailwind/v4/theme.css';
+```
+
+No `tailwind.config.js` needed.
+
+### 4. Run the project
+
+```bash
+npm run dev
+```
+
+---
+
+## Test Page
+
+Replace `app/page.tsx` in both projects with the following. It exercises every
+token category and gives you a single visual reference to review.
+
+```tsx
+export default function Page() {
+	return (
+		<div className='p-xl font-sans'>
+			<h1 className='text-2xl font-semibold leading-s tracking-s mb-xl text-text-default'>
+				PDS Tailwind Test Page
+			</h1>
+
+			{/* ── Colors ──────────────────────────────────────────────── */}
+			<section className='mb-2xl'>
+				<h2 className='text-l font-semibold mb-m text-text-default'>Colors</h2>
+
+				<div className='flex gap-m flex-wrap mb-m'>
+					<div className='p-m rounded-container bg-bg-default border border-border-default'>
+						<span className='text-text-default text-s'>bg-default</span>
+					</div>
+					<div className='p-m rounded-container bg-bg-secondary border border-border-default'>
+						<span className='text-text-default text-s'>bg-secondary</span>
+					</div>
+					<div className='p-m rounded-container bg-bg-reverse'>
+						<span className='text-text-reverse text-s'>bg-reverse</span>
+					</div>
+				</div>
+
+				<div className='flex gap-m flex-wrap mb-m'>
+					<div className='p-m rounded-container bg-status-info-background'>
+						<span className='text-status-info-foreground text-s'>info</span>
+					</div>
+					<div className='p-m rounded-container bg-status-success-background'>
+						<span className='text-status-success-foreground text-s'>
+							success
+						</span>
+					</div>
+					<div className='p-m rounded-container bg-status-warning-background'>
+						<span className='text-status-warning-foreground text-s'>
+							warning
+						</span>
+					</div>
+					<div className='p-m rounded-container bg-status-critical-background'>
+						<span className='text-status-critical-foreground text-s'>
+							critical
+						</span>
+					</div>
+					<div className='p-m rounded-container bg-status-discovery-background'>
+						<span className='text-status-discovery-foreground text-s'>
+							discovery
+						</span>
+					</div>
+				</div>
+
+				<div className='flex gap-m flex-wrap'>
+					<div className='p-m rounded-container bg-brand-primary'>
+						<span className='text-white text-s'>brand-primary</span>
+					</div>
+					<div className='p-m rounded-container bg-brand-primary-200'>
+						<span className='text-text-default text-s'>brand-primary-200</span>
+					</div>
+					<div className='p-m rounded-container bg-brand-secondary'>
+						<span className='text-text-default text-s'>brand-secondary</span>
+					</div>
+					<div className='p-m rounded-container bg-brand-accent'>
+						<span className='text-white text-s'>brand-accent</span>
+					</div>
+				</div>
+			</section>
+
+			{/* ── Interactive / Links ──────────────────────────────────── */}
+			<section className='mb-2xl'>
+				<h2 className='text-l font-semibold mb-m text-text-default'>
+					Interactive
+				</h2>
+				<a
+					href='#'
+					className='text-interactive-link hover:text-interactive-link-hover text-m'
+				>
+					Interactive link
+				</a>
+			</section>
+
+			{/* ── Spacing ─────────────────────────────────────────────── */}
+			<section className='mb-2xl'>
+				<h2 className='text-l font-semibold mb-m text-text-default'>Spacing</h2>
+				<div className='flex gap-xs items-end'>
+					{[
+						'6xs',
+						'5xs',
+						'4xs',
+						'3xs',
+						'2xs',
+						'xs',
+						's',
+						'm',
+						'l',
+						'xl',
+						'2xl',
+					].map((size) => (
+						<div
+							key={size}
+							className={`bg-brand-primary-200 w-m`}
+							style={{ height: `var(--pds-spacing-${size})` }}
+						/>
+					))}
+				</div>
+				<p className='text-s text-text-secondary mt-s'>
+					Spacing scale 6xs → 2xl (heights driven by CSS vars, gap uses Tailwind
+					spacing)
+				</p>
+			</section>
+
+			{/* ── Typography ──────────────────────────────────────────── */}
+			<section className='mb-2xl'>
+				<h2 className='text-l font-semibold mb-m text-text-default'>
+					Typography
+				</h2>
+				<p className='font-sans text-xs mb-xs text-text-default'>
+					font-sans / text-xs — Inter
+				</p>
+				<p className='font-sans text-m mb-xs text-text-default'>
+					font-sans / text-m
+				</p>
+				<p className='font-sans text-xl font-semibold mb-xs text-text-default'>
+					font-sans / text-xl / font-semibold
+				</p>
+				<p className='font-compact text-xl mb-xs text-text-default'>
+					font-compact / text-xl — Inter Tight
+				</p>
+				<p className='font-serif text-xl mb-xs text-text-default'>
+					font-serif / text-xl — IBM Plex Serif
+				</p>
+				<p className='font-mono text-m text-text-default'>
+					font-mono / text-m — Source Code Pro
+				</p>
+			</section>
+
+			{/* ── Border Radius ───────────────────────────────────────── */}
+			<section className='mb-2xl'>
+				<h2 className='text-l font-semibold mb-m text-text-default'>
+					Border Radius
+				</h2>
+				<div className='flex gap-m flex-wrap'>
+					{[
+						'rounded',
+						'rounded-button',
+						'rounded-input',
+						'rounded-container',
+						'rounded-bar',
+						'rounded-full',
+					].map((cls) => (
+						<div
+							key={cls}
+							className={`${cls} bg-brand-primary-200 p-m text-s text-text-default`}
+						>
+							{cls}
+						</div>
+					))}
+				</div>
+			</section>
+
+			{/* ── Z-index ─────────────────────────────────────────────── */}
+			<section className='mb-2xl'>
+				<h2 className='text-l font-semibold mb-m text-text-default'>Z-index</h2>
+				<div className='relative h-xl'>
+					<div className='absolute z-navigation bg-brand-primary-200 p-xs rounded text-xs text-text-default'>
+						z-navigation (100)
+					</div>
+				</div>
+				<p className='text-s text-text-secondary mt-xs'>
+					Inspect computed style to confirm z-index values resolve correctly.
+				</p>
+			</section>
+
+			{/* ── Max Width ───────────────────────────────────────────── */}
+			<section className='mb-2xl'>
+				<h2 className='text-l font-semibold mb-m text-text-default'>
+					Max Width
+				</h2>
+				<div className='max-w-narrow bg-bg-secondary p-m rounded-container mb-s border border-border-default'>
+					<span className='text-s text-text-default'>
+						max-w-narrow (1024px)
+					</span>
+				</div>
+				<div className='max-w-standard bg-bg-secondary p-m rounded-container border border-border-default'>
+					<span className='text-s text-text-default'>
+						max-w-standard (1200px)
+					</span>
+				</div>
+			</section>
+
+			{/* ── Dark Mode ───────────────────────────────────────────── */}
+			<section className='mb-2xl'>
+				<h2 className='text-l font-semibold mb-m text-text-default'>
+					Dark Mode
+				</h2>
+				<p className='text-s text-text-secondary mb-m'>
+					The box below manually applies the PDS dark theme attribute. Colors
+					inside should switch — no Tailwind dark: prefix needed.
+				</p>
+				<div data-theme='dark' className='p-xl rounded-container'>
+					<div className='bg-bg-default p-m rounded-container'>
+						<p className='text-text-default text-m font-semibold'>
+							Dark bg-default
+						</p>
+						<p className='text-text-secondary text-s'>Dark text-secondary</p>
+						<div className='mt-m p-m rounded-container bg-status-info-background'>
+							<span className='text-status-info-foreground text-s'>
+								Dark status-info
+							</span>
+						</div>
+					</div>
+				</div>
+			</section>
+		</div>
+	);
+}
+```
+
+---
+
+## Checklist
+
+Work through both projects and check each item. Open browser DevTools to
+inspect computed styles when you need to verify a value resolves correctly.
+
+### Preflight
+
+- [ ] Browser default margins on `<h1>`, `<p>`, `<ul>` are **not** reset (preflight is disabled — headings should still have default browser size/weight until you explicitly set them)
+- [ ] PDS base styles from `pds-core.css` are applied (e.g. correct font on `body`)
+- [ ] Borders only appear on elements that explicitly include `border-solid` — no global border bleed (preflight normally sets `border-style: solid` globally; without it you must add `border-solid` per element)
+
+### Colors — backgrounds and foregrounds
+
+- [ ] `bg-bg-default` renders white (light mode)
+- [ ] `bg-bg-secondary` renders light gray
+- [ ] `bg-bg-reverse` renders dark
+- [ ] `text-fg-reverse` is visible on `bg-bg-reverse`
+- [ ] `text-fg-default` and `text-fg-secondary` are both visible on light surfaces
+
+### Colors — status
+
+- [ ] All five status backgrounds render distinct colors (info, success, warning, critical, discovery)
+- [ ] Status foreground text is readable on its status background
+- [ ] Status border color is visible when `border border-solid border-status-info-border` is applied
+- [ ] Status dot colors render as small circles
+
+### Colors — data visualization
+
+- [ ] `bg-datavis-1` through `bg-datavis-5` each render a distinct color
+
+### Dark mode
+
+- [ ] Inside `data-theme="dark"`, `bg-bg-default` renders dark (not white)
+- [ ] `text-fg-default` is light-colored inside the dark section
+- [ ] Status colors shift appropriately in dark mode
+- [ ] No Tailwind `dark:` prefix was needed — color changes happen via CSS vars
+
+### Interactive
+
+- [ ] `text-interactive-link` renders the PDS link color
+- [ ] `:hover` changes to `text-interactive-link-hover` (test in browser)
+
+### Spacing
+
+- [ ] `gap-m`, `p-xl`, `mb-2xl` all produce visible spacing
+- [ ] Inspect computed style on a `p-m` element — should show the rem value from `--pds-spacing-m`
+- [ ] `gap-xs` in the spacing row produces tighter gaps than `gap-m`
+
+### Typography
+
+- [ ] `text-xs` is noticeably smaller than `text-xl`
+- [ ] `font-semibold` is visually heavier than `font-normal`
+- [ ] PDS body font (Inter) is applied globally via `pds-core.css` — no Tailwind font-family utility needed
+
+### Border radius
+
+- [ ] `rounded` (DEFAULT) is slightly rounded
+- [ ] `rounded-input` is slightly more rounded than `rounded`
+- [ ] `rounded-container` is more rounded than `rounded-input`
+- [ ] `rounded-button` and `rounded-bar` are pill-shaped (both map to `--pds-border-radius-button` / `--pds-border-radius-bar`)
+
+### Z-index
+
+- [ ] Inspect computed `z-index` on `z-navigation` element — should be `100`
+- [ ] `z-modal` should compute to `900`
+
+### Max width
+
+- [ ] `max-w-narrow` constrains width at 1024px
+- [ ] `max-w-standard` is wider than `max-w-narrow`
+- [ ] `max-w-wide` is wider than `max-w-standard`
+- [ ] `max-w-x-wide` is wider than `max-w-wide`
+- [ ] All four blocks visually confirm the width difference on a wide viewport
+
+---
+
+## v4-Specific Checks
+
+- [ ] No `tailwind.config.js` exists in the project — v4 works without it
+- [ ] Removing the `@import 'tailwindcss/theme'` line breaks utilities (confirms the layer import is working)
+- [ ] Swap to `@import 'tailwindcss'` (the shorthand) — verify preflight fires and breaks PDS styles, then revert
+- [ ] Inspect `--color-bg-default` in DevTools `:root` — should be present as a CSS custom property
+
+## v3-Specific Checks
+
+- [ ] `tailwind.config.js` preset resolves without error on startup
+- [ ] Running `npx tailwindcss --content './app/**/*.tsx' --input ./app/globals.css` produces output CSS with PDS class names
+- [ ] `p-4` generates output and resolves to the same value as `p-m` (confirms numeric alias is working)
+- [ ] `p-7` generates no output (confirms unmapped in-between values are intentionally excluded)
+- [ ] Adding a truly unknown class (e.g. `p-99`) produces nothing in the output
+
+---
+
+## If Something Doesn't Work
+
+| Symptom                                    | Likely cause                                                                                                                    |
+| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
+| All colors render as empty / transparent   | `pds-core.css` not loaded before Tailwind, or CSS vars not resolving                                                            |
+| Preflight styles are active                | v4: Using `@import 'tailwindcss'` shorthand instead of individual layers                                                        |
+| Utility classes not generated              | v3: `content` array doesn't match file paths; v4: files outside auto-scan root                                                  |
+| Font doesn't change to Inter               | Google Fonts not loaded — pds-core.css includes the font import, confirm it is loading before Tailwind                          |
+| Dark mode section looks identical to light | `pds-core.css` dark mode vars may need `data-theme="dark"` on a parent element — check the PDS dark mode implementation         |
+| `rounded-button` same as `rounded`         | Expected — they share the same token value (`--pds-border-radius-button` = `--pds-border-radius-default`)                       |
+| Borders invisible despite `border` class   | Preflight is disabled — add `border-solid` alongside every `border` class. Without preflight, `border-style` defaults to `none` |

package/tailwind/v3/preset.cjs

@@ -0,0 +1,238 @@
+/**
+ * PDS Tailwind v3 Preset
+ *
+ * Maps Pantheon Design System tokens to Tailwind CSS v3 utilities.
+ * Use as a preset in tailwind.config.js — replaces Tailwind's default
+ * color, spacing, and typography scales with PDS values.
+ *
+ * Requirements:
+ * - pds-core.css must be loaded globally (provides --pds-* CSS variables)
+ * - Tailwind v3.x
+ *
+ * Usage:
+ *   // tailwind.config.js
+ *   module.exports = {
+ *     presets: [require('@pantheon-systems/pds-toolkit-react/tailwind/v3/preset')],
+ *     content: ['./src/**\/*.{js,ts,jsx,tsx}'],
+ *   };
+ */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	corePlugins: {
+		// Disable Tailwind's CSS reset — PDS provides its own base styles.
+		// Enabling preflight alongside PDS will cause style conflicts.
+		preflight: false,
+	},
+	theme: {
+		// ─── Colors ──────────────────────────────────────────────────────────────
+		// All values reference PDS CSS custom properties so dark mode and token
+		// updates are reflected automatically. Requires pds-core.css to be loaded.
+		//
+		// Note: opacity modifiers (e.g. bg-bg-default/50) are not supported with
+		// CSS variable color references.
+		colors: {
+			// Backgrounds — use as bg-bg-default, bg-bg-secondary, bg-bg-reverse
+			bg: {
+				default: 'var(--pds-color-bg-default)',
+				secondary: 'var(--pds-color-bg-default-secondary)',
+				reverse: 'var(--pds-color-bg-reverse)',
+			},
+			// General foregrounds (icons, decorative elements)
+			fg: {
+				default: 'var(--pds-color-fg-default)',
+				secondary: 'var(--pds-color-fg-default-secondary)',
+				reverse: 'var(--pds-color-fg-reverse)',
+			},
+			// Borders — use as border-border-default, border-border-input, etc.
+			border: {
+				default: 'var(--pds-color-border-default)',
+				input: 'var(--pds-color-border-input)',
+				separator: 'var(--pds-color-border-separator)',
+				brand: 'var(--pds-color-border-brand)',
+			},
+			// Interactive elements (links, focus rings)
+			interactive: {
+				focus: 'var(--pds-color-interactive-focus)',
+				'bg-hover': 'var(--pds-color-interactive-background-hover)',
+				'bg-active': 'var(--pds-color-interactive-background-active)',
+				link: 'var(--pds-color-interactive-link-default)',
+				'link-hover': 'var(--pds-color-interactive-link-hover)',
+				'link-active': 'var(--pds-color-interactive-link-active)',
+				'link-visited': 'var(--pds-color-interactive-link-visited)',
+				'reverse-focus': 'var(--pds-color-interactive-reverse-focus)',
+				'reverse-link': 'var(--pds-color-interactive-reverse-link-default)',
+				'reverse-link-hover': 'var(--pds-color-interactive-reverse-link-hover)',
+				'reverse-link-active':
+					'var(--pds-color-interactive-reverse-link-active)',
+				'reverse-link-visited':
+					'var(--pds-color-interactive-reverse-link-visited)',
+			},
+			// Status colors — background/foreground/border/dot per status type
+			status: {
+				info: {
+					background: 'var(--pds-color-status-info-background)',
+					foreground: 'var(--pds-color-status-info-foreground)',
+					border: 'var(--pds-color-status-info-border)',
+					dot: 'var(--pds-color-status-info-dot)',
+				},
+				success: {
+					background: 'var(--pds-color-status-success-background)',
+					foreground: 'var(--pds-color-status-success-foreground)',
+					border: 'var(--pds-color-status-success-border)',
+					dot: 'var(--pds-color-status-success-dot)',
+				},
+				warning: {
+					background: 'var(--pds-color-status-warning-background)',
+					foreground: 'var(--pds-color-status-warning-foreground)',
+					border: 'var(--pds-color-status-warning-border)',
+					dot: 'var(--pds-color-status-warning-dot)',
+				},
+				critical: {
+					background: 'var(--pds-color-status-critical-background)',
+					foreground: 'var(--pds-color-status-critical-foreground)',
+					border: 'var(--pds-color-status-critical-border)',
+					dot: 'var(--pds-color-status-critical-dot)',
+				},
+				discovery: {
+					background: 'var(--pds-color-status-discovery-background)',
+					foreground: 'var(--pds-color-status-discovery-foreground)',
+					border: 'var(--pds-color-status-discovery-border)',
+					dot: 'var(--pds-color-status-discovery-dot)',
+				},
+			},
+			// Overlay (e.g. modal backdrops)
+			overlay: 'var(--pds-color-overlay)',
+			// Data visualization palette
+			datavis: {
+				1: 'var(--pds-color-datavis-1)',
+				2: 'var(--pds-color-datavis-2)',
+				3: 'var(--pds-color-datavis-3)',
+				4: 'var(--pds-color-datavis-4)',
+				5: 'var(--pds-color-datavis-5)',
+			},
+		},
+
+		// ─── Spacing ─────────────────────────────────────────────────────────────
+		// Primary scale uses PDS named keys: p-xs, m-xl, gap-m, etc.
+		// Numeric aliases map common Tailwind values to the nearest PDS token so
+		// that p-4 / p-6 / etc. still work and stay in sync if tokens change.
+		spacing: {
+			0: '0px',
+			// PDS named scale
+			'5xs': 'var(--pds-spacing-5xs)',
+			'4xs': 'var(--pds-spacing-4xs)',
+			'3xs': 'var(--pds-spacing-3xs)',
+			'2xs': 'var(--pds-spacing-2xs)',
+			xs: 'var(--pds-spacing-xs)',
+			s: 'var(--pds-spacing-s)',
+			m: 'var(--pds-spacing-m)',
+			l: 'var(--pds-spacing-l)',
+			xl: 'var(--pds-spacing-xl)',
+			'2xl': 'var(--pds-spacing-2xl)',
+			'3xl': 'var(--pds-spacing-3xl)',
+			'4xl': 'var(--pds-spacing-4xl)',
+			'5xl': 'var(--pds-spacing-5xl)',
+			'6xl': 'var(--pds-spacing-6xl)',
+			'7xl': 'var(--pds-spacing-7xl)',
+			'8xl': 'var(--pds-spacing-8xl)',
+			'9xl': 'var(--pds-spacing-9xl)',
+			// Numeric aliases → PDS tokens (p-4 = p-m, p-6 = p-xl, etc.)
+			// Values reference CSS variables so they stay in sync if tokens change.
+			0.5: 'var(--pds-spacing-5xs)', // 0.125rem
+			1: 'var(--pds-spacing-4xs)', // 0.25rem
+			1.5: 'var(--pds-spacing-3xs)', // 0.375rem
+			2: 'var(--pds-spacing-2xs)', // 0.5rem
+			2.5: 'var(--pds-spacing-xs)', // 0.625rem
+			3: 'var(--pds-spacing-s)', // 0.75rem
+			4: 'var(--pds-spacing-m)', // 1rem
+			5: 'var(--pds-spacing-l)', // 1.25rem
+			6: 'var(--pds-spacing-xl)', // 1.5rem
+			8: 'var(--pds-spacing-2xl)', // 2rem
+			10: 'var(--pds-spacing-3xl)', // 2.5rem
+			12: 'var(--pds-spacing-4xl)', // 3rem
+			16: 'var(--pds-spacing-5xl)', // 4rem
+			20: 'var(--pds-spacing-6xl)', // 5rem
+			24: 'var(--pds-spacing-7xl)', // 6rem
+			32: 'var(--pds-spacing-8xl)', // 8rem
+			40: 'var(--pds-spacing-9xl)', // 10rem
+		},
+
+		// ─── Typography ──────────────────────────────────────────────────────────
+		// Font families are intentionally excluded. PDS applies font families
+		// automatically via pds-core.css (body, headings, code blocks, etc.).
+		// Teams should not override font families via Tailwind utilities.
+		fontSize: {
+			xs: 'var(--pds-typography-size-xs)',
+			s: 'var(--pds-typography-size-s)',
+			m: 'var(--pds-typography-size-m)',
+			l: 'var(--pds-typography-size-l)',
+			xl: 'var(--pds-typography-size-xl)',
+			'2xl': 'var(--pds-typography-size-2xl)',
+			'3xl': 'var(--pds-typography-size-3xl)',
+			'4xl': 'var(--pds-typography-size-4xl)',
+			'5xl': 'var(--pds-typography-size-5xl)',
+			'6xl': 'var(--pds-typography-size-6xl)',
+			'7xl': 'var(--pds-typography-size-7xl)',
+			'8xl': 'var(--pds-typography-size-8xl)',
+			'9xl': 'var(--pds-typography-size-9xl)',
+		},
+		fontWeight: {
+			light: 'var(--pds-typography-fw-light)',
+			normal: 'var(--pds-typography-fw-regular)',
+			medium: 'var(--pds-typography-fw-medium)',
+			semibold: 'var(--pds-typography-fw-semibold)',
+			bold: 'var(--pds-typography-fw-bold)',
+		},
+		lineHeight: {
+			s: 'var(--pds-typography-lh-s)',
+			m: 'var(--pds-typography-lh-m)',
+			l: 'var(--pds-typography-lh-l)',
+			xl: 'var(--pds-typography-lh-xl)',
+		},
+		letterSpacing: {
+			s: 'var(--pds-typography-ls-s)',
+			m: 'var(--pds-typography-ls-m)',
+			l: 'var(--pds-typography-ls-l)',
+			xl: 'var(--pds-typography-ls-xl)',
+		},
+
+		// ─── Border ──────────────────────────────────────────────────────────────
+		borderRadius: {
+			DEFAULT: 'var(--pds-border-radius-default)',
+			button: 'var(--pds-border-radius-button)',
+			input: 'var(--pds-border-radius-input)',
+			container: 'var(--pds-border-radius-container)',
+			bar: 'var(--pds-border-radius-bar)',
+		},
+		borderWidth: {
+			0: '0px',
+			DEFAULT: 'var(--pds-border-width-default)',
+			thicker: 'var(--pds-border-width-thicker)',
+		},
+
+		// ─── Z-index ─────────────────────────────────────────────────────────────
+		zIndex: {
+			0: '0',
+			navigation: 'var(--pds-z-index-navigation)',
+			dropdown: 'var(--pds-z-index-dropdown)',
+			notifications: 'var(--pds-z-index-notifications)',
+			overlay: 'var(--pds-z-index-overlay)',
+			modal: 'var(--pds-z-index-modal)',
+			max: 'var(--pds-z-index-max)',
+		},
+
+		// ─── Max Width ───────────────────────────────────────────────────────────
+		// PDS standard container widths — use to match PDS layout components.
+		maxWidth: {
+			none: 'none',
+			full: '100%',
+			narrow: 'var(--pds-container-max-width-narrow)',
+			standard: 'var(--pds-container-max-width-standard)',
+			wide: 'var(--pds-container-max-width-wide)',
+			'x-wide': 'var(--pds-container-max-width-x-wide)',
+		},
+
+		extend: {},
+	},
+};