feat: One Twilio style updates

.changeset/cuddly-terms-grab.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/breadcrumb': patch
+'@twilio-paste/core': patch
+---
+
+[Breadcrumb] Update styles to align with new Paste Twilio theme

.changeset/fast-rats-ring.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/anchor': patch
+'@twilio-paste/core': patch
+---
+
+[Anchor] Update styles to align with new Paste Twilio theme

.changeset/funny-buckets-repair.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/separator': patch
+'@twilio-paste/core': patch
+---
+
+[Separator] Update styles to align with new Paste Twilio theme

.changeset/nasty-files-notice.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/callout': patch
+'@twilio-paste/core': patch
+---
+
+[Callout] Update styles to align with new Paste Twilio theme

.changeset/neat-windows-relate.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/label': patch
+'@twilio-paste/core': patch
+---
+
+[Label] Update styles to align with new Paste Twilio theme

.changeset/strange-trees-kiss.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/table': patch
+'@twilio-paste/core': patch
+---
+
+[Table] Update styles to align with new Paste Twilio theme

.changeset/tricky-cups-camp.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/input-box': patch
+'@twilio-paste/core': patch
+---
+
+[Input Box] Update styles to align with new Paste Twilio theme

.changeset/wise-jars-do.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/heading': patch
+'@twilio-paste/core': patch
+---
+
+[Heading] Update styles to align with new Paste Twilio theme

packages/paste-core/components/anchor/src/DefaultAnchor.tsx

@@ -16,13 +16,13 @@ const DefaultAnchor = React.forwardRef<HTMLAnchorElement, AnchorProps>((props, r
     ref={ref}
     textDecoration="underline"
     _active={{
-      color: 'colorTextLinkStronger',
+      color: 'colorTextLinkStrongest',
       textDecoration: 'none',
     }}
     _focus={{
       boxShadow: 'shadowFocus',
-      color: 'colorTextLinkStronger',
-      textDecoration: 'none',
+      color: 'colorTextLink',
+      textDecoration: 'underline',
     }}
     _hover={{
       color: 'colorTextLinkStronger',

packages/paste-core/components/anchor/src/InverseAnchor.tsx

@@ -22,7 +22,7 @@ const InverseAnchor = React.forwardRef<HTMLAnchorElement, AnchorProps>((props, r
     _focus={{
       boxShadow: 'shadowFocusInverse',
       color: 'colorTextInverse',
-      textDecoration: 'none',
+      textDecoration: 'underline',
     }}
     _hover={{
       color: 'colorTextInverse',

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

@@ -48,7 +48,6 @@ const BreadcrumbItem = React.forwardRef<HTMLSpanElement | HTMLAnchorElement, Bre
       <Box
         alignItems="center"
         as="li"
-        color="colorText"
         display="inline-flex"
         element={`${elementName}_ITEM`}
         fontSize="fontSize20"
@@ -68,6 +67,7 @@ const BreadcrumbItem = React.forwardRef<HTMLSpanElement | HTMLAnchorElement, Bre
             {...safelySpreadTextProps(props)}
             aria-current="page"
             as="span"
+            color="colorTextWeak"
             element={`${elementName}_TEXT`}
             fontSize="fontSize20"
             lineHeight="lineHeight20"

packages/paste-core/components/callout/src/Callout.tsx

@@ -8,7 +8,6 @@ import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only';
 import {SuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon';
 import {WarningIcon} from '@twilio-paste/icons/esm/WarningIcon';
 import type {BoxStyleProps, BoxProps} from '@twilio-paste/box';
-import type {GenericIconProps} from '@twilio-paste/icons/esm/types';
 import {isMarginTokenProp} from '@twilio-paste/style-props';
 
 type CalloutVariants = 'neutral' | 'warning' | 'error' | 'success' | 'new';
@@ -25,31 +24,36 @@ const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
   success: {
     backgroundColor: 'colorBackgroundSuccessWeakest',
     color: 'colorTextSuccess',
+    borderColor: 'colorBorderSuccessWeaker',
   },
   error: {
     backgroundColor: 'colorBackgroundErrorWeakest',
-    color: 'colorTextErrorStrong',
+    color: 'colorTextError',
+    borderColor: 'colorBorderErrorWeaker',
   },
   warning: {
     backgroundColor: 'colorBackgroundWarningWeakest',
     color: 'colorTextWarningStrong',
+    borderColor: 'colorBorderWarningWeaker',
   },
   new: {
-    backgroundColor: 'colorBackgroundNew',
+    backgroundColor: 'colorBackgroundNewWeakest',
     color: 'colorTextNew',
+    borderColor: 'colorBorderNewWeaker',
   },
   neutral: {
     backgroundColor: 'colorBackgroundNeutralWeakest',
     color: 'colorTextNeutral',
+    borderColor: 'colorBorderNeutralWeaker',
   },
 };
 
-const variantIcons: Record<CalloutVariants, React.FC<GenericIconProps>> = {
-  success: SuccessIcon,
-  error: ErrorIcon,
-  warning: WarningIcon,
-  new: NewIcon,
-  neutral: NeutralIcon,
+const variantIcons: Record<CalloutVariants, React.ReactElement> = {
+  success: <SuccessIcon decorative color="colorTextIconSuccess" />,
+  error: <ErrorIcon decorative color="colorTextIconError" />,
+  warning: <WarningIcon decorative color="colorTextIconWarning" />,
+  new: <NewIcon decorative color="colorTextIconNew" />,
+  neutral: <NeutralIcon decorative color="colorTextIconNeutral" />,
 };
 
 const defaultIconLabels: Record<CalloutVariants, string> = {
@@ -72,16 +76,18 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
         element={element}
         display="flex"
         marginY={marginY}
-        padding="space70"
-        borderRadius="borderRadius20"
+        padding="space60"
+        borderStyle="solid"
+        borderWidth="borderWidth10"
+        borderRadius="borderRadius30"
         variant={variant}
         {...variantStyles[variant]}
       >
-        <Box marginRight="space40" paddingTop="space10" element={`${element}_ICON`}>
-          <IconComponent decorative />
+        <Box marginRight="space60" paddingTop="space10" element={`${element}_ICON`}>
+          {IconComponent}
           <ScreenReaderOnly>{iconLabel}</ScreenReaderOnly>
         </Box>
-        <Box display="flex" flexDirection="column" rowGap="space30" flex="1">
+        <Box display="flex" flexDirection="column" rowGap="space50" flex="1">
           {children}
         </Box>
       </Box>

packages/paste-core/components/callout/src/CalloutHeading.tsx

@@ -19,6 +19,7 @@ export const CalloutHeading = React.forwardRef<HTMLHeadingElement, CalloutHeadin
       element={element}
       color="currentColor"
       lineHeight="lineHeight40"
+      fontWeight="fontWeightSemibold"
     >
       {children}
     </Text>

packages/paste-core/components/combobox/stories/Combobox.stories.tsx

@@ -370,7 +370,7 @@ export const ComboboxInsertBeforeAndAfter: StoryFn = () => {
     <Combobox
       items={items}
       insertBefore={
-        <Text as="span" fontWeight="fontWeightSemibold">
+        <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
           $10.99
         </Text>
       }
@@ -392,7 +392,7 @@ export const ComboboxDisabledInsertBeforeAndAfter: StoryFn = () => {
     <Combobox
       items={items}
       insertBefore={
-        <Text as="span" fontWeight="fontWeightSemibold">
+        <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
           $10.99
         </Text>
       }
@@ -416,7 +416,7 @@ export const ComboboxInsertBeforeAndAfterInverse: StoryFn = () => {
       <Combobox
         items={items}
         insertBefore={
-          <Text as="span" color="colorTextInverse" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }
@@ -441,7 +441,7 @@ export const ComboboxDisabledInsertBeforeAndAfterInverse: StoryFn = () => {
       <Combobox
         items={items}
         insertBefore={
-          <Text as="span" color="colorTextInverse" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
+          <Text as="span" color="colorTextInverseWeak" lineHeight="lineHeight20" fontWeight="fontWeightSemibold">
             $10.99
           </Text>
         }

packages/paste-core/components/combobox/stories/MultiselectCombobox.stories.tsx

@@ -268,7 +268,7 @@ export const MultiselectComboboxBeforeAfter = (): React.ReactNode => {
       itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : '')}
       initialSelectedItems={filteredItems.slice(20, 50)}
       insertBefore={
-        <Text as="span" fontWeight="fontWeightSemibold">
+        <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
           $10.99
         </Text>
       }
@@ -312,7 +312,7 @@ export const MultiselectComboboxMaxHeight = (): React.ReactNode => {
       initialSelectedItems={filteredItems.slice(20, 80)}
       maxHeight="100px"
       insertBefore={
-        <Text as="span" fontWeight="fontWeightSemibold">
+        <Text color="colorTextWeak" as="span" fontWeight="fontWeightSemibold">
           $10.99
         </Text>
       }

packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx

@@ -15,11 +15,13 @@ export const customElementStyles = (prefix = 'DATA_GRID'): {[key: string]: any}
     backgroundColor: 'colorBackgroundStrong',
     fontWeight: 'fontWeightSemibold',
     borderColor: 'colorBorderStrong',
+    color: 'colorText',
   },
   [`${prefix}_FOOT`]: {
     backgroundColor: 'colorBackgroundStrong',
     fontWeight: 'fontWeightSemibold',
     borderColor: 'colorBorderStrong',
+    color: 'colorText',
   },
   [`${prefix}_HEADER`]: {
     padding: 'space10',

packages/paste-core/components/form/stories/index.stories.tsx

@@ -119,7 +119,11 @@ export const Default: StoryFn = () => {
         <FormSectionDescription>Please add the details of your contact information.</FormSectionDescription>
         <FormControl>
           <Label htmlFor={seed('phone-number')}>Phone number</Label>
-          <Input id={seed('phone-number')} type="tel" insertAfter={<InformationIcon decorative />} />
+          <Input
+            id={seed('phone-number')}
+            type="tel"
+            insertAfter={<InformationIcon color="colorTextIcon" decorative />}
+          />
         </FormControl>
         <FormControl>
           <Label htmlFor={seed('email')}>Email address</Label>
@@ -312,7 +316,11 @@ export const FixedWidthForm: StoryFn = () => {
         <FormSectionDescription>Please add the details of your contact information.</FormSectionDescription>
         <FormControl>
           <Label htmlFor={seed('phone-number')}>Phone number</Label>
-          <Input id={seed('phone-number')} type="tel" insertAfter={<InformationIcon decorative />} />
+          <Input
+            id={seed('phone-number')}
+            type="tel"
+            insertAfter={<InformationIcon color="colorTextIcon" decorative />}
+          />
         </FormControl>
         <FormControl>
           <Label htmlFor={seed('email')}>Email address</Label>

packages/paste-core/components/heading/__tests__/heading.test.tsx

@@ -19,7 +19,7 @@ describe('Heading', () => {
       expect(renderedHeading).not.toBeNull();
       expect(renderedHeading).toHaveStyleRule('margin-bottom', '1.5rem');
       expect(renderedHeading).toHaveStyleRule('font-size', '2rem');
-      expect(renderedHeading).toHaveStyleRule('font-weight', '700');
+      expect(renderedHeading).toHaveStyleRule('font-weight', '600');
       expect(renderedHeading).toHaveStyleRule('line-height', '2.75rem');
     });
 
@@ -35,7 +35,7 @@ describe('Heading', () => {
       expect(renderedHeading).not.toBeNull();
       expect(renderedHeading).toHaveStyleRule('margin-bottom', '1.25rem');
       expect(renderedHeading).toHaveStyleRule('font-size', '1.5rem');
-      expect(renderedHeading).toHaveStyleRule('font-weight', '700');
+      expect(renderedHeading).toHaveStyleRule('font-weight', '600');
       expect(renderedHeading).toHaveStyleRule('line-height', '2rem');
     });
 
@@ -51,7 +51,7 @@ describe('Heading', () => {
       expect(renderedHeading).not.toBeNull();
       expect(renderedHeading).toHaveStyleRule('margin-bottom', '1rem');
       expect(renderedHeading).toHaveStyleRule('font-size', '1.25rem');
-      expect(renderedHeading).toHaveStyleRule('font-weight', '700');
+      expect(renderedHeading).toHaveStyleRule('font-weight', '600');
       expect(renderedHeading).toHaveStyleRule('line-height', '1.75rem');
     });
 
@@ -67,7 +67,7 @@ describe('Heading', () => {
       expect(renderedHeading).not.toBeNull();
       expect(renderedHeading).toHaveStyleRule('margin-bottom', '0.75rem');
       expect(renderedHeading).toHaveStyleRule('font-size', '1rem');
-      expect(renderedHeading).toHaveStyleRule('font-weight', '700');
+      expect(renderedHeading).toHaveStyleRule('font-weight', '600');
       expect(renderedHeading).toHaveStyleRule('line-height', '1.5rem');
     });
 
@@ -83,7 +83,7 @@ describe('Heading', () => {
       expect(renderedHeading).not.toBeNull();
       expect(renderedHeading).toHaveStyleRule('margin-bottom', '0.5rem');
       expect(renderedHeading).toHaveStyleRule('font-size', '0.875rem');
-      expect(renderedHeading).toHaveStyleRule('font-weight', '700');
+      expect(renderedHeading).toHaveStyleRule('font-weight', '600');
       expect(renderedHeading).toHaveStyleRule('line-height', '1.25rem');
     });
 
@@ -99,7 +99,7 @@ describe('Heading', () => {
       expect(renderedHeading).not.toBeNull();
       expect(renderedHeading).toHaveStyleRule('margin-bottom', '0.5rem');
       expect(renderedHeading).toHaveStyleRule('font-size', '0.75rem');
-      expect(renderedHeading).toHaveStyleRule('font-weight', '700');
+      expect(renderedHeading).toHaveStyleRule('font-weight', '600');
       expect(renderedHeading).toHaveStyleRule('line-height', '1.25rem');
     });
 
@@ -117,7 +117,7 @@ describe('Heading', () => {
       expect(renderedHeadingIdiomatic).not.toBeNull();
       expect(renderedHeading).toHaveStyleRule('margin-bottom', '1.25rem');
       expect(renderedHeading).toHaveStyleRule('font-size', '1.5rem');
-      expect(renderedHeading).toHaveStyleRule('font-weight', '700');
+      expect(renderedHeading).toHaveStyleRule('font-weight', '600');
       expect(renderedHeading).toHaveStyleRule('line-height', '2rem');
     });
 

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

@@ -11,36 +11,41 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: 'space
       return {
         marginBottom: marginBottom || 'space70',
         fontSize: 'fontSize90',
-        fontWeight: 'fontWeightBold',
+        fontWeight: 'fontWeightSemibold',
         lineHeight: 'lineHeight90',
+        letterSpacing: '-.02em',
       };
     case 'heading30':
       return {
         marginBottom: marginBottom || 'space50',
         fontSize: 'fontSize60',
-        fontWeight: 'fontWeightBold',
+        fontWeight: 'fontWeightSemibold',
         lineHeight: 'lineHeight60',
+        letterSpacing: '-.02em',
       };
     case 'heading40':
       return {
         marginBottom: marginBottom || 'space40',
         fontSize: 'fontSize40',
-        fontWeight: 'fontWeightBold',
+        fontWeight: 'fontWeightSemibold',
         lineHeight: 'lineHeight40',
+        letterSpacing: '-.02em',
       };
     case 'heading50':
       return {
         marginBottom: marginBottom || 'space30',
         fontSize: 'fontSize30',
-        fontWeight: 'fontWeightBold',
+        fontWeight: 'fontWeightSemibold',
         lineHeight: 'lineHeight30',
+        letterSpacing: '-.02em',
       };
     case 'heading60':
       return {
         marginBottom: marginBottom || 'space30',
         fontSize: 'fontSize20',
-        fontWeight: 'fontWeightBold',
+        fontWeight: 'fontWeightSemibold',
         lineHeight: 'lineHeight20',
+        letterSpacing: '-.02em',
       };
     /**
      * heading20 is out of order because its also default.
@@ -51,8 +56,9 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: 'space
       return {
         marginBottom: marginBottom || 'space60',
         fontSize: 'fontSize70',
-        fontWeight: 'fontWeightBold',
+        fontWeight: 'fontWeightSemibold',
         lineHeight: 'lineHeight70',
+        letterSpacing: '-.02em',
       };
   }
 }