133 lines
3.2 KiB
TypeScript
133 lines
3.2 KiB
TypeScript
import { css } from '@emotion/react';
|
|
|
|
import DarkNoise from './dark-noise.jpg';
|
|
import LightNoise from './light-noise.jpg';
|
|
|
|
const commonTheme = {
|
|
fontSizeExtraSmall: '0.85rem',
|
|
fontSizeSmall: '0.92rem',
|
|
fontSizeMedium: '1rem',
|
|
fontSizeLarge: '1.08rem',
|
|
|
|
iconSizeSmall: '0.92rem',
|
|
iconSizeMedium: '1.08rem',
|
|
iconSizeLarge: '1.23rem',
|
|
|
|
fontWeightBold: 500,
|
|
fontFamily: 'Inter, sans-serif',
|
|
|
|
spacing: (multiplicator: number) => `${multiplicator * 4}px`,
|
|
|
|
table: {
|
|
horizontalCellMargin: '8px',
|
|
},
|
|
|
|
borderRadius: '4px',
|
|
};
|
|
|
|
const lightThemeSpecific = {
|
|
noisyBackground: `url(${LightNoise.toString()});`,
|
|
|
|
primaryBackground: '#fff',
|
|
secondaryBackground: '#fcfcfc',
|
|
tertiaryBackground: '#f5f5f5',
|
|
quaternaryBackground: '#ebebeb',
|
|
|
|
pinkBackground: '#ffe5f4',
|
|
greenBackground: '#e6fff2',
|
|
purpleBackground: '#e0e0ff',
|
|
yellowBackground: '#fff2e7',
|
|
|
|
secondaryBackgroundTransparent: 'rgba(252, 252, 252, 0.8)',
|
|
|
|
primaryBorder: 'rgba(0, 0, 0, 0.08)',
|
|
lightBorder: '#f5f5f5',
|
|
|
|
clickableElementBackgroundHover: 'rgba(0, 0, 0, 0.04)',
|
|
clickableElementBackgroundTransition: 'background 0.1s ease',
|
|
|
|
text100: '#000',
|
|
text80: '#333333',
|
|
text60: '#666',
|
|
text40: '#999999',
|
|
text30: '#b3b3b3',
|
|
text20: '#cccccc',
|
|
text0: '#fff',
|
|
|
|
blue: '#1961ed',
|
|
pink: '#cc0078',
|
|
green: '#1e7e50',
|
|
purple: '#1111b7',
|
|
yellow: '#cc660a',
|
|
red: '#ff2e3f',
|
|
|
|
blueHighTransparency: 'rgba(25, 97, 237, 0.03)',
|
|
blueLowTransparency: 'rgba(25, 97, 237, 0.32)',
|
|
};
|
|
|
|
const darkThemeSpecific: typeof lightThemeSpecific = {
|
|
noisyBackground: `url(${DarkNoise.toString()});`,
|
|
primaryBackground: '#141414',
|
|
secondaryBackground: '#171717',
|
|
tertiaryBackground: '#1B1B1B',
|
|
quaternaryBackground: '#1D1D1D',
|
|
|
|
pinkBackground: '#cc0078',
|
|
greenBackground: '#1e7e50',
|
|
purpleBackground: '#1111b7',
|
|
yellowBackground: '#cc660a',
|
|
|
|
secondaryBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
|
|
|
|
clickableElementBackgroundHover: 'rgba(0, 0, 0, 0.04)',
|
|
clickableElementBackgroundTransition: 'background 0.1s ease',
|
|
|
|
primaryBorder: 'rgba(255, 255, 255, 0.08)',
|
|
lightBorder: '#222222',
|
|
|
|
text100: '#ffffff',
|
|
text80: '#cccccc',
|
|
text60: '#999',
|
|
text40: '#666',
|
|
text30: '#4c4c4c',
|
|
text20: '#333333',
|
|
text0: '#000',
|
|
|
|
blue: '#6895ec',
|
|
pink: '#ffe5f4',
|
|
green: '#e6fff2',
|
|
purple: '#e0e0ff',
|
|
yellow: '#fff2e7',
|
|
red: '#ff2e3f',
|
|
|
|
blueHighTransparency: 'rgba(104, 149, 236, 0.03)',
|
|
blueLowTransparency: 'rgba(104, 149, 236, 0.32)',
|
|
};
|
|
|
|
export const overlayBackground = (props: any) =>
|
|
css`
|
|
background: ${props.theme.secondaryBackgroundTransparent};
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
|
|
`;
|
|
|
|
export const textInputStyle = (props: any) =>
|
|
css`
|
|
border: none;
|
|
outline: none;
|
|
background-color: transparent;
|
|
color: ${props.theme.text80};
|
|
|
|
&::placeholder,
|
|
&::-webkit-input-placeholder {
|
|
font-family: ${props.theme.fontFamily};
|
|
color: ${props.theme.text30};
|
|
font-weight: ${props.theme.fontWeightBold};
|
|
}
|
|
`;
|
|
|
|
export const lightTheme = { ...commonTheme, ...lightThemeSpecific };
|
|
export const darkTheme = { ...commonTheme, ...darkThemeSpecific };
|
|
|
|
export type ThemeType = typeof lightTheme;
|