feat: branding and marketing related updates (#3788)

* feat: added ArtificialIntelligenceIcon, AvailableIcon, ProductSendGridIcon * feat: branding related color token changes * fix: typo * chore: changeset * chore: lints, snapshots, type docs etc * feat: link to the assistant * chore: lint
twilio-labs · Feb 23, 2024 · 67c25a7 · 67c25a7
1 parent e954efd
commit 67c25a7
Show file tree

Hide file tree

Showing 32 changed files with 324 additions and 27 deletions.
diff --git a/.changeset/four-walls-lick.md b/.changeset/four-walls-lick.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/heading": patch
+"@twilio-paste/core": patch
+---
+
+[Heading]: minor adjustment to the bottom margin of the variant 20 heading
diff --git a/.changeset/swift-lobsters-prove.md b/.changeset/swift-lobsters-prove.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[design-tokens]: added three new branding accent background colors and a new text color token to be used on top of those. Updated 3 branding background colors in the Twilio and twilio-dark themes
diff --git a/.changeset/thirty-poets-notice.md b/.changeset/thirty-poets-notice.md
@@ -0,0 +1,5 @@
+---
+"@twilio-paste/icons": minor
+---
+
+Added ArtificialIntelligenceIcon, AvailableIcon and ProductSendGridIcon
diff --git a/packages/paste-core/components/heading/__tests__/heading.test.tsx b/packages/paste-core/components/heading/__tests__/heading.test.tsx
@@ -33,7 +33,7 @@ describe("Heading", () => {
       );
       const renderedHeading = screen.getByRole("heading", { level: 2 });
       expect(renderedHeading).not.toBeNull();
-      expect(renderedHeading).toHaveStyleRule("margin-bottom", "1.5rem");
+      expect(renderedHeading).toHaveStyleRule("margin-bottom", "1.25rem");
       expect(renderedHeading).toHaveStyleRule("font-size", "1.5rem");
       expect(renderedHeading).toHaveStyleRule("font-weight", "600");
       expect(renderedHeading).toHaveStyleRule("line-height", "2rem");
@@ -115,7 +115,7 @@ describe("Heading", () => {
       const renderedHeadingIdiomatic = screen.getByText("This is an italic H2").closest("i");
       expect(renderedHeading).not.toBeNull();
       expect(renderedHeadingIdiomatic).not.toBeNull();
-      expect(renderedHeading).toHaveStyleRule("margin-bottom", "1.5rem");
+      expect(renderedHeading).toHaveStyleRule("margin-bottom", "1.25rem");
       expect(renderedHeading).toHaveStyleRule("font-size", "1.5rem");
       expect(renderedHeading).toHaveStyleRule("font-weight", "600");
       expect(renderedHeading).toHaveStyleRule("line-height", "2rem");

diff --git a/packages/paste-core/components/heading/src/Heading.tsx b/packages/paste-core/components/heading/src/Heading.tsx
@@ -53,7 +53,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
     case "heading20":
     default:
       return {
-        marginBottom: marginBottom || "space70",
+        marginBottom: marginBottom || "space60",
         fontSize: "fontSize70",
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight70",

diff --git a/packages/paste-core/components/spinner/type-docs.json b/packages/paste-core/components/spinner/type-docs.json
@@ -381,7 +381,7 @@
       "externalProp": true
     },
     "color": {
-      "type": "\"colorText\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | \"colorTextDecorative40\" | ... 57 more ... | { ...; }",
+      "type": "\"colorText\" | \"colorTextBrand\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | \"colorTextDecorative40\" | ... 57 more ... | { ...; }",
       "defaultValue": "currentColor",
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
@@ -727,7 +727,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrandHighlight\" | ... 52 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 55 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -985,7 +985,7 @@
       "description": "Responsive style prop for the CSS `clip` property"
     },
     "color": {
-      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrand\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 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
@@ -829,7 +829,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrandHighlight\" | ... 52 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | \"colorBackgroundBrand10\" | ... 55 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -1087,7 +1087,7 @@
       "description": "Responsive style prop for the CSS `clip` property"
     },
     "color": {
-      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrand\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,

diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
@@ -544,7 +544,7 @@
       "externalProp": true
     },
     "color": {
-      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 more ... | { ...; }",
+      "type": "\"inherit\" | \"transparent\" | \"colorText\" | \"colorTextBrand\" | \"colorTextBrandHighlight\" | \"colorTextBrandInverse\" | \"colorTextDecorative10\" | \"colorTextDecorative20\" | \"colorTextDecorative30\" | ... 56 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
@@ -47,10 +47,13 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
@@ -376,6 +379,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-text-link\\": \\"rgb(0, 140, 255)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(204, 228, 255)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-error\\": \\"rgb(235, 86, 86)\\",
   \\"color-text-icon-inverse\\": \\"rgb(225, 227, 234)\\",
@@ -467,10 +471,13 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(244, 244, 246)\\",
   \\"color-background\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
@@ -796,6 +803,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-text-link\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(0, 20, 137)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-text-error\\": \\"rgb(214, 31, 31)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
@@ -887,10 +895,13 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(244, 244, 246)\\",
   \\"color-background\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
@@ -1216,6 +1227,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-text-link\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(0, 20, 137)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-text-error\\": \\"rgb(214, 31, 31)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
@@ -1288,7 +1300,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-success-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive-strongest\\": \\"rgb(254, 236, 236)\\",
   \\"color-background-error-strong\\": \\"rgb(245, 138, 138)\\",
-  \\"color-background-brand-strong\\": \\"rgb(31, 48, 76)\\",
+  \\"color-background-brand-strong\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(18, 28, 45)\\",
@@ -1307,10 +1319,13 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(225, 227, 234)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
@@ -1636,6 +1651,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-text-link\\": \\"rgb(0, 140, 255)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(102, 179, 255)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-text-error\\": \\"rgb(235, 86, 86)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",
@@ -1708,8 +1724,8 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-success-weakest\\": \\"rgb(237, 253, 243)\\",
   \\"color-background-destructive-strongest\\": \\"rgb(49, 12, 12)\\",
   \\"color-background-error-strong\\": \\"rgb(117, 12, 12)\\",
-  \\"color-background-brand-strong\\": \\"rgb(3, 11, 93)\\",
-  \\"color-background-brand\\": \\"rgb(0, 20, 137)\\",
+  \\"color-background-brand-strong\\": \\"rgb(18, 28, 45)\\",
+  \\"color-background-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error\\": \\"rgb(199, 35, 35)\\",
   \\"color-background-neutral-weakest\\": \\"rgb(244, 249, 255)\\",
   \\"color-background-available\\": \\"rgb(20, 176, 83)\\",
@@ -1727,17 +1743,20 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-decorative-10-weakest\\": \\"rgb(244, 244, 246)\\",
   \\"color-background\\": \\"rgb(244, 244, 246)\\",
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
+  \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
+  \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
   \\"color-background-strongest\\": \\"rgb(75, 86, 113)\\",
+  \\"color-background-brand-10\\": \\"rgb(242, 190, 90)\\",
   \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
-  \\"color-background-brand-stronger\\": \\"rgb(6, 3, 58)\\",
+  \\"color-background-brand-stronger\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-error-stronger\\": \\"rgb(74, 11, 11)\\",
   \\"color-border-warning-weak\\": \\"rgb(255, 179, 122)\\",
   \\"color-border-decorative-40-weaker\\": \\"rgb(231, 220, 250)\\",
@@ -2056,6 +2075,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-text-link\\": \\"rgb(2, 99, 224)\\",
   \\"color-text-icon-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-text-neutral\\": \\"rgb(3, 11, 93)\\",
+  \\"color-text-brand\\": \\"rgb(18, 28, 45)\\",
   \\"color-text-link-strongest\\": \\"rgb(6, 3, 58)\\",
   \\"color-text-error\\": \\"rgb(199, 35, 35)\\",
   \\"color-text-icon-inverse\\": \\"rgb(136, 145, 170)\\",

diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -50,6 +50,15 @@ props:
   color-background-brand-highlight-weakest:
     value: "{!amaranth-transparent-10}"
     comment: Weakest background color used for brand highlights.
+  color-background-brand-10:
+    value: "{!saffron}"
+    comment: Brand accent background color representing Twilio.
+  color-background-brand-20:
+    value: "{!sky}"
+    comment: Brand accent background color representing Sendgrid.
+  color-background-brand-30:
+    value: "{!mint}"
+    comment: Brand accent background color representing Segment.
 
   # user background
   color-background-user:

diff --git a/packages/paste-design-tokens/tokens/global/text-color.yml b/packages/paste-design-tokens/tokens/global/text-color.yml
@@ -81,6 +81,13 @@ props:
     text_contrast_pairing:
       - color-background-body-inverse
       - color-background-brand
+  color-text-brand:
+    value: "{!palette-gray-100}"
+    comment: Text color to be used on top of brand accent background colors such as color-background-brand-10 only.
+    text_contrast_pairing:
+      - color-background-brand-10
+      - color-background-brand-20
+      - color-background-brand-30
   color-text-brand-highlight:
     value: "{!amaranth}"
     comment: Twilio brand red, accessible on large text only.

diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
@@ -12,6 +12,17 @@ props:
     value: "{!palette-gray-90}"
     comment: Strong inverse background color for any container. Must be used on color-background-body-inverse.
 
+  # brand backgrounds
+  color-background-brand:
+    value: "{!palette-gray-100}"
+    comment: Primary brand background, accessible with inverse text.
+  color-background-brand-strong:
+    value: "{!palette-gray-100}"
+    comment: Strong primary brand background, accessible with inverse text.
+  color-background-brand-stronger:
+    value: "{!palette-gray-100}"
+    comment: Stronger primary brand background, accessible with inverse text.
+
   # account backgrounds
   color-background-subaccount:
     value: "{!palette-gray-100}"

diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
@@ -13,6 +13,17 @@ props:
     value: "{!palette-gray-90}"
     comment: Strong inverse background color for any container. Must be used on color-background-body-inverse.
 
+  # brand backgrounds
+  color-background-brand:
+    value: "{!palette-gray-100}"
+    comment: Primary brand background, accessible with inverse text.
+  color-background-brand-strong:
+    value: "{!palette-gray-100}"
+    comment: Strong primary brand background, accessible with inverse text.
+  color-background-brand-stronger:
+    value: "{!palette-gray-100}"
+    comment: Stronger primary brand background, accessible with inverse text.
+
   # user background
   color-background-user:
     value: "{!palette-purple-05}"

diff --git a/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap b/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap
@@ -14,9 +14,11 @@ Array [
   "ArrowDownIcon",
   "ArrowForwardIcon",
   "ArrowUpIcon",
+  "ArtificialIntelligenceIcon",
   "AttachIcon",
   "AttachmentIcon",
   "AutomaticUpdatesIcon",
+  "AvailableIcon",
   "BoldIcon",
   "BuildIcon",
   "BuiltInIcon",
@@ -213,6 +215,7 @@ Array [
   "ProductReverseETLIcon",
   "ProductSDKIcon",
   "ProductSegmentIcon",
+  "ProductSendGridIcon",
   "ProductSettingsIcon",
   "ProductSourceSchemaIcon",
   "ProductSourcesIcon",