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

TWNTY-3825 - ESLint rule: const naming (#4171)

Browse Source 
* ESLint rule: const naming

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>

* refactor: Reverts changes on `twenty-server`

Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>
This commit is contained in:
gitstart-app[bot]
2024-02-25 13:52:48 +01:00
committed by GitHub
parent a108d36040
commit f543191552
184 changed files with 1121 additions and 828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/ui/theme/components/AppThemeProvider.tsx
View File

@ -1,6 +1,7 @@
import { ThemeProvider } from '@emotion/react';
import { darkTheme, lightTheme } from '@/ui/theme/constants/theme';
import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
import { useColorScheme } from '../hooks/useColorScheme';
import { useSystemColorScheme } from '../hooks/useSystemColorScheme';
@ -17,7 +18,7 @@ export const AppThemeProvider = ({ children }: AppThemeProviderProps) => {
const computedColorScheme =
colorScheme === 'System' ? systemColorScheme : colorScheme;
const theme = computedColorScheme === 'Dark' ? darkTheme : lightTheme;
const theme = computedColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT;
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

10
packages/twenty-front/src/modules/ui/theme/constants/AccentDark.ts Normal file
View File

@ -0,0 +1,10 @@
import { COLOR } from './Colors';
export const ACCENT_DARK = {
primary: COLOR.blueAccent75,
secondary: COLOR.blueAccent80,
tertiary: COLOR.blueAccent85,
quaternary: COLOR.blueAccent90,
accent3570: COLOR.blueAccent70,
accent4060: COLOR.blueAccent60,
};

10
packages/twenty-front/src/modules/ui/theme/constants/AccentLight.ts Normal file
View File

@ -0,0 +1,10 @@
import { COLOR } from './Colors';
export const ACCENT_LIGHT = {
primary: COLOR.blueAccent25,
secondary: COLOR.blueAccent20,
tertiary: COLOR.blueAccent15,
quaternary: COLOR.blueAccent10,
accent3570: COLOR.blueAccent35,
accent4060: COLOR.blueAccent40,
};

2
packages/twenty-front/src/modules/ui/theme/constants/animation.ts → packages/twenty-front/src/modules/ui/theme/constants/Animation.ts
View File

@ -1,4 +1,4 @@
export const animation = {
export const ANIMATION = {
duration: {
instant: 0.075,
fast: 0.15,

27
packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts Normal file
View File

@ -0,0 +1,27 @@
/* eslint-disable @nx/workspace-no-hardcoded-colors */
import { COLOR } from '@/ui/theme/constants/Colors';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
import { RGBA } from '@/ui/theme/constants/Rgba';
import DarkNoise from '../assets/dark-noise.jpg';
export const BACKGROUND_DARK = {
noisy: `url(${DarkNoise.toString()});`,
primary: GRAY_SCALE.gray85,
secondary: GRAY_SCALE.gray80,
tertiary: GRAY_SCALE.gray75,
quaternary: GRAY_SCALE.gray70,
danger: COLOR.red80,
transparent: {
primary: RGBA(GRAY_SCALE.gray85, 0.8),
secondary: RGBA(GRAY_SCALE.gray80, 0.8),
strong: RGBA(GRAY_SCALE.gray0, 0.14),
medium: RGBA(GRAY_SCALE.gray0, 0.1),
light: RGBA(GRAY_SCALE.gray0, 0.06),
lighter: RGBA(GRAY_SCALE.gray0, 0.03),
danger: RGBA(COLOR.red, 0.08),
},
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
};

27
packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts Normal file
View File

@ -0,0 +1,27 @@
/* eslint-disable @nx/workspace-no-hardcoded-colors */
import { COLOR } from '@/ui/theme/constants/Colors';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
import { RGBA } from '@/ui/theme/constants/Rgba';
import LightNoise from '../assets/light-noise.png';
export const BACKGROUND_LIGHT = {
noisy: `url(${LightNoise.toString()});`,
primary: GRAY_SCALE.gray0,
secondary: GRAY_SCALE.gray10,
tertiary: GRAY_SCALE.gray15,
quaternary: GRAY_SCALE.gray20,
danger: COLOR.red10,
transparent: {
primary: RGBA(GRAY_SCALE.gray0, 0.8),
secondary: RGBA(GRAY_SCALE.gray10, 0.8),
strong: RGBA(GRAY_SCALE.gray100, 0.16),
medium: RGBA(GRAY_SCALE.gray100, 0.08),
light: RGBA(GRAY_SCALE.gray100, 0.04),
lighter: RGBA(GRAY_SCALE.gray100, 0.02),
danger: RGBA(COLOR.red, 0.08),
},
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
};

2
packages/twenty-front/src/modules/ui/theme/constants/blur.ts → packages/twenty-front/src/modules/ui/theme/constants/Blur.ts
View File

@ -1,4 +1,4 @@
export const blur = {
export const BLUR = {
light: 'blur(6px)',
strong: 'blur(20px)',
};

10
packages/twenty-front/src/modules/ui/theme/constants/BorderCommon.ts Normal file
View File

@ -0,0 +1,10 @@
export const BORDER_COMMON = {
radius: {
xs: '2px',
sm: '4px',
md: '8px',
xl: '20px',
pill: '999px',
rounded: '100%',
},
};

15
packages/twenty-front/src/modules/ui/theme/constants/BorderDark.ts Normal file
View File

@ -0,0 +1,15 @@
import { BORDER_COMMON } from '@/ui/theme/constants/BorderCommon';
import { COLOR } from '@/ui/theme/constants/Colors';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
export const BORDER_DARK = {
color: {
strong: GRAY_SCALE.gray55,
medium: GRAY_SCALE.gray65,
light: GRAY_SCALE.gray70,
secondaryInverted: GRAY_SCALE.gray35,
inverted: GRAY_SCALE.gray20,
danger: COLOR.red70,
},
...BORDER_COMMON,
};

15
packages/twenty-front/src/modules/ui/theme/constants/BorderLight.ts Normal file
View File

@ -0,0 +1,15 @@
import { BORDER_COMMON } from '@/ui/theme/constants/BorderCommon';
import { COLOR } from '@/ui/theme/constants/Colors';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
export const BORDER_LIGHT = {
color: {
strong: GRAY_SCALE.gray25,
medium: GRAY_SCALE.gray20,
light: GRAY_SCALE.gray15,
secondaryInverted: GRAY_SCALE.gray50,
inverted: GRAY_SCALE.gray60,
danger: COLOR.red20,
},
...BORDER_COMMON,
};

18
packages/twenty-front/src/modules/ui/theme/constants/BoxShadowDark.ts Normal file
View File

@ -0,0 +1,18 @@
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
import { RGBA } from '@/ui/theme/constants/Rgba';
export const BOX_SHADOW_DARK = {
light: `0px 2px 4px 0px ${RGBA(
GRAY_SCALE.gray100,
0.04,
)}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
strong: `2px 4px 16px 0px ${RGBA(
GRAY_SCALE.gray100,
0.16,
)}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`,
superHeavy: `2px 4px 16px 0px ${RGBA(
GRAY_SCALE.gray100,
0.12,
)}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`,
};

21
packages/twenty-front/src/modules/ui/theme/constants/BoxShadowLight.ts Normal file
View File

@ -0,0 +1,21 @@
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
import { RGBA } from '@/ui/theme/constants/Rgba';
export const BOX_SHADOW_LIGHT = {
light: `0px 2px 4px 0px ${RGBA(
GRAY_SCALE.gray100,
0.04,
)}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
strong: `2px 4px 16px 0px ${RGBA(
GRAY_SCALE.gray100,
0.12,
)}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`,
underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`,
superHeavy: `0px 0px 8px 0px ${RGBA(
GRAY_SCALE.gray100,
0.16,
)}, 0px 8px 64px -16px ${RGBA(
GRAY_SCALE.gray100,
0.48,
)}, 0px 24px 56px -16px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
};

7
packages/twenty-front/src/modules/ui/theme/constants/Colors.ts Normal file
View File

@ -0,0 +1,7 @@
import { MAIN_COLORS } from '@/ui/theme/constants/MainColors';
import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors';
export const COLOR = {
...MAIN_COLORS,
...SECONDARY_COLORS,
};

17
packages/twenty-front/src/modules/ui/theme/constants/FontCommon.ts Normal file
View File

@ -0,0 +1,17 @@
export const FONT_COMMON = {
size: {
xxs: '0.625rem',
xs: '0.85rem',
sm: '0.92rem',
md: '1rem',
lg: '1.23rem',
xl: '1.54rem',
xxl: '1.85rem',
},
weight: {
regular: 400,
medium: 500,
semiBold: 600,
},
family: 'Inter, sans-serif',
};

16
packages/twenty-front/src/modules/ui/theme/constants/FontDark.ts Normal file
View File

@ -0,0 +1,16 @@
import { COLOR } from '@/ui/theme/constants/Colors';
import { FONT_COMMON } from '@/ui/theme/constants/FontCommon';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
export const FONT_DARK = {
color: {
primary: GRAY_SCALE.gray20,
secondary: GRAY_SCALE.gray35,
tertiary: GRAY_SCALE.gray45,
light: GRAY_SCALE.gray50,
extraLight: GRAY_SCALE.gray55,
inverted: GRAY_SCALE.gray100,
danger: COLOR.red,
},
...FONT_COMMON,
};

16
packages/twenty-front/src/modules/ui/theme/constants/FontLight.ts Normal file
View File

@ -0,0 +1,16 @@
import { COLOR } from '@/ui/theme/constants/Colors';
import { FONT_COMMON } from '@/ui/theme/constants/FontCommon';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
export const FONT_LIGHT = {
color: {
primary: GRAY_SCALE.gray60,
secondary: GRAY_SCALE.gray50,
tertiary: GRAY_SCALE.gray40,
light: GRAY_SCALE.gray35,
extraLight: GRAY_SCALE.gray30,
inverted: GRAY_SCALE.gray0,
danger: COLOR.red,
},
...FONT_COMMON,
};

22
packages/twenty-front/src/modules/ui/theme/constants/GrayScale.ts Normal file
View File

@ -0,0 +1,22 @@
/* eslint-disable @nx/workspace-no-hardcoded-colors */
export const GRAY_SCALE = {
gray100: '#000000',
gray90: '#141414',
gray85: '#171717',
gray80: '#1b1b1b',
gray75: '#1d1d1d',
gray70: '#222222',
gray65: '#292929',
gray60: '#333333',
gray55: '#4c4c4c',
gray50: '#666666',
gray45: '#818181',
gray40: '#999999',
gray35: '#b3b3b3',
gray30: '#cccccc',
gray25: '#d6d6d6',
gray20: '#ebebeb',
gray15: '#f1f1f1',
gray10: '#fcfcfc',
gray0: '#ffffff',
};

8
packages/twenty-front/src/modules/ui/theme/constants/HoverBackground.ts Normal file
View File

@ -0,0 +1,8 @@
import { css } from '@emotion/react';
export const HOVER_BACKGROUND = (props: any) => css`
transition: background 0.1s ease;
&:hover {
background: ${props.theme.background.transparent.light};
}
`;

2
packages/twenty-front/src/modules/ui/theme/constants/icon.ts → packages/twenty-front/src/modules/ui/theme/constants/Icon.ts
View File

@ -1,4 +1,4 @@
export const icon = {
export const ICON = {
size: {
sm: 14,
md: 16,

5
packages/twenty-front/src/modules/ui/theme/constants/MainColorNames.ts Normal file
View File

@ -0,0 +1,5 @@
import { MAIN_COLORS } from '@/ui/theme/constants/MainColors';
export const MAIN_COLOR_NAMES = Object.keys(MAIN_COLORS) as ThemeColor[];
export type ThemeColor = keyof typeof MAIN_COLORS;

15
packages/twenty-front/src/modules/ui/theme/constants/MainColors.ts Normal file
View File

@ -0,0 +1,15 @@
/* eslint-disable @nx/workspace-no-hardcoded-colors */
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
export const MAIN_COLORS = {
green: '#55ef3c',
turquoise: '#15de8f',
sky: '#00e0ff',
blue: '#1961ed',
purple: '#915ffd',
pink: '#f54bd0',
red: '#f83e3e',
orange: '#ff7222',
yellow: '#ffd338',
gray: GRAY_SCALE.gray30,
};

1
packages/twenty-front/src/modules/ui/theme/constants/MobileViewport.ts Normal file
View File

@ -0,0 +1 @@
export const MOBILE_VIEWPORT = 768;

2
packages/twenty-front/src/modules/ui/theme/constants/modal.ts → packages/twenty-front/src/modules/ui/theme/constants/Modal.ts
View File

@ -1,4 +1,4 @@
export const modal = {
export const MODAL = {
size: {
sm: '300px',
md: '400px',

9
packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts Normal file
View File

@ -0,0 +1,9 @@
import { css } from '@emotion/react';
import { ThemeType } from './ThemeLight';
export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
backdrop-filter: blur(8px);
background: ${props.theme.background.transparent.secondary};
box-shadow: ${props.theme.boxShadow.strong};
`;

8
packages/twenty-front/src/modules/ui/theme/constants/Rgba.ts Normal file
View File

@ -0,0 +1,8 @@
/* eslint-disable @nx/workspace-no-hardcoded-colors */
import hexRgb from 'hex-rgb';
export const RGBA = (hex: string, alpha: number) => {
return `rgba(${hexRgb(hex, { format: 'array' })
.slice(0, -1)
.join(',')},${alpha})`;
};

69
packages/twenty-front/src/modules/ui/theme/constants/colors.ts → packages/twenty-front/src/modules/ui/theme/constants/SecondaryColors.ts
View File

@ -1,46 +1,7 @@
/* eslint-disable @nx/workspace-no-hardcoded-colors */
import hexRgb from 'hex-rgb';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
export const grayScale = {
gray100: '#000000',
gray90: '#141414',
gray85: '#171717',
gray80: '#1b1b1b',
gray75: '#1d1d1d',
gray70: '#222222',
gray65: '#292929',
gray60: '#333333',
gray55: '#4c4c4c',
gray50: '#666666',
gray45: '#818181',
gray40: '#999999',
gray35: '#b3b3b3',
gray30: '#cccccc',
gray25: '#d6d6d6',
gray20: '#ebebeb',
gray15: '#f1f1f1',
gray10: '#fcfcfc',
gray0: '#ffffff',
};
export const mainColors = {
green: '#55ef3c',
turquoise: '#15de8f',
sky: '#00e0ff',
blue: '#1961ed',
purple: '#915ffd',
pink: '#f54bd0',
red: '#f83e3e',
orange: '#ff7222',
yellow: '#ffd338',
gray: grayScale.gray30,
};
export type ThemeColor = keyof typeof mainColors;
export const mainColorNames = Object.keys(mainColors) as ThemeColor[];
export const secondaryColors = {
export const SECONDARY_COLORS = {
yellow80: '#2e2a1a',
yellow70: '#453d1e',
yellow60: '#746224',
@ -122,14 +83,14 @@ export const secondaryColors = {
orange20: '#ffe3d3',
orange10: '#fff1e9',
gray80: grayScale.gray70,
gray70: grayScale.gray65,
gray60: grayScale.gray55,
gray50: grayScale.gray40,
gray40: grayScale.gray25,
gray30: grayScale.gray20,
gray20: grayScale.gray15,
gray10: grayScale.gray10,
gray80: GRAY_SCALE.gray70,
gray70: GRAY_SCALE.gray65,
gray60: GRAY_SCALE.gray55,
gray50: GRAY_SCALE.gray40,
gray40: GRAY_SCALE.gray25,
gray30: GRAY_SCALE.gray20,
gray20: GRAY_SCALE.gray15,
gray10: GRAY_SCALE.gray10,
blueAccent90: '#141a25',
blueAccent85: '#151d2e',
blueAccent80: '#152037',
@ -143,13 +104,3 @@ export const secondaryColors = {
blueAccent15: '#edf2fe',
blueAccent10: '#f5f9fd',
};
export const color = {
...mainColors,
...secondaryColors,
};
export const rgba = (hex: string, alpha: number) => {
const rgb = hexRgb(hex, { format: 'array' }).slice(0, -1).join(',');
return `rgba(${rgb},${alpha})`;
};

28
packages/twenty-front/src/modules/ui/theme/constants/TagDark.ts Normal file
View File

@ -0,0 +1,28 @@
import { COLOR } from '@/ui/theme/constants/Colors';
export const TAG_DARK = {
text: {
green: COLOR.green10,
turquoise: COLOR.turquoise10,
sky: COLOR.sky10,
blue: COLOR.blue10,
purple: COLOR.purple10,
pink: COLOR.pink10,
red: COLOR.red10,
orange: COLOR.orange10,
yellow: COLOR.yellow10,
gray: COLOR.gray10,
},
background: {
green: COLOR.green60,
turquoise: COLOR.turquoise60,
sky: COLOR.sky60,
blue: COLOR.blue60,
purple: COLOR.purple60,
pink: COLOR.pink60,
red: COLOR.red60,
orange: COLOR.orange60,
yellow: COLOR.yellow60,
gray: COLOR.gray60,
},
};

28
packages/twenty-front/src/modules/ui/theme/constants/TagLight.ts Normal file
View File

@ -0,0 +1,28 @@
import { COLOR } from './Colors';
export const TAG_LIGHT = {
text: {
green: COLOR.green60,
turquoise: COLOR.turquoise60,
sky: COLOR.sky60,
blue: COLOR.blue60,
purple: COLOR.purple60,
pink: COLOR.pink60,
red: COLOR.red60,
orange: COLOR.orange60,
yellow: COLOR.yellow60,
gray: COLOR.gray60,
},
background: {
green: COLOR.green20,
turquoise: COLOR.turquoise20,
sky: COLOR.sky20,
blue: COLOR.blue20,
purple: COLOR.purple20,
pink: COLOR.pink20,
red: COLOR.red20,
orange: COLOR.orange20,
yellow: COLOR.yellow20,
gray: COLOR.gray20,
},
};

2
packages/twenty-front/src/modules/ui/theme/constants/text.ts → packages/twenty-front/src/modules/ui/theme/constants/Text.ts
View File

@ -1,4 +1,4 @@
export const text = {
export const TEXT = {
lineHeight: {
lg: 1.5,
md: 1.2,

17
packages/twenty-front/src/modules/ui/theme/constants/effects.ts → packages/twenty-front/src/modules/ui/theme/constants/TextInputStyle.ts
View File

@ -1,14 +1,8 @@
import { css } from '@emotion/react';
import { ThemeType } from './theme';
import { ThemeType } from './ThemeLight';
export const overlayBackground = (props: { theme: ThemeType }) => css`
backdrop-filter: blur(8px);
background: ${props.theme.background.transparent.secondary};
box-shadow: ${props.theme.boxShadow.strong};
`;
export const textInputStyle = (props: { theme: ThemeType }) => css`
export const TEXT_INPUT_STYLE = (props: { theme: ThemeType }) => css`
background-color: transparent;
border: none;
color: ${props.theme.font.color.primary};
@ -25,10 +19,3 @@ export const textInputStyle = (props: { theme: ThemeType }) => css`
font-weight: ${props.theme.font.weight.medium};
}
`;
export const hoverBackground = (props: any) => css`
transition: background 0.1s ease;
&:hover {
background: ${props.theme.background.transparent.light};
}
`;

44
packages/twenty-front/src/modules/ui/theme/constants/ThemeCommon.ts Normal file
View File

@ -0,0 +1,44 @@
/* eslint-disable @nx/workspace-no-hardcoded-colors */
import { ANIMATION } from '@/ui/theme/constants/Animation';
import { BLUR } from '@/ui/theme/constants/Blur';
import { COLOR } from '@/ui/theme/constants/Colors';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
import { ICON } from '@/ui/theme/constants/Icon';
import { MODAL } from '@/ui/theme/constants/Modal';
import { TEXT } from '@/ui/theme/constants/Text';
export const THEME_COMMON = {
color: COLOR,
grayScale: GRAY_SCALE,
icon: ICON,
modal: MODAL,
text: TEXT,
blur: BLUR,
animation: ANIMATION,
snackBar: {
success: {
background: '#16A26B',
color: '#D0F8E9',
},
error: {
background: '#B43232',
color: '#FED8D8',
},
info: {
background: COLOR.gray80,
color: GRAY_SCALE.gray0,
},
},
spacingMultiplicator: 4,
spacing: (...args: number[]) =>
args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),
betweenSiblingsGap: `2px`,
table: {
horizontalCellMargin: '8px',
checkboxColumnWidth: '32px',
horizontalCellPadding: '8px',
},
rightDrawerWidth: '500px',
clickableElementBackgroundTransition: 'background 0.1s ease',
lastLayerZIndex: 2147483647,
};

21
packages/twenty-front/src/modules/ui/theme/constants/ThemeDark.ts Normal file
View File

@ -0,0 +1,21 @@
import { ACCENT_DARK } from '@/ui/theme/constants/AccentDark';
import { BACKGROUND_DARK } from '@/ui/theme/constants/BackgroundDark';
import { BORDER_DARK } from '@/ui/theme/constants/BorderDark';
import { BOX_SHADOW_DARK } from '@/ui/theme/constants/BoxShadowDark';
import { FONT_DARK } from '@/ui/theme/constants/FontDark';
import { TAG_DARK } from '@/ui/theme/constants/TagDark';
import { THEME_COMMON } from '@/ui/theme/constants/ThemeCommon';
import { ThemeType } from '@/ui/theme/constants/ThemeLight';
export const THEME_DARK: ThemeType = {
...THEME_COMMON,
...{
accent: ACCENT_DARK,
background: BACKGROUND_DARK,
border: BORDER_DARK,
tag: TAG_DARK,
boxShadow: BOX_SHADOW_DARK,
font: FONT_DARK,
name: 'dark',
},
};

22
packages/twenty-front/src/modules/ui/theme/constants/ThemeLight.ts Normal file
View File

@ -0,0 +1,22 @@
import { ACCENT_LIGHT } from '@/ui/theme/constants/AccentLight';
import { BACKGROUND_LIGHT } from '@/ui/theme/constants/BackgroundLight';
import { BORDER_LIGHT } from '@/ui/theme/constants/BorderLight';
import { BOX_SHADOW_LIGHT } from '@/ui/theme/constants/BoxShadowLight';
import { FONT_LIGHT } from '@/ui/theme/constants/FontLight';
import { TAG_LIGHT } from '@/ui/theme/constants/TagLight';
import { THEME_COMMON } from '@/ui/theme/constants/ThemeCommon';
export const THEME_LIGHT = {
...THEME_COMMON,
...{
accent: ACCENT_LIGHT,
background: BACKGROUND_LIGHT,
border: BORDER_LIGHT,
tag: TAG_LIGHT,
boxShadow: BOX_SHADOW_LIGHT,
font: FONT_LIGHT,
name: 'light',
},
};
export type ThemeType = typeof THEME_LIGHT;

19
packages/twenty-front/src/modules/ui/theme/constants/accent.ts
View File

@ -1,19 +0,0 @@
import { color } from './colors';
export const accentLight = {
primary: color.blueAccent25,
secondary: color.blueAccent20,
tertiary: color.blueAccent15,
quaternary: color.blueAccent10,
accent3570: color.blueAccent35,
accent4060: color.blueAccent40,
};
export const accentDark = {
primary: color.blueAccent75,
secondary: color.blueAccent80,
tertiary: color.blueAccent85,
quaternary: color.blueAccent90,
accent3570: color.blueAccent70,
accent4060: color.blueAccent60,
};

47
packages/twenty-front/src/modules/ui/theme/constants/background.ts
View File

@ -1,47 +0,0 @@
/* eslint-disable @nx/workspace-no-hardcoded-colors */
import DarkNoise from '../assets/dark-noise.jpg';
import LightNoise from '../assets/light-noise.png';
import { color, grayScale, rgba } from './colors';
export const backgroundLight = {
noisy: `url(${LightNoise.toString()});`,
primary: grayScale.gray0,
secondary: grayScale.gray10,
tertiary: grayScale.gray15,
quaternary: grayScale.gray20,
danger: color.red10,
transparent: {
primary: rgba(grayScale.gray0, 0.8),
secondary: rgba(grayScale.gray10, 0.8),
strong: rgba(grayScale.gray100, 0.16),
medium: rgba(grayScale.gray100, 0.08),
light: rgba(grayScale.gray100, 0.04),
lighter: rgba(grayScale.gray100, 0.02),
danger: rgba(color.red, 0.08),
},
overlay: rgba(grayScale.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
};
export const backgroundDark = {
noisy: `url(${DarkNoise.toString()});`,
primary: grayScale.gray85,
secondary: grayScale.gray80,
tertiary: grayScale.gray75,
quaternary: grayScale.gray70,
danger: color.red80,
transparent: {
primary: rgba(grayScale.gray85, 0.8),
secondary: rgba(grayScale.gray80, 0.8),
strong: rgba(grayScale.gray0, 0.14),
medium: rgba(grayScale.gray0, 0.1),
light: rgba(grayScale.gray0, 0.06),
lighter: rgba(grayScale.gray0, 0.03),
danger: rgba(color.red, 0.08),
},
overlay: rgba(grayScale.gray80, 0.8),
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
};

36
packages/twenty-front/src/modules/ui/theme/constants/border.ts
View File

@ -1,36 +0,0 @@
import { color, grayScale } from './colors';
const common = {
radius: {
xs: '2px',
sm: '4px',
md: '8px',
xl: '20px',
pill: '999px',
rounded: '100%',
},
};
export const borderLight = {
color: {
strong: grayScale.gray25,
medium: grayScale.gray20,
light: grayScale.gray15,
secondaryInverted: grayScale.gray50,
inverted: grayScale.gray60,
danger: color.red20,
},
...common,
};
export const borderDark = {
color: {
strong: grayScale.gray55,
medium: grayScale.gray65,
light: grayScale.gray70,
secondaryInverted: grayScale.gray35,
inverted: grayScale.gray20,
danger: color.red70,
},
...common,
};

36
packages/twenty-front/src/modules/ui/theme/constants/boxShadow.ts
View File

@ -1,36 +0,0 @@
import { grayScale, rgba } from './colors';
export const boxShadowLight = {
light: `0px 2px 4px 0px ${rgba(
grayScale.gray100,
0.04,
)}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
strong: `2px 4px 16px 0px ${rgba(
grayScale.gray100,
0.12,
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
superHeavy: `0px 0px 8px 0px ${rgba(
grayScale.gray100,
0.16,
)}, 0px 8px 64px -16px ${rgba(
grayScale.gray100,
0.48,
)}, 0px 24px 56px -16px ${rgba(grayScale.gray100, 0.08)}`,
};
export const boxShadowDark = {
light: `0px 2px 4px 0px ${rgba(
grayScale.gray100,
0.04,
)}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
strong: `2px 4px 16px 0px ${rgba(
grayScale.gray100,
0.16,
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
superHeavy: `2px 4px 16px 0px ${rgba(
grayScale.gray100,
0.12,
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
};

45
packages/twenty-front/src/modules/ui/theme/constants/font.ts
View File

@ -1,45 +0,0 @@
import { color, grayScale } from './colors';
const common = {
size: {
xxs: '0.625rem',
xs: '0.85rem',
sm: '0.92rem',
md: '1rem',
lg: '1.23rem',
xl: '1.54rem',
xxl: '1.85rem',
},
weight: {
regular: 400,
medium: 500,
semiBold: 600,
},
family: 'Inter, sans-serif',
};
export const fontLight = {
color: {
primary: grayScale.gray60,
secondary: grayScale.gray50,
tertiary: grayScale.gray40,
light: grayScale.gray35,
extraLight: grayScale.gray30,
inverted: grayScale.gray0,
danger: color.red,
},
...common,
};
export const fontDark = {
color: {
primary: grayScale.gray20,
secondary: grayScale.gray35,
tertiary: grayScale.gray45,
light: grayScale.gray50,
extraLight: grayScale.gray55,
inverted: grayScale.gray100,
danger: color.red,
},
...common,
};

55
packages/twenty-front/src/modules/ui/theme/constants/tag.ts
View File

@ -1,55 +0,0 @@
import { color } from './colors';
export const tagLight = {
text: {
green: color.green60,
turquoise: color.turquoise60,
sky: color.sky60,
blue: color.blue60,
purple: color.purple60,
pink: color.pink60,
red: color.red60,
orange: color.orange60,
yellow: color.yellow60,
gray: color.gray60,
},
background: {
green: color.green20,
turquoise: color.turquoise20,
sky: color.sky20,
blue: color.blue20,
purple: color.purple20,
pink: color.pink20,
red: color.red20,
orange: color.orange20,
yellow: color.yellow20,
gray: color.gray20,
},
};
export const tagDark = {
text: {
green: color.green10,
turquoise: color.turquoise10,
sky: color.sky10,
blue: color.blue10,
purple: color.purple10,
pink: color.pink10,
red: color.red10,
orange: color.orange10,
yellow: color.yellow10,
gray: color.gray10,
},
background: {
green: color.green60,
turquoise: color.turquoise60,
sky: color.sky60,
blue: color.blue60,
purple: color.purple60,
pink: color.pink60,
red: color.red60,
orange: color.orange60,
yellow: color.yellow60,
gray: color.gray60,
},
};

78
packages/twenty-front/src/modules/ui/theme/constants/theme.ts
View File

@ -1,78 +0,0 @@
/* eslint-disable @nx/workspace-no-hardcoded-colors */
import { accentDark, accentLight } from './accent';
import { animation } from './animation';
import { backgroundDark, backgroundLight } from './background';
import { blur } from './blur';
import { borderDark, borderLight } from './border';
import { boxShadowDark, boxShadowLight } from './boxShadow';
import { color, grayScale } from './colors';
import { fontDark, fontLight } from './font';
import { icon } from './icon';
import { modal } from './modal';
import { tagDark, tagLight } from './tag';
import { text } from './text';
const common = {
color: color,
grayScale: grayScale,
icon: icon,
modal: modal,
text: text,
blur: blur,
animation: animation,
snackBar: {
success: {
background: '#16A26B',
color: '#D0F8E9',
},
error: {
background: '#B43232',
color: '#FED8D8',
},
info: {
background: color.gray80,
color: grayScale.gray0,
},
},
spacingMultiplicator: 4,
spacing: (...args: number[]) =>
args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),
betweenSiblingsGap: `2px`,
table: {
horizontalCellMargin: '8px',
checkboxColumnWidth: '32px',
horizontalCellPadding: '8px',
},
rightDrawerWidth: '500px',
clickableElementBackgroundTransition: 'background 0.1s ease',
lastLayerZIndex: 2147483647,
};
export const lightTheme = {
...common,
...{
accent: accentLight,
background: backgroundLight,
border: borderLight,
tag: tagLight,
boxShadow: boxShadowLight,
font: fontLight,
name: 'light',
},
};
export type ThemeType = typeof lightTheme;
export const darkTheme: ThemeType = {
...common,
...{
accent: accentDark,
background: backgroundDark,
border: borderDark,
tag: tagDark,
boxShadow: boxShadowDark,
font: fontDark,
name: 'dark',
},
};
export const MOBILE_VIEWPORT = 768;

7
packages/twenty-front/src/modules/ui/theme/utils/themeColorSchema.ts
View File

@ -1,7 +1,10 @@
import { z } from 'zod';
import { mainColorNames, ThemeColor } from '../constants/colors';
import {
MAIN_COLOR_NAMES,
ThemeColor,
} from '@/ui/theme/constants/MainColorNames';
export const themeColorSchema = z.enum(
mainColorNames as [ThemeColor, ...ThemeColor[]],
MAIN_COLOR_NAMES as [ThemeColor, ...ThemeColor[]],
);