cleanup readme and minify in prod

README.md

@@ -1,78 +1,16 @@
-# ENS Design System · [![NPM version](https://img.shields.io/npm/v/thorin.svg?style=for-the-badge&labelColor=161c22)](https://www.npmjs.com/package/@ensdomains/thorin) [![License](https://img.shields.io/npm/l/thorin.svg?style=for-the-badge&labelColor=161c22)](/LICENSE)
+# ENS Design System
 
-A design system for ENS built with React and styled-components.
+[![NPM version](https://img.shields.io/npm/v/thorin.svg?style=for-the-badge&labelColor=161c22)](https://www.npmjs.com/package/@ensdomains/thorin) [![License](https://img.shields.io/npm/l/thorin.svg?style=for-the-badge&labelColor=161c22)](/LICENSE)
+
+A design system for ENS built with React and vanilla-extract.
 
 **NOTE: This project is in alpha stage. It is in active development and is subject to change.**
 
 ## Install
 
-To install this package using npm:
-
-```bash
-npm install @ensdomains/thorin styled-components [email protected]
-
-```
-
-To install this package using yarn:
 
 ```bash
-yarn add @ensdomains/thorin styled-components [email protected]
-```
-
-## Set Up
-
-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 { ThemeProvider } from 'styled-components'
-import { ThorinGlobalStyles, lightTheme } from '@ensdomains/thorin'
-
-const App = () => {
-  return (
-    <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>
-  )
-}
-```
-
-## Use Components
-
-A list of components with examples are available on the [project website](https://thorin.ens.domains).
-
-A simple example to get you started:
-
-```tsx
-import { Input, SearchSVG } from '@ensdomains/thorin'
-
-const SearchInput = () => {
-  return (
-    <Input
-      label="Search"
-      placeholder="Name or wallet address"
-      prefix={<SearchSVG />}
-    />
-  )
-}
+pnpm i react react-dom @ensdomains/thorin
 ```
 
 ## Documentation
@@ -88,21 +26,21 @@ The documentation is divided into two sections.
 
 ```bash
 gh clone repo @ensdomains/thorin
-pnpm install
+pnpm i
 pnpm dev
 ```
 
 Before development, it is recommended that you read the following:
 
 - [Development Guide](https://thorin.ens.domains/guides/development) - Information and tips to help you when working on this project including:
-  - [Component Groups](https://thorin.ens.domains/guides/development#component-groups) - How the components are organized.
-  - [Adding Components](https://thorin.ens.domains/guides/development#adding-components) - A list of files that need to be added or modified for each component.
-  - [Style Guidlines](https://thorin.ens.domains/guides/development#style-guidelines) - Rules and tips to follow to keep the project code consistent and maintainable.
-  - [Common Issues](https://thorin.ens.domains/guides/development#common-issues) - A list of known issues and how to resolve them.
+- [Component Groups](https://thorin.ens.domains/guides/development#component-groups) - How the components are organized.
+- [Adding Components](https://thorin.ens.domains/guides/development#adding-components) - A list of files that need to be added or modified for each component.
+- [Style Guidlines](https://thorin.ens.domains/guides/development#style-guidelines) - Rules and tips to follow to keep the project code consistent and maintainable.
+- [Common Issues](https://thorin.ens.domains/guides/development#common-issues) - A list of known issues and how to resolve them.
 
 ## Contributing
 
-Contribute to this project by sending a pull request to [this repository](https://github.com/ensdomains/thorin).
+Contribute to this project by sending a pull request.
 
 ## Sources
 

components/src/components/atoms/Portal/Portal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import { createPortal } from 'react-dom'
 
 type Props = {
   /** The classname attribute of the container element */
@@ -29,7 +29,7 @@ export const Portal: React.FC<Props> = ({
     }
   }, [renderCallback])
 
-  return ReactDOM.createPortal(children, container)
+  return createPortal(children, container)
 }
 
 Portal.displayName = 'Portal'

components/vite.config.ts

@@ -38,7 +38,7 @@ export default defineConfig(({ mode }) => {
     plugins: [
       tsconfigPaths(),
       vanillaExtractPlugin({
-        identifiers: mode === 'development' ? 'short' : ({ hash }) => `thorin-${hash}`,
+        identifiers: mode === 'development' ? ({ hash }) => `thorin-${hash}` : 'short',
       }),
       dtsPlugin({ entryRoot: path.resolve(__dirname),
         exclude: [

docs/src/pages/_app.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import type { AppProps } from 'next/app'
 import { MDXProvider } from '@mdx-js/react'
-// import Head from 'next/head'
-import Script from 'next/script'
 
 import { ThemeProvider } from '@ensdomains/thorin'
 import '@ensdomains/thorin/dist/style.css'
@@ -19,12 +17,6 @@ const App = ({ Component, pageProps }: AppProps) => {
     <>
       {/* <Head /> */}
       {/* Prevent theme flash */}
-      <Script
-        dangerouslySetInnerHTML={{
-          __html: `!function(){try{var d=document.documentElement;var e=document.cookie.split(";").find(x=>x.includes("mode"));if(e){d.setAttribute('data-theme',e.replace("mode=","").trim())}else{d.setAttribute('data-theme','light');}}catch(t){}}();`,
-        }}
-        id="prevent-theme-flash"
-      />
       <MDXProvider components={MDX}>
         <ThemeProvider>{getLayout(<Component {...pageProps} />)}</ThemeProvider>
       </MDXProvider>