CoBEES Design System

The CoBEES design system provides a reusable, framework agnostic styling foundation for CoBEES applications.

It layers Colorado brand tokens on top of USWDS and compiles into a single distributable CSS bundle that can be consumed by multiple FE applications (React and non-React).

Philosphy

The design system follows a layered architecture:

1. Primitive tokens -- raw color values, such as co-blue-60, co-blue-80. These are only to be consumed by the semantic tokens.
2. Semantic tokens -- design itnent, such as action.primary, brand.primary
3. USWDS theme mapping -- configuration of USWDS theme variables to align system roles, such as buttons, headers, links, etc, with CoBEES semantic tokens.
4. Brand utilities -- minimal helper classes for explicit brand application, such as brand-text
5. Compiled bundle -- portable CSS artifact

Demo

To facilitate visually inspecting the tokens/themes/css variables prior to importing them elsewhere, an index.html file has been created.

To generate the file upon updating the design system, run make demo.

Installation (Internal Use)

Install via Git (temporary approach during early development):

npm install git+https://dev.azure.com/SOC-OIT/CoBEES/_git/cbms-design-system#v0.1.1

Then import the compiled CSS:

import '@cobees/design-system/dist/cobees-design-system.css';

No additional USWDS import is required -- the bundle includes it.

Build

The tl;dr is make install clean build demo but see below for the all the npm commands that make wraps.

Install dependencies:

npm install

Generate tokesn:

npm run build:tokens

Build the distributable CSS:

npm run build

the compiled artifact will be available at:

dist/cobees-design-system.css

Versioning

This package uses semantic versioning.

Current status 0.x (experimental)

Breaking changes may occur while the token architecture stabilizes.