more light mode fixes

Author: davemooreuws

docs/index.mdx

@@ -20,7 +20,7 @@ Oh, and it supports basically any language, like JavaScript, TypeScript, Python,
 
 <CodeSwitcher className="xl:max-h-[300px]" tabs>
 
-```javascript !! title:services/api.js
+```javascript title:services/api.js
 import { api } from '@nitric/sdk'
 
 const main = api('main')
@@ -31,7 +31,7 @@ main.get('/hello/:name', async ({ req, res }) => {
 })
 ```
 
-```typescript !! title:services/api.ts
+```typescript title:services/api.ts
 import { api } from '@nitric/sdk'
 
 const main = api('main')
@@ -42,7 +42,7 @@ main.get('/hello/:name', async ({ req, res }) => {
 })
 ```
 
-```python !! title:services/example.py
+```python title:services/example.py
 from nitric.application import Nitric
 from nitric.resources import api
 from nitric.context import HttpContext
@@ -57,7 +57,7 @@ async def hello_world(ctx: HttpContext):
 Nitric.run()
 ```
 
-```go !! title:services/example/main.go
+```go title:services/example/main.go
 // !collapse(1:5) collapsed
 import (
   "context"
@@ -78,7 +78,7 @@ func main() {
 }
 ```
 
-```dart !! title:services/example.dart
+```dart title:services/example.dart
 import 'package:nitric_sdk/nitric.dart';
 
 void main() {

src/components/code/CodeContainer.tsx

@@ -6,7 +6,7 @@ const CodeContainer: React.FC<React.PropsWithChildren> = ({ children }) => {
       <div
         tabIndex={0}
         className={
-          'not-prose group relative mb-6 w-full max-w-full overflow-hidden rounded-md border border-white/5 bg-code shadow-[inset_0px_0px_33px_-10px_#00000008,0px_0px_38px_-2px_#00000030]'
+          'not-prose group relative mb-6 w-full max-w-full overflow-hidden rounded-md border bg-code shadow-md shadow-zinc-300/5 dark:border-white/5 dark:shadow-zinc-800/10'
         }
       >
         {children}

src/components/code/CopyButton.tsx

@@ -31,7 +31,7 @@ export function CopyButton({
         'group/button absolute right-3.5 top-2.5 z-10 h-8 rounded-md px-1.5 py-1 text-2xs font-medium backdrop-blur transition',
         copied
           ? 'bg-primary-400/10 ring-primary-400/20'
-          : 'bg-white/5 ring-1 ring-inset ring-zinc-300/10 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5',
+          : 'bg-white/5 ring-1 ring-inset ring-zinc-300/80 hover:bg-white/7.5 dark:bg-white/2.5 dark:ring-zinc-300/10 dark:hover:bg-white/5',
         'opacity-0 focus:opacity-100 group-hover:opacity-100 group-focus:opacity-100',
         className,
       )}

src/components/code/Pre.tsx

@@ -20,19 +20,20 @@ type Props = {
   highlighted: HighlightedCode
   showPanel?: boolean
   className?: string
-  copyButtonClassName?: string
 } & HandlerProps
 
 const Pre: React.FC<Props> = ({
   highlighted,
   showPanel,
   enableTransitions,
   className,
-  copyButtonClassName,
 }) => {
   const { title } = meta(highlighted)
 
   let handlers = [callout, fold, collapse, collapseTrigger, collapseContent]
+
+  // Getting an issue with color transitions on the -code-text token
+  // Note: this also won't work with the Tabs component, only the CodeSwitcherSelect
   if (enableTransitions) {
     handlers = [...handlers, tokenTransitions]
   }
@@ -47,23 +48,23 @@ const Pre: React.FC<Props> = ({
         <div className="relative flex h-9 items-center justify-start pr-12 font-display text-2xs text-zinc-300 sm:text-xs">
           {/* one-off breakpoint to hide the filename on extremely narrow screens - to avoid interfering with the lang select */}
           <div className="relative flex h-full items-center justify-center gap-x-1 px-4">
-            <div className="size-[6px] rounded-full bg-zinc-300/10" />
-            <div className="size-[6px] rounded-full bg-zinc-300/10" />
-            <div className="size-[6px] rounded-full bg-zinc-300/10" />
+            <div className="size-[6px] rounded-full bg-zinc-300 dark:bg-zinc-300/10" />
+            <div className="size-[6px] rounded-full bg-zinc-300 dark:bg-zinc-300/10" />
+            <div className="size-[6px] rounded-full bg-zinc-300 dark:bg-zinc-300/10" />
           </div>
-          <div className="absolute bottom-0 h-[1px] w-full bg-zinc-300/5" />
+          <div className="absolute bottom-0 h-px w-full bg-zinc-200 dark:bg-zinc-300/5" />
         </div>
       )}
       {showFileNamePanel && (
-        <div className="relative flex h-10 items-center justify-start pr-12 font-display text-2xs text-zinc-300 sm:text-xs">
+        <div className="relative flex h-10 items-center justify-start pr-12 font-display text-2xs dark:text-zinc-300 sm:text-xs">
           {/* one-off breakpoint to hide the filename on extremely narrow screens - to avoid interfering with the lang select */}
-          <div className="relative flex h-full items-center border-r border-zinc-300/5">
+          <div className="relative flex h-full items-center border-r dark:border-zinc-300/5">
             <span className="hidden whitespace-nowrap px-4 py-2 min-[320px]:block">
               {title}
             </span>
-            <div className="absolute bottom-0 h-[1px] w-full bg-primary-300" />
+            <div className="absolute bottom-0 z-10 h-px w-full bg-primary-300" />
           </div>
-          <div className="absolute bottom-0 h-[1px] w-full bg-zinc-300/5" />
+          <div className="absolute bottom-0 h-px w-full bg-zinc-200 dark:bg-zinc-300/5" />
         </div>
       )}
       <CopyButton

src/components/tabs/Tabs.tsx

@@ -43,13 +43,13 @@ export const Tabs: React.FC<TabProps> = ({
           <TabsTrigger
             value={tab.props.label}
             key={tab.props.label}
-            className="group/tab relative h-12 data-[state=active]:bg-transparent data-[state=active]:text-primary dark:hover:text-zinc-200 dark:data-[state=active]:text-primary-300"
+            className="group/tab relative h-12 hover:text-zinc-600 data-[state=active]:bg-transparent data-[state=active]:text-primary data-[state=active]:shadow-none dark:hover:text-zinc-200 dark:data-[state=active]:text-primary-300"
           >
             {tab.props.label}
-            <div className="absolute inset-x-0 bottom-0 h-px bg-primary opacity-0 transition-opacity group-data-[state=active]/tab:opacity-100 dark:bg-primary-300" />
+            <div className="absolute inset-x-0 bottom-0 z-10 h-px bg-primary opacity-0 transition-opacity group-data-[state=active]/tab:opacity-100 dark:bg-primary-300" />
           </TabsTrigger>
         ))}
-        <div className="absolute inset-x-0 bottom-0 h-px bg-zinc-300/10" />
+        <div className="absolute inset-x-0 bottom-0 h-px bg-zinc-200 dark:bg-zinc-300/10" />
       </TabsList>
       {children}
     </BaseTabs>