update demo pull state,

03_source/mobile/src/pages/DemoProfileExample/components/Figure.module.scss

@@ -0,0 +1,26 @@
+.figure {
+  padding: 1rem;
+}
+
+.figure h6 {
+  font-size: 1.5rem;
+  font-weight: 200;
+}
+
+.figure p {
+  color: rgb(255, 255, 255);
+  font-size: 0.9rem;
+  font-weight: 200;
+}
+
+.figure:nth-child(1) {
+  background-color: rgb(157, 163, 141);
+}
+
+.figure:nth-child(2) {
+  background-color: rgb(150, 155, 138);
+}
+
+.figure:nth-child(3) {
+  background-color: rgb(135, 143, 120);
+}

03_source/mobile/src/pages/DemoProfileExample/components/Figure.tsx

@@ -0,0 +1,9 @@
+import { IonCol } from '@ionic/react';
+import styles from './Figure.module.scss';
+
+export const Figure = (props): React.JSX.Element => (
+  <IonCol size="4" className={styles.figure}>
+    <h6>{props.count}</h6>
+    <p>{props.title}</p>
+  </IonCol>
+);

03_source/mobile/src/pages/DemoProfileExample/components/Post.module.scss

@@ -0,0 +1,55 @@
+.post {
+  border-bottom: 1px solid rgb(219, 219, 219);
+  padding-top: 1rem;
+  padding-bottom: 0.2rem;
+
+  p {
+    font-size: 0.9rem;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  .postText {
+    color: rgb(107, 112, 97);
+  }
+}
+
+.postAvatar {
+  height: 3.5rem;
+  width: 3.5rem;
+  margin-right: 1rem;
+  border: 3px solid rgba(218, 223, 208, 1);
+}
+
+.postInfo {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-right: 1rem;
+  color: rgb(190, 190, 190);
+}
+
+.postReactions {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 1rem;
+  margin-top: 0.5rem;
+  color: rgb(107, 112, 97);
+
+  .postReaction {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.9rem;
+
+    ion-icon {
+      margin-right: 0.5rem;
+    }
+
+    p {
+      padding: 0;
+      margin: 0;
+      font-size: 0.8rem;
+    }
+  }
+}

03_source/mobile/src/pages/DemoProfileExample/components/Post.tsx

@@ -0,0 +1,35 @@
+import { IonAvatar, IonIcon, IonItem, IonLabel } from '@ionic/react';
+import { chatbubbleOutline, heart, heartOutline, shareSocialOutline } from 'ionicons/icons';
+import styles from './Post.module.scss';
+
+export const Post = (props): React.JSX.Element => (
+  <div className={styles.post}>
+    <IonItem lines="none">
+      <IonAvatar className={styles.postAvatar}>
+        <img src="https://pbs.twimg.com/profile_images/1349059994747076610/8dWvipvu_400x400.jpg" />
+      </IonAvatar>
+      <IonLabel className="ion-text-wrap">
+        <div className={styles.postInfo}>
+          <p>{props.post.date}</p>
+          <p>@93alan</p>
+        </div>
+        <p className={styles.postText}>{props.post.text}</p>
+
+        <div className={styles.postReactions}>
+          <div className={styles.postReaction}>
+            <IonIcon icon={chatbubbleOutline} />
+            <p>{props.post.comments}</p>
+          </div>
+          <div className={styles.postReaction}>
+            <IonIcon icon={props.post.liked ? heart : heartOutline} />
+            <p>{props.post.likes}</p>
+          </div>
+
+          <div className={styles.postReaction}>
+            <IonIcon icon={shareSocialOutline} />
+          </div>
+        </div>
+      </IonLabel>
+    </IonItem>
+  </div>
+);

03_source/mobile/src/pages/DemoProfileExample/index.tsx

@@ -1,28 +1,25 @@
-import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
+import { IonRouterOutlet, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
 
 import './style.scss';
+import Home from './pages/Home';
 
-function DemoProfileExample() {
+function DemoProfileExample(): React.JSX.Element {
   return (
-    <IonTabs>
+    <IonTabs className="demo-profile-example">
       <IonRouterOutlet>
-        <Route exact path="/demo-profile-example/tab1">
-          <Tab1 />
-        </Route>
-        <Route exact path="/demo-profile-example/tab2">
-          <Tab2 />
+        <Route exact path="/demo-profile-example/home">
+          <Home />
         </Route>
 
-        <Redirect exact path="/demo-profile-example" to="/demo-profile-example/tab1" />
+        <Redirect exact path="/demo-profile-example" to="/demo-profile-example/home" />
       </IonRouterOutlet>
 
-      {/*  */}
+      {/*
       <IonTabBar slot="bottom">
         <IonTabButton tab="tab1" href="/demo-profile-example/tab1">
           <IonIcon icon={cloudOutline} />
@@ -33,6 +30,7 @@ function DemoProfileExample() {
           <IonLabel>Search</IonLabel>
         </IonTabButton>
       </IonTabBar>
+        */}
     </IonTabs>
   );
 }

03_source/mobile/src/pages/DemoProfileExample/pages/Home.module.scss

@@ -0,0 +1,90 @@
+$main-color: rgb(143, 149, 130);
+
+.page {
+  ion-toolbar {
+    --background: rgb(143, 149, 130) !important;
+    --color: white;
+    --border-style: none;
+    margin: 0 !important;
+  }
+}
+
+.top {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  background-color: rgb(143, 149, 130);
+  color: white;
+  padding-bottom: 1rem;
+}
+
+.figures {
+  text-align: center;
+  background-color: rgb(143, 149, 130);
+  color: white;
+
+  p,
+  h6 {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.profileHeader {
+  ion-card-subtitle,
+  ion-card-title {
+    --color: white;
+  }
+
+  ion-card-title {
+    font-size: 1.3rem;
+  }
+
+  ion-card-subtitle {
+    --color: rgb(202, 211, 189);
+  }
+}
+
+.avatar {
+  width: 7rem;
+  height: 7rem;
+  border: 5px solid rgba(218, 223, 208, 0.4);
+}
+
+.avatarUpload {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  background-color: rgb(255, 255, 255);
+  border: 3px solid rgba(218, 223, 208, 0.4);
+  color: rgb(80, 80, 80);
+  position: absolute;
+  padding: 0.3rem;
+  font-size: 1.1rem;
+  border-radius: 500px;
+  margin-top: -2.2rem;
+  margin-left: 5rem;
+}
+
+.postActions {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.2rem;
+  padding-left: 1.3rem;
+  padding-right: 1.3rem;
+  color: rgb(149, 149, 149);
+  font-size: 0.9rem;
+  border-bottom: 1px solid rgba(218, 223, 208, 1);
+
+  background-color: rgba(218, 223, 208, 0.4);
+
+  ion-icon {
+    font-size: 1.2rem;
+  }
+}

03_source/mobile/src/pages/DemoProfileExample/pages/Home.tsx

@@ -0,0 +1,130 @@
+import {
+  IonAvatar,
+  IonButton,
+  IonButtons,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonList,
+  IonPage,
+  IonRow,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import styles from './Home.module.scss';
+import {
+  arrowBackOutline,
+  cameraOutline,
+  chevronBackOutline,
+  filterOutline,
+  menuOutline,
+} from 'ionicons/icons';
+import { Figure } from '../components/Figure';
+import { Post } from '../components/Post';
+
+const Home = (): React.JSX.Element => {
+  const posts = [
+    {
+      date: 'Mar 30',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      comments: 13,
+      likes: 49,
+      liked: true,
+    },
+    {
+      date: 'Mar 28',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      comments: 1,
+      likes: 9,
+    },
+    {
+      date: 'Mar 25',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      comments: 119,
+      likes: 483,
+    },
+    {
+      date: 'Mar 23',
+      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      comments: 27,
+      likes: 78,
+    },
+  ];
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage className={styles.page}>
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonButtons>
+            <IonButton color="light" slot="start" onClick={() => handleBackClick()}>
+              <IonIcon icon={arrowBackOutline} />
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="end">
+            <IonButton color="light" slot="end">
+              <IonIcon icon={menuOutline} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className={styles.content}>
+        <IonGrid className={styles.top}>
+          <IonRow>
+            <IonCol size="12">
+              <IonAvatar className={styles.avatar}>
+                <img src="https://pbs.twimg.com/profile_images/1349059994747076610/8dWvipvu_400x400.jpg" />
+              </IonAvatar>
+              <div className={styles.avatarUpload}>
+                <IonIcon icon={cameraOutline} />
+              </div>
+            </IonCol>
+          </IonRow>
+
+          <IonRow className={styles.profileHeader}>
+            <IonCol size="12" className="ion-text-center">
+              <IonCardTitle>Alan Montgomery</IonCardTitle>
+              <IonCardSubtitle>Mobile Team Lead</IonCardSubtitle>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+
+        <IonGrid className={`${styles.figures} ion-no-padding ion-no-margin`}>
+          <IonRow>
+            <Figure count="1,386" title="Posts" />
+            <Figure count="849" title="Followers" />
+            <Figure count="473" title="Following" />
+          </IonRow>
+        </IonGrid>
+
+        <IonGrid className="ion-no-padding">
+          <IonRow>
+            <IonCol size="12">
+              <div className={styles.postActions}>
+                <p>Posts by @93alan</p>
+                <IonIcon icon={filterOutline} />
+              </div>
+            </IonCol>
+          </IonRow>
+
+          <IonList>
+            {posts.map((post, index) => {
+              return <Post key={`post_${index}`} post={post} />;
+            })}
+          </IonList>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Home;

03_source/mobile/src/pages/DemoProfileExample/theme/variables.scss

@@ -0,0 +1,79 @@
+.demo-profile-example {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --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;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+}

03_source/mobile/src/pages/DemoPullstateTutorial/components/Person.tsx

@@ -0,0 +1,24 @@
+import { IonAvatar, IonButton, IonItem, IonLabel } from '@ionic/react';
+import { toggleFollowing } from '../store/PeopleStore';
+
+export const Person = ({ person }): React.JSX.Element => {
+  return (
+    <IonItem lines="full">
+      <IonAvatar>
+        <img src={person.avatar} alt="avatar" />
+      </IonAvatar>
+      <IonLabel className="ion-padding-start">
+        <h1>{person.name}</h1>
+        <p>{person.title}</p>
+      </IonLabel>
+
+      <IonButton
+        color="primary"
+        fill={person.following ? 'solid' : 'outline'}
+        onClick={() => toggleFollowing(person.id)}
+      >
+        {person.following ? 'Following' : 'Follow'}
+      </IonButton>
+    </IonItem>
+  );
+};

03_source/mobile/src/pages/DemoPullstateTutorial/data/index.js

@@ -0,0 +1,45 @@
+export const people = [
+
+	{
+		id: 1,
+		name: "Alan Montgomery",
+		title: "Mobile Team Lead",
+		avatar: "https://pbs.twimg.com/profile_images/1420489989163524096/GwHdYSky_400x400.jpg",
+		following: false
+	},
+	{
+		id: 2,
+		name: "Max Lynch",
+		title: "CEO | Co Founder",
+		avatar: "https://pbs.twimg.com/profile_images/1318970727173885953/bln98FNj_400x400.jpg",
+		following: false
+	},
+	{
+		id: 3,
+		name: "Mike Hartington",
+		title: "Senior Dev Rel",
+		avatar: "https://pbs.twimg.com/profile_images/1084993841898446849/DJ8XtR6L_400x400.jpg",
+		following: false
+	},
+	{
+		id: 4,
+		name: "Matt Netkow",
+		title: "Head of Product Marketing",
+		avatar: "https://pbs.twimg.com/profile_images/1323383930150621187/GKc0nVzi_400x400.jpg",
+		following: false
+	},
+	{
+		id: 5,
+		name: "Ben Sperry",
+		title: "CDO | Co Founder",
+		avatar: "https://pbs.twimg.com/profile_images/1407747959345795072/McJb-RvC_400x400.jpg",
+		following: false
+	},
+	{
+		id: 6,
+		name: "Liam DeBeasi",
+		title: "Software Engineer",
+		avatar: "https://pbs.twimg.com/profile_images/1105953692669366273/ZNK4lRAJ_400x400.jpg",
+		following: false
+	}
+];

03_source/mobile/src/pages/DemoPullstateTutorial/index.tsx

@@ -1,16 +1,18 @@
 import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
 
-import { cloudOutline, searchOutline } from 'ionicons/icons';
+import { list, people } from 'ionicons/icons';
 import { Route, Redirect } from 'react-router';
 
-import Tab1 from './AppPages/Tab1';
-import Tab2 from './AppPages/Tab2';
+// import Tab1 from './AppPages/Tab1';
+// import Tab2 from './AppPages/Tab2';
 
 import './style.scss';
+import Tab1 from './pages/Tab1';
+import Tab2 from './pages/Tab2';
 
 function DemoPullstateTutorial() {
   return (
-    <IonTabs>
+    <IonTabs className="demo-pullstate-tutorial">
       <IonRouterOutlet>
         <Route exact path="/demo-pullstate-tutorial/tab1">
           <Tab1 />
@@ -25,12 +27,12 @@ function DemoPullstateTutorial() {
       {/*  */}
       <IonTabBar slot="bottom">
         <IonTabButton tab="tab1" href="/demo-pullstate-tutorial/tab1">
-          <IonIcon icon={cloudOutline} />
-          <IonLabel>Dashboard</IonLabel>
+          <IonIcon icon={list} />
+          <IonLabel>List</IonLabel>
         </IonTabButton>
         <IonTabButton tab="tab2" href="/demo-pullstate-tutorial/tab2">
-          <IonIcon icon={searchOutline} />
-          <IonLabel>Search</IonLabel>
+          <IonIcon icon={people} />
+          <IonLabel>Following</IonLabel>
         </IonTabButton>
       </IonTabBar>
     </IonTabs>

03_source/mobile/src/pages/DemoPullstateTutorial/pages/Tab1.tsx

@@ -0,0 +1,63 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { PeopleStore } from '../store';
+import { Person } from '../components/Person';
+import './Tab1.css';
+import { useStoreState } from 'pullstate';
+import { getPeople } from '../store/Selectors';
+import { chevronBackOutline } from 'ionicons/icons';
+
+const Tab1 = (): React.JSX.Element => {
+  const people = useStoreState(PeopleStore, getPeople);
+
+  console.log(people);
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>List of People</IonTitle>
+
+          <IonButtons slot="start">
+            <IonButton onClick={() => handleBackClick()}>
+              <IonIcon icon={chevronBackOutline} color="primary" />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">List of People</IonTitle>
+
+            <IonButtons slot="start">
+              <IonButton onClick={() => handleBackClick()}>
+                <IonIcon icon={chevronBackOutline} color="primary" />
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        {people.map((person, index) => {
+          return <Person person={person} key={index} />;
+        })}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab1;

03_source/mobile/src/pages/DemoPullstateTutorial/pages/Tab2.tsx

@@ -0,0 +1,34 @@
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { useStoreState } from 'pullstate';
+import { Person } from '../components/Person';
+import { PeopleStore } from '../store';
+import { getFollowing } from '../store/Selectors';
+import './Tab2.css';
+import React from 'react';
+
+const Tab2 = (): React.JSX.Element => {
+  const people = useStoreState(PeopleStore, getFollowing);
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Following</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Following</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+
+        {people.map((person, index) => {
+          return <Person person={person} key={index} />;
+        })}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab2;

03_source/mobile/src/pages/DemoPullstateTutorial/store/PeopleStore.js

@@ -0,0 +1,19 @@
+import { Store } from "pullstate";
+
+import { people } from "../data";
+
+const PeopleStore = new Store({
+
+	people: people
+});
+
+export const toggleFollowing = personId => {
+
+	PeopleStore.update(s => {
+
+		const personIndex = s.people.findIndex(person => person.id === personId);
+		s.people[personIndex].following = !s.people[personIndex].following;
+	});
+}
+
+export default PeopleStore;

03_source/mobile/src/pages/DemoPullstateTutorial/store/Selectors.js

@@ -0,0 +1,7 @@
+import { createSelector } from "reselect";
+
+const getState = state => state;
+
+//	Gets
+export const getPeople = createSelector(getState, state => state.people);
+export const getFollowing = createSelector(getState, state => state.people.filter(person => person.following));

03_source/mobile/src/pages/DemoPullstateTutorial/store/index.js

@@ -0,0 +1 @@
+export { default as PeopleStore } from "./PeopleStore";

03_source/mobile/src/pages/DemoPullstateTutorial/theme/variables.scss

@@ -0,0 +1,79 @@
+.demo-pullstate-tutorial {
+  /* Ionic Variables and Theming. For more info, please see:
+http://ionicframework.com/docs/theming/ */
+
+  /** Ionic CSS Variables **/
+  :root {
+    /** primary **/
+    --ion-color-primary: #3880ff;
+    --ion-color-primary-rgb: 56, 128, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3171e0;
+    --ion-color-primary-tint: #4c8dff;
+
+    /** secondary **/
+    --ion-color-secondary: #3dc2ff;
+    --ion-color-secondary-rgb: 61, 194, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #36abe0;
+    --ion-color-secondary-tint: #50c8ff;
+
+    /** tertiary **/
+    --ion-color-tertiary: #5260ff;
+    --ion-color-tertiary-rgb: 82, 96, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #4854e0;
+    --ion-color-tertiary-tint: #6370ff;
+
+    /** success **/
+    --ion-color-success: #2dd36f;
+    --ion-color-success-rgb: 45, 211, 111;
+    --ion-color-success-contrast: #ffffff;
+    --ion-color-success-contrast-rgb: 255, 255, 255;
+    --ion-color-success-shade: #28ba62;
+    --ion-color-success-tint: #42d77d;
+
+    /** warning **/
+    --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;
+
+    /** danger **/
+    --ion-color-danger: #eb445a;
+    --ion-color-danger-rgb: 235, 68, 90;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #cf3c4f;
+    --ion-color-danger-tint: #ed576b;
+
+    /** dark **/
+    --ion-color-dark: #222428;
+    --ion-color-dark-rgb: 34, 36, 40;
+    --ion-color-dark-contrast: #ffffff;
+    --ion-color-dark-contrast-rgb: 255, 255, 255;
+    --ion-color-dark-shade: #1e2023;
+    --ion-color-dark-tint: #383a3e;
+
+    /** medium **/
+    --ion-color-medium: #92949c;
+    --ion-color-medium-rgb: 146, 148, 156;
+    --ion-color-medium-contrast: #ffffff;
+    --ion-color-medium-contrast-rgb: 255, 255, 255;
+    --ion-color-medium-shade: #808289;
+    --ion-color-medium-tint: #9d9fa6;
+
+    /** light **/
+    --ion-color-light: #f4f5f8;
+    --ion-color-light-rgb: 244, 245, 248;
+    --ion-color-light-contrast: #000000;
+    --ion-color-light-contrast-rgb: 0, 0, 0;
+    --ion-color-light-shade: #d7d8da;
+    --ion-color-light-tint: #f5f6f9;
+  }
+}