@ionic-internal/ionic-ds
Version:
Ionic Design System
86 lines (83 loc) • 2.32 kB
JavaScript
import { space, fontFamilies, fontSizes, lineHeights, letterSpacings, fontWeights, colors } from '../../tokens/tokens.json.js';
const headingStyleMap = {
1: {
marginBlockEnd: space['24'],
font: fontFamilies.display,
size: fontSizes['64'],
lineHeight: lineHeights.solid,
letterSpacing: letterSpacings.dense,
fontWeight: fontWeights.bold,
color: colors.carbon['100'],
poster: {
lineHeight: '92%',
marginBlockEnd: space['24'],
size: fontSizes['96']
}
},
2: {
marginBlockEnd: space['24'],
font: fontFamilies.display,
size: fontSizes['48'],
lineHeight: lineHeights.title,
letterSpacing: letterSpacings.dense,
fontWeight: fontWeights.bold,
color: colors.carbon['100'],
poster: {
marginBlockEnd: space['24'],
size: fontSizes['88'],
lineHeight: lineHeights.solid
}
},
3: {
marginBlockEnd: space['12'],
font: fontFamilies.display,
size: fontSizes['28'],
lineHeight: lineHeights.title,
letterSpacing: letterSpacings.tight,
fontWeight: fontWeights.bold,
color: colors.carbon['100'],
poster: {
marginBlockEnd: space['24'],
size: fontSizes['80'],
lineHeight: lineHeights.solid,
letterSpacing: letterSpacings.dense
}
},
4: {
marginBlockEnd: space['12'],
font: fontFamilies.text,
size: fontSizes['20'],
lineHeight: lineHeights.title,
letterSpacing: letterSpacings.tight,
fontWeight: fontWeights.medium,
color: colors.carbon['100'],
poster: {
marginBlockEnd: space['24'],
font: fontFamilies.display,
size: fontSizes['72'],
lineHeight: lineHeights.solid,
letterSpacing: letterSpacings.dense,
fontWeight: fontWeights.bold
}
},
5: {
marginBlockEnd: space['8'],
font: fontFamilies.text,
size: fontSizes['16'],
lineHeight: lineHeights.title,
letterSpacing: letterSpacings.tight,
fontWeight: fontWeights.semibold,
color: colors.carbon['100']
},
6: {
marginBlockEnd: space['24'],
font: fontFamilies.monospace,
size: fontSizes['12'],
lineHeight: lineHeights.title,
letterSpacing: letterSpacings.extra,
fontWeight: fontWeights.bold,
color: colors.indigo['70'],
transform: 'uppercase'
}
};
export default headingStyleMap;