Skip to content

chore(frontend): tailwind-variants, theme tokens, global styles in css - #3983

Open
Kadrian wants to merge 1 commit into
developfrom
chore/tailwind-variants
Open

chore(frontend): tailwind-variants, theme tokens, global styles in css#3983
Kadrian wants to merge 1 commit into
developfrom
chore/tailwind-variants

Conversation

@Kadrian

@Kadrian Kadrian commented Aug 27, 2026

Copy link
Copy Markdown
Collaborator

First step of the emotion → tailwind migration.

  • tailwind-variants in, tailwind-styled-components out; its 7 usages are tv() now. No tailwind-merge: tv 3 ships its own class merger, className overrides go through it (heading3({ className })); pnpm still resolves it as an optional peer in the lockfile, not a direct dep
  • conventions: every class list lives in a tv(), conditionals are variants, longer lists use the array form with one utility per line (only tightly coupled ones share a line, e.g. absolute top-3 right-4, opacity-80 hover:opacity-100)
  • @theme gains what only the emotion theme had: red/green/orange, filetype-*, text-tiny (11px), bare rounded = 3px. Other font sizes map onto tailwind defaults (xs/sm/base/xl/2xl)
  • GlobalStyles.tsx@layer base in index.css, tippy overrides too; dead .SplitPane/.Resizer rules dropped
  • tab headline / snack close are <button>s now (a11y rules see raw elements, tw() hid them)

Follow-ups: migrate styled() per directory (~200 files), then drop @emotion/* + shrink conquery({ theme }) to { img, palette }. Downstream repo must mirror the dependency change and already overrides the tokens via :root.

@Kadrian
Kadrian marked this pull request as draft August 27, 2026 11:38
@Kadrian
Kadrian force-pushed the chore/tailwind-variants branch from 63dab72 to 2654fe8 Compare August 27, 2026 14:36
@Kadrian
Kadrian changed the base branch from refactor/drop-forwardref to develop August 27, 2026 14:36
@Kadrian
Kadrian force-pushed the chore/tailwind-variants branch from 2654fe8 to 93091f4 Compare August 27, 2026 14:40
groundwork for removing emotion: tv replaces tailwind-styled-components, the emotion theme's colors/fonts/radius exist as @theme tokens, GlobalStyles is plain css
@Kadrian
Kadrian force-pushed the chore/tailwind-variants branch from 93091f4 to 02d8119 Compare August 27, 2026 14:43
@Kadrian
Kadrian marked this pull request as ready for review August 27, 2026 14:44
`;
const headline = tv({
base: "mt-[6px] mr-[5px] mb-0 shrink-0 cursor-pointer border-b-[3px] px-3 text-sm font-bold uppercase leading-[30px] tracking-wider transition-colors",
variants: {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

cool!

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.

3 participants