Skip to content

Commit 6c94505

Browse files
brandyscarneybrandyscarney
committed
feat(themes): define base tokens, color functions and interfaces
1 parent 2344085 commit 6c94505

File tree

6 files changed

+757
-9
lines changed

6 files changed

+757
-9
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +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 type { Theme as BaseTheme } from '../themes/base/default.tokens';
7+
import type { BaseTheme } from '../themes/themes.interfaces';
88
import { shouldUseCloseWatcher } from '../utils/hardware-back-button';
99
import { isPlatform, setupPlatforms } from '../utils/platform';
1010

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

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import { mix } from '../../utils/theme';
2+
import type { DarkTheme } from '../themes.interfaces';
3+
4+
const colors = {
5+
primary: '#4d8dff',
6+
secondary: '#46b1ff',
7+
tertiary: '#8482fb',
8+
success: '#2dd55b',
9+
warning: '#ffce31',
10+
danger: '#f24c58',
11+
light: '#222428',
12+
medium: '#989aa2',
13+
dark: '#f4f5f8',
14+
};
15+
16+
export const darkTheme: DarkTheme = {
17+
enabled: 'never',
18+
color: {
19+
primary: {
20+
bold: {
21+
base: colors.primary,
22+
contrast: '#fff',
23+
foreground: mix(colors.primary, '#000', '4%'),
24+
shade: mix(colors.primary, '#000', '4%'),
25+
tint: mix(colors.primary, '#fff', '12%'),
26+
},
27+
subtle: {
28+
base: mix('#000', colors.primary, '8%'),
29+
contrast: colors.primary,
30+
foreground: mix(colors.primary, '#000', '4%'),
31+
shade: mix('#000', colors.primary, '4%'),
32+
tint: mix('#000', colors.primary, '12%'),
33+
},
34+
},
35+
secondary: {
36+
bold: {
37+
base: colors.secondary,
38+
contrast: '#fff',
39+
foreground: mix(colors.secondary, '#000', '4%'),
40+
shade: mix(colors.secondary, '#000', '4%'),
41+
tint: mix(colors.secondary, '#fff', '12%'),
42+
},
43+
subtle: {
44+
base: mix('#000', colors.secondary, '8%'),
45+
contrast: colors.secondary,
46+
foreground: mix(colors.secondary, '#000', '4%'),
47+
shade: mix('#000', colors.secondary, '4%'),
48+
tint: mix('#000', colors.secondary, '12%'),
49+
},
50+
},
51+
tertiary: {
52+
bold: {
53+
base: colors.tertiary,
54+
contrast: '#fff',
55+
foreground: mix(colors.tertiary, '#000', '4%'),
56+
shade: mix(colors.tertiary, '#000', '4%'),
57+
tint: mix(colors.tertiary, '#fff', '12%'),
58+
},
59+
subtle: {
60+
base: mix('#000', colors.tertiary, '8%'),
61+
contrast: colors.tertiary,
62+
foreground: mix(colors.tertiary, '#000', '4%'),
63+
shade: mix('#000', colors.tertiary, '4%'),
64+
tint: mix('#000', colors.tertiary, '12%'),
65+
},
66+
},
67+
success: {
68+
bold: {
69+
base: colors.success,
70+
contrast: '#fff',
71+
foreground: mix(colors.success, '#000', '4%'),
72+
shade: mix(colors.success, '#000', '4%'),
73+
tint: mix(colors.success, '#fff', '12%'),
74+
},
75+
subtle: {
76+
base: mix('#000', colors.success, '8%'),
77+
contrast: colors.success,
78+
foreground: mix(colors.success, '#000', '4%'),
79+
shade: mix('#000', colors.success, '4%'),
80+
tint: mix('#000', colors.success, '12%'),
81+
},
82+
},
83+
warning: {
84+
bold: {
85+
base: colors.warning,
86+
contrast: '#fff',
87+
foreground: mix(colors.warning, '#000', '4%'),
88+
shade: mix(colors.warning, '#000', '4%'),
89+
tint: mix(colors.warning, '#fff', '12%'),
90+
},
91+
subtle: {
92+
base: mix('#000', colors.warning, '8%'),
93+
contrast: colors.warning,
94+
foreground: mix(colors.warning, '#000', '4%'),
95+
shade: mix('#000', colors.warning, '4%'),
96+
tint: mix('#000', colors.warning, '12%'),
97+
},
98+
},
99+
danger: {
100+
bold: {
101+
base: colors.danger,
102+
contrast: '#fff',
103+
foreground: mix(colors.danger, '#000', '4%'),
104+
shade: mix(colors.danger, '#000', '4%'),
105+
tint: mix(colors.danger, '#fff', '12%'),
106+
},
107+
subtle: {
108+
base: mix('#000', colors.danger, '8%'),
109+
contrast: colors.danger,
110+
foreground: mix(colors.danger, '#000', '4%'),
111+
shade: mix('#000', colors.danger, '4%'),
112+
tint: mix('#000', colors.danger, '12%'),
113+
},
114+
},
115+
light: {
116+
bold: {
117+
base: colors.light,
118+
contrast: '#000',
119+
foreground: mix(colors.light, '#000', '4%'),
120+
shade: mix(colors.light, '#000', '4%'),
121+
tint: mix(colors.light, '#fff', '12%'),
122+
},
123+
subtle: {
124+
base: mix('#000', colors.light, '8%'),
125+
contrast: colors.light,
126+
foreground: mix(colors.light, '#000', '4%'),
127+
shade: mix('#000', colors.light, '4%'),
128+
tint: mix('#000', colors.light, '12%'),
129+
},
130+
},
131+
medium: {
132+
bold: {
133+
base: colors.medium,
134+
contrast: '#fff',
135+
foreground: mix(colors.medium, '#000', '4%'),
136+
shade: mix(colors.medium, '#000', '4%'),
137+
tint: mix(colors.medium, '#fff', '12%'),
138+
},
139+
subtle: {
140+
base: mix('#000', colors.medium, '8%'),
141+
contrast: colors.medium,
142+
foreground: mix(colors.medium, '#000', '4%'),
143+
shade: mix('#000', colors.medium, '4%'),
144+
tint: mix('#000', colors.medium, '12%'),
145+
},
146+
},
147+
dark: {
148+
bold: {
149+
base: colors.dark,
150+
contrast: '#fff',
151+
foreground: mix(colors.dark, '#000', '4%'),
152+
shade: mix(colors.dark, '#000', '4%'),
153+
tint: mix(colors.dark, '#fff', '12%'),
154+
},
155+
subtle: {
156+
base: mix('#000', colors.dark, '8%'),
157+
contrast: colors.dark,
158+
foreground: mix(colors.dark, '#000', '4%'),
159+
shade: mix('#000', colors.dark, '4%'),
160+
tint: mix('#000', colors.dark, '12%'),
161+
},
162+
},
163+
},
164+
};

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

Lines changed: 98 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,101 @@
1-
export const defaultTheme = {
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 = {
27
palette: {
3-
light: {},
4-
dark: {
5-
enabled: 'system',
6-
},
8+
light: lightTheme,
9+
dark: darkTheme,
10+
},
11+
12+
spacing: {
13+
none: '0',
14+
xxs: '4px',
15+
xs: '6px',
16+
sm: '8px',
17+
md: '12px',
18+
lg: '16px',
19+
xl: '24px',
20+
xxl: '32px',
21+
},
22+
23+
scaling: {
24+
0: '0',
25+
100: '4px',
26+
150: '6px',
27+
200: '8px',
28+
250: '10px',
29+
300: '12px',
30+
350: '14px',
31+
400: '16px',
32+
450: '18px',
33+
500: '20px',
34+
550: '22px',
35+
600: '24px',
36+
650: '26px',
37+
700: '28px',
38+
750: '30px',
39+
800: '32px',
40+
850: '34px',
41+
900: '36px',
42+
},
43+
44+
borderWidth: {
45+
none: '0',
46+
xxs: '1px',
47+
xs: '2px',
48+
sm: '4px',
49+
md: '6px',
50+
lg: '8px',
51+
xl: '10px',
52+
xxl: '12px',
753
},
8-
};
954

10-
export type Theme = typeof defaultTheme;
55+
radii: {
56+
none: '0',
57+
xxs: '1px',
58+
xs: '2px',
59+
sm: '4px',
60+
md: '8px',
61+
lg: '12px',
62+
xl: '16px',
63+
xxl: '32px',
64+
},
65+
66+
fontFamily: 'Roboto, "Helvetica Neue", sans-serif',
67+
dynamicFont: '-apple-system-body',
68+
69+
fontSize: {
70+
root: '16px',
71+
xxs: '10px',
72+
xs: '12px',
73+
sm: '14px',
74+
md: '16px',
75+
lg: '18px',
76+
xl: '20px',
77+
xxl: '24px',
78+
},
79+
80+
fontWeight: {
81+
thin: '100',
82+
extraLight: '200',
83+
light: '300',
84+
normal: '400',
85+
medium: '500',
86+
semiBold: '600',
87+
bold: '700',
88+
extraBold: '800',
89+
black: '900',
90+
},
91+
92+
lineHeight: {
93+
xxs: '1',
94+
xs: '1.2',
95+
sm: '1.4',
96+
md: '1.6',
97+
lg: '1.8',
98+
xl: '2',
99+
xxl: '2.4',
100+
},
101+
};

0 commit comments

Comments
 (0)