@pantheon-systems/pds-toolkit-react 2.0.0-alpha.7 → 2.0.0-alpha.9

package/tailwind/v3/preset.cjs

@@ -0,0 +1,258 @@
+/**
+ * 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}'],
+ *   };
+ */
+
+const plugin = require('tailwindcss/plugin');
+
+/** @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,
+	},
+	plugins: [
+		// Reset border-style to none so borders are fully opt-in.
+		// Without this, any element that picks up a non-zero border-width
+		// (from PDS components, inheritance, or browser defaults) gets a
+		// visible border even without explicit border classes.
+		// Always include border-solid (or border-dashed, etc.) when adding borders.
+		plugin(function ({ addBase }) {
+			addBase({
+				'*, ::before, ::after': {
+					borderWidth: '0',
+					borderStyle: 'none',
+					borderColor: 'var(--pds-color-border-default)',
+				},
+			});
+		}),
+	],
+	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: {
+			none: '0px',
+			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)',
+			full: '9999px',
+		},
+		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: {},
+	},
+};

package/tailwind/v4/theme.css

@@ -0,0 +1,230 @@
+/**
+ * PDS Tailwind v4 Theme
+ *
+ * Maps Pantheon Design System tokens to Tailwind CSS v4 utilities via @theme.
+ * Replaces Tailwind's default color, spacing, and typography scales with PDS values.
+ *
+ * Requirements:
+ * - pds-core.css must be imported before this file (provides --pds-* CSS variables)
+ * - Tailwind v4.x
+ *
+ * Usage in your global CSS entry point:
+ *
+ *   @import 'tailwindcss/theme' layer(theme);
+ *   @import 'tailwindcss/utilities' layer(utilities);
+ *   @import '@pantheon-systems/pds-toolkit-react/tailwind/v4/theme.css';
+ *
+ * And in your root layout (JS import, before globals.css):
+ *   import '@pantheon-systems/pds-toolkit-react/css/pds-core.css';
+ */
+
+/*
+ * Reset border-style to none so borders are fully opt-in.
+ * Without this, any element that picks up a non-zero border-width
+ * (from PDS components, inheritance, or browser defaults) gets a
+ * visible border even without explicit border classes.
+ * Always include border-solid (or border-dashed, etc.) when adding borders.
+ */
+@layer base {
+	*,
+	::before,
+	::after {
+		border-color: var(--pds-color-border-default);
+		border-style: none;
+		border-width: 0;
+	}
+}
+
+@theme {
+	/* ── Reset Tailwind defaults we are replacing ──────────────────────────── */
+	--color-*: initial;
+	--spacing-*: initial;
+	--font-*: initial;
+	--text-*: initial;
+	--font-weight-*: initial;
+	--leading-*: initial;
+	--tracking-*: initial;
+	--radius-*: initial;
+	--border-*: initial;
+	--z-*: initial;
+	--max-w-*: initial;
+
+	/* ── Colors ────────────────────────────────────────────────────────────── */
+
+	/* Backgrounds — use as bg-bg-default, bg-bg-secondary, bg-bg-reverse */
+	--color-bg-default: var(--pds-color-bg-default);
+	--color-bg-secondary: var(--pds-color-bg-default-secondary);
+	--color-bg-reverse: var(--pds-color-bg-reverse);
+
+	/* Foregrounds */
+	--color-fg-default: var(--pds-color-fg-default);
+	--color-fg-secondary: var(--pds-color-fg-default-secondary);
+	--color-fg-reverse: var(--pds-color-fg-reverse);
+
+	/* Borders — use as border-border-default, border-border-input, etc. */
+	--color-border-default: var(--pds-color-border-default);
+	--color-border-input: var(--pds-color-border-input);
+	--color-border-separator: var(--pds-color-border-separator);
+	--color-border-brand: var(--pds-color-border-brand);
+
+	/* Interactive */
+	--color-interactive-focus: var(--pds-color-interactive-focus);
+	--color-interactive-bg-hover: var(--pds-color-interactive-background-hover);
+	--color-interactive-bg-active: var(--pds-color-interactive-background-active);
+	--color-interactive-link: var(--pds-color-interactive-link-default);
+	--color-interactive-link-hover: var(--pds-color-interactive-link-hover);
+	--color-interactive-link-active: var(--pds-color-interactive-link-active);
+	--color-interactive-link-visited: var(--pds-color-interactive-link-visited);
+	--color-interactive-reverse-focus: var(--pds-color-interactive-reverse-focus);
+	--color-interactive-reverse-link: var(
+		--pds-color-interactive-reverse-link-default
+	);
+	--color-interactive-reverse-link-hover: var(
+		--pds-color-interactive-reverse-link-hover
+	);
+	--color-interactive-reverse-link-active: var(
+		--pds-color-interactive-reverse-link-active
+	);
+	--color-interactive-reverse-link-visited: var(
+		--pds-color-interactive-reverse-link-visited
+	);
+
+	/* Status */
+	--color-status-info-background: var(--pds-color-status-info-background);
+	--color-status-info-foreground: var(--pds-color-status-info-foreground);
+	--color-status-info-border: var(--pds-color-status-info-border);
+	--color-status-info-dot: var(--pds-color-status-info-dot);
+	--color-status-success-background: var(--pds-color-status-success-background);
+	--color-status-success-foreground: var(--pds-color-status-success-foreground);
+	--color-status-success-border: var(--pds-color-status-success-border);
+	--color-status-success-dot: var(--pds-color-status-success-dot);
+	--color-status-warning-background: var(--pds-color-status-warning-background);
+	--color-status-warning-foreground: var(--pds-color-status-warning-foreground);
+	--color-status-warning-border: var(--pds-color-status-warning-border);
+	--color-status-warning-dot: var(--pds-color-status-warning-dot);
+	--color-status-critical-background: var(
+		--pds-color-status-critical-background
+	);
+	--color-status-critical-foreground: var(
+		--pds-color-status-critical-foreground
+	);
+	--color-status-critical-border: var(--pds-color-status-critical-border);
+	--color-status-critical-dot: var(--pds-color-status-critical-dot);
+	--color-status-discovery-background: var(
+		--pds-color-status-discovery-background
+	);
+	--color-status-discovery-foreground: var(
+		--pds-color-status-discovery-foreground
+	);
+	--color-status-discovery-border: var(--pds-color-status-discovery-border);
+	--color-status-discovery-dot: var(--pds-color-status-discovery-dot);
+
+	/* Overlay */
+	--color-overlay: var(--pds-color-overlay);
+
+	/* Data visualization */
+	--color-datavis-1: var(--pds-color-datavis-1);
+	--color-datavis-2: var(--pds-color-datavis-2);
+	--color-datavis-3: var(--pds-color-datavis-3);
+	--color-datavis-4: var(--pds-color-datavis-4);
+	--color-datavis-5: var(--pds-color-datavis-5);
+
+	/* ── Spacing ───────────────────────────────────────────────────────────── */
+	/* PDS named scale */
+	--spacing-5xs: var(--pds-spacing-5xs);
+	--spacing-4xs: var(--pds-spacing-4xs);
+	--spacing-3xs: var(--pds-spacing-3xs);
+	--spacing-2xs: var(--pds-spacing-2xs);
+	--spacing-xs: var(--pds-spacing-xs);
+	--spacing-s: var(--pds-spacing-s);
+	--spacing-m: var(--pds-spacing-m);
+	--spacing-l: var(--pds-spacing-l);
+	--spacing-xl: var(--pds-spacing-xl);
+	--spacing-2xl: var(--pds-spacing-2xl);
+	--spacing-3xl: var(--pds-spacing-3xl);
+	--spacing-4xl: var(--pds-spacing-4xl);
+	--spacing-5xl: var(--pds-spacing-5xl);
+	--spacing-6xl: var(--pds-spacing-6xl);
+	--spacing-7xl: var(--pds-spacing-7xl);
+	--spacing-8xl: var(--pds-spacing-8xl);
+	--spacing-9xl: var(--pds-spacing-9xl);
+	/* Numeric aliases → PDS tokens (p-4 = p-m, p-6 = p-xl, etc.) */
+	--spacing-0\.5: var(--pds-spacing-5xs);
+	--spacing-1: var(--pds-spacing-4xs);
+	--spacing-1\.5: var(--pds-spacing-3xs);
+	--spacing-2: var(--pds-spacing-2xs);
+	--spacing-2\.5: var(--pds-spacing-xs);
+	--spacing-3: var(--pds-spacing-s);
+	--spacing-4: var(--pds-spacing-m);
+	--spacing-5: var(--pds-spacing-l);
+	--spacing-6: var(--pds-spacing-xl);
+	--spacing-8: var(--pds-spacing-2xl);
+	--spacing-10: var(--pds-spacing-3xl);
+	--spacing-12: var(--pds-spacing-4xl);
+	--spacing-16: var(--pds-spacing-5xl);
+	--spacing-20: var(--pds-spacing-6xl);
+	--spacing-24: var(--pds-spacing-7xl);
+	--spacing-32: var(--pds-spacing-8xl);
+	--spacing-40: var(--pds-spacing-9xl);
+
+	/* ── 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. */
+
+	--text-xs: var(--pds-typography-size-xs);
+	--text-s: var(--pds-typography-size-s);
+	--text-m: var(--pds-typography-size-m);
+	--text-l: var(--pds-typography-size-l);
+	--text-xl: var(--pds-typography-size-xl);
+	--text-2xl: var(--pds-typography-size-2xl);
+	--text-3xl: var(--pds-typography-size-3xl);
+	--text-4xl: var(--pds-typography-size-4xl);
+	--text-5xl: var(--pds-typography-size-5xl);
+	--text-6xl: var(--pds-typography-size-6xl);
+	--text-7xl: var(--pds-typography-size-7xl);
+	--text-8xl: var(--pds-typography-size-8xl);
+	--text-9xl: var(--pds-typography-size-9xl);
+
+	--font-weight-light: var(--pds-typography-fw-light);
+	--font-weight-normal: var(--pds-typography-fw-regular);
+	--font-weight-medium: var(--pds-typography-fw-medium);
+	--font-weight-semibold: var(--pds-typography-fw-semibold);
+	--font-weight-bold: var(--pds-typography-fw-bold);
+
+	--leading-s: var(--pds-typography-lh-s);
+	--leading-m: var(--pds-typography-lh-m);
+	--leading-l: var(--pds-typography-lh-l);
+	--leading-xl: var(--pds-typography-lh-xl);
+
+	--tracking-s: var(--pds-typography-ls-s);
+	--tracking-m: var(--pds-typography-ls-m);
+	--tracking-l: var(--pds-typography-ls-l);
+	--tracking-xl: var(--pds-typography-ls-xl);
+
+	/* ── Border ────────────────────────────────────────────────────────────── */
+	--radius-none: 0px;
+	--radius-DEFAULT: var(--pds-border-radius-default);
+	--radius-button: var(--pds-border-radius-button);
+	--radius-input: var(--pds-border-radius-input);
+	--radius-container: var(--pds-border-radius-container);
+	--radius-bar: var(--pds-border-radius-bar);
+	--radius-full: 9999px;
+
+	--border-DEFAULT: var(--pds-border-width-default);
+	--border-thicker: var(--pds-border-width-thicker);
+
+	/* ── Z-index ───────────────────────────────────────────────────────────── */
+	--z-navigation: var(--pds-z-index-navigation);
+	--z-dropdown: var(--pds-z-index-dropdown);
+	--z-notifications: var(--pds-z-index-notifications);
+	--z-overlay: var(--pds-z-index-overlay);
+	--z-modal: var(--pds-z-index-modal);
+	--z-max: var(--pds-z-index-max);
+
+	/* ── Max Width ─────────────────────────────────────────────────────────── */
+	--max-w-narrow: var(--pds-container-max-width-narrow);
+	--max-w-standard: var(--pds-container-max-width-standard);
+	--max-w-wide: var(--pds-container-max-width-wide);
+	--max-w-x-wide: var(--pds-container-max-width-x-wide);
+}