Menu icon Foundation
Adding custom color "Accent" in SASS

I successfully added an Accent color in SASS which produced CSS for button, badge, etc. That part is great, but the accent color is a dark color and it is grabbing $black as the text color. Is there a variable I can add to the SASS to tell it to flip to the text color to $white?    thanks.

custom colorSass

I successfully added an Accent color in SASS which produced CSS for button, badge, etc. That part is great, but the accent color is a dark color and it is grabbing $black as the text color. Is there a variable I can add to the SASS to tell it to flip to the text color to $white?    thanks.

Sven CAILTEUX over 2 years ago

Have you tried "dark" class ?

Now you can use SASS functions :

darken( $base-color, 10% )
lighten( $base-color, 10% )

saturate( $base-color, 20% )
desaturate( $base-color, 20% )

adjust-hue( $base-color, 20% )

tint( $base-color, 10% )
shade( $base-color, 10% )

Jay Thatcher over 2 years ago

My question wasn't phrased clear enough. I added a color to the _settings.scss. It generated button, badge, etc. using that color, but it pulls $black for color as default and in this case I need $white for color. See image attached.

Frank Wronson over 2 years ago

You will need to create the same class in your files to overwrite the 'color' property for `.button.accent`. The button mixin uses the check contrast function and returns a color that passes accessibility guidelines. In your case `#768591` with `#ffffff` does have meet the needed contrast ratio so `#0a0a0a` is served up instead.

You can use this link http://webaim.org/resources/contrastchecker/ to check contrast ratios ahead of time.

Jay Thatcher over 2 years ago

Thanks for the answer. Makes sense. I darkened the color to #5c6b77, which changed color to the $white setting. Appreciate the help and detailed explanation.