* Begin adding show view and refactoring threads to become notes * Progress on design * Progress redesign timeline * Dropdown button, design improvement * Open comment thread edit mode in drawer * Autosave local storage and commentThreadcount * Improve display and fix missing key issue * Remove some hardcoded CSS properties * Create button * Split company show into ui/business + fix eslint * Fix font weight * Begin auto-save on edit mode * Save server-side query result to Apollo cache * Fix save behavior * Refetch timeline after creating note * Rename createCommentThreadWithComment * Improve styling * Revert "Improve styling" This reverts commit 9fbbf2db006e529330edc64f3eb8ff9ecdde6bb0. * Improve CSS styling * Bring back border radius inadvertently removed * padding adjustment * Improve blocknote design * Improve edit mode display * Remove Comments.tsx * Remove irrelevant comment stories * Removed un-necessary panel component * stop using fragment, move trash icon * Add a basic story for CompanyShow * Add a basic People show view * Fix storybook tests * Add very basic Person story * Refactor PR1 * Refactor part 2 * Refactor part 3 * Refactor part 4 * Fix tests --------- Co-authored-by: Charles Bochet <charles@twenty.com>
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
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 { text } from './text';
|
|
|
|
const common = {
|
|
color: color,
|
|
grayScale: grayScale,
|
|
icon: icon,
|
|
text: text,
|
|
blur: blur,
|
|
spacing: (multiplicator: number) => `${multiplicator * 4}px`,
|
|
table: {
|
|
horizontalCellMargin: '8px',
|
|
checkboxColumnWidth: '32px',
|
|
},
|
|
rightDrawerWidth: '500px',
|
|
clickableElementBackgroundTransition: 'background 0.1s ease',
|
|
lastLayerZIndex: 2147483647,
|
|
};
|
|
|
|
export const lightTheme = {
|
|
...common,
|
|
...{
|
|
background: backgroundLight,
|
|
border: borderLight,
|
|
boxShadow: boxShadowLight,
|
|
selectedCardHover: color.blue20,
|
|
selectedCard: color.blue10,
|
|
font: fontLight,
|
|
name: 'light',
|
|
},
|
|
};
|
|
export type ThemeType = typeof lightTheme;
|
|
|
|
export const darkTheme: ThemeType = {
|
|
...common,
|
|
...{
|
|
background: backgroundDark,
|
|
border: borderDark,
|
|
boxShadow: boxShadowDark,
|
|
selectedCardHover: color.blue70,
|
|
selectedCard: color.blue80,
|
|
font: fontDark,
|
|
name: 'dark',
|
|
},
|
|
};
|
|
|
|
export const MOBILE_VIEWPORT = 768;
|