Installation

npm

npm install @bnotk/dsx

Package Exports

The package provides several export paths:

Import path	Description
`@bnotk/dsx/css/index.css`	All CSS modules combined
`@bnotk/dsx/css/tokens.css`	Design tokens only
`@bnotk/dsx/css/buttons.css`	Individual CSS module
`@bnotk/dsx/components/dialog.js`	Individual Web Component
`@bnotk/dsx`	All Web Components (barrel import)
`@bnotk/dsx/icons/sprite.svg`	SVG icon sprite

CSS Setup

Option 1: Import everything

@import '@bnotk/dsx/css/index.css';

Option 2: Selective imports

/* Always include tokens first */
@import '@bnotk/dsx/css/tokens.css';
@import '@bnotk/dsx/css/reset.css';

/* Then only the modules you need */
@import '@bnotk/dsx/css/buttons.css';
@import '@bnotk/dsx/css/inputs.css';

Option 3: Link tags (no bundler)

<link rel="stylesheet" href="node_modules/@bnotk/dsx/css/tokens.css">
<link rel="stylesheet" href="node_modules/@bnotk/dsx/css/buttons.css">

Web Components Setup

ES Module Import

// Import individual components
import '@bnotk/dsx/components/dialog.js';
import '@bnotk/dsx/components/table.js';

// Or import all at once
import '@bnotk/dsx';

Angular Setup

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@bnotk/dsx/components/dialog.js';

@Component({
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<dsx-dialog heading="Hi"><p slot="body">Hello</p></dsx-dialog>`
})
export class MyComponent {}

Font Setup

Include the Public Sans variable font for the default DS2 theme:

@import '@bnotk/dsx/css/typography.css';

Or load the font yourself and skip the typography module:

<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300..800&display=swap" rel="stylesheet">

XNA font delivery

When you switch the root theme to data-ui-theme="xna", --ds2-font-family resolves to Open Sans, Arial, sans-serif.

@bnotk/dsx does not publish Open Sans files.
Load Open Sans in the host shell (for example from your existing XNA/KSS asset or a self-hosted open-sans.css) before enabling the XNA theme.
If you skip that step, browsers fall back to Arial/sans-serif and the result will be functional but not pixel-faithful to the XNA references.

The docs site bundles a docs-only /open-sans.css so both the shell and embedded demos stay aligned with the XNA look.

Icon delivery

Use SVG icons, not emoji or icon fonts, when you need the XNA/KSS treatment:

<svg class="dsx-icon dsx-icon--sm dsx-icon--main" viewBox="0 0 16 16" aria-hidden="true">
  <use href="/icons/sprite.svg#info"></use>
</svg>

@bnotk/dsx/icons/sprite.svg is the package export. If your environment needs self-contained markup (for example an iframe demo), inline the same SVG paths and keep filled icons on currentColor or add stroke="currentColor" for outlined shapes.