How to use the @kiwicom/orbit-design-tokens.defaultTokens.paletteProductNormal function in @kiwicom/orbit-design-tokens

// @flow

import styled from 'styled-components';
import { defaultTokens } from '@kiwicom/orbit-design-tokens';

export default styled.div`
  background-color: ${({ disabled }) =>
    disabled ? `#9D9D9D` : defaultTokens.paletteProductLight};
  color: ${defaultTokens.paletteProductNormal};
  display: inline-block;
  padding: 3px 7px;
`;

// @flow

import { defaultTokens } from '@kiwicom/orbit-design-tokens';

import {
  textColor as sharedTextColor,
  wrapperColor as sharedWrapperColor,
} from './shared';

export const textColor = {
  ...sharedTextColor,
  info: defaultTokens.paletteBlueNormal,
  success: defaultTokens.paletteProductNormal,
};

export const wrapperColor = {
  ...sharedWrapperColor,
  info: defaultTokens.paletteBlueLight,
  success: defaultTokens.paletteProductLight,
};

borderBottomStartRadius: borderRadius,
  },
  containerLast: {
    borderTopEndRadius: borderRadius,
    borderBottomEndRadius: borderRadius,
    marginEnd: 0,
  },
  containerActive: {
    backgroundColor: defaultTokens.paletteWhite,
  },
  label: {
    flex: 1,
    color: defaultTokens.paletteInkLight,
  },
  labelActive: {
    color: defaultTokens.paletteProductNormal,
  },
});

[Routes.TRIPINFO_TICKETS]: {
      screen: TicketsScreen,
      navigationOptions: {
        title: 'Tickets',
      },
    },
    [Routes.TRIPINFO_TIMELINE]: {
      screen: TimelineScreen,
      navigationOptions: {
        title: 'Timeline',
      },
    },
  }: NavigationRouteConfigMap),
  {
    defaultNavigationOptions: {
      headerTintColor: defaultTokens.paletteProductNormal,
    },
  },
);

export default StackNavigator;

const MenuGroup = styled.div`
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  display: flex;
`;

const MenuItem = styled(Link)`
  color: #000;
  text-decoration: none;
  padding: 6px 15px;
  font-weight: 500;

  &.active {
    color: ${defaultTokens.paletteProductNormal};
  }
  &:hover {
    color: ${defaultTokens.paletteBlueNormal};
  }
`;

const MenuItemButton = styled.a`
  padding: 6px 15px;
`;

const GithubLogoWrapper = styled.span`
  padding-left: ${defaultTokens.spaceXSmall};
  position: relative;
  top: 3px;
`;

overflow: 'hidden',
  },
  padding: {
    padding: 10,
  },
  row: {
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  gradient: {
    ...StyleSheet.absoluteFillObject,
    width: '100%',
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),
  },
  badge: {
    backgroundColor: defaultTokens.paletteProductNormal,
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),
  },
  badgeText: {
    fontSize: parseFloat(defaultTokens.fontSizeHeadingTitle3),
    fontWeight: 'bold',
    color: defaultTokens.paletteWhite,
    padding: 2.5,
  },
  placeText: {
    marginBottom: 4,
  },
  bottomContainer: {
    justifyContent: 'flex-end',
  },
  image: {
    borderRadius: parseFloat(defaultTokens.borderRadiusLarge),

row: {
    flexDirection: 'row',
  },
  priceDurationContainerMobile: {
    paddingTop: 0,
    paddingHorizontal: parseInt(defaultTokens.spaceMedium, 10),
  },

  containerActiveWeb: {
    backgroundColor: defaultTokens.backgroundBody,
    borderTopColor: defaultTokens.paletteProductNormal,
  },
  containerActiveMobile: {
    backgroundColor: defaultTokens.paletteWhite,
    borderStartWidth: 4,
    borderStartColor: defaultTokens.paletteProductNormal,
  },
  containerHovered: {
    color: defaultTokens.paletteProductNormal,
  },
  priceDurationContainerWeb: {
    paddingTop: parseInt(defaultTokens.paddingTag, 10),
    flex: 1,
    flexDirection: 'row',
  },
  durationLabel: {
    fontWeight: 'normal',
    fontSize: parseInt(defaultTokens.fontSizeTextSmall, 10),
  },
  marginStartLabel: {
    marginStart: parseInt(defaultTokens.spaceXSmall, 10),
  },

)}
            
            {subTitle != null && (
              
            )}
          
          {Platform.OS === 'ios' && hideActionIcon === false && (
            
          )}
        
      
      
    
  );
}

const Headline = styled.div`
  margin: 0;
  padding-right: 0px;
  position: relative;
  z-index: 2;
  @media (min-width: ${defaultTokens.widthBreakpointDesktop}px) {
    padding-right: ${phoneWidthBuffer}px;
  }
`;

const ProductName = styled.span`
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.9);
  padding: ${defaultTokens.spaceXXSmall} ${defaultTokens.spaceXSmall};
  color: ${defaultTokens.paletteProductNormal};
`;

const GithubLogoWrapper = styled.div`
  padding-left: ${defaultTokens.spaceSmall};
  position: relative;
  top: ${defaultTokens.spaceXXXSmall};
`;

const ButtonWrapper = styled.div`
  display: flex;
`;

const HeadlineTextWrapper = styled.p`
  text-shadow: 0 0 30px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 0, 0, 1);
  color: white;
`;

export default function Loader({
  size = 'small',
  color = defaultTokens.paletteProductNormal,
  isVisible = true,
}: Props) {
  return isVisible ? (
    
  ) : null;
}