diff --git a/.changeset/calm-badgers-double.md b/.changeset/calm-badgers-double.md new file mode 100644 index 0000000000..15ed246958 --- /dev/null +++ b/.changeset/calm-badgers-double.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/design-tokens': minor +'@twilio-paste/core': minor +--- + +[Tokens] add i18n font family tokens diff --git a/.changeset/clean-birds-carry.md b/.changeset/clean-birds-carry.md new file mode 100644 index 0000000000..f49029ca51 --- /dev/null +++ b/.changeset/clean-birds-carry.md @@ -0,0 +1,10 @@ +--- +'@twilio-paste/button': patch +'@twilio-paste/form-pill-group': patch +'@twilio-paste/menu': patch +'@twilio-paste/pagination': patch +'@twilio-paste/select': patch +'@twilio-paste/core': patch +--- + +[Button, FormPillGroup, Menu, Pagination, Select] inherit fontFamily for i18n diff --git a/.changeset/modern-turtles-unite.md b/.changeset/modern-turtles-unite.md new file mode 100644 index 0000000000..7ecddbd7e6 --- /dev/null +++ b/.changeset/modern-turtles-unite.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/theme': patch +'@twilio-paste/core': patch +--- + +[ThemeProvider] use non-latin fonts based on the HTML lang attribute to support i18n. diff --git a/package.json b/package.json index a75f2bbd37..7fb55600e2 100644 --- a/package.json +++ b/package.json @@ -210,6 +210,7 @@ "react-dom": "^17.0.2", "react-dom-16": "npm:react-dom@^16.8.6", "react-ga": "^3.3.0", + "react-helmet": "^6.1.0", "react-router-dom": "6.2.1", "react-test-renderer": "^16.8.6", "regenerator-runtime": "^0.13.3", diff --git a/packages/paste-core/components/button/src/styles.ts b/packages/paste-core/components/button/src/styles.ts index fef920b26a..15e4fffbde 100644 --- a/packages/paste-core/components/button/src/styles.ts +++ b/packages/paste-core/components/button/src/styles.ts @@ -11,7 +11,7 @@ const ResetStyles: BoxStyleProps = { border: 'none', outline: 'none', transition: 'background-color 100ms ease-in, box-shadow 100ms ease-in, color 100ms ease-in', - fontFamily: 'fontFamilyText', + fontFamily: 'inherit', fontWeight: 'fontWeightSemibold', textDecoration: 'none', position: 'relative', diff --git a/packages/paste-core/components/form-pill-group/src/FormPill.tsx b/packages/paste-core/components/form-pill-group/src/FormPill.tsx index 838feed72d..c7005b2f06 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPill.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPill.tsx @@ -45,7 +45,7 @@ const FormPillStyles = React.forwardRef( columnGap="space20" cursor="default" display="flex" - fontFamily="fontFamilyText" + fontFamily="inherit" fontSize="fontSize20" fontWeight="fontWeightSemibold" lineHeight="lineHeight10" diff --git a/packages/paste-core/components/menu/src/MenuItem.tsx b/packages/paste-core/components/menu/src/MenuItem.tsx index ec4a2825e3..784a82bb5b 100644 --- a/packages/paste-core/components/menu/src/MenuItem.tsx +++ b/packages/paste-core/components/menu/src/MenuItem.tsx @@ -20,7 +20,7 @@ export const StyledMenuItem = React.forwardRef(({children, elem width={undefined} backgroundColor="inherit" color="inherit" - fontFamily="fontFamilyText" + fontFamily="inherit" lineHeight="lineHeight50" paddingTop="space30" paddingBottom="space30" diff --git a/packages/paste-core/components/select/src/OptionGroup.tsx b/packages/paste-core/components/select/src/OptionGroup.tsx index cbca2510a1..6f95d12923 100644 --- a/packages/paste-core/components/select/src/OptionGroup.tsx +++ b/packages/paste-core/components/select/src/OptionGroup.tsx @@ -20,7 +20,7 @@ const OptionGroup = React.forwardRef( as="optgroup" backgroundColor="inherit" color="inherit" - fontFamily="fontFamilyText" + fontFamily="inherit" fontWeight="fontWeightMedium" fontStyle="normal" margin="space20" diff --git a/packages/paste-core/components/separator/__tests__/__snapshots__/index.spec.tsx.snap b/packages/paste-core/components/separator/__tests__/__snapshots__/index.spec.tsx.snap index 09463945fd..eb3dcf29a8 100644 --- a/packages/paste-core/components/separator/__tests__/__snapshots__/index.spec.tsx.snap +++ b/packages/paste-core/components/separator/__tests__/__snapshots__/index.spec.tsx.snap @@ -24,7 +24,7 @@ exports[`Separator Render should set horizontal margins 1`] = ` }
= ({ - + ); }; diff --git a/packages/paste-theme/stories/themeProvider.stories.tsx b/packages/paste-theme/stories/themeProvider.stories.tsx new file mode 100644 index 0000000000..c0f0df65f0 --- /dev/null +++ b/packages/paste-theme/stories/themeProvider.stories.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import {Helmet} from 'react-helmet'; +import {Box} from '@twilio-paste/box'; +import {Button} from '@twilio-paste/button'; +import {Input} from '@twilio-paste/input'; +import {Paragraph} from '@twilio-paste/paragraph'; +import {Select, Option} from '@twilio-paste/select'; +import {Stack} from '@twilio-paste/stack'; +import {TextArea} from '@twilio-paste/textarea'; + +import {ThemeProvider} from '../src/themeProvider'; + +// eslint-disable-next-line import/no-default-export +export default { + title: 'Theme/ThemeProvider', + component: ThemeProvider, +}; + +export const EnglishFontFamily = (): React.ReactNode => ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Nisi porta lorem mollis aliquam ut porttitor leo. Hendrerit gravida rutrum quisque non. A arcu + cursus vitae congue mauris rhoncus aenean vel elit. Tortor dignissim convallis aenean et tortor at risus. + Vestibulum lorem sed risus ultricies. Tempor nec feugiat nisl pretium fusce id. Morbi tempus iaculis urna id + volutpat lacus laoreet non curabitur. In ante metus dictum at. Sit amet risus nullam eget felis eget nunc + lobortis. + + + + + +