chore: remove deprecated design tokens and themes from the system (#3049)

* chore: remove deprecated design tokens and themes from the system

* fix: remove our usage of deprecated tokens

Author: SiTaggart

.changeset/slow-ties-complain.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/design-tokens': major
+'@twilio-paste/core': major
+---
+
+[Design Tokens] remove deprecated light/dark color tokens from the system

.changeset/unlucky-seas-enjoy.md

@@ -0,0 +1,9 @@
+---
+'@twilio-paste/box': minor
+'@twilio-paste/text': minor
+'@twilio-paste/style-props': minor
+'@twilio-paste/theme': minor
+'@twilio-paste/core': minor
+---
+
+[Box, Text, Style Props, Theme]: remove checking and warning for deprecated design tokens and themes that have been removed from the system

packages/paste-core/components/button/__tests__/customization.test.tsx

@@ -17,7 +17,7 @@ const customButtonStyles = {
     destructive_link: {
       padding: 'space40',
       borderRadius: 'borderRadiusCircle',
-      backgroundColor: 'colorBackgroundDestructiveLight',
+      backgroundColor: 'colorBackgroundDestructiveWeak',
       color: 'colorTextWarningStrong',
       fontWeight: 'fontWeightBold',
     },

packages/paste-core/components/chat-log/__tests__/ChatBubble.spec.tsx

@@ -13,7 +13,7 @@ const CustomizationWrapper: React.FC<React.PropsWithChildren> = ({children}) =>
         color: 'colorTextInverse',
         variants: {
           inbound: {backgroundColor: 'colorBackgroundPrimary'},
-          outbound: {backgroundColor: 'colorBackgroundPrimaryDarker'},
+          outbound: {backgroundColor: 'colorBackgroundPrimaryStronger'},
         },
       },
     }}
@@ -31,7 +31,7 @@ const CustomizationFooWrapper: React.FC<React.PropsWithChildren> = ({children})
         color: 'colorTextInverse',
         variants: {
           inbound: {backgroundColor: 'colorBackgroundPrimary'},
-          outbound: {backgroundColor: 'colorBackgroundPrimaryDarker'},
+          outbound: {backgroundColor: 'colorBackgroundPrimaryStronger'},
         },
       },
     }}

packages/paste-core/components/chat-log/stories/customization.stories.tsx

@@ -49,7 +49,7 @@ export const CustomizedMessages: StoryFn = (_args, {parameters: {isTestEnvironme
           color: 'colorTextInverse',
           variants: {
             inbound: {backgroundColor: 'colorBackgroundPrimary'},
-            outbound: {backgroundColor: 'colorBackgroundPrimaryDarker'},
+            outbound: {backgroundColor: 'colorBackgroundPrimaryStronger'},
           },
         },
         CHAT_MESSAGE_META: {

packages/paste-core/components/minimizable-dialog/__tests__/customization.spec.tsx

@@ -16,10 +16,10 @@ const CustomizationWrapper: React.FC<React.PropsWithChildren> = ({children}) =>
     theme={TestTheme}
     elements={{
       MINIMIZABLE_DIALOG_BUTTON: {
-        backgroundColor: 'colorBackgroundDark',
+        backgroundColor: 'colorBackgroundStrong',
       },
       MINIMIZABLE_DIALOG: {
-        backgroundColor: 'colorBackgroundPrimaryLighter',
+        backgroundColor: 'colorBackgroundPrimaryWeaker',
       },
       MINIMIZABLE_DIALOG_CONTENT: {
         margin: 'space0',
@@ -54,10 +54,10 @@ const MyCustomizationWrapper: React.FC<React.PropsWithChildren> = ({children}) =
     theme={TestTheme}
     elements={{
       FOO_DIALOG_BUTTON: {
-        backgroundColor: 'colorBackgroundDark',
+        backgroundColor: 'colorBackgroundStrong',
       },
       FOO_DIALOG: {
-        backgroundColor: 'colorBackgroundPrimaryLighter',
+        backgroundColor: 'colorBackgroundPrimaryWeaker',
       },
       FOO_DIALOG_CONTENT: {
         margin: 'space0',

packages/paste-core/components/minimizable-dialog/stories/customization.stories.tsx

@@ -53,15 +53,15 @@ export const CustomizedDialog: StoryFn = (_args, {parameters: {isTestEnvironment
         MINIMIZABLE_DIALOG_HEADER_CLOSE_BUTTON: {
           borderStyle: 'solid',
           borderWidth: 'borderWidth10',
-          borderColor: 'colorBorderLight',
+          borderColor: 'colorBorderWeak',
         },
         MINIMIZABLE_DIALOG_HEADER_CLOSE_ICON: {
           width: 'sizeIcon50',
         },
         MINIMIZABLE_DIALOG_HEADER_MINIMIZE_BUTTON: {
           borderStyle: 'solid',
           borderWidth: 'borderWidth10',
-          borderColor: 'colorBorderLight',
+          borderColor: 'colorBorderWeak',
         },
         MINIMIZABLE_DIALOG_HEADER_MINIMIZE_ICON: {
           width: 'sizeIcon50',

packages/paste-core/components/side-modal/__tests__/customization.spec.tsx

@@ -38,7 +38,7 @@ const CustomizationWrapper: React.FC<React.PropsWithChildren> = ({children}) =>
         fontSize: 'fontSize60',
       },
       SIDE_MODAL_HEADER_CLOSE_BUTTON: {
-        borderColor: 'colorBorderLight',
+        borderColor: 'colorBorderWeak',
       },
       SIDE_MODAL_HEADER_CLOSE_ICON: {
         width: 'sizeIcon50',
@@ -79,7 +79,7 @@ const MyCustomizationWrapper: React.FC<React.PropsWithChildren> = ({children}) =
         fontSize: 'fontSize60',
       },
       FOO_DIALOG_HEADER_CLOSE_BUTTON: {
-        borderColor: 'colorBorderLight',
+        borderColor: 'colorBorderWeak',
       },
       FOO_DIALOG_HEADER_CLOSE_ICON: {
         width: 'sizeIcon50',

packages/paste-core/components/side-modal/stories/customization.stories.tsx

@@ -60,7 +60,7 @@ export const CustomizedDialog: StoryFn = (_args, {parameters: {isTestEnvironment
         SIDE_MODAL_HEADER_CLOSE_BUTTON: {
           borderStyle: 'solid',
           borderWidth: 'borderWidth10',
-          borderColor: 'colorBorderLight',
+          borderColor: 'colorBorderWeak',
         },
         SIDE_MODAL_HEADER_CLOSE_ICON: {
           width: 'sizeIcon50',

packages/paste-core/primitives/box/src/index.tsx

@@ -15,12 +15,6 @@ import {
   props as defaultStylingProps,
 } from '@twilio-paste/styling-library';
 import type {StyledComponent} from '@twilio-paste/styling-library';
-import {
-  isDeprecatedBackgroundColorTokenProp,
-  isDeprecatedBorderColorTokenProp,
-  isDeprecatedBoxShadowTokenProp,
-  isDeprecatedTextColorTokenProp,
-} from '@twilio-paste/style-props';
 
 import type {BoxProps, StyledBoxProps} from './types';
 import {getPseudoStyles, PasteStyleProps, getCustomElementStyles} from './StyleFunctions';
@@ -58,12 +52,6 @@ const Box = React.forwardRef<HTMLElement, BoxProps>(({children, element = 'BOX',
 });
 
 Box.displayName = 'Box';
-Box.propTypes = {
-  backgroundColor: isDeprecatedBackgroundColorTokenProp,
-  borderColor: isDeprecatedBorderColorTokenProp,
-  boxShadow: isDeprecatedBoxShadowTokenProp,
-  color: isDeprecatedTextColorTokenProp,
-};
 
 export {Box, getCustomElementStyles};
 export * from './types';