chore: mockup feb 18

Author: nkrantz

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

@@ -12,7 +12,7 @@ import type { DirectButtonProps } from "./types";
  */
 const defaultStyles: BoxStyleProps = merge(BaseStyles.default, {
   color: "colorText",
-  backgroundColor: "colorBackgroundWeaker",
+  backgroundColor: "colorBackgroundWeak",
   boxShadow: "shadowBorderWeak",
   _hover: {
     color: "colorTextPrimary",

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

@@ -84,7 +84,7 @@ const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
     borderColor: "colorBorderNewWeak",
   },
   neutral: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackground",
     color: "colorTextNeutral",
     borderColor: "colorBorderNeutralWeak",
   },
@@ -133,6 +133,7 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
         padding="space70"
         // borderLeftStyle="solid"
         borderLeftWidth="borderWidth20"
+        borderRadius="borderRadius40"
         variant={variant}
         alignItems="start"
         columnGap="space50"

packages/paste-core/components/sidebar/src/Sidebar.tsx

@@ -18,10 +18,11 @@ const StyledSidebar = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) =>
     display="flex"
     flexDirection="column"
     ref={ref}
-    borderRightStyle="solid"
+    boxShadow="shadowElevationRightInverse05"
+    // borderRightStyle="solid"
     borderRightWidth="borderWidth10"
     borderRightColor="colorBorderInverseWeaker"
-    backgroundColor="colorBackgroundInverse"
+    backgroundColor="colorBackgroundBodyInverse"
     zIndex="zIndex50"
     position="fixed"
     top={0}

packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx

@@ -25,8 +25,9 @@ export const SidebarHeader = React.forwardRef<HTMLButtonElement, SidebarHeaderPr
         paddingX="space60"
         minHeight="sizeTopbar"
         borderBottomWidth="borderWidth10"
-        borderBottomStyle="solid"
+        // borderBottomStyle="solid"
         borderBottomColor="colorBorderInverseWeaker"
+        boxShadow="shadowElevationBottomInverse05"
         display="flex"
         alignItems="center"
         justifyContent="flex-start"

packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx

@@ -101,10 +101,13 @@ export const SidebarNavigation = React.forwardRef<HTMLDivElement, SidebarNavigat
           maxHeight="100%"
           overflowY="auto"
           overflowX="hidden"
-          paddingY="space50"
-          paddingLeft="space60"
-          paddingRight={collapsed ? "space40" : "space60"}
+          paddingY="space100"
+          paddingLeft="space30"
+          paddingRight={collapsed ? "space30" : "space60"}
           flexGrow={1}
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
         >
           {children}
         </Box>

packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx

@@ -82,7 +82,8 @@ const SidebarNavigationItem = React.forwardRef<HTMLAnchorElement, SidebarNavigat
         ...(collapsed && sidebarNavigationItemCollapsedStyles),
         ...(selected && sidebarNavigationItemSelectedStyles),
         display: collapsed && hideItemsOnCollapse ? "none" : "flex",
-        width: collapsed ? "36px" : "100%",
+        width: collapsed ? "58px" : "100%",
+        height: "58px",
       }),
       [isNested, selected, collapsed, hideItemsOnCollapse, hierarchical],
     );
@@ -96,26 +97,30 @@ const SidebarNavigationItem = React.forwardRef<HTMLAnchorElement, SidebarNavigat
         as="a"
         aria-current={selected ? "page" : undefined}
         {...styles}
+        justifyContent="center"
+        alignItems="center"
       >
         {icon && (
           <Box as="span" color={selected ? "colorTextInverse" : "colorTextIconInverse"}>
             {icon}
           </Box>
         )}
-        <Box
-          as="span"
-          display="flex"
-          alignItems="center"
-          justifyContent="space-between"
-          columnGap="space20"
-          transition="all 120ms ease"
-          flexGrow={1}
-          float={visible ? "none" : "left"}
-          opacity={visible ? 1 : 0}
-          whiteSpace={visible ? "normal" : "nowrap"}
-        >
-          {collapsed ? null : children}
-        </Box>
+        {!collapsed && (
+          <Box
+            as="span"
+            display="flex"
+            alignItems="center"
+            justifyContent="space-between"
+            columnGap="space20"
+            transition="all 120ms ease"
+            flexGrow={1}
+            float={visible ? "none" : "left"}
+            opacity={visible ? 1 : 0}
+            whiteSpace={visible ? "normal" : "nowrap"}
+          >
+            {collapsed ? null : children}
+          </Box>
+        )}
       </Box>
     );
   },

packages/paste-core/components/sidebar/src/navigation/styles.tsx

@@ -7,8 +7,8 @@ import type { BoxProps } from "@twilio-paste/box";
 export const sidebarNavigationLabelStyles: BoxProps = {
   fontStyle: "normal",
   fontWeight: "fontWeightNormal",
-  fontSize: "fontSize30",
-  lineHeight: "lineHeight20",
+  fontSize: "fontSize50",
+  lineHeight: "lineHeight50",
   color: "colorTextInverseWeak",
   transition: "all 120ms ease",
   borderRadius: "borderRadius20",
@@ -50,7 +50,7 @@ export const sidebarNavigationItemStyles: BoxProps = {
   overflow: "hidden",
   paddingLeft: "space30",
   paddingRight: "space30",
-  marginBottom: "space30",
+  marginBottom: "space80",
   columnGap: "space30",
   _hover: {
     textDecoration: "underline",
@@ -83,6 +83,6 @@ export const sidebarNavigationItemCollapsedStyles: BoxProps = {
 // Selected item styles
 export const sidebarNavigationItemSelectedStyles: BoxProps = {
   ...sidebarNavigationLabelSelectedStyles,
-  backgroundColor: "colorBackgroundInverseStrong",
+  backgroundColor: "colorBackgroundStrong",
   color: "colorTextInverse",
 };

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

@@ -5,34 +5,35 @@ aliases:
   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"
-  palette-blue-30: "19ABF3"
-  palette-blue-40: "2188EF"
-  palette-blue-50: "1866EE"
-  palette-blue-55: "1866EE"
-  palette-blue-60: "1953B9"
-  palette-blue-70: "0E3E92"
-  palette-blue-80: "0B2A60"
-  palette-blue-85: "081F47"
-  palette-blue-90: "081F47"
-  palette-blue-100: "0F1621"
+  palette-blue-05: "#E4F7FF"
+  palette-blue-10: "#A5EBFF"
+  palette-blue-20: "#3ACEFA"
+  palette-blue-30: "#19ABF3"
+  palette-blue-40: "#2188EF"
+  palette-blue-50: "#1866EE"
+  palette-blue-55: "#1866EE"
+  palette-blue-60: "#1953B9"
+  palette-blue-70: "#0E3E92"
+  palette-blue-80: "#0B2A60"
+  palette-blue-85: "#081F47"
+  palette-blue-90: "#081F47"
+  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-15: "EDEEF2"
-  palette-gray-20: "BABECC"
-  palette-gray-30: "9AA0B4"
-  palette-gray-40: "7E869C"
-  palette-gray-50: "656E87"
-  palette-gray-55: "67728E"
-  palette-gray-60: "4D5777"
-  palette-gray-70: "38425E"
-  palette-gray-75: "404F6E"
-  palette-gray-80: "232B45"
-  palette-gray-85: "191F36"
-  palette-gray-90: "080C18"
-  palette-gray-95: "19273E"
-  palette-gray-100: "080C18"
+  palette-gray-00: "#FFFFFF"
+  palette-gray-05: "#F3F4F7"
+  palette-gray-10: "#DDE0E6"
+  palette-gray-15: "#EDEEF2"
+  palette-gray-20: "#BABECC"
+  palette-gray-30: "#9AA0B4"
+  palette-gray-40: "#7E869C"
+  palette-gray-50: "#656E87"
+  palette-gray-55: "#67728E"
+  palette-gray-60: "#4D5777"
+  palette-gray-70: "#38425E"
+  palette-gray-75: "#404F6E"
+  palette-gray-80: "#232B45"
+  palette-gray-85: "#191F36"
+  palette-gray-90: "#080C18"
+  palette-gray-95: "#19273E"
+  palette-gray-100: "#0A0F16"

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

@@ -14,7 +14,7 @@ props:
   color-background-body:
     value: "{!palette-gray-100}"
   color-background-body-inverse:
-    value: "{!palette-gray-110}"
+    value: "{!palette-blue-100}"
   color-background-inverse:
     value: "{!palette-gray-110}"
   color-background-weakest:
@@ -24,6 +24,6 @@ props:
   color-background-primary-stronger:
     value: "{!palette-gray-0}"
   color-background-primary-weakest:
-    value: "{!palette-blue-90}"
+    value: "{!palette-gray-70}"
   color-background-overlay:
     value: "{!palette-gray-100-transparent-70}"

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

@@ -8,10 +8,18 @@ props:
   shadow-brand-10:
     value: "{!offset-0} {!offset-0} {!offset-80} {!offset-0} {!palette-blue-50-transparent-30}"
   shadow-border-weak:
-    value: "{!palette-gray-60}"
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-60}"
   shadow-border-primary-stronger:
-    value: "{!palette-gray-0}"
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-0}"
+  shadow-border-primary:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-70}"
   shadow-border-primary-weaker:
-    value: "{!palette-blue-90}"
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-blue-90}"
   shadow-elevation-10:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-80}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
+  shadow-elevation-right-inverse-05:
+    value: "{!offset-10} {!offset-0} {!offset-0} {!offset-0} {!palette-gray-100}"
+  shadow-elevation-bottom-inverse-05:
+    value: "{!offset-0} {!offset-05} {!offset-0} {!offset-0} {!palette-gray-100}"
+  shadow-border-inverse-weaker:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-80}"