Reapply TailwindCSS v4 migration (v2.0.0)

changelog.txt

@@ -1,3 +1,6 @@
+Version 2.0.0 - 11th August, 2026
+- New: Migrated to TailwindCSS v4 (CSS-first) — the theme now ships as `@bsf/force-ui/theme.css` and the `withTW()` helper is deprecated; see the README migration guide for consumer upgrade steps (breaking).
+
 Version 1.8.1 - 11th August, 2026
 - Improvement: Organism - Editor Input: Added optional `triggerRegex` prop that overrides the built-in mention-suggestion matcher, so consumers can allow the trigger without a leading blank space (e.g. directly after a double quote inside JSON string values). The custom regex must expose the same capture groups as the built-in matcher: 1 = leading boundary, 2 = replaceable string (trigger + query), 3 = query string used to filter options. When omitted, the existing trigger-based matcher is used unchanged.
 - Fix: Atom - Select: In `multiple` mode the dropdown now stays open while selecting or deselecting options, closing only on Escape or outside click.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.8.1",
+    "version": "2.0.0",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.cjs.js",
     "module": "./dist/force-ui.es.js",
@@ -28,6 +28,7 @@
             "import": "./dist/withTW.es.js",
             "require": "./dist/withTW.cjs.js"
         },
+        "./theme.css": "./dist/theme.css",
         "./dist/*": "./dist/*"
     },
     "scripts": {
@@ -86,8 +87,7 @@
         "react-day-picker": "^9.1.3",
         "recharts": "^2.13.0",
         "styled-components": "^6.1.12",
-        "tailwind-merge": "^2.4.0",
-        "tailwindcss-scoped-preflight": "^3.4.3"
+        "tailwind-merge": "^3.5.0"
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^5.0.2",
@@ -103,7 +103,7 @@
         "@storybook/react": "^10.3.3",
         "@storybook/react-vite": "^10.3.3",
         "@storybook/test-runner": "^0.24.3",
-        "@tailwindcss/container-queries": "^0.1.1",
+        "@tailwindcss/postcss": "^4.3.2",
         "@types/lodash": "^4.17.13",
         "@types/node": "^22.7.6",
         "@types/react": "^18.3.10",
@@ -115,7 +115,6 @@
         "@wordpress/eslint-plugin": "^20.3.0",
         "@wordpress/prettier-config": "^4.4.0",
         "@wordpress/stylelint-config": "^23.2.0",
-        "autoprefixer": "^10.4.19",
         "axe-playwright": "^2.0.3",
         "chromatic": "^11.7.1",
         "cross-env": "^7.0.3",
@@ -137,7 +136,7 @@
         "storybook": "^10.3.3",
         "storybook-addon-paddings": "^6.0.2",
         "stylelint": "^16.8.2",
-        "tailwindcss": "^3.4.10",
+        "tailwindcss": "^4.3.2",
         "typescript": "5.4.2",
         "typescript-eslint": "^8.7.0",
         "vite": "^5.4.21",

postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

src/components/alert/alert.tsx

@@ -107,7 +107,7 @@ const Alert = ( {
 					<div className="absolute right-4 top-4 [&_svg]:size-5">
 						<button
 							className={ cn(
-								'bg-transparent m-0 p-0 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-none cursor-pointer rounded',
+								'bg-transparent m-0 p-0 border-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-hidden cursor-pointer rounded-sm',
 								closeIconClassNames[ theme ] ??
 									closeIconClassNames.light
 							) }
@@ -156,7 +156,7 @@ const Alert = ( {
 				{ typeof onClose === 'function' && (
 					<button
 						className={ cn(
-							'self-start bg-transparent m-0 border-none p-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-none cursor-pointer size-5 rounded',
+							'self-start bg-transparent m-0 border-none p-0.5 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-hidden cursor-pointer size-5 rounded-sm',
 							closeIconClassNames[ theme ] ??
 								closeIconClassNames.light
 						) }

src/components/area-chart/area-chart.stories.tsx

@@ -308,7 +308,7 @@ export const AreaChartCard1: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -371,7 +371,7 @@ export const AreaChartCard2: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">

src/components/area-chart/chart-legend-content.tsx

@@ -46,7 +46,7 @@ const ChartLegendContent = React.forwardRef<
 					<div key={ item.value } className="flex items-center gap-1.5">
 						{ ! hideIcon && (
 							<div
-								className="size-2 shrink-0 rounded-sm"
+								className="size-2 shrink-0 rounded-xs"
 								style={ {
 									backgroundColor: item.color,
 								} }

src/components/bar-chart/bar-chart.stories.tsx

@@ -250,7 +250,7 @@ export const BarChartCard1: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -312,7 +312,7 @@ export const BarChartCard2: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -377,7 +377,7 @@ export const BarChartCard3: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -443,7 +443,7 @@ export const BarChartCard4: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -508,7 +508,7 @@ export const AreaChartCard5: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">

src/components/bar-chart/chart-legend-content.tsx

@@ -46,7 +46,7 @@ const ChartLegendContent = React.forwardRef<
 					<div key={ item.value } className="flex items-center gap-1.5">
 						{ ! hideIcon && (
 							<div
-								className="size-2 shrink-0 rounded-sm"
+								className="size-2 shrink-0 rounded-xs"
 								style={ {
 									backgroundColor: item.color,
 								} }

src/components/breadcrumb/breadcrumb.tsx

@@ -92,7 +92,7 @@ export const BreadcrumbLink = ( {
 			className={ cn(
 				sizes.text,
 				'px-1 font-medium no-underline text-text-tertiary hover:text-text-primary hover:underline',
-				'focus:outline-none focus:ring-1 focus:ring-border-interactive focus:border-border-interactive focus:rounded-sm',
+				'focus:outline-hidden focus:ring-1 focus:ring-border-interactive focus:border-border-interactive focus:rounded-xs',
 				'transition-all duration-200',
 				className
 			) }

src/components/button-group/button-group.tsx

@@ -70,7 +70,7 @@ export const ButtonGroup = ( {
 	);
 
 	const groupClassName = cn(
-		'box-border flex border border-border-subtle border-solid rounded',
+		'box-border flex border border-border-subtle border-solid rounded-sm',
 		className
 	);
 
@@ -153,7 +153,7 @@ export const ButtonComponent = (
 	const hoverClasses = 'hover:bg-button-tertiary-hover';
 
 	// Button focus classes.
-	const focusClasses = 'focus:outline-none';
+	const focusClasses = 'focus:outline-hidden';
 
 	// Button disabled classes.
 	const disabledClasses = disabled

src/components/button/button.tsx

@@ -90,9 +90,9 @@ const Button: React.FunctionComponent<ButtonProps> = forwardRef(
 			secondary:
 				'text-text-on-color bg-button-secondary hover:bg-button-secondary-hover outline-button-secondary hover:outline-button-secondary-hover shadow-xs focus:shadow-none disabled:shadow-none disabled:bg-button-disabled disabled:outline-button-disabled',
 			outline:
-				'text-button-tertiary-color outline-border-subtle bg-button-tertiary shadow-sm focus:shadow-none hover:bg-button-tertiary-hover hover:outline-border-subtle disabled:bg-button-tertiary disabled:outline-border-disabled',
+				'text-button-tertiary-color outline-border-subtle bg-button-tertiary shadow-xs focus:shadow-none hover:bg-button-tertiary-hover hover:outline-border-subtle disabled:bg-button-tertiary disabled:outline-border-disabled',
 			ghost: 'text-text-primary bg-transparent outline-transparent hover:bg-button-tertiary-hover',
-			link: 'outline-none text-link-primary bg-transparent hover:text-link-primary-hover hover:underline p-0 border-0 leading-none',
+			link: 'outline-hidden text-link-primary bg-transparent hover:text-link-primary-hover hover:underline p-0 border-0 leading-none',
 		}?.[ variant ];
 
 		const destructiveClassNames =
@@ -110,8 +110,8 @@ const Button: React.FunctionComponent<ButtonProps> = forwardRef(
 				: '';
 
 		const sizeClassNames = {
-			xs: 'p-1 rounded [&>svg]:size-4',
-			sm: 'p-2 rounded [&>svg]:size-4 gap-0.5',
+			xs: 'p-1 rounded-sm [&>svg]:size-4',
+			sm: 'p-2 rounded-sm [&>svg]:size-4 gap-0.5',
 			md: 'p-2.5 rounded-md text-sm [&>svg]:size-5 gap-1',
 			lg: 'p-3 rounded-lg text-base [&>svg]:size-6 gap-1',
 		}?.[ size ];

src/components/checkbox/checkbox.tsx

@@ -59,14 +59,14 @@ export const CheckboxComponent = (
 
 	const sizeClassNames = {
 		sm: {
-			checkbox: 'size-4 rounded gap-1',
+			checkbox: 'size-4 rounded-sm gap-1',
 			icon: 'size-3',
 			text: 'text-sm', // text class for sm
 			description: 'text-sm',
 			gap: 'gap-0.5',
 		},
 		md: {
-			checkbox: 'size-5 rounded gap-1',
+			checkbox: 'size-5 rounded-sm gap-1',
 			icon: 'size-4',
 			text: 'text-base', // text class for md
 			description: 'text-sm',
@@ -170,7 +170,7 @@ export const CheckboxComponent = (
 					{ ...( indeterminate && { 'aria-checked': 'mixed' as const } ) }
 					{ ...( label?.description && { 'aria-describedby': descriptionId } ) }
 					className={ cn(
-						"peer relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden !border-1.5 border-solid focus:outline-none",
+						"peer relative cursor-pointer appearance-none transition-all m-0 before:content-[''] checked:before:content-[''] checked:before:hidden before:hidden border-1.5! border-solid focus:outline-hidden",
 						colorClassNames[ color ].checkbox,
 						sizeClassNames[ size ].checkbox,
 						disabled && disabledClassNames.checkbox,

src/components/datepicker/datepicker-component.tsx

@@ -384,7 +384,7 @@ const DatePickerComponent = ( {
 
 		const buttonClasses = cn(
 			'h-10 w-10 flex items-center justify-center transition text-text-secondary relative text-sm',
-			'border-none rounded',
+			'border-none rounded-sm',
 			( isSelected || isPartOfRange ) && ! isOutside
 				? 'bg-background-brand text-text-on-color'
 				: 'bg-transparent hover:bg-button-tertiary-hover',
@@ -629,7 +629,7 @@ const DatePickerComponent = ( {
 			<input
 				type="time"
 				className={ cn(
-					'w-full px-2 py-1 rounded text-sm font-normal text-text-primary bg-field-secondary-background outline outline-1 outline-border-subtle border-none transition-[color,box-shadow,outline] duration-200',
+					'w-full px-2 py-1 rounded-sm text-sm font-normal text-text-primary bg-field-secondary-background outline outline-1 outline-border-subtle border-none transition-[color,box-shadow,outline] duration-200',
 					'focus:outline-focus-border focus:ring-2 focus:ring-toggle-on focus:ring-offset-2',
 					! date &&
 						'outline-border-disabled bg-field-background-disabled cursor-not-allowed text-text-disabled'

src/components/dialog/dialog.tsx

@@ -479,7 +479,7 @@ export const DefaultCloseButton = ( {
 	return (
 		<button
 			className={ cn(
-				'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-border-strong outline-none shadow-none',
+				'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-border-strong outline-hidden shadow-none',
 				className
 			) }
 			aria-label="Close dialog"

src/components/drawer/drawer-close-button.tsx

@@ -37,7 +37,7 @@ const DefaultCloseButton = ( {
 	return (
 		<button
 			className={ cn(
-				'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-border-strong outline-none shadow-none',
+				'bg-transparent inline-flex justify-center items-center border-0 p-1 m-0 cursor-pointer focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-border-strong outline-hidden shadow-none',
 				className
 			) }
 			aria-label="Close drawer"

src/components/dropzone/dropzone.tsx

@@ -63,7 +63,7 @@ export const FilePreview = () => {
 	return (
 		<div
 			className={ cn(
-				'border border-solid border-transparent flex items-start justify-between rounded mt-2 bg-field-primary-background p-3 gap-3',
+				'border border-solid border-transparent flex items-start justify-between rounded-sm mt-2 bg-field-primary-background p-3 gap-3',
 				error && 'border-alert-border-danger bg-alert-background-danger'
 			) }
 		>
@@ -73,7 +73,7 @@ export const FilePreview = () => {
 					( file.type.startsWith( 'image/' ) ? (
 						<div
 							className={ cn(
-								'size-10 rounded-sm flex items-center justify-center shrink-0',
+								'size-10 rounded-xs flex items-center justify-center shrink-0',
 								error && 'bg-gray-200 '
 							) }
 						>
@@ -115,7 +115,7 @@ export const FilePreview = () => {
 					<button
 						onClick={ removeFile }
 						aria-label="Remove file"
-						className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 rounded self-start"
+						className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 ring-0 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 rounded-sm self-start"
 					>
 						<Trash className="size-4 text-support-error" aria-hidden="true" />
 					</button>
@@ -230,7 +230,7 @@ export const Dropzone = ( {
 				<label htmlFor={ uploadInputID.current }>
 					<div
 						className={ cn(
-							'min-w-80 cursor-pointer mx-auto border-dashed border rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus-within:outline-none focus-within:ring-2 focus-within:ring-toggle-on focus-within:ring-offset-2 transition duration-200 ease-in-out',
+							'min-w-80 cursor-pointer mx-auto border-dashed border rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus-within:outline-hidden focus-within:ring-2 focus-within:ring-toggle-on focus-within:ring-offset-2 transition duration-200 ease-in-out',
 							isDragging
 								? 'border-field-dropzone-color bg-field-dropzone-background-hover'
 								: 'border-field-border',

src/components/editor-input/editor-input-style.ts

@@ -8,7 +8,7 @@ export const editorDisabledClassNames =
 	'bg-field-secondary-background outline-field-border-disabled hover:outline-field-border-disabled [&_p]:text-badge-color-disabled cursor-not-allowed';
 
 export const editorInputClassNames = {
-	sm: 'px-3 py-1.5 rounded [&_.editor-content>p]:text-xs [&_.editor-content>p]:font-normal [&_.pointer-events-none]:text-xs [&_.pointer-events-none]:font-normal [&_.editor-content>p]:content-center [&_.editor-content>p]:min-h-5',
+	sm: 'px-3 py-1.5 rounded-sm [&_.editor-content>p]:text-xs [&_.editor-content>p]:font-normal [&_.pointer-events-none]:text-xs [&_.pointer-events-none]:font-normal [&_.editor-content>p]:content-center [&_.editor-content>p]:min-h-5',
 	md: 'px-3.5 py-2 rounded-md [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-normal [&_.pointer-events-none]:text-sm [&_.pointer-events-none]:font-normal [&_.editor-content>p]:content-center [&_.editor-content>p]:min-h-6',
 	lg: 'px-4 py-2.5 rounded-md [&_.editor-content>p]:text-base [&_.editor-content>p]:font-normal [&_.pointer-events-none]:text-base [&_.pointer-events-none]:font-normal [&_.editor-content>p]:content-center [&_.editor-content>p]:min-h-7',
 };
@@ -26,7 +26,7 @@ export const comboboxItemCommonClassNames =
 	'm-0 text-text-primary cursor-pointer';
 
 export const comboboxItemClassNames = {
-	sm: 'p-1.5 rounded text-xs leading-5 font-normal',
+	sm: 'p-1.5 rounded-sm text-xs leading-5 font-normal',
 	md: 'p-2 rounded-md text-sm leading-6 font-normal',
 	lg: 'p-2 rounded-md text-base leading-6 font-normal',
 };

src/components/editor-input/editor-input.tsx

@@ -175,7 +175,7 @@ const EditorInput = forwardRef<LexicalEditor, EditorInputProps>(
 								<ContentEditable
 									aria-label={ placeholder || 'Text editor' }
 									className={ cn(
-										'editor-content focus-visible:outline-none outline-none',
+										'editor-content focus-visible:outline-hidden outline-hidden',
 										editableContentAreaCommonClassNames,
 										className
 									) }

src/components/file-preview/file-preview.tsx

@@ -65,15 +65,15 @@ export const FilePreview = ( {
 	return (
 		<div
 			className={ cn(
-				'w-full flex items-start justify-between rounded mt-2 bg-field-primary-background p-2 gap-3',
+				'w-full flex items-start justify-between rounded-sm mt-2 bg-field-primary-background p-2 gap-3',
 				error && 'border-alert-border-danger bg-alert-background-danger'
 			) }
 		>
 			<div className="flex items-center gap-3 w-full">
 				{ file.type.startsWith( 'image' ) ? (
 					<div
 						className={ cn(
-							'rounded-sm flex items-center justify-center shrink-0',
+							'rounded-xs flex items-center justify-center shrink-0',
 							error && 'bg-gray-200'
 						) }
 					>
@@ -88,7 +88,7 @@ export const FilePreview = ( {
 								}
 								alt="Preview"
 								className={ cn(
-									'w-full object-contain rounded-sm',
+									'w-full object-contain rounded-xs',
 									commonFilePreviewClasses[ size ].image
 								) }
 							/>
@@ -122,7 +122,7 @@ export const FilePreview = ( {
 				{ ! disabled && (
 					<button
 						onClick={ () => onRemove( file ) }
-						className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-support-error focus-visible:ring-offset-1 rounded self-start shadow-none"
+						className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-support-error focus-visible:ring-offset-1 rounded-sm self-start shadow-none"
 						aria-label="Remove file"
 					>
 						<Trash className="size-4 text-support-error" />

src/components/hamburger-menu/hamburger-menu.tsx

@@ -190,7 +190,7 @@ export const MenuToggle = ( { className }: MenuToggleProps ) => {
 			// @ts-expect-error Ref is not present in Button component type, but we need it for the hamburger menu
 			ref={ setTriggerRef }
 			className={ cn(
-				'relative z-[1] rounded-full hover:shadow-sm focus:[box-shadow:none] pointer-events-auto bg-background-primary',
+				'relative z-[1] rounded-full hover:shadow-xs focus:[box-shadow:none] pointer-events-auto bg-background-primary',
 				className
 			) }
 			variant="ghost"
@@ -292,7 +292,7 @@ export const MenuOption: MenuOptionComponent = ( {
 		<MenuItem>
 			<Tag
 				className={ cn(
-					'w-full no-underline hover:no-underline text-text-primary text-lg font-medium flex items-center gap-2 px-2.5 py-1.5 rounded-md hover:bg-background-secondary hover:text-text-primary focus:outline-none focus:shadow-none transition ease-in-out duration-150',
+					'w-full no-underline hover:no-underline text-text-primary text-lg font-medium flex items-center gap-2 px-2.5 py-1.5 rounded-md hover:bg-background-secondary hover:text-text-primary focus:outline-hidden focus:shadow-none transition ease-in-out duration-150',
 					active
 						? 'text-text-primary bg-background-secondary'
 						: 'text-text-secondary',