houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make twenty-ui theming a consumer-facing API (#22007)

Browse Source 
**What**
- Add `useTheme()` and `useThemeColorScheme()` as the public theme
accessors, and migrate the 88 internal `useContext(ThemeContext)` call
sites to them. `ThemeContext` stays exported.
- Make `ThemeProvider` overridable and scopeable: new `applyToRoot`
(default `true`), `overrides` (a `--t-*` map), and `className` props.
When scoping is requested it renders a `display: contents` wrapper that
also serves as the themed portal container, exposed via
`ThemeScopeContext` / `useThemeContainer()`. `AppTooltip` and `Modal`
portal into that container, falling back to `document.body`.
- Document the `--t-*` override contract in the README; barrels
regenerated.

**Why**
Consumers had no stable theme accessor (they reached into the raw
context) and no supported way to re-theme. This adds both without
behavior change.

**Reviewer notes**
- The default path is unchanged: `applyToRoot` defaults to `true`, so
the colorScheme class still lands on `<html>` and portaled overlays
(tooltips, dropdowns, modals) stay themed. The global class is
load-bearing for body portals; scoping is opt-in.
- `twenty-front` is untouched (migrating its consumers is a separate
follow-up).

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22007?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Raphaël Bosi
2026-06-23 14:16:09 +02:00
committed by GitHub
parent 85406a58fb
commit 0f451897cf
97 changed files with 330 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-ui/src/input/SearchInput/SearchInput.tsx
+3 -3
View File
@@ -1,10 +1,10 @@
import { Input } from '@base-ui/react/input';
import { clsx } from 'clsx';
import { type ReactNode, useContext, useId, useState } from 'react';
import { type ReactNode, useId, useState } from 'react';
import { IconFilter, IconSearch } from '@ui/icon';
import { IconButton } from '@ui/input/IconButton/IconButton';
import { ThemeContext } from '@ui/theme-constants';
import { useTheme } from '@ui/theme-constants';
import styles from './SearchInput.module.scss';
@@ -35,7 +35,7 @@ export const SearchInput = ({
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledby,
}: SearchInputProps) => {
const { theme } = useContext(ThemeContext);
const theme = useTheme();
const [isFocused, setIsFocused] = useState(false);
const generatedId = useId();
const inputId = id ?? generatedId;