Skip to content

Commit

Permalink
[typography] Add a variants key in the theme
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Jun 11, 2018
1 parent edc57a9 commit 63f4f15
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 2 deletions.
2 changes: 0 additions & 2 deletions packages/material-ui/src/Grid/Grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,8 @@ function generateGrid(globalStyles, theme, breakpoint) {
// Only keep 6 significant numbers.
const width = `${Math.round((size / 12) * 10e6) / 10e4}%`;

/* eslint-disable max-len */
// Close to the bootstrap implementation:
// https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
/* eslint-enable max-len */
styles[key] = {
flexBasis: width,
flexGrow: 0,
Expand Down
13 changes: 13 additions & 0 deletions packages/material-ui/src/styles/createTypography.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export default function createTypography(palette: Object, typography: Object | F
// Tell Material-UI what's the font-size on the html element.
// 16px is the default font-size used by browsers.
htmlFontSize = 16,
// Apply the CSS properties to all the variants.
allVariants,
...other
} =
typeof typography === 'function' ? typography(palette) : typography;
Expand All @@ -43,6 +45,7 @@ export default function createTypography(palette: Object, typography: Object | F
lineHeight: `${round(128 / 112)}em`,
marginLeft: '-.04em',
color: palette.text.secondary,
...allVariants,
},
display3: {
fontSize: pxToRem(56),
Expand All @@ -52,6 +55,7 @@ export default function createTypography(palette: Object, typography: Object | F
lineHeight: `${round(73 / 56)}em`,
marginLeft: '-.02em',
color: palette.text.secondary,
...allVariants,
},
display2: {
fontSize: pxToRem(45),
Expand All @@ -60,62 +64,71 @@ export default function createTypography(palette: Object, typography: Object | F
lineHeight: `${round(48 / 45)}em`,
marginLeft: '-.02em',
color: palette.text.secondary,
...allVariants,
},
display1: {
fontSize: pxToRem(34),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(41 / 34)}em`,
color: palette.text.secondary,
...allVariants,
},
headline: {
fontSize: pxToRem(24),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(32.5 / 24)}em`,
color: palette.text.primary,
...allVariants,
},
title: {
fontSize: pxToRem(21),
fontWeight: fontWeightMedium,
fontFamily,
lineHeight: `${round(24.5 / 21)}em`,
color: palette.text.primary,
...allVariants,
},
subheading: {
fontSize: pxToRem(16),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(24 / 16)}em`,
color: palette.text.primary,
...allVariants,
},
body2: {
fontSize: pxToRem(14),
fontWeight: fontWeightMedium,
fontFamily,
lineHeight: `${round(24 / 14)}em`,
color: palette.text.primary,
...allVariants,
},
body1: {
fontSize: pxToRem(14),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(20.5 / 14)}em`,
color: palette.text.primary,
...allVariants,
},
caption: {
fontSize: pxToRem(12),
fontWeight: fontWeightRegular,
fontFamily,
lineHeight: `${round(16.5 / 12)}em`,
color: palette.text.secondary,
...allVariants,
},
button: {
fontSize: pxToRem(14),
textTransform: 'uppercase',
fontWeight: fontWeightMedium,
fontFamily,
color: palette.text.primary,
...allVariants,
},
},
other,
Expand Down
21 changes: 21 additions & 0 deletions packages/material-ui/src/styles/createTypography.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,25 @@ describe('createTypography', () => {
const typography = createTypography(palette, { display4: { fontSize: customFontSize } });
assert.strictEqual(typography.display4.fontSize, customFontSize);
});

it('should apply a CSS property to all the variants', () => {
const typography = createTypography(palette, { allVariants: { marginLeft: 0 } });
const allVariants = [
'display4',
'display3',
'display2',
'display1',
'headline',
'title',
'subheading',
'body2',
'body1',
'caption',
'button',
];

allVariants.forEach(variant => {
assert.strictEqual(typography[variant].marginLeft, 0);
});
});
});

0 comments on commit 63f4f15

Please sign in to comment.