@smart-grid/themes

Monorepo / npm release 1.2.0 (stable 1.x).

Shared CSS for Smart Grid: light and dark presets (smart-light / smart-dark), toolbar, filters, pagination, Columns | Filters tool panel, chart panel, tree and master/detail affordances, and focus states. Pair with @smart-grid/react, @smart-grid/angular, or @smart-grid/js.

Live demo & docs: https://smart-grid-mu.vercel.app/

The grid host needs a theme class (smart-light or smart-dark). Framework components set this from the theme input/prop; vanilla createSmartGrid applies it on the root element.

What's new in 1.2.0

• Right-side tool panel layout (smart-grid__main--with-panel), collapsed panel strip, column resize handle styles.
• Header filter overflow fixes; pinned column width tokens. See CHANGELOG.md.

Install

npm install @smart-grid/themes

No runtime dependency on @smart-grid/core — CSS only.

Usage (recommended)

Import the package export (resolves to dist/smart-grid.css on npm):

@import "@smart-grid/themes/smart-grid.css";

// React / Vite / webpack
import "@smart-grid/themes/smart-grid.css";

Angular angular.json

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": ["src/styles.css", "node_modules/@smart-grid/themes/dist/smart-grid.css"]
          }
        }
      }
    }
  }
}

Or @import "@smart-grid/themes/smart-grid.css"; in src/styles.css (same as the docs site).

Plain HTML

<link rel="stylesheet" href="/node_modules/@smart-grid/themes/dist/smart-grid.css" />

Theme classes

| Class on grid root | Preset | | --- | --- | | smart-light (default) | Light borders, white surface | | smart-dark | Dark slate surface |

Override tokens on .smart-grid or .smart-grid.smart-dark, for example --sg-accent, --sg-border, --sg-bg (see source CSS).

Wiring theme in adapters

| Adapter | How | | --- | --- | | React SmartGrid | theme="smart-light" or theme="smart-dark" | | Angular <smart-grid> | [theme]="'smart-dark'" | | Vanilla createSmartGrid | theme: "smart-light" in options |

Package contents (npm)

| Path | Purpose | | --- | --- | | dist/smart-grid.css | Primary stylesheet (built on prepack) | | src/smart-grid.css | Source copy (same content; for deep links / monorepo) | | README.md, CHANGELOG.md, LICENSE | Docs and MIT licence |

Exports map:

• @smart-grid/themes → ./dist/smart-grid.css
• @smart-grid/themes/smart-grid.css → ./dist/smart-grid.css
• @smart-grid/themes/src/smart-grid.css → source path (backward compatible)

Publish checklist (maintainers)

From repo root, after bumping version in lockstep with other @smart-grid/* packages:

npm --workspace @smart-grid/themes run build
npm pack -w @smart-grid/themes
# inspect tarball: dist/smart-grid.css, LICENSE, README.md
npm publish -w @smart-grid/themes --access public

prepack runs build automatically so dist/ is fresh in the published tarball.

Related packages

• @smart-grid/core — logic only (no CSS).
• @smart-grid/react / @smart-grid/angular / @smart-grid/js — UI adapters.

Links

• Homepage / demo: smart-grid-mu.vercel.app
• Repository: github.com/rajkishorsahu89/smart-grid
• Issues: github.com/rajkishorsahu89/smart-grid/issues

License

MIT — see LICENSE in this package.