Skip to content

fix: input, input-group background-color andbutton ghost variant #246

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
merged 2 commits into from
Oct 20, 2025
Merged

fix: input, input-group background-color andbutton ghost variant #246

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
6df102f
fix: `input`, `input-group` background-color, `button` ghost variant …
SupakornNetsuwan Oct 20, 2025
6e0a0ce
Create hungry-fans-boil.md
SupakornNetsuwan Oct 20, 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
6 changes: 6 additions & 0 deletions .changeset/hungry-fans-boil.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@example/ui-playground": patch
"@genseki/react": patch
---

fix: `input`, `input-group` background-color and`button` ghost variant
24 changes: 12 additions & 12 deletions examples/ui-playground/src/app/playground/shadcn/input-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
A simple input field with placeholder text.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<BasicInput />
</div>
</PlaygroundCard>
Expand All @@ -384,7 +384,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
Different HTML input types with appropriate validation and keyboard behaviors.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<InputTypes />
</div>
</PlaygroundCard>
Expand All @@ -393,7 +393,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
Inputs can be in different states: default, disabled, or invalid.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<InputStates />
</div>
</PlaygroundCard>
Expand All @@ -402,7 +402,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
A controlled input where the value is managed by React state.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<ControlledInput />
</div>
</PlaygroundCard>
Expand All @@ -411,7 +411,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
Inputs paired with labels and helper text for better accessibility.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<InputWithLabels />
</div>
</PlaygroundCard>
Expand All @@ -420,7 +420,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
File input for uploading single or multiple files.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<FileInput />
</div>
</PlaygroundCard>
Expand All @@ -429,7 +429,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
Input groups with icons or text at the start (left side) of the input field.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<InputGroupInlineStart />
</div>
</PlaygroundCard>
Expand All @@ -438,7 +438,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
Input groups with icons or text at the end (right side) of the input field.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<InputGroupInlineEnd />
</div>
</PlaygroundCard>
Expand All @@ -448,7 +448,7 @@ export function InputSection() {
Input groups with interactive buttons for actions like clearing, toggling visibility, or
submitting.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<InputGroupWithButtons />
</div>
</PlaygroundCard>
Expand All @@ -457,7 +457,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
Input groups with addons on both sides for complex input scenarios.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<InputGroupBothSides />
</div>
</PlaygroundCard>
Expand All @@ -466,7 +466,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
Input groups with addons positioned above (block-start) or below (block-end) the input.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<InputGroupBlockAlignment />
</div>
</PlaygroundCard>
Expand All @@ -475,7 +475,7 @@ export function InputSection() {
<Typography type="body" className="text-muted-foreground mb-4">
Input groups in different states: default, disabled, and invalid.
</Typography>
<div className="p-4 bg-background w-full rounded-lg">
<div className="p-4 bg-secondary w-full rounded-lg">
<InputGroupStates />
</div>
</PlaygroundCard>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/v2/components/primitives/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const buttonVariants = cva(
outline:
' border border-border-button-outline text-text-secondary bg-surface-button-outline shadow-xs hover:bg-surface-button-outline-hover active:bg-surface-button-outline hover:border-border-button-outline-hover disabled:bg-surface-button-outline-disabled disabled:text-text-disabled disabled:border disabled:border-border-button-outline-disabled dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
ghost:
' bg-surface-button-ghost hover:bg-surface-button-ghost-hover active:bg-surface-button-ghost text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
'bg-transparent text-text-secondary hover:text-accent-foreground dark:hover:bg-accent/50',
destructive:
'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive focus-visible:ring-destructive dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react/v2/components/primitives/input-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function InputGroup({
data-pending={isPending}
role="group"
className={cn(
'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
'bg-background group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
'h-18 min-w-0 has-[>textarea]:h-auto',

// Variants based on alignment.
Expand Down
2 changes: 1 addition & 1 deletion packages/react/v2/components/primitives/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function Input({
<input
type={type}
className={cn(
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border bg-transparent px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:bg-transparent file:rounded-sm file:px-4 file:h-full file:border-0 file:text-sm file:font-medium',
'bg-background file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-18 w-full min-w-0 rounded-md border px-6 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:bg-transparent file:rounded-sm file:px-4 file:h-full file:border-0 file:text-sm file:font-medium',
Copy link
Member

Choose a reason for hiding this comment

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

broke on dark theme

'disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-text-disabled disabled:border-border-primary disabled:placeholder:text-text-disabled',
'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[2px]',
'aria-invalid:ring-destructive dark:aria-invalid:ring-destructive aria-invalid:border-destructive',
Expand Down
Loading