@smwb/ui-styles

Framework-agnostic LESS source and design tokens for the @smwb design system — the single source of truth for component styles (smwb-* classes), foundation tokens, and runtime --smui-* CSS variables. Consumed by @smwb/ui-react, @smwb/ui-solid, and compiled into @smwb/ui-css.

This package ships LESS source only — no JavaScript. For a ready-to-use stylesheet, use @smwb/ui-css.

Install

npm install @smwb/ui-styles

What's inside

| Path | Purpose | | --- | --- | | less/components.less | Aggregate entry — @imports foundation + every component | | less/foundation/* | Tokens: palette, spacing, radius, elevation, breakpoints, sizing | | less/default/globals/default.variables.less | Semantic colors + per-component LESS variables | | less/variables.less | Emits :root { --smui-* } (light) + [data-theme="dark"] | | less/components/<name>/<name>.entry.less | Per-component entry (self-contained) | | less/headless-base.less | Foundation + theme variables only (no component rules) | | less/themes/* | Built-in theme packs (summer, material) | | normalize.css | Optional CSS reset |

Usage

Compile the full stylesheet

lessc -rp=/ node_modules/@smwb/ui-styles/less/components.less app.css

Selective bundle (only the components you use)

@import (less) "node_modules/@smwb/ui-styles/less/headless-base.less";
@import (less) "node_modules/@smwb/ui-styles/less/components/button/button.entry.less";
@import (less) "node_modules/@smwb/ui-styles/less/components/textField/textField.entry.less";

Import <name>.entry.less (not bare components/<name>/<name>.less) so LESS variables resolve without duplicating the global :root output.

Theming

Override tokens at compile time via a theme.config (imported last, so your values win), or at runtime via the --smui-* CSS variables. Exports: ./components.less, ./headless-base.less, ./less/*, ./normalize.css.

License

MIT