How to use the @uifabric/fluent-theme.SharedColors.cyanBlue10 function in @uifabric/fluent-theme

height: '75px',
      alignItems: 'center'
    },
    backAction: [
      DefaultFontStyles.medium,
      actionLinkStyle,
      {
        marginLeft: '30px',
        width: '221px'
      }
    ],
    mainAction: [
      DefaultFontStyles.xxLarge,
      actionLinkStyle,
      {
        color: SharedColors.cyanBlue10,
        marginLeft: '30px',
        flexGrow: '1',
        fontWeight: FontWeights.bold
      }
    ],
    exitAction: [
      DefaultFontStyles.medium,
      actionLinkStyle,
      {
        marginRight: '30px'
      }
    ]
  };
};

`;

export const divider = isExpand => css`
  width: ${isExpand ? '85%' : '40%'};
  border-bottom: 1px solid ${NeutralColors.gray40};
  margin: 0 auto;
`;

export const globalNav = css`
  height: 44px;
  width: 48px;
  text-align: center;
  line-height: 44px;
  cursor: pointer;
  font-size: ${FontSizes.size16};
  color: ${SharedColors.cyanBlue10};
  &:hover {
    background: ${NeutralColors.gray40};
  }
`;

export const content = css`
  outline: none;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
`;

export const showDesign = show => css`
  display: ${show ? 'block' : 'none'} !important;
`;

import { css } from '@emotion/core';
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { SharedColors } from '@uifabric/fluent-theme';

export const leftNav = css`
  width: 120px;
  height: 100vh;
  background: ${SharedColors.cyanBlue10};
  font-size: 20px;
  color: #fff;
`;

export const navHeader = css`
  width: 100%;
  cursor: pointer;
`;

export const closeIcon = css`
  font-size: 30px;
  margin-top: 40px;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 90px;

export const closeIcon = css`
  font-size: 30px;
  margin-top: 40px;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 90px;
  &:hover {
    background-color: ${SharedColors.cyanBlue20};
  }
`;

export const navLinkClass = mergeStyleSets({
  actionNav: {
    backgroundColor: SharedColors.cyanBlue10,
    color: 'white',
    fontSize: '16px',
    selectors: {
      '&:hover': {
        displayName: 'testHover',
        color: 'white !important',
        fontSize: '16px',
        backgroundColor: `${SharedColors.cyanBlue20} !important`,
      },
      '&:after': {
        border: '0px !important',
        backgroundColor: `${SharedColors.cyanBlue20} !important`,
        z: '-1',
      },
    },
  },