From 00814084b1682696ff7f25168d0b1e6bacd7a600 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 8 Apr 2016 12:53:40 -0400 Subject: [PATCH] chore(CHANGELOG): update changelog to include steps for importing globals.core references #5445 --- CHANGELOG.md | 20 ++++++++++++++++++-- ionic/globals.wp.scss | 2 +- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index be38838a39..e9f8920260 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -101,13 +101,27 @@ $colors: ( ###### Important -If you are using the function `color` anywhere in your app to get a color from the map, it has changed to require the `$colors` map as the first argument. Therefore, this: +In order to use the Ionic Sass functions in your app's theming files, you need to import `globals.core` at the beginning of your `app.variables.scss` file. It should look like this: + +```scss +// http://ionicframework.com/docs/v2/theming/ + +// Ionic Shared Functions +// -------------------------------------------------- +// Makes Ionic Sass functions available to your App + +@import 'globals.core'; +``` + +If you are using the `map-get` function in your app, you should replace it with the `color` function. The `color` function takes the `$colors` map as the first argument, and the color you want to get as the second. You can optionally pass `base` or `contrast` as the third argument. If there is no third argument it will return the `base` color. + +If you are already using the function `color` in your app, you need to update it so this: ```scss color: color(primary); ``` -has become this: +becomes this: ```scss color: color($colors, primary); @@ -119,6 +133,8 @@ If you'd like to grab the `contrast` color you can use: color: color($colors, primary, contrast); ``` +See the conference app's [theme directory](https://github.com/driftyco/ionic-conference-app/tree/master/app/theme) for example usage. + ###### Note If you include a `base` you must include a `contrast` and vice-versa. If you don't provide a `base` and `contrast`, such as `light: #f4f4f4` above, we use the given color as the base, and a custom function to determine the contrast color. diff --git a/ionic/globals.wp.scss b/ionic/globals.wp.scss index 063a08da06..84d1cb2332 100644 --- a/ionic/globals.wp.scss +++ b/ionic/globals.wp.scss @@ -3,5 +3,5 @@ @import "globals.core"; -// Windowsn Globals +// Windows Globals @import "themes/default.wp";