diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts index 6d04d355..33941f67 100644 --- a/src/common-elements/fields.ts +++ b/src/common-elements/fields.ts @@ -13,20 +13,21 @@ export const FieldLabel = styled.span` `; 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` - color: ${props => transparentize(0.8, props.theme.colors.text)}; + color: ${props => props.theme.schemaView.typeNameColor}; `; + 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 RequiredLabel = FieldLabel.withComponent('div').extend` - color: #e53935; + color: ${props => props.theme.schemaView.requireLabelColor}; font-size: 11px; font-weight: normal; margin-left: 20px; diff --git a/src/theme.ts b/src/theme.ts index f18ebddd..0729291a 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,4 +1,4 @@ -import { adjustHue, desaturate, lighten } from 'polished'; +import { adjustHue, desaturate, lighten, transparentize } from 'polished'; const defaultTheme: ThemeInterface = { spacingUnit: 20, @@ -29,6 +29,9 @@ const defaultTheme: ThemeInterface = { schemaView: { linesColor: theme => lighten(0.25, desaturate(0.35, theme.colors.main)), defaultDetailsWidth: '75%', + typeNameColor: theme => transparentize(0.8, theme.colors.text), + typeTitleColor: theme => theme.schemaView.typeNameColor, + requireLabelColor: theme => theme.colors.error, }, baseFont: { size: '14px', @@ -129,6 +132,9 @@ export interface ResolvedThemeInterface { schemaView: { linesColor: string; defaultDetailsWidth: string; + typeNameColor: string; + typeTitleColor: string; + requireLabelColor: string; }; baseFont: { size: string;