feat: updated tab visual design (#3141)

* feat: tabs checkpoint * chore: update default themes in storybook * chore(tabs): update horizontal styles and pass variant properly * feat(box): add '_disabled_focus' pseudoprop style * chore: changesets * chore: eslint fixes * fix(eslint): allow '_disabled_focus' to not be camelcase * feat(design-tokens): add color-border-weakest * fix: pr comment fixess * chore(tooltip): adjust border color * chore(design-tokens): adjust a few tokens * chore(codeblock): adjust bgColor * fix(tabs): move margin from TabList to padding in TabPanel * fix(tab): update styles from pr comments * test: update snapshots --------- Co-authored-by: TheSisb <shadiisber@gmail.com>
twilio-labs · Apr 6, 2023 · c2de547 · c2de547
1 parent 449e6e7
commit c2de547
Show file tree

Hide file tree

Showing 25 changed files with 154 additions and 41 deletions.
diff --git a/.changeset/hip-eagles-cry.md b/.changeset/hip-eagles-cry.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': minor
+'@twilio-paste/box': minor
+---
+
+[Box] add `_disabled_focus` pseudoprop style
diff --git a/.changeset/metal-bees-tease.md b/.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`
diff --git a/.changeset/pink-ghosts-chew.md b/.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`
diff --git a/.changeset/rude-socks-divide.md b/.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.
diff --git a/.changeset/selfish-hats-behave.md b/.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
diff --git a/.changeset/three-geese-remember.md b/.changeset/three-geese-remember.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/tooltip': patch
+'@twilio-paste/core': patch
+---
+
+[Tooltip] improve border color of the Tooltip
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -63,6 +63,7 @@ module.exports = {
           '_focus_hover',
           '_focus_placeholder',
           '_checked_hover',
+          '_disabled_focus',
           '_selected_hover',
           '_selected_focus',
           '_selected_focusVisible',

diff --git a/.storybook/preview.tsx b/.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>

diff --git a/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx b/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"

diff --git a/packages/paste-core/components/tabs/src/Tab.tsx b/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"

diff --git a/packages/paste-core/components/tabs/src/TabList.tsx b/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>
   );
 });

diff --git a/packages/paste-core/components/tabs/src/TabPanel.tsx b/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',

diff --git a/packages/paste-core/components/tooltip/src/TooltipArrow.tsx b/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}
     />
   );

diff --git a/packages/paste-core/components/tooltip/src/index.tsx b/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"

diff --git a/packages/paste-core/primitives/box/src/PseudoPropStyles.ts b/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]',

diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -91,6 +91,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-border-error-weak\\": \\"rgb(173, 17, 17)\\",
   \\"color-border-neutral-weak\\": \\"rgb(4, 60, 181)\\",
   \\"color-border\\": \\"rgb(96, 107, 133)\\",
+  \\"color-border-weakest\\": \\"rgb(13, 19, 28)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
   \\"color-border-success-weak\\": \\"rgb(14, 124, 58)\\",
@@ -484,6 +485,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
   \\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
   \\"color-border\\": \\"rgb(136, 145, 170)\\",
+  \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
   \\"color-border-success-weak\\": \\"rgb(54, 213, 118)\\",
@@ -877,6 +879,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
   \\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
   \\"color-border\\": \\"rgb(136, 145, 170)\\",
+  \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
   \\"color-border-success-weak\\": \\"rgb(54, 213, 118)\\",
@@ -1230,7 +1233,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"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-body-inverse\\": \\"rgb(13, 19, 28)\\",
+  \\"color-background-body-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
@@ -1270,14 +1273,15 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-border-error-weak\\": \\"rgb(173, 17, 17)\\",
   \\"color-border-neutral-weak\\": \\"rgb(4, 60, 181)\\",
   \\"color-border\\": \\"rgb(96, 107, 133)\\",
+  \\"color-border-weakest\\": \\"rgb(13, 19, 28)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
   \\"color-border-success-weak\\": \\"rgb(14, 124, 58)\\",
   \\"color-border-primary-strong\\": \\"rgb(153, 205, 255)\\",
   \\"color-border-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-border-destructive-strong\\": \\"rgb(246, 177, 177)\\",
   \\"color-border-primary-weak\\": \\"rgb(4, 60, 181)\\",
-  \\"color-border-inverse-weakest\\": \\"rgb(31, 48, 76)\\",
+  \\"color-border-inverse-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-destructive-weak\\": \\"rgb(117, 12, 12)\\",
   \\"color-border-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-weaker\\": \\"rgb(31, 48, 76)\\",
@@ -1341,7 +1345,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
-  \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
+  \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\",
   \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-border-decorative-40-weaker\\": \\"0 0 0 1px #5817bd\\",
   \\"shadow-border-error-stronger\\": \\"0 0 0 1px #fccfcf\\",
@@ -1623,7 +1627,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"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-body-inverse\\": \\"rgb(15, 22, 33)\\",
+  \\"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)\\",
@@ -1663,14 +1667,15 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-border-error-weak\\": \\"rgb(245, 138, 138)\\",
   \\"color-border-neutral-weak\\": \\"rgb(102, 179, 255)\\",
   \\"color-border\\": \\"rgb(136, 145, 170)\\",
+  \\"color-border-weakest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-inverse-stronger\\": \\"rgb(244, 244, 246)\\",
   \\"color-border-inverse-weaker\\": \\"rgb(57, 71, 98)\\",
   \\"color-border-success-weak\\": \\"rgb(123, 234, 165)\\",
   \\"color-border-primary-strong\\": \\"rgb(0, 20, 137)\\",
   \\"color-border-inverse\\": \\"rgb(136, 145, 170)\\",
   \\"color-border-destructive-strong\\": \\"rgb(117, 12, 12)\\",
   \\"color-border-primary-weak\\": \\"rgb(153, 205, 255)\\",
-  \\"color-border-inverse-weakest\\": \\"rgb(31, 48, 76)\\",
+  \\"color-border-inverse-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-border-destructive-weak\\": \\"rgb(246, 177, 177)\\",
   \\"color-border-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-border-weaker\\": \\"rgb(225, 227, 234)\\",
@@ -1734,7 +1739,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #006dfa, inset 0 0 0 3px #cce4ff\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
-  \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #1f304c\\",
+  \\"shadow-border-inverse-weakest\\": \\"0 0 0 1px #121c2d\\",
   \\"shadow-border-bottom-success-weaker\\": \\"0 1px 0 #7beaa5\\",
   \\"shadow-border-decorative-40-weaker\\": \\"0 0 0 1px #e7dcfa\\",
   \\"shadow-border-error-stronger\\": \\"0 0 0 1px #4a0b0b\\",

diff --git a/packages/paste-design-tokens/tokens/global/border-color.yml b/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.

diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml b/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}"

diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/border-color.yml b/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:

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
@@ -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