bd2e4307d2
* feat: Add separate constants in theme for modal sizes and paddings * feat: Implement dynamic sizing and padding for Modal * feat: use dynamic modal feature for csv import * fix: Remove redundant props from spreadsheet-import * fix: use theme.spacing() instead * fix: place types to Modal.tsx, convert ternary to switch-case, give default value * fix: give px to modal sizes * enhance: add color style to modal * feat: add modal to storybook
75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
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,
|
|
},
|
|
},
|
|
spacing: (multiplicator: number) => `${multiplicator * 4}px`,
|
|
betweenSiblingsGap: `2px`,
|
|
table: {
|
|
horizontalCellMargin: '8px',
|
|
checkboxColumnWidth: '32px',
|
|
},
|
|
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;
|