@lo-tek/interfaces 0.0.0 → 0.37.0

package/src/react.ts

@@ -0,0 +1,411 @@
+import { accordion } from "./components/css/accordion/accordion.js"
+import { alert } from "./components/css/alert/alert.js"
+import { avatar } from "./components/css/avatar/avatar.js"
+import { badge } from "./components/css/badge/badge.js"
+import { breadcrumbs } from "./components/css/breadcrumbs/breadcrumbs.js"
+import { button } from "./components/css/button/button.js"
+import { card } from "./components/css/card/card.js"
+import { checkbox } from "./components/css/checkbox/checkbox.js"
+import { divider } from "./components/css/divider/divider.js"
+import { errorText } from "./components/css/error-text/error-text.js"
+import { fieldset, legend } from "./components/css/fieldset/fieldset.js"
+import { fileUpload } from "./components/css/file-upload/file-upload.js"
+import { heading } from "./components/css/heading/heading.js"
+import { helpText } from "./components/css/help-text/help-text.js"
+import { icon } from "./components/css/icon/icon.js"
+import { input } from "./components/css/input/input.js"
+import { label } from "./components/css/label/label.js"
+import { link } from "./components/css/link/link.js"
+import { list } from "./components/css/list/list.js"
+import { pagination } from "./components/css/pagination/pagination.js"
+import { paragraph } from "./components/css/paragraph/paragraph.js"
+import { progress } from "./components/css/progress/progress.js"
+import { radio } from "./components/css/radio/radio.js"
+import { search } from "./components/css/search/search.js"
+import { select } from "./components/css/select/select.js"
+import {
+  fieldStates,
+  isFieldState,
+  isRequiredMarker,
+  managedNames,
+  rememberManaged,
+  requiredMarkers,
+} from "./components/css/shared.js"
+import { skeleton } from "./components/css/skeleton/skeleton.js"
+import { skipLink } from "./components/css/skip-link/skip-link.js"
+import { spinner } from "./components/css/spinner/spinner.js"
+import { srOnly } from "./components/css/sr-only/sr-only.js"
+import { switchControl } from "./components/css/switch/switch.js"
+import { table, tableSort } from "./components/css/table/table.js"
+import { tag } from "./components/css/tag/tag.js"
+import { textarea } from "./components/css/textarea/textarea.js"
+import { toggleGroup } from "./components/css/toggle-group/toggle-group.js"
+import { tooltip } from "./components/css/tooltip/tooltip.js"
+import { dialog } from "./components/frame/dialog/dialog.js"
+import { errorSummary } from "./components/frame/error-summary/error-summary.js"
+import {
+  computeFieldAttributes,
+  createFieldId,
+  type FieldOptions,
+} from "./components/frame/field/field-core.js"
+import { popover } from "./components/frame/popover/popover.js"
+import { sessionTimeout } from "./components/frame/session-timeout/session-timeout.js"
+import { suggestion } from "./components/frame/suggestion/suggestion.js"
+import {
+  type TabsWithStateOptions,
+  tabsWithState,
+} from "./components/frame/tabs/tabs.js"
+import { connectionStatus } from "./components/standalone/connection-status/connection-status.js"
+import { toast } from "./components/standalone/toast/toast.js"
+import { type Attributes, setAttributes as setHtmlAttributes } from "./dom.js"
+
+// The types of the events, so `addEventListener` is typed also for someone
+// who only imports this entry point. Without the line the import disappeared
+// from the `.d.ts` file, and `HTMLElementEventMap` was never extended.
+export type { LtEventMap } from "./components/events.js"
+
+/**
+ * The same API as `lt`, but with `className` and `htmlFor`.
+ *
+ * The rest of the system returns `class` and `for`, as the attributes are
+ * actually named in HTML. React accepts them, and they end up correctly in
+ * the DOM, but the development build writes "Invalid DOM property `class`.
+ * Did you mean `className`?" to the console, once for each attribute name. It
+ * is noise in every app that uses the components, and it teaches the reader
+ * to ignore the console.
+ *
+ * ```ts
+ * import { lt } from "@lo-tek/interfaces/react"
+ *
+ * <button {...lt.button({ variant: "secondary" })}>Save draft</button>
+ * ```
+ *
+ * The call sites are identical to the rest of the system; only the import
+ * path differs. This is a plain renaming of keys, so the package gets no
+ * dependency on React from it.
+ *
+ * Astro and plain HTML take `class` and `for` as they are. There you use
+ * `@lo-tek/interfaces` directly.
+ */
+
+/**
+ * Gives the keys the names React expects, and the values the types React
+ * expects.
+ *
+ * `tabindex` is not only a different name: in HTML the value is a string, and
+ * in React `tabIndex` is a number. When we left the string, `lt.tabs()` came
+ * out with `tabIndex: "0"`, and TypeScript rejected it in every React app. It
+ * worked in the browser, since React converts the value itself, so the bug
+ * only showed up as a type error for the consumer.
+ */
+export type ReactAttributes<T> = {
+  [K in keyof T as K extends "class"
+    ? "className"
+    : K extends "for"
+      ? "htmlFor"
+      : K extends "tabindex"
+        ? "tabIndex"
+        : K extends "autocomplete"
+          ? "autoComplete"
+          : K]: K extends "tabindex" ? number : T[K]
+}
+
+/**
+ * The attributes that have another name in React.
+ *
+ * `tabindex` came with the compound builder functions, and `autocomplete`
+ * with the suggestion field. Without the renaming React warns about every
+ * one of them.
+ *
+ * `aria-*` and `data-*`, on the other hand, stay as they are. React passes
+ * them on unchanged, and renaming them would give invalid attributes.
+ *
+ * `react.browser.test.ts` calls every builder function here with every
+ * allowed value it declares, collects all attribute names in the result,
+ * including those in lists and nested levels, and rejects every name React
+ * spells differently. The list there is React's and is longer than the four
+ * we rename, so a builder function that one day outputs `readonly` or
+ * `maxlength` stops there and not in a consumer's console.
+ */
+const REACT_NAMES: Record<string, string> = {
+  class: "className",
+  for: "htmlFor",
+  tabindex: "tabIndex",
+  autocomplete: "autoComplete",
+}
+
+export function toReactAttributes<T extends Record<string, unknown>>(
+  attributes: T,
+): ReactAttributes<T> {
+  const result: Record<string, unknown> = {}
+  for (const [name, value] of Object.entries(attributes)) {
+    // `tabindex` is a string in HTML and a number in React. Everything else
+    // passes straight through: it is the names that differ, not the values.
+    result[REACT_NAMES[name] ?? name] =
+      name === "tabindex" ? Number(value) : value
+  }
+  // The new object manages the same as the old one, under the new names, so
+  // `setAttributes` below can clean up as much as the main entry point.
+  const names = managedNames(attributes)
+  if (names)
+    rememberManaged(
+      result,
+      names.map((name) => REACT_NAMES[name] ?? name),
+    )
+  return result as ReactAttributes<T>
+}
+
+/** The names back to HTML, for `setAttributes`. */
+const HTML_NAMES: Record<string, string> = Object.fromEntries(
+  Object.entries(REACT_NAMES).map(([html, react]) => [react, html]),
+)
+
+/**
+ * A set as the builder functions here return it, with `className`,
+ * `htmlFor` and `tabIndex` as a number.
+ */
+export type ReactSet = Record<string, string | number | boolean | undefined>
+
+/**
+ * Writes a set from this entry point back to the HTML names.
+ *
+ * `setAttribute` writes the name as given, and in an HTML document it becomes
+ * lower case: `className` became the attribute `classname`, and `htmlFor`
+ * became `htmlfor`. The new object manages the same as the set it came from,
+ * so what is gone in the next call is cleaned up.
+ */
+function toHtmlAttributes(set: ReactSet): Attributes {
+  const result: Attributes = {}
+  for (const [name, value] of Object.entries(set)) {
+    result[HTML_NAMES[name] ?? name] =
+      typeof value === "number" ? String(value) : value
+  }
+  const names = managedNames(set)
+  if (names)
+    rememberManaged(
+      result,
+      names.map((name) => HTML_NAMES[name] ?? name),
+    )
+  return result
+}
+
+/**
+ * Like `lt.setAttributes` in the main entry point, for the sets from here.
+ *
+ * A React app reaches the DOM through a `ref`, and then naturally uses `lt`
+ * from this entry point. Passed straight to the main entry point's
+ * `setAttributes`, `className` became the attribute `classname`, and the
+ * cleanup did not find the builder function behind the set. Here the names
+ * are translated back first.
+ */
+export function setAttributes(
+  element: Element | null | undefined,
+  ...sets: ReactSet[]
+): void {
+  setHtmlAttributes(element, ...sets.map((set) => toHtmlAttributes(set)))
+}
+
+/**
+ * Wraps a builder function so the return value gets the React names.
+ *
+ * The signature is written as an intersection type so TypeScript can infer
+ * both the options type and the extra fields attached to the function, that
+ * is `variants`, `isVariant` and the others, in one go.
+ */
+function forReact<Options, Result extends Record<string, unknown>, Extra>(
+  fn: ((options?: Options) => Result) & Extra,
+): ((options?: Options) => ReactAttributes<Result>) & Extra {
+  const wrapped = (options?: Options) => toReactAttributes(fn(options))
+  return Object.assign(wrapped, fn)
+}
+
+/**
+ * Re-exported from the main entry point.
+ *
+ * `field.mdx` points to it in a section that tells the reader to import from
+ * `@lo-tek/interfaces/react`, and without this a React consumer who follows
+ * the advice gets "createFieldId is not exported". It is safe only when the
+ * markup is rendered once; in a React component `useId()` is the answer,
+ * also in an app without a server.
+ */
+export { createFieldId }
+
+export const lt = {
+  accordion: forReact(accordion),
+  alert: forReact(alert),
+  avatar: forReact(avatar),
+  badge: forReact(badge),
+  breadcrumbs: forReact(breadcrumbs),
+  button: forReact(button),
+  card: forReact(card),
+  checkbox: forReact(checkbox),
+  divider: forReact(divider),
+  errorText: forReact(errorText),
+  fieldset: forReact(fieldset),
+  heading: forReact(heading),
+  fileUpload: forReact(fileUpload),
+  helpText: forReact(helpText),
+  icon: forReact(icon),
+  input: forReact(input),
+  label: forReact(label),
+  legend: forReact(legend),
+  link: forReact(link),
+  list: forReact(list),
+  pagination: forReact(pagination),
+  paragraph: forReact(paragraph),
+  radio: forReact(radio),
+  search: forReact(search),
+  select: forReact(select),
+  skeleton: forReact(skeleton),
+  skipLink: forReact(skipLink),
+  progress: forReact(progress),
+  spinner: forReact(spinner),
+  srOnly: forReact(srOnly),
+  switch: forReact(switchControl),
+  toggleGroup: forReact(toggleGroup),
+  tooltip: forReact(tooltip),
+  table: forReact(table),
+  tableSort: Object.assign(
+    (options?: Parameters<typeof tableSort>[0]) => {
+      const built = tableSort(options)
+      return {
+        header: built.header,
+        button: toReactAttributes(built.button),
+      }
+    },
+    { isDirection: tableSort.isDirection },
+  ),
+  tag: forReact(tag),
+  textarea: forReact(textarea),
+
+  /**
+   * Wires a whole field, with `className` and `htmlFor` on the label.
+   *
+   * `control`, `help` and `error` have no keys that need renaming, and are
+   * therefore the same in both entry points.
+   */
+  field: (options: FieldOptions) => {
+    const field = computeFieldAttributes(options)
+    return { ...field, label: toReactAttributes(field.label) }
+  },
+
+  /**
+   * The compound builder functions return one attribute set per element,
+   * and each set must be renamed on its own. `host` has `tabindex`, and the
+   * panels in `lt.tabs()` have both `tabindex` and `class`.
+   */
+  errorSummary: (options: Parameters<typeof errorSummary>[0] = {}) => {
+    const built = errorSummary(options)
+    return {
+      host: toReactAttributes(built.host),
+      title: toReactAttributes(built.title),
+    }
+  },
+
+  dialog: Object.assign(
+    (options: Parameters<typeof dialog>[0]) => {
+      const built = dialog(options)
+      return {
+        host: built.host,
+        dialog: toReactAttributes(built.dialog),
+        header: toReactAttributes(built.header),
+        title: toReactAttributes(built.title),
+        subtitle: toReactAttributes(built.subtitle),
+        body: toReactAttributes(built.body),
+        footer: toReactAttributes(built.footer),
+      }
+    },
+    {
+      dialog: dialog.dialog,
+      header: dialog.header,
+      title: dialog.title,
+      subtitle: dialog.subtitle,
+      body: dialog.body,
+      footer: dialog.footer,
+      colors: dialog.colors,
+      isColor: dialog.isColor,
+    },
+  ),
+
+  popover: Object.assign(
+    (options: Parameters<typeof popover>[0]) => {
+      const built = popover(options)
+      return {
+        host: built.host,
+        trigger: toReactAttributes(built.trigger),
+        panel: toReactAttributes(built.panel),
+      }
+    },
+    { isPlacement: popover.isPlacement },
+  ),
+
+  /**
+   * The whole state, not just the links: React reports a mismatch for every
+   * attribute the component writes on an element React has rendered. See
+   * `tabsWithState`.
+   */
+  tabs: (options: TabsWithStateOptions) => {
+    const built = tabsWithState(options)
+    return {
+      list: toReactAttributes(built.list),
+      item: toReactAttributes(built.item),
+      tabs: built.tabs.map(toReactAttributes),
+      panels: built.panels.map(toReactAttributes),
+    }
+  },
+
+  suggestion: (options: Parameters<typeof suggestion>[0]) => {
+    const built = suggestion(options)
+    return {
+      ...built,
+      label: toReactAttributes(built.label),
+      control: toReactAttributes(built.control),
+      list: toReactAttributes(built.list),
+      options: built.options.map(toReactAttributes),
+      empty: toReactAttributes(built.empty),
+      status: toReactAttributes(built.status),
+      value: toReactAttributes(built.value),
+    }
+  },
+
+  toast: (options: Parameters<typeof toast>[0] = {}) => {
+    const built = toast(options)
+    return {
+      host: toReactAttributes(built.host),
+      message: toReactAttributes(built.message),
+      close: toReactAttributes(built.close),
+    }
+  },
+
+  sessionTimeout: Object.assign(
+    (options: Parameters<typeof sessionTimeout>[0]) => {
+      const built = sessionTimeout(options)
+      return {
+        host: toReactAttributes(built.host),
+        dialog: toReactAttributes(built.dialog),
+        title: toReactAttributes(built.title),
+        text: toReactAttributes(built.text),
+        count: toReactAttributes(built.count),
+        live: toReactAttributes(built.live),
+        actions: toReactAttributes(built.actions),
+        extend: toReactAttributes(built.extend),
+        logout: toReactAttributes(built.logout),
+      }
+    },
+    {
+      dialog: sessionTimeout.dialog,
+      title: sessionTimeout.title,
+      text: sessionTimeout.text,
+      count: sessionTimeout.count,
+      actions: sessionTimeout.actions,
+    },
+  ),
+  connectionStatus: forReact(connectionStatus),
+
+  setAttributes,
+
+  states: fieldStates,
+  isState: isFieldState,
+  markers: requiredMarkers,
+  isMarker: isRequiredMarker,
+} as const

package/src/register.ts

@@ -0,0 +1,43 @@
+/**
+ * Registers all the web components in one call.
+ *
+ * Each component has its own `defineLt*`, and an app that only uses the field
+ * can settle for `defineLtField()` and keep the rest out of its bundle. But
+ * most apps use several, and a demo app had seven calls in a `useEffect`,
+ * that is, after the first paint. Then the elements in the markup are plain
+ * `HTMLElement`s when React paints them, and the first call to
+ * `reportSuccess()` came before the effect. One call, at import, closes the
+ * gap.
+ *
+ * Like the individual functions, it does nothing on a server, so it can sit
+ * at the top of a module that runs in both places.
+ */
+
+import { defineLtDialog } from "./components/frame/dialog/lt-dialog.js"
+import { defineLtErrorSummary } from "./components/frame/error-summary/lt-error-summary.js"
+import { defineLtField } from "./components/frame/field/lt-field.js"
+import { defineLtPopover } from "./components/frame/popover/lt-popover.js"
+import { defineLtSessionTimeout } from "./components/frame/session-timeout/lt-session-timeout.js"
+import { defineLtSuggestion } from "./components/frame/suggestion/lt-suggestion.js"
+import { defineLtTabs } from "./components/frame/tabs/lt-tabs.js"
+import { defineLtConnectionStatus } from "./components/standalone/connection-status/lt-connection-status.js"
+import { defineLtToast } from "./components/standalone/toast/lt-toast.js"
+
+// The types of the events and tag names, so `querySelector("lt-dialog")` and
+// `addEventListener` are typed also for someone who only imports this entry
+// point. Without the line the imports above disappeared from the `.d.ts`
+// file, and neither `HTMLElementEventMap` nor `HTMLElementTagNameMap` was
+// extended.
+export type { LtEventMap } from "./components/events.js"
+
+export function defineLt(): void {
+  defineLtField()
+  defineLtTabs()
+  defineLtErrorSummary()
+  defineLtPopover()
+  defineLtSuggestion()
+  defineLtDialog()
+  defineLtToast()
+  defineLtSessionTimeout()
+  defineLtConnectionStatus()
+}

package/src/tailwind/tailwind.css

@@ -0,0 +1,169 @@
+/* Generated. Edit tokens.ts or generate-tailwind.ts, not this file. */
+
+/*
+ * LO-TEK's values as a Tailwind theme.
+ *
+ * The file is plain CSS, and the package has no dependency on Tailwind. It
+ * is the Tailwind version in your app that reads it, so two versions cannot
+ * conflict: there is no other one here.
+ *
+ * Requires Tailwind 4 and `tokens.css` to be loaded, since the values point there.
+ *
+ * ```css
+ * @layer theme, base, lotek, lotek-theme, components, utilities;
+ *
+ * @import "tailwindcss";
+ * @import "@lo-tek/interfaces/tokens.css";
+ * @import "@lo-tek/interfaces/tailwind.css";
+ * ```
+ *
+ * The order of the first line matters. Layers count in the order they are
+ * first mentioned, and the winner is the last layer, whatever the
+ * specificity. With `lotek` before `base`, Tailwind's Preflight beats our
+ * components and resets, for example, the background of a button. With it
+ * after `utilities`, our components beat `p-6` and the rest of your
+ * classes. Between `base` and `components` is the only place both work.
+ *
+ * `lotek-theme` is the layer a theme from `lotek theme` goes in. It must be
+ * in the line even if you have no theme yet: the theme declares only
+ * `lotek, lotek-theme`, and an `@layer` statement does not move layers that
+ * are already declared, so without the place here the theme ends up last,
+ * after `utilities`, and beats your classes.
+ *
+ * Everything we add is called `lt-`, like the other classes in the system.
+ * That way we leave Tailwind's own values alone: `bg-neutral-100` still
+ * means the same.
+ */
+
+@theme inline {
+  /*
+   * The spacing unit. Tailwind computes `p-4` as `calc(var(--spacing) * 4)`,
+   * so with `--lt-spacing-1` as the unit, `p-4` is four times the unit, that
+   * is, `--lt-spacing-4` as long as the scale stays as it is. The steps are
+   * values of their own, not computed from the unit: if you rewrite the
+   * scale, rewrite every step, not only `--lt-spacing-1`, or the components
+   * and the classes drift apart.
+   */
+  --spacing: var(--lt-spacing-1);
+
+  /* The colours, one class per cell in the matrix */
+  --color-lt-accent-border: var(--lt-color-accent-border);
+  --color-lt-accent-border-strong: var(--lt-color-accent-border-strong);
+  --color-lt-accent-border-subtle: var(--lt-color-accent-border-subtle);
+  --color-lt-accent-content: var(--lt-color-accent-content);
+  --color-lt-accent-fill: var(--lt-color-accent-fill);
+  --color-lt-accent-surface: var(--lt-color-accent-surface);
+  --color-lt-accent-text: var(--lt-color-accent-text);
+  --color-lt-accent-text-strong: var(--lt-color-accent-text-strong);
+  --color-lt-accent-text-subtle: var(--lt-color-accent-text-subtle);
+
+  --color-lt-brand1-border: var(--lt-color-brand1-border);
+  --color-lt-brand1-border-strong: var(--lt-color-brand1-border-strong);
+  --color-lt-brand1-border-subtle: var(--lt-color-brand1-border-subtle);
+  --color-lt-brand1-content: var(--lt-color-brand1-content);
+  --color-lt-brand1-fill: var(--lt-color-brand1-fill);
+  --color-lt-brand1-surface: var(--lt-color-brand1-surface);
+  --color-lt-brand1-text: var(--lt-color-brand1-text);
+  --color-lt-brand1-text-strong: var(--lt-color-brand1-text-strong);
+  --color-lt-brand1-text-subtle: var(--lt-color-brand1-text-subtle);
+
+  --color-lt-brand2-border: var(--lt-color-brand2-border);
+  --color-lt-brand2-border-strong: var(--lt-color-brand2-border-strong);
+  --color-lt-brand2-border-subtle: var(--lt-color-brand2-border-subtle);
+  --color-lt-brand2-content: var(--lt-color-brand2-content);
+  --color-lt-brand2-fill: var(--lt-color-brand2-fill);
+  --color-lt-brand2-surface: var(--lt-color-brand2-surface);
+  --color-lt-brand2-text: var(--lt-color-brand2-text);
+  --color-lt-brand2-text-strong: var(--lt-color-brand2-text-strong);
+  --color-lt-brand2-text-subtle: var(--lt-color-brand2-text-subtle);
+
+  --color-lt-brand3-border: var(--lt-color-brand3-border);
+  --color-lt-brand3-border-strong: var(--lt-color-brand3-border-strong);
+  --color-lt-brand3-border-subtle: var(--lt-color-brand3-border-subtle);
+  --color-lt-brand3-content: var(--lt-color-brand3-content);
+  --color-lt-brand3-fill: var(--lt-color-brand3-fill);
+  --color-lt-brand3-surface: var(--lt-color-brand3-surface);
+  --color-lt-brand3-text: var(--lt-color-brand3-text);
+  --color-lt-brand3-text-strong: var(--lt-color-brand3-text-strong);
+  --color-lt-brand3-text-subtle: var(--lt-color-brand3-text-subtle);
+
+  --color-lt-danger-border: var(--lt-color-danger-border);
+  --color-lt-danger-border-strong: var(--lt-color-danger-border-strong);
+  --color-lt-danger-border-subtle: var(--lt-color-danger-border-subtle);
+  --color-lt-danger-content: var(--lt-color-danger-content);
+  --color-lt-danger-fill: var(--lt-color-danger-fill);
+  --color-lt-danger-surface: var(--lt-color-danger-surface);
+  --color-lt-danger-text: var(--lt-color-danger-text);
+  --color-lt-danger-text-strong: var(--lt-color-danger-text-strong);
+  --color-lt-danger-text-subtle: var(--lt-color-danger-text-subtle);
+
+  --color-lt-disabled-surface: var(--lt-color-disabled-surface);
+  --color-lt-disabled-text: var(--lt-color-disabled-text);
+
+  --color-lt-neutral-border: var(--lt-color-neutral-border);
+  --color-lt-neutral-border-strong: var(--lt-color-neutral-border-strong);
+  --color-lt-neutral-border-subtle: var(--lt-color-neutral-border-subtle);
+  --color-lt-neutral-canvas: var(--lt-color-neutral-canvas);
+  --color-lt-neutral-content: var(--lt-color-neutral-content);
+  --color-lt-neutral-fill: var(--lt-color-neutral-fill);
+  --color-lt-neutral-raised: var(--lt-color-neutral-raised);
+  --color-lt-neutral-surface: var(--lt-color-neutral-surface);
+  --color-lt-neutral-text: var(--lt-color-neutral-text);
+  --color-lt-neutral-text-strong: var(--lt-color-neutral-text-strong);
+  --color-lt-neutral-text-subtle: var(--lt-color-neutral-text-subtle);
+
+  --color-lt-overlay: var(--lt-color-overlay);
+
+  --color-lt-success-border: var(--lt-color-success-border);
+  --color-lt-success-border-strong: var(--lt-color-success-border-strong);
+  --color-lt-success-border-subtle: var(--lt-color-success-border-subtle);
+  --color-lt-success-content: var(--lt-color-success-content);
+  --color-lt-success-fill: var(--lt-color-success-fill);
+  --color-lt-success-surface: var(--lt-color-success-surface);
+  --color-lt-success-text: var(--lt-color-success-text);
+  --color-lt-success-text-strong: var(--lt-color-success-text-strong);
+  --color-lt-success-text-subtle: var(--lt-color-success-text-subtle);
+
+  --color-lt-visited-border: var(--lt-color-visited-border);
+  --color-lt-visited-border-strong: var(--lt-color-visited-border-strong);
+  --color-lt-visited-border-subtle: var(--lt-color-visited-border-subtle);
+  --color-lt-visited-content: var(--lt-color-visited-content);
+  --color-lt-visited-fill: var(--lt-color-visited-fill);
+  --color-lt-visited-surface: var(--lt-color-visited-surface);
+  --color-lt-visited-text: var(--lt-color-visited-text);
+  --color-lt-visited-text-strong: var(--lt-color-visited-text-strong);
+  --color-lt-visited-text-subtle: var(--lt-color-visited-text-subtle);
+
+  --color-lt-warning-border: var(--lt-color-warning-border);
+  --color-lt-warning-border-strong: var(--lt-color-warning-border-strong);
+  --color-lt-warning-border-subtle: var(--lt-color-warning-border-subtle);
+  --color-lt-warning-content: var(--lt-color-warning-content);
+  --color-lt-warning-fill: var(--lt-color-warning-fill);
+  --color-lt-warning-surface: var(--lt-color-warning-surface);
+  --color-lt-warning-text: var(--lt-color-warning-text);
+  --color-lt-warning-text-strong: var(--lt-color-warning-text-strong);
+  --color-lt-warning-text-subtle: var(--lt-color-warning-text-subtle);
+
+  /* Text sizes */
+  --text-lt-xxs: var(--lt-font-size-xxs);
+  --text-lt-xs: var(--lt-font-size-xs);
+  --text-lt-s: var(--lt-font-size-s);
+  --text-lt-m: var(--lt-font-size-m);
+  --text-lt-l: var(--lt-font-size-l);
+  --text-lt-xl: var(--lt-font-size-xl);
+  --text-lt-xxl: var(--lt-font-size-xxl);
+  --text-lt-mega: var(--lt-font-size-mega);
+
+  /* Widths for page layout */
+  --container-lt-xs: 100%;
+  --container-lt-sm: 576px;
+  --container-lt-md: 960px;
+  --container-lt-lg: 1152px;
+  --container-lt-xl: 1536px;
+  --container-lt-aside: 384px;
+  --container-lt-aside-narrow: 288px;
+  --container-lt-wide-content: 768px;
+
+  /* The shadow under surfaces that sit above the page */
+  --shadow-lt-overlay: var(--lt-shadow-overlay);
+}