Hollow button ignores $primary-color and uses default foundation color.

[kintesh]

I upgraded my existing project to 6.2 and found this issue where the hollow buttons ignores $primary-color for both text and border.

So in my _settings I have the primary color set to: $primary-color: #000000;

Before 6.2 the hollow buttons would use the $primary-color for text and border.
After 6.2, the styles defaults to:

.button.hollow {
    border: 1px solid #2199e8;
    color: #2199e8;
}

In the _buttons.scss I found this (don't know if its any useful)

@mixin button-hollow-style($color: $primary-color) {
  $color-hover: scale-color($color, $lightness: -50%);

  border: 1px solid $color;
  color: $color;

  &:hover, &:focus {
    border-color: $color-hover;
    color: $color-hover;
  }
}

and this

// Colors
@each $name, $color in $foundation-palette {
      @if $button-fill != hollow {
        &.#{$name} {
          @include button-style($color, auto);
        }
      }
      @else {
        &.#{$name} {
          @include button-hollow-style($color);
        }

        &.#{$name}.dropdown::after {
          border-top-color: $color;
        }
      }
    }

// Hollow style
    @if $button-fill != hollow {
      &.hollow {
        @include button-hollow;
        @include button-hollow-style;

        @each $name, $color in $foundation-palette {
          &.#{$name} {
            @include button-hollow-style($color);
          }
        }
      }
    }

Also whats the deal with $foundation-palette?

[Deckluhm]

$foundation-palette is the new way to handle colors in 6.2.

From 6.2 changelog:

Customizable color palettes! A new Sass variable called $foundation-palette now holds the hex codes for the primary, secondary, success, warning, and alert colors. The colors in this variable are used to create color classes for buttons, labels, and so on. This means you can add new colors to the list, and get new CSS classes to customize components.

• The old variables, $primary-color and so on, still work, but now reference the values from this map.
• Projects without $foundation-palette will continue to work like normal.

So basically you now need to define your colors inside the $foundation-palette map (you need to add this new variable if you are upgrading from previous version) like this:

$foundation-palette: (
  primary: #2199e8,
  secondary: #777,
  success: #3adb76,
  warning: #ffae00,
  alert: #ec5840,
)

And the magic thing is that you can add any new color in this map and you will automatically have a new class associated that you can use in many components like buttons, callouts, labels, badges...etc.

For example if you add a info: #00a4ef element in this map, you will have a .info class you can use to make an info button like this:

<div class="button info">I'm an info button</div>

If you want to understand how it works internally, you should check:

• https://github.com/zurb/foundation-sites/blob/develop/scss/_global.scss#L25
• https://github.com/zurb/foundation-sites/blob/develop/scss/_global.scss#L105

[rafibomb]

@Deckluhm Great answer!

[kintesh]

@Deckluhm thanks. I got it fixed by including the color palette in my settings.

[kball]

Looks like this is resolved. Reopen if I'm wrong