diff --git a/CHANGELOG.md b/CHANGELOG.md
index 886160c3a..2a608a8d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
## Not released
+- New typography toolkit for MUI carto-theme [#498](https://github.com/CartoDB/carto-react/pull/498/)
- New color palette for MUI carto-theme [#496](https://github.com/CartoDB/carto-react/pull/496/)
- Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495)
- Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488)
diff --git a/UPGRADE.md b/UPGRADE.md
index 43f350441..8d4987aca 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -14,6 +14,12 @@ Also added some files for shared constants (`themeConstants.js`) and useful func
Removed unused custom `createTheme` function in `carto-theme.js`.
+# Typography
+
+`responsiveFontSizes` simplified due we want to resize only a few variants through the theme.
+
+Added several custom variants to the typography set. Note that MUI v5 is needed to register them properly.
+
## Colors
Keys renamed:
diff --git a/packages/react-ui/__tests__/widgets/testUtils.js b/packages/react-ui/__tests__/widgets/testUtils.js
index 1e01f73c5..49407d9a4 100644
--- a/packages/react-ui/__tests__/widgets/testUtils.js
+++ b/packages/react-ui/__tests__/widgets/testUtils.js
@@ -24,24 +24,9 @@ export function getMaterialUIContext(children) {
function getTheme() {
let theme = createTheme(cartoThemeOptions);
theme = responsiveFontSizes(theme, {
- breakpoints: cartoThemeOptions.breakpoints.keys,
+ breakpoints: ['sm'],
disableAlign: false,
- factor: 2,
- variants: [
- 'h1',
- 'h2',
- 'h3',
- 'h4',
- 'h5',
- 'h6',
- 'subtitle1',
- 'subtitle2',
- 'body1',
- 'body2',
- 'button',
- 'caption',
- 'overline'
- ]
+ factor: 2
});
return theme;
}
diff --git a/packages/react-ui/src/theme/sections/typography.js b/packages/react-ui/src/theme/sections/typography.js
index 2e8404530..5eb1f9655 100644
--- a/packages/react-ui/src/theme/sections/typography.js
+++ b/packages/react-ui/src/theme/sections/typography.js
@@ -1,6 +1,8 @@
-export const themeTypography = {
+import { getPixelToRem } from '../themeUtils';
+
+const baseTypography = {
htmlFontSize: 16,
- fontFamily: 'Montserrat, sans-serif',
+ fontFamily: 'Inter, sans-serif',
fontSize: 16,
lineHeight: 1.5,
fontWeightLight: 300,
@@ -9,117 +11,191 @@ export const themeTypography = {
fontWeightBold: 600,
fontSmoothing: 'antialiased',
h1: {
- fontFamily: 'Montserrat, sans-serif',
+ fontFamily: 'Inter, sans-serif',
fontWeight: 600,
- fontSize: '6rem',
- lineHeight: 1.084,
- letterSpacing: '-0.016em',
- fontSmoothing: 'antialiased'
+ fontSize: getPixelToRem(96),
+ lineHeight: 1.167,
+ letterSpacing: '-1.5px'
},
h2: {
- fontFamily: 'Montserrat, sans-serif',
+ fontFamily: 'Inter, sans-serif',
fontWeight: 600,
- fontSize: '4rem',
- lineHeight: 1.125,
- letterSpacing: '-0.008em',
- fontSmoothing: 'antialiased'
+ fontSize: getPixelToRem(60),
+ lineHeight: 1.2,
+ letterSpacing: '-0.5px'
},
h3: {
- fontFamily: 'Montserrat, sans-serif',
+ fontFamily: 'Inter, sans-serif',
fontWeight: 600,
- fontSize: '3rem',
+ fontSize: getPixelToRem(48),
lineHeight: 1.167,
- letterSpacing: '0em',
- fontSmoothing: 'antialiased'
+ letterSpacing: 0
},
h4: {
- fontFamily: 'Montserrat, sans-serif',
+ fontFamily: 'Inter, sans-serif',
fontWeight: 600,
- fontSize: '2.125rem',
- lineHeight: 1.177,
- letterSpacing: '0.007em',
- fontSmoothing: 'antialiased'
+ fontSize: getPixelToRem(32),
+ lineHeight: 1.25,
+ letterSpacing: '0.15px'
},
h5: {
- fontFamily: 'Montserrat, sans-serif',
+ fontFamily: 'Inter, sans-serif',
fontWeight: 600,
- fontSize: '1.5rem',
- lineHeight: 1.334,
- letterSpacing: '0em',
- fontSmoothing: 'antialiased'
+ fontSize: getPixelToRem(24),
+ lineHeight: 1.167,
+ letterSpacing: '0.15px'
},
h6: {
- fontFamily: 'Montserrat, sans-serif',
- fontWeight: 600,
- fontSize: '1.25rem',
- lineHeight: 1.2,
- letterSpacing: '0.007em',
- fontSmoothing: 'antialiased'
+ fontFamily: 'Inter, sans-serif',
+ fontWeight: 500,
+ fontSize: getPixelToRem(18),
+ lineHeight: 1.333,
+ letterSpacing: '0.15px'
},
subtitle1: {
- fontFamily: 'Montserrat, sans-serif',
- fontWeight: 600,
- fontSize: '1rem',
+ fontFamily: 'Inter, sans-serif',
+ fontWeight: 500,
+ fontSize: getPixelToRem(16),
lineHeight: 1.5,
- letterSpacing: '0.009em',
- fontSmoothing: 'antialiased'
+ letterSpacing: '0.15px'
},
subtitle2: {
- fontFamily: '"Open Sans", sans-serif',
+ fontFamily: 'Inter, sans-serif',
fontWeight: 600,
- fontSize: '0.875rem',
- lineHeight: 1.715,
- letterSpacing: '0.007em',
- fontSmoothing: 'antialiased'
+ fontSize: getPixelToRem(13),
+ lineHeight: 1.538,
+ letterSpacing: '0.1px'
},
body1: {
- fontFamily: '"Open Sans", sans-serif',
+ fontFamily: 'Inter, sans-serif',
fontWeight: 400,
- fontSize: '1rem',
+ fontSize: getPixelToRem(16),
lineHeight: 1.5,
- letterSpacing: '0.028em',
- fontSmoothing: 'antialiased'
+ letterSpacing: '0.4px'
},
body2: {
- fontFamily: '"Open Sans", sans-serif',
+ fontFamily: 'Inter, sans-serif',
fontWeight: 400,
- fontSize: '0.875rem',
- lineHeight: 1.429,
- letterSpacing: '0.018em',
- fontSmoothing: 'antialiased'
+ fontSize: getPixelToRem(13),
+ lineHeight: 1.538,
+ letterSpacing: '0.25px'
},
button: {
- fontFamily: 'Montserrat, sans-serif',
- fontWeight: 600,
- fontSize: '0.875rem',
- lineHeight: 1.715,
- letterSpacing: '0.018em',
- textTransform: 'inherit',
- fontSmoothing: 'antialiased'
+ fontFamily: 'Inter, sans-serif',
+ fontWeight: 500,
+ fontSize: getPixelToRem(13),
+ lineHeight: 1.538,
+ letterSpacing: '0.25px',
+ textTransform: 'inherit'
},
caption: {
- fontFamily: '"Open Sans", sans-serif',
- fontWeight: 600,
- fontSize: '0.75rem',
- lineHeight: 1.334,
- letterSpacing: '0.017em',
- fontSmoothing: 'antialiased'
+ fontFamily: 'Inter, sans-serif',
+ fontWeight: 400,
+ fontSize: getPixelToRem(11),
+ lineHeight: 1.454,
+ letterSpacing: '0.2px'
},
overline: {
- fontFamily: '"Open Sans", sans-serif',
+ fontFamily: '"Overpass Mono", monospace',
+ fontWeight: 600,
+ fontSize: getPixelToRem(10),
+ lineHeight: 1.2,
+ letterSpacing: '2px',
+ textTransform: 'uppercase'
+ }
+};
+
+const customTypography = {
+ // TODO: Create a wrapper for the Typography component to reduce the number of variants https://app.shortcut.com/cartoteam/story/265549/
+ body1Italic: {
+ ...baseTypography.body1,
+ fontStyle: 'italic'
+ },
+ body1Strong: {
+ ...baseTypography.body1,
+ fontWeight: 600
+ },
+ body1StrongItalic: {
+ ...baseTypography.body1,
+ fontWeight: 600,
+ fontStyle: 'italic'
+ },
+ body2Italic: {
+ ...baseTypography.body2,
+ fontStyle: 'italic'
+ },
+ body2Strong: {
+ ...baseTypography.body2,
+ fontWeight: 600
+ },
+ body2StrongItalic: {
+ ...baseTypography.body2,
+ fontWeight: 600,
+ fontStyle: 'italic'
+ },
+ captionItalic: {
+ ...baseTypography.caption,
+ fontStyle: 'italic'
+ },
+ captionStrong: {
+ ...baseTypography.caption,
+ fontWeight: 500
+ },
+ captionStrongItalic: {
+ ...baseTypography.caption,
+ fontWeight: 500,
+ fontStyle: 'italic'
+ },
+ overlineDelicate: {
+ ...baseTypography.overline,
+ fontWeight: 400,
+ letterSpacing: '1.2px'
+ },
+ code1: {
+ fontFamily: '"Overpass Mono", monospace',
+ fontWeight: 400,
+ fontSize: getPixelToRem(16),
+ lineHeight: 1.5,
+ letterSpacing: 0
+ },
+ code1Strong: {
+ fontFamily: '"Overpass Mono", monospace',
+ fontWeight: 600,
+ fontSize: getPixelToRem(16),
+ lineHeight: 1.5,
+ letterSpacing: 0
+ },
+ code2: {
+ fontFamily: '"Overpass Mono", monospace',
fontWeight: 400,
- fontSize: '0.625rem',
- lineHeight: 1.6,
- letterSpacing: '0.150em',
- textTransform: 'uppercase',
- fontSmoothing: 'antialiased'
- },
- charts: {
- fontFamily: '"Open Sans", sans-serif',
+ fontSize: getPixelToRem(14),
+ lineHeight: 1.428,
+ letterSpacing: 0
+ },
+ code2Strong: {
+ fontFamily: '"Overpass Mono", monospace',
+ fontWeight: 600,
+ fontSize: getPixelToRem(14),
+ lineHeight: 1.428,
+ letterSpacing: 0
+ },
+ code3: {
+ fontFamily: '"Overpass Mono", monospace',
fontWeight: 400,
- fontSize: 10,
- lineHeight: 1.6,
- letterSpacing: '0.150em',
- fontSmoothing: 'antialiased'
+ fontSize: getPixelToRem(12),
+ lineHeight: 1.333,
+ letterSpacing: 0
+ },
+ code3Strong: {
+ fontFamily: '"Overpass Mono", monospace',
+ fontWeight: 600,
+ fontSize: getPixelToRem(12),
+ lineHeight: 1.333,
+ letterSpacing: 0
}
};
+
+export const themeTypography = {
+ ...baseTypography,
+ ...customTypography
+};
diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js
index 488ff5801..bcfba3122 100644
--- a/packages/react-ui/src/theme/themeUtils.js
+++ b/packages/react-ui/src/theme/themeUtils.js
@@ -2,3 +2,11 @@ import createSpacing from '@material-ui/core/styles/createSpacing';
import { SPACING } from './themeConstants';
export const spacing = createSpacing(SPACING);
+
+// Convert pixels to rem
+export function getPixelToRem(px) {
+ const fontBase = 16;
+ const rem = (1 / fontBase) * px + 'rem';
+
+ return rem;
+}
diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js
index e89b42e4c..96a097bc0 100644
--- a/packages/react-ui/src/widgets/BarWidgetUI.js
+++ b/packages/react-ui/src/widgets/BarWidgetUI.js
@@ -101,7 +101,7 @@ function BarWidgetUI(props) {
show: false
},
axisLabel: {
- ...theme.typography.charts,
+ ...theme.typography.overlineDelicate,
padding: [theme.spacing(0.5), 0, 0, 0]
},
data: xAxisDataWithLabels
@@ -132,14 +132,14 @@ function BarWidgetUI(props) {
axisLabel: {
margin: 0,
verticalAlign: 'bottom',
- padding: [0, 0, theme.typography.charts.fontSize, 0],
+ padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0],
show: true,
showMaxLabel: true,
showMinLabel: false,
inside: true,
color: (value) =>
value >= maxValue ? theme.palette.charts.maxLabel : 'transparent',
- ...theme.typography.charts,
+ ...theme.typography.overlineDelicate,
formatter: (v) => processFormatterRes(yAxisFormatter(v))
},
axisLine: {
@@ -160,7 +160,7 @@ function BarWidgetUI(props) {
maxValue,
theme.palette.charts.axisLine,
theme.palette.charts.maxLabel,
- theme.typography.charts,
+ theme.typography.overlineDelicate,
yAxisFormatter
]
);
diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
index 9d0e87cad..a52298fac 100644
--- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
+++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
@@ -107,7 +107,7 @@ function HistogramWidgetUI({
axisLabel: {
showMinLabel: true,
showMaxLabel: true,
- ...theme.typography.charts,
+ ...theme.typography.overlineDelicate,
hideOverlap: true,
padding: [theme.spacing(0.5), theme.spacing(0.5), 0, theme.spacing(0.5)],
formatter: (value) => {
@@ -143,7 +143,7 @@ function HistogramWidgetUI({
axisLabel: {
margin: 0,
verticalAlign: 'bottom',
- padding: [0, 0, theme.typography.charts.fontSize, 0],
+ padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0],
show: true,
showMaxLabel: true,
showMinLabel: false,
@@ -158,14 +158,14 @@ function HistogramWidgetUI({
return col;
},
- ...theme.typography.charts,
+ ...theme.typography.overlineDelicate,
formatter: (v) => processFormatterRes(yAxisFormatter(v))
}
}),
[
theme.palette.charts.axisLine,
theme.palette.charts.maxLabel,
- theme.typography.charts,
+ theme.typography.overlineDelicate,
data,
yAxisFormatter
]
@@ -346,7 +346,9 @@ function defaultTooltipFormatter(params, xAxisFormatter, yAxisFormatter) {
}
const [left, right, value] = params.data.value;
- const title = `${processFormatterRes(xAxisFormatter(left))} — ${processFormatterRes(
+ const title = `${processFormatterRes(
+ xAxisFormatter(left)
+ )} — ${processFormatterRes(
xAxisFormatter(right)
)}`;
const formattedValue = processFormatterRes(yAxisFormatter(value));
diff --git a/packages/react-ui/src/widgets/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI.js
index 0849a6a64..bf9e54a99 100644
--- a/packages/react-ui/src/widgets/PieWidgetUI.js
+++ b/packages/react-ui/src/widgets/PieWidgetUI.js
@@ -69,7 +69,7 @@ function PieWidgetUI({
// TODO: as prop?
formatter: (name) => name.toUpperCase(),
textStyle: {
- ...theme.typography.charts,
+ ...theme.typography.overlineDelicate,
color: theme.palette.text.primary,
lineHeight: 1,
verticalAlign: 'bottom',
@@ -86,7 +86,7 @@ function PieWidgetUI({
pageIconColor: theme.palette.text.secondary,
pageIconInactiveColor: theme.palette.text.disabled,
pageTextStyle: {
- fontFamily: theme.typography.charts.fontFamily,
+ fontFamily: theme.typography.overlineDelicate.fontFamily,
fontSize: theme.spacing(1.5),
lineHeight: theme.spacing(1.75),
fontWeight: 'normal',
@@ -103,7 +103,7 @@ function PieWidgetUI({
position: 'center',
rich: {
b: {
- fontFamily: theme.typography.charts.fontFamily,
+ fontFamily: theme.typography.overlineDelicate.fontFamily,
fontSize: theme.spacing(1.75),
lineHeight: theme.spacing(1.75),
fontWeight: 'normal',
@@ -133,7 +133,7 @@ function PieWidgetUI({
const disabled =
selectedCategories?.length && !selectedCategories.includes(clonedItem.name);
-
+
if (labels?.[clonedItem.name]) {
clonedItem.name = labels[clonedItem.name];
}
diff --git a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js
index 57ae11bee..4a5038c2f 100644
--- a/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js
+++ b/packages/react-ui/src/widgets/ScatterPlotWidgetUI.js
@@ -30,7 +30,7 @@ function __generateDefaultConfig(
color: [theme.palette.secondary.main],
xAxis: {
axisLabel: {
- ...theme.typography.charts,
+ ...theme.typography.overlineDelicate,
padding: [theme.spacing(0.5), 0, 0, 0],
formatter: (v) => {
const formatted = xAxisFormatter(v);
@@ -42,7 +42,7 @@ function __generateDefaultConfig(
},
yAxis: {
axisLabel: {
- ...theme.typography.charts,
+ ...theme.typography.overlineDelicate,
formatter: (v) => {
const formatted = yAxisFormatter(v);
return typeof formatted === 'object'
diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js
index 69d4d52f4..bee481302 100644
--- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js
+++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js
@@ -88,7 +88,7 @@ export default function TimeSeriesChart({
axisLabel: {
margin: 0,
verticalAlign: 'bottom',
- padding: [0, 0, theme.typography.charts.fontSize, 0],
+ padding: [0, 0, theme.typography.overlineDelicate.fontSize, 0],
show: true,
showMaxLabel: true,
showMinLabel: false,
@@ -103,7 +103,7 @@ export default function TimeSeriesChart({
return col;
},
...(formatter ? { formatter: (v) => formatter(v) } : {}),
- ...theme.typography.charts
+ ...theme.typography.overlineDelicate
},
axisLine: {
show: false
diff --git a/packages/react-ui/storybook/.storybook/preview-head.html b/packages/react-ui/storybook/.storybook/preview-head.html
index b47f9fc3c..bb7fa8289 100644
--- a/packages/react-ui/storybook/.storybook/preview-head.html
+++ b/packages/react-ui/storybook/.storybook/preview-head.html
@@ -1,2 +1,6 @@
-
-
\ No newline at end of file
+
+
+
diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js
index fabb13e29..1cdf0617c 100644
--- a/packages/react-ui/storybook/.storybook/preview.js
+++ b/packages/react-ui/storybook/.storybook/preview.js
@@ -5,24 +5,9 @@ import { cartoThemeOptions } from '../../src/theme/carto-theme';
let theme = createTheme(cartoThemeOptions);
theme = responsiveFontSizes(theme, {
- breakpoints: cartoThemeOptions.breakpoints.keys,
+ breakpoints: ['sm'],
disableAlign: false,
- factor: 2,
- variants: [
- 'h1',
- 'h2',
- 'h3',
- 'h4',
- 'h5',
- 'h6',
- 'subtitle1',
- 'subtitle2',
- 'body1',
- 'body2',
- 'button',
- 'caption',
- 'overline'
- ]
+ factor: 2
});
export const decorators = [
diff --git a/packages/react-ui/storybook/stories/common/Typography.stories.js b/packages/react-ui/storybook/stories/common/Typography.stories.js
index 53115b0ca..2acff78cd 100644
--- a/packages/react-ui/storybook/stories/common/Typography.stories.js
+++ b/packages/react-ui/storybook/stories/common/Typography.stories.js
@@ -21,7 +21,23 @@ const options = {
'body2',
'button',
'caption',
- 'overline'
+ 'overline',
+ 'body1Italic',
+ 'body1Strong',
+ 'body1StrongItalic',
+ 'body2Italic',
+ 'body2Strong',
+ 'body2StrongItalic',
+ 'captionItalic',
+ 'captionStrong',
+ 'captionStrongItalic',
+ 'overlineDelicate',
+ 'code1',
+ 'code1Strong',
+ 'code2',
+ 'code2Strong',
+ 'code3',
+ 'code3Strong'
]
}
}
@@ -30,67 +46,123 @@ const options = {
design: {
type: 'figma',
url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8776%3A64695'
- }
+ },
+ viewMode: 'docs'
}
};
export default options;
const Template = (args) => {args.text};
-const disabledControlsArgTypes = {
- variant: { table: { disable: true } }
-};
-
-export const Default = Template.bind({});
-Default.args = { text: 'Default' };
export const H1 = Template.bind({});
H1.args = { variant: 'h1', text: 'H1 Headline' };
-H1.argTypes = disabledControlsArgTypes;
export const H2 = Template.bind({});
H2.args = { variant: 'h2', text: 'H2 Headline' };
-H2.argTypes = disabledControlsArgTypes;
export const H3 = Template.bind({});
H3.args = { variant: 'h3', text: 'H3 Headline' };
-H3.argTypes = disabledControlsArgTypes;
export const H4 = Template.bind({});
H4.args = { variant: 'h4', text: 'H4 Headline' };
-H4.argTypes = disabledControlsArgTypes;
export const H5 = Template.bind({});
H5.args = { variant: 'h5', text: 'H5 Headline' };
-H5.argTypes = disabledControlsArgTypes;
export const H6 = Template.bind({});
H6.args = { variant: 'h6', text: 'H6 Headline' };
-H6.argTypes = disabledControlsArgTypes;
export const Subtitle1 = Template.bind({});
Subtitle1.args = { variant: 'subtitle1', text: 'Subtitle 1' };
-Subtitle1.argTypes = disabledControlsArgTypes;
export const Subtitle2 = Template.bind({});
Subtitle2.args = { variant: 'subtitle2', text: 'Subtitle 2' };
-Subtitle2.argTypes = disabledControlsArgTypes;
export const Body1 = Template.bind({});
Body1.args = { variant: 'body1', text: 'Body 1' };
-Body1.argTypes = disabledControlsArgTypes;
export const Body2 = Template.bind({});
Body2.args = { variant: 'body2', text: 'Body 2' };
-Body2.argTypes = disabledControlsArgTypes;
export const Button = Template.bind({});
Button.args = { variant: 'button', text: 'Button' };
-Button.argTypes = disabledControlsArgTypes;
export const Caption = Template.bind({});
Caption.args = { variant: 'caption', text: 'Caption' };
-Caption.argTypes = disabledControlsArgTypes;
export const Overline = Template.bind({});
Overline.args = { variant: 'overline', text: 'Overline' };
-Overline.argTypes = disabledControlsArgTypes;
+
+// Custom variants
+// TODO: Do not export them until we do this task https://app.shortcut.com/cartoteam/story/265549/
+const Body1Italic = Template.bind({});
+Body1Italic.args = { variant: 'body1Italic', text: 'Body 1 Italic' };
+
+const Body1Strong = Template.bind({});
+Body1Strong.args = { variant: 'boy1Strong', text: 'Body 1 Strong' };
+
+const Body1StrongItalic = Template.bind({});
+Body1StrongItalic.args = { variant: 'body1StrongItalic', text: 'Body 1 Strong Italic' };
+
+const Body2Italic = Template.bind({});
+Body2Italic.args = { variant: 'body2Italic', text: 'Body 2 Italic' };
+
+const Body2Strong = Template.bind({});
+Body2Strong.args = { variant: 'body2Strong', text: 'Body 2 Strong' };
+
+const Body2StrongItalic = Template.bind({});
+Body2StrongItalic.args = { variant: 'body2StrongItalic', text: 'Body 2 Strong Italic' };
+
+const CaptionItalic = Template.bind({});
+CaptionItalic.args = { variant: 'captionItalic', text: 'Caption Italic' };
+
+const CaptionStrong = Template.bind({});
+CaptionStrong.args = { variant: 'captionStrong', text: 'Caption Strong' };
+
+const CaptionStrongItalic = Template.bind({});
+CaptionStrongItalic.args = {
+ variant: 'captionStrongItalic',
+ text: 'Caption Strong Italic'
+};
+
+const OverlineDelicate = Template.bind({});
+OverlineDelicate.args = {
+ variant: 'overlineDelicate',
+ text: 'Overline Delicate'
+};
+
+const Code1 = Template.bind({});
+Code1.args = {
+ variant: 'code1',
+ text: 'Code 1'
+};
+
+const Code1Strong = Template.bind({});
+Code1Strong.args = {
+ variant: 'code1Strong',
+ text: 'Code 1 Strong'
+};
+
+const Code2 = Template.bind({});
+Code2.args = {
+ variant: 'code2',
+ text: 'Code 2'
+};
+
+const Code2Strong = Template.bind({});
+Code2Strong.args = {
+ variant: 'code2Strong',
+ text: 'Code 2 Strong'
+};
+
+const Code3 = Template.bind({});
+Code3.args = {
+ variant: 'code3',
+ text: 'Code 3'
+};
+
+const Code3Strong = Template.bind({});
+Code3Strong.args = {
+ variant: 'code3Strong',
+ text: 'Code 3 Strong'
+};