LESS CSS - interpolation on mapped variables - less

Question

I'm trying to automate a nested map scenario using LESS CSS.
Consider the following single level map:
.map(#keys) {
each(#keys, {
#{value} : #index;
});
}
Called something like this:
.render-maps() {
#arr: child1, child2, child3;
#text-colors: {
#map(#arr);
}
}
This works fine for single level maps where the output is a simple key and value, however I want to create a second level map - like below - but I can't get it to compile:
.nested-map(#arr1, #arr2) {
each(#arr1, {
// I cannot get the compiler to output with a prefix '#' on parent!!!
#parent#{index} : {
each(#arr2, {
#{value} : #index;
});
}
});
}
Can it be done? If so, any advice appreciated.
UPDATE
Here's what I'm trying to achieve, just in case there's a better solution:
I have a number of base colors, these are held as variables in themes.
#primary: #000000;
For each base color, there may be a contrasting "on" color - representing text etc.
#on-primary: #ffffff;
For each "on" color, there maybe a number of categories - text, icons, borders.
... and for each category, there could be multiple states and each state uses a different opacity.
For instance,
icons have 3 states - active, inactive, disabled - each with a different opacity but using the same "on" color.
You could choose to place icons on the background or on a colored surface, so there are multiple themes as well.
To summarise, there could be hundreds of different permutations - which I don't want to maintain individually as variables.
Instead, I create a number of key variables/lists and mixins so that I can generate all of the variations.
#primary: #000000; // 10 of these
#on-primary: #ffffff;
#icon-variants: active, inactive, disabled;
#icon-opacity-on-primary: 70, 50, 38;
Once, I have all my variants, I retrieve colors via a mixin. Here's an example of a single level map for colors.
.get-color(#color) {
#colors: {
.map-colors();
}
#return: color(#colors[$#color]);
}
This type of approach means that I can only need to know a theme "primary", from which I can get the correct, "on" colors and any variants for text, icons, borders, and any state of any variant suing just a handful of mixins.
For example: .get-text-color(high-emphasis, on-primary)[];
Here's how I have to map 2 level maps because I can't do it automatically:
.get-text-color(#theme; #type: high) {
#text-colors: {
#on-primary: { .map-text-color(on-primary); }
#on-primary-dark: { .map-text-color(on-primary-dark); }
#on-primary-light: { .map-text-color(on-primary-light); }
#on-secondary: { .map-text-color(on-secondary); }
#on-error: { .map-text-color(on-error); }
#on-surface: { .map-text-color(on-surface); }
#on-background: { .map-text-color(on-background); }
#on-light: { .map-text-color(on-light); }
#on-dark: { .map-text-color(on-dark); }
}
#return: color(#text-colors[##theme][$#type]);
}
Which results in 30 colors - 10 x 3 states.