updated components, README.md and copy README to thorin on publish

.github/workflows/publish.yml

@@ -42,6 +42,10 @@ jobs:
           git add .
           git commit -m "${{ github.event.release.tag_name }}"
 
+      - name: Copy README
+        run: |
+          cp README.md components/README.md
+
       - name: Publish Main
         if: ${{ github.ref == 'refs/heads/main'}}
         env:

README.md

@@ -26,14 +26,30 @@ Checkout the project's [playroom](https://thorin.ens.domains/playroom) to previe
 In your App component, wrap the root of your app in a [`ThemeProvider`](https://styled-components.com/docs/advanced) module from [styled-components](https://styled-components.com). Import `ThorinGlobalStyles` and declare it as a child of `ThemeProvider` to set global styles. Set the theme by passing a theme object to `ThemeProvider`.
 
 ```tsx
-import React, { useState } from 'react'
 import { ThemeProvider } from 'styled-components'
-import { DefaultTheme, ThorinGlobalStyles } from '@ensdomains/thorin'
+import { ThorinGlobalStyles, lightTheme } from '@ensdomains/thorin'
 
 const App = () => {
-  const [theme, setTheme] = useState<DefaultTheme>({ mode: 'light' })
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={lightTheme}>
+      <ThorinGlobalStyles />
+      {children}
+    </ThemeProvider>
+  )
+}
+```
+
+### Dark Theme
+
+To use the dark theme, import darkTheme and pass it to the ThemeProvider
+
+```tsx
+import { ThemeProvider } from 'styled-components'
+import { ThorinGlobalStyles, lightTheme } from '@ensdomains/thorin'
+
+const App = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
       <ThorinGlobalStyles />
       {children}
     </ThemeProvider>

components/src/components/atoms/Banner/Banner.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
+import { mq } from '@/src/utils/responsiveHelpers'
+
 import { WithAlert, WithIcon } from '../../../types'
 
 import { Typography } from '../Typography'
@@ -14,8 +16,6 @@ type BaseProps = {
   message: string
   /** The title for the banner */
   title?: string
-  /** Controls the spacing of the banner */
-  screen?: 'mobile' | 'desktop'
   as?: 'a'
   onDismiss?: () => void
 } & NativeDivProps
@@ -40,9 +40,8 @@ type NonNullableAlert = NonNullable<Props['alert']>
 
 const Container = styled.div<{
   $alert: NonNullableAlert
-  $screen: Props['screen']
 }>(
-  ({ theme, $alert, $screen }) => css`
+  ({ theme, $alert }) => css`
     position: relative;
     background: ${theme.colors.backgroundPrimary};
     border: 1px solid ${theme.colors.border};
@@ -65,10 +64,11 @@ const Container = styled.div<{
       border: 1px solid ${theme.colors.yellowPrimary};
     `};
 
-    ${$screen === 'desktop' &&
-    css`
-      gap: ${theme.space[6]};
-    `}
+    ${mq.md.min(
+      css`
+        gap: ${theme.space[6]};
+      `,
+    )}
   `,
 )
 
@@ -83,10 +83,9 @@ const Content = styled.div(
 )
 
 const IconContainer = styled.div<{
-  $screen: Props['screen']
   $alert: NonNullableAlert
 }>(
-  ({ theme, $screen, $alert }) => css`
+  ({ theme, $alert }) => css`
     width: ${theme.space[8]};
     height: ${theme.space[8]};
     flex: 0 0 ${theme.space[8]};
@@ -97,12 +96,11 @@ const IconContainer = styled.div<{
       height: 100%;
     }
 
-    ${$screen === 'desktop' &&
-    css`
+    ${mq.md.min(css`
       width: ${theme.space[10]};
       height: ${theme.space[10]};
       flex: 0 0 ${theme.space[10]};
-    `}
+    `)}
 
     ${$alert === 'error' &&
     css`
@@ -203,7 +201,6 @@ export const Banner = ({
   title,
   alert = 'info',
   icon,
-  screen: screen,
   as: asProp,
   href,
   onDismiss,
@@ -213,8 +210,8 @@ export const Banner = ({
     icon || (alert && ['error', 'warning'].includes(alert) ? AlertSVG : EthSVG)
 
   return (
-    <Container {...props} $alert={alert} $screen={screen} as={asProp as any}>
-      <IconContainer $alert={alert} $screen={screen}>
+    <Container {...props} $alert={alert} as={asProp as any}>
+      <IconContainer $alert={alert}>
         <Icon />
       </IconContainer>
       <Content>

components/src/components/atoms/Card/Card.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
+import { mq } from '@/src/utils/responsiveHelpers'
+
 import { Typography } from '../Typography'
 
 export type Props = {
   title?: string
-  variant?: 'mobile' | 'desktop'
 } & NativeDivProps
 
-const Container = styled.div<{ $variant: Props['variant'] }>(
-  ({ theme, $variant }) => css`
+const Container = styled.div(
+  ({ theme }) => css`
     display: flex;
     flex-direction: column;
     gap: ${theme.space['4']};
@@ -19,32 +20,34 @@ const Container = styled.div<{ $variant: Props['variant'] }>(
     background-color: ${theme.colors.backgroundPrimary};
     border: 1px solid ${theme.colors.border};
 
-    ${$variant === 'desktop' &&
-    css`
-      padding: ${theme.space['6']};
-    `}
+    ${mq.md.min(
+      css`
+        padding: ${theme.space['6']};
+      `,
+    )}
   `,
 )
 
-const Divider = styled.div<{ $variant: Props['variant'] }>(
-  ({ theme, $variant }) => css`
+const Divider = styled.div(
+  ({ theme }) => css`
     width: calc(100% + 2 * ${theme.space['4']});
     height: 1px;
     background: ${theme.colors.border};
     margin: 0 -${theme.space['4']};
-    ${$variant === 'desktop' &&
-    css`
-      margin: 0 -${theme.space['6']};
-      width: calc(100% + 2 * ${theme.space['6']});
-    `}
+    ${mq.md.min(
+      css`
+        margin: 0 -${theme.space['6']};
+        width: calc(100% + 2 * ${theme.space['6']});
+      `,
+    )}
   `,
 )
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
-export const Card = ({ title, variant, children, ...props }: Props) => {
+export const Card = ({ title, children, ...props }: Props) => {
   return (
-    <Container {...props} $variant={variant}>
+    <Container {...props}>
       {title && <Typography typography="Heading/H4">{title}</Typography>}
       {children}
     </Container>