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

feat: implement new SnackBar design (#5515)

Browse Source 
Closes #5383

## Light theme

<img width="905" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/ab0683c5-ded3-420c-ace6-684d38794a2d">

## Dark theme

<img width="903" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/4e43ca35-438d-4ba0-8388-1f061c6ccfb0">
This commit is contained in:
Thaïs
2024-05-23 12:19:50 +02:00
committed by GitHub
parent 453525ca25
commit 8019ba8782
53 changed files with 485 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { MAIN_COLORS } from '@/ui/theme/constants/MainColors';
import { MAIN_COLORS } from 'twenty-ui';
import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors';
export const COLOR = {

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

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

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

@ -1,15 +0,0 @@
/* 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,
};

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

@ -1,6 +1,5 @@
import { css } from '@emotion/react';
import { ThemeType } from './ThemeLight';
import { ThemeType } from 'twenty-ui';
export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);

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

@ -1,6 +1,5 @@
import { css } from '@emotion/react';
import { ThemeType } from './ThemeLight';
import { ThemeType } from 'twenty-ui';
export const TEXT_INPUT_STYLE = (props: { theme: ThemeType }) => css`
background-color: transparent;

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

@ -1,21 +0,0 @@
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
View File

@ -1,22 +0,0 @@
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;