Skip to content

Initial integration of svelte stellar and tailwindcss#1532

Closed
AaronPlave wants to merge 60 commits intodevelopfrom
feature/svelte-stellar-tailwind
Closed

Initial integration of svelte stellar and tailwindcss#1532
AaronPlave wants to merge 60 commits intodevelopfrom
feature/svelte-stellar-tailwind

Conversation

@AaronPlave
Copy link
Copy Markdown
Contributor

@AaronPlave AaronPlave commented Oct 30, 2024

This PR integrates TailwindCSS and Stellar Svelte components. TailwindCSS is a CSS utility framework introduced as a soft dependency of Stellar Svelte. Over time the aim is to use TailwindCSS utility classes instead of our custom classes so that all of our styling is responsive to the underlying CSS variables that govern those utility classes from Tailwind. Stellar Svelte is built on top of shadcn-svelte components which uses Tailwind itself for styling and dynamic theming. By using Tailwind in Aerie UI we will be able to dynamically theme (light, dark, global color schemes, etc). Stellar Svelte components will provide us with a large library of high quality, accessible UI components that should also save us development effort.

This PR also:

  • Removes the bootstrap utility css and swaps a few of those classes over to TailwindCSS classes.
  • Updates typescript to 5.7.3

Testing:

  • Test the Tags page. This page now mainly uses Tailwind classes and Svelte Stellar components as a proof of concept.
  • Verify that the UI looks unchanged other than the Tags page

TODO:

  • Revert plan page changes
  • Remove any of the locally installed Stellar components
  • Rebase
  • Remove command palette
  • Explain tailwind css integration and a bit of stellar explainer...
  • Remove old app menu if @duranb okays it
  • Verify that the rest of the UI looks unchanged
  • Fix e2e tests @AaronPlave
  • Developer docs, mention things like "dark:some-class", how we like to use TW/how we've customized it, etc.
  • Update testing docs to reflect preferences on accessing parts of the page from within a test. Role first (if it doesn't take a rework of the UI and think about the context), then test id, then as a final option some sort of class.

@AaronPlave AaronPlave removed the DON'T MERGE Do Not Merge This Branch label Mar 5, 2025
@AaronPlave AaronPlave force-pushed the feature/svelte-stellar-tailwind branch from c619be3 to 7686e14 Compare March 6, 2025 04:51
@AaronPlave AaronPlave force-pushed the feature/svelte-stellar-tailwind branch from fadc2a5 to 127514f Compare March 11, 2025 18:43
@AaronPlave AaronPlave force-pushed the feature/svelte-stellar-tailwind branch from bafab93 to c97c64d Compare April 9, 2025 16:31
@dandelany
Copy link
Copy Markdown
Collaborator

Met with @AaronPlave & we decided:

Copy link
Copy Markdown
Collaborator

@duranb duranb left a comment

Choose a reason for hiding this comment

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

Everything looks good! I'll save the more detailed review for the follow up PR.

@sonarqubecloud
Copy link
Copy Markdown

@AaronPlave
Copy link
Copy Markdown
Contributor Author

Closing since this was done in #1666

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

DON'T MERGE Do Not Merge This Branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants