Rename twenty-ui to twenty-ui-deprecated and twenty-new-ui to twenty-ui to prepare package release (#21315)

## Description

Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name
**`twenty-ui`** (v0.1.0, publishable) and renames the old package to
**`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports →
`twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates
twenty-front's `Toggle` to the new package (first consumer) as a
drop-in.

## Next steps
- Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` +
`.yarnrc.yml`), then tag `ui/v0.1.0` to publish.
- Continue migrating components from `twenty-ui-deprecated` →
`twenty-ui`.

packages/twenty-ui/src/theme/constants/AccentDark.ts

@@ -1,5 +1,5 @@
 import * as RadixColors from '@radix-ui/colors';
-import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
 
 export const ACCENT_DARK = {
   primary: COLOR_DARK.blue5,

packages/twenty-ui/src/theme/constants/AccentLight.ts

@@ -1,5 +1,5 @@
 import * as RadixColors from '@radix-ui/colors';
-import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
 
 export const ACCENT_LIGHT = {
   primary: COLOR_LIGHT.blue5,

packages/twenty-ui/src/theme/constants/Animation.ts

@@ -7,4 +7,4 @@ export const ANIMATION = {
   },
 };
 
-export type AnimationDuration = 'instant' | 'fast' | 'normal';
+export type AnimationDuration = keyof typeof ANIMATION.duration;

packages/twenty-ui/src/theme/constants/BackgroundDark.ts

@@ -1,12 +1,11 @@
-import DarkNoise from '@assets/themes/dark-noise.jpg';
 import * as RadixColors from '@radix-ui/colors';
 
-import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
 import { GRAY_SCALE_DARK } from './GrayScaleDark';
 import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
 
 export const BACKGROUND_DARK = {
-  noisy: `url(${DarkNoise.toString()})`,
+  noisy: 'var(--t-background-noisy)',
   primary: GRAY_SCALE_DARK.gray1,
   secondary: GRAY_SCALE_DARK.gray2,
   tertiary: GRAY_SCALE_DARK.gray4,

packages/twenty-ui/src/theme/constants/BackgroundLight.ts

@@ -1,12 +1,11 @@
-import LightNoise from '@assets/themes/light-noise.png';
 import * as RadixColors from '@radix-ui/colors';
 
-import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
 import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
 import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
 
 export const BACKGROUND_LIGHT = {
-  noisy: `url(${LightNoise.toString()})`,
+  noisy: 'var(--t-background-noisy)',
   primary: GRAY_SCALE_LIGHT.gray1,
   secondary: GRAY_SCALE_LIGHT.gray2,
   tertiary: GRAY_SCALE_LIGHT.gray4,

packages/twenty-ui/src/theme/constants/BorderDark.ts

@@ -1,4 +1,4 @@
-import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
 import { BORDER_COMMON } from './BorderCommon';
 import { GRAY_SCALE_DARK } from './GrayScaleDark';
 import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';

packages/twenty-ui/src/theme/constants/BorderLight.ts

@@ -1,4 +1,4 @@
-import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
 import { BORDER_COMMON } from './BorderCommon';
 import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
 import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';

packages/twenty-ui/src/theme/constants/BoxShadowDark.ts

@@ -1,4 +1,4 @@
-import { RGBA } from '@ui/theme/constants/Rgba';
+import { RGBA } from '@new-ui/theme/constants/Rgba';
 
 /* oxlint-disable twenty/no-hardcoded-colors */
 export const BOX_SHADOW_DARK = {

packages/twenty-ui/src/theme/constants/BoxShadowLight.ts

@@ -1,4 +1,4 @@
-import { GRAY_SCALE_LIGHT_ALPHA } from '@ui/theme/constants/GrayScaleLightAlpha';
+import { GRAY_SCALE_LIGHT_ALPHA } from '@new-ui/theme/constants/GrayScaleLightAlpha';
 
 export const BOX_SHADOW_LIGHT = {
   color: GRAY_SCALE_LIGHT_ALPHA.gray2,

packages/twenty-ui/src/theme/constants/CodeDark.ts

@@ -1,4 +1,4 @@
-import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
 
 export const CODE_DARK = {
   text: {

packages/twenty-ui/src/theme/constants/CodeLight.ts

@@ -1,4 +1,4 @@
-import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
 
 export const CODE_LIGHT = {
   text: {

packages/twenty-ui/src/theme/constants/FontDark.ts

@@ -1,4 +1,4 @@
-import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
 import { FONT_COMMON } from './FontCommon';
 import { GRAY_SCALE_DARK } from './GrayScaleDark';
 

packages/twenty-ui/src/theme/constants/FontLight.ts

@@ -1,4 +1,4 @@
-import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
 import { FONT_COMMON } from './FontCommon';
 import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
 

packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts

@@ -1,5 +1,5 @@
-import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
-import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark';
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
+import { GRAY_SCALE_DARK } from '@new-ui/theme/constants/GrayScaleDark';
 
 export const ILLUSTRATION_ICON_DARK = {
   color: {

packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts

@@ -1,5 +1,5 @@
-import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
-import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+import { GRAY_SCALE_LIGHT } from '@new-ui/theme/constants/GrayScaleLight';
 
 export const ILLUSTRATION_ICON_LIGHT = {
   color: {

packages/twenty-ui/src/theme/constants/MainColorsDark.ts

@@ -1,5 +1,5 @@
 import * as RadixColors from '@radix-ui/colors';
-import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark';
+import { GRAY_SCALE_DARK } from '@new-ui/theme/constants/GrayScaleDark';
 
 export const MAIN_COLORS_DARK = {
   // Reds

packages/twenty-ui/src/theme/constants/SecondaryColorsDark.ts

@@ -1,5 +1,5 @@
 import * as RadixColors from '@radix-ui/colors';
-import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark';
+import { GRAY_SCALE_DARK } from '@new-ui/theme/constants/GrayScaleDark';
 
 export const SECONDARY_COLORS_DARK = {
   yellow1: RadixColors.yellowDarkP3.yellow1,

packages/twenty-ui/src/theme/constants/SnackBarDark.ts

@@ -1,6 +1,6 @@
-import { BACKGROUND_DARK } from '@ui/theme/constants/BackgroundDark';
-import { FONT_DARK } from '@ui/theme/constants/FontDark';
-import { MAIN_COLORS_DARK } from '@ui/theme/constants/MainColorsDark';
+import { BACKGROUND_DARK } from '@new-ui/theme/constants/BackgroundDark';
+import { FONT_DARK } from '@new-ui/theme/constants/FontDark';
+import { MAIN_COLORS_DARK } from '@new-ui/theme/constants/MainColorsDark';
 
 export const SNACK_BAR_DARK = {
   success: {

packages/twenty-ui/src/theme/constants/SnackBarLight.ts

@@ -1,6 +1,6 @@
-import { BACKGROUND_LIGHT } from '@ui/theme/constants/BackgroundLight';
-import { FONT_LIGHT } from '@ui/theme/constants/FontLight';
-import { MAIN_COLORS_LIGHT } from '@ui/theme/constants/MainColorsLight';
+import { BACKGROUND_LIGHT } from '@new-ui/theme/constants/BackgroundLight';
+import { FONT_LIGHT } from '@new-ui/theme/constants/FontLight';
+import { MAIN_COLORS_LIGHT } from '@new-ui/theme/constants/MainColorsLight';
 
 export const SNACK_BAR_LIGHT = {
   success: {

packages/twenty-ui/src/theme/constants/TagDark.ts

@@ -1,4 +1,4 @@
-import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
+import { COLOR_DARK } from '@new-ui/theme/constants/ColorsDark';
 
 export const TAG_DARK = {
   text: {

packages/twenty-ui/src/theme/constants/TagLight.ts

@@ -1,4 +1,4 @@
-import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
 
 export const TAG_LIGHT = {
   text: {

packages/twenty-ui/src/theme/constants/ThemeCommon.ts

@@ -1,4 +1,4 @@
-import { ACCENT_DARK } from '@ui/theme/constants/AccentDark';
+import { ACCENT_DARK } from '@new-ui/theme/constants/AccentDark';
 import { ANIMATION } from './Animation';
 import { ICON } from './Icon';
 import { MODAL } from './Modal';

packages/twenty-ui/src/theme/constants/ThemeDark.ts

@@ -1,5 +1,5 @@
-import { BLUR_DARK } from '@ui/theme/constants/BlurDark';
-import { ILLUSTRATION_ICON_DARK } from '@ui/theme/constants/IllustrationIconDark';
+import { BLUR_DARK } from '@new-ui/theme/constants/BlurDark';
+import { ILLUSTRATION_ICON_DARK } from '@new-ui/theme/constants/IllustrationIconDark';
 import { COLOR_DARK } from './ColorsDark';
 import { GRAY_SCALE_DARK } from './GrayScaleDark';
 import { SNACK_BAR_DARK } from './SnackBarDark';

packages/twenty-ui/src/theme/constants/ThemeLight.ts

@@ -1,8 +1,8 @@
-import { BLUR_LIGHT } from '@ui/theme/constants/BlurLight';
-import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
-import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
-import { ILLUSTRATION_ICON_LIGHT } from '@ui/theme/constants/IllustrationIconLight';
-import { SNACK_BAR_LIGHT } from '@ui/theme/constants/SnackBarLight';
+import { BLUR_LIGHT } from '@new-ui/theme/constants/BlurLight';
+import { COLOR_LIGHT } from '@new-ui/theme/constants/ColorsLight';
+import { GRAY_SCALE_LIGHT } from '@new-ui/theme/constants/GrayScaleLight';
+import { ILLUSTRATION_ICON_LIGHT } from '@new-ui/theme/constants/IllustrationIconLight';
+import { SNACK_BAR_LIGHT } from '@new-ui/theme/constants/SnackBarLight';
 import { ACCENT_LIGHT } from './AccentLight';
 import { BACKGROUND_LIGHT } from './BackgroundLight';
 import { BORDER_LIGHT } from './BorderLight';

packages/twenty-ui/src/theme/constants/TransparentColorsDark.ts

@@ -1,5 +1,5 @@
 import * as RadixColors from '@radix-ui/colors';
-import { GRAY_SCALE_DARK_ALPHA } from '@ui/theme/constants/GrayScaleDarkAlpha';
+import { GRAY_SCALE_DARK_ALPHA } from '@new-ui/theme/constants/GrayScaleDarkAlpha';
 
 export const TRANSPARENT_COLORS_DARK = {
   green1: RadixColors.greenDarkA.greenA1,

packages/twenty-ui/src/theme/constants/TransparentColorsLight.ts

@@ -1,5 +1,5 @@
 import * as RadixColors from '@radix-ui/colors';
-import { GRAY_SCALE_LIGHT_ALPHA } from '@ui/theme/constants/GrayScaleLightAlpha';
+import { GRAY_SCALE_LIGHT_ALPHA } from '@new-ui/theme/constants/GrayScaleLightAlpha';
 
 export const TRANSPARENT_COLORS_LIGHT = {
   green1: RadixColors.greenA.greenA1,