Reduce global css (#2468)

Co-authored-by: Connor Bär <[email protected]>

Author: leonardodino

packages/circuit-ui/components/Body/Body.module.css

@@ -88,12 +88,14 @@
 /* Variants */
 
 .highlight,
-strong {
+strong.base,
+.base strong {
   font-weight: var(--cui-font-weight-bold);
 }
 
 .quote,
-blockquote {
+blockquote.base,
+.base blockquote {
   padding-left: var(--cui-spacings-kilo);
   font-style: italic;
   border-left: var(--cui-border-width-mega) solid var(--cui-border-accent);

packages/circuit-ui/components/ModalContext/Modal.css renamed to packages/circuit-ui/components/ModalContext/ModalContext.module.css

@@ -1,12 +1,12 @@
 /* Remove scroll on the body when react-modal is open */
-.cui-modal-open {
+.open {
   height: 100%;
   overflow-y: hidden;
   -webkit-overflow-scrolling: auto;
 }
 
 /* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */
-.cui-modal-portal {
+.portal {
   position: absolute;
   width: 100%;
   height: 100%;

packages/circuit-ui/components/ModalContext/ModalContext.tsx

@@ -29,11 +29,10 @@ import { last } from '../../util/helpers.js';
 import { warn } from '../../util/logger.js';
 
 import type { BaseModalProps, ModalComponent } from './types.js';
+import classes from './ModalContext.module.css';
 
-import './Modal.css';
-
-const PORTAL_CLASS_NAME = 'cui-modal-portal';
-const HTML_OPEN_CLASS_NAME = 'cui-modal-open';
+const PORTAL_CLASS_NAME = classes.portal;
+const HTML_OPEN_CLASS_NAME = classes.open;
 // These are the default app element ids in Next.js, Docusaurus, CRA and Storybook.
 const APP_ELEMENT_IDS = ['root', '__next', '__docusaurus', 'storybook-root'];
 

packages/circuit-ui/components/SidePanel/SidePanel.tsx

@@ -109,8 +109,6 @@ export const SidePanel = ({
       labelledby: headerAriaId,
     },
     onRequestClose: onBack || onClose,
-    portalClassName: 'cui-side-panel-portal',
-    htmlOpenClassName: 'cui-side-panel-open',
     bodyOpenClassName: '',
     /**
      * react-modal relies on document.activeElement to return focus after the modal is closed.

packages/circuit-ui/components/SidePanel/SidePanelContext.css

@@ -1,3 +1,39 @@
+:root {
+  --side-panel-width: 400px;
+}
+
+/* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */
+.portal {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+}
+
+@media (max-width: 767px) {
+  /* Remove scroll on the body when react-modal is open */
+  .open {
+    height: 100%;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: auto;
+  }
+
+  /* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */
+  .portal {
+    top: 0;
+    left: 0;
+    z-index: var(--cui-z-index-modal);
+  }
+}
+
+/* Enable keyboard navigation inside the modal, see https://github.com/reactjs/react-modal/issues/782 */
+@media (min-width: 768px) {
+  .portal {
+    top: var(--top-navigation-height, 0);
+    z-index: var(--cui-z-index-absolute);
+    width: var(--side-panel-width);
+  }
+}
+
 .base {
   width: 100%;
   min-height: calc(100vh - var(--top-navigation-height));

packages/circuit-ui/components/SidePanel/SidePanelContext.module.css

@@ -38,8 +38,6 @@ import { TRANSITION_DURATION } from './constants.js';
 import type { SidePanelHookProps } from './useSidePanel.js';
 import classes from './SidePanelContext.module.css';
 
-import './SidePanelContext.css';
-
 // It is important for users of screen readers that other page content be hidden
 // (via the `aria-hidden` attribute) while the side panel is open on mobile.
 // To allow react-modal to do this, Circuit UI calls `ReactModal.setAppElement`
@@ -287,6 +285,8 @@ export function SidePanelProvider({
             isStacked={isStacked}
             onBack={handleBack}
             onClose={handleClose}
+            portalClassName={classes.portal}
+            htmlOpenClassName={classes.open}
           />
         );
       })}