begin modifying theme for OT brand

This commit is contained in:
Jason Ibrahim 2019-03-05 17:59:43 -08:00 committed by Jason Ibrahim
parent 5ecd0c7fff
commit d472dff9a8
2 changed files with 51 additions and 39 deletions

View File

@ -1,10 +1,10 @@
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import * as React from 'react'; import * as React from 'react';
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
import { IMenuItem, MenuStore } from '../../services/MenuStore'; import { IMenuItem, MenuStore } from '../../services/MenuStore';
import { MenuItems } from './MenuItems'; import { MenuItems } from './MenuItems';
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
import { RedocAttribution } from './styled.elements'; import { RedocAttribution } from './styled.elements';
@observer @observer
@ -23,8 +23,8 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
> >
<MenuItems items={store.items} onActivate={this.activate} root={true}/> <MenuItems items={store.items} onActivate={this.activate} root={true}/>
<RedocAttribution> <RedocAttribution>
<a target="_blank" href="https://github.com/Rebilly/ReDoc"> <a target="_blank" href="https://www.opentext.com/">
Documentation Powered by ReDoc © Copyright 2019 OpenText Corp
</a> </a>
</RedocAttribution> </RedocAttribution>
</PerfectScrollbarWrap> </PerfectScrollbarWrap>

View File

@ -14,7 +14,7 @@ const defaultTheme: ThemeInterface = {
colors: { colors: {
tonalOffset: 0.3, tonalOffset: 0.3,
primary: { primary: {
main: '#32329f', main: '#232E72',
light: ({colors}) => lighten(colors.tonalOffset, colors.primary.main), light: ({colors}) => lighten(colors.tonalOffset, colors.primary.main),
dark: ({colors}) => darken(colors.tonalOffset, colors.primary.main), dark: ({colors}) => darken(colors.tonalOffset, colors.primary.main),
contrastText: ({colors}) => readableColor(colors.primary.main), contrastText: ({colors}) => readableColor(colors.primary.main),
@ -99,11 +99,11 @@ const defaultTheme: ThemeInterface = {
fontWeightRegular: '400', fontWeightRegular: '400',
fontWeightBold: '600', fontWeightBold: '600',
fontWeightLight: '300', fontWeightLight: '300',
fontFamily: 'Roboto, sans-serif', fontFamily: resolveFontFamily(),
smoothing: 'antialiased', smoothing: 'antialiased',
optimizeSpeed: true, optimizeSpeed: true,
headings: { headings: {
fontFamily: 'Montserrat, sans-serif', fontFamily: resolveFontFamily(),
fontWeight: '400', fontWeight: '400',
}, },
code: { code: {
@ -123,8 +123,8 @@ const defaultTheme: ThemeInterface = {
}, },
menu: { menu: {
width: '260px', width: '260px',
backgroundColor: '#fafafa', backgroundColor: '#F3F6FB',
textColor: '#333333', textColor: '#232E72',
groupItems: { groupItems: {
textTransform: 'uppercase', textTransform: 'uppercase',
}, },
@ -150,6 +150,18 @@ const defaultTheme: ThemeInterface = {
}, },
}; };
function resolveFontFamily() {
return '' +
'"OTSans", ' +
'-apple-system, ' +
'system-ui, ' +
'BlinkMacSystemFont, ' +
'"Segoe UI", Roboto, ' +
'"Helvetica Neue", ' +
'Arial, ' +
'sans-serif';
}
export default defaultTheme; export default defaultTheme;
export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface { export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface {
@ -166,7 +178,7 @@ export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface {
counter++; counter++;
if (counter > 1000) { if (counter > 1000) {
throw new Error( throw new Error(
`Theme probably contains cirucal dependency at ${currentPath}: ${val.toString()}`, `Theme probably contains circular dependency at ${currentPath}: ${val.toString()}`,
); );
} }