Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-08 06:04:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

begin modifying theme for OT brand

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/SideMenu/SideMenu.tsx
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
@ -21,10 +21,10 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
wheelPropagation: false, wheelPropagation: false,
}} }}
> >
<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>

80
src/theme.ts
View File

@ -3,8 +3,8 @@ import { darken, desaturate, lighten, readableColor, transparentize } from 'poli
const defaultTheme: ThemeInterface = { const defaultTheme: ThemeInterface = {
spacing: { spacing: {
unit: 5, unit: 5,
sectionHorizontal: ({ spacing }) => spacing.unit * 8, sectionHorizontal: ({spacing}) => spacing.unit * 8,
sectionVertical: ({ spacing }) => spacing.unit * 8, sectionVertical: ({spacing}) => spacing.unit * 8,
}, },
breakpoints: { breakpoints: {
small: '50rem', small: '50rem',
@ -14,32 +14,32 @@ 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),
}, },
success: { success: {
main: '#00aa13', main: '#00aa13',
light: ({ colors }) => lighten(colors.tonalOffset, colors.success.main), light: ({colors}) => lighten(colors.tonalOffset, colors.success.main),
dark: ({ colors }) => darken(colors.tonalOffset, colors.success.main), dark: ({colors}) => darken(colors.tonalOffset, colors.success.main),
contrastText: ({ colors }) => readableColor(colors.success.main), contrastText: ({colors}) => readableColor(colors.success.main),
}, },
warning: { warning: {
main: '#d4ad03', main: '#d4ad03',
light: ({ colors }) => lighten(colors.tonalOffset, colors.warning.main), light: ({colors}) => lighten(colors.tonalOffset, colors.warning.main),
dark: ({ colors }) => darken(colors.tonalOffset, colors.warning.main), dark: ({colors}) => darken(colors.tonalOffset, colors.warning.main),
contrastText: '#ffffff', contrastText: '#ffffff',
}, },
error: { error: {
main: '#e53935', main: '#e53935',
light: ({ colors }) => lighten(colors.tonalOffset, colors.error.main), light: ({colors}) => lighten(colors.tonalOffset, colors.error.main),
dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main), dark: ({colors}) => darken(colors.tonalOffset, colors.error.main),
contrastText: ({ colors }) => readableColor(colors.error.main), contrastText: ({colors}) => readableColor(colors.error.main),
}, },
text: { text: {
primary: '#333333', primary: '#333333',
secondary: ({ colors }) => lighten(colors.tonalOffset, colors.text.primary), secondary: ({colors}) => lighten(colors.tonalOffset, colors.text.primary),
}, },
border: { border: {
dark: 'rgba(0,0,0, 0.1)', dark: 'rgba(0,0,0, 0.1)',
@ -47,20 +47,20 @@ const defaultTheme: ThemeInterface = {
}, },
responses: { responses: {
success: { success: {
color: ({ colors }) => colors.success.main, color: ({colors}) => colors.success.main,
backgroundColor: ({ colors }) => transparentize(0.9, colors.success.main), backgroundColor: ({colors}) => transparentize(0.9, colors.success.main),
}, },
error: { error: {
color: ({ colors }) => colors.error.main, color: ({colors}) => colors.error.main,
backgroundColor: ({ colors }) => transparentize(0.9, colors.error.main), backgroundColor: ({colors}) => transparentize(0.9, colors.error.main),
}, },
redirect: { redirect: {
color: '#ffa500', color: '#ffa500',
backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.redirect.color), backgroundColor: ({colors}) => transparentize(0.9, colors.responses.redirect.color),
}, },
info: { info: {
color: '#87ceeb', color: '#87ceeb',
backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.info.color), backgroundColor: ({colors}) => transparentize(0.9, colors.responses.info.color),
}, },
}, },
http: { http: {
@ -99,32 +99,32 @@ 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: {
fontSize: '13px', fontSize: '13px',
fontFamily: 'Courier, monospace', fontFamily: 'Courier, monospace',
lineHeight: ({ typography }) => typography.lineHeight, lineHeight: ({typography}) => typography.lineHeight,
fontWeight: ({ typography }) => typography.fontWeightRegular, fontWeight: ({typography}) => typography.fontWeightRegular,
color: '#e53935', color: '#e53935',
backgroundColor: 'rgba(38, 50, 56, 0.05)', backgroundColor: 'rgba(38, 50, 56, 0.05)',
wrap: false, wrap: false,
}, },
links: { links: {
color: ({ colors }) => colors.primary.main, color: ({colors}) => colors.primary.main,
visited: ({ typography }) => typography.links.color, visited: ({typography}) => typography.links.color,
hover: ({ typography }) => lighten(0.2, typography.links.color), hover: ({typography}) => lighten(0.2, typography.links.color),
}, },
}, },
menu: { menu: {
width: '260px', width: '260px',
backgroundColor: '#fafafa', backgroundColor: '#F3F6FB',
textColor: '#333333', textColor: '#232E72',
groupItems: { groupItems: {
textTransform: 'uppercase', textTransform: 'uppercase',
}, },
@ -137,8 +137,8 @@ const defaultTheme: ThemeInterface = {
}, },
}, },
logo: { logo: {
maxHeight: ({ menu }) => menu.width, maxHeight: ({menu}) => menu.width,
maxWidth: ({ menu }) => menu.width, maxWidth: ({menu}) => menu.width,
}, },
rightPanel: { rightPanel: {
backgroundColor: '#263238', backgroundColor: '#263238',
@ -146,10 +146,22 @@ const defaultTheme: ThemeInterface = {
textColor: '#ffffff', textColor: '#ffffff',
}, },
codeSample: { 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 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()}`,
); );
} }