feat(tokens): add ui sizing tokens (#3989)

* feat(tokens): add base size token alias * feat(tokens): add global size tokens and update descriptions * feat(tokens): add base size token story * feat(tokens): update snapshot * feat(tokens): update changeset * fix(docs): fix typo in about paste page * fix(docs): update changeset content * fix(docs): revert back sizing token description * Update .changeset/pink-cooks-vanish.md Co-authored-by: Nora Krantz <[email protected]> * feat(tokens): update size-base-* description * feat(docs): update docs about loading fonts * feat(docs): fix typo Co-authored-by: Sarah <[email protected]> --------- Co-authored-by: Nora Krantz <[email protected]> Co-authored-by: Sarah <[email protected]>
twilio-labs · Jul 22, 2024 · fe8825e · fe8825e
1 parent 7ee9772
commit fe8825e
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 19 deletions.
diff --git a/.changeset/pink-cooks-vanish.md 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
@@ -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
@@ -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
@@ -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
@@ -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>

diff --git 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",