Skip to content

fix: input fields bg #8389

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
pushya22 merged 1 commit into from
Dec 18, 2025
Merged

fix: input fields bg #8389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions apps/web/app/error/dev.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
<div className="space-y-2">
<h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Error Data</h3>
<div className="bg-layer-1 rounded-md p-4">
<p className="text-13 text-secondary font-mono">{error.data}</p>
<p className="text-13 text-secondary font-code">{error.data}</p>
</div>
</div>

Expand Down Expand Up @@ -95,7 +95,7 @@ export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorCompone
<div className="space-y-2">
<h3 className="text-13 font-medium text-tertiary uppercase tracking-wide">Stack Trace</h3>
<div className="bg-layer-1 rounded-md border border-subtle max-h-96 overflow-auto">
<pre className="p-4 text-11 text-secondary font-mono whitespace-pre-wrap break-words">
<pre className="p-4 text-11 text-secondary font-code whitespace-pre-wrap break-words">
{error.stack}
</pre>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/inbox/modals/create-modal/create-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
data={formData}
handleData={handleFormData}
editorRef={descriptionEditorRef}
containerClassName="border-[0.5px] border-subtle py-3 min-h-[150px]"
containerClassName="bg-layer-2 border-[0.5px] border-subtle-1 py-3 min-h-[150px]"
onEnterKeyPress={() => submitBtnRef?.current?.click()}
onAssetUpload={(assetId) => setUploadedAssetIds((prev) => [...prev, assetId])}
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/issues/issue-modal/components/description-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(p
};

return (
<div className="border-[0.5px] border-subtle rounded-lg relative">
<div className="border-[0.5px] border-subtle-1 bg-layer-2 rounded-lg relative">
{descriptionHtmlData === undefined || !projectId ? (
<Loader className="min-h-[120px] max-h-64 space-y-2 overflow-hidden rounded-md border border-subtle p-3 py-2 pt-3">
<Loader.Item width="100%" height="26px" />
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export function ShortcutBadge({ shortcut }: { shortcut: string | undefined }) {
<div className="shrink-0 pointer-events-none inline-flex items-center gap-1 select-none font-medium">
{formatted?.split("").map((char, index) => (
<React.Fragment key={index}>
<kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-mono text-10 font-medium text-tertiary">
<kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-code text-10 font-medium text-tertiary">
{char.toUpperCase()}
</kbd>
</React.Fragment>
Expand Down Expand Up @@ -98,7 +98,7 @@ export function KeySequenceBadge({ sequence }: { sequence: string | undefined })
<div className="shrink-0 pointer-events-none inline-flex items-center gap-1 select-none font-medium">
{chars.map((char, index) => (
<React.Fragment key={index}>
<kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-mono text-10 font-medium text-tertiary">
<kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-code text-10 font-medium text-tertiary">
{char.toUpperCase()}
</kbd>
{index < chars.length - 1 && <span className="text-10 text-placeholder">then</span>}
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/core/extensions/code-inline/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const CustomCodeInlineExtension = Mark.create<InlineCodeOptions>({
return {
HTMLAttributes: {
class:
"rounded-sm bg-layer-1 px-[6px] py-[1.5px] font-mono font-medium text-orange-500 border-[0.5px] border-subtle",
"rounded-sm bg-layer-2 px-[6px] py-[1.5px] font-code font-medium text-(--extended-color-orange-600) border-[0.5px] border-subtle",
spellcheck: "false",
},
};
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/form-fields/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
type={type}
name={name}
className={cn(
"block rounded-md bg-layer-transparent text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
"block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
{
"rounded-md border-[0.5px]": mode === "primary",
Comment on lines +33 to 35
Copy link

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

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

The background color change from bg-layer-transparent to bg-layer-2 on line 33 conflicts with this mode. When mode is "transparent", the bg-transparent class on line 36 will override the bg-layer-2 class from line 33, which may not be the intended behavior. Consider whether the transparent mode should also use bg-layer-2 or if line 33 should conditionally apply bg-layer-2 only for non-transparent modes.

Suggested change
"block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
{
"rounded-md border-[0.5px]": mode === "primary",
"block rounded-md text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
{
"rounded-md border-[0.5px] bg-layer-2": mode === "primary",

Copilot uses AI. Check for mistakes.
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/form-fields/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ const TextArea = React.forwardRef(function TextArea(
ref={textAreaRef}
value={value}
className={cn(
"no-scrollbar w-full bg-transparent placeholder-(--text-color-placeholder) outline-none",
"no-scrollbar w-full bg-layer-2 placeholder-(--text-color-placeholder) outline-none",
{
"rounded-md border-[0.5px] border-subtle": mode === "primary",
"rounded-md border-[0.5px] border-subtle-1": mode === "primary",
Copy link

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

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

The border class was updated from border-subtle to border-subtle-1 for the primary mode. Ensure this change is consistent with the design system. If border-subtle was the correct token before, this change should be verified as it's not directly related to fixing input field backgrounds.

Suggested change
"rounded-md border-[0.5px] border-subtle-1": mode === "primary",
"rounded-md border-[0.5px] border-subtle": mode === "primary",

Copilot uses AI. Check for mistakes.
"focus:ring-theme rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1":
Copy link

Copilot AI Dec 18, 2025

Choose a reason for hiding this comment

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

The background color change from bg-transparent to bg-layer-2 on line 40 conflicts with this mode. When mode is "transparent", the bg-transparent class on line 43 will override the bg-layer-2 class from line 40, which may not be the intended behavior. Consider whether the transparent mode should also use bg-layer-2 or if line 40 should conditionally apply bg-layer-2 only for non-transparent modes.

Copilot uses AI. Check for mistakes.
mode === "transparent",
"rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
Expand Down
Loading