@remix-run/ui 0.3.0 → 0.5.0

package/src/{components/select/select.tsx → select/primitives.tsx}

@@ -1,11 +1,8 @@
 import {
   attrs,
-  createElement,
   createMixin,
-  css,
   on,
   ref,
-  type CSSMixinDescriptor,
   type Dispatched,
   type ElementProps,
   type Handle,
@@ -14,19 +11,16 @@ import {
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
-import * as button from '../button/button.tsx'
-import { Glyph } from '../glyph/glyph.tsx'
-import * as listbox from '../listbox/listbox.ts'
-import * as popover from '../popover/popover.ts'
-import { theme } from '../../theme/theme.ts'
-import { hiddenTypeahead } from '../../interactions/typeahead/typeahead-mixin.ts'
-import { onKeyDown } from '../../interactions/keydown/keydown.ts'
-import { waitForCssTransition } from '../../utils/wait-for-css-transition.ts'
-import { wait } from '../../utils/wait.ts'
-import type { AnchorOptions } from '../anchor/anchor.ts'
+import * as listbox from '../listbox/index.ts'
+import * as popover from '../popover/index.ts'
+import { hiddenTypeahead } from '../shared/typeahead.ts'
+import { waitForCssTransition } from '../shared/wait-for-css-transition.ts'
+import { wait } from '../shared/wait.ts'
+import { onKeyDown } from './keydown.ts'
+import type { AnchorOptions } from '../anchor/index.ts'
 
 const SELECT_CHANGE_EVENT = 'rmx:select-change' as const
-const LABEL_SWAP_DELAY_MS = 75
+const DEFAULT_LABEL_SWAP_DELAY_MS = 75
 
 type SelectChangeHandler<target extends HTMLElement> = (
   event: Dispatched<SelectChangeEvent, target>,
@@ -65,6 +59,7 @@ export interface SelectContextProps {
   defaultLabel: string
   defaultValue?: string | null
   disabled?: boolean
+  labelSwapDelayMs?: number
   name?: string
 }
 
@@ -236,7 +231,7 @@ function SelectProvider(handle: Handle<SelectContextProps, SelectContextValue>):
     }
 
     await Promise.all([handle.update(), waitForCssTransition(surfaceRef, handle.signal)])
-    await wait(LABEL_SWAP_DELAY_MS) // UX delay label swap for clear value change
+    await wait(handle.props.labelSwapDelayMs ?? DEFAULT_LABEL_SWAP_DELAY_MS)
     if (handle.signal.aborted) return
     displayedLabel = selectedLabel
     state = 'closed'
@@ -495,41 +490,6 @@ const hiddenInputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = creat
     })
 })
 
-const selectTriggerCss: CSSMixinDescriptor = css({
-  minHeight: theme.control.height.sm,
-  width: '100%',
-  paddingInline: theme.space.md,
-  paddingInlineEnd: theme.space.sm,
-  display: 'grid',
-  gridTemplateColumns: 'minmax(0, 1fr) auto',
-  alignItems: 'center',
-  gap: theme.space.sm,
-  borderRadius: theme.radius.md,
-  backgroundImage: 'none',
-  border: '0.5px solid transparent',
-  boxShadow: 'none',
-  fontSize: theme.fontSize.xs,
-  textAlign: 'left',
-  backgroundColor: theme.surface.lvl3,
-  color: theme.colors.text.secondary,
-  '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible':
-    {
-      backgroundColor: theme.surface.lvl4,
-      color: theme.colors.text.primary,
-    },
-  '&:active': {
-    backgroundColor: theme.surface.lvl3,
-  },
-  '&:focus-visible': {
-    outline: `2px solid ${theme.colors.focus.ring}`,
-    outlineOffset: '2px',
-  },
-  '&:disabled': {
-    opacity: 0.6,
-  },
-})
-
-export const triggerStyle = selectTriggerCss
 export const Context = SelectProvider
 export const hiddenInput = hiddenInputMixin
 export const list = listMixin
@@ -552,51 +512,3 @@ export function onSelectChange<target extends HTMLElement>(
 ): ReturnType<typeof on<target, typeof SELECT_CHANGE_EVENT>> {
   return on(SELECT_CHANGE_EVENT, handler, captureBoolean)
 }
-
-function SelectLabel(handle: Handle): () => RemixNode {
-  let context = getSelectContext(handle)
-
-  return () => <span mix={button.labelStyle}>{context.displayedLabel}</span>
-}
-
-export function Select(handle: Handle<SelectProps>): () => RemixNode {
-  return () => {
-    let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props
-
-    return (
-      <select.Context
-        defaultLabel={defaultLabel}
-        defaultValue={defaultValue}
-        disabled={disabled}
-        name={name}
-      >
-        <button {...buttonProps} mix={[button.baseStyle, triggerStyle, select.trigger(), mix]}>
-          <SelectLabel />
-          <Glyph mix={button.iconStyle} name="chevronVertical" />
-        </button>
-        <popover.Context>
-          <div mix={[popover.surfaceStyle, select.popover()]}>
-            <div mix={[popover.contentStyle, listbox.listStyle, select.list()]}>{children}</div>
-          </div>
-        </popover.Context>
-        {name && <input mix={select.hiddenInput()} />}
-      </select.Context>
-    )
-  }
-}
-
-export function Option(handle: Handle<SelectOptionProps>): () => RemixNode {
-  return () => {
-    let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props
-
-    return (
-      <div
-        {...divProps}
-        mix={[listbox.optionStyle, select.option({ value, label, disabled, textValue }), mix]}
-      >
-        <Glyph mix={listbox.glyphStyle} name="check" />
-        <span mix={listbox.labelStyle}>{children ?? handle.props.label}</span>
-      </div>
-    )
-  }
-}

package/src/server/stream.ts

@@ -1,5 +1,6 @@
 import type { ComponentHandle, FrameHandle, Key, RemixNode } from '../runtime/component.ts'
 import type { ElementType, ElementProps, RemixElement } from '../runtime/jsx.ts'
+import type { ElementFunction } from '../runtime/element-function.ts'
 import { Fragment, createComponent, createFrameHandle, Frame } from '../runtime/component.ts'
 import { isEntry, type EntryComponent } from '../runtime/client-entries.ts'
 import {
@@ -89,7 +90,6 @@ interface RenderContext {
   onError: (error: unknown) => void
   parentVNode?: VNode
   styleCache: Map<string, { selector: string; css: string }>
-  emittedStyles: Set<string>
   resolveFrame: (
     src: string,
     target?: string,
@@ -203,7 +203,6 @@ export function renderToStream(
     onError,
     resolveFrame: options?.resolveFrame ?? defaultResolveFrame,
     styleCache: new Map(),
-    emittedStyles: new Set(),
     pendingFrames: [],
     hydrationData: new Map(),
     unresolvedHydrationData: new Map(),
@@ -436,7 +435,7 @@ function buildSegment(node: RemixNode, context: RenderContext, frameState: SsrFr
       return buildElementSegment(tag, props, context, frameState)
     }
 
-    if (typeof type === 'function') {
+    if (isElementFunction(type)) {
       if (type === Frame) {
         return buildFrameSegment(node, context, frameState)
       }
@@ -788,8 +787,8 @@ function sanitizeReturnedSsrMixinProps(props: ElementProps): ElementProps {
 
 function resolveReturnedSsrMixDescriptors(
   value: unknown,
-): Array<{ type: Function; args: unknown[] }> | null {
-  let descriptors: Array<{ type: Function; args: unknown[] }> = []
+): Array<{ type: ElementFunction; args: unknown[] }> | null {
+  let descriptors: Array<{ type: ElementFunction; args: unknown[] }> = []
   if (!collectReturnedSsrMixDescriptors(value, descriptors)) {
     return null
   }
@@ -799,7 +798,7 @@ function resolveReturnedSsrMixDescriptors(
 
 function collectReturnedSsrMixDescriptors(
   value: unknown,
-  output: Array<{ type: Function; args: unknown[] }>,
+  output: Array<{ type: ElementFunction; args: unknown[] }>,
 ): boolean {
   if (!value) {
     return true
@@ -829,7 +828,11 @@ function isSsrMixinElement(
   return '__rmxMixinElementType' in value
 }
 
-function isSsrMixinDescriptor(value: unknown): value is { type: Function; args: unknown[] } {
+function isElementFunction(value: unknown): value is ElementFunction {
+  return typeof value === 'function'
+}
+
+function isSsrMixinDescriptor(value: unknown): value is { type: ElementFunction; args: unknown[] } {
   if (!value || typeof value !== 'object' || isRemixElement(value)) {
     return false
   }
@@ -839,7 +842,7 @@ function isSsrMixinDescriptor(value: unknown): value is { type: Function; args:
 }
 
 function buildComponentSegment(
-  type: Function,
+  type: ElementFunction,
   props: any,
   context: RenderContext,
   componentId: string,
@@ -923,7 +926,7 @@ function createHydrationPropsReplacer(context: RenderContext, frameState: SsrFra
     }
 
     // Component function: render synchronously, then unwrap its result
-    if (typeof type === 'function') {
+    if (isElementFunction(type)) {
       let vnode = createVNode(type, props)
       if (context.parentVNode) {
         vnode._parent = context.parentVNode
@@ -1052,17 +1055,17 @@ async function resolveClientEntries(
 ): Promise<void> {
   if (context.unresolvedHydrationData.size === 0) return
 
-  let resolvedEntries = new Map<string, ResolvedClientEntry>()
+  let resolvedEntries = new Map<EntryComponent, ResolvedClientEntry>()
 
   for (let [hydrationId, unresolvedHydrationData] of context.unresolvedHydrationData) {
     let { entryId, component, props } = unresolvedHydrationData
-    let resolvedEntry = resolvedEntries.get(entryId)
+    let resolvedEntry = resolvedEntries.get(component)
     if (!resolvedEntry) {
       resolvedEntry = resolveClientEntry
         ? await Promise.resolve(resolveClientEntry(entryId, component))
         : resolveDefaultClientEntry(entryId, component)
       validateResolvedClientEntry(entryId, resolvedEntry)
-      resolvedEntries.set(entryId, resolvedEntry)
+      resolvedEntries.set(component, resolvedEntry)
     }
 
     context.hydrationData.set(hydrationId, {
@@ -1180,8 +1183,6 @@ function finalizeHtml(html: string, context: RenderContext): string {
     }
   }
 
-  html = dedupeServerStyleTagsInHtml(html, context.emittedStyles)
-
   // Append aggregated hydration/frame data script at the end
   let rmxData = buildRmxDataScript(context)
   if (rmxData) {
@@ -1252,24 +1253,12 @@ function renderStyleTag(
 ): string {
   let wrappedCss = wrapStyleForLayer(selector, css, layer)
   if (!wrappedCss) return ''
-  return `<style data-rmx="${escapeHtml(selector)}">${wrappedCss}</style>`
+  return `<style data-rmx="${escapeHtml(selector)}">${escapeStyleText(wrappedCss)}</style>`
 }
 
-function readStyleTagAttribute(attrs: string, name: string): string | null {
-  let match = attrs.match(new RegExp(`\\b${name}=(?:"([^"]*)"|'([^']*)')`))
-  if (!match) return null
-  return match[1] ?? match[2] ?? null
-}
-
-function dedupeServerStyleTagsInHtml(html: string, seenStyles: Set<string>): string {
-  return html.replace(/<style\b([^>]*)>[\s\S]*?<\/style>/gi, (match, attrs) => {
-    let selector = readStyleTagAttribute(attrs, 'data-rmx')
-    if (!selector) return match
-
-    if (seenStyles.has(selector)) return ''
-    seenStyles.add(selector)
-    return match
-  })
+function escapeStyleText(css: string): string {
+  // A literal "</style" closes an HTML style element even when it appears inside a CSS string.
+  return css.replace(/</g, '\\3C ')
 }
 
 function buildRmxDataScript(context: RenderContext): string {
@@ -1303,6 +1292,12 @@ function escapeScriptJson(json: string): string {
 // the handler's `finalizeHtml` emits selector-addressed `<style>` tags in its HTML, and on the client,
 // the `adoptServerStyleTag` MutationObserver (stylesheet.ts) picks it up anywhere in the
 // document and adopts the CSS into an adopted stylesheet.
+//
+// Style tags are intentionally NOT deduped across frame boundaries: each frame
+// owns its style rules independently on the client (per-frame refcounted
+// adoption), so every frame's HTML must carry the full set of style tags its
+// content references — even when a sibling frame or the enclosing document
+// already emitted the same selector.
 async function streamPendingFrames(
   context: RenderContext,
   controller: ReadableStreamDefaultController,
@@ -1323,7 +1318,6 @@ async function streamPendingFrames(
         try {
           let { html, tail } = await promise
           if (context.signal.aborted) return
-          html = dedupeServerStyleTagsInHtml(html, context.emittedStyles)
 
           // Stream as a template element (first chunk only)
           let templateHtml = `<template id="${frameId}">${escapeTemplateContent(html)}</template>`

package/src/shared/focus-styles.ts

@@ -0,0 +1,2 @@
+export const controlFocusShadow =
+  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px light-dark(#3573F6, #6eaaff), 0 0 0 4px light-dark(rgba(53, 115, 246, 0.1), rgba(110, 170, 255, 0.18)), 0 6px 32px 4px light-dark(rgba(53, 115, 246, 0.08), rgba(110, 170, 255, 0.14)), inset 0 0 8px 1px light-dark(rgba(53, 115, 246, 0.05), rgba(110, 170, 255, 0.1))'

package/src/shared/icons.tsx

@@ -0,0 +1,62 @@
+import { createElement } from '@remix-run/ui'
+import type { Handle, Props, RemixElement } from '@remix-run/ui'
+
+type IconProps = Omit<Props<'svg'>, 'children'>
+
+function icon(
+  handle: Handle<IconProps>,
+  children: RemixElement | readonly RemixElement[],
+): RemixElement {
+  let hiddenByDefault =
+    handle.props['aria-hidden'] === undefined &&
+    handle.props['aria-label'] === undefined &&
+    handle.props['aria-labelledby'] === undefined
+
+  return createElement(
+    'svg',
+    {
+      ...handle.props,
+      'aria-hidden': hiddenByDefault ? true : handle.props['aria-hidden'],
+      fill: handle.props.fill ?? 'none',
+      viewBox: handle.props.viewBox ?? '0 0 16 16',
+      xmlns: 'http://www.w3.org/2000/svg',
+    },
+    children,
+  )
+}
+
+function strokedPath(d: string): RemixElement {
+  return createElement('path', {
+    d,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '1.5',
+  })
+}
+
+export function AddIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('M8 3.25v9.5M3.25 8h9.5'))
+}
+
+export function CheckIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('m3.5 8.25 2.75 2.75L12.5 4.75'))
+}
+
+export function ChevronDownIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('m3.75 6.25 4.25 4 4.25-4'))
+}
+
+export function ChevronRightIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('m6 4 4 4-4 4'))
+}
+
+export function ChevronVerticalIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () =>
+    icon(handle, [strokedPath('m3.75 6.5 4.25-4 4.25 4'), strokedPath('m3.75 9.5 4.25 4 4.25-4')])
+}
+
+export function SearchIcon(handle: Handle<IconProps>): () => RemixElement {
+  return () => icon(handle, strokedPath('M7.25 12.25a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm3.54-1.46 3 3'))
+}

package/src/shared/listbox-popover-styles.ts

@@ -0,0 +1,146 @@
+import { css, type CSSMixinDescriptor } from '@remix-run/ui'
+
+import { componentStyleValues as styles } from './style-values.ts'
+
+const popupViewportClampMaxHeight = '50dvh'
+
+const popoverSurfaceTransitionCss: CSSMixinDescriptor = css({
+  opacity: 0,
+  '&:popover-open': {
+    opacity: 1,
+  },
+  '&:not(:popover-open)': {
+    pointerEvents: 'none',
+    transition: 'opacity 180ms ease-in, overlay 180ms ease-in, display 180ms ease-in',
+    transitionBehavior: 'allow-discrete',
+  },
+})
+
+const popoverSurfaceCss: CSSMixinDescriptor = css({
+  position: 'fixed',
+  inset: 'auto',
+  margin: 0,
+  padding: styles.space.none,
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 0,
+  minWidth: '12rem',
+  maxWidth: `min(24rem, calc(100vw - (${styles.space.lg} * 2)))`,
+  maxHeight: popupViewportClampMaxHeight,
+  border: `1px solid ${styles.colors.border.subtle}`,
+  borderRadius: styles.radius.lg,
+  backgroundColor: styles.surface.lvl0,
+  color: styles.colors.text.primary,
+  overflow: 'hidden',
+  boxShadow: `${styles.shadow.xs}, ${styles.shadow.md}`,
+  '&::backdrop': {
+    background: 'transparent',
+  },
+})
+
+const listCss: CSSMixinDescriptor = css({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: '1 1 auto',
+  minHeight: 0,
+  paddingBlock: styles.space.xs,
+  paddingInline: styles.space.none,
+  overflow: 'auto',
+  overscrollBehavior: 'contain',
+  outline: 'none',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  '--rmx-ui-item-inset': `calc(${styles.space.sm} + ${styles.space.xs})`,
+  '--rmx-ui-item-indicator-gap': styles.space.xs,
+  '--rmx-ui-item-indicator-width': styles.fontSize.md,
+})
+
+const itemCss: CSSMixinDescriptor = css({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  minWidth: 0,
+  minHeight: styles.control.height.md,
+  boxSizing: 'border-box',
+  position: 'relative',
+  isolation: 'isolate',
+  paddingInline: `calc(${styles.space.sm} + ${styles.space.xs})`,
+  color: styles.colors.text.primary,
+  fontFamily: styles.fontFamily.sans,
+  fontSize: styles.fontSize.sm,
+  fontWeight: styles.fontWeight.normal,
+  lineHeight: styles.lineHeight.normal,
+  textAlign: 'left',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    insetBlock: 0,
+    insetInline: styles.space.xs,
+    borderRadius: styles.radius.md,
+    backgroundColor: 'transparent',
+    pointerEvents: 'none',
+    zIndex: -1,
+  },
+  '&:focus': {
+    outline: 'none',
+  },
+  '&[data-highlighted="true"]': {
+    color: styles.colors.action.primary.foreground,
+  },
+  '&[data-highlighted="true"]::before': {
+    backgroundColor: styles.colors.action.primary.background,
+  },
+  '&[aria-disabled="true"]': {
+    opacity: 0.5,
+  },
+  scrollMarginBlock: styles.space.xs,
+  '--rmx-listbox-option-indicator-opacity': '0',
+  '&[hidden]': {
+    display: 'none',
+  },
+  '&[data-listbox-flash="true"], &[data-select-flash="true"], &[data-combobox-flash="true"]': {
+    color: styles.colors.text.primary,
+  },
+  '&[data-listbox-flash="true"]::before, &[data-select-flash="true"]::before, &[data-combobox-flash="true"]::before':
+    {
+      backgroundColor: 'transparent',
+    },
+  '&[aria-selected="true"]': {
+    '--rmx-listbox-option-indicator-opacity': '1',
+  },
+})
+
+const itemIndicatorCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0 0 var(--rmx-ui-item-indicator-width)',
+  width: 'var(--rmx-ui-item-indicator-width)',
+  minWidth: 0,
+  height: 'var(--rmx-ui-item-indicator-width)',
+  marginInlineEnd: 'var(--rmx-ui-item-indicator-gap)',
+  overflow: 'hidden',
+  color: 'currentColor',
+  opacity: 'var(--rmx-listbox-option-indicator-opacity)',
+  '& > svg': {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+  },
+})
+
+const itemLabelCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flex: '1 1 auto',
+  minWidth: 0,
+  WebkitUserSelect: 'none',
+})
+
+export const popoverSurfaceStyle = [popoverSurfaceCss, popoverSurfaceTransitionCss] as const
+export const listboxIndicatorStyle = itemIndicatorCss
+export const listboxLabelStyle = itemLabelCss
+export const listboxListStyle = listCss
+export const listboxOptionStyle = itemCss

package/src/shared/style-values.ts

@@ -0,0 +1,165 @@
+type ComponentActionColors = {
+  readonly background: string
+  readonly backgroundHover: string
+  readonly backgroundActive: string
+  readonly foreground: string
+  readonly border: string
+}
+
+type ComponentStyleValues = {
+  readonly space: {
+    readonly none: string
+    readonly xs: string
+    readonly sm: string
+    readonly md: string
+    readonly lg: string
+  }
+  readonly radius: {
+    readonly md: string
+    readonly lg: string
+    readonly xl: string
+    readonly full: string
+  }
+  readonly fontFamily: {
+    readonly sans: string
+  }
+  readonly fontSize: {
+    readonly xs: string
+    readonly sm: string
+    readonly md: string
+  }
+  readonly lineHeight: {
+    readonly normal: string
+    readonly relaxed: string
+  }
+  readonly fontWeight: {
+    readonly normal: string
+    readonly medium: string
+  }
+  readonly control: {
+    readonly height: {
+      readonly sm: string
+      readonly md: string
+      readonly lg: string
+    }
+  }
+  readonly surface: {
+    readonly lvl0: string
+    readonly lvl1: string
+    readonly lvl2: string
+    readonly lvl3: string
+    readonly lvl4: string
+  }
+  readonly shadow: {
+    readonly xs: string
+    readonly sm: string
+    readonly md: string
+  }
+  readonly colors: {
+    readonly text: {
+      readonly primary: string
+      readonly secondary: string
+      readonly muted: string
+    }
+    readonly border: {
+      readonly subtle: string
+      readonly default: string
+    }
+    readonly focus: {
+      readonly ring: string
+    }
+    readonly action: {
+      readonly primary: ComponentActionColors
+      readonly secondary: ComponentActionColors
+      readonly danger: ComponentActionColors
+    }
+  }
+}
+
+export const componentStyleValues: ComponentStyleValues = {
+  space: {
+    none: '0px',
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+  },
+  radius: {
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    full: '9999px',
+  },
+  fontSize: {
+    xs: '12px',
+    sm: '13px',
+    md: '14px',
+  },
+  fontFamily: {
+    sans: '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  },
+  lineHeight: {
+    normal: '1.45',
+    relaxed: '1.65',
+  },
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+  },
+  control: {
+    height: {
+      sm: '28px',
+      md: '32px',
+      lg: '36px',
+    },
+  },
+  surface: {
+    lvl0: 'light-dark(#ffffff, #1a1a1a)',
+    lvl1: 'light-dark(#f8f8f8, #1f1f1f)',
+    lvl2: 'light-dark(#f5f5f5, #232323)',
+    lvl3: 'light-dark(#f3f3f3, #272727)',
+    lvl4: 'light-dark(#efefef, #2c2c2c)',
+  },
+  shadow: {
+    xs: '0 1px 1px rgb(0 0 0 / 0.05)',
+    sm: '0 1px 2px rgb(0 0 0 / 0.07)',
+    md: '0 6px 18px rgb(0 0 0 / 0.08)',
+  },
+  colors: {
+    text: {
+      primary: 'light-dark(#151515, #ececec)',
+      secondary: 'light-dark(#4f4f4f, #b3b3b3)',
+      muted: 'light-dark(#6d6d6d, #b3b3b3)',
+    },
+    border: {
+      subtle: 'light-dark(#e7e7e7, #333333)',
+      default: 'light-dark(#d1d1d1, #444444)',
+    },
+    focus: {
+      ring: 'light-dark(#1A72FF, #6eaaff)',
+    },
+    action: {
+      primary: {
+        background: 'light-dark(#1A72FF, #6eaaff)',
+        backgroundHover: 'light-dark(#1463e0, #8bbcff)',
+        backgroundActive: 'light-dark(#0f55c9, #a7ccff)',
+        foreground: 'light-dark(rgb(255 255 255 / 0.92), #151515)',
+        border: 'light-dark(#1A72FF, #6eaaff)',
+      },
+      secondary: {
+        background: 'light-dark(#ffffff, #1a1a1a)',
+        backgroundHover: 'light-dark(#fbfbfb, #232323)',
+        backgroundActive: 'light-dark(#f3f3f3, #2c2c2c)',
+        foreground: 'light-dark(#202020, #ececec)',
+        border: 'light-dark(#d1d1d1, #444444)',
+      },
+      danger: {
+        background: 'light-dark(#FF3000, #ff8a70)',
+        backgroundHover: 'light-dark(#e12b00, #ff9f8a)',
+        backgroundActive: 'light-dark(#c52600, #ffb39f)',
+        foreground: 'light-dark(rgb(255 255 255 / 0.92), #151515)',
+        border: 'light-dark(#FF3000, #ff8a70)',
+      },
+    },
+  },
+}