Skip to content

refactor(ios): update toolbar and tabbar default background colors #22852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 9, 2021
Merged

refactor(ios): update toolbar and tabbar default background colors #22852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4b9fd2d
update ios toolbar colors
liamdebeasi Feb 1, 2021
dd9a69e
add breaking
liamdebeasi Feb 2, 2021
48909c3
Merge branch 'next' into header-tint
liamdebeasi Feb 5, 2021
da93f61
Merge branch 'next' into header-tint
liamdebeasi Feb 8, 2021
1b78766
update to f7f7f7
liamdebeasi Feb 9, 2021
adde31c
update breaking log
liamdebeasi Feb 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions BREAKING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ This is a comprehensive list of the breaking changes introduced in the major ver

- [Components](#components)
* [Header](#header)
* [Tab Bar](#tab-bar)
* [Toast](#toast)
* [Toolbar](#toolbar)
- [Config](#config)
* [Transition Shadow](#transition-shadow)

Expand All @@ -34,10 +36,26 @@ ion-header.header-collapse-condense ion-toolbar:last-of-type {
}
```

#### Tab Bar

The default iOS tab bar background color has been updated to better reflect the latest iOS styles. The new default value is:

```css
var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7));
```

#### Toast

The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`.

#### Toolbar

The default iOS toolbar background color has been updated to better reflect the latest iOS styles. The new default value is:

```css
var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7));
```


### Config

Expand All @@ -46,6 +64,7 @@ The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`.
The `experimentalTransitionShadow` config option has been removed. The transition shadow is now enabled when running in `ios` mode.



## Version 5.x

- [CSS](#css)
Expand Down
4 changes: 2 additions & 2 deletions core/src/themes/ionic.theme.default.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ $overlay-ios-background-color: var(--ion-overlay-background-color,

// iOS Tabs & Tab bar
// --------------------------------------------------
$tabbar-ios-background: var(--ion-tab-bar-background, $background-color) !default;
$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7)) !default;
$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-600) !default;
$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;

// iOS Toolbar
// --------------------------------------------------
$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, #fff)) !default;
$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7)) !default;
$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
$toolbar-ios-color: var(--ion-toolbar-color, $text-color) !default;

Expand Down