Homepage design update 3 (#3773)

twilio-labs · Feb 21, 2024 · e954efd · e954efd
1 parent 95d8d63
commit e954efd
Show file tree

Hide file tree

Showing 31 changed files with 1,319 additions and 406 deletions.
diff --git a/.changeset/brave-forks-care.md b/.changeset/brave-forks-care.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Design tokens] add new border radius tokens (40-90) for new homepage and ai kit'
diff --git a/packages/paste-core/components/skeleton-loader/type-docs.json b/packages/paste-core/components/skeleton-loader/type-docs.json
@@ -367,35 +367,35 @@
       "externalProp": true
     },
     "borderBottomLeftRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
       "description": "Responsive prop of BorderRadius tokens for the CSS `border-bottom-left-radius` property"
     },
     "borderBottomRightRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
       "description": "Responsive prop of BorderRadius tokens for the CSS `border-bottom-right-radius` property"
     },
     "borderRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": "borderRadius20",
       "required": false,
       "externalProp": false,
       "description": "Responsive prop of BorderRadius tokens for the CSS `border-radius` property"
     },
     "borderTopLeftRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
       "description": "Responsive prop of BorderRadius tokens for the CSS `border-top-left-radius` property"
     },
     "borderTopRightRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
@@ -783,14 +783,14 @@
       "description": "Responsive prop of BorderColor tokens for the CSS `border-bottom-color` property"
     },
     "borderBottomLeftRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
       "description": "Responsive prop of BorderRadius tokens for the CSS `border-bottom-left-radius` property"
     },
     "borderBottomRightRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -853,7 +853,7 @@
       "description": "Responsive prop of BorderWidth tokens for the CSS `border-left-width` property"
     },
     "borderRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -916,14 +916,14 @@
       "description": "Responsive prop of BorderColor tokens for the CSS `border-top-color` property"
     },
     "borderTopLeftRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
       "description": "Responsive prop of BorderRadius tokens for the CSS `border-top-left-radius` property"
     },
     "borderTopRightRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -885,14 +885,14 @@
       "description": "Responsive prop of BorderColor tokens for the CSS `border-bottom-color` property"
     },
     "borderBottomLeftRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
       "description": "Responsive prop of BorderRadius tokens for the CSS `border-bottom-left-radius` property"
     },
     "borderBottomRightRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -955,7 +955,7 @@
       "description": "Responsive prop of BorderWidth tokens for the CSS `border-left-width` property"
     },
     "borderRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -1018,14 +1018,14 @@
       "description": "Responsive prop of BorderColor tokens for the CSS `border-top-color` property"
     },
     "borderTopLeftRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
       "description": "Responsive prop of BorderRadius tokens for the CSS `border-top-left-radius` property"
     },
     "borderTopRightRadius": {
-      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }",
+      "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -107,12 +107,18 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-border-decorative-10-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-border-decorative-20-weaker\\": \\"rgb(0, 20, 137)\\",
   \\"color-border-decorative-30-weaker\\": \\"rgb(13, 58, 31)\\",
-  \\"border-radius-0\\": \\"0\\",
-  \\"border-radius-10\\": \\"2px\\",
-  \\"border-radius-20\\": \\"4px\\",
-  \\"border-radius-30\\": \\"8px\\",
   \\"border-radius-circle\\": \\"50%\\",
+  \\"border-radius-90\\": \\"32px\\",
+  \\"border-radius-80\\": \\"28px\\",
   \\"border-radius-pill\\": \\"100px\\",
+  \\"border-radius-70\\": \\"24px\\",
+  \\"border-radius-60\\": \\"20px\\",
+  \\"border-radius-50\\": \\"16px\\",
+  \\"border-radius-40\\": \\"12px\\",
+  \\"border-radius-0\\": \\"0\\",
+  \\"border-radius-30\\": \\"8px\\",
+  \\"border-radius-20\\": \\"4px\\",
+  \\"border-radius-10\\": \\"2px\\",
   \\"border-width-0\\": \\"0\\",
   \\"border-width-10\\": \\"1px\\",
   \\"border-width-20\\": \\"2px\\",
@@ -521,12 +527,18 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-border-decorative-10-weaker\\": \\"rgb(225, 227, 234)\\",
   \\"color-border-decorative-20-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-border-decorative-30-weaker\\": \\"rgb(209, 250, 224)\\",
-  \\"border-radius-0\\": \\"0\\",
-  \\"border-radius-10\\": \\"2px\\",
-  \\"border-radius-20\\": \\"4px\\",
-  \\"border-radius-30\\": \\"8px\\",
   \\"border-radius-circle\\": \\"50%\\",
+  \\"border-radius-90\\": \\"32px\\",
+  \\"border-radius-80\\": \\"28px\\",
   \\"border-radius-pill\\": \\"100px\\",
+  \\"border-radius-70\\": \\"24px\\",
+  \\"border-radius-60\\": \\"20px\\",
+  \\"border-radius-50\\": \\"16px\\",
+  \\"border-radius-40\\": \\"12px\\",
+  \\"border-radius-0\\": \\"0\\",
+  \\"border-radius-30\\": \\"8px\\",
+  \\"border-radius-20\\": \\"4px\\",
+  \\"border-radius-10\\": \\"2px\\",
   \\"border-width-0\\": \\"0\\",
   \\"border-width-10\\": \\"1px\\",
   \\"border-width-20\\": \\"2px\\",
@@ -935,12 +947,18 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-border-decorative-10-weaker\\": \\"rgb(225, 227, 234)\\",
   \\"color-border-decorative-20-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-border-decorative-30-weaker\\": \\"rgb(209, 250, 224)\\",
-  \\"border-radius-0\\": \\"0\\",
-  \\"border-radius-10\\": \\"2px\\",
-  \\"border-radius-20\\": \\"4px\\",
-  \\"border-radius-30\\": \\"8px\\",
   \\"border-radius-circle\\": \\"50%\\",
+  \\"border-radius-90\\": \\"32px\\",
+  \\"border-radius-80\\": \\"28px\\",
   \\"border-radius-pill\\": \\"100px\\",
+  \\"border-radius-70\\": \\"24px\\",
+  \\"border-radius-60\\": \\"20px\\",
+  \\"border-radius-50\\": \\"16px\\",
+  \\"border-radius-40\\": \\"12px\\",
+  \\"border-radius-0\\": \\"0\\",
+  \\"border-radius-30\\": \\"8px\\",
+  \\"border-radius-20\\": \\"4px\\",
+  \\"border-radius-10\\": \\"2px\\",
   \\"border-width-0\\": \\"0\\",
   \\"border-width-10\\": \\"1px\\",
   \\"border-width-20\\": \\"2px\\",
@@ -1349,12 +1367,18 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-border-decorative-10-weaker\\": \\"rgb(31, 48, 76)\\",
   \\"color-border-decorative-20-weaker\\": \\"rgb(4, 60, 181)\\",
   \\"color-border-decorative-30-weaker\\": \\"rgb(14, 124, 58)\\",
-  \\"border-radius-0\\": \\"0\\",
-  \\"border-radius-10\\": \\"2px\\",
-  \\"border-radius-20\\": \\"4px\\",
-  \\"border-radius-30\\": \\"8px\\",
   \\"border-radius-circle\\": \\"50%\\",
+  \\"border-radius-90\\": \\"32px\\",
+  \\"border-radius-80\\": \\"28px\\",
   \\"border-radius-pill\\": \\"100px\\",
+  \\"border-radius-70\\": \\"24px\\",
+  \\"border-radius-60\\": \\"20px\\",
+  \\"border-radius-50\\": \\"16px\\",
+  \\"border-radius-40\\": \\"12px\\",
+  \\"border-radius-0\\": \\"0\\",
+  \\"border-radius-30\\": \\"8px\\",
+  \\"border-radius-20\\": \\"4px\\",
+  \\"border-radius-10\\": \\"2px\\",
   \\"border-width-0\\": \\"0\\",
   \\"border-width-10\\": \\"1px\\",
   \\"border-width-20\\": \\"2px\\",
@@ -1763,12 +1787,18 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-border-decorative-10-weaker\\": \\"rgb(225, 227, 234)\\",
   \\"color-border-decorative-20-weaker\\": \\"rgb(204, 228, 255)\\",
   \\"color-border-decorative-30-weaker\\": \\"rgb(209, 250, 224)\\",
-  \\"border-radius-0\\": \\"0\\",
-  \\"border-radius-10\\": \\"2px\\",
-  \\"border-radius-20\\": \\"4px\\",
-  \\"border-radius-30\\": \\"8px\\",
   \\"border-radius-circle\\": \\"50%\\",
+  \\"border-radius-90\\": \\"32px\\",
+  \\"border-radius-80\\": \\"28px\\",
   \\"border-radius-pill\\": \\"100px\\",
+  \\"border-radius-70\\": \\"24px\\",
+  \\"border-radius-60\\": \\"20px\\",
+  \\"border-radius-50\\": \\"16px\\",
+  \\"border-radius-40\\": \\"12px\\",
+  \\"border-radius-0\\": \\"0\\",
+  \\"border-radius-30\\": \\"8px\\",
+  \\"border-radius-20\\": \\"4px\\",
+  \\"border-radius-10\\": \\"2px\\",
   \\"border-width-0\\": \\"0\\",
   \\"border-width-10\\": \\"1px\\",
   \\"border-width-20\\": \\"2px\\",

diff --git a/packages/paste-design-tokens/tokens/aliases/border-radius.yml b/packages/paste-design-tokens/tokens/aliases/border-radius.yml
@@ -3,5 +3,11 @@ aliases:
   border-radius-10: "2px"
   border-radius-20: "4px"
   border-radius-30: "8px"
+  border-radius-40: "12px"
+  border-radius-50: "16px"
+  border-radius-60: "20px"
+  border-radius-70: "24px"
+  border-radius-80: "28px"
+  border-radius-90: "32px"
   border-radius-circle: "50%"
   border-radius-pill: "100px"
diff --git a/packages/paste-design-tokens/tokens/global/border-radius.yml b/packages/paste-design-tokens/tokens/global/border-radius.yml
@@ -9,13 +9,31 @@ props:
     comment: Border radius reset
   border-radius-10:
     value: "{!border-radius-10}"
-    comment: Small border radius
+    comment: Smallest border radius
   border-radius-20:
     value: "{!border-radius-20}"
-    comment: Large border radius
+    comment: Small border radius
   border-radius-30:
     value: "{!border-radius-30}"
+    comment: Small-medium border radius
+  border-radius-40:
+    value: "{!border-radius-40}"
+    comment: Medium border radius
+  border-radius-50:
+    value: "{!border-radius-50}"
+    comment: Medium-large border radius
+  border-radius-60:
+    value: "{!border-radius-60}"
+    comment: Large border radiusr
+  border-radius-70:
+    value: "{!border-radius-70}"
     comment: Larger border radius
+  border-radius-80:
+    value: "{!border-radius-80}"
+    comment: Extra-large border radius
+  border-radius-90:
+    value: "{!border-radius-90}"
+    comment: Largest border radius
   border-radius-circle:
     value: "{!border-radius-circle}"
     comment: Circular border radius

diff --git a/packages/paste-website/public/images/avatars/entity-avatar.png b/packages/paste-website/public/images/avatars/entity-avatar.png