.my-component {
  @include theme((
    header: (
      color: #000 
    ) 
  ));
  &.header {
    color: theme(header, color);
  }
}

@include theme((
  headings: (
    h1: 2em, 
    h2: 1.8em 
  ), 
  font-family: 'Roboto'
));
 
html, body {
  font-family: theme("global", font-family);
}
 
.my-component h1 {
  font-size: theme("global", headings, h1)
}

my-component {
  @include theme($sassMap) 
}

my-component {
  @include theme((
    padding: 15px, 
    general: (
      bg: #fff 
    ), 
    header: (
      color: blue,
      background-color: #fff,
      line-height: 1
    ),
    footer: (
      large-text: 16px
    )
  ));
 
  // current theme scope: "my-component". 
  padding: theme(padding); //implicit from "my-component". 
  // interpolates nested styles 
  background-color: theme(general, bg);
  // explicitly set the theme name to get the styles from. 
  background-color: theme("my-component", general, bg);
 
  .header {
    // current theme scope: "my-component". 
    line-height: theme(header, line-height); //implicit from "my-component". 
  }
 
  @at-root #{&}--footer {
    //current theme scope "". (since @at-root is used) 
    font-size: theme("ys-card", footer, large-text); //must use explicit theme binding. 
  }
}

@include theme((themeMap))
 
h1 {
  font-size: theme("global", h1, font-size);
}