Files
Brandy Carney b2021fd9c4 fix(theming): update global css variable naming and default values (#16003)
Updates all of the global variables to make sure their naming is consistent, their default values are correct, they are used properly by the related components, and remove any that are not used.

- removes some of the non mode-specific global Sass variables
- updates the md and ios values so that the default is the css variable
with different fallbacks
- removes non-color related css variables from the global file
- fixes item so it uses the background color that is set by the global
file

# Breaking Changes

## Removed Global CSS Variables

The following global CSS variables have been removed for the reasons listed.

| Variable Name                     | Reason                                          |
| ----------------------------------| ------------------------------------------------|
| `--ion-toolbar-color-inactive`    | Unused                                          |
| `--ion-ripple-background-color`   | Unused / Ripple color is based on component     |
| `--ion-header-size`               | Removed in favor of using CSS for h1-h6         |
| `--ion-header-step`               | Removed in favor of using CSS for h1-h6         |

## Renamed Global CSS Variables

The following global CSS variables have been renamed for the reasons listed.

| Old Variable Name                        | New Variable Name                  | Reason                                                                        |
| -----------------------------------------| -----------------------------------| ------------------------------------------------------------------------------|
| `--ion-toolbar-text-color`               | `--ion-toolbar-color`              | Variable is not limited to text color                                         |
| `--ion-toolbar-color-active`             | `--ion-toolbar-color-activated`    | Consistency with our component variables                                      |
| `--ion-tabbar-text-color`                | `--ion-tab-bar-color`              | Variable is not limited to text color                                         |
| `--ion-tabbar-text-color-active`         | `--ion-tab-bar-color-activated`    | Consistency with our component variables                                      |
| `--ion-tabbar-background-color`          | `--ion-tab-bar-background`         | Applies to the background property                                            |
| `--ion-tabbar-background-color-focused`  | `--ion-tab-bar-background-focused` | Applies to the background property                                            |
| `--ion-item-background-color`            | `--ion-item-background`            | Applies to the background property                                            |
| `--ion-item-background-color-active`     | `--ion-item-background-activated`  | Applies to the background property / Consistency with our component variables |
| `--ion-item-text-color`                  | `--ion-item-color`                 | Variable is not limited to text color                                         |
| `--ion-placeholder-text-color`           | `--ion-placeholder-color`          | Consistency with other variables                                              |

Fixes #15989 
Fixes #15559
2018-10-23 12:37:04 -04:00
..
2018-08-08 11:13:39 +02:00

Build

1. Clone ionic

git@github.com:ionic-team/ionic.git
cd ionic

2. Run npm install

cd core npm install

Notice that @ionic/core lives in core.

3. Run npm run dev

Make sure you are inside the core directory.

npm run dev

With the dev command, Ionic components will be built with Stencil, changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser.

4. Preview

Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the test directory, for example: http://localhost:3333/src/components/button/test/basic

As changes are made in an editor to source files, the e2e app will live-reload.

How to contribute

  1. npm run dev allows you to modify the components and have live reloading, just like another ionic app.

  2. When everything looks good, run npm run validate to verify the tests linter and production build passes.

Deploy

  1. npm run prepare.deploy
  2. Review/update changelog
  3. Commit updates using the package name and version number as the commit message.
  4. npm run deploy
  5. 🎉