admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Create variants for workflow visualizer nodes (#10006)

Browse Source 
Closes https://github.com/twentyhq/core-team-issues/issues/332

- Create the success and failed variants
- Introduce the first responsive color
- Creating stories for the new variants

These components are not yet in use in the source code. If you want to
see them, launch Storybook.

| Success | Failure |
|--------|--------|
| ![CleanShot 2025-02-04 at 16 24
43@2x](https://github.com/user-attachments/assets/0dd68a8f-3914-4b6e-b2d8-43108c2f5e8c)
| ![CleanShot 2025-02-04 at 16 24
59@2x](https://github.com/user-attachments/assets/e4e408d3-29fb-4fbc-a277-044aec9b0f4b)
|
| ![CleanShot 2025-02-04 at 16 24
54@2x](https://github.com/user-attachments/assets/d565ee47-1476-475d-adf6-dadfff9c6719)
| ![CleanShot 2025-02-04 at 16 25
05@2x](https://github.com/user-attachments/assets/9a0aabcc-84d1-41e2-a5a1-7c8cb05f963f)
|
This commit is contained in:
Baptiste Devessier
2025-02-04 18:38:38 +01:00
committed by GitHub
parent 5be22413c9
commit 125a0c3419
14 changed files with 284 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-ui/src/theme/constants/AdaptiveColorsDark.ts Normal file
View File

@ -0,0 +1,8 @@
import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
export const ADAPTIVE_COLORS_DARK = {
turquoise1: THEME_COMMON.color.turquoise80,
turquoise2: THEME_COMMON.color.turquoise70,
turquoise3: THEME_COMMON.color.turquoise60,
turquoise4: THEME_COMMON.color.turquoise50,
};

8
packages/twenty-ui/src/theme/constants/AdaptiveColorsLight.ts Normal file
View File

@ -0,0 +1,8 @@
import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
export const ADAPTIVE_COLORS_LIGHT = {
turquoise1: THEME_COMMON.color.turquoise10,
turquoise2: THEME_COMMON.color.turquoise20,
turquoise3: THEME_COMMON.color.turquoise30,
turquoise4: THEME_COMMON.color.turquoise40,
};

2
packages/twenty-ui/src/theme/constants/ThemeDark.ts
View File

@ -1,3 +1,4 @@
import { ADAPTIVE_COLORS_DARK } from '@ui/theme/constants/AdaptiveColorsDark';
import { BLUR_DARK } from '@ui/theme/constants/BlurDark';
import { ILLUSTRATION_ICON_DARK } from '@ui/theme/constants/IllustrationIconDark';
import { SNACK_BAR_DARK, ThemeType } from '..';
@ -24,5 +25,6 @@ export const THEME_DARK: ThemeType = {
tag: TAG_DARK,
code: CODE_DARK,
IllustrationIcon: ILLUSTRATION_ICON_DARK,
adaptiveColors: ADAPTIVE_COLORS_DARK,
},
};

2
packages/twenty-ui/src/theme/constants/ThemeLight.ts
View File

@ -1,3 +1,4 @@
import { ADAPTIVE_COLORS_LIGHT } from '@ui/theme/constants/AdaptiveColorsLight';
import { BLUR_LIGHT } from '@ui/theme/constants/BlurLight';
import { ILLUSTRATION_ICON_LIGHT } from '@ui/theme/constants/IllustrationIconLight';
import { SNACK_BAR_LIGHT } from '@ui/theme/constants/SnackBarLight';
@ -24,5 +25,6 @@ export const THEME_LIGHT = {
tag: TAG_LIGHT,
code: CODE_LIGHT,
IllustrationIcon: ILLUSTRATION_ICON_LIGHT,
adaptiveColors: ADAPTIVE_COLORS_LIGHT,
},
};

2
packages/twenty-ui/src/theme/index.ts
View File

@ -1,5 +1,7 @@
export * from './constants/AccentDark';
export * from './constants/AccentLight';
export * from './constants/AdaptiveColorsDark';
export * from './constants/AdaptiveColorsLight';
export * from './constants/Animation';
export * from './constants/BackgroundDark';
export * from './constants/BackgroundLight';