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

src/common-elements/PrismDiv.tsx

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

src/common-elements/fields.ts

@@ -34,7 +34,7 @@ export const FieldLabel = styled.span`
 `;
 
 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)`
@@ -62,12 +62,12 @@ export const RecursiveLabel = styled(FieldLabel)`
 `;
 
 export const NullableLabel = styled(FieldLabel)`
-  color: #3195a6;
+  color: #0e7c86;
   font-size: 13px;
 `;
 
 export const PatternLabel = styled(FieldLabel)`
-  color: #3195a6;
+  color: #0e7c86;
   &::before,
   &::after {
     font-weight: bold;

src/common-elements/mixins.ts

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

src/common-elements/samples.tsx

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

src/components/PayloadSamples/styled.elements.ts

@@ -20,7 +20,7 @@ export const DropdownLabel = styled.span`
   top: -11px;
   left: 12px;
   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`

src/theme.ts

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