Skip to content

feat(tokens): add ui sizing tokens #3989

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 12 commits into from
Jul 22, 2024
Merged

feat(tokens): add ui sizing tokens #3989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b57b88d
feat(tokens): add base size token alias
PixeledCode Jul 17, 2024
332d06d
feat(tokens): add global size tokens and update descriptions
PixeledCode Jul 17, 2024
7608905
feat(tokens): add base size token story
PixeledCode Jul 17, 2024
367dd4b
feat(tokens): update snapshot
PixeledCode Jul 17, 2024
74ddf02
feat(tokens): update changeset
PixeledCode Jul 17, 2024
c500dd7
fix(docs): fix typo in about paste page
PixeledCode Jul 17, 2024
6aeb169
fix(docs): update changeset content
PixeledCode Jul 17, 2024
1209f87
fix(docs): revert back sizing token description
PixeledCode Jul 17, 2024
479fdc3
Update .changeset/pink-cooks-vanish.md
PixeledCode Jul 18, 2024
a62c86d
feat(tokens): update size-base-* description
PixeledCode Jul 18, 2024
e1ce566
feat(docs): update docs about loading fonts
PixeledCode Jul 18, 2024
295810d
feat(docs): fix typo
PixeledCode Jul 19, 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
6 changes: 6 additions & 0 deletions .changeset/pink-cooks-vanish.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@twilio-paste/design-tokens": minor
"@twilio-paste/core": minor
---

- [Design Tokens] Add new base sizing tokens and update description of existing sizing tokens
50 changes: 50 additions & 0 deletions packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
\\"color-data-visualization-9\\": \\"rgb(140, 91, 216)\\",
\\"size-square-40\\": \\"0.75rem\\",
\\"size-icon-80\\": \\"2.5rem\\",
\\"size-base-0\\": \\"0\\",
\\"size-square-30\\": \\"0.5rem\\",
\\"size-icon-70\\": \\"2rem\\",
\\"size-square-20\\": \\"0.25rem\\",
Expand All @@ -290,26 +291,35 @@ exports[`Design Tokens matches the Dark theme 1`] = `
\\"size-icon-20\\": \\"1.25rem\\",
\\"size-square-170\\": \\"4rem\\",
\\"size-sidebar-compact\\": \\"4.75rem\\",
\\"size-base-90\\": \\"2.25rem\\",
\\"size-icon-10\\": \\"1rem\\",
\\"size-square-25\\": \\"0.375rem\\",
\\"size-square-160\\": \\"3.75rem\\",
\\"size-50\\": \\"31.5rem\\",
\\"size-base-80\\": \\"2rem\\",
\\"size-icon-110\\": \\"4rem\\",
\\"size-square-150\\": \\"3.5rem\\",
\\"size-40\\": \\"25rem\\",
\\"size-base-70\\": \\"1.75rem\\",
\\"size-icon-100\\": \\"3.25rem\\",
\\"size-square-140\\": \\"3.25rem\\",
\\"size-30\\": \\"18.5rem\\",
\\"size-base-60\\": \\"1.5rem\\",
\\"size-topbar\\": \\"4.75rem\\",
\\"size-square-130\\": \\"3rem\\",
\\"size-20\\": \\"12rem\\",
\\"size-base-50\\": \\"1.25rem\\",
\\"size-square-120\\": \\"2.75rem\\",
\\"size-10\\": \\"5.5rem\\",
\\"size-base-40\\": \\"1rem\\",
\\"size-square-110\\": \\"2.5rem\\",
\\"size-square-0\\": \\"0\\",
\\"size-base-30\\": \\"0.75rem\\",
\\"size-icon-05\\": \\"0.75rem\\",
\\"size-square-100\\": \\"2.25rem\\",
\\"size-base-20\\": \\"0.5rem\\",
\\"size-square-200\\": \\"4.75rem\\",
\\"size-base-10\\": \\"0.25rem\\",
\\"size-sidebar\\": \\"15rem\\",
\\"size-square-90\\": \\"2rem\\",
\\"size-square-80\\": \\"1.75rem\\",
Expand Down Expand Up @@ -702,6 +712,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
\\"color-gray-10\\": \\"rgb(244, 244, 246)\\",
\\"size-square-40\\": \\"0.75rem\\",
\\"size-icon-80\\": \\"2.5rem\\",
\\"size-base-0\\": \\"0\\",
\\"size-square-30\\": \\"0.5rem\\",
\\"size-icon-70\\": \\"2rem\\",
\\"size-square-20\\": \\"0.25rem\\",
Expand All @@ -723,26 +734,35 @@ exports[`Design Tokens matches the Global theme 1`] = `
\\"size-icon-20\\": \\"1.25rem\\",
\\"size-square-170\\": \\"4rem\\",
\\"size-sidebar-compact\\": \\"4.75rem\\",
\\"size-base-90\\": \\"2.25rem\\",
\\"size-icon-10\\": \\"1rem\\",
\\"size-square-25\\": \\"0.375rem\\",
\\"size-square-160\\": \\"3.75rem\\",
\\"size-50\\": \\"31.5rem\\",
\\"size-base-80\\": \\"2rem\\",
\\"size-icon-110\\": \\"4rem\\",
\\"size-square-150\\": \\"3.5rem\\",
\\"size-40\\": \\"25rem\\",
\\"size-base-70\\": \\"1.75rem\\",
\\"size-icon-100\\": \\"3.25rem\\",
\\"size-square-140\\": \\"3.25rem\\",
\\"size-30\\": \\"18.5rem\\",
\\"size-base-60\\": \\"1.5rem\\",
\\"size-topbar\\": \\"4.75rem\\",
\\"size-square-130\\": \\"3rem\\",
\\"size-20\\": \\"12rem\\",
\\"size-base-50\\": \\"1.25rem\\",
\\"size-square-120\\": \\"2.75rem\\",
\\"size-10\\": \\"5.5rem\\",
\\"size-base-40\\": \\"1rem\\",
\\"size-square-110\\": \\"2.5rem\\",
\\"size-square-0\\": \\"0\\",
\\"size-base-30\\": \\"0.75rem\\",
\\"size-icon-05\\": \\"0.75rem\\",
\\"size-square-100\\": \\"2.25rem\\",
\\"size-base-20\\": \\"0.5rem\\",
\\"size-square-200\\": \\"4.75rem\\",
\\"size-base-10\\": \\"0.25rem\\",
\\"size-sidebar\\": \\"15rem\\",
\\"size-square-90\\": \\"2rem\\",
\\"size-square-80\\": \\"1.75rem\\",
Expand Down Expand Up @@ -1135,6 +1155,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
\\"color-gray-10\\": \\"rgb(244, 244, 246)\\",
\\"size-square-40\\": \\"0.75rem\\",
\\"size-icon-80\\": \\"2.5rem\\",
\\"size-base-0\\": \\"0\\",
\\"size-square-30\\": \\"0.5rem\\",
\\"size-icon-70\\": \\"2rem\\",
\\"size-square-20\\": \\"0.25rem\\",
Expand All @@ -1156,26 +1177,35 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
\\"size-icon-20\\": \\"1.25rem\\",
\\"size-square-170\\": \\"4rem\\",
\\"size-sidebar-compact\\": \\"4.75rem\\",
\\"size-base-90\\": \\"2.25rem\\",
\\"size-icon-10\\": \\"1rem\\",
\\"size-square-25\\": \\"0.375rem\\",
\\"size-square-160\\": \\"3.75rem\\",
\\"size-50\\": \\"31.5rem\\",
\\"size-base-80\\": \\"2rem\\",
\\"size-icon-110\\": \\"4rem\\",
\\"size-square-150\\": \\"3.5rem\\",
\\"size-40\\": \\"25rem\\",
\\"size-base-70\\": \\"1.75rem\\",
\\"size-icon-100\\": \\"3.25rem\\",
\\"size-square-140\\": \\"3.25rem\\",
\\"size-30\\": \\"18.5rem\\",
\\"size-base-60\\": \\"1.5rem\\",
\\"size-topbar\\": \\"4.75rem\\",
\\"size-square-130\\": \\"3rem\\",
\\"size-20\\": \\"12rem\\",
\\"size-base-50\\": \\"1.25rem\\",
\\"size-square-120\\": \\"2.75rem\\",
\\"size-10\\": \\"5.5rem\\",
\\"size-base-40\\": \\"1rem\\",
\\"size-square-110\\": \\"2.5rem\\",
\\"size-square-0\\": \\"0\\",
\\"size-base-30\\": \\"0.75rem\\",
\\"size-icon-05\\": \\"0.75rem\\",
\\"size-square-100\\": \\"2.25rem\\",
\\"size-base-20\\": \\"0.5rem\\",
\\"size-square-200\\": \\"4.75rem\\",
\\"size-base-10\\": \\"0.25rem\\",
\\"size-sidebar\\": \\"15rem\\",
\\"size-square-90\\": \\"2rem\\",
\\"size-square-80\\": \\"1.75rem\\",
Expand Down Expand Up @@ -1568,6 +1598,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"color-data-visualization-9\\": \\"rgb(140, 91, 216)\\",
\\"size-square-40\\": \\"0.75rem\\",
\\"size-icon-80\\": \\"2.5rem\\",
\\"size-base-0\\": \\"0\\",
\\"size-square-30\\": \\"0.5rem\\",
\\"size-icon-70\\": \\"2rem\\",
\\"size-square-20\\": \\"0.25rem\\",
Expand All @@ -1589,26 +1620,35 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
\\"size-icon-20\\": \\"1.25rem\\",
\\"size-square-170\\": \\"4rem\\",
\\"size-sidebar-compact\\": \\"4.75rem\\",
\\"size-base-90\\": \\"2.25rem\\",
\\"size-icon-10\\": \\"1rem\\",
\\"size-square-25\\": \\"0.375rem\\",
\\"size-square-160\\": \\"3.75rem\\",
\\"size-50\\": \\"31.5rem\\",
\\"size-base-80\\": \\"2rem\\",
\\"size-icon-110\\": \\"4rem\\",
\\"size-square-150\\": \\"3.5rem\\",
\\"size-40\\": \\"25rem\\",
\\"size-base-70\\": \\"1.75rem\\",
\\"size-icon-100\\": \\"3.25rem\\",
\\"size-square-140\\": \\"3.25rem\\",
\\"size-30\\": \\"18.5rem\\",
\\"size-base-60\\": \\"1.5rem\\",
\\"size-topbar\\": \\"4.75rem\\",
\\"size-square-130\\": \\"3rem\\",
\\"size-20\\": \\"12rem\\",
\\"size-base-50\\": \\"1.25rem\\",
\\"size-square-120\\": \\"2.75rem\\",
\\"size-10\\": \\"5.5rem\\",
\\"size-base-40\\": \\"1rem\\",
\\"size-square-110\\": \\"2.5rem\\",
\\"size-square-0\\": \\"0\\",
\\"size-base-30\\": \\"0.75rem\\",
\\"size-icon-05\\": \\"0.75rem\\",
\\"size-square-100\\": \\"2.25rem\\",
\\"size-base-20\\": \\"0.5rem\\",
\\"size-square-200\\": \\"4.75rem\\",
\\"size-base-10\\": \\"0.25rem\\",
\\"size-sidebar\\": \\"15rem\\",
\\"size-square-90\\": \\"2rem\\",
\\"size-square-80\\": \\"1.75rem\\",
Expand Down Expand Up @@ -2001,6 +2041,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"color-data-visualization-9\\": \\"rgb(117, 12, 12)\\",
\\"size-square-40\\": \\"0.75rem\\",
\\"size-icon-80\\": \\"2.5rem\\",
\\"size-base-0\\": \\"0\\",
\\"size-square-30\\": \\"0.5rem\\",
\\"size-icon-70\\": \\"2rem\\",
\\"size-square-20\\": \\"0.25rem\\",
Expand All @@ -2022,26 +2063,35 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
\\"size-icon-20\\": \\"1.25rem\\",
\\"size-square-170\\": \\"4rem\\",
\\"size-sidebar-compact\\": \\"4.75rem\\",
\\"size-base-90\\": \\"2.25rem\\",
\\"size-icon-10\\": \\"1rem\\",
\\"size-square-25\\": \\"0.375rem\\",
\\"size-square-160\\": \\"3.75rem\\",
\\"size-50\\": \\"31.5rem\\",
\\"size-base-80\\": \\"2rem\\",
\\"size-icon-110\\": \\"4rem\\",
\\"size-square-150\\": \\"3.5rem\\",
\\"size-40\\": \\"25rem\\",
\\"size-base-70\\": \\"1.75rem\\",
\\"size-icon-100\\": \\"3.25rem\\",
\\"size-square-140\\": \\"3.25rem\\",
\\"size-30\\": \\"18.5rem\\",
\\"size-base-60\\": \\"1.5rem\\",
\\"size-topbar\\": \\"4.75rem\\",
\\"size-square-130\\": \\"3rem\\",
\\"size-20\\": \\"12rem\\",
\\"size-base-50\\": \\"1.25rem\\",
\\"size-square-120\\": \\"2.75rem\\",
\\"size-10\\": \\"5.5rem\\",
\\"size-base-40\\": \\"1rem\\",
\\"size-square-110\\": \\"2.5rem\\",
\\"size-square-0\\": \\"0\\",
\\"size-base-30\\": \\"0.75rem\\",
\\"size-icon-05\\": \\"0.75rem\\",
\\"size-square-100\\": \\"2.25rem\\",
\\"size-base-20\\": \\"0.5rem\\",
\\"size-square-200\\": \\"4.75rem\\",
\\"size-base-10\\": \\"0.25rem\\",
\\"size-sidebar\\": \\"15rem\\",
\\"size-square-90\\": \\"2rem\\",
\\"size-square-80\\": \\"1.75rem\\",
Expand Down
11 changes: 11 additions & 0 deletions packages/paste-design-tokens/tokens/aliases/sizing.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,14 @@ aliases:
size-sidebar-compact: "4.75rem" #76px
size-sidebar: "15rem" #240px
size-topbar: "4.75rem" #76px

size-base-0: "0" #0
size-base-10: "0.25rem" #4px
size-base-20: "0.5rem" #8px
size-base-30: "0.75rem" #12px
size-base-40: "1rem" #16px
size-base-50: "1.25rem" #20px
size-base-60: "1.5rem" #24px
size-base-70: "1.75rem" #28px
size-base-80: "2rem" #32px
size-base-90: "2.25rem" #36px (height of form inputs)
58 changes: 45 additions & 13 deletions packages/paste-design-tokens/tokens/global/sizing.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,43 +7,43 @@ imports:
props:
size-0:
value: "{!size-0}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-10:
value: "{!size-10}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-20:
value: "{!size-20}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-30:
value: "{!size-30}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-40:
value: "{!size-40}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-50:
value: "{!size-50}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-60:
value: "{!size-60}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-70:
value: "{!size-70}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-80:
value: "{!size-80}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-90:
value: "{!size-90}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-100:
value: "{!size-100}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-110:
value: "{!size-110}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.
size-120:
value: "{!size-120}"
comment: Generic sizing token scale for UI components.
comment: Generic sizing token for layouts and containers.

#square sizes
size-square-0:
Expand Down Expand Up @@ -161,3 +161,35 @@ props:
size-topbar:
value: "{!size-topbar}"
comment: "Sizing token for the minimum topbar height."

# base
size-base-0:
value: "{!size-base-0}"
comment: Generic sizing token for UI components
size-base-10:
value: "{!size-base-10}"
comment: Generic sizing token for UI components
size-base-20:
value: "{!size-base-20}"
comment: Generic sizing token for UI components
size-base-30:
value: "{!size-base-30}"
comment: Generic sizing token for UI components
size-base-40:
value: "{!size-base-40}"
comment: Generic sizing token for UI components
size-base-50:
value: "{!size-base-50}"
comment: Generic sizing token for UI components
size-base-60:
value: "{!size-base-60}"
comment: Generic sizing token for UI components
size-base-70:
value: "{!size-base-70}"
comment: Generic sizing token for UI components
size-base-80:
value: "{!size-base-80}"
comment: Generic sizing token for UI components
size-base-90:
value: "{!size-base-90}"
comment: Generic sizing token for UI components
16 changes: 10 additions & 6 deletions packages/paste-website/src/pages/introduction/about-paste/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,14 +282,18 @@ Systems should never have single points of failure. Good documentation, reliable
</DisclosureHeading>
<DisclosureContent>
<Paragraph>
Paste leaves loading the font files up to the consumer of the system, to accomodate any technical or licensing
Paste leaves loading the font files up to the consumer of the system, to accommodate any technical or licensing
restrictions a product might have.
</Paragraph>
<Paragraph>
For the default theme Paste uses Inter. This is available as a <Anchor href="https://fonts.google.com/specimen/Inter">Google web font</Anchor> can be loaded in a number of
ways into your application. Please choose the one that best suits your preferred choice of asset delivery, or
follow <Anchor href="https://github.com/twilio-labs/paste/blob/main/packages/paste-website/src/assets/css/fonts.css#L105">how we load the font</Anchor>
on this website.
<Paragraph>
For the default theme, Paste uses Inter. This is available as a{" "}
<Anchor href="https://fonts.google.com/specimen/Inter">Google web font</Anchor>, which can be loaded in a number
of ways into your application. Please choose the one that best suits your preferred choice of asset delivery, or
follow{" "}
<Anchor href="https://paste.twilio.design/introduction/for-engineers/manual-installation#how-to-load-the-right-font">
these instructions on how to load the right font
</Anchor>
.
</Paragraph>
</DisclosureContent>
</Disclosure>
Expand Down
6 changes: 6 additions & 0 deletions packages/paste-website/stories/TokenCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,12 @@ SizingTokenSquare.args = {
name: "size-square-200",
};

export const SizingTokenBase = Template.bind({});
SizingTokenBase.args = {
category: "sizings",
name: "size-base-90",
};

export const SpacingToken = Template.bind({});
SpacingToken.args = {
category: "spacings",
Expand Down
Loading