mirror of
https://github.com/Redocly/redoc.git
synced 2025-08-08 06:04:56 +03:00
begin modifying theme for OT brand
This commit is contained in:
Jason Ibrahim
Jason Ibrahim
parent
5ecd0c7fff
commit
d472dff9a8
|
|
@ -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,
|
||||
}}
|
||||
>
|
||||
<MenuItems items={store.items} onActivate={this.activate} root={true} />
|
||||
<MenuItems items={store.items} onActivate={this.activate} root={true}/>
|
||||
<RedocAttribution>
|
||||
<a target="_blank" href="https://github.com/Rebilly/ReDoc">
|
||||
Documentation Powered by ReDoc
|
||||
<a target="_blank" href="https://www.opentext.com/">
|
||||
© Copyright 2019 OpenText Corp
|
||||
</a>
|
||||
</RedocAttribution>
|
||||
</PerfectScrollbarWrap>
|
||||
|
|
|
|||
80
src/theme.ts
80
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()}`,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user