From bd4d98bf2c0e16f917272753bf732cbf47fb9669 Mon Sep 17 00:00:00 2001 From: Aviv Keller Date: Wed, 2 Jul 2025 20:45:59 -0400 Subject: [PATCH 1/3] fix(tw): use v3 button styling Signed-off-by: Aviv Keller --- packages/ui-components/src/styles/index.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/ui-components/src/styles/index.css b/packages/ui-components/src/styles/index.css index a5d636800e1ef..f9115a17d28a5 100644 --- a/packages/ui-components/src/styles/index.css +++ b/packages/ui-components/src/styles/index.css @@ -14,18 +14,19 @@ @import './markdown.css' layer(utilities); /* - The default border color has changed to `currentColor` in Tailwind CSS v4, - so we've added these compatibility styles to make sure everything still - looks the same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add an explicit border - color utility to any element that depends on these defaults. + See https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor + See https://tailwindcss.com/docs/upgrade-guide#default-border-color */ @layer base { :root { --header-height: calc(var(--spacing, 0.25rem) * 16); } + button:not(:disabled), + [role="button"]:not(:disabled) { + cursor: pointer; + } + *, ::after, ::before, From 0d769b93684a9c4cac637a8828d7deb1cdf18a35 Mon Sep 17 00:00:00 2001 From: avivkeller Date: Wed, 2 Jul 2025 20:59:04 -0400 Subject: [PATCH 2/3] fixup! --- packages/ui-components/src/styles/index.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/ui-components/src/styles/index.css b/packages/ui-components/src/styles/index.css index f9115a17d28a5..d105b4b27de0f 100644 --- a/packages/ui-components/src/styles/index.css +++ b/packages/ui-components/src/styles/index.css @@ -13,18 +13,18 @@ @import './base.css' layer(utilities); @import './markdown.css' layer(utilities); -/* - See https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor - See https://tailwindcss.com/docs/upgrade-guide#default-border-color -*/ @layer base { - :root { - --header-height: calc(var(--spacing, 0.25rem) * 16); + /* See https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */ + button, + [role='button'] { + &:not(:disabled) { + cursor: pointer; + } } - button:not(:disabled), - [role="button"]:not(:disabled) { - cursor: pointer; + /* See https://tailwindcss.com/docs/upgrade-guide#default-border-color */ + :root { + --header-height: calc(var(--spacing, 0.25rem) * 16); } *, From 3a11bb40808f83ff8c37eb756027a2f30b6cec0b Mon Sep 17 00:00:00 2001 From: avivkeller Date: Mon, 7 Jul 2025 16:16:34 -0400 Subject: [PATCH 3/3] fix comments, use `@apply` --- packages/ui-components/src/styles/index.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/ui-components/src/styles/index.css b/packages/ui-components/src/styles/index.css index d105b4b27de0f..c1fe1ddb15026 100644 --- a/packages/ui-components/src/styles/index.css +++ b/packages/ui-components/src/styles/index.css @@ -14,19 +14,11 @@ @import './markdown.css' layer(utilities); @layer base { - /* See https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */ - button, - [role='button'] { - &:not(:disabled) { - cursor: pointer; - } - } - - /* See https://tailwindcss.com/docs/upgrade-guide#default-border-color */ :root { --header-height: calc(var(--spacing, 0.25rem) * 16); } + /* See https://tailwindcss.com/docs/upgrade-guide#default-border-color */ *, ::after, ::before, @@ -34,6 +26,14 @@ ::file-selector-button { border-color: var(--color-gray-200, currentColor); } + + /* See https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */ + button, + [role='button'] { + &:not(:disabled) { + @apply cursor-pointer; + } + } } @custom-variant aria-current (&[aria-current="page"]);