javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tokens): rearrange shared tokens

Browse Source
This commit is contained in:
Maria Hutt
2026-03-12 11:01:57 -07:00
parent 4b170f0303
commit c66561e38b
7 changed files with 82 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
core/src/themes/base/shared.tokens.ts Normal file
View File

@@ -0,0 +1,23 @@
/**
* Tokens shared between the theme files.
*/
const hexColors = {
white: '#ffffff',
black: '#000000',
};
const rgbColors = {
white: '255, 255, 255',
black: '0, 0, 0',
};
export const colors = {
...hexColors,
backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
textColor: `var(--ion-text-color, ${hexColors.black})`,
textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
};

11
core/src/themes/ionic/default.tokens.ts
View File

@@ -1,10 +1,11 @@
import { currentColor, mix, dynamicFont } from '../../utils/theme';
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
import { colors as baseColors } from '../base/shared.tokens';
import type { DefaultTheme } from '../themes.interfaces';
import { darkTheme } from './dark.tokens';
import { lightTheme } from './light.tokens';
import { fontSizes, colors, components } from './shared.tokens';
import { components } from './shared.tokens';
export const defaultTheme: DefaultTheme = {
...baseDefaultTheme,
@@ -264,8 +265,8 @@ export const defaultTheme: DefaultTheme = {
},
IonItemDivider: {
background: `var(--ion-background-color, ${colors.white})`,
color: `var(--ion-text-color-step-600, ${mix(colors.white, colors.black, '40%')})`,
background: baseColors.backgroundColor,
color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
minHeight: 'var(--ion-scaling-750)',
zIndex: 100,
@@ -290,7 +291,7 @@ export const defaultTheme: DefaultTheme = {
},
font: {
size: dynamicFont(fontSizes.itemDividerBase),
size: dynamicFont(components.itemDivider.font.size),
},
leading: {
@@ -332,7 +333,7 @@ export const defaultTheme: DefaultTheme = {
* font size in pixels.
* e.g. 24px / 14px = 1.7142857143em
*/
size: `${components.item.icon.slot.font.size / fontSizes.itemDividerBase}em`,
size: `${components.item.icon.slot.font.size / components.itemDivider.font.size}em`,
},
leading: {

35
core/src/themes/ionic/shared.tokens.ts
View File

@@ -4,30 +4,7 @@
*/
import { mix, rgba } from '../../utils/theme';
const hexColors = {
white: '#ffffff',
black: '#000000',
};
const rgbColors = {
white: '255, 255, 255',
black: '0, 0, 0',
};
export const colors = {
...hexColors,
backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
textColor: `var(--ion-text-color, ${hexColors.black})`,
textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
};
export const fontSizes = {
itemDividerBase: 14,
};
import { colors as baseColors } from '../base/shared.tokens';
export const components = {
item: {
@@ -68,7 +45,7 @@ export const components = {
icon: {
slot: {
color: rgba(colors.textColorRgb, 0.54),
color: rgba(baseColors.textColorRgb, 0.54),
font: {
size: 24,
@@ -153,7 +130,13 @@ export const components = {
},
paragraph: {
color: `var(--ion-text-color-400, ${mix(colors.white, colors.black, '40%')})`,
color: `var(--ion-text-color-400, ${mix(baseColors.white, baseColors.black, '40%')})`,
},
},
itemDivider: {
font: {
size: 14,
},
},
};

17
core/src/themes/ios/default.tokens.ts
View File

@@ -1,12 +1,13 @@
import { rgba, currentColor, clamp, mix, dynamicFont } from '../../utils/theme';
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
import { colors as baseColors } from '../base/shared.tokens';
import type { DefaultTheme } from '../themes.interfaces';
import { darkTheme } from './dark.tokens';
import { highContrastDarkTheme } from './high-contrast-dark.tokens';
import { highContrastTheme } from './high-contrast.tokens';
import { lightTheme } from './light.tokens';
import { fontSizes, colors, components } from './shared.tokens';
import { global, components } from './shared.tokens';
export const defaultTheme: DefaultTheme = {
...baseDefaultTheme,
@@ -113,7 +114,7 @@ export const defaultTheme: DefaultTheme = {
font: {
size: clamp(
'var(--ion-font-size-xs)',
`${((fontSizes.chipBase - 2) / fontSizes.root).toFixed(2)}rem`,
`${((components.chip.font.size - 2) / global.root).toFixed(2)}rem`,
'var(--ion-font-size-xl)'
),
},
@@ -123,7 +124,7 @@ export const defaultTheme: DefaultTheme = {
minHeight: 'var(--ion-scaling-md)',
font: {
size: clamp('13px', `${(fontSizes.chipBase / fontSizes.root).toFixed(2)}rem`, '22px'),
size: clamp('13px', `${(components.chip.font.size / global.root).toFixed(2)}rem`, '22px'),
},
},
},
@@ -351,7 +352,7 @@ export const defaultTheme: DefaultTheme = {
color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54),
font: {
size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
size: `${(20 / components.chip.font.size).toFixed(2)}em`,
},
// Targets `:first-child`
@@ -376,8 +377,8 @@ export const defaultTheme: DefaultTheme = {
},
avatar: {
height: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
width: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
height: `${(24 / components.chip.font.size).toFixed(2)}em`,
width: `${(24 / components.chip.font.size).toFixed(2)}em`,
// Targets `:first-child`
leading: {
@@ -402,8 +403,8 @@ export const defaultTheme: DefaultTheme = {
},
IonItemDivider: {
background: `var(--ion-background-color-step-100, ${mix(colors.black, colors.white, '90%')})`,
color: `var(--ion-text-color-step-150, ${mix(colors.white, colors.black, '85%')})`,
background: `var(--ion-background-color-step-100, ${mix(baseColors.black, baseColors.white, '90%')})`,
color: `var(--ion-text-color-step-150, ${mix(baseColors.white, baseColors.black, '85%')})`,
minHeight: 'var(--ion-scaling-sm)',
padding: {

29
core/src/themes/ios/shared.tokens.ts
View File

@@ -6,32 +6,17 @@
import { dynamicFont } from '../../utils/theme';
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
const hexColors = {
white: '#ffffff',
black: '#000000',
};
const rgbColors = {
white: '255, 255, 255',
black: '0, 0, 0',
};
export const colors = {
...hexColors,
backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
textColor: `var(--ion-text-color, ${hexColors.black})`,
textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
};
export const fontSizes = {
chipBase: 14,
export const global = {
root: parseFloat(baseDefaultTheme.fontSize!.root as string),
};
export const components = {
chip: {
font: {
size: 14,
},
},
item: {
padding: {
start: 'var(--ion-spacing-lg)',

21
core/src/themes/md/default.tokens.ts
View File

@@ -1,12 +1,13 @@
import { rgba, currentColor, mix, dynamicFont } from '../../utils/theme';
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
import { colors as baseColors } from '../base/shared.tokens';
import type { DefaultTheme } from '../themes.interfaces';
import { darkTheme } from './dark.tokens';
import { highContrastDarkTheme } from './high-contrast-dark.tokens';
import { highContrastTheme } from './high-contrast.tokens';
import { lightTheme } from './light.tokens';
import { fontSizes, colors, components } from './shared.tokens';
import { global, components } from './shared.tokens';
export const defaultTheme: DefaultTheme = {
...baseDefaultTheme,
@@ -114,14 +115,14 @@ export const defaultTheme: DefaultTheme = {
minHeight: 'var(--ion-scaling-xs)',
font: {
size: `${((fontSizes.chipBase - 2) / fontSizes.root).toFixed(2)}rem`,
size: `${((components.chip.font.size - 2) / global.root).toFixed(2)}rem`,
},
},
large: {
minHeight: 'var(--ion-scaling-md)',
font: {
size: `${(fontSizes.chipBase / fontSizes.root).toFixed(2)}rem`,
size: `${(components.chip.font.size / global.root).toFixed(2)}rem`,
},
},
},
@@ -349,7 +350,7 @@ export const defaultTheme: DefaultTheme = {
color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54),
font: {
size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
size: `${(20 / components.chip.font.size).toFixed(2)}em`,
},
leading: {
@@ -373,8 +374,8 @@ export const defaultTheme: DefaultTheme = {
// Targets `ion-avatar`
avatar: {
height: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
width: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
height: `${(24 / components.chip.font.size).toFixed(2)}em`,
width: `${(24 / components.chip.font.size).toFixed(2)}em`,
leading: {
margin: {
@@ -397,8 +398,8 @@ export const defaultTheme: DefaultTheme = {
},
IonItemDivider: {
background: `var(--ion-background-color, ${colors.white})`,
color: `var(--ion-text-color-step-600, ${mix(colors.white, colors.black, '40%')})`,
background: baseColors.backgroundColor,
color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
minHeight: 'var(--ion-scaling-750)',
zIndex: 100,
@@ -423,7 +424,7 @@ export const defaultTheme: DefaultTheme = {
},
font: {
size: dynamicFont(fontSizes.itemDividerBase),
size: dynamicFont(components.itemDivider.font.size),
},
leading: {
@@ -465,7 +466,7 @@ export const defaultTheme: DefaultTheme = {
* font size in pixels.
* e.g. 24px / 14px = 1.7142857143em
*/
size: `${components.item.icon.slot.font.size / fontSizes.itemDividerBase}em`,
size: `${components.item.icon.slot.font.size / components.itemDivider.font.size}em`,
},
leading: {

43
core/src/themes/md/shared.tokens.ts
View File

@@ -5,34 +5,19 @@
import { mix, rgba } from '../../utils/theme';
import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
import { colors as baseColors } from '../base/shared.tokens';
const hexColors = {
white: '#ffffff',
black: '#000000',
};
const rgbColors = {
white: '255, 255, 255',
black: '0, 0, 0',
};
export const colors = {
...hexColors,
backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
textColor: `var(--ion-text-color, ${hexColors.black})`,
textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
};
export const fontSizes = {
chipBase: 14,
export const global = {
root: parseFloat(baseDefaultTheme.fontSize!.root as string),
itemDividerBase: 14,
};
export const components = {
chip: {
font: {
size: 14,
},
},
item: {
padding: {
start: 'var(--ion-spacing-lg)',
@@ -46,7 +31,7 @@ export const components = {
border: {
color: `var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, ${rgba(
'0, 0, 0',
baseColors.textColorRgb,
0.13
)})))`,
},
@@ -71,7 +56,7 @@ export const components = {
icon: {
slot: {
color: rgba(colors.textColorRgb, 0.54),
color: rgba(baseColors.textColorRgb, 0.54),
font: {
size: 24,
@@ -156,7 +141,13 @@ export const components = {
},
paragraph: {
color: `var(--ion-text-color-400, ${mix(colors.white, colors.black, '40%')})`,
color: `var(--ion-text-color-400, ${mix(baseColors.white, baseColors.black, '40%')})`,
},
},
itemDivider: {
font: {
size: 14,
}
}
};