From 51311e2acd2ed57b327c22d4732b14cf1f6187ca Mon Sep 17 00:00:00 2001 From: Oleksiy Kachynskyy Date: Wed, 8 Apr 2020 10:58:13 +0300 Subject: [PATCH] refactor: update gray colors --- src/components/Callbacks/CallbackTitle.tsx | 3 ++- src/components/Callbacks/styled.elements.ts | 2 +- src/theme.ts | 8 +++----- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Callbacks/CallbackTitle.tsx b/src/components/Callbacks/CallbackTitle.tsx index 41022c2e..d91dab7c 100644 --- a/src/components/Callbacks/CallbackTitle.tsx +++ b/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])}; } } `; diff --git a/src/components/Callbacks/styled.elements.ts b/src/components/Callbacks/styled.elements.ts index 87c7586c..522423bb 100644 --- a/src/components/Callbacks/styled.elements.ts +++ b/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; `; diff --git a/src/theme.ts b/src/theme.ts index 2a99e36e..eca8855e 100644 --- a/src/theme.ts +++ b/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;