css Question posted in
Some basic documentation can be found here.

Theming in SCSS design system

I am working on design system in SCSS and struggling to setup themes.
I have so far achieved a lot with help of one answer on this platform but need some further assistance.

I have created a mixin for theme based on this answer which is using this article

@mixin theme($category, $token, $property, $state: false) {
  @each $theme-name, $theme-map in $themes {
    $value: getthemevalue($category, $token, $theme-name);

    @at-root .#{$theme-name} #{&} {
      #{$property}: #{map-get($color-tokens, $value)};
    }
  }
}

Now, this is working so great for a lot of cases just one case is still not being handled.

.header {
    h2, label {
       @include mixin(...)
    }
}

the compiled css generated is

.light-mode .header h2, .header label {color: ...}

What I want is

.light-mode .header h2, .light-mode .header label {color: ...)

for all the selectors, it should make the theme as parent
But this is not being done.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have found a solution to this. Instead of add & in braces block, it needs to be added without it then it works as expected.

    @mixin theme($category, $token, $property, $state: false) {
  @each $theme-name, $theme-map in $themes {
    $value: getthemevalue($category, $token, $theme-name);

    @at-root {
      .#{$theme-name} & {
        #{$property}: #{map-get($color-tokens, $value)};
      }
    }
  }
}

  2. 0

    You need to modify slightly your mixin function, so it applies on every selector.

    In example:

    @mixin theme($category, $token, $property, $state: false) {
  @each $theme-name, $theme-map in $themes {
    $value: getthemevalue($category, $token, $theme-name);

    @at-root (with: ".#{$theme-name}") {
      .#{$theme-name} #{&} {
        #{$property}: #{map-get($color-tokens, $value)};
      }
    }
  }
}

    @at-root with the with option: Ensures that theme (.light-mode) class is wrapped arround each selector.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search