twilio-labs · nkrantz · Feb 14, 2025 · Feb 14, 2025 · Feb 15, 2025 · Feb 15, 2025
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -33,6 +33,9 @@
   crossorigin="anonymous"
 />
 <link rel="stylesheet" href="https://assets.twilio.com/public_assets/paste-fonts/1.5.2/fonts.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap" rel="stylesheet" />
 <script>
   window.global = window;
   window.process = {

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -22,7 +22,7 @@ export const globalTypes = {
       // https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx
       icon: "paintbrush",
       // array of plain string values or MenuItem shape (see below)
-      items: ["default", "dark", "sendgrid", "evergreen", "twilio", "twilio-dark"],
+      items: ["default", "dark", "sendgrid", "evergreen", "twilio", "twilio-dark", "rebrand"],
     },
   },
   theme_layout: {

diff --git a/packages/paste-core/components/anchor/src/DefaultAnchor.tsx b/packages/paste-core/components/anchor/src/DefaultAnchor.tsx
@@ -14,6 +14,7 @@ const DefaultAnchor = React.forwardRef<HTMLAnchorElement, AnchorProps>((props, r
     outline="none"
     ref={ref}
     textDecoration="underline"
+    textUnderlineOffset="4px" // TODO: make work
     _active={{
       color: "colorTextLinkStrongest",
       textDecoration: "none",

diff --git a/packages/paste-core/components/button/__tests__/button.test.tsx b/packages/paste-core/components/button/__tests__/button.test.tsx
@@ -371,7 +371,7 @@ describe("Button", () => {
 
       expect(button).not.toHaveStyleRule("text-align", "left");
       expect(button).toHaveStyleRule("color", "colorText");
-      expect(button).toHaveStyleRule("background-color", "colorBackgroundBody");
+      expect(button).toHaveStyleRule("background-color", "colorBackgroundWeak");
       expect(button).toHaveStyleRule("box-shadow", "shadowBorderWeak");
 
       expect(getByText("Secondary")).toHaveStyleRule("justify-content", "center");

diff --git a/packages/paste-core/components/button/src/SecondaryButton.tsx b/packages/paste-core/components/button/src/SecondaryButton.tsx
@@ -12,11 +12,11 @@ import type { DirectButtonProps } from "./types";
  */
 const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
   color: "colorText",
-  backgroundColor: "colorBackgroundBody",
+  backgroundColor: "colorBackgroundWeak",
   boxShadow: "shadowBorderWeak",
   _hover: {
     color: "colorTextPrimary",
-    backgroundColor: "colorBackgroundBody",
+    backgroundColor: "colorBackgroundWeaker",
     boxShadow: "shadowBorderPrimary",
   },
   _focus: {
@@ -31,7 +31,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 
 const baseLoadingStyles: BoxStyleProps = {
   color: "colorTextPrimary",
-  backgroundColor: "colorBackgroundBody",
+  backgroundColor: "colorBackgroundWeaker",
   boxShadow: "shadowBorderWeak",
 };
 
@@ -44,7 +44,7 @@ const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
 
 const baseDisabledStyles: BoxStyleProps = {
   color: "colorTextWeaker",
-  backgroundColor: "colorBackgroundBody",
+  backgroundColor: "colorBackgroundWeaker",
   boxShadow: "shadowBorderWeaker",
 };
 

diff --git a/packages/paste-core/components/button/src/styles.ts b/packages/paste-core/components/button/src/styles.ts
@@ -42,8 +42,8 @@ export const SizeStyles: { [key in ButtonSizes]: BoxStyleProps } = {
   default: {
     paddingTop: "space30",
     paddingBottom: "space30",
-    paddingLeft: "space40",
-    paddingRight: "space40",
+    paddingLeft: "space70",
+    paddingRight: "space70",
     borderRadius: "borderRadius20",
     fontSize: "fontSize30",
     lineHeight: "lineHeight20",

diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx
@@ -84,7 +84,7 @@ const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
     borderColor: "colorBorderNewWeak",
   },
   neutral: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackground",
     color: "colorTextNeutral",
     borderColor: "colorBorderNeutralWeak",
   },
@@ -131,8 +131,9 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
         display="flex"
         marginY={marginY}
         padding="space70"
-        borderLeftStyle="solid"
+        // borderLeftStyle="solid"
         borderLeftWidth="borderWidth20"
+        borderRadius="borderRadius40"
         variant={variant}
         alignItems="start"
         columnGap="space50"
@@ -146,7 +147,7 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
           {children}
         </Box>
         {onDismiss && typeof onDismiss === "function" && (
-          <Button onClick={onDismiss} variant="secondary_icon" size="reset" element={`${element}_DISMISS_BUTTON`}>
+          <Button onClick={onDismiss} variant="secondary" size="circle_small" element={`${element}_DISMISS_BUTTON`}>
             <CloseIcon element={`${element}_DISMISS_ICON`} decorative size="sizeIcon20" />
             <ScreenReaderOnly>{i18nDismissLabel}</ScreenReaderOnly>
           </Button>

diff --git a/packages/paste-core/components/card/src/Card.tsx b/packages/paste-core/components/card/src/Card.tsx
@@ -45,7 +45,7 @@ const Card = React.forwardRef<HTMLElement, CardProps>(
         paddingLeft={paddingLeft}
         paddingRight={paddingRight}
         paddingTop={paddingTop}
-        backgroundColor="colorBackgroundBody"
+        backgroundColor="colorBackground"
       >
         {children}
       </Box>

diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
@@ -62,7 +62,7 @@ export const ChatComposerContainer = React.forwardRef<HTMLDivElement, ChatCompos
           }}
           padding="space30"
           maxHeight={maxHeight}
-          overflowY="auto"
+          // overflowY="auto"
           rowGap="space50"
           width="100%"
           {...Styles[variant]}

diff --git a/packages/paste-core/components/code-block/src/CodeBlock.tsx b/packages/paste-core/components/code-block/src/CodeBlock.tsx
@@ -97,7 +97,7 @@ const CodeBlockVariantStyles: Record<CodeBlockVariants, BoxStyleProps> = {
     gridTemplateColumns: "1fr auto",
     gridTemplateAreas: '"code-block button-group"',
     columnGap: "space40",
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius70",
     paddingY: "space60",
   },
   "multi-line": {

diff --git a/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx b/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx
@@ -36,8 +36,8 @@ export const CodeBlockHeader = React.forwardRef<HTMLHeadingElement, CodeBlockHea
       paddingY="space50"
       paddingX="space70"
       margin="space0"
-      borderTopLeftRadius="borderRadius20"
-      borderTopRightRadius="borderRadius20"
+      borderTopLeftRadius="borderRadius70"
+      borderTopRightRadius="borderRadius70"
       fontWeight="fontWeightSemibold"
       fontSize="fontSize30"
     >

diff --git a/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx b/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx
@@ -32,7 +32,7 @@ export const CodeBlockWrapper = React.forwardRef<HTMLDivElement, CodeBlockWrappe
       <Tabs variant="inverse" state={state}>
         <Box
           backgroundColor="colorBackgroundInverseStrong"
-          borderRadius="borderRadius20"
+          borderRadius="borderRadius70"
           overflow="hidden"
           element={element}
           ref={ref}

diff --git a/packages/paste-core/components/disclosure/src/DisclosureContent.tsx b/packages/paste-core/components/disclosure/src/DisclosureContent.tsx
@@ -12,8 +12,8 @@ export const AnimatedDisclosureContent = animated(Box);
 const baseContainedStyles: BoxStyleProps = {
   borderWidth: "borderWidth10",
   borderStyle: "solid",
-  borderBottomLeftRadius: "borderRadius20",
-  borderBottomRightRadius: "borderRadius20",
+  borderBottomLeftRadius: "borderRadius40",
+  borderBottomRightRadius: "borderRadius40",
   borderTop: "none",
   transition: "border-color 100ms ease-out",
 };

diff --git a/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx b/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx
@@ -15,7 +15,7 @@ import type { DisclosureVariants } from "./types";
 const baseContainedStyles: BoxStyleProps = {
   borderWidth: "borderWidth10",
   borderStyle: "solid",
-  borderRadius: "borderRadius20",
+  borderRadius: "borderRadius40",
 };
 
 const containedStyles: BoxStyleProps = {

diff --git a/packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx b/packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx
@@ -237,7 +237,7 @@ export const EditableCodeBlock: React.FC<EditableCodeBlockProps> = ({
   );
 
   return (
-    <Box element={element} borderRadius="borderRadius10" overflow="hidden">
+    <Box element={element} borderRadius="borderRadius70" overflow="hidden">
       <StylingGlobals styles={globalStyles} />
       <CodeEditor
         {...props}

diff --git a/packages/paste-core/components/editable-code-block/src/EditableCodeBlockHeader.tsx b/packages/paste-core/components/editable-code-block/src/EditableCodeBlockHeader.tsx
@@ -35,8 +35,8 @@ export const EditableCodeBlockHeader = React.forwardRef<HTMLHeadingElement, Edit
       paddingY="space50"
       paddingX="space70"
       margin="space0"
-      borderTopLeftRadius="borderRadius20"
-      borderTopRightRadius="borderRadius20"
+      borderTopLeftRadius="borderRadius70"
+      borderTopRightRadius="borderRadius70"
       fontWeight="fontWeightSemibold"
       fontSize="fontSize30"
       borderBottomWidth="borderWidth30"

diff --git a/packages/paste-core/components/editable-code-block/src/EditableCodeBlockWrapper.tsx b/packages/paste-core/components/editable-code-block/src/EditableCodeBlockWrapper.tsx
@@ -7,7 +7,7 @@ import * as React from "react";
 const StyledEditableCodeBlockWrapper = styled(Box)(
   css({
     backgroundColor: "rgb(1, 22, 39)", // Matches the Night Owl background theme
-    borderRadius: "borderRadius20",
+    borderRadius: "borderRadius70",
     overflow: "hidden",
   }),
 );

diff --git a/packages/paste-core/components/heading/src/Heading.tsx b/packages/paste-core/components/heading/src/Heading.tsx
@@ -21,6 +21,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight60",
         letterSpacing: "-.02em",
+        color: "colorTextWeak",
       };
     case "heading40":
       return {
@@ -29,6 +30,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight40",
         letterSpacing: "-.02em",
+        color: "colorTextWeak",
       };
     case "heading50":
       return {
@@ -37,6 +39,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight30",
         letterSpacing: "-.02em",
+        color: "colorTextWeak",
       };
     case "heading60":
       return {
@@ -45,6 +48,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight20",
         letterSpacing: "-.02em",
+        color: "colorTextWeak",
       };
     /**
      * heading20 is out of order because its also default.

diff --git a/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx b/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx
@@ -6,7 +6,7 @@ import type { FauxInputProps } from "../types";
 
 const DefaultFauxInput = React.forwardRef<HTMLDivElement, React.PropsWithChildren<FauxInputProps>>(
   ({ disabled, element, hasError, readOnly, children, type, variant }, ref) => {
-    let backgroundColor = "colorBackgroundBody" as BackgroundColor;
+    let backgroundColor = "colorBackgroundWeaker" as BackgroundColor;
     let boxShadow = "shadowBorder" as BoxShadow;
     let boxShadowHover = "shadowBorderPrimary" as BoxShadow;
     let boxShadowActive = "shadowBorderPrimaryStronger" as BoxShadow;

diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContent.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContent.tsx
@@ -27,8 +27,8 @@ const MinimizableDialogContent = React.forwardRef<HTMLDivElement, MinimizableDia
         element={element}
         ref={ref}
         display={minimized ? "none" : "block"}
-        borderBottomLeftRadius="borderRadius20"
-        borderBottomRightRadius="borderRadius20"
+        borderBottomLeftRadius="borderRadius40"
+        borderBottomRightRadius="borderRadius40"
       >
         {children}
       </Box>

diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx
@@ -68,8 +68,8 @@ const MinimizableDialogHeader = React.forwardRef<HTMLDivElement, MinimizableDial
         borderBottomWidth="borderWidth10"
         borderBottomStyle="solid"
         borderBottomColor="colorBorderWeaker"
-        borderTopRightRadius="borderRadius20"
-        borderTopLeftRadius="borderRadius20"
+        borderTopRightRadius="borderRadius40"
+        borderTopLeftRadius="borderRadius40"
         element={element}
       >
         <Box

diff --git a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
@@ -8,7 +8,7 @@ export const StyledMinimizableDialog: React.FC<React.PropsWithChildren<Pick<BoxP
 }) => (
   <Box
     element={element}
-    borderRadius="borderRadius20"
+    borderRadius="borderRadius40"
     display="flex"
     flexDirection="column"
     backgroundColor="colorBackgroundBody"

diff --git a/packages/paste-core/components/sidebar/src/Sidebar.tsx b/packages/paste-core/components/sidebar/src/Sidebar.tsx
@@ -18,10 +18,11 @@ const StyledSidebar = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) =>
     display="flex"
     flexDirection="column"
     ref={ref}
-    borderRightStyle="solid"
+    boxShadow="shadowElevationRightInverse05"
+    // borderRightStyle="solid"
     borderRightWidth="borderWidth10"
     borderRightColor="colorBorderInverseWeaker"
-    backgroundColor="colorBackgroundInverse"
+    backgroundColor="colorBackgroundBodyInverse"
     zIndex="zIndex50"
     position="fixed"
     top={0}

diff --git a/packages/paste-core/components/sidebar/src/SidebarBody.tsx b/packages/paste-core/components/sidebar/src/SidebarBody.tsx
@@ -26,6 +26,7 @@ export const SidebarBody = React.forwardRef<HTMLDivElement, SidebarBodyProps>(
         maxHeight="100%"
         overflow="hidden"
         flexGrow={1}
+        flexShrink={0}
       >
         {children}
       </Box>

diff --git a/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx b/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
@@ -25,8 +25,9 @@ export const SidebarHeader = React.forwardRef<HTMLButtonElement, SidebarHeaderPr
         paddingX="space60"
         minHeight="sizeTopbar"
         borderBottomWidth="borderWidth10"
-        borderBottomStyle="solid"
+        // borderBottomStyle="solid"
         borderBottomColor="colorBorderInverseWeaker"
+        boxShadow="shadowElevationBottomInverse05"
         display="flex"
         alignItems="center"
         justifyContent="flex-start"

diff --git a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
@@ -101,10 +101,13 @@ export const SidebarNavigation = React.forwardRef<HTMLDivElement, SidebarNavigat
           maxHeight="100%"
           overflowY="auto"
           overflowX="hidden"
-          paddingY="space50"
-          paddingLeft="space60"
-          paddingRight={collapsed ? "space40" : "space60"}
+          paddingY="space100"
+          paddingLeft="space30"
+          paddingRight={collapsed ? "space30" : "space60"}
           flexGrow={1}
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
         >
           {children}
         </Box>

diff --git a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx
@@ -82,7 +82,8 @@ const SidebarNavigationItem = React.forwardRef<HTMLAnchorElement, SidebarNavigat
         ...(collapsed && sidebarNavigationItemCollapsedStyles),
         ...(selected && sidebarNavigationItemSelectedStyles),
         display: collapsed && hideItemsOnCollapse ? "none" : "flex",
-        width: collapsed ? "36px" : "100%",
+        width: collapsed ? "58px" : "100%",
+        height: "58px",
       }),
       [isNested, selected, collapsed, hideItemsOnCollapse, hierarchical],
     );
@@ -96,26 +97,35 @@ const SidebarNavigationItem = React.forwardRef<HTMLAnchorElement, SidebarNavigat
         as="a"
         aria-current={selected ? "page" : undefined}
         {...styles}
+        justifyContent="center"
+        alignItems="center"
       >
         {icon && (
-          <Box as="span" color={selected ? "colorTextInverse" : "colorTextIconInverse"}>
+          <Box
+            as="span"
+            color={selected ? "colorTextInverse" : "colorTextIconInverse"}
+            _hover={{ color: "colorTextInverse" }}
+          >
             {icon}
           </Box>
         )}
-        <Box
-          as="span"
-          display="flex"
-          alignItems="center"
-          justifyContent="space-between"
-          columnGap="space20"
-          transition="all 120ms ease"
-          flexGrow={1}
-          float={visible ? "none" : "left"}
-          opacity={visible ? 1 : 0}
-          whiteSpace={visible ? "normal" : "nowrap"}
-        >
-          {collapsed ? null : children}
-        </Box>
+        {!collapsed && (
+          <Box
+            as="span"
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+            columnGap="space20"
+            transition="all 120ms ease"
+            flexGrow={1}
+            flexShrink={0}
+            float={visible ? "none" : "left"}
+            opacity={visible ? 1 : 0}
+            whiteSpace={visible ? "normal" : "nowrap"}
+          >
+            {collapsed ? null : children}
+          </Box>
+        )}
       </Box>
     );
   },