Create a running variant for workflow diagram nodes (#10857)

- Add all the missing adaptive colors
- Create a running variant for the workflow diagram nodes
- Make the `<Loader />` be precisely `24px` large

## Demo



https://github.com/user-attachments/assets/cc9ef259-30dd-445d-b167-af35b4f9c4cc



Closes https://github.com/twentyhq/core-team-issues/issues/430
This commit is contained in:
Baptiste Devessier
2025-03-13 16:50:55 +01:00
committed by GitHub
parent b1322beac3
commit 29ead8ab69
7 changed files with 86 additions and 4 deletions

View File

@ -1,12 +1,44 @@
import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
export const ADAPTIVE_COLORS_DARK = {
green1: THEME_COMMON.color.green80,
green2: THEME_COMMON.color.green70,
green3: THEME_COMMON.color.green60,
green4: THEME_COMMON.color.green50,
turquoise1: THEME_COMMON.color.turquoise80,
turquoise2: THEME_COMMON.color.turquoise70,
turquoise3: THEME_COMMON.color.turquoise60,
turquoise4: THEME_COMMON.color.turquoise50,
sky1: THEME_COMMON.color.sky80,
sky2: THEME_COMMON.color.sky70,
sky3: THEME_COMMON.color.sky60,
sky4: THEME_COMMON.color.sky50,
blue1: THEME_COMMON.color.blue80,
blue2: THEME_COMMON.color.blue70,
blue3: THEME_COMMON.color.blue60,
blue4: THEME_COMMON.color.blue50,
red1: THEME_COMMON.color.red80,
red2: THEME_COMMON.color.red70,
red3: THEME_COMMON.color.red60,
red4: THEME_COMMON.color.red50,
orange1: THEME_COMMON.color.orange80,
orange2: THEME_COMMON.color.orange70,
orange3: THEME_COMMON.color.orange60,
orange4: THEME_COMMON.color.orange50,
yellow1: THEME_COMMON.color.yellow80,
yellow2: THEME_COMMON.color.yellow70,
yellow3: THEME_COMMON.color.yellow60,
yellow4: THEME_COMMON.color.yellow50,
pink1: THEME_COMMON.color.pink80,
pink2: THEME_COMMON.color.pink70,
pink3: THEME_COMMON.color.pink60,
pink4: THEME_COMMON.color.pink50,
purple1: THEME_COMMON.color.purple80,
purple2: THEME_COMMON.color.purple70,
purple3: THEME_COMMON.color.purple60,
purple4: THEME_COMMON.color.purple50,
gray1: THEME_COMMON.color.gray80,
gray2: THEME_COMMON.color.gray70,
gray3: THEME_COMMON.color.gray60,
gray4: THEME_COMMON.color.gray50,
};

View File

@ -1,12 +1,44 @@
import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
export const ADAPTIVE_COLORS_LIGHT = {
green1: THEME_COMMON.color.green10,
green2: THEME_COMMON.color.green20,
green3: THEME_COMMON.color.green30,
green4: THEME_COMMON.color.green40,
turquoise1: THEME_COMMON.color.turquoise10,
turquoise2: THEME_COMMON.color.turquoise20,
turquoise3: THEME_COMMON.color.turquoise30,
turquoise4: THEME_COMMON.color.turquoise40,
sky1: THEME_COMMON.color.sky10,
sky2: THEME_COMMON.color.sky20,
sky3: THEME_COMMON.color.sky30,
sky4: THEME_COMMON.color.sky40,
blue1: THEME_COMMON.color.blue10,
blue2: THEME_COMMON.color.blue20,
blue3: THEME_COMMON.color.blue30,
blue4: THEME_COMMON.color.blue40,
red1: THEME_COMMON.color.red10,
red2: THEME_COMMON.color.red20,
red3: THEME_COMMON.color.red30,
red4: THEME_COMMON.color.red40,
orange1: THEME_COMMON.color.orange10,
orange2: THEME_COMMON.color.orange20,
orange3: THEME_COMMON.color.orange30,
orange4: THEME_COMMON.color.orange40,
yellow1: THEME_COMMON.color.yellow10,
yellow2: THEME_COMMON.color.yellow20,
yellow3: THEME_COMMON.color.yellow30,
yellow4: THEME_COMMON.color.yellow40,
pink1: THEME_COMMON.color.pink10,
pink2: THEME_COMMON.color.pink20,
pink3: THEME_COMMON.color.pink30,
pink4: THEME_COMMON.color.pink40,
purple1: THEME_COMMON.color.purple10,
purple2: THEME_COMMON.color.purple20,
purple3: THEME_COMMON.color.purple30,
purple4: THEME_COMMON.color.purple40,
gray1: THEME_COMMON.color.gray10,
gray2: THEME_COMMON.color.gray20,
gray3: THEME_COMMON.color.gray30,
gray4: THEME_COMMON.color.gray40,
};