Charles Bochet
647c32ff3e
## Summary
- **Eliminate `ICON_SIZES` / `ICON_STROKES` constants**: all icon
dimensions are now resolved at runtime via
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.X)`, ensuring
values always come from computed CSS variables
- **No more consumer imports from `twenty-ui/theme`**: moved
`ColorSchemeContext`, `ColorSchemeProvider`, `ThemeColor`,
`MAIN_COLOR_NAMES`, `getNextThemeColor`, `AnimationDuration` to
`twenty-ui/theme-constants`
- **Remove `ThemeContext` / `ThemeContextProvider` / `ThemeProvider` /
`ThemeType`**: replaced across ~300 files with `themeCssVariables` (for
CSS contexts) or `resolveThemeVariable` / `resolveThemeVariableAsNumber`
(for JS runtime values)
- **Simplify provider chain**: only `ColorSchemeProvider` remains — it
toggles `light`/`dark` class on `document.documentElement` and provides
`colorScheme` via React context
- **Fix pre-existing test failures**: `useIcons.test.ts`
(non-configurable ES module spy) and
`turnRecordFilterGroupIntoGqlOperationFilter.test.ts`
(`Omit<RecordFilter, 'id'>` type mismatch)
### Theme access pattern (before → after)
| Context | Before | After |
|---------|--------|-------|
| CSS (Linaria) | `${({ theme }) => theme.font.color.primary}` |
`${themeCssVariables.font.color.primary}` |
| JS runtime (icon size, animation) | `theme.icon.size.md` /
`ICON_SIZES.md` |
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.md)` |
| Color scheme check | `theme.name === 'dark'` |
`useContext(ColorSchemeContext).colorScheme === 'dark'` |
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { Loader } from '@ui/feedback/loader/components/Loader';
|
|
import { type ThemeColor, MAIN_COLOR_NAMES } from '@ui/theme';
|
|
import { themeCssVariables } from '@ui/theme-constants';
|
|
|
|
const parseThemeColor = (color: string): ThemeColor =>
|
|
(MAIN_COLOR_NAMES as string[]).includes(color)
|
|
? (color as ThemeColor)
|
|
: 'gray';
|
|
|
|
const StyledStatus = styled.h3<{
|
|
color: ThemeColor;
|
|
weight: 'regular' | 'medium';
|
|
isLoaderVisible: boolean;
|
|
}>`
|
|
align-items: center;
|
|
background: ${({ color }) => themeCssVariables.tag.background[color]};
|
|
border-radius: ${themeCssVariables.border.radius.pill};
|
|
color: ${({ color }) => themeCssVariables.tag.text[color]};
|
|
display: inline-flex;
|
|
font-size: ${themeCssVariables.font.size.md};
|
|
font-style: normal;
|
|
font-weight: ${({ weight }) => themeCssVariables.font.weight[weight]};
|
|
gap: ${themeCssVariables.spacing[1]};
|
|
height: ${themeCssVariables.spacing[5]};
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 0
|
|
${({ isLoaderVisible }) =>
|
|
isLoaderVisible
|
|
? themeCssVariables.spacing[1]
|
|
: themeCssVariables.spacing[2]}
|
|
0 ${themeCssVariables.spacing[2]};
|
|
|
|
&:before {
|
|
background-color: ${({ color }) => themeCssVariables.tag.text[color]};
|
|
border-radius: ${themeCssVariables.border.radius.rounded};
|
|
content: '';
|
|
display: block;
|
|
flex-shrink: 0;
|
|
height: ${themeCssVariables.spacing[1]};
|
|
width: ${themeCssVariables.spacing[1]};
|
|
}
|
|
`;
|
|
|
|
const StyledContent = styled.span`
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
`;
|
|
|
|
type StatusProps = {
|
|
className?: string;
|
|
color: ThemeColor;
|
|
isLoaderVisible?: boolean;
|
|
text: string;
|
|
onClick?: () => void;
|
|
weight?: 'regular' | 'medium';
|
|
};
|
|
|
|
export const Status = ({
|
|
className,
|
|
color,
|
|
isLoaderVisible = false,
|
|
text,
|
|
onClick,
|
|
weight = 'regular',
|
|
}: StatusProps) => {
|
|
return (
|
|
<StyledStatus
|
|
className={className}
|
|
color={parseThemeColor(color)}
|
|
onClick={onClick}
|
|
weight={weight}
|
|
isLoaderVisible={isLoaderVisible}
|
|
>
|
|
<StyledContent>{text}</StyledContent>
|
|
{isLoaderVisible ? <Loader color={color} /> : null}
|
|
</StyledStatus>
|
|
);
|
|
};
|