Menu icon Foundation
Possible to Apply Global Colors to Text Elements (<p>,<h1>, etc.)?

I'm using the Sass version of Emails 2 and was trying to use the global colors (primary, secondary, success, warning, etc.) on text elements to change their color with the corresponding classes. Unfortunately this doesn't work, so I was wondering if there's a best practice for this kind of thing or if I need to hard-code css inline to make it happen.

Thanks for any help or insight you can provide!

global stylestypographySass

I'm using the Sass version of Emails 2 and was trying to use the global colors (primary, secondary, success, warning, etc.) on text elements to change their color with the corresponding classes. Unfortunately this doesn't work, so I was wondering if there's a best practice for this kind of thing or if I need to hard-code css inline to make it happen.

Thanks for any help or insight you can provide!

This post has been closed. No new replies can be added.

Rafi Benkual over 2 years ago

When it comes to Typography, it's usually uncommon to apply various colors from the color pallete. The color pallet colors are meant to convey state or meaning. Having said that, you can add the colors to the type elements like this

h1,h2,h3,h5,h6,p,span {
  &.primary {
    color: $primary-color;
  }
}

Jason Knase over 2 years ago

Thanks Rafi so much for your assistance!

This is the code I ended up adding to the end of the Typography section of _settings.scss. Works great!

h1,h2,h3,h4,h5,h6,p,span {
  &.primary {
    color: $primary-color;
  }
}
h1,h2,h3,h4,h5,h6,p,span {
  &.secondary {
    color: $secondary-color;
  }
}
h1,h2,h3,h4,h5,h6,p,span {
  &.success {
    color: $success-color;
  }
}
h1,h2,h3,h4,h5,h6,p,span {
  &.warning {
    color: $warning-color;
  }
}