fix css emit and wip docs build

components/src/components/atoms/ScrollBox/styles.css.ts

@@ -1,19 +1,14 @@
-import { createVar, style } from '@vanilla-extract/css'
+import { style } from '@vanilla-extract/css'
 
-import { commonVars, modeVars } from '@/src/css/theme.css'
-
-const scrollBar = createVar()
+import { commonVars, cssVars, modeVars } from '@/src/css/theme.css'
 
 export const scrollBox = style({
-  vars: {
-    [scrollBar]: modeVars.color.greyLight,
-  },
   overflow: 'auto',
   position: 'relative',
   width: commonVars.space.full,
   height: commonVars.space.full,
   borderColor: modeVars.color.greyLight,
-  transition: `var(${scrollBar}) 0.15s ease-in-out, height 0.15s ease-in-out, var(--top-line-color) 0.15s ease-in-out, var(--bottom-line-color) 0.15s ease-in-out`,
+  transition: `${modeVars.color.greyLight} 0.15s ease-in-out, height 0.15s ${cssVars.transitionTimingFunction.popIn}, var(--top-line-color) 0.15s ease-in-out, var(--bottom-line-color) 0.15s ease-in-out`,
   selectors: {
     '&::-webkit-scrollbar': {
       width: commonVars.space['3.5'],
@@ -31,13 +26,13 @@ export const scrollBox = style({
     },
     '&::-webkit-scrollbar-thumb': {
       transition: 'box-shadow 0.15s ease-in-out',
-      boxShadow: `inset 0 0 ${commonVars.space['3']} ${commonVars.space['3']} var(${scrollBar})`,
+      boxShadow: `inset 0 0 ${commonVars.space['3']} ${commonVars.space['3']} ${modeVars.color.greyLight}`,
       border: 'solid $1 transparent',
       borderRadius: commonVars.space['3'],
       backgroundColor: 'transparent',
     },
     '&:hover': {
-      [scrollBar]: modeVars.color.greyBright,
+      color: modeVars.color.greyBright,
     },
   },
 })

components/src/index.ts

@@ -2,3 +2,4 @@ export * from './components'
 export { tokens, baseTheme, lightTheme, darkTheme } from './tokens'
 export type { DefaultTheme, EmptyObject, Accent, Mode } from './types'
 export type { Hue, Colors, Space } from './tokens'
+export * from './css/theme.css'

docs/next.config.mjs

@@ -1,20 +1,18 @@
-import { glob } from 'glob'
+import { globSync } from 'tinyglobby'
 import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin'
 import path from 'node:path'
 const withVanillaExtract = createVanillaExtractPlugin({ identifiers: 'short' })
 import nextMDX from '@next/mdx'
-import StylelintWebpackPlugin from 'stylelint-webpack-plugin'
 
 const withMDX = nextMDX({
   extension: /\.mdx?$/,
 })
 
 const getComponentPaths = category =>
-  glob
-    .sync(`./src/reference/mdx/${category}/**/!(Icons[A-Z])*.docs.mdx`, {
-      cwd: process.cwd(),
-      absolute: true,
-    })
+  globSync(`./src/reference/mdx/${category}/**/!(Icons[A-Z])*.docs.mdx`, {
+    cwd: process.cwd(),
+    absolute: true,
+  })
     .map((x) => {
       const name = path.basename(x, '.docs.mdx')
       const route = `/components/${category}/${name}`
@@ -70,11 +68,6 @@ const config = {
   },
   pageExtensions: ['mdx', 'tsx'],
   webpack(config) {
-    config.plugins.push(
-      new StylelintWebpackPlugin({
-        extensions: ['tsx'],
-      }),
-    )
     config.resolve.alias['@ensdomains/thorin'] = path.resolve(
       import.meta.dirname,
       '../components',

docs/package.json

@@ -19,7 +19,7 @@
     "copy-to-clipboard": "^3.3.1",
     "gray-matter": "^4.0.3",
     "lodash": "^4.17.21",
-    "next": "12.3.0",
+    "next": "14.2.5",
     "next-mdx-remote": "^3.0.6",
     "nookies": "^2.5.2",
     "prism-react-renderer": "^1.2.1",
@@ -47,11 +47,11 @@
     "babel-loader": "^8.2.4",
     "css-loader": "^6.8.1",
     "fs-extra": "^10.0.0",
-    "glob": "^7.2.0",
     "mini-css-extract-plugin": "^2.7.6",
     "react-docgen-typescript": "^2.1.1",
     "style-loader": "^3.3.3",
     "stylelint-webpack-plugin": "^3.3.0",
+    "tinyglobby": "^0.2.2",
     "typescript": "^4.6.2",
     "utility-types": "^3.10.0"
   }

docs/src/pages/_app.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
-import { AppProps } from 'next'
+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/style.css'
+import '@ensdomains/thorin/dist/style.css'
 import { MDX } from '~/components'
 import { getLayout as getDocsLayout } from '~/layouts/docs'
 // import GlobalStyle from '~/styles/globalStyles'

docs/src/playroom/useScope.ts

@@ -1,7 +1,6 @@
-// import { useTheme } from '@ensdomains/thorin/components'
-// import { vars } from '@ensdomains/thorin/css'
+import { useTheme } from '@ensdomains/thorin'
+import { cssVars } from '@ensdomains/thorin'
 
-import { useTheme } from 'styled-components'
 import React from 'react'
 
 import { usePlayroomStore } from './PlayroomState'
@@ -25,7 +24,7 @@ const useScope = () => {
   return {
     ...useTheme(),
     ...usePlayroomStore(),
-    // vars,
+    vars: cssVars,
     avatars,
     React,
   }