@adea-ai/ui 0.100.0 → 0.101.0

package/src/components/ui/chart/chart-options.ts

@@ -45,7 +45,30 @@ const furniture = {
  */
 export type ChartScaleShape = 'cartesian' | 'radial' | 'none'
 
-const tickFont = { size: 10 }
+/**
+ * The chart's type: the UI face from the font axis and a rung of the type scale,
+ * declared as tokens like the colours.
+ *
+ * Chart.js does not inherit the page's font — it paints in its own default
+ * family — so every text a chart draws names `--font-sans` explicitly, and the
+ * chart follows `data-font` the same way it follows `.dark`. Everything is
+ * `--text-2xs`, the rung `ChartLegend` and the frame's metadata already use, so
+ * a canvas legend and an HTML one beside it are the same size.
+ *
+ * Chart.js types `size` as a number of pixels. The token is a `rem` length, so
+ * it is written as `var(--text-2xs)` here and the component resolves it to
+ * pixels with the colours (see `resolveCssVariables` and `chart.tsx`); the cast
+ * is that declaration, not a number.
+ */
+function chartFont(weight?: number) {
+  return {
+    family: 'var(--font-sans)',
+    size: 'var(--text-2xs)' as unknown as number,
+    ...(weight === undefined ? {} : { weight }),
+  }
+}
+
+const tickFont = chartFont()
 
 function scalesFor(shape: ChartScaleShape): ChartOptions['scales'] {
   if (shape === 'cartesian') {
@@ -140,7 +163,7 @@ export function chartOptions(
             boxHeight: 8,
             usePointStyle: true,
             pointStyle: 'circle',
-            font: { size: 11 },
+            font: chartFont(),
           },
         },
         tooltip: {
@@ -155,8 +178,9 @@ export function chartOptions(
           boxWidth: 8,
           boxHeight: 8,
           usePointStyle: true,
-          titleFont: { size: 11, weight: 600 },
-          bodyFont: { size: 11 },
+          titleFont: chartFont(600),
+          bodyFont: chartFont(),
+          footerFont: chartFont(),
         },
       },
       scales: scalesFor(shape),
@@ -169,17 +193,21 @@ const cssVariable = /^\s*var\(\s*(--[\w-]+)\s*(?:,\s*(.*?))?\s*\)\s*$/
 
 /**
  * Replace every `var(--token)` string in `value` — options, datasets, nested
- * arrays — with what `read` returns for the token. A token `read` cannot
+ * arrays — with what `read` returns for the token, which may be a number (a
+ * length token read as pixels). A token `read` cannot
  * resolve falls back to the `var()`'s own fallback, then to the string as
  * written. Functions and class instances pass through untouched, so scriptable
  * options and gradients keep working.
  */
-export function resolveCssVariables<T>(value: T, read: (name: string) => string | undefined): T {
+export function resolveCssVariables<T>(
+  value: T,
+  read: (name: string) => string | number | undefined
+): T {
   if (typeof value === 'string') {
     const match = cssVariable.exec(value)
     if (!match) return value
     const resolved = read(match[1]!)
-    if (resolved) return resolved as T
+    if (resolved !== undefined && resolved !== '') return resolved as T
     return (match[2] ? resolveCssVariables(match[2], read) : value) as T
   }
   if (Array.isArray(value)) {

package/src/components/ui/chart/chart.tsx

@@ -15,7 +15,7 @@ import {
   RadialLinearScale,
   Tooltip as ChartTooltip,
 } from 'chart.js'
-import type { ChartOptions, ChartType } from 'chart.js'
+import type { ChartOptions, ChartType, Plugin } from 'chart.js'
 import { cn } from '#lib/utils'
 import {
   chartOptions,
@@ -62,7 +62,9 @@ import {
  * A canvas cannot read a custom property, so the options and datasets carry
  * `var(--token)` strings and each chart resolves them against its own element
  * when it renders, and again whenever the root's attributes change — the
- * `.dark` class, `data-accent`, an inline override. See `createThemeResolver`.
+ * `.dark` class, `data-accent`, `data-font`, an inline override. The type is
+ * resolved the same way: `--font-sans` for the family and a type-scale rung for
+ * the size, so a chart follows the font axis too. See `createThemeResolver`.
  */
 
 /**
@@ -119,6 +121,23 @@ function toCanvasColor(value: string): string {
   return `rgba(${r}, ${g}, ${b}, ${Math.round(((a ?? 255) / 255) * 1000) / 1000})`
 }
 
+const length = /^(-?\d*\.?\d+)(px|rem)$/
+
+/**
+ * A token's computed value as a canvas option: a colour as an sRGB colour, a
+ * `px`/`rem` length (a type-scale rung) as the number of pixels Chart.js wants,
+ * and anything else — a font stack — as written.
+ */
+function toCanvasValue(raw: string): string | number {
+  const match = length.exec(raw)
+  if (match) {
+    const value = Number(match[1])
+    if (match[2] === 'px') return value
+    return value * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16)
+  }
+  return toCanvasColor(raw)
+}
+
 /**
  * Resolves `var(--token)` strings against a chart's element, and re-resolves
  * them when the theme changes.
@@ -127,16 +146,25 @@ function toCanvasColor(value: string): string {
  * inline tokens takes those. The observer watches every attribute on `<html>`,
  * because that is where both applications switch appearance, accent and theme
  * (`.dark`, `data-accent`, `data-theme`, inline variables); a theme axis added
- * later is covered without touching this. It is released with the chart.
+ * later is covered without touching this. It also re-resolves when a web font
+ * finishes loading: a canvas draws text once, so a chart rendered before the
+ * face selected by `data-font` arrived would otherwise keep the fallback face
+ * until something else redrew it. Both are released with the chart.
  */
 function createThemeResolver() {
   let element: HTMLElement | undefined
   const [revision, invalidate] = createSignal(undefined, { equals: false })
+  const onFontsLoaded = () => invalidate()
 
   onMount(() => {
     const observer = new MutationObserver(() => invalidate())
     observer.observe(document.documentElement, { attributes: true })
-    onCleanup(() => observer.disconnect())
+    const fonts = typeof document.fonts === 'undefined' ? undefined : document.fonts
+    fonts?.addEventListener('loadingdone', onFontsLoaded)
+    onCleanup(() => {
+      observer.disconnect()
+      fonts?.removeEventListener('loadingdone', onFontsLoaded)
+    })
   })
 
   return {
@@ -147,11 +175,11 @@ function createThemeResolver() {
       revision()
       if (!element || typeof getComputedStyle === 'undefined') return value
       const style = getComputedStyle(element)
-      const resolved = new Map<string, string | undefined>()
+      const resolved = new Map<string, string | number | undefined>()
       return resolveCssVariables(value, (name) => {
         if (!resolved.has(name)) {
           const raw = style.getPropertyValue(name).trim()
-          resolved.set(name, raw ? toCanvasColor(raw) : undefined)
+          resolved.set(name, raw ? toCanvasValue(raw) : undefined)
         }
         return resolved.get(name)
       })
@@ -343,13 +371,36 @@ export function RadarChart(props: SeriesChartProps) {
 }
 
 /**
- * A polar area chart: radial bars, for a composition.
+ * Puts the themed radial scale back on a chart `solid-chartjs` has just created.
  *
- * Its scale is left to Chart.js's polar-area defaults (`'none'` rather than
- * `'radial'`): `solid-chartjs` deletes `options.scales.r` for every chart type
- * but radar when it first creates the chart, so radial styling here would apply
- * only after the first theme change — a chart that restyles itself on a toggle.
+ * `solid-chartjs` deletes `options.scales.r` for every chart type but radar when
+ * it first creates a chart. Today that delete lands on a throwaway copy — Solid
+ * compiles `options={…}` to a getter, so its next read rebuilds the object with
+ * `r` intact — but that is an accident of how the prop is passed: a memoised or
+ * static options object would lose the scale, and the polar area would fall back
+ * to Chart.js's defaults (grey ticks on a translucent white box, which is a white
+ * box on a dark card). Restoring it from this component's own options makes the
+ * themed scale independent of both. Later option updates (every theme change)
+ * pass `r` through untouched; only creation drops it.
+ *
+ * `afterInit` runs inside Chart.js's constructor, after the options are read and
+ * before the first update builds the scales and draws, so the themed scale is in
+ * place for the first frame — no default-styled frame, and no extra update. The
+ * plugin is per instance, passed through the chart's `plugins` prop, so nothing
+ * is registered globally.
  */
+function restoreRadialScale(options: () => ChartOptions): Plugin {
+  return {
+    id: 'adea-radial-scale',
+    afterInit(chart) {
+      const scale = options().scales?.['r']
+      if (!scale) return
+      chart.options.scales = { ...chart.options.scales, r: scale }
+    },
+  }
+}
+
+/** A polar area chart: radial bars, for a composition. */
 export function PolarAreaChart(props: {
   labels: readonly string[]
   data: readonly number[]
@@ -357,9 +408,11 @@ export function PolarAreaChart(props: {
   class?: string
 }) {
   const theme = createThemeResolver()
+  const options = () => theme.resolve(chartOptions(props.options, 'radial'))
   return (
     <div ref={theme.ref} class={cn('h-64', props.class)}>
       <PolarArea
+        plugins={[restoreRadialScale(options)]}
         data={theme.resolve({
           labels: [...props.labels],
           datasets: [
@@ -371,7 +424,7 @@ export function PolarAreaChart(props: {
             },
           ],
         })}
-        options={theme.resolve(chartOptions(props.options, 'none'))}
+        options={options()}
       />
     </div>
   )

package/src/components/ui/dialog/dialog.tsx

@@ -9,6 +9,7 @@ import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { createRenderEffect, onCleanup, Show, splitProps } from 'solid-js'
 import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '#lib/overlay'
 import { cn } from '#lib/utils'
+import { headingVariants } from '../typography'
 
 type FocusCycle = {
   content: HTMLElement
@@ -327,7 +328,7 @@ export function DialogTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
     <KobalteDialog.Title
-      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

package/src/components/ui/drawer/drawer.tsx

@@ -2,6 +2,7 @@ import DrawerPrimitive from '@corvu/drawer'
 import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
+import { headingVariants } from '../typography'
 
 /**
  * Drawer.
@@ -96,7 +97,7 @@ export function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>)
   const [local, rest] = splitProps(props, ['class'])
   return (
     <DrawerPrimitive.Label
-      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

package/src/components/ui/field/field.tsx

@@ -4,6 +4,7 @@ import { createUniqueId, Show, splitProps } from 'solid-js'
 import { Label } from '../label/label'
 import { createFormFieldContext, FormFieldContext } from '#lib/form-field'
 import { cn } from '#lib/utils'
+import { headingVariants } from '../typography'
 
 /**
  * Field.
@@ -199,9 +200,7 @@ export function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legen
     <legend
       class={cn(
         'mb-1',
-        local.variant === 'label'
-          ? 'text-sm font-medium'
-          : 'text-base font-semibold tracking-tight',
+        local.variant === 'label' ? 'text-sm font-medium' : headingVariants({ size: 'card' }),
         local.class
       )}
       {...rest}

package/src/components/ui/sheet/sheet.tsx

@@ -10,6 +10,7 @@ import { Show, splitProps } from 'solid-js'
 import { cva, type VariantProps } from '#lib/variants'
 import { cn } from '#lib/utils'
 import { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'
+import { headingVariants } from '../typography'
 
 /**
  * Sheet.
@@ -152,7 +153,10 @@ export function SheetFooter(props: ComponentProps<'div'>) {
 export function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
-    <KobalteDialog.Title class={cn('text-sm leading-none font-semibold', local.class)} {...rest} />
+    <KobalteDialog.Title
+      class={cn(headingVariants({ size: 'subsection', leading: 'none' }), local.class)}
+      {...rest}
+    />
   )
 }
 

package/src/components/ui/typography/index.ts

@@ -0,0 +1,9 @@
+export {
+  Heading,
+  headingElement,
+  headingVariants,
+  Text,
+  textElement,
+  textVariants,
+} from './typography'
+export type { HeadingProps, TextProps } from './typography'

package/src/components/ui/typography/typography.tsx

@@ -0,0 +1,205 @@
+import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'
+import { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
+import { cn } from '#lib/utils'
+
+/**
+ * Typography.
+ *
+ * The type ladder in `theme.css` has eight rungs, each with its own leading. These
+ * two components are where a rung is paired with its weight and tracking, so a call
+ * site names a *role* — a page title, a section heading, a caption — and never
+ * re-decides `text-xl font-semibold tracking-tight` for itself. Twenty call sites
+ * that each choose a size and a weight drift; twenty that name a role cannot.
+ *
+ * **Size is visual; the element is the document outline.** They are separate
+ * decisions and the API keeps them separate. Each size has a conventional default
+ * element (`display`, `title` and `page` render an `h1`, `section` an `h2`, `card`
+ * an `h3`, `subsection` an `h4`) so the common case needs no prop, but the default
+ * is a convenience, not a coupling: a card-sized title that is the first heading
+ * in a settings section is an `h2`, so it says `as="h2"`. Never pick a `size` to get
+ * a heading level, and never pick an element to get a size.
+ *
+ * Headings are 600, and weights stop at 600 — on a dark surface a bold word blooms.
+ * Leading comes from the rung; `leading="none"` is for a title whose surrounding
+ * stack already sets the rhythm (a card or dialog header), and is the only other
+ * option.
+ */
+export const headingVariants = cva('font-semibold', {
+  variants: {
+    size: {
+      /** 30px. An app-level headline — a first-run or empty-app screen. Once per app. */
+      display: 'text-3xl tracking-tight',
+      /** 24px. A landing title or a headline figure larger than a stat's. */
+      title: 'text-2xl tracking-tight',
+      /** 20px. The title of a page (`PageHeaderTitle`). */
+      page: 'text-xl tracking-tight',
+      /** 18px. A section heading inside a page (`PageSection`). */
+      section: 'text-lg tracking-tight',
+      /** 16px. A card, dialog, drawer or settings-section title. */
+      card: 'text-base tracking-tight',
+      /** 14px. A heading inside a compact surface: a sheet, a chart, a column. */
+      subsection: 'text-sm',
+    },
+    leading: {
+      /** The rung's own line-height from `theme.css`. */
+      rung: '',
+      /** Line-height 1, for a title whose container's gap sets the rhythm. */
+      none: 'leading-none',
+    },
+    /** Tabular figures, so a row of numbers can be compared without digits shifting. */
+    numeric: {
+      true: 'tabular-nums',
+    },
+    tone: {
+      /** Inherit the surrounding colour — right on every surface by construction. */
+      inherit: '',
+      foreground: 'text-foreground',
+      muted: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    size: 'section',
+    leading: 'rung',
+    tone: 'inherit',
+  },
+})
+
+/**
+ * The conventional element for each heading size. Exported so a test (and a
+ * reader) can see the whole mapping in one place; pass `as` to depart from it.
+ */
+export const headingElement = {
+  display: 'h1',
+  title: 'h1',
+  page: 'h1',
+  section: 'h2',
+  card: 'h3',
+  subsection: 'h4',
+} as const
+
+type HeadingVariantProps = VariantProps<typeof headingVariants>
+type HeadingSize = keyof typeof headingElement
+
+export type HeadingProps<T extends ValidComponent = 'h2'> = PolymorphicProps<
+  T,
+  HeadingVariantProps & {
+    class?: string
+  }
+>
+
+export function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>) {
+  const [local, rest] = splitProps(props as HeadingProps & { as?: ValidComponent }, [
+    'as',
+    'size',
+    'leading',
+    'numeric',
+    'tone',
+    'class',
+  ])
+
+  return (
+    <Polymorphic
+      as={local.as ?? headingElement[(local.size ?? 'section') as HeadingSize]}
+      data-slot="heading"
+      class={cn(
+        headingVariants({
+          size: local.size,
+          leading: local.leading,
+          numeric: local.numeric,
+          tone: local.tone,
+        }),
+        local.class
+      )}
+      {...(rest as ComponentProps<'h2'>)}
+    />
+  )
+}
+
+/**
+ * Text.
+ *
+ * Everything that is not a heading. `text-sm` is the interface default, not 16px,
+ * and it carries three weights by role: 400 for body copy, 500 for a label or
+ * control text, 600 for emphasis. Below it, `caption` (12px) is metadata and
+ * `micro` (11px, 500) is the floor — keyboard keys and the status bar. `code` is
+ * the mono face at 12px, for anything a user compares character by character.
+ *
+ * `tone` is a separate axis from `variant` because "secondary" is a colour
+ * decision, not a size: a muted caption and a muted body line are both common.
+ * The default inherits, so text on a filled surface picks up that surface's
+ * foreground without the caller restating it.
+ *
+ * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.
+ */
+export const textVariants = cva('', {
+  variants: {
+    variant: {
+      /** 14px / 400. Body copy and descriptions. */
+      body: 'text-sm',
+      /** 14px / 500. Labels, control text, list-row titles. */
+      label: 'text-sm font-medium',
+      /** 14px / 600. Emphasis inside body copy. */
+      strong: 'text-sm font-semibold',
+      /** 12px / 400. Metadata, secondary rows, units. */
+      caption: 'text-xs',
+      /** 11px / 500. The floor: keyboard keys, the status bar. */
+      micro: 'text-2xs font-medium',
+      /** 12px mono. Ids, paths, hashes, inline code. */
+      code: 'font-mono text-xs',
+    },
+    tone: {
+      inherit: '',
+      foreground: 'text-foreground',
+      muted: 'text-muted-foreground',
+    },
+    numeric: {
+      true: 'tabular-nums',
+    },
+  },
+  defaultVariants: {
+    variant: 'body',
+    tone: 'inherit',
+  },
+})
+
+export const textElement = {
+  body: 'p',
+  label: 'span',
+  strong: 'span',
+  caption: 'span',
+  micro: 'span',
+  code: 'code',
+} as const
+
+type TextVariantProps = VariantProps<typeof textVariants>
+type TextVariant = keyof typeof textElement
+
+export type TextProps<T extends ValidComponent = 'p'> = PolymorphicProps<
+  T,
+  TextVariantProps & {
+    class?: string
+  }
+>
+
+export function Text<T extends ValidComponent = 'p'>(props: TextProps<T>) {
+  const [local, rest] = splitProps(props as TextProps & { as?: ValidComponent }, [
+    'as',
+    'variant',
+    'tone',
+    'numeric',
+    'class',
+  ])
+
+  return (
+    <Polymorphic
+      as={local.as ?? textElement[(local.variant ?? 'body') as TextVariant]}
+      data-slot="text"
+      class={cn(
+        textVariants({ variant: local.variant, tone: local.tone, numeric: local.numeric }),
+        local.class
+      )}
+      {...(rest as ComponentProps<'p'>)}
+    />
+  )
+}

package/src/index.ts

@@ -74,6 +74,7 @@ export * from './components/ui/toast'
 export * from './components/ui/toggle'
 export * from './components/ui/toggle-group'
 export * from './components/ui/tooltip'
+export * from './components/ui/typography'
 
 /* --- Motion -------------------------------------------------------------- */
 export * from './components/motion'