fix: input fields bg (#8389)

Author: aaryan610

apps/web/app/error/dev.tsx

@@ -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>
 
@@ -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>

apps/web/core/components/inbox/modals/create-modal/create-root.tsx

@@ -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])}
               />

apps/web/core/components/issues/issue-modal/components/description-editor.tsx

@@ -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" />

apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx

@@ -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>
@@ -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>}

packages/editor/src/core/extensions/code-inline/index.tsx

@@ -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",
       },
     };

packages/ui/src/form-fields/input.tsx

@@ -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",
           "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":

packages/ui/src/form-fields/textarea.tsx

@@ -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",
           "focus:ring-theme rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1":
             mode === "transparent",
           "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",