Release 0.0.7-alpha

We’re excited to announce that Excelsior is now available for use! You can explore and install our published packages here: NYS Design System on NPM. This release includes one new component nys-avatar and our new nys-styles package to style the components and make design tokens available for use.

What's New

New Component: nys-avatar

This is a UI element for displaying a user icon or image.

Features:

• Personalize avatars with custom icons, initials, or images
• Display an image in the avatar, set the image and label attributes
• Supports a custom icon from the <nys-icon> library
  ↳Created by Robert Chen (@NovaCat35)

New Style Package: @nysds/styles

• A centralized CSS file for core design tokens (nysds.min.css)
• Agency-specific theme stylesheets (e.g., theme-health.min.css, theme-environment.min.css) that can override the components and UI elements using themed variables
• Utility classes the cover common styling needs for grid layout, display styles, flexbox, floats, opacity, and z-index
• Integration support for the design system’s code components, which will reference these variables in their Shadow DOM This CSS framework will help us get consistent theming and styling across all New York State digital products.

Features

Global Stylesheet: The excelsior.min.css file includes foundational design tokens, like spacing, typography, and default theme colors. To use, reference this on pages where you'll be using the variables or the design system components:

<link rel="stylesheet" href="[path-to-dir]/nysds.min.css" />

Agency-Specific Themes: Additional theme stylesheets are published that provide agency-specific color tokens:

• Administration: theme-admin.min.css
• Business: theme-business.min.css
• Recreation and Environment: theme-environment.min.css
• Health and Human Services: theme-health.min.css
• Local and Regional Authorities: theme-local.min.css
• Public Safety: theme-safety.min.css
• Transportation and Utilities: theme-transportation.min.css

To override the default theme:

<link rel="stylesheet" href="[path-to-dir]/nysds.min.css" />
<link rel="stylesheet" href="[path-to-dir]/theme-health.min.css" />

Utility classes: Excelsior includes a set of utility classes for common styling needs, including grid layout, display styles, flexbox, floats, opacity, and z-index. These classes are designed to be used directly in your HTML to quickly apply common styles without writing custom CSS.

To include the full utility classes, simply include the utility CSS file:

<link rel="stylesheet" href="[path-to-dir]/excelsior-full.min.css" />

Shadow DOM Integration: The design system’s web components dynamically reference these tokens using CSS variables within their Shadow DOM. For example:

:host {
  --_nys-button-background-color: var(--nys-button-background-color, var(--nys-color-theme, #0044cc));
}
button {
  background-color: var(--_nys-button-background-color);
}

Theme Variables: Each theme includes a predefined set of CSS variables (e.g., --nys-color-theme-faint, --nys-color-theme-stronger) tailored to the agency-specific color palette. These variables are used by components and design elements in the library to give residents a cohesive and branded user experience. Including an agency-specific theme stylesheet will override the default colors, and change these color of the components and elements to reflect the theme for a given agency group. This makes it easy to adapt the design system to align with each agency's branding requirements.
↳Created by Jesse Gardner (@plasticmind) in #136

For full component updates, bug fixes, and the detailed changelog:

See the full developer release notes for v0.0.7-alpha →