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

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "2.0.0-alpha.8",
+	"version": "2.0.0-alpha.9",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",

package/tailwind/README.md

@@ -178,6 +178,15 @@ Keys: `narrow` (1024px), `standard` (1200px), `wide` (1440px), `x-wide` (1600px)
 
 ## Important caveats
 
+### Borders require an explicit border-style
+
+The PDS preset resets `border-style` to `none` on all elements so that borders are fully opt-in. This prevents phantom borders on elements that pick up a non-zero `border-width` from PDS components, inheritance, or browser defaults. When adding borders with Tailwind, always include a border-style class (`border-solid`, `border-dashed`, or `border-dotted`):
+
+```html
+<div class="border border-solid border-border-default">...</div>
+<div class="border-b border-solid border-border-separator">Divider</div>
+```
+
 ### Opacity modifiers are not supported
 
 Tailwind's opacity modifier syntax (`bg-bg-default/50`) does not work with CSS variable color references. This is a known Tailwind limitation — the compiler cannot decompose a CSS variable into RGB channels. Avoid using opacity modifiers with PDS colors.

package/tailwind/v3/preset.cjs

@@ -17,6 +17,8 @@
  *   };
  */
 
+const plugin = require('tailwindcss/plugin');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	corePlugins: {
@@ -24,6 +26,22 @@ module.exports = {
 		// 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
@@ -199,11 +217,13 @@ module.exports = {
 
 		// ─── 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',

package/tailwind/v4/theme.css

@@ -18,6 +18,23 @@
  *   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;
@@ -186,11 +203,13 @@
 	--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);