Contained global styles and made themes scope static

This commit is contained in:
Filip Barl
2019-10-04 15:36:07 +02:00
parent 99f502a2b6
commit 4cac153de5
3 changed files with 1506 additions and 1501 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -1,28 +1,27 @@
import { color } from 'weaveworks-ui-components/lib/theme/selectors';
import theme from 'weaveworks-ui-components/lib/theme';
import defaultTheme from './default';
const contrastTheme = {
...defaultTheme,
/* contrast overrides */
backgroundColor: color('white'),
backgroundDarkerColor: color('purple200'),
backgroundDarkerSecondaryColor: color('purple200'),
bodyBackgroundColor: color('white'),
borderLightColor: color('gray600'),
backgroundColor: theme.colors.white,
backgroundDarkerColor: theme.colors.purple200,
backgroundDarkerSecondaryColor: theme.colors.purple200,
bodyBackgroundColor: theme.colors.white,
borderLightColor: theme.colors.gray600,
btnOpacityDefault: 1,
btnOpacityDisabled: 0.4,
btnOpacitySelected: 1,
edgeColor: color('black'),
edgeColor: theme.colors.black,
edgeHighlightOpacity: 0.3,
labelBackgroundColor: color('white'),
labelBackgroundColor: theme.colors.white,
linkOpacityDefault: 1,
nodeElementsInBackgroundOpacity: 0.4,
textColor: color('black'),
textDarkerColor: color('black'),
textSecondaryColor: color('black'),
textTertiaryColor: color('black'),
textColor: theme.colors.black,
textDarkerColor: theme.colors.black,
textSecondaryColor: theme.colors.black,
textTertiaryColor: theme.colors.black,
};
export default contrastTheme;

View File

@@ -1,30 +1,30 @@
import { color } from 'weaveworks-ui-components/lib/theme/selectors';
import theme from 'weaveworks-ui-components/lib/theme';
import { transparentize } from 'polished';
const defaultTheme = {
backgroundColor: color('gray50'),
backgroundDarkColor: color('purple900'),
backgroundDarkerColor: color('purple100'),
backgroundDarkerSecondaryColor: color('gray50'),
backgroundColor: theme.colors.gray50,
backgroundDarkColor: theme.colors.purple900,
backgroundDarkerColor: theme.colors.purple100,
backgroundDarkerSecondaryColor: theme.colors.gray50,
baseEase: 'ease-in-out',
bodyBackgroundColor: color('purple25'),
borderLightColor: color('purple100'),
bodyBackgroundColor: theme.colors.purple25,
borderLightColor: theme.colors.purple100,
btnOpacityDefault: 0.9,
btnOpacityDisabled: 0.25,
btnOpacityHover: 1,
btnOpacitySelected: 0.9,
detailsWindowPaddingLeft: '30px',
detailsWindowWidth: '420px',
edgeColor: color('purple500'),
edgeColor: theme.colors.purple500,
edgeHighlightOpacity: 0.1,
labelBackgroundColor: props => transparentize(0.3, props.theme.colors.purple25),
labelBackgroundColor: transparentize(0.3, theme.colors.purple25),
linkOpacityDefault: 0.8,
nodeElementsInBackgroundOpacity: 0.7,
terminalHeaderHeight: '44px',
textColor: color('purple800'),
textDarkerColor: color('purple900'),
textSecondaryColor: color('purple600'),
textTertiaryColor: color('purple400'),
textColor: theme.colors.purple800,
textDarkerColor: theme.colors.purple900,
textSecondaryColor: theme.colors.purple600,
textTertiaryColor: theme.colors.purple400,
timelineHeight: '55px',
};