This PR migrates the JS config for Tailwind into a CSS config. As such,
all variables have been defined as CSS variables and they're using the
specialized Tailwind syntax for generating utility classes.
Beside the migration, these changes were also added:
- Added `tailwind.config.css` to few packages to make the Tailwind
Intellisense work.
- Migrated away from Radix style color classes to our defined classes,
the values will remain the same.
- Most of the CSS is generated by scripts, they'll be removed in next
PRs.
* Removed redundant `border-light` classes from several components since
it was undefined.
* Removed redundant `text-strong` classes from several components since
it was undefined.
How to test:
- Open all apps, compare the UI (mainly colors) to builds from #45417
and try to find a difference.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Harmonized color variable usages and updated UI color references
(affects palettes, charts, gradients, hero illustrations, and
scrollbars).
* Tweaked border, tab, and selection visuals across components.
* **New Features**
* Added a suite of theme animations and refined typography presets used
by site prose and docs.
* **Refactor**
* Overhauled Tailwind/theme configuration and color token generation for
more consistent theming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
* Move typescript version definition to pnpm-workspace.
* Bump typescript to 5.9.
* Minor fixes to satisfy the compiler.
---------
Co-authored-by: Raúl Barroso <code@raulb.dev>
* Disable typesafe builds on prod for studio.
* Add typecheck github action to the merge queue checks.
* Add typescript dependency to packages to stabilize their versions.
* Add tailwindcss to the catalog.
* Fix some missing and duplicate dependencies.
* Fix the types for jest in ai-commands package.
* Replace all npm commands with pnpm. Add pnpm files and workspace links.
* Fix rimraf to work with pnpm.
* Refactor the github actions to work with pnpm.
* Delete package-lock.json.
* Fix the tailwind configs to not include node_modules.
* Fix random files.
* Add preinstall scripts to all packages.
* Fix the Dockerfile to work with pnpm.
* Update the DEVELOPERS documentation.
* Move the eslint preset into a separate package.
* Import the next package into all apps. Remove redundant packages.
* Import the new eslint rules.
* Update the package-lock.
* very wip
* add expandable rows
* fix table layout, collapsible row, spacing issues
* use new query with filters everywhere
* rm unused queries
* rm unused fn
* improve loading state
* fix text overflowing in role
* rm padding so that table doesn't always need scroll
* fix icon in search input
* add latency to table row heading to clarify what col youre sorting with
* rm unused imports
* run prettier
* align sql with row content
* add syntax highlighting and sort icons
* rm copy btn
* move tailwind dep to correct package, rm unused syntax highlighting, rm unused component
* set up multiple themes in studio
* set up multiple themes in studio
* set up multiple themes in docs and www
* update all resolvedTheme to also include deep-dark
* update all resolvedTheme checks to also include deep-dark
* update tailwind.config.js tokens
* update tailwind.config.js tokens
* update leftover scale12 token
* update if resolvedTheme _doesn't_ include 'dark'
* update more styling tokens
* add dynamic themes to CmdK
* fix nav and footer for multi theme
* add data-theme selector output to transformTokens.js
* update code-hike.css to target data-theme css
* update tailwindcss to ^3.3.5
* ThemeImage with light and dark src for www and docs
* add brand-button styling token
* update old dark theme boolean
* update old dark theme boolean
* make homepage product visuals themeable
* update product page themed images
* update badge green with brand
* fix roles list appearance
* fix auth widget in auth page
* update more dark logic
* update more dark logic
* add button default bg and border
* update pricing page theme styling
* clean up Themeimage
* remove forceDark in homepage
* update dark:border-dark occurrences
* update dark:border-dark occurrences
* fix dark mode base colors
* remove foreground-strong
* fix notification badge bg
* remove some dark: selectors
* update dark: selectors
* update code-hike deep dark bg color
* fix comment typo
* update border-button-hover token
* fix customer story logo
* remove some more dark: selectors
* restore forceDark in www homepage
* fix auth react icon
* fix homepage product visuals
* remove theme
* add brand-link token
* fix checkbox bg
* npm install
* more visible EntityListItem active bg
* fix --background-alternative-default css vars
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* update deps + image codemod (studio)
* update next links (studio)
* update deps
* update links (ui)
* remove next-transpile-modules
* move next-themes dependency
* chore: update ConfirmDialog
* chore: remove old ConfirmModal js file. migrated to TS
* dependency wrangling
* remove empty page
* update next links (www)
* First run bump react-data-grid-v7 beta 4
* fix package-lock.json
* more deps wrangling
* update recharts
* update sentry options
* fix some broken things in www
* studio fixes
* fix graphiql
* fix studio build
* fix menu hydration
* small build error
* update turbo
* fix www typescript errors
* docs image codemod
* links codemod docs
* fix docs typescript errors
* move useConsent to ui to prevent circular deps
* Fix links
* Fix homepage
* Fix links
* move studio/ to apps/
* Revert "move studio/ to apps/"
This reverts commit 1b0a985fcb.
* disable outputFileTracingRoot
* remove outputFileTracingRoot
* fix homepage product cards
* fix PrivacySettings links
* Fix links
* Fix the build for www.
* Minor fixes for JWTGenerator.
* Fix the docs and ui tests.
* Revert codehike back to 0.8.3
* remove ConfirmAlert()
* reenable babel because mobx hates me
* fix blog image and comparison page avatar
* Fix svg errors
* update image synthax
* Fix code hike
* Move the button in a div so that it doesn't inherit its parent height and make the button look weird.
* When components are defined in a component, they get recreated on each render. This makes them unstable in certain cases and causes infinite rerenders.
* Replace the next/head usage with next/script.
* Chore/upgrade next 13 fix table editor (#18431)
* fix table editor styling and fix row deletion logic
* Fix deleting selected rows from header, and fix checkboxes not clearing up
* Fix deleting all rows when filter applied, and fix deleting all rows
* Fix grid size styling issue
* Fix TS error
* Hydration errors
* studio org pages fixes
* fix more studio links
* audit logs fixes
* dropdown icon styling fixes
* fix some images in www
* upgrade to next 14
* try new sentry wrapper for api
* see if this is even invoked
* Revert "see if this is even invoked"
This reverts commit 86c3973ffa.
* Revert "try new sentry wrapper for api"
This reverts commit f67623ebad.
* Revert "upgrade to next 14"
This reverts commit a24dd6131e.
* chore: allow node version 19/20
* Try to fix the LogTable so that it renders with the newer "react-data-grid" version.
* Fix type errors in the log renderer code.
* Fix the replication screen.
* Add the CSS for the GraphiQL.
* Fix SQL editor results rendering
* Lint
* Fix SQL editor results height issue
* Fix auth RLS not invalidating RQ when toggling RLS
* Fix database tables new/edit column regressed
* Fix migrations page empty state if migrations schema not yet created
* Fix API side panel docs temp remove postgrest text for column description PK and FK
* Fix + improve timeout handling in SQL editor
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
Ivan Vasilov