Skip to content

Commit d6bcb38

Browse files
thetaPCthetaPC
committed
feat(themes): enable all palettes
1 parent 6ae701e commit d6bcb38

File tree

15 files changed

+970
-15
lines changed

15 files changed

+970
-15
lines changed

‎core/scripts/testing/scripts.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,18 @@ const DEFAULT_THEME = 'md';
8787
* Values can be `light`, `dark`, `high-contrast`,
8888
* or `high-contrast-dark`. Default to `light` for tests.
8989
*/
90-
const paletteQuery = window.location.search.match(/palette=([a-z]+)/);
91-
const paletteHash = window.location.hash.match(/palette=([a-z]+)/);
90+
const configDarkMode = window.Ionic?.config?.customTheme?.palette?.dark?.enabled === 'always' ? 'dark' : null;
91+
const configHighContrastMode = window.Ionic?.config?.customTheme?.palette?.highContrast?.enabled === 'always' ? 'high-contrast' : null;
92+
const configHighContrastDarkMode = window.Ionic?.config?.customTheme?.palette?.highContrastDark?.enabled === 'always' ? 'high-contrast-dark' : null;
93+
const configPalette = configDarkMode || configHighContrastMode || configHighContrastDarkMode;
94+
const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
95+
const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
9296
const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
97+
const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
98+
const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
99+
const paletteClass = highContrastDarkClass || highContrastClass || darkClass;
93100

94-
const paletteName = paletteQuery?.[1] || paletteHash?.[1] || darkClass || 'light';
101+
const paletteName = configPalette || paletteQuery?.[1] || paletteHash?.[1] || paletteClass || 'light';
95102

96103
// Load theme tokens if the theme is valid
97104
const validThemes = ['ionic', 'ios', 'md'];
@@ -111,8 +118,15 @@ const DEFAULT_THEME = 'md';
111118

112119
// If a specific palette is requested, modify the palette structure
113120
// to set the enabled property to 'always'
121+
// TODO(FW-4004): Implement dark mode
114122
if (paletteName === 'dark' && theme.palette?.dark) {
115123
theme.palette.dark.enabled = 'always';
124+
// TODO(FW-4005): Implement high contrast mode
125+
} else if (paletteName === 'high-contrast' && theme.palette?.highContrast) {
126+
theme.palette.highContrast.enabled = 'always';
127+
// TODO(FW-4005): Implement high contrast dark mode
128+
} else if (paletteName === 'high-contrast-dark' && theme.palette?.highContrastDark) {
129+
theme.palette.highContrastDark.enabled = 'always';
116130
}
117131

118132
// Apply the theme tokens to Ionic config

‎core/src/components/modal/test/dark-mode/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,21 @@
1010
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
1111
<link href="../../../../../css/palettes/dark.always.css" rel="stylesheet" />
1212
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
13+
<script>
14+
// Need to be called before loading Ionic else
15+
// the scripts.js logic runs too early.
16+
window.Ionic = {
17+
config: {
18+
customTheme: {
19+
palette: {
20+
dark: {
21+
enabled: 'always',
22+
},
23+
},
24+
},
25+
},
26+
};
27+
</script>
1328
<script src="../../../../../scripts/testing/scripts.js"></script>
1429
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
1530
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>

‎core/src/themes/base/high-contrast-dark.tokens.ts‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
import { mix } from '../../utils/theme';
2+
import type { HighContrastDarkTheme } from '../themes.interfaces';
3+
4+
const colors = {
5+
primary: '#7cabff',
6+
secondary: '#62bdff',
7+
tertiary: '#b6b9f9',
8+
success: '#4ada71',
9+
warning: '#ffce31',
10+
danger: '#fc9aa2',
11+
light: '#222428',
12+
medium: '#a8aab3',
13+
dark: '#f4f5f8',
14+
};
15+
16+
export const highContrastDarkTheme: HighContrastDarkTheme = {
17+
enabled: 'never',
18+
color: {
19+
primary: {
20+
bold: {
21+
base: colors.primary,
22+
contrast: '#000',
23+
foreground: colors.primary,
24+
shade: mix(colors.primary, '#000', '12%'),
25+
tint: mix(colors.primary, '#fff', '10%'),
26+
},
27+
subtle: {
28+
base: mix('#fff', colors.primary, '8%'),
29+
contrast: colors.primary,
30+
foreground: mix(colors.primary, '#000', '12%'),
31+
shade: mix('#fff', colors.primary, '12%'),
32+
tint: mix('#fff', colors.primary, '4%'),
33+
},
34+
},
35+
secondary: {
36+
bold: {
37+
base: colors.secondary,
38+
contrast: '#000',
39+
foreground: colors.secondary,
40+
shade: mix(colors.secondary, '#000', '12%'),
41+
tint: mix(colors.secondary, '#fff', '10%'),
42+
},
43+
subtle: {
44+
base: mix('#fff', colors.secondary, '8%'),
45+
contrast: colors.secondary,
46+
foreground: mix(colors.secondary, '#000', '12%'),
47+
shade: mix('#fff', colors.secondary, '12%'),
48+
tint: mix('#fff', colors.secondary, '4%'),
49+
},
50+
},
51+
tertiary: {
52+
bold: {
53+
base: colors.tertiary,
54+
contrast: '#000',
55+
foreground: colors.tertiary,
56+
shade: mix(colors.tertiary, '#000', '12%'),
57+
tint: mix(colors.tertiary, '#fff', '10%'),
58+
},
59+
subtle: {
60+
base: mix('#fff', colors.tertiary, '8%'),
61+
contrast: colors.tertiary,
62+
foreground: mix(colors.tertiary, '#000', '12%'),
63+
shade: mix('#fff', colors.tertiary, '12%'),
64+
tint: mix('#fff', colors.tertiary, '4%'),
65+
},
66+
},
67+
success: {
68+
bold: {
69+
base: colors.success,
70+
contrast: '#000',
71+
foreground: colors.success,
72+
shade: mix(colors.success, '#000', '12%'),
73+
tint: mix(colors.success, '#fff', '10%'),
74+
},
75+
subtle: {
76+
base: mix('#fff', colors.success, '8%'),
77+
contrast: colors.success,
78+
foreground: mix(colors.success, '#000', '12%'),
79+
shade: mix('#fff', colors.success, '12%'),
80+
tint: mix('#fff', colors.success, '4%'),
81+
},
82+
},
83+
warning: {
84+
bold: {
85+
base: colors.warning,
86+
contrast: '#000',
87+
foreground: colors.warning,
88+
shade: mix(colors.warning, '#000', '12%'),
89+
tint: mix(colors.warning, '#fff', '10%'),
90+
},
91+
subtle: {
92+
base: mix('#fff', colors.warning, '8%'),
93+
contrast: colors.warning,
94+
foreground: mix(colors.warning, '#000', '12%'),
95+
shade: mix('#fff', colors.warning, '12%'),
96+
tint: mix('#fff', colors.warning, '4%'),
97+
},
98+
},
99+
danger: {
100+
bold: {
101+
base: colors.danger,
102+
contrast: '#000',
103+
foreground: colors.danger,
104+
shade: mix(colors.danger, '#000', '12%'),
105+
tint: mix(colors.danger, '#fff', '10%'),
106+
},
107+
subtle: {
108+
base: mix('#fff', colors.danger, '8%'),
109+
contrast: colors.danger,
110+
foreground: mix(colors.danger, '#000', '12%'),
111+
shade: mix('#fff', colors.danger, '12%'),
112+
tint: mix('#fff', colors.danger, '4%'),
113+
},
114+
},
115+
light: {
116+
bold: {
117+
base: colors.light,
118+
contrast: '#fff',
119+
foreground: colors.light,
120+
shade: mix(colors.light, '#000', '12%'),
121+
tint: mix(colors.light, '#fff', '10%'),
122+
},
123+
subtle: {
124+
base: mix('#fff', colors.light, '8%'),
125+
contrast: colors.light,
126+
foreground: mix(colors.light, '#000', '12%'),
127+
shade: mix('#fff', colors.light, '12%'),
128+
tint: mix('#fff', colors.light, '4%'),
129+
},
130+
},
131+
medium: {
132+
bold: {
133+
base: colors.medium,
134+
contrast: '#000',
135+
foreground: colors.medium,
136+
shade: mix(colors.medium, '#000', '12%'),
137+
tint: mix(colors.medium, '#fff', '10%'),
138+
},
139+
subtle: {
140+
base: mix('#fff', colors.medium, '8%'),
141+
contrast: colors.medium,
142+
foreground: mix(colors.medium, '#000', '12%'),
143+
shade: mix('#fff', colors.medium, '12%'),
144+
tint: mix('#fff', colors.medium, '4%'),
145+
},
146+
},
147+
dark: {
148+
bold: {
149+
base: colors.dark,
150+
contrast: '#000',
151+
foreground: colors.dark,
152+
shade: mix(colors.dark, '#000', '12%'),
153+
tint: mix(colors.dark, '#fff', '10%'),
154+
},
155+
subtle: {
156+
base: mix('#fff', colors.dark, '8%'),
157+
contrast: colors.dark,
158+
foreground: mix(colors.dark, '#000', '12%'),
159+
shade: mix('#fff', colors.dark, '12%'),
160+
tint: mix('#fff', colors.dark, '4%'),
161+
},
162+
},
163+
},
164+
165+
backgroundColor: '#000000',
166+
backgroundColorRgb: '0, 0, 0',
167+
textColor: '#ffffff',
168+
textColorRgb: '255, 255, 255',
169+
170+
backgroundColorStep: {
171+
50: '#0d0d0d',
172+
100: '#1a1a1a',
173+
150: '#262626',
174+
200: '#333333',
175+
250: '#404040',
176+
300: '#4d4d4d',
177+
350: '#595959',
178+
400: '#666666',
179+
450: '#737373',
180+
500: '#808080',
181+
550: '#8c8c8c',
182+
600: '#999999',
183+
650: '#a6a6a6',
184+
700: '#b3b3b3',
185+
750: '#bfbfbf',
186+
800: '#cccccc',
187+
850: '#d9d9d9',
188+
900: '#e6e6e6',
189+
950: '#f2f2f2',
190+
},
191+
192+
textColorStep: {
193+
50: '#f9f9f9',
194+
100: '#f3f3f3',
195+
150: '#ededed',
196+
200: '#e7e7e7',
197+
250: '#e1e1e1',
198+
300: '#dbdbdb',
199+
350: '#d5d5d5',
200+
400: '#cfcfcf',
201+
450: '#c9c9c9',
202+
500: '#c4c4c4',
203+
550: '#bebebe',
204+
600: '#b8b8b8',
205+
650: '#b2b2b2',
206+
700: '#acacac',
207+
750: '#a6a6a6',
208+
800: '#a0a0a0',
209+
850: '#9a9a9a',
210+
900: '#949494',
211+
950: '#8e8e8e',
212+
},
213+
};

0 commit comments

Comments
 (0)