refactor: update gray colors

src/components/Callbacks/CallbackTitle.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { darken } from 'polished';
 import { ShelfIcon } from '../../common-elements';
 import { OperationBadge } from '../SideMenu/styled.elements';
 import { shortenHTTPVerb } from '../../utils/openapi';
@@ -38,7 +39,7 @@ const CallbackTitleWrapper = styled.div`
 
   ${ShelfIcon} {
     polygon {
-      fill: ${({ theme }) => theme.colors.gray.A200};
+      fill: ${({ theme }) => darken(theme.colors.tonalOffset, theme.colors.gray[100])};
     }
   }
 `;

src/components/Callbacks/styled.elements.ts

@@ -6,7 +6,7 @@ export const StyledCallbackTitle = styled(CallbackTitle)`
   border-radius: 2px;
   margin-bottom: 4px;
   line-height: 1.5em;
-  background-color: ${({ theme }) => theme.colors.gray.A50};
+  background-color: ${({ theme }) => theme.colors.gray[100]};
   cursor: pointer;
 `;
 

src/theme.ts

@@ -38,9 +38,8 @@ const defaultTheme: ThemeInterface = {
       contrastText: ({ colors }) => readableColor(colors.error.main),
     },
     gray: {
-      50: '#fafafa',
-      A50: '#f2f2f2',
-      A200: '#aaaaaa',
+      50: '#FAFAFA',
+      100: '#F5F5F5',
     },
     text: {
       primary: '#333333',
@@ -236,8 +235,7 @@ export interface ResolvedThemeInterface {
     error: ColorSetting;
     gray: {
       50: string;
-      A50: string;
-      A200: string;
+      100: string;
     };
     border: {
       light: string;