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

// @flow

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

export const textColor = {
  primary: defaultTokens.colorTextButtonPrimary,
  secondary: defaultTokens.colorTextButtonSecondary,
  warning: defaultTokens.colorTextButtonWarning,
  critical: defaultTokens.colorTextButtonCritical,
  facebook: defaultTokens.colorTextButtonFacebook,
  google: defaultTokens.colorTextButtonGoogle,
};

export const wrapperColor = {
  primary: defaultTokens.backgroundButtonPrimary,
  secondary: defaultTokens.backgroundButtonSecondary,
  warning: defaultTokens.backgroundButtonWarning,
  critical: defaultTokens.backgroundButtonCritical,
  facebook: defaultTokens.backgroundButtonFacebook,
  google: defaultTokens.backgroundButtonGoogle,
};

export const size = {
  small: {
    height: parseInt(defaultTokens.heightButtonSmall, 10),
    fontSize: parseInt(defaultTokens.fontSizeButtonSmall, 10),
    padding: parseInt(defaultTokens.spaceSmall, 10),
    paddingWithIcon: parseInt(defaultTokens.spaceXSmall, 10),
  },
  normal: {
    height: parseInt(defaultTokens.heightButtonNormal, 10),
    fontSize: parseInt(defaultTokens.fontSizeButtonNormal, 10),

style={styles.picker}
          onValueChange={onValueChange}
        />
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    height: parseInt(defaultTokens.heightInputNormal, 10),
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
  },
  label: {
    flex: 1,
    color: defaultTokens.colorTextAttention,
    paddingLeft: parseInt(defaultTokens.spaceSmall, 10),
  },
  icon: {
    marginRight: 10,
  },
  picker: {
    position: 'absolute',
    left: 0,
    width: '100%',
    opacity: 0, // NOTE: This workaround is required because picker label cannot be currently styled on Android
    height: parseInt(defaultTokens.heightInputNormal, 10),
  },

);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    height: parseInt(defaultTokens.heightButtonNormal, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    paddingHorizontal: 11,
  },
  label: {
    flex: 1,
    color: defaultTokens.paletteInkDark,
    fontSize: parseInt(defaultTokens.fontSizeButtonNormal, 10),
    marginStart: 10,
  },
});

}
        {value === '' && placeholder != null && }
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    marginBottom: parseInt(defaultTokens.spaceXSmall, 10),
    padding: 11,
    alignItems: 'center',
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
    web: {
      flex: 1,
      height: parseInt(defaultTokens.heightInputNormal, 10),
      borderRadius: 3,
      backgroundColor: defaultTokens.paletteWhite,
      borderWidth: 1,
      borderColor: defaultTokens.paletteInkLighter,
    },
  },
  warningContainer: {
    borderColor: defaultTokens.paletteRedNormal,
  },
  icon: {
    marginEnd: 10,
  },
  label: {

<button label="Close">
          
        
      
    );
  }
}

storiesOf('Modal', module)
  .add('Playground', () =&gt; )
  .add('Default', () =&gt; );

const styles = StyleSheet.create({
  sampleContainer: {
    padding: parseInt(defaultTokens.spaceMedium, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
  },
  sampleTitle: {
    marginBottom: parseInt(defaultTokens.spaceMedium, 10),
  },
});
</button>

);
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: 122,
    height: parseInt(defaultTokens.heightButtonNormal, 10),
    paddingStart: 11,
    paddingEnd: parseInt(defaultTokens.spaceMedium, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
  },
  text: {
    color: defaultTokens.paletteInkDark,
    fontSize: parseInt(defaultTokens.fontSizeButtonLarge, 10),
  },
});

}
}

const HoverableSquare = withHover(Square);

storiesOf('withHover', module)
  .addDecorator(withKnobs)
  .add('Default', () => {
    return ;
  });

const styles = StyleSheet.create({
  square: {
    width: 50,
    height: 50,
    backgroundColor: defaultTokens.backgroundButtonSecondary,
  },
  squareHovered: {
    backgroundColor: defaultTokens.backgroundButtonSecondaryHover,
  },
});

}
}

storiesOf('Hoverable', module)
  .addDecorator(withKnobs)
  .add('Default', () => {
    const disabled = boolean('disabled', false);

    return ;
  });

const styles = StyleSheet.create({
  square: {
    width: 50,
    height: 50,
    backgroundColor: defaultTokens.backgroundButtonSecondary,
  },
  squareHovered: {
    backgroundColor: defaultTokens.backgroundButtonSecondaryHover,
  },
});

value={value}
        first={index === 0}
        last={index === segmentsData.length - 1}
        active={value === selectedValue}
        onPress={onValueChange}
      />
    );
  });
  return ;
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: parseInt(defaultTokens.spaceXXXSmall, 10),
    backgroundColor: defaultTokens.backgroundButtonSecondary,
    borderRadius: parseInt(defaultTokens.borderRadiusNormal, 10),
  },
});

export default SegmentedButton;

);
  }
}

export default withHover(DatePickerDayTile);

const styles = StyleSheet.create({
  dayTile: {
    flexDirection: 'row',
    alignItems: 'center',
    width: 30,
    height: 30,
    margin: 2,
  },
  date: { backgroundColor: defaultTokens.backgroundButtonSecondary },
  dateHovered: {
    backgroundColor: defaultTokens.backgroundButtonSecondaryHover,
  },
  selected: { backgroundColor: defaultTokens.paletteBlueNormal },
  disabled: { opacity: 0.4 },
  dateLabel: {
    flex: 1,
    textAlign: 'center',
  },
  dateLabelSelected: { color: defaultTokens.paletteWhite },
});