diff --git a/src/Glass.module.css b/src/Glass.module.css deleted file mode 100644 index cdb9621a..00000000 --- a/src/Glass.module.css +++ /dev/null @@ -1,31 +0,0 @@ -/* -Copyright 2023 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -.glass { - border-radius: 36px; - padding: 11px; - border: 1px solid var(--cpd-color-alpha-gray-400); - background: var(--cpd-color-alpha-gray-400); - backdrop-filter: blur(10px); -} - -.glass > * { - border-radius: 24px; -} - -.glass.frosted { - backdrop-filter: blur(20px); -} diff --git a/src/Glass.tsx b/src/Glass.tsx deleted file mode 100644 index be59172d..00000000 --- a/src/Glass.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/* -Copyright 2023 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import { - ComponentPropsWithoutRef, - ReactNode, - forwardRef, - Children, -} from "react"; -import classNames from "classnames"; - -import styles from "./Glass.module.css"; - -interface Props extends ComponentPropsWithoutRef<"div"> { - children: ReactNode; - className?: string; - /** - * Increases the blur effect. - * @default false - */ - frosted?: boolean; -} - -/** - * Adds a border of glass around a child component. - */ -export const Glass = forwardRef( - ({ frosted = false, children, className, ...rest }, ref) => ( -
- {Children.only(children)} -
- ), -); diff --git a/src/Modal.tsx b/src/Modal.tsx index 5a6aea94..8f7d2aed 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -29,12 +29,11 @@ import { Drawer } from "vaul"; import { VisuallyHidden } from "@radix-ui/react-visually-hidden"; import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg?react"; import classNames from "classnames"; -import { Heading } from "@vector-im/compound-web"; +import { Heading, Glass } from "@vector-im/compound-web"; import styles from "./Modal.module.css"; import overlayStyles from "./Overlay.module.css"; import { useMediaQuery } from "./useMediaQuery"; -import { Glass } from "./Glass"; // TODO: Support tabs export interface Props extends AriaDialogProps { @@ -118,7 +117,6 @@ export const Modal: FC = ({ />