Searchbar sass build fails

[dvdbrink]

Short description of the problem:

I'm unable to build sass files due to an error in searchbar.ios.scss. This has been happening since upgrading to beta.9 and still persists in beta.10. My current workaround is manually replacing the file with https://github.com/driftyco/ionic/blob/c8f760f080d73817481131e7eccfdfd618296ada/src/components/searchbar/searchbar.ios.scss

Steps to reproduce:

1. ionic serve

node_modules\ionic-angular\components\searchbar\searchbar.ios.scss
Error: argument `$color` of `rgba($color, $alpha)` must be a color

       Backtrace:
        node_modules/ionic-angular/components/searchbar/searchbar.ios.scss:219, in function `rgba`
        node_modules/ionic-angular/components/searchbar/searchbar.ios.scss:219
        on line 219 of node_modules/ionic-angular/components/searchbar/searchbar.ios.scss
>>   $fg-color: rgba($color-contrast, .5);

Which Ionic Version? 2.0.0-beta.9 & 2.0.0-beta.10

Run ionic info from terminal/cmd prompt:
Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS:
Node Version: v6.2.1

[brandyscarney]

Hey @dvdbrink, are you setting any custom colors in your Sass theme files? Could you show me what your $colors map looks like in app.variables.scss? Thanks!

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
);

[dvdbrink]

@brandyscarney Yes, I am.

$colors: (
  primary: (
    base: #0E3554,
    contrast: #fff,
    light: #8BCDE3
  ),
  secondary: (
    base: #CB005C,
    contrast: #fff
  ),
  tertiary: (
    base: #FFB612,
    contrast: #fff
  ),
  quaternary: (
    base: #378810,
    contrast: #fff
  ),
  quinary: (
    base: #617C8F,
    contrast: #fff
  ),
  greyscale: (
    base: #EEEEEE,
    dark: #848484
  ),
  success: darkgreen,
  danger: #f53d3d
);

[brandyscarney]

Are you using the greyscale color on the searchbar? Right now if you add a base color you have to add a contrast. So this:

  greyscale: (
    base: #EEEEEE,
    dark: #848484
  ),

will error anywhere you use it on a component that grabs the contrast color. Maybe you meant for dark to be contrast?

[dvdbrink]

It's doesn't error anymore after adding a contrast to greyscale. The searchbar didn't use the greyscale color though and I didn't have the error in beta.8.

[brandyscarney]

Ah sorry I said that wrong. When the Sass builds the CSS from the component files it loops through every color and generates the CSS for it. The reason this didn't happen in beta 8 is because the Searchbar didn't use the contrast until beta 9: b4028c6

So the real issue here is that if you use a base color you have to have a contrast color. I added a comment to clear up the documentation behind this but other than that it is working as desired: ionic-team/ionic-site#613 (comment)

Thanks for the issue! 😄