mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +08:00

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

src

fix(theming): update global css variable naming and default values (#16003 )

2018-10-23 12:37:04 -04:00

readme.md

chore(packages): move the packages to root

2018-03-12 16:02:25 -04:00

server.js

chore(packages): move the packages to root

2018-03-12 16:02:25 -04:00

stencil.config.js

refactor(sass): tweaks to the alpha css variables (#14223 )

2018-03-30 10:27:58 -04:00

tsconfig.json

chore(packages): move the packages to root

2018-03-12 16:02:25 -04:00

readme.md

Theme Builder

CD to core package:

cd core

Pull latest:

git pull --rebase

NPM Install

npm install

Run Theme Builder

npm run theme-builder

Open Theme Builder App

http://localhost:3333/theme-builder

Github App: Commit CSS changes using this format:

feat(theme): create oceanic theme
refactor(theme): update default theme

Pull the latest again for good measure:

git pull --rebase

Github App: Push to Origin