add back style sheet

Author: jerader

components/src/molecules/ReleaseNotes/index.tsx

@@ -1,10 +1,11 @@
 import Markdown from 'react-markdown'
-import styled from 'styled-components'
 import { LegacyStyledText } from '../../atoms'
 import { Box } from '../../primitives'
 import { COLORS } from '../../helix-design-system'
 import { SPACING } from '../../ui-style-constants'
 
+import styles from './styles.module.css'
+
 export interface ReleaseNotesProps {
   isOEMMode: boolean
   source?: string | null
@@ -16,7 +17,7 @@ export function ReleaseNotes(props: ReleaseNotesProps): JSX.Element {
   const { source, isOEMMode } = props
 
   return (
-    <div css={ReleaseNotesStyled}>
+    <div className={styles.release_notes}>
       {source != null && !isOEMMode ? (
         <Markdown
           components={{
@@ -67,70 +68,3 @@ function HorizontalRule(): JSX.Element {
     />
   )
 }
-
-const ReleaseNotesStyled = styled.div`
-  .release_notes {
-    width: 100%;
-    max-height: 100%;
-    padding: 0 0.5rem;
-
-    & > h1 {
-      font-size: var(--fs-header); /* from legacy --font-header-dark */
-      font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
-      color: var(--c-font-dark); /* from legacy --font-header-dark */
-      margin-bottom: 1rem;
-    }
-
-    & > h2 {
-      font-size: var(--fs-header); /* from legacy --font-header-dark */
-      color: var(--c-font-dark); /* from legacy --font-header-dark */
-      font-weight: var(--fw-regular);
-      margin-top: 1rem;
-      margin-bottom: 0.75rem;
-    }
-
-    & > h3 {
-      font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-      color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-      font-weight: var(--fw-semibold);
-      margin-top: 0.75rem;
-      margin-bottom: 0.5rem;
-    }
-
-    & ul,
-    & ol {
-      margin-left: 1.25rem;
-      margin-bottom: 0.25rem;
-      font-size: var(--fs-body-2);
-      color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    }
-
-    & li {
-      margin: 0.25rem 0;
-      font-size: var(--fs-body-2);
-      color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-    }
-
-    & code {
-      font-family: monospace;
-      color: var(--c-font-dark);
-    }
-
-    & pre {
-      margin: 0.5rem 0;
-      padding: 0.5rem 0.75rem;
-      background-color: var(--c-font-dark);
-
-      & code {
-        color: var(--c-font-light);
-      }
-    }
-
-    & p {
-      font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-      font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
-      color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-      margin-bottom: 1rem;
-    }
-  }
-`

components/src/molecules/ReleaseNotes/styles.module.css

@@ -0,0 +1,66 @@
+@import '../../index.module.css';
+
+.release_notes {
+  width: 100%;
+  max-height: 100%;
+  padding: 0 0.5rem;
+
+  & > h1 {
+    font-size: var(--fs-header); /* from legacy --font-header-dark */
+    font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
+    color: var(--c-font-dark); /* from legacy --font-header-dark */
+    margin-bottom: 1rem;
+  }
+
+  & > h2 {
+    font-size: var(--fs-header); /* from legacy --font-header-dark */
+    color: var(--c-font-dark); /* from legacy --font-header-dark */
+    font-weight: var(--fw-regular);
+    margin-top: 1rem;
+    margin-bottom: 0.75rem;
+  }
+
+  & > h3 {
+    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    font-weight: var(--fw-semibold);
+    margin-top: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  & ul,
+  & ol {
+    margin-left: 1.25rem;
+    margin-bottom: 0.25rem;
+    font-size: var(--fs-body-2);
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+  }
+
+  & li {
+    margin: 0.25rem 0;
+    font-size: var(--fs-body-2);
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+  }
+
+  & code {
+    font-family: monospace;
+    color: var(--c-font-dark);
+  }
+
+  & pre {
+    margin: 0.5rem 0;
+    padding: 0.5rem 0.75rem;
+    background-color: var(--c-font-dark);
+
+    & code {
+      color: var(--c-font-light);
+    }
+  }
+
+  & p {
+    font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
+    font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
+    color: var(--c-font-dark); /* from legacy --font-body-2-dark */
+    margin-bottom: 1rem;
+  }
+}