chore(switch, alert, toast): update styles (#3062)

twilio-labs · Mar 7, 2023 · e7f4fcd · e7f4fcd
1 parent 71ce96c
commit e7f4fcd
Show file tree

Hide file tree

Showing 18 changed files with 273 additions and 399 deletions.
diff --git a/.changeset/cold-shrimps-whisper.md b/.changeset/cold-shrimps-whisper.md
@@ -0,0 +1,8 @@
+---
+'@twilio-paste/alert': patch
+'@twilio-paste/core': patch
+---
+
+[Alert] Update styles to align with new Paste Twilio theme.
+
+In order to see all of the new style updates, you may have to remove any <Text> component children from your Alerts, passing in the string as a direct child of Alert.
diff --git a/.changeset/smart-paws-tan.md b/.changeset/smart-paws-tan.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/switch': patch
+'@twilio-paste/core': patch
+---
+
+[Switch] Update styles to align with new Paste Twilio theme
diff --git a/.changeset/wicked-walls-doubt.md b/.changeset/wicked-walls-doubt.md
@@ -0,0 +1,8 @@
+---
+'@twilio-paste/toast': patch
+'@twilio-paste/core': patch
+---
+
+[Toast] Update styles to align with new Paste Twilio theme.
+
+In order to see all of the new style updates, you may have to remove any <Text> component children from your Toasts, passing in the string as a direct child of Toast.
diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -2,8 +2,8 @@
   "AlertDialog": "@twilio-paste/core/alert-dialog",
   "Alert": "@twilio-paste/core/alert",
   "AlertBackgroundColors": "@twilio-paste/core/alert",
-  "AlertBorderColors": "@twilio-paste/core/alert",
   "AlertRoles": "@twilio-paste/core/alert",
+  "AlertTextColors": "@twilio-paste/core/alert",
   "AlertVariants": "@twilio-paste/core/alert",
   "Anchor": "@twilio-paste/core/anchor",
   "isExternalUrl": "@twilio-paste/core/anchor",

diff --git a/packages/paste-core/components/alert/src/index.tsx b/packages/paste-core/components/alert/src/index.tsx
@@ -28,20 +28,20 @@ export const AlertBackgroundColors = {
   NEUTRAL: 'colorBackgroundNeutralWeakest',
   WARNING: 'colorBackgroundWarningWeakest',
 } as const;
-export const AlertBorderColors = {
-  ERROR: 'colorBorderErrorWeak',
-  NEUTRAL: 'colorBorderNeutralWeak',
-  WARNING: 'colorBorderWarningWeak',
+export const AlertTextColors = {
+  ERROR: 'colorTextError',
+  NEUTRAL: 'colorTextNeutral',
+  WARNING: 'colorTextWarningStrong',
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type AlertVariants = ValueOf<typeof AlertVariants>;
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type AlertBackgroundColors = ValueOf<typeof AlertBackgroundColors>;
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type AlertBorderColors = ValueOf<typeof AlertBorderColors>;
-// eslint-disable-next-line @typescript-eslint/no-redeclare
 export type AlertRoles = ValueOf<typeof AlertRoles>;
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type AlertTextColors = ValueOf<typeof AlertTextColors>;
 
 export interface AlertProps extends Pick<BoxProps, 'element'> {
   id?: never;
@@ -118,13 +118,10 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       <Box
         {...safelySpreadBoxProps(props)}
         backgroundColor={AlertBackgroundColors[variant.toUpperCase() as AlertVariantKeys]}
-        borderColor={AlertBorderColors[variant.toUpperCase() as AlertVariantKeys]}
-        borderBottomWidth="borderWidth20"
-        borderBottomStyle="solid"
         paddingLeft="space60"
         paddingRight="space60"
-        paddingTop="space50"
-        paddingBottom="space50"
+        paddingTop="space60"
+        paddingBottom="space60"
         element={element}
         variant={variant}
         ref={ref}
@@ -134,7 +131,9 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
           <MediaFigure as="div" spacing="space30">
             {renderAlertIcon(variant, element, i18nLabelVariantMap[variant])}
           </MediaFigure>
-          <MediaBody as="div">{children}</MediaBody>
+          <MediaBody as="div">
+            <Box color={AlertTextColors[variant.toUpperCase() as AlertVariantKeys]}>{children}</Box>
+          </MediaBody>
           {onDismiss && typeof onDismiss === 'function' && (
             <MediaFigure align="end" spacing="space60">
               <Button onClick={onDismiss} variant="secondary_icon" size="reset" element={`${element}_DISMISS_BUTTON`}>

diff --git a/packages/paste-core/components/alert/stories/index.stories.tsx b/packages/paste-core/components/alert/stories/index.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {action} from '@storybook/addon-actions';
 import type {StoryFn} from '@storybook/react';
-import {Text} from '@twilio-paste/text';
 import {Box} from '@twilio-paste/box';
 import {Truncate} from '@twilio-paste/truncate';
 import {CustomizationProvider} from '@twilio-paste/customization';
@@ -18,36 +17,26 @@ export default {
 export const Neutral = (): React.ReactNode => {
   return (
     <>
-      <Alert variant="neutral">
-        <Text as="div">I am an alert</Text>
-      </Alert>
+      <Alert variant="neutral">I am an alert</Alert>
       <Alert variant="neutral" onDismiss={action('dismiss')}>
-        <Text as="div">
-          <strong>Alert title</strong> I am an alert
-        </Text>
+        <strong>Alert title</strong> I am an alert
       </Alert>
       <Alert variant="neutral">
-        <Text as="div">
-          Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
-          commodo cursus magna.
-        </Text>
+        Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
+        commodo cursus magna.
       </Alert>
       <Box width="size50">
         <Alert variant="neutral" onDismiss={action('dismiss')}>
-          <Text as="div">
-            Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
-            commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat
-            porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla
-            vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem
-            malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis
-            mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec
-            ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
-          </Text>
-          <Text as="p">
-            <Truncate title="http://www.extremelylongurlthatmightbreakthelayout.com">
-              http://www.extremelylongurlthatmightbreakthelayout.com
-            </Truncate>
-          </Text>
+          Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
+          commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat
+          porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla
+          vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem
+          malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis
+          mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper
+          nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
+          <Truncate title="http://www.extremelylongurlthatmightbreakthelayout.com">
+            http://www.extremelylongurlthatmightbreakthelayout.com
+          </Truncate>
         </Alert>
       </Box>
     </>
@@ -58,35 +47,27 @@ export const Error = (): React.ReactNode => {
   return (
     <>
       <Alert variant="error" onDismiss={action('dismiss')}>
-        <Text as="div">I am an alert</Text>
+        I am an alert
       </Alert>
       <Alert variant="error">
-        <Text as="div">
-          <strong>Alert title</strong> I am an alert
-        </Text>
+        <strong>Alert title</strong> I am an alert
       </Alert>
       <Alert variant="error" onDismiss={action('dismiss')}>
-        <Text as="div">
-          Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
-          commodo cursus magna.
-        </Text>
+        Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
+        commodo cursus magna.
       </Alert>
       <Box width="size50">
         <Alert variant="error">
-          <Text as="div">
-            Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
-            commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat
-            porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla
-            vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem
-            malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis
-            mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec
-            ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
-          </Text>
-          <Text as="p">
-            <Truncate title="http://www.extremelylongurlthatmightbreakthelayout.com">
-              http://www.extremelylongurlthatmightbreakthelayout.com
-            </Truncate>
-          </Text>
+          Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
+          commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat
+          porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla
+          vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem
+          malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis
+          mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper
+          nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
+          <Truncate title="http://www.extremelylongurlthatmightbreakthelayout.com">
+            http://www.extremelylongurlthatmightbreakthelayout.com
+          </Truncate>
         </Alert>
       </Box>
     </>
@@ -96,36 +77,26 @@ export const Error = (): React.ReactNode => {
 export const Warning = (): React.ReactNode => {
   return (
     <>
-      <Alert variant="warning">
-        <Text as="div">I am an alert</Text>
-      </Alert>
+      <Alert variant="warning">I am an alert</Alert>
       <Alert variant="warning" onDismiss={action('dismiss')}>
-        <Text as="div">
-          <strong>Alert title</strong> I am an alert
-        </Text>
+        <strong>Alert title</strong> I am an alert
       </Alert>
       <Alert variant="warning">
-        <Text as="div">
-          Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
-          commodo cursus magna.
-        </Text>
+        Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
+        commodo cursus magna.
       </Alert>
       <Box width="size50">
         <Alert variant="warning" onDismiss={action('dismiss')}>
-          <Text as="div">
-            Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
-            commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat
-            porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla
-            vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem
-            malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis
-            mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec
-            ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
-          </Text>
-          <Text as="p">
-            <Truncate title="http://www.extremelylongurlthatmightbreakthelayout.com">
-              http://www.extremelylongurlthatmightbreakthelayout.com
-            </Truncate>
-          </Text>
+          Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent
+          commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat
+          porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla
+          vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem
+          malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis
+          mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper
+          nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
+          <Truncate title="http://www.extremelylongurlthatmightbreakthelayout.com">
+            http://www.extremelylongurlthatmightbreakthelayout.com
+          </Truncate>
         </Alert>
       </Box>
     </>
@@ -166,28 +137,18 @@ export const CustomAlert: StoryFn = (_args, {parameters: {isTestEnvironment = fa
         },
       }}
     >
-      <Alert variant="neutral">
-        <Text as="div">I am a custom neutral alert</Text>
-      </Alert>
+      <Alert variant="neutral">I am a custom neutral alert</Alert>
 
-      <Alert variant="warning">
-        <Text as="div">I am a custom warning alert</Text>
-      </Alert>
+      <Alert variant="warning">I am a custom warning alert</Alert>
 
-      <Alert variant="error">
-        <Text as="div">I am a custom error alert</Text>
-      </Alert>
+      <Alert variant="error">I am a custom error alert</Alert>
 
       <Alert variant="neutral" onDismiss={action('dismiss')}>
-        <Text as="div">
-          <strong>Dismissable:</strong> I am a dismissable custom alert
-        </Text>
+        <strong>Dismissable:</strong> I am a dismissable custom alert
       </Alert>
 
       <Alert variant="error" onDismiss={action('dismiss')}>
-        <Text as="p">
-          <strong>Dismissable:</strong> I am a dismissable custom alert
-        </Text>
+        <strong>Dismissable:</strong> I am a dismissable custom alert
       </Alert>
     </CustomizationProvider>
   );
@@ -209,13 +170,13 @@ export const I18nAlerts = (): React.ReactNode => {
   return (
     <>
       <Alert variant="error" {...i18nStrings} onDismiss={action('dismiss')}>
-        <Text as="div">C&apos;est une alerte d&apos;erreur.</Text>
+        C&apos;est une alerte d&apos;erreur.
       </Alert>
       <Alert variant="warning" {...i18nStrings} onDismiss={action('dismiss')}>
-        <Text as="div">C&apos;est une alerte d&apos;avertissement.</Text>
+        C&apos;est une alerte d&apos;avertissement.
       </Alert>
       <Alert variant="neutral" {...i18nStrings} onDismiss={action('dismiss')}>
-        <Text as="div">C&apos;est une alerte neutre.</Text>
+        C&apos;est une alerte neutre.
       </Alert>
     </>
   );

diff --git a/packages/paste-core/components/switch/src/Switch.tsx b/packages/paste-core/components/switch/src/Switch.tsx
@@ -9,7 +9,7 @@ import {Label, RequiredDot} from '@twilio-paste/label';
 import {HelpText} from '@twilio-paste/help-text';
 import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
 
-import {SWITCH_HEIGHT, SWITCH_WIDTH} from './constants';
+import {SWITCH_HEIGHT, SWITCH_KNOB_SIZE, SWITCH_WIDTH} from './constants';
 import {SwitchContext} from './SwitchContext';
 import {SwitchKnob} from './SwitchKnob';
 
@@ -123,8 +123,8 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
               boxSizing="content-box"
               height={SWITCH_HEIGHT}
               width={SWITCH_WIDTH}
+              marginTop="space10"
               overflow="hidden"
-              padding="space10"
               borderColor="colorBorder"
               borderWidth="borderWidth10"
               borderRadius="borderRadiusPill"
@@ -144,17 +144,17 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
                 boxShadow: 'shadowFocus',
               }}
               _checkedSibling={{
-                backgroundColor: 'colorBackgroundPrimaryStronger',
-                color: 'colorTextLinkStronger',
+                backgroundColor: 'colorBackgroundPrimary',
+                color: 'colorTextPrimary',
               }}
               _disabledSibling={{
                 backgroundColor: 'colorBackgroundStrong',
                 color: 'currentColor',
                 cursor: 'not-allowed',
               }}
               _checkedAndHoverSibling={{
-                backgroundColor: 'colorBackgroundPrimary',
-                color: 'colorTextLink',
+                color: 'colorTextIcon',
+                backgroundColor: 'colorBackgroundStrongest',
               }}
               _invalidSibling={{
                 backgroundColor: 'colorBackgroundError',
@@ -171,7 +171,7 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
                 disabled={disabled}
                 checked={mergedChecked}
                 isHovering={isHovering}
-                height={SWITCH_HEIGHT}
+                height={SWITCH_KNOB_SIZE}
                 hasError={hasError}
               />
             </SiblingBox>
@@ -203,7 +203,7 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
               padding="space10"
               aria-hidden={true}
               role="presentation"
-              marginRight="space30"
+              marginRight="space20"
               display="inline-block"
               element={`${element}_HELP_TEXT_SPACER`}
             />