Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-11 03:16:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

theme fixes

Browse Source
This commit is contained in:
Anya Stasiuk 2018-11-07 15:18:26 +02:00
parent ebe8d3f68c
commit 6b07dc7fa0
12 changed files with 60 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common-elements/Tooltip.tsx
View File

@ -19,6 +19,7 @@ const Tip = styled.div`
border-radius: 4px;
padding: 0.3em 0.6em;
text-align: center;
box-shadow: 0px 0px 5px 0px rgba(204, 204, 204, 1);
`;
const Content = styled.div`

2
src/common-elements/dropdown.ts
View File

@ -39,6 +39,8 @@ export const StyledDropdown = withProps<DropdownProps>(styled(Dropdown))`
margin-top: 5px;
background: white;
box-sizing: border-box;
&:hover {
border-color: ${props => props.theme.colors.primary.main};
color: ${props => props.theme.colors.primary.main};

2
src/common-elements/headers.ts
View File

@ -8,7 +8,7 @@ const headerFontSize = {
export const headerCommonMixin = level => css`
font-family: ${props => props.theme.typography.headings.fontFamily};
font-weight: 400;
font-weight: ${({ theme }) => theme.typography.headings.fontWeight};
font-size: ${headerFontSize[level]};
`;

3
src/common-elements/panels.ts
View File

@ -1,5 +1,6 @@
import { SECTION_ATTR } from '../services/MenuStore';
import styled, { media, withProps } from '../styled-components';
import { darken } from 'polished';
export const MiddlePanel = styled.div`
width: calc(100% - ${props => props.theme.rightPanel.width});
@ -41,7 +42,7 @@ export const Section = withProps<{ underlined?: boolean }>(
export const RightPanel = styled.div`
width: ${props => props.theme.rightPanel.width};
color: #fafbfc;
color: ${({ theme }) => darken(0.01, theme.rightPanel.textColor)};
background-color: ${props => props.theme.rightPanel.backgroundColor};
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;

15
src/common-elements/tabs.ts
View File

@ -1,5 +1,6 @@
import { Tabs as ReactTabs } from 'react-tabs';
import styled from '../styled-components';
import { darken, lighten } from 'polished';
export { Tab, TabList, TabPanel } from 'react-tabs';
@ -14,14 +15,14 @@ export const Tabs = styled(ReactTabs)`
padding: 5px 10px;
display: inline-block;
background-color: rgba(0, 0, 0, 0.2);
background-color: ${({ theme }) => darken(0.05, theme.rightPanel.backgroundColor)};
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
cursor: pointer;
text-align: center;
outline: none;
color: #ccc;
color: ${({ theme }) => darken(0.2, theme.rightPanel.textColor)};
margin: 5px;
border: 1px solid #181f22;
border: 1px solid ${({ theme }) => darken(0.1, theme.rightPanel.backgroundColor)};
border-radius: 5px;
min-width: 60px;
font-size: 0.9em;
@ -29,7 +30,7 @@ export const Tabs = styled(ReactTabs)`
&.react-tabs__tab--selected {
color: ${props => props.theme.colors.text.primary};
background: #e2e2e2;
background: ${({ theme }) => lighten(0.8, theme.rightPanel.backgroundColor)};
}
&:only-child {
@ -55,7 +56,7 @@ export const Tabs = styled(ReactTabs)`
}
}
> .react-tabs__tab-panel {
background: #171e21;
background: ${({ theme }) => theme.codeSample.backgroundColor};
& > div,
& > pre {
padding: 20px;
@ -74,7 +75,7 @@ export const SmallTabs = styled(Tabs)`
font-size: 13px;
font-weight: normal;
border-bottom: 1px dashed;
color: #787b7d;
color: ${({ theme }) => darken(0.55, theme.rightPanel.textColor)};
border-radius: 0;
background: none;
@ -83,7 +84,7 @@ export const SmallTabs = styled(Tabs)`
}
&.react-tabs__tab--selected {
color: #babcbf;
color: ${({ theme }) => darken(0.25, theme.rightPanel.textColor)};
background: none;
}
}

3
src/components/Endpoint/styled.elements.ts
View File

@ -17,7 +17,8 @@ export const ServerRelativeURL = styled.span`
export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }>(styled.div)`
padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
background-color: ${props => (props.inverted ? 'transparent' : '#222d32')};
background-color: ${props =>
props.inverted ? 'transparent' : props.theme.codeSample.backgroundColor};
display: flex;
white-space: nowrap;
align-items: center;

3
src/components/Markdown/styled.elements.tsx
View File

@ -68,6 +68,7 @@ export const StyledMarkdownBlock = withProps<{ compact?: boolean; inline?: boole
border: 1px solid rgba(38, 50, 56, 0.1);
padding: 0.1em 0.25em 0.2em;
font-size: ${props => props.theme.typography.code.fontSize};
font-weight: ${({ theme }) => theme.typography.code.fontWeight};
word-break: break-word;
}
@ -135,7 +136,7 @@ export const StyledMarkdownBlock = withProps<{ compact?: boolean; inline?: boole
border-top: 1px solid #ccc;
&:nth-child(2n) {
background-color: #f8f8f8;
background-color: ${({ theme }) => theme.schema.nestedBackground};
}
}

6
src/components/PayloadSamples/styled.elements.ts
View File

@ -13,7 +13,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
margin-left: 10px;
text-transform: none;
font-size: 0.929em;
border-bottom: 1px solid rgba(255, 255, 255, 0.9);
border-bottom: 1px solid ${({ theme }) => theme.rightPanel.textColor};
margin: 0 0 10px 0;
display: block;
@ -23,11 +23,11 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
border: none;
padding: 0 1.2em 0 0;
background: transparent;
color: rgba(255, 255, 255, 0.9);
color: ${({ theme }) => theme.rightPanel.textColor};
box-shadow: none;
.Dropdown-arrow {
border-top-color: rgba(255, 255, 255, 0.9);
border-top-color: ${({ theme }) => theme.rightPanel.textColor};
}
}
.Dropdown-menu {

9
src/components/Redoc/styled.elements.tsx
View File

@ -43,7 +43,14 @@ export const BackgroundStub = styled.div`
top: 0;
bottom: 0;
right: 0;
width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4);
width: ${({ theme }) => {
if (theme.rightPanel.width.endsWith('%')) {
const percents = parseInt(theme.rightPanel.width, 10);
return `calc((100% - ${theme.menu.width}) * ${percents / 100})`;
} else {
return theme.rightPanel.width;
}
}};
${media.lessThan('medium', true)`
display: none;
`};

8
src/components/SearchBox/styled.elements.tsx
View File

@ -1,5 +1,6 @@
import * as React from 'react';
import { darken } from 'polished';
import styled from '../../styled-components';
import { MenuItemLabel } from '../SideMenu/styled.elements';
@ -16,10 +17,11 @@ export const SearchInput = styled.input.attrs({
padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
${props => props.theme.spacing.unit * 4}px;
border: 0;
border-bottom: 1px solid #e1e1e1;
border-bottom: 1px solid ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
font-family: ${({ theme }) => theme.typography.fontFamily};
font-weight: bold;
font-size: 13px;
color: ${props => props.theme.colors.text};
color: ${props => props.theme.menu.textColor};
background-color: transparent;
outline: none;
`;
@ -44,7 +46,7 @@ export const SearchIcon = styled((props: { className?: string }) => (
width: 0.9em;
path {
fill: ${props => props.theme.colors.text};
fill: ${props => props.theme.menu.textColor};
}
`;

23
src/components/SideMenu/styled.elements.ts
View File

@ -3,6 +3,8 @@ import * as classnames from 'classnames';
import { deprecatedCss, ShelfIcon } from '../../common-elements';
import styled, { css, withProps } from '../../styled-components';
import { darken } from 'polished';
export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
className: props => `operation-type ${props.type}`,
})`
@ -61,11 +63,11 @@ export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
}
`;
function menuItemActiveBg(depth): string {
function menuItemActiveBg(depth, { theme }): string {
if (depth > 1) {
return '#e1e1e1';
return darken(0.1, theme.menu.backgroundColor);
} else if (depth === 1) {
return '#f0f0f0';
return darken(0.04, theme.menu.backgroundColor);
} else {
return '';
}
@ -97,7 +99,7 @@ export const menuItemDepth = {
font-size: 0.8em;
padding-bottom: 0;
cursor: default;
color: ${props => props.theme.colors.text.primary};
color: ${props => props.theme.menu.textColor};
`,
1: css`
font-size: 0.929em;
@ -107,7 +109,7 @@ export const menuItemDepth = {
}
`,
2: css`
color: ${props => props.theme.colors.text.primary};
color: ${props => props.theme.menu.textColor};
`,
};
@ -124,8 +126,7 @@ export const MenuItemLabel = withProps<{
}),
})`
cursor: pointer;
color: ${props =>
props.active ? props.theme.colors.primary.main : props.theme.colors.text.primary};
color: ${props => (props.active ? props.theme.colors.primary.main : props.theme.menu.textColor)};
margin: 0;
padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
${({ depth, type, theme }) =>
@ -134,12 +135,12 @@ export const MenuItemLabel = withProps<{
justify-content: space-between;
font-family: ${props => props.theme.typography.headings.fontFamily};
${props => menuItemDepth[props.depth]};
background-color: ${props => (props.active ? menuItemActiveBg(props.depth) : '')};
background-color: ${props => (props.active ? menuItemActiveBg(props.depth, props) : '')};
${props => (props.deprecated && deprecatedCss) || ''};
&:hover {
background-color: ${props => menuItemActiveBg(props.depth)};
background-color: ${props => menuItemActiveBg(props.depth, props)};
}
${ShelfIcon} {
@ -171,8 +172,8 @@ export const RedocAttribution = styled.div`
a,
a:visited,
a:hover {
color: ${theme.colors.text.primary} !important;
border-top: 1px solid #e1e1e1;
color: ${theme.menu.textColor} !important;
border-top: 1px solid ${darken(0.1, theme.menu.backgroundColor)};
padding: ${theme.spacing.unit}px 0;
display: block;
}

18
src/theme.ts
View File

@ -95,7 +95,7 @@ const defaultTheme: ThemeInterface = {
},
typography: {
fontSize: '14px',
lineHeight: '1.5',
lineHeight: '1.5em',
fontWeightRegular: '400',
fontWeightBold: '600',
fontWeightLight: '300',
@ -104,6 +104,7 @@ const defaultTheme: ThemeInterface = {
optimizeSpeed: true,
headings: {
fontFamily: 'Montserrat, sans-serif',
fontWeight: '400',
},
code: {
fontSize: '13px',
@ -116,13 +117,14 @@ const defaultTheme: ThemeInterface = {
},
links: {
color: ({ colors }) => colors.primary.main,
visited: ({ colors }) => colors.primary.main,
hover: ({ colors }) => lighten(0.2, colors.primary.main),
visited: ({ typography }) => typography.links.color,
hover: ({ typography }) => lighten(0.2, typography.links.color),
},
},
menu: {
width: '260px',
backgroundColor: '#fafafa',
textColor: '#333333',
groupItems: {
textTransform: 'uppercase',
},
@ -131,7 +133,7 @@ const defaultTheme: ThemeInterface = {
},
arrow: {
size: '1.5em',
color: theme => theme.colors.text.primary,
color: theme => theme.menu.textColor,
},
},
logo: {
@ -143,6 +145,9 @@ const defaultTheme: ThemeInterface = {
width: '40%',
textColor: '#ffffff',
},
codeSample: {
backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
},
};
export default defaultTheme;
@ -275,6 +280,7 @@ export interface ResolvedThemeInterface {
};
headings: {
fontFamily: string;
fontWeight: string;
};
links: {
@ -286,6 +292,7 @@ export interface ResolvedThemeInterface {
menu: {
width: string;
backgroundColor: string;
textColor: string;
groupItems: {
textTransform: string;
};
@ -306,6 +313,9 @@ export interface ResolvedThemeInterface {
textColor: string;
width: string;
};
codeSample: {
backgroundColor: string;
};
extensionsHook?: (name: string, props: any) => string;
}