use FONT_WEIGHT const istead of values

src/components/DeviceHeader/index.js

@@ -9,7 +9,7 @@ import {
 } from 'utils/device';
 import TrezorImage from 'components/images/TrezorImage';
 import colors from 'config/colors';
-import { FONT_SIZE } from 'config/variables';
+import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
 const Wrapper = styled.div`
     position: relative;
@@ -57,7 +57,7 @@ const Name = styled.div`
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    font-weight: 500;
+    font-weight: ${FONT_WEIGHT.MEDIUM};
     color: ${colors.TEXT_PRIMARY};
 `;
 

src/components/Notification/components/NotificationButton/index.js

@@ -7,7 +7,7 @@ import Icon from 'components/Icon';
 import colors from 'config/colors';
 import { getPrimaryColor, getSecondaryColor } from 'utils/notification';
 import Loader from 'components/Loader';
-import { TRANSITION, FONT_SIZE } from 'config/variables';
+import { TRANSITION, FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
 type Props = {
     type: string;
@@ -40,7 +40,7 @@ const Wrapper = styled.button`
     background: transparent;
     font-size: ${FONT_SIZE.SMALL};
     position: relative;
-    font-weight: 300;
+    font-weight: ${FONT_WEIGHT.LIGHT};
     cursor: pointer;
     color: ${props => getPrimaryColor(props.type)};
     border: 1px solid ${props => getPrimaryColor(props.type)};

src/components/modals/pin/Pin/components/Button/index.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
+import { FONT_WEIGHT } from 'config/variables';
 
 type Props = {
     onClick: () => void;
@@ -16,7 +17,7 @@ const Wrapper = styled.button`
     margin-top: 15px;
     margin-left: 10px;
     font-size: 22px;
-    font-weight: 600;
+    font-weight: ${FONT_WEIGHT.SEMIBOLD};
     color: ${colors.TEXT_PRIMARY};
     border: 1px solid ${colors.DIVIDER};
     background: ${colors.WHITE};

src/support/styles/index.js

@@ -1,5 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 import colors from 'config/colors';
+import { FONT_WEIGHT } from 'config/variables';
 
 import tooltipStyles from './Tooltip';
 import animationStyles from './Animations';
@@ -10,7 +11,7 @@ const baseStyles = createGlobalStyle`
         height: 100%;
         position: relative;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
-        font-weight: 400;
+        font-weight: ${FONT_WEIGHT.NORMAL};
         font-size: 14px;
         color: ${colors.TEXT};
     }

src/views/Wallet/components/TopNavigationAccount/index.js

@@ -2,7 +2,7 @@
 
 import styled from 'styled-components';
 import React from 'react';
-import { FONT_SIZE } from 'config/variables';
+import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 import { NavLink } from 'react-router-dom';
 import colors from 'config/colors';
 
@@ -26,7 +26,7 @@ const Wrapper = styled.div`
 `;
 
 const StyledNavLink = styled(NavLink)`
-    font-weight: 500;
+    font-weight: ${FONT_WEIGHT.MEDIUM};
     font-size: ${FONT_SIZE.TOP_MENU};
     color: ${colors.TEXT_SECONDARY};
     margin: 0px 4px;