From b57b88da3fc6341dbd6e337d060888b90eda03a7 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 17 Jul 2024 12:07:49 +0530 Subject: [PATCH 01/12] feat(tokens): add base size token alias --- .../paste-design-tokens/tokens/aliases/sizing.yml | 11 +++++++++++ 1 file changed, 11 insertions(+) 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) From 332d06db89331a3f218b989309bc86eb412729a8 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 17 Jul 2024 12:08:32 +0530 Subject: [PATCH 02/12] feat(tokens): add global size tokens and update descriptions --- .../tokens/global/sizing.yml | 132 +++++++++++------- 1 file changed, 82 insertions(+), 50 deletions(-) diff --git a/packages/paste-design-tokens/tokens/global/sizing.yml b/packages/paste-design-tokens/tokens/global/sizing.yml index f4ad7e345e..6b173e615f 100644 --- a/packages/paste-design-tokens/tokens/global/sizing.yml +++ b/packages/paste-design-tokens/tokens/global/sizing.yml @@ -7,157 +7,189 @@ 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: value: "{!size-square-0}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-10: value: "{!size-square-10}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-20: value: "{!size-square-20}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-25: value: "{!size-square-25}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-30: value: "{!size-square-30}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-40: value: "{!size-square-40}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-50: value: "{!size-square-50}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-60: value: "{!size-square-60}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-70: value: "{!size-square-70}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-80: value: "{!size-square-80}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-90: value: "{!size-square-90}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-100: value: "{!size-square-100}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-110: value: "{!size-square-110}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-120: value: "{!size-square-120}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-130: value: "{!size-square-130}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-140: value: "{!size-square-140}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-150: value: "{!size-square-150}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-160: value: "{!size-square-160}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-170: value: "{!size-square-170}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-180: value: "{!size-square-180}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-190: value: "{!size-square-190}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers size-square-200: value: "{!size-square-200}" - comment: Generic square sizing token scale for UI components. + comment: Generic sizing token for layouts and containers # icons size-icon-05: value: "{!line-height-05}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-10: value: "{!line-height-10}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-20: value: "{!line-height-20}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-30: value: "{!line-height-30}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-40: value: "{!line-height-40}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-50: value: "{!line-height-50}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-60: value: "{!line-height-60}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-70: value: "{!line-height-70}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-80: value: "{!line-height-80}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-90: value: "{!line-height-90}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-100: value: "{!line-height-100}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers size-icon-110: value: "{!line-height-110}" - comment: "Maps to line-height tokens 1:1" + comment: Generic sizing token for layouts and containers # sidebar size-sidebar: value: "{!size-sidebar}" - comment: "Sizing token for sidebar width." + comment: Generic sizing token for layouts and containers size-sidebar-compact: value: "{!size-sidebar-compact}" - comment: "Sizing token for the compact sidebar width." + comment: Generic sizing token for layouts and containers size-topbar: value: "{!size-topbar}" - comment: "Sizing token for the minimum topbar height." + comment: Generic sizing token for layouts and containers + + # base + size-base-0: + value: "{!size-base-0}" + comment: Generic sizing token for layouts and containers + size-base-10: + value: "{!size-base-10}" + comment: Generic sizing token for layouts and containers + size-base-20: + value: "{!size-base-20}" + comment: Generic sizing token for layouts and containers + size-base-30: + value: "{!size-base-30}" + comment: Generic sizing token for layouts and containers + size-base-40: + value: "{!size-base-40}" + comment: Generic sizing token for layouts and containers + size-base-50: + value: "{!size-base-50}" + comment: Generic sizing token for layouts and containers + size-base-60: + value: "{!size-base-60}" + comment: Generic sizing token for layouts and containers + size-base-70: + value: "{!size-base-70}" + comment: Generic sizing token for layouts and containers + size-base-80: + value: "{!size-base-80}" + comment: Generic sizing token for layouts and containers + size-base-90: + value: "{!size-base-90}" + comment: Generic sizing token for layouts and containers From 76089057b885367953f083dd22e98bbc3b650592 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 17 Jul 2024 12:23:37 +0530 Subject: [PATCH 03/12] feat(tokens): add base size token story --- packages/paste-website/stories/TokenCard.stories.tsx | 6 ++++++ 1 file changed, 6 insertions(+) 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", From 367dd4bd4fbccf9d6b61127b7e42b8385e2c9074 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 17 Jul 2024 12:23:54 +0530 Subject: [PATCH 04/12] feat(tokens): update snapshot --- .../__snapshots__/index.test.tsx.snap | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) 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\\", From 74ddf02f15a881159d45a4c4e7980a84ba63ba19 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 17 Jul 2024 12:31:34 +0530 Subject: [PATCH 05/12] feat(tokens): update changeset --- .changeset/pink-cooks-vanish.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/pink-cooks-vanish.md diff --git a/.changeset/pink-cooks-vanish.md b/.changeset/pink-cooks-vanish.md new file mode 100644 index 0000000000..096523fa10 --- /dev/null +++ b/.changeset/pink-cooks-vanish.md @@ -0,0 +1,8 @@ +--- +"@twilio-paste/design-tokens": minor +"@twilio-paste/website": minor +"@twilio-paste/core": minor +--- + +- Add new base sizing tokens +- Update description of existing sizing tokens From c500dd7d9a0cb3b2851192e6e58b965c8b12756d Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 17 Jul 2024 12:41:56 +0530 Subject: [PATCH 06/12] fix(docs): fix typo in about paste page --- .../paste-website/src/pages/introduction/about-paste/index.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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..9fbdc32d62 100644 --- a/packages/paste-website/src/pages/introduction/about-paste/index.mdx +++ b/packages/paste-website/src/pages/introduction/about-paste/index.mdx @@ -288,8 +288,7 @@ Systems should never have single points of failure. Good documentation, reliable 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. + follow how we load the font on this website. From 6aeb1699a14656e51802ff0d2a099243ca408ae1 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 17 Jul 2024 21:45:18 +0530 Subject: [PATCH 07/12] fix(docs): update changeset content --- .changeset/pink-cooks-vanish.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/pink-cooks-vanish.md b/.changeset/pink-cooks-vanish.md index 096523fa10..65fe67e8d4 100644 --- a/.changeset/pink-cooks-vanish.md +++ b/.changeset/pink-cooks-vanish.md @@ -4,5 +4,4 @@ "@twilio-paste/core": minor --- -- Add new base sizing tokens -- Update description of existing sizing tokens +- [Design Tokens] Add new base sizing tokens and update description of existing sizing tokens From 1209f87cd03aa09dac3b79956f2512fad4937f5b Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Wed, 17 Jul 2024 21:49:59 +0530 Subject: [PATCH 08/12] fix(docs): revert back sizing token description --- .../tokens/global/sizing.yml | 120 +++++++++--------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/packages/paste-design-tokens/tokens/global/sizing.yml b/packages/paste-design-tokens/tokens/global/sizing.yml index 6b173e615f..e0914def1a 100644 --- a/packages/paste-design-tokens/tokens/global/sizing.yml +++ b/packages/paste-design-tokens/tokens/global/sizing.yml @@ -7,189 +7,189 @@ imports: props: size-0: value: "{!size-0}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-10: value: "{!size-10}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-20: value: "{!size-20}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-30: value: "{!size-30}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-40: value: "{!size-40}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-50: value: "{!size-50}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-60: value: "{!size-60}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-70: value: "{!size-70}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-80: value: "{!size-80}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-90: value: "{!size-90}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-100: value: "{!size-100}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-110: value: "{!size-110}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. size-120: value: "{!size-120}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token for layouts and containers. #square sizes size-square-0: value: "{!size-square-0}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-10: value: "{!size-square-10}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-20: value: "{!size-square-20}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-25: value: "{!size-square-25}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-30: value: "{!size-square-30}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-40: value: "{!size-square-40}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-50: value: "{!size-square-50}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-60: value: "{!size-square-60}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-70: value: "{!size-square-70}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-80: value: "{!size-square-80}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-90: value: "{!size-square-90}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-100: value: "{!size-square-100}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-110: value: "{!size-square-110}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-120: value: "{!size-square-120}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-130: value: "{!size-square-130}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-140: value: "{!size-square-140}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-150: value: "{!size-square-150}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-160: value: "{!size-square-160}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-170: value: "{!size-square-170}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-180: value: "{!size-square-180}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-190: value: "{!size-square-190}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. size-square-200: value: "{!size-square-200}" - comment: Generic sizing token for layouts and containers + comment: Generic square sizing token scale for UI components. # icons size-icon-05: value: "{!line-height-05}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-10: value: "{!line-height-10}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-20: value: "{!line-height-20}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-30: value: "{!line-height-30}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-40: value: "{!line-height-40}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-50: value: "{!line-height-50}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-60: value: "{!line-height-60}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-70: value: "{!line-height-70}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-80: value: "{!line-height-80}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-90: value: "{!line-height-90}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-100: value: "{!line-height-100}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" size-icon-110: value: "{!line-height-110}" - comment: Generic sizing token for layouts and containers + comment: "Maps to line-height tokens 1:1" # sidebar size-sidebar: value: "{!size-sidebar}" - comment: Generic sizing token for layouts and containers + comment: "Sizing token for sidebar width." size-sidebar-compact: value: "{!size-sidebar-compact}" - comment: Generic sizing token for layouts and containers + comment: "Sizing token for the compact sidebar width." size-topbar: value: "{!size-topbar}" - comment: Generic sizing token for layouts and containers + comment: "Sizing token for the minimum topbar height." # base size-base-0: value: "{!size-base-0}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components size-base-10: value: "{!size-base-10}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components size-base-20: value: "{!size-base-20}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components size-base-30: value: "{!size-base-30}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components size-base-40: value: "{!size-base-40}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components size-base-50: value: "{!size-base-50}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components size-base-60: value: "{!size-base-60}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components size-base-70: value: "{!size-base-70}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components size-base-80: value: "{!size-base-80}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components size-base-90: value: "{!size-base-90}" - comment: Generic sizing token for layouts and containers + comment: Generic sizing token scale for UI components From 479fdc344d6eca941a3bf4eabaabc59d82a65175 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 18 Jul 2024 09:24:18 +0530 Subject: [PATCH 09/12] Update .changeset/pink-cooks-vanish.md Co-authored-by: Nora Krantz <75342690+nkrantz@users.noreply.github.com> --- .changeset/pink-cooks-vanish.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/pink-cooks-vanish.md b/.changeset/pink-cooks-vanish.md index 65fe67e8d4..c78c9d136b 100644 --- a/.changeset/pink-cooks-vanish.md +++ b/.changeset/pink-cooks-vanish.md @@ -1,6 +1,5 @@ --- "@twilio-paste/design-tokens": minor -"@twilio-paste/website": minor "@twilio-paste/core": minor --- From a62c86d019ad79f057bb4a67f03d4f2cf51b43a1 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 18 Jul 2024 09:37:37 +0530 Subject: [PATCH 10/12] feat(tokens): update size-base-* description --- .../tokens/global/sizing.yml | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/paste-design-tokens/tokens/global/sizing.yml b/packages/paste-design-tokens/tokens/global/sizing.yml index e0914def1a..ada0903d55 100644 --- a/packages/paste-design-tokens/tokens/global/sizing.yml +++ b/packages/paste-design-tokens/tokens/global/sizing.yml @@ -165,31 +165,31 @@ props: # base size-base-0: value: "{!size-base-0}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components size-base-10: value: "{!size-base-10}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components size-base-20: value: "{!size-base-20}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components size-base-30: value: "{!size-base-30}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components size-base-40: value: "{!size-base-40}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components size-base-50: value: "{!size-base-50}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components size-base-60: value: "{!size-base-60}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components size-base-70: value: "{!size-base-70}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components size-base-80: value: "{!size-base-80}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components size-base-90: value: "{!size-base-90}" - comment: Generic sizing token scale for UI components + comment: Generic sizing token for UI components From e1ce566b6015e458682906db123ff961bc2e4c70 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Thu, 18 Jul 2024 23:59:59 +0530 Subject: [PATCH 11/12] feat(docs): update docs about loading fonts --- .../src/pages/introduction/about-paste/index.mdx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) 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 9fbdc32d62..70073a6649 100644 --- a/packages/paste-website/src/pages/introduction/about-paste/index.mdx +++ b/packages/paste-website/src/pages/introduction/about-paste/index.mdx @@ -285,10 +285,15 @@ 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 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 + +. From 295810d5ccbe367e124aebde2f977697cadd1e97 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Fri, 19 Jul 2024 08:25:57 +0530 Subject: [PATCH 12/12] feat(docs): fix typo Co-authored-by: Sarah --- .../paste-website/src/pages/introduction/about-paste/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 70073a6649..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,7 +282,7 @@ 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.