Tokens: add scss map files for theme/variants

[whernebrink]

Is your feature request related to a problem or use case? Please describe. As in the ids-identity, it would be great to have the sass maps for the different themes and variants. If we can have that, we can conditionally add the css variables of interest for us, for the given theme/variants.

Describe the solution you'd like To have the following files just like ids-identity.

• theme-new-contrast.map.variables.scss
• theme-new-dark.map.variables.scss
• theme-new-light.map.variables.scss

[tmcconechy]

@whernebrink cleaned up the issue since i moved it... We can just use this one

Can you add that example of how you would use it? What if we did it based around @use as i dont quite get what the map part gets you? But i can see importing parts of the css variables.

[whernebrink]

The only thing that the maps are doing for me now, is allowing me to exclude variables that I'm not interested in, e.g. the palette tokens:

@use './theme-new-light' as light; // 👈 files that just @import the theme-new-[variant].map.variables.scss from node_modules
@use './theme-new-dark' as dark;
@use './theme-new-contrast' as contrast;

html.theme-new-light {
  @each $key, $value in light.$css-variables {
    // only add tokens that are not in the color palette
    @if str-index($key, '--ids-color-palette') == null {
      #{$key}: #{$value};
    }
  }
}
html.theme-new-dark {
  @each $key, $value in dark.$css-variables {
    // only add tokens that are not in the color palette
    @if str-index($key, '--ids-color-palette') == null {
      #{$key}: #{$value};
    }
  }
}
html.theme-new-contrast {
  @each $key, $value in contrast.$css-variables {
    // only add tokens that are not in the color palette
    @if str-index($key, '--ids-color-palette') == null {
      #{$key}: #{$value};
    }
  }
}

If the ids-foundation can provide files with the css variables for each theme in a separate file, I would not need the maps.

This is how I imagine my main scss file could look like:

:root { 
  //  These are not specific for any theme, so I'd like to be able to just include them, or exclude them as needed, perhaps not inside this `:root {}` block if they're already in one, in their corresponding ids file, then i'd just @import or something in this .scss file
   // @import/@use palette tokens
   // @import/@use "size/spacing" and/or font tokens 
}

// For the others, I'd like to be able to just import the ones for a specific theme
html.theme-new-light {
 // @import/@use theme specific variables 
}
html.theme-new-dark {
 // @import/@use theme specific variables 
}
html.theme-new-contrast {
 // @import/@use theme specific variables 
}

I'd be happy to hear what you think about this approach and/or if you have another suggestion for how to get them theme tokens that are for a specific theme included? :)

[tmcconechy]

ok @whernebrink i'll look into this. I'd like to use this as well inside the components if we can. But its possible i would come up with a slightly different approach but still the goal would be the same of only including parts

[tmcconechy]

@whernebrink

I was trying this way but it seems you cannot conditionally import...If i have a css file with css vars how you think we might setup themes?

// For the others, I'd like to be able to just import the ones for a specific theme
html.theme-new-light {
 // @import/@use theme specific variables 
}
html.theme-new-dark {
 // @import/@use theme specific variables 
}
html.theme-new-contrast {
 // @import/@use theme specific variables 
}

Will think of some more ideas...

[whernebrink]

Hey Tim, yeah.. that's probably correct (think I was going for pseudo code there) and why I went with the following code above.

The only thing that the maps are doing for me now, is allowing me to exclude variables that I'm not interested in, e.g. the palette tokens:

@use './theme-new-light' as light; // 👈 files that just @import the theme-new-[variant].map.variables.scss from node_modules
@use './theme-new-dark' as dark;
@use './theme-new-contrast' as contrast;

html.theme-new-light {
  @each $key, $value in light.$css-variables {
    // only add tokens that are not in the color palette
    @if str-index($key, '--ids-color-palette') == null {
      #{$key}: #{$value};
    }
  }
}
html.theme-new-dark {
  @each $key, $value in dark.$css-variables {
    // only add tokens that are not in the color palette
    @if str-index($key, '--ids-color-palette') == null {
      #{$key}: #{$value};
    }
  }
}
html.theme-new-contrast {
  @each $key, $value in contrast.$css-variables {
    // only add tokens that are not in the color palette
    @if str-index($key, '--ids-color-palette') == null {
      #{$key}: #{$value};
    }
  }
}

If the ids-foundation can provide files with the css variables for each theme in a separate file, I would not need the maps.

This is how I imagine my main scss file could look like:

:root { 
  //  These are not specific for any theme, so I'd like to be able to just include them, or exclude them as needed, perhaps not inside this `:root {}` block if they're already in one, in their corresponding ids file, then i'd just @import or something in this .scss file
   // @import/@use palette tokens
   // @import/@use "size/spacing" and/or font tokens 
}

// For the others, I'd like to be able to just import the ones for a specific theme
html.theme-new-light {
 // @import/@use theme specific variables 
}
html.theme-new-dark {
 // @import/@use theme specific variables 
}
html.theme-new-contrast {
 // @import/@use theme specific variables 
}

I'd be happy to hear what you think about this approach and/or if you have another suggestion for how to get them theme tokens that are for a specific theme included? :)

[tmcconechy]

What do you think about doing it with sass use then seperate them in different files so similar to this example https://sass-lang.com/documentation/at-rules/use/

@use 'ids-foundation/theme-dark/core-colors'
@use 'ids-foundation/theme-dark/cursors'
@use 'ids-foundation/theme-dark/background-colors'
@use 'ids-foundation/theme-dark/tabindexes'
@use 'ids-foundation/theme-dark/fonts'

Or do we need really exact specifications for just one variable like this? Maybe maps is the best way?

[whernebrink]

Hey @tmcconechy, sorry about the late response. I think just the maps would be enough. When we do have the maps in ids-foundation (like the ones in ids-identity), I could migrate to use foundation instead of identity. 👍