chore: feb 13 and 14 morning

Author: nkrantz

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

@@ -14,6 +14,7 @@ const DefaultAnchor = React.forwardRef<HTMLAnchorElement, AnchorProps>((props, r
     outline="none"
     ref={ref}
     textDecoration="underline"
+    textUnderlineOffset="4px" // TODO: make work
     _active={{
       color: "colorTextLinkStrongest",
       textDecoration: "none",

packages/paste-core/components/button/src/SecondaryButton.tsx

@@ -12,11 +12,11 @@ import type { DirectButtonProps } from "./types";
  */
 const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
   color: "colorText",
-  backgroundColor: "colorBackgroundBody",
+  backgroundColor: "colorBackgroundWeaker",
   boxShadow: "shadowBorderWeak",
   _hover: {
     color: "colorTextPrimary",
-    backgroundColor: "colorBackgroundBody",
+    backgroundColor: "colorBackgroundWeaker",
     boxShadow: "shadowBorderPrimary",
   },
   _focus: {
@@ -31,7 +31,7 @@ const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
 
 const baseLoadingStyles: BoxStyleProps = {
   color: "colorTextPrimary",
-  backgroundColor: "colorBackgroundBody",
+  backgroundColor: "colorBackgroundWeaker",
   boxShadow: "shadowBorderWeak",
 };
 
@@ -44,7 +44,7 @@ const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {
 
 const baseDisabledStyles: BoxStyleProps = {
   color: "colorTextWeaker",
-  backgroundColor: "colorBackgroundBody",
+  backgroundColor: "colorBackgroundWeaker",
   boxShadow: "shadowBorderWeaker",
 };
 

packages/paste-core/components/button/src/styles.ts

@@ -42,8 +42,8 @@ export const SizeStyles: { [key in ButtonSizes]: BoxStyleProps } = {
   default: {
     paddingTop: "space30",
     paddingBottom: "space30",
-    paddingLeft: "space40",
-    paddingRight: "space40",
+    paddingLeft: "space70",
+    paddingRight: "space70",
     borderRadius: "borderRadius20",
     fontSize: "fontSize30",
     lineHeight: "lineHeight20",

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

@@ -131,7 +131,7 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
         display="flex"
         marginY={marginY}
         padding="space70"
-        borderLeftStyle="solid"
+        // borderLeftStyle="solid"
         borderLeftWidth="borderWidth20"
         variant={variant}
         alignItems="start"
@@ -146,7 +146,7 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
           {children}
         </Box>
         {onDismiss && typeof onDismiss === "function" && (
-          <Button onClick={onDismiss} variant="secondary_icon" size="reset" element={`${element}_DISMISS_BUTTON`}>
+          <Button onClick={onDismiss} variant="secondary" size="circle_small" element={`${element}_DISMISS_BUTTON`}>
             <CloseIcon element={`${element}_DISMISS_ICON`} decorative size="sizeIcon20" />
             <ScreenReaderOnly>{i18nDismissLabel}</ScreenReaderOnly>
           </Button>

packages/paste-core/components/card/src/Card.tsx

@@ -45,7 +45,7 @@ const Card = React.forwardRef<HTMLElement, CardProps>(
         paddingLeft={paddingLeft}
         paddingRight={paddingRight}
         paddingTop={paddingTop}
-        backgroundColor="colorBackgroundBody"
+        backgroundColor="colorBackground"
       >
         {children}
       </Box>

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

@@ -21,6 +21,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight60",
         letterSpacing: "-.02em",
+        color: "colorTextWeak",
       };
     case "heading40":
       return {
@@ -29,6 +30,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight40",
         letterSpacing: "-.02em",
+        color: "colorTextWeak",
       };
     case "heading50":
       return {
@@ -37,6 +39,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight30",
         letterSpacing: "-.02em",
+        color: "colorTextWeak",
       };
     case "heading60":
       return {
@@ -45,6 +48,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: "space
         fontWeight: "fontWeightSemibold",
         lineHeight: "lineHeight20",
         letterSpacing: "-.02em",
+        color: "colorTextWeak",
       };
     /**
      * heading20 is out of order because its also default.

packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx

@@ -6,7 +6,7 @@ import type { FauxInputProps } from "../types";
 
 const DefaultFauxInput = React.forwardRef<HTMLDivElement, React.PropsWithChildren<FauxInputProps>>(
   ({ disabled, element, hasError, readOnly, children, type, variant }, ref) => {
-    let backgroundColor = "colorBackgroundBody" as BackgroundColor;
+    let backgroundColor = "colorBackgroundWeaker" as BackgroundColor;
     let boxShadow = "shadowBorder" as BoxShadow;
     let boxShadowHover = "shadowBorderPrimary" as BoxShadow;
     let boxShadowActive = "shadowBorderPrimaryStronger" as BoxShadow;

packages/paste-core/components/table/src/THead.tsx

@@ -30,6 +30,7 @@ const THead = React.forwardRef<HTMLTableSectionElement, THeadProps>(
         {...safelySpreadBoxProps(props)}
         ref={ref}
         as={StyledTHead as any}
+        backgroundColor="colorBackgroundWeakest"
         element={element}
         top={top}
         {...getStickyStyles({ stickyHeader })}

packages/paste-core/components/table/src/Td.tsx

@@ -17,7 +17,8 @@ const Td = React.forwardRef<HTMLTableCellElement, TdProps>(
         element={element}
         fontSize="fontSize30"
         lineHeight="lineHeight30"
-        padding="space50"
+        paddingX="space50"
+        paddingY="space30"
         position="relative"
         textAlign={textAlign}
         whiteSpace={whiteSpace}

packages/paste-core/components/table/src/Th.tsx

@@ -17,10 +17,10 @@ const Th = React.forwardRef<HTMLTableCellElement, ThProps>(
         fontSize="fontSize30"
         lineHeight="lineHeight30"
         fontWeight="fontWeightSemibold"
-        paddingBottom="space40"
+        paddingBottom="space30"
         paddingLeft="space50"
         paddingRight="space50"
-        paddingTop="space40"
+        paddingTop="space30"
         position="relative"
         textAlign={textAlign}
         whiteSpace={whiteSpace}

packages/paste-core/components/table/src/Tr.tsx

@@ -12,6 +12,7 @@ const Tr = React.forwardRef<HTMLTableRowElement, TrProps>(
         {...safelySpreadBoxProps(props)}
         ref={ref}
         as="tr"
+        backgroundColor="colorBackgroundWeakest"
         element={element}
         verticalAlign={verticalAlign}
         _even={{ backgroundColor: striped ? "colorBackgroundRowStriped" : "transparent" }}

packages/paste-core/components/visual-picker/src/VisualPickerCheckbox.tsx

@@ -75,9 +75,10 @@ export const VisualPickerCheckbox = React.forwardRef<HTMLInputElement, VisualPic
         flexDirection="row"
         height="100%"
         width="100%"
-        backgroundColor={disabled || groupIsDisabled ? "colorBackgroundWeak" : undefined}
-        borderStyle="solid"
+        backgroundColor={disabled || groupIsDisabled ? "colorBackgroundWeak" : "colorBackgroundWeaker"}
+        // borderStyle="solid"
         borderColor={pickerBorderColor}
+        boxShadow={checked ? "shadowBrand10" : undefined}
         borderWidth="borderWidth10"
         borderRadius="borderRadius30"
         padding="space50"

packages/paste-core/components/visual-picker/src/VisualPickerRadio.tsx

@@ -91,11 +91,12 @@ export const VisualPickerRadio = React.forwardRef<HTMLInputElement, VisualPicker
         flexDirection="row"
         height="100%"
         width="100%"
-        backgroundColor={disabled || groupIsDisabled ? "colorBackgroundWeak" : undefined}
-        borderStyle="solid"
+        backgroundColor={disabled || groupIsDisabled ? "colorBackgroundWeak" : "colorBackgroundWeaker"}
+        // borderStyle="solid"
         borderColor={pickerBorderColor}
         borderWidth="borderWidth10"
         borderRadius="borderRadius30"
+        boxShadow={state.checked ? "shadowBrand10" : undefined}
         padding="space50"
         onMouseEnter={() => setIsHovering(true)}
         onMouseLeave={() => setIsHovering(false)}

packages/paste-design-tokens/tokens/aliases/color-palette.yml

@@ -154,3 +154,5 @@ aliases:
   palette-purple-80: "#380e78"
   palette-purple-90: "#22094a"
   palette-purple-100: "#160433"
+
+  palette-blue-50-transparent-30: "rgb(24, 102, 238, .3)"

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

@@ -36,6 +36,8 @@ props:
   color-background-weaker:
     value: "{!palette-gray-0}"
     comment: Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus.
+  color-background-weakest:
+    value: "{!palette-blue-100}"
 
   # brand backgrounds
   color-background-brand:

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

@@ -289,3 +289,5 @@ props:
   shadow-elevation-left-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
     comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.
+  shadow-brand-10:
+    value: "{!offset-0} {!offset-0} {!offset-80} {!offset-0} {!palette-blue-50-transparent-30}"

packages/paste-design-tokens/tokens/themes/rebrand/aliases/color-palette.yml

@@ -3,6 +3,8 @@ imports:
 aliases:
   ## Colors
   amaranth: "#EF223A"
+  amaranth-transparent-10: "rgb(239, 34, 58, .1)"
+  amaranth-transparent-60: "rgb(239, 34, 58, .6)"
   palette-blue-05: "E4F7FF"
   palette-blue-10: "A5EBFF"
   palette-blue-20: "3ACEFA"
@@ -14,7 +16,9 @@ aliases:
   palette-blue-80: "0B2A60"
   palette-blue-85: "081F47"
   palette-blue-90: "000D25"
-  palette-blue-50-transparent-30: "EEEEEE"
+  palette-blue-100: "0F1621"
+  palette-blue-50-transparent-30: "rgb(24, 102, 238, .3)"
+  palette-blue-20-transparent-40: "rgb(58, 206, 250, .4)"
   palette-gray-05: "F3F4F7"
   palette-gray-10: "DDE0E6"
   palette-gray-20: "BABECC"

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

@@ -6,7 +6,7 @@ imports:
   - ../../../aliases/border-radius.yml
 props:
   color-background:
-    value: "{!palette-gray-80}"
+    value: "{!palette-gray-85}"
   color-background-weaker:
     value: "{!palette-gray-85}"
   color-background-strong:
@@ -17,3 +17,7 @@ props:
     value: "{!palette-gray-110}"
   color-background-inverse:
     value: "{!palette-gray-110}"
+  color-background-weakest:
+    value: "{!palette-blue-100}"
+  color-background-body-elevation:
+    value: "{!palette-gray-85}"

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

@@ -8,3 +8,5 @@ imports:
 props:
   color-border-primary:
     value: "{!palette-blue-30}"
+  color-border-weaker:
+    value: "{!palette-gray-80}"

packages/paste-design-tokens/tokens/themes/rebrand/global/line-height.yml

@@ -3,3 +3,6 @@ global:
   type: number
 imports:
   - ../../twilio-dark/global/line-height.yml
+props:
+  line-height-40:
+    value: "{!line-height-60}"

packages/paste-design-tokens/tokens/themes/rebrand/global/text-color.yml

@@ -3,3 +3,9 @@ global:
   category: text-color
 imports:
   - ../../twilio-dark/global/text-color.yml
+  - ../aliases/color-palette.yml
+props:
+  color-text-weak:
+    value: "{!palette-gray-40}"
+  color-text-link:
+    value: "{!palette-gray-0}"

packages/paste-style-props/src/types/typography.ts

@@ -181,4 +181,11 @@ export interface TypographyProps {
    * @memberof TypographyProps
    */
   listStyleType?: ListStyleType;
+  /**
+   * Responsive style prop for the CSS `text-underline-offset` property
+   *
+   * @type {ListStyleType}
+   * @memberof TypographyProps
+   */
+  textUnderlineOffset?: ListStyleType;
 }

packages/paste-style-props/src/typography.ts

@@ -14,4 +14,5 @@ export const TYPOGRAPHY_PROPS = [
   "wordBreak",
   "wordWrap",
   "overflowWrap",
+  "textUnderlineOffset",
 ];

packages/paste-theme/src/types/themes.ts

@@ -1,6 +1,7 @@
 import type { DarkTheme } from "../themes/dark";
 import type { DefaultTheme } from "../themes/default";
 import type { EvergreenTheme } from "../themes/evergreen";
+import type { RebrandTheme } from "../themes/rebrand";
 import type { SendGridTheme } from "../themes/sendgrid";
 import type { TwilioTheme } from "../themes/twilio";
 import type { TwilioDarkTheme } from "../themes/twilio-dark";
@@ -12,3 +13,4 @@ export type ThemeShape = typeof DefaultTheme;
 export type EvergreenThemeShape = typeof EvergreenTheme;
 export type TwilioThemeShape = typeof TwilioTheme;
 export type TwilioDarkThemeShape = typeof TwilioDarkTheme;
+export type RebrandThemeThemeShape = typeof RebrandTheme;

packages/paste-theme/stories/rebrandTheme.stories.tsx

@@ -1,5 +1,6 @@
 import { Alert } from "@twilio-paste/alert";
 import type { AlertProps } from "@twilio-paste/alert";
+import { Anchor } from "@twilio-paste/anchor";
 import { Avatar } from "@twilio-paste/avatar";
 import type { AvatarProps } from "@twilio-paste/avatar";
 import { Box } from "@twilio-paste/box";
@@ -43,23 +44,16 @@ export const Rebrand = (): React.ReactNode => (
         <DisplayHeading variant="displayHeading30" as="h3">
           Display Heading 3
         </DisplayHeading>
-        <Box
-          borderColor="colorBorder"
-          borderRadius="borderRadius20"
-          backgroundColor="colorBackgroundAvailable"
-          width="size10"
-          height="size10"
-        />
         <Heading as="h3" variant="heading20">
           Paragraph and Inputs
         </Heading>
         <Paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Nisi porta lorem mollis aliquam ut porttitor leo. Hendrerit gravida rutrum quisque non. A arcu
-          cursus vitae congue mauris rhoncus aenean vel elit. Tortor dignissim convallis aenean et tortor at risus.
-          Vestibulum lorem sed risus ultricies. Tempor nec feugiat nisl pretium fusce id. Morbi tempus iaculis urna id
-          volutpat lacus laoreet non curabitur. In ante metus dictum at. Sit amet risus nullam eget felis eget nunc
-          lobortis.
+          Lorem <Anchor href="#">ipsum</Anchor> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua. Nisi porta lorem mollis aliquam ut porttitor leo. Hendrerit
+          gravida rutrum quisque non. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Tortor dignissim
+          convallis aenean et tortor at risus. Vestibulum lorem sed risus ultricies. Tempor nec feugiat nisl pretium
+          fusce id. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. In ante metus dictum at. Sit amet
+          risus nullam eget felis eget nunc lobortis.
         </Paragraph>
         <Stack orientation="vertical" spacing="space50">
           <Input aria-label="Search" placeholder="Search options..." type="text" />