Skip to content

Commit

Permalink
Homepage design update 3 (#3773)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkrantz
nkrantz authored Feb 21, 2024
1 parent 95d8d63 commit e954efd
Show file tree
Hide file tree
Showing 31 changed files with 1,319 additions and 406 deletions.
6 changes: 6 additions & 0 deletions .changeset/brave-forks-care.md
View file
Original file line number Diff line number Diff line change
@@ -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'
10 changes: 5 additions & 5 deletions packages/paste-core/components/skeleton-loader/type-docs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 5 additions & 5 deletions packages/paste-core/primitives/box/type-docs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
10 changes: 5 additions & 5 deletions packages/paste-core/primitives/sibling-box/type-docs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
70 changes: 50 additions & 20 deletions packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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\\",
Expand Down Expand Up @@ -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\\",
Expand Down Expand Up @@ -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\\",
Expand Down Expand Up @@ -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\\",
Expand Down Expand Up @@ -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\\",
Expand Down
6 changes: 6 additions & 0 deletions packages/paste-design-tokens/tokens/aliases/border-radius.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
22 changes: 20 additions & 2 deletions packages/paste-design-tokens/tokens/global/border-radius.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Binary file added packages/paste-website/public/images/avatars/entity-avatar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit e954efd

Please sign in to comment.