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/MainButton/MainButton.tsx
+3 -3
View File
@@ -1,8 +1,8 @@
import { clsx } from 'clsx';
import React, { type FunctionComponent, useContext } from 'react';
import React, { type FunctionComponent } from 'react';
import { type IconComponent } from '@ui/icon';
import { ThemeContext } from '@ui/theme-constants';
import { useTheme } from '@ui/theme-constants';
import styles from './MainButton.module.scss';
@@ -31,7 +31,7 @@ export const MainButton = ({
disabled,
className,
}: MainButtonProps) => {
const { theme } = useContext(ThemeContext);
const theme = useTheme();
// Replicates the legacy ternary exactly: fullWidth wins over width, and a
// falsy width (0) falls back to the 'auto' default.