Skip to content

Commit cf9bd1c

Browse files
brandyscarneymapsandappssean-perkins
authored
chore(ionic): update to v8 (#1839)
 --------- Co-authored-by: Shawn Taylor <[email protected]> Co-authored-by: Sean Perkins <[email protected]>
1 parent 82bf3f0 commit cf9bd1c

File tree

16 files changed

+102
-978
lines changed

16 files changed

+102
-978
lines changed

‎angular-standalone/base/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@angular/platform-browser": "^17.0.2",
2222
"@angular/platform-browser-dynamic": "^17.0.2",
2323
"@angular/router": "^17.0.2",
24-
"@ionic/angular": "^7.5.0",
24+
"@ionic/angular": "^8.0.0",
2525
"ionicons": "^7.2.1",
2626
"rxjs": "~7.8.0",
2727
"tslib": "^2.3.0",
@@ -54,4 +54,4 @@
5454
"karma-jasmine-html-reporter": "~2.1.0",
5555
"typescript": "~5.2.2"
5656
}
57-
}
57+
}

‎angular-standalone/base/src/global.scss

+11
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,14 @@
2424
@import "@ionic/angular/css/text-alignment.css";
2525
@import "@ionic/angular/css/text-transformation.css";
2626
@import "@ionic/angular/css/flex-utils.css";
27+
28+
/**
29+
* Ionic Dark Mode
30+
* -----------------------------------------------------
31+
* For more info, please see:
32+
* https://ionicframework.com/docs/theming/dark-mode
33+
*/
34+
35+
/* @import "@ionic/angular/css/palettes/dark.always.css"; */
36+
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
37+
@import '@ionic/angular/css/palettes/dark.system.css';

‎angular-standalone/base/src/theme/variables.scss

+1-243
Original file line numberDiff line numberDiff line change
@@ -1,244 +1,2 @@
1-
// Ionic Variables and Theming. For more info, please see:
1+
// For information on how to create your own theme, please see:
22
// 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: #3dc2ff;
16-
--ion-color-secondary-rgb: 61, 194, 255;
17-
--ion-color-secondary-contrast: #ffffff;
18-
--ion-color-secondary-contrast-rgb: 255, 255, 255;
19-
--ion-color-secondary-shade: #36abe0;
20-
--ion-color-secondary-tint: #50c8ff;
21-
22-
/** tertiary **/
23-
--ion-color-tertiary: #5260ff;
24-
--ion-color-tertiary-rgb: 82, 96, 255;
25-
--ion-color-tertiary-contrast: #ffffff;
26-
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
27-
--ion-color-tertiary-shade: #4854e0;
28-
--ion-color-tertiary-tint: #6370ff;
29-
30-
/** success **/
31-
--ion-color-success: #2dd36f;
32-
--ion-color-success-rgb: 45, 211, 111;
33-
--ion-color-success-contrast: #ffffff;
34-
--ion-color-success-contrast-rgb: 255, 255, 255;
35-
--ion-color-success-shade: #28ba62;
36-
--ion-color-success-tint: #42d77d;
37-
38-
/** warning **/
39-
--ion-color-warning: #ffc409;
40-
--ion-color-warning-rgb: 255, 196, 9;
41-
--ion-color-warning-contrast: #000000;
42-
--ion-color-warning-contrast-rgb: 0, 0, 0;
43-
--ion-color-warning-shade: #e0ac08;
44-
--ion-color-warning-tint: #ffca22;
45-
46-
/** danger **/
47-
--ion-color-danger: #eb445a;
48-
--ion-color-danger-rgb: 235, 68, 90;
49-
--ion-color-danger-contrast: #ffffff;
50-
--ion-color-danger-contrast-rgb: 255, 255, 255;
51-
--ion-color-danger-shade: #cf3c4f;
52-
--ion-color-danger-tint: #ed576b;
53-
54-
/** dark **/
55-
--ion-color-dark: #222428;
56-
--ion-color-dark-rgb: 34, 36, 40;
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: #92949c;
64-
--ion-color-medium-rgb: 146, 148, 156;
65-
--ion-color-medium-contrast: #ffffff;
66-
--ion-color-medium-contrast-rgb: 255, 255, 255;
67-
--ion-color-medium-shade: #808289;
68-
--ion-color-medium-tint: #9d9fa6;
69-
70-
/** light **/
71-
--ion-color-light: #f4f5f8;
72-
--ion-color-light-rgb: 244, 245, 248;
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-
79-
@media (prefers-color-scheme: dark) {
80-
/*
81-
* Dark Colors
82-
* -------------------------------------------
83-
*/
84-
85-
body {
86-
--ion-color-primary: #428cff;
87-
--ion-color-primary-rgb: 66,140,255;
88-
--ion-color-primary-contrast: #ffffff;
89-
--ion-color-primary-contrast-rgb: 255,255,255;
90-
--ion-color-primary-shade: #3a7be0;
91-
--ion-color-primary-tint: #5598ff;
92-
93-
--ion-color-secondary: #50c8ff;
94-
--ion-color-secondary-rgb: 80,200,255;
95-
--ion-color-secondary-contrast: #ffffff;
96-
--ion-color-secondary-contrast-rgb: 255,255,255;
97-
--ion-color-secondary-shade: #46b0e0;
98-
--ion-color-secondary-tint: #62ceff;
99-
100-
--ion-color-tertiary: #6a64ff;
101-
--ion-color-tertiary-rgb: 106,100,255;
102-
--ion-color-tertiary-contrast: #ffffff;
103-
--ion-color-tertiary-contrast-rgb: 255,255,255;
104-
--ion-color-tertiary-shade: #5d58e0;
105-
--ion-color-tertiary-tint: #7974ff;
106-
107-
--ion-color-success: #2fdf75;
108-
--ion-color-success-rgb: 47,223,117;
109-
--ion-color-success-contrast: #000000;
110-
--ion-color-success-contrast-rgb: 0,0,0;
111-
--ion-color-success-shade: #29c467;
112-
--ion-color-success-tint: #44e283;
113-
114-
--ion-color-warning: #ffd534;
115-
--ion-color-warning-rgb: 255,213,52;
116-
--ion-color-warning-contrast: #000000;
117-
--ion-color-warning-contrast-rgb: 0,0,0;
118-
--ion-color-warning-shade: #e0bb2e;
119-
--ion-color-warning-tint: #ffd948;
120-
121-
--ion-color-danger: #ff4961;
122-
--ion-color-danger-rgb: 255,73,97;
123-
--ion-color-danger-contrast: #ffffff;
124-
--ion-color-danger-contrast-rgb: 255,255,255;
125-
--ion-color-danger-shade: #e04055;
126-
--ion-color-danger-tint: #ff5b71;
127-
128-
--ion-color-dark: #f4f5f8;
129-
--ion-color-dark-rgb: 244,245,248;
130-
--ion-color-dark-contrast: #000000;
131-
--ion-color-dark-contrast-rgb: 0,0,0;
132-
--ion-color-dark-shade: #d7d8da;
133-
--ion-color-dark-tint: #f5f6f9;
134-
135-
--ion-color-medium: #989aa2;
136-
--ion-color-medium-rgb: 152,154,162;
137-
--ion-color-medium-contrast: #000000;
138-
--ion-color-medium-contrast-rgb: 0,0,0;
139-
--ion-color-medium-shade: #86888f;
140-
--ion-color-medium-tint: #a2a4ab;
141-
142-
--ion-color-light: #222428;
143-
--ion-color-light-rgb: 34,36,40;
144-
--ion-color-light-contrast: #ffffff;
145-
--ion-color-light-contrast-rgb: 255,255,255;
146-
--ion-color-light-shade: #1e2023;
147-
--ion-color-light-tint: #383a3e;
148-
}
149-
150-
/*
151-
* iOS Dark Theme
152-
* -------------------------------------------
153-
*/
154-
155-
.ios body {
156-
--ion-background-color: #000000;
157-
--ion-background-color-rgb: 0,0,0;
158-
159-
--ion-text-color: #ffffff;
160-
--ion-text-color-rgb: 255,255,255;
161-
162-
--ion-color-step-50: #0d0d0d;
163-
--ion-color-step-100: #1a1a1a;
164-
--ion-color-step-150: #262626;
165-
--ion-color-step-200: #333333;
166-
--ion-color-step-250: #404040;
167-
--ion-color-step-300: #4d4d4d;
168-
--ion-color-step-350: #595959;
169-
--ion-color-step-400: #666666;
170-
--ion-color-step-450: #737373;
171-
--ion-color-step-500: #808080;
172-
--ion-color-step-550: #8c8c8c;
173-
--ion-color-step-600: #999999;
174-
--ion-color-step-650: #a6a6a6;
175-
--ion-color-step-700: #b3b3b3;
176-
--ion-color-step-750: #bfbfbf;
177-
--ion-color-step-800: #cccccc;
178-
--ion-color-step-850: #d9d9d9;
179-
--ion-color-step-900: #e6e6e6;
180-
--ion-color-step-950: #f2f2f2;
181-
182-
--ion-item-background: #000000;
183-
184-
--ion-card-background: #1c1c1d;
185-
}
186-
187-
.ios ion-modal {
188-
--ion-background-color: var(--ion-color-step-100);
189-
--ion-toolbar-background: var(--ion-color-step-150);
190-
--ion-toolbar-border-color: var(--ion-color-step-250);
191-
}
192-
193-
194-
/*
195-
* Material Design Dark Theme
196-
* -------------------------------------------
197-
*/
198-
199-
.md body {
200-
--ion-background-color: #121212;
201-
--ion-background-color-rgb: 18,18,18;
202-
203-
--ion-text-color: #ffffff;
204-
--ion-text-color-rgb: 255,255,255;
205-
206-
--ion-border-color: #222222;
207-
208-
--ion-color-step-50: #1e1e1e;
209-
--ion-color-step-100: #2a2a2a;
210-
--ion-color-step-150: #363636;
211-
--ion-color-step-200: #414141;
212-
--ion-color-step-250: #4d4d4d;
213-
--ion-color-step-300: #595959;
214-
--ion-color-step-350: #656565;
215-
--ion-color-step-400: #717171;
216-
--ion-color-step-450: #7d7d7d;
217-
--ion-color-step-500: #898989;
218-
--ion-color-step-550: #949494;
219-
--ion-color-step-600: #a0a0a0;
220-
--ion-color-step-650: #acacac;
221-
--ion-color-step-700: #b8b8b8;
222-
--ion-color-step-750: #c4c4c4;
223-
--ion-color-step-800: #d0d0d0;
224-
--ion-color-step-850: #dbdbdb;
225-
--ion-color-step-900: #e7e7e7;
226-
--ion-color-step-950: #f3f3f3;
227-
228-
--ion-item-background: #1e1e1e;
229-
230-
--ion-toolbar-background: #1f1f1f;
231-
232-
--ion-tab-bar-background: #1f1f1f;
233-
234-
--ion-card-background: #1e1e1e;
235-
}
236-
}
237-
238-
html {
239-
/*
240-
* For more information on dynamic font scaling, visit the documentation:
241-
* https://ionicframework.com/docs/layout/dynamic-font-scaling
242-
*/
243-
--ion-dynamic-font: var(--ion-default-dynamic-font);
244-
}

‎angular/base/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@angular/platform-browser": "^17.0.2",
2222
"@angular/platform-browser-dynamic": "^17.0.2",
2323
"@angular/router": "^17.0.2",
24-
"@ionic/angular": "^7.0.0",
24+
"@ionic/angular": "^8.0.0",
2525
"ionicons": "^7.0.0",
2626
"rxjs": "~7.8.0",
2727
"tslib": "^2.3.0",
@@ -54,4 +54,4 @@
5454
"karma-jasmine-html-reporter": "~2.1.0",
5555
"typescript": "~5.2.2"
5656
}
57-
}
57+
}

‎angular/base/src/global.scss

+11
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,14 @@
2424
@import "@ionic/angular/css/text-alignment.css";
2525
@import "@ionic/angular/css/text-transformation.css";
2626
@import "@ionic/angular/css/flex-utils.css";
27+
28+
/**
29+
* Ionic Dark Mode
30+
* -----------------------------------------------------
31+
* For more info, please see:
32+
* https://ionicframework.com/docs/theming/dark-mode
33+
*/
34+
35+
/* @import "@ionic/angular/css/palettes/dark.always.css"; */
36+
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
37+
@import "@ionic/angular/css/palettes/dark.system.css";

0 commit comments

Comments
 (0)