@dynamic-widget/themes

Shared CSS for Dynamic Widget — community and enterprise chrome, underline tab navigation, forms, tables, cards, visual schema designer (.dw-schema-designer*), chart slices, designer surfaces, markdown (.dw-markdown*), file upload (.dw-field--file), virtual table scroll (.dw-table-virtual__*), and RTL layout when core sets dir="rtl" on the widget host (e.g. locale ar).

Current release: 1.2.0 — See CHANGELOG.

Live demo & docs: https://dynamic-widget-app.vercel.app/ — widget layout and tab chrome in the theming guide; schema designer at /designer.

What's new in 1.2.0

• Schema designer styles bundled into dynamic-widget.css (also available as schema-designer.css).
• Charts: --dw-chart-slice-1 … 5 (light/dark); tooltip [hidden] fix; :focus-visible on chart data points.
• Validation: --dw-sd-danger* tokens for designer field errors.

Zero runtime JavaScript. Import the stylesheet alongside any @dynamic-widget/* adapter or vanilla createDynamicWidget host.

Keywords: dynamic-widget css theme dark-mode design-tokens forms dashboard stylesheet

Install

npm install @dynamic-widget/themes

Use with @dynamic-widget/core (or a framework adapter). Themes are not pulled in automatically — add the CSS import yourself.

Usage

CSS import

@import "@dynamic-widget/themes/dynamic-widget.css";

Angular angular.json

"styles": ["node_modules/@dynamic-widget/themes/dynamic-widget.css"]

HTML

<link rel="stylesheet" href="node_modules/@dynamic-widget/themes/dynamic-widget.css" />

Bundlers (Vite, webpack)

import "@dynamic-widget/themes/dynamic-widget.css";

Package exports

| Export | Path | Notes | | --- | --- | --- | | @dynamic-widget/themes | ./src/dynamic-widget.css | Main bundle (includes schema designer via @import) | | @dynamic-widget/themes/dynamic-widget.css | ./src/dynamic-widget.css | Same as default export | | @dynamic-widget/themes/schema-designer.css | ./src/schema-designer.css | Optional split import; already in main CSS |

One import is enough for widgets + schema designer:

import "@dynamic-widget/themes/dynamic-widget.css";

Chart tokens

Slice fill colors read --dw-chart-slice-1 through --dw-chart-slice-5 on .dynamic-widget (and .dw-dark). Override in your app shell for brand alignment.

Tab bar variants are controlled by schema props (tabBar: "underline" default, "pill" optional), not separate CSS files.

Browser support

Standard CSS for evergreen browsers. No JS required.

Related packages

• @dynamic-widget/core — schema engine and DOM renderer.
• @dynamic-widget/react — React component (import this CSS once).
• @dynamic-widget/angular — Angular component (add to global styles).
• @dynamic-widget/js — vanilla host (import this CSS once).
• @dynamic-widget/enterprise — enterprise-gated widgets use the same stylesheet.

License

MIT