Core

The Core package provides the foundation for all UCDS web components. It includes:

• BaseElement — the base class extended by all UCDS components.
• Base styles — global UCalgary Design System styles for standard HTML elements.
• Token injector — a utility that ensures design tokens are available wherever UCDS components are used.

Installation

npm install @ucalgary-design-system/core

Usage

Extending BaseElement

When creating a new component, always extend BaseElement:

import { BaseElement } from '@ucalgary-design-system/core';
import { customElement } from 'lit/decorators.js';

@customElement('ucds-my-component')
export class MyComponent extends BaseElement {}

This ensures consistent lifecycle behavior and integration with UCDS utilities.

Token injector

All generated UCDS components automatically include the token injector in their entry file. This means you do not need to call it manually when consuming components from the library.

You might only need to call it directly if:

• You are building a custom component outside of the generator.
• You want global tokens available in a project without using UCDS components.

import { injectGlobalTokens } from '@ucalgary-design-system/core';

injectGlobalTokens();

💡 In most cases, you can ignore this. The injector runs automatically when you use UCDS components.

Development

Build the package locally:

npm run build