diff --git a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx index 8b857e7d7..19e424aaf 100644 --- a/content/docs/configuration/librechat_yaml/object_structure/theme.mdx +++ b/content/docs/configuration/librechat_yaml/object_structure/theme.mdx @@ -144,7 +144,7 @@ The browser applies the same rules to the theme it receives and logs `[Deploymen ### Colors -Colors use the same token names as the theme engine: `rgb-` followed by the token, such as `rgb-surface-primary`, `rgb-text-primary`, `rgb-border-medium`, `rgb-accent-primary` or `rgb-status-error-subtle`. The full list of 130 tokens is `themeColorTokens` in [`packages/data-provider/src/theme.ts`](https://github.com/LibreChat-AI/LibreChat/blob/dev/packages/data-provider/src/theme.ts), which the server and the browser both read, and each token is described in the `IThemeRGB` interface in [`packages/client/src/theme/types/index.ts`](https://github.com/LibreChat-AI/LibreChat/blob/dev/packages/client/src/theme/types/index.ts). +Colors use the same token names as the theme engine: `rgb-` followed by the token, such as `rgb-surface-primary`, `rgb-text-primary`, `rgb-border-medium`, `rgb-accent-primary` or `rgb-status-error-subtle`. The full list of 169 tokens is `themeColorTokens` in [`packages/data-provider/src/theme.ts`](https://github.com/LibreChat-AI/LibreChat/blob/dev/packages/data-provider/src/theme.ts), which the server and the browser both read, and each token is described in the `IThemeRGB` interface in [`packages/client/src/theme/types/index.ts`](https://github.com/LibreChat-AI/LibreChat/blob/dev/packages/client/src/theme/types/index.ts). Beyond the surface, text, border, status and syntax palettes, these roles let a theme restyle specific interaction states and components: @@ -156,6 +156,7 @@ Beyond the surface, text, border, status and syntax palettes, these roles let a | Disabled | `rgb-surface-disabled`, `rgb-text-disabled`, `rgb-border-disabled` | Disabled controls, when `disabledStyle` is `fill` (see [Appearance](#appearance)) | | Control border | `rgb-border-control` | The edge of inputs, select triggers and one-time code slots, kept separate from quiet separators because it needs 3:1 contrast | | Fields | `rgb-border-field-focus`, `rgb-field-fill`, `rgb-field-text` | A focused field's edge when `fieldFocusStyle` is `border` (follows `rgb-focus-control`), a field's fill when `fieldFillStyle` is `fill` (follows `rgb-surface-primary`), and the typed value (follows `rgb-text-primary`) | +| Checkbox | `rgb-checkbox-fill` | An unchecked checkbox's fill when `checkboxFillStyle` is `fill` (follows `rgb-surface-primary`) | | Primary button | `rgb-button-primary`, `rgb-button-primary-hover` | The primary Button's fill and hover; follow `rgb-surface-inverted` and `rgb-surface-inverted-hover`, which checkboxes and switches keep using | | Inks | `rgb-dialog-title`, `rgb-badge-label` | Dialog titles and badge labels; both follow `rgb-text-primary` | | Scrim | `rgb-surface-overlay` | The color behind dialogs; its strength is set by the scrim opacities in [Appearance](#appearance) | @@ -185,6 +186,7 @@ Appearance values are set **per mode**, and a mode without them uses the default | `menuPanelRadius` | Corner radius of the model selector menu, hover cards and the composer's menus; follows `radiusXl` when unset | `0.75rem` | | `popoverRadius` | Corner radius of the composer's popovers, such as the prompts, skills and mention lists; follows `radius2xl` when unset | `1rem` | | `composerActionRadius` | Corner radius of the composer's send and stop buttons and its other round action buttons; follows `roundControlRadius` when unset | `9999px` | +| `compactPanelRadius` | Corner radius of the date range picker panel; follows `radiusLg` when unset | `0.5rem` | | `tooltipRadius` | Corner radius of tooltips | `0.275rem` | | `tooltipPaddingX` | Inline padding of tooltips | `0.5rem` | | `tooltipPaddingY` | Vertical padding of tooltips | `0.25rem` | @@ -231,6 +233,8 @@ Appearance values are set **per mode**, and a mode without them uses the default | `switchWidth` | Width of the switch | `2.75rem` | | `switchHeight` | Height of the switch; the knob is this minus the track's 4px border | `1.5rem` | | `checkboxSize` | Size of the checkbox and its check mark | `1rem` | +| `checkboxRadius` | Corner radius of the checkbox; follows `radiusSm` when unset | `calc(0.5rem - 4px)` | +| `checkboxFillStyle` | Whether an unchecked checkbox stays `transparent` or paints `rgb-checkbox-fill` (`fill`), which follows `rgb-surface-primary`; a checked box keeps `rgb-surface-inverted` | `transparent` | | `tableCellSpaceY` | Vertical padding of table cells | `1rem` | | `tableRowStroke` | Thickness of the rule between table rows | `0px` | | `spaceCompact` | Compact spacing step | `0.375rem` | @@ -301,6 +305,7 @@ Accepted values: - **`disabledStyle`:** `dim` or `fill`. - **`fieldFocusStyle`:** `ring` or `border`. - **`fieldFillStyle`:** `transparent` or `fill`. +- **`checkboxFillStyle`:** `transparent` or `fill`. - **Font weights (`controlFontWeight`, `dialogTitleFontWeight`, `inlineCodeWeight`):** a whole number from `1` to `1000`. `labelFontWeight` also accepts `inherit`. - **Line heights (the `leading*` steps, `labelLeading` and `dialogTitleLeading`):** a unitless number (such as `1.5`), a single `calc()` dividing two numbers (such as `calc(1.25 / 0.875)`), or a length. - **Scrim opacities, `buttonNeutralBorderOpacity`, `chromeBorderAlpha` and `insetBorderAlpha`:** a number from `0` to `1`.