Skip to content

Commit a7699ea

Browse files
brandyscarneybrandyscarney
authored
feat(themes): add md theme tokens and update ionic theme to include semantic tokens (#30734)
- Updates the theme tokens interface to add more numeric tokens & semantic tokens - Moves the `config` values into a separate `config` option which uses the `IonicConfig` interface - Adds a config option for `formHighlight` to `IonicConfig` - Defines default & dark tokens for the `md` theme - Removes the numeric tokens from the `ionic` theme and adds semantic tokens - Remove the numerous `--ion-font-family` overrides in favor of the tokens --------- Co-authored-by: Brandy Smith <[email protected]>
1 parent 3fd1d5c commit a7699ea

File tree

12 files changed

+275
-120
lines changed

12 files changed

+275
-120
lines changed

‎core/scripts/testing/styles.css‎

Lines changed: 1 addition & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/src/css/core.scss‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,9 @@
77
// Ionic Font Family
88
// --------------------------------------------------
99

10+
// TODO(FW-6744): Remove this after adding the ios tokens
1011
html.ios {
11-
--ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
12-
}
13-
html.md {
14-
--ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
15-
}
16-
17-
html {
18-
--ion-dynamic-font: -apple-system-body;
19-
--ion-font-family: var(--ion-default-font);
12+
--ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
2013
}
2114

2215
body {

‎core/src/css/ionic/core.ionic.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
--background: #{globals.$ion-bg-surface-default};
99
}
1010

11-
html {
12-
--ionic-dynamic-font: -apple-system-body;
13-
}
14-
1511
body {
1612
background: var(--ion-background-color, #{globals.$ion-bg-body});
1713
color: var(--ion-text-color, #{globals.$ion-text-default});

‎core/src/css/ionic/typography.ionic.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn
44
html {
5-
font-family: globals.$ion-font-family;
5+
font-family: var(--ion-font-family);
66
}
77

88
body {

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

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,16 @@ export const defaultTheme: DefaultTheme = {
1111
dark: darkTheme,
1212
},
1313

14-
formHighlight: false,
15-
rippleEffect: false,
14+
config: {
15+
formHighlight: false,
16+
rippleEffect: false,
17+
},
1618

1719
spacing: {
1820
0: '0px',
21+
25: '1px',
1922
50: '2px',
23+
75: '3px',
2024
100: '4px',
2125
150: '6px',
2226
200: '8px',
@@ -98,17 +102,26 @@ export const defaultTheme: DefaultTheme = {
98102
300: '12px',
99103
350: '14px',
100104
400: '16px',
105+
hairline: '0.55px',
101106
},
102107

103108
radii: {
104109
0: '0px',
105-
25: '2px',
110+
25: '1px',
111+
50: '2px',
112+
75: '3px',
106113
100: '4px',
114+
150: '6px',
107115
200: '8px',
116+
250: '10px',
108117
300: '12px',
118+
350: '14px',
109119
400: '16px',
110120
500: '20px',
121+
600: '24px',
122+
700: '28px',
111123
800: '32px',
124+
900: '36px',
112125
1000: '40px',
113126
full: '999px',
114127
},

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

Lines changed: 51 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -14,104 +14,66 @@ export const defaultTheme: DefaultTheme = {
1414
dark: darkTheme,
1515
},
1616

17-
formHighlight: false,
18-
rippleEffect: false,
17+
config: {
18+
formHighlight: true,
19+
},
1920

20-
// TODO(FW-6745): see if we can remove this after the md tokens are added
21-
fontFamily: 'initial',
21+
fontFamily:
22+
'-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
2223

2324
spacing: {
24-
0: '0px',
25-
50: '2px',
26-
100: '4px',
27-
150: '6px',
28-
200: '8px',
29-
250: '10px',
30-
300: '12px',
31-
350: '14px',
32-
400: '16px',
33-
450: '18px',
34-
500: '20px',
35-
550: '22px',
36-
600: '24px',
37-
650: '26px',
38-
700: '28px',
39-
750: '30px',
40-
800: '32px',
41-
850: '34px',
42-
900: '36px',
43-
950: '38px',
44-
1000: '40px',
45-
1050: '42px',
46-
1100: '44px',
47-
1150: '46px',
48-
1200: '48px',
25+
xxxxs: 'var(--ion-spacing-25)',
26+
xxxs: 'var(--ion-spacing-50)',
27+
xxs: 'var(--ion-spacing-100)',
28+
xs: 'var(--ion-spacing-150)',
29+
sm: 'var(--ion-spacing-200)',
30+
md: 'var(--ion-spacing-300)',
31+
lg: 'var(--ion-spacing-400)',
32+
xl: 'var(--ion-spacing-500)',
33+
xxl: 'var(--ion-spacing-600)',
34+
xxxl: 'var(--ion-spacing-700)',
35+
xxxxl: 'var(--ion-spacing-800)',
4936
},
5037

5138
scaling: {
52-
0: '0px',
53-
25: '1px',
54-
50: '2px',
55-
75: '3px',
56-
100: '4px',
57-
150: '6px',
58-
200: '8px',
59-
250: '10px',
60-
300: '12px',
61-
350: '14px',
62-
400: '16px',
63-
450: '18px',
64-
500: '20px',
65-
550: '22px',
66-
600: '24px',
67-
650: '26px',
68-
700: '28px',
69-
750: '30px',
70-
800: '32px',
71-
850: '34px',
72-
900: '36px',
73-
950: '38px',
74-
1000: '40px',
75-
1050: '42px',
76-
1100: '44px',
77-
1150: '46px',
78-
1200: '48px',
79-
1400: '56px',
80-
1600: '64px',
81-
1800: '72px',
82-
2000: '80px',
83-
2400: '96px',
84-
2800: '112px',
85-
3200: '128px',
86-
3400: '136px',
87-
3600: '144px',
88-
4000: '160px',
89-
5000: '200px',
90-
6200: '248px',
91-
7400: '296px',
92-
9000: '360px',
39+
xxxxs: 'var(--ion-scaling-300)',
40+
xxxs: 'var(--ion-scaling-400)',
41+
xxs: 'var(--ion-scaling-500)',
42+
xs: 'var(--ion-scaling-600)',
43+
sm: 'var(--ion-scaling-700)',
44+
md: 'var(--ion-scaling-800)',
45+
lg: 'var(--ion-scaling-1000)',
46+
xl: 'var(--ion-scaling-1200)',
47+
xxl: 'var(--ion-scaling-1400)',
48+
xxxl: 'var(--ion-scaling-1800)',
49+
xxxxl: 'var(--ion-scaling-2000)',
9350
},
9451

95-
radii: {
96-
0: '0px',
97-
25: '2px',
98-
100: '4px',
99-
200: '8px',
100-
300: '12px',
101-
400: '16px',
102-
500: '20px',
103-
800: '32px',
104-
1000: '40px',
105-
full: '999px',
52+
borderWidth: {
53+
xxxxs: 'var(--ion-border-width-0)',
54+
xxxs: 'var(--ion-border-width-25)',
55+
xxs: 'var(--ion-border-width-50)',
56+
xs: 'var(--ion-border-width-75)',
57+
sm: 'var(--ion-border-width-100)',
58+
md: 'var(--ion-border-width-150)',
59+
lg: 'var(--ion-border-width-200)',
60+
xl: 'var(--ion-border-width-250)',
61+
xxl: 'var(--ion-border-width-300)',
62+
xxxl: 'var(--ion-border-width-350)',
63+
xxxxl: 'var(--ion-border-width-400)',
10664
},
10765

108-
borderWidth: {
109-
0: '0',
110-
25: '1px',
111-
50: '2px',
112-
75: '3px',
113-
100: '4px',
114-
150: '6px',
115-
200: '8px',
66+
radii: {
67+
xxxxs: 'var(--ion-radii-0)',
68+
xxxs: 'var(--ion-radii-25)',
69+
xxs: 'var(--ion-radii-50)',
70+
xs: 'var(--ion-radii-75)',
71+
sm: 'var(--ion-radii-100)',
72+
md: 'var(--ion-radii-200)',
73+
lg: 'var(--ion-radii-300)',
74+
xl: 'var(--ion-radii-400)',
75+
xxl: 'var(--ion-radii-500)',
76+
xxxl: 'var(--ion-radii-1000)',
77+
xxxxl: 'var(--ion-radii-full)',
11678
},
11779
};

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,68 @@ import type { DarkTheme } from '../themes.interfaces';
33

44
export const darkTheme: DarkTheme = {
55
...baseDarkTheme,
6+
7+
backgroundColor: '#121212',
8+
backgroundColorRgb: '18, 18, 18',
9+
textColor: '#ffffff',
10+
textColorRgb: '255, 255, 255',
11+
12+
backgroundColorStep: {
13+
50: '#1e1e1e',
14+
100: '#2a2a2a',
15+
150: '#363636',
16+
200: '#414141',
17+
250: '#4d4d4d',
18+
300: '#595959',
19+
350: '#656565',
20+
400: '#717171',
21+
450: '#7d7d7d',
22+
500: '#898989',
23+
550: '#949494',
24+
600: '#a0a0a0',
25+
650: '#acacac',
26+
700: '#b8b8b8',
27+
750: '#c4c4c4',
28+
800: '#d0d0d0',
29+
850: '#dbdbdb',
30+
900: '#e7e7e7',
31+
950: '#f3f3f3',
32+
},
33+
34+
textColorStep: {
35+
50: '#f3f3f3',
36+
100: '#e7e7e7',
37+
150: '#dbdbdb',
38+
200: '#d0d0d0',
39+
250: '#c4c4c4',
40+
300: '#b8b8b8',
41+
350: '#acacac',
42+
400: '#a0a0a0',
43+
450: '#949494',
44+
500: '#898989',
45+
550: '#7d7d7d',
46+
600: '#717171',
47+
650: '#656565',
48+
700: '#595959',
49+
750: '#4d4d4d',
50+
800: '#414141',
51+
850: '#363636',
52+
900: '#2a2a2a',
53+
950: '#1e1e1e',
54+
},
55+
56+
components: {
57+
IonCard: {
58+
background: '#1e1e1e',
59+
},
60+
IonItem: {
61+
background: '#1e1e1e',
62+
},
63+
IonToolbar: {
64+
background: '#1f1f1f',
65+
},
66+
IonTabBar: {
67+
background: '#1f1f1f',
68+
},
69+
},
670
};

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,67 @@ export const defaultTheme: DefaultTheme = {
1313
light: lightTheme,
1414
dark: darkTheme,
1515
},
16+
17+
config: {
18+
formHighlight: true,
19+
rippleEffect: true,
20+
},
21+
22+
fontFamily: '"Roboto", "Helvetica Neue", sans-serif',
23+
24+
spacing: {
25+
xxxxs: 'var(--ion-spacing-25)',
26+
xxxs: 'var(--ion-spacing-50)',
27+
xxs: 'var(--ion-spacing-100)',
28+
xs: 'var(--ion-spacing-150)',
29+
sm: 'var(--ion-spacing-200)',
30+
md: 'var(--ion-spacing-300)',
31+
lg: 'var(--ion-spacing-400)',
32+
xl: 'var(--ion-spacing-500)',
33+
xxl: 'var(--ion-spacing-600)',
34+
xxxl: 'var(--ion-spacing-700)',
35+
xxxxl: 'var(--ion-spacing-800)',
36+
},
37+
38+
scaling: {
39+
xxxxs: 'var(--ion-scaling-300)',
40+
xxxs: 'var(--ion-scaling-400)',
41+
xxs: 'var(--ion-scaling-500)',
42+
xs: 'var(--ion-scaling-600)',
43+
sm: 'var(--ion-scaling-700)',
44+
md: 'var(--ion-scaling-800)',
45+
lg: 'var(--ion-scaling-900)',
46+
xl: 'var(--ion-scaling-1000)',
47+
xxl: 'var(--ion-scaling-1100)',
48+
xxxl: 'var(--ion-scaling-1200)',
49+
xxxxl: 'var(--ion-scaling-1600)',
50+
},
51+
52+
borderWidth: {
53+
xxxxs: 'var(--ion-border-width-0)',
54+
xxxs: 'var(--ion-border-width-25)',
55+
xxs: 'var(--ion-border-width-50)',
56+
xs: 'var(--ion-border-width-75)',
57+
sm: 'var(--ion-border-width-100)',
58+
md: 'var(--ion-border-width-150)',
59+
lg: 'var(--ion-border-width-200)',
60+
xl: 'var(--ion-border-width-250)',
61+
xxl: 'var(--ion-border-width-300)',
62+
xxxl: 'var(--ion-border-width-350)',
63+
xxxxl: 'var(--ion-border-width-400)',
64+
},
65+
66+
radii: {
67+
xxxxs: 'var(--ion-radii-0)',
68+
xxxs: 'var(--ion-radii-25)',
69+
xxs: 'var(--ion-radii-50)',
70+
xs: 'var(--ion-radii-75)',
71+
sm: 'var(--ion-radii-100)',
72+
md: 'var(--ion-radii-200)',
73+
lg: 'var(--ion-radii-300)',
74+
xl: 'var(--ion-radii-400)',
75+
xxl: 'var(--ion-radii-700)',
76+
xxxl: 'var(--ion-radii-900)',
77+
xxxxl: 'var(--ion-radii-full)',
78+
},
1679
};

0 commit comments

Comments
 (0)