Skip to content

Commit c66561e

Browse files
thetaPCthetaPC
committed
refactor(tokens): rearrange shared tokens
1 parent 4b170f0 commit c66561e

7 files changed

Lines changed: 82 additions & 97 deletions

File tree

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Tokens shared between the theme files.
3+
*/
4+
5+
const hexColors = {
6+
white: '#ffffff',
7+
black: '#000000',
8+
};
9+
10+
const rgbColors = {
11+
white: '255, 255, 255',
12+
black: '0, 0, 0',
13+
};
14+
15+
export const colors = {
16+
...hexColors,
17+
18+
backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
19+
backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
20+
21+
textColor: `var(--ion-text-color, ${hexColors.black})`,
22+
textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
23+
};

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { currentColor, mix, dynamicFont } from '../../utils/theme';
22
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
3+
import { colors as baseColors } from '../base/shared.tokens';
34
import type { DefaultTheme } from '../themes.interfaces';
45

56
import { darkTheme } from './dark.tokens';
67
import { lightTheme } from './light.tokens';
7-
import { fontSizes, colors, components } from './shared.tokens';
8+
import { components } from './shared.tokens';
89

910
export const defaultTheme: DefaultTheme = {
1011
...baseDefaultTheme,
@@ -264,8 +265,8 @@ export const defaultTheme: DefaultTheme = {
264265
},
265266

266267
IonItemDivider: {
267-
background: `var(--ion-background-color, ${colors.white})`,
268-
color: `var(--ion-text-color-step-600, ${mix(colors.white, colors.black, '40%')})`,
268+
background: baseColors.backgroundColor,
269+
color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
269270
minHeight: 'var(--ion-scaling-750)',
270271
zIndex: 100,
271272

@@ -290,7 +291,7 @@ export const defaultTheme: DefaultTheme = {
290291
},
291292

292293
font: {
293-
size: dynamicFont(fontSizes.itemDividerBase),
294+
size: dynamicFont(components.itemDivider.font.size),
294295
},
295296

296297
leading: {
@@ -332,7 +333,7 @@ export const defaultTheme: DefaultTheme = {
332333
* font size in pixels.
333334
* e.g. 24px / 14px = 1.7142857143em
334335
*/
335-
size: `${components.item.icon.slot.font.size / fontSizes.itemDividerBase}em`,
336+
size: `${components.item.icon.slot.font.size / components.itemDivider.font.size}em`,
336337
},
337338

338339
leading: {

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

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,7 @@
44
*/
55

66
import { mix, rgba } from '../../utils/theme';
7-
8-
const hexColors = {
9-
white: '#ffffff',
10-
black: '#000000',
11-
};
12-
13-
const rgbColors = {
14-
white: '255, 255, 255',
15-
black: '0, 0, 0',
16-
};
17-
18-
export const colors = {
19-
...hexColors,
20-
21-
backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
22-
backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
23-
24-
textColor: `var(--ion-text-color, ${hexColors.black})`,
25-
textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
26-
};
27-
28-
export const fontSizes = {
29-
itemDividerBase: 14,
30-
};
7+
import { colors as baseColors } from '../base/shared.tokens';
318

329
export const components = {
3310
item: {
@@ -68,7 +45,7 @@ export const components = {
6845

6946
icon: {
7047
slot: {
71-
color: rgba(colors.textColorRgb, 0.54),
48+
color: rgba(baseColors.textColorRgb, 0.54),
7249

7350
font: {
7451
size: 24,
@@ -153,7 +130,13 @@ export const components = {
153130
},
154131

155132
paragraph: {
156-
color: `var(--ion-text-color-400, ${mix(colors.white, colors.black, '40%')})`,
133+
color: `var(--ion-text-color-400, ${mix(baseColors.white, baseColors.black, '40%')})`,
134+
},
135+
},
136+
137+
itemDivider: {
138+
font: {
139+
size: 14,
157140
},
158141
},
159142
};

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { rgba, currentColor, clamp, mix, dynamicFont } from '../../utils/theme';
22
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
3+
import { colors as baseColors } from '../base/shared.tokens';
34
import type { DefaultTheme } from '../themes.interfaces';
45

56
import { darkTheme } from './dark.tokens';
67
import { highContrastDarkTheme } from './high-contrast-dark.tokens';
78
import { highContrastTheme } from './high-contrast.tokens';
89
import { lightTheme } from './light.tokens';
9-
import { fontSizes, colors, components } from './shared.tokens';
10+
import { global, components } from './shared.tokens';
1011

1112
export const defaultTheme: DefaultTheme = {
1213
...baseDefaultTheme,
@@ -113,7 +114,7 @@ export const defaultTheme: DefaultTheme = {
113114
font: {
114115
size: clamp(
115116
'var(--ion-font-size-xs)',
116-
`${((fontSizes.chipBase - 2) / fontSizes.root).toFixed(2)}rem`,
117+
`${((components.chip.font.size - 2) / global.root).toFixed(2)}rem`,
117118
'var(--ion-font-size-xl)'
118119
),
119120
},
@@ -123,7 +124,7 @@ export const defaultTheme: DefaultTheme = {
123124
minHeight: 'var(--ion-scaling-md)',
124125

125126
font: {
126-
size: clamp('13px', `${(fontSizes.chipBase / fontSizes.root).toFixed(2)}rem`, '22px'),
127+
size: clamp('13px', `${(components.chip.font.size / global.root).toFixed(2)}rem`, '22px'),
127128
},
128129
},
129130
},
@@ -351,7 +352,7 @@ export const defaultTheme: DefaultTheme = {
351352
color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54),
352353

353354
font: {
354-
size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
355+
size: `${(20 / components.chip.font.size).toFixed(2)}em`,
355356
},
356357

357358
// Targets `:first-child`
@@ -376,8 +377,8 @@ export const defaultTheme: DefaultTheme = {
376377
},
377378

378379
avatar: {
379-
height: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
380-
width: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
380+
height: `${(24 / components.chip.font.size).toFixed(2)}em`,
381+
width: `${(24 / components.chip.font.size).toFixed(2)}em`,
381382

382383
// Targets `:first-child`
383384
leading: {
@@ -402,8 +403,8 @@ export const defaultTheme: DefaultTheme = {
402403
},
403404

404405
IonItemDivider: {
405-
background: `var(--ion-background-color-step-100, ${mix(colors.black, colors.white, '90%')})`,
406-
color: `var(--ion-text-color-step-150, ${mix(colors.white, colors.black, '85%')})`,
406+
background: `var(--ion-background-color-step-100, ${mix(baseColors.black, baseColors.white, '90%')})`,
407+
color: `var(--ion-text-color-step-150, ${mix(baseColors.white, baseColors.black, '85%')})`,
407408
minHeight: 'var(--ion-scaling-sm)',
408409

409410
padding: {

‎core/src/themes/ios/shared.tokens.ts‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,17 @@
66
import { dynamicFont } from '../../utils/theme';
77
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
88

9-
const hexColors = {
10-
white: '#ffffff',
11-
black: '#000000',
12-
};
13-
14-
const rgbColors = {
15-
white: '255, 255, 255',
16-
black: '0, 0, 0',
17-
};
18-
19-
export const colors = {
20-
...hexColors,
21-
22-
backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
23-
backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
24-
25-
textColor: `var(--ion-text-color, ${hexColors.black})`,
26-
textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
27-
};
28-
29-
export const fontSizes = {
30-
chipBase: 14,
9+
export const global = {
3110
root: parseFloat(baseDefaultTheme.fontSize!.root as string),
3211
};
3312

3413
export const components = {
14+
chip: {
15+
font: {
16+
size: 14,
17+
},
18+
},
19+
3520
item: {
3621
padding: {
3722
start: 'var(--ion-spacing-lg)',

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { rgba, currentColor, mix, dynamicFont } from '../../utils/theme';
22
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
3+
import { colors as baseColors } from '../base/shared.tokens';
34
import type { DefaultTheme } from '../themes.interfaces';
45

56
import { darkTheme } from './dark.tokens';
67
import { highContrastDarkTheme } from './high-contrast-dark.tokens';
78
import { highContrastTheme } from './high-contrast.tokens';
89
import { lightTheme } from './light.tokens';
9-
import { fontSizes, colors, components } from './shared.tokens';
10+
import { global, components } from './shared.tokens';
1011

1112
export const defaultTheme: DefaultTheme = {
1213
...baseDefaultTheme,
@@ -114,14 +115,14 @@ export const defaultTheme: DefaultTheme = {
114115
minHeight: 'var(--ion-scaling-xs)',
115116

116117
font: {
117-
size: `${((fontSizes.chipBase - 2) / fontSizes.root).toFixed(2)}rem`,
118+
size: `${((components.chip.font.size - 2) / global.root).toFixed(2)}rem`,
118119
},
119120
},
120121
large: {
121122
minHeight: 'var(--ion-scaling-md)',
122123

123124
font: {
124-
size: `${(fontSizes.chipBase / fontSizes.root).toFixed(2)}rem`,
125+
size: `${(components.chip.font.size / global.root).toFixed(2)}rem`,
125126
},
126127
},
127128
},
@@ -349,7 +350,7 @@ export const defaultTheme: DefaultTheme = {
349350
color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54),
350351

351352
font: {
352-
size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
353+
size: `${(20 / components.chip.font.size).toFixed(2)}em`,
353354
},
354355

355356
leading: {
@@ -373,8 +374,8 @@ export const defaultTheme: DefaultTheme = {
373374

374375
// Targets `ion-avatar`
375376
avatar: {
376-
height: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
377-
width: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
377+
height: `${(24 / components.chip.font.size).toFixed(2)}em`,
378+
width: `${(24 / components.chip.font.size).toFixed(2)}em`,
378379

379380
leading: {
380381
margin: {
@@ -397,8 +398,8 @@ export const defaultTheme: DefaultTheme = {
397398
},
398399

399400
IonItemDivider: {
400-
background: `var(--ion-background-color, ${colors.white})`,
401-
color: `var(--ion-text-color-step-600, ${mix(colors.white, colors.black, '40%')})`,
401+
background: baseColors.backgroundColor,
402+
color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
402403
minHeight: 'var(--ion-scaling-750)',
403404
zIndex: 100,
404405

@@ -423,7 +424,7 @@ export const defaultTheme: DefaultTheme = {
423424
},
424425

425426
font: {
426-
size: dynamicFont(fontSizes.itemDividerBase),
427+
size: dynamicFont(components.itemDivider.font.size),
427428
},
428429

429430
leading: {
@@ -465,7 +466,7 @@ export const defaultTheme: DefaultTheme = {
465466
* font size in pixels.
466467
* e.g. 24px / 14px = 1.7142857143em
467468
*/
468-
size: `${components.item.icon.slot.font.size / fontSizes.itemDividerBase}em`,
469+
size: `${components.item.icon.slot.font.size / components.itemDivider.font.size}em`,
469470
},
470471

471472
leading: {

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

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,19 @@
55

66
import { mix, rgba } from '../../utils/theme';
77
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
8+
import { colors as baseColors } from '../base/shared.tokens';
89

9-
const hexColors = {
10-
white: '#ffffff',
11-
black: '#000000',
12-
};
13-
14-
const rgbColors = {
15-
white: '255, 255, 255',
16-
black: '0, 0, 0',
17-
};
18-
19-
export const colors = {
20-
...hexColors,
21-
22-
backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
23-
backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
24-
25-
textColor: `var(--ion-text-color, ${hexColors.black})`,
26-
textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
27-
};
28-
29-
export const fontSizes = {
30-
chipBase: 14,
10+
export const global = {
3111
root: parseFloat(baseDefaultTheme.fontSize!.root as string),
32-
itemDividerBase: 14,
3312
};
3413

3514
export const components = {
15+
chip: {
16+
font: {
17+
size: 14,
18+
},
19+
},
20+
3621
item: {
3722
padding: {
3823
start: 'var(--ion-spacing-lg)',
@@ -46,7 +31,7 @@ export const components = {
4631

4732
border: {
4833
color: `var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, ${rgba(
49-
'0, 0, 0',
34+
baseColors.textColorRgb,
5035
0.13
5136
)})))`,
5237
},
@@ -71,7 +56,7 @@ export const components = {
7156

7257
icon: {
7358
slot: {
74-
color: rgba(colors.textColorRgb, 0.54),
59+
color: rgba(baseColors.textColorRgb, 0.54),
7560

7661
font: {
7762
size: 24,
@@ -156,7 +141,13 @@ export const components = {
156141
},
157142

158143
paragraph: {
159-
color: `var(--ion-text-color-400, ${mix(colors.white, colors.black, '40%')})`,
144+
color: `var(--ion-text-color-400, ${mix(baseColors.white, baseColors.black, '40%')})`,
160145
},
161146
},
147+
148+
itemDivider: {
149+
font: {
150+
size: 14,
151+
}
152+
}
162153
};

0 commit comments

Comments
 (0)