color theory - How do you choose 'light' and 'dark' shades in Google Material Design

From the Material Design docs:

To create contrast between elements, you can use lighter or darker tones of your primary color. The contrast between lighter and darker tones helps show division between surfaces, such as between the status bar and a toolbar.

Looking at all the examples in the Material Design docs, light and dark colors are chosen from the same swatch as the base color. So for example, if your chosen color is 'Blue Grey 700' your light and dark colors may be 'Blue Grey 300' and 'Blue Grey 900'. This is one of the examples they show:

Using Google's Material Design Color Tool, we can select the same color, 'Blue Grey 700'. However, it suggests light and dark colors that are not from the 'Blue Grey' swatch:

For reference, here is the 'Blue Grey' swatch. You can see that the light (#718792) and dark (#1c313a) colors are not present:

The material design docs state:

They’ve [the M.D. colors] been designed to work harmoniously with each other

Should I use light and dark colors from the color swatch, OR can I just trust the Color Tool and use its suggested colors?

If I should trust the color tool, how does it generate the light and dark colors?