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 (
+
+ );
+}
+
// 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({
-
+ {themeName === "classic" ? (
+
+ ) : (
+
+
+
+ )}
{image && {image}}
{
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))