Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-10-31 07:47:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: increase colors contrast to make them more accessible (#1433)

Browse Source
This commit is contained in:
Anna Stasiuk 2020-10-27 10:44:06 +02:00 committed by GitHub
parent c11f679f82
commit e2de5b065e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common-elements/PrismDiv.tsx
View File

@ -65,7 +65,7 @@ export const PrismDiv = styled.div`
} }
.token.boolean { .token.boolean {
color: firebrick; color: #e64441;
} }
.token.selector, .token.selector,

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

@ -34,7 +34,7 @@ export const FieldLabel = styled.span`
`; `;
export const TypePrefix = styled(FieldLabel)` export const TypePrefix = styled(FieldLabel)`
color: ${props => transparentize(0.2, props.theme.schema.typeNameColor)}; color: ${props => transparentize(0.1, props.theme.schema.typeNameColor)};
`; `;
export const TypeName = styled(FieldLabel)` export const TypeName = styled(FieldLabel)`
@ -62,12 +62,12 @@ export const RecursiveLabel = styled(FieldLabel)`
`; `;
export const NullableLabel = styled(FieldLabel)` export const NullableLabel = styled(FieldLabel)`
color: #3195a6; color: #0e7c86;
font-size: 13px; font-size: 13px;
`; `;
export const PatternLabel = styled(FieldLabel)` export const PatternLabel = styled(FieldLabel)`
color: #3195a6; color: #0e7c86;
&::before, &::before,
&::after { &::after {
font-weight: bold; font-weight: bold;

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

@ -2,5 +2,5 @@ import { css } from '../styled-components';
export const deprecatedCss = css` export const deprecatedCss = css`
text-decoration: line-through; text-decoration: line-through;
color: #bdccd3; color: #707070;
`; `;

2
src/common-elements/samples.tsx
View File

@ -2,7 +2,7 @@ import styled from '../styled-components';
import { PrismDiv } from './PrismDiv'; import { PrismDiv } from './PrismDiv';
export const SampleControls = styled.div` export const SampleControls = styled.div`
opacity: 0.4; opacity: 0.7;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
text-align: right; text-align: right;
&:focus-within { &:focus-within {

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

@ -20,7 +20,7 @@ export const DropdownLabel = styled.span`
top: -11px; top: -11px;
left: 12px; left: 12px;
font-weight: ${({ theme }) => theme.typography.fontWeightBold}; font-weight: ${({ theme }) => theme.typography.fontWeightBold};
color: ${({ theme }) => transparentize(0.6, theme.rightPanel.textColor)}; color: ${({ theme }) => transparentize(0.3, theme.rightPanel.textColor)};
`; `;
export const DropdownWrapper = styled.div` export const DropdownWrapper = styled.div`

20
src/theme.ts
View File

@ -12,7 +12,7 @@ const defaultTheme: ThemeInterface = {
large: '105rem', large: '105rem',
}, },
colors: { colors: {
tonalOffset: 0.3, tonalOffset: 0.2,
primary: { primary: {
main: '#32329f', main: '#32329f',
light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main), light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
@ -68,15 +68,15 @@ const defaultTheme: ThemeInterface = {
}, },
}, },
http: { http: {
get: '#6bbd5b', get: '#2F8132',
post: '#248fb2', post: '#186FAF',
put: '#9b708b', put: '#95507c',
options: '#d3ca12', options: '#947014',
patch: '#e09d43', patch: '#bf581d',
delete: '#e27a7a', delete: '#cc3333',
basic: '#999', basic: '#707070',
link: '#31bbb6', link: '#07818F',
head: '#c167e4', head: '#A23DAD',
}, },
}, },
schema: { schema: {