From d472dff9a8c283ffa2568f76376e3f792de17b06 Mon Sep 17 00:00:00 2001 From: Jason Ibrahim Date: Tue, 5 Mar 2019 17:59:43 -0800 Subject: [PATCH] begin modifying theme for OT brand --- src/components/SideMenu/SideMenu.tsx | 10 ++-- src/theme.ts | 80 ++++++++++++++++------------ 2 files changed, 51 insertions(+), 39 deletions(-) diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx index bf7c8415..7530e768 100644 --- a/src/components/SideMenu/SideMenu.tsx +++ b/src/components/SideMenu/SideMenu.tsx @@ -1,10 +1,10 @@ import { observer } from 'mobx-react'; import * as React from 'react'; +import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar'; + import { IMenuItem, MenuStore } from '../../services/MenuStore'; import { MenuItems } from './MenuItems'; - -import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar'; import { RedocAttribution } from './styled.elements'; @observer @@ -21,10 +21,10 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str wheelPropagation: false, }} > - + - - Documentation Powered by ReDoc + + © Copyright 2019 OpenText Corp diff --git a/src/theme.ts b/src/theme.ts index 9d31285b..2c44cf33 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -3,8 +3,8 @@ import { darken, desaturate, lighten, readableColor, transparentize } from 'poli const defaultTheme: ThemeInterface = { spacing: { unit: 5, - sectionHorizontal: ({ spacing }) => spacing.unit * 8, - sectionVertical: ({ spacing }) => spacing.unit * 8, + sectionHorizontal: ({spacing}) => spacing.unit * 8, + sectionVertical: ({spacing}) => spacing.unit * 8, }, breakpoints: { small: '50rem', @@ -14,32 +14,32 @@ const defaultTheme: ThemeInterface = { colors: { tonalOffset: 0.3, primary: { - main: '#32329f', - light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main), - contrastText: ({ colors }) => readableColor(colors.primary.main), + main: '#232E72', + light: ({colors}) => lighten(colors.tonalOffset, colors.primary.main), + dark: ({colors}) => darken(colors.tonalOffset, colors.primary.main), + contrastText: ({colors}) => readableColor(colors.primary.main), }, success: { main: '#00aa13', - light: ({ colors }) => lighten(colors.tonalOffset, colors.success.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.success.main), - contrastText: ({ colors }) => readableColor(colors.success.main), + light: ({colors}) => lighten(colors.tonalOffset, colors.success.main), + dark: ({colors}) => darken(colors.tonalOffset, colors.success.main), + contrastText: ({colors}) => readableColor(colors.success.main), }, warning: { main: '#d4ad03', - light: ({ colors }) => lighten(colors.tonalOffset, colors.warning.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.warning.main), + light: ({colors}) => lighten(colors.tonalOffset, colors.warning.main), + dark: ({colors}) => darken(colors.tonalOffset, colors.warning.main), contrastText: '#ffffff', }, error: { main: '#e53935', - light: ({ colors }) => lighten(colors.tonalOffset, colors.error.main), - dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main), - contrastText: ({ colors }) => readableColor(colors.error.main), + light: ({colors}) => lighten(colors.tonalOffset, colors.error.main), + dark: ({colors}) => darken(colors.tonalOffset, colors.error.main), + contrastText: ({colors}) => readableColor(colors.error.main), }, text: { primary: '#333333', - secondary: ({ colors }) => lighten(colors.tonalOffset, colors.text.primary), + secondary: ({colors}) => lighten(colors.tonalOffset, colors.text.primary), }, border: { dark: 'rgba(0,0,0, 0.1)', @@ -47,20 +47,20 @@ const defaultTheme: ThemeInterface = { }, responses: { success: { - color: ({ colors }) => colors.success.main, - backgroundColor: ({ colors }) => transparentize(0.9, colors.success.main), + color: ({colors}) => colors.success.main, + backgroundColor: ({colors}) => transparentize(0.9, colors.success.main), }, error: { - color: ({ colors }) => colors.error.main, - backgroundColor: ({ colors }) => transparentize(0.9, colors.error.main), + color: ({colors}) => colors.error.main, + backgroundColor: ({colors}) => transparentize(0.9, colors.error.main), }, redirect: { color: '#ffa500', - backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.redirect.color), + backgroundColor: ({colors}) => transparentize(0.9, colors.responses.redirect.color), }, info: { color: '#87ceeb', - backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.info.color), + backgroundColor: ({colors}) => transparentize(0.9, colors.responses.info.color), }, }, http: { @@ -99,32 +99,32 @@ const defaultTheme: ThemeInterface = { fontWeightRegular: '400', fontWeightBold: '600', fontWeightLight: '300', - fontFamily: 'Roboto, sans-serif', + fontFamily: resolveFontFamily(), smoothing: 'antialiased', optimizeSpeed: true, headings: { - fontFamily: 'Montserrat, sans-serif', + fontFamily: resolveFontFamily(), fontWeight: '400', }, code: { fontSize: '13px', fontFamily: 'Courier, monospace', - lineHeight: ({ typography }) => typography.lineHeight, - fontWeight: ({ typography }) => typography.fontWeightRegular, + lineHeight: ({typography}) => typography.lineHeight, + fontWeight: ({typography}) => typography.fontWeightRegular, color: '#e53935', backgroundColor: 'rgba(38, 50, 56, 0.05)', wrap: false, }, links: { - color: ({ colors }) => colors.primary.main, - visited: ({ typography }) => typography.links.color, - hover: ({ typography }) => lighten(0.2, typography.links.color), + color: ({colors}) => colors.primary.main, + visited: ({typography}) => typography.links.color, + hover: ({typography}) => lighten(0.2, typography.links.color), }, }, menu: { width: '260px', - backgroundColor: '#fafafa', - textColor: '#333333', + backgroundColor: '#F3F6FB', + textColor: '#232E72', groupItems: { textTransform: 'uppercase', }, @@ -137,8 +137,8 @@ const defaultTheme: ThemeInterface = { }, }, logo: { - maxHeight: ({ menu }) => menu.width, - maxWidth: ({ menu }) => menu.width, + maxHeight: ({menu}) => menu.width, + maxWidth: ({menu}) => menu.width, }, rightPanel: { backgroundColor: '#263238', @@ -146,10 +146,22 @@ const defaultTheme: ThemeInterface = { textColor: '#ffffff', }, codeSample: { - backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor), + backgroundColor: ({rightPanel}) => darken(0.1, rightPanel.backgroundColor), }, }; +function resolveFontFamily() { + return '' + + '"OTSans", ' + + '-apple-system, ' + + 'system-ui, ' + + 'BlinkMacSystemFont, ' + + '"Segoe UI", Roboto, ' + + '"Helvetica Neue", ' + + 'Arial, ' + + 'sans-serif'; +} + export default defaultTheme; export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface { @@ -166,7 +178,7 @@ export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface { counter++; if (counter > 1000) { throw new Error( - `Theme probably contains cirucal dependency at ${currentPath}: ${val.toString()}`, + `Theme probably contains circular dependency at ${currentPath}: ${val.toString()}`, ); }