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

feat: add more options to theme

Browse Source
This commit is contained in:
Roman Hotsiy 2018-03-20 16:15:36 +02:00
parent 0703c7fc4f
commit cbce28aec3
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,20 +13,21 @@ export const FieldLabel = styled.span`
`; `;
export const TypePrefix = FieldLabel.extend` export const TypePrefix = FieldLabel.extend`
color: ${props => transparentize(0.4, props.theme.colors.text)}; color: ${props => transparentize(0.2, props.theme.schemaView.typeNameColor)};
`; `;
export const TypeName = FieldLabel.extend` export const TypeName = FieldLabel.extend`
color: ${props => transparentize(0.8, props.theme.colors.text)}; color: ${props => props.theme.schemaView.typeNameColor};
`; `;
export const TypeTitle = FieldLabel.extend` export const TypeTitle = FieldLabel.extend`
color: ${props => transparentize(0.5, props.theme.colors.text)}; color: ${props => props.theme.schemaView.typeTitleColor};
`; `;
export const TypeFormat = TypeName; export const TypeFormat = TypeName;
export const RequiredLabel = FieldLabel.withComponent('div').extend` export const RequiredLabel = FieldLabel.withComponent('div').extend`
color: #e53935; color: ${props => props.theme.schemaView.requireLabelColor};
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
margin-left: 20px; margin-left: 20px;

8
src/theme.ts
View File

@ -1,4 +1,4 @@
import { adjustHue, desaturate, lighten } from 'polished'; import { adjustHue, desaturate, lighten, transparentize } from 'polished';
const defaultTheme: ThemeInterface = { const defaultTheme: ThemeInterface = {
spacingUnit: 20, spacingUnit: 20,
@ -29,6 +29,9 @@ const defaultTheme: ThemeInterface = {
schemaView: { schemaView: {
linesColor: theme => lighten(0.25, desaturate(0.35, theme.colors.main)), linesColor: theme => lighten(0.25, desaturate(0.35, theme.colors.main)),
defaultDetailsWidth: '75%', defaultDetailsWidth: '75%',
typeNameColor: theme => transparentize(0.8, theme.colors.text),
typeTitleColor: theme => theme.schemaView.typeNameColor,
requireLabelColor: theme => theme.colors.error,
}, },
baseFont: { baseFont: {
size: '14px', size: '14px',
@ -129,6 +132,9 @@ export interface ResolvedThemeInterface {
schemaView: { schemaView: {
linesColor: string; linesColor: string;
defaultDetailsWidth: string; defaultDetailsWidth: string;
typeNameColor: string;
typeTitleColor: string;
requireLabelColor: string;
}; };
baseFont: { baseFont: {
size: string; size: string;