Skip to content

fix: outline style #5421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wingkwong merged 2 commits into from
Jun 27, 2025
Merged

fix: outline style #5421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4711781
fix: outline style
winchesHe Jun 26, 2025
5bbf94e
chore(changeset): add changeset
wingkwong Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/gold-plants-ring.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@heroui/theme": patch
---

fix outline styles (#5266)
2 changes: 1 addition & 1 deletion apps/docs/app/examples/table/custom-styles/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,7 @@ export default function Page() {
<label className="flex items-center text-default-400 text-small">
Rows per page:
<select
className="bg-transparent outline-hidden text-default-400 text-small"
className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
onChange={onRowsPerPageChange}
>
<option value="5">5</option>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/app/examples/table/use-case/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,7 @@ export default function Page() {
<label className="flex items-center text-default-400 text-small">
Rows per page:
<select
className="bg-transparent outline-hidden text-default-400 text-small"
className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
onChange={onRowsPerPageChange}
>
<option value="5">5</option>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/cmdk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const cmdk = tv({
"h-14",
"font-sans",
"text-lg",
"outline-hidden",
"outline-solid outline-transparent",
"rounded-none",
"bg-transparent",
"text-default-700",
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/docs/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
aria-selected={dataAttr(isSelected)}
className={clsx(
"flex flex-col outline-hidden w-full tap-highlight-transparent",
"flex flex-col outline-solid outline-transparent w-full tap-highlight-transparent",
hasChildNodes ? "mb-4" : "first:mt-4",
// focus ring
...dataFocusVisibleClasses,
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/featurebase/fb-roadmap-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const FbRoadmapLink = ({className, innerClassName}: Props) => {
<div className={clsx("relative", innerClassName)}>
Roadmap
<Icon
className="absolute right-[-10px] top-0 outline-hidden transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
className="absolute right-[-10px] top-0 outline-solid outline-transparent transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
icon={arrowRightUpIcon}
width={10}
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/heroui-chat-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const HeroUIChatBanner = () => {
HeroUI Chat
<Icon
aria-hidden="true"
className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
icon={arrowRightIcon}
width={16}
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/marketing/custom-themes/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const shopCartStyles = tv({
"text-sm",
"rounded-full",
// focus ring
"group-data-[focus-visible=true]:outline-hidden",
"group-data-[focus-visible=true]:outline-solid outline-transparent",
"group-data-[focus-visible=true]:ring-2",
"group-data-[focus-visible=true]:ring-focus",
"group-data-[focus-visible=true]:ring-offset-2",
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/marketing/hero/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const Hero = () => {
color="primary"
endContent={
<ArrowRightIcon
className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
strokeWidth={2}
/>
}
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/marketing/install-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const InstallBanner = () => {
color="secondary"
endContent={
<ArrowRightIcon
className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
strokeWidth={2}
/>
}
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/mdx-components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
{/* Mobile popover */}
<Components.Popover placement="top">
<Components.PopoverTrigger>
<button className="flex items-center gap-1 sm:hidden outline-hidden">
<button className="flex items-center gap-1 sm:hidden outline-solid outline-transparent">
<InfoCircle className="text-default-400" size={16} />
</button>
</Components.PopoverTrigger>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
<NavbarItem className="flex h-full items-center">
<button
className={clsx(
"transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-hidden",
"transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-solid outline-transparent",
// focus ring
...dataFocusVisibleClasses,
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/ph-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const PhBanner = () => {
Get 30% off
<Icon
aria-hidden="true"
className="outline-none transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
icon={arrowRightIcon}
width={16}
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/components/pro-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export const ProBanner = () => {
HeroUI Pro
<Icon
aria-hidden="true"
className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
icon={arrowRightIcon}
width={16}
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const CustomCheckbox = (props) => {
},
isFocusVisible: {
true: {
base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/checkbox/custom-implementation.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function App() {
},
isFocusVisible: {
true: {
base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export default function App() {
className="cursor-default"
endContent={
<select
className="z-10 outline-hidden w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
className="z-10 outline-solid outline-transparent w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
id="theme"
name="theme"
>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/input/password.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export default function App() {
endContent={
<button
aria-label="toggle password visibility"
className="focus:outline-hidden"
className="focus:outline-solid outline-transparent"
type="button"
onClick={toggleVisibility}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/input/start-end-content.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export default function App() {
Currency
</label>
<select
className="outline-hidden border-0 bg-transparent text-default-400 text-small"
className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
id="currency"
name="currency"
>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/number-input/start-end-content.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function App() {
</label>
<select
aria-label="Select currency"
className="outline-none border-0 bg-transparent text-default-400 text-small"
className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
defaultValue="USD"
id="currency"
name="currency"
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/slider/render-value.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function App() {
>
<input
aria-label="Temperature value"
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
type="text"
value={inputValue}
onChange={(e) => {
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/slider/render-value.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function App() {
>
<input
aria-label="Temperature value"
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
type="text"
value={inputValue}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/table/custom-styles.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -554,7 +554,7 @@ export default function App() {
<label className="flex items-center text-default-400 text-small">
Rows per page:
<select
className="bg-transparent outline-hidden text-default-400 text-small"
className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
onChange={onRowsPerPageChange}
>
<option value="5">5</option>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/table/custom-styles.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,7 +566,7 @@ export default function App() {
<label className="flex items-center text-default-400 text-small">
Rows per page:
<select
className="bg-transparent outline-hidden text-default-400 text-small"
className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
onChange={onRowsPerPageChange}
>
<option value="5">5</option>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/table/use-case.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -550,7 +550,7 @@ export default function App() {
<label className="flex items-center text-default-400 text-small">
Rows per page:
<select
className="bg-transparent outline-hidden text-default-400 text-small"
className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
onChange={onRowsPerPageChange}
>
<option value="5">5</option>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/content/components/table/use-case.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,7 +563,7 @@ export default function App() {
<label className="flex items-center text-default-400 text-small">
Rows per page:
<select
className="bg-transparent outline-hidden text-default-400 text-small"
className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
onChange={onRowsPerPageChange}
>
<option value="5">5</option>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/input/stories/input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ const StartAndEndContentTemplate = (args) => (
Currency
</label>
<select
className="outline-hidden border-0 bg-transparent text-default-400 text-sm"
className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-sm"
id="currency"
name="currency"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/number-input/stories/number-input.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,7 +372,7 @@ export const StartAndEndContent = {
Currency
</label>
<select
className="outline-none border-0 bg-transparent text-default-400 text-sm"
className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-sm"
id="currency"
name="currency"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/slider/stories/slider.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ const CustomValueTemplate = (args: SliderProps) => {
>
<input
aria-label="Temperature"
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
type="text"
value={inputValue}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/system-rsc/test-utils/slots-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const card = tv({
"relative",
"overflow-hidden",
"h-auto",
"outline-hidden",
"outline-solid outline-transparent",
"text-foreground",
"box-border",
"bg-content1",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/accordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const accordionItem = tv({
base: "",
heading: "",
trigger: [
"flex py-4 w-full h-full gap-3 outline-hidden items-center tap-highlight-transparent",
"flex py-4 w-full h-full gap-3 outline-solid outline-transparent items-center tap-highlight-transparent",
// focus ring
...dataFocusVisibleClasses,
],
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/breadcrumbs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const breadcrumbItem = tv({
"cursor-pointer",
"whitespace-nowrap",
"line-clamp-1",
"outline-hidden",
"outline-solid outline-transparent",
"tap-highlight-transparent",
// focus ring
...dataFocusVisibleClasses,
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const button = tv({
"justify-center",
"box-border",
"appearance-none",
"outline-hidden",
"outline-solid outline-transparent",
"select-none",
"whitespace-nowrap",
"min-w-max",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const card = tv({
"relative",
"overflow-hidden",
"h-auto",
"outline-hidden",
"outline-solid outline-transparent",
"text-foreground",
"box-border",
"bg-content1",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/chip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const chip = tv({
closeButton: [
"z-10",
"appearance-none",
"outline-hidden",
"outline-solid outline-transparent",
"select-none",
"transition-opacity",
"opacity-70",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/date-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const dateInput = tv({
], // this wraps the input and the start/end content
segment: [
"group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
"inline-block outline-hidden focus:shadow-xs rounded-md",
"inline-block outline-solid outline-transparent focus:shadow-xs rounded-md",
"text-foreground-500 data-[editable=true]:text-foreground",
"data-[editable=true]:data-[placeholder=true]:text-foreground-500",
// isInvalid=true
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/dropdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const dropdownItem = tv({
"h-full",
"box-border",
"rounded-small",
"outline-hidden",
"outline-solid outline-transparent",
"cursor-pointer",
"tap-highlight-transparent",
"data-[pressed=true]:opacity-70",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/input-otp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const inputOtp = tv({
"absolute",
"inset-0",
"border-none",
"outline-hidden",
"outline-solid outline-transparent",
"bg-transparent",
"text-transparent",
],
Expand Down
4 changes: 2 additions & 2 deletions packages/core/theme/src/components/input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const input = tv({
"relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-xs px-3 gap-3",
innerWrapper: "inline-flex w-full items-center h-full box-border",
input: [
"w-full font-normal bg-transparent !outline-hidden placeholder:text-foreground-500 focus-visible:outline-hidden",
"w-full font-normal bg-transparent !outline-solid outline-transparent placeholder:text-foreground-500 focus-visible:outline-solid outline-transparent",
"data-[has-start-content=true]:ps-1.5",
"data-[has-end-content=true]:pe-1.5",
"data-[type=color]:rounded-none",
Expand All @@ -58,7 +58,7 @@ const input = tv({
"start-auto",
"pointer-events-none",
"appearance-none",
"outline-hidden",
"outline-solid outline-transparent",
"select-none",
"opacity-0",
"cursor-pointer",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/link.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {dataFocusVisibleClasses} from "../utils";
*/
const link = tv({
base: [
"relative inline-flex items-center outline-hidden tap-highlight-transparent",
"relative inline-flex items-center outline-solid outline-transparent tap-highlight-transparent",
// focus ring
...dataFocusVisibleClasses,
],
Expand Down
4 changes: 2 additions & 2 deletions packages/core/theme/src/components/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {dataFocusVisibleClasses} from "../utils";
const menu = tv({
slots: {
base: "w-full relative flex flex-col gap-1 p-1 overflow-clip",
list: "w-full flex flex-col gap-0.5 outline-hidden",
list: "w-full flex flex-col gap-0.5 outline-solid outline-transparent",
emptyContent: [
"h-10",
"px-2",
Expand Down Expand Up @@ -63,7 +63,7 @@ const menuItem = tv({
"box-border",
"rounded-small",
"subpixel-antialiased",
"outline-hidden",
"outline-solid outline-transparent",
"cursor-pointer",
"tap-highlight-transparent",
// focus ring
Expand Down
Loading