Skip to content

Commit fe8825e

Browse files
PixeledCodenkrantzserifluous
authored
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 <75342690+nkrantz@users.noreply.github.com> * feat(tokens): update size-base-* description * feat(docs): update docs about loading fonts * feat(docs): fix typo Co-authored-by: Sarah <sali@twilio.com> --------- Co-authored-by: Nora Krantz <75342690+nkrantz@users.noreply.github.com> Co-authored-by: Sarah <sali@twilio.com>
1 parent 7ee9772 commit fe8825e

File tree

6 files changed

+128
-19
lines changed

6 files changed

+128
-19
lines changed

‎.changeset/pink-cooks-vanish.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/design-tokens": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
- [Design Tokens] Add new base sizing tokens and update description of existing sizing tokens

‎packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
269269
\\"color-data-visualization-9\\": \\"rgb(140, 91, 216)\\",
270270
\\"size-square-40\\": \\"0.75rem\\",
271271
\\"size-icon-80\\": \\"2.5rem\\",
272+
\\"size-base-0\\": \\"0\\",
272273
\\"size-square-30\\": \\"0.5rem\\",
273274
\\"size-icon-70\\": \\"2rem\\",
274275
\\"size-square-20\\": \\"0.25rem\\",
@@ -290,26 +291,35 @@ exports[`Design Tokens matches the Dark theme 1`] = `
290291
\\"size-icon-20\\": \\"1.25rem\\",
291292
\\"size-square-170\\": \\"4rem\\",
292293
\\"size-sidebar-compact\\": \\"4.75rem\\",
294+
\\"size-base-90\\": \\"2.25rem\\",
293295
\\"size-icon-10\\": \\"1rem\\",
294296
\\"size-square-25\\": \\"0.375rem\\",
295297
\\"size-square-160\\": \\"3.75rem\\",
296298
\\"size-50\\": \\"31.5rem\\",
299+
\\"size-base-80\\": \\"2rem\\",
297300
\\"size-icon-110\\": \\"4rem\\",
298301
\\"size-square-150\\": \\"3.5rem\\",
299302
\\"size-40\\": \\"25rem\\",
303+
\\"size-base-70\\": \\"1.75rem\\",
300304
\\"size-icon-100\\": \\"3.25rem\\",
301305
\\"size-square-140\\": \\"3.25rem\\",
302306
\\"size-30\\": \\"18.5rem\\",
307+
\\"size-base-60\\": \\"1.5rem\\",
303308
\\"size-topbar\\": \\"4.75rem\\",
304309
\\"size-square-130\\": \\"3rem\\",
305310
\\"size-20\\": \\"12rem\\",
311+
\\"size-base-50\\": \\"1.25rem\\",
306312
\\"size-square-120\\": \\"2.75rem\\",
307313
\\"size-10\\": \\"5.5rem\\",
314+
\\"size-base-40\\": \\"1rem\\",
308315
\\"size-square-110\\": \\"2.5rem\\",
309316
\\"size-square-0\\": \\"0\\",
317+
\\"size-base-30\\": \\"0.75rem\\",
310318
\\"size-icon-05\\": \\"0.75rem\\",
311319
\\"size-square-100\\": \\"2.25rem\\",
320+
\\"size-base-20\\": \\"0.5rem\\",
312321
\\"size-square-200\\": \\"4.75rem\\",
322+
\\"size-base-10\\": \\"0.25rem\\",
313323
\\"size-sidebar\\": \\"15rem\\",
314324
\\"size-square-90\\": \\"2rem\\",
315325
\\"size-square-80\\": \\"1.75rem\\",
@@ -702,6 +712,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
702712
\\"color-gray-10\\": \\"rgb(244, 244, 246)\\",
703713
\\"size-square-40\\": \\"0.75rem\\",
704714
\\"size-icon-80\\": \\"2.5rem\\",
715+
\\"size-base-0\\": \\"0\\",
705716
\\"size-square-30\\": \\"0.5rem\\",
706717
\\"size-icon-70\\": \\"2rem\\",
707718
\\"size-square-20\\": \\"0.25rem\\",
@@ -723,26 +734,35 @@ exports[`Design Tokens matches the Global theme 1`] = `
723734
\\"size-icon-20\\": \\"1.25rem\\",
724735
\\"size-square-170\\": \\"4rem\\",
725736
\\"size-sidebar-compact\\": \\"4.75rem\\",
737+
\\"size-base-90\\": \\"2.25rem\\",
726738
\\"size-icon-10\\": \\"1rem\\",
727739
\\"size-square-25\\": \\"0.375rem\\",
728740
\\"size-square-160\\": \\"3.75rem\\",
729741
\\"size-50\\": \\"31.5rem\\",
742+
\\"size-base-80\\": \\"2rem\\",
730743
\\"size-icon-110\\": \\"4rem\\",
731744
\\"size-square-150\\": \\"3.5rem\\",
732745
\\"size-40\\": \\"25rem\\",
746+
\\"size-base-70\\": \\"1.75rem\\",
733747
\\"size-icon-100\\": \\"3.25rem\\",
734748
\\"size-square-140\\": \\"3.25rem\\",
735749
\\"size-30\\": \\"18.5rem\\",
750+
\\"size-base-60\\": \\"1.5rem\\",
736751
\\"size-topbar\\": \\"4.75rem\\",
737752
\\"size-square-130\\": \\"3rem\\",
738753
\\"size-20\\": \\"12rem\\",
754+
\\"size-base-50\\": \\"1.25rem\\",
739755
\\"size-square-120\\": \\"2.75rem\\",
740756
\\"size-10\\": \\"5.5rem\\",
757+
\\"size-base-40\\": \\"1rem\\",
741758
\\"size-square-110\\": \\"2.5rem\\",
742759
\\"size-square-0\\": \\"0\\",
760+
\\"size-base-30\\": \\"0.75rem\\",
743761
\\"size-icon-05\\": \\"0.75rem\\",
744762
\\"size-square-100\\": \\"2.25rem\\",
763+
\\"size-base-20\\": \\"0.5rem\\",
745764
\\"size-square-200\\": \\"4.75rem\\",
765+
\\"size-base-10\\": \\"0.25rem\\",
746766
\\"size-sidebar\\": \\"15rem\\",
747767
\\"size-square-90\\": \\"2rem\\",
748768
\\"size-square-80\\": \\"1.75rem\\",
@@ -1135,6 +1155,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
11351155
\\"color-gray-10\\": \\"rgb(244, 244, 246)\\",
11361156
\\"size-square-40\\": \\"0.75rem\\",
11371157
\\"size-icon-80\\": \\"2.5rem\\",
1158+
\\"size-base-0\\": \\"0\\",
11381159
\\"size-square-30\\": \\"0.5rem\\",
11391160
\\"size-icon-70\\": \\"2rem\\",
11401161
\\"size-square-20\\": \\"0.25rem\\",
@@ -1156,26 +1177,35 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
11561177
\\"size-icon-20\\": \\"1.25rem\\",
11571178
\\"size-square-170\\": \\"4rem\\",
11581179
\\"size-sidebar-compact\\": \\"4.75rem\\",
1180+
\\"size-base-90\\": \\"2.25rem\\",
11591181
\\"size-icon-10\\": \\"1rem\\",
11601182
\\"size-square-25\\": \\"0.375rem\\",
11611183
\\"size-square-160\\": \\"3.75rem\\",
11621184
\\"size-50\\": \\"31.5rem\\",
1185+
\\"size-base-80\\": \\"2rem\\",
11631186
\\"size-icon-110\\": \\"4rem\\",
11641187
\\"size-square-150\\": \\"3.5rem\\",
11651188
\\"size-40\\": \\"25rem\\",
1189+
\\"size-base-70\\": \\"1.75rem\\",
11661190
\\"size-icon-100\\": \\"3.25rem\\",
11671191
\\"size-square-140\\": \\"3.25rem\\",
11681192
\\"size-30\\": \\"18.5rem\\",
1193+
\\"size-base-60\\": \\"1.5rem\\",
11691194
\\"size-topbar\\": \\"4.75rem\\",
11701195
\\"size-square-130\\": \\"3rem\\",
11711196
\\"size-20\\": \\"12rem\\",
1197+
\\"size-base-50\\": \\"1.25rem\\",
11721198
\\"size-square-120\\": \\"2.75rem\\",
11731199
\\"size-10\\": \\"5.5rem\\",
1200+
\\"size-base-40\\": \\"1rem\\",
11741201
\\"size-square-110\\": \\"2.5rem\\",
11751202
\\"size-square-0\\": \\"0\\",
1203+
\\"size-base-30\\": \\"0.75rem\\",
11761204
\\"size-icon-05\\": \\"0.75rem\\",
11771205
\\"size-square-100\\": \\"2.25rem\\",
1206+
\\"size-base-20\\": \\"0.5rem\\",
11781207
\\"size-square-200\\": \\"4.75rem\\",
1208+
\\"size-base-10\\": \\"0.25rem\\",
11791209
\\"size-sidebar\\": \\"15rem\\",
11801210
\\"size-square-90\\": \\"2rem\\",
11811211
\\"size-square-80\\": \\"1.75rem\\",
@@ -1568,6 +1598,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
15681598
\\"color-data-visualization-9\\": \\"rgb(140, 91, 216)\\",
15691599
\\"size-square-40\\": \\"0.75rem\\",
15701600
\\"size-icon-80\\": \\"2.5rem\\",
1601+
\\"size-base-0\\": \\"0\\",
15711602
\\"size-square-30\\": \\"0.5rem\\",
15721603
\\"size-icon-70\\": \\"2rem\\",
15731604
\\"size-square-20\\": \\"0.25rem\\",
@@ -1589,26 +1620,35 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
15891620
\\"size-icon-20\\": \\"1.25rem\\",
15901621
\\"size-square-170\\": \\"4rem\\",
15911622
\\"size-sidebar-compact\\": \\"4.75rem\\",
1623+
\\"size-base-90\\": \\"2.25rem\\",
15921624
\\"size-icon-10\\": \\"1rem\\",
15931625
\\"size-square-25\\": \\"0.375rem\\",
15941626
\\"size-square-160\\": \\"3.75rem\\",
15951627
\\"size-50\\": \\"31.5rem\\",
1628+
\\"size-base-80\\": \\"2rem\\",
15961629
\\"size-icon-110\\": \\"4rem\\",
15971630
\\"size-square-150\\": \\"3.5rem\\",
15981631
\\"size-40\\": \\"25rem\\",
1632+
\\"size-base-70\\": \\"1.75rem\\",
15991633
\\"size-icon-100\\": \\"3.25rem\\",
16001634
\\"size-square-140\\": \\"3.25rem\\",
16011635
\\"size-30\\": \\"18.5rem\\",
1636+
\\"size-base-60\\": \\"1.5rem\\",
16021637
\\"size-topbar\\": \\"4.75rem\\",
16031638
\\"size-square-130\\": \\"3rem\\",
16041639
\\"size-20\\": \\"12rem\\",
1640+
\\"size-base-50\\": \\"1.25rem\\",
16051641
\\"size-square-120\\": \\"2.75rem\\",
16061642
\\"size-10\\": \\"5.5rem\\",
1643+
\\"size-base-40\\": \\"1rem\\",
16071644
\\"size-square-110\\": \\"2.5rem\\",
16081645
\\"size-square-0\\": \\"0\\",
1646+
\\"size-base-30\\": \\"0.75rem\\",
16091647
\\"size-icon-05\\": \\"0.75rem\\",
16101648
\\"size-square-100\\": \\"2.25rem\\",
1649+
\\"size-base-20\\": \\"0.5rem\\",
16111650
\\"size-square-200\\": \\"4.75rem\\",
1651+
\\"size-base-10\\": \\"0.25rem\\",
16121652
\\"size-sidebar\\": \\"15rem\\",
16131653
\\"size-square-90\\": \\"2rem\\",
16141654
\\"size-square-80\\": \\"1.75rem\\",
@@ -2001,6 +2041,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
20012041
\\"color-data-visualization-9\\": \\"rgb(117, 12, 12)\\",
20022042
\\"size-square-40\\": \\"0.75rem\\",
20032043
\\"size-icon-80\\": \\"2.5rem\\",
2044+
\\"size-base-0\\": \\"0\\",
20042045
\\"size-square-30\\": \\"0.5rem\\",
20052046
\\"size-icon-70\\": \\"2rem\\",
20062047
\\"size-square-20\\": \\"0.25rem\\",
@@ -2022,26 +2063,35 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
20222063
\\"size-icon-20\\": \\"1.25rem\\",
20232064
\\"size-square-170\\": \\"4rem\\",
20242065
\\"size-sidebar-compact\\": \\"4.75rem\\",
2066+
\\"size-base-90\\": \\"2.25rem\\",
20252067
\\"size-icon-10\\": \\"1rem\\",
20262068
\\"size-square-25\\": \\"0.375rem\\",
20272069
\\"size-square-160\\": \\"3.75rem\\",
20282070
\\"size-50\\": \\"31.5rem\\",
2071+
\\"size-base-80\\": \\"2rem\\",
20292072
\\"size-icon-110\\": \\"4rem\\",
20302073
\\"size-square-150\\": \\"3.5rem\\",
20312074
\\"size-40\\": \\"25rem\\",
2075+
\\"size-base-70\\": \\"1.75rem\\",
20322076
\\"size-icon-100\\": \\"3.25rem\\",
20332077
\\"size-square-140\\": \\"3.25rem\\",
20342078
\\"size-30\\": \\"18.5rem\\",
2079+
\\"size-base-60\\": \\"1.5rem\\",
20352080
\\"size-topbar\\": \\"4.75rem\\",
20362081
\\"size-square-130\\": \\"3rem\\",
20372082
\\"size-20\\": \\"12rem\\",
2083+
\\"size-base-50\\": \\"1.25rem\\",
20382084
\\"size-square-120\\": \\"2.75rem\\",
20392085
\\"size-10\\": \\"5.5rem\\",
2086+
\\"size-base-40\\": \\"1rem\\",
20402087
\\"size-square-110\\": \\"2.5rem\\",
20412088
\\"size-square-0\\": \\"0\\",
2089+
\\"size-base-30\\": \\"0.75rem\\",
20422090
\\"size-icon-05\\": \\"0.75rem\\",
20432091
\\"size-square-100\\": \\"2.25rem\\",
2092+
\\"size-base-20\\": \\"0.5rem\\",
20442093
\\"size-square-200\\": \\"4.75rem\\",
2094+
\\"size-base-10\\": \\"0.25rem\\",
20452095
\\"size-sidebar\\": \\"15rem\\",
20462096
\\"size-square-90\\": \\"2rem\\",
20472097
\\"size-square-80\\": \\"1.75rem\\",

‎packages/paste-design-tokens/tokens/aliases/sizing.yml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,14 @@ aliases:
3939
size-sidebar-compact: "4.75rem" #76px
4040
size-sidebar: "15rem" #240px
4141
size-topbar: "4.75rem" #76px
42+
43+
size-base-0: "0" #0
44+
size-base-10: "0.25rem" #4px
45+
size-base-20: "0.5rem" #8px
46+
size-base-30: "0.75rem" #12px
47+
size-base-40: "1rem" #16px
48+
size-base-50: "1.25rem" #20px
49+
size-base-60: "1.5rem" #24px
50+
size-base-70: "1.75rem" #28px
51+
size-base-80: "2rem" #32px
52+
size-base-90: "2.25rem" #36px (height of form inputs)

‎packages/paste-design-tokens/tokens/global/sizing.yml

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,43 +7,43 @@ imports:
77
props:
88
size-0:
99
value: "{!size-0}"
10-
comment: Generic sizing token scale for UI components.
10+
comment: Generic sizing token for layouts and containers.
1111
size-10:
1212
value: "{!size-10}"
13-
comment: Generic sizing token scale for UI components.
13+
comment: Generic sizing token for layouts and containers.
1414
size-20:
1515
value: "{!size-20}"
16-
comment: Generic sizing token scale for UI components.
16+
comment: Generic sizing token for layouts and containers.
1717
size-30:
1818
value: "{!size-30}"
19-
comment: Generic sizing token scale for UI components.
19+
comment: Generic sizing token for layouts and containers.
2020
size-40:
2121
value: "{!size-40}"
22-
comment: Generic sizing token scale for UI components.
22+
comment: Generic sizing token for layouts and containers.
2323
size-50:
2424
value: "{!size-50}"
25-
comment: Generic sizing token scale for UI components.
25+
comment: Generic sizing token for layouts and containers.
2626
size-60:
2727
value: "{!size-60}"
28-
comment: Generic sizing token scale for UI components.
28+
comment: Generic sizing token for layouts and containers.
2929
size-70:
3030
value: "{!size-70}"
31-
comment: Generic sizing token scale for UI components.
31+
comment: Generic sizing token for layouts and containers.
3232
size-80:
3333
value: "{!size-80}"
34-
comment: Generic sizing token scale for UI components.
34+
comment: Generic sizing token for layouts and containers.
3535
size-90:
3636
value: "{!size-90}"
37-
comment: Generic sizing token scale for UI components.
37+
comment: Generic sizing token for layouts and containers.
3838
size-100:
3939
value: "{!size-100}"
40-
comment: Generic sizing token scale for UI components.
40+
comment: Generic sizing token for layouts and containers.
4141
size-110:
4242
value: "{!size-110}"
43-
comment: Generic sizing token scale for UI components.
43+
comment: Generic sizing token for layouts and containers.
4444
size-120:
4545
value: "{!size-120}"
46-
comment: Generic sizing token scale for UI components.
46+
comment: Generic sizing token for layouts and containers.
4747

4848
#square sizes
4949
size-square-0:
@@ -161,3 +161,35 @@ props:
161161
size-topbar:
162162
value: "{!size-topbar}"
163163
comment: "Sizing token for the minimum topbar height."
164+
165+
# base
166+
size-base-0:
167+
value: "{!size-base-0}"
168+
comment: Generic sizing token for UI components
169+
size-base-10:
170+
value: "{!size-base-10}"
171+
comment: Generic sizing token for UI components
172+
size-base-20:
173+
value: "{!size-base-20}"
174+
comment: Generic sizing token for UI components
175+
size-base-30:
176+
value: "{!size-base-30}"
177+
comment: Generic sizing token for UI components
178+
size-base-40:
179+
value: "{!size-base-40}"
180+
comment: Generic sizing token for UI components
181+
size-base-50:
182+
value: "{!size-base-50}"
183+
comment: Generic sizing token for UI components
184+
size-base-60:
185+
value: "{!size-base-60}"
186+
comment: Generic sizing token for UI components
187+
size-base-70:
188+
value: "{!size-base-70}"
189+
comment: Generic sizing token for UI components
190+
size-base-80:
191+
value: "{!size-base-80}"
192+
comment: Generic sizing token for UI components
193+
size-base-90:
194+
value: "{!size-base-90}"
195+
comment: Generic sizing token for UI components

‎packages/paste-website/src/pages/introduction/about-paste/index.mdx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -282,14 +282,18 @@ Systems should never have single points of failure. Good documentation, reliable
282282
</DisclosureHeading>
283283
<DisclosureContent>
284284
<Paragraph>
285-
Paste leaves loading the font files up to the consumer of the system, to accomodate any technical or licensing
285+
Paste leaves loading the font files up to the consumer of the system, to accommodate any technical or licensing
286286
restrictions a product might have.
287287
</Paragraph>
288-
<Paragraph>
289-
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
290-
ways into your application. Please choose the one that best suits your preferred choice of asset delivery, or
291-
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>
292-
on this website.
288+
<Paragraph>
289+
For the default theme, Paste uses Inter. This is available as a{" "}
290+
<Anchor href="https://fonts.google.com/specimen/Inter">Google web font</Anchor>, which can be loaded in a number
291+
of ways into your application. Please choose the one that best suits your preferred choice of asset delivery, or
292+
follow{" "}
293+
<Anchor href="https://paste.twilio.design/introduction/for-engineers/manual-installation#how-to-load-the-right-font">
294+
these instructions on how to load the right font
295+
</Anchor>
296+
.
293297
</Paragraph>
294298
</DisclosureContent>
295299
</Disclosure>

‎packages/paste-website/stories/TokenCard.stories.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,12 @@ SizingTokenSquare.args = {
193193
name: "size-square-200",
194194
};
195195

196+
export const SizingTokenBase = Template.bind({});
197+
SizingTokenBase.args = {
198+
category: "sizings",
199+
name: "size-base-90",
200+
};
201+
196202
export const SpacingToken = Template.bind({});
197203
SpacingToken.args = {
198204
category: "spacings",

0 commit comments

Comments
 (0)