Skip to content

Commit 1acb123

Browse files
brandyscarneybrandyscarney
committed
fix(themes): set the ionic colors to avoid screenshot diffs
1 parent f5bb210 commit 1acb123

File tree

5 files changed

+174
-0
lines changed

5 files changed

+174
-0
lines changed

‎core/src/global/ionic-global.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { applyGlobalTheme, getCustomTheme } from '@utils/theme';
44

55
import type { IonicConfig, Mode, Theme } from '../interface';
66
import { defaultTheme as baseTheme } from '../themes/base/default.tokens';
7+
import { defaultTheme as ionicTheme } from '../themes/ionic/default.tokens';
78
import type { BaseTheme } from '../themes/themes.interfaces';
89
import { shouldUseCloseWatcher } from '../utils/hardware-back-button';
910
import { isPlatform, setupPlatforms } from '../utils/platform';
@@ -157,6 +158,11 @@ export const initialize = (userConfig: IonicConfig = {}) => {
157158
applyGlobalTheme(baseTheme);
158159
}
159160

161+
// TODO(): remove this when we update the ionic theme
162+
if (defaultTheme === 'ionic') {
163+
applyGlobalTheme(ionicTheme);
164+
}
165+
160166
if (config.getBoolean('_testing')) {
161167
config.set('animated', false);
162168
}

‎core/src/themes/ionic/dark.tokens.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import type { DarkTheme } from '../themes.interfaces';
2+
3+
export const darkTheme: DarkTheme = {
4+
enabled: 'never',
5+
};

‎core/src/themes/ionic/default.tokens.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { DefaultTheme } from '../themes.interfaces';
2+
3+
import { darkTheme } from './dark.tokens';
4+
import { lightTheme } from './light.tokens';
5+
6+
export const defaultTheme: DefaultTheme = {
7+
palette: {
8+
light: lightTheme,
9+
dark: darkTheme,
10+
},
11+
};

‎core/src/themes/ionic/light.tokens.ts‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import type { LightTheme } from '../themes.interfaces';
2+
3+
// TODO(): this should be removed when we update the ionic theme
4+
export const lightTheme: LightTheme = {
5+
color: {
6+
primary: {
7+
bold: {
8+
base: '#105cef', // $ion-bg-primary-base-default
9+
contrast: '#ffffff', // $ion-text-inverse
10+
shade: '#0d4bc3', // $ion-bg-primary-base-press
11+
tint: '#6986f2', // $ion-semantics-primary-600
12+
foreground: '#0d4bc3', // $ion-text-primary
13+
},
14+
subtle: {
15+
base: '#f2f4fd', // $ion-bg-primary-subtle-default
16+
contrast: '#0d4bc3', // $ion-text-primary
17+
shade: '#d0d7fa', // $ion-bg-primary-subtle-press
18+
tint: '#e9ecfc', // $ion-semantics-primary-200
19+
foreground: '#0d4bc3', // $ion-text-primary
20+
},
21+
},
22+
secondary: {
23+
bold: {
24+
base: '#0d4bc3', // $ion-bg-info-base-default
25+
contrast: '#ffffff', // $ion-text-inverse
26+
shade: '#09358a', // $ion-bg-info-base-press
27+
tint: '#105cef', // $ion-semantics-info-700
28+
foreground: '#0d4bc3', // $ion-text-info
29+
},
30+
subtle: {
31+
base: '#f2f4fd', // $ion-bg-info-subtle-default
32+
contrast: '#0d4bc3', // $ion-text-info
33+
shade: '#d0d7fa', // $ion-bg-info-subtle-press
34+
tint: '#e9ecfc', // $ion-semantics-info-200
35+
foreground: '#0d4bc3', // $ion-text-info
36+
},
37+
},
38+
tertiary: {
39+
bold: {
40+
base: '#7c20f2', // $ion-primitives-violet-700
41+
contrast: '#ffffff', // $ion-text-inverse
42+
shade: '#711ddd', // $ion-primitives-violet-800
43+
tint: '#9a6cf4', // $ion-primitives-violet-600
44+
foreground: '#7c20f2', // $ion-primitives-violet-700
45+
},
46+
subtle: {
47+
base: '#f5f2fe', // $ion-primitives-violet-100
48+
contrast: '#7c20f2', // $ion-primitives-violet-700
49+
shade: '#dcd1fb', // $ion-primitives-violet-300
50+
tint: '#eee9fd', // $ion-primitives-violet-200
51+
foreground: '#7c20f2', // $ion-primitives-violet-700
52+
},
53+
},
54+
success: {
55+
bold: {
56+
base: '#126f23', // $ion-bg-success-base-default
57+
contrast: '#ffffff', // $ion-text-inverse
58+
shade: '#093811', // $ion-bg-success-base-press
59+
tint: '#178a2b', // $ion-semantics-success-800
60+
foreground: '#126f23', // $ion-text-success
61+
},
62+
subtle: {
63+
base: '#ebf9ec', // $ion-bg-success-subtle-default
64+
contrast: '#126f23', // $ion-text-success
65+
shade: '#b3ebb7', // $ion-bg-success-subtle-press
66+
tint: '#dcf5de', // $ion-semantics-success-200
67+
foreground: '#126f23', // $ion-text-success
68+
},
69+
},
70+
warning: {
71+
bold: {
72+
base: '#ffd600', // $ion-bg-warning-base-default
73+
contrast: '#242424', // $ion-text-default
74+
shade: '#df9c00', // $ion-bg-warning-base-press
75+
tint: '#ffebb1', // $ion-primitives-yellow-300
76+
foreground: '#704b02', // $ion-text-warning
77+
},
78+
subtle: {
79+
base: '#fff5db', // $ion-bg-warning-subtle-default
80+
contrast: '#704b02', // $ion-text-warning
81+
shade: '#ffe07b', // $ion-bg-warning-subtle-press
82+
tint: '#fff9ea', // $ion-primitives-yellow-100
83+
foreground: '#704b02', // $ion-text-warning
84+
},
85+
},
86+
danger: {
87+
bold: {
88+
base: '#bf2222', // $ion-bg-danger-base-default
89+
contrast: '#ffffff', // $ion-text-inverse
90+
shade: '#761515', // $ion-bg-danger-base-press
91+
tint: '#e52929', // $ion-semantics-danger-700
92+
foreground: '#991b1b', // $ion-text-danger
93+
},
94+
subtle: {
95+
base: '#feeded', // $ion-bg-danger-subtle-default
96+
contrast: '#991b1b', // $ion-text-danger
97+
shade: '#fcc1c1', // $ion-bg-danger-subtle-press
98+
tint: '#fde1e1', // $ion-semantics-danger-200
99+
foreground: '#991b1b', // $ion-text-danger
100+
},
101+
},
102+
light: {
103+
bold: {
104+
base: '#a2a2a2', // $ion-bg-neutral-base-default
105+
contrast: '#242424', // $ion-text-default
106+
shade: '#8c8c8c', // $ion-primitives-neutral-600
107+
tint: '#d5d5d5', // $ion-primitives-neutral-400
108+
foreground: '#242424', // $ion-text-default
109+
},
110+
subtle: {
111+
base: '#ffffff', // $ion-bg-neutral-subtlest-default
112+
contrast: '#242424', // $ion-text-default
113+
shade: '#efefef', // $ion-bg-neutral-subtlest-press
114+
tint: '#f5f5f5', // $ion-primitives-neutral-100
115+
foreground: '#242424', // $ion-text-default
116+
},
117+
},
118+
medium: {
119+
bold: {
120+
base: '#3b3b3b', // $ion-bg-neutral-bold-default
121+
contrast: '#ffffff', // $ion-text-inverse
122+
shade: '#242424', // $ion-bg-neutral-bold-press
123+
tint: '#4e4e4e', // $ion-primitives-neutral-900
124+
foreground: '#242424', // $ion-text-default
125+
},
126+
subtle: {
127+
base: '#efefef', // $ion-bg-neutral-subtle-default
128+
contrast: '#626262', // $ion-text-subtlest
129+
shade: '#d5d5d5', // $ion-bg-neutral-subtle-press
130+
tint: '#f5f5f5', // $ion-primitives-neutral-100
131+
foreground: '#242424', // $ion-text-default
132+
},
133+
},
134+
dark: {
135+
bold: {
136+
base: '#242424', // $ion-bg-neutral-boldest-default
137+
contrast: '#ffffff', // $ion-text-inverse
138+
shade: '#111111', // $ion-bg-neutral-boldest-press
139+
tint: '#292929', // $ion-primitives-neutral-1100
140+
foreground: '#242424', // $ion-text-default
141+
},
142+
subtle: {
143+
base: '#efefef', // $ion-bg-neutral-subtle-default
144+
contrast: '#3b3b3b', // $ion-text-subtle
145+
shade: '#d5d5d5', // $ion-bg-neutral-subtle-press
146+
tint: '#f5f5f5', // $ion-primitives-neutral-100
147+
foreground: '#242424', // $ion-text-default
148+
},
149+
},
150+
},
151+
};

‎core/src/utils/theme.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export const generateCSSVars = (theme: any, prefix: string = CSS_PROPS_PREFIX):
9292
// Generate rgb variables for base and contrast color variants
9393
// These are only generated when processing global color objects,
9494
// not component-level color overrides
95+
// TODO(): this only works with hex values
9596
if ((key === 'bold' || key === 'subtle') && prefix.includes('color')) {
9697
if (typeof val === 'object' && val !== null) {
9798
return Object.entries(val).flatMap(([property, hexValue]) => {

0 commit comments

Comments
 (0)