sync react versions

docs/package.json

@@ -13,6 +13,7 @@
     "@ensdomains/thorin": "workspace:*",
     "@reach/skip-nav": "^0.16.0",
     "@sindresorhus/slugify": "^2.1.0",
+    "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/next-plugin": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
     "eslint-config-next": "^13.5.6",
@@ -23,8 +24,8 @@
     "nookies": "^2.5.2",
     "prism-react-renderer": "^1.2.1",
     "prism-theme-vars": "^0.2.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-element-to-jsx-string": "^14.3.4",
     "react-live": "3.1.1",
     "react-transition-state": "^2.1.2",

docs/src/components/AdditionalColors/components/PaletteRow.css.ts

@@ -0,0 +1,11 @@
+import { createVar, style } from '@vanilla-extract/css'
+
+export const paletteCellBackgroundColor = createVar()
+
+export const paletteCell = style({
+  'backgroundColor': paletteCellBackgroundColor,
+  'transform': 'scale(1)',
+  ':hover': {
+    transform: 'scale(1.05)',
+  },
+})

docs/src/components/AdditionalColors/components/PaletteRow.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import type { RawColor } from '@ensdomains/thorin'
-import { Box, Typography } from '@ensdomains/thorin'
+import { Box, rawColorToRGB, Typography } from '@ensdomains/thorin'
 import { match, P } from 'ts-pattern'
+import * as styles from './PaletteRow.css'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 
 const PaletteCell = ({
   name,
@@ -26,11 +28,14 @@ const PaletteCell = ({
       <Box
         width="full"
         height="24"
-        // backgroundColor={rawColorToRGB(color)}
+        className={styles.paletteCell}
+        style={assignInlineVars({
+          [styles.paletteCellBackgroundColor]: rawColorToRGB(color),
+        })}
         borderRadius="large"
-        // border="1px solid"
+        borderWidth="1x"
+        borderStyle="solid"
         borderColor="border"
-        // transform={{ base: 'scale(1)', hover: 'scale(1.05)' }}
         transitionDuration={150}
         transitionTimingFunction="ease-in-out"
         transitionProperty="transform"

docs/src/components/CodeBlock/CodeBlock.tsx

@@ -34,7 +34,8 @@ const Pre = (props: PropsWithChildren) => (
     backgroundColor="greySurface"
     borderRadius="large"
     padding="4"
-    border="1px solid"
+    borderWidth="1x"
+    borderStyle="solid"
     borderColor="border"
     position="relative"
   />