better focus ui, use ring color as theme hue color (#798)

* better focus ui, use ring color as theme hue color

* Update packages/nextra-theme-docs/src/components/sidebar.tsx

* Update packages/nextra-theme-docs/src/mdx-components.tsx

* fix covered select options (#803)

* fix covered select options

* remove popper.tsx (was created for test purposes)

* merge fixes

* rebase fixes

* works

* fixes

.changeset/angry-worms-punch.md

@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix covered select options

.changeset/strange-clocks-teach.md

@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+better focus ui, use ring color as theme hue color

examples/swr-site/pages/_meta.en-US.json

@@ -58,14 +58,15 @@
   "404": {
     "type": "page",
     "theme": {
-      "timestamp": false
+      "timestamp": false,
+      "typesetting": "article"
     }
   },
   "500": {
     "type": "page",
     "theme": {
       "timestamp": false,
-      "layout": "full"
+      "typesetting": "article"
     }
   }
 }

examples/swr-site/theme.config.tsx

@@ -113,7 +113,7 @@ const config: DocsThemeConfig = {
         <a
           rel="noopener"
           target="_blank"
-          className="inline-flex items-center font-semibold gap-2"
+          className="flex items-center font-semibold gap-2"
           href={FOOTER_LINK[locale]}
         >
           {FOOTER_LINK_TEXT[locale]}

packages/nextra-theme-blog/src/article-layout.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 import Meta from './meta'
-import MDXTheme from './mdx-theme'
+import { MDXTheme } from './mdx-theme'
 import { useBlogContext } from './blog-context'
 import { BasicLayout } from './basic-layout'
 

packages/nextra-theme-blog/src/index.tsx

@@ -1,7 +1,6 @@
-import React, { ReactElement, ReactNode, FC } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import { ThemeProvider } from 'next-themes'
-import type { PageOpts } from 'nextra'
-import type { LayoutProps, NextraBlogTheme } from './types'
+import type { LayoutProps } from './types'
 import { BlogProvider } from './blog-context'
 import { ArticleLayout } from './article-layout'
 import { PostsLayout } from './posts-layout'

packages/nextra-theme-blog/src/mdx-theme.tsx

@@ -82,8 +82,10 @@ const components = {
   code: Code
 }
 
-const MDXTheme = ({ children }: { children: ReactNode }): ReactElement => {
+export const MDXTheme = ({
+  children
+}: {
+  children: ReactNode
+}): ReactElement => {
   return <MDXProvider components={components}>{children}</MDXProvider>
 }
-
-export default MDXTheme

packages/nextra-theme-blog/src/page-layout.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 import { BasicLayout } from './basic-layout'
-import MDXTheme from './mdx-theme'
+import { MDXTheme } from './mdx-theme'
 import Nav from './nav'
 
 export const PageLayout = ({ children }: { children: ReactNode }) => {

packages/nextra-theme-blog/src/posts-layout.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import React, { ReactNode } from 'react'
 import { useBlogContext } from './blog-context'
 import { BasicLayout } from './basic-layout'
-import MDXTheme from './mdx-theme'
+import { MDXTheme } from './mdx-theme'
 import Nav from './nav'
 import { collectPostsAndNavs } from './utils/collect'
 import getTags from './utils/get-tags'

packages/nextra-theme-docs/css/hamburger.css

@@ -1,36 +1,34 @@
 .nextra-hamburger svg {
   g {
-    transform-origin: center;
-    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+    @apply origin-center;
+    transition: transform 0.2s cubic-bezier(.25, 1, .5, 1);
   }
   path {
     opacity: 1;
-    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
-    opacity 0.2s ease 0.2s;
+    transition: transform 0.2s cubic-bezier(.25, 1, .5, 1) 0.2s, opacity .2s ease .2s;
   }
 
   &.open {
     path {
-      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
-      opacity 0s ease 0.2s;
+      transition: transform 0.2s cubic-bezier(.25, 1, .5, 1), opacity 0s ease .2s;
     }
     g {
-      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+      transition: transform 0.2s cubic-bezier(.25, 1, .5, 1) .2s;
     }
   }
 
   &.open > {
     path {
-      opacity: 0;
+      @apply opacity-0
     }
     g:nth-of-type(1) {
-      transform: rotate(45deg);
+      @apply rotate-45;
       path {
         transform: translate3d(0, 6px, 0);
       }
     }
     g:nth-of-type(2) {
-      transform: rotate(-45deg);
+      @apply -rotate-45;
       path {
         transform: translate3d(0, -6px, 0);
       }

packages/nextra-theme-docs/css/scrollbar.css

@@ -7,7 +7,7 @@
     @apply w-1.5 h-1.5;
   }
   &::-webkit-scrollbar-track {
-    @apply bg-transparent my-5;
+    @apply bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
     @apply rounded-[20px];