From 26406895e70c83f120aa22397297b0f0d331b92b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Wed, 19 Oct 2022 17:58:15 +0200 Subject: [PATCH] New typography toolkit for MUI carto-theme (#498) --- CHANGELOG.md | 1 + UPGRADE.md | 6 + .../react-ui/__tests__/widgets/testUtils.js | 19 +- .../react-ui/src/theme/sections/typography.js | 230 ++++++++++++------ packages/react-ui/src/theme/themeUtils.js | 8 + packages/react-ui/src/widgets/BarWidgetUI.js | 8 +- .../HistogramWidgetUI/HistogramWidgetUI.js | 12 +- packages/react-ui/src/widgets/PieWidgetUI.js | 8 +- .../src/widgets/ScatterPlotWidgetUI.js | 4 +- .../components/TimeSeriesChart.js | 4 +- .../storybook/.storybook/preview-head.html | 8 +- .../react-ui/storybook/.storybook/preview.js | 19 +- .../stories/common/Typography.stories.js | 114 +++++++-- 13 files changed, 290 insertions(+), 151 deletions(-) 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' +};