Css theme at parent element overrides theme at child element

Question

In my application I provide set of color themes that user can choose from. I'm also creating documentation page which is part of the application and shows all possible themes.

I have issue with nesting themes: parent theme is set on application level and child themes are in the documentation page for showcase. I some situations child theme is not applied correctly - at least it is not what I expect.

I'm not necessarily seeking for solution here, just want to understand why styles are applied as they are.

Here is simplified example. Let's say I have 3 themes that user can choose from. To apply theme colors for whole application I'm adding corresponding CSS class at body level with javascript. That part works fine. I have also one documentation page where I want to show all 3 themes - couple of boxes colored with each theme.

HTML:

<div class="theme-2">
    <div class="theme-1">
      <span class="primary">nok</span>
      <span class="secondary">nok</span>
      <span class="accent">nok</span>
      <span class="warn">nok</span>
    </div>
    <div class="theme-2">
      <span class="primary">ok</span>
      <span class="secondary">ok</span>
      <span class="accent">ok</span>
      <span class="warn">ok</span>
    </div>
    <div class="theme-3">
      <span class="primary">ok</span>
      <span class="secondary">ok</span>
      <span class="accent">ok</span>
      <span class="warn">ok</span>
    </div>
  </div>

SCSS:

.theme-1 {
  .primary {
    background: lightblue;
  }
  .secondary {
    background: green;
  }
  .accent {
    background: pink;
  }
  .warn {
    background: red;
  }  
}
.theme-2 {
  .primary {
    background: brown;
  }
  .secondary {
    background: grey;
  }
  .accent {
    background: yellow;
  }
  .warn {
    background: darkred;
  }  
}
.theme-3 {
  .primary {
    background: steelblue;
  }
  .secondary {
    background: lightgreen;
  }
  .accent {
    background: salmon;
  }
  .warn {
    background: plum;
  }  
}

In case of first block "theme-1" is overridden with "theme-2" from parent div. Other two blocks with "theme-2" and "theme-3" are styled ok.

I would expect here:

• either parent theme overrides child themes for each block, so everything is styled with "theme-2"
• or each block is styled with it's own theme - "theme-1", "theme-2" and "theme-3".

Can someone explain why this is not styled as expected?

Full example is here: https://codepen.io/peter_zz/pen/yZLPPV