@edgeandnode/eds-react 1.0.1 → 1.1.0

package/src/components/CodeBlock.parts.tsx

@@ -50,15 +50,6 @@ import { TabSetContext } from './TabSet.context.ts'
 import { TabSet, type TabSetTabProps } from './TabSet.tsx'
 import { ToggleButton } from './ToggleButton.tsx'
 
-// Can't import `@shikijs/vscode-textmate`'s `FontStyle` enum due to `verbatimModuleSyntax`
-const FontStyle = {
-  NotSet: -1,
-  None: 0,
-  Italic: 1,
-  Bold: 2,
-  Underline: 4,
-} as const
-
 const THEMES = {
   dark: 'night-owl',
   light: 'min-light',
@@ -166,7 +157,7 @@ export function CodeBlockRoot({
   children,
   ...props
 }: CodeBlockProps) {
-  const { activeTheme } = useEDS()
+  useEDS()
   const tabsContext = useContext(CodeBlockTabsContext)
   const hasAncestorTabs = tabsContext !== null
   const hasAncestorHeader = useContext(CodeBlockHeaderContext) !== false
@@ -209,7 +200,6 @@ export function CodeBlockRoot({
     highlights,
     secrets,
     language,
-    activeTheme,
     highlighter,
     hasAncestorHeader,
   })
@@ -363,7 +353,18 @@ export function CodeBlockRoot({
                   <span className="select-none"> </span>
                 ) : (
                   <span
+                    /**
+                     * `light-dark()` only works for colors, so the font styles use the `dark:`
+                     * variant (and highlighted tokens need `i:font-bold` to override the weight).
+                     */
                     className="
+                      *:font-(--shiki-light-font-weight)
+                      *:text-[light-dark(var(--shiki-light),var(--shiki-dark))]
+                      *:[font-style:var(--shiki-light-font-style)]
+                      *:[text-decoration:var(--shiki-light-text-decoration)]
+                      dark:*:font-(--shiki-dark-font-weight)
+                      dark:*:[font-style:var(--shiki-dark-font-style)]
+                      dark:*:[text-decoration:var(--shiki-dark-text-decoration)]
                       @prop-wrap-true/code-block:wrap-anywhere
                       @prop-wrap-true/code-block:whitespace-pre-wrap
                     "
@@ -379,23 +380,18 @@ export function CodeBlockRoot({
                           data-whitespace={chunk.content.trim() === '' || undefined}
                           data-highlighted={chunk.highlighted || undefined}
                           className={cn(
-                            chunk.fontStyle === FontStyle.Bold ? 'font-bold' : undefined,
-                            chunk.fontStyle === FontStyle.Italic ? 'italic' : undefined,
-                            chunk.fontStyle === FontStyle.Underline ? 'underline' : undefined,
-                            chunk.highlighted ? `z-10 bg-code-highlighted py-1 font-bold
+                            chunk.highlighted ? `z-10 bg-code-highlighted py-1
                               not-has-[+[data-highlighted]]:-me-1
                               not-has-[+[data-highlighted]]:rounded-e-4
                               not-has-[+[data-highlighted]]:pe-1
                               not-[[data-highlighted]+*]:-ms-1
                               not-[[data-highlighted]+*]:rounded-s-4
-                              not-[[data-highlighted]+*]:ps-1` : 'z-20',
+                              not-[[data-highlighted]+*]:ps-1
+                              i:font-bold` : 'z-20',
                             // Prevent wrapping between the indentation and the code
                             chunkIndex === 1 ? '[[data-whitespace]+*]:break-all' : undefined,
                           )}
-                          style={{
-                            color: chunk.color,
-                            backgroundColor: chunk.bgColor,
-                          }}
+                          style={chunk.htmlStyle}
                         >
                           {chunkContent}
                         </span>
@@ -423,7 +419,6 @@ function useCodeLines({
   highlights,
   secrets,
   language,
-  activeTheme,
   highlighter,
   hasAncestorHeader,
 }: {
@@ -432,7 +427,6 @@ function useCodeLines({
   highlights: string[]
   secrets: string[]
   language: Language
-  activeTheme: 'dark' | 'light'
   highlighter: Highlighter
   hasAncestorHeader: boolean
 }): { lines: CodeLine[]; codeToCopy: string } {
@@ -461,7 +455,9 @@ function useCodeLines({
     if (hasAncestorHeader) return []
 
     const { tokens } = highlighter.codeToTokens(code, {
-      theme: THEMES[activeTheme],
+      // Both themes' styles become CSS variables, so tokens follow the local color scheme
+      themes: THEMES,
+      defaultColor: false,
       lang: LANGUAGES.includes(language) ? language : 'text',
     })
 
@@ -526,7 +522,7 @@ function useCodeLines({
 
       return { chunks, style: lineStyle }
     })
-  }, [highlighter, passedCode, activeTheme, language, highlights, secrets, diff])
+  }, [highlighter, passedCode, language, highlights, secrets, diff])
 
   return { lines, codeToCopy }
 }

package/src/components/CopyButton.tsx

@@ -8,7 +8,8 @@ import type { EDSComponentProps } from '@edgeandnode/eds-css'
 import { CopyInteractiveIcon } from '@edgeandnode/eds-react/icons'
 
 import { useEDS } from '../hooks/index.ts'
-import { cn, isReactNode } from '../utils/index.ts'
+import { cn } from '../utils/index.ts'
+import { getTooltipProps } from '../utils/internal/index.ts'
 import { Button, type ButtonProps } from './Button.tsx'
 import type { CopyButtonMeta } from './CopyButton.meta.ts'
 import { Tooltip } from './Tooltip.tsx'
@@ -49,7 +50,7 @@ export function CopyButton({
 
   const hasChildren = children != null
   const copyIcon = <CopyInteractiveIcon copied={copied} />
-  const tooltipProps = isReactNode(tooltip) ? { content: tooltip } : tooltip
+  const tooltipProps = getTooltipProps(tooltip)
   const [tooltipOpen, setTooltipOpen] = useState(false)
 
   return (

package/src/components/Icon.tsx

@@ -1,18 +1,12 @@
 'use client'
 
-import {
-  createElement,
-  isValidElement,
-  type ComponentProps,
-  type ComponentType,
-  type ReactElement,
-} from 'react'
+import { createElement, type ComponentProps, type ComponentType, type ReactElement } from 'react'
 import { mergeProps } from '@base-ui/react'
 
 import type { EDSComponentProps } from '@edgeandnode/eds-css'
 
 import { useEDS } from '../hooks/index.ts'
-import { cn, getCSSPropsAttributes } from '../utils/index.ts'
+import { cn, getCSSPropsAttributes, isComponentType } from '../utils/index.ts'
 import { IconMeta } from './Icon.meta.ts'
 import { useTooltipCollector } from './Tooltip.tsx'
 
@@ -37,7 +31,7 @@ export interface IconPropsWithSrc extends IconProps {
 export function Icon({ src, alt, size, color, ...props }: IconPropsWithSrc) {
   useEDS()
 
-  const iconContent = isValidElement(src) ? src : createElement(src)
+  const iconContent = isComponentType(src) ? createElement(src) : src
   const collectTooltipContent = useTooltipCollector()
 
   if (collectTooltipContent && alt) {

package/src/components/Keyboard.tsx

@@ -54,7 +54,7 @@ export function Keyboard({ ref: passedRef, size, children, ...props }: KeyboardP
     >
       <span
         className={cn(
-          `inline-flex h-(--height) min-w-(--height) items-center justify-center rounded-4 border border-default
+          `inline-flex h-(--height) min-w-(--height) items-center justify-center rounded-4 border border-current/15
           @prop-size-small/keyboard:gap-0.5
           @prop-size-small/keyboard:px-0.75
           @prop-size-small/keyboard:text-10

package/src/components/LocalTheme.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { mergeProps } from '@base-ui/react'
+import type { DistributedOmit } from 'type-fest'
+
+import { LocalThemeContext, THEME_CLASSES, type ResolvedTheme } from '../EDSContext.ts'
+import { Render, type AsOrRenderProps, type HTMLElementProps } from './base/Render.tsx'
+
+export declare namespace LocalThemeProps {
+  interface CommonProps extends HTMLElementProps {
+    /** The theme to render the content in. */
+    theme: ResolvedTheme
+  }
+}
+
+export type LocalThemeProps = LocalThemeProps.CommonProps & AsOrRenderProps
+export type DarkProps = DistributedOmit<LocalThemeProps, 'theme'>
+export type LightProps = DistributedOmit<LocalThemeProps, 'theme'>
+
+/**
+ * Renders its content in the given theme, whatever the page's theme is. Unlike switching between
+ * `Dark` and `Light`, changing `theme` doesn't remount the content. Components that need to know
+ * the theme in JavaScript can read it with `useEDS().activeTheme`.
+ */
+export function LocalTheme({ theme, ...props }: LocalThemeProps) {
+  return (
+    <LocalThemeContext.Provider value={theme}>
+      <Render {...mergeProps({ className: THEME_CLASSES[theme] }, props)} />
+    </LocalThemeContext.Provider>
+  )
+}
+
+/**
+ * Renders its content in the dark theme, whatever the page's theme is. Components that need to know
+ * the theme in JavaScript can read it with `useEDS().activeTheme`.
+ */
+export function Dark(props: DarkProps) {
+  return <LocalTheme theme="dark" {...props} />
+}
+
+/**
+ * Renders its content in the light theme, whatever the page's theme is. Components that need to
+ * know the theme in JavaScript can read it with `useEDS().activeTheme`.
+ */
+export function Light(props: LightProps) {
+  return <LocalTheme theme="light" {...props} />
+}