How to use the bpk-tokens/tokens/base.es6.colors.colorWhite function in bpk-tokens

.add('Align to large button (RTL support)', () => (
    
      Search 
    
  ));

import { withLargeButtonAlignment } from 'bpk-component-icon';

const AlignedArrow = withLargeButtonAlignment(LongArrowRightIcon);


  Button Text
   
  

`}
      ,
    ],
    examples: [
      
        Button Text  
        
      ,
    ],
  },
];

const blurb = [
  
    Alignment higher-order-components (HOCs) allow components to be aligned
    vertically within a given space.
  ,
  Installation,
  
    The alignment HOCs are provided in the <code>bpk-component-icon</code>{' '}
    package. See Icons for installation
    instructions.
  ,

{
    id: 'primary',
    title: 'Primary',
    blurb: [
      <div>
        
        
        
      </div>,
    ],
    examples: [],
  },
  {
    id: 'secondary',
    title: 'Secondary',
    blurb: [
      <div>
        
        
        </div>

id: 'with-icons',
    title: 'With icons',
    blurb: [
      
        All buttons support the nesting of icons, which is useful for improving
        affordance.
      ,
    ],
    examples: [
      
         Search
      ,
      <br>,
      <br>,
      
         Search
      ,
    ],
  },
  {
    id: 'icon-only',
    title: 'Icon-only buttons',
    blurb: [
      
        Buttons may contain only an icon (without visible text), which is useful
        for small screen sizes.
      ,
    ],
    examples: [
      <div>
        
          </div>