From f33884b1d2f63464d075fdb4987547aca209b19a Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Sat, 10 Oct 2026 11:15:34 +0200 Subject: [PATCH 1/3] docs: Document the Sign-In Appearance Keys --- .../librechat_yaml/object_structure/theme.mdx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx index 927f54100..0a943dd0d 100644 --- a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx +++ b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx @@ -60,7 +60,7 @@ A name that is not one of these is ignored: the server logs it and drops `interf - **Radii.** A tighter scale taken from Click UI's `border.radii`: controls, menus, popovers, tooltips, tabs, the composer's action buttons and `sm` through `lg` at `0.25rem`, surfaces and `xl`/`2xl` at `0.5rem`, large surfaces and `3xl` at `0.75rem`. - **Borders.** Decorative outlines on controls and chips and the hairlines inside stroked surfaces are hidden (`chromeBorderAlpha` and `insetBorderAlpha` at `0`), so surfaces are separated by fill; field edges and the neutral button's border stay. Destructive actions use the `soft` style. - **Shadows.** Click UI's single elevation shadow on every raised surface, menus and dragged items, at 0.15 opacity in light mode and 0.6 in dark, with a hairline shadow for the `2xs` through `sm` steps. Tooltips have no shadow. -- **Controls.** Buttons and fields are 2rem tall, controls are padded `1rem` with a `0.5rem` icon gap and a regular (`400`) label weight. Fields are filled (`fieldFillStyle: fill`) and swap their edge color on focus (`fieldFocusStyle: border`); labels are `0.75rem` at weight `500`. Disabled controls use the `fill` style with their own disabled colors, the switch is a compact 2rem by 1rem, and table rows get a 1px rule. +- **Controls.** Buttons and fields, including the sign-in ones, are 2rem tall, controls are padded `1rem` with a `0.5rem` icon gap and a regular (`400`) label weight. Fields are filled (`fieldFillStyle: fill`) and swap their edge color on focus (`fieldFocusStyle: border`); labels are `0.75rem` at weight `500`. Disabled controls use the `fill` style with their own disabled colors, the switch is a compact 2rem by 1rem, and table rows get a 1px rule. - **Dialogs.** A 1px edge, `2rem` side padding, and titles at `1.25rem`, weight `700`, in the Inter stack. Every dialog scrim is at 0.75 opacity. - **Fonts.** The UI font stays Inter. Code uses Click UI's mono stack, `"Inconsolata", Consolas, "SFMono Regular", monospace`; LibreChat bundles Inconsolata. Headings ask for Basier Square first, which is not bundled, so they render in Inter unless the viewer has it installed. @@ -215,6 +215,11 @@ Appearance values are set **per mode**, and a mode without them uses the default | `iconButtonSizeSm` | Width and height of the `icon-sm` Button | `2rem` | | `fieldHeight` | Height of form fields | `2.5rem` | | `fieldHeightLg` | Height of large form fields, such as title inputs | `3rem` | +| `authFieldHeight` | Height of the floating-label fields on the sign-in pages | `2.75rem` | +| `authButtonHeight` | Height of the sign-in pages' submit buttons | `3rem` | +| `authControlRadius` | Corner radius of the sign-in fields and submit buttons; follows `radius2xl` when unset | `1rem` | +| `authActionHeight` | Height of the other sign-in actions, the two-factor verify and password-reset continue buttons; follows `authButtonHeight` when unset, then `buttonHeight` | `2.5rem` | +| `authActionRadius` | Corner radius of those other sign-in actions; follows `authControlRadius` when unset, then `radiusLg` | `0.5rem` | | `fieldPaddingY` | Vertical padding of form fields | `0.5rem` | | `fieldFocusStyle` | How a focused field shows focus: `ring` draws the focus ring, `border` swaps the field's edge to `rgb-border-field-focus` | `ring` | | `fieldFillStyle` | Whether fields stay `transparent` or paint `rgb-field-fill` (`fill`) | `transparent` | @@ -286,7 +291,7 @@ The defaults reproduce LibreChat's look, so a theme that sets none of these keys Accepted values: - **Radii, `controlHeight`, `controlPaddingX`, `buttonPaddingX`, `controlGap`, `buttonHeight`, `buttonHeightSm`, `fieldHeight`, `fieldPaddingY`, spacing, tooltip padding and text size, text and label sizes, and the dialog lengths (`dialogStroke`, `dialogPaddingX`, `dialogHeaderGap`, `dialogTitleSize`):** `0`, or a number in `px`, `rem` or `em` (such as `0.25rem`), or a single `calc()` of two such lengths (such as `calc(0.5rem - 2px)`). -- **`buttonHeightXs`, `buttonHeightLg`, `buttonHeightCompact`, `iconButtonSizeSm` and `fieldHeightLg`:** a length in `px` or `rem` of at least `24px` (`1.5rem`), the minimum pointer target size. +- **`buttonHeightXs`, `buttonHeightLg`, `buttonHeightCompact`, `iconButtonSizeSm`, `fieldHeightLg`, `authFieldHeight`, `authButtonHeight` and `authActionHeight`:** a length in `px` or `rem` of at least `24px` (`1.5rem`), the minimum pointer target size. - **`iconSize`:** `12px` to `20px` (`0.75rem` to `1.25rem`). **`iconSizeMd`:** `20px` to `24px`. **`iconSizeLg`:** `16px` to `32px`. **`checkboxSize`:** `16px` to `24px`. **`listMaxHeight`:** `128px` to `640px` (`8rem` to `40rem`). Each is a length in `px` or `rem`. - **`tabMinWidth` and `listMinWidth`:** `0`, or a length in `px` or `rem`. - **`switchWidth` and `switchHeight`:** a positive length in `px` or `rem`. Both must use the same unit (a side you leave out uses its `rem` default), the width must exceed the height so the knob can travel, and the height must clear the 4px track border (more than `4px`, or at least `0.5rem`). From 30adc92975f9ca2c797a88d637b02bdd7d8787b9 Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Sat, 10 Oct 2026 11:16:33 +0200 Subject: [PATCH 2/3] docs: Name the Sign-In Heights in the ClickHouse Summary --- .../configuration/librechat_yaml/object_structure/theme.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx index 0a943dd0d..eb258b829 100644 --- a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx +++ b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx @@ -60,7 +60,7 @@ A name that is not one of these is ignored: the server logs it and drops `interf - **Radii.** A tighter scale taken from Click UI's `border.radii`: controls, menus, popovers, tooltips, tabs, the composer's action buttons and `sm` through `lg` at `0.25rem`, surfaces and `xl`/`2xl` at `0.5rem`, large surfaces and `3xl` at `0.75rem`. - **Borders.** Decorative outlines on controls and chips and the hairlines inside stroked surfaces are hidden (`chromeBorderAlpha` and `insetBorderAlpha` at `0`), so surfaces are separated by fill; field edges and the neutral button's border stay. Destructive actions use the `soft` style. - **Shadows.** Click UI's single elevation shadow on every raised surface, menus and dragged items, at 0.15 opacity in light mode and 0.6 in dark, with a hairline shadow for the `2xs` through `sm` steps. Tooltips have no shadow. -- **Controls.** Buttons and fields, including the sign-in ones, are 2rem tall, controls are padded `1rem` with a `0.5rem` icon gap and a regular (`400`) label weight. Fields are filled (`fieldFillStyle: fill`) and swap their edge color on focus (`fieldFocusStyle: border`); labels are `0.75rem` at weight `500`. Disabled controls use the `fill` style with their own disabled colors, the switch is a compact 2rem by 1rem, and table rows get a 1px rule. +- **Controls.** Buttons and fields are 2rem tall, the sign-in field and submit button included (`authFieldHeight` and `authButtonHeight`), controls are padded `1rem` with a `0.5rem` icon gap and a regular (`400`) label weight. Fields are filled (`fieldFillStyle: fill`) and swap their edge color on focus (`fieldFocusStyle: border`); labels are `0.75rem` at weight `500`. Disabled controls use the `fill` style with their own disabled colors, the switch is a compact 2rem by 1rem, and table rows get a 1px rule. - **Dialogs.** A 1px edge, `2rem` side padding, and titles at `1.25rem`, weight `700`, in the Inter stack. Every dialog scrim is at 0.75 opacity. - **Fonts.** The UI font stays Inter. Code uses Click UI's mono stack, `"Inconsolata", Consolas, "SFMono Regular", monospace`; LibreChat bundles Inconsolata. Headings ask for Basier Square first, which is not bundled, so they render in Inter unless the viewer has it installed. From 76d5aa53f67f40a16d94b0f2529dfe2b57fc92b9 Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Sat, 10 Oct 2026 11:18:04 +0200 Subject: [PATCH 3/3] docs: Clarify the Sign-In Action Fallbacks --- .../configuration/librechat_yaml/object_structure/theme.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx index eb258b829..8b857e7d7 100644 --- a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx +++ b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx @@ -60,7 +60,7 @@ A name that is not one of these is ignored: the server logs it and drops `interf - **Radii.** A tighter scale taken from Click UI's `border.radii`: controls, menus, popovers, tooltips, tabs, the composer's action buttons and `sm` through `lg` at `0.25rem`, surfaces and `xl`/`2xl` at `0.5rem`, large surfaces and `3xl` at `0.75rem`. - **Borders.** Decorative outlines on controls and chips and the hairlines inside stroked surfaces are hidden (`chromeBorderAlpha` and `insetBorderAlpha` at `0`), so surfaces are separated by fill; field edges and the neutral button's border stay. Destructive actions use the `soft` style. - **Shadows.** Click UI's single elevation shadow on every raised surface, menus and dragged items, at 0.15 opacity in light mode and 0.6 in dark, with a hairline shadow for the `2xs` through `sm` steps. Tooltips have no shadow. -- **Controls.** Buttons and fields are 2rem tall, the sign-in field and submit button included (`authFieldHeight` and `authButtonHeight`), controls are padded `1rem` with a `0.5rem` icon gap and a regular (`400`) label weight. Fields are filled (`fieldFillStyle: fill`) and swap their edge color on focus (`fieldFocusStyle: border`); labels are `0.75rem` at weight `500`. Disabled controls use the `fill` style with their own disabled colors, the switch is a compact 2rem by 1rem, and table rows get a 1px rule. +- **Controls.** Buttons and fields are 2rem tall, including the sign-in field and submit button (this theme sets `authFieldHeight` and `authButtonHeight` to `2rem`, where the defaults are `2.75rem` and `3rem`), controls are padded `1rem` with a `0.5rem` icon gap and a regular (`400`) label weight. Fields are filled (`fieldFillStyle: fill`) and swap their edge color on focus (`fieldFocusStyle: border`); labels are `0.75rem` at weight `500`. Disabled controls use the `fill` style with their own disabled colors, the switch is a compact 2rem by 1rem, and table rows get a 1px rule. - **Dialogs.** A 1px edge, `2rem` side padding, and titles at `1.25rem`, weight `700`, in the Inter stack. Every dialog scrim is at 0.75 opacity. - **Fonts.** The UI font stays Inter. Code uses Click UI's mono stack, `"Inconsolata", Consolas, "SFMono Regular", monospace`; LibreChat bundles Inconsolata. Headings ask for Basier Square first, which is not bundled, so they render in Inter unless the viewer has it installed. @@ -218,8 +218,8 @@ Appearance values are set **per mode**, and a mode without them uses the default | `authFieldHeight` | Height of the floating-label fields on the sign-in pages | `2.75rem` | | `authButtonHeight` | Height of the sign-in pages' submit buttons | `3rem` | | `authControlRadius` | Corner radius of the sign-in fields and submit buttons; follows `radius2xl` when unset | `1rem` | -| `authActionHeight` | Height of the other sign-in actions, the two-factor verify and password-reset continue buttons; follows `authButtonHeight` when unset, then `buttonHeight` | `2.5rem` | -| `authActionRadius` | Corner radius of those other sign-in actions; follows `authControlRadius` when unset, then `radiusLg` | `0.5rem` | +| `authActionHeight` | Height of the other sign-in actions, the two-factor verify and password-reset continue buttons; when unset, follows `authButtonHeight` if the theme sets it and `buttonHeight` otherwise, so the default matches `buttonHeight` | `2.5rem` | +| `authActionRadius` | Corner radius of those other sign-in actions; when unset, follows `authControlRadius` if the theme sets it and `radiusLg` otherwise, so the default matches `radiusLg` | `0.5rem` | | `fieldPaddingY` | Vertical padding of form fields | `0.5rem` | | `fieldFocusStyle` | How a focused field shows focus: `ring` draws the focus ring, `border` swaps the field's edge to `rgb-border-field-focus` | `ring` | | `fieldFillStyle` | Whether fields stay `transparent` or paint `rgb-field-fill` (`fill`) | `transparent` |