Presets API Reference

A grid restyled by a second <link>, nothing else

<link rel="stylesheet" href="https://unpkg.com/@toclocoinc/lattice-grid/lattice-grid.min.css">
<link rel="stylesheet" href="https://unpkg.com/@toclocoinc/lattice-grid/modules/presets/material3.css">

// createGrid(...) is unchanged - the preset is CSS only.

A grid restyled by a second <link>, reading a page's own Bootstrap palette

<style>:root { --bs-primary: #6f42c1; }</style> // e.g. a Bootstrap theme override, already on the page
<link rel="stylesheet" href="https://unpkg.com/@toclocoinc/lattice-grid/lattice-grid.min.css">
<link rel="stylesheet" href="https://unpkg.com/@toclocoinc/lattice-grid/modules/presets/bootstrap5.css">

// createGrid(...) is unchanged - the preset is CSS only, and the grid's
// accent resolves to #6f42c1, the page's own --bs-primary, not Bootstrap's
// stock #0d6efd.

Static preset: fluent2.css (Fluent 2)

A second stylesheet, loaded after lattice-grid.css: every MUST role of the Fluent 2 web theme - brand #0F6CBD, the neutral surface roles, a 4px radius, the Segoe UI stack, Fluent's shadow4/shadow8 elevation mapped onto the contract's two shadows - set for both data-theme="light" and data-theme="dark" (Fluent's dark neutrals). No JavaScript, no code change: the same second-<link> mechanism as material3.css, above.

<link rel="stylesheet" href="https://unpkg.com/@toclocoinc/lattice-grid/lattice-grid.min.css">
<link rel="stylesheet" href="https://unpkg.com/@toclocoinc/lattice-grid/modules/presets/fluent2.css">

// createGrid(...) is unchanged - the preset is CSS only.

The live route: themeFromMui(theme)

themeFromMui reads a real MUI createTheme() object's palette (including mode), typography and shape, and returns { cssText, apply(element) }: cssText is the tokens as one ready-to-inject .lattice { --lattice-*: …; } rule, and apply(element) sets the same tokens as inline custom properties and returns the element. Call it again with the theme that changed and apply its result - there is no state to update in place. It is deliberately partial: a MUI theme carries no "hover background" or "focus ring width" role, so it is meant to be layered over material3.css, which fills those in, rather than to replace it. Nothing here imports @mui/material: theme is any plain object shaped like one, so this module carries no dependency on MUI at all.

const { themeFromMui } = await import('../packages/modules/presets/index.js');

// Shaped like a real @mui/material default theme - no MUI import needed.
const theme = {
  palette: {
    mode: 'light',
    primary: { main: '#1976d2', contrastText: '#fff' },
    error: { main: '#d32f2f' }, warning: { main: '#ed6c02' },
    success: { main: '#2e7d32' }, info: { main: '#0288d1' },
    background: { default: '#fff', paper: '#fff' },
    text: { primary: 'rgba(0, 0, 0, 0.87)', secondary: 'rgba(0, 0, 0, 0.6)' },
    divider: 'rgba(0, 0, 0, 0.12)',
    grey: { 50: '#fafafa', 400: '#bdbdbd', 600: '#757575' },
  },
  typography: { fontFamily: 'Roboto,"Helvetica","Arial",sans-serif', body2: { fontSize: '0.875rem' }, fontWeightMedium: 500 },
  shape: { borderRadius: 4 },
};

const { cssText } = themeFromMui(theme);
const accent = cssText.match(/--lattice-accent:\s*([^;]+);/)[1];
const radius = cssText.match(/--lattice-radius:\s*([^;]+);/)[1];
return `${accent} ${radius}`;                     // MUI's real default primary and shape.borderRadius

A theme's mode picks the dark tokens through the palette MUI already resolved - createTheme({ palette: { mode: 'dark' } })'s background.default is #121212 and its primary is #90caf9, and themeFromMui reads those, not a second dark table of its own. React re-exports themeFromMui from @toclocoinc/lattice-grid/modules/react (as do Vue and Svelte); it needs no framework at all, so importing it straight from modules/presets works everywhere.

Static preset: antd5.css (Ant Design 5)

Another second stylesheet, loaded after lattice-grid.css, the same static mechanism as material3.css above: every MUST role of the Ant Design 5 default and dark algorithm - primary #1677ff, colorBgContainer/colorBgLayout, colorText/colorTextSecondary, colorBorder/colorSplit, a 6px radius, the Table component's own header fill and row-hover tone (#fafafa), the selected-row tone (#e6f4ff), and antd's system font stack - set for both data-theme="light" and data-theme="dark". No JavaScript, no code change, and no dependency on antd itself: the values are antd 5.9.4's own published token defaults, transcribed once into CSS.

<link rel="stylesheet" href="https://unpkg.com/@toclocoinc/lattice-grid/lattice-grid.min.css">
<link rel="stylesheet" href="https://unpkg.com/@toclocoinc/lattice-grid/modules/presets/antd5.css">

// createGrid(...) is unchanged - the preset is CSS only.

There is no themeFromAntd(token) live route yet - only the static stylesheet, which is all this card ships.

Type reference

Generated from the type declarations, so it always matches the release. Each surface lists its properties, its methods and the events it raises as three tables; an option or value type lists its members once.

Design-system presets

MuiTheme

The slice of a real MUI `Theme` (`createTheme()`'s return value) {@link themeFromMui} reads. Loose and hand-shaped rather than imported from `@mui/material` - this package ships zero runtime dependencies (CONTRACTS), so `themeFromMui` takes any plain object with this shape, not only a real MUI `Theme` instance.

MuiThemeResult

What {@link themeFromMui} hands back.

Properties

Methods

Events

No events.