5.0.0-rc.2

BREAKING.md

@@ -117,7 +117,6 @@ The way the CSS variables are used for targeting the activated, focused and hove
 - Item
 - Menu Button
 - Segment Button
-- Tab Button
 
 Previously, in order to update any of the background colors for the states you would have to know what the opacity was set to. Using the Material Design spec as an example, it would require you to know that the hover state uses a white overlay with an opacity of `.08`. This means that if we had the following set by default:
 
@@ -139,34 +138,50 @@ The new way adds the following variables:
 --background-hover-opacity
 ```
 
-It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the new variable names.
+It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the variable names.
 
 This allows you to still have control over the opacity if desired, but when updating the state, you only have to set the main variables: `--background-activated`, `--background-focused`, `--background-hover` and the button will still match the spec. This is most important when changing the global theme, as updating the toolbar color will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is.
 
+As a result of these changes, the following global CSS variables will not change the opacity and as such should be treated the same as the `--background-{STATE}` variables:
+
+```css
+--ion-item-background-activated
+--ion-item-background-focused
+--ion-item-background-hover
+```
 
 ##### Examples
 
 ```css
-/* Setting the button background on hover to solid red */
+/* Setting the button background to solid red */
 ion-button {
   --background-hover: red;
   --background-hover-opacity: 1;
 }
 
-/* Setting the action sheet button background on focus to an opaque green */
+/* Setting the action sheet button background on hover to an opaque green */
 ion-action-sheet {
-  --button-background-focus: green;
-  --button-background-focus-opacity: 0.5;
+  --button-background-hover: green;
+  --button-background-hover-opacity: 0.5;
 }
 
-/*
- * Setting the fab button background on hover to match the text color with
- * the default --background-hover-opacity on md
- */
+/* Setting the fab button background to use the text color with the default opacity on md */
 .md ion-fab-button {
   --color: #222;
   --background-hover: #222;
 }
+
+/* Setting the theme background for items to use #000 (black) with the default theme opacity */
+:root {
+  /* is used in item as rgba(0, 0, 0, var(--background-activated-opacity)); */
+  --ion-item-background-activated: #000;
+
+  /* is used in item as rgba(0, 0, 0, var(--background-focused-opacity)); */
+  --ion-item-background-focused: #000;
+
+  /* is used in item as rgba(0, 0, 0, var(--background-hover-opacity)); */
+  --ion-item-background-hover: #000;
+}
 ```
 
 ##### Global CSS Properties
@@ -328,7 +343,7 @@ For more information see the [List Header usage](https://ionicframework.com/docs
 - The `swipeEnable()` function has been removed in Angular, use `swipeGesture()` instead.
 - The `side` values `left` and `right` have been removed, use `start` and `end` instead.
 - Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
-
+  
   **Before**
 
   ```html
@@ -418,10 +433,6 @@ The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get
 
 Segment was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes, some breaking changes were inevitably introduced in order to support the new design.
 
-##### Events
-
-`ion-segment` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-segment` instead.
-
 ##### Button States
 
 - The activated styles and custom CSS properties have been removed. These are no longer being used in the latest spec as the indicator and ripple are used to show activation. Properties removed:

CHANGELOG.md

@@ -1,15 +1,3 @@
-# [5.0.0-rc.3](https://github.com/ionic-team/ionic/compare/v5.0.0-rc.2...v5.0.0-rc.3) (2020-02-05)
-
-
-### Bug Fixes
-
-* **refresher:** ensure gesture does not interfere with item-sliding ([#20380](https://github.com/ionic-team/ionic/issues/20380)) ([8983c70](https://github.com/ionic-team/ionic/commit/8983c7006e54743873cd45ae1acdfa974d74547a)), closes [#20379](https://github.com/ionic-team/ionic/issues/20379)
-* **refresher:** translate background content when refreshing ([#20378](https://github.com/ionic-team/ionic/issues/20378)) ([cf70916](https://github.com/ionic-team/ionic/commit/cf7091625ecb46c3f9882ae9eff5c946523fab75)), closes [#20377](https://github.com/ionic-team/ionic/issues/20377)
-* **segment:** allow background to be set on iOS segment in a toolbar ([#20350](https://github.com/ionic-team/ionic/issues/20350)) ([0f31624](https://github.com/ionic-team/ionic/commit/0f31624104d195367df197eda9b8d6c5bda4cf75))
-* **toolbar:** properly apply safe area and border ([#20375](https://github.com/ionic-team/ionic/issues/20375)) ([4971499](https://github.com/ionic-team/ionic/commit/4971499026fcee70a32cc9480302bb14a1bebcb7)), closes [#20354](https://github.com/ionic-team/ionic/issues/20354)
-
-
-
 # [5.0.0-rc.2](https://github.com/ionic-team/ionic/compare/v5.0.0-rc.1...v5.0.0-rc.2) (2020-01-30)
 
 

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.0.0-rc.3",
+  "version": "5.0.0-rc.2",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -42,7 +42,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "5.0.0-rc.3",
+    "@ionic/core": "5.0.0-rc.2",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.0.0-rc.3",
+  "version": "5.0.0-rc.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/src/components/card/readme.md

@@ -97,7 +97,7 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" className="ion-activated">
+      <IonItem href="#" class="ion-activated">
         <IonIcon name="wifi" slot="start" />
         <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
@@ -107,7 +107,7 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem className="ion-activated">
+      <IonItem class="ion-activated">
         <IonIcon name="warning" slot="start" />
         <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>

core/src/components/card/usage/react.md

@@ -30,7 +30,7 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" className="ion-activated">
+      <IonItem href="#" class="ion-activated">
         <IonIcon name="wifi" slot="start" />
         <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
@@ -40,7 +40,7 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem className="ion-activated">
+      <IonItem class="ion-activated">
         <IonIcon name="warning" slot="start" />
         <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>

core/src/components/footer/footer.ios.scss

@@ -4,7 +4,7 @@
 // iOS Footer
 // --------------------------------------------------
 
-.footer-ios ion-toolbar:first-of-type {
+.footer-ios ion-toolbar:first-child {
   --border-width: #{$hairlines-width} 0 0;
 }
 
@@ -21,6 +21,6 @@
   }
 }
 
-.footer-ios.ion-no-border ion-toolbar:first-of-type {
+.footer-ios.ion-no-border ion-toolbar:first-child {
   --border-width: 0;
 }

core/src/components/footer/footer.scss

@@ -14,6 +14,6 @@ ion-footer {
   z-index: $z-index-toolbar;
 }
 
-ion-footer ion-toolbar:last-of-type {
+ion-footer ion-toolbar:last-child {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }

core/src/components/grid/readme.md

@@ -250,9 +250,9 @@ export const GridExample: React.FC = () => (
       </IonRow>
 
       <IonRow>
-        <IonCol className="ion-align-self-start">ion-col start</IonCol>
-        <IonCol className="ion-align-self-center">ion-col center</IonCol>
-        <IonCol className="ion-align-self-end">ion-col end</IonCol>
+        <IonCol class="ion-align-self-start">ion-col start</IonCol>
+        <IonCol class="ion-align-self-center">ion-col center</IonCol>
+        <IonCol class="ion-align-self-end">ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -260,10 +260,10 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow className="ion-align-items-start">
+      <IonRow class="ion-align-items-start">
         <IonCol>start ion-col</IonCol>
         <IonCol>start ion-col</IonCol>
-        <IonCol className="ion-align-self-end">start ion-col end</IonCol>
+        <IonCol class="ion-align-self-end">start ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -271,7 +271,7 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow className="ion-align-items-center">
+      <IonRow class="ion-align-items-center">
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
@@ -282,9 +282,9 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow className="ion-align-items-end">
+      <IonRow class="ion-align-items-end">
         <IonCol>end ion-col</IonCol>
-        <IonCol className="ion-align-self-start">end ion-col start</IonCol>
+        <IonCol class="ion-align-self-start">end ion-col start</IonCol>
         <IonCol>end ion-col</IonCol>
         <IonCol>
           ion-col

core/src/components/grid/usage/react.md

@@ -51,9 +51,9 @@ export const GridExample: React.FC = () => (
       </IonRow>
 
       <IonRow>
-        <IonCol className="ion-align-self-start">ion-col start</IonCol>
-        <IonCol className="ion-align-self-center">ion-col center</IonCol>
-        <IonCol className="ion-align-self-end">ion-col end</IonCol>
+        <IonCol class="ion-align-self-start">ion-col start</IonCol>
+        <IonCol class="ion-align-self-center">ion-col center</IonCol>
+        <IonCol class="ion-align-self-end">ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -61,10 +61,10 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow className="ion-align-items-start">
+      <IonRow class="ion-align-items-start">
         <IonCol>start ion-col</IonCol>
         <IonCol>start ion-col</IonCol>
-        <IonCol className="ion-align-self-end">start ion-col end</IonCol>
+        <IonCol class="ion-align-self-end">start ion-col end</IonCol>
         <IonCol>
           ion-col
           <br />#
@@ -72,7 +72,7 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow className="ion-align-items-center">
+      <IonRow class="ion-align-items-center">
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
         <IonCol>center ion-col</IonCol>
@@ -83,9 +83,9 @@ export const GridExample: React.FC = () => (
         </IonCol>
       </IonRow>
 
-      <IonRow className="ion-align-items-end">
+      <IonRow class="ion-align-items-end">
         <IonCol>end ion-col</IonCol>
-        <IonCol className="ion-align-self-start">end ion-col start</IonCol>
+        <IonCol class="ion-align-self-start">end ion-col start</IonCol>
         <IonCol>end ion-col</IonCol>
         <IonCol>
           ion-col

core/src/components/header/header.ios.scss

@@ -4,7 +4,7 @@
 // iOS Header
 // --------------------------------------------------
 
-.header-ios ion-toolbar:last-of-type {
+.header-ios ion-toolbar:last-child {
   --border-width: 0 0 #{$hairlines-width};
 }
 
@@ -21,7 +21,7 @@
   }
 }
 
-.header-ios.ion-no-border ion-toolbar:last-of-type {
+.header-ios.ion-no-border ion-toolbar:last-child {
   --border-width: 0;
 }
 
@@ -36,7 +36,7 @@
   top: 0;
 }
 
-.header-collapse-condense ion-toolbar:first-of-type {
+.header-collapse-condense ion-toolbar:first-child {
   padding-top: 7px;
 
   z-index: 1;

core/src/components/header/header.scss

@@ -14,6 +14,6 @@ ion-header {
   z-index: $z-index-toolbar;
 }
 
-ion-header ion-toolbar:first-of-type {
+ion-header ion-toolbar:first-child {
   padding-top: var(--ion-safe-area-top, 0);
 }

core/src/components/item/item.scss

@@ -74,7 +74,7 @@
   --color-activated: var(--color);
   --color-focused: var(--color);
   --color-hover: var(--color);
-  --ripple-color: currentColor;
+  --ripple-color: var(--ion-item-background-activated, currentColor);
 
   @include font-smoothing();
 

core/src/components/item/readme.md

@@ -778,14 +778,14 @@ const Example: React.FC<{}> = () => (
       </IonItem>
 
       <IonItem>
-        <IonLabel className="ion-text-wrap">
+        <IonLabel class="ion-text-wrap">
         Multiline text that should wrap when it is too long
         to fit on one line in the item.
         </IonLabel>
       </IonItem>
 
       <IonItem>
-        <IonLabel className="ion-text-wrap">
+        <IonLabel class="ion-text-wrap">
           <IonText color="primary">
             <h3>H3 Primary Title</h3>
           </IonText>

core/src/components/item/usage/react.md

@@ -67,14 +67,14 @@ const Example: React.FC<{}> = () => (
       </IonItem>
 
       <IonItem>
-        <IonLabel className="ion-text-wrap">
+        <IonLabel class="ion-text-wrap">
         Multiline text that should wrap when it is too long
         to fit on one line in the item.
         </IonLabel>
       </IonItem>
 
       <IonItem>
-        <IonLabel className="ion-text-wrap">
+        <IonLabel class="ion-text-wrap">
           <IonText color="primary">
             <h3>H3 Primary Title</h3>
           </IonText>

core/src/components/label/readme.md

@@ -90,7 +90,7 @@ export const LabelExample: React.FC = () => (
     </IonItem>
 
     <IonItem>
-      <IonLabel className="ion-text-wrap">
+      <IonLabel class="ion-text-wrap">
         Multi-line text that should wrap when it is too long
         to fit on one line in the item.
       </IonLabel>

core/src/components/label/usage/react.md

@@ -20,7 +20,7 @@ export const LabelExample: React.FC = () => (
     </IonItem>
 
     <IonItem>
-      <IonLabel className="ion-text-wrap">
+      <IonLabel class="ion-text-wrap">
         Multi-line text that should wrap when it is too long
         to fit on one line in the item.
       </IonLabel>

core/src/components/menu/readme.md

@@ -228,7 +228,7 @@ export const MenuExample: React.FC = () => (
       </IonContent>
     </IonMenu>
 
-    <IonMenu side="start" menuId="custom" className="my-custom-menu">
+    <IonMenu side="start" menuId="custom" class="my-custom-menu">
       <IonHeader>
         <IonToolbar color="tertiary">
           <IonTitle>Custom Menu</IonTitle>

core/src/components/menu/usage/react.md

@@ -21,7 +21,7 @@ export const MenuExample: React.FC = () => (
       </IonContent>
     </IonMenu>
 
-    <IonMenu side="start" menuId="custom" className="my-custom-menu">
+    <IonMenu side="start" menuId="custom" class="my-custom-menu">
       <IonHeader>
         <IonToolbar color="tertiary">
           <IonTitle>Custom Menu</IonTitle>

core/src/components/refresher/refresher.tsx

@@ -21,7 +21,6 @@ export class Refresher implements ComponentInterface {
   private didStart = false;
   private progress = 0;
   private scrollEl?: HTMLElement;
-  private backgroundContentEl?: HTMLElement;
   private scrollListenerCallback?: any;
   private gesture?: Gesture;
 
@@ -244,7 +243,7 @@ export class Refresher implements ComponentInterface {
           gestureName: 'refresher',
           gesturePriority: 10,
           direction: 'y',
-          threshold: 5,
+          threshold: 0,
           onStart: () => {
             this.pointerDown = true;
 
@@ -291,7 +290,7 @@ export class Refresher implements ComponentInterface {
       gestureName: 'refresher',
       gesturePriority: 10,
       direction: 'y',
-      threshold: 5,
+      threshold: 0,
       canStart: () => this.state !== RefresherState.Refreshing && this.state !== RefresherState.Completing && this.scrollEl!.scrollTop === 0,
       onStart: (ev: GestureDetail) => {
         ev.data = { animation: undefined, didStart: false, cancelled: false };
@@ -395,8 +394,6 @@ export class Refresher implements ComponentInterface {
     }
 
     this.scrollEl = await contentEl.getScrollElement();
-    this.backgroundContentEl = contentEl.shadowRoot!.querySelector('#background-content') as HTMLElement;
-
     if (shouldUseNativeRefresher(this.el, getIonMode(this))) {
       this.setupNativeRefresher(contentEl);
     } else {
@@ -655,13 +652,12 @@ export class Refresher implements ComponentInterface {
 
     this.appliedStyles = (y > 0);
     writeTask(() => {
-      if (this.scrollEl && this.backgroundContentEl) {
-        const scrollStyle = this.scrollEl.style;
-        const backgroundStyle = this.backgroundContentEl.style;
-        scrollStyle.transform = backgroundStyle.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : 'translateZ(0px)');
-        scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
-        scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
-        scrollStyle.overflow = (overflowVisible ? 'hidden' : '');
+      if (this.scrollEl) {
+        const style = this.scrollEl.style;
+        style.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : 'translateZ(0px)');
+        style.transitionDuration = duration;
+        style.transitionDelay = delay;
+        style.overflow = (overflowVisible ? 'hidden' : '');
       }
     });
   }

core/src/components/segment/segment.ios.scss

@@ -42,7 +42,7 @@
 
 // Default Segment, In a Toolbar
 :host(.in-toolbar:not(.ion-color)) {
-  background: var(--ion-toolbar-segment-background, var(--background));
+  background: var(--ion-toolbar-segment-background, $segment-ios-background-color);
 }
 
 

core/src/components/segment/test/custom/index.html

@@ -4,14 +4,12 @@
 <head>
   <meta charset="UTF-8">
   <title>Segment - Custom</title>
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-</head>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
 
 <body>
   <ion-app>
@@ -90,9 +88,9 @@
             <ion-label>Disabled</ion-label>
           </ion-segment-button>
         </ion-segment>
-      </ion-toolbar>
+    </ion-toolbar>
 
-      <ion-toolbar>
+    <ion-toolbar>
         <ion-segment class="custom-states-background" value="checked">
           <ion-segment-button value="checked">
             <ion-label>Checked</ion-label>
@@ -104,41 +102,7 @@
             <ion-label>Disabled</ion-label>
           </ion-segment-button>
         </ion-segment>
-      </ion-toolbar>
-
-      <ion-toolbar>
-        <ion-segment class="custom-color" value="dining">
-          <ion-segment-button value="dining">
-            <ion-label>Dining</ion-label>
-            <ion-icon name="cafe"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="travel">
-            <ion-label>Travel</ion-label>
-            <ion-icon name="airplane"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="entertainment">
-            <ion-label>Entertainment</ion-label>
-            <ion-icon name="radio"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-
-      <ion-toolbar>
-        <ion-segment class="custom-color" color="danger" value="dining">
-          <ion-segment-button value="dining">
-            <ion-label>Dining</ion-label>
-            <ion-icon name="cafe"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="travel">
-            <ion-label>Travel</ion-label>
-            <ion-icon name="airplane"></ion-icon>
-          </ion-segment-button>
-          <ion-segment-button value="entertainment">
-            <ion-label>Entertainment</ion-label>
-            <ion-icon name="radio"></ion-icon>
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
+    </ion-toolbar>
     </ion-header>
 
     <ion-content class="ion-padding-top">
@@ -170,21 +134,6 @@
         </ion-segment-button>
       </ion-segment>
 
-      <ion-segment class="custom-color" value="dining">
-        <ion-segment-button value="dining">
-          <ion-label>Dining</ion-label>
-          <ion-icon name="cafe"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="travel">
-          <ion-label>Travel</ion-label>
-          <ion-icon name="airplane"></ion-icon>
-        </ion-segment-button>
-        <ion-segment-button value="entertainment">
-          <ion-label>Entertainment</ion-label>
-          <ion-icon name="radio"></ion-icon>
-        </ion-segment-button>
-      </ion-segment>
-
       <ion-segment class="custom-color" color="danger" value="dining">
         <ion-segment-button value="dining">
           <ion-label>Dining</ion-label>
@@ -392,7 +341,6 @@
   .custom-states-background ion-segment-button:hover {
     opacity: 1;
   }
-
 </style>
 
 </html>

core/src/themes/ionic.globals.scss

@@ -46,7 +46,7 @@ $z-index-click-block:            99999;
 
 $z-index-fixed-content:          999;
 $z-index-scroll-content:         1;
-$z-index-refresher:              -1;
+$z-index-refresher:              0;
 
 $z-index-page-container:         0;
 $z-index-toolbar:                10;

core/src/themes/test/css-variables/css/dark.css

@@ -91,6 +91,7 @@
   --ion-color-step-950: #f2f2f2;
 
   --ion-item-background: #1c1c1c;
+  --ion-item-background-activated: #313131;
 
   --ion-toolbar-background: #000;
   --ion-toolbar-color: #fff;

core/src/themes/test/css-variables/css/default.css

@@ -11,65 +11,65 @@
 
 /* :root {
   --ion-color-primary: #3880ff;
-  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-rgb: 56,128,255;
   --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-contrast-rgb: 255,255,255;
   --ion-color-primary-shade: #3171e0;
   --ion-color-primary-tint: #4c8dff;
 
-  --ion-color-secondary: #3dc2ff;
-  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary: #0cd1e8;
+  --ion-color-secondary-rgb: 12,209,232;
   --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #36abe0;
-  --ion-color-secondary-tint: #50c8ff;
+  --ion-color-secondary-contrast-rgb: 255,255,255;
+  --ion-color-secondary-shade: #0bb8cc;
+  --ion-color-secondary-tint: #24d6ea;
 
-  --ion-color-tertiary: #5260ff;
-  --ion-color-tertiary-rgb: 82, 96, 255;
+  --ion-color-tertiary: #7044ff;
+  --ion-color-tertiary-rgb: 112,68,255;
   --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #4854e0;
-  --ion-color-tertiary-tint: #6370ff;
+  --ion-color-tertiary-contrast-rgb: 255,255,255;
+  --ion-color-tertiary-shade: #633ce0;
+  --ion-color-tertiary-tint: #7e57ff;
 
-  --ion-color-success: #2dd36f;
-  --ion-color-success-rgb: 45, 211, 111;
+  --ion-color-success: #10dc60;
+  --ion-color-success-rgb: 16,220,96;
   --ion-color-success-contrast: #ffffff;
-  --ion-color-success-contrast-rgb: 255, 255, 255;
-  --ion-color-success-shade: #28ba62;
-  --ion-color-success-tint: #42d77d;
+  --ion-color-success-contrast-rgb: 255,255,255;
+  --ion-color-success-shade: #0ec254;
+  --ion-color-success-tint: #28e070;
 
-  --ion-color-warning: #ffc409;
-  --ion-color-warning-rgb: 255, 196, 9;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0ac08;
-  --ion-color-warning-tint: #ffca22;
+  --ion-color-warning: #ffce00;
+  --ion-color-warning-rgb: 255,206,0;
+  --ion-color-warning-contrast: #ffffff;
+  --ion-color-warning-contrast-rgb: 255,255,255;
+  --ion-color-warning-shade: #e0b500;
+  --ion-color-warning-tint: #ffd31a;
 
-  --ion-color-danger: #eb445a;
-  --ion-color-danger-rgb: 235, 68, 90;
+  --ion-color-danger: #f04141;
+  --ion-color-danger-rgb: 245,61,61;
   --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #cf3c4f;
-  --ion-color-danger-tint: #ed576b;
+  --ion-color-danger-contrast-rgb: 255,255,255;
+  --ion-color-danger-shade: #d33939;
+  --ion-color-danger-tint: #f25454;
 
   --ion-color-dark: #222428;
-  --ion-color-dark-rgb: 34, 36, 40;
+  --ion-color-dark-rgb: 34,34,34;
   --ion-color-dark-contrast: #ffffff;
-  --ion-color-dark-contrast-rgb: 255, 255, 255;
+  --ion-color-dark-contrast-rgb: 255,255,255;
   --ion-color-dark-shade: #1e2023;
   --ion-color-dark-tint: #383a3e;
 
-  --ion-color-medium: #92949c;
-  --ion-color-medium-rgb: 146, 148, 156;
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152,154,162;
   --ion-color-medium-contrast: #ffffff;
-  --ion-color-medium-contrast-rgb: 255, 255, 255;
-  --ion-color-medium-shade: #808289;
-  --ion-color-medium-tint: #9d9fa6;
+  --ion-color-medium-contrast-rgb: 255,255,255;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
 
   --ion-color-light: #f4f5f8;
-  --ion-color-light-rgb: 244, 245, 248;
+  --ion-color-light-rgb: 244,244,244;
   --ion-color-light-contrast: #000000;
-  --ion-color-light-contrast-rgb: 0, 0, 0;
+  --ion-color-light-contrast-rgb: 0,0,0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
 } */

core/src/themes/test/css-variables/css/vibrant.css

@@ -77,4 +77,5 @@
   --ion-background-color: #778899;
   --ion-item-background: #fff;
   --ion-item-border-color: #5bff76;
+  --ion-item-background-activated: #5bff76;
 }

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "5.0.0-rc.3",
+  "version": "5.0.0-rc.2",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",

packages/angular-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "5.0.0-rc.3",
+  "version": "5.0.0-rc.2",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -49,7 +49,7 @@
     "@angular/core": "8.2.13",
     "@angular/platform-browser": "8.2.13",
     "@angular/platform-server": "8.2.13",
-    "@ionic/core": "5.0.0-rc.3",
+    "@ionic/core": "5.0.0-rc.2",
     "ng-packagr": "5.7.1",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",

packages/react-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "5.0.0-rc.3",
+  "version": "5.0.0-rc.2",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -39,16 +39,16 @@
     "tslib": "*"
   },
   "peerDependencies": {
-    "@ionic/core": "5.0.0-rc.3",
-    "@ionic/react": "5.0.0-rc.3",
+    "@ionic/core": "5.0.0-rc.2",
+    "@ionic/react": "5.0.0-rc.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
-    "@ionic/core": "5.0.0-rc.3",
-    "@ionic/react": "5.0.0-rc.3",
+    "@ionic/core": "5.0.0-rc.2",
+    "@ionic/react": "5.0.0-rc.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "5.0.0-rc.3",
+  "version": "5.0.0-rc.2",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,7 +39,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "5.0.0-rc.3",
+    "@ionic/core": "5.0.0-rc.2",
     "ionicons": "^5.0.0-13",
     "tslib": "*"
   },