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'` |
67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
type ContextUsageProgressRingProps = {
|
|
percentage: number;
|
|
size?: number;
|
|
strokeWidth?: number;
|
|
};
|
|
|
|
const StyledSvg = styled.svg`
|
|
transform: rotate(-90deg);
|
|
`;
|
|
|
|
const StyledBackgroundCircle = styled.circle`
|
|
fill: none;
|
|
stroke: color-mix(
|
|
in srgb,
|
|
${themeCssVariables.border.color.strong} 50%,
|
|
${themeCssVariables.background.quaternary} 50%
|
|
);
|
|
`;
|
|
|
|
const StyledProgressCircle = styled.circle`
|
|
fill: none;
|
|
transition: stroke-dashoffset 0.3s ease;
|
|
`;
|
|
|
|
export const ContextUsageProgressRing = ({
|
|
percentage,
|
|
size = 16,
|
|
strokeWidth = 2,
|
|
}: ContextUsageProgressRingProps) => {
|
|
const normalizedPercentage = Math.min(Math.max(percentage, 0), 100);
|
|
const radius = (size - strokeWidth) / 2;
|
|
const circumference = 2 * Math.PI * radius;
|
|
const strokeDashoffset =
|
|
circumference - (normalizedPercentage / 100) * circumference;
|
|
|
|
const progressColor =
|
|
normalizedPercentage > 80
|
|
? themeCssVariables.color.red
|
|
: normalizedPercentage > 60
|
|
? themeCssVariables.color.orange
|
|
: themeCssVariables.color.blue;
|
|
|
|
return (
|
|
<StyledSvg width={size} height={size}>
|
|
<StyledBackgroundCircle
|
|
cx={size / 2}
|
|
cy={size / 2}
|
|
r={radius}
|
|
strokeWidth={strokeWidth}
|
|
/>
|
|
<StyledProgressCircle
|
|
cx={size / 2}
|
|
cy={size / 2}
|
|
r={radius}
|
|
strokeWidth={strokeWidth}
|
|
style={{ stroke: progressColor }}
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={strokeDashoffset}
|
|
strokeLinecap="round"
|
|
/>
|
|
</StyledSvg>
|
|
);
|
|
};
|