Raphaël Bosi
0f451897cf
**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. -->
42 lines
963 B
TypeScript
42 lines
963 B
TypeScript
import { type IconComponent } from '@ui/icon';
|
|
import { type JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting';
|
|
import { useTheme } from '@ui/theme-constants';
|
|
import { clsx } from 'clsx';
|
|
|
|
import styles from './JsonNodeLabel.module.scss';
|
|
|
|
export const JsonNodeLabel = ({
|
|
label,
|
|
Icon,
|
|
highlighting,
|
|
}: {
|
|
label: string;
|
|
Icon: IconComponent;
|
|
highlighting?: JsonNodeHighlighting | undefined;
|
|
}) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<span
|
|
className={clsx(
|
|
styles.labelContainer,
|
|
highlighting === 'blue' && styles.blue,
|
|
highlighting === 'red' && styles.red,
|
|
)}
|
|
>
|
|
<Icon
|
|
size={theme.icon.size.md}
|
|
color={
|
|
highlighting === 'blue'
|
|
? theme.color.blue
|
|
: highlighting === 'red'
|
|
? theme.font.color.danger
|
|
: theme.font.color.tertiary
|
|
}
|
|
/>
|
|
|
|
<span>{label}</span>
|
|
</span>
|
|
);
|
|
};
|