Skip to content

chore(docs): fix typos on customization docs #3935

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 11, 2024
Merged

chore(docs): fix typos on customization docs #3935

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b550c5b
chore: fix typos on customization docs
serifluous Jun 7, 2024
f3581d6
chore: fix typo on customization provider docs
serifluous Jun 7, 2024
44ba4d1
chore: add bottom margin to Disclosures on accessibility docs
serifluous Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/paste-website/src/pages/customization/creating-a-custom-theme.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const getStaticProps = async () => {

<content>

A custom theme can be created either manually or using the [Paste Theme Designer](https://remix.twilio.design). A [Paste Theme](/theme) is categorized into groups of [Design Tokens](/tokens). The value of any Design Token from any Group can be changed when supplied to the Customization Provider via the theme object. The following token groups are available for customization:
A custom theme can be created either manually or using the [Paste Theme Designer](https://remix.twilio.design). A [Paste Theme](/theme) is categorized into groups of [design tokens](/tokens). The value of any design token from any group can be changed when supplied to the Customization Provider via the theme object. The following token groups are available for customization:

<CustomThemeKeyList />

Expand Down Expand Up @@ -87,7 +87,7 @@ If you&rsquo;re looking for a visual approach to creating a custom theme, then t

The theme designer comes with a UI so you can visually see what tokens are used in various components. For ease of use, each set of tokens is separated into categories. Once a category is selected, you can change individual token values and immediately see what component(s) will be affected by that change. Once all token changes have been made, you can then export your custom theme.

Once exported from the Theme Designer, you can store that JSON object in you application and import in where you initialize the Customization Provider to provide your application with an entire custom theme.
Once exported from the theme designer, you can store that JSON object in you application and import in where you initialize the Customization Provider to provide your application with an entire custom theme.

```jsx
import {CustomizationProvider} from '@twilio-paste/core/customization';
Expand Down Expand Up @@ -118,9 +118,9 @@ The theme designer can also be used to import a custom theme if you wish to make

### Creating a branded theme

Something simple, yet effective that you might want to do is apply branding to your custom application. With Paste, a quick way to do that is to change the Primary colors within in the theme to be a tint of your primary brand color.
Something simple, yet effective that you might want to do is apply branding to your custom application. With Paste, a quick way to do that is to change the primary colors within in the theme to be a tint of your primary brand color.

As an example you might provide the Customization Provider a theme object that only sets values for the follow Design Tokens, based on your own companies branding:
As an example you might provide the Customization Provider a theme object that only sets values for the follow design tokens, based on your own company's branding:

```json
{
Expand Down Expand Up @@ -171,9 +171,9 @@ This will apply your companies brand color as the primary accent to all Paste co
></iframe>
</Box>

### Customizating typography
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sad to see this one go

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

customizating, we hardly knew ya

### Customizing typography

Another small customization might involve changing the typography that is supplied with Paste. Maybe your companies brand guidelines stipulate that you should use a certain font family? By changing the set of typography tokens on the theme, you can make ajustments to the font family and sizing ramps used in Paste to suit your companies needs.
Another small customization might involve changing the typography that is supplied with Paste. Maybe your company's brand guidelines stipulate that you should use a certain font family. By changing the set of typography tokens on the theme, you can make adjustments to the font family and sizing ramps used in Paste to suit your company's needs.

To achieve the result displayed below, we have provided Paste with the following partial theme object.

Expand Down
2 changes: 1 addition & 1 deletion packages/paste-website/src/pages/customization/customization-provider.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ const MyApp = () => (

You can set a collection of Component Elements that you want to customize at the Customization Provider level. A Component Element is a DOM node within a component that you can target by name and provide custom CSS for. There maybe one or more exposed Component Elements for any given component within Paste. Component Elements can also be created for your own custom components for your customers to customize.

To read about how to customize components, head to the [Customizating Components](/customization/customizing-component-elements) page.
To read about how to customize components, head to the [Customizing Components](/customization/customizing-component-elements) page.

```
import {CustomizationProvider} from '@twilio-paste/core/customization';
Expand Down
Loading
Loading