Skip to content

Reinstate Tailwind#22

Merged
ericenns merged 17 commits into
mainfrom
tailwind
May 1, 2026
Merged

Reinstate Tailwind#22
ericenns merged 17 commits into
mainfrom
tailwind

Conversation

@joshsadam
Copy link
Copy Markdown
Contributor

@joshsadam joshsadam commented Apr 30, 2026

What does this PR do and why?

  • Reinstate Tailwind-based styling for Pathogen components and ship a single precompiled pathogen_view_components.css artifact (host apps do not need to run Tailwind).
  • Replace the legacy component CSS stack with a Tailwind source/build pipeline and update components/controllers/tests to match.

Screenshots or screen recordings

  • N/A (library change). Validate UI via the Lookbook demo app (steps below).

How to set up and validate locally

  1. bin/setup
  2. pnpm install
  3. pnpm run build:css:check (or pnpm run build:css to regenerate the artifact)
  4. bin/test
  5. pnpm test
  6. Optional UI spot-check: cd demo && bundle install && bin/dev, then open http://localhost:3001/lookbook

PR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

- Replace Lightning bundle with Tailwind CLI and pathogen.tailwind.css.
- Add datagrid companion layer and regenerate pathogen_view_components.css.
- Remove legacy app/assets/stylesheets/pathogen/* sources.
- Replace BEM pathogen-* markup with utilities and data-* hooks where needed.
- Align Stimulus tabs and data-grid scroll behavior with new selectors.
- Bump gem to 1.0.0 for the styling contract change.
- Update selectors and class expectations for grids, forms, and typography.
- Adjust Stimulus controller fixtures for tooltip and tabs.
- Describe the pre-built Tailwind pipeline and build:css:check in the root README.
- Point the Lookbook demo at pathogen.tailwind.css and the parent pnpm scripts.
- Eliminate the Tailwind pipeline comments as the demo now utilizes the Pathogen CSS build pipeline.
- Update documentation to reflect the new CSS build process.
- Modify the dev script to run from the demo app root, allowing Foreman to load the correct Procfile and resolve relative paths accurately.
- Implement logic to determine the script's execution path, enhancing reliability when navigating directories.
- Introduce a descriptive comment in the Callout class to clarify its purpose within the Pathogen Typography System.
Align Pathogen CSS with Tailwind theme variables and update generated stylesheet layers.
Update component class generation, previews, and tests to match the new Tailwind theme contract.
- Removed unused border and background color classes from CSS.
- Updated button scheme classes to reflect new color mappings.
- Adjusted tests to verify the correct application of updated color classes.
- Replaced slate color classes with neutral equivalents in CSS and button component.
- Removed unused slate scheme from button options.
- Updated checkbox styles to align with new neutral color scheme.
- Adjusted tests to reflect the removal of slate scheme assertions.
…over effects

- Added new neutral background and border color classes for hover states in CSS.
- Updated button component to utilize the new neutral color scheme and hover effects.
- Adjusted tests to verify the correct application of updated color classes in button rendering.
@joshsadam joshsadam self-assigned this Apr 30, 2026
@joshsadam joshsadam requested a review from ericenns April 30, 2026 16:16
Copy link
Copy Markdown
Member

@ericenns ericenns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me

@ericenns ericenns merged commit 90e7e3d into main May 1, 2026
3 checks passed
@ericenns ericenns deleted the tailwind branch May 1, 2026 13:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants