feat: updated tab visual design

.changeset/hip-eagles-cry.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': minor
+'@twilio-paste/box': minor
+---
+
+[Box] add `_disabled_focus` pseudoprop style

.changeset/metal-bees-tease.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/code-block': patch
+'@twilio-paste/core': patch
+---
+
+[Codeblock] small adjustment to the backgroundColor on `CodeBlockHeader`

.changeset/pink-ghosts-chew.md

@@ -0,0 +1,10 @@
+---
+'@twilio-paste/core': patch
+'@twilio-paste/design-tokens': patch
+---
+
+[Design Tokens] adjusting inverse colors for the `Twilio` and `Twilio-Dark` themes
+
+- `color-background-body-inverse` from `gray-110` to `gray-100`
+- `shadow-border-inverse-weakest` from `gray-90` to `gray-100`
+- `color-border-inverse-weakest` from `gray-90` to `gray-100`

.changeset/rude-socks-divide.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/tabs': patch
+'@twilio-paste/core': patch
+---
+
+[Tabs] update horizontal tabs style. They are now visually distinct from the InPageNavigation component.

.changeset/selfish-hats-behave.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': minor
+'@twilio-paste/design-tokens': minor
+---
+
+[Design-tokens] add the `color-border-weakest` token

.changeset/three-geese-remember.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/tooltip': patch
+'@twilio-paste/core': patch
+---
+
+[Tooltip] improve border color of the Tooltip

.eslintrc.js

@@ -63,6 +63,7 @@ module.exports = {
           '_focus_hover',
           '_focus_placeholder',
           '_checked_hover',
+          '_disabled_focus',
           '_selected_hover',
           '_selected_focus',
           '_selected_focusVisible',

.storybook/preview.tsx

@@ -16,7 +16,7 @@ export const globalTypes = {
   theme: {
     name: 'Paste Theme',
     description: 'Global theme for components',
-    defaultValue: 'default',
+    defaultValue: 'twilio',
     toolbar: {
       // All available icons
       // https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx
@@ -115,14 +115,18 @@ export const decorators = [
             <GlobalStyles />
             <Grid>
               <Column>
-                <Theme.Provider theme="default" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+                <Theme.Provider theme="twilio" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
                   <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
                     <Story />
                   </Box>
                 </Theme.Provider>
               </Column>
               <Column>
-                <Theme.Provider theme="dark" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
+                <Theme.Provider
+                  theme="twilio-dark"
+                  disableAnimations={isTestEnvironment}
+                  customBreakpoints={breakpoints}
+                >
                   <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
                     <Story />
                   </Box>

packages/paste-core/components/code-block/src/CodeBlockHeader.tsx

@@ -16,7 +16,7 @@ export const CodeBlockHeader = React.forwardRef<HTMLHeadingElement, CodeBlockHea
       ref={ref}
       element={element}
       as={as}
-      backgroundColor="colorBackgroundInverse"
+      backgroundColor="colorBackgroundInverseStrong"
       color="colorTextInverse"
       paddingY="space50"
       paddingX="space70"

packages/paste-core/components/tabs/src/Tab.tsx

@@ -56,39 +56,59 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
     case 'horizontal':
     default:
       return {
-        borderBottomColor: 'transparent',
-        borderBottomStyle: 'solid',
-        borderBottomWidth: 'borderWidth10',
-        color: isInverse ? 'colorTextInverseWeak' : 'colorTextWeak',
+        color: isInverse ? 'colorTextInverse' : 'colorTextWeak',
+        borderColor: 'transparent',
+        borderStyle: 'solid',
+        borderWidth: 'borderWidth10',
+        borderTopLeftRadius: 'borderRadius30',
+        borderTopRightRadius: 'borderRadius30',
         display: 'inline-block',
         flexBasis: isFitted ? '50%' : undefined,
         flexGrow: isFitted ? 1 : undefined,
         flexShrink: isFitted ? 1 : undefined,
-        marginRight: isFitted ? 'space0' : 'space80',
         minWidth: 'sizeSquare130',
-        paddingBottom: 'space50',
-        paddingX: 'space20',
-        paddingTop: 'space40',
+        paddingY: 'space30',
+        paddingX: 'space50',
         textAlign: 'center',
-        _last: {
-          marginRight: 'space0',
-        },
+        bottom: '-1px',
+        /* Selected State */
         _selected: {
-          borderBottomColor: isInverse ? 'colorBorderInverseStrong' : 'colorBorderPrimary',
-          color: isInverse ? 'colorTextInverse' : 'colorTextLink',
-        },
-        _hover: {
-          borderBottomColor: isInverse ? 'colorBorderInverse' : 'colorBorderPrimaryStronger',
-          color: isInverse ? 'colorTextInverseWeak' : 'colorTextLinkStronger',
+          borderColor: isInverse ? 'colorBorderInverse' : 'colorBorderWeak',
+          borderBottomColor: isInverse ? 'colorBorderInverseWeakest' : 'colorBorderWeakest',
+          color: isInverse ? 'colorTextInverse' : 'colorTextPrimary',
         },
+        /* Disabled state */
         _disabled: {
           borderBottomColor: 'transparent',
           color: isInverse ? 'colorTextInverseWeaker' : 'colorTextWeaker',
         },
+        /* Hover states */
+        _hover: {
+          color: isInverse ? 'colorTextInverse' : 'colorTextPrimary',
+          borderBottomColor: isInverse ? 'colorBorderInverseStrongest' : 'colorBorderPrimary',
+        },
+        _selected_hover: {
+          borderColor: isInverse ? 'colorBorderInverseStrongest' : 'colorBorderWeak',
+          color: isInverse ? 'colorTextInverse' : 'colorTextPrimaryStronger',
+          borderBottomColor: isInverse ? 'colorBorderInverseWeakest' : 'colorBorderWeakest',
+        },
+        /* Focus states */
         _focus: {
-          boxShadow: isInverse ? 'shadowFocusInverse' : 'shadowFocus',
           outline: 'none',
-          borderRadius: 'borderRadius20',
+          borderColor: 'colorBorderPrimary',
+          boxShadow: 'shadowFocusInset',
+          borderBottomColor: 'colorBorderPrimary',
+        },
+        _selected_focus: {
+          borderStyle: 'solid',
+          borderWidth: 'borderWidth10',
+          boxShadow: 'shadowFocusInset',
+          color: isInverse ? 'colorTextInverse' : 'colorTextPrimary',
+          borderColor: 'colorBorderPrimary',
+        },
+        _disabled_focus: {
+          borderColor: isInverse ? 'colorBorderInverseWeaker' : 'colorBorderWeak',
+          boxShadow: 'none',
         },
       };
   }
@@ -127,7 +147,7 @@ const Tab = React.forwardRef<HTMLDivElement, TabProps>(({children, element, ...t
             cursor={props['aria-disabled'] ? 'not-allowed' : 'pointer'}
             element={elementName}
             fontSize="fontSize30"
-            lineHeight="lineHeight10"
+            lineHeight="lineHeight30"
             fontWeight="fontWeightMedium"
             overflow={orientation !== 'vertical' ? 'hidden' : undefined}
             position="relative"

packages/paste-core/components/tabs/src/TabList.tsx

@@ -17,11 +17,26 @@ export interface TabListProps {
   variant?: Variants;
 }
 
-const HorizontalTabList: React.FC<React.PropsWithChildren<{element?: BoxProps['element']}>> = ({children, element}) => (
-  <Box display="flex" element={element} marginBottom="space60">
-    {children}
-  </Box>
-);
+const HorizontalTabList: React.FC<React.PropsWithChildren<{variant?: Variants; element?: BoxProps['element']}>> = ({
+  children,
+  variant,
+  element,
+}) => {
+  const isInverse = variant === 'inverse' || variant === 'inverse_fitted';
+
+  return (
+    <Box
+      display="flex"
+      borderBottomStyle="solid"
+      borderBottomWidth="borderWidth10"
+      borderBottomColor={isInverse ? 'colorBorderInverseWeaker' : 'colorBorderWeak'}
+      columnGap="space20"
+      element={element}
+    >
+      {children}
+    </Box>
+  );
+};
 
 HorizontalTabList.displayName = 'HorizontalTabList';
 
@@ -41,7 +56,9 @@ const TabList = React.forwardRef<HTMLDivElement, TabListProps>(({children, eleme
 
   return (
     <TabPrimitiveList {...(tab as any)} as={Box} {...props} element={elementName} ref={ref}>
-      <TabListWrapper element={`${elementName}_CHILD`}>{children}</TabListWrapper>
+      <TabListWrapper variant={variant || tab.variant} element={`${elementName}_CHILD`}>
+        {children}
+      </TabListWrapper>
     </TabPrimitiveList>
   );
 });

packages/paste-core/components/tabs/src/TabPanel.tsx

@@ -8,6 +8,7 @@ import {TabsContext} from './TabsContext';
 import {getElementName} from './utils';
 
 export const tabPanelStyles = {
+  paddingTop: 'space60',
   borderRadius: 'borderRadius20',
   _focusVisible: {
     boxShadow: 'shadowFocus',

packages/paste-core/components/tooltip/src/TooltipArrow.tsx

@@ -12,7 +12,7 @@ const TooltipArrow: React.FC<React.PropsWithChildren<TooltipArrowProps>> = (prop
     <TooltipPrimitiveArrow
       {...props}
       size={theme.fontSizes.fontSize50}
-      stroke={theme.borderColors.colorBorderInverseWeaker}
+      stroke={theme.borderColors.colorBorderInverse}
       fill={theme.backgroundColors.colorBackgroundBodyInverse}
     />
   );

packages/paste-core/components/tooltip/src/index.tsx

@@ -18,7 +18,7 @@ const StyledTooltip = React.forwardRef<HTMLDivElement, BoxProps>(({style, elemen
       borderRadius="borderRadius30"
       borderStyle="solid"
       borderWidth="borderWidth10"
-      borderColor="colorBorderInverseWeaker"
+      borderColor="colorBorderInverse"
       element={element}
       maxWidth="size30"
       paddingX="space50"

packages/paste-core/primitives/box/src/PseudoPropStyles.ts

@@ -13,6 +13,7 @@ export const PseudoPropStyles = {
   _odd: '&:nth-of-type(odd)',
   _disabled:
     '&:disabled, &:disabled:focus, &:disabled:hover, &[aria-disabled=true], &[aria-disabled=true]:focus, &[aria-disabled=true]:hover',
+  _disabled_focus: '&:disabled:focus,&[aria-disabled=true]:focus',
   _checked: '&:checked, &[aria-checked=true]',
   _checked_hover: '&:checked:hover, &[aria-checked=true]:hover',
   _mixed: '&:indeterminate, &[aria-checked=mixed]',

packages/paste-design-tokens/tokens/global/border-color.yml

@@ -52,6 +52,9 @@ props:
   color-border-weaker:
     value: "{!palette-gray-20}"
     comment: Weaker border color
+  color-border-weakest:
+    value: "{!palette-gray-0}"
+    comment: Weakest border color
   color-border-inverse-weakest:
     value: "{!palette-gray-90}"
     comment: Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.

packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml

@@ -18,7 +18,9 @@ props:
   color-border-weaker:
     value: "{!palette-gray-90}"
     comment: Weaker border color
-
+  color-border-weakest:
+    value: "{!palette-gray-110}"
+    comment: Weakest border color
   # primary action borders
   color-border-primary-strongest:
     value: "{!palette-blue-10}"

packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml

@@ -18,6 +18,9 @@ props:
   color-border-weaker:
     value: "#EDEFF5"
     comment: Weaker border color
+  color-border-weakest:
+    value: "#FFFFFF"
+    comment: Weakest border color
 
   # primary action borders
   color-border-primary-strongest:

packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml

@@ -19,7 +19,7 @@ props:
 
   # page body
   color-background-body-inverse:
-    value: "{!palette-gray-110}"
+    value: "{!palette-gray-100}"
     comment: Inverse background color used for the main page body.
 
   # status

packages/paste-design-tokens/tokens/themes/twilio-dark/global/border-color.yml

@@ -18,6 +18,11 @@ props:
     value: "{!palette-blue-90}"
     comment: Weakest primary border color
 
+  # inverse borders
+  color-border-inverse-weakest:
+    value: "{!palette-gray-100}"
+    comment: Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.
+
   # status borders
   color-border-success-weaker:
     value: "{!palette-green-70}"

packages/paste-design-tokens/tokens/themes/twilio-dark/global/box-shadow.yml

@@ -10,6 +10,9 @@ props:
   shadow-focus-inverse:
     value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} rgba(255, 255, 255, 0.2)"
     comment: Shadow for focus ring on interactive elements on inverse backgrounds.
+  shadow-border-inverse-weakest:
+    value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-100}"
+    comment: Weakest shadow border on interactive elements on inverse backgrounds.
   shadow-focus-shadow-border:
     value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} rgba(255, 255, 255, 0.2)"
     comment: Shadow for simultaneous focus and border

packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml

@@ -20,7 +20,7 @@ props:
 
   # page body
   color-background-body-inverse:
-    value: "{!palette-gray-110}"
+    value: "{!palette-gray-100}"
     comment: Inverse background color used for the main page body.
 
   # status

packages/paste-design-tokens/tokens/themes/twilio/global/border-color.yml

@@ -9,6 +9,11 @@ props:
     value: "{!palette-blue-55}"
     comment: Primary border color.
 
+  # inverse borders
+  color-border-inverse-weakest:
+    value: "{!palette-gray-100}"
+    comment: Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.
+
   # status borders
   color-border-success-weak:
     value: "{!palette-green-40}"

packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml

@@ -10,6 +10,9 @@ props:
   shadow-focus-inverse:
     value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-100}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} rgba(255, 255, 255, 0.2)"
     comment: Shadow for focus ring on interactive elements on inverse backgrounds.
+  shadow-border-inverse-weakest:
+    value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-100}"
+    comment: Weakest shadow border on interactive elements on inverse backgrounds.
   shadow-focus-shadow-border:
     value: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} {!offset-30} {!palette-blue-20}"
     comment: Shadow for simultaneous focus and border