Sizing & bold theme

Author: zenoachtig

packages/gitbook/src/components/AIChat/AIChatInput.tsx

@@ -53,6 +53,7 @@ export function AIChatInput(props: {
             name="ai-chat-input"
             multiline
             resize
+            sizing="large"
             label="Assistant chat input"
             placeholder={tString(language, 'ai_chat_input_placeholder')}
             onChange={(event) => onChange(event.target.value)}

packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx

@@ -86,6 +86,7 @@ export function PageFeedbackForm(props: {
             </div>
             {rating ? (
                 <Input
+                    ref={inputRef}
                     label={tString(languages, 'was_this_helpful_comment')}
                     multiline
                     submitButton

packages/gitbook/src/components/Search/SearchInput.tsx

@@ -56,9 +56,9 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     name="search-input"
                     ref={inputRef}
                     containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
-                    sizing="small"
+                    sizing="medium"
                     label={tString(language, withAI ? 'search_or_ask' : 'search')}
-                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-10 grow @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11"
+                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-10 grow theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:bg-header-link/1 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 theme-bold:hover:bg-header-link/1 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11 theme-bold:[&_svg]:text-header-link/8"
                     placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
                     onFocus={onFocus}
                     onKeyDown={onKeyDown}
@@ -73,7 +73,12 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     aria-haspopup="listbox"
                     aria-expanded={value && isOpen ? 'true' : 'false'}
                     clearButton
-                    keyboardShortcut={<KeyboardShortcut keys={isOpen ? ['esc'] : ['mod', 'k']} />}
+                    keyboardShortcut={
+                        <KeyboardShortcut
+                            className="theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link"
+                            keys={isOpen ? ['esc'] : ['mod', 'k']}
+                        />
+                    }
                     {...rest}
                     type="text"
                 />

packages/gitbook/src/components/primitives/Input.tsx

@@ -11,7 +11,7 @@ export type InputProps = {
     label: string;
     leading?: IconName | React.ReactNode;
     trailing?: React.ReactNode;
-    sizing?: 'small' | 'medium'; // The `size` prop is already taken by the HTML input element.
+    sizing?: 'medium' | 'large'; // The `size` prop is already taken by the HTML input element.
     containerRef?: React.RefObject<HTMLDivElement | null>;
     /**
      * A submit button, shown to the right of the input.
@@ -40,11 +40,11 @@ export type InputProps = {
 type HybridInputElement = HTMLInputElement & HTMLTextAreaElement;
 
 const SIZE_CLASSES = {
-    small: {
+    medium: {
         container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-lg',
         input: '-m-2 p-2',
     },
-    medium: {
+    large: {
         container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-xl',
         input: '-m-2 p-3',
     },
@@ -160,7 +160,7 @@ export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, In
             <div
                 className={tcls(
                     'group/input relative flex min-h-min gap-2 overflow-hidden border border-tint bg-tint-base shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
-                    'depth-subtle:focus-within:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg',
+                    'depth-subtle:focus-within:-translate-y-px depth-subtle:hover:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg',
                     disabled
                         ? 'cursor-not-allowed border-tint-subtle bg-tint-subtle'
                         : 'focus-within:border-primary-hover focus-within:shadow-primary-subtle focus-within:ring-2 hover:cursor-text hover:border-tint-hover focus-within:hover:border-primary-hover',