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

Remove CSS modules (#6017)

Browse Source 
CSS modules were used as a first test for performance optimization.

We later found out that Linaria was a better tradeoff.

This PR removes what was implemented in CSS modules and also the CSS
theme file that was created that was overlapping with the TS theme
files.
This commit is contained in:
Lucas Bordeau
2024-06-30 21:54:11 +02:00
committed by GitHub
parent afb3f4b7b7
commit be1503c719
19 changed files with 164 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
export const BORDER_COMMON = {
radius: {
xs: '2px',
sm: 'var(--twentycrm-border-radius-sm)',
sm: '4px',
md: '8px',
xl: '20px',
pill: '999px',

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

@ -10,7 +10,7 @@ export const FONT_COMMON = {
},
weight: {
regular: 400,
medium: 'var(--twentycrm-font-weight-medium)',
medium: 500,
semiBold: 600,
},
family: 'Inter, sans-serif',

9
packages/twenty-ui/src/theme/provider/ThemeProvider.tsx
View File

@ -1,23 +1,16 @@
import { ReactNode, useEffect } from 'react';
import { ReactNode } from 'react';
import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
import { ThemeContextProvider } from '@ui/theme/provider/ThemeContextProvider';
import { ThemeType } from '..';
import './theme.css';
type ThemeProviderProps = {
theme: ThemeType;
children: ReactNode;
};
const ThemeProvider = ({ theme, children }: ThemeProviderProps) => {
useEffect(() => {
document.documentElement.className =
theme.name === 'dark' ? 'dark' : 'light';
}, [theme]);
return (
<EmotionThemeProvider theme={theme}>
<ThemeContextProvider theme={theme}>{children}</ThemeContextProvider>

93
packages/twenty-ui/src/theme/provider/theme.css
View File

@ -1,93 +0,0 @@
/*
!! DEPRECATED !!
Please do not use those variables anymore. They are deprecated and will be removed soon.
*/
:root {
--twentycrm-spacing-multiplicator: 4;
--twentycrm-border-radius-sm: 4px;
--twentycrm-font-weight-medium: 500;
/* Grays */
--twentycrm-gray-100: #000000;
--twentycrm-gray-100-4: #0000000A;
--twentycrm-gray-100-10: #00000019;
--twentycrm-gray-100-16: #00000029;
--twentycrm-gray-90: #141414;
--twentycrm-gray-85: #171717;
--twentycrm-gray-85-80: #171717CC;
--twentycrm-gray-80: #1b1b1b;
--twentycrm-gray-80-80: #1b1b1bCC;
--twentycrm-gray-75: #1d1d1d;
--twentycrm-gray-70: #222222;
--twentycrm-gray-65: #292929;
--twentycrm-gray-60: #333333;
--twentycrm-gray-55: #4c4c4c;
--twentycrm-gray-50: #666666;
--twentycrm-gray-45: #818181;
--twentycrm-gray-40: #999999;
--twentycrm-gray-35: #b3b3b3;
--twentycrm-gray-30: #cccccc;
--twentycrm-gray-25: #d6d6d6;
--twentycrm-gray-20: #ebebeb;
--twentycrm-gray-15: #f1f1f1;
--twentycrm-gray-10: #fcfcfc;
--twentycrm-gray-10-80: #fcfcfcCC;
--twentycrm-gray-0: #ffffff;
--twentycrm-gray-0-6: #ffffff0f;
--twentycrm-gray-0-10: #ffffff19;
--twentycrm-gray-0-14: #ffffff23;
/* Blues */
--twentycrm-blue-accent-90: #141a25;
--twentycrm-blue-accent-10: #f5f9fd;
}
:root.dark {
/* Accent color */
--twentycrm-accent-quaternary: var(--twentycrm-blue-accent-90);
/* Font color */
--twentycrm-font-color-secondary: var(--twentycrm-gray-35);
--twentycrm-font-color-primary: var(--twentycrm-gray-20);
--twentycrm-font-color-light: var(--twentycrm-gray-50);
--twentycrm-font-color-extra-light: var(--twentycrm-gray-55);
/* Background color */
--twentycrm-background-primary: var(--twentycrm-gray-85);
/* Background transparent color */
--twentycrm-background-transparent-secondary: var(--twentycrm-gray-80-80);
--twentycrm-background-transparent-light: var(--twentycrm-gray-0-6);
--twentycrm-background-transparent-medium: var(--twentycrm-gray-0-10);
--twentycrm-background-transparent-strong: var(--twentycrm-gray-0-14);
/* Border color */
--twentycrm-border-color-medium: var(--twentycrm-gray-65);
}
:root.light {
/* Accent color */
--twentycrm-accent-quaternary: var(--twentycrm-blue-accent-10);
/* Colors */
--twentycrm-font-color-primary: var(--twentycrm-gray-60);
--twentycrm-font-color-secondary: var(--twentycrm-gray-50);
--twentycrm-font-color-light: var(--twentycrm-gray-35);
--twentycrm-font-color-extra-light: var(--twentycrm-gray-30);
/* Background color */
--twentycrm-background-primary: var(--twentycrm-gray-0);
/* Background transparent color */
--twentycrm-background-transparent-secondary: var(--twentycrm-gray-10-80);
--twentycrm-background-transparent-light: var(--twentycrm-gray-100-4);
--twentycrm-background-transparent-medium: var(--twentycrm-gray-100-10);
--twentycrm-background-transparent-strong: var(--twentycrm-gray-100-16);
/* Border color */
--twentycrm-border-color-medium: var(--twentycrm-gray-20);
}