What is $plaette and $shades. Hard to understand

I will do my best to try and help.

First, a shade is a variation of a color we get by either adding white to lighten the color, or black to darken it.

1. $palettes is a multi-dimensional map
   • The first level returns a color value (which is a nested map with even more key: value pairs)
   • The second level returns a shade value
2. key: value pairs are used to store values in maps
   • $palettes: grey are respectively the key: value pairs of the first-level
   • grey is the value of the first-level, but is the key for the second-level
3. grey: 'shade' are respectively the key: value pairs for the second-level
   • grey returns not a single value, but a whole other map with more key: value pairs nested within the original map
4. The tricky part is knowing how to access key: value pairs from nested maps. It can be confusing at first but is really quite simple once you get the hang of it.

How do we access the key: value pair of the first level?

A.  map-get($palettes, color);

How do we access the nested key: value pair of the second level?

map-get(A, 'shade');

Note: 'A' references the value of the initial map-level (shown above in the first-level example). Simply cut 'A' and paste it with map-get($palettes, color) which gives us our formula ....

map-get(map-get($palettes, color),  'shade');

Now you can replace color and 'shade' with the actual name of the color and shade you want to use

SOLUTION

map-get(map-get($palettes, grey), 'x-dark);

REMINDER: Nested maps execute inwards to out.

SUMMARY Our solution is nothing more than saying....

map-get(color, 'shade');

// Where ....
// map-get($palettes, color) is the first argument AKA color,  and
// 'shade' is the second arg

I found this tricky trying to explain. I hope this helps.