Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-02-07 13:30:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: big theme update

Browse Source
This commit is contained in:
Roman Hotsiy 2018-07-19 13:05:53 +03:00
parent c5a352312a
commit 58bddc8811
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
25 changed files with 343 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demo/openapi.yaml
View File

@ -5,7 +5,7 @@ servers:
- url: //petstore.swagger.io/sandbox
description: Sandbox server
info:
description: >
description: |
This is a sample server Petstore server.
You can find out more about Swagger at
@ -58,6 +58,14 @@ info:
All responses have a wildcard same-origin which makes them completely public
and accessible to everyone, including any code on any site.
```json
{
"test": "value",
"test2": "value2"
}
```
# Authentication
Petstore offers two forms of authentication:

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

@ -19,10 +19,10 @@ export const StyledDropdown = withProps<DropdownProps>(styled(Dropdown))`
display: inline-block;
position: relative;
width: auto;
font-family: ${props => props.theme.headingsFont.family};
font-family: ${props => props.theme.typography.headings.fontFamily};
.Dropdown-control {
font-family: ${props => props.theme.headingsFont.family};
font-family: ${props => props.theme.typography.headings.fontFamily};
position: relative;
font-size: .929em;
width: 100%;
@ -40,14 +40,14 @@ export const StyledDropdown = withProps<DropdownProps>(styled(Dropdown))`
background: white;
&:hover {
border-color: ${props => props.theme.colors.main};
color: ${props => props.theme.colors.main};
border-color: ${props => props.theme.colors.primary.main};
color: ${props => props.theme.colors.primary.main};
box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12);
}
}
.Dropdown-arrow {
border-color: ${props => props.theme.colors.main} transparent transparent;
border-color: ${props => props.theme.colors.primary.main} transparent transparent;
border-style: solid;
border-width: 0.35em 0.35em 0;
content: ' ';

34
src/common-elements/fields-layout.ts
View File

@ -1,4 +1,4 @@
import { transparentize } from 'polished';
// import { transparentize } from 'polished';
import styled, { extensionsHook, withProps } from '../styled-components';
import { deprecatedCss } from './mixins';
@ -7,11 +7,11 @@ export const PropertiesTableCaption = styled.caption`
text-align: right;
font-size: 0.9em;
font-weight: normal;
color: ${props => transparentize(0.6, props.theme.colors.text)};
color: ${props => props.theme.colors.text.secondary};
`;
export const PropertyCell = styled.td`
border-left: 1px solid ${props => props.theme.schemaView.linesColor};
border-left: 1px solid ${props => props.theme.schema.linesColor};
box-sizing: border-box;
position: relative;
padding: 10px 10px 10px 0;
@ -29,16 +29,16 @@ export const PropertyCell = styled.td`
to bottom,
transparent 0%,
transparent 22px,
${props => props.theme.schemaView.linesColor} 22px,
${props => props.theme.schemaView.linesColor} 100%
${props => props.theme.schema.linesColor} 22px,
${props => props.theme.schema.linesColor} 100%
);
}
tr.last > & {
background-image: linear-gradient(
to bottom,
${props => props.theme.schemaView.linesColor} 0%,
${props => props.theme.schemaView.linesColor} 22px,
${props => props.theme.schema.linesColor} 0%,
${props => props.theme.schema.linesColor} 22px,
transparent 22px,
transparent 100%
);
@ -63,7 +63,7 @@ export const PropertyNameCell = withProps<{ kind?: string }>(PropertyCell.extend
line-height: 20px;
white-space: nowrap;
font-size: 0.929em;
font-family: ${props => props.theme.headingsFont.family};
font-family: ${props => props.theme.typography.headings.fontFamily};
&.deprecated {
${deprecatedCss};
@ -77,7 +77,7 @@ export const PropertyNameCell = withProps<{ kind?: string }>(PropertyCell.extend
export const PropertyDetailsCell = styled.td`
border-bottom: 1px solid #9fb4be;
padding: 10px 0;
width: ${props => props.theme.schemaView.defaultDetailsWidth};
width: ${props => props.theme.schema.defaultDetailsWidth};
box-sizing: border-box;
tr.expanded & {
@ -86,8 +86,8 @@ export const PropertyDetailsCell = styled.td`
`;
export const PropertyBullet = styled.span`
color: ${props => props.theme.schemaView.linesColor};
font-family: ${props => props.theme.code.fontFamily};
color: ${props => props.theme.schema.linesColor};
font-family: ${props => props.theme.typography.code.fontFamily};
margin-right: 10px;
&::before {
@ -96,7 +96,7 @@ export const PropertyBullet = styled.span`
vertical-align: middle;
width: 10px;
height: 1px;
background: ${props => props.theme.schemaView.linesColor};
background: ${props => props.theme.schema.linesColor};
}
&::after {
@ -104,19 +104,19 @@ export const PropertyBullet = styled.span`
display: inline-block;
vertical-align: middle;
width: 1px;
background: ${props => props.theme.schemaView.linesColor};
background: ${props => props.theme.schema.linesColor};
height: 7px;
}
`;
export const InnerPropertiesWrap = styled.div`
padding: ${({ theme }) => theme.schemaView.nestingSpacing};
padding: ${({ theme }) => theme.schema.nestingSpacing};
`;
export const PropertiesTable = styled.table`
border-collapse: separate;
border-radius: 3px;
font-size: ${props => props.theme.baseFont.size};
font-size: ${props => props.theme.typography.fontSize};
border-spacing: 0;
width: 100%;
@ -137,9 +137,9 @@ export const PropertiesTable = styled.table`
${InnerPropertiesWrap}
${InnerPropertiesWrap}
${InnerPropertiesWrap} {
margin: ${({ theme }) => theme.schemaView.nestingSpacing};
margin: ${({ theme }) => theme.schema.nestingSpacing};
margin-right: 0;
background: #f0f0f0;
background: ${({ theme }) => theme.schema.nestedBackground};
}
&

61
src/common-elements/fields.ts
View File

@ -1,10 +1,19 @@
import { transparentize } from 'polished';
import styled from '../styled-components';
import styled, { extensionsHook } from '../styled-components';
import { PropertyNameCell } from './fields-layout';
import { ShelfIcon } from './shelfs';
export const ClickablePropertyNameCell = PropertyNameCell.extend`
cursor: pointer;
${ShelfIcon} {
height: ${({ theme }) => theme.schema.arrow.size};
width: ${({ theme }) => theme.schema.arrow.size};
polygon {
fill: ${({ theme }) => theme.schema.arrow.color};
}
}
`;
export const FieldLabel = styled.span`
@ -14,30 +23,29 @@ export const FieldLabel = styled.span`
`;
export const TypePrefix = FieldLabel.extend`
color: ${props => transparentize(0.2, props.theme.schemaView.typeNameColor)};
color: ${props => transparentize(0.2, props.theme.schema.typeNameColor)};
`;
export const TypeName = FieldLabel.extend`
color: ${props => props.theme.schemaView.typeNameColor};
color: ${props => props.theme.schema.typeNameColor};
`;
export const TypeTitle = FieldLabel.extend`
color: ${props => props.theme.schemaView.typeTitleColor};
color: ${props => props.theme.schema.typeTitleColor};
`;
export const TypeFormat = TypeName;
export const RequiredLabel = FieldLabel.withComponent('div').extend`
color: ${props => props.theme.schemaView.requireLabelColor};
font-size: 11px;
color: ${props => props.theme.schema.requireLabelColor};
font-size: ${props => props.theme.schema.labelsTextSize};
font-weight: normal;
margin-left: 20px;
line-height: 1;
font-weight: normal;
`;
export const RecursiveLabel = FieldLabel.extend`
color: #dd9900;
color: ${({ theme }) => theme.colors.warning.main};
font-size: 13px;
`;
@ -55,27 +63,28 @@ export const PatternLabel = FieldLabel.extend`
}
`;
export const ExampleValue = styled.span`
font-family: ${props => props.theme.code.fontFamily};
background-color: ${props => transparentize(0.98, props.theme.colors.text)};
border: 1px solid ${props => transparentize(0.85, props.theme.colors.text)};
margin: 0 3px;
padding: 0.4em 0.2em 0.2em;
font-size: 0.8em;
export const ExampleValue = FieldLabel.extend`
border-radius: 2px;
color: ${props => transparentize(0.1, props.theme.colors.text)};
display: inline-block;
min-width: 20px;
text-align: center;
line-height: 1;
vertical-align: middle;
${({ theme }) => `
background-color: ${transparentize(0.85, theme.colors.text.primary)};
color: ${transparentize(0.1, theme.colors.text.primary)};
margin-left: ${theme.spacing.unit}px;
padding: 0 ${theme.spacing.unit}px;
border: 1px solid ${transparentize(0.9, theme.colors.text.primary)};
}`};
${extensionsHook('ExampleValue')};
`;
export const ConstraintItem = FieldLabel.extend`
background-color: ${props => transparentize(0.85, props.theme.colors.main)};
color: ${props => transparentize(0.4, props.theme.colors.main)};
margin-right: 6px;
margin-left: 6px;
border-radius: 2px;
padding: 0 4px;
${({ theme }) => `
background-color: ${transparentize(0.85, theme.colors.primary.light)};
color: ${transparentize(0.1, theme.colors.primary.light)};
margin-left: 0 ${theme.spacing.unit}px;
padding: 0 ${theme.spacing.unit}px;
border: 1px solid ${transparentize(0.9, theme.colors.primary.light)};
}`};
${extensionsHook('ConstraintItem')};
`;

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

@ -7,14 +7,14 @@ const headerFontSize = {
};
export const headerCommonMixin = level => css`
font-family: ${props => props.theme.headingsFont.family};
font-family: ${props => props.theme.typography.headings.fontFamily};
font-weight: 400;
font-size: ${headerFontSize[level]};
`;
export const H1 = styled.h1`
${headerCommonMixin(1)};
color: ${props => props.theme.colors.main};
color: ${props => props.theme.colors.primary.main};
${extensionsHook('H1')};
`;

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

@ -2,7 +2,7 @@ import styled, { media } from '../styled-components';
export const MiddlePanel = styled.div`
width: calc(100% - ${props => props.theme.rightPanel.width});
padding: ${props => props.theme.spacingUnit * 2}px;
padding: ${props => props.theme.spacing.unit * 8}px;
${media.lessThan('medium')`
width: 100%;
@ -13,7 +13,7 @@ export const RightPanel = styled.div`
width: ${props => props.theme.rightPanel.width};
color: #fafbfc;
background-color: ${props => props.theme.rightPanel.backgroundColor};
padding: ${props => props.theme.spacingUnit * 2}px;
padding: ${props => props.theme.spacing.unit * 8}px;
${media.lessThan('medium')`
width: 100%;

12
src/common-elements/schema.ts
View File

@ -10,7 +10,7 @@ export const OneOfList = styled.ul`
export const OneOfLabel = styled.span`
font-size: 0.9em;
margin-right: 10px;
color: ${props => props.theme.colors.main};
color: ${props => props.theme.colors.primary.main};
font-family: Montserrat;
}
`;
@ -20,18 +20,18 @@ export const OneOfButton = withProps<{ active: boolean }>(styled.li)`
margin-right: 10px;
font-size: 0.8em;
cursor: pointer;
border: 1px solid ${props => props.theme.colors.main};
border: 1px solid ${props => props.theme.colors.primary.main};
padding: 2px 10px;
${props => {
if (props.active) {
return `
color: white;
background-color: ${props.theme.colors.main};
background-color: ${props.theme.colors.primary.main};
`;
} else {
return `
color: ${props.theme.colors.main};
color: ${props.theme.colors.primary.main};
background-color: white;
`;
}
@ -40,7 +40,7 @@ export const OneOfButton = withProps<{ active: boolean }>(styled.li)`
export const ArrayOpenningLabel = styled.div`
font-size: 0.9em;
font-family: ${props => props.theme.code.fontFamily};
font-family: ${props => props.theme.typography.code.fontFamily};
&::after {
content: ' [';
}
@ -48,7 +48,7 @@ export const ArrayOpenningLabel = styled.div`
export const ArrayClosingLabel = styled.div`
font-size: 0.9em;
font-family: ${props => props.theme.code.fontFamily};
font-family: ${props => props.theme.typography.code.fontFamily};
&::after {
content: ']';
}

10
src/common-elements/shelfs.tsx
View File

@ -42,7 +42,9 @@ export const ShelfIcon = styled(IntShelfIcon)`
transform: rotateZ(${props => directionMap[props.direction || 'down']});
polygon {
fill: ${props => (props.color && props.theme.colors[props.color]) || props.color};
fill: ${props =>
(props.color && props.theme.colors[props.color] && props.theme.colors[props.color].main) ||
props.color};
}
`;
@ -50,8 +52,8 @@ export const Badge = withProps<{ type: string }>(styled.span)`
display: inline-block;
padding: 0 5px;
margin: 0;
background-color: ${props => props.theme.colors[props.type]};
color: white;
font-size: ${props => props.theme.code.fontSize};;
background-color: ${props => props.theme.colors[props.type].main};
color: ${props => props.theme.colors[props.type].dark};
font-size: ${props => props.theme.typography.code.fontSize};
vertical-align: text-top;
`;

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

@ -28,7 +28,7 @@ export const Tabs = styled(ReactTabs)`
font-weight: bold;
&.react-tabs__tab--selected {
color: ${props => props.theme.colors.text};
color: ${props => props.theme.colors.text.primary};
background: #e2e2e2;
}
@ -38,19 +38,19 @@ export const Tabs = styled(ReactTabs)`
}
&.tab-success {
color: ${props => props.theme.colors.success};
color: ${props => props.theme.colors.responses.success.color};
}
&.tab-redirect {
color: ${props => props.theme.colors.redirect};
color: ${props => props.theme.colors.responses.redirect.color};
}
&.tab-info {
color: ${props => props.theme.colors.info};
color: ${props => props.theme.colors.responses.info.color};
}
&.tab-error {
color: ${props => props.theme.colors.error};
color: ${props => props.theme.colors.responses.error.color};
}
}
}

4
src/components/ApiInfo/styled.elements.ts
View File

@ -13,8 +13,8 @@ export const ApiHeader = H1.extend`
`;
export const DownloadButton = styled.a`
border: 1px solid ${props => props.theme.colors.main};
color: ${props => props.theme.colors.main};
border: 1px solid ${props => props.theme.colors.primary.main};
color: ${props => props.theme.colors.primary.main};
font-weight: normal;
margin-left: 0.5em;
padding: 4px 8px 4px;

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

@ -7,7 +7,7 @@ export const OperationEndpointWrap = styled.div`
`;
export const ServerRelativeURL = styled.span`
font-family: ${props => props.theme.headingsFont.family};
font-family: ${props => props.theme.typography.headings.fontFamily};
margin-left: 10px;
`;
@ -23,10 +23,11 @@ export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }
border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
transition: border-color 0.25s ease;
${props => (props.expanded && !props.inverted && 'border-color: #3c4448;') || ''}
${props =>
(props.expanded && !props.inverted && `border-color: ${props.theme.colors.border.dark};`) || ''}
.${ServerRelativeURL} {
color: ${props => (props.inverted ? props.theme.colors.text : '#ffffff')}
color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}
}
`;
@ -39,7 +40,7 @@ export const HttpVerb = withProps<{ type: string }>(styled.span).attrs({
color: #ffffff;
padding: 3px 10px;
text-transform: uppercase;
font-family: ${props => props.theme.headingsFont.family};
font-family: ${props => props.theme.typography.headings.fontFamily};
margin: 0;
`;
@ -68,8 +69,8 @@ export const ServerUrl = styled.div`
border: 1px solid #ccc;
background: #fff;
word-break: break-all;
color: ${props => props.theme.colors.main};
color: ${props => props.theme.colors.primary.main};
> span {
color: ${props => props.theme.colors.text};
color: ${props => props.theme.colors.text.primary};
}
`;

2
src/components/Fields/Field.tsx
View File

@ -46,7 +46,7 @@ export class Field extends React.Component<FieldProps> {
>
<PropertyBullet />
{name}
<ShelfIcon size={'1.2em'} direction={expanded ? 'down' : 'right'} />
<ShelfIcon direction={expanded ? 'down' : 'right'} />
{required && <RequiredLabel> required </RequiredLabel>}
</ClickablePropertyNameCell>
) : (

4
src/components/JsonViewer/style.ts
View File

@ -5,8 +5,8 @@ export const jsonStyles = css`
display: none;
}
font-family: ${props => props.theme.code.fontFamily};
font-size: ${props => props.theme.code.fontSize};
font-family: ${props => props.theme.typography.code.fontFamily};
font-size: ${props => props.theme.typography.code.fontSize};
word-break: break-all;
word-wrap: break-word;

32
src/components/Markdown/styled.elements.ts
View File

@ -4,23 +4,23 @@ import styled, { css, extensionsHook, withProps } from '../../styled-components'
export const linksCss = css`
a {
text-decoration: none;
color: ${props => props.theme.links.color};
color: ${props => props.theme.typography.links.color};
&:visited {
color: ${props => props.theme.links.visited};
color: ${props => props.theme.typography.links.visited};
}
&:hover {
color: ${props => props.theme.links.hover};
color: ${props => props.theme.typography.links.hover};
}
}
`;
export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean }>(styled.div)`
font-family: ${props => props.theme.baseFont.family};
font-weight: ${props => props.theme.baseFont.weight};
line-height: ${props => props.theme.baseFont.lineHeight};
font-family: ${props => props.theme.typography.fontFamily};
font-weight: ${props => props.theme.typography.fontWeightRegular};
line-height: ${props => props.theme.typography.lineHeight};
p {
&:last-of-type {
@ -42,27 +42,28 @@ export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean
h1 {
${headerCommonMixin(1)};
color: ${props => props.theme.colors.main};
color: ${props => props.theme.colors.primary.main};
margin-top: 0;
}
h2 {
${headerCommonMixin(2)};
color: ${props => props.theme.colors.text};
color: ${props => props.theme.colors.text.primary};
}
code {
color: ${({ theme }) => theme.colors.code};
background-color: ${({ theme }) => theme.colors.codeBg};
font-family: ${props => props.theme.code.fontFamily};
color: ${({ theme }) => theme.typography.code.color};
background-color: ${({ theme }) => theme.typography.code.backgroundColor};
font-family: ${props => props.theme.typography.code.fontFamily};
border-radius: 2px;
border: 1px solid rgba(38, 50, 56, 0.1);
padding: 0.1em 0.25em 0.2em;
font-size: ${props => props.theme.code.fontSize};
font-size: ${props => props.theme.typography.code.fontSize};
}
pre {
font-family: ${props => props.theme.code.fontFamily};
font-family: ${props => props.theme.typography.code.fontFamily};
white-space: pre-wrap;
background-color: #263238;
color: white;
@ -75,6 +76,7 @@ export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean
code {
background-color: transparent;
color: white;
padding: 0;
&:before,
&:after {
@ -140,7 +142,7 @@ export const StyledMarkdownBlock = withProps<{ dense?: boolean; inline?: boolean
${linkifyMixin('.share-link')};
${extensionsHook('Markdown')};
${linksCss}
${extensionsHook('Markdown')};
`;

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

@ -36,7 +36,7 @@ export const InvertedSimpleDropdown = StyledDropdown.extend`
`;
export const NoSampleLabel = styled.div`
font-family: ${props => props.theme.code.fontFamily};
font-family: ${props => props.theme.typography.code.fontFamily};
font-size: 12px;
color: #ee807f;
`;

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

@ -1,19 +1,19 @@
import styled, { media } from '../../styled-components';
export const RedocWrap = styled.div`
font-family: ${props => props.theme.baseFont.family};
font-size: ${props => props.theme.baseFont.size};
font-weight: ${props => props.theme.baseFont.weight};
line-height: ${props => props.theme.baseFont.lineHeight};
color: ${props => props.theme.colors.text};
${({ theme }) => `
font-family: ${theme.typography.fontFamily};
font-size: ${theme.typography.fontSize};
font-weight: ${theme.typography.fontWeightRegular};
line-height: ${theme.typography.lineHeight};
color: ${theme.colors.text.primary};
display: flex;
position: relative;
text-align: left;
-webkit-font-smoothing: ${props => props.theme.baseFont.smoothing};
font-smoothing: ${props => props.theme.baseFont.smoothing};
${props =>
(props.theme.baseFont.optimizeSpeed && 'text-rendering: optimizeSpeed !important') || ''};
-webkit-font-smoothing: ${theme.typography.smoothing};
font-smoothing: ${theme.typography.smoothing};
${(theme.typography.optimizeSpeed && 'text-rendering: optimizeSpeed !important') || ''};
tap-highlight-color: rgba(0, 0, 0, 0);
text-size-adjust: 100%;
@ -24,8 +24,9 @@ export const RedocWrap = styled.div`
}
.redoc-markdown h1 {
padding-top: ${props => props.theme.spacingUnit * 4}px;
padding-top: ${theme.spacing.unit * 16}px;
}
`};
`;
export const ApiContentWrap = styled.div`
@ -40,12 +41,12 @@ export const ApiContentWrap = styled.div`
`;
export const BackgroundStub = styled.div`
background: ${props => props.theme.rightPanel.backgroundColor};
background: ${({ theme }) => theme.rightPanel.backgroundColor};
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: calc((100% - ${props => props.theme.menu.width}) * 0.4);
width: calc((100% - ${({ theme }) => theme.menu.width}) * 0.4);
${media.lessThan('medium')`
display: none;
`};

2
src/components/RedocStandalone.tsx
View File

@ -49,7 +49,7 @@ export class RedocStandalone extends React.PureComponent<RedocStandaloneProps> {
!loading ? (
<Redoc store={store!} />
) : hideLoading ? null : (
<Loading color={normalizedOpts.theme.colors.main} />
<Loading color={normalizedOpts.theme.colors.primary.main} />
)
}
</StoreProvider>

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

@ -1,4 +1,4 @@
import { transparentize } from 'polished';
// import { transparentize } from 'polished';
import { UnderlinedHeader } from '../../common-elements';
import styled from '../../styled-components';
@ -12,8 +12,8 @@ export const StyledResponseTitle = styled(ResponseTitle)`
background-color: #f2f2f2;
cursor: pointer;
color: ${props => props.theme.colors[props.type]};
background-color: ${props => transparentize(0.92, props.theme.colors[props.type])};
color: ${props => props.theme.colors.responses[props.type].color};
background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
${props =>
(props.empty &&

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

@ -10,10 +10,11 @@ export const SearchWrap = styled.div`
export const SearchInput = styled.input.attrs({
className: 'search-input',
})`
width: calc(100% - ${props => props.theme.spacingUnit * 2}px);
width: calc(100% - ${props => props.theme.spacing.unit * 8}px);
box-sizing: border-box;
margin: 0 ${props => props.theme.spacingUnit}px;
padding: 5px ${props => props.theme.spacingUnit / 2}px 5px ${props => props.theme.spacingUnit}px;
margin: 0 ${props => props.theme.spacing.unit * 4}px;
padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
${props => props.theme.spacing.unit * 4}px;
border: 0;
border-bottom: 1px solid #e1e1e1;
font-weight: bold;
@ -38,7 +39,7 @@ export const SearchIcon = styled((props: any) => (
className: 'search-icon',
})`
position: absolute;
left: ${props => props.theme.spacingUnit}px;
left: ${props => props.theme.spacing.unit * 4}px;
height: 1.8em;
width: 0.9em;
@ -48,7 +49,7 @@ export const SearchIcon = styled((props: any) => (
`;
export const SearchResultsBox = styled.div`
padding: ${props => props.theme.spacingUnit / 4}px 0;
padding: ${props => props.theme.spacing.unit}px 0;
background-color: #ededed;
min-height: 150px;
max-height: 250px;
@ -80,9 +81,9 @@ export const SearchResultsBox = styled.div`
export const ClearIcon = styled.i`
position: absolute;
display: inline-block;
width: ${props => props.theme.spacingUnit / 2}px;
width: ${props => props.theme.spacing.unit * 2}px;
text-align: center;
right: ${props => props.theme.spacingUnit}px;
right: ${props => props.theme.spacing.unit * 4}px;
line-height: 2em;
vertical-align: middle;
margin-right: 2px;

10
src/components/SecurityRequirement/SecuirityRequirement.tsx
View File

@ -1,4 +1,4 @@
import { transparentize } from 'polished';
// import { transparentize } from 'polished';
import * as React from 'react';
import styled from '../../styled-components';
@ -8,9 +8,9 @@ import { SecurityRequirementModel } from '../../services/models/SecurityRequirem
import { linksCss } from '../Markdown/styled.elements';
const ScopeName = styled.code`
font-size: ${props => props.theme.code.fontSize};
font-family: ${props => props.theme.code.fontFamily};
border: 1px solid ${props => transparentize(0.85, props.theme.colors.text)};
font-size: ${props => props.theme.typography.code.fontSize};
font-family: ${props => props.theme.typography.code.fontFamily};
border: 1px solid ${({ theme }) => theme.colors.border.dark};
margin: 0 3px;
padding: 0.2em;
display: inline-block;
@ -60,7 +60,7 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
const AuthHeaderColumn = styled.td``;
const SecuritiesColumn = styled.td`
width: ${props => props.theme.schemaView.defaultDetailsWidth};
width: ${props => props.theme.schema.defaultDetailsWidth};
`;
const AuthHeader = UnderlinedHeader.extend`

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

@ -1,6 +1,6 @@
import * as classnames from 'classnames';
import { deprecatedCss } from '../../common-elements';
import { deprecatedCss, ShelfIcon } from '../../common-elements';
import styled, { css, withProps } from '../../styled-components';
export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
@ -8,7 +8,7 @@ export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
})`
width: 26px;
display: inline-block;
height: ${props => props.theme.code.fontSize};;
height: ${props => props.theme.typography.code.fontSize};;
background-color: #333;
border-radius: 3px;
vertical-align: top;
@ -101,17 +101,17 @@ export const menuItemDepth = {
font-size: 0.8em;
padding-bottom: 0;
cursor: default;
color: ${props => props.theme.colors.text};
color: ${props => props.theme.colors.text.primary};
`,
1: css`
font-size: 0.929em;
text-transform: ${({ theme }) => theme.menu.level1Items.textTransform};
&:hover {
color: ${props => props.theme.colors.main};
color: ${props => props.theme.colors.primary.main};
}
`,
2: css`
color: ${props => props.theme.colors.text};
color: ${props => props.theme.colors.text.primary};
`,
};
@ -128,14 +128,15 @@ export const MenuItemLabel = withProps<{
}),
})`
cursor: pointer;
color: ${props => (props.active ? props.theme.colors.main : props.theme.colors.text)};
color: ${props =>
props.active ? props.theme.colors.primary.main : props.theme.colors.text.primary};
margin: 0;
padding: 12.5px ${props => props.theme.spacingUnit}px;
padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
${({ depth, type, theme }) =>
(type === 'section' && depth > 1 && 'padding-left: ' + theme.spacingUnit * 2 + 'px;') || ''}
(type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
display: flex;
justify-content: space-between;
font-family: ${props => props.theme.headingsFont.family};
font-family: ${props => props.theme.typography.headings.fontFamily};
${props => menuItemDepth[props.depth]};
background-color: ${props => (props.active ? menuItemActiveBg(props.depth) : '')};
@ -144,6 +145,14 @@ export const MenuItemLabel = withProps<{
&:hover {
background-color: ${props => menuItemActiveBg(props.depth)};
}
${ShelfIcon} {
height: ${({ theme }) => theme.menu.arrow.size};
width: ${({ theme }) => theme.menu.arrow.size};
polygon {
fill: ${({ theme }) => theme.menu.arrow.color};
}
}
`;
export const MenuItemTitle = withProps<{ width?: string }>(styled.span)`
@ -156,8 +165,8 @@ export const MenuItemTitle = withProps<{ width?: string }>(styled.span)`
export const RedocAttribution = styled.div`
font-size: 0.8em;
margin-top: ${({ theme }) => `${theme.spacingUnit / 2}px`};
padding: ${({ theme }) => `0 ${theme.spacingUnit}px`};
margin-top: ${({ theme }) => `${theme.spacing.unit * 2}px`};
padding: ${({ theme }) => `0 ${theme.spacing.unit * 4}px`};
text-align: left;
opacity: 0.7;
@ -165,7 +174,7 @@ export const RedocAttribution = styled.div`
a,
a:visited,
a:hover {
color: ${({ theme }) => theme.colors.text} !important;
color: ${({ theme }) => theme.colors.text.primary} !important;
border-top: 1px solid #e1e1e1;
padding-top: 10px;
display: block;

4
src/components/SourceCode/SourceCode.tsx
View File

@ -6,8 +6,8 @@ import { SampleControls, SampleControlsWrap } from '../../common-elements';
import { CopyButtonWrapper } from '../../common-elements/CopyButtonWrapper';
const StyledPre = styled.pre`
font-family: ${props => props.theme.code.fontFamily};
font-size: ${props => props.theme.code.fontSize};
font-family: ${props => props.theme.typography.code.fontFamily};
font-size: ${props => props.theme.typography.code.fontSize};
overflow-x: auto;
margin: 0;

2
src/components/StickySidebar/ChevronSvg.tsx
View File

@ -62,5 +62,5 @@ const ChevronContainer = styled.div`
align-self: center;
display: flex;
flex-direction: column;
color: ${props => props.theme.colors.main};
color: ${props => props.theme.colors.primary.main};
`;

2
src/components/StickySidebar/StickyResponsiveSidebar.tsx
View File

@ -49,7 +49,7 @@ const FloatingButton = styled.div`
outline: none;
user-select: none;
background-color: #f2f2f2;
color: ${props => props.theme.colors.main};
color: ${props => props.theme.colors.primary.main};
display: none;
cursor: pointer;
position: fixed;

232
src/theme.ts
View File

@ -1,23 +1,66 @@
import { desaturate, lighten, transparentize } from 'polished';
import { darken, desaturate, lighten, readableColor, transparentize } from 'polished';
const defaultTheme: ThemeInterface = {
spacingUnit: 20,
spacing: {
unit: 5,
},
breakpoints: {
small: '50rem',
medium: '85rem',
large: '105rem',
},
colors: {
main: '#32329f',
success: '#00aa13',
redirect: '#ffa500',
error: '#e53935',
info: '#87ceeb',
text: '#263238',
code: '#e53935',
codeBg: 'rgba(38, 50, 56, 0.04)',
warning: '#f1c400',
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),
},
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),
},
warning: {
main: '#d4ad03',
light: ({ colors }) => lighten(colors.tonalOffset, colors.warning.main),
dark: ({ colors }) => darken(colors.tonalOffset, colors.warning.main),
contrastText: ({ colors }) => readableColor(colors.warning.main),
},
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),
},
text: {
primary: '#333333',
secondary: ({ colors }) => lighten(colors.tonalOffset, colors.text.primary),
},
border: {
dark: 'rgba(0,0,0, 0.1)',
light: '#ffffff',
},
responses: {
success: {
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),
},
redirect: {
color: '#ffa500',
backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.redirect.color),
},
info: {
color: '#87ceeb',
backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.info.color),
},
},
http: {
get: '#6bbd5b',
post: '#248fb2',
@ -30,33 +73,50 @@ const defaultTheme: ThemeInterface = {
head: '#c167e4',
},
},
schemaView: {
linesColor: theme => lighten(0.25, desaturate(0.35, theme.colors.main)),
schema: {
linesColor: theme =>
lighten(
theme.colors.tonalOffset,
desaturate(theme.colors.tonalOffset, theme.colors.primary.main),
),
defaultDetailsWidth: '75%',
typeNameColor: theme => transparentize(0.2, theme.colors.text),
typeTitleColor: theme => theme.schemaView.typeNameColor,
requireLabelColor: theme => theme.colors.error,
typeNameColor: theme => theme.colors.text.secondary,
typeTitleColor: theme => theme.schema.typeNameColor,
requireLabelColor: theme => theme.colors.error.main,
labelsTextSize: '0.9em',
nestingSpacing: '1em',
nestedBackground: '#fafafa',
arrow: {
size: '1.1em',
color: theme => theme.colors.text.secondary,
},
},
baseFont: {
size: '14px',
typography: {
fontSize: '14px',
lineHeight: '1.5',
weight: '400',
family: 'Roboto, sans-serif',
fontWeightRegular: '400',
fontWeightBold: '600',
fontWeightLight: '300',
fontFamily: 'Roboto, sans-serif',
smoothing: 'antialiased',
optimizeSpeed: true,
},
headingsFont: {
family: 'Montserrat, sans-serif',
},
code: {
fontSize: '13px',
fontFamily: 'Courier, monospace',
},
links: {
color: ({ colors }) => colors.main,
visited: ({ colors }) => colors.main,
hover: ({ colors }) => lighten(0.2, colors.main),
headings: {
fontFamily: 'Montserrat, sans-serif',
},
code: {
fontSize: '13px',
fontFamily: 'Courier, monospace',
lineHeight: ({ typography }) => typography.lineHeight,
fontWeight: ({ typography }) => typography.fontWeightRegular,
color: '#e53935',
backgroundColor: 'rgba(38, 50, 56, 0.04)',
},
links: {
color: ({ colors }) => colors.primary.main,
visited: ({ colors }) => colors.primary.main,
hover: ({ colors }) => lighten(0.2, colors.primary.main),
},
},
menu: {
width: '260px',
@ -67,6 +127,10 @@ const defaultTheme: ThemeInterface = {
level1Items: {
textTransform: 'none',
},
arrow: {
size: '1.5em',
color: theme => theme.colors.text.primary,
},
},
logo: {
maxHeight: ({ menu }) => menu.width,
@ -115,23 +179,55 @@ export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface {
return JSON.parse(JSON.stringify(theme));
}
export interface ColorSetting {
main: string;
light: string;
dark: string;
contrastText: string;
}
export interface HTTPResponseColos {
color: string;
backgroundColor: string;
}
export interface FontSettings {
fontSize: string;
fontWeight: string;
fontFamily: string;
lineHeight: string;
color: string;
}
export interface ResolvedThemeInterface {
spacingUnit: number;
spacing: {
unit: number;
};
breakpoints: {
small: string;
medium: string;
large: string;
};
colors: {
main: string;
success: string;
redirect: string;
error: string;
info: string;
text: string;
code: string;
codeBg: string;
warning: string;
tonalOffset: number;
primary: ColorSetting;
success: ColorSetting;
warning: ColorSetting;
error: ColorSetting;
border: {
light: string;
dark: string;
};
text: {
primary: string;
secondary: string;
};
responses: {
success: HTTPResponseColos;
error: HTTPResponseColos;
redirect: HTTPResponseColos;
info: HTTPResponseColos;
};
http: {
get: string;
post: string;
@ -144,33 +240,43 @@ export interface ResolvedThemeInterface {
head: string;
};
};
schemaView: {
schema: {
linesColor: string;
defaultDetailsWidth: string;
typeNameColor: string;
typeTitleColor: string;
requireLabelColor: string;
labelsTextSize: string;
nestingSpacing: string;
nestedBackground: string;
arrow: {
size: string;
color: string;
};
};
baseFont: {
size: string;
typography: {
fontSize: string;
lineHeight: string;
weight: string;
family: string;
fontWeightLight: string;
fontWeightRegular: string;
fontWeightBold: string;
fontFamily: string;
smoothing: string;
optimizeSpeed: boolean;
};
headingsFont: {
family: string;
};
code: {
fontSize: string;
fontFamily: string;
};
links: {
color: string;
visited: string;
hover: string;
code: FontSettings & {
backgroundColor: string;
};
headings: {
fontFamily: string;
};
links: {
color: string;
visited: string;
hover: string;
};
};
menu: {
width: string;
@ -181,6 +287,10 @@ export interface ResolvedThemeInterface {
level1Items: {
textTransform: string;
};
arrow: {
size: string;
color: string;
};
};
logo: {
maxHeight: string;
@ -188,8 +298,8 @@ export interface ResolvedThemeInterface {
};
rightPanel: {
backgroundColor: string;
width: string;
textColor: string;
width: string;
};
extensionsHook?: (name: string, props: any) => string;