diff --git a/.changeset/pink-cooks-vanish.md b/.changeset/pink-cooks-vanish.md new file mode 100644 index 0000000000..c78c9d136b --- /dev/null +++ b/.changeset/pink-cooks-vanish.md @@ -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 diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap index 6c47f8de61..7475255744 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -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\\", @@ -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\\", @@ -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\\", @@ -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\\", @@ -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\\", @@ -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\\", @@ -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\\", @@ -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\\", @@ -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\\", @@ -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\\", diff --git a/packages/paste-design-tokens/tokens/aliases/sizing.yml b/packages/paste-design-tokens/tokens/aliases/sizing.yml index 0d0b73c2f3..a9b11e0573 100644 --- a/packages/paste-design-tokens/tokens/aliases/sizing.yml +++ b/packages/paste-design-tokens/tokens/aliases/sizing.yml @@ -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) diff --git a/packages/paste-design-tokens/tokens/global/sizing.yml b/packages/paste-design-tokens/tokens/global/sizing.yml index f4ad7e345e..ada0903d55 100644 --- a/packages/paste-design-tokens/tokens/global/sizing.yml +++ b/packages/paste-design-tokens/tokens/global/sizing.yml @@ -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: @@ -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 diff --git a/packages/paste-website/src/pages/introduction/about-paste/index.mdx b/packages/paste-website/src/pages/introduction/about-paste/index.mdx index 516d33f519..7bdfeb0415 100644 --- a/packages/paste-website/src/pages/introduction/about-paste/index.mdx +++ b/packages/paste-website/src/pages/introduction/about-paste/index.mdx @@ -282,14 +282,18 @@ Systems should never have single points of failure. Good documentation, reliable - 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. - - For the default theme Paste uses Inter. This is available as a Google web font 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 how we load the font - on this website. + + For the default theme, Paste uses Inter. This is available as a{" "} + Google web font, 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{" "} + + these instructions on how to load the right font + +. diff --git a/packages/paste-website/stories/TokenCard.stories.tsx b/packages/paste-website/stories/TokenCard.stories.tsx index cd2d488139..e7d028cd0b 100644 --- a/packages/paste-website/stories/TokenCard.stories.tsx +++ b/packages/paste-website/stories/TokenCard.stories.tsx @@ -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",