├── .gitignore
├── README.md
├── ionic.config.json
├── package-lock.json
├── package.json
├── public
    ├── assets
    │   ├── icon
    │   │   └── favicon.png
    │   └── shapes.svg
    ├── favicon.ico
    └── index.html
├── src
    ├── App.test.tsx
    ├── App.tsx
    ├── components
    │   └── Menu.tsx
    ├── declarations.ts
    ├── globals.scss
    ├── index.tsx
    ├── pages
    │   ├── Home.css
    │   └── Home.tsx
    ├── react-app-env.d.ts
    ├── theme.css
    └── theme
    │   └── variables.scss
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | .vscode
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ionic-react-news-app
2 | Ionic 4 React App
3 | 
4 | 
5 | ![](https://www.diigo.com/file/image/badcbccczobprrpopqzdsaacrcc/Screenshot+from+2019-07-26+14-57-15.jpg?k=325bbbba28ad47a63275406cb636a73b)
6 | 
7 | 


--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "myApp",
3 |   "integrations": {},
4 |   "type": "react"
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "myApp",
 3 |   "version": "0.0.1",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@ionic/react": "^0.0.7",
 7 |     "@types/jest": "24.0.11",
 8 |     "@types/node": "11.11.3",
 9 |     "@types/react": "^16.8.19",
10 |     "@types/react-dom": "^16.8.4",
11 |     "@types/react-router": "^4.4.4",
12 |     "@types/react-router-dom": "^4.3.1",
13 |     "axios": "^0.19.0",
14 |     "ionicons": "^4.6.2-0",
15 |     "node-sass": "^4.12.0",
16 |     "react": "^16.8.6",
17 |     "react-dom": "^16.8.6",
18 |     "react-router": "^5.0.1",
19 |     "react-router-dom": "^5.0.1",
20 |     "react-scripts": "3.0.1",
21 |     "typescript": "3.5.2"
22 |   },
23 |   "scripts": {
24 |     "start": "react-scripts start",
25 |     "build": "react-scripts build",
26 |     "test": "react-scripts test",
27 |     "eject": "react-scripts eject"
28 |   },
29 |   "eslintConfig": {
30 |     "extends": "react-app"
31 |   },
32 |   "browserslist": [
33 |     ">0.2%",
34 |     "not dead",
35 |     "not ie <= 11",
36 |     "not op_mini all"
37 |   ],
38 |   "description": "An Ionic project"
39 | }
40 | 


--------------------------------------------------------------------------------
/public/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiediaries/ionic-react-news-app/b991e0cccaaa9d487ca405fbc21125d94a89c3d0/public/assets/icon/favicon.png


--------------------------------------------------------------------------------
/public/assets/shapes.svg:
--------------------------------------------------------------------------------
1 | <svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techiediaries/ionic-react-news-app/b991e0cccaaa9d487ca405fbc21125d94a89c3d0/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Ionic App</title>
 6 | 
 7 |     <base href="/" />
 8 | 
 9 |     <meta
10 |       name="viewport"
11 |       content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
12 |     />
13 |     <meta name="format-detection" content="telephone=no" />
14 |     <meta name="msapplication-tap-highlight" content="no" />
15 |   
16 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
17 | 
18 |     <!-- add to homescreen for ios -->
19 |     <meta name="apple-mobile-web-app-capable" content="yes" />
20 |     <meta name="apple-mobile-web-app-title" content="Ionic App" />  
21 |     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
22 |   </head>
23 | 
24 |   <body>
25 |     <div id="root"></div>
26 |   </body>
27 | 
28 | </html>
29 | 


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Redirect, Route } from 'react-router-dom';
 3 | import { IonApp, IonPage, IonReactRouter, IonRouterOutlet, IonSplitPane } from '@ionic/react';
 4 | import { AppPage } from './declarations';
 5 | 
 6 | import Menu from './components/Menu';
 7 | import Home from './pages/Home';
 8 | 
 9 | import { home, list } from 'ionicons/icons';
10 | 
11 | /* Core CSS required for Ionic components to work properly */
12 | import '@ionic/core/css/core.css';
13 | 
14 | /* Basic CSS for apps built with Ionic */
15 | import '@ionic/core/css/normalize.css';
16 | import '@ionic/core/css/structure.css';
17 | import '@ionic/core/css/typography.css';
18 | 
19 | /* Optional CSS utils that can be commented out */
20 | import '@ionic/core/css/padding.css';
21 | import '@ionic/core/css/float-elements.css';
22 | import '@ionic/core/css/text-alignment.css';
23 | import '@ionic/core/css/text-transformation.css';
24 | import '@ionic/core/css/flex-utils.css';
25 | import '@ionic/core/css/display.css';
26 | 
27 | const appPages: AppPage[] = [
28 |   {
29 |     title: 'Home',
30 |     url: '/home',
31 |     icon: home
32 |   }
33 | ];
34 | 
35 | const App: React.FunctionComponent = () => (
36 |   <IonApp>
37 |     <IonReactRouter>
38 |       <IonSplitPane contentId="main">
39 |         <Menu appPages={appPages} />
40 |         <IonPage id="main">
41 |           <IonRouterOutlet>
42 |             <Route path="/:tab(home)" component={Home} exact={true} />
43 |             <Route exact path="/" render={() => <Redirect to="/home" />} />
44 |           </IonRouterOutlet>
45 |         </IonPage>
46 |       </IonSplitPane>
47 |     </IonReactRouter>
48 |   </IonApp>
49 | );
50 | 
51 | export default App;
52 | 


--------------------------------------------------------------------------------
/src/components/Menu.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   IonContent,
 3 |   IonHeader,
 4 |   IonIcon,
 5 |   IonItem,
 6 |   IonLabel,
 7 |   IonList,
 8 |   IonMenu,
 9 |   IonMenuToggle,
10 |   IonTitle,
11 |   IonToolbar
12 | } from '@ionic/react';
13 | import React from 'react';
14 | import { RouteComponentProps, withRouter } from 'react-router-dom';
15 | import { AppPage } from '../declarations';
16 | 
17 | interface MenuProps extends RouteComponentProps {
18 |   appPages: AppPage[];
19 | }
20 | 
21 | const Menu: React.FunctionComponent<MenuProps> = ({ appPages }) => (
22 |   <IonMenu contentId="main">
23 |     <IonHeader>
24 |       <IonToolbar color="primary">
25 |         <IonTitle>Menu</IonTitle>
26 |       </IonToolbar>
27 |     </IonHeader>
28 |     <IonContent color="primary">
29 |       <IonList style= {{ background : '#3880ff'}} color="primary">
30 |         {appPages.map((appPage, index) => {
31 |           return (
32 |             <IonMenuToggle key={index} auto-hide="false">
33 |               <IonItem color="primary" href={appPage.url}>
34 |                 <IonIcon slot="start" icon={appPage.icon} />
35 |                 <IonLabel>{appPage.title}</IonLabel>
36 |               </IonItem>
37 |             </IonMenuToggle>
38 |           );
39 |         })}
40 |       </IonList>
41 |     </IonContent>
42 |   </IonMenu>
43 | );
44 | 
45 | export default withRouter(Menu);
46 | 


--------------------------------------------------------------------------------
/src/declarations.ts:
--------------------------------------------------------------------------------
1 | export interface AppPage {
2 |   url: string;
3 |   icon: object;
4 |   title: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/globals.scss:
--------------------------------------------------------------------------------
 1 | // http://ionicframework.com/docs/theming/
 2 | @import '~@ionic/core/css/core.css';
 3 | @import '~@ionic/core/css/normalize.css';
 4 | @import '~@ionic/core/css/structure.css';
 5 | @import '~@ionic/core/css/typography.css';
 6 | 
 7 | @import '~@ionic/core/css/padding.css';
 8 | @import '~@ionic/core/css/float-elements.css';
 9 | @import '~@ionic/core/css/text-alignment.css';
10 | @import '~@ionic/core/css/text-transformation.css';
11 | @import '~@ionic/core/css/flex-utils.css';
12 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | ReactDOM.render(<App />, document.getElementById('root'));
6 | 


--------------------------------------------------------------------------------
/src/pages/Home.css:
--------------------------------------------------------------------------------
1 | .welcome-card img {
2 |   max-height: 35vh;
3 |   overflow: hidden;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   IonButtons,
 3 |   IonContent,
 4 |   IonHeader,
 5 |   IonItem,
 6 |   IonList,
 7 |   IonMenuButton,
 8 |   IonTitle,
 9 |   IonToolbar,
10 |   IonButton
11 | } from '@ionic/react';
12 | 
13 | import React from 'react';
14 | import axios from 'axios';
15 | 
16 | import './Home.css';
17 | 
18 | const API_KEY = "e40d07f00b094602953cc3bf8537477e";
19 | const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;
20 | 
21 | const fetchArticles = () => {
22 | 
23 |   return axios({
24 |     url: URL,
25 |     method: 'get'
26 |   }).then(response => {
27 | 
28 |     console.log(response);
29 |     return response.data;
30 |   })
31 | };
32 | 
33 | const HomePage: React.FunctionComponent = () => {
34 | 
35 |   const [articles, setArticles] = React.useState([]);
36 |   const items: any[] = [];
37 | 
38 |   React.useEffect(() => {
39 | 
40 |     fetchArticles().then(data => setArticles(data.articles));
41 | 
42 |   }, []);
43 | 
44 |   return (
45 |     <>
46 |       <IonHeader>
47 |         <IonToolbar color="primary">
48 |           <IonButtons slot="start">
49 |             <IonMenuButton />
50 |           </IonButtons>
51 |           <IonTitle>Home</IonTitle>
52 |         </IonToolbar>
53 |       </IonHeader>
54 |       <IonContent color="primary" >
55 |         <IonList color="primary">
56 | 
57 |           {
58 |             articles.map(a => {
59 |               
60 |               return (
61 |                 <IonItem>
62 |                   {a['title']}
63 |                   <IonButton href={a['url']} color="primary" slot="end">Read</IonButton>
64 |                 </IonItem>
65 |               );
66 |             })
67 |           }
68 | 
69 |         </IonList>
70 |       </IonContent>
71 |     </>
72 |   );
73 | };
74 | 
75 | export default HomePage;
76 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/theme.css:
--------------------------------------------------------------------------------
  1 | 
  2 | /* Ionic Variables and Theming. For more information, please see
  3 | // https://beta.ionicframework.com/docs/theming/
  4 | // The app direction is used to include
  5 | // rtl styles in your app. For more information, please see
  6 | // https://beta.ionicframework.com/docs/layout/rtl
  7 | // $app-direction: ltr;
  8 | // Ionic Colors
  9 | // --------------------------------------------------
 10 | // Named colors makes it easy to reuse colors on various components.
 11 | // It's highly recommended to change the default colors
 12 | // to match your app's branding. Ionic provides eight layered colors
 13 | // that can be changed to theme an app. Additional colors can be
 14 | // added as well (see below). For more information, please see
 15 | // https://beta.ionicframework.com/docs/theming/advanced
 16 | // To easily create custom color palettes for your app’s UI,
 17 | // check out our color generator:
 18 | // https://beta.ionicframework.com/docs/theming/color-generator
 19 | */
 20 | 
 21 | :root {
 22 |   --ion-color-angular: #ac282b;
 23 |   --ion-color-communication: #8e8d93;
 24 |   --ion-color-tooling: #fe4c52;
 25 |   --ion-color-services: #fd8b2d;
 26 |   --ion-color-design: #fed035;
 27 |   --ion-color-workshop: #69bb7b;
 28 |   --ion-color-food: #3bc7c4;
 29 |   --ion-color-documentation: #b16be3;
 30 |   --ion-color-navigation: #6600cc;
 31 | 
 32 |   --ion-color-primary: #3880ff;
 33 |   --ion-color-primary-rgb: 56, 128, 255;
 34 |   --ion-color-primary-contrast: #ffffff;
 35 |   --ion-color-primary-contrast-rgb: 255, 255, 255;
 36 |   --ion-color-primary-shade: #3171e0;
 37 |   --ion-color-primary-tint: #4c8dff;
 38 | 
 39 |   --ion-color-secondary: #0cd1e8;
 40 |   --ion-color-secondary-rgb: 12, 209, 232;
 41 |   --ion-color-secondary-contrast: #ffffff;
 42 |   --ion-color-secondary-contrast-rgb: 255, 255, 255;
 43 |   --ion-color-secondary-shade: #0bb8cc;
 44 |   --ion-color-secondary-tint: #24d6ea;
 45 | 
 46 |   --ion-color-tertiary: #7044ff;
 47 |   --ion-color-tertiary-rgb: 112, 68, 255;
 48 |   --ion-color-tertiary-contrast: #ffffff;
 49 |   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
 50 |   --ion-color-tertiary-shade: #633ce0;
 51 |   --ion-color-tertiary-tint: #7e57ff;
 52 | 
 53 |   --ion-color-success: #10dc60;
 54 |   --ion-color-success-rgb: 16, 220, 96;
 55 |   --ion-color-success-contrast: #ffffff;
 56 |   --ion-color-success-contrast-rgb: 255, 255, 255;
 57 |   --ion-color-success-shade: #0ec254;
 58 |   --ion-color-success-tint: #28e070;
 59 | 
 60 |   --ion-color-warning: #ffce00;
 61 |   --ion-color-warning-rgb: 255, 206, 0;
 62 |   --ion-color-warning-contrast: #ffffff;
 63 |   --ion-color-warning-contrast-rgb: 255, 255, 255;
 64 |   --ion-color-warning-shade: #e0b500;
 65 |   --ion-color-warning-tint: #ffd31a;
 66 | 
 67 |   --ion-color-danger: #f04141;
 68 |   --ion-color-danger-rgb: 245, 61, 61;
 69 |   --ion-color-danger-contrast: #ffffff;
 70 |   --ion-color-danger-contrast-rgb: 255, 255, 255;
 71 |   --ion-color-danger-shade: #d33939;
 72 |   --ion-color-danger-tint: #f25454;
 73 | 
 74 |   --ion-color-dark: #222428;
 75 |   --ion-color-dark-rgb: 34, 34, 34;
 76 |   --ion-color-dark-contrast: #ffffff;
 77 |   --ion-color-dark-contrast-rgb: 255, 255, 255;
 78 |   --ion-color-dark-shade: #1e2023;
 79 |   --ion-color-dark-tint: #383a3e;
 80 | 
 81 |   --ion-color-medium: #989aa2;
 82 |   --ion-color-medium-rgb: 152, 154, 162;
 83 |   --ion-color-medium-contrast: #ffffff;
 84 |   --ion-color-medium-contrast-rgb: 255, 255, 255;
 85 |   --ion-color-medium-shade: #86888f;
 86 |   --ion-color-medium-tint: #a2a4ab;
 87 | 
 88 |   --ion-color-light: #f4f5f8;
 89 |   --ion-color-light-rgb: 244, 244, 244;
 90 |   --ion-color-light-contrast: #000000;
 91 |   --ion-color-light-contrast-rgb: 0, 0, 0;
 92 |   --ion-color-light-shade: #d7d8da;
 93 |   --ion-color-light-tint: #f5f6f9;
 94 | }
 95 | 
 96 | /* Additional Ionic Colors
 97 | // --------------------------------------------------
 98 | // In order to add colors to be used with Ionic components,
 99 | // the color should be added as a class with the convention `.ion-color-{COLOR}`
100 | // where `{COLOR}` is the color to be used on the Ionic component
101 | // and each variant is defined for the color. For more information, please see
102 | // https://beta.ionicframework.com/docs/theming/advanced
103 | */
104 | 
105 | .ion-color-favorite {
106 |   --ion-color-base: #69bb7b;
107 |   --ion-color-base-rgb: 105, 187, 123;
108 |   --ion-color-contrast: #ffffff;
109 |   --ion-color-contrast-rgb: 255, 255, 255;
110 |   --ion-color-shade: #5ca56c;
111 |   --ion-color-tint: #78c288;
112 | }
113 | 
114 | .ion-color-twitter {
115 |   --ion-color-base: #1da1f4;
116 |   --ion-color-base-rgb: 29, 161, 244;
117 |   --ion-color-contrast: #ffffff;
118 |   --ion-color-contrast-rgb: 255, 255, 255;
119 |   --ion-color-shade: #1a8ed7;
120 |   --ion-color-tint: #34aaf5;
121 | }
122 | 
123 | .ion-color-google {
124 |   --ion-color-base: #dc4a38;
125 |   --ion-color-base-rgb: 220, 74, 56;
126 |   --ion-color-contrast: #ffffff;
127 |   --ion-color-contrast-rgb: 255, 255, 255;
128 |   --ion-color-shade: #c24131;
129 |   --ion-color-tint: #e05c4c;
130 | }
131 | 
132 | .ion-color-vimeo {
133 |   --ion-color-base: #23b6ea;
134 |   --ion-color-base-rgb: 35, 182, 234;
135 |   --ion-color-contrast: #ffffff;
136 |   --ion-color-contrast-rgb: 255, 255, 255;
137 |   --ion-color-shade: #1fa0ce;
138 |   --ion-color-tint: #39bdec;
139 | }
140 | 
141 | .ion-color-facebook {
142 |   --ion-color-base: #3b5998;
143 |   --ion-color-base-rgb: 59, 89, 152;
144 |   --ion-color-contrast: #ffffff;
145 |   --ion-color-contrast-rgb: 255, 255, 255;
146 |   --ion-color-shade: #344e86;
147 |   --ion-color-tint: #4f6aa2;
148 | }
149 | 
150 | /* Shared Variables
151 | // --------------------------------------------------
152 | // To customize the look and feel of this app, you can override
153 | // the CSS variables found in Ionic's source files.
154 | // To view all the possible Ionic variables, see:
155 | // https://beta.ionicframework.com/docs/theming/css-variables#ionic-variables
156 | */
157 | 
158 | :root {
159 |   --ion-headings-font-weight: 300;
160 | 
161 |   --ion-color-angular: #ac282b;
162 |   --ion-color-communication: #8e8d93;
163 |   --ion-color-tooling: #fe4c52;
164 |   --ion-color-services: #fd8b2d;
165 |   --ion-color-design: #fed035;
166 |   --ion-color-workshop: #69bb7b;
167 |   --ion-color-food: #3bc7c4;
168 |   --ion-color-documentation: #b16be3;
169 |   --ion-color-navigation: #6600cc;
170 | }
171 | 
172 | .md {
173 |   --ion-toolbar-background: var(--ion-color-primary);
174 |   --ion-toolbar-color: #fff;
175 |   --ion-toolbar-color-activated: #fff;
176 | }
177 | 


--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
 1 | // Ionic Variables and Theming. For more info, please see:
 2 | // http://ionicframework.com/docs/theming/
 3 | 
 4 | /** Ionic CSS Variables **/
 5 | :root {
 6 |   /** primary **/
 7 |   --ion-color-primary: #3880ff;
 8 |   --ion-color-primary-rgb: 56, 128, 255;
 9 |   --ion-color-primary-contrast: #ffffff;
10 |   --ion-color-primary-contrast-rgb: 255, 255, 255;
11 |   --ion-color-primary-shade: #3171e0;
12 |   --ion-color-primary-tint: #4c8dff;
13 | 
14 |   /** secondary **/
15 |   --ion-color-secondary: #0cd1e8;
16 |   --ion-color-secondary-rgb: 12, 209, 232;
17 |   --ion-color-secondary-contrast: #ffffff;
18 |   --ion-color-secondary-contrast-rgb: 255, 255, 255;
19 |   --ion-color-secondary-shade: #0bb8cc;
20 |   --ion-color-secondary-tint: #24d6ea;
21 | 
22 |   /** tertiary **/
23 |   --ion-color-tertiary: #7044ff;
24 |   --ion-color-tertiary-rgb: 112, 68, 255;
25 |   --ion-color-tertiary-contrast: #ffffff;
26 |   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
27 |   --ion-color-tertiary-shade: #633ce0;
28 |   --ion-color-tertiary-tint: #7e57ff;
29 | 
30 |   /** success **/
31 |   --ion-color-success: #10dc60;
32 |   --ion-color-success-rgb: 16, 220, 96;
33 |   --ion-color-success-contrast: #ffffff;
34 |   --ion-color-success-contrast-rgb: 255, 255, 255;
35 |   --ion-color-success-shade: #0ec254;
36 |   --ion-color-success-tint: #28e070;
37 | 
38 |   /** warning **/
39 |   --ion-color-warning: #ffce00;
40 |   --ion-color-warning-rgb: 255, 206, 0;
41 |   --ion-color-warning-contrast: #ffffff;
42 |   --ion-color-warning-contrast-rgb: 255, 255, 255;
43 |   --ion-color-warning-shade: #e0b500;
44 |   --ion-color-warning-tint: #ffd31a;
45 | 
46 |   /** danger **/
47 |   --ion-color-danger: #f04141;
48 |   --ion-color-danger-rgb: 245, 61, 61;
49 |   --ion-color-danger-contrast: #ffffff;
50 |   --ion-color-danger-contrast-rgb: 255, 255, 255;
51 |   --ion-color-danger-shade: #d33939;
52 |   --ion-color-danger-tint: #f25454;
53 | 
54 |   /** dark **/
55 |   --ion-color-dark: #222428;
56 |   --ion-color-dark-rgb: 34, 34, 34;
57 |   --ion-color-dark-contrast: #ffffff;
58 |   --ion-color-dark-contrast-rgb: 255, 255, 255;
59 |   --ion-color-dark-shade: #1e2023;
60 |   --ion-color-dark-tint: #383a3e;
61 | 
62 |   /** medium **/
63 |   --ion-color-medium: #989aa2;
64 |   --ion-color-medium-rgb: 152, 154, 162;
65 |   --ion-color-medium-contrast: #ffffff;
66 |   --ion-color-medium-contrast-rgb: 255, 255, 255;
67 |   --ion-color-medium-shade: #86888f;
68 |   --ion-color-medium-tint: #a2a4ab;
69 | 
70 |   /** light **/
71 |   --ion-color-light: #f4f5f8;
72 |   --ion-color-light-rgb: 244, 244, 244;
73 |   --ion-color-light-contrast: #000000;
74 |   --ion-color-light-contrast-rgb: 0, 0, 0;
75 |   --ion-color-light-shade: #d7d8da;
76 |   --ion-color-light-tint: #f5f6f9;
77 | }
78 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "preserve"
21 |   },
22 |   "include": [
23 |     "src"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------