From 234374f6126926262b74254fc808b4308c05aa49 Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Mon, 18 Mar 2024 13:39:28 -0700
Subject: [PATCH] Cambio: Modal & elevation updates (#337)

---
 .changeset/tall-spies-pay.md                  |  5 ++
 .../syntax-core/src/Modal/Modal.module.css    | 11 ++-
 packages/syntax-core/src/Modal/Modal.tsx      | 69 +++++++++++++------
 .../src/ThemeProvider/ThemeProvider.test.tsx  |  2 +-
 .../src/ThemeProvider/ThemeProvider.tsx       |  4 --
 5 files changed, 58 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/tall-spies-pay.md

diff --git a/.changeset/tall-spies-pay.md b/.changeset/tall-spies-pay.md
new file mode 100644
index 00000000..4e7106b6
--- /dev/null
+++ b/.changeset/tall-spies-pay.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Cambio: Modal & elevation updates
diff --git a/packages/syntax-core/src/Modal/Modal.module.css b/packages/syntax-core/src/Modal/Modal.module.css
index a7af2aba..3f93b58e 100644
--- a/packages/syntax-core/src/Modal/Modal.module.css
+++ b/packages/syntax-core/src/Modal/Modal.module.css
@@ -38,13 +38,6 @@
   right: 12px;
 }
 
-.closeButtonCambio {
-  height: 24px;
-  width: 24px;
-  top: 4px;
-  right: 4px;
-}
-
 .closeButton:focus-visible {
   box-shadow: 0 0 0 4px #000;
   outline: solid 2px #fff;
@@ -53,3 +46,7 @@
 .closeButtonWithImage {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+.closeButtonWithImageCambio {
+  background-color: var(--color-cambio-gray-200);
+}
diff --git a/packages/syntax-core/src/Modal/Modal.tsx b/packages/syntax-core/src/Modal/Modal.tsx
index 66dc1fa1..82698b97 100644
--- a/packages/syntax-core/src/Modal/Modal.tsx
+++ b/packages/syntax-core/src/Modal/Modal.tsx
@@ -9,6 +9,7 @@ import StopScroll from "./StopScroll";
 import Layer from "./Layer";
 import styles from "./Modal.module.css";
 import { useTheme } from "../ThemeProvider/ThemeProvider";
+import IconButton from "../IconButton/IconButton";
 
 function XIcon({ color = "#000" }: { color?: string }) {
   return (
@@ -21,6 +22,20 @@ function XIcon({ color = "#000" }: { color?: string }) {
   );
 }
 
+function XIconCambio({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      fill="currentColor"
+      focusable="false"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+    >
+      <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+    </svg>
+  );
+}
+
 // Note: Only sm + lg size currently. design thinks there should only be two sizes.
 // If there IS a md size at some point, we should use the "size" const.
 const sizeWidth = {
@@ -159,7 +174,7 @@ export default function Modal({
             <Box
               data-testid={dataTestId}
               backgroundColor="white"
-              rounding="xl"
+              rounding={themeName === "classic" ? "xl" : "md"}
               display="flex"
               direction="column"
               minWidth={240}
@@ -168,32 +183,44 @@ export default function Modal({
               dangerouslySetInlineStyle={{ __style: { overflow: "hidden" } }}
             >
               <Box position="relative">
-                <button
-                  aria-label={accessibilityCloseLabel}
-                  type="button"
-                  className={classnames(
-                    styles.closeButton,
-                    themeName === "classic"
-                      ? styles.closeButtonClassic
-                      : styles.closeButtonCambio,
-                    {
-                      [styles.closeButtonWithImage]:
-                        !!image && themeName === "classic",
-                    },
-                  )}
-                  onClick={onDismiss}
-                >
-                  <XIcon
-                    color={image && themeName === "classic" ? "#fff" : "#000"}
-                  />
-                </button>
+                {themeName === "classic" ? (
+                  <button
+                    aria-label={accessibilityCloseLabel}
+                    type="button"
+                    className={classnames(
+                      styles.closeButton,
+                      styles.closeButtonClassic,
+                      {
+                        [styles.closeButtonWithImage]: !!image,
+                      },
+                    )}
+                    onClick={onDismiss}
+                  >
+                    <XIcon color={image ? "#fff" : "#000"} />
+                  </button>
+                ) : (
+                  <Box
+                    position="absolute"
+                    dangerouslySetInlineStyle={{
+                      __style: { top: 4, right: 4 },
+                    }}
+                  >
+                    <IconButton
+                      accessibilityLabel={accessibilityCloseLabel}
+                      color={image ? "primary" : "tertiary"}
+                      on={image ? "darkBackground" : "lightBackground"}
+                      size="sm"
+                      icon={XIconCambio}
+                    />
+                  </Box>
+                )}
               </Box>
               {image && <Box maxHeight={200}>{image}</Box>}
               <Box
                 display="flex"
                 gap={3}
                 direction="column"
-                padding={themeName === "classic" ? 9 : 3}
+                padding={themeName === "classic" ? 9 : 6}
               >
                 <Heading
                   as="h1"
diff --git a/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx b/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx
index 2c7ecc33..c0487365 100644
--- a/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx
+++ b/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx
@@ -71,7 +71,7 @@ describe("themeProvider", () => {
     expect(screen.getByTestId("themeprovider-style")).toContainHTML(
       "--color-base-primary-100: #faf4eb;",
     );
-    expect(screen.getByTestId("themeprovider-style")).not.toContainHTML(
+    expect(screen.getByTestId("themeprovider-style")).toContainHTML(
       "elevation",
     );
     expect(screen.getByTestId("themeprovider-style")).toContainHTML("cambio");
diff --git a/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx b/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx
index 1fb8f42e..cd1c89ee 100644
--- a/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx
+++ b/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx
@@ -90,10 +90,6 @@ function stylesForTheme(themeName: ThemeName) {
               ],
             ];
           }
-          // `elevation` is a classic only concept
-          if (themeName === "cambio" && key.includes("elevation")) {
-            return [null, null];
-          }
           return [key, value];
         })
         .map(([key, value]) => (key && value ? `--${key}: ${value};` : null))